Clean up, added code syntax highlighted to MDX files

.github/pull_request_template.md

@@ -0,0 +1,5 @@
+<brief description>
+
+### Changes
+
+- List all changes introduced by this PR

keystatic.config.ts

@@ -1,4 +1,3 @@
-import { InViewImagesGrid } from "@/components/ui/in-view-images-grid";
 import { config, fields, collection } from "@keystatic/core";
 import { inline, block } from "@keystatic/core/content-components";
 
@@ -65,6 +64,26 @@ export default config({
                 channelSlug: fields.text({ label: "Channel slug" }),
               },
             }),
+            Code: block({
+              label: "Code Block",
+              schema: {
+                language: fields.select({
+                  label: "Language",
+                  options: [
+                    { label: "JavaScript", value: "javascript" },
+                    { label: "TypeScript", value: "typescript" },
+                    { label: "Python", value: "python" },
+                    { label: "HTML", value: "html" },
+                    { label: "CSS", value: "css" },
+                  ],
+                  defaultValue: "javascript",
+                }),
+                code: fields.text({
+                  label: "Code",
+                  multiline: true,
+                }),
+              },
+            }),
             InViewImagesGrid: block({
               label: "Arena grid",
               schema: {

package.json

@@ -36,16 +36,19 @@
     "next-mdx-remote": "^5.0.0",
     "next-view-transitions": "^0.3.0",
     "posthog-js": "^1.140.1",
+    "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18.3.1",
     "react-tweet": "^3.2.1",
     "rss": "^1.2.2",
+    "shiki": "^1.14.1",
     "sugar-high": "^0.6.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/prismjs": "^1.26.4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/rss": "^0.0.32",

posts/learning-about-data-structures-and-algorithms.mdx

@@ -3,12 +3,13 @@ title: Learning about data structures and algorithms
 summary: Getting to grips with fundamentals so that I can become a better developer
 publishedAt: 2024-08-23
 ---
-For the past few weeks, I have been learning about different data structures and algorithms with [this fantastic course by ThePrimeagen](https://frontendmasters.com/courses/algorithms/). I had been recommended to look into this as a way of better understanding the fundamentals of modern software development, particularly since all of my experience has just been on visual/frontend work in the past with no understanding of how things get wired together. \
-\
-It has been really challenging to get through and understand all of the different concepts. In areas where I need to think a bit more mathematically it is very slow going and painful. I will write out the key points, try to work through and finish the Typescript examples written by Prime, and then write my own version to try and commit this knowledge in my mind. \
-\
-Things are slowly clicking, and I am finding that it is already having an effect on the way I write and/or think about components. But, it has reminded me that I don't pick up new things easily and have to go through a lot of failure in order for things to begin making sense. I used to try to avoid this out of embarrassment and fear of being judged but have realised that I cannot avoid it - I need to muck up in every way possible and ask a million questions for things to stick. \
-\
-I am thankful to work at a place where my peers and colleagues are both supportive and patient of me. They have been nudging me in the right direction when it comes to things like code reviews and have been vocal about any milestones that I was able to contribute to. Because of this, I feel that I have learned more in the past six months about development than I have in the past three years (when I first started to semi-seriously write up small websites for fun).\
-\
-If it comes time to when I need to implement a queue for something in the future, hopefully I am confident and know enough to be able to do so. 
+
+For the past few weeks, I have been learning about different data structures and algorithms with [this fantastic course by ThePrimeagen](https://frontendmasters.com/courses/algorithms/). I had been recommended to look into this as a way of better understanding the fundamentals of modern software development, particularly since all of my experience has just been on visual/frontend work in the past with no understanding of how things get wired together.
+
+It has been really challenging to get through and understand all of the different concepts. In areas where I need to think a bit more mathematically it is very slow going and painful. I will write out the key points, try to work through and finish the Typescript examples written by Prime, and then write my own version to try and commit this knowledge in my mind.
+
+Things are slowly clicking, and I am finding that it is already having an effect on the way I write and/or think about components. But, it has reminded me that I don't pick up new things easily and have to go through a lot of failure in order for things to begin making sense. I used to try to avoid this out of embarrassment and fear of being judged but have realised that I cannot avoid it - I need to muck up in every way possible and ask a million questions for things to stick.
+
+I am thankful to work at a place where my peers and colleagues are both supportive and patient of me. They have been nudging me in the right direction when it comes to things like code reviews and have been vocal about any milestones that I was able to contribute to. Because of this, I feel that I have learned more in the past six months about development than I have in the past three years (when I first started to semi-seriously write up small websites for fun).
+
+If it comes time to when I need to implement a queue for something in the future, hopefully I am confident and know enough to be able to do so.

src/components/mdx.tsx

@@ -1,12 +1,17 @@
+"use client";
 import Link from "next/link";
 import Image, { ImageProps } from "next/image";
 import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
-import { TweetComponent } from "./tweet";
 import { highlight } from "sugar-high";
 import React, { ComponentType, ReactNode } from "react";
 import { Banner, BannerProps } from "./ui/banner";
 import { YouTubeEmbed } from "@next/third-parties/google";
 import { InViewImagesGrid } from "./ui/in-view-images-grid";
+import Prism from 'prismjs';
+import 'prismjs/themes/prism-tomorrow.css'; 
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
 
 interface TableProps {
   data: {
@@ -206,16 +211,34 @@ function ConsCard({ title, cons }: ConsCardProps) {
   );
 }
 
-interface CodeProps extends React.HTMLAttributes<HTMLElement> {
-  children: ReactNode;
+interface CodeProps extends React.HTMLAttributes<HTMLPreElement> {
+  children: string;
+  language?: string;
 }
 
-function Code({ children, ...props }: CodeProps) {
-  const codeString = React.Children.toArray(children).join("");
-  let codeHTML = highlight(codeString);
-  return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />;
-}
+function Code({ children, language = 'javascript', ...props }: CodeProps) {
+  const codeRef = React.useRef<HTMLElement>(null);
+
+  React.useEffect(() => {
+    if (codeRef.current) {
+      Prism.highlightElement(codeRef.current);
+    }
+  }, [children, language]);
 
+  return (
+    <pre className="relative overflow-x-auto p-4 bg-gray-800 rounded-lg">
+      <code ref={codeRef} className={`language-${language}`}>
+        {children}
+      </code>
+      <button
+        className="absolute top-2 right-2 text-white bg-gray-700 px-2 py-1 rounded"
+        onClick={() => navigator.clipboard.writeText(children)}
+      >
+        Copy
+      </button>
+    </pre>
+  );
+}
 function slugify(str: string): string {
   return str
     .toString()
@@ -277,7 +300,6 @@ const components: ComponentsType = {
   Callout,
   ProsCard,
   ConsCard,
-  StaticTweet: TweetComponent,
   code: Code,
   Table,
   Arena,