add: adding new theme for the codeblock, searchbar, and general body

Author: mallory-scotton

docs/tests.md

@@ -0,0 +1,35 @@
+---
+sidebar_position: 1
+---
+
+# CodeBlock Tests
+
+```cpp showLineNumbers
+#include <iostream>
+
+int main()
+{
+    std::cout << "Hello, World!" << std::endl;
+    return 0;
+}
+```
+
+With title
+
+```cpp title="Matrix.hpp" showLineNumbers
+UCLASS()
+
+class EXAMPLEPROJECT_API AExampleActor : public AActor
+{
+    GENERATED_BODY()
+
+public:
+    // Sets default values for this actor's properties
+    AExampleActor();
+
+protected:
+
+    // Called when the game starts or when spawned
+    virtual void BeginPlay() override;
+};
+```

docusaurus.config.ts

@@ -1,4 +1,4 @@
-import { themes as prismThemes } from 'prism-react-renderer';
+import unrealTheme from './src/theme/prism-unreal-theme';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
@@ -74,12 +74,13 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     colorMode: {
-      respectPrefersColorScheme: true
+      defaultMode: 'dark',
+      disableSwitch: true
     },
     navbar: {
-      title: 'My Site',
+      title: 'Graphical Playground',
       logo: {
-        alt: 'My Site Logo',
+        alt: 'GP Logo',
         src: 'img/logo.svg'
       },
       items: [
@@ -91,9 +92,13 @@ const config: Config = {
         },
         { to: '/blog', label: 'Blog', position: 'left' },
         {
-          href: 'https://github.com/facebook/docusaurus',
+          href: 'https://github.com/GraphicalPlayground',
           label: 'GitHub',
           position: 'right'
+        },
+        {
+          type: 'localeDropdown',
+          position: 'right'
         }
       ]
     },
@@ -111,20 +116,7 @@ const config: Config = {
         },
         {
           title: 'Community',
-          items: [
-            {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus'
-            },
-            {
-              label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus'
-            },
-            {
-              label: 'X',
-              href: 'https://x.com/docusaurus'
-            }
-          ]
+          items: []
         },
         {
           title: 'More',
@@ -135,16 +127,31 @@ const config: Config = {
             },
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus'
+              href: 'https://github.com/GraphicalPlayground'
             }
           ]
         }
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`
+      copyright: `Copyright © ${new Date().getFullYear()} Graphical Playground, Inc.`
     },
     prism: {
-      theme: prismThemes.github,
-      darkTheme: prismThemes.dracula
+      theme: unrealTheme,
+      darkTheme: unrealTheme
+    },
+    algolia: {
+      // The application ID provided by Algolia
+      appId: 'F2NV537VZ4',
+
+      // Public API key: it is safe to commit it
+      apiKey: '7c4933067d38c508bbff2b4e26c78fee',
+
+      indexName: 'Graphical Playground Documentation',
+
+      // Optional: see doc section below
+      contextualSearch: true,
+
+      // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)
+      insights: false
     }
   } satisfies Preset.ThemeConfig
 };

package-lock.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
+    "@docusaurus/theme-search-algolia": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",

package.json

@@ -4,6 +4,57 @@
  * work well for content-centric websites.
  */
 
+/* EDS Iconfont */
+@font-face {
+  font-family: 'EDS Iconfont';
+  src: url('/fonts/eds-iconfont.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Inter Family */
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Tight';
+  src: url('/fonts/inter-tight.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Recursive Mono */
+@font-face {
+  font-family: 'Recursive Mono';
+  src: url('/fonts/recursive-mono-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e8555;
@@ -13,8 +64,12 @@
   --ifm-color-primary-light: #33925d;
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-code-font-size: 0.875em;
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.08);
+  --ifm-font-family-monospace: 'Recursive Mono', monospace;
+  --ifm-pre-padding: 1rem;
+  --ifm-code-border-radius: 16px;
+  --ifm-background-color: #101014;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -26,5 +81,87 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.12);
+  --ifm-background-color: #101014;
+}
+
+/* Page background */
+body {
+  background-color: #101014;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.65;
+  color: #ffffff;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Code block specific styles */
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+  color: #abb2bf;
+  background: #282c34;
+  padding: 1rem;
+  border-radius: 16px;
+  font-family: 'Recursive Mono', monospace;
+}
+
+pre, code, kbd, samp {
+  font-family: 'Recursive Mono', monospace;
+  font-size: 1em;
+}
+
+code {
+  font-size: .875em;
+  word-wrap: break-word;
+}
+
+/* Inline code */
+:not(pre) > code {
+  background-color: rgba(40, 44, 52, 0.8);
+  color: #abb2bf;
+  border: 0.5px solid rgba(255, 255, 255, 0.08);
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+  :root {
+    --ifm-code-border-radius: 12px;
+    --ifm-pre-padding: 0.75rem;
+  }
+  
+  pre {
+    border-radius: 12px;
+    padding: 0.75rem;
+    font-size: 0.8125em;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  pre {
+    border-radius: 8px;
+    padding: 0.5rem;
+    font-size: 0.75em;
+  }
+}
+
+mark, .mark, :not(.prism-code) > code:not(.prism-code) {
+  border-radius: 6px;
+}
+
+mark, :not(.prism-code) > code:not(.prism-code), .mark {
+  border: .0625rem solid #404044;
+  background: #202024;
+  padding: .125rem .4375rem;
+  color: #fff;
 }

src/css/custom.css

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import type { Props } from '@theme/CodeBlock/Buttons/Button';
+
+export default function CodeBlockButton({ className, ...props }: Props): ReactNode {
+  return <button type='button' {...props} className={clsx('clean-btn', className)} />;
+}

src/theme/CodeBlock/Buttons/Button/index.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useState, useRef, useEffect, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { translate } from '@docusaurus/Translate';
+import { useCodeBlockContext } from '@docusaurus/theme-common/internal';
+import Button from '@theme/CodeBlock/Buttons/Button';
+import type { Props } from '@theme/CodeBlock/Buttons/CopyButton';
+import IconCopy from '@theme/Icon/Copy';
+import IconSuccess from '@theme/Icon/Success';
+
+import styles from './styles.module.css';
+
+function title() {
+  return translate({
+    id: 'theme.CodeBlock.copy',
+    message: 'Copy',
+    description: 'The copy button label on code blocks'
+  });
+}
+
+function ariaLabel(isCopied: boolean) {
+  return isCopied
+    ? translate({
+        id: 'theme.CodeBlock.copied',
+        message: 'Copied',
+        description: 'The copied button label on code blocks'
+      })
+    : translate({
+        id: 'theme.CodeBlock.copyButtonAriaLabel',
+        message: 'Copy code to clipboard',
+        description: 'The ARIA label for copy code blocks button'
+      });
+}
+
+function useCopyButton() {
+  const {
+    metadata: { code }
+  } = useCodeBlockContext();
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef<number | undefined>(undefined);
+
+  const copyCode = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setIsCopied(true);
+      copyTimeout.current = window.setTimeout(() => {
+        setIsCopied(false);
+      }, 1000);
+    });
+  }, [code]);
+
+  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
+
+  return { copyCode, isCopied };
+}
+
+export default function CopyButton({ className }: Props): ReactNode {
+  const { copyCode, isCopied } = useCopyButton();
+
+  return (
+    <Button
+      aria-label={ariaLabel(isCopied)}
+      title={title()}
+      className={clsx(className, styles.copyButton, isCopied && styles.copyButtonCopied)}
+      onClick={copyCode}
+    >
+      <span className={styles.copyButtonIcons} aria-hidden='true'>
+        <IconCopy className={styles.copyButtonIcon} />
+        <IconSuccess className={styles.copyButtonSuccessIcon} />
+      </span>
+    </Button>
+  );
+}