[2.0.1] Styling fixes, added placeholder and 404-page

assets/css/_btns.pcss

@@ -20,7 +20,7 @@
 
   .light-mode {
     & .btn {
-      @apply border-primary-600 text-primary-700 bg-gray-100;
+      @apply border-primary-600 text-primary-800 bg-gray-200;
       &:hover {
         @apply border-primary bg-primary-200 text-primary-900;
       }

assets/css/_cards.pcss

@@ -52,6 +52,21 @@
     }
   }
 
+  .vue-content-placeholders-heading__content {
+    @apply opacity-75;
+    & .vue-content-placeholders-heading__title {
+      @apply h-6 mb-5 mt-1;
+    }
+  }
+  .dark-mode {
+    & .vue-content-placeholders-heading__title {
+      @apply bg-primary;
+    }
+    & .vue-content-placeholders-heading__subtitle {
+      @apply bg-primary-400;
+    }
+  }
+
   @screen sm {
     .cards {
       & .card {

assets/css/_typography.pcss

@@ -182,7 +182,8 @@
       @apply relative my-4;
       & > .filename {
         color: var(--text-secondary);
-        @apply absolute right-0 top-0 z-10 font-mono text-sm leading-5 mr-4 mt-3;
+        text-shadow: 0 1px rgba(255,255,255,0.5);
+        @apply absolute right-0 top-0 z-10 font-mono text-sm leading-5 mr-3 mt-2;
       }
       & pre[class*="language-"] {
         background-color: var(--bg-secondary);

components/global/ColorModePicker.vue

@@ -78,10 +78,11 @@ export default {
   & .icon {
     background-color: var(--bg);
     border-color: var(--border-color-secondary);
+    color: var(--text);
 
     &:hover {
       border-color: var(--border-color);
-      @apply text-primary-900;
+      @apply text-primary-900 bg-primary-200;
     }
   }
 }

components/global/Header.vue

@@ -45,11 +45,11 @@ export default {
   & .scrim-bg {
     &::after {
       animation-name: fadeIn2;
-      background: linear-gradient(to bottom, #F3F4F6, cubic-bezier(0.15, 0, 0.45, 1), transparent);
+      background: linear-gradient(to bottom, #e5e7eb, cubic-bezier(0.15, 0, 0.45, 1), transparent);
     }
   }
   & .nuxt-link-exact-active {
-    @apply text-primary-900 border-gray-600 bg-gray-200;
+    @apply text-primary-700 border-gray-600 bg-gray-100;
   }
 }
 

components/posts/posts.vue

@@ -36,6 +36,13 @@
       </nuxt-link>
     </li>
   </ul>
+  <div v-else-if="loading" class="cards">
+    <div v-for="placeholder in placeholderClasses" :key="placeholder.id" class="card">
+      <content-placeholders :rounded="true" :class="placeholder">
+        <content-placeholders-heading />
+      </content-placeholders>
+    </div>
+  </div>
   <p v-else class="max-w-5xl mx-auto">
     {{ amount > 1 ? 'Posts not found' : 'Post not found' }}
   </p>
@@ -67,10 +74,19 @@
     data() {
       return {
         posts: [],
+        loading: true,
+      }
+    },
+    computed: {
+      placeholderClasses() {
+        const classes = ['w-full','w-2/3','w-5/6'];
+        return [...Array.from({ length: this.amount }, (v, i) => classes[i % classes.length])]; // repeats classes after one another
       }
     },
     async mounted() {
+      this.loading = true;
       this.posts = await this.fetchPosts();
+      this.loading = false;
     },
     methods: {
       formatDate(dateString) {

content/blog/2021-02-28-easy-excerpt-from-content.md

@@ -7,4 +7,16 @@ You can add an excerpt easily by writing `<!--MORE-->` in lowercase in the conte
 <!--more-->
 (It is written right before this)
 
-Then continue on with the rest of the **markdown** content.
+Then continue on with the rest of the **markdown** content.
+
+```js{4,7}[posts.vue]
+computed: {
+  placeholderClasses() {
+    const classes = ['w-full','w-2/3','w-5/6'];
+    return [...Array.from(
+      { length: this.amount },
+      (value, index) => classes[index % classes.length]
+    )]; // repeats classes after one another
+  }
+},
+```

layouts/error.vue

@@ -1,18 +1,20 @@
 <template>
-  <section>
-    <template v-if="error.statusCode === 404">
-      <h1 class="title">Page Not Found</h1>
-      <h2 class="subtitle">404</h2>
-      <p class="mb-4">Looks like you've followed a broken link or entered a URL that doesn't exist on this site.</p>
-    </template>
-    <template v-else>
-      <h1 class="title">An error occurred</h1>
-      <p class="mb-4">Looks like you've followed a broken link or entered a URL that doesn't exist on this site.</p>
-    </template>
-    <nav class="mt-12" aria-label="go to home">
-      <router-back to="/" class="block"/>
-    </nav>
-  </section>
+  <main>
+    <section>
+      <template v-if="error.statusCode === 404">
+        <h1 class="title">{{ error.message || 'Page Not Found' }}</h1>
+        <h2 class="subtitle">404</h2>
+        <p class="mb-4">Looks like you've followed a broken link or entered a URL that doesn't exist on this site.</p>
+      </template>
+      <template v-else>
+        <h1 class="title">An error occurred</h1>
+        <p class="mb-4">Looks like you've followed a broken link or entered a URL that doesn't exist on this site.</p>
+      </template>
+      <nav class="mt-12" aria-label="go to home">
+        <router-back to="/" class="block"/>
+      </nav>
+    </section>
+  </main>
 </template>
 
 <script>

nuxt.config.js

@@ -9,6 +9,9 @@ import { COLOR_MODE_FALLBACK } from './utils/globals.js'
 export default {
   target: 'static',
   components: true,
+  generate: {
+    fallback: true
+  },
   // ? The env Property: https://nuxtjs.org/api/configuration-env/
   env: {
     url:
@@ -68,7 +71,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [],
+  plugins: ['~/plugins/vue-content-placeholders.js'],
   /*
    ** Nuxt.js dev-modules
    */
@@ -115,9 +118,9 @@ export default {
   purgeCSS: {
     mode: 'postcss',
     // ? Whitelisting docs: https://v1.purgecss.com/whitelisting
-    whitelist: ['dark-mode', 'light-mode', 'btn', 'icon', 'main', 'code'],
+    whitelist: ['dark-mode', 'light-mode', 'btn', 'icon', 'main'],
     whitelistPatterns: [/^card/, /^nuxt-content/, /image$/, /title$/],
-    whitelistPatternsChildren: [/^nuxt-content/]
+    whitelistPatternsChildren: [/^nuxt-content/, /code/, /pre/, /token/, /^vue-content-placeholders/]
   },
   colorMode: {
     preference: 'system', // default value of $colorMode.preference

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntn-boilerplate",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Nuxt-Tailwind-NetlifyCMS boilerplate",
   "author": "Sven Parker <[email protected]> (https://svenparker.com)",
   "scripts": {
@@ -35,6 +35,7 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^1.16.4",
     "tailwindcss": "^1.9.6",
-    "tailwindcss-dark-mode": "^1.1.7"
+    "tailwindcss-dark-mode": "^1.1.7",
+    "vue-content-placeholders": "^0.2.1"
   }
 }

plugins/vue-content-placeholders.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueContentPlaceholders from 'vue-content-placeholders'
+
+Vue.use(VueContentPlaceholders)

static/admin/config.yml

@@ -5,6 +5,7 @@ publish_mode: editorial_workflow
 backend:
   name: git-gateway
   branch: master
+  squash_merges: true
 
 media_folder: static/img
 public_folder: /img