feat(showcase): improve layout and add ClawdHub button

- Remove auto-sort by likes to preserve JSON order (uniform row heights)
- Reorder showcase with dreetje, danpeguine, davis7 as first row
- Add "Browse Skills" button linking to ClawdHub.com
- Update CLAUDE.md with data management notes
This commit is contained in:
Peter Steinberger 2026-01-19 03:18:48 +00:00
parent a8a9813bd2
commit 52c45f1ea8
3 changed files with 39 additions and 26 deletions

View File

@ -8,6 +8,7 @@
- This ensures consistent row heights in the 3-column CSS grid
- Categories: SHORT (<200 chars), MED (200-400), LONG (>400)
- Fields: `id`, `author`, `quote`, `category`, `likes`, `images?` (array of URLs)
- **Important**: `showcase.astro` uses JSON order directly (no re-sorting) — maintain order in JSON
### Testimonials (`src/data/testimonials.json`)
- Short praise quotes for the shoutouts page

View File

@ -1,4 +1,28 @@
[
{
"id": "2012535486401671588",
"author": "dreetje",
"quote": "What I'm currently doing with @clawdbot:\n• Check my incoming mail, and remove spam\n• Check my incoming messages (through Beeper)\n• Order things for me\n• Send my reminders to Tana\n• Create issues on GitHub\n• Sync my Google Places\n• Reads my X bookmarks and discusses them with me\n• Generate a nice pdf summary of car conversations\n• Keep track of costs and split them after trips\n• Impersonate me in a group chat with friends (Hilarious)\n• It can call me and we can chat\n• Has its own 1Password vault it can read and write to\n\nAnd the beauty is, IT built all of this, just by chatting to it on the phone.",
"category": "automation",
"likes": 271
},
{
"id": "2012565160586625345",
"author": "danpeguine",
"quote": "Things my @clawdbot does for me:\n• Timeblocks tasks in my calendar based on importance\n• Scores tasks importance and urgency based on an algorithm we're developing together\n• Leads me through a weekly review based on meeting transcriptions & notes\n• Gives a morning daily brief: weather, weekly objectives, health stats, meetings agenda, key reminders, trending topics, stuff I should read based on current objectives, a relevant quote from my books\n• Notifies my wife and I about our son's upcoming school tests\n• Researches big projects and breaks them down to tasks\n• Researches people before meetings and creates briefing docs\n• Spawns background sub-agents to research business ideas\n• Manages the calendar for any conflicts autonomously\n• Creates invoices and summarizes work beautifully",
"category": "productivity",
"likes": 257
},
{
"id": "2009487467817336895",
"author": "davis7",
"quote": "This is the \"blue text bubbles\" moment of the ai race\n\nAll the cool shit u've been seeing about building crazy custom agents on top of a coding agent?\n\nclawdbot, btca, and the thousands more that will get built this year now HAVE to be built using anthropic's \"agent sdk\" package or else they'll be 100x more expensive\n\nand if they're built on anthropic's sdk guess what they can't do? switch to a better model from another provider when it releases",
"category": "developer",
"likes": 229,
"images": [
"https://pbs.twimg.com/media/G-MgZdaboAA22M5.jpg"
]
},
{
"id": "2012173452061360130",
"author": "iannuttall",
@ -51,30 +75,6 @@
"category": "productivity",
"likes": 92
},
{
"id": "2012535486401671588",
"author": "dreetje",
"quote": "What I'm currently doing with @clawdbot:\n• Check my incoming mail, and remove spam\n• Check my incoming messages (through Beeper)\n• Order things for me\n• Send my reminders to Tana\n• Create issues on GitHub\n• Sync my Google Places\n• Reads my X bookmarks and discusses them with me\n• Generate a nice pdf summary of car conversations\n• Keep track of costs and split them after trips\n• Impersonate me in a group chat with friends (Hilarious)\n• It can call me and we can chat\n• Has its own 1Password vault it can read and write to\n\nAnd the beauty is, IT built all of this, just by chatting to it on the phone.",
"category": "automation",
"likes": 271
},
{
"id": "2012565160586625345",
"author": "danpeguine",
"quote": "Things my @clawdbot does for me:\n• Timeblocks tasks in my calendar based on importance\n• Scores tasks importance and urgency based on an algorithm we're developing together\n• Leads me through a weekly review based on meeting transcriptions & notes\n• Gives a morning daily brief: weather, weekly objectives, health stats, meetings agenda, key reminders, trending topics, stuff I should read based on current objectives, a relevant quote from my books\n• Notifies my wife and I about our son's upcoming school tests\n• Researches big projects and breaks them down to tasks\n• Researches people before meetings and creates briefing docs\n• Spawns background sub-agents to research business ideas\n• Manages the calendar for any conflicts autonomously\n• Creates invoices and summarizes work beautifully",
"category": "productivity",
"likes": 257
},
{
"id": "2009487467817336895",
"author": "davis7",
"quote": "This is the \"blue text bubbles\" moment of the ai race\n\nAll the cool shit u've been seeing about building crazy custom agents on top of a coding agent?\n\nclawdbot, btca, and the thousands more that will get built this year now HAVE to be built using anthropic's \"agent sdk\" package or else they'll be 100x more expensive\n\nand if they're built on anthropic's sdk guess what they can't do? switch to a better model from another provider when it releases",
"category": "developer",
"likes": 229,
"images": [
"https://pbs.twimg.com/media/G-MgZdaboAA22M5.jpg"
]
},
{
"id": "2008994096736817624",
"author": "davekiss",

View File

@ -2,8 +2,8 @@
import Layout from '../layouts/Layout.astro';
import showcaseData from '../data/showcase.json';
// Sort by likes (most popular first)
const sortedShowcase = [...showcaseData].sort((a, b) => b.likes - a.likes);
// Use JSON order directly (pre-sorted into uniform rows: SHORT, MED, LONG groups)
const sortedShowcase = showcaseData;
const categoryLabels: Record<string, string> = {
'power-user': '🚀 Power User',
@ -64,6 +64,7 @@ const categoryLabels: Record<string, string> = {
<p class="cta-desc">Share your Clawdbot creation with the community</p>
<div class="cta-buttons">
<a href="https://twitter.com/intent/tweet?text=Check%20out%20what%20I%20built%20with%20%40clawdbot%21" target="_blank" rel="noopener" class="cta-btn cta-primary">Share on X</a>
<a href="https://clawdhub.com" target="_blank" rel="noopener" class="cta-btn cta-hub">Browse Skills</a>
<a href="https://discord.com/invite/clawd" target="_blank" rel="noopener" class="cta-btn cta-secondary">Join Discord</a>
</div>
</section>
@ -323,6 +324,17 @@ const categoryLabels: Record<string, string> = {
box-shadow: 0 8px 30px rgba(255, 77, 77, 0.4);
}
.cta-hub {
background: rgba(0, 229, 204, 0.15);
border: 1px solid var(--cyan-bright);
color: var(--cyan-bright);
}
.cta-hub:hover {
background: rgba(0, 229, 204, 0.25);
transform: translateY(-2px);
}
.cta-secondary {
background: rgba(88, 101, 242, 0.15);
border: 1px solid #5865F2;