feat: create learn landing (#233)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Barbapapazes

app.config.ts

@@ -9,6 +9,9 @@ export default defineAppConfig({
           solid: 'shadow-none bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 dark:hover:bg-gray-700/50',
         },
       },
+      variant: {
+        solid: 'shadow-none',
+      },
     },
     select: {
       base: 'transition ease-in',

components/Header.vue

@@ -1,24 +1,23 @@
 <script lang="ts" setup>
+const runtimeConfig = useRuntimeConfig()
 const website = useWebsite()
 const github = website.value.socials.github
 
-const { data: navigation } = await useAsyncData('content:navigation', () => fetchContentNavigation(queryContent('/')), {
-  transform: (data) => {
-    const filteredData = data.filter(item => item._path !== '/').map((item) => {
-      if (item._path !== '/resources')
-        delete item.children
-
-      return {
-        title: item.title,
-        _path: item._path,
-        icon: item.icon,
-        children: item.children,
-      }
-    })
-
-    return filteredData
+const navigation = [
+  {
+    path: '/packages',
+    title: 'Packages',
   },
-})
+  runtimeConfig.public.learn && {
+    path: '/learn',
+    title: 'Learn',
+  },
+  {
+    path: '/blog',
+    title: 'Blog',
+  },
+].filter(Boolean) as { path: string, title: string }[]
+
 const { data: stars } = await useFetch('/api/content/packages.json', {
   transform: (data) => {
     const stars: number = data.reduce((acc, curr) => acc + curr.stars, 0)
@@ -59,8 +58,8 @@ function toDesignKit() {
 
       <nav v-if="navigation" class="hidden lg:flex justify-center">
         <ol class="text-[1.125rem] flex gap-4 leading-5">
-          <li v-for="item in navigation" :key="item._path">
-            <UPopover v-if="item.children" mode="hover" :ui="{ width: 'max-w-[18rem]' }">
+          <li v-for="item in navigation" :key="item.path">
+            <!-- <UPopover v-if="item.children" mode="hover" :ui="{ width: 'max-w-[18rem]' }">
               <UButton size="md" variant="ghost" color="gray" :to="item._path" :icon="item.icon" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
                 {{ item.title }}
               </UButton>
@@ -79,8 +78,8 @@ function toDesignKit() {
                   </li>
                 </ol>
               </template>
-            </UPopover>
-            <UButton v-else size="md" variant="ghost" color="gray" :to="item._path" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
+            </UPopover> -->
+            <UButton size="md" variant="ghost" color="gray" :to="item.path" :ui="{ size: { md: 'text-base' }, ...uiButton }" :active-class="activeClassButton">
               {{ item.title }}
             </UButton>
           </li>

components/NavigationModal.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
 defineProps<{
   open: boolean
-  navigation: NavItem[]
+  navigation: {
+    path: string
+    title: string
+  }[]
 }>()
 
 defineEmits<{
@@ -47,12 +49,12 @@ const uiSocialButton = { color: { gray: { ghost: 'dark:text-gray-400 dark:hover:
                 aria-labelledby="Navigation mobile"
                 class="flex flex-col gap-2 text-2xl font-semibold"
               >
-                <li v-for="item in navigation" :key="item._path">
+                <li v-for="item in navigation" :key="item.path">
                   <UButton
                     size="xl"
                     color="gray"
                     variant="ghost"
-                    :to="item._path" :icon="item.icon" :ui="{ ...uiButton }" :active-class="activeClassButton"
+                    :to="item.path" :ui="{ ...uiButton }" :active-class="activeClassButton"
                     @click="$emit('update:open', false)"
                   >
                     {{ item.title }}

components/OgImage/OgImageLearn.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description: string
+}>()
+</script>
+
+<template>
+  <!-- Since we use Nuxt UI which replace color by some vars, we need to explicitly set a color. -->
+  <div
+    class="w-full h-full flex justify-between relative bg-[#111827] text-white"
+  >
+    <img src="/assets/header/ellipse.png" class="absolute top--64 right--64">
+    <div class="pt-[80px] px-[60px] pb-[60px]">
+      <div class="h-full w-full justify-between relative">
+        <div class="flex flex-row justify-between items-start">
+          <div class="flex flex-col items-start">
+            <span class="text-[#f9fafb] text-[24px] px-4 py-2 rounded-full bg-[#F2E78C]/20 border-1 border-[#F2E78C]/70">
+              Learn
+            </span>
+            <h1 class="mt-6 mb-0 font-bold text-[56px] text-white">
+              {{ title }}
+            </h1>
+            <p
+              class="mt-4 text-[36px] text-[#9ca3af] max-w-[768px]"
+            >
+              {{ description }}
+            </p>
+          </div>
+        </div>
+        <div class="">
+          <img src="/favicon.svg" class="rounded-sm h-[60px] w-[60px]">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

components/learn/LearnCard.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { Author } from '~/types/blog'
+
+const props = defineProps<{
+  path: string
+  title: string
+  description: string
+  publishedAt: string
+  category: 'getting-started' | 'building-blocks'
+  authors: Author[]
+}>()
+
+const categoryName = computed(() => {
+  switch (props.category) {
+    case 'getting-started':
+      return 'Getting Started'
+    case 'building-blocks':
+      return 'Building Blocks'
+  }
+})
+</script>
+
+<template>
+  <UCard as="article" :ui="{ base: 'h-full relative flex flex-col', background: 'bg-gray-300/20 hover:bg-gray-300/40 dark:bg-gray-700/40 hover:dark:bg-gray-700/60', divide: '', shadow: 'shadow-sm', ring: 'dark:highlight-white/10', rounded: 'rounded-lg', header: { base: '', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { base: 'grow', padding: 'p-4 sm:p-4' }, footer: { padding: 'py-0 pb-4 sm:px-4 sm:pb-4' } }">
+    <template #header>
+      <h3 class="text-xl font-semibold dark:text-gray-50">
+        <NuxtLink :to="path" class="absolute inset-0" />
+        {{ title }}
+      </h3>
+    </template>
+
+    <p class="dark:text-zinc-400">
+      {{ description }}
+    </p>
+
+    <template #footer>
+      <dl class="dark:text-zinc-400 text-sm flex flex-row justify-between items-center">
+        <dt class="sr-only">
+          Category
+        </dt>
+        <dd>
+          <UBadge :label="categoryName" variant="soft" />
+        </dd>
+        <dt class="sr-only">
+          Published at
+        </dt>
+        <dd class="sr-only">
+          <time :datetime="toISODateString(publishedAt)">
+            {{ toLocaleDateString(publishedAt) }}
+          </time>
+        </dd>
+        <dt class="sr-only">
+          Authors
+        </dt>
+        <dd class="flex">
+          <UAvatarGroup size="2xs" :max="3" :ui="{ ring: '' }">
+            <UAvatar v-for="author in authors" :key="author.name" :src="author.picture" :alt="author.name" />
+          </UAvatarGroup>
+        </dd>
+      </dl>
+    </template>
+  </UCard>
+</template>

composables/useBlog.ts

@@ -2,7 +2,8 @@ import { useStorage } from '@vueuse/core'
 import MiniSearch, { type SearchResult } from 'minisearch'
 import type { Order } from '~/types/order'
 import type { LocationQueryValue } from '#vue-router'
-import type { Author, BlogPostCard } from '~/types/blog'
+import type { BlogPostCard } from '~/types/blog'
+import type { Author } from '~/types/author'
 
 export function useBlog() {
   const fields = ['_path', 'title', 'description', 'publishedAt', 'authors', 'packages', 'categories']