- ![]()
+
+
-
+
-
{{ formatDate(post.created_at) }}
- - - {{ post.title ?? "" }} - + {{ post.title }}
- {{ post.description ?? "" }} + {{ post.description }}
+
![]()
+ class="h-10 w-10 rounded bg-dark-100" />
diff --git a/composables/server/Post.ts b/composables/server/Post.ts
new file mode 100644
index 0000000..331d44e
--- /dev/null
+++ b/composables/server/Post.ts
@@ -0,0 +1,91 @@
+import { access, opendir, readFile } from "node:fs/promises";
+import { join } from "node:path";
+import type { FrontMatter, Post } from "~/types/posts";
+import {
+ getMarkdownRenderer,
+ parseFrontMatter,
+ stripFrontMatter,
+} from "~/utils/markdown";
+
+export const usePost = async (path: string): Promise => {
+ if (import.meta.client) {
+ return null;
+ }
+
+ const filePath = join(process.cwd(), "content", `${path}.md`);
+
+ if (
+ !(await access(filePath)
+ .then(() => true)
+ .catch(() => false))
+ ) {
+ return null;
+ }
+
+ const contents = await readFile(filePath, "utf8");
+
+ const header = parseFrontMatter(contents);
+
+ if (!header) {
+ return null;
+ }
+
+ const renderedBody = await getMarkdownRenderer().then((renderer) =>
+ renderer.render(stripFrontMatter(contents)),
+ );
+
+ return {
+ author: {
+ handle: header.author_handle,
+ image: header.author_image,
+ name: header.author,
+ },
+ private: header.private === "true",
+ content: renderedBody,
+ created_at: new Date(Number(header.created_at || 0)).toISOString(),
+ description: header.description,
+ image: header.image,
+ title: header.title,
+ path,
+ };
+};
+
+export const usePostList = async (): Promise => {
+ if (import.meta.client) {
+ return null;
+ }
+
+ const directoryPath = join(process.cwd(), "content");
+
+ const dir = await opendir(directoryPath, {
+ recursive: true,
+ });
+
+ const files = [];
+
+ for await (const dirent of dir) {
+ if (dirent.isFile() && dirent.name.endsWith(".md")) {
+ files.push(
+ // Remove process.cwd() and .md from the path
+ join(dirent.path, dirent.name.replace(".md", "")).replace(
+ join(process.cwd(), "content"),
+ "",
+ ),
+ );
+ }
+ }
+
+ const results: Post[] = [];
+
+ for (const file of files) {
+ const post = await usePost(file.replace(".md", ""));
+ if (post) {
+ results.push(post);
+ }
+ }
+
+ return results.sort(
+ (a, b) =>
+ new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+ );
+};
diff --git a/content/de/blog/2024/07/die-rettung-vom-troet-cafe.md b/content/de/blog/2024/07/die-rettung-vom-troet-cafe.md
index c3634f7..94aa678 100644
--- a/content/de/blog/2024/07/die-rettung-vom-troet-cafe.md
+++ b/content/de/blog/2024/07/die-rettung-vom-troet-cafe.md
@@ -821,7 +821,8 @@ Wir überlegten trotzdem ob wir langfristig einen
cronjob Einrichten der preview_cards und dessen URLs rauswirft, denn eine Tabelle mit so vielen Einträgen, vor allem bei so irrelevanten Daten, ist nicht akzeptabel.
Um 17:12 generierten wir zum ersten Mal eine Liste an allen Links die in dieser Tabelle gespeichert wurden, von Alt zu Neu. Wir zeigten lediglich die ersten 5 Einträge an, denn die gesamten 19.000.000 auszugeben wäre nicht machbar.
-``` url | id | created_at
+```
+ url | id | created_at
--------------------------------------------------------------------------------------------------------+----+----------------------------
https://youtu.be/IPSbNdBmWKE | 1 | 2018-05-01 07:10:15.725173
https://techcrunch.com/2018/04/30/jan-koum-quits-facebook/ | 2 | 2018-05-01 07:13:48.155344
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b9dcdc6..29db49e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,8 +5,8 @@ export default defineNuxtConfig({
"@vueuse/nuxt",
"@nuxtjs/seo",
"@nuxtjs/i18n",
- "@nuxt/content",
"@nuxtjs/tailwindcss",
+ "@nuxt/image",
],
app: {
@@ -22,11 +22,6 @@ export default defineNuxtConfig({
},
},
- content: {
- locales: ["en", "de"],
- defaultLocale: "de",
- },
-
i18n: {
vueI18n: "./i18n.config.ts",
baseUrl: "https://join-mastodon.de",
diff --git a/package.json b/package.json
index 89d72ba..2f69bee 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,11 @@
"format": "prettier --write components/ pages/ styles layouts/ *.ts *.json"
},
"devDependencies": {
- "@nuxt/content": "^2.13.1",
"@nuxtjs/eslint-config-typescript": "^12.1.0",
"@nuxtjs/i18n": "^8.3.1",
"@nuxtjs/seo": "^2.0.0-rc.15",
"@nuxtjs/tailwindcss": "^6.12.1",
+ "@types/markdown-it-container": "^2.0.10",
"@types/node": "^20.14.11",
"@typescript-eslint/parser": "^7.16.1",
"@vueuse/core": "^10.11.0",
@@ -31,10 +31,17 @@
"typescript": "^5.5.3"
},
"dependencies": {
+ "@hackmd/markdown-it-task-lists": "^2.1.4",
"@nuxt/image": "^1.7.0",
"@nuxtjs/robots": "^4.0.1",
+ "@shikijs/markdown-it": "^1.10.3",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.13",
- "iconify-icon": "^2.1.0"
+ "iconify-icon": "^2.1.0",
+ "markdown-it": "^14.1.0",
+ "markdown-it-anchor": "^9.0.1",
+ "markdown-it-container": "^4.0.0",
+ "markdown-it-toc-done-right": "^4.2.0",
+ "shiki": "^1.10.3"
}
}
diff --git a/pages/blog/[...path].vue b/pages/blog/[...path].vue
index 2a1ec09..0e4aad8 100644
--- a/pages/blog/[...path].vue
+++ b/pages/blog/[...path].vue
@@ -1,64 +1,99 @@
- - - {{ post.author ?? "" }} - + {{ post.author.name }}
- {{ post.author_handle ?? "" }} + {{ post.author.handle }}
-
+ {
+ // biome-ignore lint/style/noNonNullAssertion:
+ const output = otherRenderer.renderer.rules.image!(
+ tokens,
+ idx,
+ options,
+ env,
+ self,
+ );
+
+ const imageUrl = (output.match(/src="([^"]+)"/) ?? [null, null])[1];
+
+ if (!imageUrl) {
+ return output;
+ }
+
+ const newUrl = `/_ipx/w_800&f_webp/${imageUrl.replace(/^\//, "")}`;
+
+ return output.replace(imageUrl, newUrl);
+ };
+ });
+
+ return renderer;
+};
+
+// Extract the FrontMatter header from raw markdown
+export const parseFrontMatter = (frontMatter: string): T | null => {
+ const regex = /---\n([\s\S]+?)\n---/;
+ const match = frontMatter.match(regex);
+ if (!match) return null;
+ const [, frontMatterString] = match;
+ const frontMatterObject = frontMatterString
+ .split("\n")
+ .map((line) => line.split(": "))
+ .reduce(
+ (acc, [key, value]) => {
+ acc[key] = value;
+ return acc;
+ },
+ {} as Record,
+ );
+ return frontMatterObject as T;
+};
+
+export const stripFrontMatter = (markdown: string) => {
+ // Also strip the --- --- around the front matter
+ return markdown.replace(/---\n([\s\S]+?)\n---/, "");
+};
+
- ![]()
-
{{ post.title }}
+ +
+
+
-
+ class="aspect-[16/9] drop-shadow-2xl mt-20 w-full max-w-3xl mx-auto rounded bg-dark-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]" />
+