---

The UML Cloud Computing Club Website

This is the official repo for the UML Cloud Computing Club's website.

The website is implemented using Docusaurus, Easy Ops Local Search, MUI, and some fundamental ReactJS.

👨‍💻 Content File Structure & Resources Contribution Workflow

To edit the resources section of the website:

1. Create a new branch from the main branch
2. Make the appropriate edits within this branch
3. Make an eventual pull request for the branch to be merged into main
4. Await approval or make the reviewers' requested changes and resubmit

All markdown files containing documentation details of the projects are in docs/projects/ with the project's name marking the folder that contain's it's documentation

All markdown files containing tutorial details are in docs/resources/ with the specific resource/class's name marking the folder that contain's it's files.

All markdown files containing activity details are in docs/activities/ with the specific activity's name marking the folder that contain's it's files.

All markdown files containing blog details are in blog/ with the specific blog's name marking the file that contain's it's content.

All markdown files should follow Docusaurus's guidelines for folder structure for autogenerating the UI and pagination. More details are available at the Docusaurus Docs and Docusaurus Blog.

Tip

All developement for UML Class Resources has been migrated to a different repository! Check it out repository to contribute!

🔊 Adding Blogs

Blogs feature quite a bit of functionality. You can add yourself as an author, add tags to categorize blogs, and add blogs themselves.

✒️ Adding new Authors

In order to add a new author the collection of available authors, edit blog/authors.yml.
Add in the author by filling in the following template:

AUTHOR_NAME:
  name: 
  title: 
  url: 
  image_url: 
  email: 
  socials:
    github: 
    x: 
    linkedin: 
    stackoverflow:

Note

AUTHOR_NAME represents the name of the author used within code. the name attribute represents the name that will be displayed for this author. For legibility and simplicity, preferably keep them the same.

Tip

All socials attributes are optional and can be used in any combination with the exhaustive list of supported socials shown above. If you choose to opt out of providing social media information, also remove the entirety of the socials attribute in addition to each sub-attribute:

AUTHOR_NAME:
  name: 
  title: 
  url: 
  image_url: 
  email:

🏷️ Adding new tags

In order to add new tags edit blog/tags.yml.
Add in a new tag by filling in the following template:

TAG_NAME:
  label: 
  permalink: 
  description: 'Blog posts related to the TAG_NAME'

Note

In the interest of SEO and standardization, utilize the provided format for tag descriptions.
Similarly, for legibility and simplicity, preferably set the TAG_NAME and label attribute the same.

💬 Adding a new Blog page

To create a new blog page, simply create a new markdown file. The name of the file will be the title of your blog page.
Within each blog page, it's required that at least the following front-matter be provided:

---
authors: 
 - AUTHOR1
 - AUTHOR2
 - ...
---

Adding tags is optional and can be added by the following format:

---
authors:
 - ...
tags:
 - TAG1
 - TAG2
 - ...
---

Also, at a minimum it's required that you follow at least this guideline:

---
authors:
---

Your short hooking statement goes here...

<!-- truncate -->

The rest of your blog's content...

All content after the front-matter and before the truncate tag will be used as the cover content for your blog post when previewing all blog posts. This area is the short summary of your blog post.

In addition to the required front-matter and formatting instructions, feel free to add supported front-matter or content to your liking!

📊 Adding Images, Diagrams, or any local files to your blog post

If you're interested in adding any local files to your blog pages, simply place them in folder within blog/ with the same name as your blog page file. Source your files accordingly: ./BLOG_NAME/FILENAME.

🛤️ Adding New Repository to Project Docs/Activities Section

Project

To add a new project's documentation onto the project docs section of the website, you must meet a few pre-reqs:

1. The project must be a remote git repository (Github, BitBucket, etc)
2. The project's repository must contain folder with the following structure:
   

       docs 
       └── web_docs 
               └── intro.md | Introduction/
                   _category_.json

3. The project's documentation files must follow Docusaurus's doc creation guidelines.
   The _category_.json file is autogenerated at website build time. The order in which the projects are displayed on the website is determined by the order in which the projects are listed in the project_repos.json file (top to bottom order).
4. Front Matter requirements: All markdown files must have the following front-matter: (# is an integer). This will affect the order in which the doc pages are displayed on the website (top to bottom order).

   ---
   sidebar_position: #
   ---
   

In order to add your project:

1. Create a new branch from the main branch
2. Name the branch with the following convention: feat: Add new project docs: PROJECTNAME with PROJECTNAME being the name of your project.
3. Add your repository to package.json. Add your project as a key-value pair in the project_repos.json:

   {
       "<Other Project>": "<Other Project Github URL>",
       "<Your Project Name>": "<Your Project Github URL>",
   }

4. Make a Pull Request to merge your branch into main. Your project will be added to the website once the PR is approved and merged.

Activity

To add a new activity's instructions onto the activities section of the website, you must meet a few pre-reqs:

1. The activity must be a remote git repository (Github, BitBucket, etc)
2. The activity's repository must contain folder with the following structure:
   

       docs 
       └── web_docs 
               └── intro.md | Introduction/
                   _category_.json

3. The activity's documentation files must follow Docusaurus's doc creation guidelines.
   The _category_.json file is autogenerated at website build time. The order in which the activities are displayed on the website is determined by the order in which the projects are listed in the activity_repos.json file (top to bottom order).
4. Front Matter requirements: All markdown files must have the following front-matter: (# is an integer). This will affect the order in which the doc pages are displayed on the website (top to bottom order).

   ---
   sidebar_position: #
   ---
   

In order to add your activity:

1. Create a new branch from the main branch
2. Name the branch with the following convention: feat: Add new activuty docs: ACTIVITYNAME with ACTIVITYNAME being the name of your project.
3. Add your repository to package.json. Add your project as a key-value pair in the activity_repos.json:

   {
       "<Other Activity>": "<Other Activity Github URL>",
       "<Your Activity Name>": "<Your Activity Github URL>",
   }

4. Make a Pull Request to merge your branch into main. Your activity will be added to the website once the PR is approved and merged.

🔬 Local Development with HTTPS (required)

Important

As of the recent migration to OIDC with AWS Cognito, HTTPS dev sessions are required. In order to do so, please follow the directions below.

In order to develop with OIDC support locally, HTTPS is required for localhost. This can done easily by creating an SSL certificate for local use. Here are the steps:

1. Run mkcert localhost to generate localhost.pem and localhost-key.pem
2. Run mkcert -install to install the generated certificate in your trust store. After installed, restart your browser.
3. Now you can start the development session as follows:

   HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem npm start

4. Open https://localhost:3000/ to view your development session rendered to the browser.

Caution

Never share your generated .pem! The .gitignore file is preconfigured to ignore .pem files within commits. There are severe security complications in exposing your .pem files.

Note

If you don't have access to the mkcert command on your system, refer here to install mkcert. IE. For ubuntu with apt:

1. sudo apt install libnss3-tools
2. sudo apt install mkcert
3. Confirm your installation: mkcert --version

Similarly, some local environment variables must be specified in order to ensure functionality with authenication:

• Use npm run local to develop locally without authentication enabled
• Use npm start to develop locally with authentication
  • If environment variables are not configured, you will be prompted to provide them

🎉Acknowledgements

Many thanks to the UMass Lowell Cloud Computing Club members, our faculty advisor Dr. Johannes Weis, and the UMass Lowell Computer Science Department for their support and guidance.

Much thanks to our contributors as well:

Happy Coding!