Nuxt refactor blog

content.config.ts

@@ -0,0 +1,17 @@
+import { defineContentConfig, defineCollection, z } from '@nuxt/content';
+
+export default defineContentConfig({
+	collections: {
+		blog: defineCollection({
+			type: 'page',
+			source: 'blog/*.md',
+			schema: z.object({
+				author: z.string(),
+				author_image: z.string(),
+				date: z.string(),
+				caption: z.string(),
+				cover_image: z.string()
+			})
+		})
+	}
+});

.old/blogposts/10-30-22.md → content/blog/10-30-22.md

@@ -83,7 +83,8 @@ In the latest version of the Cemu 2.0 experimental builds, support for Pretendo
 
 If you haven't yet seen this video by Good Vibes Gaming, go check it out! I won't go anywhere...
 
-[yt-iframe](Xtc9DJ6LYas)
+::md-iframe{video-id="Xtc9DJ6LYas"}
+::
 
 All done? Welcome back! Yes, you aren't dreaming - Wii U Chat is finally here! The journey leading up to this point has been an adventurous one, so grab your popcorn as we go back to the beginning.
 

.old/blogposts/11-14-21.md → content/blog/11-14-21.md

@@ -33,19 +33,22 @@ Both Mario Kart 7 and Mario Kart 8 have started going online and can play matche
 
 ![Screenshot of Billy showing off CTGP-7](/assets/images/blogposts/screenshot-of-billy-showing-off-ctgp-7.webp)
 
-[yt-iframe](W974FEDIoAA)
+::md-iframe{video-id="W974FEDIoAA"}
+::
 
 ## Hello YouTube!
 
 An unintended side effect of working on Miiverse support in Mario Kart 8 was YouTube uploading being re-enabled! You can now upload race clips from Mario Kart 8 to YouTube again. Patrons who run the Miiverse patch can try this feature out right now
 
-[yt-iframe](d3Bq7auupV0)
+::md-iframe{video-id="d3Bq7auupV0"}
+::
 
 ## Squid Game
 
 Splatoon multiplayer battles now works! As of now only private friend battles have been tested, but they seem to be working without issue
 
-[yt-iframe](d_qFnXrP7a4)
+::md-iframe{video-id="d_qFnXrP7a4"}
+::
 
 ## Friendship is magic
 

.old/blogposts/9-29-21.md → content/blog/9-29-21.md

@@ -32,19 +32,22 @@ Juxt started out before I actually even joined the Pretendo Network development
 
 From there we quickly realized that the scope of this project was going to be much larger than we though, and moved on to experimenting with the Miiverse Applet itself
 
-[yt-iframe](d9VAr9sEvCo)
+::md-iframe{video-id="d9VAr9sEvCo"}
+::
 
 > Check out this ancient video of the first demo website that was running in the Miiverse Applet.
 
 Shortly after this the project was absorbed into the Pretendo Network, and our full focus was put onto getting the Miiverse Applet patched and working.
 
 2020 was a big year for Juxt, going from the simple api server before, to rapidly building out its web interface and features across both the 3DS and Wii u
 
-[yt-iframe](NrfaOx5xcJY)
+::md-iframe{video-id="NrfaOx5xcJY"}
+::
 
 > First attempt at an interface for the 3DS
 
-[yt-iframe](IXnJOacx_gE)
+::md-iframe{video-id="IXnJOacx_gE"}
+::
 
 > Community page Demo on the Wii U
 

.old/blogposts/_test.md → content/blog/_test.md

@@ -1,13 +1,13 @@
 ---
 title: "Test"
-author: "pinklimes"
-author_image: "https://github.com/pinklimes.png"
+author: "limes.pink"
+author_image: "https://github.com/gitlimes.png"
 date: "January 20, 2038"
-caption: "A post to test the styling of the various elements we might use (rename to _test.md before deploying the blog section)"
+caption: "A post to test the styling of the various elements we might use"
 cover_image: "https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg"
 ---
 
-A post to test the styling of the various elements we might use (rename to _test.md before deploying the blog section)
+A post to test the styling of the various elements we might use
 
 **bold**
 
@@ -126,14 +126,22 @@ console.log(trueOrFalseJSON);
 
 <cite>Adapted from [blockquote: The Block Quotation element, from MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</cite>
 
-[yt-iframe](djV11Xbc914)
+::md-iframe{video-id="djV11Xbc914"}
+::
 
-```[yt-iframe](djV11Xbc914)```
+```
+::md-iframe{video-id="djV11Xbc914"}
+::
+```
+
+![test](https://upload.wikimedia.org/wikipedia/commons/5/57/View_of_the_Turin_Metro_tracks_from_Fermi_terminal.jpg)
+
+<a href="https://commons.wikimedia.org/wiki/File:View_of_the_Turin_Metro_tracks_from_Fermi_terminal.jpg">Wikilimes</a> (that's me!), <a href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA 4.0</a>, via Wikimedia Commons
 
-![test](https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg)
+***
 
 <video controls>
-	<source src="https://cdn.discordapp.com/attachments/413884110667251722/878216238940160040/video0.mov">
+	<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/5/5f/Steamboat_Willie_%281928%29_by_Walt_Disney.webm/Steamboat_Willie_%281928%29_by_Walt_Disney.webm.720p.vp9.webm">
 </video>
 
-Blogposts whose filename starts with a \_ will not show up on the /blogs page, but will still be accessible from the url (keep in mind that the file is still going to be publicly accessible on GitHub).
+Blogposts with filename starting with \_ will not show up on the /blogs page, but will still be accessible via the url.

nuxt.config.ts

@@ -3,6 +3,12 @@ export default defineNuxtConfig({
 	devtools: { enabled: true },
 	srcDir: './src',
 
+	nitro: {
+		prerender: {
+			routes: ['/blog/feed.xml']
+		}
+	},
+
 	modules: [
 		'@nuxt/eslint',
 		'@nuxt/fonts',
@@ -26,6 +32,16 @@ export default defineNuxtConfig({
 		}
 	},
 
+	content: {
+		build: {
+			markdown: {
+				highlight: {
+					theme: 'github-dark'
+				}
+			}
+		}
+	},
+
 	i18n: {
 		compilation: {
 			strictMessage: false

package.json

@@ -19,6 +19,7 @@
 		"@nuxt/icon": "^1.11.0",
 		"@nuxtjs/i18n": "^9.5.3",
 		"eslint": "^9.24.0",
+		"feed": "^4.2.2",
 		"nuxt": "^3.16.2",
 		"vue": "^3.5.13",
 		"vue-router": "^4.5.0"

src/assets/css/main.css

@@ -50,14 +50,29 @@ body,
 }
 
 code {
-  background-color: var(--bg-shade-0);
+  display: inline-block;
+  background-color: #191919;
   padding: 4px;
   border-radius: 4px;
   font-family: Consolas, Monaco, "Andale Mono", monospace;
   font-size: 0.9em;
   color: var(--text-shade-2);
 }
 
+h1.dot:not([data-title-suffix]):after,
+h2.dot:not([data-title-suffix]):after {
+	content: ".";
+	display: inline-block;
+	color: var(--accent-shade-1);
+}
+
+h1.dot[data-title-suffix]:after,
+h2.dot[data-title-suffix]:after {
+	content: attr(data-title-suffix);
+	display: inline-block;
+	color: var(--accent-shade-1);
+}
+
 /* BUTTONS */
 
 button,
@@ -186,7 +201,7 @@ input[type="checkbox"] {
 	cursor: pointer;
 }
 input[type="checkbox"]:checked {
-	background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
+	background: no-repeat center/contain url(/assets/images/check.svg), var(--accent-shade-0);
 }
 
 input {

src/components/MdIframe/MdIframe.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const props = defineProps<{
+	videoId: string;
+}>();
+</script>
+
+<template>
+  <iframe
+    width="560"
+    height="315"
+    :src="`https://www.youtube-nocookie.com/embed/${props.videoId}`"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  />
+</template>