Skip to content

Latest commit

Β 

History

History
108 lines (85 loc) Β· 5.91 KB

File metadata and controls

108 lines (85 loc) Β· 5.91 KB

Nuxtify.dev: Marketing Site Context

Nuxtify.dev is the content-driven marketing site for the Nuxtify framework. This repository contains the source code for nuxtify.devβ€”a progressive, modern, and highly-customizable boilerplate framework to launch products in minutes.


πŸš€ Project Overview

Nuxtify is built using Nuxt 4 and Vuetify 3, pre-integrated with powerful developer tools, styling libraries, and serverless hosting capabilities:

  • UI & Theme: Vuetify v3 for material design with custom thematic settings.
  • Content Engine: Nuxt Content v3 for markdown-driven dynamic pages, blog posts, topics, and authors.
  • Backend & Deployments: NuxtHub (Drizzle ORM + SQLite/Cloudflare D1 database).
  • Static Analysis: ESLint paired with mdclint for unified JavaScript/TypeScript/Vue/Markdown validation.
  • SEO & Accessibility: Structured JSON-LD schema generation via nuxt-schema-org, dynamic XML sitemaps, robots.txt, and accessibility validation via @nuxt/a11y.

πŸ“‚ Key Architecture & File Structure

nuxtify.dev/
β”œβ”€β”€ app/                        # Main Nuxt application directory
β”‚   β”œβ”€β”€ app.config.ts           # App branding, footer links, and global configuration
β”‚   └── utils/
β”‚       └── contentSchemas.ts   # Zod schema definitions for content collections
β”œβ”€β”€ content/                    # Markdown content files (.md)
β”‚   β”œβ”€β”€ about.md
β”‚   └── index.md
β”œβ”€β”€ layers/                     # Extensible Nuxt Layers
β”‚   └── cms/
β”‚       └── nuxt.config.ts      # CMS specific layer settings
β”œβ”€β”€ public/                     # Static assets (favicon, logos, images)
β”œβ”€β”€ server/                     # Backend API & Server Routes (TypeScript)
β”œβ”€β”€ content.config.ts           # Nuxt Content v3 collection configurations
β”œβ”€β”€ eslint.config.mjs           # ESLint configuration incorporating markdown linting (mdclint)
β”œβ”€β”€ nuxt.config.ts              # Core Nuxt configuration and modules
β”œβ”€β”€ redirects.config.ts         # Centralized Nitro route rules and redirects
β”œβ”€β”€ sitemap.utils.ts            # Dynamic sitemap exclusion generator for draft content
β”œβ”€β”€ vuetify.config.ts           # Vuetify custom branding, components, and defaults
└── wrangler.jsonc              # Cloudflare Wrangler routing configurations

βš™οΈ Core Technical Specifications

Nuxt Configuration (nuxt.config.ts)

  • Modules Loaded:
    • @nuxt/content (v3)
    • @nuxt/a11y
    • @nuxt/eslint
    • @nuxthub/core
    • @nuxtify/cms
  • Database Engine: NuxtHub configured with SQLite (driver: 'd1', dialect: 'sqlite').
  • Route Rules & ISR: Incremental Static Regeneration (isr: true) is enabled for all paths (/**, /articles/**, /topics/**, /contributors/**).

Vuetify Theme Config (vuetify.config.ts)

  • Theme Palette:
    • primary: #020420 (Dark Navy)
    • secondary: #00DC82 (Nuxt Green)
  • Component Defaults:
    • VBtn has been configured with rounded: 0 (flat, modern sharp corners).

Content Collections (content.config.ts)

The project utilizes Nuxt Content v3's structured collection capabilities. Collections map to schema rules inside app/utils/contentSchemas.ts:

  • pages (content/*.md): Basic structure utilizing pageSchema (supporting custom image, aligned layouts, published dates).
  • contributors (content/contributors/*.md): Biographies and social URLs matching contributorSchema.
  • articles (content/articles/*.md): Blog articles/announcements mapped via articleSchema.
  • topics (content/topics/*.md): Tags, categorizations, and topics matching topicSchema.

All content collections implicitly support standard SEO fields (robots, sitemap, schemaOrg).


πŸ› οΈ Development & Build Tasks

Use the following commands to install dependencies, run the application locally, and prepare production builds:

Task Command Description
Setup npm install Install all workspace npm dependencies
Development npm run dev Start local development server with hot-reload at http://localhost:3000
Build npm run build Build the Nuxt application for Cloudflare/NuxtHub production deployment
Static Gen npm run generate Pre-render every route to static HTML files
Preview npm run preview Locally preview the built production/static assets
Lint Check npm run lint Run ESLint and Markdown validation on the codebase
Lint Fix npm run lint:fix Automatically fix lint and style violations

πŸ’‘ Development Conventions

  1. Coding Style & Linting:

    • Stylistic rules demand comma-dangles to always be present (always-multiline).
    • Standard 1TBS (One True Brace Style) must be used.
    • ESLint is configured to restrict consecutive empty lines to a maximum of 1 (@stylistic/no-multiple-empty-lines).
    • TypeScript's any type is allowed, but strongly discouraged.
  2. Markdown Conventions (mdclint):

    • Headings, lists, and paragraphs are verified via the preset: 'mdc'.
    • Custom configurations enforce underscores (_) for italics/emphasis.
    • Inline Vue components can be seamlessly loaded within markdown (e.g., ::v-alert{color="green"} ... ::).
  3. Draft Exclusion Workflow (sitemap.utils.ts):

    • Markdown files in the content/ folder marked with frontmatter property draft: true are dynamically excluded from the generated XML sitemaps to prevent indexing of unfinished documents.
  4. Branding Parameters:

    • Modifying core application titles, menus, footer navigation, or support emails should be done within app/app.config.ts under the nuxtify attribute block.