Skip to content

Commit dc791f9

Browse files
Andrew Bakerclaude
andcommitted
Add S3 download button to help page hero
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent e5aa990 commit dc791f9

File tree

2 files changed

+20
-5
lines changed

2 files changed

+20
-5
lines changed

docs/generate-help-docs.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ helpLib.run({
99
docsDir: process.env.WP_DOCS_DIR,
1010

1111
pluginName: 'CloudScale Code Block',
12-
pluginDesc: 'Syntax highlighted code blocks with auto language detection, clipboard copy, dark/light mode toggle, a code block migrator from other plugins, and a read-only SQL query tool. Works as a Gutenberg block and as a [cs_code] shortcode.',
12+
pluginDesc: 'Most code block plugins for WordPress either cost money, depend on slow external CDNs, or produce ugly output you have to style yourself. CloudScale Code Block runs entirely on your server — no external CDN, no API calls, no subscription. Beautiful syntax highlighting, one-click copy, dark/light mode, and a built-in SQL query tool. Completely free.',
1313
pageTitle: 'CloudScale Code Block: Online Help',
1414
pageSlug: 'code-block-help',
15+
downloadUrl: 'https://andrewninjawordpress.s3.af-south-1.amazonaws.com/cloudscale-code-block.zip',
1516
adminUrl: `${process.env.WP_BASE_URL}/wp-admin/tools.php?page=cloudscale-code-sql`,
1617

1718
sections: [
@@ -22,6 +23,12 @@ helpLib.run({
2223

2324
docs: {
2425
'code-block': `
26+
<div style="background:#f0f9ff;border-left:4px solid #0e6b8f;padding:18px 22px;border-radius:0 8px 8px 0;margin-bottom:28px;">
27+
<h2 style="margin:0 0 10px;font-size:1.3em;color:#0f172a;">Why CloudScale Code Block?</h2>
28+
<p style="margin:0 0 10px;">Popular code highlighting plugins like Enlighter and SyntaxHighlighter load external CDN scripts that add 100–300ms to your page load time. Others charge $30–$50/year for features that should come included. Some require you to write custom CSS just to make the output look presentable.</p>
29+
<p style="margin:0 0 10px;">CloudScale Code Block bundles everything locally — zero external requests, zero impact on your CDN cache hit rate. Auto language detection, clipboard copy button, dark and light theme toggle, and line numbers all work out of the box. It also includes a one-click migrator to import code blocks from other popular plugins.</p>
30+
<p style="margin:0;"><strong>Completely free.</strong> No premium version, no nag screens, no feature gating. Use it on as many sites as you want.</p>
31+
</div>
2532
<p>The <strong>CloudScale Code Block</strong> is a registered Gutenberg block (<code>cloudscale/code</code>) and a <code>[cs_code]</code> shortcode for displaying syntax-highlighted code in WordPress posts and pages. Syntax highlighting is powered by <strong>highlight.js 11.11.1</strong> loaded from the cdnjs CDN, supporting over 190 languages with auto-detection.</p>
2633
<p><strong>Block and shortcode usage:</strong></p>
2734
<ul>

docs/help-page.html

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
.cs-hero h1{font-size:2.2em;font-weight:800;margin:0 0 12px;letter-spacing:-.02em;color:#fff;}
1010
.cs-hero p{font-size:1.1em;margin:0;opacity:.85;max-width:680px;}
1111
.cs-hero .cs-badge{display:inline-block;background:rgba(255,255,255,.15);border-radius:20px;padding:4px 14px;font-size:.8em;font-weight:600;margin-bottom:16px;letter-spacing:.05em;text-transform:uppercase;}
12+
.cs-download-btn{display:inline-block;margin-top:20px;background:#22c55e;color:#fff;padding:10px 22px;border-radius:8px;text-decoration:none;font-size:1em;font-weight:700;letter-spacing:.01em;}
1213
.cs-toc{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:28px 36px;margin:32px 0;}
1314
.cs-toc-title{font-size:1em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin:0 0 16px;}
1415
.cs-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;margin:0;padding-left:24px;}
@@ -32,7 +33,8 @@
3233
<div class="cs-hero">
3334
<div class="cs-badge">Free &amp; Open Source</div>
3435
<h1>CloudScale Code Block</h1>
35-
<p>Syntax highlighted code blocks with auto language detection, clipboard copy, dark/light mode toggle, a code block migrator from other plugins, and a read-only SQL query tool. Works as a Gutenberg block and as a [cs_code] shortcode.</p>
36+
<p>Most code block plugins for WordPress either cost money, depend on slow external CDNs, or produce ugly output you have to style yourself. CloudScale Code Block runs entirely on your server — no external CDN, no API calls, no subscription. Beautiful syntax highlighting, one-click copy, dark/light mode, and a built-in SQL query tool. Completely free.</p>
37+
<a class="cs-download-btn" href="https://andrewninjawordpress.s3.af-south-1.amazonaws.com/cloudscale-code-block.zip" download>⬇ Download Latest Version (.zip)</a>
3638
</div>
3739

3840
<div class="cs-toc">
@@ -47,8 +49,14 @@ <h1>CloudScale Code Block</h1>
4749

4850
<div class="cs-panel-section">
4951
<h3 class="cs-panel-heading" id="code-block">Code Block Overview</h3>
50-
<figure class="cs-screenshot"><img src="https://andrewbaker.ninja/wp-content/uploads/2026/03/panel-code-block-3.jpg" alt="Code Block Overview" /></figure>
52+
<figure class="cs-screenshot"><img src="https://andrewbaker.ninja/wp-content/uploads/2026/03/panel-code-block-5.jpg" alt="Code Block Overview" /></figure>
5153
<div class="cs-panel-body">
54+
<div style="background:#f0f9ff;border-left:4px solid #0e6b8f;padding:18px 22px;border-radius:0 8px 8px 0;margin-bottom:28px;">
55+
<h2 style="margin:0 0 10px;font-size:1.3em;color:#0f172a;">Why CloudScale Code Block?</h2>
56+
<p style="margin:0 0 10px;">Popular code highlighting plugins like Enlighter and SyntaxHighlighter load external CDN scripts that add 100–300ms to your page load time. Others charge $30–$50/year for features that should come included. Some require you to write custom CSS just to make the output look presentable.</p>
57+
<p style="margin:0 0 10px;">CloudScale Code Block bundles everything locally — zero external requests, zero impact on your CDN cache hit rate. Auto language detection, clipboard copy button, dark and light theme toggle, and line numbers all work out of the box. It also includes a one-click migrator to import code blocks from other popular plugins.</p>
58+
<p style="margin:0;"><strong>Completely free.</strong> No premium version, no nag screens, no feature gating. Use it on as many sites as you want.</p>
59+
</div>
5260
<p>The <strong>CloudScale Code Block</strong> is a registered Gutenberg block (<code>cloudscale/code</code>) and a <code>[cs_code]</code> shortcode for displaying syntax-highlighted code in WordPress posts and pages. Syntax highlighting is powered by <strong>highlight.js 11.11.1</strong> loaded from the cdnjs CDN, supporting over 190 languages with auto-detection.</p>
5361
<p><strong>Block and shortcode usage:</strong></p>
5462
<ul>
@@ -68,7 +76,7 @@ <h3 class="cs-panel-heading" id="code-block">Code Block Overview</h3>
6876

6977
<div class="cs-panel-section">
7078
<h3 class="cs-panel-heading" id="sql-tool">SQL Query Tool</h3>
71-
<figure class="cs-screenshot"><img src="https://andrewbaker.ninja/wp-content/uploads/2026/03/panel-sql-tool-3.jpg" alt="SQL Query Tool" /></figure>
79+
<figure class="cs-screenshot"><img src="https://andrewbaker.ninja/wp-content/uploads/2026/03/panel-sql-tool-5.jpg" alt="SQL Query Tool" /></figure>
7280
<div class="cs-panel-body">
7381
<p>The <strong>SQL Query Tool</strong> lets WordPress administrators run read-only SELECT queries against the live database from within wp-admin — without needing phpMyAdmin, Adminer, or SSH access. Results are displayed in a paginated table with column headers and query execution time.</p>
7482
<p><strong>Security model:</strong></p>
@@ -90,7 +98,7 @@ <h3 class="cs-panel-heading" id="sql-tool">SQL Query Tool</h3>
9098

9199
<div class="cs-panel-section">
92100
<h3 class="cs-panel-heading" id="migrator">Code Block Migrator</h3>
93-
<figure class="cs-screenshot"><img src="https://andrewbaker.ninja/wp-content/uploads/2026/03/panel-migrator-3.jpg" alt="Code Block Migrator" /></figure>
101+
<figure class="cs-screenshot"><img src="https://andrewbaker.ninja/wp-content/uploads/2026/03/panel-migrator-5.jpg" alt="Code Block Migrator" /></figure>
94102
<div class="cs-panel-body">
95103
<p>The <strong>Code Block Migrator</strong> converts legacy code block shortcodes and HTML from other WordPress syntax highlighting plugins to CloudScale Code Blocks in a single batch operation — without manual copy-paste or post-by-post editing.</p>
96104
<p><strong>Supported source formats:</strong></p>

0 commit comments

Comments
 (0)