From a1dd46561dbd68a107010794162b5ac5d5d7ee3a Mon Sep 17 00:00:00 2001 From: Joshua Potter Date: Sun, 3 Dec 2023 15:54:18 -0700 Subject: [PATCH] Migrate the root layout from Vercel. (#2) --- .githooks/pre-commit | 40 +- assets/css/app.css | 11 +- assets/js/app.js | 13 +- assets/js/react/App.tsx | 28 +- assets/js/react/components/Container.tsx | 16 +- assets/js/react/components/Footer.tsx | 12 +- assets/js/react/components/GridPattern.tsx | 127 + assets/js/react/components/Header.tsx | 57 + assets/js/react/components/Logo.tsx | 10 +- assets/js/react/components/RootLayout.tsx | 139 + assets/js/react/icons/Logomark.tsx | 17 +- assets/js/react/icons/Menu.tsx | 14 + assets/js/react/icons/X.tsx | 9 + assets/js/react/main.tsx | 8 +- assets/js/react/router.tsx | 9 + assets/node-packages.nix | 40 + assets/package-lock.json | 2253 ++++++++++++++++- assets/package.json | 6 +- assets/prettier.config.cjs | 8 + assets/tailwind.config.cjs | 128 + assets/tailwind.config.js | 68 - config/config.exs | 2 +- flake.nix | 1 + .../components/layouts/react.html.heex | 20 + .../components/layouts/root.html.heex | 2 - .../controllers/react_controller.ex | 4 +- .../controllers/react_html/index.html.heex | 1 - .../controllers/react_html/mount.html.heex | 1 + lib/boardwise_web/router.ex | 13 +- 29 files changed, 2892 insertions(+), 165 deletions(-) create mode 100644 assets/js/react/components/GridPattern.tsx create mode 100644 assets/js/react/components/Header.tsx create mode 100644 assets/js/react/components/RootLayout.tsx create mode 100644 assets/js/react/icons/Menu.tsx create mode 100644 assets/js/react/icons/X.tsx create mode 100644 assets/js/react/router.tsx create mode 100644 assets/prettier.config.cjs create mode 100644 assets/tailwind.config.cjs delete mode 100644 assets/tailwind.config.js create mode 100644 lib/boardwise_web/components/layouts/react.html.heex delete mode 100644 lib/boardwise_web/controllers/react_html/index.html.heex create mode 100644 lib/boardwise_web/controllers/react_html/mount.html.heex diff --git a/.githooks/pre-commit b/.githooks/pre-commit index 1ddbda9..c6a7ac6 100755 --- a/.githooks/pre-commit +++ b/.githooks/pre-commit @@ -1,24 +1,32 @@ #!/usr/bin/env bash set -e -mixFiles=$( - git --no-pager diff --name-status --no-color --cached | \ - awk '$1 != "D" && $2 ~ /\.exs?$/ {print $NF}' +STAGED=$( + git --no-pager diff --name-only --no-color --cached --diff-filter=d | + # Remove quotations used to surrounding filenames with special characters. + sed -e "s/^\"//" -e "s/\"$//g" ) -for path in $mixFiles +MIX_TARGETS=() +WEB_TARGETS=() +while IFS= read -r FILENAME do - mix format "$path" - git add "$path" -done + if [[ "$FILENAME" =~ .*\.exs? ]]; then + MIX_TARGETS+=("${FILENAME}") + elif + [[ "$FILENAME" =~ assets/.*\.jsx? ]] || + [[ "$FILENAME" =~ assets/.*\.tsx? ]]; then + WEB_TARGETS+=("${FILENAME#"assets/"}") + fi +done <<< "$STAGED" -webFiles=$( - git --no-pager diff --name-status --no-color --cached | \ - awk '$1 != "D" && $2 ~ /\.jsx?$|\.tsx?$/ {print $NF}' -) +if (( ${#MIX_TARGETS[@]} )); then + mix format "${MIX_TARGETS[@]}" + git add "${MIX_TARGETS[@]}" +fi -for path in $webFiles -do - prettier --write "$path" - git add "$path" -done +if (( ${#WEB_TARGETS[@]} )); then + cd assets + npx prettier --write "${WEB_TARGETS[@]}" + git add "${WEB_TARGETS[@]}" +fi diff --git a/assets/css/app.css b/assets/css/app.css index a3c19bb..fb9c120 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -14,16 +14,19 @@ html { height: 100%; box-sizing: border-box; touch-action: manipulation; - font-feature-settings: 'case' 1, 'rlig' 1, 'calt' 0; + font-feature-settings: + "case" 1, + "rlig" 1, + "calt" 0; } html, body { - font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', - 'Helvetica', sans-serif; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", + "Helvetica", sans-serif; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; - @apply text-white bg-white antialiased; + @apply bg-white text-white antialiased; } body { diff --git a/assets/js/app.js b/assets/js/app.js index 3a9c194..60fabb4 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -22,13 +22,17 @@ import { Socket } from "phoenix" import { LiveSocket } from "phoenix_live_view" import topbar from "../vendor/topbar" -let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") -let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } }) +let csrfToken = document + .querySelector("meta[name='csrf-token']") + .getAttribute("content") +let liveSocket = new LiveSocket("/live", Socket, { + params: { _csrf_token: csrfToken }, +}) // Show progress bar on live navigation and form submits topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }) -window.addEventListener("phx:page-loading-start", _info => topbar.show(300)) -window.addEventListener("phx:page-loading-stop", _info => topbar.hide()) +window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300)) +window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide()) // connect if there are any LiveViews on the page liveSocket.connect() @@ -38,4 +42,3 @@ liveSocket.connect() // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session // >> liveSocket.disableLatencySim() window.liveSocket = liveSocket - diff --git a/assets/js/react/App.tsx b/assets/js/react/App.tsx index c98522a..9453abb 100644 --- a/assets/js/react/App.tsx +++ b/assets/js/react/App.tsx @@ -1,25 +1,13 @@ -import * as React from "react"; -import { RouterProvider, createBrowserRouter } from "react-router-dom"; -import { Footer } from "./components/Footer"; +import * as React from "react" +import { RouterProvider } from "react-router-dom" -const router = createBrowserRouter([ - { - path: "/", - element: