b4um_generators 0.1.0

data/lib/generators/b4um/install/templates/b4um/theme-switcher.css

@@ -0,0 +1,178 @@
+/* -------------------------------------------------------
+   Theme switcher
+------------------------------------------------------- */
+
+.b4um-theme-switcher {
+  position: fixed;
+  right: 1.25rem;
+  bottom: 1.25rem;
+  z-index: 1000;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+/* -------------------------------------------------------
+   Toggle
+------------------------------------------------------- */
+
+.b4um-theme-switcher__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 40px;
+  height: 40px;
+  padding: 0;
+
+  border: 1px solid var(--b4um-border);
+  border-radius: 50%;
+
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text-secondary);
+
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+
+  box-shadow: 0 2px 8px var(--b4um-primary-shadow-soft);
+
+  cursor: pointer;
+
+  transition:
+    background-color 0.18s ease,
+    border-color 0.18s ease,
+    color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.b4um-theme-switcher__toggle:hover {
+  border-color: var(--b4um-primary);
+  background-color: var(--b4um-surface-soft);
+  color: var(--b4um-primary);
+
+  transform: translateY(-1px);
+}
+
+.b4um-theme-switcher__toggle:focus-visible {
+  outline: none;
+
+  border-color: var(--b4um-primary);
+
+  box-shadow:
+    0 0 0 3px var(--b4um-primary-soft),
+    0 2px 8px var(--b4um-primary-shadow-soft);
+}
+
+/* -------------------------------------------------------
+   Menu
+------------------------------------------------------- */
+
+.b4um-theme-switcher__menu {
+  min-width: 148px;
+  padding: 0.4rem;
+
+  border: 1px solid var(--b4um-border);
+  border-radius: 10px;
+
+  background-color: var(--b4um-surface);
+  color: var(--b4um-text);
+
+  box-shadow: 0 4px 16px var(--b4um-primary-shadow-soft);
+}
+
+.b4um-theme-switcher__menu[hidden] {
+  display: none;
+}
+
+.b4um-theme-switcher__title {
+  padding: 0.35rem 0.6rem 0.45rem;
+
+  color: var(--b4um-text-muted);
+
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.055em;
+  text-transform: uppercase;
+}
+
+/* -------------------------------------------------------
+   Options
+------------------------------------------------------- */
+
+.b4um-theme-switcher__option {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+
+  width: 100%;
+  padding: 0.48rem 0.6rem;
+
+  border: 0;
+  border-radius: 6px;
+
+  background-color: transparent;
+  color: var(--b4um-text-secondary);
+
+  font: inherit;
+  font-size: 0.84rem;
+  text-align: left;
+
+  cursor: pointer;
+
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.b4um-theme-switcher__option:hover {
+  background-color: var(--b4um-surface-soft);
+  color: var(--b4um-text);
+}
+
+.b4um-theme-switcher__option.is-active {
+  background-color: var(--b4um-primary-soft);
+  color: var(--b4um-primary);
+}
+
+/* -------------------------------------------------------
+   Selection indicator
+------------------------------------------------------- */
+
+.b4um-theme-switcher__indicator {
+  width: 7px;
+  height: 7px;
+
+  flex: 0 0 7px;
+
+  border: 1px solid var(--b4um-border-hover);
+  border-radius: 50%;
+
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.b4um-theme-switcher__option.is-active .b4um-theme-switcher__indicator {
+  border-color: var(--b4um-primary);
+  background-color: var(--b4um-primary);
+}
+
+/* -------------------------------------------------------
+   Mobile
+------------------------------------------------------- */
+
+@media (max-width: 48rem) {
+  .b4um-theme-switcher {
+    right: 0.9rem;
+    bottom: 0.9rem;
+  }
+
+  .b4um-theme-switcher__toggle {
+    width: 38px;
+    height: 38px;
+  }
+}

data/lib/generators/b4um/install/templates/b4um/theme.css

@@ -0,0 +1,132 @@
+/* -------------------------------------------------------
+   Theme
+------------------------------------------------------- */
+
+:root {
+  /* Backgrounds */
+  --b4um-page-background: #c2e7ff;
+  --b4um-surface: #ffffff;
+  --b4um-surface-soft: #f3f5ff;
+
+  /* Text */
+  --b4um-text: #222222;
+  --b4um-text-secondary: #555d6b;
+  --b4um-text-muted: #666666;
+  --b4um-text-checkbox: #333333;
+  --b4um-text-on-primary: #ffffff;
+
+  /* Primary color */
+  --b4um-primary: #2e47d2;
+  --b4um-primary-hover: #243bb8;
+  --b4um-primary-soft: rgba(46, 71, 210, 0.12);
+  --b4um-primary-focus: rgba(46, 71, 210, 0.22);
+
+  /* Links */
+  --b4um-link: #0000ff;
+  --b4um-link-visited: #2e47d2;
+
+  /* Borders */
+  --b4um-border: #b9bec8;
+  --b4um-border-hover: #8d95a3;
+  --b4um-border-checkbox: #aeb5c0;
+  --b4um-border-light: #e5e7eb;
+  --b4um-border-list: #dddddd;
+  --b4um-radius: 20px;
+
+  /* Success */
+  --b4um-success-background: #ccffcc;
+  --b4um-success-border: #66cc66;
+
+  /* Warning */
+  --b4um-warning: #854d0e;
+  --b4um-warning-background: #fef9c3;
+  --b4um-warning-border: #fde68a;
+
+  /* Danger */
+  --b4um-danger: #cc0000;
+  --b4um-danger-hover: #990000;
+  --b4um-danger-border: #cf0000;
+  --b4um-danger-soft-border: #cc6666;
+  --b4um-danger-background: #ffcccc;
+
+  /* Neutral */
+  --b4um-neutral-background: #f0f0f0;
+
+  /* Code */
+  --b4um-code-background: #1e293b;
+  --b4um-code-text: #f8fafc;
+  --b4um-code-border: #334155;
+
+  /* Shadows */
+  --b4um-container-shadow: rgba(1, 1, 1, 0.7);
+  --b4um-primary-shadow: rgba(46, 71, 210, 0.22);
+  --b4um-primary-shadow-soft: rgba(46, 71, 210, 0.12);
+  --b4um-danger-shadow: rgba(204, 0, 0, 0.18);
+}
+
+/* -------------------------------------------------------
+   Dark theme
+------------------------------------------------------- */
+
+[data-b4um-theme='dark'] {
+  /* Backgrounds */
+  --b4um-page-background: #11151c;
+  --b4um-surface: #1c222b;
+  --b4um-surface-soft: #252c36;
+
+  /* Text */
+  --b4um-text: #f1f3f5;
+  --b4um-text-secondary: #c3c8d0;
+  --b4um-text-muted: #a8afb9;
+  --b4um-text-checkbox: #e5e7eb;
+  --b4um-text-on-primary: #ffffff;
+
+  /* Primary color */
+  --b4um-primary: #8ea2ff;
+  --b4um-primary-hover: #a9b8ff;
+  --b4um-primary-soft: rgba(142, 162, 255, 0.16);
+  --b4um-primary-focus: rgba(142, 162, 255, 0.32);
+
+  /* Links */
+  --b4um-link: #9aabff;
+  --b4um-link-visited: #b1a7ff;
+
+  /* Borders */
+  --b4um-border: #555c66;
+  --b4um-border-hover: #737c89;
+  --b4um-border-checkbox: #666e79;
+  --b4um-border-light: #383d45;
+  --b4um-border-list: #444a53;
+
+  /* Success */
+  --b4um-success-background: #173c2b;
+  --b4um-success-border: #3c8c65;
+
+  /* Warning */
+  --b4um-warning: #f6cf73;
+  --b4um-warning-background: #3b3217;
+  --b4um-warning-border: #756323;
+
+  /* Danger */
+  --b4um-danger: #ff8585;
+  --b4um-danger-hover: #ffa0a0;
+  --b4um-danger-border: #d65f5f;
+  --b4um-danger-soft-border: #8f4c4c;
+  --b4um-danger-background: #452323;
+
+  /* Neutral */
+  --b4um-neutral-background: #30343a;
+
+  /* Code */
+  --b4um-code-background: #0f1115;
+  --b4um-code-text: #f8fafc;
+  --b4um-code-border: #3b424d;
+
+  /* Shadows */
+  --b4um-container-shadow: rgba(0, 0, 0, 0.55);
+  --b4um-primary-shadow: rgba(142, 162, 255, 0.24);
+  --b4um-primary-shadow-soft: rgba(142, 162, 255, 0.14);
+  --b4um-danger-shadow: rgba(255, 133, 133, 0.18);
+
+  color-scheme: dark;
+}

data/lib/generators/b4um/install/templates/b4um.css

@@ -0,0 +1,20 @@
+@import 'b4um/theme.css';
+@import 'b4um/base.css';
+@import 'b4um/layout.css';
+@import 'b4um/navigation.css';
+@import 'b4um/forms.css';
+@import 'b4um/search.css';
+@import 'b4um/resources.css';
+@import 'b4um/lightbox.css';
+@import 'b4um/hero.css';
+@import 'b4um/cards.css';
+@import 'b4um/tables.css';
+@import 'b4um/pagination.css';
+@import 'b4um/badges.css';
+@import 'b4um/callouts.css';
+@import 'b4um/empty-state.css';
+@import 'b4um/flash.css';
+@import 'b4um/comments.css';
+@import 'b4um/footer.css';
+@import 'b4um/cookie-consent.css';
+@import 'b4um/theme-switcher.css';

data/lib/generators/b4um/install/templates/b4um.yml

@@ -0,0 +1,12 @@
+sitemap:
+  - key: column_1
+    title: Kontakt
+  - key: column_2
+    title: Inhalte
+  - key: column_3
+    title: Service
+  - key: column_4
+    title: Mehr
+
+legal_links:
+  placement: footer

data/lib/generators/b4um/install/templates/b4um_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "yaml"
+
+module B4umHelper
+  def b4um_sitemap_columns
+    config_path = Rails.root.join("config/b4um.yml")
+
+    return [] unless File.exist?(config_path)
+
+    config = YAML.safe_load_file(config_path) || {}
+
+    Array(config["sitemap"])
+  end
+
+  def b4um_sitemap_path(route)
+    route_name = route.to_s
+
+    return unless route_name.match?(/\A[a-z0-9_]+_path\z/)
+
+    route_helpers = Rails.application.routes.url_helpers
+
+    return unless route_helpers.respond_to?(route_name)
+
+    route_helpers.public_send(route_name)
+  end
+end

data/lib/generators/b4um/install/templates/cookie_consent_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from '@hotwired/stimulus'
+
+const STORAGE_KEY = 'b4um-cookie-consent'
+const OPEN_EVENT = 'b4um:cookie-consent-open'
+
+export default class extends Controller {
+  static targets = ['banner']
+
+  connect() {
+    this.open = this.open.bind(this)
+
+    window.addEventListener(OPEN_EVENT, this.open)
+    document.addEventListener('click', this.handleSettingsClick)
+
+    const consent = window.localStorage.getItem(STORAGE_KEY)
+
+    if (consent === null) {
+      this.show()
+      return
+    }
+
+    this.dispatchConsentEvent(consent)
+  }
+
+  disconnect() {
+    window.removeEventListener(OPEN_EVENT, this.open)
+    document.removeEventListener('click', this.handleSettingsClick)
+  }
+
+  accept() {
+    this.storeConsent('accepted')
+    this.hide()
+  }
+
+  reject() {
+    this.storeConsent('rejected')
+    this.hide()
+  }
+
+  handleSettingsClick(event) {
+    const trigger = event.target.closest('[data-b4um-cookie-consent-open]')
+
+    if (!trigger) return
+
+    event.preventDefault()
+
+    window.dispatchEvent(new CustomEvent(OPEN_EVENT))
+  }
+
+  open() {
+    this.show()
+  }
+
+  show() {
+    this.bannerTarget.hidden = false
+  }
+
+  hide() {
+    this.bannerTarget.hidden = true
+  }
+
+  storeConsent(consent) {
+    window.localStorage.setItem(STORAGE_KEY, consent)
+    this.dispatchConsentEvent(consent)
+  }
+
+  dispatchConsentEvent(consent) {
+    if (consent === 'accepted') {
+      window.dispatchEvent(new CustomEvent('b4um:cookie-consent-accepted'))
+    }
+
+    if (consent === 'rejected') {
+      window.dispatchEvent(new CustomEvent('b4um:cookie-consent-rejected'))
+    }
+  }
+}

data/lib/generators/b4um/install/templates/dismissible_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  dismiss() {
+    this.element.remove()
+  }
+}