elemental_styleguide 1.0.0.beta1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1a2865f90e0e078a84f26cf5a332107457baf8221b7970e28671d0b4b39d67e
-  data.tar.gz: c74b074123b0addcb2f13fe696814ae3e71878ba2801d4ca903bc7d8768f1308
+  metadata.gz: 514239bb5d770f06daeae819a23a20a7b40b8e0555aacc201a4b9bfdd294b899
+  data.tar.gz: 79113d713dbe7f1a3d786759ede47d96e94c1b2255a822b73bbb4737e570bacf
 SHA512:
-  metadata.gz: 158a7d09eca0402be90744b9a876921f005780e89b260b45b6e3db3b0d647e11d6c6be65009e01a626c7e04fcada49bb7b481b6aa230b13c8235c9d931086bef
-  data.tar.gz: ded8cfb89e67a2a0e5fe0cc3a3b99cf1f65d0b033475ffb7c1b0c775e71ed3a589f9fbcc315466b2d1945e2a8bda2ea0c6dd4a987c7baef75316445862a1a55f
+  metadata.gz: 796272dfa2ce6e5306ef25473b2fd85110bffe42af7387250f393dd95c0d89234a68fb2e791f6bc75de4bcb8672b4450c1260348abef6af7416ac6799a9ef484
+  data.tar.gz: ba3ab40e9bf6c5ce80d4ba180d754e334c4c1b732b5288aa5e9abb7b5907980b9907b69fdbaa2ed931db02fcbf0c4aea892de8708d566b00f7b52977454ecc0b

data/README.md

@@ -1,6 +1,6 @@
 # Elemental Style Guide
 
-Simple style guide for Rails 5.1+, designed to go well with [elemental_components](https://github.com/jensljungblad/elemental_components). The two together are inspired by the works of [Brad Frost](http://bradfrost.com) and by the [thoughts behind](http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html) Lonely Planet's style guide [Rizzo](http://rizzo.lonelyplanet.com).
+Simple style guide for Rails 7.2+, designed to go well with [elemental_components](https://github.com/jensljungblad/elemental_components). The two together are inspired by the works of [Brad Frost](http://bradfrost.com) and by the [thoughts behind](http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html) Lonely Planet's style guide [Rizzo](http://rizzo.lonelyplanet.com).
 
 ## Installation
 
@@ -26,6 +26,9 @@ This will create the following files and directories:
 
 ```
 app/
+  controllers/
+    styleguide/
+      examples_controller.rb
   views/
     layouts/
       styleguide/
@@ -72,7 +75,7 @@ height: 200
 ```
 ````
 
-Examples need your application's CSS and JS in order to function properly. There is an `app/views/layouts/styleguide/example.html.erb` layout file that examples are rendered within. This file can be modified in order to add additional tags to the header, like the `javascript_pack_tag` when using the webpacker gem, or classes and styles to the body tag.
+Examples need your application's CSS and JS in order to function properly. There is an `app/views/layouts/styleguide/example.html.erb` layout file that examples are rendered within. This file can be modified in order to include any CSS and JS needed.
 
 ## Acknowledgements
 

data/app/assets/config/elemental_styleguide_manifest.js

@@ -1,2 +1 @@
-//= link_directory ../javascripts/elemental_styleguide .js
 //= link_directory ../stylesheets/elemental_styleguide .css

data/app/controllers/elemental_styleguide/examples_controller.rb

@@ -2,11 +2,12 @@
 
 module ElementalStyleguide
   class ExamplesController < ApplicationController
-    helper Rails.application.helpers
-    helper Rails.application.routes.url_helpers
+    layout "styleguide/example"
 
     def show
-      render inline: Base64.urlsafe_decode64(params[:example]), layout: "styleguide/example"
+      @code = ElementalStyleguide.message_verifier.verify(params[:example])
+    rescue ActiveSupport::MessageVerifier::InvalidSignature
+      head :forbidden
     end
   end
 end

data/app/controllers/elemental_styleguide/pages_controller.rb

@@ -2,13 +2,11 @@
 
 module ElementalStyleguide
   class PagesController < ApplicationController
-    helper ElementalStyleguide::NavigationHelper
-
     def show
       unless params[:path]
         params[:path] = ElementalStyleguide.page_names[0][0]
       end
-      render "styleguide/#{params[:path]}", layout: "elemental_styleguide/application"
+      render "styleguide/#{params[:path]}"
     end
   end
 end

data/app/helpers/elemental_styleguide/navigation_helper.rb

@@ -2,23 +2,26 @@
 
 module ElementalStyleguide
   module NavigationHelper
-    # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
-    def navigation(pages = nil, paths = [])
-      content_tag :ul do
+    # rubocop:disable Metrics/AbcSize
+    # rubocop:disable Metrics/MethodLength
+    def navigation(pages = nil, paths = [], level: 0)
+      content_tag :ul, class: "nav flex-column ms-#{level * 2}" do
         (pages || ElementalStyleguide.page_names).map do |page|
           path, label, children = page
           path = paths.dup << path
 
-          content_tag :li do
+          content_tag :li, class: "nav-item" do
             if children
-              [label, navigation(children, path)].join("").html_safe
+              content_tag(:span, label.html_safe, class: "nav-link disabled py-1") +
+                navigation(children, path, level: level + 1)
             else
-              link_to label, elemental_styleguide.page_path(path)
+              link_to label, elemental_styleguide.page_path(path), class: "nav-link py-1"
             end
           end
-        end.join("").html_safe
+        end.join.html_safe
       end
     end
-    # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+    # rubocop:enable Metrics/MethodLength
+    # rubocop:enable Metrics/AbcSize
   end
 end

data/app/views/elemental_styleguide/examples/show.html.erb

@@ -0,0 +1 @@
+<%= render inline: @code, type: :erb %>

data/app/views/layouts/elemental_styleguide/application.html.erb

@@ -2,18 +2,26 @@
 <html>
   <head>
     <title>Style guide</title>
-    <%= stylesheet_link_tag "elemental_styleguide/application", media: "all" %>
-    <%= javascript_include_tag "elemental_styleguide/application" %>
     <%= csrf_meta_tags %>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/github.min.css">
+    <%= stylesheet_link_tag "elemental_styleguide/application", media: "all" %>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/languages/erb.min.js"></script>
   </head>
   <body>
-    <div class="grid-container">
-      <nav>
-        <%= navigation %>
-      </nav>
-      <main>
-        <%= yield %>
-      </main>
+    <div class="container-fluid">
+      <div class="row min-vh-100">
+        <nav class="col-md-3 col-lg-2 border-end shadow-sm px-2 py-4">
+          <%= navigation %>
+        </nav>
+        <main class="col-md-9 col-lg-10 p-4">
+          <%= yield %>
+        </main>
+      </div>
     </div>
     <script>
       var iframes = document.getElementsByTagName('iframe');
@@ -32,5 +40,6 @@
         }
       }
     </script>
+    <script>hljs.highlightAll();</script>
   </body>
 </html>

data/config/routes.rb

@@ -2,6 +2,6 @@
 
 ElementalStyleguide::Engine.routes.draw do
   root to: "pages#show"
-  get "example", to: "examples#show", as: :example
+  get "example", to: "/styleguide/examples#show", as: :example
   get "*path", to: "pages#show", as: :page
 end

data/lib/elemental_styleguide/markdown_renderer.rb

@@ -2,30 +2,44 @@
 
 module ElementalStyleguide
   class MarkdownRenderer < Redcarpet::Render::HTML
-    include Rouge::Plugins::Redcarpet
+    def block_quote(quote)
+      <<-BLOCK_QUOTE
+        <blockquote class="border-5 border-start border-secondary-subtle ps-3">
+          #{quote}
+        </blockquote>
+      BLOCK_QUOTE
+    end
 
     def block_code(code, language)
       case language
       when "example"
-        options, code = parse_options(code)
-        example(code, options)
+        example(code)
       else
-        super
+        <<-BLOCK_CODE
+          <pre><code class="language-#{language} bg-body-tertiary">#{code}</code></pre>
+        BLOCK_CODE
       end
     end
 
-    def example(code, options)
+    # rubocop:disable Metrics/MethodLength
+    def example(code)
+      options, code = parse_options(code)
+
       <<-EXAMPLE
-        <div class="example">
-          <iframe src="/styleguide/example?example=#{Base64.urlsafe_encode64(code)}"
-                  width="#{options['width'] || '100%'}"
-                  height="#{options['height'] || 'auto'}"></iframe>
-        </div>
-        <div class="example-source">
-          #{block_code(code.strip, 'erb')}
+        <div class="card shadow-sm mb-4">
+          <div class="card-body">
+            <iframe src="#{ElementalStyleguide.example_path(code)}"
+                    width="#{options['width'] || '100%'}"
+                    height="#{options['height'] || 'auto'}"
+                    class="d-block"></iframe>
+          </div>
+          <div class="card-footer">
+            <pre class="mb-0"><code class="language-erb bg-transparent p-0">#{ERB::Util.html_escape(code)}</code></pre>
+          </div>
         </div>
       EXAMPLE
     end
+    # rubocop:enable Metrics/MethodLength
 
     private
 
@@ -33,7 +47,7 @@ module ElementalStyleguide
       pieces = code.split("---")
 
       if pieces.length > 1
-        options = pieces[0].split("\n").map { |i| i.split(": ") }.to_h
+        options = pieces[0].split("\n").to_h { |i| i.split(": ") }
         [options, pieces[1]]
       else
         options = {}

data/lib/elemental_styleguide/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ElementalStyleguide
-  VERSION = "1.0.0.beta1"
+  VERSION = "1.0.0"
 end

data/lib/elemental_styleguide.rb

@@ -1,20 +1,33 @@
 # frozen_string_literal: true
 
 require "redcarpet"
-require "rouge"
-require "rouge/plugins/redcarpet"
 require "elemental_styleguide/markdown_handler"
 require "elemental_styleguide/markdown_renderer"
 require "elemental_styleguide/engine"
 
 module ElementalStyleguide
+  def self.example_path(example)
+    message_verifier.generate(example).then do |signed_example|
+      ElementalStyleguide::Engine.routes.url_helpers.example_path(example: signed_example)
+    end
+  end
+
+  def self.message_verifier
+    @message_verifier ||= ActiveSupport::MessageVerifier.new(
+      Rails.application.secret_key_base,
+      digest: "SHA256",
+      serializer: ActiveSupport::MessageEncryptor::NullSerializer,
+      url_safe: true
+    )
+  end
+
   def self.pages_path
     Rails.root.join("app", "views", "styleguide")
   end
 
   def self.page_names(path = nil)
     Dir.chdir(path || pages_path) do
-      Dir.glob("*").sort.map do |item|
+      Dir.glob("*").map do |item|
         [
           item.sub(/\..*/, ""),
           item.sub(/\..*/, "").sub(/[0-9]*_?/, "").titleize

data/lib/generators/elemental_styleguide/templates/install/controllers/styleguide/examples_controller.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module Styleguide
+  class ExamplesController < ElementalStyleguide::ExamplesController
+  end
+end

data/lib/generators/elemental_styleguide/templates/install/views/layouts/styleguide/example.html.erb

@@ -5,8 +5,6 @@
     <%= javascript_include_tag "application" %>
   </head>
   <body>
-    <div id="example">
-      <%= yield %>
-    </div>
+    <%= yield %>
   </body>
 </html>

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: elemental_styleguide
 version: !ruby/object:Gem::Version
-  version: 1.0.0.beta1
+  version: 1.0.0
 platform: ruby
 authors:
 - Jens Ljungblad
-autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-01 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -16,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.0
+        version: 7.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.1.0
+        version: 7.2.0
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
@@ -38,63 +37,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.5.0
-- !ruby/object:Gem::Dependency
-  name: rouge
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.13.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.13.0
-- !ruby/object:Gem::Dependency
-  name: appraisal
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: rubocop
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.74.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 0.74.0
-- !ruby/object:Gem::Dependency
-  name: sqlite3
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.4.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: 1.4.0
-description: Simple style guide for Rails 5.1+
+description: Simple style guide for Rails 7.2+
 email:
 - jens.ljungblad@gmail.com
 executables: []
@@ -105,12 +48,12 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/elemental_styleguide_manifest.js
-- app/assets/javascripts/elemental_styleguide/application.js
-- app/assets/stylesheets/elemental_styleguide/application.css.erb
+- app/assets/stylesheets/elemental_styleguide/application.css
 - app/controllers/elemental_styleguide/application_controller.rb
 - app/controllers/elemental_styleguide/examples_controller.rb
 - app/controllers/elemental_styleguide/pages_controller.rb
 - app/helpers/elemental_styleguide/navigation_helper.rb
+- app/views/elemental_styleguide/examples/show.html.erb
 - app/views/layouts/elemental_styleguide/application.html.erb
 - config/routes.rb
 - lib/elemental_styleguide.rb
@@ -120,14 +63,15 @@ files:
 - lib/elemental_styleguide/railtie.rb
 - lib/elemental_styleguide/version.rb
 - lib/generators/elemental_styleguide/install_generator.rb
+- lib/generators/elemental_styleguide/templates/install/controllers/styleguide/examples_controller.rb
 - lib/generators/elemental_styleguide/templates/install/views/layouts/styleguide/example.html.erb
 - lib/generators/elemental_styleguide/templates/install/views/styleguide/01_home.md
 - lib/tasks/elemental_styleguide_tasks.rake
 homepage: https://www.github.com/jensljungblad/elemental_styleguide
 licenses:
 - MIT
-metadata: {}
-post_install_message: 
+metadata:
+  rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths:
 - lib
@@ -135,16 +79,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 3.1.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.6
-signing_key: 
+rubygems_version: 3.7.2
 specification_version: 4
-summary: Simple style guide for Rails 5.1+
+summary: Simple style guide for Rails 7.2+
 test_files: []

data/app/assets/javascripts/elemental_styleguide/application.js

@@ -1,13 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file. JavaScript code in this file should be added after the last require_* statement.
-//
-// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require_tree .

data/app/assets/stylesheets/elemental_styleguide/application.css.erb

@@ -1,182 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
-
-<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  line-height: 1.5;
-}
-
-a {
-  color: #5296b2;
-  text-decoration: none;
-  border-bottom: 2px solid #ddebf0;
-  transition: all .2s ease-in-out;
-}
-
-a:hover {
-  border-color: #5296b2;
-}
-
-p {
-  margin: 0 0 2em;
-}
-
-main {
-  width: 100%;
-  max-width: 1024px;
-  margin: 0 auto;
-  padding: 40px 60px 60px;
-}
-
-pre {
-  margin: 0 0 2em;
-  padding: 30px;
-  background: #f4f7fb;
-  border: 1px solid #dfe3e6;
-}
-
-code {
-  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-  font-size: 15px;
-}
-
-iframe {
-  margin: 0;
-  height: 0;
-  border: none;
-}
-
-h1 {
-  margin: 0 0 1em;
-  padding: 0 0 .5em;
-  border-bottom: 2px solid #dfe3e6;
-  color: #333;
-  font-size: 50px;
-  font-weight: 500;
-}
-
-h2 {
-  color: #333;
-  font-weight: 600;
-}
-
-ul,
-ol {
-  margin: 0 0 2em;
-}
-
-table {
-  margin: 0 0 2em;
-  border-collapse: collapse;
-}
-
-th,
-td {
-  padding: .6em 2em .6em 0;
-  text-align: left;
-}
-
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-
-th {
-  border-bottom: 2px solid #dfe3e6;
-}
-
-td {
-  border-bottom: 1px solid #dfe3e6;
-}
-
-hr {
-  margin: 2em 0 0;
-  padding: 2em 0 0;
-  border: 1px solid #dfe3e6;
-  border-width: 1px 0 0;
-}
-
-blockquote {
-  padding-left: 25px;
-  border-left: 3px solid #dfe3e6;
-  color: #879097;
-  font-style: italic;
-}
-
-nav {
-  padding: 10px 30px 40px;
-  background: #f4f7fb;
-  min-width: 180px;
-}
-
-nav a {
-  text-decoration: none;
-  border-bottom: 2px solid transparent;
-}
-
-nav a:hover {
-  border-bottom: 2px solid #a9cbd9;
-}
-
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-nav > ul > li {
-  display: block;
-  margin: .6em 0 0;
-  padding: .6em 0 0;
-  box-shadow: 0 -1px 0 0 #dfe3e6;
-}
-
-nav > ul > li:first-child {
-  box-shadow: none;
-}
-
-nav ul ul {
-  margin: .6em 0;
-  padding: 0 0;
-  font-size: 15px;
-  font-weight: 400;
-}
-
-nav ul ul ul {
-  font-size: 14px;
-  padding-left: 1em;
-}
-
-.example {
-  display: grid;
-  padding: 30px;
-  border: 1px solid #dfe3e6;
-  border-width: 1px 1px 0;
-}
-
-.grid-container {
-  display: grid;
-  width: 100%;
-  height: 100vh;
-  grid-gap: 0;
-  grid-template-columns: auto 1fr;
-}