Compare commits

...

2 commits

Author SHA1 Message Date
f5291924c3
stuff
Some checks failed
Quality Check / QS Backend (push) Successful in 19s
Quality Check / QS Frontend (push) Failing after 36s
Quality Check / QS Mixed (push) Failing after 33s
2024-07-27 20:58:39 +02:00
4706efacae
NOTICKET: Switch to Symfony UX Twig Components 2024-07-18 22:48:24 +02:00
48 changed files with 2795 additions and 3881 deletions

View file

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

View file

@ -20,8 +20,8 @@ jobs:
working-directory: app/frontend working-directory: app/frontend
run: "node ../node_modules/typescript/bin/tsc --noEmit" run: "node ../node_modules/typescript/bin/tsc --noEmit"
- name: "Stylelint" - name: "Stylelint"
working-directory: app/frontend/styles working-directory: app/frontend
run: "node ../../node_modules/stylelint/bin/stylelint.mjs ." run: "node ../node_modules/stylelint/bin/stylelint.mjs ."
- name: "ESLint" - name: "ESLint"
working-directory: app working-directory: app
run: "node node_modules/eslint/bin/eslint.js frontend" run: "node node_modules/eslint/bin/eslint.js frontend"

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><circle cx="128" cy="128.827" r="128" fill="#1a171b"/><path fill="#fff" d="M183.706 48.124c-12.986.453-24.32 7.61-32.757 17.51c-9.342 10.855-15.557 23.73-20.035 36.872c-8.01-6.565-14.19-15.064-27.041-18.77c-9.933-2.852-20.366-1.674-29.96 5.474c-4.545 3.395-7.676 8.527-9.165 13.351c-3.855 12.537 4.053 23.694 7.645 27.7l7.853 8.416c1.619 1.65 5.518 5.955 3.612 12.127c-2.06 6.71-10.15 11.055-18.448 8.495c-3.706-1.13-9.03-3.891-7.838-7.779c.493-1.59 1.631-2.78 2.241-4.155c.56-1.181.827-2.067.997-2.587c1.516-4.95-.555-11.39-5.857-13.025c-4.946-1.516-10.007-.315-11.969 6.054c-2.225 7.235 1.237 20.366 19.783 26.084c21.729 6.676 40.11-5.155 42.717-20.586c1.642-9.665-2.722-16.845-10.717-26.08l-6.514-7.204c-3.946-3.942-5.301-10.661-1.217-15.825c3.446-4.356 8.354-6.215 16.392-4.029c11.733 3.186 16.963 11.327 25.69 17.893c-3.603 11.819-5.958 23.682-8.09 34.32l-1.299 7.931c-6.238 32.721-11 50.688-23.375 61.003c-2.493 1.773-6.057 4.427-11.429 4.612c-2.816.087-3.726-1.85-3.765-2.694c-.067-1.977 1.599-2.883 2.706-3.773c1.654-.902 4.155-2.398 3.985-7.191c-.18-5.664-4.872-10.575-11.654-10.35c-5.08.173-12.823 4.954-12.532 13.705c.303 9.039 8.728 15.813 21.43 15.384c6.79-.233 21.952-2.997 36.895-20.76c17.392-20.362 22.256-43.705 25.915-60.79l4.084-22.556c2.269.272 4.695.453 7.334.516c21.661.457 32.496-10.763 32.657-18.924c.107-4.939-3.241-9.799-7.928-9.689c-3.355.095-7.57 2.328-8.582 6.968c-.988 4.552 6.893 8.66.733 12.65c-4.376 2.832-12.221 4.828-23.269 3.206l2.009-11.103c4.1-21.055 9.157-46.954 28.341-47.584c1.398-.071 6.514.063 6.633 3.446c.035 1.13-.245 1.418-1.568 4.005c-1.347 2.017-1.855 3.734-1.792 5.707c.185 5.376 4.273 8.909 10.185 8.696c7.916-.256 10.193-7.963 10.063-11.921c-.32-9.3-10.122-15.175-23.1-14.75"/></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

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

View file

@ -23,11 +23,14 @@
"symfony/flex": "^2", "symfony/flex": "^2",
"symfony/form": "7.1.*", "symfony/form": "7.1.*",
"symfony/framework-bundle": "7.1.*", "symfony/framework-bundle": "7.1.*",
"symfony/http-client": "7.1.*",
"symfony/monolog-bundle": "^3.0", "symfony/monolog-bundle": "^3.0",
"symfony/runtime": "7.1.*", "symfony/runtime": "7.1.*",
"symfony/stimulus-bundle": "^2.12", "symfony/stimulus-bundle": "^2.18",
"symfony/twig-bundle": "7.1.*", "symfony/twig-bundle": "7.1.*",
"symfony/uid": "7.1.*", "symfony/uid": "7.1.*",
"symfony/ux-icons": "^2.18",
"symfony/ux-twig-component": "^2.18",
"symfony/validator": "7.1.*", "symfony/validator": "7.1.*",
"symfony/webpack-encore-bundle": "^2.1", "symfony/webpack-encore-bundle": "^2.1",
"symfony/yaml": "7.1.*", "symfony/yaml": "7.1.*",

345
app/composer.lock generated
View file

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically" "This file is @generated automatically"
], ],
"content-hash": "ee85551bd6012966efcff3c2d44a4b98", "content-hash": "fde2d40a3f2774eaaf160d4814649934",
"packages": [ "packages": [
{ {
"name": "dflydev/dot-access-data", "name": "dflydev/dot-access-data",
@ -3675,6 +3675,178 @@
], ],
"time": "2024-06-28T08:00:31+00:00" "time": "2024-06-28T08:00:31+00:00"
}, },
{
"name": "symfony/http-client",
"version": "v7.1.2",
"source": {
"type": "git",
"url": "https://github.com/symfony/http-client.git",
"reference": "90ace27d17ccc9afc6f7ec0081e8529fb0e29425"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/http-client/zipball/90ace27d17ccc9afc6f7ec0081e8529fb0e29425",
"reference": "90ace27d17ccc9afc6f7ec0081e8529fb0e29425",
"shasum": ""
},
"require": {
"php": ">=8.2",
"psr/log": "^1|^2|^3",
"symfony/deprecation-contracts": "^2.5|^3",
"symfony/http-client-contracts": "^3.4.1",
"symfony/service-contracts": "^2.5|^3"
},
"conflict": {
"php-http/discovery": "<1.15",
"symfony/http-foundation": "<6.4"
},
"provide": {
"php-http/async-client-implementation": "*",
"php-http/client-implementation": "*",
"psr/http-client-implementation": "1.0",
"symfony/http-client-implementation": "3.0"
},
"require-dev": {
"amphp/amp": "^2.5",
"amphp/http-client": "^4.2.1",
"amphp/http-tunnel": "^1.0",
"amphp/socket": "^1.1",
"guzzlehttp/promises": "^1.4|^2.0",
"nyholm/psr7": "^1.0",
"php-http/httplug": "^1.0|^2.0",
"psr/http-client": "^1.0",
"symfony/dependency-injection": "^6.4|^7.0",
"symfony/http-kernel": "^6.4|^7.0",
"symfony/messenger": "^6.4|^7.0",
"symfony/process": "^6.4|^7.0",
"symfony/rate-limiter": "^6.4|^7.0",
"symfony/stopwatch": "^6.4|^7.0"
},
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\HttpClient\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "p@tchwork.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Provides powerful methods to fetch HTTP resources synchronously or asynchronously",
"homepage": "https://symfony.com",
"keywords": [
"http"
],
"support": {
"source": "https://github.com/symfony/http-client/tree/v7.1.2"
},
"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-28T08:00:31+00:00"
},
{
"name": "symfony/http-client-contracts",
"version": "v3.5.0",
"source": {
"type": "git",
"url": "https://github.com/symfony/http-client-contracts.git",
"reference": "20414d96f391677bf80078aa55baece78b82647d"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/http-client-contracts/zipball/20414d96f391677bf80078aa55baece78b82647d",
"reference": "20414d96f391677bf80078aa55baece78b82647d",
"shasum": ""
},
"require": {
"php": ">=8.1"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-main": "3.5-dev"
},
"thanks": {
"name": "symfony/contracts",
"url": "https://github.com/symfony/contracts"
}
},
"autoload": {
"psr-4": {
"Symfony\\Contracts\\HttpClient\\": ""
},
"exclude-from-classmap": [
"/Test/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "p@tchwork.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Generic abstractions related to HTTP clients",
"homepage": "https://symfony.com",
"keywords": [
"abstractions",
"contracts",
"decoupling",
"interfaces",
"interoperability",
"standards"
],
"support": {
"source": "https://github.com/symfony/http-client-contracts/tree/v3.5.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-04-18T09:32:20+00:00"
},
{ {
"name": "symfony/http-foundation", "name": "symfony/http-foundation",
"version": "v7.1.1", "version": "v7.1.1",
@ -5786,6 +5958,177 @@
], ],
"time": "2024-05-31T14:57:53+00:00" "time": "2024-05-31T14:57:53+00:00"
}, },
{
"name": "symfony/ux-icons",
"version": "v2.18.1",
"source": {
"type": "git",
"url": "https://github.com/symfony/ux-icons.git",
"reference": "a00140b15feb16a0d991ee04e115f2a15b0d9941"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/ux-icons/zipball/a00140b15feb16a0d991ee04e115f2a15b0d9941",
"reference": "a00140b15feb16a0d991ee04e115f2a15b0d9941",
"shasum": ""
},
"require": {
"php": ">=8.1",
"symfony/framework-bundle": "^6.4|^7.0",
"symfony/twig-bundle": "^6.4|^7.0"
},
"conflict": {
"symfony/flex": "<1.13"
},
"require-dev": {
"symfony/asset-mapper": "^6.4|^7.0",
"symfony/console": "^6.4|^7.0",
"symfony/http-client": "6.4|^7.0",
"symfony/phpunit-bridge": "^6.3|^7.0",
"symfony/ux-twig-component": "^2.14",
"zenstruck/console-test": "^1.5"
},
"type": "symfony-bundle",
"extra": {
"thanks": {
"name": "symfony/ux",
"url": "https://github.com/symfony/ux"
}
},
"autoload": {
"psr-4": {
"Symfony\\UX\\Icons\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Kevin Bond",
"email": "kevinbond@gmail.com"
},
{
"name": "Simon André",
"email": "smn.andre@gmail.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Renders local and remote SVG icons in your Twig templates.",
"homepage": "https://symfony.com",
"keywords": [
"icons",
"svg",
"symfony-ux",
"twig"
],
"support": {
"source": "https://github.com/symfony/ux-icons/tree/v2.18.1"
},
"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-07T23:22:02+00:00"
},
{
"name": "symfony/ux-twig-component",
"version": "v2.18.1",
"source": {
"type": "git",
"url": "https://github.com/symfony/ux-twig-component.git",
"reference": "c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7",
"reference": "c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7",
"shasum": ""
},
"require": {
"php": ">=8.1",
"symfony/dependency-injection": "^5.4|^6.0|^7.0",
"symfony/deprecation-contracts": "^2.2|^3.0",
"symfony/event-dispatcher": "^5.4|^6.0|^7.0",
"symfony/property-access": "^5.4|^6.0|^7.0",
"twig/twig": "^3.8"
},
"conflict": {
"symfony/config": "<5.4.0"
},
"require-dev": {
"symfony/console": "^5.4|^6.0|^7.0",
"symfony/css-selector": "^5.4|^6.0|^7.0",
"symfony/dom-crawler": "^5.4|^6.0|^7.0",
"symfony/framework-bundle": "^5.4|^6.0|^7.0",
"symfony/phpunit-bridge": "^6.0|^7.0",
"symfony/stimulus-bundle": "^2.9.1",
"symfony/stopwatch": "^5.4|^6.0|^7.0",
"symfony/twig-bundle": "^5.4|^6.0|^7.0",
"symfony/webpack-encore-bundle": "^1.15"
},
"type": "symfony-bundle",
"extra": {
"thanks": {
"name": "symfony/ux",
"url": "https://github.com/symfony/ux"
}
},
"autoload": {
"psr-4": {
"Symfony\\UX\\TwigComponent\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Twig components for Symfony",
"homepage": "https://symfony.com",
"keywords": [
"components",
"symfony-ux",
"twig"
],
"support": {
"source": "https://github.com/symfony/ux-twig-component/tree/v2.18.1"
},
"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-11T18:51:33+00:00"
},
{ {
"name": "symfony/validator", "name": "symfony/validator",
"version": "v7.1.2", "version": "v7.1.2",

View file

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

View file

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

View file

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

View file

@ -7,9 +7,9 @@ controllers:
presta_sitemap: presta_sitemap:
resource: "@PrestaSitemapBundle/config/routing.yml" resource: "@PrestaSitemapBundle/config/routing.yml"
when@dev: #when@dev:
test_style: # test_style:
path: /test/styles # path: /test/styles
controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController # controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
defaults: # defaults:
template: 'test/styles.html.twig' # template: 'test/styles.html.twig'

View file

@ -5,7 +5,7 @@
}, },
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:@typescript-eslint/strict" "plugin:@typescript-eslint/strict",
], ],
"parser": "@typescript-eslint/parser", "parser": "@typescript-eslint/parser",
"parserOptions": { "parserOptions": {

View file

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

View file

@ -1,3 +1,2 @@
import '@styles/app.scss'; import '#styles/app.scss';
import '@pkg/stimulus'; import '#pkg/stimulus';
import '@pkg/flowbite';

View file

@ -1,5 +0,0 @@
declare enum HttpCodes {
OK = 200
}
export {HttpCodes};

View file

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

View file

@ -1,12 +0,0 @@
import {Controller} from '@hotwired/stimulus';
export default class extends Controller {
static targets: Array<string> = ['container'];
declare readonly containerTarget: HTMLElement;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
afterLoad(identifier: string, application: HTMLElement): void {
console.log(this.containerTarget);
}
}

View file

@ -1,40 +0,0 @@
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');

View file

@ -1,4 +0,0 @@
import 'flowbite';
import {initFlowbite} from 'flowbite';
initFlowbite();

View file

@ -1,24 +1,9 @@
@import "components/header"; @import "sizes";
@import "components/burger-menu";
@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;
}
.app { :root, body {
&__text { margin: 0;
@apply text-gray-900 dark:text-gray-100 min-height: 100%;
}
&__text-bold {
@apply app__text font-bold
}
&__text-light {
@apply text-gray-500 dark:text-gray-300 font-light
}
} }

View file

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

View file

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

View file

@ -1,79 +0,0 @@
#burger-menu {
@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-100 dark:bg-gray-700;
&__button-open {
@apply ml-auto h-full aspect-square;
}
&__button-close {
@apply h-8 w-8 absolute right-2 aspect-square;
}
&__user-section {
@apply flex flex-col items-center;
@apply text-black dark:text-white;
}
&__user-picture-wrapper {
@apply w-1/3 aspect-square mx-auto;
}
&__user-name {
@apply app__text-bold text-xl;
@apply h-6;
}
&__user-email {
@apply app__text-light text-base;
@apply h-6;
}
&__user-info {
@apply app__text-light text-base;
@apply h-6;
}
&__user-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-white;
&:first-of-type {
@apply rounded-s-lg;
}
&:last-of-type {
@apply rounded-e-lg border-r;
}
}
}
&__login {
@apply flex p-2 gap-2 items-center justify-center;
@apply rounded-lg bg-blue-500 app__text;
}
&__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;
}
}
}

View file

@ -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;
}
}

View file

@ -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

View file

@ -1,6 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
{% set logged_in = true %}
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
@ -15,14 +13,15 @@
<link rel="mask-icon" href="{{ asset('/safari-pinned-tab.svg') }}" color="#000000"> <link rel="mask-icon" href="{{ asset('/safari-pinned-tab.svg') }}" color="#000000">
<meta name="msapplication-TileColor" content="#000000"> <meta name="msapplication-TileColor" content="#000000">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
{{ encore_entry_link_tags('app') }} {{ encore_entry_link_tags('app') }}
{{ encore_entry_script_tags('theme') }}
{{ encore_entry_script_tags('app') }} {{ encore_entry_script_tags('app') }}
<title>{% block title %}Euph{% endblock %}</title> <title>{% block title %}Euph{% endblock %}</title>
</head> </head>
<body class="bg-gray-100 dark:bg-gray-600">
{% include 'components/header.html.twig' %} <body>
<twig:Header:_/>
{% block body %}{% endblock %} {% block body %}{% endblock %}
</body> </body>
</html> </html>

View file

@ -0,0 +1,6 @@
{% set logged_in = false %}
{% if not logged_in %}
<a>
<span>Login with Euphcloud</span>
</a>
{% endif %}

View file

@ -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 %}

View file

@ -0,0 +1,26 @@
{% set logged_in = false %}
<div id="burger-menu-user">
<div >
<twig:ux:icon name="fa6-solid:circle-user" />
</div>
{% if logged_in %}
<span>Username</span>
<span>username@email.com</span>
<div>
{{ _self.user_action('Profile', 'user') }}
{{ _self.user_action('Settings', 'gear') }}
{{ _self.user_action('Logout', 'right-from-bracket') }}
</div>
{% else %}
<span>not logged in</span>
{% endif %}
</div>
{% macro user_action(name, icon) %}
<button>
<twig:ux:icon name="fa6-solid:{{ icon }}" />
<span>{{ name }}</span>
</button>
{% endmacro %}

View file

@ -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>

View file

@ -1,14 +1,12 @@
<header id="header"> <header id="header">
<img <img
id="header__logo"
src="{{ asset("icons/logo/logo.svg") }}" src="{{ asset("icons/logo/logo.svg") }}"
alt="Euph Logo" alt="Euph Logo"
> >
<img <img
id="header__logo-dark"
src="{{ asset("icons/logo/dark-logo.svg") }}" src="{{ asset("icons/logo/dark-logo.svg") }}"
alt="Euph Logo" alt="Euph Logo"
> >
<h1 id="header__logo-text">Euph</h1> <h1>Euph</h1>
{% include 'components/burger-menu.html.twig' %} <twig:BurgerMenu:_/>
</header> </header>

View file

@ -1,71 +0,0 @@
<button
id="burger-menu__button-open"
type="button"
data-drawer-target="burger-menu"
data-drawer-show="burger-menu"
data-drawer-placement="right"
aria-controls="burger-menu"
>
{% include 'icons/bars.svg.twig' with {'class': 'h-full w-full'} %}
</button>
<div
id="burger-menu"
class="transition-transform translate-x-full"
tabindex="-1"
>
<button
type="button"
id="burger-menu__button-close"
data-drawer-hide="burger-menu"
aria-controls="burger-menu"
>
{% include 'icons/close.svg.twig' with {'class': 'h-full w-full'} %}
</button>
<div id="burger-menu__user-section">
<div id="burger-menu__user-picture-wrapper">
{% include 'icons/user-placeholder.svg.twig' with {'class': 'h-full w-full'} %}
</div>
{% if logged_in %}
<span id="burger-menu__user-name">Username</span>
<span id="burger-menu__user-email">username@email.com</span>
<div id="burger-menu__user-actions">
{{ _self.user_action('Profile', 'user') }}
{{ _self.user_action('Settings', 'settings') }}
{{ _self.user_action('Logout', 'logout') }}
</div>
{% else %}
<span id="burger-menu__user-info">not logged in</span>
{% endif %}
</div>
{% if not logged_in %}
<hr/>
<a id="burger-menu__login">
{% include 'icons/euphcloud.svg.twig' with {'class': 'w-6 h-6'} %}
<span>Login with Euphcloud</span>
</a>
{% endif %}
<hr/>
<nav id="burger-menu__nav">
<ul id="burger-menu__nav-list">
{{ _self.nav_item('Test1', '#test1', 'bars') }}
{{ _self.nav_item('Test2', '#test2', 'bars') }}
{{ _self.nav_item('Test3', '#test3', 'bars') }}
</ul>
</nav>
</div>
{% macro user_action(name, icon) %}
<button>
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
<span>{{ name }}</span>
</button>
{% endmacro %}
{% macro nav_item(name, href, icon) %}
<li id="burger-menu__nav-item">
<a id="burger-menu__nav-link" href="{{ href }}">
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
<span class="flex-1">{{ name }}</span>
</a>
</li>
{% endmacro %}

View file

@ -1,16 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
d="M5 7h14M5 12h14M5 17h14"
/>
</svg>

Before

Width:  |  Height:  |  Size: 352 B

View file

@ -1,17 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18 17.94 6M18 18 6.06 6"
/>
</svg>

Before

Width:  |  Height:  |  Size: 387 B

View file

@ -1,14 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
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>

Before

Width:  |  Height:  |  Size: 734 B

View file

@ -1,17 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"
/>
</svg>

Before

Width:  |  Height:  |  Size: 425 B

View file

@ -1,14 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M17 10v1.126c.367.095.714.24 1.032.428l.796-.797 1.415 1.415-.797.796c.188.318.333.665.428 1.032H21v2h-1.126c-.095.367-.24.714-.428 1.032l.797.796-1.415 1.415-.796-.797a3.979 3.979 0 0 1-1.032.428V20h-2v-1.126a3.977 3.977 0 0 1-1.032-.428l-.796.797-1.415-1.415.797-.796A3.975 3.975 0 0 1 12.126 16H11v-2h1.126c.095-.367.24-.714.428-1.032l-.797-.796 1.415-1.415.796.797A3.977 3.977 0 0 1 15 11.126V10h2Zm.406 3.578.016.016c.354.358.574.85.578 1.392v.028a2 2 0 0 1-3.409 1.406l-.01-.012a2 2 0 0 1 2.826-2.83ZM5 8a4 4 0 1 1 7.938.703 7.029 7.029 0 0 0-3.235 3.235A4 4 0 0 1 5 8Zm4.29 5H7a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h6.101A6.979 6.979 0 0 1 9 15c0-.695.101-1.366.29-2Z"
clip-rule="evenodd"
/>
</svg>

Before

Width:  |  Height:  |  Size: 969 B

View file

@ -1,14 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z"
clip-rule="evenodd"
/>
</svg>

Before

Width:  |  Height:  |  Size: 650 B

View file

@ -1,15 +0,0 @@
<svg
class="text-gray-800 dark:text-white {{ class|default('') }}"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z"
fill-rule="evenodd"
clip-rule="evenodd"
/>
</svg>

Before

Width:  |  Height:  |  Size: 413 B

View file

@ -0,0 +1,3 @@
{% extends 'base.html.twig' %}
{% block body %}
{% endblock %}

View file

@ -1,53 +0,0 @@
{% extends 'base.html.twig' %}
{% block body %}
<h1>H1 Hello World</h1>
<h2>H2 Hello World</h2>
<h3>H3 Hello World</h3>
<h4>H4 Hello World</h4>
<h5>H5 Hello World</h5>
<h6>H6 Hello World</h6>
<p>P Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ad consectetur consequuntur culpa debitis dignissimos
dolore est ex illo iure maxime, molestiae pariatur recusandae,
reiciendis saepe similique temporibus voluptatum? Eos,
repudiandae!
</p>
<a href="">A Link</a>
<button>Button</button>
<input type="text">
<input type="checkbox" name="" id="">
<button id="dropdownButton" data-dropdown-toggle="dropdownMenu" class="shadow" type="button">
Select an option
</button>
<ul id="dropdownMenu" class="hidden border-red-300 shadow">
<li>
<a href="#" class="block hover:bg-red-500" data-value="1">Option 1</a>
</li>
<li>
<a href="#" class="block hover:bg-green-500" data-value="2">Option 2</a>
</li>
<li>
<a href="#" class="block hover:bg-blue-500" data-value="3">Option 3</a>
</li>
</ul>
<script>
document.querySelectorAll('#dropdownMenu a').forEach(function (option) {
option.addEventListener('click', function (event) {
event.preventDefault();
console.log(this.dataset.value);
document.getElementById('dropdownButton').textContent = this.textContent;
console.log('close');
document.getElementById('dropdownMenu').classList.add('hidden');
});
});
document.getElementById('dropdownButton').addEventListener('click', function () {
let menu = document.getElementById('dropdownMenu');
console.log('open', menu);
menu.classList.remove('hidden');
console.log('open2', menu);
});
</script>
{% endblock %}

View file

@ -1,3 +0,0 @@
import {initTheme} from '@domain/theme';
initTheme();

View file

@ -13,20 +13,17 @@
"~*": [ "~*": [
".*" ".*"
], ],
"@styles/*": [ "#components/*": [
"./styles/*"
],
"@controllers/*": [
"./controllers/*" "./controllers/*"
], ],
"@pkg/*": [ "#controllers/*": [
"./controllers/*"
],
"#pkg/*": [
"./packages/*" "./packages/*"
], ],
"@domain/*": [ "#styles/*": [
"./domain/*" "./styles/*"
],
"@const/*": [
"./constants/*"
], ],
"#types/*": [ "#types/*": [
"./types/*" "./types/*"
@ -34,6 +31,7 @@
} }
}, },
"include": [ "include": [
"./**/*.ts" "./**/*.ts",
"./**/*.svelte"
] ]
} }

5673
app/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -8,12 +8,8 @@
"build": "encore production --progress", "build": "encore production --progress",
"lint:ts": "cd frontend && eslint .", "lint:ts": "cd frontend && eslint .",
"lint:ts:fix": "cd frontend && eslint . --fix", "lint:ts:fix": "cd frontend && eslint . --fix",
"lint:scss": "cd frontend/styles && stylelint .", "lint:scss": "cd frontend && stylelint .",
"lint:scss:fix": "cd frontend/styles && stylelint . --fix" "lint:scss:fix": "cd frontend && stylelint . --fix"
},
"dependencies": {
"easymde": "^2.18.0",
"flowbite": "^2.4.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.23.3", "@babel/core": "^7.23.3",
@ -33,19 +29,13 @@
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^9.0.0", "fork-ts-checker-webpack-plugin": "^9.0.0",
"ignore-loader": "^0.1.2", "ignore-loader": "^0.1.2",
"jquery": "^3.7.1",
"junit-report-merger": "^6.0.3",
"postcss": "^8.4.39",
"postcss-loader": "^7.3.4",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"regenerator-runtime": "^0.13.9", "regenerator-runtime": "^0.13.9",
"sass": "^1.69.4", "sass": "^1.69.4",
"sass-loader": "^13.3.2", "sass-loader": "^13.3.2",
"stylelint": "^16.2.1", "stylelint": "^16.2.1",
"stylelint-config-standard-scss": "^13.0.0", "stylelint-config-standard-scss": "^13.0.0",
"stylelint-config-tailwindcss": "^0.0.7",
"stylelint-scss": "^6.3.1", "stylelint-scss": "^6.3.1",
"tailwindcss": "^3.4.4",
"ts-loader": "^9.5.0", "ts-loader": "^9.5.0",
"tsconfig-paths-webpack-plugin": "^4.1.0", "tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript": "^5.2.2", "typescript": "^5.2.2",

View file

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

View file

@ -249,6 +249,30 @@
"config/packages/uid.yaml" "config/packages/uid.yaml"
] ]
}, },
"symfony/ux-icons": {
"version": "2.18",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "2.17",
"ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5"
},
"files": [
"assets/icons/symfony.svg"
]
},
"symfony/ux-twig-component": {
"version": "2.18",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "2.13",
"ref": "67814b5f9794798b885cec9d3f48631424449a01"
},
"files": [
"config/packages/twig_component.yaml"
]
},
"symfony/validator": { "symfony/validator": {
"version": "6.3", "version": "6.3",
"recipe": { "recipe": {

View file

@ -14,16 +14,9 @@ Encore
.setPublicPath('/build') .setPublicPath('/build')
.copyFiles({ .copyFiles({
from: './assets/', from: './assets/',
to: '../[path][name].[ext]', to: '../[path][name].[ext]'
pattern: /\.(?!scss|stylelint.*|json|woff).*$/
}) })
// Code Entries
.addEntry('app', './frontend/app.ts') .addEntry('app', './frontend/app.ts')
.addEntry('theme', './frontend/theme.ts')
// Style Entries
//.addStyleEntry('name', './frontend/styles/name.scss')
// Webpack // Webpack
.splitEntryChunks() .splitEntryChunks()
@ -38,9 +31,8 @@ Encore
config.useBuiltIns = 'usage'; config.useBuiltIns = 'usage';
config.corejs = '3.23'; config.corejs = '3.23';
}) })
.enableStimulusBridge('./frontend/controllers.json') .enableStimulusBridge('./frontend/controllers/controllers.json')
.enableSassLoader() .enableSassLoader()
.enablePostCssLoader()
.enableTypeScriptLoader(function tsconfigCallback(tsConfig) { .enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
tsConfig.configFile = TS_CONFIG_PATH; tsConfig.configFile = TS_CONFIG_PATH;
}) })
@ -53,7 +45,7 @@ Encore
proxy: 'http://localhost:8000', proxy: 'http://localhost:8000',
files: [ files: [
'frontend/**/*.twig', 'frontend/**/*.twig',
'frontend/**/*.scss', 'frontend/**/*.svelte',
'frontend/**/*.ts', 'frontend/**/*.ts',
], ],
reload: true, reload: true,