Added hackorum-patch and web endpoint for it

Including a very detailed help page about it, this should help users
review pages quickly.

Author: dutow

Gemfile

@@ -23,6 +23,7 @@ gem "slim"
 gem "kaminari"
 gem "nokogiri"
 gem "csv"
+gem "redcarpet"
 
 # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
 gem "bcrypt", "~> 3.1"

Gemfile.lock

@@ -341,6 +341,7 @@ GEM
       erb
       psych (>= 4.0.0)
       tsort
+    redcarpet (3.6.1)
     regexp_parser (2.11.3)
     reline (0.6.3)
       io-console (~> 0.5)
@@ -505,6 +506,7 @@ DEPENDENCIES
   puma (>= 5.0)
   rack-mini-profiler
   rails (~> 8.0.2)
+  redcarpet
   rspec-rails
   rubocop-rails-omakase
   selenium-webdriver

app/assets/stylesheets/application.postcss.css

@@ -20,3 +20,4 @@
 @import "components/profile.css";
 @import "components/settings.css";
 @import "components/stats.css";
+@import "components/help.css";

app/assets/stylesheets/components/help.css

@@ -0,0 +1,292 @@
+/* Help Navigation */
+.help-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4) 0;
+}
+
+.help-nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--border-radius-md);
+  text-decoration: none;
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-fast);
+  font-weight: var(--font-weight-medium);
+}
+
+.help-nav-link:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.help-nav-link.active {
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-700);
+  font-weight: var(--font-weight-semibold);
+}
+
+.help-nav-link i {
+  width: 20px;
+  text-align: center;
+}
+
+.help-nav-divider {
+  height: 1px;
+  background-color: var(--color-border);
+  margin: var(--spacing-2) 0;
+}
+
+/* Help Outline (Table of Contents) */
+.help-outline {
+  margin-top: var(--spacing-6);
+  padding-top: var(--spacing-4);
+  border-top: 1px solid var(--color-border);
+}
+
+.help-outline-header {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  padding: 0 var(--spacing-4);
+  margin-bottom: var(--spacing-2);
+}
+
+.help-outline-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.help-outline-link {
+  display: block;
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  border-radius: var(--border-radius-sm);
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+}
+
+.help-outline-link:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-hover);
+}
+
+.help-outline-link.level-3 {
+  padding-left: var(--spacing-8);
+  font-size: var(--font-size-xs);
+}
+
+/* Help Page Layout */
+.help-page {
+  padding: var(--spacing-10) var(--spacing-6) var(--spacing-12);
+  max-width: 800px;
+}
+
+.help-page h1 {
+  font-size: var(--font-size-2xl);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-6);
+}
+
+.help-intro {
+  margin-bottom: var(--spacing-8);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+}
+
+.help-topics h2 {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-4);
+}
+
+.help-topic-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.help-topic-list li {
+  margin-bottom: var(--spacing-2);
+}
+
+.help-topic-list a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  text-decoration: none;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.help-topic-list a:hover {
+  border-color: var(--color-primary-300);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.help-topic-list a i {
+  color: var(--color-text-secondary);
+}
+
+/* Markdown Content Styling */
+.help-content {
+  line-height: 1.7;
+  color: var(--color-text-primary);
+}
+
+.help-content h1 {
+  font-size: var(--font-size-2xl);
+  margin-top: 0;
+  margin-bottom: var(--spacing-6);
+  padding-bottom: var(--spacing-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.help-content h2 {
+  font-size: var(--font-size-xl);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-4);
+  color: var(--color-text-primary);
+}
+
+.help-content h3 {
+  font-size: var(--font-size-lg);
+  margin-top: var(--spacing-8);
+  margin-bottom: var(--spacing-3);
+  color: var(--color-text-primary);
+}
+
+.help-content h4 {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--spacing-6);
+  margin-bottom: var(--spacing-2);
+  color: var(--color-text-primary);
+}
+
+.help-content p {
+  margin-bottom: var(--spacing-4);
+}
+
+.help-content ul,
+.help-content ol {
+  margin-bottom: var(--spacing-4);
+  padding-left: var(--spacing-6);
+}
+
+.help-content li {
+  margin-bottom: var(--spacing-2);
+}
+
+.help-content a {
+  color: var(--color-text-link);
+  text-decoration: none;
+}
+
+.help-content a:hover {
+  text-decoration: underline;
+}
+
+.help-content code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.9em;
+  background: var(--color-gray-100);
+  padding: 0.15em 0.4em;
+  border-radius: var(--border-radius-sm);
+  color: var(--color-text-primary);
+}
+
+.help-content pre {
+  background: var(--color-gray-100);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-4);
+  overflow-x: auto;
+  margin-bottom: var(--spacing-4);
+}
+
+.help-content pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+}
+
+.help-content blockquote {
+  border-left: 4px solid var(--color-primary-300);
+  margin: var(--spacing-4) 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  background: var(--color-gray-100);
+  color: var(--color-text-secondary);
+}
+
+.help-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.help-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--spacing-4);
+}
+
+.help-content th,
+.help-content td {
+  border: 1px solid var(--color-border);
+  padding: var(--spacing-3);
+  text-align: left;
+}
+
+.help-content th {
+  background: var(--color-bg-subtle);
+  font-weight: var(--font-weight-semibold);
+}
+
+.help-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: var(--spacing-8) 0;
+}
+
+.help-content strong {
+  font-weight: var(--font-weight-semibold);
+}
+
+.help-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius-md);
+}
+
+/* Download button styling */
+.help-content .download-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3) var(--spacing-5);
+  background: var(--color-bg-button);
+  color: var(--color-text-button);
+  border-radius: var(--border-radius-md);
+  text-decoration: none;
+  font-weight: var(--font-weight-semibold);
+  transition: background-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.help-content .download-link:hover {
+  background: #d9480f;
+  transform: translateY(-1px);
+  text-decoration: none;
+}

app/controllers/help_controller.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class HelpController < ApplicationController
+  layout "help"
+
+  PAGES = {
+    "hackorum-patch" => "Applying Patches with hackorum-patch"
+  }.freeze
+
+  def index
+    @pages = PAGES
+    @outline = []
+  end
+
+  def show
+    @slug = params[:slug]
+    @title = PAGES[@slug]
+    return render_not_found unless @title
+
+    markdown_path = Rails.root.join("app/views/help/pages", "#{@slug}.md")
+    return render_not_found unless File.exist?(markdown_path)
+
+    markdown_text = File.read(markdown_path)
+    @outline = extract_outline(markdown_text)
+    @content = render_markdown(markdown_text)
+  end
+
+  def active_help_section
+    params[:slug]
+  end
+
+  private
+
+  def extract_outline(text)
+    headings = []
+    text.each_line do |line|
+      if line =~ /^(\#{2,3})\s+(.+)$/
+        level = $1.length
+        title = $2.strip
+        id = title.downcase.gsub(/[^a-z0-9\s-]/, "").gsub(/\s+/, "-")
+        headings << { level: level, title: title, id: id }
+      end
+    end
+    headings
+  end
+
+  def render_markdown(text)
+    renderer = Redcarpet::Render::HTML.new(
+      hard_wrap: true,
+      link_attributes: { target: "_blank", rel: "noopener" },
+      with_toc_data: true
+    )
+    markdown = Redcarpet::Markdown.new(
+      renderer,
+      autolink: true,
+      fenced_code_blocks: true,
+      tables: true,
+      no_intra_emphasis: true,
+      strikethrough: true,
+      superscript: true
+    )
+    markdown.render(text).html_safe
+  end
+
+  def render_not_found
+    render file: Rails.public_path.join("404.html"), status: :not_found, layout: false
+  end
+end