> For a machine-readable index of all videos on this site, see [llms.txt](/llms.txt). # Astro Website Tour A quick 20-minute walkthrough of some recent additions to my [personal website](https://danny.is), which is built on Astro. 18m 28s ยท 12 Aug 2026 [Watch](https://v.danny.is/astro-website-tour) ## Links - [Video page](https://v.danny.is/astro-website-tour) - [Download MP4](https://v.danny.is/astro-website-tour.mp4) - [Embed](https://v.danny.is/astro-website-tour/embed) - [JSON metadata](https://v.danny.is/astro-website-tour.json) ## Transcript okay I'm just going to give you a quick tour of some of the stuff I've done on my personal website recently so it's built on Astro and I've done quite a lot of work on it and I'm just going to walk through this stuff in no particular order so first of all I actually have a nice home page now right where I've got notes I've got a notes content collection which is for like little snippet note things and these sort of in the front matter for these these take like a link and then comments that i have underneath and so i now show these in like little note cards here on the home page right and then i've also got recent articles here which show the time like reading time and stuff and then down the bottom here a couple of other new things i now show my projects which is its own content collection and i also grab some tools from a toolbox which is on uh notion uh via super.so so if we click one of these this is on a separate website but these are now automatically pulled in when i build the site um so if i kind of show you like the the main bits here right we've got um the writing stuff so the articles um which basically just shows a list here and then when we go into one of these articles we've got some nice view transitions and stuff and all the stuff you'd expect in here and then the notes basically is kind of similar so again view transitions and basically i'm using these kind of big note cards which if we actually open a full note is what we see here and then i've also got these like little cards again are being reused down here and obviously all this is properly responsive and then if we look at the toolbox that now gets pulled in automatically at build time from notion using a bunch of clever stuff and you can kind of see a summary of each note it pulls in the emoji correctly the correct category and stuff and these just link straight out to the better worksite but we can also filter basically as you'd expect here so that's cool but now these like the actual content lives elsewhere but at least there's now like a kind of easy way of showing all of these on my site the projects page just basically shows projects I'm currently working on these are content collection items themselves which obviously have images and icons and all the rest of it and this is just makes it easy for me to keep these projects up to date and I can obviously show these elsewhere and I've done a few other bits and bobs I've got like a now page which is kind of rendered a bit better than it was in the way that it works under the hood I've also added a few other like very small little bits here so that there's a back-to-top link obviously this isn't a very big page but that appears on a bunch of different pages from templates which just scrolls you up to the top I've also got if I press tab I've got a skip to content link now which is on all the pages and the navigation works properly here and then what else have I done on here so if we have a look at some of the other pages I've got I have moved over the stuff I'm using pages which used to live in notion so these are now content collection pages and these basically just markdown pages that cover all of the like physical stuff i use and my software and that so they're no longer on notion um i've also added a few of these little pages so like i've added a privacy policy which i feel like every website ought to have i've added an ai statement um which again i think in the modern age we probably ought to have uh and then i've got like a colophon page here which links out to a few other bits including the style guide which i'll talk you over now um and like I kind of think that's it for like very basic like actually finishing things stuff um uh one thing that I have added which is pretty cool is uh another json content collection for um series so what that basically means is if I add some front matter as a relation to that um to multiple articles we get this automatic call out at the beginning which basically says this is part of a series and we'll put them all in the correct order um that's just a little quality of life improvement right but if we have a look at the um style guide now i put quite a lot of work into this and as a result of doing this this is really a started for me but as a result of doing this it's it's made the design of the site much better basically so i've got like a decent color system here which obviously adapts if I change the theme of the site to dark mode it will use the colors right and I put quite a lot of time into thinking about these colors and then we're using semantic tokens here I've also got like borders which are well thought out about how they work and all this kind of stuff and then typeface wise I've switched over to using this Geist font for presentational stuff, like the big kind of headings. So that's mainly going to be used in all caps. And then in the actual articles, I'm using Literata for a kind of bookish look. And then basically everything else, apart from Monospace, uses Fig Tree, because that works as like a UI font and also for like this kind of prose, right? And then obviously I've got a Monospace font. And then this is all just bitty basic, reference stuff here right but if we have a look at some of the more interesting stuff I should use that back to top link interesting stuff in here I've basically got some different typographic styles here so the default kind of set up right is having like the fig tree font and this flow thing just basically puts vertical spacing between stuff um if i switch over to the ui style you'll see that everything probably actually is a like better put together example um say like paragraphs ui style just basically takes away all styling default flow is like the kind of standard way of doing it and then long form prose is what's used in articles basically um but if we have a look at like some of the bits and bobs i've worked on that are tiny little things no one's really ever going to notice probably apart from me we've got little arrows for external links we've got these nice little buttons for keyboard stuff right like strikeout stuff has got a cursor and the highlights look a bit nicer there's loads of these little things like using small caps for abbreviations and stuff and a bit of work on block quotes to make them a bit nicer this is another good example horizontal rules look like that normally but in long form pros they get this nice little little paragraph break and I've got some cool stuff to do with lists and checklists so list density basically lists that are really long get get more spacing between them and that's all done with the plug-in and then again I've done some stuff with tables here right to make sure the tables work and overflow properly and everything and footnotes we've got these like inline footnotes so If I click on one, it opens it up in line here, and that's just a bit of injected JavaScript. Then, obviously, they render properly down here as well. That was all me trying to just nail down all these little annoyances I had. I've also got a bunch of components here, which are fairly new. We've got an intro paragraph, which basically I use in articles to give it this nice first line and drop cap. We got callouts, which can take a type or a title. You see here it takes a type, which is basically the color, or a title, or rather, and a title. And it can take either an icon or an emoji. And then there's a Boolean for large heading. So this is obviously what an emoji callout looks like. This is when using an icon and a title. And these can contain rich markdown content. And the large heading basically just sometimes I want to have like a bigger proper heading. So there's a variant for that. Block quotes can take citations as well, which can also have like URLs and stuff here. Then I've got a few just utility things like button links. I've got like an accordion, which I use in some articles. And all of these are designed to be able to be used in articles or other areas of content. We've got some nice Notion link stuff that isn't really new. Did some work on bookmark links. Did some work on image grids here, right? So that these properly work with, like, I can just put a grid saying two columns and then I can put markdown things in here and that will work. And then we've also, because of the way basic image works, which I'm sure we'll get to, I can put a caption on the end and it will display correctly underneath here. i've got a markdown block which is kind of new so if i just write uh like a fence code block with mark like the markdown type and put a preview in um this thing will cause it to render out a markdown block which looks like this right so i can copy the actual markdown it renders it as proper markdown or i can view the kind of source of it here um and that's just because i find myself sharing markdown snippets more often similarly if i do this with a tree file type and i can give it a title or a highlighted area if i want um this will render out a file tree component which looks like this um and obviously is all looks like a nice file tree this just uses plain html mermaid diagrams as well this is uh done with some plugins because this stuff is actually built as an svg and inject it into the page at build time and i'm using css variables to um to change the theming of these as well which wasn't working before um which is cool uh basic image isn't very interesting really these are just options i've had for ages so i haven't done much on that um but article cards now are kind of new things so i can i can use these to show articles in inside like other articles or notes or whatever and they properly include all the right information there's a compact variant of all of these as well and all of these are like properly responsive as well note card is very similar but the the full version of it is what we actually use to display a note so this type of thing and the compact version is the little one that you've seen on the home page right and then project cards very similarly to show projects and the full card again is used on the actual full page and then tool cards again very very similar right and then finally we've got a content card which takes this is like a helper that takes in a type of thing like this and will render the correct type of card and then embeds i haven't really done a lot with this apart from having a lc vid embed which is my video platform i've built all the rest of this is just the same kind of embeds we had before but all of those components really just help make it a bit easier to keep this site looking nice in terms of ui components not much is new here These are all just the components I use everywhere else in the site. But like I've extracted some stuff like the homepage links is now its own component, right? The latest articles thing is now its own component, right? Which should respond properly as we, you know, get to narrow viewports. And I've done a little bit of work just on some stuff to make some basic HTML a little bit better. I have, however, added something which I probably ought to mention. If I hit Command K, I get a command palette, which basically lets me navigate. So I can go to the homepage. I can copy the URL of the current page, but I can also do full text search in here. So I could do something like this, and that's doing full text search. And again, this is a static site, so it does that pretty efficiently in the background. And obviously I can navigate as you'd expect from that. That's a bit like a little Easter egg, really. What else have I done recently? I'm sure there's loads of little things. Oh, yeah. So cover images. It now basically generates nice cover images for me. this is what one would look like for a note as a little note label and and it basically I spent quite a lot of time in this it basically generates these SVGs using a template and then it turns them into PNGs right and obviously it's got like adaptive titles as well so like this is with a big title if the titles got too many words in it it'll shrink it down so it it looks nice and it will look like this if I'm sharing it on blue sky or whatever right what else have I done recently so already talked about projects so yeah this is this is like the schema for a project right and then yeah that that thing I mentioned earlier on having a series if I add a JSON object to my series content collection I can then refer to that and we'll get this call out at the beginning of all of these things already talked about these bits here that's all technical stuff already talked about moving my uses stuff over and theme aware mermaid diagrams and yeah I've already mentioned this right that's that toolbox stuff and I think I've already mentioned this as well all the styles and callouts and things yeah oh and I've done a load of speeding up Astro stuff actually to read this article if you're interested in it too oh here's another new thing actually this if I put a toggle with the front matter in an article I can turn a table of contents on and as I scroll down through the headings it kind of does this nice little animation on the left um and that only appears if there's room for it obviously uh but yeah i've basically done a load of performance stuff as well so the actual static site is is like got the right caching when it's served um but also the builds are much much faster um and i've done a load of interesting stuff here around making this more agent friendly so i've got rss feeds here but i also have like an lms.txt here which is not that if i go to uh so if i go to want like a markdown version of this note i can i can do.md on the end and i'll get a markdown version um but i can also go to danny is lms.txt uh and and i've got like a pretty well constructed thing about me which obviously is an index of links out to all of the other bits on here right and that's all automatically generated as you'd expect um i also generate like proper micro formats and json ld stuff um and i made a few like interesting little things i've added in here so that if an agent like hits this site or a page on this site it gets some hints in the actual returned html to say hey you can go look here right like a good example of that if a if an agent sends an accepts header for markdown we send out the markdown version of things um and i think that's basically it um and this is just about the home page i reckon Yeah, cool. Yeah, homepage. I guess the other thing that I might want to mention here is, so I write using Astro Editor, which is a separate project, right? This is like an editor for local content collections. But when I'm wanting to comment on things and share them as a note, I often do that using a little Chrome extension, which I can select stuff in a page, and it'll kind of bring it home when I save it, it'll save it locally. But I also often wanna do that remotely, so I've now made this little iOS app, which basically allows me to write draft notes, and I can then sync them up to GitHub and then deal with them locally. So that's like quite a cool little mini side project. But yeah, anyway, that was me just waffling for 20 minutes about some of the cool new bits and bobs I've done on the site. But I think the main thing for me is that it's now a really nice experience for me editing and working on content in here. And also it's a really nice experience for me when I'm editing. But also there's nothing on here that I don't like anymore. There used to be a load of weird little bits that were niggling me that things wouldn't look very nice in dark mode. Or little typographic things. pretty much all of that is is fixed now so yeah anyway that's one of the things I've been up to