components page, use github api for posts

app/(subpages)/blog/[slug]/opengraph-image.tsx

@@ -4,10 +4,8 @@ export const size = { width: 1200, height: 600 }
 // TODO: update to support alt once nextjs has a solution for params
 export const alt = ''
 export const contentType = 'image/png'
+export const runtime = 'edge'
 
-export const config = {
-  runtime: 'edge',
-}
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default async function ({

app/(subpages)/blog/layout.tsx

@@ -19,5 +19,3 @@ export default function BlogLayout({
     </Outline>
   )
 }
-
-export const config = { runtime: 'experimental-edge' }

app/(subpages)/components/page.module.css

@@ -0,0 +1,17 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+
+    section {
+        margin-bottom: var(--gap);
+    }
+
+    ul {
+        padding: 0;
+    }
+
+    h2 {
+        margin: 0;
+    }
+}

app/(subpages)/components/page.tsx

@@ -0,0 +1,110 @@
+import Badge from '@components/badge'
+import Button from '@components/button'
+import { GitHub } from '@components/icons'
+import Link from '@components/link'
+import styles from './page.module.css'
+import * as FileTree from '@components/file-tree'
+import { Entry } from '@components/entry'
+import BlockEntry from '@components/entry/block'
+import Tooltip from '@components/tooltip'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Components',
+  description: 'A collection of components on this website.',
+  robots: {
+    index: false,
+  },
+}
+
+export default function ComponentsPage() {
+  return (
+    <section className={styles.wrapper}>
+      <h1>Components</h1>
+      <p>
+        This page is a collection of components on this website. I use many of
+        them in my other projects as well. Feel free to take what you need.
+      </p>
+      <ExampleWrapper>
+        <h2>Button</h2>
+        <Button width={100}>Click me</Button>
+        <Button loading width={100}>
+          Click me
+        </Button>
+        <Button disabled width={100}>
+          Click me
+        </Button>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Icon</h2>
+        <p>
+          {' '}
+          SVG Icons largely from{' '}
+          <Link href="https://feathericons.com/">Feather Icons</Link>{' '}
+        </p>
+        <GitHub /> <GitHub size={40} /> <GitHub strokeWidth={3} />
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Link</h2>
+
+        <Link href="">A Link</Link>
+        <Link href="" underline={false}>
+          No underline
+        </Link>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Badge</h2>
+        <Badge width={75}>A badge</Badge>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>File tree</h2>
+        <FileTree.FileTree>
+          <FileTree.Folder name="src" open>
+            <FileTree.File name="page.tsx" type="page" />
+            <FileTree.File name="layout.tsx" type="layout" />
+            <FileTree.Folder name="components" open>
+              <FileTree.File name="button.tsx" type="component" note="A note" />
+              <FileTree.File name="icon.tsx" type="component" />
+            </FileTree.Folder>
+          </FileTree.Folder>
+        </FileTree.FileTree>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Entries</h2>
+        <h3>Regular</h3>
+        <ul style={{ listStyle: 'none', margin: 0 }}>
+          <Entry
+            description="Description"
+            role="Role"
+            title="Title"
+            href=""
+            years={['2023']}
+            showYears
+          />
+        </ul>
+        <h3>Block</h3>
+        <ul style={{ listStyle: 'none', margin: 0 }}>
+          <BlockEntry
+            title="Title"
+            href=""
+            description="Description"
+            date={new Date()}
+            views={0}
+          />
+        </ul>
+        <h4>Skeleton</h4>
+        <ul style={{ listStyle: 'none', margin: 0 }}>
+          <BlockEntry skeleton />
+        </ul>
+      </ExampleWrapper>
+      <ExampleWrapper>
+        <h2>Tooltip</h2>
+        <Tooltip text="This is a tooltip">Hover me</Tooltip>
+      </ExampleWrapper>
+    </section>
+  )
+}
+
+const ExampleWrapper = ({ children }: { children: React.ReactNode }) => (
+  <section className={styles.wrapper}>{children}</section>
+)

app/components/badge/index.tsx

@@ -6,11 +6,12 @@ type Props = React.DetailedHTMLProps<
   HTMLDivElement
 > & {
   children: ReactNode
+  width?: string | number
 }
 
-const Badge = ({ children, className }: Props) => {
+const Badge = ({ children, className, width }: Props) => {
   return (
-    <div className={`${styles.badge} ${className ? className : ''}`}>
+    <div className={`${styles.badge} ${className ? className : ''}`} style={{ width }}>
       {children}
     </div>
   )

app/components/button/index.tsx

@@ -1,40 +1,87 @@
-import styles from './button.module.css'
-import { forwardRef, Ref } from 'react'
+import styles from "./button.module.css"
+import { forwardRef } from "react"
+import clsx from "clsx"
+import { Spinner } from "@components/spinner"
 
-type Props = React.HTMLProps<HTMLButtonElement> & {
-  onClick?: () => void
-  children: React.ReactNode
-  disabled?: boolean
-  width?: number
-  height?: number
+type Props = React.DetailedHTMLProps<
+	React.ButtonHTMLAttributes<HTMLButtonElement>,
+	HTMLButtonElement
+> & {
+	children?: React.ReactNode
+	buttonType?: "primary" | "secondary"
+	className?: string
+	// eslint-disable-next-line no-unused-vars
+	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+	iconRight?: React.ReactNode
+	iconLeft?: React.ReactNode
+	height?: string | number
+	width?: string | number
+	padding?: string | number
+	margin?: string | number
+	loading?: boolean
 }
 
 // eslint-disable-next-line react/display-name
-const Button = forwardRef(
-  (
-    { onClick, children, disabled, width, height, ...props }: Props,
-    ref: Ref<HTMLButtonElement>
-  ) => {
-    return (
-      <button
-        onClick={onClick}
-        className={styles.button}
-        disabled={disabled}
-        ref={ref}
-        style={{
-          width: width ? `${width}px` : 'auto',
-          height: height ? `${height}px` : 'auto',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        {...props}
-        type={(props.type as any) || 'button'}
-      >
-        {children}
-      </button>
-    )
-  }
+const Button = forwardRef<HTMLButtonElement, Props>(
+	(
+		{
+			children,
+			onClick,
+			className,
+			buttonType = "secondary",
+			disabled = false,
+			iconRight,
+			iconLeft,
+			height = 40,
+			width,
+			padding = 10,
+			margin,
+			loading,
+			style,
+			...props
+		},
+		ref
+	) => {
+		return (
+			<button
+				ref={ref}
+				className={clsx(styles.button, className, {
+					[styles.primary]: buttonType === "primary",
+					[styles.secondary]: buttonType === "secondary"
+				})}
+				disabled={disabled || loading}
+				onClick={onClick}
+				style={{ height, width, margin, padding, ...style }}
+				{...props}
+			>
+				{children && iconLeft && (
+					<span className={clsx(styles.icon, styles.iconLeft)}>{iconLeft}</span>
+				)}
+				{!loading &&
+					(children ? (
+						children
+					) : (
+						<span className={styles.icon}>{iconLeft || iconRight}</span>
+					))}
+				{loading && (
+					<span
+						style={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center"
+						}}
+					>
+						<Spinner />
+					</span>
+				)}
+				{children && iconRight && (
+					<span className={clsx(styles.icon, styles.iconRight)}>
+						{iconRight}
+					</span>
+				)}
+			</button>
+		)
+	}
 )
 
 export default Button

app/components/entry/block.tsx

@@ -26,7 +26,7 @@ const BlockEntry = (props: Props) => {
         href={href}
         title={description || title}
         className={styles.link}
-        underline
+        underline={false}
         scroll={true}
       >
         {type && <div className={styles.type}>{type}</div>}

app/components/file-tree/file-tree.module.css

@@ -32,6 +32,8 @@
 
 .folder {
   cursor: pointer;
+  /* To avoid highlighting on double clicking */
+  user-select: none;
 }
 
 .folder-children {

app/components/ie-or-css/index.tsx

@@ -23,7 +23,7 @@ export type IEQuizProps = {
 
 export const UselessButton = ({ text }: { text: string }) => (
   <Button
-    style={{ display: 'inline-block', width: '100px', height: 36, margin: 2 }}
+    style={{ display: 'inline-block' }}
     onClick={() => alert("That's the idea!")}
   >
     {text}
@@ -94,7 +94,9 @@ const IeOrCss = ({ questions }: IEQuizProps) => {
       <p>Good luck!</p>
       <ul className={styles.list}>
         {questionsWithVotes.map((question, index) => (
-          <Question question={question} key={index} />
+          <Question question={question} key={index}>
+            {question.question}
+          </Question>
         ))}
       </ul>
     </>

app/components/ie-or-css/question/index.tsx

@@ -9,7 +9,13 @@ import FadeIn from '@components/fade-in'
 
 const getLocalStorageKeyString = (id: string) => `question-${id}`
 
-const Question = ({ question }: { question: QuestionWithVotes }) => {
+const Question = ({
+  question,
+  children,
+}: {
+  question: QuestionWithVotes
+  children: string
+}) => {
   // const { id, question: questionText, isCSS } = question
   const { id, isCSS } = question
 
@@ -70,20 +76,7 @@ const Question = ({ question }: { question: QuestionWithVotes }) => {
   return (
     <li className={styles.wrapper}>
       <pre className={styles.pre}>
-        {/* TODO: convert to MDX */}
-        {/* <Highlight {...defaultProps} code={questionText} language={'css'}>
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
-            <code className={className} style={{ ...style }}>
-              {tokens.map((line, i) => (
-                <div key={i} {...getLineProps({ line, key: i })}>
-                  {line.map((token, key) => (
-                    <span key={key} {...getTokenProps({ token, key })} />
-                  ))}
-                </div>
-              ))}
-            </code>
-          )}
-        </Highlight> */}
+        <code>{children}</code>
       </pre>
       <div
         className={styles.buttons}
@@ -110,7 +103,6 @@ const Question = ({ question }: { question: QuestionWithVotes }) => {
       </div>
       {voted && (
         <FadeIn>
-          {/* line showing vote margins */}
           <div className={styles.line}>
             <div
               className={styles.left}