diff options
Diffstat (limited to '.superpowers/brainstorm/26102-1776256459')
8 files changed, 559 insertions, 0 deletions
diff --git a/.superpowers/brainstorm/26102-1776256459/content/article-types.html b/.superpowers/brainstorm/26102-1776256459/content/article-types.html new file mode 100644 index 0000000..71f8533 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/article-types.html @@ -0,0 +1,93 @@ +<h2>Article Types & Sorting Strategy</h2> +<p class="subtitle">Five distinct content formats with intelligent ordering</p> + +<div class="section"> + <h3>Article Types</h3> + <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;"> + <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.08); border-left: 3px solid #a855f7; border-radius: 0.4rem;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">📝 Life</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Generic blog posts. Personal thoughts, reflections, stories.</p> + <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: life</code></p> + </div> + <div style="padding: 1.2rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.4rem;"> + <h4 style="color: #00ff88; margin-bottom: 0.5rem;">📸 Photo</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Single photo or gallery. Visual-focused content with captions.</p> + <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: photo</code></p> + </div> + <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.08); border-left: 3px solid #a855f7; border-radius: 0.4rem;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">🔗 Link</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Interesting external URL. Commentary + link to external content.</p> + <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: link</code></p> + </div> + <div style="padding: 1.2rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.4rem;"> + <h4 style="color: #00ff88; margin-bottom: 0.5rem;">💬 Quote</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Pull quote with attribution. Emphasis on the quote itself.</p> + <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: quote</code></p> + </div> + <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.08); border-left: 3px solid #a855f7; border-radius: 0.4rem; grid-column: 1 / -1;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">💻 Tech</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Code snippets & technical content. Syntax-highlighted code, technical explanations.</p> + <p style="font-size: 0.8rem; color: #7a9bb8; margin-top: 0.5rem;"><code>type: tech</code></p> + </div> + </div> +</div> + +<div class="section"> + <h3>Articles List Sorting</h3> + <div class="mockup" style="padding: 1.5rem;"> + <div class="mockup-header">Articles Page (/articles/)</div> + <div class="mockup-body" style="padding: 1.5rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem;"> + <div style="font-family: 'IBM Plex Sans', sans-serif; line-height: 2;"> + <div style="padding: 0.8rem; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.3rem; margin-bottom: 1rem;"> + <div style="font-size: 0.8rem; color: #00ff88; font-weight: bold; margin-bottom: 0.4rem;">📌 PINNED</div> + <div style="font-weight: bold; color: #a855f7;">Interesting Article Title</div> + <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 14, 2026 • Life</div> + </div> + <div style="padding: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15); margin-bottom: 0.8rem;"> + <div style="font-weight: bold; color: #c4d6e8;">Another Great Post</div> + <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 12, 2026 • Tech</div> + </div> + <div style="padding: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15); margin-bottom: 0.8rem;"> + <div style="font-weight: bold; color: #c4d6e8;">Photo Moments</div> + <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 10, 2026 • Photo</div> + </div> + <div style="padding: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15); margin-bottom: 0.8rem;"> + <div style="font-weight: bold; color: #c4d6e8;">Inspiring Quote</div> + <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 8, 2026 • Quote</div> + </div> + <div style="padding: 0.8rem;"> + <div style="font-weight: bold; color: #c4d6e8;">Link to Cool Thing</div> + <div style="font-size: 0.85rem; color: #7a9bb8;">Apr 5, 2026 • Link</div> + </div> + </div> + </div> + </div> + <div style="margin-top: 1.5rem; padding: 1rem; background: rgba(0, 255, 136, 0.05); border-left: 3px solid #00ff88; border-radius: 0.3rem;"> + <p style="font-size: 0.85rem;"><strong>Order:</strong> Pinned post (if exists) at top → then reverse chronological (newest first)</p> + <p style="font-size: 0.85rem; margin-top: 0.5rem;"><strong>Implementation:</strong> Front-matter field <code>pinned: true</code> in post metadata</p> + </div> +</div> + +<div class="section"> + <h3>Single Article View</h3> + <p style="font-size: 0.85rem; margin-bottom: 1rem;">Each article type gets a dedicated template with appropriate styling and metadata display.</p> + <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Life / Tech / Photo</h4> + <p style="font-size: 0.8rem; line-height: 1.6;">Standard article layout: title, date, content, tags</p> + </div> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">Quote</h4> + <p style="font-size: 0.8rem; line-height: 1.6;">Large blockquote styling, author attribution, minimal text</p> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; grid-column: 1 / -1;"> + <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Link</h4> + <p style="font-size: 0.8rem; line-height: 1.6;">Preview/commentary + prominent link button, embed preview (if possible)</p> + </div> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Configuration in hugo.toml</h3> + <p style="font-size: 0.85rem; margin-bottom: 1rem;">All article types defined in config, making it easy to add new types or customize existing ones later.</p> +</div>
\ No newline at end of file diff --git a/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html b/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html new file mode 100644 index 0000000..776b786 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html @@ -0,0 +1,154 @@ +<h2>Page Layouts & Visual Hierarchy</h2> +<p class="subtitle">Desktop and mobile layouts for key pages</p> + +<div class="section"> + <h3>Landing Page (Homepage)</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Homepage / _index.md</div> + <div class="mockup-body" style="background: linear-gradient(180deg, rgba(6, 11, 16, 0.8), rgba(16, 30, 45, 0.8)); padding: 2rem;"> + <div style="text-align: center; padding: 3rem 0;"> + <div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: rgba(168, 85, 247, 0.3); border-radius: 50%; border: 2px solid #a855f7; display: flex; align-items: center; justify-content: center;"> + <span style="font-size: 2rem;">📷</span> + </div> + <h1 style="font-family: 'Oxanium', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; color: #a855f7;">Danilo Macrì</h1> + <p style="color: #c4d6e8; font-size: 1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.8;">Brief introduction about yourself, your focus, what you do. Keep it concise and personal. (From _index.md)</p> + <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;"> + <div style="padding: 0.6rem 1.5rem; background: #a855f7; color: white; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Read Articles</div> + <div style="padding: 0.6rem 1.5rem; border: 1px solid #a855f7; color: #a855f7; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Get in Touch</div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Articles List Page</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Articles / List View</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;"> + <div style="max-width: 800px; margin: 0 auto;"> + <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 2rem; font-family: 'Oxanium', sans-serif;">Articles</h1> + + <!-- Pinned post --> + <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.4rem; margin-bottom: 1.5rem;"> + <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"> + <span style="font-size: 0.75rem; color: #00ff88; font-weight: bold;">📌 PINNED</span> + </div> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Why I Started This Blog</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 14, 2026</span> + <span>•</span> + <span style="color: #a855f7;">Life</span> + </div> + </div> + + <!-- Regular posts --> + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Building a Go CLI Tool</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 12, 2026</span> + <span>•</span> + <span style="color: #00ff88;">Tech</span> + </div> + </div> + + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Mountain Hiking Adventure</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 10, 2026</span> + <span>•</span> + <span style="color: #a855f7;">Photo</span> + </div> + </div> + + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">On Simplicity</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 8, 2026</span> + <span>•</span> + <span style="color: #a855f7;">Quote</span> + </div> + </div> + + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Interesting Read: The Unix Philosophy</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 5, 2026</span> + <span>•</span> + <span style="color: #00ff88;">Link</span> + </div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Single Article Page (Tech Example)</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Article View / Single</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;"> + <div style="max-width: 700px; margin: 0 auto;"> + <div style="margin-bottom: 1.5rem;"> + <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span> + </div> + <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1> + <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <span>Apr 12, 2026</span> + <span>•</span> + <span>5 min read</span> + </div> + + <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem;"> + <p>Article content goes here. This is where your markdown is rendered with proper typography and spacing.</p> + + <div style="margin: 1.5rem 0; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-left: 3px solid #00ff88; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #00ff88; overflow-x: auto;"> + <div>$ go run main.go</div> + <div>Hello, CLI!</div> + </div> + + <p>More content and explanation about the code...</p> + </div> + + <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(168, 85, 247, 0.15);"> + <div style="font-size: 0.8rem; color: #7a9bb8;">Tags:</div> + <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;"> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#golang</span> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#cli</span> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#programming</span> + </div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Static Pages (About, Contact, Privacy)</h3> + <div style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;"> + <p style="font-size: 0.85rem; line-height: 1.8;">Static pages use a clean single-column layout. Content managed via markdown files in <code>content/</code>. All pages share the same template with consistent styling.</p> + <p style="font-size: 0.85rem; margin-top: 1rem;"><strong>Example:</strong> <code>/is</code> (About), <code>/is/here</code> (Contact), <code>/is/legal</code> (Privacy) — all defined in hugo.toml for easy management.</p> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Responsive Behavior</h3> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">Desktop (1024px+)</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Full navigation visible</li> + <li>Max content width ~800px</li> + <li>Comfortable spacing</li> + </ul> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Mobile (<768px)</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Hamburger menu toggle</li> + <li>Full-screen overlay on tap</li> + <li>Optimized spacing</li> + </ul> + </div> + </div> +</div>
\ No newline at end of file diff --git a/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html b/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html new file mode 100644 index 0000000..894751a --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html @@ -0,0 +1,188 @@ +<h2>Article & Static Page Layouts with Sidebar</h2> +<p class="subtitle">Two-column desktop layout, responsive sidebar that moves to bottom on mobile</p> + +<div class="section"> + <h3>Single Article Page (Tech Example) — Desktop View</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Article View / Single (Desktop 1024px+)</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;"> + <div style="display: grid; grid-template-columns: 1fr 300px; gap: 2rem; max-width: 1100px; margin: 0 auto;"> + <!-- Main Content --> + <div> + <div style="margin-bottom: 1.5rem;"> + <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span> + </div> + <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1> + <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <span>Apr 12, 2026</span> + <span>•</span> + <span>5 min read</span> + </div> + + <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem;"> + <p>Building command-line tools in Go is straightforward and powerful. Let's explore how to create a simple CLI application.</p> + + <div style="margin: 1.5rem 0; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-left: 3px solid #00ff88; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; overflow-x: auto;"> + <div style="color: #a855f7;">package</div><div style="display: inline; color: #c4d6e8;"> main</div> + <br><br> + <div style="color: #a855f7;">import</div><div style="display: inline; color: #c4d6e8;"> (</div> + <br><div style="margin-left: 2rem;"><span style="color: #00ff88;">"fmt"</span></div> + <br><div style="color: #c4d6e8;">)</div> + <br><br> + <div style="color: #a855f7;">func</div><div style="display: inline; color: #c4d6e8;"> main() {</div> + <br><div style="margin-left: 2rem; color: #a855f7;">fmt</div><div style="display: inline; color: #c4d6e8;">.Println(</div><div style="display: inline; color: #00ff88;">"Hello, CLI!"</div><div style="display: inline; color: #c4d6e8;">)</div> + <br><div style="color: #c4d6e8;">}</div> + </div> + + <p>This simple example demonstrates the basics. For larger projects, consider using the <code style="background: rgba(168, 85, 247, 0.2); padding: 0.2rem 0.4rem; border-radius: 0.2rem; color: #a855f7;">cobra</code> library for more advanced CLI features.</p> + + <p style="margin-top: 1rem;">The key advantages of Go for CLI tools are:</p> + <ul style="margin-left: 1.5rem; margin-top: 0.5rem;"> + <li style="margin-bottom: 0.5rem;">Single binary compilation (no runtime dependencies)</li> + <li style="margin-bottom: 0.5rem;">Cross-platform builds</li> + <li style="margin-bottom: 0.5rem;">Fast execution</li> + <li>Rich standard library</li> + </ul> + </div> + + <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(168, 85, 247, 0.15);"> + <div style="font-size: 0.8rem; color: #7a9bb8;">Tags:</div> + <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;"> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#golang</span> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#cli</span> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#programming</span> + </div> + </div> + </div> + + <!-- Sidebar --> + <aside style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem; height: fit-content; position: sticky; top: 2rem;"> + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Share</h3> + <div style="display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem;"> + <div style="padding: 0.5rem 0.8rem; background: rgba(0, 85, 200, 0.15); border: 1px solid rgba(0, 85, 200, 0.3); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #5ba3e8;">𝕏 / Twitter</div> + <div style="padding: 0.5rem 0.8rem; background: rgba(30, 144, 255, 0.15); border: 1px solid rgba(30, 144, 255, 0.3); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #5ba3e8;">📘 Facebook</div> + <div style="padding: 0.5rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #a855f7;">🔗 Copy Link</div> + </div> + + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1.5rem 0;"> + + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Article Info</h3> + <div style="font-size: 0.8rem; line-height: 2; color: #7a9bb8;"> + <div><strong style="color: #c4d6e8;">Published:</strong> Apr 12, 2026</div> + <div><strong style="color: #c4d6e8;">Updated:</strong> Apr 14, 2026</div> + <div><strong style="color: #c4d6e8;">Reading Time:</strong> 5 min</div> + <div><strong style="color: #c4d6e8;">Category:</strong> <span style="color: #00ff88;">Tech</span></div> + </div> + + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1.5rem 0;"> + + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Related</h3> + <div style="font-size: 0.8rem; color: #c4d6e8; line-height: 1.8;"> + <div style="margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <div style="cursor: pointer; color: #a855f7;">Rust vs Go</div> + <div style="font-size: 0.75rem; color: #7a9bb8;">Apr 5, 2026</div> + </div> + <div> + <div style="cursor: pointer; color: #a855f7;">Python CLI Tools</div> + <div style="font-size: 0.75rem; color: #7a9bb8;">Mar 28, 2026</div> + </div> + </div> + </aside> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Mobile View (Sidebar → Bottom)</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Article View / Mobile (<768px)</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 1.5rem; max-width: 500px; margin: 0 auto;"> + <div style="margin-bottom: 1.5rem;"> + <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span> + </div> + <h1 style="font-size: 1.5rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1> + <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <span>Apr 12, 2026</span> + <span>•</span> + <span>5 min</span> + </div> + + <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem; margin-bottom: 2rem;"> + <p>Building command-line tools in Go is straightforward and powerful...</p> + <p style="margin-top: 1rem;">[Article content continues...]</p> + </div> + + <!-- Sidebar content moved to bottom on mobile --> + <div style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem; margin-top: 2rem;"> + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Share This</h3> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem;"> + <div style="padding: 0.5rem 0.8rem; background: rgba(0, 85, 200, 0.15); border: 1px solid rgba(0, 85, 200, 0.3); border-radius: 0.3rem; font-size: 0.75rem; cursor: pointer; text-align: center; color: #5ba3e8;">𝕏</div> + <div style="padding: 0.5rem 0.8rem; background: rgba(30, 144, 255, 0.15); border: 1px solid rgba(30, 144, 255, 0.3); border-radius: 0.3rem; font-size: 0.75rem; cursor: pointer; text-align: center; color: #5ba3e8;">FB</div> + </div> + + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1rem 0;"> + + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.5px;">Info</h3> + <div style="font-size: 0.75rem; line-height: 1.8; color: #7a9bb8;"> + <div><strong style="color: #c4d6e8;">Published:</strong> Apr 12, 2026</div> + <div><strong style="color: #c4d6e8;">Category:</strong> Tech</div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Static Page Layout (Same Structure)</h3> + <p style="font-size: 0.85rem; margin-bottom: 1rem;">Static pages (/is, /is/here, /is/legal) use the same two-column layout with sidebar. The sidebar can contain:</p> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">About Page Sidebar</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Social links</li> + <li>Contact info</li> + <li>Skills/expertise</li> + <li>CV download</li> + </ul> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Contact Page Sidebar</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Email address</li> + <li>Social profiles</li> + <li>Response time</li> + <li>Availability</li> + </ul> + </div> + </div> +</div> + +<div class="section"> + <h3>Syntax Highlighting</h3> + <div style="padding: 1.5rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.3rem;"> + <p style="font-size: 0.85rem; margin-bottom: 1rem;"><strong>Implementation:</strong> Hugo + Chroma syntax highlighter (built-in)</p> + <ul style="font-size: 0.85rem; line-height: 1.8; margin-left: 1.5rem;"> + <li>Automatically highlights code blocks marked with language (```go, ```python, etc.)</li> + <li>Custom CSS theme integrated with danix.xyz color scheme (purple accent, green highlights for keywords)</li> + <li>Line numbers optional (configurable in hugo.toml)</li> + <li>Supports all major languages: Go, Python, Rust, JavaScript, Bash, etc.</li> + </ul> + <div style="margin-top: 1rem; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;"> + <div style="color: #a855f7;">```go</div> + <div style="color: #7a9bb8;">// Code here gets automatic syntax highlighting</div> + <div style="color: #a855f7;">```</div> + </div> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Sidebar Implementation Details</h3> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 0.3rem;"> + <p style="font-size: 0.85rem; line-height: 1.8;"> + <strong>Desktop (1024px+):</strong> CSS Grid layout with main content + sticky sidebar. Sidebar remains visible while scrolling.<br><br> + <strong>Tablet/Mobile:</strong> Single column. Sidebar content rendered after main content using CSS <code>order</code> property or media query flexbox reorder.<br><br> + <strong>Content Source:</strong> Sidebar content defined via optional front-matter fields or template logic (e.g., <code>show_sharing: true</code>, <code>show_metadata: true</code>). + </p> + </div> +</div>
\ No newline at end of file diff --git a/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html b/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html new file mode 100644 index 0000000..4d4c225 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html @@ -0,0 +1,112 @@ +<h2>danix.xyz Theme Architecture</h2> +<p class="subtitle">Hugo theme with config-driven structure, bilingual support, and hacker aesthetic</p> + +<div class="section"> + <h3>Core Design Principles</h3> + <ul style="margin-left: 1.5rem; line-height: 1.8;"> + <li><strong>Slackware Philosophy:</strong> Clean, essential, no bloat</li> + <li><strong>Config-Driven:</strong> All structure (menus, pages, URLs) defined in hugo.toml</li> + <li><strong>Bilingual (IT/EN):</strong> i18n files for all UI strings</li> + <li><strong>Dark/Light Toggle:</strong> Theme switcher in hamburger menu</li> + <li><strong>Hacker Aesthetic:</strong> Purple accent (#a855f7), monospace typography, subtle dot-grid background, terminal-style elements</li> + </ul> +</div> + +<div class="section"> + <h3>Page Structure</h3> + <div class="mockup" style="padding: 1.5rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem;"> + <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; line-height: 1.8; color: #a855f7;"> + <div><strong>1. Home / Landing</strong></div> + <div style="margin-left: 2rem; margin-top: 0.5rem;"> + <div>→ Hero section (name, bio, photo)</div> + <div>→ CTA: Articles | Contact</div> + <div>→ Content from _index.md</div> + </div> + <div style="margin-top: 1rem;"><strong>2. Articles Section</strong></div> + <div style="margin-left: 2rem; margin-top: 0.5rem;"> + <div>→ List of posts (chronological)</div> + <div>→ Single article view</div> + <div>→ Content from content/ (Page Bundles)</div> + </div> + <div style="margin-top: 1rem;"><strong>3. Static Pages (config-driven)</strong></div> + <div style="margin-left: 2rem; margin-top: 0.5rem;"> + <div>→ /is (About)</div> + <div>→ /is/here (Contact)</div> + <div>→ /is/legal (Privacy)</div> + <div style="font-size: 0.85rem; color: #7a9bb8; margin-top: 0.5rem;">(Easy to add more via hugo.toml)</div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Navigation Structure</h3> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem;"> + <div class="mockup" style="padding: 1rem;"> + <div class="mockup-header">Top Navigation (Desktop)</div> + <div class="mockup-body" style="padding: 1rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem;"> + <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;"> + <div style="font-weight: bold; color: #a855f7;">danix</div> + <div style="display: flex; gap: 2rem; font-size: 0.85rem;"> + <span>Articles</span> + <span>Contact</span> + <span>≡</span> + </div> + </div> + </div> + </div> + <div class="mockup" style="padding: 1rem;"> + <div class="mockup-header">Hamburger Overlay Menu</div> + <div class="mockup-body" style="padding: 1rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem; font-size: 0.85rem;"> + <div style="display: flex; flex-direction: column; gap: 1rem;"> + <div style="font-weight: bold;">Articles</div> + <div style="font-weight: bold;">About (/is)</div> + <div style="font-weight: bold;">Contact (/is/here)</div> + <div style="font-weight: bold;">Privacy (/is/legal)</div> + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.2); margin: 0.5rem 0;"> + <div style="display: flex; gap: 1rem; font-size: 0.75rem;"> + <span>🇮🇹 IT</span> + <span>🇬🇧 EN</span> + </div> + <div style="font-size: 0.75rem;">☀️ / 🌙</div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Key Features</h3> + <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #00ff88; margin-bottom: 0.5rem;">Alpine.js Integration</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Overlay menu toggle, language switching, theme toggle, contact form AJAX</p> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">Responsive Design</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Mobile-first Tailwind CSS, hamburger on mobile, full nav on desktop</p> + </div> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #00ff88; margin-bottom: 0.5rem;">i18n Ready</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Hugo i18n system for all UI strings (buttons, labels, menus)</p> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">Easy Extensibility</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Add static pages just by adding menu entries in hugo.toml</p> + </div> + </div> +</div> + +<div class="section"> + <h3>Visual Direction</h3> + <div style="padding: 1.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(0, 255, 136, 0.05)); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem;"> + <p><strong>Color Palette:</strong> Dark blue-grey backgrounds (#060b10, #0c1520), purple accent (#a855f7), green highlights (#00ff88), light blue-grey text (#c4d6e8)</p> + <p style="margin-top: 0.8rem;"><strong>Typography:</strong> Headings: Oxanium | Body: IBM Plex Sans | Monospace: JetBrains Mono</p> + <p style="margin-top: 0.8rem;"><strong>Visual Elements:</strong> Subtle dot-grid background, smooth transitions, minimal glow effects, clean borders, hacker/open-source aesthetic</p> + <p style="margin-top: 0.8rem;"><strong>Unique Touch:</strong> Fresh layout design (not a copy of danix.me), modern with hints of hacker/open-source/Slackware philosophy</p> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Does this direction align with your vision?</h3> +</div>
\ No newline at end of file diff --git a/.superpowers/brainstorm/26102-1776256459/content/waiting.html b/.superpowers/brainstorm/26102-1776256459/content/waiting.html new file mode 100644 index 0000000..814be13 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/waiting.html @@ -0,0 +1,3 @@ +<div style="display:flex;align-items:center;justify-content:center;min-height:60vh"> + <p class="subtitle">Finalizing design in terminal...</p> +</div>
\ No newline at end of file diff --git a/.superpowers/brainstorm/26102-1776256459/state/server-stopped b/.superpowers/brainstorm/26102-1776256459/state/server-stopped new file mode 100644 index 0000000..c60fbed --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/state/server-stopped @@ -0,0 +1 @@ +{"reason":"idle timeout","timestamp":1776259280204} diff --git a/.superpowers/brainstorm/26102-1776256459/state/server.log b/.superpowers/brainstorm/26102-1776256459/state/server.log new file mode 100644 index 0000000..b102cc7 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/state/server.log @@ -0,0 +1,7 @@ +{"type":"server-started","port":54271,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:54271","screen_dir":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content","state_dir":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/state"} +{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html"} +{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/article-types.html"} +{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html"} +{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html"} +{"type":"screen-added","file":"/home/danix/Programming/GIT/danix.xyz-hacker-theme/.superpowers/brainstorm/26102-1776256459/content/waiting.html"} +{"type":"server-stopped","reason":"idle timeout"} diff --git a/.superpowers/brainstorm/26102-1776256459/state/server.pid b/.superpowers/brainstorm/26102-1776256459/state/server.pid new file mode 100644 index 0000000..8ce317a --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/state/server.pid @@ -0,0 +1 @@ +26110 |