ainc/ainc-gatsby-sanity

Ainc Sanity Gatsby

ainc-gatsby-sanity

A portfolio using structured content and a static site builder.

Deployed from sanity.io/create.

What you have

• A blazing fast portfolio with Gatsby.js
• Structured content using Sanity.io
• Global deployment on Netlify

Quick start

1. Clone this repository from your GitHub account
2. yarn install in the project root folder on local
3. yarn run dev to start the Studio and frontend locally **
   • Your Studio should be running on http://localhost:3333
   • Your frontend should be running on http://localhost:8000
4. yarn run build to build to production locally ** Note: You may have better success opening two separate terminals to and running yarn run dev in both /studio and /web

Notes

• Having troucble with yarn install? Verified Node versions: 14.xx, 17.xx

Workflow to create new documents for production

Steps

Import/Export Documentation

• Use local machine to create document on your personal tagged dataset (Commit for reference on how to switch to change tags)

• Export from your tagged dataset, then import into the dev dataset using either --missing or --replace flags (Documentation)

• In the dev dataset, then add content to your new document in the Sanity Dashboard

• Then export from the dev dataset, and import into the production dataset using the --missing skip flag (adds any missing data, skips any data with same Id's)

• Possible have to do sanity graphql deploy to update the GraphQL (After adding code in `/documents))

• Yay you're done... hopefully (Refer to the commands below)

• • Note: these commands will only transfer the content of the documents, you will still need to add the document code to the studio/douments folder

Confirmed command sequence once a schema is made in your tagged dataset

These 2 commands will export from your tagged dataset into the dev dataset

• sanity dataset export dev --tag [tagName] ./tagged.tar.gz (Export from tagged dataset)
• sanity dataset import ./tagged.tar.gz dev --missing skip (Import into dev dataset) this will add all missing data and skip any data with the same id

After this step, you would populate the content in sanity

Then, these 2 commands will import your data from dev to production

• sanity dataset export dev ./dev.tar.gz (Export from dev dataset) Create a backup of production dataset (Possible GitHub action)
• sanity dataset export production ./production.tar.gz (Export from production dataset)

Import from dev into production

• sanity dataset import ./dev.tar.gz production --missing skip (Import into production dataset)

Sanity Workflow

Sanity runs into issues with overwriting work when trying to update schemas simultaneously on different branches. The ideal workflow for updating schema is as follows:

1. Plan out all necessary schema for development.

2. Add schema and push to the main branch on Github before any changes are made by other users.

3. Other users should pull your schema changes before adding any new schema.

4. Continue development on the front-end accessing the already committed schema.

The entire goal is to eliminate concurrent development of Sanity schema since they will overwrite each other.

Other potential solutions:

• Sanity migration command

Algolia Documentation

ainc-gatsby-sanity's Issues

Create I Have an Idea Page

https://www.awesomeinc.org/idea

Core Values Section

Core Values section images aren't being displayed. Could be because of a z-index problem with the bg and filter, or something else entirely.

This commit has the most relevant code.

Finish /alumni page

Live site: https://www.awesomeinc.org/alumni
Dev Site: https://ainc-gatsby-sanity.netlify.app/alumni/

This page exists in our dev codebase but looks like a lot of the page needs built

Change footer to include missing QuickLinks (& Make /parking)

Missing Links:

• Innovation Incubated (Dont do for now)
• Startup Pipeline (Startup pipeline PDF)
• Community Yearbook (Need to add yearbook pdf)
• Rent Space (/workspace)
• Map (Gmaps Link)

Also create /parking and add to footer

• Static page, no need for sanity

Loading the homepage

When first loading the homepage, two arrows are flashed at the beginning of the screen. It is probably related to this component:
https://github.com/ainc/ainc-gatsby-sanity/blob/main/web/src/components/HomepageSlider/HomepageSlider.js

Create /intro-to-web-development

Reference: https://www.awesomeinc.org/intro-to-web-development

Seems like a lot of the text could be static, need to figure out what to do about the upcoming dates section (whether to make a sanity doc or not)

Make FAQ Accordion component (Not sure if we want sanity for this):

• props:
  • Question
  • Answer

Finishing touches for /learn page.

The bottom portion of the page needs some margin and to match the live site with the Proven Success section.

The image in between sections is unnecessary, that can be moved down into the bottom section.

Create Bootcamp Page

Sanity Document Types:

• Companies
• Testimonials
• Stats
• Meet Stephen

(Prod Issue) Banner fades away on homepage

The 5A banner at the top of the page fades away only on the homepage.

on the production website (https://ainc-gatsby-sanity.netlify.app/)

Create Courses

Make announcement banner responsive

Create 5Across Program guide

1. Create the page for mobile devices
2. Create and connect the sanity documents

Create the /weekofcode Page

https://www.awesomeinc.org/weekofcode

All content should be static except for camp dates and registration links

• Ignore the cookie trail below the header
• Use Accordion component from react-bootstrap

MD Source: https://raw.githubusercontent.com/ainc/ainc-2018/master/_courses/weekofcode.md

Create /404 page

Example: https://www.awesomeinc.org/sfd

Create Redundancy for featured event on homepage

If the event date has passed, there is no featured event to display on homepage and it breaks.

Create /contact page

https://www.awesomeinc.org/contact

Seems very simple with just a title and iframe to zoho link for the contact form

Also need to link to the Contact in footer

Create /coding-club-preview page

https://www.awesomeinc.org/coding-club-preview

Could maybe implement this into a sanity doc but not sure if that is necessary (cc @raney24 )

Card Mosaic (events section) problems

• Section is not responsive
• Need a default for empty props fields
• Events show up twice if they are featured and coming up

(Investigate) Fix x-scroll on various pages

Press page
Homepage (podcase section)
About page
Workspace
...and maybe more

On the homepage, this was fixed by making sure all Sections with row were placed inside of a container

Create /careers page

https://www.awesomeinc.org/careers

Connect to Sanity document so jobs can be easily edited/posted

Will probably have to be able to add a custom title then text, some jobs have different fields than others
Also need a button/slider to select whether the job is active (posted) or not

Edit: Sanitys block type is probably a much better solution

Button Modal Component

Use react bootstrap modal.
Must be reusable.

Create /team-alpha page

https://www.awesomeinc.org/team-alpha

• Sanity Doc
  • Name
  • Picture
  • Team/Role
  • Favorite Rule
  • Favorite Song
  • Favorite Person
  • Random Fact

Continuous Deployment / Staging branches with Sanity Studio

Each time someone makes a change to Sanity, it often breaks the production dataset. We need to set up a way for a staging dataset and a production dataset.

Link for ref: https://www.sanity.io/guides/multi-environment-deployments

typo

https://www.awesomeinc.org/alumni

Create /Press page

Create the press page. Make the Press articles a Sanity Content type.

Podcast page isn't generating

.createPage is not allowing the site to build on Netlify.

error message: error UNHANDLED REJECTION Couldn't find temp query result for "/podcast".

Build link

Duplicate by uncommenting this code and running netlify build locally.

Create FAQ pages

These pages are the same just with different questions

Could most likely create a sanity doc of some sort

• https://www.awesomeinc.org/learn/coding-club-faq
• https://www.awesomeinc.org/india/faq (Also here #74 )

Create 5A banner

Sanity query to get upcoming 5A and maybe the title and other info

Create /fellowship/perks page

https://www.awesomeinc.org/fellowship/perks

Seems like it could be a static page, no need for sanity

Create /thanks page

https://www.awesomeinc.org/thanks

Create /Parking Page

@megansizemore I can't remember if you had created this or not? If not, can I put this on your list?

awesomeinc.org/parking

Fix navbar

Replicate awesomeinc.org

• Add hover effect
• Add links to all pages
• Mobile, hamburger menu needs to be styled
• Remove reduntant item in dropdowns
• Move hamburger beside logo
• Mobile - make dropdowns links

Nice to have:

• Animation on mouse hover

Create Podcast page

Create a page similar to the /blog page for our podcast. This can live at /podcast.

Refer to this commit for reference on how this is being imported.

In short, we used gatsby-source-rss-feed to import the podcasts from Anchor (at this URL: https://anchor.fm/s/81dfae4/podcast/rss)

I don't know what data we get from Anchor, so it may not match the /blog exactly.

Since it likely won't be the exact same, we can create a new component.

Create /mentors page

https://www.awesomeinc.org/mentors/

Seems simple enough

• Create sanity doc for entering the mentors
  • Name
  • Picture
  • Occupation
  • LinkedIn URL

Notes Pages & Sanity Doc

Sanity Doc could include

• Note Title (Auto generate link from title slug)
• Portable Text Editor (To allow manual writing or iframe embed)

Then need to make these pages:

/mobile-apps-with-flutter
/intro-to-design
/android-crash
/android-sportsball-fanatic
/basicweb-crash
/after-school-coding-club
/dayofcode
/frontweb2
/ios-crash
/k12-teacher
/php-crash
/unity-crash
/weekofcode-hw
/woc

Create India Pages

Create /learn/youth page

https://www.awesomeinc.org/learn/youth

Straightforward, and just like the other pages, don't worry about sections bleeding into each other.

Create dynamic page titles

Page titles should be included in each page. It would be nice to have these be dynamic using the Layout.js component. Do you think that is the best way to do that? This will allow us to code the page titles, or we can pass page title from a sanity document, etc.

Hover effect on About page

The team section on the about page needs the hover effect for the names.

https://www.awesomeinc.org/about

Margin on ModalCustom

The modal has random margin that adds unnecessary scroll when the modal is opened.

Netlify site not deploying new commits

Seems like Netlify is getting caught up on the GraphQL when trying to deploy new commits

It is the same error on all of these commits

Create 5 Across Page

Create confirmation pages

Static pages, no need for sanity

https://www.awesomeinc.org/confirmation/salesforce
https://www.awesomeinc.org/confirmation/bootcamp
https://www.awesomeinc.org/confirmation/bootcamp-download

Create Legality pages

https://www.awesomeinc.org/privacy
https://www.awesomeinc.org/terms

These both could be markdown pages (Ex: pages/terms/index.md)

This allows easy copy paste from old site

• Privacy Text
• Terms Text

Create Links Page

https://www.awesomeinc.org/links

Podcast page updated

@raney24 I have changed some things to the podcast page (reference #15 )

create salesforce landing page

https://www.awesomeinc.org/salesforce

Create /learn/adults page

Create this page: https://www.awesomeinc.org/learn/adults

Create Unsubscribe page

https://www.awesomeinc.org/unsubscribe

Responsiveness on About and Fellowship page

and maybe others
make pages responsive while finding a solution that makes both pages responsive with the same block of code