diff --git a/assets/blog_list.json b/assets/blog_list.json
index 898775e..838a5c2 100644
--- a/assets/blog_list.json
+++ b/assets/blog_list.json
@@ -2,17 +2,24 @@
"posts": [
{
"metadata": {
- "title": "Awesome", "description": "A curated list of awesome stuff I like", "date": "2024-11-26", "tags": ["awesome", "curated"]
+ "description": "A curated list of awesome stuff I like", "date": "2024-11-26", "tags": ["awesome", "curated"]
},
"id": "awesome",
"url": "/blog/awesome.md"
},
{
"metadata": {
- "title": "Badges!", "description": "A collection of 88x31 badges for various things", "date": "2024-12-21", "tags": ["badges", "retro", "web"]
+ "description": "A collection of 88x31 badges for various things", "date": "2024-12-21", "tags": ["badges", "retro", "web"]
},
"id": "badges",
"url": "/blog/badges.md"
+ },
+ {
+ "metadata": {
+ "description": "A test post to see how the site styling looks", "date": "2024-12-31", "tags": ["meta", "web"]
+ },
+ "id": "styling_test",
+ "url": "/blog/styling_test.md"
}
]
}
diff --git a/assets/markdown_conf.ts b/assets/markdown_conf.ts
index 0b044ae..96a6945 100644
--- a/assets/markdown_conf.ts
+++ b/assets/markdown_conf.ts
@@ -24,10 +24,14 @@ export default function configured_markdown(): MarkdownIt {
},
});
- md.renderer.rules.h6 = function (tokens, idx, options, env, self) {
- return '
' +
- tokens[idx].content + "
";
- };
+ md.renderer.rules.text = function (tokens, idx, options, env, self) {
+ // headers 1-3 get an after them - With a class (md-hr-N) for styling
+ if (tokens[idx].type === "heading_open") {
+ const level = tokens[idx].tag;
+ return `<${level} class="md-hr-${level}">${tokens[idx + 1].content}`;
+ }
+ return self.renderToken(tokens, idx, options);
+ }
md.renderer.rules.softbreak = function (tokens, idx, options, env, self) {
return " ";
diff --git a/assets/style.css b/assets/style.css
index 85f1fe3..da9b4fb 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -75,7 +75,7 @@ pre code {
code {
font-family: 'JetBrains Mono', monospace;
- @apply bg-purple-950 subpixel-antialiased;
+ @apply subpixel-antialiased;
}
/* Code if there is no pre tag before it */
@@ -83,19 +83,18 @@ code {
@apply p-1 border-purple-800 border rounded-lg;
}
-/* Markdown improvements to headers when a descendent of class="md-contents" */
-/* h1 to h2; Add a border to the bottom of the header */
-.md-contents h1:not(.md-override) {
- @apply border-b-4 border-purple-600 mb-3;
-}
.md-contents h2:not(.md-override) {
- @apply border-b border-purple-600 mb-3;
}
.md-contents div:not(.md-override) {
@apply mb-3 mt-3;
}
+/* Apply glow effect to separators */
+.md-contents hr:not(.md-override) {
+ box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.5);
+}
+
/* Code theme */
.hljs {
diff --git a/components/Card.vue b/components/Card.vue
new file mode 100644
index 0000000..c72bfa2
--- /dev/null
+++ b/components/Card.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/Markdown.vue b/components/Markdown.vue
index 9ba3446..f03b952 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -12,7 +12,8 @@ const props = defineProps({
});
function render_markdown(data: string | undefined) {
- if (!data) {
+ // Validate that the data is a string
+ if (typeof data !== 'string') {
loading.value = false;
return;
}
@@ -32,4 +33,70 @@ watch(() => props.text, (newVal) => {
Loading...
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 271816e..b4e983b 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,18 +1,22 @@
-
-
- Home
- Blog
- Awesome
- Badges
-
-
- Hosted with GitHub Pages
-
+
+
+
+ Home
+ Blog
+ Awesome
+ Badges
+
+
+ Hosted with GitHub Pages
+
+
\ No newline at end of file
diff --git a/components/PostCard.vue b/components/PostCard.vue
index a25ee04..f8fa211 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -4,6 +4,7 @@ import fm from 'front-matter';
const props = defineProps({
url: String,
+ tagFilter: Array
});
const url = ref(props.url)
@@ -48,8 +49,8 @@ async function fetchData() {
-
+
+
+
diff --git a/pages/index.vue b/pages/index.vue
index 854b5d2..1d0a39c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,6 +4,7 @@ import markdownit from 'markdown-it'
import PostCard from '../components/PostCard.vue';
import configured_markdown from '~/assets/markdown_conf';
import Markdown from '~/components/Markdown.vue';
+import Card from '~/components/Card.vue';
const aboutMe = ref("");
@@ -20,14 +21,20 @@ fetch("/about_me.md")
-
+
-
+
-
+
+
+
\ No newline at end of file
diff --git a/public/blog/styling_test.md b/public/blog/styling_test.md
new file mode 100644
index 0000000..bb39226
--- /dev/null
+++ b/public/blog/styling_test.md
@@ -0,0 +1,243 @@
+---
+title: Styling Test
+description: A test post to see how the site styling looks
+date: 2024-12-31
+tags: ['meta', 'web']
+---
+
+## Styling Test
+
+This is a test post to see how the site styling looks. I'm going to try out a few different things to see how they look.
+
+### Headers
+
+# Header 1
+## Header 2
+### Header 3
+#### Header 4
+##### Header 5
+###### Header 6
+
+### Text
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+### Lists
+
+#### Unordered
+
+- Item 1
+- Item 2
+- Item 3
+- Item 4
+- Item 5
+
+#### Ordered
+
+1. Item 1
+2. Item 2
+3. Item 3
+4. Item 4
+5. Item 5
+
+### Links
+
+[Google](https://www.google.com)
+[GTA VII](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+
+### Images
+
+
+
+### Code
+
+```python
+def hello_world():
+ print("Hello, world!")
+```
+
+```rust
+struct Point {
+ x: f64,
+ y: f64,
+}
+
+impl Point {
+ fn new(x: f64, y: f64) -> Point {
+ Point { x, y }
+ }
+}
+
+fn main() {
+ let p = Point::new(1.0, 2.0);
+ println!("({}, {})", p.x, p.y);
+}
+```
+
+### Tables
+
+| One | Two | Three |
+|-----|-----|-------|
+| 1 | 2 | 3 |
+| 4 | 5 | 6 |
+| 7 | 8 | 9 |
+
+### Blockquotes
+
+> This is a blockquote.
+> It can span multiple lines.
+> It can also contain **bold** and *italic* text.
+> And even links: [Google](https://www.google.com).
+
+### Horizontal Rules
+
+---
+
+### Emphasis
+
+*Italic text*
+
+**Bold text**
+
+***Bold and italic text***
+
+### Footnotes
+
+This is a sentence with a footnote[^1].
+
+[^1]: This is the footnote.
+
+### Math
+
+This is an inline math equation: $e^{i\pi} + 1 = 0$.
+
+This is a block math equation:
+
+$$
+
+\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
+
+$$
+
+### Checkboxes
+
+- [x] Checked
+- [ ] Unchecked
+
+### Videos
+
+
+
+
+
+### Audio
+
+
+
+
+
+### Tables of Contents
+
+- [Header 1](#header-1)
+ - [Header 2](#header-2)
+ - [Header 3](#header-3)
+ - [Header 4](#header-4)
+ - [Header 5](#header-5)
+ - [Header 6](#header-6)
+ - [Text](#text)
+ - [Lists](#lists)
+ - [Unordered](#unordered)
+ - [Ordered](#ordered)
+ - [Links](#links)
+ - [Images](#images)
+ - [Code](#code)
+ - [Tables](#tables)
+ - [Blockquotes](#blockquotes)
+ - [Horizontal Rules](#horizontal-rules)
+ - [Emphasis](#emphasis)
+ - [Footnotes](#footnotes)
+ - [Math](#math)
+ - [Checkboxes](#checkboxes)
+ - [Videos](#videos)
+ - [Audio](#audio)
+ - [Tables of Contents](#tables-of-contents)
+ - [Embedded CSS](#embedded-css)
+ - [Embedded HTML](#embedded-html)
+ - [Embedded SVG](#embedded-svg)
+ - [Embedded LaTeX](#embedded-latex)
+ - [Interactive Scripting](#interactive-scripting)
+ - [Conclusion](#conclusion)
+
+### Embedded CSS
+
+
+
+This text is red.
+
+This text is glowing.
+
+### Embedded HTML
+
+
+ This is a div with a light blue background.
+
+
This is a paragraph inside the div.
+
+
+
Item 1
+
Item 2
+
Item 3
+
+
+
+### Embedded SVG
+
+
+
+### Embedded LaTeX
+
+$$
+
+\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
+
+$$
+
+### Interactive Scripting
+
+On click, this button should change color:
+
+
+
+On click, this button should run JavaScript and create an alert:
+
+
+
+And this one uses a `
+
+
+### Conclusion
+
+This is the end of the test post. I hope everything looks good!
+
+- TheFelidae
\ No newline at end of file
diff --git a/utils/track_posts.sh b/utils/track_posts.sh
index 38448f6..81bdde2 100644
--- a/utils/track_posts.sh
+++ b/utils/track_posts.sh
@@ -40,7 +40,12 @@ echo " \"posts\": ["
# and output it as JSON.
extract_front_matter() {
local data="$1"
- local front_matter=$(echo "$data" | sed -n '/^---/,/^---/p')
+
+ # Remove everything after the second '---'
+ # make sure everything between the first and second '---' is the front matter
+ # use awk
+ local front_matter=$(echo "$data" | awk '/---/ && !f {f=1; next} f; /---/ {exit}')
+
echo "$front_matter" | sed '1d;$d' | sed 's/^/ "/' | sed 's/: /": "/' | sed 's/$/"/' | tr '\n' ',' | sed 's/,$//' | sed 's/"tags": "\[\(.*\)\]"/"tags": \[\1\]/g' | sed "s/'/\"/g"
}
