stuff

.devcontainer/devcontainer.json

@@ -0,0 +1,6 @@
+{
+  "name": "Euph Website",
+  "image": "git.euph.dev/development_tools/symfony:latest",
+  "forwardPorts": [8080],
+  workspaceMount: ""
+}

.gitea/workflows/qs.yml

@@ -48,3 +48,21 @@ jobs:
       - name: "PHP Stan"
         working-directory: app
         run: "vendor/bin/phpstan analyze"
+
+  qs_mixed:
+    name: "QS Mixed"
+    runs-on: "ubuntu-latest"
+    container:
+      image: "git.euph.dev/actions/runner-php-8.3:latest"
+    steps:
+      - name: "Checkout"
+        uses: "https://git.euph.dev/actions/checkout@v3"
+      - name: "Install Dependencies"
+        working-directory: app
+        run: |
+          parallel --halt soon,fail=1 ::: \
+          "composer check-platform-reqs && composer install --no-scripts --audit" \
+          "npm install --no-fund"
+      - name: "Lint"
+        working-directory: app
+        run: "node node_modules/eslint/bin/eslint.js frontend"

app/Justfile

@@ -1,8 +1,8 @@
 _default:
     @bin/just/choose.sh {{ source_file() }} choose
 
-mod backend 'app/backend/mod.just'
+mod backend
-mod frontend 'app/frontend/mod.just'
+mod frontend
 
 alias i := install
 alias start := up
@@ -69,7 +69,7 @@ lint linter="":
         just frontend::lint all && just backend::lint;;
       *PHP*) just backend::lint ;;
       *TS*) just frontend::lint TS ;;
-      *SCSS*) just frontend::lint SCSS ;;
+      *SCSS*) just frontend::lint all SCSS ;;
       *Twig*) just frontend::lint TWIG ;;
     esac
 

app/assets/icons/branding/euphcloud.svg

@@ -1,13 +0,0 @@
-<svg
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        xml:space="preserve"
-        width="32mm"
-        height="32mm"
-        viewBox="0 0 32 32"
->
-    <path
-            d="M16 0A16 16 0 0 0 0 16a16 16 0 0 0 16 16 16 16 0 0 0 16-16A16 16 0 0 0 16 0zm-.555 1.034 3.304 3.302a7.95 7.95 0 0 1 0 11.243l-2.97 2.971a4.364 4.364 0 0 0 0 6.174l7.852-7.852a8.532 8.532 0 0 0 1.868-4.747l.079-1.093c2.55 2.82 1.891 7.774.267 9.398l-10.47 10.537L6.5 22.09a8.566 8.566 0 0 1 0-12.114l8.945-8.943zm.03 5.936-6.23 6.226a3.512 3.512 0 0 0 0 4.966l.508.507 6.07-6.07a3.732 3.732 0 0 0 0-5.28l-.348-.35z"
-            fill="currentColor"
-    />
-</svg>

app/backend/TestController.php

@@ -27,7 +27,7 @@ final readonly class TestController
     {
         return new Response(
             $this->twig->render(
-                'sites/index.html.twig'
+                'index.html.twig'
             )
         );
     }

app/backend/mod.just

@@ -1,19 +1,17 @@
 __default:
-    @../../bin/just/choose.sh {{ source_file() }} choose
+    @../bin/just/choose.sh {{ source_file() }} choose
 
 # Checks whether the requriements are met
 [group('main')]
 check:
     #!/bin/bash
-    source ../../bin/just/colors.sh
+    source ../bin/just/colors.sh
-    source ../../bin/just/check.sh
+    source ../bin/just/check.sh
     printf "${BLUE_BG}${BLACK_FG} Checking Backend Requirements ${CLEAR}\n"
     cd ..
 
     check_cmd "php" "Php"
     check_cmd "composer" "Composer"
-    check_cmd "symfony" "Symfony cli"
-
     current_composer_version=$(composer --version 2>/dev/null  | awk '{print $3}' | cut -d '.' -f 1)
     if [ "${current_composer_version}" = "2" ]; then
       printf >&2 "${GREEN_FG}✔ Composer${BLUE_FG} Version ${GREEN_FG}${current_composer_version}${BLUE_FG} is ${GREEN_FG}installed${BLUE_FG}.\n"
@@ -21,6 +19,8 @@ check:
       printf >&2 "${RED_FG}✘ Wrong Composer Version${YELLOW_FG} is installed!\n  Version ${RED_FG}2${YELLOW_FG} is ${RED_FG}required${YELLOW_FG}.\n"
       error = 1
     fi
+
+    check_cmd "symfony" "Symfony cli"
     required_php_version=$(cat .php-version)
     current_php_version=$(symfony php -r "echo PHP_MAJOR_VERSION.'.'.PHP_MINOR_VERSION;")
     if [ "${current_php_version}" = "${required_php_version}" ]; then
@@ -34,12 +34,7 @@ check:
     check "[ $(php -m | grep -c pdo_mysql)  -eq 1 ]" "Php Mysql PDO"
 
     check_cmd "docker" "Docker"
-    if [[ "$(docker compose version 2>&1)" == "Docker Compose version v"* ]]; then
+    check "$(docker compose version >/dev/null 2>&1)" "Docker Compose"
-        printf >&2 "${GREEN_FG}✔ Docker Compose${BLUE_FG} is ${GREEN_FG}installed${BLUE_FG}.\n"
-    else
-        printf >&2 "${RED_FG}✘ Docker Compose${YELLOW_FG} is ${RED_FG}not installed${YELLOW_FG}! \n"
-        error=1
-    fi
 
     if ((error > 0 )); then
       exit 1

app/bin/just/check.sh

@@ -9,5 +9,5 @@ check() {
 }
 
 check_cmd() {
-  check "$(command -v $1 >/dev/null 2>&1)" "$2"
+  check "$(command -v $1 >/dev/null 2>&1)" $2
 }

app/bin/just/choose.sh

@@ -9,9 +9,9 @@ function preview() {
   if [[ -z "$recipe" ]] || echo $recipe | grep -q "^\["; then
     printf "${RED_FG}Select this to Exit${CLEAR}"
   elif [[ "$content" == *" ..." ]]; then
-      hash_highlight "$(just_wrapper --list $recipe)" "conf"
+    just_wrapper --list $recipe | highlight --out-format xterm256 --syntax conf
   else
-      hash_highlight "$(just_wrapper --show $recipe)" "sh"
+    just_wrapper --show $recipe | highlight --out-format xterm256 --syntax sh
   fi
 }
 
@@ -33,19 +33,7 @@ function choose_truncate() {
 function choose_list() {
     just_wrapper -l --no-aliases --list-heading="" | awk '{$1=$1};1'
 }
-function hash_highlight() {
+
-    cache_dir="$(dirname ${BASH_SOURCE[0]})/.cache"
-    hash=$(echo $1 | md5sum | cut -d ' ' -f1)
-    file="$cache_dir/$hash"
-	if [[ -e $file ]]; then
-        cat $file
-    else
-        mkdir -p $cache_dir
-        data=$(printf "$1" | highlight --out-format xterm256 --syntax "$2")
-        printf "$data"
-        printf "$data" > $file
-    fi
-}
 case "$action" in
   *choose) choose;;
   *preview) preview;;

app/compose.yaml

@@ -1,3 +1,5 @@
+version: '3'
+
 services:
   mysql:
     container_name: 'euph-website_mysql'

app/composer.json

@@ -30,8 +30,7 @@
     "symfony/twig-bundle": "7.1.*",
     "symfony/uid": "7.1.*",
     "symfony/ux-icons": "^2.18",
-    "symfony/ux-swup": "^2.18",
+    "symfony/ux-twig-component": "^2.18",
-    "symfony/ux-twig-component": "*",
     "symfony/validator": "7.1.*",
     "symfony/webpack-encore-bundle": "^2.1",
     "symfony/yaml": "7.1.*",

app/composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9af65731bd60f6cd005a51b1747d6d92",
+    "content-hash": "fde2d40a3f2774eaaf160d4814649934",
     "packages": [
         {
             "name": "dflydev/dot-access-data",
@@ -6045,73 +6045,6 @@
             ],
             "time": "2024-06-07T23:22:02+00:00"
         },
-        {
-            "name": "symfony/ux-swup",
-            "version": "v2.18.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/symfony/ux-swup.git",
-                "reference": "208f26399b594613a0eb18dcf6117f67a691a2c4"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-swup/zipball/208f26399b594613a0eb18dcf6117f67a691a2c4",
-                "reference": "208f26399b594613a0eb18dcf6117f67a691a2c4",
-                "shasum": ""
-            },
-            "conflict": {
-                "symfony/flex": "<1.13"
-            },
-            "type": "symfony-bundle",
-            "extra": {
-                "thanks": {
-                    "name": "symfony/ux",
-                    "url": "https://github.com/symfony/ux"
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "Symfony\\UX\\Swup\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Titouan Galopin",
-                    "email": "galopintitouan@gmail.com"
-                },
-                {
-                    "name": "Symfony Community",
-                    "homepage": "https://symfony.com/contributors"
-                }
-            ],
-            "description": "Swup integration for Symfony",
-            "homepage": "https://symfony.com",
-            "keywords": [
-                "symfony-ux"
-            ],
-            "support": {
-                "source": "https://github.com/symfony/ux-swup/tree/v2.18.0"
-            },
-            "funding": [
-                {
-                    "url": "https://symfony.com/sponsor",
-                    "type": "custom"
-                },
-                {
-                    "url": "https://github.com/fabpot",
-                    "type": "github"
-                },
-                {
-                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
-                    "type": "tidelift"
-                }
-            ],
-            "time": "2024-06-01T17:50:16+00:00"
-        },
         {
             "name": "symfony/ux-twig-component",
             "version": "v2.18.1",

app/config/bundles.php

@@ -16,7 +16,6 @@ return [
     Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
     Presta\SitemapBundle\PrestaSitemapBundle::class => ['all' => true],
     Nelmio\CorsBundle\NelmioCorsBundle::class => ['all' => true],
-    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
-    Symfony\UX\Swup\SwupBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
 ];

app/config/packages/twig.yaml

@@ -1,5 +1,5 @@
 twig:
-    default_path: '%kernel.project_dir%/frontend/templates'
+    default_path: '%kernel.project_dir%/frontend/templates/'
 
 when@test:
     twig:

app/config/packages/twig_component.yaml

@@ -2,4 +2,4 @@ twig_component:
     anonymous_template_directory: 'components/'
     defaults:
         # Namespace & directory for components
-        App\Components\: 'components/'
+        App\Twig\Components\: 'components/'

app/frontend/.eslintrc.json

@@ -5,19 +5,13 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/strict"
+    "plugin:@typescript-eslint/strict",
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "overrides": [
-    {
-      "files": ["*.svelte"],
-      "parser": "svelte-eslint-parser"
-    }
-  ],
   "plugins": [
     "@typescript-eslint"
   ],

app/frontend/.stylelintignore

@@ -1,4 +0,0 @@
-*.ts
-*.twig
-*.json
-mod.just

app/frontend/.stylelintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": [
-    "stylelint-config-standard-scss",
+    "stylelint-config-standard-scss"
-    "stylelint-config-tailwindcss/scss"
   ],
   "plugins": [
     "stylelint-scss"

app/frontend/app.ts

@@ -1,46 +1,2 @@
-import '@styles/app.scss';
+import '#styles/app.scss';
-import '@pkg/stimulus';
+import '#pkg/stimulus';
-import '@pkg/swup';
-
-import {Theme, THEME_LOCAL_STORAGE_ID} from '#const/theme';
-
-const DARK_MODE_QUERY: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
-
-function initTheme(): void {
-    handleTheme(DARK_MODE_QUERY.matches);
-    DARK_MODE_QUERY.addEventListener('change', handleThemeChange);
-}
-
-function handleThemeChange(e: MediaQueryListEvent): void {
-    handleTheme(e.matches);
-}
-
-function handleTheme(prefersDark: boolean): void {
-    const theme = localStorage[THEME_LOCAL_STORAGE_ID];
-    if (theme === Theme.DARK) {
-        document.documentElement.classList.add(Theme.DARK);
-        console.log('explicit dark');
-    } else if (!(THEME_LOCAL_STORAGE_ID in localStorage) && prefersDark) {
-        document.documentElement.classList.add(Theme.DARK);
-        console.log('implicit dark');
-    } else {
-        document.documentElement.classList.remove(Theme.DARK);
-        console.log('light');
-    }
-}
-
-export {initTheme};
-
-// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-
-
-// Whenever the user explicitly chooses light mode
-//localStorage.theme = 'light';
-
-// Whenever the user explicitly chooses dark mode
-//localStorage.theme = 'dark';
-
-// Whenever the user explicitly chooses to respect the OS preference
-//localStorage.removeItem('theme');
-
-initTheme();

app/frontend/controllers/Components/BurgerMenu_controller.ts

@@ -1,20 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-export default class extends Controller {
-    static targets: Array<string> = ['container'];
-    declare readonly containerTarget: HTMLElement;
-
-    connect(): void {
-        console.log('Init Burgers');
-        this.containerTarget.style.left = '';
-        this.containerTarget.style.right = `-${this.containerTarget.offsetWidth}px`;
-    }
-
-    open(): void {
-        this.containerTarget.style.right = '0';
-    }
-
-    close(): void {
-        this.containerTarget.style.right = `-${this.containerTarget.offsetWidth}px`;
-    }
-}

app/frontend/controllers/controllers.json

@@ -1,11 +1,4 @@
 {
-  "controllers": {
+  "controllers": [],
-    "@symfony/ux-swup": {
-      "swup": {
-        "enabled": true,
-        "fetch": "eager"
-      }
-    }
-  },
   "entrypoints": []
 }

app/frontend/mod.just

@@ -1,15 +1,14 @@
 __default:
-    @../../bin/just/choose.sh {{ source_file() }} choose
+    @../bin/just/choose.sh {{ source_file() }} choose
 
 # Checks whether the requriements are met
 [group('main')]
 check:
     #!/bin/bash
-    source ../../bin/just/colors.sh
+    source ../bin/just/colors.sh
-    source ../../bin/just/check.sh
+    source ../bin/just/check.sh
     printf "${BLUE_BG}${BLACK_FG} Checking Frontend Requirements ${CLEAR}\n"
 
-    check_cmd "screen" "screen"
     check_cmd "volta" "Volta"
     check_cmd "node" "Node"
     check_cmd "npm" "NPM"
@@ -40,7 +39,7 @@ session_name := "euph-website_frontend"
 [group('main')]
 up: halt
     #!/bin/bash
-    source ../../bin/just/colors.sh
+    source ../bin/just/colors.sh
     cd .. && screen -dmS {{ session_name }} npm run watch >> /dev/null
     if [ $? -eq 0 ]; then
     	printf "${GREEN_FG}Frontend was started${CLEAR}\n"
@@ -52,7 +51,7 @@ up: halt
 [group('main')]
 halt:
     #!/bin/bash
-    source ../../bin/just/colors.sh
+    source ../bin/just/colors.sh
     screen -XS {{ session_name }} quit >> /dev/null
     if [ $? -eq 0 ]; then
     	printf "${GREEN_FG}Frontend was stopped${CLEAR}\n"
@@ -61,7 +60,7 @@ halt:
 [group('main')]
 attach:
     #!/bin/bash
-    source ../../bin/just/colors.sh
+    source ../bin/just/colors.sh
     if screen -ls | grep -q {{ session_name }}; then
     	screen -r {{ session_name }}
     else

app/frontend/packages/swup.ts

@@ -1,2 +0,0 @@
-//import Swup from 'swup';
-//new Swup();

app/frontend/styles/app.scss

@@ -1,24 +1,9 @@
-@import "components/Header";
+@import "sizes";
-@import "components/BurgerMenu/Index";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-hr {
+@import "components/Header/_";
-  @apply h-px my-2 border-0;
+@import "components/BurgerMenu/_";
-  @apply bg-gray-300 dark:bg-gray-500;
+
-}
+:root, body {
-
+  margin: 0;
-.app {
+  min-height: 100%;
-  &__text {
-    @apply text-gray-900 dark:text-gray-100
-  }
-
-  &__text-bold {
-    @apply app__text font-bold
-  }
-
-  &__text-light {
-    @apply text-gray-500 dark:text-gray-300 font-light
-  }
 }

app/frontend/styles/components/BurgerMenu/Index.scss

@@ -1,33 +0,0 @@
-@import "Nav";
-@import "Login";
-@import "User";
-
-.burger-menu {
-  @apply ml-auto h-full aspect-square;
-
-  &__container {
-    @apply fixed top-0 right-0 h-screen overflow-y-auto z-40;
-    @apply flex flex-col p-2 gap-2 w-64;
-    @apply bg-gray-200 dark:bg-gray-600;
-
-    transition: ease-in-out 200ms;
-  }
-
-  &__button-open {
-    @apply h-full aspect-square;
-  }
-
-  &__button-close {
-    @apply h-8 w-8 absolute right-2 aspect-square;
-  }
-
-  &__icon {
-    @apply text-gray-900 dark:text-gray-100;
-    @apply h-6 w-6;
-  }
-
-  &__icon-full {
-    @apply text-gray-900 dark:text-gray-100;
-    @apply h-full w-full;
-  }
-}

app/frontend/styles/components/BurgerMenu/Login.scss

@@ -1,8 +0,0 @@
-.burger-menu-login {
-  @apply flex p-2 gap-2 items-center justify-center;
-  @apply rounded-lg bg-blue-500 app__text;
-
-  &__icon {
-    @apply burger-menu__icon;
-  }
-}

app/frontend/styles/components/BurgerMenu/Nav.scss

@@ -1,20 +0,0 @@
-.burger-menu-nav {
-  @apply text-lg app__text;
-
-  &__list {
-    @apply flex flex-col gap-2;
-  }
-
-  &__item {
-    @apply h-8;
-  }
-
-  &__link {
-    @apply flex p-1 gap-2 items-center;
-    @apply rounded-md hover:bg-gray-200 dark:hover:bg-gray-600;
-  }
-
-  &__icon {
-    @apply burger-menu__icon;
-  }
-}

app/frontend/styles/components/BurgerMenu/User.scss

@@ -1,47 +0,0 @@
-.burger-menu-user {
-  @apply flex flex-col items-center;
-  @apply text-gray-900 dark:text-gray-100;
-
-
-  &__picture-wrapper {
-    @apply w-1/3 aspect-square mx-auto;
-  }
-
-  &__name {
-    @apply app__text-bold text-xl;
-    @apply h-6;
-  }
-
-  &__icon-full {
-    @apply burger-menu__icon-full;
-  }
-
-  &__email {
-    @apply app__text-light text-base;
-    @apply h-6;
-  }
-
-  &__info {
-    @apply app__text-light text-base;
-    @apply h-6;
-  }
-
-  &__actions {
-    @apply inline-flex  mt-2;
-
-    button {
-      @apply inline-flex p-1;
-      @apply bg-transparent;
-      @apply app__text text-sm;
-      @apply border border-r-0 border-gray-900 dark:border-gray-100;
-
-      &:first-of-type {
-        @apply rounded-s-lg;
-      }
-
-      &:last-of-type {
-        @apply rounded-e-lg border-r;
-      }
-    }
-  }
-}

app/frontend/styles/components/BurgerMenu/_.scss

@@ -0,0 +1,5 @@
+#burger-menu {
+  &__container {
+    display: none;
+  }
+}

app/frontend/styles/components/Header.scss

@@ -1,17 +0,0 @@
-.header {
-  @apply flex h-12 p-2 gap-2 items-center;
-  @apply bg-gray-300 dark:bg-gray-700;
-
-  &__logo {
-    @apply h-full dark:hidden;
-  }
-
-  &__logo-dark {
-    @apply h-full hidden dark:block;
-  }
-
-  &__logo-text {
-    @apply text-lg text-center text-black dark:text-white;
-  }
-
-}

app/frontend/styles/components/Header/_.scss

@@ -0,0 +1,7 @@
+#header {
+  display: flex;
+  height: $size-xxl;
+  padding: $size-xs;
+  gap: $size-xs;
+  justify-items: center;
+}

app/frontend/styles/sizes.scss

@@ -0,0 +1,7 @@
+$size-xxs: 0.25rem; // 4px
+$size-xs: 0.5rem;   // 8px
+$size-s: 0.75rem;   // 12px
+$size-m: 1rem;      // 16px
+$size-l: 1.5rem;    // 24px
+$size-xl: 2rem;     // 32px
+$size-xxl: 3rem;    // 48px

app/frontend/templates/base.html.twig

@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-{% set logged_in = true %}
-
 <html lang="de">
 <head>
     <meta charset="UTF-8"/>
@@ -21,8 +19,9 @@
 
     <title>{% block title %}Euph{% endblock %}</title>
 </head>
+
 <body>
-<twig:Header/>
+<twig:Header:_/>
 {% block body %}{% endblock %}
 </body>
 </html>

app/frontend/templates/components/BurgerMenu/Index.html.twig

@@ -1,24 +0,0 @@
-{% set logged_in = true %}
-<div
-    class="burger-menu"
-    {{ stimulus_controller('Components/BurgerMenu') }}
->
-    <button class="burger-menu__button-open" {{ stimulus_action('Components/BurgerMenu', 'open') }}>
-        <twig:ux:icon name="ph:list" class="burger-menu__icon-full"/>
-    </button>
-    <div
-        class="burger-menu__container"
-        tabindex="-1"
-        {{ stimulus_target('Components/BurgerMenu', 'container') }}
-        style="left: 100%"
-    >
-        <button class="burger-menu__button-close" {{ stimulus_action('Components/BurgerMenu', 'close') }}>
-            <twig:ux:icon name="ph:x" class="burger-menu__icon-full"/>
-        </button>
-        <twig:BurgerMenu:User logged_in="{{ logged_in }}"/>
-        <twig:BurgerMenu:Login logged_in="{{ logged_in }}"/>
-        <hr/>
-        <twig:BurgerMenu:Nav/>
-    </div>
-</div>
-

app/frontend/templates/components/BurgerMenu/Login.html.twig

@@ -1,9 +1,6 @@
-{% props logged_in = false %}
+{% set logged_in = false %}
-
 {% if not logged_in %}
-    <hr/>
+    <a>
-    <a class="burger-menu-login">
-        <twig:ux:icon name="branding:euphcloud" class="burger-menu-login__icon"/>
         <span>Login with Euphcloud</span>
     </a>
 {% endif %}

app/frontend/templates/components/BurgerMenu/Nav.html.twig

@@ -1,16 +0,0 @@
-<nav class="burger-menu-nav">
-    <ul class="burger-menu-nav__list">
-        {{ _self.nav_item('Test1', '#test1', 'list') }}
-        {{ _self.nav_item('Test2', '#test2', 'list') }}
-        {{ _self.nav_item('Test3', '#test3', 'list') }}
-    </ul>
-</nav>
-
-{% macro nav_item(name, href, icon) %}
-    <li class="burger-menu-nav__item">
-        <a class="burger-menu-nav__link" href="{{ href }}">
-            <twig:ux:icon name="ph:{{ icon }}" class="burger-menu-nav__icon"/>
-            <span class="flex-1">{{ name }}</span>
-        </a>
-    </li>
-{% endmacro %}

app/frontend/templates/components/BurgerMenu/Navigation.html.twig

@@ -0,0 +1,16 @@
+<nav id="burger-menu-navigation">
+    <ul>
+        {{ _self.nav_item('Test1', '#test1', 'bars') }}
+        {{ _self.nav_item('Test2', '#test2', 'bars') }}
+        {{ _self.nav_item('Test3', '#test3', 'bars') }}
+    </ul>
+</nav>
+
+{% macro nav_item(name, href, icon) %}
+    <li>
+        <a href="{{ href }}">
+            <twig:ux:icon name="fa6-solid:{{ icon }}" />
+            <span>{{ name }}</span>
+        </a>
+    </li>
+{% endmacro %}

app/frontend/templates/components/BurgerMenu/User.html.twig

@@ -1,25 +1,26 @@
-{% props logged_in = false %}
+{% set logged_in = false %}
-
+<div id="burger-menu-user">
-<div class="burger-menu-user">
+    <div >
-    <div class="burger-menu-user__picture-wrapper">
+        <twig:ux:icon name="fa6-solid:circle-user" />
-        <twig:ux:icon name="ph:user-circle-fill" class="burger-menu-user__icon-full"/>
     </div>
     {% if logged_in %}
-        <span class="burger-menu-user__name">Username</span>
+        <span>Username</span>
-        <span class="burger-menu-user__email">username@email.com</span>
+        <span>username@email.com</span>
-        <div class="burger-menu-user__actions">
+        <div>
             {{ _self.user_action('Profile', 'user') }}
             {{ _self.user_action('Settings', 'gear') }}
-            {{ _self.user_action('Logout', 'sign-out') }}
+            {{ _self.user_action('Logout', 'right-from-bracket') }}
         </div>
     {% else %}
-        <span class="burger-menu-user__info">not logged in</span>
+        <span>not logged in</span>
     {% endif %}
 </div>
 
+
 {% macro user_action(name, icon) %}
     <button>
-        <twig:ux:icon name="ph:{{ icon }}" class="burger-menu__icon"/>
+        <twig:ux:icon name="fa6-solid:{{ icon }}" />
         <span>{{ name }}</span>
     </button>
 {% endmacro %}
+

app/frontend/templates/components/BurgerMenu/_.html.twig

@@ -0,0 +1,14 @@
+<button id="burger-menu">
+    <twig:ux:icon name="fa6-solid:bars" />
+</button>
+<div id="burger-menu__container" tabindex="-1">
+    <button>
+        <twig:ux:icon name="fa6-solid:x" />
+    </button>
+    <twig:BurgerMenu:User/>
+    <hr/>
+    <twig:BurgerMenu:Login/>
+    <hr/>
+    <twig:BurgerMenu:Navigation/>
+</div>
+

app/frontend/templates/components/Header/_.html.twig

@@ -1,14 +1,12 @@
-<header class="header">
+<header id="header">
     <img
-        class="header__logo"
         src="{{ asset("icons/logo/logo.svg") }}"
         alt="Euph Logo"
     >
     <img
-        class="header__logo-dark"
         src="{{ asset("icons/logo/dark-logo.svg") }}"
         alt="Euph Logo"
     >
-    <span class="header__logo-text">Euph</span>
+    <h1>Euph</h1>
-    <twig:BurgerMenu:Index/>
+    <twig:BurgerMenu:_/>
 </header>

app/frontend/templates/index.html.twig

@@ -1,4 +1,3 @@
 {% extends 'base.html.twig' %}
 {% block body %}
-<p>A Phrase</p>
 {% endblock %}

app/frontend/tsconfig.json

@@ -13,27 +13,25 @@
       "~*": [
         ".*"
       ],
-      "@components/*": [
+      "#components/*": [
-        "./templates/components/*"
-      ],
-      "@controllers/*": [
         "./controllers/*"
       ],
-      "@styles/*": [
+      "#controllers/*": [
-        "./styles/*"
+        "./controllers/*"
       ],
-      "@pkg/*": [
+      "#pkg/*": [
         "./packages/*"
       ],
+      "#styles/*": [
+        "./styles/*"
+      ],
       "#types/*": [
         "./types/*"
-      ],
-      "#const/*": [
-        "./types/constants/*"
       ]
     }
   },
   "include": [
-    "./**/*.ts"
+    "./**/*.ts",
+    "./**/*.svelte"
   ]
 }

app/frontend/types/constants/theme.ts

@@ -1,8 +0,0 @@
-const THEME_LOCAL_STORAGE_ID = 'theme';
-
-enum Theme {
-    LIGHT = 'light',
-    DARK = 'dark'
-}
-
-export {THEME_LOCAL_STORAGE_ID, Theme};

app/package.json

@@ -17,12 +17,7 @@
     "@babel/preset-env": "^7.16.0",
     "@hotwired/stimulus": "^3.0.0",
     "@popperjs/core": "^2.11.8",
-    "@swup/debug-plugin": "^3.0",
-    "@swup/fade-theme": "^1.0",
-    "@swup/forms-plugin": "^2.0",
-    "@swup/slide-theme": "^1.0",
     "@symfony/stimulus-bridge": "^3.2.0",
-    "@symfony/ux-swup": "file:vendor/symfony/ux-swup/assets",
     "@symfony/webpack-encore": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
@@ -34,18 +29,13 @@
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.0",
     "ignore-loader": "^0.1.2",
-    "postcss": "^8.4.39",
-    "postcss-loader": "^7.3.4",
     "prettier": "^2.8.8",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.69.4",
     "sass-loader": "^13.3.2",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-config-tailwindcss": "^0.0.7",
     "stylelint-scss": "^6.3.1",
-    "swup": "^3.0",
-    "tailwindcss": "^3.4.4",
     "ts-loader": "^9.5.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",

app/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-}

app/symfony.lock

@@ -261,21 +261,6 @@
             "assets/icons/symfony.svg"
         ]
     },
-    "symfony/ux-svelte": {
-        "version": "2.18",
-        "recipe": {
-            "repo": "github.com/symfony/recipes",
-            "branch": "main",
-            "version": "2.9",
-            "ref": "4a6ee82d817d4e9be8d4a861476a112011d701e1"
-        },
-        "files": [
-            "assets/svelte/controllers/Hello.svelte"
-        ]
-    },
-    "symfony/ux-swup": {
-        "version": "v2.18.0"
-    },
     "symfony/ux-twig-component": {
         "version": "2.18",
         "recipe": {

app/tailwind.config.js

@@ -1,13 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
+  content: [
-        "./frontend/**/*.ts",
+    "./frontend/**/*.ts",
-        "./frontend/templates/**/*.html.twig",
+    "./frontend/templates/**/*.html.twig",
-    ],
+    "./node_modules/flowbite/**/*.js"
-    theme: {
+  ],
-        extend: {
+  theme: {
+    extend: {
 
-        },
     },
-    darkMode: 'selector'
+  },
+  plugins: [
+    require('flowbite/plugin')
+  ],
+  darkMode: 'selector'
 }
+

app/webpack.config.js

@@ -33,7 +33,6 @@ Encore
     })
     .enableStimulusBridge('./frontend/controllers/controllers.json')
     .enableSassLoader()
-    .enablePostCssLoader()
     .enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
         tsConfig.configFile = TS_CONFIG_PATH;
     })
@@ -46,7 +45,7 @@ Encore
         proxy: 'http://localhost:8000',
         files: [
             'frontend/**/*.twig',
-            'frontend/**/*.scss',
+            'frontend/**/*.svelte',
             'frontend/**/*.ts',
         ],
         reload: true,

bin/just/.gitignore

@@ -1 +0,0 @@
-.cache/