Working Group Two (wgtwo.com)

(https://www.wgtwo.com)

(https://wgtwo-dev.netlify.app/)

Adding content to the website

Creating a pull request

You can create pull requests directly from the repo - or - from your forked repository. Essentially you can follow any git workflow.

Clone the repo

git clone https://github.com/working-group-two/wgtwo.com.git

Create your new branch

git checkout -b yourname/your-branch-name

Do you development and then add the updated files to your branch

git add .

Create your commit message

git add -m "your commit message"

Push your changes

git push --set-upstream origin yourname/your-branch-name

Create a Blog

• Add a directory for the new blog post here blog/
  • Name the directory yyyy-mm-dd-name-of-blog
  • Add a file called index.md and add your content here
  • Ensure you add a <!--truncate--> after the first paragraph of your blog post to truncate the text for when viewing at wgtwo.com/blog. If not, the entire blog post will be displayed
  • Add images to this directory

Example simple blog post in /blog/2021-12-17-log4j-security-vulnerability/index.md:

---
slug: log4j-security-vulnerability
title: "Zero-day vulnerabilities - Log4j"
date: 2021-12-17
tags: [security, infrastructure, vulnerability]
authors: [jonny-griffin]
---

This will be viewed from wgtwo.com/blog and should be short.

<!--truncate-->

Now my real blog post begins
...
...

Add author information in blog/authors.yml. E.g.

mtl:
  name: Matt Long
  title: Engineering Manager for Edge, Cloud and Security
  url: https://www.linkedin.com/in/mattlong/
  image_url: /img/author-photos/mtl-li.jpg

Create a doc

• Upload your-doc.md at docs/
• Upload images at docs/images/

Markdown tutorial

For the Docs and Blog, markdown is used. Here is a great example https://stackedit.io/

In short, the main things to know for markdown

## This is large header

normal paragraph with then **bold** text and *italic* text

You can do various types of lists:

* Bulleted
* Lists

1. Numbered
2. Lists

Normal link to a website
[Description of your link](https://www.wgtwo.com)

Images can be inserted with standard markdown image inclusion:

![](./my_image.png)

This will add a full-sized image. If you want fine-grained control of image parameters, you need to use MDX (JSX in Markdown). For images, this syntax looks like this:

<img
  width="40%"
  align="right"
  style={{
    display: "block",
    margin:"auto 10px"
  }}
  src={require("!file-loader!./my_image.png").default}
/>

Website Development

Expert

The website is built using Docusaurus, React, and Typescript. This allows for custom complex integrations using APIs, as well as, the simple updating docs and blogs with markdown.

To run the website locally with hot reload:

cd website
yarn install
yarn start

Before pushing to prod, it is recommended to test with yarn build. There can be oddities with CSS changes for when React will generate the html. To test this,

cd website
yarn build
yarn run serve
yarn prettier

Note: If making a PR, a yarn prettier check is performed and will fail the PR if issues.

Website structure

$  tree -d -L 4
.
├── blog
├── docs
│   ├── about
│   ├── case-studies
│   ├── images
│   │   └── wgtwo-logos
│   └── technology
└── website
    ├── src
    │   ├── components
    │   │   ├── apply
    │   │   ├── brands
    │   │   ├── casestudy
    │   │   ├── cta
    │   │   ├── enterprise
    │   │   ├── hero
    │   │   ├── integrations
    │   │   ├── interview-process
    │   │   ├── logs
    │   │   ├── multig
    │   │   ├── ourservice
    │   │   ├── quote
    │   │   ├── rbe
    │   │   ├── security-domain
    │   │   ├── security-header
    │   │   └── technologymetrics
    │   ├── css
    │   ├── pages
    │   └── util
    ├── static
    │   ├── img
    │   │   ├── blog
    │   │   ├── favicons
    │   │   └── team
    │   └── video
    │       └── blog
    └── theme
        ├── BlogListPage
        ├── BlogPostItem
        ├── BlogPostPage
        ├── BlogSidebar
        ├── BlogTagsListPage
        └── BlogTagsPostsPage

Deploy to dev website

@jonny-wg2 setup the netlify account using his github credentials. https://app.netlify.com/sites/wgtwo-dev/overview

To work better together and showcase a future PR, we needed the ability to deploy pre-production changes to a development website. Here are the steps required to get your changes live on https://wgtwo-dev.netlify.app/

1. Create a PR with your changes and add the label devpages
2. The website-dev-pages GH action will build the PR and push it on the dev-pages branch
3. Your changes will soon be live on https://wgtwo-dev.netlify.app/. The netlify badge on top will update.

• example pr using the devpage label
• github issue with details

Production Deployment

Production Deployment

Commit to main branch -> github action to perform yarn build -> website deployed to gh-pages branch

All PRs are also tested with a github action.

Upgrading the site

Upgrading the site

It is good to keep the site updated to ensure we get the latest features from docusaurus and to ensure the site stays secure from vulnerabilities.

Upgrading the dependencies and docusaurus core platform

cd website
yarn upgrade @docusaurus/core@latest @docusaurus/plugin-client-redirects@latest @docusaurus/plugin-ideal-image@latest  @docusaurus/preset-classic@latest docusaurus-theme-classic@latest
yarn upgrade

Resolve upgrade errors and test locally: Then we need to test to make sure the website still builds. Because of upgrading we might come into some errors.

yarn build
yarn run serve