Browse Source

Add twig, stimulus and asset mapper

imwald
Nuša Pukšič 1 year ago
parent
commit
1d3659ea5c
  1. 6
      .env
  2. 5
      .gitignore
  3. 9
      assets/app.js
  4. 2
      assets/bootstrap.js
  5. 14
      assets/controllers.json
  6. 16
      assets/controllers/hello_controller.js
  7. 3
      assets/styles/app.css
  8. 10
      compose.yaml
  9. 18
      composer.json
  10. 1733
      composer.lock
  11. 5
      config/bundles.php
  12. 11
      config/packages/asset_mapper.yaml
  13. 28
      importmap.php
  14. 69
      symfony.lock
  15. 36
      templates/base.html.twig

6
.env

@ -36,9 +36,9 @@ DATABASE_URL="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database:5432/$ @@ -36,9 +36,9 @@ DATABASE_URL="postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@database:5432/$
###> symfony/mercure-bundle ###
# See https://symfony.com/doc/current/mercure.html#configuration
# The URL of the Mercure hub, used by the app to publish updates (can be a local URL)
CADDY_MERCURE_URL=https://newsroom-php/.well-known/mercure
MERCURE_URL=https://newsroom-php/.well-known/mercure
# The public URL of the Mercure hub, used by the browser to connect
CADDY_MERCURE_PUBLIC_URL=https://${SERVER_NAME}/.well-known/mercure
MERCURE_PUBLIC_URL=https://${SERVER_NAME}/.well-known/mercure
# The secret used to sign the JWTs
CADDY_MERCURE_JWT_SECRET="!NotSoSecretMercureHubJWTSecretKey!"
MERCURE_JWT_SECRET="!NotSoSecretMercureHubJWTSecretKey!"
###< symfony/mercure-bundle ###

5
.gitignore vendored

@ -8,3 +8,8 @@ @@ -8,3 +8,8 @@
/var/
/vendor/
###< symfony/framework-bundle ###
###> symfony/asset-mapper ###
/public/assets/
/assets/vendor/
###< symfony/asset-mapper ###

9
assets/app.js

@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
/*
* Welcome to your app's main JavaScript file!
*
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
import './styles/app.css';
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

2
assets/bootstrap.js vendored

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

14
assets/controllers.json

@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
{
"controllers": {
"@symfony/ux-live-component": {
"live": {
"enabled": true,
"fetch": "eager",
"autoimport": {
"@symfony/ux-live-component/dist/live.min.css": true
}
}
}
},
"entrypoints": []
}

16
assets/controllers/hello_controller.js

@ -0,0 +1,16 @@ @@ -0,0 +1,16 @@
import { Controller } from '@hotwired/stimulus';
/*
* This is an example Stimulus controller!
*
* Any element with a data-controller="hello" attribute will cause
* this controller to be executed. The name "hello" comes from the filename:
* hello_controller.js -> "hello"
*
* Delete this file or adapt it for your use!
*/
export default class extends Controller {
connect() {
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
}
}

3
assets/styles/app.css

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
body {
background-color: skyblue;
}

10
compose.yaml

@ -6,14 +6,14 @@ services: @@ -6,14 +6,14 @@ services:
dockerfile: Dockerfile
environment:
SERVER_NAME: ${SERVER_NAME:-localhost}, php:80
MERCURE_PUBLISHER_JWT_KEY: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
MERCURE_SUBSCRIBER_JWT_KEY: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
MERCURE_PUBLISHER_JWT_KEY: ${MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
MERCURE_SUBSCRIBER_JWT_KEY: ${MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
# Run "composer require symfony/orm-pack" to install and configure Doctrine ORM
DATABASE_URL: postgresql://${POSTGRES_USER:-app}:${POSTGRES_PASSWORD:-!ChangeMe!}@database:5432/${POSTGRES_DB:-app}?serverVersion=${POSTGRES_VERSION:-15}&charset=${POSTGRES_CHARSET:-utf8}
# Run "composer require symfony/mercure-bundle" to install and configure the Mercure integration
MERCURE_URL: ${CADDY_MERCURE_URL:-http://php/.well-known/mercure}
MERCURE_PUBLIC_URL: ${CADDY_MERCURE_PUBLIC_URL:-https://${SERVER_NAME:-localhost}/.well-known/mercure}
MERCURE_JWT_SECRET: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
MERCURE_URL: ${MERCURE_URL:-http://php/.well-known/mercure}
MERCURE_PUBLIC_URL: ${MERCURE_PUBLIC_URL:-https://${SERVER_NAME:-localhost}/.well-known/mercure}
MERCURE_JWT_SECRET: ${MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
volumes:
- caddy_data:/data
- caddy_config:/config

18
composer.json

@ -1,8 +1,8 @@ @@ -1,8 +1,8 @@
{
"name": "symfony/skeleton",
"name": "decent-newsroom/newsroom",
"type": "project",
"license": "MIT",
"description": "A minimal Symfony project recommended to create bare bones applications",
"description": "A decentralised newsroom",
"minimum-stability": "stable",
"prefer-stable": true,
"require": {
@ -14,13 +14,22 @@ @@ -14,13 +14,22 @@
"doctrine/doctrine-migrations-bundle": "^3.3",
"doctrine/orm": "^3.3",
"runtime/frankenphp-symfony": "^0.2.0",
"symfony/asset": "7.1.*",
"symfony/asset-mapper": "7.1.*",
"symfony/console": "7.1.*",
"symfony/dotenv": "7.1.*",
"symfony/flex": "^2",
"symfony/form": "7.1.*",
"symfony/framework-bundle": "7.1.*",
"symfony/intl": "7.1.*",
"symfony/mercure-bundle": "^0.3.9",
"symfony/runtime": "7.1.*",
"symfony/yaml": "7.1.*"
"symfony/stimulus-bundle": "^2.21",
"symfony/twig-bundle": "7.1.*",
"symfony/ux-live-component": "^2.21",
"symfony/yaml": "7.1.*",
"twig/extra-bundle": "^2.12|^3.0",
"twig/twig": "^3.15"
},
"config": {
"allow-plugins": {
@ -53,7 +62,8 @@ @@ -53,7 +62,8 @@
"scripts": {
"auto-scripts": {
"cache:clear": "symfony-cmd",
"assets:install %PUBLIC_DIR%": "symfony-cmd"
"assets:install %PUBLIC_DIR%": "symfony-cmd",
"importmap:install": "symfony-cmd"
},
"post-install-cmd": [
"@auto-scripts"

1733
composer.lock generated

File diff suppressed because it is too large Load Diff

5
config/bundles.php

@ -5,4 +5,9 @@ return [ @@ -5,4 +5,9 @@ return [
Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
];

11
config/packages/asset_mapper.yaml

@ -0,0 +1,11 @@ @@ -0,0 +1,11 @@
framework:
asset_mapper:
# The paths to make available to the asset mapper.
paths:
- assets/
missing_import_mode: strict
when@prod:
framework:
asset_mapper:
missing_import_mode: warn

28
importmap.php

@ -0,0 +1,28 @@ @@ -0,0 +1,28 @@
<?php
/**
* Returns the importmap for this application.
*
* - "path" is a path inside the asset mapper system. Use the
* "debug:asset-map" command to see the full list of paths.
*
* - "entrypoint" (JavaScript only) set to true for any module that will
* be used as an "entrypoint" (and passed to the importmap() Twig function).
*
* The "importmap:require" command can be used to add new entries to this file.
*/
return [
'app' => [
'path' => './assets/app.js',
'entrypoint' => true,
],
'@hotwired/stimulus' => [
'version' => '3.2.2',
],
'@symfony/stimulus-bundle' => [
'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
],
'@symfony/ux-live-component' => [
'path' => './vendor/symfony/ux-live-component/assets/dist/live_controller.js',
],
];

69
symfony.lock

@ -26,6 +26,21 @@ @@ -26,6 +26,21 @@
"./migrations/.gitignore"
]
},
"symfony/asset-mapper": {
"version": "7.1",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "6.4",
"ref": "5ad1308aa756d58f999ffbe1540d1189f5d7d14a"
},
"files": [
"./assets/app.js",
"./assets/styles/app.css",
"./config/packages/asset_mapper.yaml",
"./importmap.php"
]
},
"symfony/console": {
"version": "7.1",
"recipe": {
@ -93,5 +108,59 @@ @@ -93,5 +108,59 @@
"config/packages/routing.yaml",
"config/routes.yaml"
]
},
"symfony/stimulus-bundle": {
"version": "2.21",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "2.13",
"ref": "6acd9ff4f7fd5626d2962109bd4ebab351d43c43"
},
"files": [
"./assets/bootstrap.js",
"./assets/controllers.json",
"./assets/controllers/hello_controller.js"
]
},
"symfony/twig-bundle": {
"version": "7.1",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "6.4",
"ref": "cab5fd2a13a45c266d45a7d9337e28dee6272877"
},
"files": [
"./config/packages/twig.yaml",
"./templates/base.html.twig"
]
},
"symfony/ux-live-component": {
"version": "2.21",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "2.6",
"ref": "73e69baf18f47740d6f58688c5464b10cdacae06"
},
"files": [
"./config/routes/ux_live_component.yaml"
]
},
"symfony/ux-twig-component": {
"version": "2.21",
"recipe": {
"repo": "github.com/symfony/recipes",
"branch": "main",
"version": "2.13",
"ref": "67814b5f9794798b885cec9d3f48631424449a01"
},
"files": [
"./config/packages/twig_component.yaml"
]
},
"twig/extra-bundle": {
"version": "v3.15.0"
}
}

36
templates/base.html.twig

@ -0,0 +1,36 @@ @@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Newsroom{% endblock %}</title>
{# Link to CSS using the asset manager #}
<link rel="stylesheet" href="{{ asset('build/styles.css') }}">
{% block stylesheets %}
{# Additional styles can be added by child templates here #}
{% endblock %}
</head>
<body>
<header>
</header>
<main>
{% block body %}
{# Main content goes here #}
{% endblock %}
</main>
<footer>
<p>&copy; {{ "now"|date("Y") }} Newsroom</p>
</footer>
{# Link to JavaScript using the asset manager #}
<script src="{{ asset('build/scripts.js') }}"></script>
{% block javascripts %}
{# Additional scripts can be added by child templates here #}
{% endblock %}
</body>
</html>
Loading…
Cancel
Save