Skip to content

Latest commit

 

History

History
150 lines (103 loc) · 5.98 KB

README.md

File metadata and controls

150 lines (103 loc) · 5.98 KB

Strawberry Fair Website

Overview

This is source code for the Cambridge Strawberry Fair website.

This frontend is a static site generated by Gatsby. Content is managed via NetlifyCMS.

Local Development Setup

Prerequisites:

  • Node v12.13 or higher
  • npm 6.13.0 or higher
  • gatsby cli (npm install -g gatsby-cli)

Checkout the source code, then create a file called .env in the frontend folder of the repository, which makes available your Cloudinary cloud name, API key and API secret in the following format:

CLOUDINARY_CLOUD_NAME={your cloud name}
CLOUDINARY_API_KEY={your API key}
CLOUDINARY_API_SECRET={your API secret}

Then, run the following from this directory:

  1. npm ci
  2. npm start

Gatsby will build and run the site in develop mode. When complete, the site will be available at localhost:8000.

CMS Local Running

You access the CMS by visiting localhost:8000/admin. If the CMS settings in the branch you are working on are set to use git-gateway, you will need to log in using Netlify Identity. The details for this login are pinned in the Slack channel.

Read-only local CMS

If you are running locally and you want to look at the CMS and not change anything, you will be prompted to enter the site's URL. This is https://strawberry-fair.netlify.com/. If you only want to look at the CMS, this will be fine, but if you edit anything it will push directly to the production branch.

Edit-enabled local CMS

If you are running locally and you need to access the CMS for editing purposes, go into static/admin/config.yml and change

backend:
  name: git-gateway
  branch: production
  accept_roles:
    - admin
    - content

to

backend:
  name: github
  repo: Softwire/strawberry-fair
  branch: [ YOUR BRANCH HERE ]

ensuring you include the name of the branch you're working on.

Make sure you change it back before merging anything back into master.

This will push any changes you make to origin/[your branch], so you may want to run git pull after making any edits here to ensure your local copy stays up to date.

PropTypes

React component property type checking has been implemented, and ESLint is set up to get cross at you if you don't implement it for any new components you write.

For guidance on how to do this, check the pre-existing code, and this website for the allowable types. In short, you create an Object (YourComponent.propTypes = {...}) with a key for each property, whose value is a function that validates the type.

If you're not sure what type to make something because you're passing it off to a component you're not familiar with, simply pass the relevant propType of that component to the new propType.

For example, if your component looks like:

export const ParentComponent = ({title, passMeDown}) => (
  <React.Fragment>
    <h1>{title}</h1>
    <ChildComponent passMeDown={passMeDown}>
  </React.Fragment>
)

then, as long as ChildComponent has propTypes set up, you can re-use the validator:

ParentComponent.propTypes = {
  title: PropTypes.node,  // Generic term for a renderable object - string, number, or JSX fragment
  passMeDown: ChildComponent.propTypes.passMeDown  // Reusing the child's validator function
}

GraphQL

Gatsby uses GraphQL to query the markdown files in frontend/src/pages and populate the website. (There are some pretty good primers here and here.)

It would be a little frustrating to write the graphql queries by trial and error—especially since you need to rebuild the whole site after changing them—but luckily Gatsby makes available an interactive graphql query tester at localhost:8000/__graphql while the site is running.

CMS Editorial Workflow

When editing the website via CMS, new changes can be marked as "draft", "in review" or "ready" for deployment using the "Set status" button.

These changes can then be reviewed by all CMS users via the "Workflow" tab.

Changes will only go live when they are "published".

Behind the scenes, Netlify editorial actions automatically perform git actions as follows:

Netlify Git
Save draft Commits to a new branch and opens a pull request
Edit draft Pushes another commit to the draft branch/pull request
Publish draft Merges pull request and deletes branch

Adding Google Forms via CMS:

To add a Google Form via CMS follow these steps:
  1. Open the form on Google Forms
  2. Click send on the top right corner
  3. Select the "Send via <>" option.
  4. Click "copy" on the bottom left corner.
  5. On a new tab, go to `localhost:8000/admin`
  6. Create a new Form page
  7. Paste into the "Form" box
  8. Fill in the remaining boxes.
  9. Click "Publish" on the top right corner.

  Alternatively, in step 4 you can choose to copy the URL only, instead of the whole HTML element.

Integration with Cloudinary

Images uploaded in the CMS are hosted on Cloudinary. The API credentials can be found at the top of the dashboard after logging into Cloudinary.com.

Testing

To run unit tests, use: npm run test:unit. To run end-to-end tests, use: npm run test:e2e. To run all tests, use npm run test.

Other details

Contact form submission

At present, our contact form is linked to the google forms page of one of the strawberry fair dev team members.

You can view the responses or the form, but do not change the form itself without prior permission.