Component center img

docs/assets/center_img.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+/**
+ * Component for centering an image in the docs
+ *
+ * @param {*} props :
+ *  src: image source
+ *  alt: image alternative text
+ *  imgStyle: object, any image styles (props can be passed in as: `imgStyle={{ maxHeight: "600px", border: "solid" }}`)
+ * @returns a component for uniformally centering images in the doc
+ */
+
+export default function CenterImg(props) {
+  let imgStyleString;
+  if (props.imgStyle != undefined && Object.keys(props.imgStyle).length === 0) {
+    imgStyleString = {};
+  } else {
+    imgStyleString = props.imgStyle;
+  }
+
+  return (
+    <div style={{ textAlign: "center" }}>
+      <img src={props.src} alt={props.alt} style={imgStyleString} />
+    </div>
+  );
+}

docs/deployments/firebase.mdx

@@ -9,6 +9,7 @@ import firebaseConsoleSettings from "../assets/firebase/firebase-console-setting
 import firebaseWebCredentials from "../assets/firebase/firebase-web-credentials.png";
 import firestoreCreateStudy from "../assets/firebase/firestore-create-study.png";
 import firestoreExampleStudy from "../assets/firebase/firestore-example-study.png";
+import CenterImg from "../assets/center_img.jsx";
 
 Honeycomb comes with methods and configurations to deploy tasks with [Firebase](https://firebase.google.com/). These tools make it possible to reach a wider audience by hosting your task online.
 
@@ -67,17 +68,14 @@ _A `command not found` error usually indicates firebase-tools has not been insta
    1. Return to your project on the [Firebase console](https://console.firebase.google.com/)
    2. Navigate to your project setting
 
-      <img
+      <CenterImg
         src={firebaseConsoleSettings}
         alt="Firebase project settings"
       />
 
    3. Scroll down and copy the auto-generated values from the Firebase console to the corresponding variables in the `.env.firebase` file in the `env` folder of your Honeycomb task repo
 
-      <img
-        src={firebaseWebCredentials}
-        alt="Firebase web credentials"
-      />
+      <CenterImg src={firebaseWebCredentials} alt="Firebase web credentials" />
       <br />
       <br />
 
@@ -142,7 +140,6 @@ firebase init hosting:github
 Firebase will update the files `firebase-hosting-pull-request.yml` and `firebase-hosting-merge.yml` inside the `.github/workflows/` directory. Please ensure the "run" step is `npm ci && npm run build:firebase` in both files!
 :::
 
-
 ## Managing Data
 
 Honeycomb ships with a CLI script for managing data in Firebase. A local service account must be created in order to use it.
@@ -152,10 +149,7 @@ Honeycomb ships with a CLI script for managing data in Firebase. A local service
 Service accounts are accounts that are not attached to a human user. They authorize access to a Firebase project without someone physically logging in online. We use a service account to give the download script access to the Firestore database automatically.
 
 1. Return to the project settings your project on the [Firebase console](https://console.firebase.google.com/)
-   <img
-     src={firebaseConsoleSettings}
-     alt="Firebase project settings"
-   />
+   <CenterImg src={firebaseConsoleSettings} alt="Firebase project settings" />
 2. Click on the "Service accounts" tab
 3. Near the bottom, click "Generate new Private key" and "Generate Key"
 
@@ -253,20 +247,14 @@ Firestore rules define every valid path for data in your project. Attempting to
 5. Click "Add Field".
 6. Enter `registered_participants` as the field name, and set the type "array"
 7. Add the id of each study participant to the array as type "string"
-
-   <div style={{ textAlign: "center" }}>
-     <img
-       src={firestoreCreateStudy}
-       alt="Create a study"
-       style={{ maxHeight: "600px" }}
-     />
-   </div>
+   <CenterImg
+     src={firestoreCreateStudy}
+     alt="Create a study"
+     imgStyle={{ maxHeight: "600px" }}
+   />
 
 The study should look like this when you're finished:
 
-<img
-  src={firestoreExampleStudy}
-  alt="Example study"
-/>
+<CenterImg src={firestoreExampleStudy} alt="Example study" />
 
 **Additional studies are created as documents inside the `registered_studies` collection**

docs/further_reading/version_control.mdx

@@ -9,25 +9,26 @@ import gitBasics from "../assets/further_reading/git_basics.png";
 import gitBranch from "../assets/further_reading/git_branch.png";
 import createPR from "../assets/further_reading/create_pull_request.png";
 import addReviewers from "../assets/further_reading/add_reviewers.png";
+import CenterImg from "../assets/center_img.jsx";
 
 ## Git Overview
 
 Git is a version control system that enables you to track changes to files. With Git, you are able to revert files back to previous versions, restore deleted files, remove added files and even track down where a particular line of code was introduced.
 
 Nearly all operations that are performed by Git are in your local computing environment, with the exception of a few used to synchronize with the GitHub remote host. Some of the most common git operations are depicted below.
 
-<img src={gitBasics} alt="Git basics" />
+<CenterImg src={gitBasics} alt="Git basics" />
 
 If you would like to make any changes to current repository, it is always good to start with creating a feature branch, where you can save all the changes.
 
-<img src={gitBranch} alt="Example branches diagram" />
+<CenterImg src={gitBranch} alt="Example branches diagram" />
 
 ## Create a Pull Request
 
 Pull requests are useful before you merge your branch with the main branch. You can request a review from your colleagues and check for any conflicts with the main branch. After you pushed all the changes to your branch, you can go to the original GitHub repository and click on the pull request.
 
-<img src={createPR} alt="Create a pull request" />
-<img src={addReviewers} alt="Add reviewers to a pull request" />
+<CenterImg src={createPR} alt="Create a pull request" />
+<CenterImg src={addReviewers} alt="Add reviewers to a pull request" />
 
 ## Best Practices
 

docs/quick_start.mdx

@@ -15,24 +15,20 @@ import template1 from "./assets/template_1.png";
 import workflowPermissions from "./assets/workflow-permissions.png";
 import powershellAdmin from "./assets/powershell_admin.png";
 
+import CenterImg from "./assets/center_img.jsx";
+
 ## Creating Your Task Repository
 
 The Honeycomb repository is a template and serves as the starting point for all tasks. Creating your repository from the template starts your project with the same directory structure and files as an existing repository.
 
 1. Go to the [Honeycomb repository](https://github.com/brown-ccv/honeycomb)
 2. Click on `Use this template` and select `Create a new repository`.
 
-   <img
-     src={template0}
-     alt="Use this template"
-   />
+   <CenterImg src={template0} alt="Use this template" />
 
 3. Enter the owner, name, and description of your repository and click on `Create repository from template`.
 
-   <img
-     src={template1}
-     alt="Create the repository"
-   />
+   <CenterImg src={template1} alt="Create the repository" />
 
    :::note
    We recommend creating a public repository and leaving `Include all branches` unchecked
@@ -42,7 +38,7 @@ The Honeycomb repository is a template and serves as the starting point for all
 
    _`Settings -> Actions -> General -> Workflow permissions`_
 
-   <img
+   <CenterImg
      src={workflowPermissions}
      alt="GitHub workflow permissions settings"
    />
@@ -56,10 +52,7 @@ With the repository now setup it can be cloned onto your computer.
 1.  Navigate to the repository on [GitHub](https://github.com).
 2.  Click the `Code` button and copy the URL
 
-    <img
-      src={cloneCodeButton}
-      alt="GitHub clone repo button"
-    />
+    <CenterImg src={cloneCodeButton} alt="GitHub clone repo button" />
 
 3.  Open a terminal and navigate to where you want the cloned directory
 
@@ -120,10 +113,7 @@ See [Prerequisites](prerequisites) for more information about these programs.
 
 1. Run Powershell as an admin from the start menu
 
-   <img
-     src={powershellAdmin}
-     alt="Powershell admin launcher"
-   />
+   <CenterImg src={powershellAdmin} alt="Powershell admin launcher" />
 
 2. Navigate to the root directory of your cloned repository
 3. Paste the following command and follow the prompts to install the listed programs:
@@ -171,28 +161,22 @@ NVM (Node Version Manager) is a tool for installing and using multiple versions
 
 1.  Install NVM
 
-    <Tabs
-      groupId="os"
-      queryString
-      defaultValue="mac"
-    >
-      <TabItem
-        value="win"
-        label="Windows"
-      >
+    <Tabs groupId="os" queryString defaultValue="mac">
+      <TabItem value="win" label="Windows">
         <em>
           The previous step installs{" "}
-          <a href="https://github.com/coreybutler/nvm-windows">NVM for Windows</a> via the winget
-          package manager. Note that this is a different tool than NVM with slight differences
-          needed for compatibility with Windows.
+          <a href="https://github.com/coreybutler/nvm-windows">
+            NVM for Windows
+          </a>{" "}
+          via the winget package manager. Note that this is a different tool
+          than NVM with slight differences needed for compatibility with
+          Windows.
         </em>
       </TabItem>
-      <TabItem
-        value="mac"
-        label="macOS"
-      >
+      <TabItem value="mac" label="macOS">
         <CodeBlock language="sh">
-          curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
+          curl -o-
+          https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
         </CodeBlock>
       </TabItem>
     </Tabs>
@@ -386,7 +370,9 @@ The quick start guide details a [command line](version_control#git-commands) wor
    // ...
 
    export function buildTimeline(jsPsych, studyID, participantID) {
-     console.log(`Building timeline for participant ${participantID} on study ${studyID}`);
+     console.log(
+       `Building timeline for participant ${participantID} on study ${studyID}`
+     );
 
      // highlight-delete-next-line
      const timeline = buildHoneycombTimeline(jsPsych);