showcase-rails 0.4.5 → 0.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88e437d814d89cdc6a3d023edce093a5ebe92da961b5658013cd57bae84af123
-  data.tar.gz: 7eef04b815c656c4c2eba45164ed0c1e7c6d2352053e5dc3c11854959b88e726
+  metadata.gz: 5d55137272e05cac25eb1a63619d93aec93e58920ce0e10bebe89e4e93212bd2
+  data.tar.gz: 98de3fa5a6a81932393911af0eef39d586e01fcc97dd92e78be74be308dbb660
 SHA512:
-  metadata.gz: 96caaccee98301814f06c6e3022a7e01b222a865deedb5c5198da5b39540596174f5f03a4b4f6b7746a973d81050cd2a747fba3b7241b19a82d3c57d7d8c9e7e
-  data.tar.gz: c59ef24d8e7a378ab4151f092be16aafd7a8e8027a745256f5d96e050ed7c703b2101c0fa361773673f5c07e4f5f7f4a42288cf6dd6bda0e34f38d7e66077a20
+  metadata.gz: 81a0a673de41fb14f2790ceafc3657729cd12c2af9049c535bb60fbb03a1b724f8086f141d231758b9e4eb839a53af290a8f13f57e524bf409e7d94bab775dd3
+  data.tar.gz: 5fb343533e486ccb31985b40fef3ce5482ca6594a2bc2838ec4afa60eb38d412e1a40b58c0de254f22a410f32b80e9c7bfa7f80a907c670ba35387d64e4c1c02

data/app/assets/builds/showcase.css

@@ -191,6 +191,10 @@ pre {
   display: list-item;
 }
 
+.sc-hidden {
+  display: none;
+}
+
 .sc-h-full {
   height: 100%;
 }
@@ -241,6 +245,10 @@ pre {
   align-items: center;
 }
 
+.sc-items-baseline {
+  align-items: baseline;
+}
+
 .sc-justify-between {
   justify-content: space-between;
 }
@@ -479,33 +487,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);
-  }
+:is(.sc-dark .dark\:sc-block) {
+  display: block;
+}
 
-  .dark\:sc-bg-neutral-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-  }
+:is(.sc-dark .dark\:sc-hidden) {
+  display: none;
+}
 
-  .dark\:sc-bg-neutral-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-  }
+:is(.sc-dark .dark\:sc-bg-neutral-700\/50) {
+  background-color: rgb(64 64 64 / 0.5);
+}
 
-  .dark\:sc-text-inherit {
-    color: inherit;
-  }
+:is(.sc-dark .dark\:sc-bg-neutral-800) {
+  --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));
-  }
+:is(.sc-dark .dark\:sc-bg-neutral-900) {
+  --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);
-  }
+:is(.sc-dark .dark\:sc-text-inherit) {
+  color: inherit;
+}
+
+:is(.sc-dark .dark\:sc-text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.sc-dark .dark\:hover\:sc-bg-neutral-700\/50:hover) {
+  background-color: rgb(64 64 64 / 0.5);
 }
 
 @media (min-width: 768px) {

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.4.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: showcase-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.5
+  version: 0.4.6
 platform: ruby
 authors:
 - Daniel Pence
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-28 00:00:00.000000000 Z
+date: 2023-08-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -103,7 +103,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.4.17
 signing_key:
 specification_version: 4
 summary: Showcase helps you show off and document your partials, components, view