From 1bf3b8a40b44c73c4b4653d79bb4e5fdd91b9689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= Date: Sun, 3 Dec 2023 02:20:10 +0100 Subject: [PATCH 1/9] Rollback Commonmarker to a version with AST manipulation --- Gemfile | 3 ++- Gemfile.lock | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/Gemfile b/Gemfile index c125751c..8ac745e0 100644 --- a/Gemfile +++ b/Gemfile @@ -8,7 +8,8 @@ gem "rails", "7.1.1" gem "blazer", "~> 3.0" gem "bootsnap", require: false # Reduces boot times through caching; required in config/boot.rb -gem "commonmarker", ">= 1.0.0.pre11", "< 2" +gem "commonmarker", "~> 0.23.10", "< 1" +gem "rouge", "~> 4.2" gem "devise", "~> 4.9" gem "good_job", "~> 3.21" gem "humanize", "~> 2.5" diff --git a/Gemfile.lock b/Gemfile.lock index 66b48894..b32618f0 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -104,9 +104,7 @@ GEM thor (~> 1.0) byebug (11.1.3) chartkick (5.0.4) - commonmarker (1.0.0.pre11-arm64-darwin) - commonmarker (1.0.0.pre11-x86_64-darwin) - commonmarker (1.0.0.pre11-x86_64-linux) + commonmarker (0.23.10) concurrent-ruby (1.2.2) connection_pool (2.4.1) crack (0.4.5) @@ -319,6 +317,7 @@ GEM reverse_markdown (2.1.1) nokogiri rexml (3.2.6) + rouge (4.2.0) rspec-core (3.12.2) rspec-support (~> 3.12.0) rspec-expectations (3.12.3) @@ -468,7 +467,7 @@ DEPENDENCIES brakeman (~> 6.0) bundler-audit (~> 0.9) byebug - commonmarker (>= 1.0.0.pre11, < 2) + commonmarker (~> 0.23.10, < 1) devise (~> 4.9) dotenv-rails (~> 2.8) erb_lint (~> 0.5) @@ -485,6 +484,7 @@ DEPENDENCIES puma (~> 6.4) rack-mini-profiler (~> 3.1) rails (= 7.1.1) + rouge (~> 4.2) rspec-rails (~> 6.0) rubocop (~> 1.56) rubocop-performance (~> 1.19) From 408fb4e33a0200c066ccda286f105ed7e65af21b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= Date: Sun, 3 Dec 2023 02:21:50 +0100 Subject: [PATCH 2/9] Move from Commonmarker v1.0 to CommonMarker v0.23 + custom Rouge handling --- app/helpers/application_helper.rb | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index f8f8cac2..2021c8b3 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -19,16 +19,22 @@ def messages_sanitizer(text) DEFAULT_THEME = "base16-ocean.dark" def render_markdown(commonmarkdown, default_language: nil) - config = {} + ast = CommonMarker.render_doc(commonmarkdown) + ast.walk do |node| + next unless node.type == :code_block - config[:options] = {} - config[:options][:parse] = { default_info_string: default_language }.compact - config[:options][:render] = { escape: true, github_pre_lang: true } + language = node.fence_info.presence || default_language + lexer = ::Rouge::Lexer.find_fancy(language) || ::Rouge::Lexers::PlainText.new - config[:plugins] = { - syntax_highlighter: { theme: DEFAULT_THEME } - } + formatter = Rouge::Formatters::HTML.new + code_html = formatter.format(lexer.lex(node.string_content)) + html = %(
#{code_html}
) + new_node = ::CommonMarker::Node.new(:html) + new_node.string_content = html - Commonmarker.to_html(commonmarkdown, **config) + node.insert_before(new_node) + node.delete + end + ast.to_html(:UNSAFE) end end From 1ece930d244e104da79d491d315b35743804c5c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= Date: Sun, 3 Dec 2023 02:22:14 +0100 Subject: [PATCH 3/9] Add back Rouge CSS styling --- .../stylesheets/application.tailwind.css | 3 +- app/assets/stylesheets/rouge.css | 81 +++++++++++++++++++ 2 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/rouge.css diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index e9051391..a4df3353 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -1,5 +1,6 @@ @import "fonts"; @import "font_awesome"; +@import "rouge"; @import "tailwindcss/base"; @import "tailwindcss/components"; @@ -49,7 +50,7 @@ } .code-highlight pre::before { - @apply absolute top-0 right-0 border-b border-l rounded-bl border-aoc-gray-darker px-2 capitalize font-semibold; + @apply absolute top-0 right-0 border-b border-l rounded-bl border-aoc-gray-darker px-2 font-semibold; content: attr(lang); } diff --git a/app/assets/stylesheets/rouge.css b/app/assets/stylesheets/rouge.css new file mode 100644 index 00000000..7acd3796 --- /dev/null +++ b/app/assets/stylesheets/rouge.css @@ -0,0 +1,81 @@ +.code-highlight table td { padding: 5px; } +.code-highlight table pre { margin: 0; } +.code-highlight, .code-highlight .w { + color: #d0d0d0; + background-color: #151515; +} +.code-highlight .err { + color: #151515; + background-color: #ac4142; +} +.code-highlight .c, .code-highlight .ch, .code-highlight .cd, .code-highlight .cm, .code-highlight .cpf, .code-highlight .c1, .code-highlight .cs { + color: #505050; +} +.code-highlight .cp { + color: #f4bf75; +} +.code-highlight .nt { + color: #f4bf75; +} +.code-highlight .o, .code-highlight .ow { + color: #d0d0d0; +} +.code-highlight .p, .code-highlight .pi { + color: #d0d0d0; +} +.code-highlight .gi { + color: #90a959; +} +.code-highlight .gd { + color: #ac4142; +} +.code-highlight .gh { + color: #6a9fb5; + background-color: #151515; + font-weight: bold; +} +.code-highlight .k, .code-highlight .kn, .code-highlight .kp, .code-highlight .kr, .code-highlight .kv { + color: #aa759f; +} +.code-highlight .kc { + color: #d28445; +} +.code-highlight .kt { + color: #d28445; +} +.code-highlight .kd { + color: #d28445; +} +.code-highlight .s, .code-highlight .sb, .code-highlight .sc, .code-highlight .dl, .code-highlight .sd, .code-highlight .s2, .code-highlight .sh, .code-highlight .sx, .code-highlight .s1 { + color: #90a959; +} +.code-highlight .sa { + color: #aa759f; +} +.code-highlight .sr { + color: #75b5aa; +} +.code-highlight .si { + color: #8f5536; +} +.code-highlight .se { + color: #8f5536; +} +.code-highlight .nn { + color: #f4bf75; +} +.code-highlight .nc { + color: #f4bf75; +} +.code-highlight .no { + color: #f4bf75; +} +.code-highlight .na { + color: #6a9fb5; +} +.code-highlight .m, .code-highlight .mb, .code-highlight .mf, .code-highlight .mh, .code-highlight .mi, .code-highlight .il, .code-highlight .mo, .code-highlight .mx { + color: #90a959; +} +.code-highlight .ss { + color: #90a959; +} From 12bf5829791ae6cf571ef749a78c8d07ccfff3a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= Date: Sun, 3 Dec 2023 06:02:53 +0100 Subject: [PATCH 4/9] Rework theme mechanism --- app/assets/stylesheets/application.css | 2 + .../stylesheets/application.tailwind.css | 7 +- app/assets/stylesheets/rouge.css | 81 ------------------- app/assets/stylesheets/rouge.css.erb | 3 + .../snippets/box_component.html.erb | 2 +- app/views/layouts/application.html.erb | 2 +- 6 files changed, 12 insertions(+), 85 deletions(-) create mode 100644 app/assets/stylesheets/application.css delete mode 100644 app/assets/stylesheets/rouge.css create mode 100644 app/assets/stylesheets/rouge.css.erb diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css new file mode 100644 index 00000000..9d4dcd93 --- /dev/null +++ b/app/assets/stylesheets/application.css @@ -0,0 +1,2 @@ +/*= require rouge */ +/*= require tailwind */ diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index a4df3353..7f42c0c7 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -1,6 +1,5 @@ @import "fonts"; @import "font_awesome"; -@import "rouge"; @import "tailwindcss/base"; @import "tailwindcss/components"; @@ -33,6 +32,10 @@ @apply last:mb-0 } + pre.code-highlighter { + @apply px-6 py-4 border border-aoc-gray-darker rounded; + } + .code-highlight h1 { @apply my-4 border-b border-aoc-gray-darker pb-2 font-semibold text-4xl } @@ -49,7 +52,7 @@ @apply my-4 relative pt-2 !bg-dark border border-aoc-gray-darker rounded; } - .code-highlight pre::before { + pre.code-highlighter::before { @apply absolute top-0 right-0 border-b border-l rounded-bl border-aoc-gray-darker px-2 font-semibold; content: attr(lang); diff --git a/app/assets/stylesheets/rouge.css b/app/assets/stylesheets/rouge.css deleted file mode 100644 index 7acd3796..00000000 --- a/app/assets/stylesheets/rouge.css +++ /dev/null @@ -1,81 +0,0 @@ -.code-highlight table td { padding: 5px; } -.code-highlight table pre { margin: 0; } -.code-highlight, .code-highlight .w { - color: #d0d0d0; - background-color: #151515; -} -.code-highlight .err { - color: #151515; - background-color: #ac4142; -} -.code-highlight .c, .code-highlight .ch, .code-highlight .cd, .code-highlight .cm, .code-highlight .cpf, .code-highlight .c1, .code-highlight .cs { - color: #505050; -} -.code-highlight .cp { - color: #f4bf75; -} -.code-highlight .nt { - color: #f4bf75; -} -.code-highlight .o, .code-highlight .ow { - color: #d0d0d0; -} -.code-highlight .p, .code-highlight .pi { - color: #d0d0d0; -} -.code-highlight .gi { - color: #90a959; -} -.code-highlight .gd { - color: #ac4142; -} -.code-highlight .gh { - color: #6a9fb5; - background-color: #151515; - font-weight: bold; -} -.code-highlight .k, .code-highlight .kn, .code-highlight .kp, .code-highlight .kr, .code-highlight .kv { - color: #aa759f; -} -.code-highlight .kc { - color: #d28445; -} -.code-highlight .kt { - color: #d28445; -} -.code-highlight .kd { - color: #d28445; -} -.code-highlight .s, .code-highlight .sb, .code-highlight .sc, .code-highlight .dl, .code-highlight .sd, .code-highlight .s2, .code-highlight .sh, .code-highlight .sx, .code-highlight .s1 { - color: #90a959; -} -.code-highlight .sa { - color: #aa759f; -} -.code-highlight .sr { - color: #75b5aa; -} -.code-highlight .si { - color: #8f5536; -} -.code-highlight .se { - color: #8f5536; -} -.code-highlight .nn { - color: #f4bf75; -} -.code-highlight .nc { - color: #f4bf75; -} -.code-highlight .no { - color: #f4bf75; -} -.code-highlight .na { - color: #6a9fb5; -} -.code-highlight .m, .code-highlight .mb, .code-highlight .mf, .code-highlight .mh, .code-highlight .mi, .code-highlight .il, .code-highlight .mo, .code-highlight .mx { - color: #90a959; -} -.code-highlight .ss { - color: #90a959; -} diff --git a/app/assets/stylesheets/rouge.css.erb b/app/assets/stylesheets/rouge.css.erb new file mode 100644 index 00000000..4b87e19e --- /dev/null +++ b/app/assets/stylesheets/rouge.css.erb @@ -0,0 +1,3 @@ +<%# Only decent ones are: 'base16.dark', 'molokai', 'monokai.sublime' and 'thankful_eyes' %> +<%# or we could make a custom one ourselves %> +<%= Rouge::Theme.find("molokai").render(scope: ".code-highlighter") %> diff --git a/app/components/snippets/box_component.html.erb b/app/components/snippets/box_component.html.erb index 8d20825c..87ffface 100644 --- a/app/components/snippets/box_component.html.erb +++ b/app/components/snippets/box_component.html.erb @@ -7,7 +7,7 @@ <% end %> - 
+  
     <%= raw render_markdown @snippet.code, default_language: @snippet.language %>
   

 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 0b737020..520e6cd7 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,7 +8,7 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   
 

From 722b37855a670ba850724c86ad7170dfccdcf04b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= 
Date: Mon, 4 Dec 2023 14:33:49 +0100
Subject: [PATCH 5/9] Remove useless constant

---
 app/helpers/application_helper.rb | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 2021c8b3..c541b69f 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -16,8 +16,6 @@ def messages_sanitizer(text)
     sanitize(text, tags: %w[b em del span sub sup], attributes: %w[style])
   end
 
-  DEFAULT_THEME = "base16-ocean.dark"
-
   def render_markdown(commonmarkdown, default_language: nil)
     ast = CommonMarker.render_doc(commonmarkdown)
     ast.walk do |node|

From d9e46bd3ebf9f4129faee7476ac67ac5317d78f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= 
Date: Mon, 4 Dec 2023 14:36:38 +0100
Subject: [PATCH 6/9] Alphabetize gems

---
 Gemfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index 8ac745e0..c8055344 100644
--- a/Gemfile
+++ b/Gemfile
@@ -9,7 +9,6 @@ gem "rails", "7.1.1"
 gem "blazer", "~> 3.0"
 gem "bootsnap", require: false # Reduces boot times through caching; required in config/boot.rb
 gem "commonmarker", "~> 0.23.10", "< 1"
-gem "rouge", "~> 4.2"
 gem "devise", "~> 4.9"
 gem "good_job", "~> 3.21"
 gem "humanize", "~> 2.5"
@@ -20,6 +19,7 @@ gem "omniauth-rails_csrf_protection", "~> 1.0"
 gem "omniauth-slack-openid"
 gem "pg", "~> 1.5"
 gem "puma", "~> 6.4"
+gem "rouge", "~> 4.2"
 gem "sentry-rails", "~> 5.13"
 gem "sentry-ruby", "~> 5.13"
 gem "slack-ruby-client"

From 5d22e9a8288802eba8c388538511db421b105e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= 
Date: Mon, 4 Dec 2023 14:37:11 +0100
Subject: [PATCH 7/9] Remove unneeded comment

---
 app/assets/stylesheets/rouge.css.erb | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/assets/stylesheets/rouge.css.erb b/app/assets/stylesheets/rouge.css.erb
index 4b87e19e..145797bb 100644
--- a/app/assets/stylesheets/rouge.css.erb
+++ b/app/assets/stylesheets/rouge.css.erb
@@ -1,3 +1 @@
-<%# Only decent ones are: 'base16.dark', 'molokai', 'monokai.sublime' and 'thankful_eyes' %>
-<%# or we could make a custom one ourselves %>
 <%= Rouge::Theme.find("molokai").render(scope: ".code-highlighter") %>

From 8c543f9fea96d4b1c851da7d89c49a0f28660445 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= 
Date: Mon, 4 Dec 2023 14:45:40 +0100
Subject: [PATCH 8/9] Fix styling

---
 app/assets/stylesheets/application.tailwind.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 7f42c0c7..20a84d7c 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -28,7 +28,7 @@
     @apply px-1 bg-aoc-gray-darkest border border-aoc-gray-darker rounded;
   }
 
-  .code-highlight * {
+  .snippet * {
     @apply last:mb-0
   }
 
@@ -36,19 +36,19 @@
     @apply px-6 py-4 border border-aoc-gray-darker rounded;
   }
 
-  .code-highlight h1 {
+  .snippet h1 {
     @apply my-4 border-b border-aoc-gray-darker pb-2 font-semibold text-4xl
   }
 
-  .code-highlight h2 {
+  .snippet h2 {
     @apply my-4 border-b border-aoc-gray-darker pb-1.5 font-semibold text-2xl
   }
 
-  .code-highlight h3 {
+  .snippet h3 {
     @apply my-4 font-semibold text-lg
   }
 
-  .code-highlight pre {
+  .snippet pre {
     @apply my-4 relative pt-2 !bg-dark border border-aoc-gray-darker rounded;
   }
 
@@ -58,7 +58,7 @@
     content: attr(lang);
   }
 
-  .code-highlight pre code {
+  pre.code-highlighter {
     @apply block w-full p-4 overflow-x-auto scrollbar-chrome text-xs;
   }
 

From bed4e0e678fe85b0a409508291dd0d51ca26b935 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie?= 
Date: Mon, 4 Dec 2023 14:54:31 +0100
Subject: [PATCH 9/9] Bring style back in line with recent snippet restyle

---
 app/assets/stylesheets/application.tailwind.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 20a84d7c..f2fa44fa 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -32,10 +32,6 @@
     @apply last:mb-0
   }
 
-  pre.code-highlighter {
-    @apply px-6 py-4 border border-aoc-gray-darker rounded;
-  }
-
   .snippet h1 {
     @apply my-4 border-b border-aoc-gray-darker pb-2 font-semibold text-4xl
   }
@@ -52,7 +48,7 @@
     @apply my-4 relative pt-2 !bg-dark border border-aoc-gray-darker rounded;
   }
 
-  pre.code-highlighter::before {
+  .snippet pre.code-highlighter::before {
     @apply absolute top-0 right-0 border-b border-l rounded-bl border-aoc-gray-darker px-2 font-semibold;
 
     content: attr(lang);