feat (blog): pwa entry

astro.config.ts

@@ -1,22 +1,31 @@
-import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
-import deno from '@astrojs/deno';
-import robotsTxt from 'astro-robots-txt';
-import preact from '@astrojs/preact';
-import pageInsight from 'astro-page-insight';
-import sitemap from "@astrojs/sitemap";
+import { defineConfig } from 'astro/config'
+import tailwind from '@astrojs/tailwind'
+import deno from '@astrojs/deno'
+import robotsTxt from 'astro-robots-txt'
+import preact from '@astrojs/preact'
+import pageInsight from 'astro-page-insight'
+import sitemap from '@astrojs/sitemap'
+import compress from 'astro-compress'
+import { VitePWA } from 'vite-plugin-pwa'
+import { manifest } from './src/utils/seoConfig'
 
-import compress from "astro-compress";
-
-import { VitePWA } from "vite-plugin-pwa";
-
-import { manifest } from "./src/utils/seoConfig";
+import mdx from '@astrojs/mdx'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), robotsTxt(), preact(), pageInsight(), sitemap({
-    filter: page => page !== 'https://jamerrq.deno.dev/board/' && page !== 'https://jamerrq.deno.dev/es/board/'
-  }), compress()],
+  integrations: [
+    tailwind(),
+    robotsTxt(),
+    preact(),
+    pageInsight(),
+    sitemap({
+      filter: (page) =>
+        page !== 'https://jamerrq.deno.dev/board/' &&
+        page !== 'https://jamerrq.deno.dev/es/board/'
+    }),
+    compress(),
+    mdx()
+  ],
   adapter: deno(),
   output: 'server',
   i18n: {
@@ -36,19 +45,19 @@ export default defineConfig({
     //   external:[]
     // },
     plugins: [
-			VitePWA({
-				registerType: "autoUpdate",
-				manifest,
-				workbox: {
-					globDirectory: "dist",
-					globPatterns: [
-						"**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}"
-					],
-					// Don't fallback on document based (e.g. `/some-page`) requests
-					// This removes an errant console.log message from showing up.
-					navigateFallback: null
-				}
-			})
-		]
+      VitePWA({
+        registerType: 'autoUpdate',
+        manifest,
+        workbox: {
+          globDirectory: 'dist',
+          globPatterns: [
+            '**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}'
+          ],
+          // Don't fallback on document based (e.g. `/some-page`) requests
+          // This removes an errant console.log message from showing up.
+          navigateFallback: null
+        }
+      })
+    ]
   }
-});
+})

package.json

@@ -4,7 +4,9 @@
   "dependencies": {
     "@astrojs/check": "^0.3.4",
     "@astrojs/deno": "^5.0.1",
+    "@astrojs/mdx": "^2.2.0",
     "@astrojs/preact": "^3.1.0",
+    "@astrojs/prism": "^3.0.0",
     "@astrojs/sitemap": "^3.1.1",
     "@astrojs/tailwind": "^5.0.4",
     "@fontsource/merriweather": "^5.0.8",

public/css/prism-nord.css

@@ -0,0 +1,124 @@
+/**
+ * Nord Theme Originally by Arctic Ice Studio
+ * https://nordtheme.com
+ *
+ * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #f8f8f2;
+    background: none;
+    font-family: "Fira Code", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: 0.3em;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+    background: #2E3440;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #636f88;
+}
+
+.token.punctuation {
+    color: #81A1C1;
+}
+
+.namespace {
+    opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #81A1C1;
+}
+
+.token.number {
+    color: #B48EAD;
+}
+
+.token.boolean {
+    color: #81A1C1;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: #A3BE8C;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+    color: #81A1C1;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+    color: #88C0D0;
+}
+
+.token.keyword {
+    color: #81A1C1;
+}
+
+.token.regex,
+.token.important {
+    color: #EBCB8B;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}