andri.dk
[READ-ONLY] Mirror of https://github.com/andrioid/gatsby-theme-links. Turn your Gatsby site into a link-site, sourced from Github stars and Pinboard
gatsby-theme-links.netlify.com/links
more doc
author
Andri Oskarsson
date
(Jul 26, 2019, 8:26 AM +0200)
commit
b18cba70
b18cba70910d584aa2b05628d6aa82b673721adc
parent
2c2de392
2c2de39270aed1cd69a46986befc8b109f38f61c
+26
-166
+9
-74
README.md
+9
-74
README.md
···
3
3
- [Demo README](demo/README.md)
4
4
- [Theme Package README](theme/README.md)
5
5
6
-
## How to use the demo
7
-
8
-
Add a `.env` file to the root directory of the project.
9
-
10
-
```
11
-
GATSBY_GITHUB_TOKEN=yourtoken
12
-
GATSBY_PINBOARD_TOKEN=yourtoken
13
-
```
14
-
15
-
Then run the site. Never add your tokens to Git.
16
-
17
-
```sh
18
-
export $(cat .env | xargs) && yarn workspace demo develop
19
-
20
-
```
21
-
22
-
### More
23
-
24
-
See
25
-
26
-
# Gatsby Theme Jam Submission Example
6
+
## Introduction
27
7
28
-
This repo is an example and potential starting point for theme creators.
8
+
This theme adds a '/links' page to your site that shows your 100 most recent bookmarks or stars on Github.
29
9
30
-
It includes:
10
+
You need a Pinboard auth-token or a Github personal token to make this work.
31
11
32
-
- a bare-bones theme (located in `theme/`) that includes basic setup
33
-
- a demo site (located in `demo/`) that installs the theme
34
-
- a Yarn workspaces configuration so the theme and demo can be worked on simultaneously
12
+
## Motivation
35
13
36
-
## How to use this repo
14
+
Before the times of Reddit and Hacker News it was quite common for homepages to have link sections.
37
15
38
-
**NOTE:** Make sure to replace `USERNAME` with your GitHub username and `THEMENAME` with your theme name.
16
+
I miss those times, but I realisticially am not going to update one. But I do bookmark things and I do star things on Github.
39
17
40
-
1. Fork this repo.
41
-
42
-
2. Rename the forked repo `gatsby-theme-THEMENAME`. (Make sure to replace `THEMENAME` with your chosen name.)
18
+
## Screenshot
43
19
44
-
3. Get the theme set up locally.
20
+
45
21
46
-
```sh
47
-
# clone the repo
48
-
git clone git@github.com:USERNAME/gatsby-theme-THEMENAME.git
49
-
50
-
# move into the directory
51
-
cd gatsby-theme-THEMENAME
52
-
53
-
# install dependencies
54
-
yarn
55
-
```
56
-
57
-
4. Update `theme/package.json` with your info.
58
-
59
-
```diff
60
-
{
61
-
+ "name": "gatsby-theme-THEMENAME",
62
-
+ "author": "Your Name <name@example.com>",
63
-
"repository": {
64
-
"type": "git",
65
-
+ "url": "https://github.com/USERNAME/gatsby-theme-THEMENAME.git"
66
-
},
67
-
```
68
-
69
-
5. Start the demo site.
70
-
71
-
```sh
72
-
yarn workspace demo develop
73
-
```
74
-
75
-
The demo will start at http://localhost:8000
76
-
77
-
**NOTE:** If you’re new to Yarn workspaces, check out [this post](https://www.gatsbyjs.org/blog/2019-05-22-setting-up-yarn-workspaces-for-theme-development/) for details.
78
-
79
-
6. Start editing the theme! The demo site is configured to use the local theme, so any changes you make to the local `theme` directory will be reflected on the demo site for easy local development.
80
-
81
-
7. Follow the [submission checklist](./theme/README.md#submission-checklist) to make sure your theme qualifies to win!
82
-
83
-
8. [Submit your theme](https://themejam.gatsbyjs.org/submit) to win!
84
-
85
-
## More information
86
-
87
-
For contest rules and more information, see [the Theme Jam website](https://themejam.gatsbyjs.org).
22
+
This is my submission to the [Gatsby Theme Jam](https://themejam.gatsbyjs.org/).
+10
-92
demo/README.md
+10
-92
demo/README.md
···
1
-
<!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
2
-
<p align="center">
3
-
<a href="https://www.gatsbyjs.org">
4
-
<img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
5
-
</a>
6
-
</p>
7
-
<h1 align="center">
8
-
Gatsby's hello-world starter
9
-
</h1>
10
-
11
-
Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
12
-
13
-
_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
14
-
15
-
## 🚀 Quick start
16
-
17
-
1. **Create a Gatsby site.**
18
-
19
-
Use the Gatsby CLI to create a new site, specifying the hello-world starter.
20
-
21
-
```sh
22
-
# create a new Gatsby site using the hello-world starter
23
-
gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
24
-
```
25
-
26
-
1. **Start developing.**
27
-
28
-
Navigate into your new site’s directory and start it up.
29
-
30
-
```sh
31
-
cd my-hello-world-starter/
32
-
gatsby develop
33
-
```
34
-
35
-
1. **Open the source code and start editing!**
36
-
37
-
Your site is now running at `http://localhost:8000`!
38
-
39
-
_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)._
40
-
41
-
Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
42
-
43
-
## 🧐 What's inside?
44
-
45
-
A quick look at the top-level files and directories you'll see in a Gatsby project.
46
-
47
-
.
48
-
├── node_modules
49
-
├── src
50
-
├── .gitignore
51
-
├── .prettierrc
52
-
├── gatsby-browser.js
53
-
├── gatsby-config.js
54
-
├── gatsby-node.js
55
-
├── gatsby-ssr.js
56
-
├── LICENSE
57
-
├── package-lock.json
58
-
├── package.json
59
-
└── README.md
60
-
61
-
1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
62
-
63
-
2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
1
+
## How to use the demo
64
2
65
-
3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
3
+
Add a `.env` file to the root directory of the project.
66
4
67
-
4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
5
+
```
6
+
GATSBY_GITHUB_TOKEN=yourtoken
7
+
GATSBY_PINBOARD_TOKEN=yourtoken
8
+
```
68
9
69
-
5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
10
+
Then run the site. Never add your tokens to Git.
70
11
71
-
6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
12
+
```sh
13
+
export $(cat .env | xargs) && yarn workspace demo develop
72
14
73
-
7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
74
-
75
-
8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
76
-
77
-
9. **`LICENSE`**: Gatsby is licensed under the MIT license.
78
-
79
-
10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
80
-
81
-
11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
82
-
83
-
12. **`README.md`**: A text file containing useful reference information about your project.
84
-
85
-
## 🎓 Learning Gatsby
86
-
87
-
Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
88
-
89
-
- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
90
-
91
-
- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
92
-
93
-
## 💫 Deploy
94
-
95
-
[](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
96
-
97
-
<!-- AUTO-GENERATED-CONTENT:END -->
15
+
```
screenshot.png
screenshot.png
This is a binary file and will not be displayed.
+6
theme/gatsby-node.js
+6
theme/gatsby-node.js
···
1
1
exports.createPages = ({ actions, reporter }) => {
2
+
// For the demo. I expect real sites to override this.
3
+
actions.createPage({
4
+
path: "/",
5
+
component: require.resolve("./src/templates/links.js"),
6
+
})
7
+
2
8
actions.createPage({
3
9
path: "/links",
4
10
component: require.resolve("./src/templates/links.js"),