Add support for embedding html in markdown

package.json

@@ -50,6 +50,7 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "hastscript": "^9.0.0",
     "postcss": "^8.4.35",
+    "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-directive": "^3.0.0",
     "remark-frontmatter": "^5.0.0",

src/_posts/2024-03-01_vite-press-plugin.md

@@ -23,14 +23,36 @@ The **vite-press-plugin** currently powers the markdown features in the followin
 
 #### Vite Templates with vite-press-plugin
 
- - [press-vue](https://press-vue.web-templates.io) - Vite Vue App
- - [press-react](https://press-react.web-templates.io) - Vite React App
+- [press-vue](https://press-vue.web-templates.io) - Vite Vue App
+- [press-react](https://press-react.web-templates.io) - Vite React App
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://press-vue.servicestack.net">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/press-vue.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">press-vue.servicestack.net</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://press-react.servicestack.net">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/press-react.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">press-react.servicestack.net</div>
+    </a>
+</div>
 
 #### .NET 8 API backend with Vite Vue & React SPA frontend
 
  - [vue-spa](https://vue-spa.web-templates.io) - .NET 8 API with Vite Vue SPA frontend
  - [react-spa](https://react-spa.web-templates.io) - .NET 8 API with Vite React SPA frontend
 
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://vue-spa.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/vue-spa.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">vue-spa.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://react-spa.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/react-spa.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">react-spa.web-templates.io</div>
+    </a>
+</div>
+
 The **vite-press-plugin** makes the Markdown features available to the Vite App, whilst the markdown rendering itself is optimally
 implemented in:
 
@@ -45,8 +67,19 @@ and rendered with [Markdig](https://github.com/xoofx/markdig) and either Razor P
 #### .NET 8 Razor SSG and Blazor SSR Templates
 
  - [razor-ssg](https://razor-ssg.web-templates.io) - .NET Razor SSG Blog and Marketing Website with **Markdig**
- - [razor-press](https://razor-press.web-templates.io) - .NET Razor SSG Documentation Website with **Markdig**
  - [blazor-vue](https://blazor-vue.web-templates.io) - .NET 8 Blazor Server Rendered Website with **Markdig**
+ - [razor-press](https://razor-press.web-templates.io) - .NET Razor SSG Documentation Website with **Markdig**
+
+<div class="not-prose mt-8 grid grid-cols-2 gap-4">
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://razor-ssg.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/razor-ssg.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">razor-ssg.web-templates.io</div>
+    </a>
+    <a class="block group border dark:border-gray-800 hover:border-indigo-700 dark:hover:border-indigo-700 flex flex-col justify-between" href="https://blazor-vue.web-templates.io">
+        <img class="p-2" src="https://raw.githubusercontent.com/ServiceStack/Assets/master/csharp-templates/blazor-vue.png" />
+        <div class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-semibold group-hover:bg-indigo-700 group-hover:text-white text-center py-2">blazor-vue.web-templates.io</div>
+    </a>
+</div>
 
 ### Markdown Feature Folders
 

tailwind.config.js

@@ -2,10 +2,9 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './public/**/*.{ts,tsx,mdx,html}',
-    './src/**/*.{ts,tsx,mdx}',
-    '../content/**/*.{ts,tsx,md,mdx}',
-    './*.ts',
+    './public/**/*.{ts,tsx,md,mdx,html}',
+    './src/**/*.{ts,tsx,md,mdx}',
+    './*.{ts,tsx}',
   ],
   prefix: "",
   theme: {

vite.config.ts

@@ -7,12 +7,14 @@ import path from 'path'
 import { env } from 'process'
 import Pages from 'vite-plugin-pages'
 import svgr from 'vite-plugin-svgr'
+import mdx from "@mdx-js/rollup"
 import remarkFrontmatter from 'remark-frontmatter' // YAML and such.
 import remarkGfm from 'remark-gfm' // Tables, footnotes, strikethrough, task lists, literal URLs.
 import remarkPrism from 'remark-prism'
 import remarkParse from "remark-parse"
 import rehypeStringify from 'rehype-stringify'
 import remarkDirective from 'remark-directive'
+import rehypeRaw from 'rehype-raw'
 import { remarkContainers, remarkFencedCode } from './vite.config.markdown'
 
 // @ts-ignore - no types
@@ -22,12 +24,10 @@ const currentDir = path.dirname(fileURLToPath(import.meta.url))
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => {
-  const mdx = await import('@mdx-js/rollup')
-
   return {
     plugins: [
       svgr(),
-      mdx.default({
+      mdx({
         // See https://mdxjs.com/advanced/plugins
         remarkPlugins: [
           remarkFrontmatter,
@@ -39,6 +39,7 @@ export default defineConfig(async () => {
           remarkContainers,
         ],
         rehypePlugins: [
+          [rehypeRaw, {passThrough:['mdxjsEsm','mdxFlowExpression','mdxJsxFlowElement','mdxJsxTextElement','mdxTextExpression']}],
           rehypeStringify,
         ],
       }),