More Posts{
"message": "You should use slots with <ContentList>",
"slot": "default",
"data": [
{
"_path": "/blog/my-second-blog-post",
"_dir": "blog",
"_draft": false,
"_partial": false,
"_locale": "",
"title": "What is a counter?",
"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-02_cfkvmu.webp",
"avatar": "/avatar-crica_d9a0pc.jpg",
"duration": 15,
"id": 2,
"tags": [
"Tailwind"
],
"body": {
"type": "root",
"children": [
{
"type": "element",
"tag": "h1",
"props": {
"id": "what-is-a-counter"
},
"children": [
{
"type": "text",
"value": "What is a counter?"
}
]
},
{
"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-1509048191080-d2984bad6ae5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80",
"title": "Shiprock, New Mexico by Beau Rogers"
},
"children": []
}
]
},
{
"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": "element",
"tag": "blockquote",
"props": {},
"children": [
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "Hey there! 👋🏾 This is my first blog post learning nuxt content."
}
]
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "I'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": "element",
"tag": "a",
"props": {
"href": "https://nuxtjs.org/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "Nuxt"
}
]
},
{
"type": "text",
"value": " is a powerful Vue framework that offers great 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\n\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": {
"emptyLinePlaceholder": true
},
"children": [
{
"type": "text",
"value": "\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": " install\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 5
},
"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": "h3",
"props": {
"id": "nuxtjs-item"
},
"children": [
{
"type": "text",
"value": "Nuxt.js Item"
}
]
},
{
"type": "element",
"tag": "pre",
"props": {
"className": "language-ts shiki shiki-themes one-dark-pro one-dark-pro",
"code": "// ./nuxt.config.ts\nimport { defineNuxtConfig } from \"nuxt\";\n\nexport default defineNuxtConfig({\n // My Nuxt config\n});\n",
"language": "ts",
"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": {
"emptyLinePlaceholder": true
},
"children": [
{
"type": "text",
"value": "\n"
}
]
}
]
},
{
"type": "element",
"tag": "span",
"props": {
"class": "line",
"line": 4
},
"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": 5
},
"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": 6
},
"children": [
{
"type": "element",
"tag": "span",
"props": {
"style": "--shiki-default:#ABB2BF;--shiki-dark:#ABB2BF"
},
"children": [
{
"type": "text",
"value": "});\n"
}
]
}
]
}
]
}
]
},
{
"type": "element",
"tag": "h1",
"props": {
"id": "details"
},
"children": [
{
"type": "text",
"value": "details"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "This will be rendered inside the "
},
{
"type": "element",
"tag": "code",
"props": {
"className": []
},
"children": [
{
"type": "text",
"value": "description"
}
]
},
{
"type": "text",
"value": " slot. "
},
{
"type": "element",
"tag": "em",
"props": {},
"children": [
{
"type": "text",
"value": "It's important"
}
]
},
{
"type": "text",
"value": " to see how this "
},
{
"type": "element",
"tag": "strong",
"props": {},
"children": [
{
"type": "text",
"value": "works"
}
]
},
{
"type": "text",
"value": ".\n"
},
{
"type": "element",
"tag": "a",
"props": {
"href": "#"
},
"children": [
{
"type": "text",
"value": "More information can be found here"
}
]
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "::"
}
]
},
{
"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 "
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://content.nuxtjs.org/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "@nuxt/content module"
}
]
},
{
"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."
}
]
},
{
"type": "element",
"tag": "h3",
"props": {
"id": "nuxt-item"
},
"children": [
{
"type": "text",
"value": "Nuxt item"
}
]
},
{
"type": "element",
"tag": "p",
"props": {},
"children": [
{
"type": "text",
"value": "You can get started with Nuxt Content by installing a fresh 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. "
},
{
"type": "element",
"tag": "a",
"props": {
"href": "https://tailwindcss.com/",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "TailwindCSS"
}
]
},
{
"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": "element",
"tag": "a",
"props": {
"href": "https://tailwindcss.com/docs/typography-plugin",
"rel": [
"nofollow"
]
},
"children": [
{
"type": "text",
"value": "Typography"
}
]
},
{
"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": "nuxtjs",
"depth": 2,
"text": "Nuxt.js",
"children": [
{
"id": "nuxtjs-item",
"depth": 3,
"text": "Nuxt.js Item"
}
]
},
{
"id": "nuxt-content-module",
"depth": 2,
"text": "Nuxt content module",
"children": [
{
"id": "nuxt-item",
"depth": 3,
"text": "Nuxt item"
}
]
},
{
"id": "tailwindcss",
"depth": 2,
"text": "TailwindCSS",
"children": [
{
"id": "tailwindcss-typography",
"depth": 3,
"text": "TailwindCSS Typography"
}
]
}
]
}
},
"_type": "markdown",
"_id": "content:blog:my-second-blog-post.md",
"_source": "content",
"_file": "blog/my-second-blog-post.md",
"_stem": "blog/my-second-blog-post",
"_extension": "md"
}
]
} 
