Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johnzanussi/johnzanussi.com
My personal website built with Astro.
https://github.com/johnzanussi/johnzanussi.com
astro astrojs bootstrap javascript sass typescript
Last synced: about 20 hours ago
JSON representation
My personal website built with Astro.
- Host: GitHub
- URL: https://github.com/johnzanussi/johnzanussi.com
- Owner: johnzanussi
- License: gpl-3.0
- Created: 2021-10-29T16:57:16.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T03:14:08.000Z (about 24 hours ago)
- Last Synced: 2024-11-18T03:32:23.830Z (about 23 hours ago)
- Topics: astro, astrojs, bootstrap, javascript, sass, typescript
- Language: Astro
- Homepage: https://johnzanussi.com
- Size: 142 MB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# johnzanussi.com
A place where I write about technology, 3D Printing, and other hobby projects I have going on.
[johnzanussi.com](https://johnzanussi.com)
Built with [Astro](https://astro.build/). Hosted on [Vercel](https://vercel.com/).
## Table of Contents
* [Project Structure](#-project-structure)
* [Commands](#-commands)
* [Built With](#-built-with)
* [Libraries](#-libraries)
* [Services](#-services)
* [Writing Content](#-writing-content)
* [Content Frontmatter](#-content-frontmatter)
* [Pages](#-pages)
* [Posts](#-posts)
* [MDX Components](#-mdx-components)
* [Image Shortcut](#-image-shortcut)
## 🚀 Project Structure
```text
/
├── 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](https://johnzanussi.com/built-with) page.
### 📚 Libraries
* [Astro](https://astro.build/)
* [Bootstrap](https://getbootstrap.com/)
* [Font Awesome](https://fontawesome.com/)
### 🛠️ Services
* [Vercel](https://vercel.com/)
* [FastComments](https://fastcomments.com/)
* [Plausible](https://plausible.io/)
## 📝 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 | | Used on [/pages](https://johnzanussi.com/pages) and in meta tags description. |
| `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](https://johnzanussi.com/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 [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/AmazonDisclosure.astro) 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.
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/Aside.astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/AmazonProducts.astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/Markdown/Math.astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/Markdown/Wire.astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/Markdown/Columns.astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/Grid.Markdown/astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/WorkHistory.astro)
* [``](https://github.com/johnzanussi/johnzanussi.com/blob/main/src/components/YouTubeEmbed.astro)
### ⤴️ 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.
```markdown
img ➡️
```
```markdown
```
This behavior lives in `.vscode/MDX Image Paths.code-snippets`.