erb formatter

.vscode/extensions.json

@@ -4,6 +4,7 @@
         "aki77.rails-db-schema",
         "yzhang.markdown-all-in-one",
         "jgclark.vscode-todo-highlight",
-        "bradlc.vscode-tailwindcss"
+        "bradlc.vscode-tailwindcss",
+        "aliariff.vscode-erb-beautify"
     ]
 }

.vscode/settings.json

@@ -8,8 +8,19 @@
     "editor.semanticHighlighting.enabled": true, // Enable semantic highlighting
     "editor.formatOnType": true // Enable formatting while typing
   },
+  "[erb]": {
+    "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
+    "editor.formatOnSave": true
+  },
+  
   "emmet.includeLanguages": {
     "erb": "html"
   },
-  "debug.onTaskErrors": "abort"
+  "files.associations": {
+    "*.html.erb": "erb"
+  },
+
+  "debug.onTaskErrors": "abort",
+  "vscode-erb-beautify.keepBlankLines": 1
+  
 }

Gemfile

@@ -71,6 +71,7 @@ group :development do
   gem 'ruby-lsp-rails'
 
   gem 'amazing_print'
+  gem 'htmlbeautifier'
   gem 'rails_live_reload'
   gem 'rails_semantic_logger'
 end

Gemfile.lock

@@ -108,6 +108,7 @@ GEM
     ffi (1.16.3)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    htmlbeautifier (1.4.2)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     importmap-rails (2.0.1)
@@ -337,6 +338,7 @@ DEPENDENCIES
   capybara
   debug
   error_highlight (>= 0.4.0)
+  htmlbeautifier
   importmap-rails
   pg (~> 1.1)
   puma (>= 5.0)

README.md

@@ -10,7 +10,7 @@ gem install bundler
 bundle install
 ```
 
-## database.yml
+### database.yml
 
 ```yaml
 [...]
@@ -22,10 +22,20 @@ development:
   host: ct1.lxd
 [...]
 ```
-
 rails generate scaffold score name:string grade:integer
 rails db:migrate
 
+## TODO
+
+* [ ] Popup Notification
+* [x] Customized Turbo 
+  * [x] Progress Bar
+  * [ ] Confirm Method using HTML modal
+* [ ] Production Ready
+  * [ ] ./bin/prod
+  * [ ] Syslog 
+* [ ] Data Turbo Frame
+
 ## Featuring
 
 * [x] VsCodium development improvement
@@ -33,20 +43,29 @@ rails db:migrate
     * [x] Ruby-lsp-rails
   * [x] Ruby Db Schema
   * [x] Markdown All in One
-  * [x] TODO Highliter
+  * [x] TODO Highlighter
     * [x] run ` rails notes` to show up any TODO or FIXME
   * [x] Debugger friendly
     * [x] ask before killing ./bin/dev
 * [x] Tailwind CSS
 * [x] Rails Live Reload
   * [x] compliant with Tailwind build
+* [x] ERB Formatter
+  * [x] Keep 1 blank line
 
-## TODO
 
-* [x] Customized Turbo 
-  * [x] Progress Bar
-  * [ ] Confirm Method using HTML modal
-* [ ] Production Ready
-  * [ ] ./bin/prod
-  * [ ] Log
+## MAYBE
+
+* [ ] /bin/setup
+  * [ ] check debian12
+  * [ ] git clone from public repository 
+  * [ ] remove .git folder
+    * [ ] remove /bin/setup
+  * [ ] ask for main configuration (application_title, alpineJs)
+
+* [ ] ViewComponent
+  * [ ] https://viewcomponent.org/
+
+* [ ] Postgresql text search
+  * [ ] Fuzzy search with trigrams
 

app/controllers/scores_controller.rb

@@ -10,8 +10,8 @@ class ScoresController < ApplicationController
     # logger.info 'this is an information', { four: 4, five: 5 }
     # logger.debug BigDecimal('0.0003')
     # logger.warn 'scores are', @scores
-    logger.warn 'this is a warning'
-    logger.error 'this is an error message'
+    # logger.warn 'this is a warning'
+    # logger.error 'this is an error message'
     logger.info 'end of normal message'
     # logger.debug @scores
     # sleep 0.5
@@ -23,6 +23,8 @@ class ScoresController < ApplicationController
   # GET /scores/new
   def new
     @score = Score.new
+    flash.now[:notice] = 'Unique name is mandatory!'
+    flash.now[:alert] = 'Your book was not found'
     sleep 0.3
   end
 

app/views/layouts/_notification.html.erb

@@ -0,0 +1,44 @@
+<h2>NOTIFICATION BAR</h2>
+
+<nav class='relative w-full'>
+  <% if alert.present? %>
+    <div class="absolute inset-x-0 top-10">
+      <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg mx-auto">
+        <div class="w-2 bg-red-600">
+        </div>
+        <div class="w-full flex justify-between items-start px-2 py-2">
+          <div class="flex flex-col ml-2">
+            <label class="text-gray-800">Alert</label>
+            <p class="text-gray-500 "><%= alert %></p>
+          </div>
+          <a href="#">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <% if notice.present? %>
+    <div class="absolute inset-x-0 top-50">
+      <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
+        <div class="w-2 bg-green-600">
+        </div>
+        <div class="w-full flex justify-between items-start px-2 py-2">
+          <div class="flex flex-col ml-2">
+            <label class="text-gray-800">Notice</label>
+            <p class="text-gray-500 "><%= notice %></p>
+          </div>
+          <a href="#">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+</nav>

app/views/layouts/application.html.erb

@@ -12,7 +12,10 @@
   </head>
 
   <body>
-    <main class="m-8 flex">
+
+    <%=render '/layouts/notification' %>
+
+    <main class="m-8 flex flex-col">
       <%= yield %>
     </main>
   </body>

app/views/layouts/toaster/_toaster.html.erb

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      #snackbar {
+        visibility: hidden;
+        min-width: 250px;
+        margin-left: -125px;
+        background-color: #333;
+        color: #fff;
+        text-align: center;
+        border-radius: 2px;
+        padding: 16px;
+        position: fixed;
+        z-index: 1;
+        left: 50%;
+        top: 30px;
+        font-size: 17px;
+      }
+
+      #snackbar.show {
+        visibility: visible;
+        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+        animation: fadein 0.5s, fadeout 0.5s 2.5s;
+      }
+
+      @-webkit-keyframes fadein {
+        from {top: 0; opacity: 0;}
+        to {top: 30px; opacity: 1;}
+      }
+
+      @keyframes fadein {
+        from {top: 0; opacity: 0;}
+        to {top: 30px; opacity: 1;}
+      }
+
+      @-webkit-keyframes fadeout {
+        from {top: 30px; opacity: 1;}
+        to {top: 0; opacity: 0;}
+      }
+
+      @keyframes fadeout {
+        from {top: 30px; opacity: 1;}
+        to {top: 0; opacity: 0;}
+      }
+    </style>
+  </head>
+  <body>
+
+    <h2>Snackbar / Toast</h2>
+    <p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
+    <p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>
+
+    <button onclick="myFunction()">Show Snackbar</button>
+
+    <div id="snackbar">Some text some message..</div>
+
+    <script>
+      function myFunction() {
+        var x = document.getElementById("snackbar");
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+      }
+    </script>
+
+  </body>
+</html>

app/views/scores/_form.html.erb

@@ -2,7 +2,6 @@
   <% if score.errors.any? %>
     <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
       <h2><%= pluralize(score.errors.count, "error") %> prohibited this score from being saved:</h2>
-
       <ul>
         <% score.errors.each do |error| %>
           <li><%= error.full_message %></li>
@@ -10,17 +9,14 @@
       </ul>
     </div>
   <% end %>
-
   <div class="my-5">
     <%= form.label :name %>
     <%= form.text_field :name, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
-
   <div class="my-5">
     <%= form.label :grade %>
     <%= form.number_field :grade, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
-
   <div class="inline">
     <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
   </div>

app/views/scores/index.html.erb

@@ -1,7 +1,4 @@
-<div class="w-full bg-yellow-300 p-4">
-  <% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-  <% end %>
+<div class="w-full bg-cyan-200 p-4">
 
   <div class="flex justify-between items-center">
     <h1 class="font-bold text-4xl">Scores</h1>

app/views/scores/new.html.erb

@@ -2,6 +2,5 @@
   <h1 class="font-bold text-4xl">New score</h1>
 
   <%= render "form", score: @score %>
-
   <%= link_to "Back to scores", scores_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>

app/views/scores/show.html.erb

@@ -1,9 +1,5 @@
 <div class="mx-auto md:w-2/3 w-full flex">
   <div class="mx-auto">
-    <% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
-    <% end %>
-
     <%= render @score %>
 
     <%= link_to "Edit this score", edit_score_path(@score), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

lib/formatters/basic_formatter.rb

@@ -69,7 +69,7 @@ class BasicFormatter < SemanticLogger::Formatters::Color # rubocop:disable Metri
   def payload
     return unless log.payload
 
-    lines = log.payload.ai(ruby19_syntax: true, indent: 2).split("\n")
+    lines = log.payload.ai(ruby19_syntax: true, indent: 2, object_id: false).split("\n")
     first_line = lines.shift
     space_prefix = first_line.match(/^\s*/)
     lines = lines.map do |l|