feat(ui): Add some basic styling with tailwind

.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',
+        ],
+    ]);
+};