Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component center img #143

Merged
merged 23 commits into from
Jul 11, 2024
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
682bd19
refactor: add new component for image centering, change <img /> throu…
YUUU23 Jun 21, 2024
4c9d413
add: add into documentation on center_img.jsx on how to add in multip…
YUUU23 Jun 21, 2024
ab1e697
refactor: add new component for image centering, change <img /> throu…
YUUU23 Jun 21, 2024
d8610c2
add: add into documentation on center_img.jsx on how to add in multip…
YUUU23 Jun 21, 2024
805f4f2
rebase on main
YUUU23 Jun 27, 2024
5c826fb
Merge branch 'component-center-img' of https://github.com/brown-ccv/h…
YUUU23 Jun 27, 2024
2073dbe
refactor: add new component for image centering, change <img /> throu…
YUUU23 Jun 21, 2024
efb389a
add: add into documentation on center_img.jsx on how to add in multip…
YUUU23 Jun 21, 2024
e464c2d
Merge branch 'component-center-img' of https://github.com/brown-ccv/h…
YUUU23 Jun 27, 2024
9f24607
refactor: add new component for image centering, change <img /> throu…
YUUU23 Jun 21, 2024
4e7584c
add: add into documentation on center_img.jsx on how to add in multip…
YUUU23 Jun 21, 2024
87bd2aa
Merge branch 'component-center-img' of https://github.com/brown-ccv/h…
YUUU23 Jun 27, 2024
040fb9d
center_img
YUUU23 Jun 27, 2024
68f7be4
add: add into documentation on center_img.jsx on how to add in multip…
YUUU23 Jun 21, 2024
261b175
Merge branch 'component-center-img' of https://github.com/brown-ccv/h…
YUUU23 Jun 27, 2024
0fa61fe
Delete .firebaserc 2
YUUU23 Jun 27, 2024
e8a5908
Delete firebase 2.json
YUUU23 Jun 27, 2024
3639294
merge with main
YUUU23 Jul 9, 2024
aa91bf4
refactor: change semantics on component name and remove extra space
YUUU23 Jul 9, 2024
27b91da
refactor: use props delegation instead of simply props
YUUU23 Jul 9, 2024
8b899d3
refactor: use props delegation for img style
YUUU23 Jul 9, 2024
2ceddef
refactor: change to delegated, taking in image style directly
YUUU23 Jul 9, 2024
834e37b
refactor: CenteredImage component to its own component folder, correc…
YUUU23 Jul 11, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions docs/assets/CenteredImage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
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 CenteredImage({ src, alt, ...delegated }) {
let imgStyleString;
if (
delegated.imgStyle != undefined &&
Object.keys(delegated.imgStyle).length === 0
) {
imgStyleString = {};
} else {
imgStyleString = delegated.imgStyle;
}

return (
<div style={{ textAlign: "center" }}>
<img src={src} alt={alt} style={imgStyleString} />
</div>
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you destructure the delegated prop object into the image it will handle all of the style props for you!

Suggested change
return (
<div style={{ textAlign: "center" }}>
<img src={src} alt={alt} style={imgStyleString} />
</div>
);
return (
<div style={{ textAlign: "center" }}>
<img src={src} alt={alt} {...delegated} />
</div>
);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This means you can delete lines 13-21

}
26 changes: 10 additions & 16 deletions docs/deployments/firebase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 CenteredImage from "../assets/CenteredImage.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.

Expand Down Expand Up @@ -67,14 +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
<CenteredImage
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
<CenteredImage
src={firebaseWebCredentials}
alt="Firebase web credentials"
/>
Expand Down Expand Up @@ -142,7 +143,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.
Expand All @@ -152,7 +152,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
<CenteredImage
src={firebaseConsoleSettings}
alt="Firebase project settings"
/>
Expand Down Expand Up @@ -253,20 +253,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>
<CenteredImage
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"
/>
<CenteredImage src={firestoreExampleStudy} alt="Example study" />

**Additional studies are created as documents inside the `registered_studies` collection**
9 changes: 5 additions & 4 deletions docs/further_reading/version_control.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 CenteredImage from "../assets/CenteredImage.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" />
<CenteredImage 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" />
<CenteredImage 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" />
<CenteredImage src={createPR} alt="Create a pull request" />
<CenteredImage src={addReviewers} alt="Add reviewers to a pull request" />

## Best Practices

Expand Down
15 changes: 10 additions & 5 deletions docs/quick_start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,20 @@ import template1 from "./assets/template_1.png";
import workflowPermissions from "./assets/workflow-permissions.png";
import powershellAdmin from "./assets/powershell_admin.png";

import CenteredImage from "./assets/CenteredImage.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" />
<CenteredImage 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" />
<CenteredImage src={template1} alt="Create the repository" />

:::note
We recommend creating a public repository and leaving `Include all branches` unchecked
Expand All @@ -36,7 +38,10 @@ The Honeycomb repository is a template and serves as the starting point for all

_`Settings -> Actions -> General -> Workflow permissions`_

<img src={workflowPermissions} alt="GitHub workflow permissions settings" />
<CenteredImage
src={workflowPermissions}
alt="GitHub workflow permissions settings"
/>

_Additional details about template repositories can be found on the [Github Docs](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)._

Expand All @@ -47,7 +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" />
<CenteredImage src={cloneCodeButton} alt="GitHub clone repo button" />

3. Open a terminal and navigate to where you want the cloned directory

Expand Down Expand Up @@ -108,7 +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" />
<CenteredImage 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:
Expand Down