johnzanussi.com
johnzanussi.com copied to clipboard
johnzanussi
My personal website built with Astro.
johnzanussi.com
A place where I write about technology, 3D Printing, and other hobby projects I have going on.
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
- Content Frontmatter
🚀 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
🛠️ Services
📝 Writing Content
- Create a new directory in either
src/content/pagesorsrc/content/posts. The directory name will be used for the generated URL of the content. - Create an
index.mdxfile within the directory. This is where the page or post content lives. - 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.
⤴️ 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 ➡️
This behavior lives in .vscode/MDX Image Paths.code-snippets.
johnzanussi