feat(ui): Add some basic styling with tailwind

.github/workflows/ci.yml

@@ -47,5 +47,10 @@ jobs:
         run: |
           php bin/console doctrine:migrations:migrate --no-interaction --env=test
 
+      - name: Build assets
+        run: |
+          yarn install
+          yarn encore production
+
       - name: Test
         run: php bin/phpunit --no-interaction

.github/workflows/deploy.yml

@@ -30,6 +30,8 @@ jobs:
             export APP_ENV=prod
             composer install --no-dev -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist -o
             composer dump-env prod
+            yarn install
+            yarn encore production
             export APP_DEBUG=0
             export PWD=$(pwd)
             envsubst < config/supervisor/hydro-tcp-server.ini > ~/etc/services.d/hydro-tcp-server.ini

.gitignore

@@ -34,3 +34,10 @@ phpstan.neon
 !/public/data/.gitignore
 /public/data/*.*
 ###< ckrack/hydrometer-public-server ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

README.md

@@ -11,18 +11,20 @@ Supported:
 
 - ~~Add console command to run tcp server~~
 - ~~Implement dispatch of `AddDataCommand` in console~~
-- Implement projections for `HydrometerAddedEvent` (Save HTML File)
 - ~~Implement projections for `HydrometerDataReceivedEvent` (just save to a json file named by hydrometer-id)~~
 - ~~Implement displaying data with `c3.js`~~
 - Document event flows
-- Give better instructions on `new hydrometer` page.
+- ~~Give better instructions on `new hydrometer` page.~~
 - Add and implement `DataArchivedEvent` (just copy the data to a newly generated id)
 
 ## Example data
 
+Push to tcp:
+
 `telnet 127.0.0.1 10860`
 
-```json
+```bash
+telnet 127.0.0.1 10860 <<JSON
 {
     "name": "eSpindel",
     "ID": "123456",
@@ -32,9 +34,11 @@ Supported:
     "gravity": 12.89,
     "token": "01HQ1E4H91MNFPPH905TMN8BDJ"
 }
+JSON
 ```
 
-```json
+```bash
+telnet 127.0.0.1 10860 <<JSON
 {
     "name": "eSpindel",
     "ID": "123456",
@@ -44,9 +48,11 @@ Supported:
     "gravity": 10.98,
     "token": "01HQ1E4H91MNFPPH905TMN8BDJ"
 }
+JSON
 ```
 
-```json
+```bash
+telnet 127.0.0.1 10860 <<JSON
 {
     "name": "eSpindel",
     "ID": "123456",
@@ -56,9 +62,11 @@ Supported:
     "gravity": 7.65,
     "token": "01HQ1E4H91MNFPPH905TMN8BDJ"
 }
+JSON
 ```
 
-```json
+```bash
+telnet 127.0.0.1 10860 <<JSON
 {
     "name": "eSpindel",
     "ID": "123456",
@@ -68,4 +76,5 @@ Supported:
     "gravity": 4.32,
     "token": "01HQ1E4H91MNFPPH905TMN8BDJ"
 }
+JSON
 ```

assets/app.js

@@ -0,0 +1,9 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.css';

assets/styles/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

composer.json

@@ -42,6 +42,7 @@
     "symfony/runtime": "~7.0.0",
     "symfony/twig-bundle": "~7.0.0",
     "symfony/uid": "~7.0.0",
+    "symfony/webpack-encore-bundle": "^2.1",
     "symfony/yaml": "~7.0.0",
     "twig/extra-bundle": "^2.12 || ^3.0",
     "twig/twig": "^2.12 || ^3.0"

config/bundles.php

@@ -1,19 +1,12 @@
 <?php
 
-use Doctrine\Bundle\DoctrineBundle\DoctrineBundle;
-use Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle;
-use Symfony\Bundle\FrameworkBundle\FrameworkBundle;
-use Symfony\Bundle\MakerBundle\MakerBundle;
-use Symfony\Bundle\MonologBundle\MonologBundle;
-use Symfony\Bundle\TwigBundle\TwigBundle;
-use Twig\Extra\TwigExtraBundle\TwigExtraBundle;
-
 return [
-    FrameworkBundle::class => ['all' => true],
-    MonologBundle::class => ['all' => true],
-    MakerBundle::class => ['dev' => true],
-    TwigBundle::class => ['all' => true],
-    TwigExtraBundle::class => ['all' => true],
-    DoctrineBundle::class => ['all' => true],
-    DoctrineMigrationsBundle::class => ['all' => true],
+    Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
+    Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
+    Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
+    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
+    Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
+    Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

config/packages/webpack_encore.php

@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
+
+return static function (ContainerConfigurator $containerConfigurator): void {
+    $containerConfigurator->extension('webpack_encore', [
+        'output_path' => '%kernel.project_dir%/public/build',
+        'script_attributes' => [
+            'defer' => true,
+        ],
+    ]);
+
+    $containerConfigurator->extension('framework', [
+        'assets' => [
+            'json_manifest_path' => '%kernel.project_dir%/public/build/manifest.json',
+        ],
+    ]);
+};

package.json

@@ -0,0 +1,24 @@
+{
+    "devDependencies": {
+        "@babel/core": "^7.17.0",
+        "@babel/preset-env": "^7.16.0",
+        "@symfony/webpack-encore": "^4.0.0",
+        "autoprefixer": "^10.4.17",
+        "core-js": "^3.23.0",
+        "postcss": "^8.4.35",
+        "postcss-loader": "^7.3.4",
+        "regenerator-runtime": "^0.13.9",
+        "tailwindcss": "^3.4.1",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-notifier": "^1.15.0"
+    },
+    "license": "UNLICENSED",
+    "private": true,
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    }
+}

postcss.config.js

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

src/Controller/CreatedHydrometerController.php

@@ -12,7 +12,7 @@ class CreatedHydrometerController extends AbstractController
     #[Route('/created/{token}', name: 'app_created_hydrometer')]
     public function __invoke(Ulid $token): Response
     {
-        return $this->render('hydrometer/new_hydrometer.html.twig', [
+        return $this->render('hydrometer/created_hydrometer.html.twig', [
             'hydrometer_id' => $token,
         ]);
     }

symfony.lock

@@ -211,6 +211,22 @@
             "ref": "0df5844274d871b37fc3816c57a768ffc60a43a5"
         }
     },
+    "symfony/webpack-encore-bundle": {
+        "version": "2.1",
+        "recipe": {
+            "repo": "github.com/schranz-php-recipes/symfony-recipes-php",
+            "branch": "main",
+            "version": "2.0",
+            "ref": "6aa7853cad4af280b9352b4fb12c459d874d0fec"
+        },
+        "files": [
+            "assets/app.js",
+            "assets/styles/app.css",
+            "config/packages/webpack_encore.php",
+            "package.json",
+            "webpack.config.js"
+        ]
+    },
     "twig/extra-bundle": {
         "version": "v3.8.0"
     }

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./assets/**/*.js",
+    "./templates/**/*.html.twig",
+  ],  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

templates/base.html.twig

@@ -6,9 +6,11 @@
     <link rel="icon"
           href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
     {% block stylesheets %}
+            {{ encore_entry_link_tags('app') }}
     {% endblock %}
 
     {% block javascripts %}
+            {{ encore_entry_script_tags('app') }}
     {% endblock %}
 </head>
 <body>

templates/hydrometer/created_hydrometer.html.twig

@@ -0,0 +1,38 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}New Hydrometer{% endblock %}
+
+{% block body %}
+<div class="mx-[auto] my-[1em] max-w-[800px] w-[95%]">
+    <div class="px-4 sm:px-0">
+        <h1 class="text-xl font-semibold leading-7 text-gray-900">New hydrometer added ✅</h1>
+        <p class="intro mt-4 max-w-2xl text-sm leading-6 text-gray-500">
+            Your new hydrometer token is: <code class="ulid bg-[#F5F5F5] px-[6px] py-[2px]">{{ hydrometer_id }}</code><br>
+        </p>
+        <div class="pt-6 pb-8 mt-6 mb-8 border-b border-t border-gray-100">
+            <a class="px-4 py-3 text-sm text-white font-light tracking-wider bg-slate-800 hover:bg-slate-600 rounded" href="{{ path('app_show_data', {hydrometerId: hydrometer_id}) }}">Show data</a>
+        </div>
+    </div>
+    <h2 class="text-base font-semibold leading-5 text-gray-900">Setup instructions</h2>
+    <div class="mt-6 border-t border-gray-100">
+        <div class="divide-y divide-gray-100">
+            <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-gray-900">{% trans %}Token{% endtrans %}</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ hydrometer_id }}</dd>
+            </div>
+            <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-gray-900">{% trans %}Service type{% endtrans %}</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{% trans %}TCP{% endtrans %}</dd>
+            </div>
+            <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-gray-900">{% trans %}Server address{% endtrans %}</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ app.request.getHttpHost() }}</dd>
+            </div>
+            <div class="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-gray-900">{% trans %}Server port{% endtrans %}</dt>
+                <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{{ app.request.server.get('TCP_API_PORT') }}</dd>
+            </div>
+        </div>
+    </div>
+</div>
+    {% endblock %}