-
Notifications
You must be signed in to change notification settings - Fork 6
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
chore: update readme.md #3
Closed
Closed
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,326 +1,73 @@ | ||
| # Prist | A Gatsby & Prismic Starter | ||
| <h1 align="center"> | ||
| <br> | ||
| <img height="100px" src="./src/images/logo.svg" /> | ||
| <br> | ||
| </h1> | ||
|
|
||
| A light-themed starter powered by [Gatsby v2](https://www.gatsbyjs.org) and [Prismic](https://prismic.io/) to showcase portfolios and blogs. | ||
| <p align="center"> | ||
| This repository contains the main <strong>Ristek Open Source</strong> website source code. | ||
| We are the world's largest student-led and product-centered open source organization with 2+ million users and 200 community maintainers. | ||
| </p> | ||
|
|
||
| <img width="1280" alt="prist" src="https://user-images.githubusercontent.com/5288685/63654882-51787e00-c746-11e9-9e9e-2ab823129d93.png"> | ||
| ## Table of contents | ||
|
|
||
| - [Table of contents](#table-of-contents) | ||
| - [Requirements](#requirements) | ||
| - [Installation](#installation) | ||
| - [Project Structure](#project-structure) | ||
| - [Top-level directory layout](#top-level-directory-layout) | ||
| - [Source files](#source-files) | ||
| - [License](#license) | ||
|
|
||
| ### 👩💻 [Demo website](http://prist.marguerite.io) | ||
| ## Requirements | ||
| >This section contains necessary requirements to run this project. | ||
|
|
||
| ## ✨ Features | ||
| - [Node JS](https://nodejs.org/en/download/) | ||
|
|
||
| - Landing page with customizable Hero, Portfolio preview, and About component. | ||
| - [Emotion](https://emotion.sh/docs/styled) styled components | ||
| - Blog layout and pages | ||
| - Portfolio layout and pages | ||
| - Google Analytics | ||
| - Mobile ready | ||
| ## Installation | ||
|
|
||
| ## 🚀 Getting Started | ||
| > This section contains installation steps to help run this project. | ||
|
|
||
| [](https://app.netlify.com/start/deploy?repository=https://github.com/margueriteroth/gatsby-prismic-starter-prist) | ||
|
|
||
| 1. **Create a Gatsby site.** | ||
|
|
||
| Use the Gatsby CLI to create a new site, specifying this project. If you don't have the CLI installed already, see [Gastby instructions](https://www.gatsbyjs.org/tutorial/part-zero/#using-the-gatsby-cli). | ||
|
|
||
| ```sh | ||
| gatsby new YOUR-PROJECT-NAME https://github.com/margueriteroth/gatsby-prismic-starter-prist | ||
| ``` | ||
|
|
||
| 2. **Start developing.** | ||
|
|
||
| Navigate into your new site's directory, install node modules, and start it up. | ||
|
|
||
| ```sh | ||
| cd YOUR-PROJECT-NAME | ||
| 1. Fork & Clone | ||
| 2. Install Packages | ||
| ```bash | ||
| npm install | ||
| gatsby develop | ||
| ``` | ||
|
|
||
| 3. **Open the code and start customizing!** | ||
|
|
||
| Your site is now running at `http://localhost:8000`! | ||
|
|
||
| _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ | ||
|
|
||
|
|
||
| ## 👩🎤 Configuring Prismic | ||
|
|
||
| 1. **Create account and repo** | ||
|
|
||
| Head over to [Prismic](https://prismic.io/signup) and create your new account. Once you have an account, create a new repository. | ||
|
|
||
| 2. **Add the repo to your new project** | ||
|
|
||
| In your `gatsby-config.js` file, add your Prismic Repo name to the `repositoryName` field: | ||
|
|
||
| ``` | ||
| `gatsby-plugin-sharp`, | ||
| { | ||
| resolve: 'gatsby-source-prismic-graphql', | ||
| options: { | ||
| repositoryName: 'REPO-NAME', // (REQUIRED, replace with your own) | ||
| } | ||
| }, | ||
| ``` | ||
| 3. **Define your Custom Types** | ||
|
|
||
| This starter uses 3 Custom Types: | ||
|  | ||
|
|
||
| Create the three following Custom Types by selecting "Create New" in the top right of your screen, and selecting either Repeatable Type or Single Type. | ||
|
|
||
| **1. Homepage** (Single) | ||
|  | ||
| In the right panel, select *JSON editor* and paste the following: | ||
| 3. Run in Development Mode | ||
| ```bash | ||
| npm start / npm run dev | ||
| ``` | ||
| { | ||
| "Main" : { | ||
| "uid" : { | ||
| "type" : "UID", | ||
| "config" : { | ||
| "label" : "homepage" | ||
| } | ||
| }, | ||
| "hero_title" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "heading1, hyperlink", | ||
| "allowTargetBlank" : true, | ||
| "label" : "hero title", | ||
| "placeholder" : "Hello world" | ||
| } | ||
| }, | ||
| "hero_button_text" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "hyperlink", | ||
| "label" : "hero button text", | ||
| "placeholder" : "Click me!" | ||
| } | ||
| }, | ||
| "hero_button_link" : { | ||
| "type" : "Link", | ||
| "config" : { | ||
| "allowTargetBlank" : true, | ||
| "label" : "hero button link", | ||
| "placeholder" : "Click me!" | ||
| } | ||
| }, | ||
| "content" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", | ||
| "allowTargetBlank" : true, | ||
| "label" : "content" | ||
| } | ||
| }, | ||
| "about_title" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "heading3", | ||
| "label" : "about title", | ||
| "placeholder" : "About" | ||
| } | ||
| }, | ||
| "about_bio" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "paragraph, preformatted, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", | ||
| "allowTargetBlank" : true, | ||
| "label" : "about bio", | ||
| "placeholder" : "Lorem ipsum..." | ||
| } | ||
| }, | ||
| "about_links" : { | ||
| "type" : "Group", | ||
| "config" : { | ||
| "fields" : { | ||
| "about_link" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "hyperlink", | ||
| "allowTargetBlank" : true, | ||
| "label" : "about link", | ||
| "placeholder" : "ie. Github" | ||
| } | ||
| } | ||
| }, | ||
| "label" : "about links" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| To build & run in Production mode: | ||
| ```bash | ||
| npm run build && npm run serve | ||
| ``` | ||
|
|
||
| **2. Post** (Repeatable) | ||
| ``` | ||
| { | ||
| "Main" : { | ||
| "post_title" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "heading1, heading2, heading3, heading4, heading5, heading6", | ||
| "label" : "post title" | ||
| } | ||
| }, | ||
| "uid" : { | ||
| "type" : "UID", | ||
| "config" : { | ||
| "label" : "post uid" | ||
| } | ||
| }, | ||
| "post_category" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "heading5", | ||
| "label" : "post category" | ||
| } | ||
| }, | ||
| "post_preview_description" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "paragraph, strong, em, hyperlink, list-item", | ||
| "label" : "post preview description" | ||
| } | ||
| }, | ||
| "post_author" : { | ||
| "type" : "Select", | ||
| "config" : { | ||
| "options" : [ "Prist Team", "Marguerite Roth" ], | ||
| "default_value" : "Prist Team", | ||
| "label" : "post author" | ||
| } | ||
| }, | ||
| "post_hero_image" : { | ||
| "type" : "Image", | ||
| "config" : { | ||
| "constraint" : { }, | ||
| "thumbnails" : [ ], | ||
| "label" : "post hero image" | ||
| } | ||
| }, | ||
| "post_hero_annotation" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "heading6, strong, em, hyperlink", | ||
| "allowTargetBlank" : true, | ||
| "label" : "post hero annotation" | ||
| } | ||
| }, | ||
| "post_body" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", | ||
| "allowTargetBlank" : true, | ||
| "label" : "post body" | ||
| } | ||
| }, | ||
| "post_date" : { | ||
| "type" : "Date", | ||
| "config" : { | ||
| "label" : "post date" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| **3. Project** (Repeatable) | ||
| ``` | ||
| { | ||
| "Main" : { | ||
| "project_title" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "heading1", | ||
| "label" : "project title" | ||
| } | ||
| }, | ||
| "uid" : { | ||
| "type" : "UID", | ||
| "config" : { | ||
| "label" : "project uid" | ||
| } | ||
| }, | ||
| "project_category" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "single" : "heading5", | ||
| "label" : "project category" | ||
| } | ||
| }, | ||
| "project_preview_description" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "paragraph, strong, em, hyperlink", | ||
| "allowTargetBlank" : true, | ||
| "label" : "project preview description" | ||
| } | ||
| }, | ||
| "project_preview_thumbnail" : { | ||
| "type" : "Image", | ||
| "config" : { | ||
| "constraint" : { }, | ||
| "thumbnails" : [ ], | ||
| "label" : "project preview thumbnail" | ||
| } | ||
| }, | ||
| "project_hero_image" : { | ||
| "type" : "Image", | ||
| "config" : { | ||
| "constraint" : { }, | ||
| "thumbnails" : [ ], | ||
| "label" : "project hero image" | ||
| } | ||
| }, | ||
| "project_description" : { | ||
| "type" : "StructuredText", | ||
| "config" : { | ||
| "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item", | ||
| "allowTargetBlank" : true, | ||
| "label" : "project description" | ||
| } | ||
| }, | ||
| "project_post_date" : { | ||
| "type" : "Date", | ||
| "config" : { | ||
| "label" : "project post date" | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| # Tips & Common issues: | ||
|
|
||
| Thank you to everyone for contributing! | ||
|
|
||
| #### Prismic Data sourcing problems: | ||
|
|
||
| Gatsby needs Prismic to return data, meaning the field cannot be left empty. | ||
|
|
||
| From [@georgex1999](https://github.com/georgex1999) | ||
| * If you, like me, are new to prismic.io.. you can't just setup the Custom types as stated in the readme you also need to add Content to them and Publish. This may seem obvious but stumped me for a while! | ||
| * As far as I could tell you need to fill in ALL the fields with content to get the site up and running. Otherwise you get a NULL value error. | ||
| * I had an error that stumped me for a while and it was because I hadn't added the link properly to the social media link. I'll attach a screenshot of this in case it catches anyone else out and the error it brings up. | ||
|  | ||
| https://github.com/margueriteroth/gatsby-prismic-starter-prist/issues/5#issuecomment-578314236 | ||
|
|
||
| ## Project Structure | ||
|
|
||
| From [@kylemhudson](https://github.com/kylemhudson) | ||
| * I'd recommend adding a few more points to the end of "3. Define your Custom Types" telling the user to fill out at least enough content in the Custom Types to populate one of each type, and definitely show adding the URL to the About section. Adding enough content to everything else doesn't do it, you have to add the URL type within About for the project to work. | ||
| https://github.com/margueriteroth/gatsby-prismic-starter-prist/issues/5#issuecomment-653038425 | ||
| > This section explains the structure of this project. | ||
|
|
||
| ### Top-level directory layout | ||
| . | ||
| ├── .cache # Gatsby's cache files | ||
| ├── build # Compiled files | ||
| ├── src # Source files | ||
| ├── gatsby-browser.js # Gatsby's Browser APIs implementation file | ||
| ├── gatsby-config.js # Gatsby's configuration file | ||
| ├── LICENSE | ||
| └── README.md | ||
|
|
||
| --- | ||
| ### Source files | ||
| . | ||
| ├── components # Reusable react components | ||
| ├── images # Static image assets | ||
| ├── pages # Page components | ||
| ├── styles # Centralized style configuration | ||
| └── utils # Utilities | ||
|
|
||
| I've had issues fetching updated data from Prismic. Running `gatsby clean` clears the cache. | ||
| > **Q: Why we separate `pages` & `components` folder?** | ||
| > | ||
| > **A:** Because GatsbyJS automatically generate pages using the file names inside `pages` folder. File `index.js` will be converted to `/` page, `about.js` will be converted to `/about` page. | ||
|
|
||
| Additionally, clearing the cache, node modules, and package-lock.json can also clear your slate. | ||
| 1. `rm -rf node_modules .cache package-lock.json` | ||
| 2. `npm install` | ||
| ## License | ||
|
|
||
| [MIT](LICENSE) | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor grammar fix here, change to:
'Because GatsbyJS automatically generates pages using the file names inside the
pagesfolder. Fileindex.jswill be converted to/page,about.jswill be converted to/aboutpage.'