try again

This commit is contained in:
Orion Reed 2024-07-07 23:55:38 +01:00
parent c76b25caf2
commit 6733670215
6 changed files with 58 additions and 60 deletions

17
build/markdownPlugin.js Normal file
View File

@ -0,0 +1,17 @@
import matter from "gray-matter";
import { markdownToHtml } from "./markdownToHtml";
import path from "path";
export const markdownPlugin = {
name: "markdown-plugin",
enforce: "pre",
transform(code, id) {
if (id.endsWith(".md")) {
const { data, content } = matter(code);
const filename = path.basename(id, ".md");
const html = markdownToHtml(filename, content);
const htmlString = JSON.stringify({ html });
return `export default ${htmlString};`;
}
},
};

39
build/markdownToHtml.js Normal file
View File

@ -0,0 +1,39 @@
import MarkdownIt from "markdown-it";
const md = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
});
const mediaSrc = (folderName, fileName) => {
return `/posts/${folderName}/${fileName}`;
};
// Customize Markdown-to-HTML mapping here
// md.renderer.rules.paragraph_open = () => '<p class="custom-paragraph">';
md.renderer.rules.code_block = (tokens, idx, options, env, self) => {
console.log("tokens", tokens);
return `<code>${tokens[idx].content}</code>`;
};
md.renderer.rules.image = (tokens, idx, options, env, self) => {
// console.log('env', env)
const token = tokens[idx];
const src = token.attrGet("src");
const alt = token.content;
const postName = env.postName;
const formattedSrc = mediaSrc(postName, src);
if (src.endsWith(".mp4")) {
return `<video controls>
<source src="${formattedSrc}" type="video/mp4">
Your browser does not support the video tag.
</video>`;
}
return `<img src="${formattedSrc}" alt="${alt}" />`;
};
export function markdownToHtml(postName, content) {
return md.render(content, { postName: postName });
}

View File

@ -1,18 +0,0 @@
import { Plugin } from 'vite'
import matter from 'gray-matter';
import { markdownToHtml } from './markdownToHtml';
import path from 'path';
export const markdownPlugin: Plugin = {
name: 'markdown-plugin',
enforce: 'pre',
transform(code, id) {
if (id.endsWith('.md')) {
const { data, content } = matter(code);
const filename = path.basename(id, '.md');
const html = markdownToHtml(filename, content);
const htmlString = JSON.stringify({ html });
return `export default ${htmlString};`;
}
},
};

View File

@ -1,40 +0,0 @@
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
});
const mediaSrc = (folderName: string, fileName: string) => {
return `/posts/${folderName}/${fileName}`
}
// Customize Markdown-to-HTML mapping here
// md.renderer.rules.paragraph_open = () => '<p class="custom-paragraph">';
md.renderer.rules.code_block = (tokens, idx, options, env, self) => {
console.log('tokens', tokens)
return `<code>${tokens[idx].content}</code>`;
}
md.renderer.rules.image = (tokens, idx, options, env, self) => {
// console.log('env', env)
const token = tokens[idx];
const src = token.attrGet('src');
const alt = token.content
const postName = env.postName
const formattedSrc = mediaSrc(postName, src)
if (src.endsWith('.mp4')) {
return `<video controls>
<source src="${formattedSrc}" type="video/mp4">
Your browser does not support the video tag.
</video>`;
}
return `<img src="${formattedSrc}" alt="${alt}" />`;
};
export function markdownToHtml(postName: string, content: string): string {
return md.render(content, { postName: postName });
}

View File

@ -6,5 +6,5 @@
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts", "src/utils/*"]
"include": ["vite.config.ts"]
}

View File

@ -1,4 +1,4 @@
import { markdownPlugin } from './src/utils/markdownPlugin';
import { markdownPlugin } from './build/markdownPlugin';
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import wasm from "vite-plugin-wasm";