\n\nA Gatsby theme for creating a blog.\n\n[Live Demo](https://gatsby-theme-timeline.owenyoung.com/)\n\n\n\n## Features\n\n- Support Mdx, tweet, instagram medias, youtube videos, hacker news, reddit post\n- Support i18n by [gatsby-theme-i18n](https://www.gatsbyjs.com/plugins/gatsby-theme-i18n/), you can choose your own [i18n library](https://github.com/gatsbyjs/themes/tree/master/packages)\n- Support comments [disqus](https://disqus.com/) or [utterances](https://utteranc.es/)\n- Support Tags\n- Pagination, even tag page supports pagination\n- SEO Optimization\n\n## Installation\n\n### For a new site\n\nIf you're creating a new site and want to use the timeline theme, you can use the timeline theme starter. This will generate a new site that pre-configures use of the timeline theme.\n\n1. **Create a Gatsby site.**\n\n Use the Gatsby CLI to create a new site, specifying the timeline blog theme starter.\n\n ```shell\n # create a new Gatsby site using the timeline blog theme starter\n gatsby new my-themed-blog https://github.com/theowenyoung/gatsby-starter-timeline\n ```\n\n1. **Create twitter credentials**\n\n Optional, if you want to add your tweets to blog, create `.env` with the following content:\n\n ```ini\n TWITTER_CONSUMER_KEY=xx\n TWITTER_CONSUMER_SECRET=xx\n TWITTER_ACCESS_TOKEN=xx\n TWITTER_ACCESS_SECRET=xx\n ```\n\n Then, uncomment `gatsby-config.js` plugin `gatsby-source-twitter`\n\n1. **Create instagram credentials**\n\n Optional, if you want to add your instagram to blog, create `.env` with the following content:\n\n ```ini\n INSTAGRAM_ACCESS_TOKEN=xx\n ```\n\n > See [How to get instagram access token](https://github.com/nbcommunication/InstagramBasicDisplayApi#creating-a-facebook-app)\n\n > Then, uncomment `gatsby-config.js` plugin `gatsby-source-instagram`\n\n1. **Start developing.**\n\n Navigate into your new site’s directory and start it up.\n\n ```shell\n cd my-themed-blog/\n gatsby develop\n ```\n\n1. **Open the code and start customizing!**\n\n Your site is now running at `http://localhost:8000`!\n\n### For an existing site\n\nIf you already have a site you'd like to add the timeline theme to, you can manually configure it.\n\n1. Install the timeline theme\n\n ```shell\n npm install gatsby-theme-timeline theme-ui\n ```\n\n1. Add the configuration to your `gatsby-config.js` file\n\n ```js\n // gatsby-config.js\n module.exports = {\n plugins: [\n {\n resolve: `gatsby-theme-timeline`,\n options: {\n // basePath defaults to `/`\n basePath: `/blog`,\n },\n },\n ],\n }\n ```\n\n1. Add blog posts to your site by creating `md` or `mdx` files inside `/content/posts`.\n\n > Note that if you've changed the default `contentPath` in the configuration, you'll want to add your markdown files in the directory specified by that path.\n\n1. Optional, Add tweets to your site, there are 2 ways for adding tweets:\n\n 1. By creating `.json` files inside `/data/tweets`, you can use [Actionsflow](https://github.com/actionsflow/actionsflow) to auto sync your tweets, for example [my blog](https://blog.owenyoung.com), [source](https://github.com/theowenyoung/story), [site source](https://github.com/theowenyoung/theowenyoung.github.io)\n\n 1. By using [`gatsby-source-twitter`](https://www.gatsbyjs.com/plugins/gatsby-source-twitter/), for example:\n\n ```javascript\n {\n plugins: [\n {\n resolve: `gatsby-source-twitter`,\n options: {\n credentials: {\n consumer_key: process.env.TWITTER_CONSUMER_KEY,\n consumer_secret: process.env.TWITTER_CONSUMER_SECRET,\n access_token_key: process.env.TWITTER_ACCESS_TOKEN,\n access_token_secret: process.env.TWITTER_ACCESS_SECRET,\n },\n queries: {\n MyTweet: {\n endpoint: \"statuses/user_timeline\",\n params: {\n screen_name: \"TheOwenYoung\",\n include_rts: true,\n tweet_mode: \"extended\",\n },\n },\n },\n },\n },\n {\n resolve: `gatsby-theme-timeline`,\n options: {\n tweetTypeName: [\"TweetsJson\", \"twitterStatusesUserTimelineMyTweet\"],\n },\n },\n ]\n }\n ```\n\n1. Optional, add instagram posts to your site, there are 2 ways for adding tweets:\n\n 1. By creating `.json` files inside `/data/instagram`, you can use [Actionsflow](https://github.com/actionsflow/actionsflow) to auto sync your instagram posts, for example [my blog](https://blog.owenyoung.com), [source](https://github.com/theowenyoung/story), [site source](https://github.com/theowenyoung/theowenyoung.github.io)\n\n 1. By using [`@theowenyoung/gatsby-source-instagram`](https://github.com/theowenyoung/gatsby-source-instagram), for example:\n\n ```javascript\n {\n resolve: `@theowenyoung/gatsby-source-instagram`,\n options: {\n access_token: process.env.INSTAGRAM_ACCESS_TOKEN,\n paginate: 100,\n maxPosts: 1000,\n },\n },\n ```\n\n > See [How to get instagram access token](https://github.com/nbcommunication/InstagramBasicDisplayApi#creating-a-facebook-app)\n\n1. Add an image with the file name `avatar` (can be jpg or png) inside the `/assets` directory to include a small image next to the footer on every post page.\n\n > Note that if you've changed the default `assetPath` in the configuration, you'll want to add your asset files in the directory specified by that path.\n\n1. Run your site using `gatsby develop` and navigate to your blog posts. If you used the above configuration, your URL will be `http://localhost:8000/blog`\n\n## Usage\n\n### Theme options\n\n| Key | Default value | Description |\n| ------------------------ | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `basePath` | `/` | Root url for all blog posts |\n| `contentPath` | `content/posts` | Location of blog posts |\n| `dataPath` | `data/tweets` | Location of tweets |\n| `assetPath` | `content/assets` | Location of assets |\n| `tweetTypeName` | `['TweetsJson']` | Tweet type name ,`string[]` or `string` |\n| `instagramTypeName` | `['InstagramJson']` | Instagram type name ,`string[]` or `string` |\n| `postsPerPage` | `25` | size per page |\n| `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. |\n| `preset` | `gatsby-theme-ui-preset` | Theme UI compatible package name that will act as the base styles for your project. Be sure to install the package you're referencing. Set to `false` to ignore all presets and only use local styles. |\n| `prismPreset` | `null` | Theme UI compatible package name that will act as the prism syntax highlighting for your project. Be sure to install the package you're referencing. For themes in `@theme-ui/prism` the name will suffice, e.g. `prism-okaidia`. |\n| `excerptLength` | `140` | Length of the auto-generated excerpt of a blog post |\n| `webfontURL` | `''` | URL for the webfont you'd like to include. Be sure that your local theme does not override it. |\n| `imageMaxWidth` | `1024` | Set the max width of images in your blog posts. This applies to your featured image in frontmatter as well. |\n| `i18nConfig` | `{defaultLang: 'en',configPath: './i18n/config.json')}` | i18n config, this will forward to [gatsby-theme-i18n](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n) |\n| |\n| `disqus` | `{shortname: '')}` | Get it by |\n| |\n| `utterances` | `{repo: '')}` | `{repo:\"your-repo\",\"theme\":\"github-light\",\"issueTerm\":\"pathname\",\"label\":\"\"}`, more information see |\n| |\n| `shouldTransformerImage` | `true` | should transformer image of tweet, reddit |\n| |\n| `shouldTransformerJson` | `true` | should transformer json files, for including the tweet json, reddit json |\n| |\n| `jsonTransformerOptions` | see [`utils/default-options.js`](utils/default-options.js) | if `shouldTransformerJson` is `true`, then, you can set the options of [gatsby-transformer-json](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-json) |\n| |\n\nMore options see [`utils/default-options.js`](utils/default-options.js)\n\n#### Example configuration\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-theme-timeline`,\n options: {\n // basePath defaults to `/`\n basePath: `/blog`,\n prismPreset: `prism-okaidia`,\n },\n },\n ],\n}\n```\n\n### Additional configuration\n\nIn addition to the theme options, there are a handful of items you can customize via the `siteMetadata` object in your site's `gatsby-config.js`\n\n```js\n// gatsby-config.js\nmodule.exports = {\n siteMetadata: {\n // Used for the site title and SEO\n title: `My Blog Title`,\n // Used to provide alt text for your avatar\n author: `My Name`,\n // Used for SEO\n description: `My site description...`,\n // Used for resolving images in social cards\n siteUrl: `https://example.com`,\n // Used for links in the root aside\n menuLinks: [\n {\n name: `Twitter`,\n url: `https://twitter.com/TheOwenYoung`,\n external: true,\n },\n {\n name: `GitHub`,\n url: `https://github.com/theowenyoung`,\n },\n ],\n social: [\n {\n name: `Twitter`,\n url: `https://twitter.com/TheOwenYoung`,\n external: true,\n },\n {\n name: `GitHub`,\n url: `https://github.com/theowenyoung`,\n },\n ],\n },\n}\n```\n\n### Blog Post Fields\n\nThe following are the defined blog post fields based on the node interface in the schema\n\n| Field | Type |\n| ----------- | -------- |\n| id | String |\n| title | String |\n| body | String |\n| slug | String |\n| date | Date |\n| tags | String[] |\n| excerpt | String |\n| image | String |\n| imageAlt | String |\n| socialImage | String |\n\n### Image Behavior\n\nBlog posts can include references to images inside frontmatter. Note that this works for a relative path as shown below, or an external URL.\n\n```md\n---\ntitle: Hello World (example)\ndate: 2019-04-15\nimage: ./some-image.jpg\n---\n```\n\n`image` refers to the featured image at the top of a post and is not required. It will also appear as the preview image inside a social card. Note that this requires you to set `siteUrl` in your `gatsby-config.js` file metadata to your site's domain.\n\nWhen adding an `image`, `imageAlt` is available to provide alt text for the featured image within the post. If this is not included, it defaults to the post excerpt.\n\nYou may want to use a different image for social sharing than the one that appears in your blog post. You can do so by setting `socialImage` in frontmatter.\n\n### How Styles work\n\nThis theme enables `gatsby-plugin-theme-ui` which allows you to leverage [Theme UI](https://theme-ui.com/) to style your project.\n\nBy default, `gatsby-theme-ui-timeline-preset` operates as your base theme styles. Any local shadowed styles deep merge with that preset.\n\nAlternatively, you can pass a preset of your own choosing by installing the package and passing the package name as the `preset` in `gatsby-config.js`. Again, local shadowed styles will deep merge with this preset if they exist.\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-theme-timeline`,\n options: {\n preset: `my-preset-name-here`,\n },\n },\n ],\n}\n```\n\nIf you'd rather use only local shadowed styles with no underlying preset, pass the `preset` option as `false`.\n\n#### Prism\n\nYou can also configure your prism theme for syntax highlighting in code snippets by passing the `prismPreset` option.\n\n`@theme-ui/prism` is included by default, so any [available presets](https://theme-ui.com/packages/prism#syntax-themes) can be passed using only their name, e.g. `dracula`. The default value is `github`\n\n```js\n// gatsby-config.js\nmodule.exports = {\n plugins: [\n {\n resolve: `gatsby-theme-timeline`,\n options: {\n prismPreset: `github`,\n },\n },\n ],\n}\n```\n\nAs an alternative, you can install a package with a prism theme into your project and pass the package name.\n\nThis option is null by default, and in all cases local shadowed styles take precedent.\n\n##### Highlight Line\n\nYou can highlight code snippets using `// highlight line` or a combination of `// highlight-start` and `// highlight-end`.\n\nTo update the styling for these highlights override the `.highlight` styles inside your prism theme.\n\n## Full Screen\n\n\n","readmeFilename":"README.md","author":{"name":"Owen Young","email":"theowenyoung@gmail.com"},"bugs":{"url":"https://github.com/theowenyoung/gatsby-theme-timeline/issues"}}
![\"Gatsby\"](\"https://www.gatsbyjs.com/Gatsby-Monogram.svg\")
\n \n