ui: nuxtjs.org design

nuxtjs.org/components/AnimFromCliCodeblock.vue

@@ -7,7 +7,7 @@
             <span>$&nbsp;</span
             ><span class="fromcli__yarn__createnuxtapp"
               >npx
-              <span class="text-primary-green">create-nuxt-app</span>
+              <span class="text-primary">create-nuxt-app</span>
               project-name</span
             >
           </p>
@@ -17,54 +17,54 @@
             <div class="fromcli__progressbar"></div>
           </div>
           <p class="fromcli__question1">
-            <span class="text-primary-green">? </span> Project name :
-            <span class="text-primary-green">My project</span>
+            <span class="text-primary">? </span> Project name :
+            <span class="text-primary">My project</span>
           </p>
           <p class="fromcli__question2">
-            <span class="text-primary-green">? </span> Programming language :
+            <span class="text-primary">? </span> Programming language :
             <span class="fromcli__question2__answer">Javascript</span>
           </p>
           <p class="fromcli__question2__answer1">> Javascript</p>
           <p class="fromcli__question2__answer2">&nbsp;&nbsp;Typescript</p>
           <p class="fromcli__question3">
-            <span class="text-primary-green">? </span> Package manager :
-            <span class="text-primary-green">Yarn</span>
+            <span class="text-primary">? </span> Package manager :
+            <span class="text-primary">Yarn</span>
           </p>
           <p class="fromcli__question4">
-            <span class="text-primary-green">? </span> UI Framework :
-            <span class="text-primary-green">Tailwind CSS</span>
+            <span class="text-primary">? </span> UI Framework :
+            <span class="text-primary">Tailwind CSS</span>
           </p>
           <p class="fromcli__question5">
-            <span class="text-primary-green">? </span> Nuxt.js modules :
-            <span class="text-primary-green">Axios</span>
+            <span class="text-primary">? </span> Nuxt.js modules :
+            <span class="text-primary">Axios</span>
           </p>
           <p class="fromcli__question6">
-            <span class="text-primary-green">? </span> Testing Framework :
-            <span class="text-primary-green">Jest</span>
+            <span class="text-primary">? </span> Testing Framework :
+            <span class="text-primary">Jest</span>
           </p>
           <p class="fromcli__question7">
-            <span class="text-primary-green">? </span> Rendering mode :
-            <span class="text-primary-green">Universal (SSR / SSG)</span>
+            <span class="text-primary">? </span> Rendering mode :
+            <span class="text-primary">Universal (SSR / SSG)</span>
           </p>
           <p class="fromcli__question8">
-            <span class="text-primary-green">? </span> Deployment target :
-            <span class="text-primary-green">Server</span>
+            <span class="text-primary">? </span> Deployment target :
+            <span class="text-primary">Server</span>
           </p>
           <div class="fromcli__progressbars__compilation">
             <div class="fromcli__progressbar"></div>
             <div class="fromcli__progressbar"></div>
           </div>
           <p class="flex items-center fromcli__installed">
-            <IconCheck class="mr-2 nui-icon-md text-primary-green w-4 h-4" />
+            <IconCheck class="mr-2 nui-icon-md text-primary w-4 h-4" />
             installed
           </p>
           <p class="flex">
             <span class="fromcli__seconddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__cd">cd <span class="text-primary-green">My Project</span></span>
+            ><span class="fromcli__yarn__cd">cd <span class="text-primary">My Project</span></span>
           </p>
           <p class="flex">
             <span class="fromcli__thirddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__run">yarn run <span class="text-primary-green">dev</span></span>
+            ><span class="fromcli__yarn__run">yarn run <span class="text-primary">dev</span></span>
           </p>
         </div>
         <div class="fromcli__code__ide">
@@ -199,7 +199,7 @@
 }
 
 .fromcli__display__progressbar__progress {
-  @apply absolute left-0 top-0 w-0 bg-primary-green rounded-full opacity-0;
+  @apply absolute left-0 top-0 w-0 bg-primary rounded-full opacity-0;
   height: 10px;
   animation: progress cubic-bezier(0.83, 0, 0.17, 1) 1.5s forwards 3.8s;
 }
@@ -249,7 +249,7 @@ span[class*='fromcli__yarn'] {
 }
 
 .fromcli__question2__answer {
-  @apply opacity-0 text-primary-green;
+  @apply opacity-0 text-primary;
   animation: appear 150ms ease forwards 4.2s;
 }
 
@@ -309,7 +309,7 @@ span[class*='fromcli__yarn'] {
       animation-delay: 5.8s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 6.2s;
     }
   }
@@ -323,7 +323,7 @@ span[class*='fromcli__yarn'] {
       animation-delay: 2.4s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 2.6s;
     }
   }
@@ -337,7 +337,7 @@ span[class*='fromcli__yarn'] {
       animation-delay: 4.8s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 5s;
     }
     &:nth-child(3) {
@@ -373,7 +373,7 @@ span[class*='fromcli__yarn'] {
 }
 
 .fromcli__code__ide__head__circles__circle {
-  @apply h-3 w-3 rounded-full mr-2 bg-primary-green;
+  @apply h-3 w-3 rounded-full mr-2 bg-primary;
 }
 
 .fromcli__code__ide__head__file {

nuxtjs.org/components/AnimFromScratchCodeblock.vue

@@ -141,7 +141,7 @@
 }
 
 .fromscratch__display__progressbar__progress {
-  @apply absolute left-0 top-0 w-0 bg-primary-green rounded-full opacity-0;
+  @apply absolute left-0 top-0 w-0 bg-primary rounded-full opacity-0;
   height: 10px;
   animation: progress cubic-bezier(0.83, 0, 0.17, 1) 1.5s forwards 3.8s;
 }
@@ -185,7 +185,7 @@ span[class*='fromscratch__yarn'] {
       animation-delay: 2.4s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 2.6s;
     }
     &:nth-child(3) {
@@ -203,7 +203,7 @@ span[class*='fromscratch__yarn'] {
       animation-delay: 4.8s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 5s;
     }
     &:nth-child(3) {
@@ -239,7 +239,7 @@ span[class*='fromscratch__yarn'] {
 }
 
 .fromscratch__code__ide__head__circles__circle {
-  @apply rounded-full mr-2 bg-primary-green;
+  @apply rounded-full mr-2 bg-primary;
   height: 12px;
   width: 12px;
 }

nuxtjs.org/components/AppFooter.vue

@@ -1,37 +1,53 @@
 <template>
-  <footer class="light:bg-gray-50 dark:bg-secondary-black" aria-labelledby="footerHeading">
-    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
-      <div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
-        <div class="grid grid-cols-2 gap-8 xl:col-span-4">
-          <div v-for="i in 2" :key="i">
-            <MFooterLink
-              :links="i === 1 ? links.slice(0, 2) : links.slice(2, 4)"
-              class="md:grid md:grid-cols-2 md:gap-8"
-            />
+  <footer class="" aria-labelledby="footerHeading">
+    <div class="select-none">
+      <img
+        loading="lazy"
+        :src="`/img/footer/dark/landscape.svg`"
+        class="w-full h-40 object-fill light:hidden pointer-events-none"
+        alt="A landscape image"
+      />
+      <img
+        loading="lazy"
+        :src="`/img/footer/${$colorMode.value}/landscape.svg`"
+        class="w-full h-40 object-fill dark:hidden pointer-events-none"
+        alt="A landscape image"
+      />
+    </div>
+    <div class="bg-gray-50 dark:bg-secondary-black">
+      <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+        <div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
+          <div class="grid grid-cols-2 gap-8 xl:col-span-4">
+            <div v-for="i in 2" :key="i">
+              <MFooterLink
+                :links="i === 1 ? links.slice(0, 2) : links.slice(2, 4)"
+                class="md:grid md:grid-cols-2 md:gap-8"
+              />
+            </div>
           </div>
+          <MFooterLanguage class="mt-12 xl:mt-0" />
         </div>
-        <MFooterLanguage class="mt-12 xl:mt-0" />
+        <MFooterNewsLetter
+          class="
+            border-t
+            light:border-gray-200
+            dark:border-secondary-darker
+            pt-8
+            lg:flex lg:items-center lg:justify-between
+            xl:mt-0
+          "
+        />
+        <MFooterFoot
+          class="
+            mt-8
+            border-t border-gray-200
+            dark:border-secondary-darker
+            pt-8
+            md:flex md:items-center md:justify-between
+            flex-row-reverse
+          "
+        />
       </div>
-      <MFooterNewsLetter
-        class="
-          border-t
-          light:border-gray-200
-          dark:border-secondary-darker
-          pt-8
-          lg:flex lg:items-center lg:justify-between
-          xl:mt-0
-        "
-      />
-      <MFooterFoot
-        class="
-          mt-8
-          border-t border-gray-200
-          dark:border-secondary-darker
-          pt-8
-          md:flex md:items-center md:justify-between
-          flex-row-reverse
-        "
-      />
     </div>
   </footer>
 </template>

nuxtjs.org/components/BlogpostList.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="px-6 my-8">
+    <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+      <ContentCardTemplate
+        v-for="post in posts"
+        :key="post.id"
+        class=""
+        :title="post.title"
+        :description="post.description"
+        :image="post.imgUrl"
+        :slug="post.slug"
+        :tags="post.tags"
+      >
+        <div slot="footer" class="px-4 mb-4 mt-auto">
+          <div class="flex items-center">
+            <div class="flex mr-4">
+              <a
+                v-for="(author, index) in post.authors"
+                :key="index"
+                :href="author.link"
+                target="_blank"
+                rel="noopener noindex nofollow"
+                :class="{ '-ml-4': index !== 0 }"
+                class="flex items-center justify-end rounded-full border-3 border-white dark:border-secondary-darker"
+              >
+                <NuxtImg
+                  class="inline-block h-10 w-10 rounded-full"
+                  height="32"
+                  width="32"
+                  :src="author.avatarUrl"
+                  alt
+                />
+              </a>
+            </div>
+            <div class="text-sm flex flex-col">
+              <span class="font-bold">{{ post.authors.length > 1 ? 'Multiple Authors' : post.authors[0].name }}</span>
+              <time :datetime="post.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-cloud">
+                {{ formatDateByLocale($i18n.locale, post.date) }}
+              </time>
+            </div>
+          </div>
+        </div>
+      </ContentCardTemplate>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const { $docus } = useContext()
+    const posts = ref()
+    useFetch(async () => {
+      const documents = await $docus
+        .search('/blog', { deep: true })
+        .where({ slug: { $ne: '' } })
+        .sortBy('date', 'desc')
+        .fetch()
+
+      posts.value = documents
+    })
+
+    const formatDateByLocale = (locale, d) => {
+      const currentLocale = locale || 'en'
+      const options = { year: 'numeric', month: 'long', day: 'numeric' }
+      return new Date(d).toLocaleDateString(currentLocale, options)
+    }
+
+    return {
+      posts,
+      formatDateByLocale
+    }
+  }
+})
+</script>

nuxtjs.org/components/ContentCardTemplate.vue

@@ -0,0 +1,51 @@
+<template>
+  <NuxtLink
+    tag="article"
+    :to="slug"
+    class="flex flex-col cursor-pointer shadow rounded-lg overflow-hidden dark:bg-secondary-darkest"
+  >
+    <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
+      <NuxtImg :src="image" width="864" height="378" :alt="title" />
+    </div>
+    <div v-if="tags.length" class="px-4 mb-1">
+      <span v-for="(tag, i) in tags" :key="tag" class="text-gray-400 dark:text-cloud font-medium text-sm">
+        <span>{{ tag }}</span>
+        <span v-if="(i === 0 && tags.length > 1) || i !== tags.length - 1"> – </span>
+      </span>
+    </div>
+    <h1 class="font-bold text-body-xl mb-2 px-4">
+      <NuxtLink :to="slug">{{ title }}</NuxtLink>
+    </h1>
+    <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
+    <slot name="footer" />
+  </NuxtLink>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    image: {
+      type: String,
+      default: ''
+    },
+    slug: {
+      type: String,
+      default: ''
+    },
+    tags: {
+      type: Array,
+      default: () => []
+    }
+  }
+})
+</script>

nuxtjs.org/components/HeaderNavigation.vue

@@ -11,7 +11,7 @@
         <NuxtLink
           :to="`/${link.slug}/${link.children[0].slug || ''}`"
           :class="{
-            'text-primary-green': currentSlug === link.slug
+            'text-primary': currentSlug === link.slug
           }"
         >
           {{ link.title }}