@omega.js/web 0.1.0

package/themes/newsflash/_layouts/frontend/pages/blog/index.html

@@ -0,0 +1,299 @@
+---
+layout: frontend/core/base
+
+# Hero Section
+hero:
+  # No hardcoded article — brand names often carry their own ("The Daily
+  # Build wire", "OMEGA Playground wire" both read right).
+  headline: "{{ resolved.config.brand.name }}"
+  headline_accent: "wire"
+  subheadline: "Discover insights, tutorials, and news from our team"
+
+# Newsletter CTA Section
+newsletter_cta:
+  superheadline:
+    text: "Newsletter"
+  headline: "Never miss a"
+  headline_accent: "story"
+  subheadline: "Get the latest insights delivered straight to your inbox. No spam, unsubscribe anytime."
+  button:
+    text: "Subscribe"
+  form:
+    placeholder: "Enter your email"
+---
+
+{% comment %}
+  NEWSFLASH BLOG INDEX
+  The newspaper front page: serif masthead title + pill search, a framed lead
+  story splash, an editorial tile grid for the rest of the page's posts, pill
+  pagination, category/tag chips, and the vermilion newsletter slab (the
+  shared marketing/newsletter-cta band — the nf override inherits classy's
+  §7 FormManager section.js). Preserves classy's contracts: paginator, the
+  client-side search wiring (#blog-search + #blog-search-results +
+  [data-blog-listing]), the form-manager dialect, and the verts/unit section.
+{% endcomment %}
+
+<!-- Page head: serif title + dek + search -->
+<section class="pb-4">
+  <div class="container">
+    <div class="row align-items-end g-4" data-lazy="@class animation-slide-up">
+      <div class="col-lg-8">
+        <span class="newsflash-kicker mb-2">The latest</span>
+        <h1 class="display-4 mb-2">
+          {{ resolved.hero.headline }}
+          {% iftruthy resolved.hero.headline_accent %}
+            <span class="newsflash-accent">{{ resolved.hero.headline_accent }}</span>
+          {% endiftruthy %}
+        </h1>
+        {% iftruthy resolved.hero.subheadline %}
+          <p class="lead mb-0">{{ resolved.hero.subheadline }}</p>
+        {% endiftruthy %}
+      </div>
+      <div class="col-lg-4">
+        {% comment %} Client-side search over /blog/index.json — core/js/pages/blog/index.js {% endcomment %}
+        <label for="blog-search" class="visually-hidden">Search posts</label>
+        <div class="input-group">
+          <span class="input-group-text bg-transparent"><i class="fa-solid fa-search"></i></span>
+          <input
+            type="search"
+            id="blog-search"
+            class="form-control"
+            name="q"
+            placeholder="Search posts..."
+            autocomplete="off"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Search results — rendered client-side, replaces the feed while querying -->
+<section id="blog-search-results" class="omega-blog-search pt-0" aria-live="polite" hidden></section>
+
+<!-- Lead story + feed -->
+<section class="pt-0" data-blog-listing>
+  <div class="container">
+    {% if paginator.posts.size > 0 %}
+      <!-- Lead story splash -->
+      {% assign lead = paginator.posts.first %}
+      {% component "heading/rule-head", text: "Lead story" %}
+      <a href="{{ resolved.config.url }}{{ lead.url }}" class="newsflash-story-card newsflash-story-card--lead mb-5" data-lazy="@class animation-slide-up">
+        <div class="row g-4 g-lg-5 align-items-center">
+          <div class="col-lg-7">
+            <div class="newsflash-frame shadow">
+              {%- omega_post lead.post.id, "image-tag", class="w-100" -%}
+            </div>
+          </div>
+          <div class="col-lg-5">
+            {% if lead.post.categories[0] %}
+              <span class="newsflash-kicker mb-2">{{ lead.post.categories[0] | omega_title_case }}</span>
+            {% endif %}
+            {% comment %} Generated-content tell (#208): the lead splash is its
+              own layout-owned form, not the story-card component, so it
+              carries the badge itself. Kicker line, above the headline
+              (#322). {% endcomment %}
+            {% if lead.generated %}<span class="omega-chip omega-generated-badge mb-2">TEST</span>{% endif %}
+            <h3 class="h1 my-2">{{ lead.post.title }}</h3>
+            {% capture lead_rt %}{% omega_readtime lead.content %}{% endcapture %}
+            {% component "news/byline", author: lead.post.author, date: lead.date | date: "%b %d, %Y", readtime: lead_rt, p_class: "text-body-secondary mb-3" %}
+            <span class="btn btn-outline-dark btn-sm">Read the story <i class="fa-solid fa-arrow-right ms-1"></i></span>
+          </div>
+        </div>
+      </a>
+
+      <!-- The rest of this page's posts -->
+      {% if paginator.posts.size > 1 %}
+        {% component "heading/rule-head", text: "More stories" %}
+        <div class="row g-4 mb-4">
+          {% for post in paginator.posts offset: 1 %}
+            <div class="col-xl-4 col-lg-6 col-md-12" data-lazy="@class animation-slide-up">
+              {% capture rt %}{% omega_readtime post.content %}{% endcapture %}
+              {% component "news/story-card", url: resolved.config.url | append: post.url, id: post.post.id, kicker: post.post.categories[0] | default: "" | omega_title_case, title: post.post.title, author: post.post.author, date: post.date | date: "%b %d, %Y", readtime: rt, generated: post.generated %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endif %}
+    {% else %}
+      <!-- No posts yet -->
+      <div class="text-center py-5" data-lazy="@class animation-slide-up">
+        <span class="newsflash-kicker mb-2">No dispatches yet</span>
+        <h2 class="h3 mb-2">The presses are warming up</h2>
+        <p class="text-body-secondary mb-0">Check back soon for our first stories.</p>
+      </div>
+    {% endif %}
+
+    <!-- Pagination -->
+    <div class="row mb-5">
+      <div class="col-12">
+        {% if paginator.total_pages > 1 %}
+          <nav aria-label="Blog pagination" class="d-flex justify-content-center" data-lazy="@class animation-slide-up">
+            <ul class="pagination mb-0">
+              <!-- Previous Page -->
+              {% if paginator.previous_page %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ paginator.previous_page_path }}" aria-label="Previous page">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    <span class="d-none d-sm-inline ms-1">Previous</span>
+                  </a>
+                </li>
+              {% else %}
+                <li class="page-item disabled">
+                  <span class="page-link">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    <span class="d-none d-sm-inline ms-1">Previous</span>
+                  </span>
+                </li>
+              {% endif %}
+
+              <!-- Page Numbers -->
+              {% assign start_page = paginator.page | minus: 2 | at_least: 1 %}
+              {% assign end_page = paginator.page | plus: 2 | at_most: paginator.total_pages %}
+
+              {% if start_page > 1 %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ resolved.config.url }}/blog">1</a>
+                </li>
+                {% if start_page > 2 %}
+                  <li class="page-item disabled">
+                    <span class="page-link">...</span>
+                  </li>
+                {% endif %}
+              {% endif %}
+
+              {% for page in (start_page..end_page) %}
+                <li class="page-item {% if page == paginator.page %}active{% endif %}">
+                  {% if page == 1 %}
+                    <a class="page-link" href="{{ resolved.config.url }}/blog">{{ page }}</a>
+                  {% else %}
+                    <a class="page-link" href="{{ resolved.config.url }}/blog/page/{{ page }}">{{ page }}</a>
+                  {% endif %}
+                </li>
+              {% endfor %}
+
+              {% if end_page < paginator.total_pages %}
+                {% assign second_to_last = paginator.total_pages | minus: 1 %}
+                {% if end_page < second_to_last %}
+                  <li class="page-item disabled">
+                    <span class="page-link">...</span>
+                  </li>
+                {% endif %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ resolved.config.url }}/blog/page/{{ paginator.total_pages }}">
+                    {{ paginator.total_pages }}
+                  </a>
+                </li>
+              {% endif %}
+
+              <!-- Next Page -->
+              {% if paginator.next_page %}
+                <li class="page-item">
+                  <a class="page-link" href="{{ paginator.next_page_path }}" aria-label="Next page">
+                    <span class="d-none d-sm-inline me-1">Next</span>
+                    <i class="fa-solid fa-chevron-right"></i>
+                  </a>
+                </li>
+              {% else %}
+                <li class="page-item disabled">
+                  <span class="page-link">
+                    <span class="d-none d-sm-inline me-1">Next</span>
+                    <i class="fa-solid fa-chevron-right"></i>
+                  </span>
+                </li>
+              {% endif %}
+            </ul>
+          </nav>
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- In-Feed Vert (auto placement — the advertising config key gates it) -->
+    {% if resolved.config.advertising %}
+      <div class="row justify-content-center mb-5">
+        <div class="col-12 col-lg-8" data-lazy="@class animation-slide-up">
+          {% section "verts/unit", type: "in-feed" %}
+        </div>
+      </div>
+    {% endif %}
+
+    <!-- Categories & Tags -->
+    {% comment %} Build unique categories list (max 10) {% endcomment %}
+    {% assign categories = '' | split: ',' %}
+    {% for post in site.posts %}
+      {% if categories.size >= 10 %}
+        {% break %}
+      {% endif %}
+      {% for category in post.post.categories %}
+        {% assign category_fixed = category | omega_title_case %}
+        {% unless categories contains category_fixed %}
+          {% assign categories = categories | push: category_fixed %}
+        {% endunless %}
+      {% endfor %}
+    {% endfor %}
+
+    {% comment %} Build unique tags list (max 10) {% endcomment %}
+    {% assign tags = '' | split: ',' %}
+    {% for post in site.posts %}
+      {% if tags.size >= 10 %}
+        {% break %}
+      {% endif %}
+      {% for tag in post.post.tags %}
+        {% assign tag_fixed = tag | omega_title_case %}
+        {% unless tags contains tag_fixed %}
+          {% assign tags = tags | push: tag_fixed %}
+        {% endunless %}
+      {% endfor %}
+    {% endfor %}
+
+    {% if categories.size > 0 or tags.size > 0 %}
+      <div class="row justify-content-center">
+        <div class="col-lg-10" data-lazy="@class animation-slide-up">
+          <!-- Categories -->
+          {% if categories.size > 0 %}
+            <div class="mb-5 text-center">
+              <h3 class="h5 mb-3">
+                <i class="fa-solid fa-folder me-2"></i>
+                Categories
+              </h3>
+              <div>
+                {% for category in categories %}
+                  <a href="{{ resolved.config.url }}/blog/categories/{{ category | slugify }}" class="badge bg-primary-soft text-primary text-decoration-none me-1 mb-2">
+                    {{ category }}
+                  </a>
+                {% endfor %}
+                <a href="{{ resolved.config.url }}/blog/categories" class="badge bg-body-tertiary text-decoration-none ms-1 mb-2">
+                  View all <i class="fa-solid fa-arrow-right ms-1"></i>
+                </a>
+              </div>
+            </div>
+          {% endif %}
+
+          <!-- Tags -->
+          {% if tags.size > 0 %}
+            <div class="text-center">
+              <h3 class="h5 mb-3">
+                <i class="fa-solid fa-tags me-2"></i>
+                Tags
+              </h3>
+              <div>
+                {% for tag in tags %}
+                  <a href="{{ resolved.config.url }}/blog/tags/{{ tag | slugify }}" class="badge bg-body-tertiary text-decoration-none me-1 mb-2">
+                    {{ tag }}
+                  </a>
+                {% endfor %}
+                <a href="{{ resolved.config.url }}/blog/tags" class="badge bg-body-tertiary text-decoration-none ms-1 mb-2">
+                  View all <i class="fa-solid fa-arrow-right ms-1"></i>
+                </a>
+              </div>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</section>
+
+<!-- Newsletter CTA — the vermilion slab (shared marketing/newsletter-cta, nf override) -->
+{% section "marketing/newsletter-cta", data: resolved.newsletter_cta %}
+
+{{ content | omega_content_format }}

package/themes/newsflash/_layouts/frontend/pages/blog/post.html

@@ -0,0 +1,235 @@
+---
+layout: frontend/core/base
+
+author_section:
+  author_position: "Staff Writer"
+
+related_posts:
+  headline: "Read"
+  headline_accent: "next"
+  limit: 3
+
+newsletter:
+  superheadline:
+    text: "Newsletter"
+  headline: "Stay in the"
+  headline_accent: "loop"
+  subheadline: "Join our newsletter and get resources, curated content, and inspiration delivered straight to your inbox."
+  button:
+    text: "Submit"
+  form:
+    placeholder: "jonsnow@gmail.com"
+config:
+  theme:
+    post:
+      image:
+        class: "img-fluid rounded-3 w-100 my-5"
+  client:
+    socialSharing:
+      enabled: true
+---
+
+{% comment %}
+  NEWSFLASH BLOG POST
+  The editorial article: a reading-progress bar, centered article head
+  (kicker, serif display headline, byline row with share buttons), framed
+  hero image, drop-cap body with serif crossheads and volt highlights, tag
+  pills, a framed author card, comments, read-next tiles, and the vermilion
+  newsletter slab. Preserves classy's contracts: the blog/[slug] page assets, the
+  load-bearing .blog-post-content class (main-layer ad injection), the
+  data-social-share div, the giscus include + verts/unit section, author_section /
+  related_posts / newsletter frontmatter.
+{% endcomment %}
+
+<!-- Reading progress — filled by the theme page JS (pages/blog/post.js) -->
+<div class="newsflash-progress" aria-hidden="true"><span></span></div>
+
+{% comment %} Vert placement (docs/web/ads-system.md): auto-placed units need the
+  `advertising` config key, and a post opts out with `verts: false` in its
+  frontmatter. The opt-out also travels to the mid-article JS insertion lane
+  (pages/blog/[slug].js) through data-omega-verts on the article. {% endcomment %}
+{% assign _verts_on = false %}
+{% if resolved.config.advertising and resolved.verts != false %}{% assign _verts_on = true %}{% endif %}
+
+<!-- Article Header & Content -->
+<article{% unless _verts_on %} data-omega-verts="false"{% endunless %}>
+  <div class="container">
+    <!-- Article head — centered editorial opening -->
+    <div class="row justify-content-center">
+      <div class="col-xl-9 col-lg-10 col-md-12 col-12">
+        <header class="text-center mb-4" data-lazy="@class animation-slide-up">
+          {% if resolved.post.categories[0] %}
+            <span class="newsflash-kicker mb-3">{{ resolved.post.categories[0] | omega_title_case }}</span>
+          {% else %}
+            <span class="newsflash-kicker mb-3">Dispatch</span>
+          {% endif %}
+          <h1 class="display-4 mt-2 mb-0">{{ resolved.post.title }}</h1>
+
+          {% comment %} Generated-content tell (#208): this theme forks the blog
+            markup, so it carries the badge itself. Keyed off the frontmatter
+            flag ALONE — samples never inject into a production build. {% endcomment %}
+          {% if resolved.generated %}<span class="omega-chip omega-generated-badge mt-3">TEST</span>{% endif %}
+        </header>
+
+        <!-- Byline row -->
+        <div class="d-flex flex-wrap justify-content-center align-items-center gap-3 mb-5" data-lazy="@class animation-slide-up">
+          <div class="d-flex align-items-center">
+            <a href="{%- omega_member resolved.post.author, "url" -%}" class="text-decoration-none me-2">
+              <div class="avatar avatar-md">
+                {%- omega_member resolved.post.author, "image-tag", class="rounded-circle" -%}
+              </div>
+            </a>
+            <div class="text-start">
+              <a href="{%- omega_member resolved.post.author, "url" -%}" class="text-decoration-none text-body fw-semibold d-block">
+                {%- omega_member resolved.post.author, "name" -%}
+              </a>
+              <span class="text-body-secondary small">
+                {% iftruthy resolved.author_section.author_position %}
+                  {{ resolved.author_section.author_position }} ·
+                {% endiftruthy %}
+                <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%b %d, %Y" }}</time>
+              </span>
+            </div>
+          </div>
+          <div class="vr d-none d-sm-block"></div>
+          <div class="d-flex align-items-center gap-2">
+            <span class="badge bg-primary">{% omega_readtime content %} min read</span>
+            <div data-social-share
+                  data-platforms=""
+                  data-title=""
+                  data-description=""
+                  data-url=""
+                  data-size="sm"
+                  data-labels="false">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Hero image — the framed splash -->
+    <div class="row justify-content-center">
+      <div class="col-xl-10 col-lg-10 col-md-12 col-12 mb-5" data-lazy="@class animation-slide-up">
+        <div class="newsflash-frame newsflash-frame--article shadow">
+          {%- omega_post resolved.post.id, "image-tag", class="w-100 blog-post-image" -%}
+        </div>
+      </div>
+    </div>
+
+    <!-- Body — drop cap, serif crossheads, volt marks -->
+    <div class="row justify-content-center mb-3">
+      <div class="blog-post-content col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
+        {{ content | omega_content_format }}
+      </div>
+    </div>
+
+    <!-- Vert -->
+    {% if _verts_on %}
+      <div class="row justify-content-center mb-3">
+        <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
+          {% section "verts/unit", type: "in-article" %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</article>
+
+<!-- Tags, Author & Comments -->
+<section class="pt-0">
+  <div class="container">
+    <!-- Tags -->
+    <div class="row justify-content-center mb-4">
+      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
+        <div class="newsflash-tag-row d-flex flex-wrap gap-2 pt-4">
+          {% assign tags = '' | split: ',' %}
+            {% for tag in resolved.post.tags %}
+              {% assign tag_fixed = tag | omega_title_case %}
+
+              {% unless tags contains tag_fixed %}
+                {% assign tags = tags | push: tag_fixed %}
+              {% endunless %}
+            {% endfor %}
+          {% for tag in tags %}
+            <a href="{{ resolved.config.url }}/blog/tags/{{ tag | slugify }}" class="btn btn-outline-dark btn-sm"><i class="fa-solid fa-tag me-1"></i>{{ tag }}</a>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    <!-- Author card -->
+    <div class="row justify-content-center mb-5">
+      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
+        <div class="card p-4">
+          <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3">
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <a href="{% omega_member resolved.post.author, "url" %}">
+                  <div class="avatar avatar-lg">
+                    {% omega_member resolved.post.author, "image-tag", class="rounded-circle" %}
+                  </div>
+                </a>
+              </div>
+              <div class="ms-3">
+                <a href="{% omega_member resolved.post.author, "url" %}" class="text-body text-decoration-none">
+                  <div class="h5 mb-0">
+                    {%- omega_member resolved.post.author, "name" -%}
+                  </div>
+                </a>
+                {% iftruthy resolved.author_section.author_position %}
+                  <div class="text-body-secondary small">
+                    {{ resolved.author_section.author_position }}
+                  </div>
+                {% endiftruthy %}
+                <a href="{% omega_member resolved.post.author, "url" %}" class="small fw-bold text-decoration-none">
+                  More from this author <i class="fa-solid fa-arrow-right ms-1"></i>
+                </a>
+              </div>
+            </div>
+            <div data-social-share
+                  data-platforms=""
+                  data-title=""
+                  data-description=""
+                  data-url=""
+                  data-size="sm"
+                  data-labels="false">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Comments -->
+    <div class="row justify-content-center mb-5">
+      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
+        {%- include modules/engagement/giscus.html -%}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Read Next -->
+<section class="pt-0">
+  <div class="container">
+    {% capture related_head %}{{ resolved.related_posts.headline }}{% iftruthy resolved.related_posts.headline_accent %} {{ resolved.related_posts.headline_accent }}{% endiftruthy %}{% endcapture %}
+    {% component "heading/rule-head", text: related_head, link_text: "View all", link_href: resolved.config.url | append: "/blog" %}
+    <div class="row g-4">
+      <!-- Loop through posts based on configured limit -->
+      {% assign count = 0 %}
+      {% assign limit = resolved.related_posts.limit | default: 3 %}
+      {% for post in site.posts %}
+        {% if count < limit %}
+          {% if post.id != resolved.post.id %}
+            {% assign count = count | plus: 1 %}
+            <div class="col-xl-4 col-lg-6 col-md-12" data-lazy="@class animation-slide-up">
+              {% capture rt %}{% omega_readtime post.content %}{% endcapture %}
+              {% component "news/story-card", url: resolved.config.url | append: post.url, id: post.post.id, kicker: post.post.categories[0] | default: "" | omega_title_case, title: post.post.title, author: post.post.author, date: post.date | date: "%b %d, %Y", readtime: rt, generated: post.generated %}
+            </div>
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- Newsletter — the vermilion slab (shared marketing/newsletter-cta, nf override) -->
+{% section "marketing/newsletter-cta", data: resolved.newsletter, section_class: "pt-0", narrow: true %}