chore: refact nuxtjs.org components

nuxtjs.org/components/AButton.vue → nuxtjs.org/components/atoms/NuxtButton.vue

@@ -23,6 +23,7 @@
     <slot />
   </Component>
 </template>
+
 <script>
 import { defineComponent, ref } from '@vue/composition-api'
 

nuxtjs.org/components/AContainer.vue → nuxtjs.org/components/atoms/NuxtContainer.vue

@@ -6,6 +6,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 export default defineComponent({
   props: {
     tag: {

nuxtjs.org/components/ALink.vue → nuxtjs.org/components/atoms/NuxtHref.vue

@@ -27,7 +27,6 @@
 import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
-  name: 'ALink',
   props: {
     to: {
       type: [String, Object],

nuxtjs.org/components/ALabel.vue → nuxtjs.org/components/atoms/NuxtLabel.vue

@@ -6,6 +6,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+
 export default defineComponent({
   props: {
     tag: {

nuxtjs.org/components/MInputGroupButton.vue → nuxtjs.org/components/molecules/InputGroupButton.vue

@@ -1,6 +1,6 @@
 <template>
   <form class="mt-4 sm:flex lg:mt-0" @submit.prevent="submit">
-    <ATextInput
+    <NuxtTextInput
       :value="value"
       :placeholder="placeholder"
       class="
@@ -34,7 +34,7 @@
       @input="$emit('input', $event)"
     />
     <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-      <AButton
+      <NuxtButton
         type="submit"
         aria-label="Submit"
         class="
@@ -52,7 +52,7 @@
         @click="submit"
       >
         <slot />
-      </AButton>
+      </NuxtButton>
     </div>
   </form>
 </template>

nuxtjs.org/components/MFooterColorModeSelector.vue → nuxtjs.org/components/molecules/footer/FooterColorModeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <ASelectNative
+  <NuxtSelectNative
     v-model="$colorMode.preference"
     :options="[
       { value: 'system', text: 'System' },

nuxtjs.org/components/MFooterFoot.vue → nuxtjs.org/components/molecules/footer/FooterFoot.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <MFooterSocialLinks />
+    <FooterSocialLinks />
     <p class="mt-8 text-base light:text-gray-400 dark:text-cloud-light md:mt-0 md:order-1">
-      &copy; 2020 Workflow, Inc. All rights reserved.
+      &copy; {{ year }} Nuxt, Inc. All rights reserved.
     </p>
   </div>
 </template>

nuxtjs.org/components/MFooterLink.vue → nuxtjs.org/components/molecules/footer/FooterLink.vue

@@ -9,12 +9,12 @@
       </h3>
       <ul class="mt-4 space-y-4">
         <li v-for="subLink in link.subLinks" :key="subLink.title">
-          <ALink
+          <NuxtHref
             :href="subLink.href"
             :to="subLink.to"
             :aria-label="subLink.title"
             class="light:text-gray-500 dark:text-white hover:d-primary-text-hover"
-            >{{ subLink.title }}</ALink
+            >{{ subLink.title }}</NuxtHref
           >
         </li>
       </ul>

nuxtjs.org/components/MFooterLocaleSelector.vue → nuxtjs.org/components/molecules/footer/FooterLocaleSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <ASelectNative
+  <NuxtSelectNative
     v-model="locale"
     :options="locales"
     select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-gray-400 dark:focus:border-secondary-light sm:text-sm"

nuxtjs.org/components/MFooterNewsLetter.vue → nuxtjs.org/components/molecules/footer/FooterNewsLetter.vue

@@ -6,13 +6,13 @@
         The latest news, articles, and resources, sent to your inbox weekly.
       </p>
     </div>
-    <MInputGroupButton v-model="email" placeholder="Enter your email">Subscribe</MInputGroupButton>
+    <InputGroupButton v-model="email" placeholder="Enter your email">Subscribe</InputGroupButton>
   </div>
 </template>
 
 <script>
 import { defineComponent } from '@vue/composition-api'
-import { useNewsletter } from '../plugins/composables'
+import { useNewsletter } from '../../../plugins/composables'
 
 export default defineComponent({
   setup() {

nuxtjs.org/components/MFooterSocialLinks.vue → nuxtjs.org/components/molecules/footer/FooterSocialLinks.vue

@@ -1,9 +1,9 @@
 <template>
   <ul class="flex items-center space-x-4 xl:space-x-5">
     <li v-for="(social, key) in socials" :key="key">
-      <ALink :href="social.href">
+      <NuxtHref :href="social.href">
         <Component :is="social.icon" class="h-6 w-6 text-gray-400 dark:text-cloud-lighter hover:text-primary" />
-      </ALink>
+      </NuxtHref>
     </li>
   </ul>
 </template>

nuxtjs.org/components/AppFooter.vue → nuxtjs.org/components/organisms/app/AppFooter.vue

@@ -19,19 +19,19 @@
         <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
+              <FooterLink
                 :links="i === 1 ? links.slice(0, 2) : links.slice(2, 4)"
                 class="md:grid md:grid-cols-2 md:gap-8"
               />
             </div>
           </div>
           <div class="mt-12 xl:mt-0">
             <h3 class="text-lg font-semibold light:text-gray-400 dark:text-cloud-light">Settings</h3>
-            <MFooterLocaleSelector class="mt-4 sm:max-w-xs" />
-            <MFooterColorModeSelector class="mt-4 sm:max-w-xs" />
+            <FooterLocaleSelector class="mt-4 sm:max-w-xs" />
+            <FooterColorModeSelector class="mt-4 sm:max-w-xs" />
           </div>
         </div>
-        <MFooterNewsLetter
+        <FooterNewsLetter
           class="
             border-t
             light:border-gray-200
@@ -41,7 +41,7 @@
             xl:mt-0
           "
         />
-        <MFooterFoot
+        <FooterFoot
           class="
             mt-8
             border-t border-gray-200

nuxtjs.org/components/DesignColors.vue → nuxtjs.org/components/organisms/design/DesignColors.vue

@@ -9,12 +9,12 @@
       </div>
     </div>
     <div class="mt-4">
-      <ALink
+      <NuxtHref
         href="/design-kit/DesignKitColors.fig"
         aria-label="Dowload Color System"
         class="font-medium rounded bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300 py-3 px-4"
         download
-        ><span class="font-medium">Download Color System</span></ALink
+        ><span class="font-medium">Download Color System</span></NuxtHref
       >
     </div>
   </div>

nuxtjs.org/components/DesignHero.vue → nuxtjs.org/components/organisms/design/DesignHero.vue

@@ -5,12 +5,12 @@
         <h1 class="text-display-3 font-serif mb-4">{{ title }}</h1>
         <p class="text-body-xl max-w-3xl">{{ description }}</p>
         <div class="mt-8">
-          <ALink
+          <NuxtHref
             :href="downloadLink.url"
             :aria-label="downloadLink.text"
             class="rounded bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300 py-3 px-4"
             download
-            ><span class="font-medium">{{ downloadLink.text }}</span></ALink
+            ><span class="font-medium">{{ downloadLink.text }}</span></NuxtHref
           >
         </div>
       </div>

nuxtjs.org/components/DesignLogos.vue → nuxtjs.org/components/organisms/design/DesignLogos.vue

@@ -11,19 +11,19 @@
         <div class="flex w-full justify-between pt-2 pb-4">
           <div class="font-semibold">{{ logo.type }}</div>
           <div class="flex space-x-2">
-            <ALink
+            <NuxtHref
               class="hover:text-primary-green light:text-gray-500 dark:white hover:underline"
               :href="`${logo.logoImg}.svg`"
               aria-label="Download svg"
               download
-              >SVG</ALink
+              >SVG</NuxtHref
             >
-            <ALink
+            <NuxtHref
               class="hover:text-primary-green light:text-gray-500 dark:white hover:underline"
               :href="`${logo.logoImg}.png`"
               aria-label="Download png"
               download
-              >PNG</ALink
+              >PNG</NuxtHref
             >
           </div>
         </div>

nuxtjs.org/components/DesignTypography.vue → nuxtjs.org/components/organisms/design/DesignTypography.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sky-darker flex flex-col space-y-4 pt-4">
+  <div class="text-sky-darker dark:text-white flex flex-col space-y-4 pt-4">
     <span class="text-display-4 font-semibold">DM Sans</span>
     <span class="text-display-6 font-semibold"
       >The quick brown fox jumps over<br />

nuxtjs.org/components/HomeCampfire.vue → nuxtjs.org/components/organisms/home/HomeCampfire.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="relative pb-20 light:bg-gray-50 dark:bg-secondary-darkest">
-    <AContainer class="flex flex-col items-center">
+    <NuxtContainer class="flex flex-col items-center">
       <div class="flex flex-col items-center w-full col-span-12">
         <div class="mb-2">
-          <CategoryLabel :label="category" />
+          <span class="text-tertiary font-bold text-lg">{{ category }} </span>
         </div>
         <h2 class="mb-2 font-serif font-normal text-display-6 md:text-display-5 2xl:text-display-4">
           <Markdown use="title" unwrap="p" />
@@ -21,11 +21,11 @@
             <span class="text-cloud-light text-body-base lg:text-body-lg font-bold mb-2">{{ post.category }}</span>
             <h3 class="text-body-xl lg:text-body-2xl font-bold mb-2">{{ post.title }}</h3>
             <p class="mb-4 text-body-base lg:text-body-lg">{{ post.description }}</p>
-            <MMarketingLink color="primary-green" name="Read article" icon="IconChevronRight" :to="post.to" />
+            <MarketingLink color="primary-green" name="Read article" icon="IconChevronRight" :to="post.to" />
           </li>
         </ul>
       </div>
-    </AContainer>
+    </NuxtContainer>
   </section>
 </template>
 

nuxtjs.org/components/HomeDiscover.vue → nuxtjs.org/components/organisms/home/HomeDiscover.vue

@@ -15,9 +15,9 @@
 
     <HomeSection class="pt-40 light:bg-gray-50 dark:bg-secondary-darkest">
       <template #section-content>
-        <SectionContent class="col-span-12 justify-center">
+        <SectionContent class="col-span-6 items-center md:items-start justify-center">
           <template #category>
-            <CategoryLabel :label="category" />
+            <span class="text-tertiary font-bold text-lg">{{ category }}</span>
           </template>
 
           <template #title>

nuxtjs.org/components/HomeDiscoverDx.vue → nuxtjs.org/components/organisms/home/HomeDiscoverDx.vue

@@ -4,7 +4,7 @@
       <template #section-content>
         <SectionContent class="col-span-12 items-center">
           <template #category>
-            <CategoryLabel label="Discover" />
+            <span class="text-tertiary font-bold text-lg">Discover</span>
           </template>
 
           <template #title>

nuxtjs.org/components/HomeDiscoverPartners.vue → nuxtjs.org/components/organisms/home/HomeDiscoverPartners.vue

@@ -1,20 +1,20 @@
 <template>
   <section class="relative pt-20">
-    <AContainer class="flex flex-col items-center">
+    <NuxtContainer class="flex flex-col items-center">
       <div class="flex flex-col w-full items-center col-span-12">
         <div class="mb-2">
-          <CategoryLabel :label="category" />
+          <span class="text-tertiary font-bold text-lg">{{ category }}</span>
         </div>
         <h2 class="font-normal font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
           <Markdown use="title" unwrap="p" />
         </h2>
         <p class="font-normal text-center text-body-base md:text-body-lg 2xl:text-body-xl mb-8">
           <Markdown use="description" unwrap="p" />
         </p>
-        <MPartnersBanner class="pb-0" :partners-logo="partners" />
+        <PartnersBanner class="pb-0" :partners-logo="partners" />
         <p><Markdown use="bottom" unwrap="p" /></p>
       </div>
-    </AContainer>
+    </NuxtContainer>
     <img
       loading="lazy"
       :src="`/img/home/discover/partners/dark/landscape-discover-partners.svg`"

nuxtjs.org/components/HomeExplore.vue → nuxtjs.org/components/organisms/home/HomeExplore.vue

@@ -12,10 +12,10 @@
       class="left-0 object-fill w-full h-40 light-img"
       alt="A landscape image"
     />
-    <AContainer class="flex flex-col items-center py-20">
+    <NuxtContainer class="flex flex-col items-center py-20">
       <div class="flex flex-col items-center w-full col-span-12">
         <div class="mb-2">
-          <CategoryLabel :label="category" />
+          <span class="text-tertiary font-bold text-lg">{{ category }} </span>
         </div>
         <h2 class="mb-2 font-serif font-normal text-display-6 md:text-display-5 2xl:text-display-4">
           <Markdown use="title" unwrap="p" />
@@ -27,7 +27,7 @@
           <slot />
         </div>
       </div>
-    </AContainer>
+    </NuxtContainer>
     <img
       loading="lazy"
       :src="`/img/home/campfire/dark/landscape-campfire.svg`"

nuxtjs.org/components/HomeFeatures.vue → nuxtjs.org/components/organisms/home/HomeFeatures.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="relative py-40">
-    <AContainer class="flex flex-col items-center">
+    <NuxtContainer class="flex flex-col items-center">
       <div class="flex flex-col w-full items-center col-span-12">
         <div class="mb-2">
-          <CategoryLabel :label="category" />
+          <span class="text-tertiary font-bold text-lg">{{ category }} </span>
         </div>
         <h2 class="font-normal text-center font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
           <Markdown use="title" unwrap="p" />
@@ -16,7 +16,7 @@
           <slot />
         </div>
       </div>
-    </AContainer>
+    </NuxtContainer>
   </section>
 </template>
 

nuxtjs.org/components/HomeLearnGuides.vue → nuxtjs.org/components/organisms/home/HomeLearnGuides.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="relative pt-20 light:bg-gray-50 dark:bg-secondary-darkest">
-    <AContainer class="flex flex-col items-center">
+    <NuxtContainer class="flex flex-col items-center">
       <div class="flex flex-col w-full items-center col-span-12">
         <div class="mb-2">
-          <CategoryLabel :label="category" />
+          <span class="text-tertiary font-bold text-lg">{{ category }} </span>
         </div>
         <h2 class="font-normal font-serif text-display-6 md:text-display-5 2xl:text-display-4 mb-2">
           <Markdown use="title" unwrap="p" />
@@ -18,7 +18,7 @@
           </div>
         </div>
       </div>
-    </AContainer>
+    </NuxtContainer>
   </section>
 </template>
 

nuxtjs.org/components/HomeLearnMaster.vue → nuxtjs.org/components/organisms/home/HomeLearnMaster.vue

@@ -3,7 +3,7 @@
     <template #section-content>
       <SectionContent class="col-span-12 items-center">
         <template #category>
-          <CategoryLabel label="Learn" />
+          <span class="text-tertiary font-bold text-lg">Learn</span>
         </template>
 
         <template #title>
@@ -20,7 +20,7 @@
         </template>
 
         <template #content>
-          <OCodeBlockAnimation class="w-full text-gray-50" />
+          <CodeBlockAnimation class="w-full text-gray-50" />
         </template>
 
         <template #button>