chore: update footer and add basic syntax highlighting

DVDAGames · Mar 5, 2024 · 8e7d6a4 · 8e7d6a4
1 parent 5d05fc4
commit 8e7d6a4
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Dead Villager Dead Adventurer Games
 
-This is the repository that hosts the blog for DVDA Games.
+This is the repository that hosts the [DVDA Games Blog](https://blog.dvdagames.com/)
 
 It uses Next.js's `blog-starter` template as a base.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,9 +12,12 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "rehype-highlight": "^7.0.0",
+    "rehype-remark": "^10.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
-    "remark-html": "^16.0.1"
+    "remark-html": "^16.0.1",
+    "remark-rehype": "^11.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/app/_components/footer.tsx b/src/app/_components/footer.tsx
@@ -5,14 +5,21 @@ export function Footer() {
     <footer className="bg-neutral-50 border-t border-neutral-200">
       <Container>
         <div className="py-28 flex flex-col lg:flex-row items-center">
-          <h3 className="text-4xl lg:text-[2.5rem] font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
-            Mostly silly game stuff.
-          </h3>
-          <div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
-            hello [at] dvdagames.com
-            <a href={`https://github.com/dvdagames/`} className="mx-3 font-bold hover:underline">
-              GitHub
-            </a>
+          <div className="flex flex-col lg:w-1/2">
+            <h3 className="text-4xl lg:text-[2.5rem] font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4">
+              Get in Touch
+            </h3>
+            <div className="">hello [at] dvdagames.com</div>
+          </div>
+          <div className="flex flex-col lg:w-1/2 items-end">
+            <ul className="flex flex-row">
+              <li className="mr-3">
+                <a href={`https://github.com/dvdagames/`}>GitHub</a>
+              </li>
+              <li>
+                <a href={`https://twitter.com/dvdagames`}>Twitter</a>
+              </li>
+            </ul>
           </div>
         </div>
       </Container>

diff --git a/src/app/_components/markdown-styles.module.css b/src/app/_components/markdown-styles.module.css
@@ -34,6 +34,6 @@
   @apply border-l-4 border-gray-300 pl-4;
 }
 
-.markdown a {
-  @apply text-blue-500 underline;
+.markdown code {
+  @apply bg-gray-100 px-2 py-1 rounded;
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+a {
+  @apply text-blue-500 underline;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -36,6 +36,7 @@ export default function RootLayout({
         <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
         <meta name="theme-color" content="#000" />
         <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css" />
       </head>
       <body className={ibm.className}>
         <div className="min-h-screen">{children}</div>