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 installOnce 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 exposeAt 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 --hostMake 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 buildTo 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 exposeYou can then visit the built site at http://localhost:3000.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent