add code blocks section

.contentlayer/.cache/v0.3.4/data-IIEYXV7W.json

@@ -1,13 +1,39 @@
 {
   "cacheItemsMap": {
+    "index.md": {
+      "document": {
+        "title": "Documentation",
+        "description": "This is the index page of the '/docs' route.",
+        "body": {
+          "raw": "\nOftentimes, we'll simply redirect the user to the first relevant page in the documentation if they land on the `/docs` route.\n\nHowever, if you wanted to make this page the introduction page, you could certainly do so.\n",
+          "html": "<p>Oftentimes, we'll simply redirect the user to the first relevant page in the documentation if they land on the <code>/docs</code> route.</p>\n<p>However, if you wanted to make this page the introduction page, you could certainly do so.</p>"
+        },
+        "_id": "index.md",
+        "_raw": {
+          "sourceFilePath": "index.md",
+          "sourceFileName": "index.md",
+          "sourceFileDir": ".",
+          "contentType": "markdown",
+          "flattenedPath": ""
+        },
+        "type": "Doc",
+        "slug": "",
+        "slugFull": "/",
+        "fileName": "index",
+        "suffix": ".md"
+      },
+      "documentHash": "1705806523564",
+      "hasWarnings": false,
+      "documentTypeName": "Doc"
+    },
     "guide/code-blocks.md": {
       "document": {
         "title": "Code Blocks",
         "description": "Learn how to use and customize code blocks.",
         "tagline": "Guide",
         "body": {
-          "raw": "",
-          "html": ""
+          "raw": "\nHaving a good code block experience is important for any documentation site. This template uses [shikiji](https://shikiji.netlify.app/guide/) and [rehype-pretty-code](https://rehype-pretty-code.netlify.app/) to style and highlight code blocks.\n\n## Basic usage\n\nTo use a code block, simply wrap your code in a fenced code block and specify the language:\n\n````md\n```ts\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n````\n\nThe markdown above will render the following:\n\n```ts\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n\n## Meta Strings\n\nCode blocks are customized using meta strings. Meta strings are strings that are added to the end of the language name in the fenced code block. For example, the following code block has a meta string of `title=\"example.ts\"`:\n\n````md\n```ts title=\"example.ts\"\nconsole.log(\"hello\");\n```\n````\n\nYou can use multiple meta strings in a single code block, and they can be in any order, separated by spaces.\n\nThe following sections will cover some of the meta strings that this template has been setup to use, but you can find a full list of meta strings in the [rehype-pretty-code documentation](https://rehype-pretty-code.netlify.app/#meta-strings).\n\n### Titles\n\nYou can add a title to your code block by adding a title to the fenced code block:\n\n````md\n```ts title=\"example.ts\"\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n````\n\nThe markdown above will render the following:\n\n```ts title=\"example.ts\"\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n\n### Line numbers\n\nTo display line numbers, add the `showLineNumbers` option to the fenced code block:\n\n````md\n```ts showLineNumbers\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n````\n\nThe markdown above will render the following:\n\n```ts showLineNumbers\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n\n### Highlight lines\n\nTo highlight specific lines, include brackets containing a comma-separated list of line numbers:\n\n````md\n```ts {1,3}\nconst name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n```\n````\n\nThe markdown above will render the following:\n\n```ts {1,3}\nconst name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n```\n\n### Highlight ranges\n\nYou can also specify a range of lines to highlight within the brackets:\n\n````md\n```ts {1,3-5,7}\nconst name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n```\n````\n\nThe markdown above will render the following:\n\n```ts {1,3-5,7}\nconst name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n```\n\n### Group highlighted lines\n\nYou can group highlighted lines by ID by adding a `#` followed by an ID immediately following the brackets:\n\n````md\n```ts {1,4}#remove {3,5-6}#add\nconsole.log(\"Hello, world!\");\n\nfunction getNameByUserId(userId: string): string {\n\tconsole.log(`Getting name for user ${userId}...`);\n\treturn \"some name\";\n}\n```\n````\n\nThe markdown above will render the following:\n\n```ts {1,4}#remove {3,5-6}#add\nconsole.log(\"Hello, world!\");\n\nfunction getNameByUserId(userId: string): string {\n\tconsole.log(`Getting name for user ${userId}...`);\n\treturn \"some name\";\n}\n```\n\nCurrently, we only have out of the box styling for the `remove` and `add` IDs, but you can add your own custom ones by updating the styling in the `markdown.postcss` file.\n\n## Language support\n\nThe following languages are supported and highlighted out of the box:\n\n- Plaintext\n- Shellscript\n- TypeScript\n- CSS\n- Svelte\n- Markdown\n\nWe don't include JavaScript, as TypeScript can adequately handle it.\n\nIf you'd like to add support for additional languages, you can do so by adding the language to the `prettyCodeOptions` object in the `mdsvex.config.js` file:\n\n```ts title=\"mdsvex.config.js\"\nconst prettyCodeOptions = {\n\t// ...\n\tgetHighlighter: (options) =>\n\t\tgetHighlighter({\n\t\t\t...options,\n\t\t\tlangs: [\n\t\t\t\t\"plaintext\",\n\t\t\t\timport(\"shikiji/langs/typescript.mjs\"),\n\t\t\t\timport(\"shikiji/langs/css.mjs\"),\n\t\t\t\timport(\"shikiji/langs/svelte.mjs\"),\n\t\t\t\timport(\"shikiji/langs/shellscript.mjs\"),\n\t\t\t\timport(\"shikiji/langs/markdown.mjs\")\n\t\t\t]\n\t\t})\n\t// ...\n};\n```\n\nIt's important to only include the languages you need, as importing all of the languages will increase the bundle size of your site, thus increasing the load time.\n",
+          "html": "<p>Having a good code block experience is important for any documentation site. This template uses <a href=\"https://shikiji.netlify.app/guide/\">shikiji</a> and <a href=\"https://rehype-pretty-code.netlify.app/\">rehype-pretty-code</a> to style and highlight code blocks.</p>\n<h2>Basic usage</h2>\n<p>To use a code block, simply wrap your code in a fenced code block and specify the language:</p>\n<pre><code class=\"language-md\">```ts\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n</code></pre>\n<p>The markdown above will render the following:</p>\n<pre><code class=\"language-ts\">const name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n</code></pre>\n<h2>Meta Strings</h2>\n<p>Code blocks are customized using meta strings. Meta strings are strings that are added to the end of the language name in the fenced code block. For example, the following code block has a meta string of <code>title=\"example.ts\"</code>:</p>\n<pre><code class=\"language-md\">```ts title=\"example.ts\"\nconsole.log(\"hello\");\n```\n</code></pre>\n<p>You can use multiple meta strings in a single code block, and they can be in any order, separated by spaces.</p>\n<p>The following sections will cover some of the meta strings that this template has been setup to use, but you can find a full list of meta strings in the <a href=\"https://rehype-pretty-code.netlify.app/#meta-strings\">rehype-pretty-code documentation</a>.</p>\n<h3>Titles</h3>\n<p>You can add a title to your code block by adding a title to the fenced code block:</p>\n<pre><code class=\"language-md\">```ts title=\"example.ts\"\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n</code></pre>\n<p>The markdown above will render the following:</p>\n<pre><code class=\"language-ts\">const name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n</code></pre>\n<h3>Line numbers</h3>\n<p>To display line numbers, add the <code>showLineNumbers</code> option to the fenced code block:</p>\n<pre><code class=\"language-md\">```ts showLineNumbers\nconst name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n```\n</code></pre>\n<p>The markdown above will render the following:</p>\n<pre><code class=\"language-ts\">const name: string = \"world\";\nconsole.log(`Hello, ${name}!`);\n</code></pre>\n<h3>Highlight lines</h3>\n<p>To highlight specific lines, include brackets containing a comma-separated list of line numbers:</p>\n<pre><code class=\"language-md\">```ts {1,3}\nconst name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n```\n</code></pre>\n<p>The markdown above will render the following:</p>\n<pre><code class=\"language-ts\">const name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n</code></pre>\n<h3>Highlight ranges</h3>\n<p>You can also specify a range of lines to highlight within the brackets:</p>\n<pre><code class=\"language-md\">```ts {1,3-5,7}\nconst name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n```\n</code></pre>\n<p>The markdown above will render the following:</p>\n<pre><code class=\"language-ts\">const name: string = \"world\";\n\nfunction sayHello(name: string): void {\n\tconsole.log(`Hello, ${name}!`);\n}\n\nsayHello(name);\n</code></pre>\n<h3>Group highlighted lines</h3>\n<p>You can group highlighted lines by ID by adding a <code>#</code> followed by an ID immediately following the brackets:</p>\n<pre><code class=\"language-md\">```ts {1,4}#remove {3,5-6}#add\nconsole.log(\"Hello, world!\");\n\nfunction getNameByUserId(userId: string): string {\n\tconsole.log(`Getting name for user ${userId}...`);\n\treturn \"some name\";\n}\n```\n</code></pre>\n<p>The markdown above will render the following:</p>\n<pre><code class=\"language-ts\">console.log(\"Hello, world!\");\n\nfunction getNameByUserId(userId: string): string {\n\tconsole.log(`Getting name for user ${userId}...`);\n\treturn \"some name\";\n}\n</code></pre>\n<p>Currently, we only have out of the box styling for the <code>remove</code> and <code>add</code> IDs, but you can add your own custom ones by updating the styling in the <code>markdown.postcss</code> file.</p>\n<h2>Language support</h2>\n<p>The following languages are supported and highlighted out of the box:</p>\n<ul>\n<li>Plaintext</li>\n<li>Shellscript</li>\n<li>TypeScript</li>\n<li>CSS</li>\n<li>Svelte</li>\n<li>Markdown</li>\n</ul>\n<p>We don't include JavaScript, as TypeScript can adequately handle it.</p>\n<p>If you'd like to add support for additional languages, you can do so by adding the language to the <code>prettyCodeOptions</code> object in the <code>mdsvex.config.js</code> file:</p>\n<pre><code class=\"language-ts\">const prettyCodeOptions = {\n\t// ...\n\tgetHighlighter: (options) =>\n\t\tgetHighlighter({\n\t\t\t...options,\n\t\t\tlangs: [\n\t\t\t\t\"plaintext\",\n\t\t\t\timport(\"shikiji/langs/typescript.mjs\"),\n\t\t\t\timport(\"shikiji/langs/css.mjs\"),\n\t\t\t\timport(\"shikiji/langs/svelte.mjs\"),\n\t\t\t\timport(\"shikiji/langs/shellscript.mjs\"),\n\t\t\t\timport(\"shikiji/langs/markdown.mjs\")\n\t\t\t]\n\t\t})\n\t// ...\n};\n</code></pre>\n<p>It's important to only include the languages you need, as importing all of the languages will increase the bundle size of your site, thus increasing the load time.</p>"
         },
         "_id": "guide/code-blocks.md",
         "_raw": {
@@ -23,7 +49,7 @@
         "fileName": "code-blocks",
         "suffix": ".md"
       },
-      "documentHash": "1705806527407",
+      "documentHash": "1705811643667",
       "hasWarnings": false,
       "documentTypeName": "Doc"
     },
@@ -81,32 +107,6 @@
       "hasWarnings": false,
       "documentTypeName": "Doc"
     },
-    "index.md": {
-      "document": {
-        "title": "Documentation",
-        "description": "This is the index page of the '/docs' route.",
-        "body": {
-          "raw": "\nOftentimes, we'll simply redirect the user to the first relevant page in the documentation if they land on the `/docs` route.\n\nHowever, if you wanted to make this page the introduction page, you could certainly do so.\n",
-          "html": "<p>Oftentimes, we'll simply redirect the user to the first relevant page in the documentation if they land on the <code>/docs</code> route.</p>\n<p>However, if you wanted to make this page the introduction page, you could certainly do so.</p>"
-        },
-        "_id": "index.md",
-        "_raw": {
-          "sourceFilePath": "index.md",
-          "sourceFileName": "index.md",
-          "sourceFileDir": ".",
-          "contentType": "markdown",
-          "flattenedPath": ""
-        },
-        "type": "Doc",
-        "slug": "",
-        "slugFull": "/",
-        "fileName": "index",
-        "suffix": ".md"
-      },
-      "documentHash": "1705806523564",
-      "hasWarnings": false,
-      "documentTypeName": "Doc"
-    },
     "guide/index.md": {
       "document": {
         "title": "Introduction",