Sweeping readability imrpovements
This commit is contained in:
parent
5eb48fb4b6
commit
ebaff6dea0
13 changed files with 1678 additions and 114 deletions
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,14 @@ export default function configured_markdown(): MarkdownIt {
|
|||
},
|
||||
});
|
||||
|
||||
md.renderer.rules.h6 = function (tokens, idx, options, env, self) {
|
||||
return '<h6 class="text-lg font-semibold my-3"><br>' +
|
||||
tokens[idx].content + "</h6>";
|
||||
};
|
||||
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
|
||||
if (tokens[idx].type === "heading_open") {
|
||||
const level = tokens[idx].tag;
|
||||
return `<${level} class="md-hr-${level}">${tokens[idx + 1].content}</${level}>`;
|
||||
}
|
||||
return self.renderToken(tokens, idx, options);
|
||||
}
|
||||
|
||||
md.renderer.rules.softbreak = function (tokens, idx, options, env, self) {
|
||||
return "<br>";
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
16
components/Card.vue
Normal file
16
components/Card.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div class="m-1 p-5 rounded-lg container bg-opacity-90 bg-slate-900 border-purple-600 border-2">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* Glow effect on border, plus a slight response to hover by changing the border color near the cursor */
|
||||
.container {
|
||||
transition: border-color 0.5s;
|
||||
border-color: #A020F0;
|
||||
box-shadow: 0 0 10px #A020F0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -33,3 +34,69 @@ watch(() => props.text, (newVal) => {
|
|||
</div>
|
||||
<div class="md-contents" v-html="text"></div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Note: Use `md-override` to override the default markdown styling */
|
||||
|
||||
/* Headers (1-3) get a small visual upgrade */
|
||||
.md-contents h1:not(.md-override), .md-contents h2:not(.md-override), .md-contents h3:not(.md-override) {
|
||||
border-bottom: 1px solid #A020F0;
|
||||
padding-bottom: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Apply margin to code blocks */
|
||||
.md-contents pre:not(.md-override) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Apply styling to lists and list items with nesting */
|
||||
.md-contents ul:not(.md-override), .md-contents ol:not(.md-override) {
|
||||
margin: 1rem 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* Apply different bullet types to nested lists as they are nested */
|
||||
.md-contents ul:not(.md-override) ul:not(.md-override), .md-contents ol:not(.md-override) ul:not(.md-override) {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
/* Apply table styling, with a pleasant glowing border effect */
|
||||
.md-contents table:not(.md-override) {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 0 7px #A020F0
|
||||
}
|
||||
|
||||
.md-contents th:not(.md-override), .md-contents td:not(.md-override) {
|
||||
border: 1px solid #A020F0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.md-contents th:not(.md-override) {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.md-contents button:not(.md-override) {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border: 1px solid #A020F0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
}
|
||||
|
||||
.md-contents button:hover:not(.md-override) {
|
||||
background-color: #555;
|
||||
box-shadow: 0 0 10px #A020F0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* transition for button hover effect */
|
||||
.md-contents button:not(.md-override) {
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,18 +1,22 @@
|
|||
<script setup>
|
||||
import Card from './Card.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="flex-col transition-[margin] justify-center md:rounded-md max-md:w-screen lg:mt-3 w-fit-content pr-4 pl-4 bg-purple-500 bg-opacity-25 text-white">
|
||||
<div class="flex justify-center">
|
||||
<NuxtLink href="/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Home</NuxtLink>
|
||||
<NuxtLink href="/blog/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Blog</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/awesome.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Awesome</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/badges.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Badges</NuxtLink>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<small class=" ml-3 mr-3">Hosted with <NuxtLink href="https://github.com/TheFelidae/thefelidae.github.io" class="text-blue-500">GitHub Pages</NuxtLink></small>
|
||||
</div>
|
||||
<div class="flex-col transition-[margin] justify-center md:rounded-md max-md:w-screen lg:mt-3 w-fit-content">
|
||||
<Card>
|
||||
<div class="flex justify-center">
|
||||
<NuxtLink href="/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Home</NuxtLink>
|
||||
<NuxtLink href="/blog/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Blog</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/awesome.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Awesome</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/badges.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Badges</NuxtLink>
|
||||
</div>
|
||||
<div class="flex justify-center text-white">
|
||||
<small class="ml-3 mr-3">Hosted with <NuxtLink href="https://github.com/TheFelidae/thefelidae.github.io" class="text-blue-500">GitHub Pages</NuxtLink></small>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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() {
|
|||
|
||||
<template>
|
||||
<NuxtLink :href="'/blog?post=' +url">
|
||||
<div class="m-4 p-3 min-h-30 w-90 text-white rounded-2xl border-2 border-purple-300 transition hover:bg-purple-600 bg-purple-700 bg-opacity-50 hover:bg-opacity-70"
|
||||
:style="{ backgroundImage: `url(${background})` }">
|
||||
<div class="m-4 min-h-30 min-width-90 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
|
||||
<Card>
|
||||
<div v-if="loading" class="text-center animate-pulse">
|
||||
</div>
|
||||
<div v-else-if="error" class="text-center">
|
||||
|
|
@ -63,12 +64,18 @@ async function fetchData() {
|
|||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
|
||||
<span class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md">{{ tag }}</span>
|
||||
<div v-if="props.tagFilter.includes(tag)">
|
||||
<span class="text-xs bg-slate-700 border-white border-2 text-white p-1 rounded-md">{{ tag }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
"@popperjs/core": "^2.11.8",
|
||||
"@tsparticles/slim": "^3.7.1",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"mathpix-markdown-it": "^2.0.9",
|
||||
"nuxt": "^3.14.1592",
|
||||
"tsparticles": "^3.7.1",
|
||||
"vue": "latest",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import PostCard from '../components/PostCard.vue';
|
|||
// Automatically maintained is a blog_list.json in assets/. This file contains a list of all blog posts and their metadata.
|
||||
// This file is generated by a script in the root directory of the project.
|
||||
import blog_list from '../assets/blog_list.json';
|
||||
import configured_markdown from '~/assets/markdown_conf';
|
||||
|
||||
const modules = import.meta.glob('/blog/');
|
||||
|
||||
|
|
@ -20,7 +19,6 @@ for (const path in modules) {
|
|||
let route = useRoute();
|
||||
console.log(route)
|
||||
|
||||
|
||||
const url = ref(null)
|
||||
url.value = route.query.post
|
||||
console.log(url.value)
|
||||
|
|
@ -53,16 +51,14 @@ watch(route, async () => {
|
|||
|
||||
|
||||
async function fetchData(url) {
|
||||
const md = configured_markdown();
|
||||
error.value = data.value = null
|
||||
loading.value = true
|
||||
console.log(url)
|
||||
|
||||
try {
|
||||
data.value = await $fetch(url)
|
||||
console.log(data.value)
|
||||
const processed = fm(data.value)
|
||||
text.value = md.render(processed.body)
|
||||
console.log(text.value)
|
||||
text.value = processed.body
|
||||
background.value = processed.attributes.background
|
||||
title.value = processed.attributes.title
|
||||
description.value = processed.attributes.description
|
||||
|
|
@ -137,15 +133,15 @@ watch(url, async () => {
|
|||
<div v-for="tag in tagList" :key="tag" class="m-1 text-center">
|
||||
<button
|
||||
@click="tagFilter.includes(tag) ? tagFilter.splice(tagFilter.indexOf(tag), 1) : tagFilter.push(tag)"
|
||||
class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md"
|
||||
:class="tagFilter.includes(tag) ? 'border-2 border-purple-200 bg-purple-500' : 'border-1 border-purple-600 bg-purple-800 text-white'">{{
|
||||
class="text-xs bg-black border-purple-400 border text-white p-1 rounded-md"
|
||||
:class="tagFilter.includes(tag) ? 'border-2 border-white bg-slate-700' : 'border-2 bg-black text-white'">{{
|
||||
tag }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<TransitionGroup name="list">
|
||||
<div v-for="post in tagFilter.length == 0 ? list : list.filter(post => tagFilter.some(tag => post.metadata.tags.includes(tag)))" :key="post.id">
|
||||
<PostCard :url="post.url" :key="post.id" />
|
||||
<PostCard :url="post.url" :key="post.id" :tagFilter="tagFilter"/>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
|
@ -156,14 +152,13 @@ watch(url, async () => {
|
|||
<h1>{{ title }}</h1>
|
||||
<div class="max-w-50 flex flex-row justify-center">
|
||||
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
|
||||
<span class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md">{{
|
||||
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{
|
||||
tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="text-pretty min-w-96 text-left max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
|
||||
<div class="md-contents" v-html="text"></div>
|
||||
</div>
|
||||
<Card class="text-pretty max-w-4xl mt-4 max-md:w-screen text-left">
|
||||
<Markdown :text="text"></Markdown>
|
||||
</Card>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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")
|
|||
<div class="relative flex w-full justify-center text-white">
|
||||
<div class="mt-8 flex-col text-center">
|
||||
<div class="flex justify-center">
|
||||
<div class="p-2 shadow-md rounded-full bg-pink-500">
|
||||
<div id="PFP" class="p-1 shadow-md rounded-full bg-pink-500">
|
||||
<img class="transition-all w-40 h-40 md:w-56 md:h-56 rounded-full"
|
||||
src="https://avatars.githubusercontent.com/u/94077364?v=4" alt="User PFP" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
|
||||
<Card class="max-w-4xl mt-4 max-md:w-screen">
|
||||
<Markdown :text="aboutMe"></Markdown>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#PFP {
|
||||
box-shadow: 0 0 10px 0 pink;
|
||||
}
|
||||
</style>
|
||||
243
public/blog/styling_test.md
Normal file
243
public/blog/styling_test.md
Normal file
|
|
@ -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
|
||||
|
||||
<!-- The towwwn inside meeeeee :3 -->
|
||||
|
||||
<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>
|
||||
|
||||
### Audio
|
||||
|
||||
<!-- 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">
|
||||
Your browser does not support the audio element.
|
||||
</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
|
||||
|
||||
<style>
|
||||
markdown-example-red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
markdown-example-glowing {
|
||||
text-shadow: 0 0 5px #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<markdown-example-red>This text is red.</markdown-example-red>
|
||||
|
||||
<markdown-example-glowing>This text is glowing.</markdown-example-glowing>
|
||||
|
||||
### Embedded HTML
|
||||
|
||||
<div style="background-color: lightblue; padding: 10px;">
|
||||
This is a div with a light blue background.
|
||||
|
||||
<p>This is a paragraph inside the div.</p>
|
||||
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
### Embedded SVG
|
||||
|
||||
<svg width="100" height="100">
|
||||
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
|
||||
</svg>
|
||||
|
||||
### Embedded LaTeX
|
||||
|
||||
$$
|
||||
|
||||
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
|
||||
|
||||
$$
|
||||
|
||||
### Interactive Scripting
|
||||
|
||||
On click, this button should change color:
|
||||
|
||||
<button onclick="this.style.backgroundColor = 'red';">Click me!</button>
|
||||
|
||||
On click, this button should run JavaScript and create an alert:
|
||||
|
||||
<button onclick="alert('Hello, world!');">Click me!</button>
|
||||
|
||||
And this one uses a `<script>` tag to do the same thing:
|
||||
|
||||
<button id="alert-button">Click me!</button>
|
||||
|
||||
<script>
|
||||
document.getElementById('alert-button').onclick = function() {
|
||||
alert('Hello, world!');
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
### Conclusion
|
||||
|
||||
This is the end of the test post. I hope everything looks good!
|
||||
|
||||
- TheFelidae
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue