Merge pull request #81 from UnsignedArduino/staging

Contributing guides
UnsignedArduino · Feb 17, 2024 · 5ebbecc · 5ebbecc
2 parents dff3337 + fb27792
commit 5ebbecc
Show file tree

Hide file tree

Showing 24 changed files with 857 additions and 217 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@types/node": "20.11.17",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.19",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "@vercel/postgres": "^0.7.2",
     "bootstrap": "5.3.2",
     "bootstrap-icons": "^1.11.3",
@@ -71,6 +72,7 @@
     "pg": "^8.11.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^10.0.4",
     "rehype-katex": "^7.0.0",
     "rehype-stringify": "^10.0.0",

diff --git a/src/assets/images/help/contributing/extensions/empty-new-extension-issue.png b/src/assets/images/help/contributing/extensions/empty-new-extension-issue.png
diff --git a/...images/help/contributing/extensions/filled-out-new-extension-issue-template.png b/...images/help/contributing/extensions/filled-out-new-extension-issue-template.png
diff --git a/src/assets/images/help/contributing/tools/empty-new-tool-issue.png b/src/assets/images/help/contributing/tools/empty-new-tool-issue.png
diff --git a/src/assets/images/help/contributing/tools/filled-out-new-tool-issue-template.png b/src/assets/images/help/contributing/tools/filled-out-new-tool-issue-template.png
diff --git a/src/components/AwesomeArcadeList/extension.tsx b/src/components/AwesomeArcadeList/extension.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import "tippy.js/dist/tippy.css";
 import { copyTextToClipboard } from "@/scripts/Utils/Clipboard";
 import Link from "next/link";
-import { smoothScrollHash } from "@/components/AwesomeArcadeList/linkableHeader";
+import { smoothScrollHash } from "@/components/Linkable/Header";
 import { AnalyticEvents } from "@/components/Analytics";
 import { useRouter } from "next/router";
 import { TippyJSLibContext } from "@/pages/_app";

diff --git a/src/components/AwesomeArcadeList/tool.tsx b/src/components/AwesomeArcadeList/tool.tsx
@@ -1,7 +1,7 @@
 import { Tool, ToolRef, URLLink } from "@/scripts/Utils/ParseListXML";
 import React from "react";
 import Link from "next/link";
-import { smoothScrollHash } from "@/components/AwesomeArcadeList/linkableHeader";
+import { smoothScrollHash } from "@/components/Linkable/Header";
 import { AnalyticEvents } from "@/components/Analytics";
 import { useRouter } from "next/router";
 import Tippy from "@tippyjs/react";

diff --git a/src/components/Layout/layout.tsx b/src/components/Layout/layout.tsx
@@ -171,47 +171,47 @@ LayoutProps): JSX.Element {
         {/* <meta property="og:image" content="/opengraph.png" /> */}
         {/* <meta name="twitter:image" content="/opengraph.png" /> */}
       </Head>
+      <ThemeProxy>
+        <Navbar
+          appName={appName}
+          appProps={appProps}
+          currentPage={currentPage}
+          extraNavbarHTML={extraNavbarHTML}
+          dontShowSignIn={dontShowSignIn}
+        />
+        <ProfileOffcanvas />
 
-      <Navbar
-        appName={appName}
-        appProps={appProps}
-        currentPage={currentPage}
-        extraNavbarHTML={extraNavbarHTML}
-        dontShowSignIn={dontShowSignIn}
-      />
-      <ProfileOffcanvas />
-
-      {dontShowServicesWarning ? <></> : <TOSBanner />}
-      {/* {dontShowAdblockerWarning ? <></> : <AdblockDetectionBanner />} */}
+        {dontShowServicesWarning ? <></> : <TOSBanner />}
+        {/* {dontShowAdblockerWarning ? <></> : <AdblockDetectionBanner />} */}
 
-      <ErrorBoundary>
-        <main>
-          {(() => {
-            if (putInDIV == undefined || putInDIV) {
-              return (
-                <div className="container-fluid p-2">
+        <ErrorBoundary>
+          <main>
+            {(() => {
+              if (putInDIV == undefined || putInDIV) {
+                return (
+                  <div className="container-fluid p-2">
+                    <>
+                      {breadCrumbsHTML}
+                      {children}
+                    </>
+                  </div>
+                );
+              } else {
+                return (
                   <>
                     {breadCrumbsHTML}
                     {children}
                   </>
-                </div>
-              );
-            } else {
-              return (
-                <>
-                  {breadCrumbsHTML}
-                  {children}
-                </>
-              );
-            }
-          })()}
-        </main>
-      </ErrorBoundary>
+                );
+              }
+            })()}
+          </main>
+        </ErrorBoundary>
 
-      {showFooter == undefined || showFooter ? <Footer /> : <></>}
+        {showFooter == undefined || showFooter ? <Footer /> : <></>}
 
-      <Notifications />
-      <ThemeProxy />
+        <Notifications />
+      </ThemeProxy>
     </ErrorBoundary>
   );
 }

diff --git a/...ents/AwesomeArcadeList/linkableHeader.tsx → src/components/Linkable/Header.tsx b/...ents/AwesomeArcadeList/linkableHeader.tsx → src/components/Linkable/Header.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 // https://reacthustle.com/blog/nextjs-scroll-to-element
 export function smoothScrollHash(
-  e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
 ) {
   e.preventDefault();
   const href = e.currentTarget.href;
@@ -31,10 +31,12 @@ export function smoothScrollToID(id: string) {
 export function LinkableH2({
   props,
   id,
+  url,
   children,
 }: {
   props?: any;
   id: string;
+  url: string;
   children: JSX.Element | string;
 }): JSX.Element {
   const [showLink, setShowLink] = React.useState(false);
@@ -52,10 +54,44 @@ export function LinkableH2({
     >
       {children}
       {showLink ? (
-        <Link className="ms-1" href={`/#${id}`}>
+        <Link className="ms-1" href={`${url}#${id}`}>
           <i className="bi-link-45deg" />
         </Link>
       ) : undefined}
     </h2>
   );
 }
+
+export function LinkableH3({
+  props,
+  id,
+  url,
+  children,
+}: {
+  props?: any;
+  id: string;
+  url: string;
+  children: JSX.Element | string;
+}): JSX.Element {
+  const [showLink, setShowLink] = React.useState(false);
+
+  return (
+    <h3
+      {...props}
+      id={id}
+      onMouseEnter={() => {
+        setShowLink(true);
+      }}
+      onMouseLeave={() => {
+        setShowLink(false);
+      }}
+    >
+      {children}
+      {showLink ? (
+        <Link className="ms-1" href={`${url}#${id}`}>
+          <i className="bi-link-45deg" />
+        </Link>
+      ) : undefined}
+    </h3>
+  );
+}
diff --git a/src/components/Navbar/ThemePicker/index.ts b/src/components/Navbar/ThemePicker/index.ts
@@ -1 +1,5 @@
-export { default, NavbarDropdownThemePicker } from "./themePicker";
+export {
+  default,
+  NavbarDropdownThemePicker,
+  ThemeContext,
+} from "./themePicker";
diff --git a/src/components/Navbar/ThemePicker/themePicker.tsx b/src/components/Navbar/ThemePicker/themePicker.tsx
@@ -11,6 +11,8 @@ declare global {
   }
 }
 
+export const ThemeContext = React.createContext<Theme>("Light");
+
 function ThemeToIcon({ theme }: { theme: ThemeOptions }): JSX.Element {
   switch (theme) {
     default:
@@ -41,7 +43,7 @@ export function NavbarDropdownThemePicker({
   React.useEffect(() => {
     window.document.documentElement.addEventListener(
       "themechange",
-      onThemeChange
+      onThemeChange,
     );
   }, []);
 
@@ -67,7 +69,7 @@ export function NavbarDropdownThemePicker({
               window.document.documentElement.dispatchEvent(
                 new CustomEvent<ThemeOptions>("themechangerequest", {
                   detail: "Light",
-                })
+                }),
               );
             }}
           >
@@ -85,7 +87,7 @@ export function NavbarDropdownThemePicker({
               window.document.documentElement.dispatchEvent(
                 new CustomEvent<ThemeOptions>("themechangerequest", {
                   detail: "Dark",
-                })
+                }),
               );
             }}
           >
@@ -103,7 +105,7 @@ export function NavbarDropdownThemePicker({
               window.document.documentElement.dispatchEvent(
                 new CustomEvent<ThemeOptions>("themechangerequest", {
                   detail: "Auto",
-                })
+                }),
               );
             }}
           >
@@ -115,7 +117,11 @@ export function NavbarDropdownThemePicker({
   );
 }
 
-export function ThemeProxy(): JSX.Element {
+export function ThemeProxy({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
   const [dropdownTheme, setDropdownTheme] =
     React.useState<ThemeOptions>("Auto");
   const [actualTheme, setActualTheme] = React.useState<Theme>("Light");
@@ -127,7 +133,7 @@ export function ThemeProxy(): JSX.Element {
 
   React.useEffect(() => {
     const userTheme = window.localStorage.getItem(
-      "theme"
+      "theme",
     ) as ThemeOptions | null;
     if (userTheme != null) {
       setDropdownTheme(userTheme);
@@ -139,7 +145,7 @@ export function ThemeProxy(): JSX.Element {
 
     window.document.documentElement.addEventListener(
       "themechangerequest",
-      onThemeChangeRequest
+      onThemeChangeRequest,
     );
   }, []);
 
@@ -150,7 +156,7 @@ export function ThemeProxy(): JSX.Element {
           setActualTheme(
             window.matchMedia("(prefers-color-scheme: dark)").matches
               ? "Dark"
-              : "Light"
+              : "Light",
           );
           break;
         }
@@ -162,7 +168,7 @@ export function ThemeProxy(): JSX.Element {
       window.document.documentElement.dispatchEvent(
         new CustomEvent<ThemeOptions>("themechange", {
           detail: dropdownTheme,
-        })
+        }),
       );
       window.localStorage.setItem("theme", dropdownTheme);
     }
@@ -172,13 +178,13 @@ export function ThemeProxy(): JSX.Element {
     if (loadedPreferredTheme) {
       window.document.documentElement.setAttribute(
         "data-bs-theme",
-        actualTheme.toLowerCase()
+        actualTheme.toLowerCase(),
       );
     }
     window.document.documentElement.dispatchEvent(
       new CustomEvent<ThemeOptions>("themeused", {
         detail: actualTheme,
-      })
+      }),
     );
     window.localStorage.setItem("themeUsed", actualTheme);
   }, [actualTheme, loadedPreferredTheme]);
@@ -199,13 +205,17 @@ export function ThemeProxy(): JSX.Element {
 
     window.document.documentElement.addEventListener(
       "themeused",
-      onThemeChange
+      onThemeChange,
     );
 
     setTheme(theme as "dark" | "light");
   }, []);
 
-  return <></>;
+  return (
+    <ThemeContext.Provider value={actualTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
 }
 
 export default ThemeProxy;