From 949539123142354b1e84339b359f5142e4b6b424 Mon Sep 17 00:00:00 2001 From: Jacob Biehler Date: Mon, 24 Jul 2023 23:32:30 -0700 Subject: [PATCH] docs(README): Documenting the repo (#19) --- README.md | 126 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 96 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 75d44e0..8faec31 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,70 @@ -# Astro Starter Kit: Basics +# [biehlerj.xyz](https://biehlerj.github.io) Astro rewrite -``` -npm create astro@latest -- --template basics -``` - -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) -[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) -[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) - -> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! +This repository contains code for my custom rewrite of my personal website using [Astro](https://astro.build). -![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) +- [biehlerj.xyz Astro rewrite](#biehlerjxyz-astro-rewrite) + - [🚀 Project Structure](#-project-structure) + - [🧞 Commands](#-commands) + - [Technologies used](#technologies-used) + - [Roadmap](#roadmap) + - [👀 Want to learn more about Astro?](#-want-to-learn-more-about-astro) ## 🚀 Project Structure -Inside of your Astro project, you'll see the following folders and files: - -``` +```sh / ├── public/ -│ └── favicon.svg +│ ├── favicon.ico +│ ├── favicon.svg +│ └── resume.pdf ├── src/ +│ ├── assets/ +│ │ ├── pfp.jpg +│ │ └── pfp.webp │ ├── components/ -│ │ └── Card.astro +│ │ ├── Card.astro +│ │ ├── Date.astro +│ │ ├── Footer.astro +│ │ ├── Header.astro +│ │ ├── Logo.astro +│ │ ├── Menu.astro +│ │ ├── MonthYearDate.astro +│ │ ├── MultiDate.astro +│ │ └── SocialIcons.astro +│ ├── content/ +│ │ ├── certs/ +│ │ │ └── *.md +│ │ ├── education/ +│ │ │ └── *.md +│ │ ├── experience/ +│ │ │ └── *.md +│ │ ├── projects/ +│ │ │ └── *.md +│ │ └── config.ts +│ ├── icons/ +│ │ └── *.svg │ ├── layouts/ -│ │ └── Layout.astro -│ └── pages/ -│ └── index.astro +│ │ ├── CertEntry.astro +│ │ ├── EducationEntry.astro +│ │ ├── Experience.astro +│ │ ├── Layout.astro +│ │ └── ProjectEntry.astro +│ ├── pages/ +│ │ ├── certs/ +│ │ │ └── [...slug].astro +│ │ ├── education/ +│ │ │ └── [...slug].astro +│ │ ├── experience/ +│ │ │ ├── [...slug].astro +│ │ │ └── index.astro +│ │ ├── projects/ +│ │ │ ├── [...slug].astro +│ │ │ └── index.astro +│ │ ├── about.astro +│ │ ├── education.astro +│ │ └── index.astro +│ └── styles/ +│ └── global.css └── package.json ``` @@ -34,21 +72,49 @@ Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. -Any static assets, like images, can be placed in the `public/` directory. +Any static assets, can be placed in the `public/` directory. + +For this project I am using the [experimental assets support](https://docs.astro.build/en/guides/assets/) for images. + +This website also uses the [content collections API](https://docs.astro.build/en/guides/content-collections/) to easily manage and configure entries for things like my education, projects I've worked on, etc. All subdirectory in `src/content/` holds items that are all similar and then are used by the `[..slug].astro` file in the corresponding directory in `src/pages/`. ## 🧞 Commands All commands are run from the root of the project, from a terminal: -| 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 astro ...` | Run CLI commands like `astro add`, `astro check` | -| `npm run astro -- --help` | Get help using the Astro CLI | +| Command | Action | +| :--------------------- | :------------------------------------------------ | +| `pnpm install` | Installs dependencies | +| `pnpm dev` | Starts local dev server at `localhost:3000` | +| `pnpm build` | Build your production site to `./dist/` | +| `pnpm preview` | Preview your build locally, before deploying | +| `pnpm sync` | Generates TypeScript types for all Astro modules. | +| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` | +| `pnpm astro -- --help` | Get help using the Astro CLI | + +## Technologies used + +A big thank you to the following projects for helping me build my website the way I want without having to reinvent the wheel: + +- [Astro](https://astro.build) for making building this website so much easier and fun! +- [Astro Icon](https://github.com/natemoo-re/astro-icon) for making me not have worry about inlining my svgs on my own. +- [Hugo PaperMod theme](https://github.com/adityatelange/hugo-PaperMod) for inspiring my layout and providing the SVGs for my social media links. +- [date-fns](https://github.com/date-fns/date-fns) for making working with dates so much easier! + +## Roadmap + +There is still more work to be done in this repo before it replaces the current [biehlerj.xyz](https://biehlerj.xyz). Below is a non-exhaustive list of things that are planned which includes things that will be done after this code base takes over as [biehlerj.xyz](https://biehlerj.xyz): + +- Use Tailwind CSS to make the site look beautiful +- Leverage [Catppuccin Tailwind CSS Plugin](https://github.com/catppuccin/tailwindcss) to toggle between light and dark mode. +- Improve the navigation in pages: + - Have content pages have a button to go back to the landing page for that content collection + - Tag skills for all content collections (where applicable): + - Use tags to allow users to search through my skills and how much, when, and where I used/learned them +- Create a blog: + - Make tags for blog posts that are separate from tags for skills + - Create a CMS to make uploading new posts easy -## 👀 Want to learn more? +## 👀 Want to learn more about Astro? -Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). +Feel free to check [the Astro documentation](https://docs.astro.build).