Use system theme and GitHub theme for code highlighting

mellevanderlinde · Oct 15, 2024 · acab782 · acab782
1 parent da2a0c7
commit acab782
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 160 deletions.
diff --git a/apps/website/app/components/mdx.tsx b/apps/website/app/components/mdx.tsx
@@ -1,7 +1,12 @@
 import Link from "next/link";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { ReactNode, createElement } from "react";
-import { highlight } from "sugar-high";
+import hljs from "highlight.js/lib/core";
+import typescript from "highlight.js/lib/languages/typescript";
+import yaml from "highlight.js/lib/languages/yaml";
+
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("yaml", yaml);
 
 function CustomLink(props): ReactNode {
   const href = props.href;
@@ -19,8 +24,8 @@ function CustomLink(props): ReactNode {
 }
 
 function Code({ children, ...props }): ReactNode {
-  const __html =
-    props.className === "language-ts" ? highlight(children) : children;
+  const language = props.className?.replace("language-", "") || "yaml";
+  const __html = hljs.highlight(children, { language }).value;
   return <code dangerouslySetInnerHTML={{ __html }} {...props} />;
 }
 

diff --git a/apps/website/app/components/nav.tsx b/apps/website/app/components/nav.tsx
@@ -1,6 +1,5 @@
 import Link from "next/link";
 import { ReactNode } from "react";
-import { ThemeSwitch } from "./theme";
 
 export const name = "Melle";
 
@@ -29,7 +28,6 @@ export function Navbar(): ReactNode {
               {name}
             </Link>
           ))}
-          <ThemeSwitch />
         </div>
       </div>
     </nav>

diff --git a/apps/website/app/components/theme.tsx b/apps/website/app/components/theme.tsx
diff --git a/apps/website/app/global.css b/apps/website/app/global.css
@@ -2,12 +2,14 @@
 @tailwind components;
 @tailwind utilities;
 
-:selection {
+@import url('highlight.js/styles/github.css') screen and (prefers-color-scheme: light);
+@import url('highlight.js/styles/github-dark.css') screen and (prefers-color-scheme: dark);
+
+::selection {
   background-color: #47a3f3;
   color: #fefefe;
 }
 
-/* Light theme colors */
 :root {
   --sh-class: #2d5e9d;
   --sh-identifier: #354150;
@@ -20,18 +22,16 @@
   --sh-entity: #e25a1c;
 }
 
-/* Dark theme colors */
-.dark {
-  background-color: #121212;
-  --sh-class: #4c97f8;
-  --sh-identifier: white;
-  --sh-sign: #8996a3;
-  --sh-string: #0fa295;
-  --sh-keyword: #f47067;
-  --sh-comment: #a19595;
-  --sh-jsxliterals: #6266d1;
-  --sh-property: #e25a1c;
-  --sh-entity: #e25a1c;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --sh-class: #4c97f8;
+    --sh-identifier: white;
+    --sh-keyword: #f47067;
+    --sh-string: #0fa295;
+  }
+  html {
+    color-scheme: dark;
+  }
 }
 
 html {

diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -7,7 +7,6 @@ import { Navbar } from "./components/nav";
 import { ReactNode } from "react";
 import Footer from "./components/footer";
 import { baseUrl } from "./sitemap";
-import { ThemeProvider } from "./components/theme";
 
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
@@ -23,18 +22,11 @@ export default function RootLayout(props: { children: ReactNode }): ReactNode {
   return (
     <html lang="en" className={cx(GeistSans.variable, GeistMono.variable)}>
       <body className="antialiased flex flex-col items-center justify-center mx-auto mt-2 lg:mt-8 mb-20 lg:mb-40">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <main className="flex-auto min-w-0 mt-2 md:mt-6 flex flex-col px-6 sm:px-4 md:px-0 max-w-[640px] w-full">
-            <Navbar />
-            {props.children}
-            <Footer />
-          </main>
-        </ThemeProvider>
+        <main className="flex-auto min-w-0 mt-2 md:mt-6 flex flex-col px-6 sm:px-4 md:px-0 max-w-[640px] w-full">
+          <Navbar />
+          {props.children}
+          <Footer />
+        </main>
       </body>
       <GoogleAnalytics gaId="G-4BPVNPLM1Q" />
     </html>

diff --git a/apps/website/content/openid-connect-aws-github.mdx b/apps/website/content/openid-connect-aws-github.mdx
@@ -27,7 +27,7 @@ const oidcProvider = new iam.CfnOIDCProvider(this, "GithubOidcProvider", {
 ## Create IAM Role
 
 Next, the created identity provider is used to create an IAM role. 
-The trust policy of the role defines which specific GitHub repository branch is allowed to assume the role (using the pattern **repo:OWNER/REPOSITORY:ref:refs/heads/BRANCH**).
+The trust policy of the role defines which specific GitHub repository branch is allowed to assume the role (using the pattern `repo:OWNER/REPOSITORY:ref:refs/heads/BRANCH`).
 
 ```ts
 const conditions: iam.Conditions = {
@@ -44,7 +44,7 @@ const oidcRole = new iam.Role(this, "GithubOidcRole", {
 });
 ```
 
-Alternatively, an entire GitHub repository can be allowed using a wildcard * in the **conditions**. For this, **StringLike** is required instead of **StringEquals**.
+Alternatively, an entire GitHub repository can be allowed using a wildcard `*` in the `conditions`. For this, `StringLike` is required instead of `StringEquals`.
 
 ```ts
 const conditions: iam.Conditions = {
@@ -63,7 +63,7 @@ For other patterns (e.g. allowing specific GitHub environments), see [Example su
 ## Attach Permissions to IAM Role
 
 To invoke AWS actions, the OIDC role needs to have the correct permissions. 
-In this case the **cdk diff** command will be run, requiring read only permissions.
+In this case the `cdk diff` command will be run, requiring read only permissions.
 Therefore, the OIDC role is granted permission to assume the lookup role (created when the AWS account is [CDK bootstrapped](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html)).
 
 ```ts
@@ -79,7 +79,7 @@ lookupRole.grantAssumeRole(oidcRole);
 ## Assume IAM Role from GitHub Actions Workflow
 
 Next, the IAM role is assumed from a GitHub Actions workflow. 
-This is done with the action [configure-aws-credentials](https://github.com/aws-actions/configure-aws-credentials), resulting in the following **.github/workflows/oidc.yml** file.
+This is done with the action [configure-aws-credentials](https://github.com/aws-actions/configure-aws-credentials), resulting in the following `.github/workflows/oidc.yml` file.
 Note that a dummy AWS account ID is used.
 
 ```yaml
@@ -104,7 +104,7 @@ jobs:
 
 ## Invoke AWS Actions from GitHub Actions Workflow
 
-The last step is to invoke AWS actions from the workflow. In this case, the **cdk diff** command is run by adding the following step.
+The last step is to invoke AWS actions from the workflow. In this case, the `cdk diff` command is run by adding the following step.
 
 ```yaml
 - name: Invoke AWS action
@@ -113,7 +113,7 @@ The last step is to invoke AWS actions from the workflow. In this case, the **cd
     npx cdk diff
 ```
 
-This results in the following **.github/workflows/oidc.yml** file.
+This results in the following `.github/workflows/oidc.yml` file.
 
 ```yaml
 on: push

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -13,14 +13,12 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "geist": "^1.3.1",
+    "highlight.js": "^11.10.0",
     "next": "^14.2.7",
     "next-mdx-remote": "^5.0.0",
-    "next-themes": "^0.3.0",
-    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.3.0",
-    "sugar-high": "^0.7.1",
     "tailwindcss": "^3.4.10",
     "typescript": "~5.6.2"
   },

diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
@@ -1,7 +1,10 @@
 // eslint-disable-next-line no-undef
 module.exports = {
-  darkMode: "class",
-  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./public/**/*.svg"],
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./public/**/*.ico",
+    "./content/**/*.mdx",
+  ],
   theme: {
     extend: {
       fontFamily: {