feat: explore plugin ecosystem (open-sauced#22)

closes open-sauced#8

docs/contributing/code-of-conduct.md

@@ -1,6 +1,6 @@
 # Code of Conduct
 
-## Our Pledge
+## Our pledge
 
 In the interest of fostering an open and welcoming environment, we as
 contributors and maintainers pledge to make participation in our project and
@@ -9,7 +9,7 @@ size, disability, ethnicity, gender identity and expression, level of experience
 nationality, personal appearance, race, religion, or sexual identity and
 orientation.
 
-## Our Standards
+## Our standards
 
 Examples of behavior that contributes to creating a positive environment
 include:
@@ -31,7 +31,7 @@ advances
 * Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
-## Our Responsibilities
+## Our responsibilities
 
 Project maintainers are responsible for clarifying the standards of acceptable
 behavior and are expected to take appropriate and fair corrective action in

docs/contributing/getting-started.md → docs/contributing/introduction-to-contributing.md

@@ -1,18 +1,20 @@
-# Getting started
+# Introduction to contributing
 
 Contributions are always welcome, no matter how large or small. Before contributing,
 please read the [code of conduct](./code-of-conduct.md).
 
 Some thoughts to help you contribute to this project
 
-## Recommended Communication Style
+## Recommended communication style
 
 1. Always leave screenshots for visuals changes
 1. Always leave a detailed description in the Pull Request. Leave nothing ambiguous for the reviewer.
 1. Always review your code first. Do this by leaving comments in your coding noting questions, or interesting things for the reviewer.
 1. Always communicate. Whether it is in the issue or the pull request, keeping the lines of communication helps everyone around you.
 
-## Setup (forks are preferred).
+## Setup
+
+TL;DR: forks are preferred.
 
 ```shell
 git clone https://github.com/<your-name>/open-sauced
@@ -35,7 +37,7 @@ For running the test suite, use the following command. Since the tests run in wa
 npm test
 ```
 
-## Pull Requests
+## Pull requests
 
 ___We actively welcome your pull requests, however linking your work to an existing issue is preferred.___
 
@@ -52,7 +54,7 @@ ___We actively welcome your pull requests, however linking your work to an exist
 
 *note for maintainers: All pull requests need a label to assist automation. See the [template](https://github.com/open-sauced/open-sauced/blob/HEAD/.github/release-drafter.yml) to guide which labels to use.*
 
-### PR Validation
+### PR validation
 
 Examples for valid PR titles:
 
@@ -84,7 +86,7 @@ If you would like to contribute to the project for the first time, please consid
 
 Also, all questions are welcomed.
 
-## Triage Team
+## Triage team
 
 The Triage team is inspired by [expressjs/express](https://github.com/expressjs/express/blob/HEAD/Triager-Guide.md). This team exists to create a path for making contributions to this project and open source. All Triage Team members are expected to follow this guide: [TRIAGE_GUIDE.md](./triage-guide.md)
 
@@ -100,7 +102,7 @@ Open Sauced is a part of GitHub Sponsors. If you would like to contribute, pleas
 
 Do you have questions? Join the conversation in our [Discord](https://discord.gg/U2peSNf23P).
 
-## Coding Tips
+## Coding tips
 
 - Ask questions if you are stuck.
 - Use [CSS variables](https://github.com/open-sauced/open-sauced/blob/HEAD/src/styles/variables.js)

docs/contributing/triage-guide.md

@@ -1,11 +1,11 @@
-# Triage Guide
+# Triage guide
 
-## How do I Join the Triage Team?
+## How do I join the triage team?
 
 1. Sign up for [opensauced.pizza](https://opensauced.pizza)
 2. Leave a reply in the [invite discussion](https://github.com/open-sauced/open-sauced/discussions/638).
 
-## Issue Triage Process
+## Issue triage process
 
 When a new issue or pull request is opened the issue will be labeled with `needs triage`. If a triage team member is available they can help make sure all the required information is provided. Depending on the issue or PR there are several next labels they can add for further classification:
 
@@ -18,7 +18,7 @@ When a new issue or pull request is opened the issue will be labeled with `needs
 
 In all cases, issues may be closed by maintainers if they don't receive a timely response when further information is sought, or when additional questions are asked.
 
-## Approaches and Best Practices for getting into triage contributions
+## Approaches and best practices for getting into triage contributions
 
 Review the project's contribution guideline if present. In a nutshell, commit to the community's standards and values. Review the documentation, for most of the projects it is just the README.md, and make sure you understand the key APIs, semantics, configurations, and use cases.
 
@@ -33,17 +33,17 @@ Issues labeled as `good first issue` represent a curated list of easy contributi
 - Issues that `needs triage` cannot be labeled as `good first issues`.
 - It is better to have no `good first issue` labeled issues than to have a `good first issue` confusing enough to deter a contributor from contributing. 
 
-## Removal of Triage Role
+## Removal of triage role
 
 There are a few cases where members can be removed as triagers:
 
-- Breaking the [CoC](./contributing/code-of-conduct.md) or [project contributor guidelines](./getting-started.md)
+- Breaking the [CoC](./code-of-conduct.md) or [project contributor guidelines](./introduction-to-contributing.md)
 - Abuse or misuse of the role as deemed by the TC
 - Lack of participation for more than 6 months
 
 If any of these happen we will discuss as a part of the triage portion of the regular TC meetings. If you have questions feel free to reach out to any of the TC members.
 
-## Other Helpful Hints:
+## Other helpful hints:
 
 - When reviewing the list of open issues there are some common types and suggested actions:
   - New/unattended issues or simple questions: A good place to start

docs/introduction.md

@@ -2,7 +2,7 @@
 slug: /
 ---
 
-# What is Open Sauced ?
+# Introduction to Open Sauced
 
 ![Example banner](../static/img/what-is-opensauced.png)
 

docs/maintainers/setup.md → docs/maintainers/setting-up-a-new-repository.md

@@ -1,4 +1,4 @@
-# Creating a new project 
+# Setting up a new repository 
 
 ## How do I Join the Maintainers Team?
 

docs/styling/dark-mode.md → docs/technical/dark-mode-explained.md

@@ -1,8 +1,8 @@
-# Dark Mode Feature
+# Dark mode explained
 
 This project supports "dark mode" styling, and by default it will follow the color preference on your device. It also allows for overriding this using buttons at the top right of the screen, which will persist the preference to local storage on your device. More info about color preference web API's can be found here in the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
 
-## Implementation Approach
+## Implementation approach
 
 The implementation is done in 4 steps.
 - The functional component in `src/containers/App.js` has a `useEffect` hook that checks the user's `localStorage` for a stored entry of `theme`.  This value should be either "dark", "light", no entry at all. The hook runs only on initial page load, and if no local storage entry is found, it uses a default value of "system". It applies this value to the `ThemeContext` defined in `src/ThemeContext.js`.
@@ -18,23 +18,23 @@ The implementation is done in 4 steps.
 
 - Found in `src/components/ThemeButtonGroup.js` is a component with three buttons, each of which can be used to change the `ThemeContext` value.
 
-## Theme Context Use
+## Theme context use
 
 At this time, the `ThemeContext` only affects the `ThemeButtonGroup` component from a logic standpoint, but the `body.dark` CSS class declaration affects many places in the codebase. The broad effects of the `body.dark` CSS class declaration are found in `src/index.css`.
 There are more specific impacts for components that extend `styled-components` (found in `src/styles/`) and the style declarations for these refer to descendants of `body.dark`. These impacts are found in overrides of color-related properties such as `color`, `background-color`, `fill`, and `filter`.
 
-## SVG Images
+## SVG images
 
 SVG images can have their coloring controlled by a few different means, depending on the way they're rendered. This project has some mix in its use of SVG files for icons/images. 
 - In the case of its use of the library `@primer/octicons-react`, these SVG files are rendered directly into markup rather than as the `src` attribute of an `<img>` tag, and so the `fill` CSS property is controlled by `src/index.css`.
 - In the case of its use of SVG files in the repository, these are rendered as the `src` attribute of an `<img>` tag, and therefore the `filter` CSS property is controlled by `src/index.css`.
 - In the case of an SVG used as a background-image for a form element (`src/styles/Search.js`), we use an alternate SVG file for dark mode whose `fill` property has been adjusted, since this use case doesn't allow for controlling the SVG colors separately from the form element's background colors.
 
-## Loading Skeletons
+## Loading skeletons
 
 This project uses components from the library `react-loading-skeleton`, and these are addressed in `src/index.css` based on [this file](https://github.com/dvtng/react-loading-skeleton/blob/master/src/skeleton.js) from their source code.
 
-## Best Practices Moving Forward
+## Best practices moving forward
 
 For future work, components with coloring aspects should make use of the `styled-components` library and should include CSS style declarations to handle the case of `body.dark`. For example, below is a component definition used in `src/styles/TextArea.js`:
 

docs/contributing/fetching-data-from-github.md → docs/technical/fetching-data-from-github.md

@@ -1,24 +1,24 @@
-# Fetching Data from the GitHub GraphQL API
+# Fetching data from the GitHub graphql API
 
 Over the past few years, GitHub has been enabling developers to build on our platform as 3rd party integrators. This enablement does not come without limitations such as rate-limiting and token access. Open Sauced originally started as a way to try out the GitHub GraphQL API with a production-ready application.
 
-## Implementation Approach
+## Implementation approach
 
 Open Sauced is exclusively powered by the public data from open source repos. Not only is the data drawn from open sourced repos, the onboarding flow for Open Sauced walks the user through creating their own open sourced repo in order to track their own contributions. 
 
 ## OneGraph
 
 [OneGraph](https://www.onegraph.com/) is the tool used to consume the GitHub GraphQL API through one consistent GraphQL interface.
 
-## Persisted Queries
+## Persisted queries
 
 Persisted queries are an advanced GraphQL feature that allow clients to pre-register queries with the server. In a typical workflow, the client will send the query to the server as part of a build process and the server will send back an id for the query. When the client wants to run the query, it sends the id instead of the full query string.
 
 Developers use persisted queries because they reduce the amount of bandwidth sent from the client to the server and they improve security by locking down the queries that can be sent to the server.
 
 OneGraph makes this all easy to do, and you can read up more on that in [their documentation](https://www.onegraph.com/docs/persisted_queries.html). 
 
-## Goals Repository
+## Goals repository
 
 Each Open Sauced user leverages their own GitHub repository as a database. The repository is generated during sign up and is the companion for finding open source contributions to make. All data in this repository is a mirror of the data you see on the opensauced.pizza dashboard.
 
@@ -31,7 +31,7 @@ The Open Sauced goal data in this list is populatated using the [goals-caching.y
 The Open Sauced recommendation data is stored using the logged in user's starred repositories. This data is accessible via the GitHub API and stored publically in goals repo for easy rendering. The list is populatated using the [goals-caching.yml](https://github.com/open-sauced/actions/blob/main/goals-caching/update-open-sauced-goals-cache.js). _Plans are being developed to power platform wide recommendations using this data, this is pending the reviewing of the GitHub TOCs_.
 
 
-## Use of API in Components
+## Use of API in components
 
 The following table shows which components (`src/components/*.js`) use which API functions (`src/lib/apiGraphQL.js', 'src/lib/persistedGraphQL.js`), and what they do.
 

docs/storybook/getting-started.md → docs/technical/introduction-to-storybook.md

@@ -1,4 +1,4 @@
-# Getting started
+# Introduction to storybook
 
 Storybook is being leveraged to mock out visual React components. The latest version of the design system can be found at this [URL](https://sauced-components.netlify.app/).
 
@@ -8,7 +8,7 @@ To run storybook, use this command:
 npm run storybook
 ```
 
-## UI Categories
+## UI categories
 
 Storybook is broken into several categories:
 
@@ -22,7 +22,7 @@ Storybook is broken into several categories:
 <li><b>Miscellaneous:</b> These are components that currently don't fit neatly into the above categories.</li>
 </ul>
 
-## Making changes to Storybook
+## Making changes to storybook
 
 This section details how to make changes to Storybook, mainly creating new categories or UI elements.
 

docusaurus.config.js

@@ -56,23 +56,28 @@ module.exports = {
         },
       ],
     },
+    colorMode: {
+      defaultMode: 'light',
+      disableSwitch: false,
+      respectPrefersColorScheme: false,
+    },
     footer: {
       style: 'dark',
       links: [
         {
           title: 'Docs',
           items: [
             {
-              label: 'Contributing',
-              to: '/contributing/getting-started/',
+              label: 'Contributing guide',
+              to: '/contributing/introduction-to-contributing/',
             },
             {
-              label: 'Styling',
-              to: '/styling/dark-mode/',
+              label: 'Technical guide',
+              to: '/technical/dark-mode-explained/',
             },
             {
-              label: 'Storybook',
-              to: '/storybook/getting-started/',
+              label: 'Maintainer guide',
+              to: '/maintainers/setting-up-a-new-repository/',
             },
           ],
         },
@@ -120,10 +125,78 @@ module.exports = {
           // Please change this to your repo.
           editUrl:
             'https://github.com/open-sauced/docs.opensauced.pizza/edit/main/',
+          lastVersion: 'current',
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
+        sitemap: {
+          changefreq: 'weekly',
+          priority: 0.5,
+        },
+      },
+    ],
+  ],
+  plugins: [
+    [
+      '@docusaurus/plugin-pwa',
+      {
+        debug: true,
+        offlineModeActivationStrategies: [
+          'appInstalled',
+          'standalone',
+          'queryString',
+        ],
+        pwaHead: [
+          {
+            tagName: 'link',
+            rel: 'icon',
+            href: '/img/logo.svg',
+          },
+          {
+            tagName: 'link',
+            rel: 'manifest',
+            href: '/manifest.json', // your PWA manifest
+          },
+          {
+            tagName: 'meta',
+            name: 'theme-color',
+            content: '#313d3e',
+          },
+          {
+            tagName: 'meta',
+            name: 'apple-mobile-web-app-capable',
+            content: 'yes',
+          },
+          {
+            tagName: 'meta',
+            name: 'apple-mobile-web-app-status-bar-style',
+            content: '#000',
+          },
+          {
+            tagName: 'link',
+            rel: 'apple-touch-icon',
+            href: '/apple-touch-icon.png',
+          },
+          {
+            tagName: 'link',
+            rel: 'mask-icon',
+            href: '/img/logo.svg',
+            color: 'rgb(37, 194, 160)',
+          },
+          {
+            tagName: 'meta',
+            name: 'msapplication-TileImage',
+            content: '/img/logo.svg',
+          },
+          {
+            tagName: 'meta',
+            name: 'msapplication-TileColor',
+            content: '#000',
+          },
+        ],
       },
     ],
   ],