Create splash message tutorial

docs/how-to-contribute/tutorials/how-to-add-splash-message.mdx

@@ -0,0 +1,96 @@
+import Admonition from '@theme/Admonition';
+
+# Tutorial: How to add a splash message to the site
+
+:::info
+
+To use all of the tools in this guide, you will need to be 13-years of age or older due to the terms of use of a software tool you will use, [GitHub](https://docs.github.com/en/site-policy/github-terms/github-terms-of-service). If you are under 13-years of age, please email me at [[email protected]](mailto:[email protected]) and we can adjust these steps so you can contribute!
+
+:::
+
+Hello there! In this tutorial, you will learn step-by-step how to add a "Splash" message to the homepage on the [homepage](https://theorybear.org) using GitHub codespaces.
+
+## Step 1: Fork the repository
+To start, [Fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo) the repository. A fork is a copy of the source code that you are free to edit, and later merge into the actual site! To do that:
+1. Navigate to https://github.com/thatrobotdev/theorybear
+2. Click the Fork button.
+3. Click "Create fork"
+
+## Step 2: Create a GitHub codespace for the site
+
+To start edtiting the site, you will be creating a **remote development environment** This is a computer running on GitHub's servers that downloads the source code of the site and allows you to edit a version of the website in your web browser!
+
+1. Navigate to your fork (usually, https://github.com/[username]/theorybear)
+2. Click the green "Code" button, and navigate to the "Codespaces" tab.
+3. Sign in/Create a new GitHub account.
+4. Click "Create codespace"
+
+You should now be able to see a copy of the website in your web browser that you can navigate through in the explore window. Clicking on a file in the left bar will allow you to edit it.
+
+## Step 3: Install the site's dependencies and start a development server
+
+Now is the time to install the packages like [docusarus](https://docusaurus.io/) and [React](https://react.dev/) that allow the site to run!
+
+1. In the bottom window, in the terminal, type in the following command and hit ENTER:
+
+`npm install`
+
+This command uses the [package manager](https://en.wikipedia.org/wiki/Package_manager) [npm](https://www.npmjs.com/) to download all of the tools that the site needs to build the website from the source code.
+
+2. Run `npm run start` to start a development server. You will see a pop-up asking to open a new window. Accept this, and you will see a live-updating version of the site that changes when you change the source code in the GitHub codespaces window!
+
+### Step 4: Add the splash message
+
+Now it's time to add the splash message! In the left window file explorer, navigate to `src/components/Splash/index.tsx`. Find the code that looks like this:
+
+```js
+let splashMessages = [
+  ["You've got this!", "JP"],
+  ["Need more cowbell!", "JP"],
+  ["Beary fun music theory ;)", "JP"],
+  ["Every Good Bear Does Fine", "JP"],
+  ["FACE!!!!!", "JP"],
+  ["Arctic Cubs Explore Glaciers :)", "JP"]
+];
+```
+
+This is the code that the website randomizes to display a splash message.
+
+The first string in the JavaScript array is the message, and the second string is the attribution. Add an element to the array with your unique splash message, and add your first name to the second string in the array.
+
+```js
+let splashMessages = [
+  ["You've got this!", "JP"],
+  ["Need more cowbell!", "JP"],
+  ["Beary fun music theory ;)", "JP"],
+  ["Every Good Bear Does Fine", "JP"],
+  ["FACE!!!!!", "JP"],
+  ["Arctic Cubs Explore Glaciers :)", "JP"],
+  ["Open source!!", "JP"]
+];
+```
+
+### Step 5: Create a pull request to add your changes to the site
+
+Now that you have edited your local version of the site, it's time to create a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests) to add your change to the site!
+
+1. In VSCode, navigate to the [Source Code tab](https://code.visualstudio.com/docs/sourcecontrol/overview) on the left panel.
+2. Enter a message in the message box that describes your changes, like "Added splash message".
+3. On the green "Confirm" button, click the arrow on the side to open more actions, clicking "Confirm and Create Pull Request". If you are asked to stage all your changes and commit them directly, hit "Yes".
+4. On the pull request screen, create a title for the pull request that describes all of your changes, and add a description if needed.
+5. Click "Create"
+
+### Step 6: 🎉 Wait for Pull Request approval, and celebrate
+
+If you navigate to https://github.com/thatrobotdev/theorybear/pulls, you should see your pull request in the list on the main repository! This will be reviewed by project maintainers, and then if accepted, merged into the main site!
+
+Thank you very much for your contribution!
+
+### Further resources
+
+If you want to learn more about open-source development, we recommend these resources to get started!
+
+- [Git and GitHub learning resources](https://docs.github.com/en/get-started/quickstart/git-and-github-learning-resources)
+- [freeCodeCamp: Web Design, JavaScript, React, and more!](https://www.freecodecamp.org/)
+- [React](https://react.dev/learn)
+- [Docusaurus](https://docusaurus.io/docs)

sidebars.js

@@ -251,6 +251,10 @@ const sidebars = {
   howToContribute: [
     "how-to-contribute/overview",
     "how-to-contribute/tri-m",
+    {
+      type: "autogenerated",
+      dirName: "how-to-contribute/tutorials"
+    }
   ],
 };
 

src/components/Splash/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+export default function Splash(): JSX.Element {
+
+let splashMessages = [
+  ["You've got this!", "JP"],
+  ["Need more cowbell!", "JP"],
+  ["Beary fun music theory ;)", "JP"],
+  ["Every Good Bear Does Fine", "JP"],
+  ["FACE!!!!!", "JP"],
+  ["Arctic Cubs Explore Glaciers :)", "JP"]
+];
+
+var randomSplash = Math.floor(Math.random() * splashMessages.length);
+
+  return (
+    <section>
+      <div className="container">
+        <div className="row">
+          <div className="col">
+            <img src="/img/logo.svg" alt="Countdown" height="100" />
+          </div>
+          <div className="col">
+            <p>{splashMessages[randomSplash][0]}</p>
+            <p>
+              <sub>
+                <Link to="/docs/how-to-contribute/tutorials/how-to-add-splash-message">
+                  Submitted by {splashMessages[randomSplash][1]}
+                </Link>
+              </sub>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/index.tsx

@@ -2,24 +2,33 @@ import React from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
+import Link from "@docusaurus/Link";
 import Alert from '@site/src/components/Alert';
 import JpsCorner from '@site/src/components/JPsCorner';
-import Countdown from '@site/src/components/Countdown';
+import Splash from '@site/src/components/Splash';
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <div className="row">
           <div className="col">
             <h1 className="hero__title">{siteConfig.title}</h1>
             <p className="hero__subtitle">{siteConfig.tagline}</p>
           </div>
           <div className="col">
-            <Countdown />
+            <Splash />
+            <div className={styles.buttons}>
+              <Link
+                className="button button--secondary button--lg"
+                to="https://theorybear.org/docs/introduction"
+              >
+                {"Let's get studying!"}
+              </Link>
+            </div>
           </div>
         </div>
       </div>