Skip to content

Commit 15b16ed

Browse files
bryantgillespieconnorwinston
bryantgillespie
and
connorwinston
authored
Major Upgrade - Latest Nuxt Packages (#344)
* update tailwind * add content config * update dependencies * update to tailwind 4 / nuxt ui 3 * nuxt content changes * poppins font * API Reference updates * cleanup * smooth scroll behavior * update content components to nuxt ui v4 * copy doc button for markdown * add section links to sidebar using PageAnchors component * update table of contents * Update TOC * header and footer * add back posthog * docs homepage * updated app config * remove local search * fix layouts * newsletter form * only show query params when there are any * tutorials * pages update * navigation changes for nuxt content v2 * shiny card updates * remove logging * ignore highlight route - maybe fix the build? * testing no api route * fix studio box * fix duplicated vars * fix colors for callouts * fix content ordering * update layouts to match * fix font * fix docs header error * point to bsl for license * add claude and gpt * fix oas mapping * page titles and descriptions * latest deps * remove minimark * debug override for mdc locally * fix tutorial text * add keys to mdc components 🤞 * try transpile shiki again * missing import for mapOasNavigation * add prerender module to ensure all api references are prerendered * fix url for chatgpt or claude * fix mobile nav * use non-null Co-authored-by: Connor Winston <[email protected]> * add repsonse label and fix type * consistent use navigateTo * fix type error * add posthog * fix type issue * unused props const * fix types * remove comments * add non null * fix toc * fix types * fix banner bar * add back previous button behavior --------- Co-authored-by: Connor Winston <[email protected]>
1 parent e9ea3c0 commit 15b16ed

File tree

145 files changed

+6740
-7305
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

145 files changed

+6740
-7305
lines changed

‎app/app.config.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ export default defineAppConfig({
44
},
55

66
ui: {
7-
primary: 'purple', // Tailwind color name,
7+
colors: {
8+
primary: 'purple',
9+
secondary: 'pink',
10+
neutral: 'slate',
11+
},
812

913
content: {
1014
callout: {
@@ -14,6 +18,21 @@ export default defineAppConfig({
1418
},
1519
},
1620

21+
uiPro: {
22+
page: {
23+
slots: {
24+
root: 'lg:gap-8',
25+
},
26+
},
27+
prose: {
28+
pre: {
29+
slots: {
30+
base: 'text-xs/4',
31+
},
32+
},
33+
},
34+
},
35+
1736
header: {
1837
nav: [
1938
{
@@ -155,6 +174,13 @@ export default defineAppConfig({
155174
description: 'Everything you need to start building. Provisioned in 90 seconds.',
156175
cta: 'Get Started',
157176
},
177+
newsletter: {
178+
description: 'Get once-a-month release notes & real‑world code tips...no fluff. 🐰',
179+
form: {
180+
hsPortal: 20534155,
181+
hsForm: 'd57a69e4-6f43-4768-a600-5f7d30306260',
182+
},
183+
},
158184
},
159185

160186
preFooter: {

‎app/app.vue

Lines changed: 7 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,27 @@
11
<script setup lang="ts">
2+
import type { ContentNavigationItem } from '@nuxt/content';
23
import { spec } from '@directus/openapi';
3-
import { useRoute } from 'vue-router';
4-
import { nextTick, watch } from 'vue';
54
6-
const route = useRoute();
7-
8-
const { data: navigation } = useAsyncData('navigation', () => fetchContentNavigation());
5+
const { data: navigation } = useAsyncData('content-navigation', () => queryCollectionNavigation('content', ['title', 'description', 'icon', 'links']));
96
107
provide('openapi', spec);
11-
provide('navigation', navigation);
8+
provide('navigation', navigation as Ref<ContentNavigationItem[]>);
129
1310
defineOgImage({
1411
url: '/img/og-image.png',
1512
});
16-
17-
const { search } = useAppConfig();
18-
19-
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false });
20-
const updateLinks = () => {
21-
nextTick(() => {
22-
const links = document.querySelectorAll('a');
23-
links.forEach((link) => {
24-
const href = link.getAttribute('href');
25-
if (
26-
href?.startsWith('http')
27-
&& link.hostname !== window.location.hostname
28-
) {
29-
link.setAttribute('target', '_blank');
30-
link.setAttribute('rel', 'noopener noreferrer');
31-
}
32-
});
33-
});
34-
};
35-
36-
onMounted(() => {
37-
nextTick(() => {
38-
setTimeout(updateLinks, 100);
39-
});
40-
});
41-
42-
watch(() => route.fullPath, () => {
43-
nextTick(() => {
44-
setTimeout(updateLinks, 100);
45-
});
46-
});
4713
</script>
4814

4915
<template>
50-
<div>
16+
<UApp>
17+
<NuxtLoadingIndicator color="var(--color-primary)" />
18+
<DocsBanner />
5119
<DocsHeader />
52-
5320
<UMain>
5421
<NuxtLayout>
5522
<NuxtPage />
5623
</NuxtLayout>
5724
</UMain>
58-
5925
<DocsFooter />
60-
61-
<ClientOnly v-if="search.backend === 'nuxt'">
62-
<LazyUContentSearch
63-
ref="searchRef"
64-
:files="files"
65-
:navigation="navigation"
66-
:fuse="{ resultLimit: 42 }"
67-
/>
68-
</ClientOnly>
69-
</div>
26+
</UApp>
7027
</template>

‎app/assets/css/algolia.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
html.light {
2-
--docsearch-primary-color: rgb(var(--color-primary-500));
2+
--docsearch-primary-color: var(--color-primary-500);
33
}
44

55
html.dark[data-theme='dark'] {
6-
--docsearch-primary-color: rgb(var(--color-primary-400));
6+
--docsearch-primary-color: var(--color-primary-400);
77

88
--docsearch-text-color: rgb(245, 246, 247);
9-
--docsearch-container-background: color-mix(in srgb, rgb(var(--color-gray-950)), transparent 20%);
10-
--docsearch-modal-background: rgb(var(--color-gray-800));
9+
--docsearch-container-background: color-mix(in srgb, var(--color-neutral-950), transparent 20%);
10+
--docsearch-modal-background: var(--color-neutral-800);
1111
--docsearch-modal-shadow: inset 1px 1px 0 0 var(--docsearch-footer-background),
12-
0 3px 8px 0 rgb(var(--color-gray-950));
13-
--docsearch-searchbox-background: rgb(var(--color-gray-800));
14-
--docsearch-searchbox-focus-background: rgb(var(--color-gray-950));
12+
0 3px 8px 0 rgb(var(--color-neutral-950));
13+
--docsearch-searchbox-background: var(--color-neutral-800);
14+
--docsearch-searchbox-focus-background: var(--color-neutral-950);
1515
--docsearch-hit-color: rgb(190, 195, 201);
1616
--docsearch-hit-shadow: none;
17-
--docsearch-hit-background: color-mix(in srgb, rgb(var(--color-gray-700)) 30%, transparent);
18-
--docsearch-key-gradient: rgb(var(--color-gray-900));
17+
--docsearch-hit-background: color-mix(in srgb, var(--color-neutral-700) 30%, transparent);
18+
--docsearch-key-gradient: var(--color-neutral-900);
1919
--docsearch-key-shadow: transparent;
2020
--docsearch-key-pressed-shadow: transparent;
21-
--docsearch-footer-background: color-mix(in srgb, rgb(var(--color-gray-800)) 70%, rgb(var(--color-gray-900)));
22-
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(var(--color-gray-700), 0.5),
21+
--docsearch-footer-background: color-mix(in srgb, rgb(var(--color-neutral-800)) 70%, rgb(var(--color-neutral-900)));
22+
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(var(--color-neutral-700), 0.5),
2323
0 -4px 8px 0 rgba(0, 0, 0, 0.2);
2424
--docsearch-logo-color: rgb(255, 255, 255);
25-
--docsearch-muted-color: rgb(var(--color-gray-500));
25+
--docsearch-muted-color: rgb(var(--color-neutral-500));
2626
}
2727

2828
.DocSearch-Container {

‎app/assets/css/main.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import "tailwindcss";
2+
@import "@nuxt/ui-pro";
3+
4+
@source "../../../content/**/*";
5+
6+
7+
@theme static {
8+
--font-sans: 'Inter', sans-serif;
9+
--font-display: 'Poppins', sans-serif;
10+
11+
--color-purple-50: #f3f2ff;
12+
--color-purple-100: #e9e8ff;
13+
--color-purple-200: #d6d4ff;
14+
--color-purple-300: #b8b1ff;
15+
--color-purple-400: #9585ff;
16+
--color-purple-500: #6644ff;
17+
--color-purple-600: #6030f7;
18+
--color-purple-700: #531ee3;
19+
--color-purple-800: #4418bf;
20+
--color-purple-900: #39169c;
21+
--color-purple-950: #210b6a;
22+
23+
24+
--color-pink-50: #fef1fa;
25+
--color-pink-100: #fee5f6;
26+
--color-pink-200: #feccee;
27+
--color-pink-300: #ff99dd;
28+
--color-pink-400: #fe68c9;
29+
--color-pink-500: #f83cb0;
30+
--color-pink-600: #e81a8f;
31+
--color-pink-700: #ca0c72;
32+
--color-pink-800: #a70d5e;
33+
--color-pink-900: #8b1050;
34+
--color-pink-950: #55022d;
35+
}
36+
37+
/*
38+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
39+
so we've added these compatibility styles to make sure everything still
40+
looks the same as it did with Tailwind CSS v3.
41+
42+
If we ever want to remove these styles, we need to add an explicit border
43+
color utility to any element that depends on these defaults.
44+
*/
45+
@layer base {
46+
*,
47+
::after,
48+
::before,
49+
::backdrop,
50+
::file-selector-button {
51+
border-color: var(--color-gray-200, currentcolor);
52+
}
53+
}
54+
55+
button,
56+
[role="button"] {
57+
cursor: pointer;
58+
}
59+
60+
:disabled {
61+
cursor: default;
62+
}
63+
64+
65+
html {
66+
scroll-behavior: smooth;
67+
}

0 commit comments

Comments
 (0)