build: replace codehike with shiki

frontend/next.config.js

@@ -1,25 +1,14 @@
-const { remarkCodeHike, recmaCodeHike } = require('@code-hike/mdx');
-
 /** @type {import('next').NextConfig} */
 const withMDX = require('@next/mdx')({
 	extension: /\.mdx?$/,
 	jsx: true,
 	options: {
 		remarkPlugins: [
 			[
-				remarkCodeHike,
-				{
-					autoImport: false,
-					// @todo make a custom theme
-					theme: 'github-dark-dimmed',
-					lineNumbers: true,
-					showCopyButton: true,
-					autoLink: true,
-					staticMediaQuery: 'not screen, (max-width: 768px)',
-				},
+
 			],
 		],
-		recmaPlugins: [[recmaCodeHike]],
+		recmaPlugins: [],
 	},
 });
 

frontend/package.json

@@ -20,7 +20,6 @@
 		"not ie <= 11"
 	],
 	"dependencies": {
-		"@code-hike/mdx": "^0.9.0",
 		"@codesandbox/sandpack-react": "^2.13.10",
 		"@googleapis/youtube": "^16.1.0",
 		"@mdx-js/loader": "^3.0.1",
@@ -75,13 +74,13 @@
 		"remark-gfm": "^4.0.0",
 		"rss": "^1.2.2",
 		"sharp": "^0.33.4",
-		"sugar-high": "^0.6.1",
 		"three": "^0.164.1",
 		"vercel": "^34.2.0",
 		"webpack": "5.76.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.20.12",
+		"@shikijs/transformers": "^1.14.1",
 		"@types/webpack-env": "^1.18.0",
 		"@typescript-eslint/eslint-plugin": "^5.50.0",
 		"@typescript-eslint/parser": "^5.50.0",
@@ -90,6 +89,7 @@
 		"eslint-plugin-react": "^7.32.2",
 		"prisma": "^5.2.0",
 		"sass": "^1.66.1",
+		"shiki": "^1.14.1",
 		"types": "^0.1.1",
 		"typescript": "^5.4.5"
 	}

frontend/src/app/colophon/page.tsx

@@ -1,23 +1,59 @@
-import Link from "next/link";
+import Link from 'next/link';
 
 const ColophonPage = () => {
 	return (
 		<section className="paragraph">
 			<h1>Colophon</h1>
-			<div className="prose"><p>
-				A colophon is a publishing term that describes how a book was made. This is that, but for a website.{' '}
-			</p>
-				<p>This website is made using Next.js 14, stored on Github and deployed using Vercel.</p></div>
-
+			<div className="prose">
+				<p>A colophon is a publishing term that describes how a book was made. This is that, but for a website. </p>
+				<p>
+					This website is made using React Typescript on the Next.js 14 framework, stored on Github and deployed using
+					Vercel.
+				</p>
+			</div>
+
+			<div className="prose">
 				<h2>Acknowledgement</h2>
-			<p className="prose">The theme within this website is based on the Caribbean folklore of the <Link href={'https://www.wikiwand.com/en/Soucouyant'}>Soucouyant</Link> or Ole Higue. She is the Caribbean's version of a Vampire, a werewolf and is combined with West African witch mythos.</p>
-
+				<p className="prose">
+					The theme within this website is based on the Caribbean folklore of the{' '}
+					<Link href={'https://www.wikiwand.com/en/Soucouyant'}>Soucouyant</Link> or Ole Higue. She is the Caribbean's
+					version of a Vampire, a werewolf and is combined with West African witch mythos.
+				</p>
+			</div>
+
 			<div className="prose">
 				<h2>Credits</h2>
+				<p>
+					I don't think I could have made my vision come to life without standing on the shoulders of the coders who
+					came before me. For individuals, I will attempt to find their donation links to post alongside their credit.
+				</p>
 				<ul>
-					<li><Link href={"https://www.rpnation.com/threads/fifteen-years-later-the-vampire-diaries-the-originals-rp.240860/"} target="_blank">Vampire Post Divider</Link> found on a  roleplaying forum discussing The Vampire Diaries/The Originals.</li>
-					<li><Link href={"https://codepen.io/sosuke/pen/Pjoqqp"} target="_blank">CSS Filter Generator</Link> to change colors from Black to a specific Hex. This is used to change the blog title when hovering (on non-index pages.)</li>
-					<li><Link href="https://giphy.com/stickers/cat-halloween-this-is-peLhJa1fluELs1WCx9">(Temp) Vampire GIF Sticker</Link> to complement the hero section.</li>
+					<li>
+						<Link
+							href={'https://www.rpnation.com/threads/fifteen-years-later-the-vampire-diaries-the-originals-rp.240860/'}
+							target="_blank"
+						>
+							Vampire Post Divider
+						</Link>{' '}
+						found on a roleplaying forum discussing The Vampire Diaries/The Originals.
+					</li>
+					<li>
+						<Link href={'https://codepen.io/sosuke/pen/Pjoqqp'} target="_blank">
+							CSS Filter Generator
+						</Link>{' '}
+						to change colors from Black to a specific Hex. This is used to change the blog title when hovering (on
+						non-index pages.)
+					</li>
+					<li>
+						<Link href="https://giphy.com/stickers/cat-halloween-this-is-peLhJa1fluELs1WCx9">
+							(Temp) Vampire GIF Sticker
+						</Link>{' '}
+						to complement the hero section.
+					</li>
+					<li>
+						Cool 3D <Link href="https://csspro.com/css-3d-buttons/">Button 13</Link> for the Index Hero. Taken from
+						CSSPro.com and apparently inspired by Balder's Gate 3.
+					</li>
 				</ul>
 			</div>
 		</section>

frontend/src/app/components/mdx.tsx

@@ -2,10 +2,11 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { TweetComponent } from './tweet';
-import { highlight } from 'sugar-high';
 import React from 'react';
 import { LiveCode } from './sandpack';
-import { CH } from '@code-hike/mdx/components';
+import { codeToHtml } from 'shiki';
+import type { BundledLanguage, BundledTheme } from 'shiki';
+import { transformerNotationHighlight } from '@shikijs/transformers';
 
 function Table({ data }) {
 	let headers = data.headers.map((header, index) => <th key={index}>{header}</th>);
@@ -106,10 +107,24 @@ function ConsCard({ title, cons }) {
 	);
 }
 
-function Code({ children, ...props }) {
-	let codeHTML = highlight(children);
-	return <code dangerouslySetInnerHTML={{ __html: codeHTML }} {...props} />;
-}
+type Props = {
+	children: string;
+	lang?: BundledLanguage;
+	theme?: BundledTheme;
+	filename?: string;
+};
+
+const Code = async ({ children, lang = 'javascript', theme = 'nord', filename = '.txt' }: Props) => {
+	let codeHTML = await codeToHtml(children, { lang, theme });
+	return (
+		<div className='code'>
+			<div className='filename'>
+				{filename && <caption>{filename}</caption>}
+			</div>
+			<code dangerouslySetInnerHTML={{ __html: codeHTML }} />
+		</div>
+	);
+};
 
 function slugify(str) {
 	return str
@@ -156,7 +171,6 @@ let components = {
 	code: Code,
 	Table,
 	LiveCode,
-	CH,
 };
 
 export function CustomMDX(props) {

frontend/src/components/navigation/socialmedia.ts

@@ -2,20 +2,10 @@ import { FaCoffee } from 'react-icons/fa';
 import { FaTwitter, FaGithub, FaLinkedin, FaCodepen, FaRss, FaEnvelope } from 'react-icons/fa6';
 
 export const MediaProfiles = [
-	// {
-	// 	name: 'LinkedIn',
-	// 	url: 'https://www.linkedin.com/in/medwinter/',
-	// 	icon: FaLinkedin
-	// },
 	{
-		name: 'Github',
-		url: 'https://github.com/kalecream',
-		icon: FaGithub,
-	},
-	{
-		name: 'Codepen',
-		url: 'https://codepen.io/medwinter',
-		icon: FaCodepen,
+		name: 'LinkedIn',
+		url: 'https://www.linkedin.com/in/medwinter/',
+		icon: FaLinkedin
 	},
 	{
 		name: 'Twitter',

frontend/src/pages/_app.tsx

@@ -1,7 +1,6 @@
 import { ThemeProvider } from 'next-themes';
 import type { AppProps } from 'next/app';
 import '@styles/global.scss';
-import '@code-hike/mdx/dist/index.css';
 
 export const WEBSITE_HOST_URL = 'https://www.sabrinamedwinter.com';
 

frontend/src/posts/obsidian-garden-tracker.mdx

@@ -6,25 +6,19 @@ description: "A customized garden tracker that supposedly helps me keep track of
 image: "/img/blog/category/brain.png"
 ---
 
-Gardening is a rewarding and fulfilling activity, but it can be overwhelming to keep track of all the details. Between the different types of plants, planting dates, watering schedules, and pest control measures, it's easy to lose track of what needs to be done when. That's where a garden tracker comes in handy. By tracking your garden's progress, you can stay organized and ensure that your plants thrive.
+Between the different types of plants, planting dates, watering schedules, and pest control measures, it's easy to lose track of what needs to be done when. That's where a garden tracker comes in handy. 
 
-Firstly, we need to create a new note in [Obsidian](https://obsidian.md/). We'll call it [Plants.md](). This note will be the main hub for all of our garden tracking information. We'll use the [Dataview ](https://github.com/blacksmithgu/obsidian-dataview) to create a table of all the plants we're growing, and I used it with Minimal Theme.
 
-Then, we need to create a new note called [New_Plant.md](). This note will be a template for all of our plants.
 
+## Plants Page
 
+Firstly, we need to create a new note in [Obsidian](https://obsidian.md/). We'll call it [Plants.md](). This note will be the main hub for all of our garden tracking information. We'll use the [Dataview ](https://github.com/blacksmithgu/obsidian-dataview) to create a table of all the plants we're growing, and I used it with Minimal Theme.
 
-````md Plants.md
+````md
 ---
 cssclass: cards, cards-cover, cards-1-1
 ---
 
-```button
-name New Plant
-type note(New Plant) template
-action NewPlant
-```
-
 ```dataview
 TABLE WITHOUT ID image,
 file.link,
@@ -40,10 +34,14 @@ AS "Last watered",
 
 FROM [[Plants]] and #apartment
 ```
-
 ````
 
-```md New_Plant.md
+## Plant Template 
+Then, we need to create a new note called "New_Plant.md". This note will be a template for all of our plants.
+
+```md Plants.md
+
+
 category:: [[Plants]] #apartment
 image:: ![img](https://placehold.it/100x100)
 
@@ -57,9 +55,18 @@ harvest::
 
 ```
 
-```md DailyNote.md
----
----
+## New Plant Button
+
+To automatically create a new plant, we will need to use to create a plant template:
+
+```button
+name New Plant
+type note(New Plant) template
+action NewPlant
+```
+
+## Daily Note
 
+```md DailyNote.md
 ![[Plants.md]]
 ```

frontend/src/styles/_normalize.scss

@@ -61,7 +61,9 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  // font-family: monospace, monospace; /* 1 */
+  width: 100%;
+  margin: auto;
   font-size: 1em; /* 2 */
 }
 

frontend/src/styles/global.scss

@@ -223,7 +223,7 @@ header {
 		@include breakpoint-range($from: desktopSmall) {
 			flex-direction: row;
 			justify-content: space-between;
-		padding: 0 1rem;
+			padding: 0 1rem;
 		}
 	}
 }
@@ -505,7 +505,7 @@ h6 {
 
 h1 {
 	font-size: clamp(2.5rem, 2vw, 5rem);
-	margin-bottom:0.5rem;
+	margin-bottom: 0.5rem;
 	max-width: 40rem;
 }
 
@@ -555,7 +555,8 @@ li {
 	font-size: clamp(1.2rem, -0.8750rem + 8.3333vw, 1.6rem);
 }
 
-p > a, li > a {
+p > a,
+li > a {
 	color: var(--secondary);
 
 	&:hover {
@@ -774,7 +775,10 @@ article {
 
 article h1,
 article h2,
-article h3, article h4, article h5, article h6 {
+article h3,
+article h4,
+article h5,
+article h6 {
 	text-align: center;
 }
 
@@ -805,7 +809,7 @@ article .info {
 }
 
 article p {
-	
+
 	@include breakpoint-range($from: mobile) {
 		margin: 1rem 1.5rem;
 	}
@@ -823,6 +827,35 @@ code {
 	font-family: 'Fira Code', monospace;
 }
 
+.code {
+	& .filename {
+		margin: 0.5rem 0;
+		padding: 0.5em 3rem;
+		border-radius: var(--borderRadius);
+		width: fit-content;
+		background-color: var(--primary);
+		color: var(--backgroundColor);
+	}
+
+}
+
+.shiki {
+	width: 100%;
+	padding: 1rem;
+	border-radius: var(--borderRadius);
+	counter-reset: step;
+	counter-increment: step 0;
+
+	.line {
+		&::before {
+			counter-increment: step;
+			margin-right: 6rem;
+			display: inline-block;
+			text-align: right;
+		}
+	}
+}
+
 article ul,
 article ol {