DanLevy.net

TODO

• Add comments
• Fine tune: crank lighthouse score
• Publish:
  • Comments Component
  • Free local search
  • Newsletter

Features

• Add new nav
  • Add tags
  • Add categories
  • Add Popular/Related posts
• Convert Quiz UI to MDX/Astro
• Add favicon
• Add social media meta tags
• Add RSS feed
• Add sitemap
• Add smart 404 page
• Add about page
• Add OSS project list (in menu)
• Add contact page
• Add Video page
• Add search
• Add newsletter

Features:

• Minimal styling (make it your own!)
• 100/100 Lighthouse performance
• SEO-friendly with canonical URLs and OpenGraph data
• Sitemap support
• RSS Feed support
• Markdown & MDX support

Helpers

Browser snippets to run in console to better understand the main factors in your generated site's size in bytes.

Misc DOM Helpers

const getAttrObject = el => Object.fromEntries(Object.values(el.attributes).map(attr => [attr.name, attr.value]));

Analyze Size of Astro Sites

Array.from(document.querySelectorAll('astro-island'))
.map(island => {
  var url = island.getAttribute('component-url');
  var size = island.outerHTML.length;
  return { url, size };
})
.sort((a, b) => b.size - a.size)
.map(island => `${island.url}: ${(island.size).toLocaleString()}`);

Analyze Size of Key Elements

Get the size of the main elements in your site.

var sections = Array.from(document.querySelectorAll('html, body, head, main, article, aside, nav, header, footer, style, script, astro-root, astro-island'))
.map(element => {
  var tag = element.tagName.toLowerCase();
  var size = element.outerHTML.length;
  return { tag, size, attrs: element.attributes };
})
var sectionSizes = Object.entries(sections.reduce((acc, {tag, size}) => {
  acc[tag] = acc[tag] == null ? size : acc[tag] + size;
  return acc;
}, {}))
.sort((a, b) => b.size - a.size)
// .map(element => `${element.tag}: ${(element.size).toLocaleString()}`);
console.table(sections);
console.table(sectionSizes);

Project Structure

Inside of your Astro project, you'll see the following folders and files:

 public/
 src/
  components/
  content/
  layouts/
  pages/
 astro.config.mjs
 README.md
 package.json
 tsconfig.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.

Any static assets, like images, can be placed in the public/ directory.

Commands

All commands are run from the root of the project, from a terminal:

Want to learn more?

Check out our documentation or jump into our Discord server.

Credit

This theme is based off of the lovely Bear Blog.