[WIP] New site for the new architecture

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: Lint
+on: [push]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+
+      - name: Deno Lint
+        run: deno lint

.gitignore

@@ -1,4 +1 @@
 .DS_Store
-Thumbs.db
-.aleph/
-dist/

.vscode/extensions.json

@@ -1,7 +1,5 @@
 {
   "recommendations": [
-    "csstools.postcss",
-    "editorconfig.editorconfig",
     "denoland.vscode-deno"
   ]
 }

.vscode/settings.json

@@ -1,28 +1,9 @@
 {
-  "files.eol": "\n",
-  "files.trimTrailingWhitespace": true,
-  "typescript.format.semicolons": "remove",
-  "typescript.preferences.quoteStyle": "single",
-  "[javascript]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features",
-    "editor.formatOnSave": false,
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": true,
-    }
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": true,
-    }
-  },
   "deno.enable": true,
-  "deno.unstable": true,
-  "deno.config": "./tsconfig.json",
-  "deno.importMap": "./import_map.json"
-}
+  "deno.lint": true,
+  "deno.config": "./deno.json",
+  "[typescript][typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno",
+    "editor.formatOnSave": true
+  }
+}

components/Button.tsx

@@ -1,4 +1,9 @@
-import React, { CSSProperties, PropsWithChildren, useMemo, useState } from 'react'
+import React, {
+  CSSProperties,
+  PropsWithChildren,
+  useMemo,
+  useState,
+} from "react";
 
 export default function Button({
   className,
@@ -13,68 +18,68 @@ export default function Button({
   icon,
   iconPosition,
   onClick,
-  children
+  children,
 }: PropsWithChildren<{
-  className?: string,
-  width?: number | string,
-  height?: number,
-  color?: string,
-  compact?: boolean,
-  strong?: boolean,
-  disabled?: boolean,
-  activated?: boolean,
-  round?: boolean,
-  icon?: React.ReactNode,
-  iconPosition?: { top?: number | string, left?: number | string },
-  onClick?(e: React.MouseEvent): void
+  className?: string;
+  width?: number | string;
+  height?: number;
+  color?: string;
+  compact?: boolean;
+  strong?: boolean;
+  disabled?: boolean;
+  activated?: boolean;
+  round?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: { top?: number | string; left?: number | string };
+  onClick?(e: React.MouseEvent): void;
 }>) {
-  const [hover, setHover] = useState(false)
+  const [hover, setHover] = useState(false);
   const style = useMemo(() => {
     const css: CSSProperties = {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
       height,
-      border: '1px solid #000',
-      borderRadius: round === false ? '5px' : height / 2 + 'px',
+      border: "1px solid #000",
+      borderRadius: round === false ? "5px" : height / 2 + "px",
       lineHeight: 1,
       fontSize: 16,
       fontWeight: 500,
-      padding: '0 36px',
-      transition: 'all 0.21s ease-in-out',
-      cursor: 'pointer'
-    }
+      padding: "0 36px",
+      transition: "all 0.21s ease-in-out",
+      cursor: "pointer",
+    };
     if (color) {
-      css.color = color
-      css.borderColor = color
+      css.color = color;
+      css.borderColor = color;
     }
     if (hover || activated) {
-      if (color === 'white') {
-        css.color = "black"
-        css.background = "white"
+      if (color === "white") {
+        css.color = "black";
+        css.background = "white";
       } else {
-        css.color = "white"
-        css.background = "black"
+        css.color = "white";
+        css.background = "black";
       }
     }
     if (compact) {
-      css.padding = '0 16px'
+      css.padding = "0 16px";
     }
     if (strong) {
-      css.borderWidth = '2px'
-      css.fontWeight = 600
+      css.borderWidth = "2px";
+      css.fontWeight = 600;
     }
     if (width) {
-      css.width = width
-      css.padding = 0
+      css.width = width;
+      css.padding = 0;
     }
     if (disabled) {
-      css.color = '#999'
-      css.borderColor = '#ccc'
-      css.pointerEvents = 'none'
+      css.color = "#999";
+      css.borderColor = "#ccc";
+      css.pointerEvents = "none";
     }
-    return css
-  }, [height, color, hover, activated])
+    return css;
+  }, [height, color, hover, activated, strong]);
 
   return (
     <button
@@ -84,8 +89,8 @@ export default function Button({
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
-      {icon && (<span style={iconPosition} className="icon">{icon}</span>)}
+      {icon && <span style={iconPosition} className="icon">{icon}</span>}
       {children}
     </button>
-  )
+  );
 }