open_blog 0.1.0

data/lib/generators/open_blog/install/install_generator.rb

@@ -0,0 +1,188 @@
+require "rails/generators"
+require "bundler"
+require_relative "../generator_support"
+
+module OpenBlog
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      include GeneratorSupport
+      source_root File.expand_path("templates", __dir__)
+      source_paths << OpenBlog::Engine.root.join("app/assets/javascripts").to_s
+
+      class_option :skip_tailwind, type: :boolean, default: false
+      class_option :body_format, type: :string, default: "markdown"
+      class_option :mount_at, type: :string, default: "/blog"
+      class_option :mount_position, type: :string, default: "last"
+      class_option :site_name, type: :string
+      class_option :author_name, type: :string
+      class_option :skip_sample, type: :boolean, default: false
+      class_option :skip_migrate, type: :boolean, default: false
+      class_option :admin_suite, type: :boolean, default: false
+
+      def detect
+        unless %w[markdown rich_text both].include?(options[:body_format])
+          raise Thor::Error, "--body-format must be markdown, rich_text or both"
+        end
+        unless %w[first last].include?(options[:mount_position])
+          raise Thor::Error, "--mount-position must be first or last"
+        end
+        unless options[:mount_at].match?(%r{\A/(?:[a-zA-Z0-9_-]+(?:/[a-zA-Z0-9_-]+)*)?\z})
+          raise Thor::Error, "--mount-at must be an absolute path without a query, fragment or trailing slash"
+        end
+        @javascript = javascript_setup
+        @css = css_setup
+        @install_stimulus = !File.file?(host_file("app/javascript/controllers/index.js"))
+        @install_tailwind = @css == :none
+        say "JavaScript: #{@javascript}; stylesheets: #{@css}"
+        say "Tailwind 3 detected; using the built blog stylesheet." if @css == :legacy
+        if @install_tailwind
+          say "Tailwind's installer changes the host layout, bin/dev and Procfile.dev. Use --skip-tailwind to keep your existing CSS setup."
+        end
+        say "The JavaScript installers may update the host entrypoint and controller manifest." if @install_stimulus || @javascript != :importmap
+      end
+
+      def configure_blog
+        @site_name = identity(:site_name, "Site name", "Example")
+        @author_name = identity(:author_name, "Author name", "Ada Example")
+        template "initializer.rb.tt", "config/initializers/open_blog.rb", **copy_options
+      end
+
+      def install_dependencies
+        processor = (Rails.application.config.active_storage.variant_processor || :vips).to_sym
+        backend = { vips: "ruby-vips", mini_magick: "mini_magick" }.fetch(processor) do
+          raise Thor::Error, "Unsupported Active Storage variant processor: #{processor}"
+        end
+        additions = [ "stimulus-rails", "image_processing", backend ]
+        additions << "importmap-rails" if @javascript == :none
+        additions << "tailwindcss-rails" if @install_tailwind
+        added = additions.reject { |name| host_read("Gemfile").match?(/^\s*gem\s+["']#{Regexp.escape(name)}["']/) }
+        added.each { |name| gem(name, *(name == "tailwindcss-rails" ? [ "~> 4.0" ] : [])) }
+        run_host_command("bundle", "install") if added.any?
+        if @javascript == :none
+          run_host_command("bin/rails", "importmap:install")
+          @javascript = :importmap
+        end
+        run_host_command("bin/rails", "stimulus:install") if @install_stimulus
+        if @install_tailwind
+          run_host_command("bin/rails", "tailwindcss:install")
+          @css = :rails
+        end
+      end
+
+      def install_migrations
+        run_host_command("bin/rails", "railties:install:migrations", "FROM=active_storage,action_text,open_blog")
+        run_host_command("bin/rails", "db:migrate") unless options[:skip_migrate]
+      end
+
+      def mount_engine
+        return if host_read("config/routes.rb").match?(/^\s*mount\s+OpenBlog::Engine\b/)
+        declaration = "  mount OpenBlog::Engine, at: #{options[:mount_at].dump}\n"
+        if options[:mount_position] == "first"
+          unless host_read("config/routes.rb").match?(/Rails\.application\.routes\.draw do\s*\n/)
+            raise Thor::Error, "Cannot locate the routes draw block; mount OpenBlog::Engine manually."
+          end
+          inject_into_file "config/routes.rb", declaration, after: /Rails\.application\.routes\.draw do\s*\n/
+        else
+          unless host_read("config/routes.rb").match?(/^end\s*\z/)
+            raise Thor::Error, "Cannot locate the routes draw block; mount OpenBlog::Engine manually."
+          end
+          inject_into_file "config/routes.rb", declaration, before: /^end\s*\z/
+        end
+      end
+
+      def install_views
+        copy_reader_views(css: @css, javascript: @javascript)
+      end
+
+      def install_theme
+        if %i[rails bundler].include?(@css)
+          %w[theme.css blog.css syntax.css].each do |name|
+            copy_file "theme/#{name}", "app/assets/tailwind/open_blog/#{name}", **copy_options
+          end
+          entry, import = if @css == :rails
+            [ "app/assets/tailwind/application.css", '@import "./open_blog/theme.css";' ]
+          else
+            [ "app/assets/stylesheets/application.tailwind.css", '@import "../tailwind/open_blog/theme.css";' ]
+          end
+          append_once(entry, "\n#{import}\n")
+        else
+          copy_file "theme/open_blog_theme.css", "app/assets/stylesheets/open_blog_theme.css", **copy_options
+        end
+      end
+
+      def install_controllers
+        directory "open_blog/controllers", "app/javascript/controllers/open_blog", **copy_options
+        if @javascript == :bundler
+          say "Regenerating the host Stimulus controller manifest."
+          run_host_command("bin/rails", "stimulus:manifest:update")
+        else
+          append_once "config/importmap.rb", "\npin_all_from \"app/javascript/controllers\", under: \"controllers\"\n"
+          index = "app/javascript/controllers/index.js"
+          unless host_read(index).match?(/(?:eager|lazy)LoadControllersFrom\s*\(/)
+            controller_names.each do |name|
+              identifier = "open-blog--#{name.tr('_', '-')}"
+              next if host_read(index).match?(/application\.register\(\s*["']#{Regexp.escape(identifier)}["']/)
+              variable = "OpenBlog#{name.camelize}Controller"
+              append_to_file index, "\nimport #{variable} from \"controllers/open_blog/#{name}_controller\"\napplication.register(#{identifier.dump}, #{variable})\n"
+            end
+          end
+        end
+        say "Blog JavaScript entrypoint: application. Register these controllers there if you use another public entrypoint."
+      end
+
+      def install_text
+        copy_file OpenBlog::Engine.root.join("config/locales/open_blog.en.yml").to_s, "config/locales/open_blog.en.yml", **copy_options
+      end
+
+      def sample_and_report
+        if options[:skip_migrate]
+          say "Sample deferred: run db:migrate, then open_blog:sample when ready."
+        elsif !options[:skip_sample]
+          run_host_command("bin/rails", "open_blog:sample")
+        end
+        say "Blog: #{options[:mount_at]}"
+        if options[:skip_migrate]
+          say "API token deferred: run db:migrate, then open_blog:install_token."
+        else
+          run_host_command("bin/rails", "open_blog:install_token")
+        end
+        say "Publishing API: #{options[:mount_at].chomp('/')}/api/v1"
+        say "MCP: #{options[:mount_at].chomp('/')}/mcp"
+        invoke "open_blog:admin_suite", [], force: options[:force], skip: options[:skip] if options[:admin_suite]
+        say "Next: set your public base URL, review publisher details and policy links, and customize the theme."
+        run_host_command("bin/rails", "open_blog:doctor")
+      end
+
+      private
+
+      def run_host_command(*arguments)
+        say_status :run, arguments.join(" ")
+        return true if options[:pretend]
+        success = Bundler.with_unbundled_env { system(*arguments, chdir: destination_root) }
+        if !success && arguments == [ "bin/rails", "open_blog:doctor" ]
+          say "Doctor found setup issues; review the report above and run open_blog:doctor after completing setup."
+        elsif !success
+          raise Thor::Error, "Host command failed: #{arguments.join(' ')}"
+        end
+        success
+      end
+
+      def identity(key, prompt, placeholder)
+        return options[key] if options[key].present?
+        return ask("#{prompt}:", default: placeholder) if $stdin.tty?
+        say "Using placeholder #{prompt.downcase} #{placeholder.inspect}; update config/initializers/open_blog.rb."
+        placeholder
+      end
+
+      def controller_names
+        Dir[OpenBlog::Engine.root.join("app/assets/javascripts/open_blog/controllers/*_controller.js")].map do |path|
+          File.basename(path, "_controller.js")
+        end.sort
+      end
+
+      def body_formats
+        options[:body_format] == "both" ? %i[markdown rich_text] : [ options[:body_format].to_sym ]
+      end
+    end
+  end
+end

data/lib/generators/open_blog/install/templates/initializer.rb.tt

@@ -0,0 +1,16 @@
+OpenBlog.configure do |config|
+  config.site_name = <%= @site_name.dump %>
+  config.public_base_url = ENV["OPEN_BLOG_PUBLIC_BASE_URL"].presence
+  config.default_author = { name: <%= @author_name.dump %>, type: :person }
+  config.publisher = { name: <%= @site_name.dump %>, url: ENV["OPEN_BLOG_PUBLIC_BASE_URL"].presence }
+  config.mount_path = <%= options[:mount_at].dump %>
+  config.body_formats = [ <%= body_formats.map { |format| ":#{format}" }.join(", ") %> ]
+  config.default_body_format = <%= ":#{body_formats.first}" %>
+  config.primary_list_type = :categories
+  config.sign_in_destinations = []
+  config.ai_label = :when_required
+end
+<% if @css == :bundler -%>
+
+Rails.application.config.assets.excluded_paths << Rails.root.join("app/assets/tailwind")
+<% end -%>

data/lib/generators/open_blog/install/templates/sample_post.md

@@ -0,0 +1,54 @@
+## Make yourself at home
+
+This sample is a place to try **bold ideas**, *quiet emphasis* and ~~an earlier draft~~. An article can be short and still be useful.
+
+![Blue and green blocks arranged as a simple landscape]({{sample_image}} "A simple landscape for a fresh start")
+
+### A few things to try
+
+- Give your article a clear title.
+- Add an image with a useful description.
+- Keep paragraphs easy to read.
+
+1. Write a first draft.
+2. Read it aloud.
+3. Share it when you are ready.
+
+- [x] Start with a sample.
+- [ ] Write your next article.
+
+> A small observation can be the beginning of a good story.
+
+> [!NOTE]
+> This article is sample content. You can change or remove it.
+
+## Show an example
+
+Inline code such as `puts "hello"` fits naturally into a sentence. Longer examples have their own space:
+
+```ruby
+def greeting(name)
+  "Hello, #{name}!"
+end
+
+puts greeting("reader")
+```
+
+| Part | Purpose |
+| --- | --- |
+| Heading | Introduce the next idea |
+| Image | Show a useful detail |
+| Table | Compare a few related items |
+
+Visit [Ruby's website](https://www.ruby-lang.org/) for more examples. A plain address such as https://www.ruby-lang.org/ is also a link.
+
+## Leave room for the reader
+
+An article can include a reference without interrupting the main paragraph.[^note]
+
+The questions below are stored separately from the article body, so they stay easy to read and update.
+
+One line can lead to the next.
+This line demonstrates a paragraph with a line break.
+
+[^note]: This is an example footnote with a short explanation.

data/lib/generators/open_blog/install/templates/theme/blog.css

@@ -0,0 +1,193 @@
+.ob-page {
+  margin: 0;
+  background: var(--ob-surface);
+  color: var(--ob-text);
+  font-family: var(--ob-font-body);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.ob-page *, .ob-page *::before, .ob-page *::after { box-sizing: border-box; }
+.ob-page [hidden] { display: none !important; }
+.ob-page a { color: var(--ob-accent); text-underline-offset: 0.2em; }
+.ob-page a:hover { color: var(--ob-accent-hover); }
+.ob-page a:focus-visible, .ob-page button:focus-visible, .ob-page input:focus-visible,
+.ob-page .ob-table:focus-visible, .ob-page .ob-prose pre:focus-visible {
+  outline: 3px solid var(--ob-accent);
+  outline-offset: 4px;
+}
+.ob-page h1, .ob-page h2, .ob-page h3, .ob-page h4, .ob-page h5, .ob-page h6 {
+  color: var(--ob-heading);
+  font-family: var(--ob-font-display);
+  font-weight: 750;
+  line-height: 1.25;
+  text-wrap: balance;
+}
+.ob-page h1 { font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.035em; }
+.ob-page h2 { font-size: 1.5rem; }
+.ob-page h3 { font-size: 1.25rem; }
+.ob-page h4, .ob-page h5, .ob-page h6 { font-size: 1.125rem; }
+.ob-page img { max-width: 100%; height: auto; }
+.ob-page button { cursor: pointer; font: inherit; }
+.ob-page button:disabled { cursor: default; }
+.ob-main { max-width: var(--ob-page-width); margin: auto; padding: 3rem 1rem; }
+.ob-header, .ob-footer {
+  max-width: var(--ob-page-width);
+  margin: auto;
+  padding: 1.25rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+}
+.ob-header { border-bottom: 1px solid var(--ob-border); }
+.ob-header nav { margin-left: auto; }
+.ob-site-name { font-size: 1.125rem; font-weight: 800; text-decoration: none; }
+.ob-footer { border-top: 1px solid var(--ob-border); font-size: 0.875rem; }
+.ob-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
+.ob-index-heading, .ob-list-heading { margin-bottom: 1.5rem; }
+.ob-index-heading h1 { font-size: 2.25rem; font-weight: 800; }
+.ob-tagline, .ob-list-description, .ob-lede { color: var(--ob-text-muted); font-size: 1.125rem; margin-top: 0.75rem; }
+.ob-list-layout { display: grid; gap: 2rem; }
+.ob-list-main, .ob-sidebar, .ob-post-card, .ob-featured-details { min-width: 0; }
+.ob-search { margin-bottom: 1.5rem; }
+.ob-search label { display: block; margin-bottom: 0.5rem; font-weight: 700; }
+.ob-search-controls { display: flex; gap: 0.5rem; }
+.ob-search input { min-width: 0; width: 100%; padding: 0.5rem; border: 1px solid var(--ob-border-strong); border-radius: 0.5rem; background: var(--ob-surface); color: var(--ob-text); font: inherit; }
+.ob-search button { flex-shrink: 0; white-space: nowrap; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--ob-accent); color: var(--ob-accent-contrast); }
+.ob-search-results { margin-top: 0.75rem; border: 1px solid var(--ob-border); border-radius: 0.5rem; background: var(--ob-surface-raised); }
+.ob-sidebar .ob-search-results a { display: block; border-radius: 0.5rem; }
+.ob-search-results a:hover { background: var(--ob-accent-soft); }
+.ob-series-nav { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--ob-border); border-radius: 0.75rem; }
+.ob-series-nav h2 { font-size: 1.125rem; margin-bottom: 0.75rem; }
+.ob-series-nav p + p { margin-top: 0.5rem; }
+.ob-sidebar h2 { font-size: 1rem; margin-bottom: 0.75rem; }
+.ob-sidebar-categories ul { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; }
+.ob-sidebar-categories li { flex-shrink: 0; }
+.ob-sidebar a { display: block; padding: 0.4rem 0.8rem; border-radius: var(--ob-radius-pill); text-decoration: none; }
+.ob-sidebar a[aria-current="page"] { color: var(--ob-accent-contrast); background: var(--ob-accent); }
+.ob-sidebar-popular { margin-top: 1.5rem; }
+.ob-sidebar-popular li + li { margin-top: 0.25rem; }
+.ob-sidebar-tags, .ob-count { display: none; }
+.ob-post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
+.ob-card-media { display: block; overflow: hidden; border-radius: var(--ob-radius-media); }
+.ob-card-image, .ob-card-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+.ob-card-image { transition: transform 180ms ease; }
+.ob-card-media:hover .ob-card-image { transform: scale(1.05); }
+.ob-card-placeholder { background: linear-gradient(135deg, var(--ob-accent-soft), var(--ob-surface-sunken)); }
+.ob-card-category, .ob-post-category { display: inline-block; margin-top: 1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 750; }
+.ob-card-title { margin: 0.5rem 0; }
+.ob-card-title a, .ob-featured-details h2 a { text-decoration: none; }
+.ob-card-title, .ob-card-description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
+.ob-card-title { -webkit-line-clamp: 2; }
+.ob-card-description { -webkit-line-clamp: 2; color: var(--ob-text-muted); margin: 0.75rem 0; }
+.ob-card-author { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
+.ob-card-author a { color: var(--ob-text); }
+.ob-avatar { display: inline-flex; flex: 0 0 2.5rem; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; vertical-align: middle; }
+.ob-avatar--initials { background: var(--ob-accent-soft); color: var(--ob-heading); font-weight: 750; }
+.ob-date, .ob-reading-time { color: var(--ob-text-subtle); font-size: 0.875rem; display: inline-block; margin: 0.35rem 0.75rem 0.35rem 0; }
+.ob-featured-card { display: grid; min-width: 0; margin-bottom: 2rem; border: 1px solid var(--ob-border); border-top: 4px solid var(--ob-accent); border-radius: var(--ob-radius-card); overflow: hidden; box-shadow: var(--ob-shadow); }
+.ob-featured-card:hover { border-color: var(--ob-accent); }
+.ob-featured-card .ob-card-media { border-radius: 0; }
+.ob-featured-details { padding: 1.25rem; }
+.ob-featured-details .ob-card-description { -webkit-line-clamp: 3; }
+.ob-featured-label { color: var(--ob-accent); font-weight: 750; font-size: 0.8rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
+.ob-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; }
+.ob-pagination-link, .ob-pagination-current { min-width: 2.5rem; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ob-radius-pill); text-decoration: none; }
+.ob-pagination-current { color: var(--ob-accent-contrast); background: var(--ob-accent); }
+.ob-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.875rem; }
+.ob-breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ob-text-subtle); }
+.ob-post { max-width: var(--ob-content-width); margin: auto; }
+.ob-post-title { line-height: 1.15; margin: 0.75rem 0 1rem; font-weight: 800; }
+.ob-post-category { margin-top: 0; }
+.ob-byline { margin: 1rem 0 1.5rem; }
+.ob-byline-author { font-weight: 700; }
+.ob-cover { margin: 1.5rem -1rem; }
+.ob-cover img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
+.ob-highlights { padding: 1rem; border: 1px solid var(--ob-border); border-radius: var(--ob-radius-card); margin: 1.5rem 0; background: var(--ob-surface-raised); }
+.ob-highlights h2 { font-size: 1rem; margin-bottom: 0.5rem; }
+.ob-highlights ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
+.ob-notice { background: var(--ob-notice-bg); color: var(--ob-notice-text); border: 1px solid var(--ob-notice-border); border-radius: var(--ob-radius-card); padding: 1rem 1.25rem; margin: 1rem 0; }
+.ob-notice h2 { color: inherit; font-size: 1.125rem; margin-bottom: 0.5rem; }
+.ob-notice ul { list-style: disc; padding-left: 1.25rem; }
+.ob-correction time { display: inline-block; }
+.ob-toc { border-left: 3px solid var(--ob-accent); background: var(--ob-surface-raised); padding: 1rem 1.25rem; margin: 2rem 0; border-radius: 0 var(--ob-radius-card) var(--ob-radius-card) 0; }
+.ob-toc h2 { font-size: 1rem; margin-bottom: 0.75rem; }
+.ob-toc-item { margin: 0.35rem 0; }
+.ob-toc-item--h3 { padding-left: 1rem; }
+.ob-toc a[aria-current="location"] { color: var(--ob-heading); font-weight: 800; text-decoration-thickness: 0.15em; }
+.ob-prose { font-size: var(--ob-prose-size); line-height: var(--ob-prose-leading); }
+.ob-prose > * { margin-block: 1.25rem; }
+.ob-prose h2 { border-bottom: 1px solid var(--ob-border); padding-bottom: 0.5rem; margin-top: 2.5rem; }
+.ob-prose h3, .ob-prose h4 { margin-top: 2rem; }
+.ob-prose :is(h2,h3,h4,h5,h6) { scroll-margin-top: 2rem; }
+.ob-heading-anchor { margin-left: 0.4em; font-size: 0.8em; text-decoration: none; }
+.ob-prose ul, .ob-prose ol { padding-left: 1.5rem; }
+.ob-prose ul { list-style: disc; }
+.ob-prose ol { list-style: decimal; }
+.ob-prose li::marker { color: var(--ob-accent); }
+.ob-prose li + li { margin-top: 0.35rem; }
+.ob-prose input[type="checkbox"] { margin-right: 0.4rem; }
+.ob-prose blockquote { border-left: 3px solid var(--ob-accent); padding: 0.75rem 1.25rem; background: var(--ob-accent-soft); border-radius: 0 var(--ob-radius-card) var(--ob-radius-card) 0; }
+.ob-prose :not(pre) > code { background: var(--ob-surface-sunken); border-radius: 0.3rem; padding: 0.15em 0.3em; font-size: 0.9em; font-family: var(--ob-font-mono); }
+.ob-prose pre { background: var(--ob-code-bg); position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--ob-code-border); border-radius: var(--ob-radius-card); padding: 3.25rem 1rem 1rem; line-height: 1.6; font-size: 0.9rem; overflow-wrap: normal; }
+.ob-prose .ob-highlight .w { background-color: transparent; }
+.ob-prose pre code { display: block; width: max-content; min-width: 100%; font-family: var(--ob-font-mono); }
+.ob-code-language { position: absolute; left: 1rem; top: 0.65rem; color: var(--ob-text-subtle); font-family: var(--ob-font-body); font-size: 0.8rem; }
+.ob-code-copy { position: absolute; right: 0.65rem; top: 0.5rem; }
+.ob-code-copy, .ob-theme-toggle, .ob-share-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; background: var(--ob-surface-raised); color: var(--ob-text); border: 1px solid var(--ob-border-strong); border-radius: var(--ob-radius-pill); }
+.ob-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
+.ob-prose hr { height: 1px; border: 0; background: linear-gradient(to right, var(--ob-border), var(--ob-accent), var(--ob-border)); margin: 2.5rem 0; }
+.ob-figure { margin-inline: 0; }
+.ob-figure img { border-radius: var(--ob-radius-media); }
+.ob-figure figcaption { font-size: 0.9rem; color: var(--ob-text-muted); margin-top: 0.5rem; }
+.ob-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--ob-border); border-radius: var(--ob-radius-media); }
+.ob-table table { border-collapse: collapse; min-width: 100%; width: max-content; font-size: 0.95rem; }
+.ob-table th, .ob-table td { text-align: left; padding: 0.65rem 1rem; border-bottom: 1px solid var(--ob-border); }
+.ob-table th { background: var(--ob-surface-raised); color: var(--ob-heading); font-weight: 700; }
+.ob-prose .markdown-alert { padding: 1rem 1.25rem; border-left: 4px solid var(--ob-note); background: var(--ob-surface-raised); border-radius: 0 var(--ob-radius-card) var(--ob-radius-card) 0; }
+.ob-prose .markdown-alert-title { color: var(--ob-note); font-weight: 750; margin-bottom: 0.5rem; }
+.ob-prose .markdown-alert-tip { border-color: var(--ob-tip); }
+.ob-prose .markdown-alert-tip .markdown-alert-title { color: var(--ob-tip); }
+.ob-prose .markdown-alert-warning, .ob-prose .markdown-alert-caution { border-color: var(--ob-warning); }
+.ob-prose .markdown-alert-warning .markdown-alert-title, .ob-prose .markdown-alert-caution .markdown-alert-title { color: var(--ob-warning); }
+.ob-prose--dropcap > p:first-of-type::first-letter { float: left; font-size: 3.5em; line-height: 0.9; padding-right: 0.1em; color: var(--ob-accent); }
+.ob-faq { margin-block: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ob-border); min-width: 0; }
+.ob-faq > h2 { margin-bottom: 1.5rem; scroll-margin-top: 2rem; }
+.ob-faq-entry + .ob-faq-entry { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ob-border); }
+.ob-faq-entry h3 { margin-bottom: 0.75rem; }
+.ob-faq-entry p { font-size: var(--ob-prose-size); line-height: var(--ob-prose-leading); overflow-wrap: anywhere; }
+.ob-faq-entry p + p { margin-top: 1rem; }
+.ob-faq-entry a { text-decoration: underline; }
+.ob-tags, .ob-author-profiles, .ob-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0; }
+.ob-tags a { border-radius: var(--ob-radius-pill); padding: 0.25rem 0.75rem; background: var(--ob-accent-soft); }
+.ob-share-status { color: var(--ob-text-muted); font-size: 0.875rem; }
+.ob-author-box, .ob-call-to-action { margin-block: 2rem; padding: 1.5rem; background: var(--ob-surface-raised); border: 1px solid var(--ob-border); border-radius: var(--ob-radius-card); }
+.ob-author-box h2, .ob-call-to-action h2 { margin-bottom: 0.75rem; }
+.ob-author-bio { margin-top: 0.75rem; }
+.ob-related-posts, .ob-recent-posts { margin-top: 3rem; }
+.ob-related-posts > h2, .ob-recent-posts > h2 { margin-bottom: 1.5rem; }
+.ob-empty { color: var(--ob-text-muted); padding-block: 2rem; }
+.ob-reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 50; background: var(--ob-border); pointer-events: none; }
+.ob-reading-progress-fill { height: 100%; width: 0; background: var(--ob-accent); }
+@media (min-width: 40rem) {
+  .ob-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ob-featured-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .ob-featured-card .ob-card-image, .ob-featured-card .ob-card-placeholder { height: 100%; }
+  .ob-cover { margin-inline: 0; }
+  .ob-cover img { border-radius: var(--ob-radius-media); }
+}
+@media (min-width: 64rem) {
+  .ob-list-layout { grid-template-columns: 14rem minmax(0, 1fr); }
+  .ob-sidebar { align-self: start; position: sticky; top: 2rem; }
+  .ob-sidebar-categories ul { display: block; overflow: visible; }
+  .ob-sidebar-categories li { margin-bottom: 0.25rem; }
+  .ob-sidebar a { display: flex; justify-content: space-between; gap: 0.75rem; }
+  .ob-sidebar-tags { display: block; margin-top: 1.5rem; }
+  .ob-sidebar-tags ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+  .ob-count { display: inline; }
+  .ob-related-posts .ob-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ob-card-image { transition: none; }
+  .ob-card-media:hover .ob-card-image { transform: none; }
+}

data/lib/generators/open_blog/install/templates/theme/open_blog_theme.css

@@ -0,0 +1,82 @@
+:root {
+  --ob-surface: #ffffff;
+  --ob-surface-raised: #f8fafc;
+  --ob-surface-sunken: #f1f5f9;
+  --ob-heading: #0f172a;
+  --ob-text: #334155;
+  --ob-text-muted: #475569;
+  --ob-text-subtle: #526176;
+  --ob-border: #cbd5e1;
+  --ob-border-strong: #64748b;
+  --ob-accent: #1d4ed8;
+  --ob-accent-hover: #1e40af;
+  --ob-accent-soft: #dbeafe;
+  --ob-accent-contrast: #ffffff;
+  --ob-code-bg: #f6f8fa;
+  --ob-code-border: #94a3b8;
+  --ob-notice-bg: #eff6ff;
+  --ob-notice-border: #60a5fa;
+  --ob-notice-text: #1e3a8a;
+  --ob-note: #1d4ed8;
+  --ob-tip: #166534;
+  --ob-warning: #854d0e;
+  --ob-shadow: 0 8px 24px #0f172a1a;
+  --ob-font-display: ui-sans-serif, system-ui, sans-serif;
+  --ob-font-body: ui-sans-serif, system-ui, sans-serif;
+  --ob-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
+  --ob-radius-card: 1rem;
+  --ob-radius-media: 0.75rem;
+  --ob-radius-pill: 999px;
+  --ob-prose-size: 1.125rem;
+  --ob-prose-leading: 1.8;
+  --ob-content-width: 56rem;
+  --ob-page-width: 72rem;
+}
+:root[data-theme="dark"] {
+  --ob-surface: #0f172a;
+  --ob-surface-raised: #1e293b;
+  --ob-surface-sunken: #020617;
+  --ob-heading: #f8fafc;
+  --ob-text: #e2e8f0;
+  --ob-text-muted: #cbd5e1;
+  --ob-text-subtle: #94a3b8;
+  --ob-border: #475569;
+  --ob-border-strong: #94a3b8;
+  --ob-accent: #93c5fd;
+  --ob-accent-hover: #bfdbfe;
+  --ob-accent-soft: #172554;
+  --ob-accent-contrast: #0f172a;
+  --ob-code-bg: #161b22;
+  --ob-code-border: #64748b;
+  --ob-notice-bg: #172554;
+  --ob-notice-border: #60a5fa;
+  --ob-notice-text: #dbeafe;
+  --ob-note: #93c5fd;
+  --ob-tip: #86efac;
+  --ob-warning: #fde047;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+  --ob-surface: #0f172a;
+  --ob-surface-raised: #1e293b;
+  --ob-surface-sunken: #020617;
+  --ob-heading: #f8fafc;
+  --ob-text: #e2e8f0;
+  --ob-text-muted: #cbd5e1;
+  --ob-text-subtle: #94a3b8;
+  --ob-border: #475569;
+  --ob-border-strong: #94a3b8;
+  --ob-accent: #93c5fd;
+  --ob-accent-hover: #bfdbfe;
+  --ob-accent-soft: #172554;
+  --ob-accent-contrast: #0f172a;
+  --ob-code-bg: #161b22;
+  --ob-code-border: #64748b;
+  --ob-notice-bg: #172554;
+  --ob-notice-border: #60a5fa;
+  --ob-notice-text: #dbeafe;
+  --ob-note: #93c5fd;
+  --ob-tip: #86efac;
+  --ob-warning: #fde047;
+  }
+}