.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 <type>: <description>"
+  exit 1
+fi

.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 <type/>
+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 <type>/<description-of-branch> (must have one to six words separated by a dash)"
+  exit 1
+fi

.githooks/prepare-commit-msg

@@ -0,0 +1,9 @@
+#!/bin/sh
+
+echo "#<type>: <description>
+
+#[optional body]
+
+#[optional footer(s)]
+
+#[ref/close]: <issue identifier>" > $1

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 != <type>/description-of-branch
+commit name !=  <type>: description of the commit.
+                <ref>: N25B-Num's
+

src/App.css

@@ -1,24 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.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);
-}
-
-
 .logopepper {
   height: 8em;
   padding: 1.5em;
@@ -32,27 +11,21 @@
   filter: drop-shadow(0 0 10em #4eff14aa);
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-
 @keyframes logo-pepper-spin {
-  from {
-    transform: rotate(-20deg);
+  0% {
+    transform: rotate(0);
   }
-  to {
+  25% {
     transform: rotate(20deg);
   }
+  75% {
+    transform: rotate(-20deg);
+  }
+  100% {
+    transform: rotate(0);
+  }
 }
 
-
-
 @keyframes logo-pepper-scale {
   from {
     transform: scale(1,1);
@@ -63,19 +36,13 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
+  .logopepper:hover {
+    animation: logo-pepper-spin infinite 1s linear;
   }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .logopepper {
-    animation: logo-pepper-spin infinite 1s linear alternate;
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .logoPepperScaling {
+  .logoPepperScaling:hover {
     animation: logo-pepper-scale infinite 1s linear alternate;
   }
 }
@@ -113,3 +80,83 @@ button.movePage.right{
 button.movePage:hover{
   background-color: rgb(0, 176, 176);
 }
+
+
+
+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;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.align-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-sm {
+  gap: .25rem;
+}
+.gap-md {
+  gap: .5rem;
+}
+.gap-lg {
+  gap: 1rem;
+}
+
+.padding-sm {
+  padding: .25rem;
+}
+.padding-md {
+  padding: .5rem;
+}
+.padding-lg {
+  padding: 1rem;
+}
+
+.round-sm {
+  border-radius: .25rem;
+}
+.round-md {
+  border-radius: .5rem;
+}
+.round-lg {
+  border-radius: 1rem;
+}

src/App.tsx

@@ -1,17 +1,21 @@
-import { Routes, Route } from 'react-router'
+import { Routes, Route, Link } from 'react-router'
 import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
-import ServerComms from './pages/ServerComms/ServerComms.tsx'
 
 function App(){
-  
   return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/Template" element={<TemplatePage />} />
-      <Route path="/ServerComms" element = {<ServerComms />} />
-    </Routes>
+    <div>
+      <header>
+        <Link to={"/"}>Home</Link>
+      </header>
+      <main className={"flex-col align-center"}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/template" element={<TemplatePage />} />
+        </Routes>
+      </main>
+    </div>
   )
 }
 

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 (
     <div className="card">
-      <button onClick={() => setCount((count) => count + 3)}>
+      <button onClick={() => setCount((count) => count + 1)}>
         count is {count}
       </button>
       <button className='reset' onClick={() => setCount(0)}>

src/index.css

@@ -13,6 +13,16 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+html, body {
+  margin: 0;
+  padding: 0;
+
+  height: 100dvh;
+  width: 100dvw;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -22,14 +32,6 @@ a:hover {
   color: #535bf2;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
 h1 {
   font-size: 3.2em;
   line-height: 1.1;

src/pages/Home/Home.module.css

@@ -1,6 +1,24 @@
 .read_the_docs {
   color: #888;
 }
+
 .card {
   padding: 2em;
 }
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+}
+
+.gap-xl {
+  gap: 2rem;
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}

src/pages/Home/Home.tsx

@@ -1,48 +1,19 @@
-//import { useState } from 'react'
 import { Link } from 'react-router'
-import reactLogo from '../../assets/react.svg'
-import viteLogo from '../../assets/vite.svg'
 import pepperLogo from '../../assets/pepper_transp2_small.svg'
-import style from './Home.module.css'
-import Counter from '../../components/components.tsx'
+import styles from './Home.module.css'
 
 function Home() {
-  
-
-
   return (
-    <>
-      <div>
-        <div className = "logoPepperScaling">
-          <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
-            <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
-          </a>
-        </div>
-        
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+    <div className={`flex-col ${styles.gapXl}`}>
+      <div className="logoPepperScaling">
+        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+          <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
         </a>
       </div>
-      <h1>Vite + React</h1>
-      
-        <Counter />
-        <Link to = '/ServerComms'>
-            <button className='movePage right' onClick={() : void => {}}>
-            Page Cool --{'>'}
-            </button>
-        </Link>
-        
-        <p>
-            Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      
-      <p className={style.read_the_docs}>
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+      <div className={styles.links}>
+        <Link to={"/template"}>Template →</Link>
+      </div>
+    </div>
   )
 }
 

src/pages/TemplatePage/Template.module.css

@@ -1,4 +0,0 @@
-button.reset:hover {
-  background-color: yellow;
-}
-

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 (
     <>
       <Counter />
-      <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
-        <button className= 'movePage left' onClick={() :void => {}}>
-          Page {'<'}-- Go Home
-        </button>
-      </Link>
     </>
   )
 }

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",
+    }
+  },
 })