diff --git a/app/app.config.ts b/app/app.config.ts index 1fc30e9b..7178d4f4 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -4,7 +4,11 @@ export default defineAppConfig({ }, ui: { - primary: 'purple', // Tailwind color name, + colors: { + primary: 'purple', + secondary: 'pink', + neutral: 'slate', + }, content: { callout: { @@ -14,6 +18,21 @@ export default defineAppConfig({ }, }, + uiPro: { + page: { + slots: { + root: 'lg:gap-8', + }, + }, + prose: { + pre: { + slots: { + base: 'text-xs/4', + }, + }, + }, + }, + header: { nav: [ { @@ -155,6 +174,13 @@ export default defineAppConfig({ description: 'Everything you need to start building. Provisioned in 90 seconds.', cta: 'Get Started', }, + newsletter: { + description: 'Get once-a-month release notes & real‑world code tips...no fluff. 🐰', + form: { + hsPortal: 20534155, + hsForm: 'd57a69e4-6f43-4768-a600-5f7d30306260', + }, + }, }, preFooter: { diff --git a/app/app.vue b/app/app.vue index a82e3d8a..c1ba129b 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,69 +1,26 @@ diff --git a/app/assets/css/algolia.css b/app/assets/css/algolia.css index 653d6a05..694701b2 100644 --- a/app/assets/css/algolia.css +++ b/app/assets/css/algolia.css @@ -1,28 +1,28 @@ html.light { - --docsearch-primary-color: rgb(var(--color-primary-500)); + --docsearch-primary-color: var(--color-primary-500); } html.dark[data-theme='dark'] { - --docsearch-primary-color: rgb(var(--color-primary-400)); + --docsearch-primary-color: var(--color-primary-400); --docsearch-text-color: rgb(245, 246, 247); - --docsearch-container-background: color-mix(in srgb, rgb(var(--color-gray-950)), transparent 20%); - --docsearch-modal-background: rgb(var(--color-gray-800)); + --docsearch-container-background: color-mix(in srgb, var(--color-neutral-950), transparent 20%); + --docsearch-modal-background: var(--color-neutral-800); --docsearch-modal-shadow: inset 1px 1px 0 0 var(--docsearch-footer-background), - 0 3px 8px 0 rgb(var(--color-gray-950)); - --docsearch-searchbox-background: rgb(var(--color-gray-800)); - --docsearch-searchbox-focus-background: rgb(var(--color-gray-950)); + 0 3px 8px 0 rgb(var(--color-neutral-950)); + --docsearch-searchbox-background: var(--color-neutral-800); + --docsearch-searchbox-focus-background: var(--color-neutral-950); --docsearch-hit-color: rgb(190, 195, 201); --docsearch-hit-shadow: none; - --docsearch-hit-background: color-mix(in srgb, rgb(var(--color-gray-700)) 30%, transparent); - --docsearch-key-gradient: rgb(var(--color-gray-900)); + --docsearch-hit-background: color-mix(in srgb, var(--color-neutral-700) 30%, transparent); + --docsearch-key-gradient: var(--color-neutral-900); --docsearch-key-shadow: transparent; --docsearch-key-pressed-shadow: transparent; - --docsearch-footer-background: color-mix(in srgb, rgb(var(--color-gray-800)) 70%, rgb(var(--color-gray-900))); - --docsearch-footer-shadow: inset 0 1px 0 0 rgba(var(--color-gray-700), 0.5), + --docsearch-footer-background: color-mix(in srgb, rgb(var(--color-neutral-800)) 70%, rgb(var(--color-neutral-900))); + --docsearch-footer-shadow: inset 0 1px 0 0 rgba(var(--color-neutral-700), 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2); --docsearch-logo-color: rgb(255, 255, 255); - --docsearch-muted-color: rgb(var(--color-gray-500)); + --docsearch-muted-color: rgb(var(--color-neutral-500)); } .DocSearch-Container { diff --git a/app/assets/css/main.css b/app/assets/css/main.css new file mode 100644 index 00000000..1dfca4c0 --- /dev/null +++ b/app/assets/css/main.css @@ -0,0 +1,58 @@ +@import "tailwindcss"; +@import "@nuxt/ui-pro"; + +@source "../../../content/**/*"; + + +@theme static { + --font-sans: 'Inter Variable', sans-serif; + --font-display: 'Poppins', sans-serif; + + --color-purple-50: #f3f2ff; + --color-purple-100: #e9e8ff; + --color-purple-200: #d6d4ff; + --color-purple-300: #b8b1ff; + --color-purple-400: #9585ff; + --color-purple-500: #6644ff; + --color-purple-600: #6030f7; + --color-purple-700: #531ee3; + --color-purple-800: #4418bf; + --color-purple-900: #39169c; + --color-purple-950: #210b6a; + + + --color-pink-50: #fef1fa; + --color-pink-100: #fee5f6; + --color-pink-200: #feccee; + --color-pink-300: #ff99dd; + --color-pink-400: #fe68c9; + --color-pink-500: #f83cb0; + --color-pink-600: #e81a8f; + --color-pink-700: #ca0c72; + --color-pink-800: #a70d5e; + --color-pink-900: #8b1050; + --color-pink-950: #55022d; +} + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} + + +html { + scroll-behavior: smooth; +} diff --git a/app/components/ApiEndpoint.vue b/app/components/ApiEndpoint.vue index 517ba803..b01f041b 100644 --- a/app/components/ApiEndpoint.vue +++ b/app/components/ApiEndpoint.vue @@ -2,11 +2,11 @@ import type { OpenAPIObject, RequestBodyObject, -} from "openapi3-ts/oas30"; +} from 'openapi3-ts/oas30'; import type { DerefedOperationObject, FlattenedOperationObject, -} from "~/types"; +} from '~/types'; const openapi = inject('openapi')!; @@ -67,16 +67,16 @@ const responseBodyExample = computed(() => {