Building phase one

template/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

template/README.md

@@ -0,0 +1,75 @@
+# Nuxt Content Starter
+
+Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

template/app/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="app">
+    <NuxtRouteAnnouncer />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

template/app/assets/css/global.css

@@ -0,0 +1,305 @@
+/* ── Light Theme (Default) ────────────────────────────────── */
+:root {
+  --bg-body: #faf6f0;
+  --bg-elevated: #fffdf8;
+  --text-primary: #2d2418;
+  --text-heading: #1a1408;
+  --text-secondary: #5c4a37;
+  --text-muted: #7a6b56;
+  --border-light: #f0e5d7;
+  --border-medium: #e8dbcc;
+  --border-accent: #d4c4b0;
+  --link-color: #b45309;
+  --link-hover: #92400e;
+  --link-border: rgba(180, 83, 9, 0.25);
+  --link-border-hover: rgba(180, 83, 9, 0.6);
+  --strong-color: #1a1408;
+  --marker-color: #5c4a37;
+  --blockquote-bg: #fdf9f3;
+  --blockquote-border: #d4c4b0;
+  --blockquote-text: #5c4a37;
+  --code-inline-bg: #fef3e2;
+  --code-inline-color: #9a4710;
+  --code-block-bg: #1f1910;
+  --code-block-color: #e8dbcc;
+  --table-border: #e8dbcc;
+  --table-header-bg: #fdf9f3;
+  --table-header-text: #4a3b2c;
+  --table-row-border: #f5efe6;
+  --table-cell-text: #5c4a37;
+  --hr-color: #e8dbcc;
+}
+
+/* ── Dark Theme ───────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-body: #17120c;
+    --bg-elevated: #1f1810;
+    --text-primary: #d4c4b0;
+    --text-heading: #e8dbcc;
+    --text-secondary: #a89580;
+    --text-muted: #7a6b56;
+    --border-light: #2e2419;
+    --border-medium: #3d3125;
+    --border-accent: #4f4030;
+    --link-color: #fb923c;
+    --link-hover: #fdba74;
+    --link-border: rgba(251, 146, 60, 0.3);
+    --link-border-hover: rgba(251, 146, 60, 0.6);
+    --strong-color: #e8dbcc;
+    --marker-color: #a89580;
+    --blockquote-bg: #1f1810;
+    --blockquote-border: #4f4030;
+    --blockquote-text: #a89580;
+    --code-inline-bg: #2a2015;
+    --code-inline-color: #fb923c;
+    --code-block-bg: #0e0a06;
+    --code-block-color: #d4c4b0;
+    --table-border: #3d3125;
+    --table-header-bg: #1f1810;
+    --table-header-text: #cbd5c4;
+    --table-row-border: #2e2419;
+    --table-cell-text: #a89580;
+    --hr-color: #3d3125;
+  }
+}
+
+/* ── Reset & Base ─────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0 auto;
+  padding: 0;
+  line-height: 1.7;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  color: var(--text-primary);
+  background-color: var(--bg-body);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+#app {
+  min-height: 100vh;
+}
+
+/* ── Layout Container ─────────────────────────────────────── */
+.prose-wrapper {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+}
+
+/* ── Typography ───────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 2em;
+  margin-bottom: 0.6em;
+  line-height: 1.3;
+  color: var(--text-heading);
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 2.25rem;
+  padding-bottom: 0.5em;
+  border-bottom: 2px solid var(--border-medium);
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  font-size: 1.75rem;
+  padding-bottom: 0.35em;
+  border-bottom: 1px solid var(--border-light);
+}
+
+h3 {
+  font-size: 1.375rem;
+}
+
+h4 {
+  font-size: 1.125rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+p {
+  margin: 0 0 1.25em;
+  line-height: 1.8;
+}
+
+/* ── Links ────────────────────────────────────────────────── */
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  border-bottom: 1px solid var(--link-border);
+  transition: color 0.2s, border-color 0.2s;
+}
+
+a:hover {
+  color: var(--link-hover);
+  border-bottom-color: var(--link-border-hover);
+}
+
+/* ── Emphasis & Strong ────────────────────────────────────── */
+strong {
+  font-weight: 700;
+  color: var(--strong-color);
+}
+
+em {
+  font-style: italic;
+}
+
+/* ── Lists ────────────────────────────────────────────────── */
+ul, ol {
+  margin: 0 0 1.25em;
+  padding-left: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.35em;
+  line-height: 1.7;
+}
+
+li::marker {
+  color: var(--marker-color);
+}
+
+/* ── Blockquote ───────────────────────────────────────────── */
+blockquote {
+  margin: 0 0 1.25em;
+  padding: 0.85em 1.25em;
+  border-left: 4px solid var(--blockquote-border);
+  background: var(--blockquote-bg);
+  color: var(--blockquote-text);
+  border-radius: 0 6px 6px 0;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Inline Code ──────────────────────────────────────────── */
+code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  background: var(--code-inline-bg);
+  color: var(--code-inline-color);
+  border-radius: 4px;
+}
+
+/* ── Code Blocks ──────────────────────────────────────────── */
+pre {
+  margin: 0 0 1.25em;
+  padding: 0;
+  background: var(--code-block-bg);
+  border-radius: 8px;
+  overflow: auto;
+}
+
+pre code {
+  font-size: 0.835rem;
+  line-height: 1.65;
+  padding: 0;
+  background: none;
+  color: var(--code-block-color);
+  border-radius: 0;
+}
+
+/* ── Tables ───────────────────────────────────────────────── */
+table {
+  width: 100%;
+  margin: 0 0 1.25em;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--table-border);
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 0.9375rem;
+}
+
+thead {
+  background: var(--table-header-bg);
+}
+
+th {
+  font-weight: 600;
+  color: var(--table-header-text);
+  border-bottom: 2px solid var(--table-border);
+}
+
+td {
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid var(--table-row-border);
+  color: var(--table-cell-text);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+/* ── Horizontal Rule ──────────────────────────────────────── */
+hr {
+  margin: 2em 0;
+  border: none;
+  border-top: 2px solid var(--hr-color);
+}
+
+/* ── Images ───────────────────────────────────────────────── */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  display: block;
+  margin: 0.5em 0;
+}
+
+/* ── Forms ────────────────────────────────────────────────── */
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media (max-width: 640px) {
+  html {
+    font-size: 15px;
+  }
+
+  .prose-wrapper {
+    padding: 1.25rem 1rem 3rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.2rem;
+  }
+}

template/app/components/Alert.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="alert" :style="{ 'border-color': color }">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { color } = defineProps({
+  color: {
+    type: String,
+    default: 'orange'
+  }
+})
+</script>
+
+<style scoped>
+.alert {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 2px solid;
+  border-radius: 0.5rem;
+  background-color: var(--bg-elevated);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  .alert {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  .alert:hover {
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5);
+  }
+}
+</style>

template/app/components/Counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3>Counter: {{ count }}</h3>
+    <button @click="increment">
+      Increment
+    </button>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+
+const decrement = () => {
+  count.value--
+}
+</script>
+
+<style scoped>
+button {
+  margin: 5px;
+}
+</style>

template/app/components/NotFound.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="prose-wrapper">
+    <h1>Page not found dskldksla</h1>
+  </div>
+</template>
+
+<style scoped>
+</style>

template/app/pages/[...slug].vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: page } = await useAsyncData('page-' + route.path, () => {
+  return queryCollection('content').path(route.path).first()
+})
+
+if (!page.value) {
+  useHead({ title: 'Page not found', meta: [{ name: 'robots', content: 'noindex' }] })
+}
+</script>
+
+<template>
+  <div class="prose-wrapper" v-if="page">
+    <ContentRenderer :value="page" />
+  </div>
+  <NotFound />
+</template>

template/content.config.ts

@@ -0,0 +1,10 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**',
+    }),
+  },
+})

template/content/about.md

@@ -0,0 +1,3 @@
+# About Content Version 3
+
+[Back home](/)

template/content/index.md

@@ -0,0 +1,24 @@
+# Welcome to Nuxt Content Starter
+
+This is the main page displaying Markdown located at [content/index.md](https://github.com/nuxt/starter/blob/content/content/index.md).
+
+Move to [about](/about) page.
+
+## Manage your Contents
+
+Create new pages or modify the existing ones in `content/` directory.
+
+## Query & Render Pages
+
+You can find an example of querying contents and rendering them in a [catch-all page](https://github.com/nuxt/starter/blob/content/app/pages/%5B...slug%5D.vue)
+
+## Integrate Vue Component
+
+::alert{color="green"}
+The current [alert](https://github.com/nuxt/starter/blob/content/app/components/Alert.vue) and the [counter](https://github.com/nuxt/starter/blob/content/app/components/Counter.vue) below are `Vue` components integrated into the Markdown.
+::
+
+::counter
+::
+
+Checkout out the [documentation](https://content.nuxt.com/docs/getting-started) to learn more.

template/nuxt.config.ts

@@ -0,0 +1,17 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/content',
+  ],
+  css: ['~/assets/css/global.css'],
+  devtools: { enabled: true },
+  compatibilityDate: '2024-04-03',
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+      ]
+    }
+  }
+})

template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "publisher",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@nuxt/content": "^3.14.0",
+    "better-sqlite3": "^12.11.1",
+    "nuxt": "^4.4.8",
+    "vue": "^3.5.35",
+    "vue-router": "^5.1.0"
+  }
+}

template/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}