More Posts{
"message": "You should use slots with <ContentList>",
"slot": "default",
"data": [
{
"_path": "/blog/my-fourth-blog-post",
"_dir": "blog",
"_draft": false,
"_partial": false,
"_locale": "",
"title": "This blog is the fourth",
"description": "Just like you, I didn't really fit anywhere when I was a kid. I still don’t, so I've built my own place. Modern psychology has evolved to understand a...",
"author": "Cristian Casallas",
"dates": {
"published": "2022-09-01"
},
"img": "/blog-04_ubrcmv.webp",
"avatar": "/avatar-crica_d9a0pc.jpg",
"duration": 15,
"id": 3,
"tags": [
"About me",
"Coding"
],
"body": {
"type": "root",
"children": [
{
"type": "element",
"tag": "h1",
"props": {
"id": "this-blog-is-the-fourth"
},
"children": [
{
"type": "text",
"value": "This blog is the fourth"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "Just like you, I didn't really fit anywhere when I was a kid. I still don’t, so I've built my own place. Modern psychology has evolved to understand a..."
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "element",
"tag": "img",
"props": {
"alt": "An old rock in the desert",
"src": "https://images.unsplash.com/photo-1664938112749-4a1e1e11abf7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
"title": "Shiprock, New Mexico by Beau Rogers"
},
"children": []
}
]
},
{
"type": "element",
"tag": "h3",
"props": {
"id": "my-first-blog-post"
},
"children": [
{
"type": "text",
"value": "My first blog post"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "Welcome to my first blog post using "
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://content.nuxtjs.org/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "content v2 module"
}
]
},
{
"type": "text",
"value": "\nHey there! 👋🏾\nThis is my first blog post learning nuxt content.\nI'm currently building it using the following:"
}
]
},
{
"type": "element",
"tag": "ul",
"props": {},
"children": [
{
"type": "element",
"tag": "li",
"props": {},
"children": [
{
"type": "text",
"value": "Nuxt.js"
}
]
},
{
"type": "element",
"tag": "li",
"props": {},
"children": [
{
"type": "text",
"value": "Nuxt Content module"
}
]
},
{
"type": "element",
"tag": "li",
"props": {},
"children": [
{
"type": "text",
"value": "TailwindCSS\n"
},
{
"type": "element",
"tag": "ul",
"props": {},
"children": [
{
"type": "element",
"tag": "li",
"props": {},
"children": [
{
"type": "text",
"value": "TailwindCSS typography"
}
]
}
]
}
]
}
]
},
{
"type": "element",
"tag": "h2",
"props": {
"id": "nuxtjs"
},
"children": [
{
"type": "text",
"value": "Nuxt.js"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "[Nuxt]("
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://nuxtjs.org/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "https://nuxtjs.org/"
}
]
},
{
"type": "text",
"value": ") is a powerful Vue framework that offers excellent development features such as server-side rendering."
}
]
},
{
"type": "element",
"tag": "pre",
"props": {
"className": "language-bash shiki shiki-themes one-dark-pro one-dark-pro",
"code": "npx nuxi init nuxt-app\ncd nuxt-app\nyarn install\nyarn dev -o\n",
"language": "bash",
"meta": "",
"style": ""
},
"children": [
{
"type": "element",
"tag": "code",
"props": {
"__ignoreMap": ""
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 1
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#61AFEF;--shiki-dark:#61AFEF"
},
"children": [
{
"type": "text",
"value": "npx"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " nuxi"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " init"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " nuxt-app\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 2
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#56B6C2;--shiki-dark:#56B6C2"
},
"children": [
{
"type": "text",
"value": "cd"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " nuxt-app\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 3
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#61AFEF;--shiki-dark:#61AFEF"
},
"children": [
{
"type": "text",
"value": "yarn"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " install\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 4
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#61AFEF;--shiki-dark:#61AFEF"
},
"children": [
{
"type": "text",
"value": "yarn"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " dev"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#D19A66;--shiki-dark:#D19A66"
},
"children": [
{
"type": "text",
"value": " -o\n"
}
]
}
]
}
]
}
]
},
{
"type": "element",
"tag": "pre",
"props": {
"className": "language-javascript shiki shiki-themes one-dark-pro one-dark-pro",
"code": "// ./nuxt.config.ts\nimport { defineNuxtConfig } from \"nuxt\";\nexport default defineNuxtConfig({\n // My Nuxt config\n});\n",
"language": "javascript",
"meta": "",
"style": ""
},
"children": [
{
"type": "element",
"tag": "code",
"props": {
"__ignoreMap": ""
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 1
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#7F848E;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic"
},
"children": [
{
"type": "text",
"value": "// ./nuxt.config.ts\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 2
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#C678DD;--shiki-dark:#C678DD"
},
"children": [
{
"type": "text",
"value": "import"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF"
},
"children": [
{
"type": "text",
"value": " { "
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#E06C75;--shiki-dark:#E06C75"
},
"children": [
{
"type": "text",
"value": "defineNuxtConfig"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF"
},
"children": [
{
"type": "text",
"value": " } "
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#C678DD;--shiki-dark:#C678DD"
},
"children": [
{
"type": "text",
"value": "from"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " \"nuxt\""
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF"
},
"children": [
{
"type": "text",
"value": ";\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 3
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#C678DD;--shiki-dark:#C678DD"
},
"children": [
{
"type": "text",
"value": "export"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#C678DD;--shiki-dark:#C678DD"
},
"children": [
{
"type": "text",
"value": " default"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#61AFEF;--shiki-dark:#61AFEF"
},
"children": [
{
"type": "text",
"value": " defineNuxtConfig"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF"
},
"children": [
{
"type": "text",
"value": "({\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 4
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#7F848E;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic"
},
"children": [
{
"type": "text",
"value": " // My Nuxt config\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 5
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF"
},
"children": [
{
"type": "text",
"value": "});\n"
}
]
}
]
}
]
}
]
},
{
"type": "element",
"tag": "h2",
"props": {
"id": "nuxt-content-module"
},
"children": [
{
"type": "text",
"value": "Nuxt content module"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "Empower your NuxtJS application with [@nuxt/content module]("
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://content.nuxtjs.org/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "https://content.nuxtjs.org/"
}
]
},
{
"type": "text",
"value": "): write in a content/ directory and fetch your Markdown, JSON, YAML, XML, and CSV files through a MongoDB-like API, acting as a Git-based Headless CMS.\nYou can get started with Nuxt Content by installing a new project."
}
]
},
{
"type": "element",
"tag": "pre",
"props": {
"className": "language-bash shiki shiki-themes one-dark-pro one-dark-pro",
"code": "npx nuxi init content-app -t content\n",
"language": "bash",
"meta": "",
"style": ""
},
"children": [
{
"type": "element",
"tag": "code",
"props": {
"__ignoreMap": ""
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 1
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#61AFEF;--shiki-dark:#61AFEF"
},
"children": [
{
"type": "text",
"value": "npx"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " nuxi"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " init"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " content-app"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#D19A66;--shiki-dark:#D19A66"
},
"children": [
{
"type": "text",
"value": " -t"
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#98C379;--shiki-dark:#98C379"
},
"children": [
{
"type": "text",
"value": " content\n"
}
]
}
]
}
]
}
]
},
{
"type": "element",
"tag": "h2",
"props": {
"id": "tailwindcss"
},
"children": [
{
"type": "text",
"value": "TailwindCSS"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "Rapidly build modern websites without ever leaving your HTML. [TailwindCSS]("
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://tailwindcss.com/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "https://tailwindcss.com/"
}
]
},
{
"type": "text",
"value": ") is A utility-first CSS framework packed with classes like "
},
{
"type": "element",
"tag": "code",
"props": {
"className": []
},
"children": [
{
"type": "text",
"value": "flex"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "element",
"tag": "code",
"props": {
"className": []
},
"children": [
{
"type": "text",
"value": "pt-4"
}
]
},
{
"type": "text",
"value": ", "
},
{
"type": "element",
"tag": "code",
"props": {
"className": []
},
"children": [
{
"type": "text",
"value": "text-center"
}
]
},
{
"type": "text",
"value": ", and "
},
{
"type": "element",
"tag": "code",
"props": {
"className": []
},
"children": [
{
"type": "text",
"value": "rotate-90"
}
]
},
{
"type": "text",
"value": " that can be composed to build any design directly in your markup."
}
]
},
{
"type": "element",
"tag": "h3",
"props": {
"id": "tailwindcss-typography"
},
"children": [
{
"type": "text",
"value": "TailwindCSS Typography"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "[Typography]("
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://tailwindcss.com/docs/typography-plugin",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "https://tailwindcss.com/docs/typography-plugin"
}
]
},
{
"type": "text",
"value": ") is a plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown or pulled from a CMS)."
}
]
},
{
"type": "element",
"tag": "style",
"props": {},
"children": [
{
"type": "text",
"value": "html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}"
}
]
}
],
"toc": {
"title": "",
"searchDepth": 2,
"depth": 2,
"links": [
{
"id": "my-first-blog-post",
"depth": 3,
"text": "My first blog post"
},
{
"id": "nuxtjs",
"depth": 2,
"text": "Nuxt.js"
},
{
"id": "nuxt-content-module",
"depth": 2,
"text": "Nuxt content module"
},
{
"id": "tailwindcss",
"depth": 2,
"text": "TailwindCSS",
"children": [
{
"id": "tailwindcss-typography",
"depth": 3,
"text": "TailwindCSS Typography"
}
]
}
]
}
},
"_type": "markdown",
"_id": "content:blog:my-fourth-blog-post.md",
"_source": "content",
"_file": "blog/my-fourth-blog-post.md",
"_stem": "blog/my-fourth-blog-post",
"_extension": "md"
}
]
} 
