Improvements! (#558)

* improvements * better copy * suggestions * copy adjustments * very much a react and ssr quirk haha
railwayapp · Sep 19, 2024 · 6ab6580 · 6ab6580
1 parent 4abef6d
commit 6ab6580
Show file tree

Hide file tree

Showing 35 changed files with 1,089 additions and 698 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "bracketSpacing": true,
   "singleQuote": false,
   "trailingComma": "all",
-  "arrowParens": "avoid"
-}
+  "arrowParens": "avoid",
+  "tabWidth": 2
+}
diff --git a/next.config.js b/next.config.js
@@ -1,15 +1,15 @@
 const { withContentlayer } = require("next-contentlayer");
-const redirects = require("./redirects"); 
+const redirects = require("./redirects");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withContentlayer({
   reactStrictMode: true,
   images: {
-    domains: [
-      "user-images.githubusercontent.com",
-      "railway.app",
-      "res.cloudinary.com",
-      "devicons.railway.app",
+    remotePatterns: [
+      { protocol: 'https', hostname: 'user-images.githubusercontent.com' },
+      { protocol: 'https', hostname: 'railway.app' },
+      { protocol: 'https', hostname: 'res.cloudinary.com' },
+      { protocol: 'https', hostname: 'devicons.railway.app' },
     ],
   },
   async redirects() {

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --port ${PORT-3001}",
-    "build": "next build",
+    "build": "contentlayer build && next build",
     "postbuild": "next-sitemap",
     "start": "next start --port ${PORT-3001}",
     "clean": "rm -rf .next",
@@ -23,7 +23,7 @@
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@tailwindcss/typography": "^0.5.9",
     "classnames": "^2.3.2",
-    "contentlayer": "^0.3.0",
+    "contentlayer": "^0.3.4",
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.10.4",
     "fathom-client": "^3.1.0",
@@ -32,7 +32,7 @@
     "meilisearch": "^0.32.3",
     "nanostores": "^0.7.4",
     "next": "^14.2.5",
-    "next-contentlayer": "^0.3.0",
+    "next-contentlayer": "^0.3.4",
     "next-seo": "^5.15.0",
     "next-themes": "^0.2.1",
     "prismjs": "^1.29.0",
@@ -81,4 +81,4 @@
       "preset": "styled-components"
     }
   }
-}
+}
diff --git a/src/components/Anchor.tsx b/src/components/Anchor.tsx
@@ -0,0 +1,30 @@
+import { scrollToID } from "@/utils/scroll";
+import React, { useCallback, useEffect, useState } from "react";
+
+interface AnchorProps {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  rel?: string;
+}
+
+export const Anchor: React.FC<AnchorProps> = ({
+  href,
+  children,
+  className = "",
+  target = "_self",
+  rel = target === "_blank" ? "noopener noreferrer" : undefined,
+}) => {
+  return (
+    <a
+      href={href}
+      className={className}
+      target={target}
+      rel={rel}
+      onClick={scrollToID(href)}
+    >
+      {children}
+    </a>
+  );
+};
diff --git a/src/components/Arrow.tsx b/src/components/Arrow.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import tw from "twin.macro";
+
+interface ArrowProps {
+  isExpanded: boolean;
+}
+
+export const Arrow: React.FC<ArrowProps> = ({ isExpanded }) => {
+  if (isExpanded) {
+    return (
+      <svg
+        css={[tw`h-4 w-4`]}
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fillRule="evenodd"
+          d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      css={[tw`h-4 w-4`]}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M7.293 14.707a1 1 0 001.414 0L13.414 10l-4.707-4.707a1 1 0 00-1.414 1.414L10.586 10l-3.293 3.293a1 1 0 000 1.414z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/CodeBlock/index.tsx b/src/components/CodeBlock/index.tsx
@@ -11,11 +11,11 @@ import go from "react-syntax-highlighter/dist/cjs/languages/prism/go";
 
 import "twin.macro";
 import { useCopy } from "../../hooks/useCopy";
-import { useIsMounted } from "../../hooks/useIsMounted";
 import { darkCodeTheme, lightCodeTheme } from "../../styles/codeThemes";
 import { useTheme } from "../../styles/theme";
 import { Icon } from "../Icon";
 import { normalize } from "./normalize";
+import { useIsMounted } from "@/hooks/useIsMounted";
 
 SyntaxHighlighter.registerLanguage("js", javascript);
 SyntaxHighlighter.registerLanguage("javascript", javascript);
@@ -68,7 +68,6 @@ export const CodeBlock: React.FC<Props> = ({
   className = children.props ? children.props.className : "",
   language,
 }) => {
-  const isMounted = useIsMounted();
   const [copied, copy] = useCopy();
 
   const { colorMode } = useTheme();
@@ -95,13 +94,11 @@ export const CodeBlock: React.FC<Props> = ({
     [children],
   );
 
-  if (!isMounted) {
-    return null;
-  }
+  const isMounted = useIsMounted();
 
   return (
     <div tw="relative" className="group">
-      <SyntaxHighlighter language={lang} style={theme}>
+      <SyntaxHighlighter language={lang} style={theme} key={isMounted ? "mounted" : "unmounted"}>
         {content}
       </SyntaxHighlighter>
       <div tw="absolute top-0 right-0 mr-1 mt-1 text-gray-300 hover:text-gray-400 hidden group-hover:flex">

diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
@@ -1,18 +1,80 @@
-import React, { PropsWithChildren } from "react";
+import React, {
+  PropsWithChildren,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
 import tw, { TwStyle } from "twin.macro";
+import { slugify } from "@/utils/slugify";
+import { Arrow } from "@/components/Arrow";
 
 interface Props {
   title: string;
 }
 
+const openElements = new Set<string>();
+
 export const Collapse: React.FC<PropsWithChildren<Props>> = ({
   children,
   title,
 }) => {
+  const slug = slugify(title);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const updateHash = useCallback((newSlug: string) => {
+    window.history.pushState(
+      null,
+      "",
+      newSlug
+        ? `#${newSlug}`
+        : window.location.pathname + window.location.search,
+    );
+  }, []);
+
+  const handleOpenState = useCallback(
+    (shouldExpand: boolean) => {
+      if (shouldExpand) {
+        openElements.add(slug);
+        updateHash(slug);
+        return;
+      }
+
+      openElements.delete(slug);
+      updateHash(Array.from(openElements).pop() || "");
+    },
+    [slug, updateHash],
+  );
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      setIsExpanded(prevIsOpen => {
+        const newIsExpanded = !prevIsOpen;
+        handleOpenState(newIsExpanded);
+        return newIsExpanded;
+      });
+    },
+    [handleOpenState],
+  );
+
+  useEffect(() => {
+    const currentHash = window.location.hash.slice(1);
+
+    if (currentHash == slug) {
+      setIsExpanded(true);
+      handleOpenState(true);
+    }
+  }, [slug, handleOpenState]);
+
   return (
-    <details css={tw`my-4 mx-2 cursor-pointer`}>
-      <summary css={tw`font-medium`}>{title}</summary>
-      <div css={tw`cursor-default`}>{children}</div>
+    <details css={tw`my-4 mx-2 cursor-pointer`} id={slug} open={isExpanded}>
+      <summary css={tw`font-medium flex items-center`} onClick={handleClick}>
+        <span css={tw`mr-2`}>
+          <Arrow isExpanded={isExpanded} />
+        </span>
+        {title}
+      </summary>
+      <div css={tw`cursor-default pl-6`}>{children}</div>
     </details>
   );
 };
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,91 @@
+import { scrollToID } from "@/utils/scroll";
+import React from "react";
+import { Link as FeatherLinkIcon } from "react-feather";
+import styled from "styled-components";
+
+const StyledLinkIcon = styled.a`
+  text-decoration: none;
+  position: absolute;
+  width: 3rem;
+  height: 2rem;
+  display: none;
+  align-items: center;
+  left: -2rem;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const StyledLinkHeading = styled.a`
+  text-decoration: none;
+  position: absolute;
+  font-weight: bold;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const BaseStyledHeading = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 1.5rem 0 0;
+  margin-bottom: 2rem;
+
+  &:hover {
+    ${StyledLinkIcon} {
+      display: flex;
+    }
+    @media (max-width: 1300px) {
+      ${StyledLinkIcon} {
+        display: none;
+      }
+    }
+  }
+`;
+
+const StyledHeadingH2 = styled(BaseStyledHeading).attrs({ as: "h2" })``;
+const StyledHeadingH3 = styled(BaseStyledHeading).attrs({ as: "h3" })``;
+
+export const H2: React.FC<{ id: string; children: React.ReactNode[] }> = ({
+  id,
+  children,
+}) => {
+  return (
+    <StyledHeadingH2 id={id}>
+      <StyledLinkIcon>
+        <FeatherLinkIcon className="icon" size={20} />
+      </StyledLinkIcon>
+      <StyledLinkHeading onClick={scrollToID(id)} style={{ cursor: "pointer" }}>
+        {children[1]}
+      </StyledLinkHeading>
+    </StyledHeadingH2>
+  );
+};
+
+export const H3: React.FC<{ id: string; children: React.ReactNode[] }> = ({
+  id,
+  children,
+}) => {
+  return (
+    <StyledHeadingH3 id={id}>
+      <StyledLinkIcon>
+        <FeatherLinkIcon className="icon" size={20} />
+      </StyledLinkIcon>
+      <StyledLinkHeading onClick={scrollToID(id)} style={{ cursor: "pointer" }}>
+        {children[1]}
+      </StyledLinkHeading>
+    </StyledHeadingH3>
+  );
+};
+
+export const H4: React.FC<{ id: string; children: React.ReactNode[] }> = ({
+  id,
+  children,
+}) => {
+  return (
+    <h4 id={id} onClick={scrollToID(id, true)} style={{ cursor: "pointer" }}>
+      {children[1]}
+    </h4>
+  );
+};