This repository contains the source code and content of the LBL-RSE website. The website is built using Docusaurus, a static website generator. The website is hosted on GitHub Pages.
- lbl-rse.github.io
- Table of contents
- Contributing
- Publishing
- Node.js v20 is installed
- You are in the root directory of the repository
Install dependencies.
npm installLaunch the development server.
npm startThat will launch a local development server and open the website in a web browser (usually at http://localhost:3000).
We use Prettier to ensure the code in this repository is in a standard style, regardless of who wrote the code.
To check whether the code in this repository is in that style, you can run:
npx prettier . --checkIf Prettier detects any style issues, it will prompt you to fix the issues by running:
npx prettier . --writePrettier can check/format files of several types, including: .md, .mdx, .js, .jsx, .ts, .tsx, and .css.
Here's how you can edit the website's content (as opposed to its layout).
In case you have a question about editing content, you can start a conversation about it on Slack, or start a GitHub Discussion about it.
You can edit the homepage by editing the file, src/pages/index.tsx.
The index.tsx file contains references to a JavaScript object named siteConfig,
which is defined in the file, docusaurus.config.ts.
The index.tsx file also contains references to a React component named HomepageFeatures
(among others), which is defined in the file, src/components/HomepageFeatures/index.tsx.
React is a JavaScript library commonly used to implement user interfaces.
You can edit this page by editing the file, docs/About/overview.md. This is a Markdown file that has some
YAML-formatted front matter at the top of it. Front matter
is a snippet of metadata about the page. Many Markdown files in this repository include front matter.
You can edit this page by editing the file, docs/About/members.mdx. This is an MDX file, which
is a type of file that can contain both Markdown and JSX. JSX is the
file format in which React user interface elements are typically implemented.
You can edit this page by editing the file, docs/About/roadmap.md.
You can create news articles in the blog/ directory (you can use the 2024-08-16-welcome directory and its contents
as an example).
If you include the tag, news, in the front matter of the article,
that article will appear in the "News" section.
You can create engineering journal articles in the blog/ directory (you can use the 2024-08-15-website directory
and its contents as an example).
If you include the tag, journal, in the front matter of the article,
that article will appear in the "Journal" section.
You can edit the contents of the footer by editing the footer property in docusaurus.config.ts.
There are two color palettes in use on this website: one for light mode and one for dark mode.
Both of them are defined in src/css/custom.css
To come up with the color palette for light mode, we copied the hex code of the Dark Blue color (i.e. #00313C) from
the Berkeley Lab Visual Identity website and plugged it into
the Docusaurus color palette generator,
which generated a light mode color palette as a set of CSS style rules.
To come up with the color palette for dark mode, we took the same Dark Blue color from the other
color palette and plugged it into the color-hex website, which generated a
list of tints of that color. We chose a nameless tint on the brighter side of the spectrum (i.e. #B2C1C4) and
plugged it into
the Docusaurus color palette generator,
which generated a dark mode color palette as a set of CSS style rules.
Our logo is the users icon from the Font Awesome Free icon set. (License)
To customize and download it, we found it on fonticon,
set its foreground color to #00313C there, selected the download type of .ico (advanced),
then clicked the "Download" button.
That opened the icon in RealFaviconGenerator.net,
in which we opted for a background color of #FFFFFF. Finally, we downloaded the resulting favicon package
(i.e. ZIP file), which included:
favicon.ico, which we use as our favicon (i.e.static/img/favicon.ico)safari-pinned-tab.svg, which we renamed tologo.svgand use as our logo (i.e.static/img/logo.svg)- Other files, which we do not use
At the time of this writing, we have obtained images from these sources:
- Undraw for illustrations, such as those used on the "Home" page. On Undraw, we entered our primary color into the color picker at the top of the search page, searched for images by keyword (e.g. "collaboration"), identified images we liked, then downloaded those images in SVG format. (License)
- Pexels for placeholder avatars, such as those on the "Members" page. (License)
In addition, we expect to—at some point—obtain images from these other sources:
- Unsplash for photographs.
- Illlustrations for illustrations.
- Placehold.co for generic placeholder images containing text.
Once you've made the changes you want locally, you can push the branch up to GitHub, create a Pull Request (PR), and request some reviews of the PR.
Once the branch eventually gets merged into main, a GitHub Actions workflow will automatically generate a
production build of the website and deploy it to GitHub Pages.
That GitHub Actions workflow is defined in the file, .github/workflows/deploy.yaml.