From 43afae5d77a708e074c913a71e324877fd316b44 Mon Sep 17 00:00:00 2001 From: Imbus <> Date: Wed, 6 Mar 2024 11:14:08 +0100 Subject: [PATCH 1/3] Cleaning up CSS, minor refactor into pages Home & Settings, better docs --- frontend/src/App.css | 46 ------------------------------ frontend/src/App.tsx | 31 -------------------- frontend/src/Pages/Home.tsx | 36 ++++++++++++++++++++++++ frontend/src/Pages/Settings.tsx | 17 +++++++++++ frontend/src/index.css | 50 +++++++++++++++++++++++++++++++++ frontend/src/main.tsx | 12 ++++++-- 6 files changed, 113 insertions(+), 79 deletions(-) delete mode 100644 frontend/src/App.css delete mode 100644 frontend/src/App.tsx create mode 100644 frontend/src/Pages/Home.tsx create mode 100644 frontend/src/Pages/Settings.tsx diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index bb6c55a..0000000 --- a/frontend/src/App.css +++ /dev/null @@ -1,46 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -a { - display:inline-block; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx deleted file mode 100644 index 2722ed9..0000000 --- a/frontend/src/App.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import reactLogo from "./assets/react.svg"; -import viteLogo from "/vite.svg"; -import "./App.css"; -import { CountButton } from "./Components/CountButton"; - -function App(): JSX.Element { - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ); -} - -export default App; diff --git a/frontend/src/Pages/Home.tsx b/frontend/src/Pages/Home.tsx new file mode 100644 index 0000000..7ce73a6 --- /dev/null +++ b/frontend/src/Pages/Home.tsx @@ -0,0 +1,36 @@ +import reactLogo from "../assets/react.svg"; +import viteLogo from "/vite.svg"; +import "../index.css"; +import { CountButton } from "../Components/CountButton"; +import { Link } from "react-router-dom"; + +/** + * The home page of the application + * @returns {JSX.Element} The home page + */ +export default function HomePage(): JSX.Element { + return ( + <> +
+ + Vite logo + + + React logo + +
+

Vite + React

+
+ + To Settings +
+

+ Click on the Vite and React logos to learn more +

+ + ); +} diff --git a/frontend/src/Pages/Settings.tsx b/frontend/src/Pages/Settings.tsx new file mode 100644 index 0000000..b5bf81c --- /dev/null +++ b/frontend/src/Pages/Settings.tsx @@ -0,0 +1,17 @@ +import "../index.css"; +import { Link } from "react-router-dom"; + +/** + * The settings page of the application + * @returns {JSX.Element} The settings page + */ +export default function SettingsPage(): JSX.Element { + return ( + <> +

Very Fancy Settings Page

+
+ To Home +
+ + ); +} diff --git a/frontend/src/index.css b/frontend/src/index.css index e7d4bb2..94ce567 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2,6 +2,11 @@ @tailwind components; @tailwind utilities; +/* + * We are using tailwind, so do not add any custom CSS here. + * Most of this is going to get cleaned up eventually. + */ + :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; @@ -70,3 +75,48 @@ button:focus-visible { background-color: #f9f9f9; } } + +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +a { + display: inline-block; +} + +.logo { + transition: filter 0.25s; +} + +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index b980985..cefddf1 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,18 +1,26 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import App from "./App.tsx"; +import SettingsPage from "./Pages/Settings.tsx"; +import HomePage from "./Pages/Home.tsx"; import "./index.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; +// This is where the routes are mounted const router = createBrowserRouter([ { path: "/", - element: , + element: , + }, + { + path: "/settings", + element: , }, ]); +// Semi-hacky way to get the root element const root = document.getElementById("root") ?? document.createElement("div"); +// Render the router at the root ReactDOM.createRoot(root).render( From dcd9879d8d10ce1acd1d1b7bfc34f15ef8843dfa Mon Sep 17 00:00:00 2001 From: Imbus <> Date: Wed, 6 Mar 2024 11:14:57 +0100 Subject: [PATCH 2/3] Demo of components with children and other props --- frontend/src/Components/TaskList.tsx | 36 +++++++++++++++++++++++ frontend/src/Containers/ContainerDemo.tsx | 24 +++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 frontend/src/Components/TaskList.tsx create mode 100644 frontend/src/Containers/ContainerDemo.tsx diff --git a/frontend/src/Components/TaskList.tsx b/frontend/src/Components/TaskList.tsx new file mode 100644 index 0000000..1e9cb76 --- /dev/null +++ b/frontend/src/Components/TaskList.tsx @@ -0,0 +1,36 @@ +/** + * The shape of a task + */ +interface Task { + id: number; + name: string; +} + +/** + * The props for the TaskList component + */ +interface TaskProps { + tasks: Task[]; +} + +/** + * A simple list of tasks + * @param props - The tasks to display + * @returns {JSX.Element} The task list + * @example + * const tasks = [{ id: 1, name: "Do the thing" }]; + * return ; + */ +export function TaskList(props: TaskProps): JSX.Element { + return ( +
+

Task List

+

Tasks go here

+
    + {props.tasks.map((task) => ( +
  • {task.name}
    • + ))} +
+
+ ); +} diff --git a/frontend/src/Containers/ContainerDemo.tsx b/frontend/src/Containers/ContainerDemo.tsx new file mode 100644 index 0000000..ac1cfc6 --- /dev/null +++ b/frontend/src/Containers/ContainerDemo.tsx @@ -0,0 +1,24 @@ +import { ReactNode } from "react"; + +/** The props for the container */ +interface ContainerProps { + children: ReactNode; +} + +/** + * Contains children + * @param props - The children to contain + * @returns {JSX.Element} The container + */ +export function Container(props: ContainerProps): JSX.Element { + return
{props.children}
; +} + +/** + * Contains even more children + * @param props + * @returns {JSX.Element} + */ +export function Container2(props: ContainerProps): JSX.Element { + return {props.children}; +} From 85d080cebb9f9acf2f049d3d9e4845b0b303e78c Mon Sep 17 00:00:00 2001 From: Imbus <> Date: Wed, 6 Mar 2024 11:24:53 +0100 Subject: [PATCH 3/3] Set fiber as direct dependency --- backend/go.mod | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/go.mod b/backend/go.mod index fdbbaf7..88c21c3 100644 --- a/backend/go.mod +++ b/backend/go.mod @@ -11,7 +11,7 @@ require ( // These are all for fiber require ( github.com/andybalholm/brotli v1.0.5 // indirect - github.com/gofiber/fiber/v2 v2.52.1 // indirect + github.com/gofiber/fiber/v2 v2.52.1 github.com/google/uuid v1.5.0 // indirect github.com/klauspost/compress v1.17.0 // indirect github.com/mattn/go-colorable v0.1.13 // indirect