From 631547a75142326a7c71bdf123e1475217a5ad73 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Wed, 22 Apr 2026 12:42:56 +0200 Subject: chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme) --- .hugo_build.lock | 0 CONTENT_GUIDE.md | 938 ----- archetypes/article.md | 11 - archetypes/default.md | 7 - archetypes/page.md | 8 - assets/css/chroma-custom.css | 391 +++ assets/css/components/404.css | 247 -- assets/css/components/article-hero.css | 225 -- assets/css/components/card.css | 254 -- assets/css/components/code.css | 138 - assets/css/components/feed.css | 101 - assets/css/components/footer.css | 64 - assets/css/components/hamburger.css | 189 - assets/css/components/header.css | 89 - assets/css/components/hero.css | 354 -- assets/css/components/lightbox.css | 170 - assets/css/components/progress-bar.css | 19 - assets/css/components/share-sidebar.css | 107 - assets/css/components/timeline.css | 336 -- assets/css/main.css | 1792 +++++++++- assets/css/main.min.css | 4495 ++++++++++++++++++++++++ assets/css/variables.css | 136 - assets/js/404.js | 54 - assets/js/article-lazy.js | 34 + assets/js/code-copy.js | 79 + assets/js/contact-form.js | 45 + assets/js/copy-code.js | 42 - assets/js/filters.js | 37 - assets/js/form-components.js | 127 + assets/js/fortune.js | 9 + assets/js/glitch.js | 30 - assets/js/hamburger.js | 83 - assets/js/lightbox.js | 31 - assets/js/main.js | 18 - assets/js/matrix-rain.js | 179 +- assets/js/menu.js | 112 + assets/js/not-found-page.js | 9 + assets/js/photo-utils.js | 476 --- assets/js/progress-bar.js | 20 - assets/js/reading-progress.js | 29 + assets/js/scroll-reveal.js | 40 - assets/js/search.js | 134 + assets/js/share-sidebar.js | 51 - assets/js/tag-cloud-spiral.js | 122 + assets/js/theme-toggle.js | 116 +- assets/js/typing.js | 69 - assets/jsconfig.json | 10 - content/_index.md | 6 - content/articles/_index.md | 6 - content/is/_index.md | 8 - content/is/here.md | 87 - content/posts/_index.md | 7 - content/posts/post-1.md | 10 - content/posts/post-2.md | 10 - content/posts/post-3/bryce-canyon.jpg | Bin 19224 -> 0 bytes content/posts/post-3/index.md | 12 - hugo.toml | 60 - i18n/en.yaml | 171 + i18n/it.yaml | 173 + layouts/404.en.html | 142 + layouts/404.html | 98 - layouts/404.it.html | 142 + layouts/_default/_markup/render-codeblock.html | 23 + layouts/_default/_markup/render-heading.html | 5 + layouts/_default/baseof.html | 130 + layouts/_default/list.html | 39 + layouts/_default/single.html | 54 + layouts/_partials/article-single.html | 56 - layouts/_partials/featured-card.html | 23 - layouts/_partials/footer.html | 14 - layouts/_partials/head.html | 8 - layouts/_partials/head/css.html | 15 - layouts/_partials/head/js.html | 15 - layouts/_partials/header.html | 29 - layouts/_partials/hero.html | 41 - layouts/_partials/menu.html | 51 - layouts/_partials/photo-article.html | 32 - layouts/_partials/post-card.html | 30 - layouts/_partials/share-sidebar.html | 28 - layouts/_partials/static-page.html | 33 - layouts/_partials/terms.html | 23 - layouts/_partials/timeline-item.html | 31 - layouts/articles/single.html | 50 + layouts/baseof.html | 23 - layouts/home.html | 48 - layouts/index.html | 59 + layouts/index.json | 13 + layouts/is/list.html | 22 + layouts/page.html | 9 - layouts/partials/article-card.html | 92 + layouts/partials/article-header.html | 71 + layouts/partials/article-list-item.html | 95 + layouts/partials/article-nav.html | 46 + layouts/partials/article-types/life.html | 3 + layouts/partials/article-types/link.html | 17 + layouts/partials/article-types/photo.html | 19 + layouts/partials/article-types/quote.html | 15 + layouts/partials/article-types/tech.html | 3 + layouts/partials/back-to-top.html | 23 + layouts/partials/breadcrumb-jsonld.html | 36 + layouts/partials/breadcrumb.html | 16 + layouts/partials/footer.html | 89 + layouts/partials/form-components.html | 219 ++ layouts/partials/hamburger-menu.html | 125 + layouts/partials/head-meta.html | 57 + layouts/partials/header.html | 94 + layouts/partials/search-modal.html | 87 + layouts/partials/sidebar.html | 54 + layouts/partials/social-share.html | 123 + layouts/partials/tag-cloud.html | 90 + layouts/partials/toast-container.html | 13 + layouts/repository/single.html | 77 + layouts/robots.txt | 5 + layouts/section.html | 40 - layouts/shortcodes/actions.html | 26 +- layouts/shortcodes/contact.html | 65 + layouts/shortcodes/div-close.html | 2 - layouts/shortcodes/div.html | 4 - layouts/shortcodes/dropcap.html | 15 +- layouts/shortcodes/em.html | 2 +- layouts/shortcodes/figure.html | 27 - layouts/shortcodes/gal-img.html | 16 - layouts/shortcodes/gallery.html | 13 +- layouts/shortcodes/gravatar.html | 67 +- layouts/shortcodes/image.html | 23 + layouts/shortcodes/img.html | 84 - layouts/shortcodes/quote.html | 32 +- layouts/shortcodes/strike.html | 2 +- layouts/shortcodes/svg.html | 5 - layouts/shortcodes/video.html | 72 +- layouts/taxonomy.html | 7 - layouts/taxonomy/list.html | 49 + layouts/taxonomy/term.html | 46 + layouts/term.html | 7 - static/favicon.ico | Bin 15406 -> 0 bytes theme.toml | 37 + 136 files changed, 10227 insertions(+), 5746 deletions(-) delete mode 100644 .hugo_build.lock delete mode 100644 CONTENT_GUIDE.md delete mode 100644 archetypes/article.md delete mode 100644 archetypes/default.md delete mode 100644 archetypes/page.md create mode 100644 assets/css/chroma-custom.css delete mode 100644 assets/css/components/404.css delete mode 100644 assets/css/components/article-hero.css delete mode 100644 assets/css/components/card.css delete mode 100644 assets/css/components/code.css delete mode 100644 assets/css/components/feed.css delete mode 100644 assets/css/components/footer.css delete mode 100644 assets/css/components/hamburger.css delete mode 100644 assets/css/components/header.css delete mode 100644 assets/css/components/hero.css delete mode 100644 assets/css/components/lightbox.css delete mode 100644 assets/css/components/progress-bar.css delete mode 100644 assets/css/components/share-sidebar.css delete mode 100644 assets/css/components/timeline.css create mode 100644 assets/css/main.min.css delete mode 100644 assets/css/variables.css delete mode 100644 assets/js/404.js create mode 100644 assets/js/article-lazy.js create mode 100644 assets/js/code-copy.js create mode 100644 assets/js/contact-form.js delete mode 100644 assets/js/copy-code.js delete mode 100644 assets/js/filters.js create mode 100644 assets/js/form-components.js create mode 100644 assets/js/fortune.js delete mode 100644 assets/js/glitch.js delete mode 100644 assets/js/hamburger.js delete mode 100644 assets/js/lightbox.js delete mode 100644 assets/js/main.js create mode 100644 assets/js/menu.js create mode 100644 assets/js/not-found-page.js delete mode 100644 assets/js/photo-utils.js delete mode 100644 assets/js/progress-bar.js create mode 100644 assets/js/reading-progress.js delete mode 100644 assets/js/scroll-reveal.js create mode 100644 assets/js/search.js delete mode 100644 assets/js/share-sidebar.js create mode 100644 assets/js/tag-cloud-spiral.js delete mode 100644 assets/js/typing.js delete mode 100644 assets/jsconfig.json delete mode 100644 content/_index.md delete mode 100644 content/articles/_index.md delete mode 100644 content/is/_index.md delete mode 100644 content/is/here.md delete mode 100644 content/posts/_index.md delete mode 100644 content/posts/post-1.md delete mode 100644 content/posts/post-2.md delete mode 100644 content/posts/post-3/bryce-canyon.jpg delete mode 100644 content/posts/post-3/index.md create mode 100644 i18n/en.yaml create mode 100644 i18n/it.yaml create mode 100644 layouts/404.en.html delete mode 100644 layouts/404.html create mode 100644 layouts/404.it.html create mode 100644 layouts/_default/_markup/render-codeblock.html create mode 100644 layouts/_default/_markup/render-heading.html create mode 100644 layouts/_default/baseof.html create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html delete mode 100644 layouts/_partials/article-single.html delete mode 100644 layouts/_partials/featured-card.html delete mode 100644 layouts/_partials/footer.html delete mode 100644 layouts/_partials/head.html delete mode 100644 layouts/_partials/head/css.html delete mode 100644 layouts/_partials/head/js.html delete mode 100644 layouts/_partials/header.html delete mode 100644 layouts/_partials/hero.html delete mode 100644 layouts/_partials/menu.html delete mode 100644 layouts/_partials/photo-article.html delete mode 100644 layouts/_partials/post-card.html delete mode 100644 layouts/_partials/share-sidebar.html delete mode 100644 layouts/_partials/static-page.html delete mode 100644 layouts/_partials/terms.html delete mode 100644 layouts/_partials/timeline-item.html create mode 100644 layouts/articles/single.html delete mode 100644 layouts/baseof.html delete mode 100644 layouts/home.html create mode 100644 layouts/index.html create mode 100644 layouts/index.json create mode 100644 layouts/is/list.html delete mode 100644 layouts/page.html create mode 100644 layouts/partials/article-card.html create mode 100644 layouts/partials/article-header.html create mode 100644 layouts/partials/article-list-item.html create mode 100644 layouts/partials/article-nav.html create mode 100644 layouts/partials/article-types/life.html create mode 100644 layouts/partials/article-types/link.html create mode 100644 layouts/partials/article-types/photo.html create mode 100644 layouts/partials/article-types/quote.html create mode 100644 layouts/partials/article-types/tech.html create mode 100644 layouts/partials/back-to-top.html create mode 100644 layouts/partials/breadcrumb-jsonld.html create mode 100644 layouts/partials/breadcrumb.html create mode 100644 layouts/partials/footer.html create mode 100644 layouts/partials/form-components.html create mode 100644 layouts/partials/hamburger-menu.html create mode 100644 layouts/partials/head-meta.html create mode 100644 layouts/partials/header.html create mode 100644 layouts/partials/search-modal.html create mode 100644 layouts/partials/sidebar.html create mode 100644 layouts/partials/social-share.html create mode 100644 layouts/partials/tag-cloud.html create mode 100644 layouts/partials/toast-container.html create mode 100644 layouts/repository/single.html create mode 100644 layouts/robots.txt delete mode 100644 layouts/section.html create mode 100644 layouts/shortcodes/contact.html delete mode 100644 layouts/shortcodes/div-close.html delete mode 100644 layouts/shortcodes/div.html delete mode 100644 layouts/shortcodes/figure.html delete mode 100644 layouts/shortcodes/gal-img.html create mode 100644 layouts/shortcodes/image.html delete mode 100644 layouts/shortcodes/img.html delete mode 100644 layouts/shortcodes/svg.html delete mode 100644 layouts/taxonomy.html create mode 100644 layouts/taxonomy/list.html create mode 100644 layouts/taxonomy/term.html delete mode 100644 layouts/term.html delete mode 100644 static/favicon.ico create mode 100644 theme.toml diff --git a/.hugo_build.lock b/.hugo_build.lock deleted file mode 100644 index e69de29..0000000 diff --git a/CONTENT_GUIDE.md b/CONTENT_GUIDE.md deleted file mode 100644 index cdc2733..0000000 --- a/CONTENT_GUIDE.md +++ /dev/null @@ -1,938 +0,0 @@ -# Content Organization Guide - -A practical guide for managing content on your personal blog. Use this when creating, editing, or organizing articles and pages. - ---- - -## Table of Contents - -1. [Directory Structure](#directory-structure) -2. [Content Types](#content-types) -3. [Creating New Content](#creating-new-content) -4. [Front Matter Reference](#front-matter-reference) -5. [Publishing Workflow](#publishing-workflow) -6. [Best Practices](#best-practices) -7. [Examples](#examples) - ---- - -## Directory Structure - -``` -content/ -├── _index.md # Home page (don't modify much) -├── articles/ # All blog content lives here -│ ├── _index.md # Articles section landing page -│ ├── my-first-article/ -│ │ ├── index.md # Article content -│ │ └── featured-image.jpg # Images bundled with article -│ ├── another-article.md -│ └── ... -└── is/ # Static pages (about, contact, etc.) - ├── _index.md # About page (/) - ├── here.md # Contact page (/is/here) - └── ... # Other static pages -``` - -**Key Rules:** -- All blog posts go in `content/articles/` — not directly in `content/` -- Static pages (about, contact, uses, now, etc.) go in `content/is/` -- Use folders for articles with images; use `.md` files for text-only articles -- Folder names become URL slugs, so use lowercase and hyphens: `my-first-article/` - ---- - -## Navigation Menu Configuration - -The top navigation menu is configured in `hugo.toml`. You can easily add, remove, or reorder menu items. - -### How to Add Menu Items - -Edit your `hugo.toml` file and add a new `[[menu.main]]` block: - -```toml -[[menu.main]] - name = 'Articles' - pageRef = '/articles' - weight = 10 - -[[menu.main]] - name = 'About' - pageRef = '/is' - weight = 20 - -[[menu.main]] - name = 'Contact' - pageRef = '/is/here' - weight = 30 - -# Add a new page to the menu: -[[menu.main]] - name = 'Uses' - pageRef = '/is/uses' - weight = 40 -``` - -### Parameters - -- `name` — Text displayed in the navigation menu -- `pageRef` — Path to your page (e.g., `/articles`, `/is/about`). Must match your content folder structure -- `weight` — Controls menu order. Lower numbers appear first (leftmost), higher numbers appear last (rightmost) - -### External Links - -To link to external websites, use `url` instead of `pageRef`: - -```toml -[[menu.main]] - name = 'GitHub' - url = 'https://github.com/danix2' - weight = 50 -``` - -### Creating Pages for Menu Items - -Before adding a menu item, create the corresponding page in `content/`: - -```bash -# Create a new static page -hugo new is/uses.md - -# Then add it to the menu in hugo.toml -[[menu.main]] - name = 'Uses' - pageRef = '/is/uses' - weight = 40 -``` - ---- - -## Content Types - -Your blog supports five content types for articles. Each type is visually distinct in the feed with its own badge color. - -### **tech** (Purple #a855f7) -Technical articles: programming tutorials, IT learnings, engineering breakdowns, code walkthroughs, tool reviews. - -**Examples:** -- Understanding Kubernetes networking -- Building a REST API with Go -- Setting up a CI/CD pipeline -- Debugging memory leaks - -### **life** (Amber #f59e0b) -Personal reflections, philosophy, life lessons, observations about slowing down, productivity thoughts, life updates. - -**Examples:** -- On slowing down in a world that won't -- What I learned from a failed project -- Balancing work and life -- Reflections on burnout - -### **quote** (Green #00ff88) -Meaningful quotes you find interesting, with optional context about why they matter to you. - -**Examples:** -- "The obstacle is the way" — Marcus Aurelius -- "It's about the work, not the reward" — Unknown -- "Simplicity is the ultimate sophistication" — da Vinci - -### **link** (Cyan #38bdf8) -Interesting links from the web with optional your own commentary. Can be standalone or with analysis. - -**Examples:** -- [Article] The future of Rust in systems programming -- [Video] Why Git is hard to understand -- [Thread] Thoughts on API design principles - -### **photo** (Pink #ec4899) -Photos or visual content you create and want to share. Can include captions or stories. - -**Examples:** -- Photos from a recent trip -- A project you built (with pictures) -- Visual design work you want to showcase - ---- - -## Creating New Content - -### Quick Start: Use Hugo CLI - -```bash -# Create a new article -hugo new articles/my-article-title/index.md - -# Create a static page (about, contact, etc.) -hugo new is/page-title.md -``` - -The CLI uses your archetypes to generate files with proper front matter. - -### Manual Creation - -If you prefer, just create `.md` files directly in the right folder. Copy the front matter structure from examples below. - ---- - -## Front Matter Reference - -Every content file starts with TOML front matter (between `+++` markers). Here's what each field does: - -```toml -+++ -title = "Article Title" # Required: The page title (appears in feed and page) -date = 2026-04-05T10:30:00Z # Required: Publication date (ISO 8601 format) -draft = false # Optional: Set to true to hide from published site -type = "tech" # Required for articles: tech, life, quote, link, photo -featured = false # Optional: Set to true to pin to top of homepage -image = "featured-image.jpg" # Optional: Image path for card thumbnail (relative to content file) -description = "One or two..." # Optional: Short summary (2 lines max) for feed cards -+++ -``` - -### Field Details - -| Field | Required | Notes | -|-------|----------|-------| -| `title` | Yes | Used as page heading and in feeds. Keep under 80 chars for better layout. | -| `date` | Yes | When the article was published. Format: `2026-04-05T10:30:00Z` (UTC). Hugo sorts by this. | -| `draft` | No | Set to `true` to hide from published site (useful for work-in-progress). | -| `type` | Yes (articles) | One of: `tech`, `life`, `quote`, `link`, `photo`. Not needed for static pages. | -| `featured` | No | Set to `true` to pin one article to the top of the homepage feed. Only the first featured post shows. | -| `image` | No | Path to a featured image (relative to the content file folder). Shows as thumbnail in card. | -| `description` | No | Short summary for feed cards. If omitted, Hugo uses the first 120 characters of your content. Keep to 2 lines max (~150 chars). | - ---- - -## Publishing Workflow - -### Before Publishing - -1. **Write your content** — Use the body section after `+++` for markdown -2. **Add front matter** — Fill in title, date, type, description, image (if applicable) -3. **Set draft = false** — Only non-draft content appears on the live site -4. **Preview locally** — Run `hugo server` to see how it looks - -### Publishing - -```bash -# Start local preview -hugo server - -# Open http://localhost:1313 in your browser -# Check homepage, articles page, filters, detail pages - -# When satisfied: -git add content/ -git commit -m "content: add [title] article" -git push origin master -``` - -### Important Notes - -- **Draft status**: Set `draft = true` while writing. Change to `draft = false` when ready to publish. -- **Featured**: Only set one article to `featured = true`. It will appear first on the homepage, even if it's not the newest. -- **Dates in the future**: Articles with future dates are treated as drafts (won't appear until that date passes). - ---- - -## Best Practices - -### Article Length & Structure - -- **Tech articles**: 800–2000 words. Include code examples, explanations, and takeaways. -- **Life reflections**: 300–1000 words. Personal, conversational tone is best. -- **Quotes**: 50–200 words. Include the quote, attribution, and 1–2 sentences on why it resonates. -- **Links**: 50–500 words. Headline, link, and 1–3 sentences of context or summary. -- **Photos**: 100–500 words. Caption, story, or context about the image. - -### Writing Tips - -1. **Titles should be specific** — "Understanding X" is better than "Learning about X" -2. **Descriptions should hook** — Write summaries that make people want to click -3. **Use code blocks for technical content** — Syntax highlighting works automatically -4. **Include images for visual interest** — Photos break up text and catch attention -5. **Link to related posts** — Help readers discover more of your content - -### File Organization - -- **Use descriptive folder/file names** — `understanding-kubernetes-networking/` is better than `post1/` -- **Group related assets** — If an article has images, keep them in the same folder -- **Avoid special characters** — Stick to letters, numbers, hyphens, underscores -- **Use lowercase** — Slugs should be lowercase (Hugo enforces this in URLs) - -### Images - -- **Optimal sizes**: Featured images 1200x600px or wider (16:9 aspect ratio) -- **File formats**: JPG for photos, PNG for diagrams, WebP for web-optimized -- **File size**: Keep images under 500KB (use compression tools) -- **Naming**: Use lowercase, hyphens, descriptive names: `kubernetes-architecture.jpg` - -### Code Blocks - -Include a language identifier for syntax highlighting: - -````markdown -```python -def hello_world(): - print("Hello, world!") -``` -```` - -Supported languages: Python, Go, JavaScript, TypeScript, Bash, SQL, YAML, HTML, CSS, Rust, and many more. - ---- - -## Examples - -### Example 1: Tech Article with Images - -**File structure:** -``` -content/articles/understanding-rest-apis/ -├── index.md -├── rest-principles.png -└── api-flow.png -``` - -**Front matter:** -```toml -+++ -title = "Understanding REST APIs: A Practical Guide" -date = 2026-04-05T09:00:00Z -draft = false -type = "tech" -featured = false -image = "rest-principles.png" -description = "REST APIs power the web. Learn the six constraints that make them scalable and how to build your own." -+++ -``` - -**Body:** -```markdown -REST (Representational State Transfer) is an architecture style for building web APIs... - -## The Six Constraints - -1. **Client-Server Architecture** — Separation of concerns... -2. **Statelessness** — Each request contains all needed information... - -## Building Your First REST API - -Here's how to build a simple API with Go: - -```go -package main - -import ( - "net/http" -) - -func main() { - http.HandleFunc("/api/hello", func(w http.ResponseWriter, r *http.Request) { - w.Write([]byte("Hello, REST!")) - }) - http.ListenAndServe(":8000", nil) -} -``` - -... -``` - -### Example 2: Life Reflection - -**File: `content/articles/slowing-down.md`** - -```toml -+++ -title = "On Slowing Down in a World That Won't" -date = 2026-04-04T14:30:00Z -draft = false -type = "life" -featured = false -description = "There's a particular kind of exhaustion that comes from moving too fast. Here's what I learned about intentionality." -+++ -``` - -**Body:** -```markdown -Last week I caught myself reading the same sentence five times without understanding it. My mind was already on the next task, the next meeting, the next thing to fix. - -That's when it hit me: I'd been running on fumes for months... - -## What I'm Trying Now - -Three small changes have made a difference: - -1. **One deep work block per day** — No meetings, no emails, just focused time. -2. **Walking between tasks** — A 5-minute walk breaks the mental loop. -3. **Saying no more often** — Turns out, most requests weren't actually urgent. - -The irony is that slowing down made me more productive. Not because I did more, but because what I did actually mattered... -``` - -### Example 3: Quote Post - -**File: `content/articles/obstacle-is-the-way.md`** - -```toml -+++ -title = "\"The Obstacle Is the Way\" — Marcus Aurelius" -date = 2026-04-03T12:00:00Z -draft = false -type = "quote" -featured = false -description = "A powerful Stoic principle on turning problems into progress." -+++ -``` - -**Body:** -```markdown -> The impediment to action advances action. What stands in the way becomes the way. -> -> — Marcus Aurelius, Meditations - -This quote resonates because it reframes failure and obstacles. Instead of seeing problems as roadblocks, Stoic philosophy teaches us to see them as *the path itself*. - -Every challenge I've faced that felt insurmountable at the time became the thing that taught me the most. The failed projects taught me more than the successes. The difficult conversations were more valuable than the easy ones. - -What obstacle are you facing right now? What if it's exactly what you need to learn next? -``` - -### Example 4: Link Post with Commentary - -**File: `content/articles/future-of-rust.md`** - -```toml -+++ -title = "The Future of Rust in Systems Programming" -date = 2026-04-02T10:00:00Z -draft = false -type = "link" -featured = false -image = "rust-logo.png" -description = "Why Rust is becoming essential for systems programming and what's coming next." -+++ -``` - -**Body:** -```markdown -Read this excellent piece on [The Future of Rust in Systems Programming](https://example.com/rust-future) - -The author makes a compelling argument about why Rust's memory safety guarantees are becoming non-negotiable in infrastructure software. I particularly appreciated the section on how Rust adoption is accelerating in Linux kernel development. - -The key takeaway: safety isn't a trade-off anymore. Rust proves you can have performance *and* memory safety, which changes everything for systems programming. -``` - -### Example 5: Static Page (About) - -**File: `content/is/_index.md`** (already created, but here's how to edit it) - -```toml -+++ -title = "About" -date = 2026-01-01T00:00:00Z -+++ -``` - -**Body:** -```markdown -Hi, I'm Danilo. I'm an engineer and writer trying to figure out how to build good things and live well. - -## What I Write About - -- **Tech**: Systems design, Go, backend architecture, things I learn while building -- **Life**: Reflections on work, learning, slowing down, and finding meaning -- **Ideas**: Interesting thoughts and quotes that stick with me - -## What I'm Doing Now - -Currently building distributed systems and thinking about how to write better. I'm particularly interested in observability, performance, and the intersection of technology and philosophy. - -## Get in Touch - -Want to chat? [Send me a message](/is/here) — I read and reply to everything. -``` - ---- - -## File Format & Markdown - -### Standard Markdown - -Your content is written in Markdown. Here are the basics: - -```markdown -# Heading 1 -## Heading 2 -### Heading 3 - -**Bold text** -*Italic text* - -- Bullet point -- Another point - -1. Numbered item -2. Another item - -[Link text](https://example.com) - -![Image alt text](image-file.jpg) - -> Blockquote text -``` - -### Code Blocks - -Fenced code blocks with language specification: - -````markdown -```python -print("Hello") -``` - -```javascript -console.log("Hello"); -``` - -```bash -echo "Hello" -``` -```` - -### Images - -Place images in the same folder as the article: - -```markdown -![A description of the image](image-filename.jpg) -``` - -For featured images in front matter, use just the filename: -```toml -image = "image-filename.jpg" -``` - ---- - -## Hugo Shortcodes - -Beyond standard Markdown, the theme includes special shortcodes for enhanced content. Place your content files (images, etc.) in the same folder as the article. - -### Responsive Image Shortcode - -The `img` shortcode creates responsive, optimized images with lazy loading, WebP format support, and a fade-in LQIP (Low Quality Image Placeholder) effect. - -**Usage:** -```hugo -{{< img src="image.jpg" alt="Image description" >}} -``` - -**Parameters:** -- `src` (required) — Path to image file (relative to content folder) -- `alt` (required) — Alt text for accessibility -- `divClass` (optional) — CSS class to add to the wrapper div - -**Configuration:** -Add to your `hugo.toml` to define responsive image sizes: -```toml -[params] -imageSizes = [640, 900, 1200, 1600] -``` - -**Example:** -```hugo -{{< img src="kubernetes-architecture.jpg" alt="Kubernetes cluster architecture" >}} -``` - ---- - -### Quote Shortcode - -The `quote` shortcode creates styled blockquotes with optional source attribution and links. - -**Usage:** -```hugo -{{< quote source="Author Name" src="https://example.com" >}} -This is a meaningful quote. -{{< /quote >}} -``` - -**Parameters:** -- Content between tags — The quote text -- `source` (optional) — Author or source name -- `src` (optional) — URL to link the source to (opens in new tab) - -**Examples:** - -Simple quote: -```hugo -{{< quote >}} -The obstacle is the way. -{{< /quote >}} -``` - -Quote with attribution: -```hugo -{{< quote source="Marcus Aurelius" >}} -The impediment to action advances action. What stands in the way becomes the way. -{{< /quote >}} -``` - -Quote with link: -```hugo -{{< quote source="Paul Graham" src="http://paulgraham.com/wealth.html" >}} -The way to get rich is to work hard, at something people want. -{{< /quote >}} -``` - ---- - -### Gravatar Shortcode - -The `gravatar` shortcode embeds a Gravatar profile image with optional caption and link. - -**Usage:** -```hugo -{{< gravatar mail="your@email.com" size=150 caption="My avatar" >}} -``` - -**Parameters:** -- `mail` (optional) — Email address for Gravatar lookup (falls back to `author_email` from config) -- `size` (optional) — Image size in pixels (default: 200) -- `class` (optional) — CSS class for the figure element -- `link` (optional) — URL to wrap the image in a link -- `target` (optional) — Link target (_blank, _self, etc.) -- `rel` (optional) — Link rel attribute (e.g., "author") -- `caption` (optional) — Caption text (supports Markdown) -- `alt` (optional) — Alt text (uses caption as fallback) - -**Configuration:** -Add to your `hugo.toml` to set your default email: -```toml -[params] -author_email = "your@email.com" -``` - -**Examples:** - -Simple gravatar with default size: -```hugo -{{< gravatar >}} -``` - -Custom size and caption: -```hugo -{{< gravatar mail="danilo@example.com" size=120 caption="That's me" >}} -``` - -With link to profile: -```hugo -{{< gravatar mail="danilo@example.com" size=150 link="https://gravatar.com/danilo" target="_blank" rel="author" caption="Click to view my profile" >}} -``` - ---- - -### Figure Shortcode - -The `figure` shortcode wraps images or other content in a semantic `
` element with optional title, caption, attribution, and link. Use it to add context and styling around images. - -**Usage:** -```hugo -{{< figure caption="Image caption" attr="Photo by Someone" >}} -{{< img src="image.jpg" alt="Description" >}} -{{< /figure >}} -``` - -**Parameters:** -- Content between tags — Inner content (typically an `img` shortcode) -- `class` (optional) — CSS class for the figure element -- `link` (optional) — URL to wrap the entire figure in a link -- `target` (optional) — Link target (_blank, _self, etc.) -- `rel` (optional) — Link rel attribute -- `title` (optional) — Optional title displayed above the image -- `caption` (optional) — Caption text (supports Markdown) -- `attr` (optional) — Attribution text (supports Markdown) -- `attrlink` (optional) — URL to link the attribution to - -**Examples:** - -Simple figure with caption: -```hugo -{{< figure caption="Kubernetes cluster architecture" >}} -{{< img src="k8s-architecture.jpg" alt="Kubernetes cluster" >}} -{{< /figure >}} -``` - -With title and attribution: -```hugo -{{< figure title="System Design" caption="A simplified view of the microservices architecture" attr="Diagram by John Doe" >}} -{{< img src="architecture.jpg" alt="Architecture diagram" >}} -{{< /figure >}} -``` - -With linked attribution: -```hugo -{{< figure caption="Beautiful sunset at Bryce Canyon" attr="Photo by Jane Smith" attrlink="https://example.com/jane" >}} -{{< img src="bryce-canyon.jpg" alt="Sunset at Bryce Canyon" >}} -{{< /figure >}} -``` - -Figure with clickable link: -```hugo -{{< figure link="https://example.com/full-image" target="_blank" caption="Click to view full resolution" >}} -{{< img src="preview.jpg" alt="Preview image" >}} -{{< /figure >}} -``` - ---- - -### Video Shortcode - -The `video` shortcode embeds HTML5 videos with controls, optional autoplay, looping, and muting. Supports mp4, webm, and other HTML5 video formats. - -**Usage:** -```hugo -{{< video src="my-video.mp4" width=600 height=400 >}} -``` - -**Parameters:** -- `src` (required) — Path to video file (mp4, webm, etc.) -- `width` (optional) — Video width in pixels -- `height` (optional) — Video height in pixels -- `autoplay` (optional) — true/false (default: false) -- `loop` (optional) — true/false (default: false) -- `muted` (optional) — true/false (default: false) -- `class` (optional) — CSS class for styling - -**Note:** The `muted` attribute is often required for autoplay to work in modern browsers. - -**Examples:** - -Simple video with controls: -```hugo -{{< video src="demo.mp4" width=800 height=450 >}} -``` - -Auto-looping muted video (useful for GIF-like effects): -```hugo -{{< video src="animation.mp4" width=640 height=480 autoplay=true loop=true muted=true >}} -``` - -Styled video with custom class: -```hugo -{{< video src="tutorial.webm" width=1024 height=576 class="responsive-video" >}} -``` - ---- - -### Text Formatting Shortcodes - -#### Strike Shortcode - -Creates strikethrough text. - -**Usage:** -```hugo -{{< strike >}}This text is crossed out{{< /strike >}} -``` - -#### Highlight (em) Shortcode - -Creates highlighted/marked text (yellow background). - -**Usage:** -```hugo -{{< em >}}This text is highlighted{{< /em >}} -``` - -#### Dropcap Shortcode - -Creates a paragraph with a decorative drop cap (large first letter). - -**Usage:** -```hugo -{{< dropcap >}} -Once upon a time, there was a beautiful story that began with this first letter... -{{< /dropcap >}} -``` - -**Parameters:** -- `class` (optional) — CSS class for styling - ---- - -### Container Shortcodes - -#### Div Shortcode - -Opens a `
` wrapper with optional CSS class. Pair with `div-close` shortcode. - -**Usage:** -```hugo -{{< div class="container featured" >}} -Content inside the div -{{< div-close >}} -``` - -**Parameters:** -- `class` — CSS class(es) for the div element - -#### Div-Close Shortcode - -Closes a div opened with the `div` shortcode. - ---- - -### Gallery Shortcodes - -#### Gallery Shortcode - -Creates a gallery container for displaying multiple images. - -**Usage:** -```hugo -{{< gallery >}} -{{< gal-img src="photo1.jpg" alt="Photo 1" >}} -{{< gal-img src="photo2.jpg" alt="Photo 2" >}} -{{< /gallery >}} -``` - -#### Gallery Image (gal-img) Shortcode - -Embeds an image in a gallery. Must be used inside a `gallery` shortcode. - -**Usage:** -```hugo -{{< gal-img src="image.jpg" alt="Image description" >}} -``` - -**Parameters:** -- `src` (required) — Path to image file -- `alt` (required) — Alt text for accessibility - ---- - -### Utility Shortcodes - -#### SVG Shortcode - -Embeds inline SVG icons from your `assets/SVGs/` folder. - -**Usage:** -```hugo -{{< svg name="icon-name" class="optional-class" >}} -``` - -**Parameters:** -- `name` (required) — Name of SVG file (without .svg extension). File must be in `assets/SVGs/` folder. -- `class` (optional) — CSS class for styling the icon - -**Example:** -```hugo -{{< svg name="github" class="social-icon" >}} -``` - -#### Actions Shortcode - -Creates a button-style action link (useful for CTAs). - -**Usage:** -```hugo -{{< actions url="https://example.com" desc="Click Me" outclass="optional-wrapper-class" inclass="optional-button-class" >}} -``` - -**Parameters:** -- `url` (required) — Link URL -- `desc` (required) — Button text -- `outclass` (optional) — CSS class for the `
diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html deleted file mode 100644 index ae7d23e..0000000 --- a/layouts/shortcodes/gal-img.html +++ /dev/null @@ -1,16 +0,0 @@ -{{- $src := .Get "src" -}} -{{- $source := resources.Get $src -}} -{{- $alt := .Get "alt" -}} -{{- $caption := .Get "caption" -}} -{{- $location := .Get "location" -}} -{{- $fullsize := $source -}} -{{- $thumb := $source.Resize "400x webp" -}} -
- {{ $alt }} - {{ with $caption }}
{{ . }}
{{ end }} -
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index f9e546e..b66c327 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -1,3 +1,12 @@ -
- {{ .Inner }} +{{- $cols := .Get "cols" | default "2" -}} + +
+ {{- range $line := strings.Split .Inner "\n" -}} + {{- if strings.Contains $line "![" -}} + {{- $image := strings.TrimSpace $line -}} + {{- if $image -}} + {{ $image | markdownify | safeHTML }} + {{- end -}} + {{- end -}} + {{- end -}}
diff --git a/layouts/shortcodes/gravatar.html b/layouts/shortcodes/gravatar.html index 56e2514..3a1ebcc 100644 --- a/layouts/shortcodes/gravatar.html +++ b/layouts/shortcodes/gravatar.html @@ -1,52 +1,17 @@ -{{/* - * The gravatar shortcode: - * All arguments are optional, main ones are mail and size and have a fallback set in place. - * Args: - * mail: [string] The email address. Falls back to .Site.Params.author_email which should be set in your config file. - * size: [int] The size of the fetched image. Defaults to 200 if not set. - * class: [string] The class to give to the figure block. - * link: [string] The address to link the picture to. - * target: [string] Where to open the link. One of "_blank", "_self", "_parent", "_top". - * caption: [string] Caption text to show with the image. Supports Markdown. - * - * Usage: - * {{< gravatar mail="some@address.com" size=150 class="some class" link="https://example.com" target="_blank" rel="author" caption="Here's a picture of a dog." >}} - * - * Output: - *
- * - *
- *

- * Here's a picture of a dog. - *

- *
- *
- * - */}} +{{- $email := .Get "email" -}} +{{- $size := .Get "size" | default "256" | int -}} +{{- $alt := .Get "alt" | default "User avatar" -}} +{{- $class := .Get "class" | default "w-32 h-32 rounded-full" -}} -{{- $mailhash := $.Site.Params.author_email -}} -{{- if .Get "mail" -}}{{- $mailhash = .Get "mail" -}}{{- end -}} -{{- $hash := $mailhash | lower | md5 -}} - - -{{- if .Get "link" -}} - -{{- end }} - {{ with .Get -{{- if .Get "link" -}} - -{{- end }} -{{- if .Get "caption" -}} -
-

- {{- .Get "caption" | markdownify -}} -

-
-{{- end }} - +{{- if $email -}} + {{- $hash := md5 (strings.TrimSpace (strings.ToLower $email)) -}} + {{- $gravatarURL := printf "https://www.gravatar.com/avatar/%s?s=%d&d=identicon" $hash $size -}} + {{ $alt }} +{{- else -}} + {{- errorf "gravatar shortcode: 'email' parameter is required" -}} +{{- end -}} diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html new file mode 100644 index 0000000..84dec3f --- /dev/null +++ b/layouts/shortcodes/image.html @@ -0,0 +1,23 @@ +{{- $src := .Get "src" -}} +{{- $alt := .Get "alt" | default "Image" -}} +{{- $caption := .Get "caption" -}} +{{- $class := .Get "class" | default "w-full h-auto rounded-lg border border-border" -}} +{{- $link := .Get "link" -}} +{{- $figureClass := .Get "figure-class" -}} + +{{- if or $src .Inner -}} +
+ {{- if .Inner -}} + {{- .Inner -}} + {{- else -}} + {{- if $link -}}{{- end -}} + {{ $alt }} + {{- if $link -}}{{- end -}} + {{- end -}} + {{- if $caption -}} +
{{ $caption }}
+ {{- end -}} +
+{{- else -}} + {{- errorf "image shortcode: 'src' parameter or inner content is required" -}} +{{- end -}} diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html deleted file mode 100644 index fbf96c0..0000000 --- a/layouts/shortcodes/img.html +++ /dev/null @@ -1,84 +0,0 @@ -{{/* - Taken from https://www.brycewray.com/posts/2022/06/responsive-optimized-images-hugo/ -*/}} - -{{- $respSizes := .Site.Params.imageSizes -}} -{{- $src := .Get "src" -}} -{{- $source := resources.Get $src -}} -{{- $alt := .Get "alt" -}} -{{- $divClass := .Get "divClass" -}} -{{/* - The styling in $imgClass, below, makes - an image fill the container horizontally - and adjust its height automatically - for that, and then fade in for the LQIP effect. - Feel free to adjust your CSS/SCSS as desired. -*/}} -{{- $imgClass := "animate-fade" -}} -{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}} -{{/* - Now we'll create the 20-pixel-wide LQIP - and turn it into Base64-encoded data, which - is better for performance and caching. -*/}} -{{- $LQIP_img := $source.Resize "20x jpg" -}} -{{- $LQIP_b64 := $LQIP_img.Content | base64Encode -}} -{{/* - $CFPstyle is for use in styling - the div's background, as you'll see shortly. -*/}} -{{- $CFPstyle := printf "%s%s%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px;" -}} -{{/* - Then, we create a 640-pixel-wide JPG - of the image. This will serve as the - "fallback" image for that tiny percentage - of browsers that don't understand the - HTML `picture` tag. -*/}} -{{- $actualImg := $source.Resize "640x jpg" -}} -
-{{/* - Now we'll build the `picture` which modern - browsers use to decide which image, and - which format thereof, to show. Remember to - put `webp` first, since the browser will use - the first format it **can** use, and WebP files - usually are smaller. After WebP, the fallback - is the universally safe JPG format. -*/}} - - - - - {{ $alt }} - - -
diff --git a/layouts/shortcodes/quote.html b/layouts/shortcodes/quote.html index 05d0c94..1ed5c3c 100644 --- a/layouts/shortcodes/quote.html +++ b/layouts/shortcodes/quote.html @@ -1,19 +1,15 @@ -
-

- {{.Inner}} -

- {{ if .Get "source" }} - - {{ end }} +{{- $source := .Get "source" -}} +{{- $src := .Get "src" -}} + +
+

{{ .Inner }}

+ {{- if $source -}} +
+ {{- if $src -}} + — {{ $source }} + {{- else -}} + — {{ $source }} + {{- end -}} +
+ {{- end -}}
diff --git a/layouts/shortcodes/strike.html b/layouts/shortcodes/strike.html index 415036a..275b7c1 100644 --- a/layouts/shortcodes/strike.html +++ b/layouts/shortcodes/strike.html @@ -1 +1 @@ -{{ .Inner | markdownify }} +{{ .Inner }} diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html deleted file mode 100644 index d042bb0..0000000 --- a/layouts/shortcodes/svg.html +++ /dev/null @@ -1,5 +0,0 @@ - -{{- $fname := print "SVGs/" ( .Get "name" ) ".svg" -}} -{{ $icon := resources.Get $fname }} -{{ $icon.Content | safeHTML }} - diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html index aa30a13..1e2645d 100644 --- a/layouts/shortcodes/video.html +++ b/layouts/shortcodes/video.html @@ -1,37 +1,37 @@ -{{/* - * The video shortcode: - * All arguments are optional, except for src which is where you define your video file - * This shortcode supports webm, mp4, and other HTML5 video formats. - * Args: - * src: [string] Path to video file (required) - * class: [string] The class(es) to give to the video block. - * width: [int] The width of the video - * height: [int] The height of the video - * autoplay: [bool] true or false for autoplay - defaults to false - * loop: [bool] true or false for loop - defaults to false - * muted: [bool] true or false for mute - defaults to false - * - * Usage: - * {{< video src="my-video.mp4" width=600 height=400 autoplay=true loop=true muted=true class="responsive-video" >}} - * - * Output: - * - * - */}} +{{- $src := .Get "src" -}} +{{- $id := .Get "id" -}} +{{- $title := .Get "title" | default "Video" -}} +{{- $class := .Get "class" | default "" -}} -{{ $ext := (.Get "src") | path.Ext }} -{{ $filetype := slicestr $ext 1}} - - - - +{{- if $id -}} +
+ +
+{{- else if $src -}} + {{- $ext := $src | path.Ext -}} + {{- $filetype := slicestr $ext 1 -}} + {{- $videoURL := $src -}} + {{- $resource := .Page.Resources.GetMatch $src -}} + {{- if $resource -}}{{- $videoURL = $resource.RelPermalink -}}{{- end -}} + +{{- else -}} + {{- errorf "video shortcode: either 'src' or 'id' parameter is required" -}} +{{- end -}} diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html deleted file mode 100644 index c2e7875..0000000 --- a/layouts/taxonomy.html +++ /dev/null @@ -1,7 +0,0 @@ -{{ define "main" }} -

{{ .Title }}

- {{ .Content }} - {{ range .Pages }} -

{{ .LinkTitle }}

- {{ end }} -{{ end }} diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html new file mode 100644 index 0000000..c3a4317 --- /dev/null +++ b/layouts/taxonomy/list.html @@ -0,0 +1,49 @@ +{{ define "main" }} +
+ +

+ {{ i18n .Data.Plural }} +

+ + +
+ {{ $pinned := where .Pages "Params.pinned" true }} + {{ $unpinned := where .Pages "Params.pinned" false }} + + + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" nil }} + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" "" }} + {{ end }} + {{ end }} + + + {{ range (sort $pinned "Date" "desc") }} +
+ {{ partial "article-card.html" . }} + + {{ i18n "postCount" .Pages.Len }} + +
+ {{ end }} + + + {{ range (sort $unpinned "Date" "desc") }} +
+ {{ partial "article-card.html" . }} + + {{ i18n "postCount" .Pages.Len }} + +
+ {{ end }} + + + {{ if eq (len .Pages) 0 }} +
+ {{ i18n "noRelated" }} +
+ {{ end }} +
+
+{{ end }} diff --git a/layouts/taxonomy/term.html b/layouts/taxonomy/term.html new file mode 100644 index 0000000..1b953bc --- /dev/null +++ b/layouts/taxonomy/term.html @@ -0,0 +1,46 @@ +{{ define "main" }} +
+ +

+ {{ i18n .Data.Singular }} +

+ + +

+ + {{ .Title }} + +

+ + +
+ {{ $pinned := where .Pages "Params.pinned" true }} + {{ $unpinned := where .Pages "Params.pinned" false }} + + + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" nil }} + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" "" }} + {{ end }} + {{ end }} + + + {{ range (sort $pinned "Date" "desc") }} + {{ partial "article-card.html" . }} + {{ end }} + + + {{ range (sort $unpinned "Date" "desc") }} + {{ partial "article-card.html" . }} + {{ end }} + + + {{ if eq (len .Pages) 0 }} +
+ {{ i18n "noRelated" }} +
+ {{ end }} +
+
+{{ end }} diff --git a/layouts/term.html b/layouts/term.html deleted file mode 100644 index c2e7875..0000000 --- a/layouts/term.html +++ /dev/null @@ -1,7 +0,0 @@ -{{ define "main" }} -

{{ .Title }}

- {{ .Content }} - {{ range .Pages }} -

{{ .LinkTitle }}

- {{ end }} -{{ end }} diff --git a/static/favicon.ico b/static/favicon.ico deleted file mode 100644 index 67f8b77..0000000 Binary files a/static/favicon.ico and /dev/null differ diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..bcb8f6f --- /dev/null +++ b/theme.toml @@ -0,0 +1,37 @@ +name = "danix.xyz Hacker" +license = "MIT" +licenselink = "https://opensource.org/licenses/MIT" +description = "Bilingual portfolio/blog theme with hacker/open-source aesthetic, responsive sidebar, 5 article types, and configuration-driven structure." +homepage = "https://github.com/danix/danix-xyz-hacker-theme" +demosite = "https://danix.xyz" +author = "Danilo Macrì" +authorlink = "https://danix.xyz" +version = "1.0.0" + +[params] + minVersion = "0.100.0" + +[[minfeaturesVersion]] + description = "Hugo extended required for Tailwind CSS via Pipes" + version = "0.100.0" + +[[features]] + name = "Bilingual (i18n)" + +[[features]] + name = "Responsive Design" + +[[features]] + name = "Dark/Light Theme Toggle" + +[[features]] + name = "Article Types (5)" + +[[features]] + name = "Shortcode System" + +[[features]] + name = "Alpine.js Interactions" + +[[exampleSiteRepo]] + url = "https://github.com/danix/danix.xyz" -- cgit v1.2.3