Skip to content

Commit

Permalink
doc: stable progress
Browse files Browse the repository at this point in the history
  • Loading branch information
harlan-zw committed Oct 25, 2024
1 parent e718664 commit a93b137
Show file tree
Hide file tree
Showing 126 changed files with 3,564 additions and 1,803 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ sw.*
.netlify

.content

.data
29 changes: 29 additions & 0 deletions docs/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,35 @@ export default defineAppConfig({
radius: 0.25,
},
ui: {
icons: {
caution: 'carbon-warning-alt',
copy: 'carbon-copy',
dark: 'carbon-moon',
document: 'carbon-document',
external: 'carbon-launch',
hash: 'carbon-hash',
light: 'carbon-sun',
menu: 'carbon-menu',
next: 'carbon-arrow-right',
note: 'carbon-information',
prev: 'carbon-arrow-left',
system: 'carbon-computer',
tip: 'carbon-lightbulb',
warning: 'carbon-warning',
chevronDoubleLeft: 'carbon-chevron-double-left',
chevronDoubleRight: 'carbon-chevron-double-right',
chevronDown: 'carbon-chevron-down',
chevronLeft: 'carbon-chevron-left',
chevronRight: 'carbon-chevron-right',
arrowLeft: 'carbon-arrow-left',
arrowRight: 'carbon-arrow-right',
check: 'carbon-checkmark',
close: 'carbon-close',
ellipsis: 'carbon-overflow-menu-horizontal',
loading: 'carbon-loading',
minus: 'carbon-subtract',
search: 'carbon-search',
},
colors: {
primary: 'green',
gray: 'slate',
Expand Down
172 changes: 20 additions & 152 deletions docs/app/app.vue
Original file line number Diff line number Diff line change
@@ -1,92 +1,17 @@
<script setup lang="ts">
import { titleCase } from 'scule'
import { fetchStats } from '~/composables/stats'
import { modules } from '../../src/const'
import { menu } from './composables/nav'
function mapPath(data, node = 0) {
return data.map((item) => {
if (item.children?.length && !item.page) {
item.title = titleCase(item.title)
item.children = mapPath(item.children, node + 1)
}
return {
...item,
_path: item.path,
}
})
}
async function mapPath2(data, node = 0) {
return await Promise.all(
data
.map((item) => {
if (item.children?.length && !item.page) {
item.title = titleCase(item.title)
item.children = mapPath(item.children, node + 1)
}
return {
...item,
_path: item.path,
}
})
.map(async (m) => {
if (m.path.endsWith('/api')) {
m.icon = 'i-logos-nuxt-icon'
m.title = 'Nuxt API'
}
else if (m.path.endsWith('/nitro-api')) {
m.icon = 'i-unjs-nitro'
m.title = 'Nitro API'
}
else if (m.path.endsWith('/releases')) {
m.icon = 'i-noto-sparkles'
m.title = 'Releases'
}
else if (m.path.endsWith('/guides')) {
m.icon = 'i-ph-book-duotone'
m.title = 'Guides'
}
if (m.children?.length) {
m.children = m.children.map((c) => {
if (c.children?.length === 1) {
c = c.children[0]
}
return c
})
for (const k in m.children) {
if (m.children[k].title.endsWith('()')) {
m.children[k].mdc = true
m.children[k].title = await markdownParser(`\`${m.children[k].title}\`{lang="ts"}`)
}
}
}
return m
})
)
}
const { data: stats } = await useAsyncData('stats', () => fetchStats())
const route = useRoute()
const appConfig = useAppConfig()
const colorMode = useColorMode()
provide('stats', stats)
provide('modules', modules)
useSeoMeta({
ogTitle: 'Nuxt SEO · All the boring SEO work for Nuxt done.',
// twitterTitle: 'Nuxt SEO - All the boring SEO work for Nuxt done.',
})
const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
useHead({
style: [
{ innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
],
twitterTitle: 'Nuxt SEO - All the boring SEO work for Nuxt done.',
})
</script>

Expand All @@ -100,80 +25,7 @@ useHead({

<ClientOnly />

<footer class="relative z-10 antialiased font-sans dark:bg-[#131822] bg-neutral-50 text-sm text-gray-700 dark:text-gray-200 mt-20">
<svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-blue-900/30 pointer-events-none absolute w-full top-[1px] transition-all text-primary flex-shrink-0 opacity-100 duration-[400ms] opacity-30 z-20"><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>
<div class="border-t border-gray-200 dark:border-gray-800">
<UContainer>
<div class="py-10 grid xl:grid-cols-3 lg:gap-20 gap-10">
<div v-for="(category, cKey) in menu.filter(c => c.children?.length)" :key="cKey">
<h3 class="font-bold mb-5 flex items-center gap-1">
<UIcon dynamic :name="category.icon" class="w-5 h-5" />
{{ category.label }}
</h3>
<nav>
<ul class="grid grid-cols-2 gap-6">
<li v-for="(link, key) in category.children" :key="key">
<ULink :to="link.to" class="flex items-center gap-1 hover:underline transition">
<UIcon v-if="link.icon" dynamic :name="link.icon" class="w-4 h-4" :class="cKey === 0 ? 'text-blue-500 dark:text-blue-300' : ''" />
{{ link.label }}
</ULink>
</li>
</ul>
</nav>
</div>
</div>
<div class="flex items-center gap-10 mb-6">
<NuxtLink to="/" title="Home" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white font-title">
<Logo />
</NuxtLink>
<div class="w-sm bg-gray-50 dark:bg-gray-800 flex rounded-xl shadow p-5">
<div>
<div class="mb-2">
Hey <UIcon name="i-noto-waving-hand" /> My name is <a href="https://harlanzw.com" target="_blank" class="underline">Harlan</a> and I'm the author and maintainer of Nuxt SEO.
</div>
<div>
I'd love to have your <a href="https://github.com/sponsors/harlan-zw" class="underline">support</a>!
</div>
</div>
<div class="gap-3">
<img alt="Harlan Wilton" loading="lazy" src="https://avatars.githubusercontent.com/u/5326365?v=4" class="mx-auto rounded-full w-10 h-10 mb-3">
<div class="flex justify-center items-center opacity-70">
<UButton
title="Twitter"
aria-label="Twitter"
to="https://twitter.com/harlan_zw"
target="_blank"
color="gray"
variant="ghost"
class="hidden lg:inline-flex transition"
icon="i-simple-icons-x"
/>

<UButton
title="GitHub"
aria-label="GitHub"
to="https://github.com/harlan-zw/nuxt-seo"
target="_blank"
color="gray"
variant="ghost"
class="hidden lg:inline-flex transition"
icon="i-simple-icons-github"
/>
</div>
</div>
</div>
</div>
</UContainer>
</div>
<div class="border-t border-gray-200 dark:border-gray-800">
<UContainer>
<div class="py-10">
Copyright © 2023-{{ new Date().getFullYear() }} Harlan Wilton - <a href="https://github.com/harlan-zw/nuxt-seo/blob/main/LICENSE">MIT License</a>
</div>
</UContainer>
</div>
</footer>
<NuxtLoadingIndicator />
<Footer />
</UApp>
</template>

Expand All @@ -182,8 +34,8 @@ useHead({
@import "@nuxt/ui-pro";
@theme {
--font-family-sans: 'Public Sans', sans-serif;
--font-family-mono: 'Fira Code', monospace;
--font-family-sans: 'Hubot Sans', sans-serif;
--font-family-mono: 'Hubot Sans', monospace;
--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
Expand All @@ -201,4 +53,20 @@ useHead({
:root {
--container-width: 90rem;
}
body {
-webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
#root, #__nuxt {
isolation: isolate;
}
</style>
1 change: 1 addition & 0 deletions docs/app/assets/icons/request-indexing.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/app/assets/icons/unhead.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions docs/app/assets/icons/unlighthouse.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/app/components/Banner.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<UBanner :actions="[{ label: 'Read the announcement post', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
<template #title>
<UIcon name="i-noto-party-popper" class="mr-2" />
<UIcon name="i-noto-party-popper" class="mr-2" />
<span class="font-semibold">Nuxt SEO v2 stable is here!</span>
</template>
</UBanner>
Expand Down
83 changes: 83 additions & 0 deletions docs/app/components/DocsSidebarHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<script setup lang="ts">
const module = useModule()
const searchTerm = ref('')
const _nav = await useDocsNav()
const nav = computed(() => {
const { top = [], bottom = [] } = _nav.value?.nav.value || {}
return {
top,
bottom,
}
})
const files = computed(() => _nav.value?.files.value || [])
</script>

<template>
<div>
<div class="isolate -ml-2.5 sticky pt-8 rounded bg-white dark:bg-gray-900 top-0 z-1">
<ModuleCard :key="module.slug" :module="module" :version="false" class="mb-2" />
</div>
<div class="flex items-center gap-1 mb-3">
<USelectMenu :search-input="false" size="sm" :model-value="module.version" :items="module.versions?.map(v => ({ label: v, disabled: v !== module.version }))" class="w-full" />

<UTooltip
text="Search"
:kbds="['meta', 'K']"
>
<UContentSearchButton class=" opacity-70 hover:opacity-100" />
</UTooltip>

<UButton
title="GitHub"
aria-label="GitHub"
:to="`https://github.com/${module.repo}`"
target="_blank"
color="neutral"
variant="ghost"
class="transition opacity-70 hover:opacity-100"
icon="i-carbon-logo-github"
/>
<UButton
title="NPM"
aria-label="NPM"
:to="`https://npmjs.com/package/${module.npm}`"
target="_blank"
color="neutral"
variant="ghost"
class="transition opacity-70 hover:opacity-100"
icon="i-carbon-logo-npm"
/>
</div>
<nav aria-title="Documentation Navigation">
<ContentNavigation as="div" class="mb-5" default-open :collapsible="false" :navigation="nav.top" highlight :ui="{ listWithChildren: 'sm:ml-0 my-10' }">
<template #link-leading="{ link, active }">
<div v-if="link.icon" class="rounded-md p-1 inline-flex ring-inset ring-1 bg-gray-100/50 dark:bg-gray-800/50 ring-gray-300 dark:ring-gray-700 group-hover:bg-primary group-hover:ring-primary group-hover:text-background" :class="active ? 'dark:bg-teal-700' : ''">
<UIcon :name="link.icon" class="w-4 h-4 text-primary-400 dark:text-sky-200" />
</div>
</template>
</ContentNavigation>
<div class="bg-gray-800 h-[1px] my-5 mr-5" />
<ContentNavigation as="div" default-open :collapsible="false" :navigation="nav.bottom" highlight :ui="{ listWithChildren: 'sm:ml-0 my-10' }">
<template #link="{ link }">
<div v-if="!link.mdc" class="flex items-center gap-2">
<UIcon v-if="link.icon" :name="link.icon" class="w-4 h-4 text-primary-400 dark:text-sky-200" />
<div :class="link.children?.length ? 'text-sm font-bold' : ''">
{{ link.title }}
</div>
</div>
<div v-else>
<MDC :value="link.title" unwrap="p" />
</div>
</template>
</ContentNavigation>
</nav>
<ClientOnly>
<LazyUContentSearch
v-model:search-term="searchTerm"
:files="files"
:navigation="[{ title: 'Getting Started', _path: `/docs/${module.slug}/getting-started`, path: `/docs/${module.slug}/getting-started`, children: nav.top }, ...nav.bottom]"
:fuse="{ resultLimit: 42 }"
/>
</ClientOnly>
</div>
</template>
Loading

0 comments on commit a93b137

Please sign in to comment.