showcase-rails 0.2.6 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd1db6d9dffe2f19513565919b1e09a1fbd3cccec37917a18ab9e8dbf7791d82
-  data.tar.gz: '08b4a1d6b175dd140189dc3630532559fd3cbb3579b6e3c831a1f86aae5ea293'
+  metadata.gz: 03270bcd056181e09393db4fb8c701fb082e41d3c30ed2ec00b82004e8c967a6
+  data.tar.gz: d762aea659bfd35a7b7a14126976d8bd56f9edf0ff8a8399e882b37907cbd4c9
 SHA512:
-  metadata.gz: ca31f6b03f53ee05c2e5485cfbe0f1507c05c7d26f49e2fd75cec29695c897297bbccb149ff019c585d87a339515090a462f192ec3f81a9cf6eb57e51fed5755
-  data.tar.gz: 31e021098a8a43ad19a8bd3372ed5257dcc37449152a0d265097c62517a476f6a552b8f93db8da9c3d738367d8bb2629ea6759d8d61b461b8cff0e9535156e3a
+  metadata.gz: c7a642d7d0f7bf5dc52cf290116b566f81206650bdbd3880bbee20aefebb83edead2b4688abbc3ae376a89e6a63913880e8be51c908133c4bb4823ce3c2ddd89
+  data.tar.gz: 9ce4be151434d49e3a6acc329cf6c8765786844855fd00319b33ac48fe301bdf6609989acd44e16c72174bbc09a3774a4a736c18d79ef9e4a33acf6ebd76aaa2

data/README.md

@@ -157,12 +157,16 @@ Showcase bundles its own `showcase.js`, `showcase.css` and `showcase.highlights.
 Action View's [javascript_include_tag][] and [stylesheet_link_tag][].
 
 If your assets require more sophisticated loading techniques, declare your own
-versions of the [showcase/engine/_javascripts.html.erb][] and
+version of the [showcase/engine/_head.html.erb][] partial.
+
+If you need to tweak showcase's assets, declare your own versions of
+the [showcase/engine/_javascripts.html.erb][] and
 [showcase/engine/_stylesheets.html.erb][] partials. When customizing those
 partials, make sure to include `"showcase"` in your list of assets.
 
 [javascript_include_tag]: https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-javascript_include_tag
 [stylesheet_link_tag]: https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-stylesheet_link_tag
+[showcase/engine/_head.html.erb]: ./showcase/engine/_head.html.erb
 [showcase/engine/_javascripts.html.erb]: ./showcase/engine/_javascripts.html.erb
 [showcase/engine/_stylesheets.html.erb]: ./showcase/engine/_stylesheets.html.erb
 
@@ -173,7 +177,7 @@ By default, Showcase's syntax highlighting runs on Rouge's "github" theme.
 To use a different theme, override [showcase/engine/_stylesheets.html.erb][] with the following, replacing `:magritte` with a [valid theme](rouge-themes):
 
 ```erb
-<%= stylesheet_link_tag "application", "showcase" %> # We've removed the default showcase.highlights file here.
+<%= stylesheet_link_tag "showcase" %> # We've removed the default showcase.highlights file here.
 <%= tag.style Rouge::Theme.find(:magritte).render(scope: ".sc-highlight") %>
 ```
 

data/app/assets/builds/showcase.css

@@ -727,8 +727,8 @@ select {
   height: 100%;
 }
 
-.sc-max-h-20 {
-  max-height: 5rem;
+.sc-max-h-48 {
+  max-height: 12rem;
 }
 
 .sc-min-h-screen {
@@ -800,6 +800,10 @@ select {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.sc-overflow-clip {
+  overflow: clip;
+}
+
 .sc-overflow-scroll {
   overflow: scroll;
 }
@@ -826,27 +830,19 @@ select {
   border-radius: 0.375rem;
 }
 
-.sc-rounded-t-md {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
+.sc-rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
 }
 
 .sc-border {
   border-width: 1px;
 }
 
-.sc-border-0 {
-  border-width: 0px;
-}
-
 .sc-border-2 {
   border-width: 2px;
 }
 
-.sc-border-b {
-  border-bottom-width: 1px;
-}
-
 .sc-border-r {
   border-right-width: 1px;
 }
@@ -969,11 +965,19 @@ select {
   line-height: 1.375;
 }
 
+.\!sc-text-inherit {
+  color: inherit !important;
+}
+
 .sc-text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
+.\!sc-no-underline {
+  text-decoration-line: none !important;
+}
+
 .hover\:sc-select-all:hover {
   -webkit-user-select: all;
      -moz-user-select: all;
@@ -985,12 +989,8 @@ select {
   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
 }
 
-.hover\:sc-text-inherit:hover {
-  color: inherit;
-}
-
-.hover\:sc-no-underline:hover {
-  text-decoration-line: none;
+.hover\:sc-underline:hover {
+  text-decoration-line: underline;
 }
 
 @media (prefers-color-scheme: dark) {

data/app/assets/builds/showcase.highlights.css

@@ -110,3 +110,118 @@
   color: #24292f;
   font-weight: bold;
 }
+
+@media (prefers-color-scheme: dark) {
+  .sc-highlight table td { padding: 5px; }
+  .sc-highlight table pre { margin: 0; }
+  .sc-highlight, .sc-highlight .w {
+    color: #c9d1d9;
+    background-color: #161b22;
+  }
+  .sc-highlight .k, .sc-highlight .kd, .sc-highlight .kn, .sc-highlight .kp, .sc-highlight .kr, .sc-highlight .kt, .sc-highlight .kv {
+    color: #ff7b72;
+  }
+  .sc-highlight .gr {
+    color: #f0f6fc;
+  }
+  .sc-highlight .gd {
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+  .sc-highlight .nb {
+    color: #ffa657;
+  }
+  .sc-highlight .nc {
+    color: #ffa657;
+  }
+  .sc-highlight .no {
+    color: #ffa657;
+  }
+  .sc-highlight .nn {
+    color: #ffa657;
+  }
+  .sc-highlight .sr {
+    color: #7ee787;
+  }
+  .sc-highlight .na {
+    color: #7ee787;
+  }
+  .sc-highlight .nt {
+    color: #7ee787;
+  }
+  .sc-highlight .gi {
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+  .sc-highlight .kc {
+    color: #79c0ff;
+  }
+  .sc-highlight .l, .sc-highlight .ld, .sc-highlight .m, .sc-highlight .mb, .sc-highlight .mf, .sc-highlight .mh, .sc-highlight .mi, .sc-highlight .il, .sc-highlight .mo, .sc-highlight .mx {
+    color: #79c0ff;
+  }
+  .sc-highlight .sb {
+    color: #79c0ff;
+  }
+  .sc-highlight .bp {
+    color: #79c0ff;
+  }
+  .sc-highlight .ne {
+    color: #79c0ff;
+  }
+  .sc-highlight .nl {
+    color: #79c0ff;
+  }
+  .sc-highlight .py {
+    color: #79c0ff;
+  }
+  .sc-highlight .nv, .sc-highlight .vc, .sc-highlight .vg, .sc-highlight .vi, .sc-highlight .vm {
+    color: #79c0ff;
+  }
+  .sc-highlight .o, .sc-highlight .ow {
+    color: #79c0ff;
+  }
+  .sc-highlight .gh {
+    color: #1f6feb;
+    font-weight: bold;
+  }
+  .sc-highlight .gu {
+    color: #1f6feb;
+    font-weight: bold;
+  }
+  .sc-highlight .s, .sc-highlight .sa, .sc-highlight .sc, .sc-highlight .dl, .sc-highlight .sd, .sc-highlight .s2, .sc-highlight .se, .sc-highlight .sh, .sc-highlight .sx, .sc-highlight .s1, .sc-highlight .ss {
+    color: #a5d6ff;
+  }
+  .sc-highlight .nd {
+    color: #d2a8ff;
+  }
+  .sc-highlight .nf, .sc-highlight .fm {
+    color: #d2a8ff;
+  }
+  .sc-highlight .err {
+    color: #f0f6fc;
+    background-color: #8e1519;
+  }
+  .sc-highlight .c, .sc-highlight .ch, .sc-highlight .cd, .sc-highlight .cm, .sc-highlight .cp, .sc-highlight .cpf, .sc-highlight .c1, .sc-highlight .cs {
+    color: #8b949e;
+  }
+  .sc-highlight .gl {
+    color: #8b949e;
+  }
+  .sc-highlight .gt {
+    color: #8b949e;
+  }
+  .sc-highlight .ni {
+    color: #c9d1d9;
+  }
+  .sc-highlight .si {
+    color: #c9d1d9;
+  }
+  .sc-highlight .ge {
+    color: #c9d1d9;
+    font-style: italic;
+  }
+  .sc-highlight .gs {
+    color: #c9d1d9;
+    font-weight: bold;
+  }
+}

data/app/views/layouts/showcase.html.erb

@@ -4,6 +4,7 @@
     <title>Showcase</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
+    <%= render "showcase/engine/head" %>
     <%= render "showcase/engine/stylesheets" %>
     <%= render "showcase/engine/javascripts" %>
   </head>

data/app/views/showcase/engine/_head.html.erb

@@ -0,0 +1,2 @@
+<%= stylesheet_link_tag "application" %>
+<%= javascript_include_tag "application" %>

data/app/views/showcase/engine/_javascripts.html.erb

@@ -1 +1 @@
-<%= javascript_include_tag "application", "showcase" %>
+<%= javascript_include_tag "showcase" %>

data/app/views/showcase/engine/_root.html.erb

@@ -1,7 +1,9 @@
 <main class="sc-flex sc-flex-wrap dark:sc-bg-neutral-900 dark:sc-text-white" aria-labelledby="showcase_main_title">
   <section class="sc-grid sc-grid-cols-12 sc-w-full">
     <nav class="sc-col-span-3 xl:sc-col-span-2 sc-py-5 sc-h-full sc-border-r">
-      <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-py-2 sc-pl-4 sc-cursor-pointer"><%= link_to "Showcase", root_url %></h1>
+      <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-py-2 sc-pl-4 sc-cursor-pointer">
+        <%= link_to "Showcase", root_url, class: "!sc-text-inherit hover:sc-underline" %>
+      </h1>
 
       <%= render Showcase::Path.tree %>
     </nav>

data/app/views/showcase/engine/_sample.html.erb

@@ -1,8 +1,10 @@
-<section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md" aria-labelledby="showcase_<%= sample.id %>_title">
+<section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md sc-overflow-clip" aria-labelledby="showcase_<%= sample.id %>_title">
   <showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
-    <header class="sc-bg-slate-100/50 dark:sc-bg-neutral-700/50 sc-rounded-t-md">
+    <header class="sc-bg-slate-100/50 dark:sc-bg-neutral-700/50">
       <div class="sc-flex sc-justify-between">
-        <h3 id="showcase_<%= sample.id %>_title" class="sc-px-4 sc-py-2 sc-font-medium sc-text-base md:sc-text-lg sc-leading-snug sc-truncate"><%= link_to sample.name, "##{sample.id}" %></h3>
+        <h3 id="showcase_<%= sample.id %>_title" class="sc-px-4 sc-py-2 sc-font-medium sc-text-base md:sc-text-lg sc-leading-snug sc-truncate">
+          <%= link_to sample.name, "##{sample.id}", class: "!sc-text-inherit" %>
+        </h3>
 
         <% if event = sample.instrumented %>
           <div class="sc-text-xs sc-grid sc-gap-x-2 sc-m-2 sc-italic sc-text-slate-500 dark:sc-text-inherit">
@@ -18,7 +20,7 @@
     </header>
 
     <% if sample.preview %>
-      <section class="sc-px-4 sc-py-2 sc-border sc-border-gray-200 sc-border-0 sc-border-b">
+      <section class="sc-px-4 sc-py-2">
         <%= sample.preview %>
       </section>
     <% end %>
@@ -34,10 +36,10 @@
     <% end %>
 
     <% if sample.events.any? %>
-      <section class="sc-px-4 sc-py-2 sc-font-small sc-bg-slate-50" aria-labelledby="showcase_<%= sample.id %>_javascript_events_title">
+      <section class="sc-px-4 sc-py-2 sc-font-small sc-bg-slate-50 dark:sc-bg-neutral-800 sc-rounded-b-md" aria-labelledby="showcase_<%= sample.id %>_javascript_events_title">
         <h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
 
-        <div class="sc-overflow-scroll sc-max-h-20">
+        <div class="sc-overflow-scroll sc-max-h-48">
           <pre data-showcase-sample-target="relay"></pre>
         </div>
       </section>

data/app/views/showcase/engine/_stylesheets.html.erb

@@ -1 +1 @@
-<%= stylesheet_link_tag "application", "showcase", "showcase.highlights" %>
+<%= stylesheet_link_tag "showcase", "showcase.highlights" %>

data/app/views/showcase/engine/index.html.erb

@@ -25,6 +25,9 @@
   <section class="sc-space-y-4">
     <h2 class="sc-font-semibold sc-text-2xl">Additional resources</h2>
     <ul class="sc-list-none">
+      <li>
+        <%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank" %>
+      </li>
       <li>
         <%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank" %>
       </li>

data/app/views/showcase/engine/path/_path.html.erb

@@ -1,3 +1,3 @@
 <article class="hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 <%= "sc-bg-indigo-50 dark:sc-bg-neutral-700/50" if path.id == params[:id] %>">
-  <%= link_to path.basename.titleize, preview_path(path.id), class: "sc-inline-block sc-py-2 sc-px-8 sc-w-full hover:sc-text-inherit hover:sc-no-underline" %>
+  <%= link_to path.basename.titleize, showcase.preview_path(path.id), class: "sc-inline-block sc-py-2 sc-px-8 sc-w-full !sc-text-inherit !sc-no-underline" %>
 </article>

data/lib/showcase/route_helper.rb

@@ -1,8 +1,11 @@
+# frozen_string_literal: true
+
 module Showcase::RouteHelper
   def method_missing(name, ...)
-    case name
-    when /_path\Z/, /_url\Z/ then main_app.public_send(name, ...)
-    else                          super
+    if name.end_with?("_path", "_url")
+      main_app.public_send(name, ...)
+    else
+      super
     end
   end
 end

data/lib/showcase/version.rb

@@ -1,3 +1,3 @@
 module Showcase
-  VERSION = "0.2.6"
+  VERSION = "0.2.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: showcase-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.6
+  version: 0.2.8
 platform: ruby
 authors:
 - Daniel Pence
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-05 00:00:00.000000000 Z
+date: 2023-03-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -59,6 +59,7 @@ files:
 - app/models/showcase/preview.rb
 - app/models/showcase/sample.rb
 - app/views/layouts/showcase.html.erb
+- app/views/showcase/engine/_head.html.erb
 - app/views/showcase/engine/_javascripts.html.erb
 - app/views/showcase/engine/_options.html.erb
 - app/views/showcase/engine/_preview.html.erb
@@ -101,7 +102,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.7
+rubygems_version: 3.4.8
 signing_key:
 specification_version: 4
 summary: Showcase helps you show off and document your partials, components, view