showcase-rails 0.4.5 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88e437d814d89cdc6a3d023edce093a5ebe92da961b5658013cd57bae84af123
-  data.tar.gz: 7eef04b815c656c4c2eba45164ed0c1e7c6d2352053e5dc3c11854959b88e726
+  metadata.gz: 762f93c7afc1ffebdb446132710f91b8070d1dacf388752916195a18de572953
+  data.tar.gz: bc98f34767b38cc924aa19088a184d3a2919fe5ec23886dce3b4080cd3200498
 SHA512:
-  metadata.gz: 96caaccee98301814f06c6e3022a7e01b222a865deedb5c5198da5b39540596174f5f03a4b4f6b7746a973d81050cd2a747fba3b7241b19a82d3c57d7d8c9e7e
-  data.tar.gz: c59ef24d8e7a378ab4151f092be16aafd7a8e8027a745256f5d96e050ed7c703b2101c0fa361773673f5c07e4f5f7f4a42288cf6dd6bda0e34f38d7e66077a20
+  metadata.gz: 326043beab9c4e250a882f889c2ae857ae0a0227cb21b416607a0337c85638e5e6ea4304b5b7e062258e9a56179416c08d482c32da31c2aff79884e496671a19
+  data.tar.gz: 34a4435d411b1d6a747efe95724f4458b8faa58bd4bf62a005228072682114a73faae29b5122c10bd643c1f23c757017af66a76479fd7c59a26f057b1c8476e3

data/MIT-LICENSE

@@ -1,4 +1,4 @@
-Copyright 2022 Kasper Timm Hansen
+Copyright 2022 Bullet Train, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/README.md

@@ -2,7 +2,7 @@
 
 Showcase lets you build previews for your partials, components, view helpers, Stimulus controllers and more — Rails engines included!
 
-Add a partial to `app/views/showcase/previews` and it'll show up in Showcase's menu.
+You can see it in action on [https://bullettrain.co/docs/showcase](https://bullettrain.co/docs/showcase).
 
 | Light Mode | Dark Mode |
 | --- | --- |
@@ -12,6 +12,13 @@ Each sample shows the render time in milliseconds and the allocation count so it
 
 ## What can I showcase?
 
+Add a partial in `app/views/showcase/previews` and it'll show up in Showcase's sidebar menu.
+
+So `app/views/showcase/previews/_button.html.erb` will add top-level Button page. Directories are respected so a `app/views/showcase/previews/deeply/nested/_partial.html.erb` file will create Deeply > Nested > Partial in the sidebar.
+
+Within each partial preview file, you get access to a `showcase` local variable.
+Here's some examples of using it, and what you can showcase in your app or engine.
+
 ### Rails partials
 
 Here's how to showcase a standard button component written with standard Rails partials:
@@ -393,7 +400,7 @@ partials, make sure to include `"showcase"` in your list of assets.
 [showcase/engine/_stylesheets.html.erb]: app/views/showcase/engine/_stylesheets.html.erb
 
 ## Contributing
-Contribution directions go here.
+Please open issues and/or pull requests with any feedback, fixes, or potential features you'd like us to look at. Thank you!
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/builds/showcase.css

@@ -1,31 +1,3 @@
-/*
-  ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
-  */
-
-/*
-  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-  */
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  line-height: 1.5;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-body {
-  margin: 0;
-}
-
-pre {
-  margin: 0;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 1em;
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -74,6 +46,10 @@ pre {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -124,6 +100,38 @@ pre {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+  ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+  */
+
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+  */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.5;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+body {
+  margin: 0;
+}
+
+pre {
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
 }
 
 .sc-link {
@@ -191,6 +199,10 @@ pre {
   display: list-item;
 }
 
+.sc-hidden {
+  display: none;
+}
+
 .sc-h-full {
   height: 100%;
 }
@@ -241,6 +253,10 @@ pre {
   align-items: center;
 }
 
+.sc-items-baseline {
+  align-items: baseline;
+}
+
 .sc-justify-between {
   justify-content: space-between;
 }
@@ -479,33 +495,39 @@ pre {
   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:sc-bg-neutral-700\/50 {
-    background-color: rgb(64 64 64 / 0.5);
-  }
+.dark\:sc-block:is(.sc-dark *) {
+  display: block;
+}
 
-  .dark\:sc-bg-neutral-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-  }
+.dark\:sc-hidden:is(.sc-dark *) {
+  display: none;
+}
 
-  .dark\:sc-bg-neutral-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-  }
+.dark\:sc-bg-neutral-700\/50:is(.sc-dark *) {
+  background-color: rgb(64 64 64 / 0.5);
+}
 
-  .dark\:sc-text-inherit {
-    color: inherit;
-  }
+.dark\:sc-bg-neutral-800:is(.sc-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 
-  .dark\:sc-text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
+.dark\:sc-bg-neutral-900:is(.sc-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
 
-  .dark\:hover\:sc-bg-neutral-700\/50:hover {
-    background-color: rgb(64 64 64 / 0.5);
-  }
+.dark\:sc-text-inherit:is(.sc-dark *) {
+  color: inherit;
+}
+
+.dark\:sc-text-white:is(.sc-dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.dark\:hover\:sc-bg-neutral-700\/50:hover:is(.sc-dark *) {
+  background-color: rgb(64 64 64 / 0.5);
 }
 
 @media (min-width: 768px) {

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

@@ -39,6 +39,10 @@
   color: #116329;
   background-color: #dafbe1;
 }
+.sc-highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
 .sc-highlight .kc {
   color: #0550ae;
 }
@@ -153,6 +157,10 @@
     color: #aff5b4;
     background-color: #033a16;
   }
+  .sc-highlight .ges {
+    font-weight: bold;
+    font-style: italic;
+  }
   .sc-highlight .kc {
     color: #79c0ff;
   }

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

@@ -4,6 +4,23 @@
     <title>Showcase</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
+    <script>
+      // We're setting this directly here to help prevent Flash of Unstyled Content (FOUC).
+      class Showcase {
+        static start() {
+          const preference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+          this.colorScheme = localStorage.colorScheme || preference
+        }
+
+        static set colorScheme(value) {
+          localStorage.colorScheme = value
+          document.documentElement.classList.toggle("sc-dark", value === "dark")
+        }
+      }
+
+      Showcase.start()
+    </script>
+
     <%= render "showcase/engine/head" %>
     <%= render "showcase/engine/stylesheets" %>
     <%= render "showcase/engine/javascripts" %>

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

@@ -1,9 +1,16 @@
 <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-h-full sc-border-0 sc-border-r sc-border-solid sc-border-gray-200">
-      <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-m-0">
-        <%= link_to "Showcase", root_url, class: "sc-link sc-block sc-pt-5 sc-pb-2 sc-pl-4" %>
-      </h1>
+      <header class="sc-flex sc-items-baseline sc-pt-5 sc-pb-2 sc-pl-4">
+        <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-m-0">
+          <%= link_to "Showcase", root_url, class: "sc-link" %>
+        </h1>
+
+        <section class="sc-link sc-text-sm sc-px-2 sc-cursor-pointer">
+          <a onclick="Showcase.colorScheme = 'light'" class="sc-hidden dark:sc-block">light mode</a>
+          <a onclick="Showcase.colorScheme = 'dark'" class="sc-block dark:sc-hidden">dark mode</a>
+        </section>
+      </header>
 
       <%= render Showcase::Path.tree %>
     </nav>

data/config/tailwind.config.js

@@ -1,6 +1,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
+  darkMode: 'class',
   prefix: 'sc-',
   content: [
     './public/*.html',

data/lib/showcase/version.rb

@@ -1,3 +1,3 @@
 module Showcase
-  VERSION = "0.4.5"
+  VERSION = "0.5.0"
 end

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: showcase-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.5
+  version: 0.5.0
 platform: ruby
 authors:
 - Daniel Pence
 - Kasper Timm Hansen
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-28 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -17,14 +16,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 6.1.0
+        version: '7.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 6.1.0
+        version: '7.2'
 - !ruby/object:Gem::Dependency
   name: tailwindcss-rails
   requirement: !ruby/object:Gem::Requirement
@@ -39,7 +38,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description:
 email:
 - hey@kaspth.com
 executables: []
@@ -88,7 +86,6 @@ metadata:
   homepage_uri: https://github.com/kaspth/showcase
   source_code_uri: https://github.com/kaspth/showcase
   changelog_uri: https://github.com/kaspth/showcase/blob/main/CHANGELOG.md
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -103,8 +100,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
-signing_key:
+rubygems_version: 3.7.2
 specification_version: 4
 summary: Showcase helps you show off and document your partials, components, view
   helpers and Stimulus controllers.