Skip to content

Latest commit

 

History

History
135 lines (111 loc) · 5.63 KB

README.md

File metadata and controls

135 lines (111 loc) · 5.63 KB
Raw

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

/
├── 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

  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.

⤴️ 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.