Website for the Quilt Project.
Thanks for contributing to the site! There's a couple of things worth noting about our infrastructure, which we will cover below.
For contributors, we recommend using Visual Studio Code or VSCodium as your IDE, as it features Astro support via the official Astro plugin.
Additionally, you would need to install the MDX plugin to have syntax highlighting for the .mdx
files,
and the vscode-fluent
plugin if you need to translate the site or otherwise tinker with Fluent's .ftl
files.
In theory, you can use any editor to your liking that supports the Language Server Protocol, hooked up to the Astro Language Server and optionally other LSPs for MDX and Fluent. Unfortunately as of the date of writing (Sept 11, 2022) no pre-built integrations of the Astro Language Server actually exist, which is why we still recommend using VS Code as your IDE.
For VSCode, you should see a popup in the bottom right when you open the project with recommended extensions. You can also type @recommended
in the extensions page to see the recommended extensions:
To run the development server, you first need to have npm
installed in your system. Usually this comes pre-installed with Node.js, so you might want to install that first.
Note
Only npm
is regularly used and tested for the site, so you might encounter bugs or incompatibilities using an alternate package manager.
Once npm
is installed, clone this repository, navigate into the project folder and run npm install
to install dependencies:
$ git clone https://github.com/QuiltMC/quiltmc.org
$ cd quiltmc.org
$ npm install
Once installation is complete, then run npm run dev
to start the dev server.
The server application should have an output like this:
$ npm run dev
> [email protected] dev
> node csscopy.mjs && astro dev
π astro v1.2.1 started in 56ms
β Local http://localhost:3000/
β Network use --host to expose
At this point, open your browser, and you should be able to see the generated site at http://localhost:3000
.
As Astro utilizes hot module reloading (HMR), any changes you make would be reflected in the browser quickly.
However, sometimes components and layouts don't get rebuilt with HMR and you might have to restart the Astro server to see your changes, which is easily done by pressing Ctrl+C and rerunning npm run dev
.
You're all set! Although, I would recommend reading about the architecture of this site before making any changes, to familiarize yourself with the project structure. Have fun contributing!
Some functionalities of the website, such as redirects or functions, use some Cloudflare Pages specific features. To test these features, you can run the following command:
$ npx wrangler pages dev -- npm run dev --host
Make sure to use the url provided by wrangler, as it will be different from the one provided by Astro. It should appear underneath Worker reloaded!
.
To build the site as seen in production, simply run npm run build
.
Astro will then build the site and emit the output in dist/
.
$ npm run build
To view the built site, you can run npm run preview
:
$ npm run preview
> [email protected] preview
> node csscopy.mjs && astro preview
π astro v1.2.1 started in 2ms
β Local http://localhost:3000/
β Network use --host to expose
You can then visit the built site at http://localhost:3000
.