🔈 - Spotify integration MVP

Author: xdesro

.csscomb.json

@@ -1,27 +1,6 @@
 {
-  "remove-empty-rulesets": true,
-  "always-semicolon": true,
-  "color-case": "upper",
-  "block-indent": "  ",
-  "color-shorthand": true,
-  "element-case": "lower",
-  "eof-newline": true,
-  "leading-zero": true,
-  "quotes": "double",
-  "space-before-colon": "",
-  "space-after-colon": " ",
-  "space-before-combinator": " ",
-  "space-after-combinator": " ",
-  "space-between-declarations": "\n",
-  "space-before-opening-brace": " ",
-  "space-after-opening-brace": "\n",
-  "space-after-selector-delimiter": " ",
-  "space-before-selector-delimiter": "",
-  "space-before-closing-brace": "\n",
-  "strip-spaces": true,
-  "tab-size": true,
-  "unitless-zero": true,
   "sort-order": [
+    ["$variable", "$mixin", "$include palette-inverter", "$include grid", "$include container"],
     [
       "font",
       "font-family",
@@ -36,6 +15,7 @@
       "font-emphasize-position",
       "font-emphasize-style",
       "font-smooth",
+      "font-feature-settings",
       "line-height",
       "position",
       "z-index",
@@ -54,6 +34,31 @@
       "-ms-overflow-y",
       "clip",
       "zoom",
+      "grid",
+      "grid-area",
+      "grid-auto-columns",
+      "grid-auto-flow",
+      "grid-auto-rows",
+      "grid-column",
+      "grid-column-start",
+      "grid-column-end",
+      "grid-column-gap",
+      "grid-gap",
+      "grid-row",
+      "grid-row-end",
+      "grid-row-gap",
+      "grid-row-start",
+      "grid-template",
+      "grid-template-areas",
+      "grid-template-columns",
+      "grid-template-rows",
+      "align-content",
+      "align-items",
+      "align-self",
+      "justify-content",
+      "justify-items",
+      "justify-self",
+      "place-items",
       "flex-direction",
       "flex-order",
       "flex-pack",
@@ -67,11 +72,16 @@
       "height",
       "min-height",
       "max-height",
+      "object-fit",
       "margin",
       "margin-top",
       "margin-right",
       "margin-bottom",
       "margin-left",
+      "margin-block-start",
+      "margin-block-end",
+      "margin-inline-start",
+      "margin-inline-end",
       "padding",
       "padding-top",
       "padding-right",
@@ -80,7 +90,6 @@
       "table-layout",
       "empty-cells",
       "caption-side",
-      "@include border",
       "border-spacing",
       "border-collapse",
       "list-style",
@@ -307,7 +316,12 @@
       "box-shadow",
       "filter:progid:DXImageTransform.Microsoft.gradient",
       "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
-      "text-shadow"
+      "text-shadow",
+      "-webkit-text-fill-color",
+      "-webkit-text-stroke",
+      "-moz-appearance",
+      "-webkit-appearance",
+      "appearance"
     ]
   ]
 }

netlify.toml

@@ -0,0 +1,7 @@
+[dev]
+    command = 'npm run ✨'
+
+[build]
+    command = 'npm run 📦'
+    publish = 'dist'
+    functions = 'src/functions'

nuxt.config.js

@@ -117,11 +117,21 @@ export default {
       });
     },
   },
-  modules: ["@nuxtjs/markdownit", "@nuxtjs/dotenv", "@bazzite/nuxt-optimized-images", "@nuxtjs/feed", "@nuxtjs/pwa"],
+  modules: [
+    "@nuxtjs/markdownit",
+    "@nuxtjs/dotenv",
+    "@bazzite/nuxt-optimized-images",
+    "@nuxtjs/feed",
+    "@nuxtjs/pwa",
+    "@nuxtjs/axios",
+  ],
   buildModules: [
     // TODO: Remove when upgrading to nuxt 2.13+
     "@nuxt/components",
   ],
+  axios: {
+    baseURL: "/",
+  },
   optimizedImages: {
     optimizeImages: true,
   },

package-lock.json

@@ -28,6 +28,7 @@
   "homepage": "https://github.com/xdesro/vogue#readme",
   "dependencies": {
     "@bazzite/nuxt-optimized-images": "^0.2.2",
+    "@nuxtjs/axios": "^5.11.0",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/feed": "^1.1.0",
     "@nuxtjs/pwa": "^3.0.0-beta.20",
@@ -37,10 +38,10 @@
     "imagemin-pngquant": "^8.0.0",
     "jimp": "^0.9.8",
     "markdown-it-attrs": "^2.4.1",
+    "node-fetch": "^2.6.0",
     "nuxt": "^2.12.2",
     "prismjs": "^1.20.0",
-    "responsive-loader": "^1.2.0",
-    "spotify-web-api-js": "^1.4.0"
+    "responsive-loader": "^1.2.0"
   },
   "devDependencies": {
     "@babel/runtime-corejs2": "^7.10.1",

package.json

@@ -1,31 +1,58 @@
 .spotify {
   $this: &;
 
-  display: grid;
-  align-self: end;
-  grid-template-columns: auto 1fr;
-  grid-template-areas: "icon track" "icon artists";
   font-size: 0.6rem;
-  grid-column-gap: 1rem;
   position: relative;
-  padding-top: 1.5rem;
+  display: grid;
+  grid-column-gap: 1rem;
+  grid-template-areas: "icon track" "icon artists";
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  align-self: end;
   justify-self: start;
+  padding-top: 1.5rem;
   &:before {
-    content: "recent listening:";
+    font-family: $font--display;
+    font-size: 1rem;
+    font-style: italic;
     position: absolute;
     top: 0;
-    font-size: 1rem;
+    content: "recent listening:";
     white-space: nowrap;
-    font-style: italic;
-    font-family: $font--display;
+    color: $color--mid;
   }
   &-enter,
   &-leave-to {
-    opacity: 0;
+    // opacity: 0;
+    opacity: 0.99999;
+    #{$this}__icon,
+    #{$this}:before {
+      opacity: 0;
+    }
+    #{$this}__track {
+      transform: translateX(-50%);
+
+      clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
+    }
+    #{$this}__artists {
+      transform: translateX(-50%);
+
+      clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
+    }
   }
   &-enter-active,
   &-leave-active {
-    transition: opacity 0.5s;
+    transition: opacity 1s;
+    *,
+    &:before {
+      transition: all 0.5s;
+    }
+    #{$this}__artists {
+      transition-delay: 0.2s;
+    }
+  }
+  a {
+    text-decoration: none;
   }
   &__link {
     grid-area: icon;
@@ -34,13 +61,17 @@
     width: 1.5rem;
   }
   &__track {
-    grid-area: track;
     font-weight: 500;
+    grid-area: track;
     margin: 0;
+
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   &__artists {
     font-weight: 300;
     grid-area: artists;
+
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   &__artist {
     display: inline-block;