Skip to content

[codex] Update Push MD landing branding and social card #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
artpi merged 3 commits into from
May 14, 2026
Merged

[codex] Update Push MD landing branding and social card #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc25cd1
Update Push MD landing branding
artpi May 14, 2026
3c0f9b2
Clarify Push MD skills requirements
artpi May 14, 2026
92db3b5
Add Push MD social card
artpi May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions plugins/push-md/docs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,37 @@ It is intentionally static so it can be opened directly in a browser while the
public site target is still undecided. The page positions Push MD as
WordPress-as-source-of-truth for Git, agents, and Markdown workflows.

The social share card source lives next to the landing page:

```text
plugins/push-md/docs/landing/social-card.html
```

To regenerate the Twitter/X and Open Graph card image, start a local static
server from the repository root:

```bash
php -S 127.0.0.1:8876 -t plugins/push-md/docs/landing
```

Then capture the card at the expected social-preview size:

```bash
'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' \
--headless \
--disable-gpu \
--hide-scrollbars \
--force-device-scale-factor=1 \
--window-size=1200,630 \
--screenshot=plugins/push-md/docs/landing/assets/push-md-social-card.png \
http://127.0.0.1:8876/social-card.html
```

If Chrome is installed elsewhere, replace the binary path with the local
Chrome or Chromium executable. The generated
`plugins/push-md/docs/landing/assets/push-md-social-card.png` file is the image
referenced by the landing page's `og:image` and `twitter:image` tags.

## What Push MD Does

Push MD exposes supported WordPress content as a Git Smart HTTP remote at:
Expand Down
Binary file added plugins/push-md/docs/landing/assets/push-md-logo-full.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added plugins/push-md/docs/landing/assets/push-md-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added plugins/push-md/docs/landing/assets/push-md-social-card.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 51 additions & 3 deletions plugins/push-md/docs/landing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Push MD - WordPress as the Git remote for agents</title>
<meta name="description" content="Push MD lets coding agents and Markdown-first teams work with WordPress content through Git while WordPress remains the source of truth.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Push MD">
<meta property="og:title" content="Push MD - WordPress as the Git remote for agents">
<meta property="og:description" content="Clone posts as Markdown, pull WP-Admin edits, and push your changes with any git client.">
<meta property="og:image" content="assets/push-md-social-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Push MD social card showing a terminal workflow for WordPress content in Git.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Push MD - WordPress as the Git remote for agents">
<meta name="twitter:description" content="Clone posts as Markdown, pull WP-Admin edits, and push your changes with any git client.">
<meta name="twitter:image" content="assets/push-md-social-card.png">
<meta name="twitter:image:alt" content="Push MD social card showing a terminal workflow for WordPress content in Git.">
<link rel="stylesheet" href="landing.css">
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>

<header class="site-header">
<a class="brand" href="#top" aria-label="Push MD home">
<span class="brand-mark" aria-hidden="true">PMD</span>
<img class="brand-logo" src="assets/push-md-logo.png" alt="" width="512" height="512" aria-hidden="true">
<span>Push MD</span>
</a>
<nav class="site-nav" aria-label="Main navigation">
Expand All @@ -22,7 +35,13 @@
<a href="#faq">FAQ</a>
<a href="https://github.com/Automattic/php-toolkit/tree/trunk/plugins/push-md/docs">Docs</a>
</nav>
<a class="button button-primary" href="https://github.com/Automattic/php-toolkit/releases/latest/download/push-md.zip">Download plugin</a>
<a class="button button-primary" href="https://github.com/Automattic/php-toolkit/releases/latest/download/push-md.zip">
<svg class="button-icon octicon octicon-download" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path>
<path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path>
</svg>
<span>Download plugin</span>
</a>
</header>

<main id="main" class="markdown-document">
Expand All @@ -35,7 +54,13 @@ <h1 id="hero-title"><span class="md-token">#</span> Markdown in Git. WordPress i
revisions, rejects stale pushes, and lets WordPress render the site.
</p>
<div class="hero-actions" aria-label="Primary actions">
<a class="button button-primary" href="https://github.com/Automattic/php-toolkit/releases/latest/download/push-md.zip">Download plugin</a>
<a class="button button-primary" href="https://github.com/Automattic/php-toolkit/releases/latest/download/push-md.zip">
<svg class="button-icon octicon octicon-download" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path>
<path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path>
</svg>
<span>Download plugin</span>
</a>
<a class="button button-secondary" href="https://github.com/Automattic/php-toolkit/tree/trunk/plugins/push-md/docs">Read docs</a>
</div>
</div>
Expand Down Expand Up @@ -125,6 +150,18 @@ <h3>Agents complete WordPress work through Git.</h3>
<li><code>[x]</code> Carry site guidance in <code>AGENTS.md</code> and <code>SKILL.md</code>.</li>
<li><code>[x]</code> Push only after WordPress accepts the change.</li>
</ul>
<div class="setup-note">
<p class="setup-note-title">Agent skills depend on WordPress Guidelines.</p>
<ol>
<li>Install and activate the Gutenberg plugin.</li>
<li>Open the Gutenberg Experiments page and turn on the Guidelines experiment.</li>
</ol>
<p>
Once WordPress Guidelines are enabled, Push MD exposes skills as
<code>wp_guideline/skills/{slug}/SKILL.md</code> and adds the usual agent
entry points for local tools.
</p>
</div>
</article>

<article class="use-case-card">
Expand Down Expand Up @@ -188,6 +225,17 @@ <h3><span class="md-token">###</span> Does this work with any Git client?</h3>
</p>
</article>

<article class="faq-item">
<h3><span class="md-token">###</span> How do agent skills become available?</h3>
<p>
Push MD stores agent skills as WordPress Guidelines. Today, that means the
site needs the Gutenberg plugin installed and active, with the Guidelines
experiment turned on from the Gutenberg Experiments page. After that, skills
appear in the checkout under <code>wp_guideline/skills/{slug}/SKILL.md</code>,
with generated aliases such as <code>AGENTS.md</code> for agent discovery.
</p>
</article>

<article class="faq-item">
<h3><span class="md-token">###</span> What happens when someone edits in WP-Admin?</h3>
<p>
Expand Down
91 changes: 65 additions & 26 deletions plugins/push-md/docs/landing/landing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,24 +84,20 @@ pre {
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
gap: 12px;
color: var(--ink);
font-weight: 780;
text-decoration: none;
white-space: nowrap;
}

.brand-mark {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(31, 29, 25, 0.18);
border-radius: 8px;
background: var(--ink);
color: #ffffff;
font-size: 11px;
letter-spacing: 0;
.brand-logo {
display: block;
flex: 0 0 auto;
width: 50px;
height: 50px;
object-fit: contain;
filter: drop-shadow(0 5px 12px rgba(31, 29, 25, 0.18));
}

.site-nav {
Expand Down Expand Up @@ -129,6 +125,7 @@ pre {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 16px;
border: 1px solid transparent;
Expand All @@ -139,6 +136,13 @@ pre {
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.button-icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
fill: currentColor;
}

.button:hover,
.button:focus {
transform: translateY(-1px);
Expand Down Expand Up @@ -661,6 +665,31 @@ pre {
font-weight: 800;
}

.setup-note {
margin-top: 22px;
padding: 2px 0 2px 18px;
border-left: 3px solid var(--hash);
color: var(--muted);
}

.setup-note p,
.setup-note ol {
max-width: 980px;
margin: 10px 0 0;
}

.setup-note .setup-note-title {
margin-top: 0;
color: var(--ink);
font-weight: 780;
}

.setup-note ol {
display: grid;
gap: 6px;
padding-left: 22px;
}

.file-map {
display: grid;
margin-top: 24px;
Expand Down Expand Up @@ -808,24 +837,12 @@ pre {
}

@media (max-width: 1120px) {
html {
scroll-padding-top: 138px;
}

section[id] {
scroll-margin-top: 138px;
}

.site-header {
flex-wrap: wrap;
gap: 16px;
}

.site-nav {
order: 3;
width: 100%;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 2px;
gap: 18px;
}

.hero,
Expand All @@ -843,6 +860,28 @@ pre {
}
}

@media (max-width: 900px) {
html {
scroll-padding-top: 138px;
}

section[id] {
scroll-margin-top: 138px;
}

.site-header {
flex-wrap: wrap;
}

.site-nav {
order: 3;
width: 100%;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 2px;
}
}

@media (max-width: 720px) {
body {
background-size: 100% 30px;
Expand Down
Loading
Loading