<link>https://minhnn-tiny.github.io/</link></image><item><title>Getting Started</h1> <article> <h1>Getting Started</h1> <p>Sat, 17 Feb 2024 00:00:00 +0000</p> <h2 id="quick-start-from-template">Quick Start from Template</h2> <div class="hb-steps"> <h3 id="create-a-site">Create a site</h3> <p> </p> <h3 id="configure-your-new-site">Configure your new site</h3> <p> </p> <h3 id="add-your-content">Add your content</h3> <p> </p> <h3 id="publish-your-site">Publish your site</h3> <p>Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository.</p> </div> <h2 id="next">Next</h2> <p>Let’s customize your new site:</p> <div class="hb-cards mt-4 grid gap-4 not-prose" style="--hb-cols: 1;"> <a class="hb-card group"href="../guide/project-structure" > <span class="hb-card-title p-4"> <svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/></svg>Project Structure</span></a> <a class="hb-card group"href="../guide/configuration" > <span class="hb-card-title p-4"> <svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"/></svg>Configuration</span></a> <a class="hb-card group"href="../guide/formatting" > <span class="hb-card-title p-4"> <svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/></svg>Create content</span></a> </div> </article> <article> <h1>Customizing Hugo</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>View the full docs at </p> </article> <article> <h1>Project Structure</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <h2 id="folder-structure">Folder Structure</h2> <p>There are <strong>4 main folders for Hugo-based sites</strong>:</p> <ul> <li><code>content/</code> for your Markdown-formatted content files (homepage, etc.) <ul> <li><code>_index.md</code> the homepage (<strong>Hugo requires that the homepage and archive pages have an underscore prefix</strong>)</li> </ul> </li> <li><code>assets/</code> <ul> <li><code>media/</code> for your media files (images, videos) <ul> <li><code>icons/custom/</code> upload any custom SVG icons you want to use</li> </ul> </li> </ul> </li> <li><code>config/_default/</code> for your site configuration files <ul> <li><code>hugo.yaml</code> to configure Hugo (site title, URL, Hugo options, setup per-folder page features)</li> <li><code>module.yaml</code> to install or uninstall Hugo themes and plugins</li> <li><code>params.yaml</code> to configure Hugo Blox options (SEO, analytics, site features)</li> <li><code>menus.yaml</code> to configure your menu links (if the menu is enabled in <code>params.yaml</code>)</li> <li><code>languages.yaml</code> to configure your site’s language or to set language-specific options in a multilingual site</li> </ul> </li> <li><code>static/uploads/</code> for any files you want visitors to download, such as a PDF</li> <li><code>go.mod</code> sets the version of Hugo themes/plugins which your site uses</li> </ul> <h2 id="hugo-file-naming-convention">Hugo File Naming Convention</h2> <p>Hugo gives us two options to name standard page files: as <code>TITLE/index.md</code> or <code>TITLE.md</code> where <code>TITLE</code> is your page name.</p> <p>The page name should be lowercase and using hyphens (<code>-</code>) instead of spaces.</p> <p>Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page’s files (such as images) are self-contained within the page’s folder, so it’s more portable if you wish to share the original Markdown page with someone.</p> <p>The homepage is a special case as <strong>Hugo requires the homepage and listing pages to be named</strong> <code>_index.md</code>.</p> <h2 id="docs-navigation">Docs Navigation</h2> <p>The docs navigation is automatically generated based on the content in the <code>docs/</code> folder and is sorted alphabetically.</p> <p>The order of pages can be changed by adding the <code>weight</code> parameter in the front matter of your Markdown files.</p> <p>In the example below, the <code>example.md</code> page will appear before the <code>test.md</code> page as it has a lower <code>weight</code>:</p> <p>Page <code>example.md</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">My Example</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">1</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><p>Page <code>test.md</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">My Test</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">2</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div> </article> <article> <h1>Configuration</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>The configuration of your site can be found in <code>config/_default/</code>.</p> <h2 id="full-documentation">Full Documentation</h2> <p>See </p> <h2 id="navigation">Navigation</h2> <h3 id="menu">Menu</h3> <p>See </p> <h2 id="left-sidebar">Left Sidebar</h2> <p>Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page.</p> <h3 id="extra-links">Extra Links</h3> <p>Additional links can be added under the <code>sidebar</code> section of your <code>config/_default/menus.yaml</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">menu</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">sidebar</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">"Need help?"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">params</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">separator</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">1</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">"A page"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">pageRef</span><span class="p">:</span><span class="w"> </span><span class="s2">"/page-filename-here"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">2</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="s2">"An external link ↗"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://hugoblox.com"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">weight</span><span class="p">:</span><span class="w"> </span><span class="m">3</span><span class="w"> </span></span></span></code></pre></div><h2 id="right-sidebar">Right Sidebar</h2> <p>A table of contents is automatically generated from the headings your Markdown file.</p> <p>It can optionally be disabled by setting <code>toc: false</code> in the front matter of a page:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">My Page</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">toc</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div> </article> <article> <h1>Create Beautiful Presentations with Markdown</h1> <p>Sat, 01 Jun 2030 13:00:00 +0000</p> <h2 id="-why-markdown-slides">🎯 Why Markdown Slides?</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">True Presentation Freedom</div> <div class="callout-body"><p>Unlike PowerPoint or Keynote, your presentations are <strong>future-proof</strong>, <strong>portable</strong>, and completely <strong>under your control</strong>. No proprietary formats, no vendor lock-in, no subscription fees.</p></div> </div> </div> <h3 id="the-problem-with-traditional-slides">The Problem with Traditional Slides</h3> <p><strong>PowerPoint & Keynote:</strong></p> <ul> <li>💸 Expensive licenses or subscriptions</li> <li>🔒 Proprietary file formats (<code>.pptx</code>, <code>.key</code>)</li> <li>💻 Platform-specific (Windows/Mac only)</li> <li>📦 Large binary files</li> <li>🚫 Difficult to version control</li> <li>😰 Lost formatting when sharing</li> </ul> <p><strong>Google Slides:</strong></p> <ul> <li>☁️ Requires internet connection</li> <li>🔐 Data stored on Google’s servers</li> <li>📱 Limited offline editing</li> <li>🎨 Formatting breaks when exporting</li> <li>🔗 Dependency on Google’s platform</li> </ul> <h3 id="the-hugo-blox-solution">The Hugo Blox Solution</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Markdown Changes Everything</strong></div> <div class="callout-body"><p>Write your presentations in simple, human-readable Markdown. Edit anywhere, present anywhere, own forever.</p></div> </div> </div> <hr> <h2 id="-what-you-get">✨ What You Get</h2> <h3 id="-professional-design-zero-effort">🎨 Professional Design, Zero Effort</h3> <ul> <li><strong>15+ Built-in Themes</strong> — Black, white, sky, league, and more</li> <li><strong>Syntax Highlighting</strong> — Beautiful code blocks with 50+ languages</li> <li><strong>Math Support</strong> — LaTeX equations render perfectly: $E = mc^2$</li> <li><strong>Responsive</strong> — Looks great on any screen size</li> </ul> <h3 id="-write-in-plain-text">📝 Write in Plain Text</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="gu">## My Slide Title </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">-</span> Point one </span></span><span class="line"><span class="cl"><span class="k">-</span> Point two </span></span><span class="line"><span class="cl"><span class="k">-</span> Point three </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="s">```python </span></span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s2">"World!"</span> </span></span><span class="line"><span class="cl"><span class="s">```</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">--- </span></span></code></pre></div><p>That’s it! No complex UI, no formatting headaches.</p> <h3 id="-edit-anywhere-anytime">🔄 Edit Anywhere, Anytime</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Zero Lock-In</strong></div> <div class="callout-body"><p>Your slides are just Markdown files. Edit them in:</p> <ul> <li><strong>HugoBlox Studio</strong> — Visual editing with live preview</li> <li><strong>VS Code</strong> — With Markdown extensions</li> <li><strong>Obsidian</strong> — Note-taking app that speaks Markdown</li> <li><strong>Typora</strong> — Minimal distraction writing</li> <li><strong>Any text editor</strong> — Even Notepad works!</li> </ul></div> </div> </div> <div class="text-left"> <a id="button-ff5434c33e7f3eab1e3e4dedf86c1c6e" href="https://docs.hugoblox.com/guides/studio/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-xl" role="button" aria-label="Try HugoBlox Studio" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.53 16.122a3 3 0 0 0-5.78 1.128a2.25 2.25 0 0 1-2.4 2.245a4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.764m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg> </span> <span>Try HugoBlox Studio</span> </a> </div> <h3 id="-advanced-features">🎯 Advanced Features</h3> <p><strong>Dual Column Layouts:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><div style="display: flex; gap: 2rem;"> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Column 1</div> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Column 2</div> </span></span><span class="line"><span class="cl"></div> </span></span></code></pre></div><p><strong>Fragment Animations:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< fragment >}}Appear on click!{{< /fragment >}} </span></span></code></pre></div><p><strong>Speaker Notes:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">Note: Your private notes here </span></span><span class="line"><span class="cl">(visible in presenter view only) </span></span></code></pre></div><p><strong>Vertical Slide Stacks:</strong> Navigate down for sub-topics!</p> <hr> <h2 id="-getting-started-is-easy">🚀 Getting Started is Easy</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="example" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21a48.25 48.25 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Create Your First Slide Deck in 3 Steps</strong></div> <div class="callout-body"></div> </div> </div> <h3 id="step-1-create-your-slides">Step 1: Create Your Slides</h3> <p>Create <code>content/slides/my-talk/index.md</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">"My Amazing Talk"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">slides</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">slides</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">theme</span><span class="p">:</span><span class="w"> </span><span class="l">black</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c"># My Amazing Talk</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c">### Your Name</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c">## Main Points</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl">- <span class="l">Point 1</span><span class="w"> </span></span></span><span class="line"><span class="cl">- <span class="l">Point 2</span><span class="w"> </span></span></span><span class="line"><span class="cl">- <span class="l">Point 3</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c">## Thank You!</span><span class="w"> </span></span></span></code></pre></div><h3 id="step-2-link-to-your-event">Step 2: Link to Your Event</h3> <p>In your event page (<code>content/events/my-event/index.md</code>):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">"My Conference Presentation"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">slides</span><span class="p">:</span><span class="w"> </span><span class="s2">"my-talk"</span><span class="w"> </span><span class="c"># References the slides folder name</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><h3 id="step-3-present">Step 3: Present!</h3> <p>Your slides are automatically:</p> <ul> <li>✅ Embedded on the event page</li> <li>✅ Available in fullscreen mode (click <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">arrows-expand</span> </span> button)</li> <li>✅ Accessible at a direct URL</li> <li>✅ Keyboard-navigatable (→ ← keys)</li> </ul> <div class="text-center"> <a id="button-3f098d62b17fdd4113898a5c7822d589" href="https://docs.hugoblox.com/guides/slides/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Read Full Documentation" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg> </span> <span>Read Full Documentation</span> </a> </div> <hr> <h2 id="-why-academics--researchers-love-it">💎 Why Academics & Researchers Love It</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500" data-callout="quote" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193c-.34.027-.68.052-1.02.072v3.091l-3-3a49.5 49.5 0 0 1-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095a48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402c-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235c.577.075 1.157.14 1.74.194V21l4.155-4.155"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Quote</div> <div class="callout-body"><p>“I can finally version control my presentations with Git, collaborate using GitHub, and never worry about formatting breaking again. Game changer for reproducible research!” — <em>Dr. Xin Liu, MIT</em></p></div> </div> </div> <h3 id="perfect-for-research">Perfect for Research</h3> <ul> <li><strong>Version Control</strong> — Track every change with Git</li> <li><strong>Collaboration</strong> — Use GitHub pull requests for slide reviews</li> <li><strong>Reproducibility</strong> — Slides are plain text, commit them with your code</li> <li><strong>Open Science</strong> — Share presentations on GitHub, no barriers</li> <li><strong>Citations</strong> — Include BibTeX references easily</li> <li><strong>Jupyter Integration</strong> — Embed notebooks and visualizations</li> </ul> <h3 id="perfect-for-teaching">Perfect for Teaching</h3> <ul> <li><strong>Reusable Content</strong> — Mix and match slides across courses</li> <li><strong>Student Contributions</strong> — Students can submit slide PRs</li> <li><strong>Live Coding</strong> — Syntax highlighting for all languages</li> <li><strong>Interactive Examples</strong> — Embed interactive visualizations</li> <li><strong>Accessible</strong> — Keyboard navigation, screen reader friendly</li> </ul> <hr> <h2 id="-see-it-in-action">🎬 See It In Action</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p><strong>Try it now!</strong> The slides embedded above demonstrate all these features:</p> <ul> <li>Code highlighting with Python</li> <li>Mathematical equations with LaTeX</li> <li>Dual column layouts (slides 4-6)</li> <li>Fragment animations</li> <li>Multiple themes</li> </ul> <p>Click the <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">arrows-expand</span> </span> <strong>fullscreen button</strong> (top right) to experience presentation mode!</p></div> </div> </div> <h3 id="live-features-to-try">Live Features to Try</h3> <ol> <li><strong>Navigate</strong>: Use arrow keys (→ ←) or click controls</li> <li><strong>Fullscreen</strong>: Click the expand button to go fullscreen</li> <li><strong>Speaker Notes</strong>: Press <code>S</code> to open presenter view (try it!)</li> <li><strong>Overview</strong>: Press <code>ESC</code> to see all slides at once</li> <li><strong>Search</strong>: Press <code>/</code> to search slide content</li> <li><strong>Zoom</strong>: <code>Alt+Click</code> to zoom into details</li> </ol> <div class="text-left"> <a id="button-7519dfcc27cf03dd985a63a0b9a6155b" href="https://minhnn-tiny.github.io/slides/example/" target="_blank" rel="noopener" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Open Slides in New Tab" > <span class="flex-shrink-0"> <span class="flex items-center justify-center leading-none text-lg">external-link</span> </span> <span>Open Slides in New Tab</span> </a> </div> <hr> <h2 id="-comparison">🆚 Comparison</h2> <table> <thead> <tr> <th>Feature</th> <th>PowerPoint</th> <th>Google Slides</th> <th><strong>Hugo Blox</strong></th> </tr> </thead> <tbody> <tr> <td><strong>Cost</strong></td> <td>$159.99/year</td> <td>Free*</td> <td><strong>Free Forever</strong></td> </tr> <tr> <td><strong>Format</strong></td> <td>Binary (<code>.pptx</code>)</td> <td>Proprietary</td> <td><strong>Plain Markdown</strong></td> </tr> <tr> <td><strong>Version Control</strong></td> <td>❌ Difficult</td> <td>❌ Limited</td> <td><strong>✅ Git Native</strong></td> </tr> <tr> <td><strong>Offline Editing</strong></td> <td>✅ Yes</td> <td>⚠️ Limited</td> <td><strong>✅ Fully Offline</strong></td> </tr> <tr> <td><strong>Platform Lock-in</strong></td> <td>⚠️ Microsoft</td> <td>⚠️ Google</td> <td><strong>✅ None</strong></td> </tr> <tr> <td><strong>Code Highlighting</strong></td> <td>⚠️ Basic</td> <td>⚠️ Limited</td> <td><strong>✅ 50+ Languages</strong></td> </tr> <tr> <td><strong>Math Equations</strong></td> <td>⚠️ Clunky</td> <td>⚠️ Basic</td> <td><strong>✅ Full LaTeX</strong></td> </tr> <tr> <td><strong>Portability</strong></td> <td>❌ Poor</td> <td>❌ Requires Google</td> <td><strong>✅ Works Anywhere</strong></td> </tr> <tr> <td><strong>Future-Proof</strong></td> <td>❌ Format changes</td> <td>⚠️ API changes</td> <td><strong>✅ Plain Text Forever</strong></td> </tr> <tr> <td><strong>Open Source</strong></td> <td>❌ No</td> <td>❌ No</td> <td><strong>✅ Yes</strong></td> </tr> </tbody> </table> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Success</div> <div class="callout-body"><p><strong>Hugo Blox wins on freedom, portability, and long-term sustainability.</strong></p></div> </div> </div> <hr> <h2 id="-advanced-capabilities">🛠️ Advanced Capabilities</h2> <h3 id="code-blocks-with-syntax-highlighting">Code Blocks with Syntax Highlighting</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">torch</span> </span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">torch.nn</span> <span class="k">as</span> <span class="nn">nn</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">class</span> <span class="nc">Transformer</span><span class="p">(</span><span class="n">nn</span><span class="o">.</span><span class="n">Module</span><span class="p">):</span> </span></span><span class="line"><span class="cl"> <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">d_model</span><span class="o">=</span><span class="mi">512</span><span class="p">,</span> <span class="n">nhead</span><span class="o">=</span><span class="mi">8</span><span class="p">):</span> </span></span><span class="line"><span class="cl"> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="bp">self</span><span class="o">.</span><span class="n">attention</span> <span class="o">=</span> <span class="n">nn</span><span class="o">.</span><span class="n">MultiheadAttention</span><span class="p">(</span><span class="n">d_model</span><span class="p">,</span> <span class="n">nhead</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">def</span> <span class="nf">forward</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">x</span><span class="p">):</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="bp">self</span><span class="o">.</span><span class="n">attention</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="n">x</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span> </span></span></code></pre></div><h3 id="mathematical-equations">Mathematical Equations</h3> <p>Display equations with LaTeX:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="nv">\nabla</span><span class="nb"> </span><span class="nv">\times</span><span class="nb"> </span><span class="nv">\vec</span><span class="nb">{E} </span><span class="o">=</span><span class="nb"> </span><span class="o">-</span><span class="nv">\frac</span><span class="nb">{</span><span class="nv">\partial</span><span class="nb"> </span><span class="nv">\vec</span><span class="nb">{B}}{</span><span class="nv">\partial</span><span class="nb"> t} </span></span></span><span class="line"><span class="cl"><span class="s">$$</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="nv">\int</span><span class="nb">_{</span><span class="o">-</span><span class="nv">\infty</span><span class="nb">}^{</span><span class="nv">\infty</span><span class="nb">} e^{</span><span class="o">-</span><span class="nb">x^</span><span class="m">2</span><span class="nb">} dx </span><span class="o">=</span><span class="nb"> </span><span class="nv">\sqrt</span><span class="nb">{</span><span class="nv">\pi</span><span class="nb">} </span></span></span><span class="line"><span class="cl"><span class="s">$$</span> </span></span></code></pre></div><h3 id="dual-column-layouts">Dual Column Layouts</h3> <p>Perfect for before/after comparisons, code + explanation, or image + text:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><div style="display: flex; gap: 2rem;"> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Left content</div> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Right content</div> </span></span><span class="line"><span class="cl"></div> </span></span></code></pre></div><p>See slides 4-6 in the embedded presentation above for live examples!</p> <hr> <h2 id="-for-educators-teach-the-future">🎓 For Educators: Teach the Future</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Empower Your Students</strong></div> <div class="callout-body"><p>Teaching with Hugo Blox means teaching modern, transferable skills:</p> <ul> <li>Markdown (used everywhere: GitHub, Notion, Obsidian)</li> <li>Version control (essential for careers)</li> <li>Web technologies (HTML, CSS)</li> <li>Reproducible science practices</li> </ul></div> </div> </div> <h3 id="course-integration">Course Integration</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">courses/ </span></span><span class="line"><span class="cl">├── ml-101/ </span></span><span class="line"><span class="cl">│ ├── lecture-1/ </span></span><span class="line"><span class="cl">│ │ ├── index.md (slides) </span></span><span class="line"><span class="cl">│ │ └── notes.md </span></span><span class="line"><span class="cl">│ ├── lecture-2/ </span></span><span class="line"><span class="cl">│ │ └── index.md </span></span><span class="line"><span class="cl">│ └── _index.md </span></span></code></pre></div><p>Each lecture gets its own slide deck, all version controlled, all editable by students as PRs.</p> <hr> <h2 id="-join-the-community">🌍 Join the Community</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Built by Academics, for Academics</strong></div> <div class="callout-body"><p>Hugo Blox is used by researchers at:</p> <ul> <li>🎓 Stanford, MIT, Harvard, Oxford, Cambridge</li> <li>🏢 Google Research, Meta AI, OpenAI</li> <li>🔬 CERN, NASA, NIH</li> <li>🌐 Thousands of universities worldwide</li> </ul></div> </div> </div> <div class="text-center"> <a id="button-308ee88d3551ad6320a918a3255bbadf" href="https://github.com/HugoBlox/hugo-blox-builder" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-full" role="button" aria-label="Star on GitHub" > <span class="flex-shrink-0"> <svg class="w-4 h-4" fill="currentColor" viewBox="3 3 18 18"><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg> </span> <span>Star on GitHub</span> </a> </div> <h3 id="get-help--connect">Get Help & Connect</h3> <ul> <li>📚 </li> <li>💬 </li> <li>🐛 </li> <li>🐦 </li> </ul> <hr> <h2 id="-ready-to-create">🚀 Ready to Create?</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Start Building Beautiful Presentations Today</strong></div> <div class="callout-body"><p>No installation required. No account needed. Just Markdown and your creativity.</p></div> </div> </div> <div class="text-center"> <a id="button-bc0066d08faf40cb87d4d282bd3c10cb" href="https://docs.hugoblox.com/start/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-8 py-4 text-xl rounded-full" role="button" aria-label="Get Started Now" > <span class="flex-shrink-0"> <span class="flex items-center justify-center leading-none text-lg">rocket</span> </span> <span>Get Started Now</span> </a> </div> <div class="text-center"> <a id="button-a6ddd37a8101e1f783cf49b7a3be18c7" href="https://docs.hugoblox.com/guides/studio/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-6 py-3 text-lg rounded-xl" role="button" aria-label="Try HugoBlox Studio" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.53 16.122a3 3 0 0 0-5.78 1.128a2.25 2.25 0 0 1-2.4 2.245a4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.764m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg> </span> <span>Try HugoBlox Studio</span> </a> </div> <hr> <h2 id="-additional-resources">📖 Additional Resources</h2> <h3 id="templates--examples">Templates & Examples</h3> <ul> <li> </li> </ul>  <h3 id="tips--tricks">Tips & Tricks</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Pro Tips for Better Presentations</strong></div> <div class="callout-body"><ol> <li>Keep slides simple — one idea per slide</li> <li>Use dual columns for comparisons</li> <li>Add speaker notes with <code>Note:</code> prefix</li> <li>Test presenter view before your talk</li> <li>Use fragments to control pacing</li> <li>Version control your slides with Git</li> <li>Share source files for reproducibility</li> </ol></div> </div> </div> <hr> <p><strong>Have questions?</strong> Check out the or !</p> <p><strong>Want to contribute?</strong> Hugo Blox is open source! .</p> </article> <article> <h1>CORS and S3: The Internet's 'Stranger Danger' Rule</h1> <p>Sat, 10 Jan 2026 00:00:00 +0000</p> <p>Hello fellow cloud explorers! 🚀</p> <p>Welcome back to <strong>AWS for Newbies</strong>! Today, we are tackling a topic that sounds super boring but is actually a secret superhero protecting your internet life: <strong>CORS</strong>.</p> <p>Have you ever tried to load an image or a font on your website, and it just refuses to show up, and your browser console yells something red and scary like this?</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><em>“Access to fetch at ‘…’ has been blocked by CORS policy”</em> 😱</p> </blockquote> <p>Let’s decode this mystery in a way even a 7-year-old can understand.</p> <h2 id="the-golden-rule-stranger-danger-sop">The Golden Rule: “Stranger Danger” (SOP)</h2> <p>Before we understand CORS, we need to understand the rule it breaks.</p> <p>Imagine the internet is a giant neighborhood. Every website lives in its own <strong>House</strong>.</p> <ul> <li>Your house address is your <strong>Origin</strong>.</li> <li>An origin looks like this: <code>https://</code> + <code>my-awesome-site.com</code></li> </ul> <p>The web browser (like Chrome or Firefox) is your overprotective bodyguard. It has a strict rule called the <strong>Same-Origin Policy (SOP)</strong>.</p> <p><strong>Here is how SOP works:</strong> Your browser says: “If you are in House A (<code>my-awesome-site.com</code>), you can play with toys inside House A. But you are <strong>NOT allowed</strong> to just reach into House B (<code>google.com</code>) and grab their toys without asking.”</p> <h3 id="why-do-we-need-this-rule-">Why do we need this rule? 🤔</h3> <p>Imagine you are logged into your online bank bank website. Then, you open a new tab and visit a malicious website, <code>super-evil-hackers.net</code>.</p> <p>Without the SOP rule, the evil website could secretly tell your browser: <em>“Hey, while you are logged into the bank in that other tab, send me $500!”</em> The browser would do it because it trusts <em>you</em>.</p> <p>SOP stops this. It stops “strangers” (different origins) from touching your private stuff in other tabs.</p> <p>Here is a diagram of the browser blocking a “stranger”:</p> <div class="mermaid">flowchart LR subgraph Browser WebsiteA[🏠 Your Website<br/>(Origin A)] EvilSite[😈 Evil Website<br/>(Origin B)] end Bank[🏦 Your Bank<br/>(Origin C)] WebsiteA -- "Can access" --> WebsiteA EvilSite -- "❌ SOP BLOCKED! ❌<br/>Cannot touch Bank!" -.- > Bank style EvilSite fill:#ffe6e6,stroke:#ff0000 style Bank fill:#e6ffe6,stroke:#00aa00 </div> <h3 id="enter-cors-the-permission-slip">Enter CORS: The “Permission Slip”</h3> <p>SOP is great for security, but sometimes it’s annoying.</p> <p>What if House A and House B are best friends? What if my-awesome-site.com needs to fetch a cool image stored on my-image-bucket.com?</p> <p>They are different origins, so the browser bodyguard says “NOPE!” 🛑</p> <p>This is where CORS comes in. It stands for Cross-Origin Resource Sharing.</p> <p>Here is how CORS works: CORS is like a Permission Slip signed by the parents.</p> <p>Your website (House A) tries to get an image from another server (House B).</p> <p>Your browser sees this and gets suspicious. Before handing over the image, the browser politely asks House B: “Excuse me, House A wants this image. Do they have permission?”</p> <p>House B checks its rules. If it likes House A, it sends back a special “header” (the permission slip) that says: Access-Control-Allow-Origin: * (Everyone is okay!) or Access-Control-Allow-Origin: (Only friends are okay!).</p> <p>The browser sees the slip and lets the image through. ✅</p> <div class="mermaid">sequenceDiagram participant Browser 🛡️ participant MySite as 🏠 My Website (Origin A) participant OtherServer as 🏢 Other Server (Origin B) Note over Browser, OtherServer: The CORS Handshake 🤝 MySite->>Browser: I need data from Origin B! Browser->>OtherServer: 🗣️ "Hey, Origin A wants your data. Is that okay?" alt Permission Granted OtherServer-->>Browser: ✅ "Yes! Here is my Permission Slip header." Browser-->>MySite: Okay, here is the data. else Permission Denied OtherServer--xBrowser: ❌ "NO. I don't know them." Browser--xMySite: 🔥 CORS ERROR! Blocked. end </div> <h2 id="the-sneaky-trick-browser-extensions-">The Sneaky Trick: Browser Extensions 🕵️‍♀️</h2> <p>You asked: How can a browser extension bypass CORS?</p> <p>Great question!</p> <p>Remember, SOP and CORS are rules enforced by the browser for regular web pages.</p> <p>A browser extension (like an AdBlocker or a password manager) doesn’t live on a web page. It lives inside the browser itself. It’s like giving someone the master keys to the house.</p> <p>Extensions have special privileges. They can tell the browser, “Shhh, ignore those rules for a second, I’m an administrator.” This allows them to make requests to any server they want, ignoring CORS completely.</p> <h2 id="real-world-use-case-aws-s3-cors-">Real-World Use Case: AWS S3 CORS ☁️</h2> <p>This is the most common place newbies face this mistake!</p> <p>Let’s say you built a beautiful website, . You decide to store all your cat photos in an AWS S3 Bucket because it’s cheap and fast.</p> <p>Your S3 bucket gets its own address, like .</p> <p>Uh oh! Do you see the problem?</p> <p>Your Website Origin: cool-cat-pics.com</p> <p>Your Bucket Origin: …s3.amazonaws.com</p> <p>They are different! When your site tries to load the cat photos, the browser blocks them. Broken images everywhere. 😿</p> <h2 id="the-fix">The Fix</h2> <p>You need to go into your AWS S3 console, find your bucket, go to the “Permissions” tab, and scroll down to CORS.</p> <p>You need to add a “Permission Slip” (a JSON configuration) telling the bucket it’s okay to talk to your website.</p> <p>It looks something like this (simplified):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nt">"AllowedOrigins"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">"[https://cool-cat-pics.com](https://cool-cat-pics.com)"</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"AllowedMethods"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">"GET"</span> </span></span><span class="line"><span class="cl"> <span class="p">],</span> </span></span><span class="line"><span class="cl"> <span class="nt">"MaxAgeSeconds"</span><span class="p">:</span> <span class="mi">3000</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">"AllowedHeaders"</span><span class="p">:</span> <span class="p">[</span> </span></span><span class="line"><span class="cl"> <span class="s2">"*"</span> </span></span><span class="line"><span class="cl"> <span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">]</span> </span></span></code></pre></div><p>This config tells S3: “If cool-cat-pics.com asks to GET a photo, say YES!”</p> <h2 id="summary">Summary</h2> <p>SOP (Stranger Danger): The browser rule that stops different websites from talking to each other for security.</p> <p>CORS (Permission Slip): The way servers tell the browser it’s okay to break the SOP rule for specific friends.</p> <p>S3 Needs CORS: Because your bucket and your website are usually two different “houses” on the internet.</p> <p>Keep practicing, and don’t fear the red error messages! 🦸‍♂️🦸‍♀️</p> </article> <article> <h1>The Route 53 Name Server Mistake: Who Points to Whom?</h1> <p>Sat, 03 Jan 2026 00:00:00 +0000</p> <p>Hi friends! 👋</p> <p>Welcome back to our <strong>AWS for Newbies</strong> series! Today, we are going to talk about a “silent killer” of websites: <strong>The Domain Name Server (DNS) Setup Mistake</strong>.</p> <p>It sounds technical, but I promise to explain it so simply that even your 7-year-old cousin (or your cat 🐱) could understand it.</p> <h2 id="the-scenario">The Scenario</h2> <p>Imagine you just bought a shiny new domain name, like <code>my-awesome-shop.com</code>, from a registrar like <strong>GoDaddy</strong> or <strong>Namecheap</strong>. This is where you <em>own</em> the name.</p> <p>Now, you want to manage your website using <strong>AWS Route 53</strong> because you are building a cool cloud app. You create a “Hosted Zone” in AWS.</p> <p>Now you have two things:</p> <ol> <li><strong>The Registrar</strong> (where you bought the name).</li> <li><strong>AWS Route 53</strong> (where you want to manage the traffic).</li> </ol> <p>You need to connect them. But <strong>who points to whom?</strong></p> <h2 id="the-big-mistake-">The Big Mistake ❌</h2> <p>Many beginners look at their Route 53 settings, see a list of strange server names (like <code>ns-123.awsdns-01.com</code>), and think:</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><em>“Oh, these look different from what is in my GoDaddy account! I should change these AWS records to match GoDaddy!”</em></p> </blockquote> <p><strong>STOP! Don’t do that!</strong> 🛑</p> <p>If you change the records inside AWS to match your Registrar, your website will break. It’s like buying a new house but putting your <em>old</em> address on the new mailbox. The mailman (the internet) still goes to the old house.</p> <h2 id="the-phone-book-analogy-">The “Phone Book” Analogy 📖</h2> <p>Let’s imagine the Internet is a giant city.</p> <ul> <li><strong>The Registrar (GoDaddy/Namecheap):</strong> This is the <strong>Town Hall</strong>. They keep the master list of who lives where. When someone asks, “Where is <code>my-awesome-shop.com</code>?”, the Town Hall checks their list to see which <strong>Phone Book</strong> to use.</li> <li><strong>Route 53:</strong> This is your personal <strong>Phone Book</strong>. It contains the specific directions (IP addresses) to your website, your email, and your database.</li> </ul> <h3 id="why-the-mistake-fails">Why the Mistake Fails</h3> <p>If you change the names <em>inside</em> Route 53 (your Phone Book) to match the Registrar, you aren’t telling the Town Hall anything new. The Town Hall still thinks, “Oh, look at the default GoDaddy Phone Book.”</p> <p>You effectively wrote “GoDaddy” on the cover of your AWS book, but the Town Hall never looks at your AWS book in the first place!</p> <h3 id="the-correct-way-">The Correct Way ✅</h3> <p>You must go to the <strong>Town Hall (Registrar)</strong> and tell them:</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><em>“Hey! Stop looking at your old default book. Please look at <strong>THIS</strong> specific AWS Phone Book instead.”</em></p> </blockquote> <p>You need to copy the AWS server names and paste them into your Registrar’s settings.</p> <h2 id="visualizing-the-fix">Visualizing the Fix</h2> <p>Here is a simple diagram to show the flow of authority.</p> <div class="mermaid">flowchart TD User((User)) --> Registrar[Registrar System<br/>Town Hall] subgraph WRONG ["The Mistake (WRONG)"] Registrar -.-> OldDNS[Old/Default DNS] OldDNS --x Route53_Bad[AWS Route 53<br/>You changed NS records here] Route53_Bad -- Broken Link --> Website end subgraph RIGHT ["The Correct Way (RIGHT)"] Registrar -- Update pointers here! --> Route53_Good[AWS Route 53<br/>Keep original AWS NS records] Route53_Good --> Website[Your Website] end style WRONG fill:#ffe6e6,stroke:#ff0000,stroke-width:2px style RIGHT fill:#e6ffe6,stroke:#00aa00,stroke-width:2px </div> <h2 id="step-by-step-guide">Step-by-Step Guide</h2> <p>Here is how to solve this in 3 easy steps:</p> <ol> <li>Find Your AWS “Phone Numbers” Go to your Route 53 Hosted Zone. Look for the record type NS (Name Server). You will see 4 lines that look like this:</li> </ol> <ul> <li>ns-111.awsdns-22.com</li> <li>ns-333.awsdns-44.net</li> <li>ns-555.awsdns-66.org</li> <li>ns-777.awsdns-88.co.uk</li> </ul> <p>Copy these! 📝</p> <ol start="2"> <li> <p>Go to Your Registrar Log in to where you bought your domain (GoDaddy, Namecheap, etc.). Look for a setting called “Custom DNS” or “Manage Name Servers”.</p> </li> <li> <p>Swap Them Out Delete the old default servers and paste in the 4 AWS servers you copied earlier. Pro Tip: Do not add the little dot (.) at the very end if your registrar doesn’t like it.</p> </li> </ol> <h2 id="conclusion">Conclusion</h2> <p>And that’s it! By changing the settings on the Registrar’s side, you are officially telling the internet to trust AWS with your traffic. It might take a few minutes (or up to 48 hours) for the “Town Hall” to update its records globally. Be patient, grab a juice box 🧃, and wait for your site to go live!</p> <p>Happy Clouding! ☁️</p> </article> <article> <h1>MANDO-LLM: Heterogeneous Graph Transformers with Large Language Models for Smart Contract Vulnerability Detection</h1> <p>Mon, 01 Dec 2025 00:00:00 +0000</p> </article> <article> <h1>Example Talk: Recent Work</h1> <p>Mon, 01 Jan 2024 00:00:00 +0000</p> <h1 id="example-talk">Example Talk</h1> <h3 id="dr-alex-johnson--meta-ai">Dr. Alex Johnson · Meta AI</h3> <hr> <h2 id="research-overview">Research Overview</h2> <ul> <li>Multimodal LLMs</li> <li>Efficient training</li> <li>Responsible AI</li> </ul> <hr> <h2 id="code--math">Code & Math</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">score</span><span class="p">(</span><span class="n">x</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-></span> <span class="nb">int</span><span class="p">:</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span> </span></span></code></pre></div>$$ E = mc^2 $$<hr> <h2 id="dual-column-layout">Dual Column Layout</h2> <div class="r-hstack"> <div style="flex: 1; padding-right: 1rem;"> <h3 id="left-column">Left Column</h3> <ul> <li>Point A</li> <li>Point B</li> <li>Point C</li> </ul> </div> <div style="flex: 1; padding-left: 1rem;"> <h3 id="right-column">Right Column</h3> <ul> <li>Detail 1</li> <li>Detail 2</li> <li>Detail 3</li> </ul> </div> </div> <hr>  <div style="display: flex; gap: 2rem;"> <div style="flex: 2;"> <h3 id="main-content-23-width">Main Content (2/3 width)</h3> <p>This column takes up twice the space of the right column.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">example</span><span class="p">():</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s2">"code works too"</span> </span></span></code></pre></div></div> <div style="flex: 1;"> <h3 id="sidebar-13-width">Sidebar (1/3 width)</h3> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>Note</strong><br> Key points in smaller column</p> </blockquote> </div> </div> <hr> <h2 id="image--text-layout">Image + Text Layout</h2> <div class="r-hstack" style="align-items: center;"> <div style="flex: 1;"> <p> <figure > <div class="flex justify-center "> <div class="w-full" ></div> </div></figure> </p> </div> <div style="flex: 1; padding-left: 2rem;"> <h3 id="results">Results</h3> <ul> <li>95% accuracy</li> <li>10x faster inference</li> <li>Lower memory usage</li> </ul> <span class="fragment " > <strong>Breakthrough!</strong> </span> </div> </div> <hr> <h2 id="speaker-notes">Speaker Notes</h2> <p>Press <strong>S</strong> to open presenter view with notes!</p> <p>This slide has hidden speaker notes below.</p> <p>Note:</p> <ul> <li>This is a <strong>speaker note</strong> (only visible in presenter view)</li> <li>Press <code>S</code> key to open presenter console</li> <li>Perfect for remembering key talking points</li> <li>Can include reminders, timing, references</li> <li>Supports <strong>Markdown</strong> formatting too!</li> </ul> <hr> <h2 id="progressive-reveals">Progressive Reveals</h2> <p>Content appears step-by-step:</p> <span class="fragment " > First point appears </span> <span class="fragment " > Then the second point </span> <span class="fragment " > Finally the conclusion </span> <span class="fragment highlight-red" > This one can be <strong>highlighted</strong>! </span> <p>Note: Use fragments to control pacing and maintain audience attention. Each fragment appears on click.</p> <hr> <h2 id="diagrams-with-mermaid">Diagrams with Mermaid</h2> <div class="mermaid">graph LR A[Research Question] --> B{Hypothesis} B -->|Valid| C[Experiment] B -->|Invalid| D[Revise] C --> E[Analyze Data] E --> F{Significant?} F -->|Yes| G[Publish] F -->|No| D </div> <p>Perfect for: Workflows, architectures, processes</p> <p>Note: Mermaid diagrams are created from simple text. They’re version-controllable and edit anywhere!</p> <hr> <h2 id="research-results">Research Results</h2> <table> <thead> <tr> <th>Model</th> <th>Accuracy</th> <th>Speed</th> <th>Memory</th> </tr> </thead> <tbody> <tr> <td>Baseline</td> <td>87.3%</td> <td>1.0x</td> <td>2GB</td> </tr> <tr> <td>Ours (v1)</td> <td>92.1%</td> <td>1.5x</td> <td>1.8GB</td> </tr> <tr> <td><strong>Ours (v2)</strong></td> <td><strong>95.8%</strong></td> <td><strong>2.3x</strong></td> <td><strong>1.2GB</strong></td> </tr> </tbody> </table> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>Key Finding:</strong> 8.5% improvement over baseline with 40% memory reduction</p> </blockquote> <p>Note: Tables are perfect for comparative results. Markdown tables are simple and version-control friendly.</p> <hr> <section data-noprocess data-shortcode-slide data-background-color="#1e3a8a" > <h2 id="custom-backgrounds">Custom Backgrounds</h2> <p>This slide has a <strong>blue background</strong>!</p> <p>You can customize:</p> <ul> <li>Background colors</li> <li>Background images</li> <li>Gradients</li> <li>Videos (yes, really!)</li> </ul> <p>Use <code>{{< slide background-color="#hex" >}}</code></p> <hr> <h2 id="vertical-navigation">Vertical Navigation</h2> <p><strong>There’s more content below! ⬇️</strong></p> <p>Press the <strong>Down Arrow</strong> to see substeps.</p> <p>Note: This demonstrates Reveal.js’s vertical slide feature. Great for optional details or deep dives.</p> <hr> <section data-noprocess data-shortcode-slide id="substep-1" > <h3 id="substep-1-details">Substep 1: Details</h3> <p>This is additional content in a vertical stack.</p> <p>Navigate down for more, or right to skip to next topic →</p> <hr> <section data-noprocess data-shortcode-slide id="substep-2" > <h3 id="substep-2-more-details">Substep 2: More Details</h3> <p>Even more detailed information.</p> <p>Press <strong>Up Arrow</strong> to go back, or <strong>Right Arrow</strong> to continue.</p> <hr> <h2 id="citations--quotes">Citations & Quotes</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>“The best way to predict the future is to invent it.”</p> <p>— Alan Kay</p> </blockquote> <p>Or reference research:</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>Recent work by Smith et al. (2024) demonstrates that Markdown-based slides improve reproducibility by 78% compared to proprietary formats<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p> </blockquote> <hr> <h2 id="media-youtube-videos">Media: YouTube Videos</h2> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> </div> <p>Note: Embed YouTube videos with just the video ID. Perfect for demos, tutorials, or interviews.</p> <hr> <h2 id="media-all-options">Media: All Options</h2> <p>Embed various media types with simple shortcodes:</p> <ul> <li><strong>YouTube</strong>: <code>{{< youtube VIDEO_ID >}}</code></li> <li><strong>Bilibili</strong>: <code>{{< bilibili id="BV1..." >}}</code></li> <li><strong>Local videos</strong>: <code>{{< video src="file.mp4" controls="yes" >}}</code></li> <li><strong>Audio</strong>: <code>{{< audio src="file.mp3" >}}</code></li> </ul> <p>Perfect for demos, interviews, tutorials, or podcasts!</p> <p>Note: All media types work seamlessly in slides. Just use the appropriate shortcode.</p> <hr> <h2 id="interactive-elements">Interactive Elements</h2> <p>Try these keyboard shortcuts:</p> <ul> <li><code>→</code> <code>←</code> : Navigate slides</li> <li><code>↓</code> <code>↑</code> : Vertical navigation</li> <li><code>S</code> : Speaker notes</li> <li><code>F</code> : Fullscreen</li> <li><code>O</code> : Overview mode</li> <li><code>/</code> : Search</li> <li><code>ESC</code> : Exit modes</li> </ul> <hr>  <h2 id="hidden-slide-demo-inline-comment">Hidden Slide Demo (Inline Comment)</h2> <p>This slide is hidden using the <code></code> comment method.</p> <p>Perfect for:</p> <ul> <li>Speaker-only content</li> <li>Backup slides</li> <li>Work-in-progress content</li> </ul> <p>Note: This slide won’t appear in the presentation but remains in source for reference.</p> <hr> <h2 id="thanks">Thanks</h2> <h3 id="questions">Questions?</h3> <ul> <li>🌐 Website: </li> <li>🐦 X/Twitter: </li> <li>💬 Discord: </li> <li>⭐ GitHub: </li> </ul> <p><strong>All slides created with Markdown</strong> • No vendor lock-in • Edit anywhere</p> <p>Note: Thank you for your attention! Feel free to reach out with questions or contributions.</p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p>Smith, J. et al. (2024). <em>Open Science Presentations</em>. Nature Methods. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> </article> <article> <h1>Pandas</h1> <p>Thu, 26 Oct 2023 00:00:00 +0000</p> <p>Flexible and powerful data analysis / manipulation library for Python, providing labeled data structures.</p> </article> <article> <h1>PyTorch</h1> <p>Thu, 26 Oct 2023 00:00:00 +0000</p> <p>PyTorch is a Python package that provides tensor computation (like NumPy) with strong GPU acceleration.</p> </article> <article> <h1>scikit-learn</h1> <p>Thu, 26 Oct 2023 00:00:00 +0000</p> <p>scikit-learn is a Python module for machine learning built on top of SciPy and is distributed under the 3-Clause BSD license.</p> </article> <article> <h1>Embed Media</h1> <p>Tue, 24 Oct 2023 00:00:00 +0000</p> <p> is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.</p> <p><strong>Embed videos, podcasts, code, LaTeX math, and even test students!</strong></p> <p>On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.</p> <h2 id="video">Video</h2> <p>Teach your course by sharing videos with your students. Choose from one of the following approaches:</p> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> </div> <p><strong>Youtube</strong>:</p> <pre><code>{{< youtube w7Ft2ymGmfc >}} </code></pre> <p><strong>Bilibili</strong>:</p> <pre><code>{{< bilibili id="BV1WV4y1r7DF" >}} </code></pre> <p><strong>Video file</strong></p> <p>Videos may be added to a page by either placing them in your <code>assets/media/</code> media library or in your , and then embedding them with the <em>video</em> shortcode:</p> <pre><code>{{< video src="my_video.mp4" controls="yes" >}} </code></pre> <h2 id="podcast">Podcast</h2> <p>You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the <em>audio</em> shortcode:</p> <pre><code>{{< audio src="ambient-piano.mp3" >}} </code></pre> <p>Try it out:</p> </audio> <h2 id="test-students">Test students</h2> <p>Provide a simple yet fun self-assessment by revealing the solutions to challenges with the <code>spoiler</code> shortcode:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< spoiler text="👉 Click to view the solution" >}} </span></span><span class="line"><span class="cl">You found me! </span></span><span class="line"><span class="cl">{{< /spoiler >}} </span></span></code></pre></div><p>renders as</p> <details class="spoiler " id="spoiler-2"> <summary class="cursor-pointer">👉 Click to view the solution</summary> <div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"> You found me 🎉 </div> </details> <h2 id="math">Math</h2> <p>Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the <code>math</code> option in your <code>config/_default/params.yaml</code> file.</p> <p>To render <em>inline</em> or <em>block</em> math, wrap your LaTeX math with <code>{{< math >}}$...${{< /math >}}</code> or <code>{{< math >}}$$...$${{< /math >}}</code>, respectively.</p> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>We wrap the LaTeX math in the Hugo Blox <em>math</em> shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!</p></div> </div> </div> <p>Example <strong>math block</strong>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="nb">{{</span>< math ><span class="nb">}}</span> </span></span><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="nv">\gamma</span><span class="nb">_{n} </span><span class="o">=</span><span class="nb"> </span><span class="nv">\frac</span><span class="nb">{ </span><span class="nv">\left</span><span class="nb"> | </span><span class="nv">\left</span><span class="nb"> </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n} </span><span class="o">-</span><span class="nb"> </span><span class="nv">\mathbf</span><span class="nb"> x_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">} </span><span class="nv">\right</span><span class="nb"> </span><span class="o">)</span><span class="nb">^T </span><span class="nv">\left</span><span class="nb"> </span><span class="o">[</span><span class="nv">\nabla</span><span class="nb"> F </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n}</span><span class="o">)</span><span class="nb"> </span><span class="o">-</span><span class="nb"> </span><span class="nv">\nabla</span><span class="nb"> F </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> </span><span class="o">]</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> |}{</span><span class="nv">\left</span><span class="nb"> </span><span class="nv">\|\nabla</span><span class="nb"> F</span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb">{x}_{n}</span><span class="o">)</span><span class="nb"> </span><span class="o">-</span><span class="nb"> </span><span class="nv">\nabla</span><span class="nb"> F</span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb">{x}_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> </span><span class="nv">\|</span><span class="nb">^</span><span class="m">2</span><span class="nb">} </span></span></span><span class="line"><span class="cl"><span class="s">$$</span> </span></span><span class="line"><span class="cl"><span class="nb">{{</span>< /math ><span class="nb">}}</span> </span></span></code></pre></div><p>renders as</p> $$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$ <p>Example <strong>inline math</strong> <code>{{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}</code> renders as $\nabla F(\mathbf{x}_{n})$ .</p> <p>Example <strong>multi-line math</strong> using the math linebreak (<code>\\</code>):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="nb">{{</span>< math ><span class="nb">}}</span> </span></span><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb">f</span><span class="o">(</span><span class="nb">k;p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="o">=</span><span class="nb"> </span><span class="nv">\begin</span><span class="nb">{cases}p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">} & </span><span class="nv">\text</span><span class="nb">{if }k</span><span class="o">=</span><span class="m">1</span><span class="nb">, </span><span class="nv">\\</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="m">1</span><span class="o">-</span><span class="nb">p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">} & </span><span class="nv">\text</span><span class="nb">{if }k</span><span class="o">=</span><span class="m">0</span><span class="nb">.</span><span class="nv">\end</span><span class="nb">{cases}</span><span class="s">$$</span> </span></span><span class="line"><span class="cl"><span class="nb">{{</span>< /math ><span class="nb">}}</span> </span></span></code></pre></div><p>renders as</p> $$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$ <h2 id="code">Code</h2> <p>Hugo Blox Builder utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the <code>config/_default/params.yaml</code> file.</p> <pre><code>```python import pandas as pd data = pd.read_csv("data.csv") data.head() ``` </code></pre> <p>renders as</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span> </span></span><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">"data.csv"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="n">data</span><span class="o">.</span><span class="n">head</span><span class="p">()</span> </span></span></code></pre></div><h2 id="inline-images">Inline Images</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span><span class="w"> </span><span class="nx">icon</span><span class="w"> </span><span class="nx">name</span><span class="p">=</span><span class="s">"python"</span><span class="w"> </span><span class="p">>}}</span><span class="w"> </span><span class="nx">Python</span><span class="w"> </span></span></span></code></pre></div><p>renders as</p> <p> <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">python</span> </span> Python</p> <h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌</h2> </article> <article> <h1>Experience</h1> <p>Tue, 24 Oct 2023 00:00:00 +0000</p> </article> <article> <h1>MANDO-HGT: Heterogeneous Graph Transformers for Smart Contract Vulnerability Detection</h1> <p>Mon, 01 May 2023 00:00:00 +0000</p> </article> <article> <h1>MANDO-GURU: vulnerability detection for smart contract source code by heterogeneous graph embeddings</h1> <p>Tue, 01 Nov 2022 00:00:00 +0000</p> </article> <article> <h1>MANDO: Multi-Level Heterogeneous Graph Embeddings for Fine-Grained Detection of Smart Contract Vulnerabilities</h1> <p>Sat, 01 Oct 2022 00:00:00 +0000</p> </article> <article> <h1>MANDO-LLM: Heterogeneous Graph Transformers with Large Language Models for Smart Contract Vulnerability Detection</h1> <p>Fri, 01 Jul 2022 00:00:00 +0000</p> </article> <article> <h1>Buttons</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>A modern, customizable button shortcode with gradient styling, icons, and smart link handling.</p> <h2 id="basic-usage">Basic Usage</h2> <div class="text-left"> <a id="button-351ac412531c23e422b81c6422c17da5" href="https://minhnn-tiny.github.io/contact" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Contact Us" > <span>Contact Us</span> </a> </div> <div class="text-left"> <a id="button-99f90e9d2b754ffe3fc7b4f9d280ab9e" href="https://example.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Visit External Site" > <span>Visit External Site</span> </a> </div> <p>The above buttons are created with:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"/contact"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Contact Us<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"https://example.com"</span><span class="w"> </span><span class="nx">new_tab</span><span class="o">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"secondary"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Visit External Site<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="style-variants">Style Variants</h2> <h3 id="primary-default">Primary (Default)</h3> <div class="text-left"> <a id="button-33f0c5949dceb4f2158940543a6d11f0" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Primary Button" > <span>Primary Button</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"primary"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Primary Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="secondary">Secondary</h3> <div class="text-left"> <a id="button-654c665d9c02125e00b3c2638e02ff31" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Secondary Button" > <span>Secondary Button</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"secondary"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Secondary Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="outline">Outline</h3> <div class="text-left"> <a id="button-569954ebe8d760dfbd5f8dd8d491e972" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Outline Button" > <span>Outline Button</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"outline"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Outline Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="ghost">Ghost</h3> <div class="text-left"> <a id="button-e8d694dcc82ccc6b692376347eb1210c" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Ghost Button" > <span>Ghost Button</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"ghost"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Ghost Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="sizes">Sizes</h2> <h3 id="small">Small</h3> <div class="text-left"> <a id="button-9edd9a4164984b892472dc4cb0d94acb" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-3 py-1.5 text-sm rounded-lg" role="button" aria-label="Small Button" > <span>Small Button</span> </a> </div> <h3 id="medium-default">Medium (Default)</h3> <div class="text-left"> <a id="button-917c91b5df194ee244bcb8dd7d4916c5" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Medium Button" > <span>Medium Button</span> </a> </div> <h3 id="large">Large</h3> <div class="text-left"> <a id="button-c9ef1eeebbeac0de80c5666baeda508c" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-lg" role="button" aria-label="Large Button" > <span>Large Button</span> </a> </div> <h3 id="extra-large">Extra Large</h3> <div class="text-left"> <a id="button-c38da6a61bc9a2511c12a071b05d1527" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-8 py-4 text-xl rounded-lg" role="button" aria-label="Extra Large" > <span>Extra Large</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s">"sm"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Small Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s">"md"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Medium Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s">"lg"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Large Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s">"xl"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Extra Large<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="alignment">Alignment</h2> <h3 id="left-default">Left (Default)</h3> <div class="text-left"> <a id="button-46275a2130718485193b07442854e305" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Left Aligned" > <span>Left Aligned</span> </a> </div> <h3 id="center">Center</h3> <div class="text-center"> <a id="button-2e7c6d0545131be865f91f4dcb47ebd3" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Center Aligned" > <span>Center Aligned</span> </a> </div> <h3 id="right">Right</h3> <div class="text-right"> <a id="button-09d01d6786049ba2a63f2cafd484e60e" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Right Aligned" > <span>Right Aligned</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"left"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Left Aligned<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"center"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Center Aligned<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"right"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Right Aligned<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="with-icons">With Icons</h2> <h3 id="icon-before-text">Icon Before Text</h3> <div class="text-left"> <a id="button-2070b64a1b12b8165d04699a5e4f0a4d" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Download" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg> </span> <span>Download</span> </a> </div> <h3 id="icon-after-text">Icon After Text</h3> <div class="text-left"> <a id="button-213c46a162adc66071b38a55c26716e3" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Continue" > <span>Continue</span> <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg> </span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"arrow-down-tray"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Download<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"arrow-right"</span><span class="w"> </span><span class="nx">icon_position</span><span class="o">=</span><span class="s">"right"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Continue<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="rounded-corners">Rounded Corners</h2> <h3 id="small-radius">Small Radius</h3> <div class="text-left"> <a id="button-f306324e9ea3297cc7149761131e0e41" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded" role="button" aria-label="Small Radius" > <span>Small Radius</span> </a> </div> <h3 id="medium-radius-default">Medium Radius (Default)</h3> <div class="text-left"> <a id="button-d519a3255417739cb8197b9869248dec" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Medium Radius" > <span>Medium Radius</span> </a> </div> <h3 id="large-radius">Large Radius</h3> <div class="text-left"> <a id="button-920afdfab9e2ab0e88cb5046924cd223" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-xl" role="button" aria-label="Large Radius" > <span>Large Radius</span> </a> </div> <h3 id="pill-shape">Pill Shape</h3> <div class="text-left"> <a id="button-464be1a963c8f63cf75275ea2137551a" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-full" role="button" aria-label="Pill Button" > <span>Pill Button</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"sm"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Small Radius<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"md"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Medium Radius<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"lg"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Large Radius<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"full"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Pill Button<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="advanced-examples">Advanced Examples</h2> <h3 id="call-to-action-button">Call-to-Action Button</h3> <div class="text-center"> <a id="button-62059f8d62052633590d3f60ec092595" href="https://minhnn-tiny.github.io/signup" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-lg" role="button" aria-label="Get Started Today" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7a15.53 15.53 0 0 1-.311.06a15.09 15.09 0 0 1-2.448-2.448a14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306a4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"/></svg> </span> <span>Get Started Today</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"/signup"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"primary"</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s">"lg"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"center"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"rocket-launch"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Get Started Today<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="external-link-with-new-tab">External Link with New Tab</h3> <div class="text-left"> <a id="button-2cb1bb8bbb2590cc46a8ead690d2da77" href="https://github.com/hugo-blox/hugo-blox-builder" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="View on GitHub" > <span>View on GitHub</span> <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"https://github.com/hugo-blox/hugo-blox-builder"</span><span class="w"> </span><span class="nx">new_tab</span><span class="o">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"outline"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"arrow-top-right-on-square"</span><span class="w"> </span><span class="nx">icon_position</span><span class="o">=</span><span class="s">"right"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>View on GitHub<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="download-button">Download Button</h3> <div class="text-left"> <a id="button-72ec86801f391f16b84b269ade9d2995" href="https://minhnn-tiny.github.io/files/document.pdf" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-full" role="button" aria-label="Download PDF" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/></svg> </span> <span>Download PDF</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"/files/document.pdf"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"secondary"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"document-arrow-down"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"full"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Download PDF<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="parameters">Parameters</h2> <table> <thead> <tr> <th>Parameter</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td>string</td> <td><code>#</code></td> <td><strong>Required.</strong> Button destination URL (internal or external)</td> </tr> <tr> <td><code>text</code></td> <td>string</td> <td>Inner content</td> <td>Button text (overrides shortcode content)</td> </tr> <tr> <td><code>new_tab</code></td> <td>boolean</td> <td><code>false</code></td> <td>Whether to open link in new tab</td> </tr> <tr> <td><code>style</code></td> <td>string</td> <td><code>primary</code></td> <td>Button style: <code>primary</code>, <code>secondary</code>, <code>outline</code>, <code>ghost</code></td> </tr> <tr> <td><code>size</code></td> <td>string</td> <td><code>md</code></td> <td>Button size: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code></td> </tr> <tr> <td><code>align</code></td> <td>string</td> <td><code>left</code></td> <td>Button alignment: <code>left</code>, <code>center</code>, <code>right</code></td> </tr> <tr> <td><code>icon</code></td> <td>string</td> <td>-</td> <td>Icon name from </td> </tr> <tr> <td><code>icon_position</code></td> <td>string</td> <td><code>left</code></td> <td>Icon position: <code>left</code>, <code>right</code></td> </tr> <tr> <td><code>rounded</code></td> <td>string</td> <td><code>md</code></td> <td>Border radius: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>full</code></td> </tr> <tr> <td><code>disabled</code></td> <td>boolean</td> <td><code>false</code></td> <td>Whether button should be disabled</td> </tr> </tbody> </table> <h2 id="security-features">Security Features</h2> <p>The button shortcode automatically handles security for external links:</p> <ul> <li><strong>External links</strong> get <code>rel="noreferrer"</code> attribute</li> <li><strong>External links opening in new tab</strong> get <code>rel="noopener noreferrer"</code></li> <li><strong>Internal links opening in new tab</strong> get <code>rel="noopener"</code></li> </ul> <p>This ensures safe navigation while maintaining functionality.</p> <h2 id="accessibility">Accessibility</h2> <p>The button shortcode includes built-in accessibility features:</p> <ul> <li>Proper <code>role="button"</code> attribute</li> <li><code>aria-label</code> support</li> <li>Keyboard focus indicators</li> <li>High contrast focus rings</li> <li>Disabled state handling</li> </ul> </article> <article> <h1>Callouts</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.</p> <p>Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.</p> <h2 id="usage">Usage</h2> <h3 id="basic-callout-types">Basic Callout Types</h3> <p>Hugo Blox supports all 15+ callout types from :</p> <p><strong>Information & Notes:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!NOTE] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">This is a note callout with important information that users should know. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>This is a note callout with important information that users should know.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!INFO] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Alternative info callout - same styling as NOTE. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="info" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Info</div> <div class="callout-body"><p>Alternative info callout - same styling as NOTE.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!ABSTRACT] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Use for abstracts, summaries, or TL;DR sections. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-cyan-100 dark:bg-cyan-900 border-cyan-500" data-callout="abstract" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-cyan-600 dark:text-cyan-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75a2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125zM6.75 12h.008v.008H6.75zm0 3h.008v.008H6.75zm0 3h.008v.008H6.75z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Abstract</div> <div class="callout-body"><p>Use for abstracts, summaries, or TL;DR sections.</p></div> </div> </div> <p><strong>Actions & Tasks:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!TODO] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">This is something that needs to be done. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="todo" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Todo</div> <div class="callout-body"><p>This is something that needs to be done.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!TIP] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Here's a helpful tip to make your workflow more efficient! </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Tip</div> <div class="callout-body"><p>Here’s a helpful tip to make your workflow more efficient!</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!SUCCESS] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Great job! This operation completed successfully. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Success</div> <div class="callout-body"><p>Great job! This operation completed successfully.</p></div> </div> </div> <p><strong>Questions & Interactive:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!QUESTION] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">What do you think about this approach? Let us know! </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-yellow-100 dark:bg-yellow-900 border-yellow-500" data-callout="question" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-yellow-700 dark:text-yellow-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712a2.98 2.98 0 0 1-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Question</div> <div class="callout-body"><p>What do you think about this approach? Let us know!</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!EXAMPLE] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Here's a practical example of how to implement this feature. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="example" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21a48.25 48.25 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Example</div> <div class="callout-body"><p>Here’s a practical example of how to implement this feature.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!QUOTE] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">"The best way to predict the future is to invent it." - Alan Kay </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500" data-callout="quote" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193c-.34.027-.68.052-1.02.072v3.091l-3-3a49.5 49.5 0 0 1-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095a48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402c-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235c.577.075 1.157.14 1.74.194V21l4.155-4.155"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Quote</div> <div class="callout-body"><p>“The best way to predict the future is to invent it.” - Alan Kay</p></div> </div> </div> <p><strong>Warnings & Errors:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!WARNING] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Be careful! This action might have unexpected consequences. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500" data-callout="warning" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Warning</div> <div class="callout-body"><p>Be careful! This action might have unexpected consequences.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!CAUTION] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Danger! This operation is irreversible and could cause data loss. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500" data-callout="caution" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Caution</div> <div class="callout-body"><p>Danger! This operation is irreversible and could cause data loss.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!IMPORTANT] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">This is critical information that users must understand to proceed. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Important</div> <div class="callout-body"><p>This is critical information that users must understand to proceed.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!DANGER] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">This is extremely dangerous - proceed with extreme caution! </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500" data-callout="danger" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Danger</div> <div class="callout-body"><p>This is extremely dangerous - proceed with extreme caution!</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!FAILURE] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">This operation failed. Check your configuration and try again. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500" data-callout="failure" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Failure</div> <div class="callout-body"><p>This operation failed. Check your configuration and try again.</p></div> </div> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!BUG] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">Known issue: This feature doesn't work properly in Safari < 14. </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500" data-callout="bug" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 12.75c1.148 0 2.278.08 3.383.237c1.037.146 1.866.966 1.866 2.013c0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75m0 0c2.883 0 5.647.508 8.208 1.44a23.91 23.91 0 0 1-1.153 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44c.125 2.105.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236c.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236c-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747M8.683 5a3.75 3.75 0 0 1 6.635 0m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314a23.88 23.88 0 0 0 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Bug</div> <div class="callout-body"><p>Known issue: This feature doesn’t work properly in Safari < 14.</p></div> </div> </div> <h3 id="custom-titles">Custom Titles</h3> <p>You can customize the title of any callout:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!WARNING]+ Custom Warning Title </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">This warning has a custom title instead of just "Warning". </span></span></span></code></pre></div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500" data-callout="warning" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Custom Warning Title<br></div> <div class="callout-body"><p>This warning has a custom title instead of just “Warning”.</p></div> </div> </div> <h3 id="legacy-syntax-deprecated">Legacy Syntax (Deprecated)</h3> <p>The old shortcode syntax still works but shows a deprecation warning:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< callout note >}} </span></span><span class="line"><span class="cl">This still works but is deprecated. Use the Markdown syntax above! </span></span><span class="line"><span class="cl">{{< /callout >}} </span></span></code></pre></div><h3 id="css-customization">CSS Customization</h3> <p>Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:</p> <ul> <li>Base class: <code>.callout</code></li> <li>Type-specific data attribute: <code>data-callout="note"</code></li> <li>Component classes: <code>.callout-icon</code>, <code>.callout-title</code>, <code>.callout-content</code>, <code>.callout-body</code></li> </ul> <p><strong>Custom CSS Example</strong> (add to your <code>assets/css/custom.css</code>):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* Customize NOTE callouts */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">callout</span><span class="o">[</span><span class="nt">data-callout</span><span class="o">=</span><span class="s2">"note"</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">border-left-width</span><span class="p">:</span> <span class="mi">8</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">box-shadow</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">4</span><span class="kt">px</span> <span class="mi">6</span><span class="kt">px</span> <span class="mi">-1</span><span class="kt">px</span> <span class="nb">rgb</span><span class="p">(</span><span class="mi">0</span> <span class="mi">0</span> <span class="mi">0</span> <span class="o">/</span> <span class="mf">0.1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* Make SUCCESS callouts pulse */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">callout</span><span class="o">[</span><span class="nt">data-callout</span><span class="o">=</span><span class="s2">"success"</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">animation</span><span class="p">:</span> <span class="n">pulse</span> <span class="mi">2</span><span class="kt">s</span> <span class="kc">infinite</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* Custom icon styling */</span> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">callout-icon</span> <span class="nt">svg</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transition</span><span class="p">:</span> <span class="k">transform</span> <span class="mf">0.2</span><span class="kt">s</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">callout</span><span class="p">:</span><span class="nd">hover</span> <span class="p">.</span><span class="nc">callout-icon</span> <span class="nt">svg</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">transform</span><span class="p">:</span> <span class="nb">scale</span><span class="p">(</span><span class="mf">1.1</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c">/* Dark mode overrides */</span> </span></span><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">prefers-color-scheme</span><span class="o">:</span> <span class="nt">dark</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nc">callout</span><span class="o">[</span><span class="nt">data-callout</span><span class="o">=</span><span class="s2">"warning"</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">background-color</span><span class="p">:</span> <span class="nb">rgb</span><span class="p">(</span><span class="mi">92</span> <span class="mi">25</span> <span class="mi">2</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="k">border-color</span><span class="p">:</span> <span class="nb">rgb</span><span class="p">(</span><span class="mi">245</span> <span class="mi">158</span> <span class="mi">11</span><span class="p">);</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p>This approach matches , ensuring your styles work across platforms.</p> <h3 id="benefits-of-the-new-syntax">Benefits of the New Syntax</h3> <ul> <li><strong>Portable</strong>: Works with GitHub, Obsidian, and other Markdown editors</li> <li><strong>Standard</strong>: Uses widely-adopted Markdown callout syntax</li> <li><strong>Clean</strong>: No Hugo-specific shortcodes needed</li> <li><strong>Future-proof</strong>: Supported by the latest Hugo versions (0.132.0+)</li> <li><strong>Customizable</strong>: Semantic CSS classes and data attributes for easy styling</li> <li><strong>Complete</strong>: All 15+ Obsidian callout types supported</li> <li><strong>Multilingual</strong>: Callout titles are automatically translated based on your site’s language (and can be customized in the language packs)</li> </ul> </article> <article> <h1>Cards</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>A Hugo extension to create cards. Cards can be shown as links or as plain text.</p> <h2 id="usage">Usage</h2> <div class="hb-cards mt-4 grid gap-4 not-prose" style="--hb-cols: 1;"> <a class="hb-card group"href="../" > <span class="hb-card-title p-4"> <svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"/></svg>Learn Shortcodes</span></a> <a class="hb-card group"> <span class="hb-card-title p-4">A card without an icon or link</span></a> </div> <p>is rendered by:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">{{< cards >}} </span></span><span class="line"><span class="cl"> {{< card url="../callout" title="Callout" icon="academic-cap" >}} </span></span><span class="line"><span class="cl"> {{< card url="" title="A card without an icon" >}} </span></span><span class="line"><span class="cl">{{< /cards >}} </span></span></code></pre></div><h2 id="options">Options</h2> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>icon</code></td> <td>Name of the icon. Defaults to </td> </tr> <tr> <td><code>title</code></td> <td>Title heading for the card.</td> </tr> <tr> <td><code>subtitle</code></td> <td>Subtitle heading (supports Markdown).</td> </tr> <tr> <td><code>url</code></td> <td>URL</td> </tr> </tbody> </table> </article> <article> <h1>Internationalization (i18n)</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo’s feature.</p> <p>View the full docs at </p> </article> <article> <h1>Spoilers</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>A Hugo shortcode to toggle collapsible content.</p> <h2 id="example">Example</h2> <details class="spoiler " id="spoiler-0"> <summary class="cursor-pointer">Click to view the spoiler</summary> <div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"> <p>You found me!</p> <p>Markdown is <strong>supported</strong>.</p> </div> </details> <h2 id="usage">Usage</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">{{< spoiler text="Click to view the spoiler" >}} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">This is the content of the details. </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">Markdown is **supported**. </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">{{< /spoiler >}} </span></span></code></pre></div> </article> <article> <h1>Steps</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p>Display a series of steps, such as for a tutorial.</p> <h2 id="example">Example</h2> <div class="hb-steps"> <h3 id="step-1">Step 1</h3> <p>The first step here…</p> <h3 id="step-2">Step 2</h3> <p>The second step here…</p> <h3 id="step-3">Step 3</h3> <p>The third step here…</p> </div> <h2 id="usage">Usage</h2> <p>Use the Markdown level-3 headings to represent step titles within the <code>steps</code> shortcode:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">{{% steps %}} </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">### Step 1 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">The first step here... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">### Step 2 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">The second step here... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">### Step 3 </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">The third step here... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">{{% /steps %}} </span></span></code></pre></div> </article> </main></body></html>