TIL
TIL
-
- Published
Undid a commit and lost a bunch of posts I was excited about
Regrets.
I'm just setting up my blog with Astro and I'm partly **vibe coding** it. I'm editing the content for my Astro blog in Obsidian. By default, Obsidian has wiki-style links, like `[[link here|anchor text]]` and Astro works with markdown links `[such as this](suchasthis.com)` So I swore up and down at [Claude, while using it in in Cursor](Cursor%20+%20Claude%203.7%20Is%20Too%20Eager.%20For%20Some%20Edits%20Use%20Claude%203.5.md), and it couldn't fix it. I even added Playwright MCP, so it automatically can open a browser and check how it renders for itself. Eventually I have up and I said fuck it, I'll just change the Obsidian wiki style links to pure markdown links (yes, I could've done that from the start but I just had to make it difficult). BUT, before that, in a fit of rage, I undid all commits since I started this Wiki links endeavor, and mistakenly lost some articles I loved that I'll probably never get back. -
- Published
How to Remove Empty Image Placeholders from Quarto Listings
Using image-placeholder: "" and fields configuration in _quarto.yml
## The Problem By default, Quarto's listing pages show thumbnails for each post. Even if you don't have images, it still reserves space for them, creating unnecessary whitespace. ## The Solution In your listing page (e.g., `index.qmd`), configure the listing like this: ```yaml listing: type: default fields: [date, title, author, description] image-placeholder: "" ``` This: * Uses `default` layout instead of table/grid * Only shows the fields you want * Sets empty image placeholder to remove the space ## Why It Works The key is `image-placeholder: ""`. Without this, Quarto reserves space for thumbnails even when posts don't have images. Setting it to an empty string removes this space entirely. The `fields` list explicitly states what you want to show, giving you clean, text-only listings. -
- Published
How to Remove Empty Image Placeholders from Quarto Listings
Using image-placeholder: "" and fields configuration in _quarto.yml
## The Problem By default, Quarto's listing pages show thumbnails for each post. Even if you don't have images, it still reserves space for them, creating unnecessary whitespace. ## The Solution In your listing page (e.g., `index.qmd`), configure the listing like this: ```yaml listing: type: default fields: [date, title, author, description] image-placeholder: "" ``` This: * Uses `default` layout instead of table/grid * Only shows the fields you want * Sets empty image placeholder to remove the space ## Why It Works The key is `image-placeholder: ""`. Without this, Quarto reserves space for thumbnails even when posts don't have images. Setting it to an empty string removes this space entirely. The `fields` list explicitly states what you want to show, giving you clean, text-only listings. -
- Published
Quarto Icons & Extension Path Resolution
Using Font Awesome 6.5.2+ instead of iconify
## Context Quarto extensions like `iconify` can be installed using: ```bash quarto add mcanouil/quarto-iconify ``` This creates an `_extensions` directory in your project root with the extension files. ## The Problem Quarto resolves extension paths relative to each document's location instead of the project root: - Works for files in root directory (`index.qmd`) - Fails for files in subdirectories (`posts/article.qmd`, `pages/about.qmd`) Here's the directory structure: ``` my-blog/ ├── _extensions/ # Created by quarto add │ └── mcanouil/ │ └── iconify/ ├── index.qmd ✅ Works (finds _extensions/mcanouil/iconify) ├── posts/ │ └── article.qmd ❌ Fails (looks for posts/_extensions/mcanouil/iconify) └── pages/ └── about.qmd ❌ Fails (looks for pages/_extensions/mcanouil/iconify) ``` ## Attempted Solutions 1. **Project Configuration**: - Tried individual `_quarto.yml` files in each directory - Tried absolute paths - None of these resolved the path issue 2. **File System Solutions**: - Tried symlinks (requires admin privileges on Windows) - Tried duplicating `_extensions` directory (didn't work for me, maybe I didn't copy it correctly) ## Working Solution: Font Awesome First, added Font Awesome to `_quarto.yml`: ```yaml format: html: css: - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css ``` :::note Maybe adding the entire Font Awesome library affects website speed but at this point I honestly don't care. I wasted 4 hours on this already. ::: Now I can finally use a custom icon in my navbar configuration: ```yaml navbar: right: - text: "" href: https://bsky.app/profile/testycool.bsky.social ``` Note: The Bluesky icon specifically requires Font Awesome 6.5.2 or newer. Earlier versions don't include it. -
- Published
Using Custom MDI Icons in Astro Starlight Card Components
How to extend the Astro Starlight Card component to accept custom icons
 By default you can only use [built-in icons](https://starlight.astro.build/reference/icons/) in cards in Astro Starlight. Like this: ```mdx- ✨ Some text here ``` And it will render like this:  But you may want additional icons, that aren't built in. Like the `android` icon. And if you try to use custom icons, such as from https://github.com/natemoo-re/astro-icon, you'll find that you can't use them in that colored square near the heading. You can only use them outside, like this ``, at least I haven't found a way. ## The Solution My solution has been to take the existing Astro Starlight Card component and edit it to allow usage of custom icons such as `mdi:help-circle-outline`, from Material Design Icons. In your `src/components`, create a new filename `IconCard.astro` and paste this in: ```mdx --- import { Icon } from 'astro-icon/components'; interface Props { title: string; icon: string; } const { title, icon } = Astro.props; --- - Something about android ```  Hope that helps. Let me know if you encounter any issues and I'll try to help.