My Blog

Welcome to my blog see my latest posts below I will update regularly as I learn new things.

  • minified code image from unsplash

    Building this site

    30/04/2023

    A post describing steps taken to rebuild my portfolio site with Nuxt 3 and various modules

    portfolio, code, nuxt, vue, modules

    0{ "_path": "/blog/building-this-site", "_dir": "blog", "_draft": false, "_partial": false, "_locale": "", "title": "Building this site", "description": "A post describing steps taken to rebuild my portfolio site with Nuxt 3 and various modules", "date": "2023-04-30T00:00:00.000Z", "tags": "portfolio, code, nuxt, vue, modules", "image": "https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80", "alt": "minified code image from unsplash", "body": { "type": "root", "children": [ { "type": "element", "tag": "h2", "props": { "id": "building-my-blog" }, "children": [ { "type": "text", "value": "Building my blog" } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "I have been thinking about redoing my site for a while I was waiting for the stable version of Nuxt 3 to be released which was towards the end of last year alongside with v2 of the " }, { "type": "element", "tag": "a", "props": { "href": "https://content.nuxtjs.org/get-started", "rel": [ "nofollow" ] }, "children": [ { "type": "text", "value": "nuxt content module" } ] }, { "type": "text", "value": " which is what I am using to write/display these blog posts." } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "I started trying to display these posts with a " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "blog.vue" } ] }, { "type": "text", "value": " in the " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "pages" } ] }, { "type": "text", "value": " without success by realising I was querying things incorrectly. I was trying to use post.slug which is incorrect so I said a query on a test page:" } ] }, { "type": "element", "tag": "pre", "props": { "className": "language-vue shiki shiki-themes monokai", "code": "<script setup>\nconst { data } = await useAsyncData('blogPosts', () =>\n queryContent('/blog').find()\n)\n</script>\n", "language": "vue", "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:#F8F8F2" }, "children": [ { "type": "text", "value": "<" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "script" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " setup" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 2 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#66D9EF;--shiki-default-font-style:italic" }, "children": [ { "type": "text", "value": "const" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " { data } " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": " await" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " useAsyncData" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "(" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'blogPosts'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ", () " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#66D9EF;--shiki-default-font-style:italic" }, "children": [ { "type": "text", "value": "=>\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 3 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " queryContent" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "(" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'/blog'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ")." } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": "find" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "()\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 4 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ")\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 5 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "</" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "script" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] } ] } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "I have so far added the main navigation including social links which I have added in their own component which took a bit of trial and error to fix the styling as wanted and I have also added the option to switch between light and dark mode. This was easier than I expected as I used a combination of " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "nuxt-icon" } ] }, { "type": "text", "value": " and " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "vueuse" } ] }, { "type": "text", "value": " modules to do this:" } ] }, { "type": "element", "tag": "pre", "props": { "className": "language-vue shiki shiki-themes monokai", "code": "<script setup>\nimport {(useDark, useToggle)} from '@vueuse/core'\nconst isDark = useDark()\nconst toggleDark = useToggle(isDark);\n</script>\n\n<template>\n <button @click=\"toggleDark()\">\n <div v-if=\"isDark\">\n <Icon name=\"material-symbols:dark-mode-outline\" />\n </div>\n <div v-else>\n <Icon name=\"ic:outline-light-mode\" />\n </div>\n </button>\n</template>\n", "language": "vue", "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:#F8F8F2" }, "children": [ { "type": "text", "value": "<" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "script" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " setup" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 2 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "import" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " {(useDark, useToggle)} " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "from" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": " '@vueuse/core'\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 3 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#66D9EF;--shiki-default-font-style:italic" }, "children": [ { "type": "text", "value": "const" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " isDark " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " useDark" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "()\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 4 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#66D9EF;--shiki-default-font-style:italic" }, "children": [ { "type": "text", "value": "const" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " toggleDark " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " useToggle" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "(isDark);\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 5 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "</" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "script" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 6 }, "children": [ { "type": "element", "tag": "span", "props": { "emptyLinePlaceholder": true }, "children": [ { "type": "text", "value": "\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 7 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "<" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "template" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 8 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " <" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "button" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " @click" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "\"toggleDark()\"" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 9 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " <" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "div" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " v-if" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "\"isDark\"" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 10 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " <" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F44747" }, "children": [ { "type": "text", "value": "Icon" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " name" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "\"material-symbols:dark-mode-outline\"" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " />\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 11 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " </" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "div" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 12 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " <" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "div" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " v-else" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 13 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " <" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F44747" }, "children": [ { "type": "text", "value": "Icon" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " name" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "=" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "\"ic:outline-light-mode\"" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " />\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 14 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " </" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "div" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 15 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " </" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "button" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 16 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "</" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "template" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] } ] } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "Then I realised I needed to render it different I deleted this blog.vue file, created a blog folder with an index.vue file to display a list of my blog posts and a slug.vue to render the individual posts using " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "<ContentDoc/>" } ] }, { "type": "text", "value": " to display the markdown content on the page." } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "I will try and write this up in more detail so I have something more depth to refer to later should I wish to use the nuxt/content module for other projects which is highly likely..." } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "But so far so good now just to add some content to the homepage." } ] }, { "type": "element", "tag": "p", "props": {}, "children": [ { "type": "text", "value": "I have made a couple of minor updates I have used " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "useHead()" } ] }, { "type": "text", "value": " composable to update the title of my pages and import google fonts in my " }, { "type": "element", "tag": "code", "props": { "className": "" }, "children": [ { "type": "text", "value": "app.vue" } ] }, { "type": "text", "value": " file:" } ] }, { "type": "element", "tag": "pre", "props": { "className": "language-vue shiki shiki-themes monokai", "code": "<script setup>\nuseHead({\n htmlAttrs: {\n lang: 'en',\n },\n link: [\n {\n rel: 'preconnect',\n href: 'https://fonts.googleapis.com',\n },\n {\n rel: 'stylesheet',\n href: 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap',\n crossorigin: '',\n },\n ],\n})\n</script>\n", "language": "vue", "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:#F8F8F2" }, "children": [ { "type": "text", "value": "<" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "script" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": " setup" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 2 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#A6E22E" }, "children": [ { "type": "text", "value": "useHead" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "({\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 3 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " htmlAttrs: {\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 4 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " lang: " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'en'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ",\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 5 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " },\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 6 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " link: [\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 7 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " {\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 8 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " rel: " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'preconnect'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ",\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 9 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " href: " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'https://fonts.googleapis.com'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ",\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 10 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " },\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 11 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " {\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 12 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " rel: " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'stylesheet'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ",\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 13 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " href: " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ",\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 14 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " crossorigin: " } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#E6DB74" }, "children": [ { "type": "text", "value": "''" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ",\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 15 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " },\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 16 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": " ],\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 17 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "})\n" } ] } ] }, { "type": "element", "tag": "span", "props": { "class": "line", "line": 18 }, "children": [ { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": "</" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F92672" }, "children": [ { "type": "text", "value": "script" } ] }, { "type": "element", "tag": "span", "props": { "style": "--shiki-default:#F8F8F2" }, "children": [ { "type": "text", "value": ">\n" } ] } ] } ] } ] }, { "type": "element", "tag": "style", "props": {}, "children": [ { "type": "text", "value": "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 .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);}" } ] } ], "toc": { "title": "", "searchDepth": 2, "depth": 2, "links": [ { "id": "building-my-blog", "depth": 2, "text": "Building my blog" } ] } }, "_type": "markdown", "_id": "content:blog:building-this-site.md", "_source": "content", "_file": "blog/building-this-site.md", "_extension": "md" }

    Read More