feat: public pages

docs/app.config.ts

@@ -2,45 +2,22 @@ export default defineAppConfig({
   ui: {
     primary: 'green',
     gray: 'slate',
-    footer: {
-      bottom: {
-        left: 'text-sm text-gray-500 dark:text-gray-400',
-        wrapper: 'border-t border-gray-200 dark:border-gray-800'
-      }
-    },
     variables: {
       dark: {
         background: 'var(--color-gray-950)'
       }
+    },
+    header: {
+      wrapper: 'lg:mb-0 border-0'
     }
   },
   seo: {
     siteName: 'NuxtHub'
   },
-  header: {
-    links: [{
-      icon: 'i-simple-icons-github',
-      to: 'https://github.com/nuxt-hub/core',
-      target: '_blank',
-      'aria-label': 'NuxtHub'
-    }]
-  },
   toc: {
     title: 'Table of Contents',
     bottom: {
-      title: 'Community',
-      edit: 'https://github.com/nuxt-hub/core/edit/main/docs/content',
-      links: [{
-        icon: 'i-heroicons-star',
-        label: 'Star on GitHub',
-        to: 'https://github.com/nuxt-hub/core',
-        target: '_blank'
-      }, {
-        icon: 'i-simple-icons-nuxtdotjs',
-        label: 'NuxtHub Admin',
-        to: 'https://admin.hub.nuxt.com',
-        target: '_blank'
-      }]
+      edit: 'https://github.com/nuxt-hub/core/edit/main/docs/content'
     }
   }
 })

docs/app.vue

@@ -1,9 +1,25 @@
 <script setup lang="ts">
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 
+const appConfig = useAppConfig()
+const route = useRoute()
 const { seo } = useAppConfig()
+const { isLoading } = useLoadingIndicator()
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const primary = (route.meta?.primary as string) || 'green'
+appConfig.ui.primary = primary
+watch(() => route.meta?.primary, (primary: string) => {
+  setTimeout(() => {
+    appConfig.ui.primary = primary || 'green'
+  }, 40)
+})
+const heroBackgroundClass = computed(() => route.meta?.heroBackground || '')
+
+const appear = ref(false)
+const appeared = ref(false)
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
+})
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
   server: false
@@ -23,26 +39,62 @@ useHead({
 
 useSeoMeta({
   ogSiteName: seo?.siteName,
-  twitterCard: 'summary_large_image'
+  twitterCard: 'summary_large_image',
+  titleTemplate(title) {
+    return title.includes('NuxtHub') ? title : `${title} · NuxtHub`
+  }
 })
 
-provide('navigation', navigation.value?.[0]?.children || [])
+provide('navigation', navigation)
+
+onMounted(() => {
+  setTimeout(() => {
+    appear.value = true
+    setTimeout(() => {
+      appeared.value = true
+    }, 1000)
+  }, 0)
+})
+
+const links = [{
+  label: 'NuxtHub Admin',
+  to: 'https://admin.hub.nuxt.com',
+  target: '_blank',
+  icon: 'i-simple-icons-nuxtdotjs'
+}, {
+  label: 'NuxtHub repository',
+  to: 'https://github.com/nuxt-hub/core',
+  target: '_blank',
+  icon: 'i-simple-icons-github'
+}, {
+  label: 'NuxtHub on X',
+  to: 'https://x.com/nuxt_hub',
+  target: '_blank',
+  icon: 'i-simple-icons-x'
+}]
 </script>
 
 <template>
   <div class="bg-white dark:bg-gray-950">
-    <Header />
-
-    <UMain>
+    <AppHeader />
+    <UMain class="relative">
+      <HeroBackground
+        class="absolute w-full top-[1px] transition-all text-primary flex-shrink-0"
+        :class="[
+          isLoading ? 'animate-pulse' : (appear ? 'opacity-100' : 'opacity-0'),
+          appeared ? 'duration-[400ms]': 'duration-1000',
+          heroBackgroundClass
+        ]"
+      />
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </UMain>
 
-    <Footer />
+    <AppFooter />
 
     <ClientOnly>
-      <LazyUContentSearch :files="files" :navigation="navigation" />
+      <LazyUContentSearch :files="files" :navigation="navigation" :links="links" />
     </ClientOnly>
 
     <UNotifications />

docs/assets/css/style.css

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+  @apply font-title;
+}

docs/components/AppFooter.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const links = [
+  {
+    label: 'Nuxt Docs',
+    to: 'https://nuxt.com'
+  }, {
+    label: 'Terms',
+    to: 'https://admin.hub.nuxt.com/terms',
+    target: '_blank'
+  }, {
+    label: 'Privacy',
+    to: 'https://admin.hub.nuxt.com/privacy',
+    target: '_blank'
+  }
+]
+</script>
+
+<template>
+  <UFooter :links="links">
+    <template #left>
+      <span class="inline text-sm">© {{ new Date().getFullYear() }} <a href="https://nuxtlabs.com" target="_blank" class="text-gray-900 dark:text-gray-50 hover:underline underline-offset-4">NuxtLabs</a></span>
+    </template>
+
+    <template #right>
+      <UColorModeButton />
+      <UButton
+        icon="i-simple-icons-x"
+        color="gray"
+        variant="ghost"
+        to="https://x.com/nuxt_hub"
+        target="_blank"
+        aria-label="Go to NuxtHub X account"
+      />
+      <UButton
+        icon="i-simple-icons-github"
+        color="gray"
+        variant="ghost"
+        to="https://github.com/nuxt-hub/core"
+        target="_blank"
+        aria-label="Go to NuxtHub GitHub repository"
+      />
+    </template>
+  </UFooter>
+</template>

docs/components/AppHeader.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const { metaSymbol } = useShortcuts()
+const navigation = inject('navigation')
+
+const links = [
+  {
+    label: 'Docs',
+    to: '/docs/getting-started'
+  }, {
+    label: 'Templates',
+    to: '/templates',
+    color: 'cyan'
+  }, {
+    label: 'Pricing',
+    to: '/pricing'
+  }, {
+    label: 'Changelog',
+    to: '/changelog'
+  }, {
+    label: 'Blog',
+    to: '/blog'
+  }
+]
+const navLinks = links.map((link) => {
+  if (link.label === 'Docs') {
+    return {
+      ...link,
+      children: mapContentNavigation(navigation.value)
+        .find(link => link.label === 'Docs')
+        .children
+        .map(({ icon, ...link }) => link)
+    }
+  }
+  return {
+    ...link
+  }
+})
+</script>
+
+<template>
+  <UHeader :ui="{}" :links="links">
+    <template #logo>
+      <HubLogo class="h-6" />
+      <UBadge variant="subtle" size="xs" class="-mb-[2px] rounded font-semibold">
+        beta
+      </UBadge>
+    </template>
+
+    <template #right>
+      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']" :popper="{ strategy: 'absolute' }">
+        <UContentSearchButton :label="null" />
+      </UTooltip>
+      <UButton variant="ghost" label="Log in" to="https://admin.hub.nuxt.com/" color="black" size="md" class="hidden sm:block" external />
+      <UButton variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/" size="md" class="hidden sm:block" external />
+    </template>
+
+    <template #panel>
+      <UNavigationTree :links="navLinks" :default-open="1" :multiple="false" :ui="{ accordion: { button: { label: 'font-normal' } } }" />
+
+      <div class="flex flex-col gap-y-2 mt-4">
+        <UButton variant="solid" label="Log in" to="https://admin.hub.nuxt.com/" color="white" size="md" class="flex justify-center sm:hidden" external />
+        <UButton variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/" size="md" class="flex justify-center text-gray-900 bg-primary sm:hidden" external />
+      </div>
+    </template>
+  </UHeader>
+</template>

docs/components/HeroBackground.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="pointer-events-none">
+    <mask id="path-1-inside-1_414_5526" fill="white">
+      <path d="M0 0H1440V181H0V0Z" />
+    </mask>
+    <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" />
+    <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" />
+    <defs>
+      <linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
+        <stop stop-color="currentColor" />
+        <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
+        <stop stop-color="currentColor" stop-opacity="0" />
+        <stop offset="0.395" stop-color="currentColor" />
+        <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>