erb formatter

4 months ago · e948e1011f
15 changed files with 170 additions and 31 deletions
--- a/.vscode/extensions.json
+++ b/.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"
    ]
 }
--- a/.vscode/settings.json
+++ b/.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
+  
 }
--- a/1
+++ b/1
@ -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
--- a/Gemfile.lock
+++ b/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)
--- a/README.md
+++ b/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

--- a/app/controllers/scores_controller.rb
+++ b/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

--- a/app/views/layouts/_notification.html.erb
+++ b/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>
--- a/app/views/layouts/application.html.erb
+++ b/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>
--- a/app/views/layouts/toaster/_toaster.html.erb
+++ b/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>
--- a/app/views/scores/_form.html.erb
+++ b/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>
--- a/app/views/scores/edit.html.erb
+++ b/app/views/scores/edit.html.erb
@ -1,8 +1,8 @@
 <div class="mx-auto md:w-2/3 w-full">
  <h1 class="font-bold text-4xl">Editing score</h1>

-    <%= render "form", score: @score %>
+  <%= render "form", score: @score %>

-    <%= link_to "Show this score", @score, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%= link_to "Show this score", @score, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
  <%= link_to "Back to scores", scores_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
 </div>
--- a/app/views/scores/index.html.erb
+++ b/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>
--- a/app/views/scores/new.html.erb
+++ b/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>
--- a/app/views/scores/show.html.erb
+++ b/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" %>
--- a/lib/formatters/basic_formatter.rb
+++ b/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|