refactor styles to highlight code, just use cdn, add formatting rules

README.md

@@ -5,9 +5,3 @@ Hi, this is my personal website.
 To setup the site, I used the [Fresh](https://fresh.deno.dev) starter template
 found on their website, `deno run -A -r https://fresh.deno.dev`, then began
 modifying from there.
-
-### Styles
-
-The site uses [picocss](https://github.com/picocss/pico/tree/v2). It is
-installed manually by downloading the latest package, then running
-`unzip -j ~/Downloads/pico-2.zip pico-2/css/pico.min.css -d ~/dev/personal-site-deno/static`.

deno.json

@@ -26,11 +26,16 @@
     "preact/": "https://esm.sh/preact@10.19.2/",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
-    "$std/": "https://deno.land/std@0.208.0/",
-    "$gfm": "https://deno.land/x/gfm@0.4.0/mod.ts"
+    "$std/": "https://deno.land/std@0.208.0/"
   },
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
+  },
+  "fmt": {
+    "options": {
+      "semiColons": false,
+      "singleQuote": true
+    }
   }
 }

dev.ts

@@ -1,8 +1,8 @@
 #!/usr/bin/env -S deno run -A --watch=static/,routes/
 
-import dev from "$fresh/dev.ts";
-import config from "./fresh.config.ts";
+import dev from '$fresh/dev.ts'
+import config from './fresh.config.ts'
 
-import "$std/dotenv/load.ts";
+import '$std/dotenv/load.ts'
 
-await dev(import.meta.url, "./main.ts", config);
+await dev(import.meta.url, './main.ts', config)

fresh.config.ts

@@ -1,3 +1,3 @@
-import { defineConfig } from "$fresh/server.ts";
+import { defineConfig } from '$fresh/server.ts'
 
-export default defineConfig({});
+export default defineConfig({})

fresh.gen.ts

@@ -2,28 +2,28 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $_main_slug_ from "./routes/(main)/[slug].tsx";
-import * as $_main_layout from "./routes/(main)/_layout.tsx";
-import * as $_main_blog_slug_ from "./routes/(main)/blog/[slug].tsx";
-import * as $_main_blog_index from "./routes/(main)/blog/index.tsx";
-import * as $_main_index from "./routes/(main)/index.tsx";
-import * as $_404 from "./routes/_404.tsx";
-import * as $_app from "./routes/_app.tsx";
+import * as $_main_slug_ from './routes/(main)/[slug].tsx'
+import * as $_main_layout from './routes/(main)/_layout.tsx'
+import * as $_main_blog_slug_ from './routes/(main)/blog/[slug].tsx'
+import * as $_main_blog_index from './routes/(main)/blog/index.tsx'
+import * as $_main_index from './routes/(main)/index.tsx'
+import * as $_404 from './routes/_404.tsx'
+import * as $_app from './routes/_app.tsx'
 
-import { type Manifest } from "$fresh/server.ts";
+import { type Manifest } from '$fresh/server.ts'
 
 const manifest = {
   routes: {
-    "./routes/(main)/[slug].tsx": $_main_slug_,
-    "./routes/(main)/_layout.tsx": $_main_layout,
-    "./routes/(main)/blog/[slug].tsx": $_main_blog_slug_,
-    "./routes/(main)/blog/index.tsx": $_main_blog_index,
-    "./routes/(main)/index.tsx": $_main_index,
-    "./routes/_404.tsx": $_404,
-    "./routes/_app.tsx": $_app,
+    './routes/(main)/[slug].tsx': $_main_slug_,
+    './routes/(main)/_layout.tsx': $_main_layout,
+    './routes/(main)/blog/[slug].tsx': $_main_blog_slug_,
+    './routes/(main)/blog/index.tsx': $_main_blog_index,
+    './routes/(main)/index.tsx': $_main_index,
+    './routes/_404.tsx': $_404,
+    './routes/_app.tsx': $_app,
   },
   islands: {},
   baseUrl: import.meta.url,
-} satisfies Manifest;
+} satisfies Manifest
 
-export default manifest;
+export default manifest

main.ts

@@ -4,10 +4,10 @@
 /// <reference lib="dom.asynciterable" />
 /// <reference lib="deno.ns" />
 
-import "$std/dotenv/load.ts";
+import '$std/dotenv/load.ts'
 
-import { start } from "$fresh/server.ts";
-import manifest from "./fresh.gen.ts";
-import config from "./fresh.config.ts";
+import { start } from '$fresh/server.ts'
+import manifest from './fresh.gen.ts'
+import config from './fresh.config.ts'
 
-await start(manifest, config);
+await start(manifest, config)

routes/(main)/[slug].tsx

@@ -1,7 +1,7 @@
-import type { Handlers, PageProps, FreshContext } from "$fresh/server.ts";
-import { render } from "$gfm";
-import { Head } from "$fresh/runtime.ts"
-import {GET} from "../../utils.ts"
+import { Head } from '$fresh/runtime.ts'
+import type { FreshContext, Handlers, RouteContext } from '$fresh/server.ts'
+import { marked } from 'npm:marked@11.1.1'
+import { GET } from '../../utils.ts'
 
 interface Page {
   attrs: Record<string, unknown>
@@ -10,18 +10,25 @@ interface Page {
 
 export const handler: Handlers<Page> = {
   GET(_req: Request, ctx: FreshContext) {
-    return GET(_req, ctx, "routes/(main)")
-  }
+    return GET(_req, ctx, 'routes/(main)')
+  },
 }
 
-export default (props: PageProps<Page>) => {
+export default async (_req: Request, ctx: RouteContext<Page>) => {
   return (
     <>
       <Head>
-        <title>{String(props.data.attrs.title)}</title>
-        <meta name="description" content={String(props.data.attrs.description)} />
+        <title>{String(ctx.data.attrs.title)}</title>
+        <meta
+          name='description'
+          content={String(ctx.data.attrs.description)}
+        />
       </Head>
-      <div dangerouslySetInnerHTML={{ __html: render(props.data.body) }} />
+      <div
+        dangerouslySetInnerHTML={{
+          __html: await marked.parse(ctx.data.body),
+        }}
+      />
     </>
   )
 }

routes/(main)/blog/[slug].tsx

@@ -1,7 +1,16 @@
-import type { Handlers, PageProps, FreshContext } from "$fresh/server.ts";
-import { render } from "$gfm";
-import { Head } from "$fresh/runtime.ts"
-import {GET} from "../../../utils.ts"
+import { Head } from '$fresh/runtime.ts'
+import type { FreshContext, Handlers, RouteContext } from '$fresh/server.ts'
+import hljs from 'npm:highlight.js@11.9.0'
+import { markedHighlight } from 'npm:marked-highlight@2.1.0'
+import { Marked } from 'npm:marked@11.1.1'
+import { GET } from '../../../utils.ts'
+
+const marked = new Marked(markedHighlight({
+  highlight(code, lang, info) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+    return hljs.highlight(code, { language }).value
+  },
+}))
 
 type Page = {
   // deno-lint-ignore no-explicit-any
@@ -11,18 +20,23 @@ type Page = {
 
 export const handler: Handlers<Page> = {
   GET(_req: Request, ctx: FreshContext) {
-    return GET(_req, ctx, "routes/(main)/blog")
-  }
+    return GET(_req, ctx, 'routes/(main)/blog')
+  },
 }
 
-export default (props: PageProps<Page>) => {
+export default async (_req: Request, ctx: RouteContext<Page>) => {
   return (
     <>
       <Head>
-        <title>{String(props.data.attrs.meta.title)}</title>
-        <meta name="description" content={String(props.data.attrs.meta.description)} />
+        <title>{String(ctx.data.attrs.meta.title)}</title>
+        <meta
+          name='description'
+          content={String(ctx.data.attrs.meta.description)}
+        />
       </Head>
-      <div dangerouslySetInnerHTML={{ __html: render(props.data.body) }} />
+      <div
+        dangerouslySetInnerHTML={{ __html: await marked.parse(ctx.data.body) }}
+      />
     </>
   )
 }

routes/(main)/blog/index.tsx

@@ -1,4 +1,4 @@
-import type { Handlers, PageProps, FreshContext } from '$fresh/server.ts'
+import type { FreshContext, Handlers, PageProps } from '$fresh/server.ts'
 import { extract } from '$std/front_matter/any.ts'
 import { Head } from '$fresh/runtime.ts'
 

routes/(main)/index.md

@@ -6,6 +6,6 @@ Hi, I'm Sean Stiglitz. Software engineer by day, software engineer by night.
 
 I created this website for hosting my general contact information, blog
 postings, or anything else I may want to build. It is built using
-[Fresh](https://fresh.deno.dev)/[picocss](https://picocss.com) and hosted on Deno Deploy.
-The code is open source and can be found
+[Fresh](https://fresh.deno.dev)/[picocss](https://picocss.com) and hosted on
+Deno Deploy. The code is open source and can be found
 [here](https://github.com/sstiglitz/personal-site).

routes/(main)/index.tsx

@@ -1,8 +1,8 @@
-import type { Handlers, PageProps, FreshContext } from "$fresh/server.ts";
-import { extract } from "$std/front_matter/any.ts";
-import { test } from "$std/front_matter/mod.ts";
-import { render } from "$gfm";
-import { Head } from "$fresh/runtime.ts"
+import { Head } from '$fresh/runtime.ts'
+import type { FreshContext, Handlers, RouteContext } from '$fresh/server.ts'
+import { extract } from '$std/front_matter/any.ts'
+import { test } from '$std/front_matter/mod.ts'
+import { marked } from 'npm:marked@11.1.1'
 
 interface Page {
   attrs: Record<string, unknown>
@@ -12,19 +12,21 @@ interface Page {
 export const handler: Handlers<Page> = {
   async GET(_req: Request, ctx: FreshContext) {
     const rawMarkdown = await Deno.readTextFile(`routes/(main)/index.md`)
-    const { attrs, body } = test(rawMarkdown) ? extract(rawMarkdown) : {attrs: undefined, body: undefined}
-    return ctx.render({slug: ctx.params.slug, attrs, body })
-  }
+    const { attrs, body } = test(rawMarkdown)
+      ? extract(rawMarkdown)
+      : { attrs: undefined, body: undefined }
+    return ctx.render({ slug: ctx.params.slug, attrs, body })
+  },
 }
 
-export default (props: PageProps<Page>) => {
+export default async (_req: Request, ctx: RouteContext<Page>) => {
   return (
     <>
       <Head>
-        <title>{String(props.data.attrs.title)}</title>
-        <meta name="description" content={String(props.data.attrs.description)} />
+        <title>{String(ctx.data.attrs.title)}</title>
+        <meta name='description' content={String(ctx.data.attrs.description)} />
       </Head>
-      <div dangerouslySetInnerHTML={{ __html: render(props.data.body) }} />
+      <div dangerouslySetInnerHTML={{ __html: await marked(ctx.data.body) }} />
     </>
   )
 }

routes/_404.tsx

@@ -1,4 +1,4 @@
-import { Head } from "$fresh/runtime.ts";
+import { Head } from '$fresh/runtime.ts'
 
 export default function Error404() {
   return (
@@ -7,7 +7,7 @@ export default function Error404() {
         <title>404 - Page not found</title>
       </Head>
       <p>The page you were looking for doesn't exist.</p>
-      <a href="/">Go back home</a>
+      <a href='/'>Go back home</a>
     </>
-  );
+  )
 }

routes/_app.tsx

@@ -1,17 +1,28 @@
-import type { PageProps } from "$fresh/server.ts";
+import type { PageProps } from '$fresh/server.ts'
 
 export default function App({ Component }: PageProps) {
   return (
     <html>
       <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta charset='utf-8' />
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
         <title>netsplit</title>
-        <link rel="stylesheet" href="/styles.css" />
+        <link
+          rel='stylesheet'
+          href='https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.min.css'
+        />
+        <link
+          rel='stylesheet'
+          href='https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github-dark.min.css'
+        >
+        </link>
+        <link rel='stylesheet' href='/styles.css' />
+        <script src='https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/index.min.js'>
+        </script>
       </head>
       <body>
         <Component />
       </body>
     </html>
-  );
+  )
 }

static/styles.css

@@ -1,5 +1,3 @@
-@import url("pico.min.css");
-
 [data-theme='light'],
 :root:not([data-theme='dark']) {
   --pico-primary: #00b1ed;

utils.ts

@@ -1,9 +1,9 @@
-import type { FreshContext } from "$fresh/server.ts";
-import { extract } from "$std/front_matter/any.ts";
-import { test } from "$std/front_matter/mod.ts";
+import type { FreshContext } from '$fresh/server.ts'
+import { extract } from '$std/front_matter/any.ts'
+import { test } from '$std/front_matter/mod.ts'
 
 export const GET = async (_req: Request, ctx: FreshContext, path: string) => {
-  let rawMarkdown = ""
+  let rawMarkdown = ''
   const filepath = `${path}/${ctx.params.slug}.md`
 
   try {
@@ -17,6 +17,8 @@ export const GET = async (_req: Request, ctx: FreshContext, path: string) => {
     }
   }
 
-  const { attrs, body } = test(rawMarkdown) ? extract(rawMarkdown) : {attrs: undefined, body: undefined}
+  const { attrs, body } = test(rawMarkdown)
+    ? extract(rawMarkdown)
+    : { attrs: undefined, body: undefined }
   return ctx.render({ attrs, body })
 }