Add share button

[peterzimon]

ref https://linear.app/ghost/issue/FEA-613/update-themes-to-include-share-button

• We introduce share buttons on the frontend and themes are not yet prepared for it.

[coderabbitai]

Walkthrough

The changes introduce a new "Share" button feature to the post metadata section. The CSS file was updated to remove the margin-top property from .gh-article-meta and add styling for a new .gh-meta-share container and .gh-button-share button element, including hover states and light-theme overrides. The post template was restructured to wrap the author/date/reading-time content in the new .gh-meta-share container and include a share button link, replacing the previous metadata wrapper structure.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add share button' directly reflects the main change: introducing share button UI elements in CSS and template markup.
Description check	✅ Passed	The description references the associated Linear issue and explains the purpose of adding share buttons for frontend themes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch add-share-button

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

post.hbs (1)

44-46: Consider using only .gh-button-share with explicit padding.

The share button uses both gh-button and gh-button-share classes. This relies on .gh-button for padding/font properties while .gh-button-share overrides appearance (background, border, color). This coupling is fragile—changes to .gh-button could unintentionally affect the share button.

♻️ Option: Add padding directly to `.gh-button-share` and remove `.gh-button` class

In assets/css/screen.css, add padding to .gh-button-share:

 .gh-button-share {
     display: inline-flex;
     align-items: center;
+    padding: 0.8em 1.4em;
+    font-size: 1.5rem;
+    font-weight: 600;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 999px;
     color: rgba(0, 0, 0, 0.85);
     background: transparent;
     cursor: pointer;
     transition: all 0.4s ease;
 }

Then in post.hbs:

-                    <a href="#/share" class="gh-button gh-button-share">
+                    <a href="#/share" class="gh-button-share">
                         Share
                     </a>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@post.hbs` around lines 44 - 46, The Share anchor currently depends on both
classes (.gh-button and .gh-button-share), which couples its layout to
.gh-button; update the markup to remove the .gh-button class and keep only
.gh-button-share on the <a> element, and then add the missing padding/font
properties directly to the .gh-button-share rule in your CSS (assets CSS where
.gh-button-share lives) so it is self-contained and no longer relies on
.gh-button for spacing or typography.

assets/css/screen.css (1)

3344-3366: CSS rule ordering: place base styles before theme overrides.

The .has-light-text .gh-button-share override rules (lines 3344-3351) are defined before the base .gh-button-share styles (lines 3353-3366). While specificity makes this work, it's unconventional and harder to maintain. Consider reordering:

♻️ Suggested reordering

 /* SHARE */
 .gh-meta-share {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 20px;
 }

-.has-light-text .gh-button-share {
-    border-color: rgba(255, 255, 255, 0.25);
-    color: rgba(255, 255, 255, 0.85);
-}
-
-.has-light-text .gh-button-share:hover {
-    border-color: rgba(255, 255, 255, 0.85);
-}
-
 .gh-button-share {
     display: inline-flex;
     align-items: center;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 999px;
     color: rgba(0, 0, 0, 0.85);
     background: transparent;
     cursor: pointer;
     transition: all 0.4s ease;
 }

 .gh-button-share:hover {
     border-color: rgba(0, 0, 0, 0.5);
 }
+
+.has-light-text .gh-button-share {
+    border-color: rgba(255, 255, 255, 0.25);
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.has-light-text .gh-button-share:hover {
+    border-color: rgba(255, 255, 255, 0.85);
+}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@assets/css/screen.css` around lines 3344 - 3366, Move the base
.gh-button-share styles to appear before the theme override selectors so base
rules are defined first; specifically place the .gh-button-share block
(including its .gh-button-share:hover) before the .has-light-text
.gh-button-share and .has-light-text .gh-button-share:hover rules to follow
conventional CSS ordering and improve maintainability while keeping the same
declarations for those selectors.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@assets/css/screen.css`:
- Around line 3344-3366: Move the base .gh-button-share styles to appear before
the theme override selectors so base rules are defined first; specifically place
the .gh-button-share block (including its .gh-button-share:hover) before the
.has-light-text .gh-button-share and .has-light-text .gh-button-share:hover
rules to follow conventional CSS ordering and improve maintainability while
keeping the same declarations for those selectors.

In `@post.hbs`:
- Around line 44-46: The Share anchor currently depends on both classes
(.gh-button and .gh-button-share), which couples its layout to .gh-button;
update the markup to remove the .gh-button class and keep only .gh-button-share
on the <a> element, and then add the missing padding/font properties directly to
the .gh-button-share rule in your CSS (assets CSS where .gh-button-share lives)
so it is self-contained and no longer relies on .gh-button for spacing or
typography.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2c9ad4a1-86e8-46f3-8b64-075c797cc3d3

📥 Commits

Reviewing files that changed from the base of the PR and between 214ab8a and 04cbb3f.

⛔ Files ignored due to path filters (1)

• assets/built/screen.css.map is excluded by !**/*.map

📒 Files selected for processing (4)

• assets/built/screen.css
• assets/built/source.js
• assets/css/screen.css
• post.hbs