New Materials Cloud main frontend

Using Astro, which allows for a simple but powerful way to build the static frontend.

main branch is automatically deployed to https://materialscloud-org.github.io/mc-frontend.

Legacy repositories:

• frontend-common
• frontend-learn
• frontend-work
• frontend-discover
• frontend-explore
• legacy-frontend-docker

Development notes - tips for development:

• when linking to pages/resources don't use the leading flash (so use e.g. <a href="work"> or <img src="images/logos/mc3d.png">). This will use the base: subpath correctly.

• enviroment variables are set (mostly for backend fetches) via the .env.development and .env.production files and assigned in ./src/config/env.js. Astro will automatically use prod and dev backends depending on the command ran...

  • for an example file using these env variables see ./src/components/home/Statistics.astro

• This project attempts to use modern standards while also maintaining most of the UI prior, changes are as follows:

• bootstrap → tailwindcss via

  • Installation Documentation for tailwind astro.

  • Quick link to colors, custom color schemes (either in file or globally.) can be made.

  • Full documentation for tailwindcss

  • Useful documentation sections:

    • Layout: Containers, Flexbox/Grid
    • Spacing
    • Fontsizing

  • Tailwind aims to have all styling inline via pre-existing classes. Some of our sections are inconsistant (I will try add a globalised styling to these.)

• bootstrap-icons → lucide astro npm install lucide-astro

  • Should be lighter as these are SVGs optimised for the web

ASTRO QUICKSTART BELOW

npm create astro@latest -- --template basics

🧑‍🚀 Seasoned astronaut? Delete this file. Have fun!

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── Welcome.astro
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       └── index.astro
└── package.json

To learn more about the folder structure of an Astro project, refer to our guide on project structure.

🧞 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:4321
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

👀 Want to learn more?

Feel free to check our documentation or jump into our Discord server.