From 29d8e2719d5cc1822c1a03342bb1e28cb45322d5 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 7 Nov 2024 22:25:41 +0100 Subject: [PATCH] docs(app): implement index page --- docs/app/pages/index.vue | 65 ++++++++++ docs/content.config.ts | 40 ++++++ docs/content/index.yml | 184 ++++++++++++++++++++++++++++ docs/public/home/cta-dark.svg | 91 ++++++++++++++ docs/public/home/cta-light.svg | 91 ++++++++++++++ docs/public/home/features-dark.svg | 56 +++++++++ docs/public/home/features-light.svg | 56 +++++++++ docs/public/home/hero-dark.svg | 91 ++++++++++++++ docs/public/home/hero-light.svg | 91 ++++++++++++++ docs/public/home/pro-dark.svg | 126 +++++++++++++++++++ docs/public/home/pro-light.svg | 122 ++++++++++++++++++ 11 files changed, 1013 insertions(+) create mode 100644 docs/app/pages/index.vue create mode 100644 docs/content/index.yml create mode 100644 docs/public/home/cta-dark.svg create mode 100644 docs/public/home/cta-light.svg create mode 100644 docs/public/home/features-dark.svg create mode 100644 docs/public/home/features-light.svg create mode 100644 docs/public/home/hero-dark.svg create mode 100644 docs/public/home/hero-light.svg create mode 100644 docs/public/home/pro-dark.svg create mode 100644 docs/public/home/pro-light.svg diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue new file mode 100644 index 000000000..f45154289 --- /dev/null +++ b/docs/app/pages/index.vue @@ -0,0 +1,65 @@ + + + diff --git a/docs/content.config.ts b/docs/content.config.ts index d35a48651..dc7fdcb4d 100644 --- a/docs/content.config.ts +++ b/docs/content.config.ts @@ -20,4 +20,44 @@ export const collections = { })).optional(), }), }), + content: defineCollection({ + type: 'data', + source: '*.yml', + schema: z.object({ + hero: z.object({ + title: z.string(), + description: z.string(), + links: z.array(z.object({ + label: z.string(), + icon: z.string(), + to: z.string(), + })).optional(), + image: z.object({ + dark: z.string(), + light: z.string(), + }).optional(), + }).optional(), + sections: z.array(z.object({ + title: z.string(), + description: z.string().optional(), + class: z.string().optional(), + code: z.string().optional(), + ui: z.object({}).optional(), + features: z.array(z.object({ + icon: z.string().optional(), + title: z.string().optional(), + description: z.string().optional(), + })).optional(), + links: z.array(z.object({ + label: z.string(), + icon: z.string(), + to: z.string(), + })).optional(), + image: z.object({ + dark: z.string(), + light: z.string(), + }).optional(), + })).optional(), + }), + }), } diff --git a/docs/content/index.yml b/docs/content/index.yml new file mode 100644 index 000000000..b801ead6e --- /dev/null +++ b/docs/content/index.yml @@ -0,0 +1,184 @@ +hero: + title: The git-based CMS for
Nuxt projects. + description: Nuxt Content is a module for Nuxt that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then easily import and display it in their application. + image: + dark: /home/hero-dark.svg + light: /home/hero-light.svg + class: 'size-full max-w-[calc(100%-2rem)] absolute bottom-0 inset-x-4' + links: + - label: Get Started + trailingIcon: i-lucide-arrow-right + to: /docs/getting-started + - label: Open Visual Editor + to: https://nuxt.studio + target: _blank + color: neutral + variant: subtle +sections: + - features: + - title: File-based CMS + icon: i-lucide-files + description: Write your content in Markdown, YML, CSV or JSON and query it in your components. + - title: Query Builder + icon: i-lucide-filter + description: Query your content with a MongoDB-like API to fetch the right data at the right time. + - title: SQLite powered + icon: i-lucide-database + description: Add custom fields to your content, making it suitable for various types of projects. + - title: Markdown with Vue + icon: i-simple-icons-markdown + description: Use Vue components in Markdown files, with props, slots and nested components. + - title: Code highlighting + icon: i-lucide-list-minus + description: Display beautiful code blocks on your website with the Shiki integration supporting VS Code. + - title: Visual editor + icon: i-lucide-mouse-pointer-click + description: Let your team edit your Nuxt Content project with a visual editor. + - title: Navigation Generation + icon: i-lucide-panel-left + description: Get your content structure in a structured object and display a navigation in minutes. + - title: Prose Component + icon: i-lucide-heading-1 + description: Easily drop in components to render different parts of your Markdown content. + - title: Deploy everywhere + icon: i-lucide-globe + description: Nuxt Content works on all hosting providers, static, server, serverless & edge. + - title: Everything you need for content management + description: Combine file-based simplicity with Vue component power. Build any content-rich website, from documentation to complex applications. + class: '-mb-24 sm:-mb-32' + image: + dark: /home/features-dark.svg + light: /home/features-light.svg + class: 'size-full lg:h-full max-w-[calc(100%-2rem)] absolute top-0 inset-x-4' + - title: Markdown meets [Vue]{class="text-[var(--ui-primary)]"} + description: We invented the MDC syntax to let you use your Vue components with props and slots inside your Markdown files. + orientation: horizontal + reverse: true + features: + - title: Specify props with frontmatter syntax + icon: i-lucide-list + - title: Use components slots with `#` + icon: i-lucide-hash + - title: Add any other html attributes + icon: i-lucide-code-xml + links: + - label: Learn more about MDC + to: /docs/mdc + trailingIcon: i-lucide-arrow-right + color: neutral + variant: subtle + - label: Watch 3min demo + trailingIcon: i-lucide-circle-play + color: neutral + variant: ghost + code: | + ::code-group + + ```md [content/index.md] + --- + title: Nuxt Content + description: An open source blog theme powered by Nuxt. + --- + + ::landing-hero + --- + image: /images/mountain.png + --- + #title + Welcome to Alpine + + #description + An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable on [Nuxt Studio](https://nuxt.studio). + :: + ``` + + ```vue [components/LandingHero.vue] + + ``` + + :: + - title: Query with [Type-Safety]{class="text-[var(--ui-secondary)]"} + description: Define your content structure with collections and query them with schema validation and full type-safety. + orientation: horizontal + features: + - title: Create collections for similar content files + icon: i-lucide-layout-grid + - title: Define schema for the collection front matter + icon: i-lucide-circle-check + - title: Get auto-completion in your Vue files + icon: i-lucide-text-cursor + links: + - label: Learn more about query + to: /docs/queries + trailingIcon: i-lucide-arrow-right + color: neutral + variant: subtle + code: | + ::code-group + + ```vue [pages/blog.vue] + + + + ``` + + ```ts [content.config.ts] + export default defineContent({ + collections: ['blog'], + }) + ``` + + :: + - title: Make changes [like a pro]{class="text-[var(--ui-primary)]"} + description: Edit your Nuxt Content website with our Notion-like Markdown editor with live preview and online collaboration. + orientation: horizontal + reverse: true + image: + dark: /home/pro-dark.svg + light: /home/pro-light.svg + class: 'size-full' + features: + - title: Commit & push to GitHub with one click + icon: i-simple-icons-github + - title: Invite editors to login with Google and publish changes + icon: i-simple-icons-google + - title: Edit the content in real-time with your team + icon: i-lucide-users + links: + - label: Discover the Nuxt Content Editor + to: https://nuxt.studio + trailingIcon: i-lucide-arrow-right + color: neutral + - title: Add a git-based CMS to your Nuxt project. + links: + - label: Start reading docs + to: /docs/getting-started + trailingIcon: i-lucide-arrow-right + - label: Open Visual Editor + to: https://nuxt.studio + target: _blank + color: neutral + variant: outline + ui: + container: 'lg:py-52' + image: + dark: /home/cta-dark.svg + light: /home/cta-light.svg + class: 'size-full max-w-[calc(100%-2rem)] absolute bottom-0 inset-x-4' diff --git a/docs/public/home/cta-dark.svg b/docs/public/home/cta-dark.svg new file mode 100644 index 000000000..24a735d55 --- /dev/null +++ b/docs/public/home/cta-dark.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/cta-light.svg b/docs/public/home/cta-light.svg new file mode 100644 index 000000000..4e82493b0 --- /dev/null +++ b/docs/public/home/cta-light.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/features-dark.svg b/docs/public/home/features-dark.svg new file mode 100644 index 000000000..315ddd28e --- /dev/null +++ b/docs/public/home/features-dark.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/features-light.svg b/docs/public/home/features-light.svg new file mode 100644 index 000000000..7f35067b9 --- /dev/null +++ b/docs/public/home/features-light.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/hero-dark.svg b/docs/public/home/hero-dark.svg new file mode 100644 index 000000000..1e9b9a384 --- /dev/null +++ b/docs/public/home/hero-dark.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/hero-light.svg b/docs/public/home/hero-light.svg new file mode 100644 index 000000000..701336d01 --- /dev/null +++ b/docs/public/home/hero-light.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/pro-dark.svg b/docs/public/home/pro-dark.svg new file mode 100644 index 000000000..089cea6b3 --- /dev/null +++ b/docs/public/home/pro-dark.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/home/pro-light.svg b/docs/public/home/pro-light.svg new file mode 100644 index 000000000..9730fd945 --- /dev/null +++ b/docs/public/home/pro-light.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +