diff --git a/.githooks/commit-msg b/.githooks/commit-msg new file mode 100755 index 0000000..dd14401 --- /dev/null +++ b/.githooks/commit-msg @@ -0,0 +1,17 @@ +#!/bin/sh + +commit_msg_file=$1 +commit_msg=$(cat "$commit_msg_file") + +if echo "$commit_msg" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert): .+"; then + if echo "$commit_msg" | grep -Eq "^(ref|close):\sN25B-.+"; then + echo "🎉 commit message is Valid" + exit 0 + else + echo "❌ Commit message invalid! Must end with [ref/close]: N25B-000" + exit 1 + fi +else + echo "❌ Commit message invalid! Must start with : " + exit 1 +fi \ No newline at end of file diff --git a/.githooks/pre-commit b/.githooks/pre-commit new file mode 100755 index 0000000..ed801d8 --- /dev/null +++ b/.githooks/pre-commit @@ -0,0 +1,18 @@ +#!/bin/sh + +# Get current branch +branch=$(git rev-parse --abbrev-ref HEAD) + +if echo "$branch" | grep -Eq "(dev|main)"; then + echo 0 +fi + +# allowed pattern +if echo "$branch" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert)\/\w+(-\w+){0,5}$"; then + echo "✅ Branch name valid: $branch" + exit 0 +else + echo "❌ Invalid branch name: $branch" + echo "Branch must be named / (must have one to six words separated by a dash)" + exit 1 +fi \ No newline at end of file diff --git a/.githooks/prepare-commit-msg b/.githooks/prepare-commit-msg new file mode 100755 index 0000000..5b706c1 --- /dev/null +++ b/.githooks/prepare-commit-msg @@ -0,0 +1,9 @@ +#!/bin/sh + +echo "#: + +#[optional body] + +#[optional footer(s)] + +#[ref/close]: " > $1 \ No newline at end of file diff --git a/README.md b/README.md index 18905eb..6e97243 100644 --- a/README.md +++ b/README.md @@ -27,3 +27,17 @@ npm run dev ``` It should automatically reload when you save changes. + +## GitHooks + +To activate automatic commits/branch name checks run: + +```shell +git config --local core.hooksPath .githooks +``` + +If your commit fails its either: +branch name != /description-of-branch +commit name != : description of the commit. + : N25B-Num's + diff --git a/src/App.css b/src/App.css index 0c641e7..ab28aa0 100644 --- a/src/App.css +++ b/src/App.css @@ -1,12 +1,3 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - - - .logopepper { height: 8em; padding: 1.5em; @@ -92,61 +83,80 @@ button.movePage:hover{ +header { + position: sticky; + top: 0; + left: 0; + right: 0; + padding: 1rem; + + display: flex; + gap: 1rem; + align-items: center; + justify-content: center; + + backdrop-filter: blur(10px); + z-index: 1; /* Otherwise any translated elements render above the blur?? */ +} + +main { + padding: 1rem 0; +} .flex-row { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .flex-col { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .flex-1 { - flex: 1; + flex: 1; } .flex-wrap { - flex-wrap: wrap; + flex-wrap: wrap; } .align-center { - align-items: center; + align-items: center; } .justify-center { - justify-content: center; + justify-content: center; } .justify-between { - justify-content: space-between; + justify-content: space-between; } .gap-sm { - gap: .25rem; + gap: .25rem; } .gap-md { - gap: .5rem; + gap: .5rem; } .gap-lg { - gap: 1rem; + gap: 1rem; } .padding-sm { - padding: .25rem; + padding: .25rem; } .padding-md { - padding: .5rem; + padding: .5rem; } .padding-lg { - padding: 1rem; + padding: 1rem; } .round-sm { - border-radius: .25rem; + border-radius: .25rem; } .round-md { - border-radius: .5rem; + border-radius: .5rem; } .round-lg { - border-radius: 1rem; + border-radius: 1rem; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 1dd4c9d..22be116 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,10 +3,7 @@ import { useState } from 'react' import './App.css' import TemplatePage from './pages/TemplatePage/Template.tsx' import Home from './pages/Home/Home.tsx' -import ServerComms from './pages/ServerComms/ServerComms.tsx' -import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx' -import Logging from './pages/Logging/Logging.tsx' -import VisProg from "./pages/VisProgPage/VisProg.tsx"; +import Robot from './pages/Robot/Robot.tsx'; function App(){ @@ -22,25 +19,16 @@ function App(){ return (
- {/* Should not use inline styles like this */} - Home - - } /> - } /> - } /> - } /> - } /> - - } - /> - +
+ Home +
+
+ + } /> + } /> + } /> + +
) } diff --git a/src/components/components.tsx b/src/components/components.tsx index d323843..24dd429 100644 --- a/src/components/components.tsx +++ b/src/components/components.tsx @@ -1,14 +1,11 @@ -// src/components/Counter.tsx import { useState } from 'react' -//import style from './Counter.module.css' // optional, if you want a CSS module for reset button -import '../App.css' function Counter() { const [count, setCount] = useState(0) return (
-
-
+

Conversation

Listening {listening ? "🟢" : "🔴"}

- {conversation.map((item) => ( -

( +

{item["content"]}

@@ -80,15 +80,15 @@ export default function ServerComms() {
-
+ ); } diff --git a/src/pages/TemplatePage/Template.module.css b/src/pages/TemplatePage/Template.module.css deleted file mode 100644 index 8526661..0000000 --- a/src/pages/TemplatePage/Template.module.css +++ /dev/null @@ -1,4 +0,0 @@ -button.reset:hover { - background-color: yellow; -} - diff --git a/src/pages/TemplatePage/Template.tsx b/src/pages/TemplatePage/Template.tsx index 1a3feac..dc24adf 100644 --- a/src/pages/TemplatePage/Template.tsx +++ b/src/pages/TemplatePage/Template.tsx @@ -1,23 +1,9 @@ -import { useState } from 'react' -import { Link } from 'react-router' import Counter from '../../components/components.tsx' -//import style from './Template.module.css' -import '../../App.css' - -//this is your css file where you can style your buttons and such -//you can still use css parts from App.css, but also overwrite them function TemplatePage() { - - return ( <> - {/* here you link to the homepage, in App.tsx you can link new pages */} - - ) } diff --git a/vite.config.ts b/vite.config.ts index 8b0f57b..aa7de4f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + css: { + modules: { + localsConvention: "camelCase", + } + }, })