├── .gitignore
├── README.md
├── app.vue
├── app
    └── router.options.ts
├── assets
    └── css
    │   └── tailwind.css
├── components
    ├── Discount.vue
    ├── Icon
    │   ├── Blog.vue
    │   └── Shirt.vue
    └── Nav.vue
├── content
    ├── 1.blog
    │   ├── 1.express
    │   │   ├── 1.getting-started.md
    │   │   └── 2.adding-routes.md
    │   └── 2.add-tailwind-to-nuxt-3.md
    └── 2.merch
    │   └── index.json
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── blog
    │   └── [...slug].vue
    ├── index.vue
    └── merch
    │   ├── [id].vue
    │   └── index.vue
├── public
    ├── favicon.ico
    ├── icon.png
    └── screenshot.png
├── tailwind.config.js
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Blog / Merch Site w/ Nuxt 3 + Content v2
 2 | 
 3 | Look at the [Content documentation](https://content-v2.nuxtjs.org/) to learn more.
 4 | 
 5 | ## Demo
 6 | 
 7 | https://contentv2-nuxt3.behonbaker.com/
 8 | 
 9 | ![Home Page Image](/public/screenshot.png)
10 | 
11 | ## Me?
12 | 
13 | <img src="https://behonbaker.com/icon.png" height="100" />
14 | 
15 | ## [Behon Baker](https://behonbaker.com)
16 | 
17 | ## Setup
18 | 
19 | Make sure to install the dependencies:
20 | 
21 | ```bash
22 | # yarn
23 | yarn install
24 | 
25 | # npm
26 | npm install
27 | 
28 | # pnpm
29 | pnpm install --shamefully-hoist
30 | ```
31 | 
32 | ## Development Server
33 | 
34 | Start the development server on http://localhost:3000
35 | 
36 | ```bash
37 | npm run dev
38 | ```
39 | 
40 | ## Production
41 | 
42 | Build the application for production:
43 | 
44 | ```bash
45 | npm run build
46 | ```
47 | 
48 | Locally preview production build:
49 | 
50 | ```bash
51 | npm run preview
52 | ```
53 | 
54 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.
55 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div class="dark:bg-[#0c0c0c] dark:text-white">
3 | 		<NuxtPage />
4 | 	</div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/app/router.options.ts:
--------------------------------------------------------------------------------
 1 | import type { RouterConfig } from "@nuxt/schema";
 2 | 
 3 | // https://router.vuejs.org/api/#routeroptions
 4 | export default <RouterConfig>{
 5 | 	scrollBehavior(to, _, savedPosition) {
 6 | 		const nuxtApp = useNuxtApp();
 7 | 
 8 | 		// If history back
 9 | 		if (savedPosition) {
10 | 			// Handle Suspense resolution
11 | 			return new Promise((resolve) => {
12 | 				nuxtApp.hooks.hookOnce("page:finish", () => {
13 | 					setTimeout(() => resolve(savedPosition), 50);
14 | 				});
15 | 			});
16 | 		}
17 | 		// Scroll to heading on click
18 | 		if (to.hash) {
19 | 			setTimeout(() => {
20 | 				const heading = document.querySelector(to.hash) as any;
21 | 
22 | 				return window.scrollTo({
23 | 					top: heading.offsetTop,
24 | 					behavior: "smooth",
25 | 				});
26 | 			});
27 | 			return;
28 | 		}
29 | 
30 | 		// Scroll to top of window
31 | 		return new Promise((res, rej) => {
32 | 			setTimeout(() => {
33 | 				res({ top: 0 });
34 | 			}, 10);
35 | 		});
36 | 	},
37 | };
38 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | .rainbow-text {
 8 | 	@apply text-transparent bg-clip-text bg-gradient-to-r from-primary to-pink-600;
 9 | }
10 | .rainbow-bg {
11 | 	@apply bg-gradient-to-r from-primary to-pink-600;
12 | }
13 | 
14 | .page-enter-active,
15 | .page-leave-active {
16 | 	transition: all 0.3s ease-in-out;
17 | }
18 | 
19 | .page-enter-from,
20 | .page-leave-to {
21 | 	opacity: 0;
22 | 	transform: scale(0.99);
23 | }
24 | 


--------------------------------------------------------------------------------
/components/Discount.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="flex flex-col items-center justify-center">
 3 | 		<h1 class="text-center text-4xl uppercase font-semibold mb-10">
 4 | 			Up To 50% OFF
 5 | 		</h1>
 6 | 		<div class="text-center">
 7 | 			<button class="p-0.5 rounded bg-white inline-block" type="button">
 8 | 				<span
 9 | 					class="block rounded px-5 py-3 w-full h-full bg-slate-900 text-white hover:bg-white hover:text-slate-900 transition-all"
10 | 					>Get Discount</span
11 | 				>
12 | 			</button>
13 | 		</div>
14 | 	</div>
15 | </template>
16 | 
17 | <script>
18 | 	export default {};
19 | </script>
20 | 
21 | <style></style>
22 | 


--------------------------------------------------------------------------------
/components/Icon/Blog.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<svg width="1em" height="1em" viewBox="0 0 32 32">
3 | 		<path
4 | 			fill="currentColor"
5 | 			d="M4 24h10v2H4zm0-6h10v2H4zm22-4H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2zM6 6v6h20V6zm20 22h-6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2zm-6-8v6h6v-6z"
6 | 		></path>
7 | 	</svg>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/components/Icon/Shirt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<svg width="1em" height="1em" viewBox="0 0 24 24">
 3 | 		<path
 4 | 			fill="none"
 5 | 			stroke="currentColor"
 6 | 			strokeLinecap="round"
 7 | 			strokeLinejoin="round"
 8 | 			strokeWidth="2"
 9 | 			d="m15 4l6 2v5h-3v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-8H3V6l6-2a3 3 0 0 0 6 0"
10 | 		></path>
11 | 	</svg>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<header class="flex items-center justify-between h-20 px-[5%] lg:px-[15%]">
 3 | 		<NuxtLink to="/" class="font-bold text-2xl lg:text-4xl">
 4 | 			<span class="text-primary">C</span>ontent
 5 | 		</NuxtLink>
 6 | 		<nav class="flex items-center space-x-7 text-gray-600">
 7 | 			<template v-for="(n, i) in links" :key="`navLink-${i}`">
 8 | 				<NuxtLink
 9 | 					:to="n.link"
10 | 					class="inline-block nav-link hover:text-primary group"
11 | 				>
12 | 					<div class="flex items-center space-x-2">
13 | 						<Icon :icon="n.icon" class="w-4 h-4" />
14 | 						<span class="font-medium"> {{ n.name }}</span>
15 | 					</div>
16 | 					<div
17 | 						class="h-0.5 w-4/5 bg-primary mt-1 -translate-y-full scale-0 group-hover:scale-100 group-hover:translate-y-full transition-all"
18 | 					></div>
19 | 				</NuxtLink>
20 | 			</template>
21 | 		</nav>
22 | 	</header>
23 | </template>
24 | 
25 | <script setup>
26 | 	import { Icon } from "@iconify/vue";
27 | 	const links = [
28 | 		{
29 | 			name: "Blog",
30 | 			icon: "carbon:blog",
31 | 			link: "/",
32 | 		},
33 | 		{
34 | 			name: "Merch",
35 | 			icon: "ion:shirt-outline",
36 | 			link: "/merch",
37 | 		},
38 | 	];
39 | </script>
40 | 
41 | <style scoped>
42 | 	.nav-link.router-link-active.router-link-exact-active {
43 | 		@apply text-primary;
44 | 	}
45 | </style>
46 | 


--------------------------------------------------------------------------------
/content/1.blog/1.express/1.getting-started.md:
--------------------------------------------------------------------------------
 1 | <!-- ---
 2 | title: Getting Started With ExpressJS
 3 | description: ExpressJS is a minimalistic framework for Node.js. It can be used to create powerful APIs.
 4 | head.title: Getting Started With ExpressJS
 5 | head.description: ExpressJS is a minimalistic framework for Node.js. It can be used to create powerful APIs.
 6 | --- -->
 7 | 
 8 | # What Is ExpressJS?
 9 | 
10 | According to the officials [ExpressJS Website](https://expressjs.com/), Express is a Fast, unopinionated, minimalist web framework for Node.js
11 | 
12 | ## Why Use ExpressJS?
13 | 
14 | Here are some of the features of express
15 | 
16 | - Web Applications
17 | 
18 |   - Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
19 | 
20 | - APIs
21 | 
22 |   - With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
23 | 
24 | - Performance
25 | 
26 |   - Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.
27 | 
28 | - Frameworks
29 |   - Many [popular frameworks](https://expressjs.com/en/resources/frameworks.html) are based on Express.
30 | 
31 | ## Getting Started
32 | 
33 | We will need ot create a new folder that will host our express app. We will also need to install afew packages.
34 | 
35 | create a new folder and cd into it
36 | 
37 | ```bash
38 | mkdir express-app && cd express-app
39 | ```
40 | 
41 | Initialize the project with `npm init`
42 | 
43 | ```bash
44 | npm init -y
45 | ```
46 | 
47 | Install these packages with npm
48 | 
49 | ```bash
50 | npm install express cors dotenv
51 | ```
52 | 
53 | We will also use apackage called `nodemon` to restart our app when we make file changes
54 | 
55 | ```bash
56 | npm install -D nodemon
57 | ```
58 | 
59 | ## Creating a Server
60 | 
61 | Creating a server is as simple as creating a file called `server.js` and adding the following code to it.
62 | 
63 | ```js
64 | const express = require("express");
65 | const cors = require("cors");
66 | require("dotenv").config();
67 | 
68 | const app = express();
69 | app.use(cors());
70 | app.use(express.json());
71 | app.use(express.urlencoded({ extended: true }));
72 | 
73 | app.get("/", (req, res) => {
74 | 	res.send("Hello World!");
75 | });
76 | 
77 | app.listen(process.env.PORT || 3000, () => {
78 | 	console.log(`Server started on port ${process.env.PORT || 3000}`);
79 | });
80 | ```
81 | 
82 | Now If we visit the app in our browser at https://localhost:3000, we will see the following output
83 | 
84 | ```html
85 | Hello World!
86 | ```
87 | 
88 | <br/>
89 | 


--------------------------------------------------------------------------------
/content/1.blog/1.express/2.adding-routes.md:
--------------------------------------------------------------------------------
  1 | <!-- ---
  2 | title: Getting Started With ExpressJS
  3 | description: ExpressJS is a minimalistic framework for Node.js. It can be used to create powerful APIs.
  4 | head.title: Getting Started With ExpressJS
  5 | head.description: ExpressJS is a minimalistic framework for Node.js. It can be used to create powerful APIs.
  6 | --- -->
  7 | 
  8 | # Routing
  9 | 
 10 | Routing refers to how an application’s endpoints (URIs) respond to client requests.
 11 | 
 12 | You define routing using methods of the Express app object that correspond to HTTP methods; for example, app.get() to handle GET requests and app.post to handle POST requests.
 13 | 
 14 | ## Routing Methods
 15 | 
 16 | A route method is derived from one of the HTTP methods, and is attached to an instance of the express class.
 17 | 
 18 | The following code is an example of routes that are defined for the GET and the POST methods to the root of the app.
 19 | 
 20 | ```js
 21 | // GET method route
 22 | app.get("/", (req, res) => {
 23 | 	res.send("GET request to the homepage");
 24 | });
 25 | 
 26 | // POST method route
 27 | app.post("/", (req, res) => {
 28 | 	res.send("POST request to the homepage");
 29 | });
 30 | ```
 31 | 
 32 | ## Add Route To Our App
 33 | 
 34 | In Our express app, we will add a route that will be responsible for handling requests to our Dog resource
 35 | 
 36 | Create a new folder called `routes` in the root of our project and add two files: index.js and dog.js.
 37 | 
 38 | ```bash
 39 | mkdir routes && touch routes/index.js && touch routes/dog.js
 40 | ```
 41 | 
 42 | In our index.js file, we need to add the following code:
 43 | 
 44 | ```js
 45 | const router = require("express").Router();
 46 | 
 47 | router.use("/dogs", require("./dog"));
 48 | 
 49 | module.exports = router;
 50 | ```
 51 | 
 52 | Inside the dog.js file, we need to add the following code:
 53 | 
 54 | ```js
 55 | const router = require("express").Router();
 56 | 
 57 | // Used to get all dogs
 58 | router.get("/", (req, res) => {
 59 | 	res.send("Hello from dog");
 60 | });
 61 | 
 62 | // Used to get a dog by id
 63 | router.get("/:id", (req, res) => {
 64 | 	res.send(`Hello from dog ${req.params.id}`);
 65 | });
 66 | 
 67 | // Used to create a new dog
 68 | router.post("/", (req, res) => {
 69 | 	res.send("POST request to the dog");
 70 | });
 71 | 
 72 | // Used to update a dog
 73 | router.put("/:id", (req, res) => {
 74 | 	res.send(`PUT request to the dog ${req.params.id}`);
 75 | });
 76 | 
 77 | // Used to delete a dog
 78 | router.delete("/:id", (req, res) => {
 79 | 	res.send(`DELETE request to the dog ${req.params.id}`);
 80 | });
 81 | 
 82 | module.exports = router;
 83 | ```
 84 | 
 85 | ## Mock Database
 86 | 
 87 | In a real application, we would likely have a database that stores our data.
 88 | 
 89 | We can use a mock database to simulate this database.
 90 | 
 91 | Inside the dog.js file at the top, we need to add the following code:
 92 | 
 93 | ```js
 94 | let dogs = [
 95 | 	{
 96 | 		id: 1,
 97 | 		name: "Fido",
 98 | 		breed: "Poodle",
 99 | 	},
100 | 	{
101 | 		id: 2,
102 | 		name: "Spot",
103 | 		breed: "Dalmation",
104 | 	},
105 | 	{
106 | 		id: 3,
107 | 		name: "Buddy",
108 | 		breed: "Pug",
109 | 	},
110 | ];
111 | ```
112 | 
113 | ## Update Routes
114 | 
115 | Now that we have our routes defined, we need to update our route functions/methods to use the mock database.
116 | 
117 | ```js
118 | // Used to get all dogs
119 | router.get("/", (req, res) => {
120 | 	res.json(dogs);
121 | });
122 | 
123 | // Used to get a dog by id
124 | router.get("/:id", (req, res) => {
125 | 	const dog = dogs.find((dog) => dog.id === parseInt(req.params.id));
126 | 	if (!dog) {
127 | 		return res.status(404).send("Dog not found");
128 | 	}
129 | 	res.json(dog);
130 | });
131 | 
132 | // Used to create a new dog
133 | router.post("/", (req, res) => {
134 | 	let newDog = req.body;
135 | 	newDog.id = dogs.length + 1;
136 | 	dogs.push(newDog);
137 | 	res.json(newDog);
138 | });
139 | 
140 | // Used to update a dog
141 | router.put("/:id", (req, res) => {
142 | 	const dog = dogs.find((dog) => dog.id === parseInt(req.params.id));
143 | 	if (!dog) {
144 | 		return res.status(404).send("Dog not found");
145 | 	}
146 | 	dog.name = req.body.name;
147 | 	dog.breed = req.body.breed;
148 | 	res.json(dog);
149 | });
150 | 
151 | // Used to delete a dog
152 | router.delete("/:id", (req, res) => {
153 | 	const dog = dogs.find((dog) => dog.id === parseInt(req.params.id));
154 | 	if (!dog) {
155 | 		return res.status(404).send("Dog not found");
156 | 	}
157 | 	dogs = dogs.filter((dog) => dog.id !== parseInt(req.params.id));
158 | 	res.json(dog);
159 | });
160 | ```
161 | 
162 | ## Update Server.js File
163 | 
164 | Now that our dog resource is updated, we need to add our routes to our server.js file.
165 | 
166 | remove this from the server.js file:
167 | 
168 | ```js
169 | // ...
170 | app.get("/", (req, res) => {
171 | 	res.send("Hello World!");
172 | });
173 | // ...
174 | ```
175 | 
176 | Add the following code to the server.js right before calling the listen function:
177 | 
178 | ```js
179 | app.use("/api", require("./routes"));
180 | ```
181 | 
182 | ## Test Our Routes
183 | 
184 | Restart the dev server and test the endpoints with a HTTP Client. An HttpClient can be used to send requests and retrieve their responses.
185 | 
186 | Send a GET request to http://localhost:3000/api/dogs. The repsonse should be a JSON array of all dogs.
187 | 
188 | ```json
189 | [
190 | 	{
191 | 		"id": 1,
192 | 		"name": "Fido",
193 | 		"breed": "Poodle"
194 | 	},
195 | 	{
196 | 		"id": 2,
197 | 		"name": "Spot",
198 | 		"breed": "Dalmation"
199 | 	},
200 | 	{
201 | 		"id": 3,
202 | 		"name": "Buddy",
203 | 		"breed": "Pug"
204 | 	}
205 | ]
206 | ```
207 | 
208 | <br />
209 | 


--------------------------------------------------------------------------------
/content/1.blog/2.add-tailwind-to-nuxt-3.md:
--------------------------------------------------------------------------------
  1 | # Add TailwindCSS To Nuxt 3
  2 | 
  3 | ## What is Tailwind CSS?
  4 | 
  5 | Tailwind CSS is a utility-first CSS framework for rapidly building custom, high-fidelity, and fully responsive designs with a minimal amount of effort.
  6 | 
  7 | > [TailwindCSS Website](https://tailwindcss.com/)
  8 | 
  9 | ## Create Your Nuxt App
 10 | 
 11 | Create a Nuxt 3 app is super easy & quick
 12 | 
 13 | ```bash
 14 | npx nuxi init [APP_NAME]
 15 | ```
 16 | 
 17 | After running this command, install the dependencies
 18 | 
 19 | ```bash
 20 | npm install
 21 | ```
 22 | 
 23 | ## Manual Installation
 24 | 
 25 | We can install Tailwind CSS manually by doing the following
 26 | 
 27 | - **Install dev dependencies**
 28 | 
 29 | ```bash
 30 | npm install -D tailwindcss postcss@latest autoprefixer@latest
 31 | ```
 32 | 
 33 | - **Inintialize Tailwind Config**
 34 | 
 35 | ```bash
 36 | npx tailwindcss init
 37 | ```
 38 | 
 39 | - **Add PostCSS config to our nuxt.config.ts file**
 40 | 
 41 | ```js
 42 | postcss: {
 43 |     plugins: {
 44 |         tailwindcss: {},
 45 |         autoprefixer: {},
 46 |       },
 47 |     },
 48 | ```
 49 | 
 50 | - **Add file paths to tailwind config**
 51 | 
 52 | ```js
 53 | module.exports = {
 54 | 	content: [
 55 | 		"./components/**/*.{js,vue,ts}",
 56 | 		"./layouts/**/*.vue",
 57 | 		"./pages/**/*.vue",
 58 | 		"./plugins/**/*.{js,ts}",
 59 | 		"./nuxt.config.{js,ts}",
 60 | 		"./content/**/*.{md,yml,json,yaml,toml,csv}",
 61 | 		"./app.vue",
 62 | 	],
 63 | 	theme: {
 64 | 		extend: {},
 65 | 	},
 66 | 	plugins: [],
 67 | };
 68 | ```
 69 | 
 70 | - **Add CSS file & Tailwind directives**
 71 | 
 72 | ```bash
 73 | mkdir -p ./assets/css && touch ./assets/css/tailwind.css
 74 | ```
 75 | 
 76 | ```css
 77 | @tailwind base;
 78 | @tailwind components;
 79 | @tailwind utilities;
 80 | ```
 81 | 
 82 | - **Add CSS file path to nuxt.config.ts file**
 83 | 
 84 | ```js
 85 | export default defineNuxtConfig({
 86 | 	css: ["@/assets/css/tailwind.css"],
 87 | });
 88 | ```
 89 | 
 90 | That's it! Now you can run your app and see your Tailwind CSS applied.
 91 | 
 92 | ## Using Nuxt Tailwind CSS Module
 93 | 
 94 | Luckily, members of the nuxt community have created a module for Nuxt to use Tailwind CSS.
 95 | 
 96 | > [Nuxt Tailwind CSS Module](https://tailwindcss.nuxtjs.org/)
 97 | 
 98 | You can visit the setup page to install the module. [Setup](https://tailwindcss.nuxtjs.org/setup)
 99 | 
100 | - **Install Nuxt Tailwind CSS Module**
101 | 
102 | ```bash
103 | npm install --save-dev @nuxtjs/tailwindcss
104 | ```
105 | 
106 | - **Add the module to your nuxt.config file**
107 | 
108 | ```js
109 | modules: ["@nuxtjs/tailwindcss"];
110 | ```
111 | 
112 | - **Inintialize Tailwind Config**
113 | 
114 | ```bash
115 | npx tailwindcss init
116 | ```
117 | 
118 | That's it! Now you can run your app and see your Tailwind CSS applied.
119 | 
120 | <br/>
121 | 


--------------------------------------------------------------------------------
/content/2.merch/index.json:
--------------------------------------------------------------------------------
  1 | [
  2 | 	{
  3 | 		"id": 1,
  4 | 		"title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  5 | 		"price": 109.95,
  6 | 		"description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
  7 | 		"category": "men's clothing",
  8 | 		"image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
  9 | 		"rating": { "rate": 3.9, "count": 120 }
 10 | 	},
 11 | 	{
 12 | 		"id": 2,
 13 | 		"title": "Mens Casual Premium Slim Fit T-Shirts ",
 14 | 		"price": 22.3,
 15 | 		"description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
 16 | 		"category": "men's clothing",
 17 | 		"image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
 18 | 		"rating": { "rate": 4.1, "count": 259 }
 19 | 	},
 20 | 	{
 21 | 		"id": 3,
 22 | 		"title": "Mens Cotton Jacket",
 23 | 		"price": 55.99,
 24 | 		"description": "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
 25 | 		"category": "men's clothing",
 26 | 		"image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
 27 | 		"rating": { "rate": 4.7, "count": 500 }
 28 | 	},
 29 | 	{
 30 | 		"id": 4,
 31 | 		"title": "Mens Casual Slim Fit",
 32 | 		"price": 15.99,
 33 | 		"description": "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.",
 34 | 		"category": "men's clothing",
 35 | 		"image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
 36 | 		"rating": { "rate": 2.1, "count": 430 }
 37 | 	},
 38 | 	{
 39 | 		"id": 5,
 40 | 		"title": "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
 41 | 		"price": 695,
 42 | 		"description": "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
 43 | 		"category": "jewelery",
 44 | 		"image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
 45 | 		"rating": { "rate": 4.6, "count": 400 }
 46 | 	},
 47 | 	{
 48 | 		"id": 6,
 49 | 		"title": "Solid Gold Petite Micropave ",
 50 | 		"price": 168,
 51 | 		"description": "Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.",
 52 | 		"category": "jewelery",
 53 | 		"image": "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg",
 54 | 		"rating": { "rate": 3.9, "count": 70 }
 55 | 	},
 56 | 	{
 57 | 		"id": 7,
 58 | 		"title": "White Gold Plated Princess",
 59 | 		"price": 9.99,
 60 | 		"description": "Classic Created Wedding Engagement Solitaire Diamond Promise Ring for Her. Gifts to spoil your love more for Engagement, Wedding, Anniversary, Valentine's Day...",
 61 | 		"category": "jewelery",
 62 | 		"image": "https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg",
 63 | 		"rating": { "rate": 3, "count": 400 }
 64 | 	},
 65 | 	{
 66 | 		"id": 8,
 67 | 		"title": "Pierced Owl Rose Gold Plated Stainless Steel Double",
 68 | 		"price": 10.99,
 69 | 		"description": "Rose Gold Plated Double Flared Tunnel Plug Earrings. Made of 316L Stainless Steel",
 70 | 		"category": "jewelery",
 71 | 		"image": "https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg",
 72 | 		"rating": { "rate": 1.9, "count": 100 }
 73 | 	},
 74 | 	{
 75 | 		"id": 9,
 76 | 		"title": "WD 2TB Elements Portable External Hard Drive - USB 3.0 ",
 77 | 		"price": 64,
 78 | 		"description": "USB 3.0 and USB 2.0 Compatibility Fast data transfers Improve PC Performance High Capacity; Compatibility Formatted NTFS for Windows 10, Windows 8.1, Windows 7; Reformatting may be required for other operating systems; Compatibility may vary depending on user’s hardware configuration and operating system",
 79 | 		"category": "electronics",
 80 | 		"image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
 81 | 		"rating": { "rate": 3.3, "count": 203 }
 82 | 	},
 83 | 	{
 84 | 		"id": 10,
 85 | 		"title": "SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s",
 86 | 		"price": 109,
 87 | 		"description": "Easy upgrade for faster boot up, shutdown, application load and response (As compared to 5400 RPM SATA 2.5” hard drive; Based on published specifications and internal benchmarking tests using PCMark vantage scores) Boosts burst write performance, making it ideal for typical PC workloads The perfect balance of performance and reliability Read/write speeds of up to 535MB/s/450MB/s (Based on internal testing; Performance may vary depending upon drive capacity, host device, OS and application.)",
 88 | 		"category": "electronics",
 89 | 		"image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
 90 | 		"rating": { "rate": 2.9, "count": 470 }
 91 | 	},
 92 | 	{
 93 | 		"id": 11,
 94 | 		"title": "Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA III 2.5",
 95 | 		"price": 109,
 96 | 		"description": "3D NAND flash are applied to deliver high transfer speeds Remarkable transfer speeds that enable faster bootup and improved overall system performance. The advanced SLC Cache Technology allows performance boost and longer lifespan 7mm slim design suitable for Ultrabooks and Ultra-slim notebooks. Supports TRIM command, Garbage Collection technology, RAID, and ECC (Error Checking & Correction) to provide the optimized performance and enhanced reliability.",
 97 | 		"category": "electronics",
 98 | 		"image": "https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg",
 99 | 		"rating": { "rate": 4.8, "count": 319 }
100 | 	},
101 | 	{
102 | 		"id": 12,
103 | 		"title": "WD 4TB Gaming Drive Works with Playstation 4 Portable External Hard Drive",
104 | 		"price": 114,
105 | 		"description": "Expand your PS4 gaming experience, Play anywhere Fast and easy, setup Sleek design with high capacity, 3-year manufacturer's limited warranty",
106 | 		"category": "electronics",
107 | 		"image": "https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg",
108 | 		"rating": { "rate": 4.8, "count": 400 }
109 | 	},
110 | 	{
111 | 		"id": 13,
112 | 		"title": "Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS Ultra-Thin",
113 | 		"price": 599,
114 | 		"description": "21. 5 inches Full HD (1920 x 1080) widescreen IPS display And Radeon free Sync technology. No compatibility for VESA Mount Refresh Rate: 75Hz - Using HDMI port Zero-frame design | ultra-thin | 4ms response time | IPS panel Aspect ratio - 16: 9. Color Supported - 16. 7 million colors. Brightness - 250 nit Tilt angle -5 degree to 15 degree. Horizontal viewing angle-178 degree. Vertical viewing angle-178 degree 75 hertz",
115 | 		"category": "electronics",
116 | 		"image": "https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg",
117 | 		"rating": { "rate": 2.9, "count": 250 }
118 | 	},
119 | 	{
120 | 		"id": 14,
121 | 		"title": "Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor (LC49HG90DMNXZA) – Super Ultrawide Screen QLED ",
122 | 		"price": 999.99,
123 | 		"description": "49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with dual 27 inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY, HDR support and factory calibration provides stunningly realistic and accurate color and contrast 144HZ HIGH REFRESH RATE and 1ms ultra fast response time work to eliminate motion blur, ghosting, and reduce input lag",
124 | 		"category": "electronics",
125 | 		"image": "https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg",
126 | 		"rating": { "rate": 2.2, "count": 140 }
127 | 	},
128 | 	{
129 | 		"id": 15,
130 | 		"title": "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter Coats",
131 | 		"price": 56.99,
132 | 		"description": "Note:The Jackets is US standard size, Please choose size as your usual wear Material: 100% Polyester; Detachable Liner Fabric: Warm Fleece. Detachable Functional Liner: Skin Friendly, Lightweigt and Warm.Stand Collar Liner jacket, keep you warm in cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2 Zippered Pockets on Chest (enough to keep cards or keys)and 1 Hidden Pocket Inside.Zippered Hand Pockets and Hidden Pocket keep your things secure. Humanized Design: Adjustable and Detachable Hood and Adjustable cuff to prevent the wind and water,for a comfortable fit. 3 in 1 Detachable Design provide more convenience, you can separate the coat and inner as needed, or wear it together. It is suitable for different season and help you adapt to different climates",
133 | 		"category": "women's clothing",
134 | 		"image": "https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg",
135 | 		"rating": { "rate": 2.6, "count": 235 }
136 | 	},
137 | 	{
138 | 		"id": 16,
139 | 		"title": "Lock and Love Women's Removable Hooded Faux Leather Moto Biker Jacket",
140 | 		"price": 29.95,
141 | 		"description": "100% POLYURETHANE(shell) 100% POLYESTER(lining) 75% POLYESTER 25% COTTON (SWEATER), Faux leather material for style and comfort / 2 pockets of front, 2-For-One Hooded denim style faux leather jacket, Button detail on waist / Detail stitching at sides, HAND WASH ONLY / DO NOT BLEACH / LINE DRY / DO NOT IRON",
142 | 		"category": "women's clothing",
143 | 		"image": "https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg",
144 | 		"rating": { "rate": 2.9, "count": 340 }
145 | 	},
146 | 	{
147 | 		"id": 17,
148 | 		"title": "Rain Jacket Women Windbreaker Striped Climbing Raincoats",
149 | 		"price": 39.99,
150 | 		"description": "Lightweight perfet for trip or casual wear---Long sleeve with hooded, adjustable drawstring waist design. Button and zipper front closure raincoat, fully stripes Lined and The Raincoat has 2 side pockets are a good size to hold all kinds of things, it covers the hips, and the hood is generous but doesn't overdo it.Attached Cotton Lined Hood with Adjustable Drawstrings give it a real styled look.",
151 | 		"category": "women's clothing",
152 | 		"image": "https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-2.jpg",
153 | 		"rating": { "rate": 3.8, "count": 679 }
154 | 	},
155 | 	{
156 | 		"id": 18,
157 | 		"title": "MBJ Women's Solid Short Sleeve Boat Neck V ",
158 | 		"price": 9.85,
159 | 		"description": "95% RAYON 5% SPANDEX, Made in USA or Imported, Do Not Bleach, Lightweight fabric with great stretch for comfort, Ribbed on sleeves and neckline / Double stitching on bottom hem",
160 | 		"category": "women's clothing",
161 | 		"image": "https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg",
162 | 		"rating": { "rate": 4.7, "count": 130 }
163 | 	},
164 | 	{
165 | 		"id": 19,
166 | 		"title": "Opna Women's Short Sleeve Moisture",
167 | 		"price": 7.95,
168 | 		"description": "100% Polyester, Machine wash, 100% cationic polyester interlock, Machine Wash & Pre Shrunk for a Great Fit, Lightweight, roomy and highly breathable with moisture wicking fabric which helps to keep moisture away, Soft Lightweight Fabric with comfortable V-neck collar and a slimmer fit, delivers a sleek, more feminine silhouette and Added Comfort",
169 | 		"category": "women's clothing",
170 | 		"image": "https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg",
171 | 		"rating": { "rate": 4.5, "count": 146 }
172 | 	},
173 | 	{
174 | 		"id": 20,
175 | 		"title": "DANVOUY Womens T Shirt Casual Cotton Short",
176 | 		"price": 12.99,
177 | 		"description": "95%Cotton,5%Spandex, Features: Casual, Short Sleeve, Letter Print,V-Neck,Fashion Tees, The fabric is soft and has some stretch., Occasion: Casual/Office/Beach/School/Home/Street. Season: Spring,Summer,Autumn,Winter.",
178 | 		"category": "women's clothing",
179 | 		"image": "https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg",
180 | 		"rating": { "rate": 3.6, "count": 145 }
181 | 	}
182 | ]
183 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 2 | export default defineNuxtConfig({
 3 | 	modules: ["@nuxt/content", "@nuxtjs/tailwindcss"],
 4 | 	content: {
 5 | 		markdown: {
 6 | 			toc: {
 7 | 				depth: 3,
 8 | 				searchDepth: 3,
 9 | 			},
10 | 		},
11 | 		highlight: {
12 | 			theme: "dracula-soft",
13 | 		},
14 | 	},
15 | });
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"private": true,
 3 | 	"scripts": {
 4 | 		"build": "nuxt build",
 5 | 		"dev": "nuxt dev",
 6 | 		"generate": "nuxt generate",
 7 | 		"preview": "nuxt preview",
 8 | 		"postinstall": "nuxt prepare"
 9 | 	},
10 | 	"devDependencies": {
11 | 		"@iconify/vue": "^3.2.1",
12 | 		"@nuxt/content": "^2.2.1",
13 | 		"@nuxtjs/tailwindcss": "^6.1.1",
14 | 		"@tailwindcss/typography": "^0.5.7",
15 | 		"nuxt": "^3.0.0-rc.12"
16 | 	}
17 | }
18 | 


--------------------------------------------------------------------------------
/pages/blog/[...slug].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<Nav />
 4 | 		<main>
 5 | 			<article
 6 | 				class="lg:pt-20 pt-10 relative flex items-start lg:space-x-10 px-[5%] lg:px-[10%]"
 7 | 			>
 8 | 				<div
 9 | 					v-if="blog.excerpt"
10 | 					class="w-[300px] p-5 sticky top-3 border rounded-md bg-white hidden lg:block"
11 | 				>
12 | 					<h2 class="text-sm font-bold mb-4">Table Of Contents</h2>
13 | 					<ul class="space-y-2">
14 | 						<template v-for="(t, k) in toc" :key="`toc-item-${k}`">
15 | 							<li>
16 | 								<NuxtLink
17 | 									:class="{
18 | 										'text-sm ml-4': t.depth == 2,
19 | 										'text-[13px] ml-6': t.depth > 2,
20 | 									}"
21 | 									class="capitalize"
22 | 									:to="`#${t.id}`"
23 | 									>{{ t.title }}</NuxtLink
24 | 								>
25 | 							</li>
26 | 						</template>
27 | 					</ul>
28 | 				</div>
29 | 				<ClientOnly>
30 | 					<ContentRenderer
31 | 						class="prose lg:prose-base prose-sm prose-slate blog-link pr-7 max-w-none"
32 | 						:value="blog"
33 | 					>
34 | 						<template #empty>
35 | 							<p>No content found.</p>
36 | 						</template>
37 | 					</ContentRenderer>
38 | 				</ClientOnly>
39 | 			</article>
40 | 		</main>
41 | 	</div>
42 | </template>
43 | 
44 | <script setup>
45 | 	const slug = useRoute().params.slug.toString().replace(/,/g, "/");
46 | 	const { data: blog } = await useAsyncData(slug, () => {
47 | 		return queryContent(slug).findOne();
48 | 	});
49 | 
50 | 	const toc = computed(() => {
51 | 		if (!blog.value) return [];
52 | 		const items = blog.value.excerpt?.children;
53 | 		if (!items) return [];
54 | 		const toc = [];
55 | 		const tags = ["h2", "h3", "h4", "h5", "h6"];
56 | 		items.forEach((item) => {
57 | 			if (tags.includes(item.tag)) {
58 | 				toc.push({
59 | 					id: item.props.id,
60 | 					title: item.props.id.toString().replace(/-/g, " "),
61 | 					depth: Number(item.tag.replace(/h/g, "")),
62 | 				});
63 | 			}
64 | 		});
65 | 		return toc;
66 | 	});
67 | 
68 | 	useHead({
69 | 		title: `${blog.value.title}`,
70 | 	});
71 | </script>
72 | 
73 | <style scoped>
74 | 	.blog-link {
75 | 		@apply prose-a:text-primary before:prose-headings:content-['#'] before:prose-headings:mr-1 before:prose-headings:text-primary before:prose-h1:content-[''];
76 | 	}
77 | </style>
78 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="min-h-screen">
 3 | 		<Nav />
 4 | 		<main>
 5 | 			<section class="lg:px-[15%] px-[5%] pt-20">
 6 | 				<h1
 7 | 					class="lg:text-5xl text-2xl leading-normal font-semibold text-center"
 8 | 				>
 9 | 					Check Out Our Latest Blog Posts
10 | 				</h1>
11 | 				<h1
12 | 					class="lg:text-6xl text-4xl text-center leading-normal font-bold rainbow-text"
13 | 				>
14 | 					Learn. Share. Grow.
15 | 				</h1>
16 | 			</section>
17 | 			<section class="lg:px-[15%] px-[5%] lg:pt-20 pt-14">
18 | 				<p
19 | 					class="text-center uppercase font-medium tracking-wider mb-10 text-gray-500"
20 | 				>
21 | 					Blog Posts
22 | 				</p>
23 | 				<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
24 | 					<template
25 | 						v-for="(b, i) in blogNav[0].children"
26 | 						:key="`blogNavItem-${b._path}-${i}`"
27 | 					>
28 | 						<div class="px-7 py-5 rounded-lg border-2">
29 | 							<h2 class="text-lg font-semibold rainbow-text">
30 | 								{{ b.title }}
31 | 							</h2>
32 | 							<!-- Loop over files inside the content dir -->
33 | 							<ul
34 | 								v-if="b.children"
35 | 								class="list-disc list-inside mt-4 pl-2 space-y-3"
36 | 							>
37 | 								<template
38 | 									v-for="(child, k) in b.children"
39 | 									:key="`childNav-${child._path}-${k}-${i}`"
40 | 								>
41 | 									<li
42 | 										class="list-item text-sm text-gray-600 hover:text-primary-900 underline underline-offset-4 decoration-wavy decoration-primary/40 hover:decoration-primary transition-all"
43 | 									>
44 | 										<NuxtLink :to="`/blog${child._path}`">
45 | 											{{ child.title }}
46 | 										</NuxtLink>
47 | 									</li>
48 | 								</template>
49 | 							</ul>
50 | 							<ul v-else class="list-disc list-inside mt-4 pl-2 space-y-3">
51 | 								<li
52 | 									class="list-item text-sm text-gray-600 hover:text-primary-900 underline underline-offset-4 decoration-wavy decoration-primary/40 hover:decoration-primary transition-all"
53 | 								>
54 | 									<NuxtLink :to="`/blog${b._path}`"> Get Started </NuxtLink>
55 | 								</li>
56 | 							</ul>
57 | 						</div>
58 | 					</template>
59 | 				</div>
60 | 			</section>
61 | 		</main>
62 | 	</div>
63 | </template>
64 | 
65 | <script setup>
66 | 	const { data: blogNav } = await useAsyncData("navigation", () => {
67 | 		return fetchContentNavigation(queryContent("blog"));
68 | 	});
69 | 	useHead({
70 | 		title: "Content Blog",
71 | 	});
72 | </script>
73 | 


--------------------------------------------------------------------------------
/pages/merch/[id].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<Nav />
 4 | 		<main>
 5 | 			<section class="lg:px-[10%] pt-10 px-[5%]">
 6 | 				<div class="flex relative items-start flex-col lg:flex-row gap-7">
 7 | 					<div class="flex-1">
 8 | 						<img
 9 | 							class="w-full object-contain h-[90%]"
10 | 							:src="product.image"
11 | 							:alt="product.title"
12 | 						/>
13 | 					</div>
14 | 					<div class="flex-1">
15 | 						<p
16 | 							class="capitalize text-sm px-4 py-1 bg-gray-200 inline-block rounded text-gray-500"
17 | 						>
18 | 							{{ product.category }}
19 | 						</p>
20 | 						<h1 class="font-bold lg:text-3xl text-2xl my-5 lg:my-6">
21 | 							{{ product.title }}
22 | 						</h1>
23 | 						<div class="flex items-center space-x-1">
24 | 							<template v-for="(r, i) in 5" :key="`productRating-${i}`">
25 | 								<Icon
26 | 									icon="ri:star-fill"
27 | 									:class="{
28 | 										'text-primary-500': i < parseInt(product.rating.rate),
29 | 										'text-gray-300': i >= parseInt(product.rating.rate),
30 | 									}"
31 | 								/>
32 | 							</template>
33 | 							<span class="text-xs ml-2"
34 | 								>{{ product.rating.count }} reviews</span
35 | 							>
36 | 						</div>
37 | 
38 | 						<p class="lg:text-3xl text-2xl mt-8">
39 | 							{{ formatPrice(product.price) }}
40 | 						</p>
41 | 						<p
42 | 							class="mt-5 text-gray-500 whitespace-pre-wrap text-sm lg:text-base"
43 | 							v-html="product.description"
44 | 						></p>
45 | 						<div class="mt-12 flex items-center space-x-5">
46 | 							<button class="rainbow-bg text-white py-4 rounded-md w-full">
47 | 								Add To Cart
48 | 							</button>
49 | 							<button>
50 | 								<Icon icon="ph:heart-straight" class="text-gray-500 w-7 h-7" />
51 | 							</button>
52 | 						</div>
53 | 					</div>
54 | 				</div>
55 | 			</section>
56 | 			<br />
57 | 		</main>
58 | 	</div>
59 | </template>
60 | 
61 | <script setup>
62 | 	import { Icon } from "@iconify/vue";
63 | 	const id = useRoute().params.id;
64 | 
65 | 	const { data: product } = await useAsyncData("product-" + id, async () => {
66 | 		const q = await queryContent("merch").only("body").findOne();
67 | 		return q.body.find((p) => p.id == parseInt(id));
68 | 	});
69 | 
70 | 	// function used to format the price
71 | 	const formatPrice = (price) => {
72 | 		return new Intl.NumberFormat("en-US", {
73 | 			style: "currency",
74 | 			currency: "USD",
75 | 		}).format(price);
76 | 	};
77 | 
78 | 	// Set header
79 | 	useHead({
80 | 		title: `${product.value.title} for ${formatPrice(product.value.price)}`,
81 | 	});
82 | </script>
83 | 
84 | <style></style>
85 | 


--------------------------------------------------------------------------------
/pages/merch/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<Nav />
  4 | 		<main>
  5 | 			<section class="lg:px-[15%] px-[5%] pt-20">
  6 | 				<h1
  7 | 					class="lg:text-5xl text-2xl leading-normal font-semibold text-center"
  8 | 				>
  9 | 					Stay Up To Date With The
 10 | 				</h1>
 11 | 				<h1
 12 | 					class="lg:text-6xl text-4xl text-center leading-normal font-bold rainbow-text"
 13 | 				>
 14 | 					Latest Fashion Trends
 15 | 				</h1>
 16 | 
 17 | 				<div class="lg:mt-20 mt-10">
 18 | 					<h1 class="lg:text-lg font-medium mb-5">
 19 | 						Filter Category
 20 | 						<button
 21 | 							v-if="activeCategory"
 22 | 							@click="setCategory(null)"
 23 | 							class="px-3 rounded-sm text-[13px] capitalize bg-gray-200 ml-5"
 24 | 						>
 25 | 							Clear &times;
 26 | 						</button>
 27 | 					</h1>
 28 | 					<div class="flex flex-wrap l items-center lg:space-x-5 mb-5">
 29 | 						<template v-for="(c, i) in categories" :key="`categroy-${i}`">
 30 | 							<button
 31 | 								@click="setCategory(c)"
 32 | 								:class="{
 33 | 									'bg-primary-100 text-primary': c == activeCategory,
 34 | 									' bg-gray-200': c !== activeCategory,
 35 | 								}"
 36 | 								class="px-3 py-2 rounded-sm text-[13px] capitalize shrink-0 mr-4 mb-4 lg:mr-0 lg:mb-0"
 37 | 							>
 38 | 								{{ c }}
 39 | 							</button>
 40 | 						</template>
 41 | 					</div>
 42 | 					<div class="grid grid-cols-1 lg:grid-cols-4 gap-10 lg:mt-20">
 43 | 						<template
 44 | 							v-for="(p, i) in filterProducts"
 45 | 							:key="`product-${i}-${p.id}`"
 46 | 						>
 47 | 							<Discount
 48 | 								class="lg:col-span-2 rounded bg-slate-900 text-white p-10"
 49 | 								v-if="i === 0 && !activeCategory"
 50 | 							/>
 51 | 							<NuxtLink
 52 | 								:to="`/merch/${p.id}`"
 53 | 								:class="{ 'lg:col-start-3': i === 0 && !activeCategory }"
 54 | 								class="rounded-md bg-white hover:shadow-lg transition-all hover:cursor-pointer"
 55 | 							>
 56 | 								<img
 57 | 									:src="p.image"
 58 | 									:alt="p.title"
 59 | 									class="w-full h-[300px] object-contain object-center"
 60 | 								/>
 61 | 								<div class="p-3">
 62 | 									<h2 class="text-xs">{{ p.title }}</h2>
 63 | 									<p class="font-bold text-sm mt-2">
 64 | 										{{ formatPrice(p.price) }}
 65 | 									</p>
 66 | 								</div>
 67 | 							</NuxtLink>
 68 | 						</template>
 69 | 					</div>
 70 | 				</div>
 71 | 			</section>
 72 | 		</main>
 73 | 	</div>
 74 | </template>
 75 | 
 76 | <script setup>
 77 | 	// Shoutout to the Fake store API
 78 | 	// https://fakestoreapi.com/docs
 79 | 
 80 | 	const { data: products } = await useAsyncData("products", () => {
 81 | 		return queryContent("merch").find();
 82 | 	});
 83 | 
 84 | 	// create an array of categories from the products
 85 | 	const categories = products.value[0].body.reduce((acc, product) => {
 86 | 		if (!acc.includes(product.category)) {
 87 | 			acc.push(product.category);
 88 | 		}
 89 | 		return acc;
 90 | 	}, []);
 91 | 
 92 | 	//var used to store the active category
 93 | 	const activeCategory = ref(null);
 94 | 
 95 | 	// function used to set the active category
 96 | 	const setCategory = (category) => {
 97 | 		activeCategory.value = category;
 98 | 		useRouter().push({
 99 | 			query: {
100 | 				category: category,
101 | 			},
102 | 		});
103 | 	};
104 | 	// set category on mount if it exist in query
105 | 	onMounted(() => {
106 | 		if (useRoute().query.category) {
107 | 			activeCategory.value = useRoute().query.category;
108 | 		}
109 | 	});
110 | 
111 | 	// function used to format the price
112 | 	const formatPrice = (price) => {
113 | 		return new Intl.NumberFormat("en-US", {
114 | 			style: "currency",
115 | 			currency: "USD",
116 | 		}).format(price);
117 | 	};
118 | 
119 | 	// function used to filter the products by category
120 | 	const filterProducts = computed(() => {
121 | 		if (!activeCategory.value) {
122 | 			return products.value[0].body;
123 | 		}
124 | 		return products.value[0].body.filter((product) => {
125 | 			return (
126 | 				product.category.toLowerCase() == activeCategory.value.toLowerCase()
127 | 			);
128 | 		});
129 | 	});
130 | 
131 | 	// Set header
132 | 	useHead({
133 | 		title: "Content Merch",
134 | 	});
135 | </script>
136 | 
137 | <style></style>
138 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/contentv2-nuxt3/5b1ad192fcd835c475271923e94194e5b42ac0a3/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/contentv2-nuxt3/5b1ad192fcd835c475271923e94194e5b42ac0a3/public/icon.png


--------------------------------------------------------------------------------
/public/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BayBreezy/contentv2-nuxt3/5b1ad192fcd835c475271923e94194e5b42ac0a3/public/screenshot.png


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require("tailwindcss/colors");
 2 | 
 3 | /**@type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 | 	content: [
 6 | 		"./components/**/*.{js,vue,ts}",
 7 | 		"./layouts/**/*.vue",
 8 | 		"./pages/**/*.vue",
 9 | 		"./plugins/**/*.{js,ts}",
10 | 		"./nuxt.config.{js,ts}",
11 | 		"./content/**/*.{md,yml,json,yaml,toml,csv}",
12 | 		"./app.vue",
13 | 	],
14 | 	darkMode: "class",
15 | 	theme: {
16 | 		extend: {
17 | 			colors: {
18 | 				primary: {
19 | 					DEFAULT: colors.violet[700],
20 | 					...colors.violet,
21 | 				},
22 | 			},
23 | 			fontFamily: {
24 | 				sans: ["Inter"],
25 | 			},
26 | 		},
27 | 	},
28 | 	plugins: [require("@tailwindcss/typography")],
29 | };
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------