NOTICKET: Switch to Symfony UX Svelte
|
@ -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"
|
||||||
|
|
|
@ -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'
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,9 +25,10 @@
|
||||||
"symfony/framework-bundle": "7.1.*",
|
"symfony/framework-bundle": "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-svelte": "^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.*",
|
||||||
|
|
82
app/composer.lock
generated
|
@ -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": "a72529aa87f9a0382e7004cb5585fcd0",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "dflydev/dot-access-data",
|
"name": "dflydev/dot-access-data",
|
||||||
|
@ -5786,6 +5786,86 @@
|
||||||
],
|
],
|
||||||
"time": "2024-05-31T14:57:53+00:00"
|
"time": "2024-05-31T14:57:53+00:00"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "symfony/ux-svelte",
|
||||||
|
"version": "v2.18.0",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/symfony/ux-svelte.git",
|
||||||
|
"reference": "ad7b8388be55fbbe79f8d32bdc17971fbed2196f"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/symfony/ux-svelte/zipball/ad7b8388be55fbbe79f8d32bdc17971fbed2196f",
|
||||||
|
"reference": "ad7b8388be55fbbe79f8d32bdc17971fbed2196f",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"php": ">=8.1",
|
||||||
|
"symfony/stimulus-bundle": "^2.9.1"
|
||||||
|
},
|
||||||
|
"require-dev": {
|
||||||
|
"symfony/asset-mapper": "^6.3|^7.0",
|
||||||
|
"symfony/finder": "^5.4|^6.2|^7.0",
|
||||||
|
"symfony/framework-bundle": "^5.4|^6.2|^7.0",
|
||||||
|
"symfony/phpunit-bridge": "^5.4|^6.2|^7.0",
|
||||||
|
"symfony/twig-bundle": "^5.4|^6.2|^7.0",
|
||||||
|
"symfony/var-dumper": "^5.4|^6.2|^7.0"
|
||||||
|
},
|
||||||
|
"type": "symfony-bundle",
|
||||||
|
"extra": {
|
||||||
|
"thanks": {
|
||||||
|
"name": "symfony/ux",
|
||||||
|
"url": "https://github.com/symfony/ux"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"autoload": {
|
||||||
|
"psr-4": {
|
||||||
|
"Symfony\\UX\\Svelte\\": "src/"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"MIT"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Titouan Galopin",
|
||||||
|
"email": "galopintitouan@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Thomas Choquet",
|
||||||
|
"email": "thomas.choquet.pro@gmail.com"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Symfony Community",
|
||||||
|
"homepage": "https://symfony.com/contributors"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Integration of Svelte in Symfony",
|
||||||
|
"homepage": "https://symfony.com",
|
||||||
|
"keywords": [
|
||||||
|
"symfony-ux"
|
||||||
|
],
|
||||||
|
"support": {
|
||||||
|
"source": "https://github.com/symfony/ux-svelte/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/validator",
|
"name": "symfony/validator",
|
||||||
"version": "v7.1.2",
|
"version": "v7.1.2",
|
||||||
|
|
|
@ -16,4 +16,5 @@ 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\Svelte\SvelteBundle::class => ['all' => true],
|
||||||
];
|
];
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -5,13 +5,20 @@
|
||||||
},
|
},
|
||||||
"extends": [
|
"extends": [
|
||||||
"eslint:recommended",
|
"eslint:recommended",
|
||||||
"plugin:@typescript-eslint/strict"
|
"plugin:@typescript-eslint/strict",
|
||||||
|
"plugin:svelte/recommended"
|
||||||
],
|
],
|
||||||
"parser": "@typescript-eslint/parser",
|
"parser": "@typescript-eslint/parser",
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": "latest",
|
"ecmaVersion": "latest",
|
||||||
"sourceType": "module"
|
"sourceType": "module"
|
||||||
},
|
},
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": ["*.svelte"],
|
||||||
|
"parser": "svelte-eslint-parser"
|
||||||
|
}
|
||||||
|
],
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"@typescript-eslint"
|
"@typescript-eslint"
|
||||||
],
|
],
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": [
|
"extends": [
|
||||||
"stylelint-config-standard-scss",
|
"stylelint-config-standard-scss",
|
||||||
"stylelint-config-tailwindcss/scss"
|
|
||||||
],
|
],
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"stylelint-scss"
|
"stylelint-scss"
|
|
@ -1,3 +1,2 @@
|
||||||
import '@styles/app.scss';
|
|
||||||
import '@pkg/stimulus';
|
import '@pkg/stimulus';
|
||||||
import '@pkg/flowbite';
|
import '@pkg/svelte';
|
||||||
|
|
6
app/frontend/components/Bye.svelte
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
<script>
|
||||||
|
console.log('Bye');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h2>Bye</h2>
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
declare enum HttpCodes {
|
|
||||||
OK = 200
|
|
||||||
}
|
|
||||||
|
|
||||||
export {HttpCodes};
|
|
|
@ -1,8 +0,0 @@
|
||||||
const THEME_LOCAL_STORAGE_ID = 'theme';
|
|
||||||
|
|
||||||
enum Theme {
|
|
||||||
LIGHT = 'light',
|
|
||||||
DARK = 'dark'
|
|
||||||
}
|
|
||||||
|
|
||||||
export {THEME_LOCAL_STORAGE_ID, Theme};
|
|
|
@ -1,4 +0,0 @@
|
||||||
{
|
|
||||||
"controllers": [],
|
|
||||||
"entrypoints": []
|
|
||||||
}
|
|
12
app/frontend/controllers/controllers.json
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"controllers": {
|
||||||
|
"@symfony/ux-svelte": {
|
||||||
|
"svelte": {
|
||||||
|
"main": "dist/render_controller.js",
|
||||||
|
"fetch": "eager",
|
||||||
|
"enabled": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"entrypoints": []
|
||||||
|
}
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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');
|
|
|
@ -1,4 +0,0 @@
|
||||||
import 'flowbite';
|
|
||||||
import {initFlowbite} from 'flowbite';
|
|
||||||
|
|
||||||
initFlowbite();
|
|
5
app/frontend/packages/svelte.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
|
||||||
|
|
||||||
|
registerSvelteControllerComponents(
|
||||||
|
require.context('../components', true, /\.svelte$/)
|
||||||
|
);
|
|
@ -1,24 +0,0 @@
|
||||||
@import "components/header";
|
|
||||||
@import "components/burger-menu";
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
hr {
|
|
||||||
@apply h-px my-2 border-0;
|
|
||||||
@apply bg-gray-300 dark:bg-gray-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
&__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
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -15,14 +15,13 @@
|
||||||
<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">
|
<body {{ stimulus_controller('test') }}>
|
||||||
{% include 'components/header.html.twig' %}
|
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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 %}
|
|
|
@ -1,14 +0,0 @@
|
||||||
<header id="header">
|
|
||||||
<img
|
|
||||||
id="header__logo"
|
|
||||||
src="{{ asset("icons/logo/logo.svg") }}"
|
|
||||||
alt="Euph Logo"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
id="header__logo-dark"
|
|
||||||
src="{{ asset("icons/logo/dark-logo.svg") }}"
|
|
||||||
alt="Euph Logo"
|
|
||||||
>
|
|
||||||
<h1 id="header__logo-text">Euph</h1>
|
|
||||||
{% include 'components/burger-menu.html.twig' %}
|
|
||||||
</header>
|
|
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -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 |
5
app/frontend/templates/index.html.twig
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
{% extends 'base.html.twig' %}
|
||||||
|
{% block body %}
|
||||||
|
<h1 {{ stimulus_controller('hello') }}>Hello World</h1>
|
||||||
|
<div {{ svelte_component('Bye') }}></div>
|
||||||
|
{% endblock %}
|
|
@ -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 %}
|
|
|
@ -1,3 +0,0 @@
|
||||||
import {initTheme} from '@domain/theme';
|
|
||||||
|
|
||||||
initTheme();
|
|
|
@ -13,8 +13,8 @@
|
||||||
"~*": [
|
"~*": [
|
||||||
".*"
|
".*"
|
||||||
],
|
],
|
||||||
"@styles/*": [
|
"@components/*": [
|
||||||
"./styles/*"
|
"./controllers/*"
|
||||||
],
|
],
|
||||||
"@controllers/*": [
|
"@controllers/*": [
|
||||||
"./controllers/*"
|
"./controllers/*"
|
||||||
|
@ -22,18 +22,13 @@
|
||||||
"@pkg/*": [
|
"@pkg/*": [
|
||||||
"./packages/*"
|
"./packages/*"
|
||||||
],
|
],
|
||||||
"@domain/*": [
|
|
||||||
"./domain/*"
|
|
||||||
],
|
|
||||||
"@const/*": [
|
|
||||||
"./constants/*"
|
|
||||||
],
|
|
||||||
"#types/*": [
|
"#types/*": [
|
||||||
"./types/*"
|
"./types/*"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"./**/*.ts"
|
"./**/*.ts",
|
||||||
|
"./**/*.svelte"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
1826
app/package-lock.json
generated
|
@ -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",
|
||||||
|
@ -22,6 +18,7 @@
|
||||||
"@hotwired/stimulus": "^3.0.0",
|
"@hotwired/stimulus": "^3.0.0",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
"@symfony/stimulus-bridge": "^3.2.0",
|
"@symfony/stimulus-bridge": "^3.2.0",
|
||||||
|
"@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets",
|
||||||
"@symfony/webpack-encore": "^4.0.0",
|
"@symfony/webpack-encore": "^4.0.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||||
"@typescript-eslint/parser": "^6.10.0",
|
"@typescript-eslint/parser": "^6.10.0",
|
||||||
|
@ -30,22 +27,19 @@
|
||||||
"browser-sync-webpack-plugin": "^2.3.0",
|
"browser-sync-webpack-plugin": "^2.3.0",
|
||||||
"core-js": "^3.23.0",
|
"core-js": "^3.23.0",
|
||||||
"eslint": "^8.53.0",
|
"eslint": "^8.53.0",
|
||||||
|
"eslint-plugin-svelte": "^2.42.0",
|
||||||
"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",
|
"svelte": "^4.0",
|
||||||
|
"svelte-loader": "^3.2.3",
|
||||||
"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",
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
|
@ -249,6 +249,18 @@
|
||||||
"config/packages/uid.yaml"
|
"config/packages/uid.yaml"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"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/validator": {
|
"symfony/validator": {
|
||||||
"version": "6.3",
|
"version": "6.3",
|
||||||
"recipe": {
|
"recipe": {
|
||||||
|
|
|
@ -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,9 @@ 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()
|
.enableSvelte()
|
||||||
.enablePostCssLoader()
|
//.enableSassLoader()
|
||||||
.enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
|
.enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
|
||||||
tsConfig.configFile = TS_CONFIG_PATH;
|
tsConfig.configFile = TS_CONFIG_PATH;
|
||||||
})
|
})
|
||||||
|
@ -53,7 +46,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,
|
||||||
|
@ -68,5 +61,6 @@ config.resolve.plugins = [
|
||||||
configFile: TS_CONFIG_PATH,
|
configFile: TS_CONFIG_PATH,
|
||||||
})
|
})
|
||||||
];
|
];
|
||||||
|
config.resolve.conditionNames = ['browser', 'import', 'svelte']
|
||||||
|
|
||||||
module.exports = config;
|
module.exports = config;
|
||||||
|
|