showcase-rails 0.2.5 → 0.2.6

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: bf778403a9352a0351175e44992b887820d5336c211e2d3dcfa6975b27240bf3
4
- data.tar.gz: aea48794945648e9681c3fa345d5503b99aebb81f4c49d6e527bbc13f38f7da6
3
+ metadata.gz: bd1db6d9dffe2f19513565919b1e09a1fbd3cccec37917a18ab9e8dbf7791d82
4
+ data.tar.gz: '08b4a1d6b175dd140189dc3630532559fd3cbb3579b6e3c831a1f86aae5ea293'
5
5
  SHA512:
6
- metadata.gz: e44e0daed1d4d76efacfd3f261a815ff5a5920335baf2318adea7a72f307c02d45b923905ceca8e6c0d45f179eba3761f7151ed06679a0075cc686fa73f8b6f2
7
- data.tar.gz: 845ffb9426a6d1de5892cad9cad0a0bffd06d54a238767115d37f7c68d3643aa6e6eaa4c6308106b7cd071014e0be7faeb52e2d89952b66b5dc841a2df0823cf
6
+ metadata.gz: ca31f6b03f53ee05c2e5485cfbe0f1507c05c7d26f49e2fd75cec29695c897297bbccb149ff019c585d87a339515090a462f192ec3f81a9cf6eb57e51fed5755
7
+ data.tar.gz: 31e021098a8a43ad19a8bd3372ed5257dcc37449152a0d265097c62517a476f6a552b8f93db8da9c3d738367d8bb2629ea6759d8d61b461b8cff0e9535156e3a
data/README.md CHANGED
@@ -1,21 +1,20 @@
1
1
  # Showcase
2
2
 
3
- Showcase lets you build previews for your partials, components, view helpers, Stimulus controllers and more.
3
+ Showcase lets you build previews for your partials, components, view helpers, Stimulus controllers and more — Rails engines included!
4
4
 
5
- Add a template to `app/views/showcase/previews` and it'll show up in Showcase's menu.
5
+ Add a partial to `app/views/showcase/previews` and it'll show up in Showcase's menu. Here's how to showcase a standard button component:
6
6
 
7
- Here's how to showcase a standard button component:
8
-
9
- ```erb
10
- <%# app/views/showcase/previews/_button.html.erb %>
7
+ ```html
8
+ <%# app/views/showcase/previews/components/_button.html.erb %>
11
9
  <% showcase.title "Button" %> <%# `title` is optional and inferred from the filename, by default. %>
10
+ <% showcase.badge :partial, :component %> <%# Optional badges you can add to further clarify the type of the showcase. %>
12
11
  <% showcase.description "This button component handles what we click on" %>
13
12
 
14
13
  <% showcase.sample "Basic" do %>
15
14
  <%= render "component/button", content: "Button content", mode: :small %>
16
15
  <% end %>
17
16
 
18
- <% showcase.sample "Large" do %>
17
+ <% showcase.sample "Large", description: "This is our larger button" do %>
19
18
  <%= render "component/button", content: "Button content", mode: :large %>
20
19
  <% end %>
21
20
 
@@ -27,7 +26,35 @@ Here's how to showcase a standard button component:
27
26
 
28
27
  Which will then render the following:
29
28
 
30
- ![](/readme/example.png?raw=true "Showcase showing a button component")
29
+ | Light Mode | Dark Mode |
30
+ | --- | --- |
31
+ | ![](/readme/example-light.png?raw=true "Showcase showing a button component") | ![](/readme/example-dark.png?raw=true "Showcase showing a button component") |
32
+
33
+ Each sample shows the render time in milliseconds and the allocation count so it's easier to spot if there's something different happening between your samples.
34
+
35
+ ## Syntax Highlighting
36
+
37
+ To have out of the box syntax highlighting, add `gem "rouge"` to your Gemfile and Showcase will set it up. Any denoted syntaxes in your samples are then highlighted, e.g.
38
+
39
+ ```erb
40
+ # app/views/showcase/previews/_plain_ruby.ruby
41
+ <% showcase.sample "Basic", syntax: :ruby do %>
42
+ concat "hello".upcase
43
+ <% end %>
44
+ ```
45
+
46
+ To change the default theme, look at [Loading your own syntax highlighting theme](#loading-your-own-syntax-highlighting-theme).
47
+
48
+ To use a different syntax highlighter, you can assign your own Proc to `sample_renderer` like this:
49
+
50
+ ```ruby
51
+ # config/initializers/showcase.rb
52
+ if defined?(Showcase)
53
+ Showcase.sample_renderer = ->(source, syntax) do
54
+ # Return a String of lexed and formatted code.
55
+ end
56
+ end
57
+ ```
31
58
 
32
59
  ## Using options contexts
33
60
 
@@ -36,7 +63,7 @@ Showcase also supports custom options contexts. They're useful for cases where t
36
63
  By default, Showcase ships Nice Partials and Stimulus contexts out of the box. Here's a sample of the Stimulus one:
37
64
 
38
65
  ```erb
39
- <% showcase.options.stimulus controller: :welcome do |o| %>
66
+ <% showcase.options.context :stimulus, controller: :welcome do |o| %>
40
67
  <% o.optional.targets :greeter, "If the id of the target element must be printed" %>
41
68
  <% end %>
42
69
  ```
@@ -83,6 +110,14 @@ class ShowcaseTest < Showcase::PreviewsTest
83
110
  end
84
111
  ```
85
112
 
113
+ ## Full Rails engine support
114
+
115
+ Any Rails engines in your app that ships previews in their `app/views/showcase/previews` directory will automatically be surfaced in your app. Here's an example from the [bullet_train-themes-light Rails engine](https://github.com/bullet-train-co/bullet_train-core/tree/main/bullet_train-themes-light/app/views/showcase/previews).
116
+
117
+ Showcase respects the Rails views rendering order, allowing you to override a specific preview. So if an engine ships an `app/views/showcase/previews/partials/_alert.html.erb` preview, you can copy that to the same path in your app and tailor it to suit your app's documentation needs. Showcase will then show your override instead of the engine's original.
118
+
119
+ _📖 How does this work? 📖_ Internally, Showcase leverages Rails controllers' ordered set of `view_paths` — which each engine automatically prepends their app/views directory to by calling something like [`ActionController::Base.prepend_view_path`](https://github.com/rails/rails/blob/e78ed07e008676752b2ed2cff97e74b31ffacaf5/railties/lib/rails/engine.rb#L606) when initializing.
120
+
86
121
  ## View examples
87
122
 
88
123
  Clone the repository, run `bundle install`, then run `bin/rails server`, visit localhost:3000 in your browser.
@@ -131,7 +166,7 @@ partials, make sure to include `"showcase"` in your list of assets.
131
166
  [showcase/engine/_javascripts.html.erb]: ./showcase/engine/_javascripts.html.erb
132
167
  [showcase/engine/_stylesheets.html.erb]: ./showcase/engine/_stylesheets.html.erb
133
168
 
134
- #### Loading your own syntax highlighting theme
169
+ ### Loading your own syntax highlighting theme
135
170
 
136
171
  By default, Showcase's syntax highlighting runs on Rouge's "github" theme.
137
172
 
@@ -146,7 +181,7 @@ To use a different theme, override [showcase/engine/_stylesheets.html.erb][] wit
146
181
 
147
182
  ## Installation
148
183
 
149
- Add this line to your application's Gemfile. To get the automatic integration testing make sure the `showcase-rails` gem is available to your test environment:
184
+ Add this line to your application's Gemfile. To get the previews testing make sure the `showcase-rails` gem is available to your test environment:
150
185
 
151
186
  ```ruby
152
187
  group :development, :test do
@@ -826,6 +826,11 @@ select {
826
826
  border-radius: 0.375rem;
827
827
  }
828
828
 
829
+ .sc-rounded-t-md {
830
+ border-top-left-radius: 0.375rem;
831
+ border-top-right-radius: 0.375rem;
832
+ }
833
+
829
834
  .sc-border {
830
835
  border-width: 1px;
831
836
  }
@@ -964,11 +969,6 @@ select {
964
969
  line-height: 1.375;
965
970
  }
966
971
 
967
- .sc-text-black {
968
- --tw-text-opacity: 1;
969
- color: rgb(0 0 0 / var(--tw-text-opacity));
970
- }
971
-
972
972
  .sc-text-slate-500 {
973
973
  --tw-text-opacity: 1;
974
974
  color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -993,6 +993,35 @@ select {
993
993
  text-decoration-line: none;
994
994
  }
995
995
 
996
+ @media (prefers-color-scheme: dark) {
997
+ .dark\:sc-bg-neutral-700\/50 {
998
+ background-color: rgb(64 64 64 / 0.5);
999
+ }
1000
+
1001
+ .dark\:sc-bg-neutral-800 {
1002
+ --tw-bg-opacity: 1;
1003
+ background-color: rgb(38 38 38 / var(--tw-bg-opacity));
1004
+ }
1005
+
1006
+ .dark\:sc-bg-neutral-900 {
1007
+ --tw-bg-opacity: 1;
1008
+ background-color: rgb(23 23 23 / var(--tw-bg-opacity));
1009
+ }
1010
+
1011
+ .dark\:sc-text-inherit {
1012
+ color: inherit;
1013
+ }
1014
+
1015
+ .dark\:sc-text-white {
1016
+ --tw-text-opacity: 1;
1017
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1018
+ }
1019
+
1020
+ .dark\:hover\:sc-bg-neutral-700\/50:hover {
1021
+ background-color: rgb(64 64 64 / 0.5);
1022
+ }
1023
+ }
1024
+
996
1025
  @media (min-width: 768px) {
997
1026
  .md\:sc-text-lg {
998
1027
  font-size: 1.125rem;
@@ -3,7 +3,7 @@
3
3
 
4
4
  <table class="sc-table sc-border-collapse sc-border sc-border-gray-200">
5
5
  <thead>
6
- <tr class="sc-bg-slate-50">
6
+ <tr class="sc-bg-slate-50 dark:sc-bg-neutral-800">
7
7
  <% options.headers.each do |header| %>
8
8
  <th class="sc-px-4 sc-py-2"><%= header.to_s.humanize %></th>
9
9
  <% end %>
@@ -1,4 +1,4 @@
1
- <main class="sc-flex sc-flex-wrap" aria-labelledby="showcase_main_title">
1
+ <main class="sc-flex sc-flex-wrap dark:sc-bg-neutral-900 dark:sc-text-white" aria-labelledby="showcase_main_title">
2
2
  <section class="sc-grid sc-grid-cols-12 sc-w-full">
3
3
  <nav class="sc-col-span-3 xl:sc-col-span-2 sc-py-5 sc-h-full sc-border-r">
4
4
  <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>
@@ -1,11 +1,11 @@
1
1
  <section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md" aria-labelledby="showcase_<%= sample.id %>_title">
2
2
  <showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
3
- <header class="sc-bg-slate-100/50">
3
+ <header class="sc-bg-slate-100/50 dark:sc-bg-neutral-700/50 sc-rounded-t-md">
4
4
  <div class="sc-flex sc-justify-between">
5
5
  <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>
6
6
 
7
7
  <% if event = sample.instrumented %>
8
- <div class="sc-text-xs sc-grid sc-gap-x-2 sc-m-2 sc-italic sc-text-slate-500">
8
+ <div class="sc-text-xs sc-grid sc-gap-x-2 sc-m-2 sc-italic sc-text-slate-500 dark:sc-text-inherit">
9
9
  <span><%= event.duration.round(1) %>ms</span>
10
10
  <span><%= event.allocations %> allocs</span>
11
11
  </div>
@@ -25,7 +25,7 @@
25
25
 
26
26
  <% if sample.source %>
27
27
  <details>
28
- <summary class="sc-px-4 sc-py-2 hover:sc-bg-indigo-50 sc-cursor-pointer sc-select-none">View Source</summary>
28
+ <summary class="sc-px-4 sc-py-2 hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-cursor-pointer sc-select-none">View Source</summary>
29
29
 
30
30
  <section class="sc-highlight sc-px-4 sc-py-2 sc-relative sc-overflow-y-auto hover:sc-select-all">
31
31
  <pre><%= sample.source %></pre>
@@ -1,3 +1,3 @@
1
- <article class="hover:sc-bg-indigo-50 <%= "sc-bg-indigo-50" if path.id == params[:id] %>">
1
+ <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] %>">
2
2
  <%= 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" %>
3
3
  </article>
@@ -1,4 +1,4 @@
1
1
  <details open class="sc-flex sc-flex-col <%= "sc-pl-4" unless tree.root? %>">
2
- <%= tag.summary tree.name.titleize, class: "hover:sc-bg-indigo-50 sc-font-medium sc-text-black sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
2
+ <%= tag.summary tree.name.titleize, class: "hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-font-medium sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
3
3
  <%= render tree.ordered_children %>
4
4
  </details>
@@ -1,3 +1,3 @@
1
1
  module Showcase
2
- VERSION = "0.2.5"
2
+ VERSION = "0.2.6"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: showcase-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.5
4
+ version: 0.2.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - Daniel Pence
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-03-01 00:00:00.000000000 Z
12
+ date: 2023-03-05 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails