Website

This website is the homepage of Computerization club, a high school student club in Shanghai World Foreign Language Academy.

It is built using Docusaurus 2, a modern static website generator.

Licensing & Re-Using the Contents

All documents (e.g. .md files inside docs/ and blog/ path) are licensed under Creative Commons Attribution 4.0 International License as in LICENSE-docs.

The rest codes, unless stated otherwise, are licensed under GNU Affero General Public License v3.0.

Re-Using the Documents

As for a human-readable explanation (and not a substitute for the license itself) by Creative Commons:

You are free to:

Share — copy and redistribute the material in any medium or format
Adapt — remix, transform, and build upon the material for any purpose, even commercially.

Under the following terms:

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

Developing & Testing

Installation

$ yarn

This command installs all depedendencies specified by the yarn.lock file.

Local Development

$ yarn start

This command starts a local development server and opens up a browser window. You can preview your changes instantly with the development server as you edit the files. Most changes are reflected live without having to restart the server.

Other locales

$ yarn start --locale en

The default language for the website is simplified Chinese (zh-Hans). In order to view the English version locally, start the development server with the english locale. Note that each locale is an independent application, so you cannot use the language dropdown to switch between languages in development.

Directory Structure

You may want to read the Docusaurus v2 documentation beforehand.

.
├── .circleci
│       # Configuration file for Continuous Integration & Testing
├── .github
│       # GitHub workflows to run checks on commit / pull request
├── .husky
│       # The pre-commit hook script run by husky; used for linting
├── .yarn
│       # The vendored version of yarn (berry)
├── alumni
│       # The alumni data file, used by our own docusaurus-plugin-alumni
├── blog
│       # Markdown files for blog contents
│       # Refer to https://docusaurus.io/docs/blog#adding-posts for help
├── build
│       # Generated by `yarn build`; Used for deployment
├── docs
│       # Markdown files for documentation
│       # Refer to https://docusaurus.io/docs/markdown-features for available features
├── i18n
│   │   # Internationalization support
│   └── en
│       │   # All data needed for the English translation
│       ├── docusaurus-plugin-alumni
│       │       # The translated alumni data file
│       ├── docusaurus-plugin-content-blog
│       │       # All blog pages translated in English; for maintenance purposes, the directory structure should be the same as /blog/
│       ├── docusaurus-plugin-content-docs
│       │       # All docs pages translated in English; for maintenance purposes, the directory structure should be the same as /docs/
│       └── docusaurus-theme-classic
│               # JSON files providing translation to the navbar and footer
├── node_modules
│       # Stores the dependency files installed by `yarn`
│       # Required for testing & deploying
├── plugins
│   └── docusaurus-plugin-alumni
│       │   # Our custom plugin that renders the alumni data to the /alumni route
│       ├── lib
│       │       # Compiler output after running `yarn build`
│       └── src
│           │   # Source code of the plugin
│           └── theme
│               ├── AlumniPage
│               │     # The root component (page layout) used at the /alumni route
│               ├── AlumniTimeline
│               │     # The main component to render the alumni timeline
│               ├── MemberCard
│               │     # Each alumni's card
│               ├── Members
│               │     # The series of cards within each "class of"
│               └── icons
│                     # SVG icons, e.g. LinkedIn, website
├── src
│   ├── css
│   │       # Global CSS files for theming
│   │       # (though most of the CSS are written at the component-level)
│   └── pages
│           # React codes for actual pages
└── static
    │   # All static files goes here
    │   # Refer to https://docusaurus.io/docs/static-assets
    └── img

Handling Static Assets

To save bandwidth & make loading faster, images will need to be optimized first. You can refer to Google's PageSpeed Insights: Optimize Images. Alternatively, you can use the following command in Linux with ImageMagick installed.

$ convert in.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB out.jpg

Building & Deploying

Build

$ yarn build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment

$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.

Computerization/computerization.github.io