feat: a heckton of changes

Author: duanwilliam

website/package.json

@@ -12,14 +12,19 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
     "glob": "^7.2.0",
+    "mdast-util-from-markdown": "^1.2.0",
+    "mdast-util-to-markdown": "^1.3.0",
     "next": "12.1.0",
     "next-mdx-remote": "^4.0.0",
     "prism-react-renderer": "^1.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rehype-katex": "^6.0.2",
+    "rehype-stringify": "^9.0.3",
+    "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "remark-parse": "^10.0.0",
+    "remark-rehype": "^10.1.0",
     "remark-stringify": "^10.0.0",
     "sass": "^1.49.7",
     "unified": "^10.1.0"

website/src/components/Collapsible/index.tsx

@@ -150,7 +150,7 @@ type CollapsibleElementType = React.ElementType<
 * with JS
 */
 function getSSRStyle(collapsed: boolean) {
-  if (canUseDOM) {
+  if (!canUseDOM) {
     return undefined;
   }
   return collapsed ? CollapsedStyles : ExpandedStyles;

website/src/components/Sidebar/DesktopSidebar.tsx

@@ -5,15 +5,18 @@
  * LICENSE-docusaurus file in the root directory of the website source tree.
  */
 
+import c from "clsx";
+
 import SidebarItems from "./SidebarItems";
 
+import { markdown } from "@/mdx/markdown.module.scss";
 import s from "./styles.module.scss";
 
 import type { SidebarProps } from ".";
 
 const DesktopSidebar = ({ items, activePath }: SidebarProps): JSX.Element => {
   return (
-    <nav className={s.desktop}>
+    <nav className={c(markdown, s.desktop)}>
       <ul className={s.items}>
         <SidebarItems items={items} activePath={activePath} />
       </ul>

website/src/components/Sidebar/SidebarItem.tsx

@@ -16,6 +16,7 @@ import s from "./styles.module.scss";
 
 import type { SidebarCategory as SidebarCategoryType, SidebarDoc as SidebarDocType, SidebarItem as SidebarItemType } from "@/lib/helpers/sidebar";
 import type { SidebarProps } from ".";
+import { canUseDOM } from "@/utils/environment";
 
 interface SidebarItemProps extends Omit<SidebarProps, 'items'>, React.AnchorHTMLAttributes<HTMLAnchorElement> {
   item: SidebarItemType
@@ -32,18 +33,19 @@ const SidebarCategory = ({ item, activePath, ...props }: SidebarItemProps): JSX.
   const { items, label, href } = item as SidebarCategoryType;
 
   const isActive = isActiveSidebarItem(item, activePath);
-  const { collapsed, toggleCollapsed } = useCollapsible(!isActive);
+  const { collapsed, toggleCollapsed } = useCollapsible(!canUseDOM ? true : !isActive);
 
   return (
     <li>
       <div className={s.category}>
-        {/* given we have sidebar, could instead just make these buttons that collapse the category maybe? */}
+        {/* TODO: given we have sidebar, could instead just make these buttons that collapse the category maybe? */}
         <Link href={href}><a
           className={c(s.link, isActive && s.active)}
+          // TODO: fix SSR error here
           aria-expanded={!collapsed}
-        >
-          {label}
-        </a></Link>
+          // we construct the label from our locally sourced files so we can assume it's safe
+          dangerouslySetInnerHTML={{ __html: label }}
+        /></Link>
         <button
           className={c(s.arrow, collapsed && s.collapsed)}
           aria-label={`toggle the sidebar category '${label}'`}
@@ -71,7 +73,7 @@ const SidebarCategory = ({ item, activePath, ...props }: SidebarItemProps): JSX.
 }
 
 const SidebarDoc = ({ item, activePath, ...props }: SidebarItemProps) => {
-  const { href, title } = item as SidebarDocType;
+  const { href, label } = item as SidebarDocType;
   const isActive = isActiveSidebarItem(item, activePath);
 
   return (
@@ -81,10 +83,10 @@ const SidebarDoc = ({ item, activePath, ...props }: SidebarItemProps) => {
           s.link,
           isActive && s.active,
         )}
+        // we construct the label from our locally sourced files so we can assume it's safe
+        dangerouslySetInnerHTML={{ __html: label }}
         {...props}
-      >
-        {title}
-      </a></Link>
+      /></Link>
     </li>
   )
 }

website/src/components/Sidebar/styles.module.scss

@@ -51,9 +51,9 @@ $arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg
 
 .arrow {
   margin: 0 0 0 0.1rem;
-  cursor: pointer;
   align-items: center;
-
+  cursor: pointer;
+  
   &::before {
     content: '';
     background: $arrow-icon 50% / 2rem 2rem;
@@ -68,10 +68,6 @@ $arrow-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg
   }
 }
 
-.active {
-  color: colors.$red;
-}
-
 /* desktop sidebar */
 
 $desktop-sidebar-width: 300px;

website/src/hooks/useIsBrowser.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+/**
+ * hook for checking whether the current environment is a browser,
+ *  AND triggers a rerender on first render
+ */
+export const useIsBrowser = () => {
+  const [isBrowser, setIsBrowser] = useState(false);
+
+  useEffect(() => {
+    setIsBrowser(true);
+  }, []);
+
+  return isBrowser;
+}

website/src/layouts/Layout/styles.module.scss

@@ -39,9 +39,13 @@ $navbar-height: navbar.$navbar-height;
   }
 
   .contentContainer {
-    padding: 1rem;
+    padding: 2rem;
     margin: 0 auto;
     width: 100%;
     max-width: 1200px - $sidebar-width; // TODO: pick less arbitrary value
+
+    @include mixins.desktop() {
+      padding: 1rem;
+    }
   }
 }

website/src/layouts/pages/CategoryPage/index.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import c from "clsx";
+
+import s from "./styles.module.scss";
+
+import type { CategoryPageProps, Item } from "../types";
+
+const itemEmojis: Record<Item['type'], string> = {
+  doc: '📄️',
+  category: '📁',
+}
+
+const CategoryPage = ({ breadcrumb, items }: CategoryPageProps): JSX.Element => {
+
+  return (
+    <div className={s.grid}>
+      {items.map(({ type, href, title, description }) => (
+        <Link key={href} href={href}>
+          <a className={s.card}>
+            {/* we construct the label from our locally sourced files so we can assume it's safe */}
+            <h3 className={c(s.title, s.truncate)} dangerouslySetInnerHTML={{ __html: `${itemEmojis[type]} ${title}` }} />
+            <p className={c(s.description, s.truncate)} dangerouslySetInnerHTML={{ __html: description ?? '' }} />
+          </a>
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export default CategoryPage;

website/src/layouts/pages/WorkshopIndexPage/styles.module.scss renamed to website/src/layouts/pages/CategoryPage/styles.module.scss

@@ -2,23 +2,37 @@ $gap: 2rem;
 
 .grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(360px , 1fr)); // TODO
   gap: $gap;
 }
 
 .card {
   $border-color: #eeeeee; // TODO: unify colors
   $shadow-color: hsla(0deg 0% 0% / 20%); // TODO: unify colors
 
-  height: 8rem;
   border: 1px solid $border-color;
   border-radius: 1rem;
-  padding: 1rem;
-
+  padding: 2rem;
+  
+  transition: box-shadow 400ms ease 0s;
   box-shadow: 0 2px 4px $shadow-color;
   &:hover {
     box-shadow: 0 4px 8px $shadow-color;
   }
 
-  transition: box-shadow 400ms ease 0s;
+  .truncate {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .title {
+    margin-bottom: 1rem;
+  }
+  
+  .description {
+    flex: 1 1 0;
+    color: #808080; // TODO
+    font-size: 0.8rem;
+  }
 }

website/src/layouts/pages/DocPage/index.tsx

@@ -0,0 +1,18 @@
+import { MDXRemote } from "next-mdx-remote";
+import c from "clsx";
+
+import MDXComponents from "@/mdx/components";
+
+import { markdown, content } from "@/mdx/markdown.module.scss";
+
+import type { DocPageProps } from "../types";
+
+const DocPage = ({ breadcrumb, source }: DocPageProps) => {
+  return (
+    <article className={c(markdown, content)}>
+      <MDXRemote {...source} components={MDXComponents} />
+    </article>
+  );
+}
+
+export default DocPage;