Update deps

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx lint-staged

app/components/SiteInfo.tsx

@@ -58,7 +58,7 @@ export default function SiteInfo() {
               <ExternalLink key={index2} to={text.href}>
                 {text.title}
               </ExternalLink>
-            )
+            ),
           )}
         </p>
       ))}

app/routes/_default.post.$slug.tsx

@@ -32,7 +32,7 @@ export const meta: MetaFunction<typeof loader> = ({ data, matches }) => {
   const rootMatchMeta = matches[0].meta as ReturnType<typeof rootMeta>;
   return [
     ...rootMatchMeta.filter(
-      (m) => !('title' in m) && 'name' in m && m.name !== 'description'
+      (m) => !('title' in m) && 'name' in m && m.name !== 'description',
     ),
     { title: data.post.title },
     { name: 'og:title', content: data.post.title },
@@ -59,7 +59,7 @@ export const loader: LoaderFunction = async ({
   if (slug === '404') {
     throw json(
       { message: `Unable to find a post with slug "${slug}"` },
-      { status: 404 }
+      { status: 404 },
     );
   }
   const post = await getPost(slug);

app/routes/_default.tsx

@@ -68,7 +68,7 @@ export default function DefaultLayout() {
       m.handle != null &&
       typeof m.handle === 'object' &&
       'isHomepage' in m.handle &&
-      m.handle.isHomepage
+      m.handle.isHomepage,
   );
 
   return (

app/routes/_resume.resume.tsx

@@ -4,11 +4,11 @@ import type { ReactElement } from 'react';
 
 import ExternalLink from '~/components/ExternalLink';
 import { meta as rootMeta } from '~/root';
-import marked from '~/ts/marked.server';
 import type { ResumeData } from '~/ts/resume';
 import resumeData from '~/ts/resume';
 
 import '~/styles/resume.css';
+import { md } from '~/ts/marked.server';
 
 interface LoaderData {
   resumeData: ResumeData;
@@ -18,32 +18,22 @@ export const meta: MetaFunction<typeof loader> = ({ matches }) => {
   const rootMatchMeta = matches[0].meta as ReturnType<typeof rootMeta>;
   return [
     ...rootMatchMeta.filter(
-      (m) => !('title' in m) && 'name' in m && m.name !== 'description'
+      (m) => !('title' in m) && 'name' in m && m.name !== 'description',
     ),
     { title: "Matt Brophy's Resume" },
     { name: 'description', content: "Matt Brophy's Resume" },
   ];
 };
 
-function md(value: string): string {
-  try {
-    return marked(value)
-      .trim()
-      .replace(/^<p>|<\/p>$/g, '');
-  } catch (e) {
-    return value;
-  }
-}
-
 export const loader: LoaderFunction = (): LoaderData => {
   const enhancedData: ResumeData = {
     ...resumeData,
     jobs: resumeData.jobs.map((j) => ({
-      title: md(j.title),
+      title: mdTrim(j.title),
       details: j.details.map((d) =>
-        Array.isArray(d) ? d.map((d2) => md(d2)) : md(d)
+        Array.isArray(d) ? d.map((d2) => mdTrim(d2)) : mdTrim(d),
       ),
-      subDetails: j.subDetails.map((sd) => md(sd)),
+      subDetails: j.subDetails.map((sd) => mdTrim(sd)),
     })),
   };
   return { resumeData: enhancedData };
@@ -206,3 +196,9 @@ export default function Resume() {
     </div>
   );
 }
+
+function mdTrim(str: string) {
+  return md(str)
+    .trim()
+    .replace(/^<p>|<\/p>$/g, '');
+}

app/routes/playground.autocomplete.tsx

@@ -44,7 +44,7 @@ export const meta: MetaFunction<typeof loader> = ({ data, matches }) => {
   const rootMatchMeta = matches[0].meta as ReturnType<typeof rootMeta>;
   return [
     ...rootMatchMeta.filter(
-      (m) => !('title' in m) && 'name' in m && m.name !== 'description'
+      (m) => !('title' in m) && 'name' in m && m.name !== 'description',
     ),
     { title: `Results: ${data.query}` },
   ];

app/styles/default.css

@@ -266,7 +266,8 @@
 .c-post__share-medium .fa {
   padding: 5px;
   border-radius: 50%;
-  transition: color var(--transition-duration),
+  transition:
+    color var(--transition-duration),
     background-color var(--transition-duration);
 }
 

app/ts/marked.server.ts

@@ -1,2 +1,16 @@
-import { marked } from 'marked';
-export default marked;
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+import prism from 'prismjs';
+
+const markedWithHighlighting = new Marked(
+  markedHighlight({
+    //langPrefix: 'hljs language-',
+    highlight(code, lang) {
+      return prism.highlight(code, prism.languages[lang], lang);
+    },
+  }),
+);
+
+export function md(str: string): string {
+  return markedWithHighlighting.parse(str) as string;
+}

app/ts/post-api.ts

@@ -4,13 +4,13 @@ import url from 'node:url';
 
 import cheerio from 'cheerio';
 import parseFrontMatter from 'front-matter';
-import { marked } from 'marked';
-import prism from 'prismjs';
 import readingTime from 'reading-time';
 import invariant from 'tiny-invariant';
 import vagueTime from 'vague-time';
 import loadLanguages from 'prismjs/components/index.js';
 
+import { md } from '~/ts/marked.server';
+
 loadLanguages(['bash', 'json', 'typescript', 'markdown']);
 
 let postsCache: Post[] | null = null;
@@ -44,11 +44,11 @@ const postsPath = path.join(
   path.dirname(url.fileURLToPath(import.meta.url)),
   '..',
   '..',
-  'posts'
+  'posts',
 );
 
 function isValidPostAttributes(
-  attributes: unknown
+  attributes: unknown,
 ): attributes is PostMarkdownAttributes {
   return (
     attributes != null &&
@@ -66,20 +66,13 @@ function excerpt(html: string): string {
     .replace(/<\/p>$/, '');
 }
 
-function md(str: string) {
-  return marked.parse(str, {
-    highlight: (code, lang) =>
-      prism.highlight(code, prism.languages[lang], lang),
-  });
-}
-
 async function readFullPost(filename: string): Promise<FullPost> {
   const file = await fs.readFile(path.join(postsPath, filename));
   const fileContents = file.toString();
   const { attributes, body } = parseFrontMatter(fileContents);
   invariant(
     isValidPostAttributes(attributes),
-    `${filename} has bad meta data!`
+    `${filename} has bad meta data!`,
   );
   const slug = filename.replace(/\.md$/, '');
   const html = md(body);
@@ -112,7 +105,7 @@ export async function getPosts(): Promise<Post[]> {
       .filter((p) => process.env.SHOW_DRAFT_POSTS === 'true' || !p.draft)
       // Reverse chronological order
       .sort((a, b) =>
-        a.postDate < b.postDate ? 1 : a.postDate > b.postDate ? -1 : 0
+        a.postDate < b.postDate ? 1 : a.postDate > b.postDate ? -1 : 0,
       );
   }
   return postsCache;

app/ts/resume.ts

@@ -86,7 +86,7 @@ const resumeData: ResumeData = {
   jobs: [
     {
       title:
-        'Staff Developer - Remix team at [Shopify](https://shopify.engineering/)',
+        'Staff Developer - [Shopify](https://shopify.engineering/) (Remix) ',
       subDetails: ['September 2022 - Present'],
       details: [
         'Primarily working on the data/routing functionality at the intersection of Remix and React Router',