johnzanussi.com

A place where I write about technology, 3D Printing, and other hobby projects I have going on.

johnzanussi.com

Built with Astro. Hosted on Vercel.

Table of Contents

• Project Structure
• Commands
• Built With
  • Libraries
  • Services
• Writing Content
  • Content Frontmatter
    • Pages
    • Posts
  • MDX Components
  • Image Shortcut

🚀 Project Structure

/
├── public/
├── src/
└── assets/
│       └── image.png
└── components/
│       └── Component.astro
└── content/
│       └── pages
│       |      └── page-title
│       |             └── index.mdx
│       |             └── image.jpg
│       └── posts
│              └── post-slug
│                     └── index.mdx
│                     └── image.jpg
└── layouts/
│       └── Layout.astro
└── pages/
│       └── posts
│              └── [slug].astro
│       └── index.astro
│       └── [page].astro
└── scripts/
│       └── script.ts
└── styles/
│       └── styles.scss
└── utils/
│       └── util.ts
└── package.json

🧞 Commands

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run check	Shortcut for astro check
npm run update	Shortcut for npx npm-check-updates
npm run ts	Shortcut for tsc --noEmit
npm run astro -- --help	Get help using the Astro CLI

🚧 Built With

Read more about why I chose these libraries and services on the Built With page.

📚 Libraries

• Astro
• Bootstrap
• Font Awesome

🛠️ Services

• Vercel
• FastComments
• Plausible

📝 Writing Content

1. Create a new directory in either src/content/pages or src/content/posts. The directory name will be used for the generated URL of the content.
2. Create an index.mdx file within the directory. This is where the page or post content lives.
3. Add any images or other files specific to that content within the directory.

🎛️ Content Frontmatter

📄 Pages

Property	Type	Required	Notes
title	String	Yes
excerpt	String	No
cover	ImageMetaData	Yes	Image should be 16x9 ratio
draft	Boolean	No	Setting to true only displays the page in dev environments

🗒️ Posts

Property	Type	Required	Notes
title	String	Yes
excerpt	String	No	Used on /posts and in meta tags description.
cover	ImageMetaData	Yes	Image should be 16x9 ratio
date	String	Yes	Value is passed to new Date()
hasAmazonLinks	Boolean	No	Default false. If true the <AmazonDisclosure> component will be rendered at the bottom of the post.
hiddenIntro	Boolean	No	Default false. If true and the post contains ## Intro the resulting heading will be removed from the rendered page but the Intro link will remain in the table of contents.
draft	Boolean	No	Setting to true only displays the page in dev environments

🧩 MDX Components

The following components are made available in all .mdx files without the need to explicitly import.

• <Aside>
• <AmazonProducts>
• <Math>
• <Wire>
• <Columns>
• <Grid>
• <WorkHistory>
• <YouTubeEmbed>

⤴️ Image Shortcut

When writing post content in any src/posts/[post-slug]/index.mdx file you can type img followed by a tab to auto-create the following code.

img ➡️

![](@/content/posts/post-slug/)

This behavior lives in .vscode/MDX Image Paths.code-snippets.