Masterpaint's website
⚠️ Warning: This document might not be zero-error.
Please install the following.
- Node.js: v20 or above is required. v20.8.1 is recommended.
- pnpm: v8 or above is required. latest version is recommended.
- Git: latest version is recommended.
-
VSCode is recommended for development.
-
Install the following extensions (Optional but highly recommended):
- Astro
- ESLint v8.57.0 - (if 9.2.0 is installed,
pnpm lint
will error) - Prettier
- Tailwind CSS IntelliSense
-
Setting the VSCode workspace settings (Optional but highly recommended):
-
Open the command palette (Ctrl + Shift + P)
-
Type "Preferences: Open Settings (JSON)" and press Enter
-
Insert the following code into the settings.json file
{ "tailwindCSS.experimental.classRegex": [ ["clsx\\(([^)]_)\\)", "(?:'|\"|`)([^']_)(?:'|\"|`)"] ], "prettier.documentSelectors": ["**/*.astro"], "[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "eslint.validate": [ "javascript", "javascriptreact", "astro", "typescript", "typescriptreact" ], "files.insertFinalNewline": true }
Note: Please make sure you understand what you are doing before changing the settings.
Here is a brief explanation of the settings.
tailwindCSS.experimental.classRegex
is for the Tailwind CSS and clsx() support.prettier.documentSelectors (astro)
and[astro]: { "editor.defaultFormatter": "esbenp.prettier-vscode" }
are for the Prettier support for Astro files.eslint.validate
is for the ESLint support.files.insertFinalNewline
is for the final newline at the end of the file which if set tofalse
, you may encounter some problems with Prettier.
-
-
Save the file and you are done!
Thanks astro from their template blogs.
Features:
- ✅ Minimal styling (make it your own!)
- ✅ 100/100 Lighthouse performance
- ✅ SEO-friendly with canonical URLs and OpenGraph data
- ✅ Sitemap support
- ✅ RSS Feed support
- ✅ Markdown & MDX support
Inside of this Masterpaint project, you'll see the following folders and files:
├── public/
├── src/
│ ├── components/
│ ├── content/
│ ├── layouts/
│ └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json
some prettier & eslint stuffs
Astro looks for .astro
or .md
files in the src/pages/
directory. Each page is exposed as a route based on its file name.
src/components/
= where we like to put any Astro/React/Vue/Svelte/Preact components.
⚠️ Important: Above this messages are the necessary informations.
The src/content/
directory contains "collections" of related Markdown and MDX documents. Use getCollection()
to retrieve posts from src/content/blog/
, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.
Any static assets, like images, can be placed in the public/
directory.
All commands are run from the root of the project, from a terminal:
using pnpm
for node pkg manager.
Command | Action |
---|---|
pnpm install |
Installs dependencies |
pnpm run dev |
Starts local dev server at localhost:4321 |
pnpm run build |
Build your production site to ./dist/ |
pnpm run preview |
Preview your build locally, before deploying |
pnpm run astro ... |
Run CLI commands like astro add , astro check |
pnpm run astro -- --help |
Get help using the Astro CLI |
pnpm lint |
Lint checked |
pnpm format |
Prettier formatting |
pnpm sync |
Astro Syncing |
⚠️ Remark: Encounter Astro problem? Trypnpm sync
.
Check out astro'sdocumentation or jump into their Discord server.
This theme is based off of the lovely Bear Blog.