From d45b2793f147ad47da069e18f5a21eeb05ad397e Mon Sep 17 00:00:00 2001 From: andwati Date: Fri, 13 Feb 2026 21:48:43 +0300 Subject: [PATCH] feat: Rearchitect personal website with new pages, blog functionality using Nuxt UI and Nuxt Content. --- .vscode/settings.json | 8 + app/app.vue | 105 +++++++- app/assets/css/main.css | 18 ++ app/components/Alert.vue | 32 --- app/components/Counter.vue | 29 --- app/pages/[...slug].vue | 22 -- app/pages/about.vue | 116 +++++++++ app/pages/blog/[...slug].vue | 53 ++++ app/pages/blog/index.vue | 43 +++ app/pages/index.vue | 246 ++++++++++++++++++ content.config.ts | 11 +- content/about.md | 3 - .../blog/building-a-blog-with-nuxt-content.md | 56 ++++ content/blog/getting-started-with-nuxt-4.md | 45 ++++ content/blog/why-i-love-open-source.md | 41 +++ content/index.md | 24 -- nuxt.config.ts | 3 +- package.json | 3 +- pnpm-lock.yaml | 3 + 19 files changed, 746 insertions(+), 115 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 app/assets/css/main.css delete mode 100644 app/components/Alert.vue delete mode 100644 app/components/Counter.vue delete mode 100644 app/pages/[...slug].vue create mode 100644 app/pages/about.vue create mode 100644 app/pages/blog/[...slug].vue create mode 100644 app/pages/blog/index.vue create mode 100644 app/pages/index.vue delete mode 100644 content/about.md create mode 100644 content/blog/building-a-blog-with-nuxt-content.md create mode 100644 content/blog/getting-started-with-nuxt-4.md create mode 100644 content/blog/why-i-love-open-source.md delete mode 100644 content/index.md diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..30b2801 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "files.associations": { + "*.css": "tailwindcss" + }, + "editor.quickSuggestions": { + "strings": true + } +} diff --git a/app/app.vue b/app/app.vue index 0acd39e..9daa416 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,4 +1,105 @@ + + \ No newline at end of file diff --git a/app/assets/css/main.css b/app/assets/css/main.css new file mode 100644 index 0000000..aa52fed --- /dev/null +++ b/app/assets/css/main.css @@ -0,0 +1,18 @@ +@import "tailwindcss"; +@import "@nuxt/ui"; + +@source "../../../content/**/*"; + +@theme { + --color-primary-50: #f0fdf4; + --color-primary-100: #dcfce7; + --color-primary-200: #bbf7d0; + --color-primary-300: #86efac; + --color-primary-400: #4ade80; + --color-primary-500: #22c55e; + --color-primary-600: #16a34a; + --color-primary-700: #15803d; + --color-primary-800: #166534; + --color-primary-900: #14532d; + --color-primary-950: #052e16; +} diff --git a/app/components/Alert.vue b/app/components/Alert.vue deleted file mode 100644 index 4451c73..0000000 --- a/app/components/Alert.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - \ No newline at end of file diff --git a/app/components/Counter.vue b/app/components/Counter.vue deleted file mode 100644 index 3c4336d..0000000 --- a/app/components/Counter.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue deleted file mode 100644 index 9276286..0000000 --- a/app/pages/[...slug].vue +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/app/pages/about.vue b/app/pages/about.vue new file mode 100644 index 0000000..0f72e62 --- /dev/null +++ b/app/pages/about.vue @@ -0,0 +1,116 @@ + + + diff --git a/app/pages/blog/[...slug].vue b/app/pages/blog/[...slug].vue new file mode 100644 index 0000000..8f2bc6f --- /dev/null +++ b/app/pages/blog/[...slug].vue @@ -0,0 +1,53 @@ + + + diff --git a/app/pages/blog/index.vue b/app/pages/blog/index.vue new file mode 100644 index 0000000..5c3abc0 --- /dev/null +++ b/app/pages/blog/index.vue @@ -0,0 +1,43 @@ + + + diff --git a/app/pages/index.vue b/app/pages/index.vue new file mode 100644 index 0000000..5f69c93 --- /dev/null +++ b/app/pages/index.vue @@ -0,0 +1,246 @@ + + + diff --git a/content.config.ts b/content.config.ts index bf1c746..37c193b 100644 --- a/content.config.ts +++ b/content.config.ts @@ -1,4 +1,4 @@ -import { defineContentConfig, defineCollection } from "@nuxt/content"; +import { defineContentConfig, defineCollection, z } from "@nuxt/content"; export default defineContentConfig({ collections: { @@ -6,5 +6,14 @@ export default defineContentConfig({ type: "page", source: "**", }), + blog: defineCollection({ + type: "page", + source: "blog/**", + schema: z.object({ + date: z.string(), + image: z.string().optional(), + badge: z.string().optional(), + }), + }), }, }); diff --git a/content/about.md b/content/about.md deleted file mode 100644 index a381b6f..0000000 --- a/content/about.md +++ /dev/null @@ -1,3 +0,0 @@ -# About Content Version 3 - -[Back home](/) diff --git a/content/blog/building-a-blog-with-nuxt-content.md b/content/blog/building-a-blog-with-nuxt-content.md new file mode 100644 index 0000000..2fbd1ea --- /dev/null +++ b/content/blog/building-a-blog-with-nuxt-content.md @@ -0,0 +1,56 @@ +--- +title: "Building a Blog with Nuxt Content" +description: "Learn how to use Nuxt Content v3 to create a powerful, file-based blog with markdown support." +date: "2025-02-01" +image: "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&h=400&fit=crop" +badge: "Tutorial" +--- + +# Building a Blog with Nuxt Content + +Nuxt Content v3 is a powerful module that turns your Nuxt application into a git-based CMS. In this post, we'll explore how to set up a blog using Nuxt Content. + +## Why Nuxt Content? + +Nuxt Content provides several advantages for content management: + +- **Markdown support** — Write your content in Markdown with full MDC syntax support +- **Collections** — Organize your content into typed collections with schema validation +- **Querying** — Powerful query API to filter, sort, and paginate your content +- **Vue components in Markdown** — Embed Vue components directly in your markdown files + +## Setting Up Collections + +Content collections are defined in your `content.config.ts` file: + +```typescript +import { defineContentConfig, defineCollection, z } from "@nuxt/content"; + +export default defineContentConfig({ + collections: { + blog: defineCollection({ + type: "page", + source: "blog/**", + schema: z.object({ + date: z.string(), + image: z.string().optional(), + badge: z.string().optional(), + }), + }), + }, +}); +``` + +## Querying Content + +You can query your blog posts using the `queryCollection` composable: + +```typescript +const { data: posts } = await useAsyncData("posts", () => + queryCollection("blog").order("date", "DESC").all() +); +``` + +## Conclusion + +Nuxt Content makes it incredibly easy to build a content-driven website. With collections, schema validation, and the powerful query API, you have all the tools you need to create a great blog experience. diff --git a/content/blog/getting-started-with-nuxt-4.md b/content/blog/getting-started-with-nuxt-4.md new file mode 100644 index 0000000..ae27df2 --- /dev/null +++ b/content/blog/getting-started-with-nuxt-4.md @@ -0,0 +1,45 @@ +--- +title: "Getting Started with Nuxt 4" +description: "An introduction to Nuxt 4 and its new features that make web development even more enjoyable." +date: "2025-01-15" +image: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=400&fit=crop" +badge: "Nuxt" +--- + +# Getting Started with Nuxt 4 + +Nuxt 4 represents a significant evolution in the Nuxt ecosystem. With a refined project structure, improved developer experience, and powerful new features, it's never been a better time to start building with Nuxt. + +## What's New in Nuxt 4 + +Nuxt 4 brings several exciting improvements: + +- **New directory structure** — The `app/` directory is now the default home for your Vue application code +- **Improved TypeScript support** — Better type inference and auto-completion out of the box +- **Enhanced performance** — Faster builds and smaller bundle sizes +- **Better data fetching** — Reworked async data layer for more predictable behavior + +## Getting Started + +Setting up a new Nuxt 4 project is straightforward: + +```bash +npx nuxi@latest init my-app +``` + +This creates a fresh project with all the latest defaults. From there, you can start building your application right away. + +## Why Nuxt? + +Nuxt takes the best of Vue.js and adds powerful conventions and features on top: + +1. **File-based routing** — No manual route configuration needed +2. **Auto-imports** — Components, composables, and utilities are automatically available +3. **Server-side rendering** — Built-in SSR for better performance and SEO +4. **Modules ecosystem** — Rich ecosystem of modules for common needs + +Whether you're building a simple landing page or a complex full-stack application, Nuxt provides the tools and conventions to do it efficiently. + +## Conclusion + +Nuxt 4 is a fantastic framework for modern web development. Give it a try and see how it can streamline your workflow! diff --git a/content/blog/why-i-love-open-source.md b/content/blog/why-i-love-open-source.md new file mode 100644 index 0000000..edc6e31 --- /dev/null +++ b/content/blog/why-i-love-open-source.md @@ -0,0 +1,41 @@ +--- +title: "Why I Love Open Source" +description: "Reflections on the open source community and why contributing to open source projects is so rewarding." +date: "2025-02-10" +image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=400&fit=crop" +badge: "Thoughts" +--- + +# Why I Love Open Source + +Open source software has transformed the way we build technology. As a developer, contributing to open source projects has been one of the most rewarding aspects of my career. + +## The Power of Community + +The open source community is incredibly diverse and welcoming. Some of the best learning experiences come from: + +- **Code reviews** — Getting feedback from experienced developers +- **Issue discussions** — Understanding real-world problems and solutions +- **Collaboration** — Working with people from around the world + +## Giving Back + +Contributing to open source isn't just about writing code. There are many ways to help: + +1. **Documentation** — Good docs make projects accessible to everyone +2. **Bug reports** — Detailed bug reports save maintainers hours of work +3. **Testing** — Trying out new features and providing feedback +4. **Mentoring** — Helping newcomers get started with contributions + +## Building in the Open + +One of the things I enjoy most is building projects in the open. Sharing your work publicly: + +- Forces you to write cleaner, more maintainable code +- Creates a portfolio of your work +- Helps others learn from your approach +- Opens doors to collaboration and feedback + +## Final Thoughts + +If you haven't contributed to open source yet, I encourage you to start. Find a project you use and love, and look for ways to help. Every contribution, no matter how small, makes a difference. diff --git a/content/index.md b/content/index.md deleted file mode 100644 index 0c686d0..0000000 --- a/content/index.md +++ /dev/null @@ -1,24 +0,0 @@ -# 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. diff --git a/nuxt.config.ts b/nuxt.config.ts index c196200..b825c78 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,6 +1,7 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ - modules: ["@nuxt/content"], + modules: ["@nuxt/ui", "@nuxt/image", "@nuxt/content"], devtools: { enabled: true }, + css: ["~/assets/css/main.css"], compatibilityDate: "2024-04-03", }); diff --git a/package.json b/package.json index ec55c17..17b286c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "@nuxt/image": "2.0.0", "@nuxt/ui": "4.4.0", "better-sqlite3": "^12.6.2", - "nuxt": "^4.3.1" + "nuxt": "^4.3.1", + "tailwindcss": "^4.1.18" }, "devDependencies": { "@biomejs/biome": "2.3.15" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f299f5c..de7eece 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: nuxt: specifier: ^4.3.1 version: 4.3.1(@biomejs/biome@2.3.15)(@parcel/watcher@2.5.6)(@vue/compiler-sfc@3.5.28)(better-sqlite3@12.6.2)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.6.2))(ioredis@5.9.3)(lightningcss@1.31.1)(magicast@0.5.2)(rollup@4.57.1)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(yaml@2.8.2) + tailwindcss: + specifier: ^4.1.18 + version: 4.1.18 devDependencies: '@biomejs/biome': specifier: 2.3.15