open_blog 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 324268599e7e9a136c090a233ac46619fd15c9d329292d96d12498213e163bdc
+  data.tar.gz: d598e2a23b0d553c81ae2640cf0812d2e302fa5f88fa4fca08de3612e53511b8
+SHA512:
+  metadata.gz: 0c7b6d301c115edc1930b630c2e291570225454d2947808b482f5b195c604bfdc563e00940f92d553a6e6f8a2242699f198f20af5933c517b3f4c59e0f8912af
+  data.tar.gz: 4f8850a75fec631002c9496fdd024999892683c5fe96e80a8d92aceb9d31ce8c4700d8f72e51b8639f9e49b3489a88d57b00a18bd2c033e66e0d173bb2e084ec

data/CHANGELOG.md

@@ -0,0 +1,52 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2026-10-03
+
+### Added
+
+- Publish searchable public documentation with installation, configuration, publishing, API, MCP, and customization guides.
+- Prepare release pull requests that update the version and dated changelog, then publish verified packages to RubyGems and synchronize GitHub Releases.
+
+### Changed
+
+- Document supported Ruby, Rails, and database versions, every configuration setting with its default, and verified Ruby, API, MCP, and reader examples.
+
+### Added
+
+- Initial gem package, runtime dependencies, tests, and continuous integration.
+- Add a mountable engine with validated configuration and a PostgreSQL/SQLite host test matrix.
+- Add content models, reversible database migrations, deterministic revision identifiers, and immutable publishing records.
+- Add transactional draft, publish, approve, unpublish, and remove operations with publication history and scheduled enqueueing.
+- Record direct FAQ and rich-text changes atomically and return advisory findings and AI notice labels from publishing operations.
+- Import existing articles with source identity, historical dates, declared or imported approvals, redirects, safe repeat handling, and transactional dry runs.
+- Reuse signed Active Storage blobs for imported images and extract proposed FAQ sections from Markdown with review findings.
+- Render sanitized Markdown and rich text with heading links, syntax highlighting, image figures, body findings, durable image identities, and generated light/dark syntax colors.
+- Add reader routes and copied templates for the layout, header, footer, sidebar, featured and ordinary cards, pagination, breadcrumbs, sharing, author box, call to action, related posts, post highlights, table of contents, tags, index, post, category, tag, author, and missing-page views.
+- Add reader metadata, structured data, publication dates, notices, Atom feeds, sitemap entries, redirects, and stable original-image delivery.
+- Add responsive light/dark themes, configurable design tokens, accessible syntax colors, and a reproducible compiled stylesheet.
+- Add theme selection, link and code copying, device sharing, table-of-contents tracking, reading progress, and browser accessibility checks.
+- Render ordered FAQ records as visible plain text and FAQ structured data, with a shared table-of-contents anchor and Markdown text output.
+- Add install and views generators, an idempotent sample article, installation diagnostics, and fresh-application compatibility checks.
+- Add scoped API tokens and authenticated JSON endpoints for posts, approvals, connection declarations, publishing history, findings, and installation checks.
+- Add bounded remote image imports, deduplicated uploads, supporting-record APIs, adoption previews, FAQ extraction, redirect serialization, and one-time installer tokens.
+- Add stateless MCP publishing tools, shared API validation, revision-bound preview links, and packaged agent workflows.
+- Add editable policy pages with scoped API and MCP access, public rendering, footer and sitemap links, and live notice and diagnostic updates.
+- Add series navigation, ranked reader and API search, live search suggestions, Markdown responses, and JSON Feed 1.1.
+- Execute due publication schedules safely, count anonymous daily page views, expose view reports and a popular-post sidebar, and check internal blog links.
+- Add page and publishing-record reports with JSON, text, MCP, and Rails-task access, plus optional bounded reach checks.
+- Add an optional AdminSuite generator with isolated resources, nested FAQ editing, and read-only publishing-history panels.
+
+### Upgrade notes
+
+- This is the first packaged release. Existing Git-source installations should run `bin/rails open_blog:install:migrations` and `bin/rails db:migrate` before restarting application and job processes.
+- Reader templates are copied into the host. Run `bin/rails generate open_blog:views` to review updates; preserve local customizations and deliberately accept replacements. Refresh installed browser controllers with the install generator when upgrading from an earlier development checkout.
+- Configure the public origin, publisher identity, policy pages, storage, and authentication for your deployment. The sample article is demonstration content and has no human approval record.
+- Applications writing through bulk SQL must move to normal model saves or publishing operations to retain revision history.
+

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TechWright Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,101 @@
+# Open Blog
+
+A Rails blog engine with Markdown and rich-text articles, responsive reader pages, revision history, and publishing through Ruby, a JSON API, or MCP tools. Every publish, edit, approval, and removal leaves an immutable record, so a reader can trust the dates and notices on the page and an agent can publish without inventing a review.
+
+[Documentation](https://techwright-lab.github.io/open-blog/) · [API reference](https://techwright-lab.github.io/open-blog/api/) · [Changelog](CHANGELOG.md)
+
+## What you get
+
+- **Reader pages** with light and dark themes, categories, tags, authors, series, search, Atom and JSON feeds, a sitemap, and structured data. The templates are copied into your app so you can change them.
+- **Publishing operations** in Ruby that compute a revision identifier from the content, record each release, and refuse a public edit that does not say whether it is substantive, a correction, or maintenance.
+- **A JSON API and an MCP endpoint** with scoped tokens, so editorial tools and AI agents publish through the same guarded path. Six agent workflows ship in the gem.
+- **Approvals, provenance, and labels.** A post carries who wrote it, who reviewed which revision, and whether facts were checked. The AI notice on the page follows those records.
+- **Adoption** of an existing blog with its known history, dates, and redirects, without claiming a new first publication.
+- **Policy pages, page views, diagnostics, and surface reports** that check what readers actually see against the stored records.
+- **Optional AdminSuite resources** for a browser-based editor.
+
+## Requirements
+
+| Requirement | Supported |
+| --- | --- |
+| Ruby | 3.2, 3.3, 3.4, or 4.0 |
+| Rails | 8.0 or 8.1 |
+| Database | PostgreSQL or SQLite |
+| Images | Active Storage with libvips or ImageMagick |
+
+Every combination of Ruby, Rails, and database above runs in CI.
+
+## Install
+
+Install from GitHub until a version is published on RubyGems:
+
+```sh
+bundle add open_blog --github techwright-lab/open-blog
+bin/rails generate open_blog:install
+```
+
+Start `bin/dev` (or `bin/rails server`) and open `/blog`. The generator installs tables, mounts the engine at `/blog`, copies the reader views and browser controllers, writes `config/initializers/open_blog.rb`, and publishes a sample article. If it prints an API token, save it: the secret is shown once.
+
+Set your site name, publisher, and public origin in the initializer, then run `bin/rails open_blog:doctor` to check the setup. The [installation guide](https://techwright-lab.github.io/open-blog/installation/) lists every generator option, and the [configuration reference](https://techwright-lab.github.io/open-blog/configuration/) lists every setting with its default.
+
+![Default blog in the light theme](.github/images/reader-light.png)
+
+![Default blog in the dark theme](.github/images/reader-dark.png)
+
+## Publish a post
+
+From Ruby:
+
+```ruby
+result = OpenBlog::Publish.call(
+  { title: "Garden notes", body: "Today in the garden.", provenance: "human_written" },
+  actor: "Editor"
+)
+result.success?   # => true
+result.post.path  # => "/blog/garden-notes"
+result.records    # => { revision: "new", publication: "first", approval: nil }
+```
+
+From the JSON API, with a token from `bin/rails open_blog:token`:
+
+```sh
+curl -s -X POST https://example.com/blog/api/v1/posts \
+  -H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" \
+  -d '{"title":"Garden notes","body":"Today in the garden.","publish":true}'
+```
+
+From an agent, point an MCP client at `https://example.com/blog/mcp` with the same token. The `blog_save_draft` tool returns a preview link, and `blog_publish_post` records the release. Agents must show the exact text to a person and record only the approval they actually give; the [publishing instructions](https://techwright-lab.github.io/open-blog/mcp/#publishing-instructions) spell this out.
+
+A later edit of a public post must carry `change: "substantive"`, `"correction"`, or `"maintenance"`. Without it the write is refused and nothing changes. Normal model saves and the operations keep this history; bulk SQL writes bypass it.
+
+## Guides
+
+- [Configuration](https://techwright-lab.github.io/open-blog/configuration/): identity, routes, content gates, images, limits, and page views.
+- [Publishing](https://techwright-lab.github.io/open-blog/publishing/): operations, previews, scheduling, approvals, and findings.
+- [JSON API](https://techwright-lab.github.io/open-blog/api/) and [MCP](https://techwright-lab.github.io/open-blog/mcp/): endpoints, tools, examples, and error codes.
+- [Reader pages and feeds](https://techwright-lab.github.io/open-blog/reader/): routes, search, feeds, dates, images, and policy pages.
+- [Adoption](https://techwright-lab.github.io/open-blog/adoption/): import existing articles and preserve their known history.
+- [Customization](https://techwright-lab.github.io/open-blog/customization/): copied templates, themes, and browser controllers.
+- [AdminSuite](https://techwright-lab.github.io/open-blog/admin-suite/), [Diagnostics](https://techwright-lab.github.io/open-blog/diagnostics/), and [Page views](https://techwright-lab.github.io/open-blog/analytics/).
+
+## Development
+
+The gem tests run through a dummy host application. Set `DB` to `sqlite` or `postgres`:
+
+```sh
+bundle install
+DB=sqlite RAILS_ENV=test bundle exec ruby bin/test
+bundle exec rubocop
+```
+
+CI runs the matrix of Ruby 3.2 to 4.0, Rails 8.0 and 8.1, and both databases, plus browser tests and a fresh-application installer check with the built gem.
+
+The documentation is Markdown in `docs/`, built with Jekyll and Just the Docs from a separate bundle. See [working on the documentation](https://techwright-lab.github.io/open-blog/contributing/) for local preview and validation commands.
+
+## Releases
+
+The **Prepare Release** workflow updates the version and changelog in a pull request. After review, merge, and successful checks, **Publish** publishes the verified package to RubyGems and creates or updates the GitHub Release. Merging ordinary changes does not publish a gem. See the [release guide](https://techwright-lab.github.io/open-blog/releases/) for the first-time Trusted Publishing setup.
+
+## License
+
+Licensed under the [MIT License](LICENSE.txt).

data/app/assets/builds/open_blog/blog.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}}.ob-page{background:var(--ob-surface);color:var(--ob-text);font-family:var(--ob-font-body);overflow-wrap:anywhere;margin:0;line-height:1.6}.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:.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);text-wrap:balance;font-weight:750;line-height:1.25}.ob-page h1{letter-spacing:-.035em;font-size:clamp(1.875rem,4vw,3rem)}.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);flex-wrap:wrap;align-items:center;gap:1rem;margin:auto;padding:1.25rem 1rem;display:flex}.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:.875rem}.ob-footer nav{flex-wrap:wrap;gap:1rem;display:flex}.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);margin-top:.75rem;font-size:1.125rem}.ob-list-layout{gap:2rem;display:grid}.ob-list-main,.ob-sidebar,.ob-post-card,.ob-featured-details{min-width:0}.ob-search{margin-bottom:1.5rem}.ob-search label{margin-bottom:.5rem;font-weight:700;display:block}.ob-search-controls{gap:.5rem;display:flex}.ob-search input{border:1px solid var(--ob-border-strong);background:var(--ob-surface);width:100%;min-width:0;color:var(--ob-text);font:inherit;border-radius:.5rem;padding:.5rem}.ob-search button{white-space:nowrap;background:var(--ob-accent);color:var(--ob-accent-contrast);border-radius:.5rem;flex-shrink:0;padding:.5rem .75rem}.ob-search-results{border:1px solid var(--ob-border);background:var(--ob-surface-raised);border-radius:.5rem;margin-top:.75rem}.ob-sidebar .ob-search-results a{border-radius:.5rem;display:block}.ob-search-results a:hover{background:var(--ob-accent-soft)}.ob-series-nav{border:1px solid var(--ob-border);border-radius:.75rem;margin:2rem 0;padding:1.25rem}.ob-series-nav h2{margin-bottom:.75rem;font-size:1.125rem}.ob-series-nav p+p{margin-top:.5rem}.ob-sidebar h2{margin-bottom:.75rem;font-size:1rem}.ob-sidebar-categories ul{gap:.5rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.ob-sidebar-categories li{flex-shrink:0}.ob-sidebar a{border-radius:var(--ob-radius-pill);padding:.4rem .8rem;text-decoration:none;display:block}.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:.25rem}.ob-sidebar-tags,.ob-count{display:none}.ob-post-grid{grid-template-columns:minmax(0,1fr);gap:2rem;display:grid}.ob-card-media{border-radius:var(--ob-radius-media);display:block;overflow:hidden}.ob-card-image,.ob-card-placeholder{aspect-ratio:16/9;object-fit:cover;width:100%}.ob-card-image{transition:transform .18s}.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{text-transform:uppercase;letter-spacing:.07em;margin-top:1rem;font-size:.8rem;font-weight:750;display:inline-block}.ob-card-title{margin:.5rem 0}.ob-card-title a,.ob-featured-details h2 a{text-decoration:none}.ob-card-title,.ob-card-description{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ob-card-title{-webkit-line-clamp:2}.ob-card-description{-webkit-line-clamp:2;color:var(--ob-text-muted);margin:.75rem 0}.ob-card-author{align-items:center;gap:.5rem;margin-top:1rem;display:flex}.ob-card-author a{color:var(--ob-text)}.ob-avatar{object-fit:cover;vertical-align:middle;border-radius:50%;flex:0 0 2.5rem;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;display:inline-flex}.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);margin:.35rem .75rem .35rem 0;font-size:.875rem;display:inline-block}.ob-featured-card{border:1px solid var(--ob-border);border-top:4px solid var(--ob-accent);border-radius:var(--ob-radius-card);min-width:0;box-shadow:var(--ob-shadow);margin-bottom:2rem;display:grid;overflow:hidden}.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);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;font-size:.8rem;font-weight:750}.ob-pagination{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:2.5rem;display:flex}.ob-pagination-link,.ob-pagination-current{border-radius:var(--ob-radius-pill);justify-content:center;align-items:center;min-width:2.5rem;min-height:2.5rem;text-decoration:none;display:inline-flex}.ob-pagination-current{color:var(--ob-accent-contrast);background:var(--ob-accent)}.ob-breadcrumbs ol{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;font-size:.875rem;display:flex}.ob-breadcrumbs li+li:before{content:"/";color:var(--ob-text-subtle);margin-right:.5rem}.ob-post{max-width:var(--ob-content-width);margin:auto}.ob-post-title{margin:.75rem 0 1rem;font-weight:800;line-height:1.15}.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{aspect-ratio:2;object-fit:cover;width:100%}.ob-highlights{border:1px solid var(--ob-border);border-radius:var(--ob-radius-card);background:var(--ob-surface-raised);margin:1.5rem 0;padding:1rem}.ob-highlights h2{margin-bottom:.5rem;font-size:1rem}.ob-highlights ul{flex-wrap:wrap;gap:.25rem 1rem;display:flex}.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);margin:1rem 0;padding:1rem 1.25rem}.ob-notice h2{color:inherit;margin-bottom:.5rem;font-size:1.125rem}.ob-notice ul{padding-left:1.25rem;list-style:outside}.ob-correction time{display:inline-block}.ob-toc{border-left:3px solid var(--ob-accent);background:var(--ob-surface-raised);border-radius:0 var(--ob-radius-card) var(--ob-radius-card) 0;margin:2rem 0;padding:1rem 1.25rem}.ob-toc h2{margin-bottom:.75rem;font-size:1rem}.ob-toc-item{margin:.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:.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);margin-top:2.5rem;padding-bottom:.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:.4em;font-size:.8em;text-decoration:none}.ob-prose ul,.ob-prose ol{padding-left:1.5rem}.ob-prose ul{list-style:outside}.ob-prose ol{list-style:decimal}.ob-prose li::marker{color:var(--ob-accent)}.ob-prose li+li{margin-top:.35rem}.ob-prose input[type=checkbox]{margin-right:.4rem}.ob-prose blockquote{border-left:3px solid var(--ob-accent);background:var(--ob-accent-soft);border-radius:0 var(--ob-radius-card) var(--ob-radius-card) 0;padding:.75rem 1.25rem}.ob-prose :not(pre)>code{background:var(--ob-surface-sunken);font-size:.9em;font-family:var(--ob-font-mono);border-radius:.3rem;padding:.15em .3em}.ob-prose pre{background:var(--ob-code-bg);border:1px solid var(--ob-code-border);border-radius:var(--ob-radius-card);overflow-wrap:normal;max-width:100%;padding:3.25rem 1rem 1rem;font-size:.9rem;line-height:1.6;position:relative;overflow-x:auto}.ob-prose .ob-highlight .w{background-color:#0000}.ob-prose pre code{width:max-content;min-width:100%;font-family:var(--ob-font-mono);display:block}.ob-code-language{color:var(--ob-text-subtle);font-family:var(--ob-font-body);font-size:.8rem;position:absolute;top:.65rem;left:1rem}.ob-code-copy{position:absolute;top:.5rem;right:.65rem}.ob-code-copy,.ob-theme-toggle,.ob-share-button{background:var(--ob-surface-raised);min-height:2.5rem;color:var(--ob-text);border:1px solid var(--ob-border-strong);border-radius:var(--ob-radius-pill);justify-content:center;align-items:center;gap:.4rem;padding:.4rem .75rem;display:inline-flex}.ob-icon{flex-shrink:0;width:1.125rem;height:1.125rem}.ob-prose hr{background:linear-gradient(to right, var(--ob-border), var(--ob-accent), var(--ob-border));border:0;height:1px;margin:2.5rem 0}.ob-figure{margin-inline:0}.ob-figure img{border-radius:var(--ob-radius-media)}.ob-figure figcaption{color:var(--ob-text-muted);margin-top:.5rem;font-size:.9rem}.ob-table{border:1px solid var(--ob-border);border-radius:var(--ob-radius-media);max-width:100%;overflow-x:auto}.ob-table table{border-collapse:collapse;width:max-content;min-width:100%;font-size:.95rem}.ob-table th,.ob-table td{text-align:left;border-bottom:1px solid var(--ob-border);padding:.65rem 1rem}.ob-table th{background:var(--ob-surface-raised);color:var(--ob-heading);font-weight:700}.ob-prose .markdown-alert{border-left:4px solid var(--ob-note);background:var(--ob-surface-raised);border-radius:0 var(--ob-radius-card) var(--ob-radius-card) 0;padding:1rem 1.25rem}.ob-prose .markdown-alert-title{color:var(--ob-note);margin-bottom:.5rem;font-weight:750}.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;color:var(--ob-accent);padding-right:.1em;font-size:3.5em;line-height:.9}.ob-faq{border-top:1px solid var(--ob-border);min-width:0;margin-block:2.5rem;padding-top:2rem}.ob-faq>h2{margin-bottom:1.5rem;scroll-margin-top:2rem}.ob-faq-entry+.ob-faq-entry{border-top:1px solid var(--ob-border);margin-top:1.5rem;padding-top:1.5rem}.ob-faq-entry h3{margin-bottom:.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{flex-wrap:wrap;align-items:center;gap:.75rem;margin:1.5rem 0;display:flex}.ob-tags a{border-radius:var(--ob-radius-pill);background:var(--ob-accent-soft);padding:.25rem .75rem}.ob-share-status{color:var(--ob-text-muted);font-size:.875rem}.ob-author-box,.ob-call-to-action{background:var(--ob-surface-raised);border:1px solid var(--ob-border);border-radius:var(--ob-radius-card);margin-block:2rem;padding:1.5rem}.ob-author-box h2,.ob-call-to-action h2{margin-bottom:.75rem}.ob-author-bio{margin-top:.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{z-index:50;background:var(--ob-border);pointer-events:none;height:3px;position:fixed;inset:0 0 auto}.ob-reading-progress-fill{background:var(--ob-accent);width:0;height:100%}@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:.25rem}.ob-sidebar a{justify-content:space-between;gap:.75rem;display:flex}.ob-sidebar-tags{margin-top:1.5rem;display:block}.ob-sidebar-tags ul{flex-wrap:wrap;gap:.5rem;display:flex}.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}}.ob-highlight table td{padding:5px}.ob-highlight table pre{margin:0}.ob-highlight,.ob-highlight .w{color:#24292f;background-color:#f6f8fa}.ob-highlight .k,.ob-highlight .kd,.ob-highlight .kn,.ob-highlight .kp,.ob-highlight .kr,.ob-highlight .kt,.ob-highlight .kv{color:#cf222e}.ob-highlight .gd{color:#82071e;background-color:#ffebe9}.ob-highlight .nb,.ob-highlight .nc,.ob-highlight .no,.ob-highlight .nn{color:#953800}.ob-highlight .sr,.ob-highlight .na,.ob-highlight .nt{color:#116329}.ob-highlight .gi{color:#116329;background-color:#dafbe1}.ob-highlight .ges{font-style:italic;font-weight:700}.ob-highlight .kc,.ob-highlight .l,.ob-highlight .ld,.ob-highlight .m,.ob-highlight .mb,.ob-highlight .mf,.ob-highlight .mh,.ob-highlight .mi,.ob-highlight .il,.ob-highlight .mo,.ob-highlight .mx,.ob-highlight .sb,.ob-highlight .bp,.ob-highlight .ne,.ob-highlight .nl,.ob-highlight .py,.ob-highlight .nv,.ob-highlight .vc,.ob-highlight .vg,.ob-highlight .vi,.ob-highlight .vm,.ob-highlight .o,.ob-highlight .ow{color:#0550ae}.ob-highlight .gh,.ob-highlight .gu{color:#0550ae;font-weight:700}.ob-highlight .s,.ob-highlight .sa,.ob-highlight .sc,.ob-highlight .dl,.ob-highlight .sd,.ob-highlight .s2,.ob-highlight .se,.ob-highlight .sh,.ob-highlight .sx,.ob-highlight .s1,.ob-highlight .ss{color:#0a3069}.ob-highlight .nd,.ob-highlight .nf,.ob-highlight .fm{color:#8250df}.ob-highlight .err{color:#f6f8fa;background-color:#82071e}.ob-highlight .ni,.ob-highlight .si{color:#24292f}.ob-highlight .ge{color:#24292f;font-style:italic}.ob-highlight .gs{color:#24292f;font-weight:700}[data-theme=dark] .ob-highlight table td{padding:5px}[data-theme=dark] .ob-highlight table pre{margin:0}[data-theme=dark] .ob-highlight,[data-theme=dark] .ob-highlight .w{color:#c9d1d9;background-color:#161b22}[data-theme=dark] .ob-highlight .k,[data-theme=dark] .ob-highlight .kd,[data-theme=dark] .ob-highlight .kn,[data-theme=dark] .ob-highlight .kp,[data-theme=dark] .ob-highlight .kr,[data-theme=dark] .ob-highlight .kt,[data-theme=dark] .ob-highlight .kv{color:#ff7b72}[data-theme=dark] .ob-highlight .gr{color:#f0f6fc}[data-theme=dark] .ob-highlight .gd{color:#ffdcd7;background-color:#67060c}[data-theme=dark] .ob-highlight .nb,[data-theme=dark] .ob-highlight .nc,[data-theme=dark] .ob-highlight .no,[data-theme=dark] .ob-highlight .nn{color:#ffa657}[data-theme=dark] .ob-highlight .sr,[data-theme=dark] .ob-highlight .na,[data-theme=dark] .ob-highlight .nt{color:#7ee787}[data-theme=dark] .ob-highlight .gi{color:#aff5b4;background-color:#033a16}[data-theme=dark] .ob-highlight .ges{font-style:italic;font-weight:700}[data-theme=dark] .ob-highlight .kc,[data-theme=dark] .ob-highlight .l,[data-theme=dark] .ob-highlight .ld,[data-theme=dark] .ob-highlight .m,[data-theme=dark] .ob-highlight .mb,[data-theme=dark] .ob-highlight .mf,[data-theme=dark] .ob-highlight .mh,[data-theme=dark] .ob-highlight .mi,[data-theme=dark] .ob-highlight .il,[data-theme=dark] .ob-highlight .mo,[data-theme=dark] .ob-highlight .mx,[data-theme=dark] .ob-highlight .sb,[data-theme=dark] .ob-highlight .bp,[data-theme=dark] .ob-highlight .ne,[data-theme=dark] .ob-highlight .nl,[data-theme=dark] .ob-highlight .py,[data-theme=dark] .ob-highlight .nv,[data-theme=dark] .ob-highlight .vc,[data-theme=dark] .ob-highlight .vg,[data-theme=dark] .ob-highlight .vi,[data-theme=dark] .ob-highlight .vm,[data-theme=dark] .ob-highlight .o,[data-theme=dark] .ob-highlight .ow{color:#79c0ff}[data-theme=dark] .ob-highlight .gh,[data-theme=dark] .ob-highlight .gu{color:#1f6feb;font-weight:700}[data-theme=dark] .ob-highlight .s,[data-theme=dark] .ob-highlight .sa,[data-theme=dark] .ob-highlight .sc,[data-theme=dark] .ob-highlight .dl,[data-theme=dark] .ob-highlight .sd,[data-theme=dark] .ob-highlight .s2,[data-theme=dark] .ob-highlight .se,[data-theme=dark] .ob-highlight .sh,[data-theme=dark] .ob-highlight .sx,[data-theme=dark] .ob-highlight .s1,[data-theme=dark] .ob-highlight .ss{color:#a5d6ff}[data-theme=dark] .ob-highlight .nd,[data-theme=dark] .ob-highlight .nf,[data-theme=dark] .ob-highlight .fm{color:#d2a8ff}[data-theme=dark] .ob-highlight .err{color:#f0f6fc;background-color:#8e1519}[data-theme=dark] .ob-highlight .c,[data-theme=dark] .ob-highlight .ch,[data-theme=dark] .ob-highlight .cd,[data-theme=dark] .ob-highlight .cm,[data-theme=dark] .ob-highlight .cp,[data-theme=dark] .ob-highlight .cpf,[data-theme=dark] .ob-highlight .c1,[data-theme=dark] .ob-highlight .cs,[data-theme=dark] .ob-highlight .gl,[data-theme=dark] .ob-highlight .gt{color:#8b949e}[data-theme=dark] .ob-highlight .ni,[data-theme=dark] .ob-highlight .si{color:#c9d1d9}[data-theme=dark] .ob-highlight .ge{color:#c9d1d9;font-style:italic}[data-theme=dark] .ob-highlight .gs{color:#c9d1d9;font-weight:700}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .ob-highlight table td{padding:5px}html:not([data-theme=light]) .ob-highlight table pre{margin:0}html:not([data-theme=light]) .ob-highlight,html:not([data-theme=light]) .ob-highlight .w{color:#c9d1d9;background-color:#161b22}html:not([data-theme=light]) .ob-highlight .k,html:not([data-theme=light]) .ob-highlight .kd,html:not([data-theme=light]) .ob-highlight .kn,html:not([data-theme=light]) .ob-highlight .kp,html:not([data-theme=light]) .ob-highlight .kr,html:not([data-theme=light]) .ob-highlight .kt,html:not([data-theme=light]) .ob-highlight .kv{color:#ff7b72}html:not([data-theme=light]) .ob-highlight .gr{color:#f0f6fc}html:not([data-theme=light]) .ob-highlight .gd{color:#ffdcd7;background-color:#67060c}html:not([data-theme=light]) .ob-highlight .nb,html:not([data-theme=light]) .ob-highlight .nc,html:not([data-theme=light]) .ob-highlight .no,html:not([data-theme=light]) .ob-highlight .nn{color:#ffa657}html:not([data-theme=light]) .ob-highlight .sr,html:not([data-theme=light]) .ob-highlight .na,html:not([data-theme=light]) .ob-highlight .nt{color:#7ee787}html:not([data-theme=light]) .ob-highlight .gi{color:#aff5b4;background-color:#033a16}html:not([data-theme=light]) .ob-highlight .ges{font-style:italic;font-weight:700}html:not([data-theme=light]) .ob-highlight .kc,html:not([data-theme=light]) .ob-highlight .l,html:not([data-theme=light]) .ob-highlight .ld,html:not([data-theme=light]) .ob-highlight .m,html:not([data-theme=light]) .ob-highlight .mb,html:not([data-theme=light]) .ob-highlight .mf,html:not([data-theme=light]) .ob-highlight .mh,html:not([data-theme=light]) .ob-highlight .mi,html:not([data-theme=light]) .ob-highlight .il,html:not([data-theme=light]) .ob-highlight .mo,html:not([data-theme=light]) .ob-highlight .mx,html:not([data-theme=light]) .ob-highlight .sb,html:not([data-theme=light]) .ob-highlight .bp,html:not([data-theme=light]) .ob-highlight .ne,html:not([data-theme=light]) .ob-highlight .nl,html:not([data-theme=light]) .ob-highlight .py,html:not([data-theme=light]) .ob-highlight .nv,html:not([data-theme=light]) .ob-highlight .vc,html:not([data-theme=light]) .ob-highlight .vg,html:not([data-theme=light]) .ob-highlight .vi,html:not([data-theme=light]) .ob-highlight .vm,html:not([data-theme=light]) .ob-highlight .o,html:not([data-theme=light]) .ob-highlight .ow{color:#79c0ff}html:not([data-theme=light]) .ob-highlight .gh,html:not([data-theme=light]) .ob-highlight .gu{color:#1f6feb;font-weight:700}html:not([data-theme=light]) .ob-highlight .s,html:not([data-theme=light]) .ob-highlight .sa,html:not([data-theme=light]) .ob-highlight .sc,html:not([data-theme=light]) .ob-highlight .dl,html:not([data-theme=light]) .ob-highlight .sd,html:not([data-theme=light]) .ob-highlight .s2,html:not([data-theme=light]) .ob-highlight .se,html:not([data-theme=light]) .ob-highlight .sh,html:not([data-theme=light]) .ob-highlight .sx,html:not([data-theme=light]) .ob-highlight .s1,html:not([data-theme=light]) .ob-highlight .ss{color:#a5d6ff}html:not([data-theme=light]) .ob-highlight .nd,html:not([data-theme=light]) .ob-highlight .nf,html:not([data-theme=light]) .ob-highlight .fm{color:#d2a8ff}html:not([data-theme=light]) .ob-highlight .err{color:#f0f6fc;background-color:#8e1519}html:not([data-theme=light]) .ob-highlight .c,html:not([data-theme=light]) .ob-highlight .ch,html:not([data-theme=light]) .ob-highlight .cd,html:not([data-theme=light]) .ob-highlight .cm,html:not([data-theme=light]) .ob-highlight .cp,html:not([data-theme=light]) .ob-highlight .cpf,html:not([data-theme=light]) .ob-highlight .c1,html:not([data-theme=light]) .ob-highlight .cs,html:not([data-theme=light]) .ob-highlight .gl,html:not([data-theme=light]) .ob-highlight .gt{color:#8b949e}html:not([data-theme=light]) .ob-highlight .ni,html:not([data-theme=light]) .ob-highlight .si{color:#c9d1d9}html:not([data-theme=light]) .ob-highlight .ge{color:#c9d1d9;font-style:italic}html:not([data-theme=light]) .ob-highlight .gs{color:#c9d1d9;font-weight:700}}.ob-highlight .gr{color:#cf222e}.ob-highlight .c,.ob-highlight .ch,.ob-highlight .cd,.ob-highlight .cm,.ob-highlight .cp,.ob-highlight .cpf,.ob-highlight .c1,.ob-highlight .cs,.ob-highlight .gl,.ob-highlight .gt{color:#57606a}[data-theme=dark] .ob-highlight .gh,[data-theme=dark] .ob-highlight .gu{color:#79c0ff}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .ob-highlight .gh,html:not([data-theme=light]) .ob-highlight .gu{color:#79c0ff}}:root{--ob-surface:#fff;--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:#fff;--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:.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}}:root{color-scheme:light dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}

data/app/assets/javascripts/open_blog/controllers/code_copy_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["code", "button"]
+  static values = { copiedLabel: String, errorLabel: String }
+
+  connect() {
+    this.connected = true
+    this.label = this.buttonTarget.textContent
+    this.accessibleLabel = this.buttonTarget.getAttribute("aria-label")
+    this.buttonTarget.hidden = !navigator.clipboard?.writeText
+  }
+
+  disconnect() {
+    this.connected = false
+    clearTimeout(this.resetTimer)
+    this.restore()
+    this.buttonTarget.hidden = true
+  }
+
+  async copy() {
+    let label
+    try {
+      await navigator.clipboard.writeText(this.codeTarget.textContent)
+      label = this.copiedLabelValue
+    } catch (_) {
+      label = this.errorLabelValue
+    }
+    if (!this.connected) return
+    clearTimeout(this.resetTimer)
+    this.buttonTarget.textContent = label
+    this.buttonTarget.setAttribute("aria-label", label)
+    this.resetTimer = setTimeout(() => this.restore(), 2000)
+  }
+
+  restore() {
+    this.buttonTarget.textContent = this.label
+    this.buttonTarget.setAttribute("aria-label", this.accessibleLabel)
+  }
+}

data/app/assets/javascripts/open_blog/controllers/reading_progress_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["progress"]
+  static values = { contentSelector: { type: String, default: "[data-open-blog-content]" } }
+
+  connect() {
+    this.content = document.querySelector(this.contentSelectorValue)
+    if (!this.content || !this.hasProgressTarget) return
+    this.schedule = () => {
+      if (!this.frame) this.frame = requestAnimationFrame(() => { this.frame = null; this.update() })
+    }
+    window.addEventListener("scroll", this.schedule, { passive: true })
+    window.addEventListener("resize", this.schedule)
+    this.observer = new ResizeObserver(this.schedule)
+    this.observer.observe(this.content)
+    this.update()
+    this.element.hidden = false
+  }
+
+  disconnect() {
+    window.removeEventListener("scroll", this.schedule)
+    window.removeEventListener("resize", this.schedule)
+    this.observer?.disconnect()
+    cancelAnimationFrame(this.frame)
+    this.frame = null
+    this.element.hidden = true
+  }
+
+  update() {
+    const rect = this.content.getBoundingClientRect()
+    const distance = rect.height - window.innerHeight
+    const progress = distance <= 0 ? (rect.bottom <= window.innerHeight ? 1 : 0) : Math.max(0, Math.min(1, -rect.top / distance))
+    this.progressTarget.style.width = `${progress * 100}%`
+  }
+}

data/app/assets/javascripts/open_blog/controllers/search_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "results"]
+  static values = { url: String }
+
+  connect() { this.sequence = (this.sequence || 0) + 1 }
+
+  disconnect() {
+    this.sequence++
+    clearTimeout(this.timer)
+    this.request?.abort()
+  }
+
+  search() {
+    clearTimeout(this.timer)
+    this.request?.abort()
+    const sequence = ++this.sequence
+    const query = this.inputTarget.value.trim()
+    this.resultsTarget.replaceChildren()
+    this.resultsTarget.hidden = true
+    if (Array.from(query).length < 2 || Array.from(query).length > 100) return
+    this.timer = setTimeout(() => this.suggest(query, sequence), 200)
+  }
+
+  async suggest(query, sequence) {
+    this.request = new AbortController()
+    try {
+      const url = new URL(this.urlValue, window.location.href)
+      url.searchParams.set("q", query)
+      const response = await fetch(url, { signal: this.request.signal, headers: { Accept: "application/json" } })
+      if (!response.ok) return
+      const results = await response.json()
+      if (sequence !== this.sequence || !Array.isArray(results)) return
+      const items = results.map(result => {
+        const item = document.createElement("li")
+        const link = document.createElement("a")
+        link.href = result.url
+        link.textContent = result.title
+        item.append(link)
+        return item
+      })
+      this.resultsTarget.replaceChildren(...items)
+      this.resultsTarget.hidden = items.length === 0
+    } catch (_) {
+      // The ordinary GET form remains available when suggestions cannot load.
+    }
+  }
+}

data/app/assets/javascripts/open_blog/controllers/share_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["device", "copy", "status"]
+  static values = { url: String, title: String, copiedLabel: String, copyLabel: String, errorLabel: String }
+
+  connect() {
+    this.connected = true
+    if (this.hasDeviceTarget) this.deviceTarget.hidden = typeof navigator.share !== "function"
+    if (this.hasCopyTarget) this.copyTarget.hidden = !navigator.clipboard?.writeText
+  }
+
+  disconnect() {
+    this.connected = false
+    clearTimeout(this.resetTimer)
+    if (this.hasDeviceTarget) this.deviceTarget.hidden = true
+    if (this.hasCopyTarget) {
+      this.copyTarget.hidden = true
+    }
+    if (this.hasStatusTarget) this.statusTarget.textContent = ""
+  }
+
+  async share() {
+    try {
+      await navigator.share({ title: this.titleValue, url: this.urlValue })
+    } catch (error) {
+      if (error.name !== "AbortError") this.announce(this.errorLabelValue)
+    }
+  }
+
+  async copy() {
+    try {
+      await navigator.clipboard.writeText(this.urlValue)
+      this.announce(this.copiedLabelValue)
+    } catch (_) {
+      this.announce(this.errorLabelValue)
+    }
+  }
+
+  announce(label) {
+    if (!this.connected) return
+    clearTimeout(this.resetTimer)
+    if (this.hasStatusTarget) this.statusTarget.textContent = label
+    this.resetTimer = setTimeout(() => {
+      if (this.hasStatusTarget) this.statusTarget.textContent = ""
+    }, 2000)
+  }
+}

data/app/assets/javascripts/open_blog/controllers/theme_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["label"]
+  static values = { systemLabel: String, lightLabel: String, darkLabel: String }
+
+  connect() {
+    this.mode = "system"
+    try {
+      const stored = localStorage.getItem("open-blog-theme")
+      if (stored === "light" || stored === "dark") this.mode = stored
+    } catch (_) {}
+    this.media = window.matchMedia("(prefers-color-scheme: dark)")
+    this.onMediaChange = () => this.apply()
+    this.onStorage = (event) => {
+      if (event.key !== "open-blog-theme" && event.key !== null) return
+      this.mode = ["light", "dark"].includes(event.newValue) ? event.newValue : "system"
+      this.apply()
+    }
+    this.media.addEventListener("change", this.onMediaChange)
+    window.addEventListener("storage", this.onStorage)
+    this.apply()
+    this.element.hidden = false
+  }
+
+  disconnect() {
+    this.media?.removeEventListener("change", this.onMediaChange)
+    window.removeEventListener("storage", this.onStorage)
+    this.element.hidden = true
+  }
+
+  cycle() {
+    this.mode = { system: "light", light: "dark", dark: "system" }[this.mode]
+    try {
+      if (this.mode === "system") localStorage.removeItem("open-blog-theme")
+      else localStorage.setItem("open-blog-theme", this.mode)
+    } catch (_) {}
+    this.apply()
+  }
+
+  apply() {
+    const root = document.documentElement
+    if (this.mode === "system") delete root.dataset.theme
+    else root.dataset.theme = this.mode
+    const label = this[`${this.mode}LabelValue`]
+    if (this.hasLabelTarget) this.labelTarget.textContent = label
+    this.element.setAttribute("aria-label", label)
+    const surface = getComputedStyle(root).getPropertyValue("--ob-surface").trim()
+    if (surface) document.querySelectorAll('meta[name="theme-color"]').forEach(meta => meta.content = surface)
+  }
+}

data/app/assets/javascripts/open_blog/controllers/toc_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.links = [...this.element.querySelectorAll('a[href^="#"]')]
+    this.headings = this.links.map(link => document.getElementById(decodeURIComponent(link.hash.slice(1))))
+    this.schedule = () => {
+      if (!this.frame) this.frame = requestAnimationFrame(() => { this.frame = null; this.update() })
+    }
+    window.addEventListener("scroll", this.schedule, { passive: true })
+    window.addEventListener("resize", this.schedule)
+    this.update()
+  }
+
+  disconnect() {
+    window.removeEventListener("scroll", this.schedule)
+    window.removeEventListener("resize", this.schedule)
+    cancelAnimationFrame(this.frame)
+    this.frame = null
+    this.links.forEach(link => link.removeAttribute("aria-current"))
+  }
+
+  update() {
+    let active = this.headings.findIndex(heading => heading)
+    this.headings.forEach((heading, index) => {
+      if (heading && heading.getBoundingClientRect().top <= 120) active = index
+    })
+    this.links.forEach((link, index) => {
+      if (index === active) link.setAttribute("aria-current", "location")
+      else link.removeAttribute("aria-current")
+    })
+  }
+}

data/app/controllers/concerns/open_blog/reader_controller.rb

@@ -0,0 +1,49 @@
+module OpenBlog
+  module ReaderController
+    extend ActiveSupport::Concern
+
+    included do
+      helper :all
+      layout -> { OpenBlog.config.layout }
+      around_action :use_blog_locale
+      rescue_from OpenBlog::NotFound, ActiveRecord::RecordNotFound, with: :render_not_found
+    end
+
+    private
+
+    def use_blog_locale(&block)
+      I18n.with_locale(OpenBlog.config.locale, &block)
+    end
+
+    def require_html
+      raise NotFound if params[:format].present? && params[:format] != "html"
+      request.format = :html
+    end
+
+    def origin
+      OpenBlog.config.public_base_url || request.base_url
+    end
+
+    def page_context(kind, path:, record: nil, pagination: nil, breadcrumbs: [])
+      @open_blog_page = ReaderPage.new(kind: kind, path: path, base_url: origin, record: record, pagination: pagination, breadcrumbs: breadcrumbs)
+    end
+
+    def paginate(scope)
+      Pagination.page(scope, page: params[:page], per_page: OpenBlog.config.posts_per_page)
+    end
+
+    def load_sidebar
+      @popular_posts = ReaderQueries.popular
+      sidebar = ReaderQueries.sidebar
+      @sidebar_categories, @sidebar_tags = sidebar.values_at(:categories, :tags)
+      @sidebar_cache_key = ReaderQueries.sidebar_cache_key(sidebar) + [ controller_name, params[:slug] ]
+    end
+
+    def render_not_found
+      request.format = :html
+      @posts = ReaderQueries.posts.limit(6).to_a
+      page_context(:not_found, path: request.path)
+      render "open_blog/errors/not_found", status: :not_found, formats: [ :html ], content_type: "text/html"
+    end
+  end
+end

data/app/controllers/open_blog/api/v1/adoptions_controller.rb

@@ -0,0 +1,27 @@
+module OpenBlog
+  module Api
+    module V1
+      class AdoptionsController < BaseController
+        def create
+          require_scope!(:publish)
+          attributes = input_fields!(*ApiFields::ADOPTION)
+          ApiFields::POST_NESTED.except(:approval, :connections).each do |field, allowed|
+            values = field == :faq && attributes[field].is_a?(Array) ? attributes[field] : [ attributes[field] ]
+            values.each do |value|
+              next unless value.is_a?(Hash)
+              unknown = value.keys - allowed
+              raise Error::UnknownField.new(details: unknown.map { |key| "#{field}.#{key}" }) if unknown.any?
+            end
+          end
+          if attributes.key?(:author) && !attributes[:author].is_a?(String) && !attributes[:author].is_a?(Hash)
+            raise Error::ValidationFailed.new(details: [ "author" ])
+          end
+          ApiFields.validate_post_images!(attributes)
+          result = Adopt.call(attributes, actor: actor.name)
+          return render_error(result.error) unless result.success?
+          render json: AdoptionResultSerializer.call(result, base_url: request.base_url), status: result.created ? :created : :ok
+        end
+      end
+    end
+  end
+end

data/app/controllers/open_blog/api/v1/approvals_controller.rb

@@ -0,0 +1,15 @@
+module OpenBlog
+  module Api
+    module V1
+      class ApprovalsController < BaseController
+        def create
+          require_scope!(:publish)
+          input = input_fields!(*ApiFields::APPROVAL)
+          result = Approve.call(find_post!, revision_identifier: input[:revision_identifier],
+            name: input[:name], facts_checked: input[:facts_checked], actor: actor.name)
+          render_result(result, status: :ok)
+        end
+      end
+    end
+  end
+end