More updates

assets/markdown_conf.ts

@@ -1,9 +1,17 @@
 import hljs from "highlight.js";
 import MarkdownIt from "markdown-it";
 import Token from "markdown-it/lib/token.mjs";
+import { alert } from "@mdit/plugin-alert";
+import { figure } from "@mdit/plugin-figure";
+import TeXToSVG from "tex-to-svg";
+import { tab } from "@mdit/plugin-tab";
+import { tasklist } from "@mdit/plugin-tasklist";
+import { mark } from "@mdit/plugin-mark";
+import { footnote } from "@mdit/plugin-footnote";
+import { align } from "@mdit/plugin-align";
 
 export default function configured_markdown(): MarkdownIt {
-    const md: MarkdownIt = MarkdownIt({
+    var md: MarkdownIt = MarkdownIt({
         breaks: true,
         typographer: true,
         html: true,
@@ -23,6 +31,27 @@ export default function configured_markdown(): MarkdownIt {
                 "</code></pre>";
         },
     });
+   // .use(figure, {
+   //     mathFence: true,
+   //     render: (content: any, displayMode: any) => {
+   //         // render tex here and return svg
+   //         console.log("figure render");
+   //         console.log(content);
+   //         return TeXToSVG(content);
+   //     },
+   // });
+
+    md = md.use(tab)
+        .use(tasklist)
+        .use(mark)
+        .use(footnote)
+        .use(alert, {
+            alertNames: [
+                "note", "info", "warning", "danger", "todo", "tip", 
+                "important", "success", "caution", "question", "done",
+                "quote", "deprecated", "example"
+            ],
+        });
 
     md.renderer.rules.text = function (tokens, idx, options, env, self) {
         // headers 1-3 get an <hr> after them - With a class (md-hr-N) for styling

assets/md_plugins/checkbox.ts

@@ -0,0 +1 @@
+import MarkdownIt from "markdown-it";

components/Markdown.vue

@@ -2,8 +2,6 @@
 import configured_markdown from '~/assets/markdown_conf';
 import { useSlots } from 'vue';
 
-let markdown = configured_markdown();
-
 const text = ref("");
 const loading = ref(true);
 
@@ -17,7 +15,7 @@ function render_markdown(data: string | undefined) {
         loading.value = false;
         return;
     }
-    text.value = markdown.render(data);
+    text.value = configured_markdown().render(data);
     loading.value = false
 }
 
@@ -45,6 +43,141 @@ watch(() => props.text, (newVal) => {
     margin-bottom: 0.5rem;
 }
 
+/* Markdown alerts get a box, a shadow, and a background+border color */
+.md-contents .markdown-alert:not(.md-override) {
+    border: 1px solid #A020F0;
+    background-color: #333;
+    box-shadow: 0 0 7px #A020F0;
+    padding: 0.5rem;
+    margin: 1rem 0;
+}
+.md-contents .markdown-alert-title {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+.md-contents .markdown-alert-warning:not(.md-override) {
+    border: 1px solid #FFA500;
+    background-color: #aa6600;
+    box-shadow: 0 0 7px #FFA500;
+}
+
+.md-contents .markdown-alert-warning .markdown-alert-title:not(.md-override):before {
+    content: "⚠️ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-danger:not(.md-override) {
+    border: 1px solid #FF0000;
+    background-color: #aa0000;
+    box-shadow: 0 0 7px #FF0000;
+}
+.md-contents .markdown-alert-danger .markdown-alert-title:not(.md-override):before {
+    content: "❌ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-success:not(.md-override) {
+    border: 1px solid #00FF00;
+    box-shadow: 0 0 7px #00FF00;
+}
+.md-contents .markdown-alert-success .markdown-alert-title:not(.md-override):before {
+    content: "✅ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-info:not(.md-override) {
+    border: 1px solid #00FFFF;
+    box-shadow: 0 0 7px #00FFFF;
+}
+.md-contents .markdown-alert-info .markdown-alert-title:not(.md-override):before {
+    content: "ℹ️ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-important:not(.md-override) {
+    border: 1px solid #FF00FF;
+    box-shadow: 0 0 7px #FF00FF;
+}
+.md-contents .markdown-alert-important .markdown-alert-title:not(.md-override):before {
+    content: "❗ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-caution:not(.md-override) {
+    border: 1px solid #FFFF00;
+    box-shadow: 0 0 7px #FFFF00;
+}
+.md-contents .markdown-alert-caution .markdown-alert-title:not(.md-override):before {
+    content: "⚠️ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-note:not(.md-override) {
+    border: 1px solid #0000FF;
+    box-shadow: 0 0 7px #0000FF;
+}
+.md-contents .markdown-alert-note .markdown-alert-title:not(.md-override):before {
+    content: "📝 ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-tip:not(.md-override) {
+    border: 1px solid #00FF00;
+    box-shadow: 0 0 7px #00FF00;
+}
+.md-contents .markdown-alert-tip .markdown-alert-title:not(.md-override):before {
+    content: "💡 ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-question:not(.md-override) {
+    border: 1px solid #ccc;
+    box-shadow: 0 0 7px #ccc;
+}
+.md-contents .markdown-alert-question .markdown-alert-title:not(.md-override):before {
+    content: "❓ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-quote:not(.md-override) {
+    border: 1px dashed #ccc;
+    box-shadow: 0 0 7px #ccc;
+}
+.md-contents .markdown-alert-quote .markdown-alert-title:not(.md-override):before {
+    content: "❝ ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-deprecated:not(.md-override) {
+    border: 1px solid indigo;
+    box-shadow: 0 0 7px indigo;
+}
+.md-contents .markdown-alert-deprecated .markdown-alert-title:not(.md-override):before {
+    content: "🚫 ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-example:not(.md-override) {
+    border: 1px solid #ccc;
+    box-shadow: 0 0 7px #ccc;
+}
+.md-contents .markdown-alert-example .markdown-alert-title:not(.md-override):before {
+    content: "💡 ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-todo:not(.md-override) {
+    border: 1px solid skyblue;
+    box-shadow: 0 0 7px skyblue;
+}
+.md-contents .markdown-alert-todo .markdown-alert-title:not(.md-override):before {
+    content: "📝 ";
+    text-shadow: 1px 1px 1px #000;
+}
+.md-contents .markdown-alert-done:not(.md-override) {
+    border: 1px solid #00FF00;
+    box-shadow: 0 0 7px #00FF00;
+}
+.md-contents .markdown-alert-done .markdown-alert-title:not(.md-override):before {
+    content: "✅ ";
+    text-shadow: 1px 1px 1px #000;
+}
+
+/* Footnotes, ensure they are by default white with no transition if they have no href */
+.md-contents .footnote-anchor:not([href]) {
+    color: white;
+    transition: none;
+}
+
+
 /* Apply margin to code blocks */
 .md-contents pre:not(.md-override) {
     margin: 1rem 0;
@@ -99,4 +232,73 @@ watch(() => props.text, (newVal) => {
     transition: background-color 0.5s;
 }
 
+/* iframes get a border and a shadow */
+.md-contents iframe:not(.md-override) {
+    @apply border-2 border-purple-600 rounded-lg;
+    box-shadow: 0 0 7px #A020F0;
+}
+
+/* Identify if the iframe links to a YouTube video - If so, red border */
+.md-contents iframe[src*="youtube.com"]:not(.md-override) {
+    @apply border-2 border-red-600;
+    box-shadow: 0 0 7px red;
+}
+
+/* Identify if the iframe links to a Twitch video - If so, purple border */
+.md-contents iframe[src*="twitch.tv"]:not(.md-override) {
+    @apply border-2 border-purple-600;
+    box-shadow: 0 0 7px #A020F0;
+}
+
+/* Identify if the iframe links to a Spotify playlist - If so, green border */
+.md-contents iframe[src*="spotify.com"]:not(.md-override) {
+    @apply border-2 border-green-600 rounded-xl;
+    box-shadow: 0 0 7px green;
+}
+
+/* Identify if the iframe links to a SoundCloud track - If so, orange border */
+.md-contents iframe[src*="soundcloud.com"]:not(.md-override) {
+    @apply border-2 border-orange-600;
+    box-shadow: 0 0 7px orange;
+}
+
+/* Identify if the iframe links to a Bandcamp track - If so, blue border */
+.md-contents iframe[src*="bandcamp.com"]:not(.md-override) {
+    @apply border-2 border-blue-600;
+    box-shadow: 0 0 7px blue;
+}
+
+/* Identify if the iframe links to a GitHub Gist - If so, gray border */
+.md-contents iframe[src*="gist.github.com"]:not(.md-override) {
+    @apply border-2 border-gray-600;
+    box-shadow: 0 0 7px gray;
+}
+
+/* And if it links to Wikipedia, the free online encyclopedia, give it a white border */
+.md-contents iframe[src*="wikipedia.org"]:not(.md-override) {
+    @apply border-2 border-white;
+    box-shadow: 0 0 7px white;
+}
+
+/* If the iframe links to a Google Maps location */
+.md-contents iframe[src*="google.com/maps"]:not(.md-override) {
+    border-left: 2px solid #4285F4;
+    border-right: 2px solid #0F9D58;
+    border-top: 2px solid #F4B400;
+    border-bottom: 2px solid #DB4437;
+    box-shadow: 0 0 7px #4285F4;
+}
+
+/* Redo the audio element styling */
+.md-contents audio:not(.md-override) {
+    @apply border-2 border-purple-600 rounded-lg;
+    box-shadow: 0 0 7px #A020F0;
+}
+
+/* Images get a border and a shadow */
+.md-contents img:not(.md-override) {
+    @apply border-2 border-purple-600;
+    box-shadow: 0 0 7px #A020F0;
+}
+
 </style>

nuxt.config.ts

@@ -2,6 +2,7 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   ssr: false,
+  
   postcss: {
     plugins: {
       tailwindcss: {},

package.json

@@ -10,13 +10,28 @@
     "postinstall": "rm assets/blog_list.json && sh utils/track_posts.sh >> assets/blog_list.json &&nuxt prepare"
   },
   "dependencies": {
+    "@mdit/plugin-alert": "^0.14.0",
+    "@mdit/plugin-align": "^0.14.0",
+    "@mdit/plugin-figure": "^0.14.0",
+    "@mdit/plugin-footnote": "^0.14.0",
+    "@mdit/plugin-mark": "^0.14.0",
+    "@mdit/plugin-tab": "^0.14.0",
+    "@mdit/plugin-tasklist": "^0.14.0",
+    "@mdit/plugin-tex": "^0.14.0",
     "@popperjs/core": "^2.11.8",
     "@tsparticles/slim": "^3.7.1",
     "@types/markdown-it": "^14.1.2",
+    "css-loader": "^7.1.2",
+    "markdown-it-checkbox": "^1.1.0",
     "mathpix-markdown-it": "^2.0.9",
     "nuxt": "^3.14.1592",
+    "ofetch": "^1.4.1",
+    "postcss-loader": "^8.1.1",
+    "tex-to-svg": "^0.2.0",
+    "texsvg": "^2.2.2",
     "tsparticles": "^3.7.1",
     "vue": "latest",
+    "vue-loader": "^17.4.2",
     "vue-router": "latest",
     "@tsparticles/engine": "^3.5.0",
     "@tsparticles/vue3": "^3.0.1",

public/blog/styling_test.md

@@ -105,7 +105,15 @@ fn main() {
 
 This is a sentence with a footnote[^1].
 
-[^1]: This is the footnote.
+### Superscript and Subscript
+
+This is a superscript: x<sup>2</sup>.
+
+This is a subscript: H<sub>2</sub>O.
+
+### Marker
+
+This is a highlight: ==highlighted text==.
 
 ### Math
 
@@ -124,18 +132,74 @@ $$
 - [x] Checked
 - [ ] Unchecked
 
-### Videos
+### Alerts
+
+> [!warning]
+> This is a warning alert.
+
+> [!info]
+> This is an info alert.
+
+> [!danger]
+> This is a danger alert.
+
+> [!success]
+> This is a success alert.
+
+> [!important]
+> This is an important alert.
+
+> [!caution]
+> This is a caution alert.
+
+> [!note]
+> This is a note alert.
+
+> [!tip]
+> This is a tip alert.
+
+> [!question]
+> This is a question alert.
+
+> [!quote]
+> This is a quote alert.
+
+> [!deprecated]
+> This is a deprecated alert.
+
+> [!example]
+> This is an example alert.
+
+> [!todo]
+> This is a todo alert.
+
+> [!done]
+> This is a done alert.
+
+### Iframes
 
 <!-- The towwwn inside meeeeee :3 -->
 
+The colorations are supposed to automagically change based on what you're linking to.
+
+YouTube:
+
 <iframe width="560" height="315" src="https://www.youtube.com/embed/69VV0pH57XE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+Spotify:
+
+<iframe src="https://open.spotify.com/embed/track/0R4EcD2e5m9wsMmWVVbBOc" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
+
+Maps:
+
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.0000000000005!2d-122.0841926846827!3d37.42199997981999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e3f0b0b0f7d%3A0x7d9b1f7f7f7f7f7f!2sGoogleplex!5e0!3m2!1sen!2sus!4v1630483660004!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+
 ### Audio
 
-<!-- Bach's Prelude and Fugue in A minor -->
+Bach's Prelude and Fugue in A minor:
 
 <audio controls>
-  <source src="https://en.wikipedia.org/wiki/File:BWV_543-prelude.ogg" type="audio/ogg">
+  <source src="/files/BWV_543-prelude.ogg" type="audio/ogg">
   Your browser does not support the audio element.
 </audio>
 
@@ -159,9 +223,12 @@ $$
     - [Horizontal Rules](#horizontal-rules)
     - [Emphasis](#emphasis)
     - [Footnotes](#footnotes)
+    - [Superscript and Subscript](#superscript-and-subscript)
+    - [Marker](#marker)
     - [Math](#math)
     - [Checkboxes](#checkboxes)
-    - [Videos](#videos)
+    - [Alerts](#alerts)
+    - [Iframes](#iframes)
     - [Audio](#audio)
     - [Tables of Contents](#tables-of-contents)
     - [Embedded CSS](#embedded-css)
@@ -209,10 +276,11 @@ $$
 
 ### Embedded LaTeX
 
+Euler’s identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
+
 $$
-
+\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
-\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
+= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
-
 $$
 
 ### Interactive Scripting
@@ -241,3 +309,5 @@ And this one uses a `<script>` tag to do the same thing:
 This is the end of the test post. I hope everything looks good! 
 
 - TheFelidae
+
+[^1]: This is the footnote.