","author":{"name":"Adam Webster","url":"@adamwebster"},"license":"MIT","readme":"# Tabini for Gatsby\n\n
\n\n
\n\nTabini is a blog theme designed and developed by [Adam Webster](https://adamwebster.me).\n\n## Features\n\n- Write articles using Markdown and MDX.\n- Source content from Contentful\n- Create new pages using Markdown and MDX.\n- Custom content areas\n - Before the featured article list\n - Before the article list\n - Before the article content\n - Before the footer\n- Built in social graph support so when you share your links it will add an image and an excerpt of the content.\n- Multiple author support\n\n## Installation\n\nAfter installing the theme by adding a reference to it in your `package.json` file add the following line to you plugins of you `gatsby-config.js`.\n\n```js\nplugins: ['@adamwebster/tabini'];\n```\n\nThen run `gatsby develop` this will copy the needed files into a directory in your src directory called **tabini**. In there there is everything you need to get started.\n\n## Structure of the theme directory\n\n```txt\n- tabini\n |- articles\n | |- images\n | |- articlename.md\n |- assets\n |- authors\n | |- avatars\n | |- author.yaml\n |- content_area\n |- BeforeArticleContent.md\n |- BeforeArticleList.md\n |- BeforeFeaturedArticles.md\n |- BeforeFooter.md\n |- pages\n |- PageName.md\n |- sidebar_widgets\n |- WidgetName.md\n settings.json\n```\n\n## Theme Settings\n\nIn the `tabini` theme directory of your `src` directory there is a file called `settings.json`. In that file there are settings that are are for the theme.\n\nBy default it looks like the following.\n\n```json\n{\n \"social\": [\n { \"url\": \"http://twitter.com\" },\n { \"url\": \"http://facebook.com\" },\n { \"url\": \"http://github.com\" }\n ],\n \"menuLinks\": [\n {\n \"name\": \"Home\",\n \"link\": \"/\"\n },\n {\n \"name\": \"About\",\n \"link\": \"/about\"\n }\n ],\n \"searchBox\": {\n \"placeholder\": \"Search for articles\",\n \"ariaLabel\": \"Search the site\"\n }\n}\n```\n\n### social\n\nThe **social** section of the settings defines what social icons show up in the footer. If you don't want to show anything in the footer for social links just set that to be `\"social\": []`,\n\n### menuLinks\n\nThe **menuLinks** section of the settings defines the links that show up in the header of the theme. If you create a new page, for example `contact.md` you would need to add it to this section for it to show up in the menu.\n\n```json\n\"menuLinks\": [\n {\n \"name\": \"Home\",\n \"link\": \"/\"\n },\n {\n \"name\": \"About\",\n \"link\": \"/about\"\n },\n {\n \"name\": \"Contact\",\n \"link\": \"/contact\"\n }\n],\n```\n\nIf you would like no menu items to show up in the header then set it to be `\"menuLinks\": []`.\n\n### searchBox\n\nThe **searchBox** section of the `settings.json` file sets the placeholder and the aria label attributes of the the input.\n\n## Theme Options\n\n### basePath\n\nBy default the base bath is set to `/` which means that the theme would be loaded and displayed on the root of your website. You can change this by setting the option of `basePath` when defining the theme in your `gatsby-config.js`.\n\nThe example below sets the `basePath` to `path` which will cause the theme and its content to be displayed at `localhost:8000/path` when you run `gatsby develop`.\n\n```js\n{\n resolve: `@adamwebster/tabini`,\n options: {\n basePath: \"/path\",\n },\n},\n```\n\n### contentful\n\nThe `contentful` option defines if the content should come from **Contentful** or not. It can be set to `true` or `false` by default it is set to `false`.\n\n```js\n{\n resolve: `@adamwebster/tabini`,\n options: {\n contentful: true,\n },\n},\n```\n\nFor more information about using **Contentful** go to the **Contentful Intergration** of **Advanced Features**.\n\n## Authors\n\n**If you use the Contentful Intergration of the theme the authors will come from your Contentful space**\n\nThere must be a least one featured author this author will show up on the index page of the site.\n\nTo edit the authors open the `authors.yaml` file found in the `authors` directory which is found in the `tabini` directory of your `src` folder.\n\n```yaml\n- name: Author One\n bio: |\n This is where something about yourself would go. Make it personal and make sure to mention what you are writing about. You can also add [links](http://adamwebster.me) using **Markdown formatting** and html\n profilePicture: avatars/profile.jpg\n featured: true\n social:\n - url: http://twitter.com\n - url: http://facebook.com\n- name: Author Two\n bio: |\n This is where something about yourself would go. Make it personal and make sure to mention what you are writing about. You can also add [links](http://adamwebster.me) using **Markdown formatting** and html\n featured: false\n- name: Author Three\n bio: |\n This is where something about yourself would go. Make it personal and make sure to mention what you are writing about. You can also add [links](http://adamwebster.me) using **Markdown formatting** and html\n featured: false\n```\n\nThere are five sections for each author they are name, bio, profilePicture, featured, and social.\n\n### name\n\nThe name of the author.\n\n### bio\n\nA little bit about the author will show up in the side bar of the home page if the author is featured and on the article page for each article that is written by the author.\n\n### profilePicture\n\nThis will show up above the articles bio and must be placed in the `avatar` directory found the `authors` directory.\n\n### featured\n\nOnly one author should be set to be the featured author. This author will show up on the index page in the sidebar.\n\n## social\n\nSets what social networks will show up for the author underneath their bio.\n\n## Articles\n\nTo create a new article add a file new markdown file to the `articles` directory found in `src/tabini`. For example `NewArticle.md`.\n\n```md\n---\ntitle: Article 11\nfeatured: false\nauthor: Author One\nfeaturedImage: images/denise-chan-pXmbsF70ulM-unsplash.jpg\ncategory: Front-end Development\ndate: 2020-06-27\ntags: Sample Tag, Another Tag\n---\n\nLorem markdownum vitta ictibus, corpore color distentae morti, Aeas, colitur\nrosave. Vim montesque gurgite quas dant levis exemploque tremulae quod si esse\nnon summae quid sis cumque non, genus.\n\n> Ille laeva, quamvis: Icarus parvum crederet; variabant recanduit hanc provolvi\n> dies, non per. Habet animasque reppulit patria et, volucris. Cum quidquid\n> forti iubar et **anus in diros** Gyaros; nam viri Tethys, quiete quae arduus\n> et a. Tuo Rhodon velantibus, terras equi eburno, en multis ambrosiae natura\n> dolores per redituram, omnis dulcedine? Aequore epulis adgnovitque pinea\n> fontis accipit angues in valens luminis consistere videt cum haberet turbine\n> senili.\n```\n\n### Frontmatter fields\n\n#### title\n\nSets the title of the article. The title is also used to generate part of the url for the article\n\n#### featured\n\nSets if the article should be a featured article it will show on the top of the index page in the featured article section. There can be a maximum of five articles.\n\n#### Author\n\nSets the author of the article. Must match an author that is set up in the `authors.yaml` file.\n\n#### featuredImage\n\nImage that will be displayed with the article content, as well as used when sharing to social networks.\n\n#### category\n\nThe category of the article\n\n#### date\n\nThe date the article was posted useing YYYY-MM-DD format.\n\n#### tags\n\nA comma seperated list of tags for the article.\n\nThe rest of the file is the content of the article written in **Markdown**.\n\n### Setting an Article to be a draft\n\nTo set an article as a draft just put `draft:true` in the frontmatter of the **Markdown** file and it will not be visible when running the application.\n\n## Pages\n\nThe pages are found in the `pages` directory found in the `src/tabini` directory. To create a new page just add a new file using markdown, for example `about.md`.\nThen just add a title and the content. The title of your article will also generate the path for the page in kebab case.\n\n```md\n---\ntitle: About\n---\n\nThis is your about page. This page would explain what you write about and why you enjoy writing about it.\n\nIt is written in Markdown syntax show you can use the **Markdown Formatting** to update it.\n```\n\n## Changing the picture that displays when posting to social networks\n\nIn the `assets` directory of the `src/tabini` directory there is a file called `socialPic.jpg` just replace this file with your own.\n\nThe articles will choose the featured image if there is one to use as the image when sharing to social networks.\n\n## Supported social networks/websites\n\nThe following are are list of social networks/websites the theme supports in the author's bio and the footer.\n\n- Facebook\n- Twitter\n- Instagram\n- Discord\n- Reddit\n- GitHub\n- LinkedIn\n\nIf you would like to request additional social networks let [@adamwebster](https://twitter.com/adamwebster) know and he will look into adding it.\n\n## Advanced Features\n\n### Contentful Intergration\n\nThe first step is to set contentful option to true on the options for the theme in you `gatsby-config.js` file.\n\n```js\n{\n resolve: `@adamwebster/tabini`,\n options: {\n useContentful: true,\n },\n},\n```\n\nYou will also need to install the [`gatsby-source-contentful`](https://www.gatsbyjs.org/packages/gatsby-source-contentful/) plugin using **yarn** or **npm**\nand set it up to point to your **Contentful** space. It is recommended for security to keep the `spaceId` and `accessToken` in your `.env` files.\n\n```js\n{\n resolve: `gatsby-source-contentful`,\n options: {\n spaceId: process.env.CONTENTFUL_SPACE_ID,\n // Learn about environment variables: https://gatsby.dev/env-vars\n accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,\n },\n},\n```\n\nYou will need to import the sample data and the content models from the `tabini-contentful.json` file using the `cli` tool from **Contentful**. For more information read the following article from **Contentful** about importing data: https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/.\n\nNow that all of that is set up you can run `gatsby develop` and the theme will source the data from your **Contentful** space.\n\n### Custom Content Areas\n\n**DO NOT REMOVE THESE FILES**\n\nThere are four custom content areas for the theme they are found in the `content_areas` directory of the `tabini` theme directory. They are as follows:\n\n- BeforeArticleContent.md - Shows before the main content of an article on the article pages.\n- BeforeArticleList.md - Shows before the article list on the index, archive, category, and tag pages.\n- BeforeFeaturedArticles.md - Shows before the featured article list on the index page.\n- BeforeFooter.md - Shows on all pages before the footer.\n\nA good use cae for these would be adding ads to your site or other content you would like to display.\n\nIf you do not want the custom area to show on your site set **enabled** to be false.\n\n```md\n---\ntitle: 'Ad'\nlocation: 'BeforeArticleContent'\nenabled: true\n---\n\n
\n Customizable Content Space\n
\n```\n\n### Custom Widgets\n\nYou can also add custom widgets to the sidebar by creating a **Markdown** file in the `sidebar_widgets` directory of the `src/tabini` directory.\n\nGive it a **title** and set what **order** you would like it to show up in the sidebar.\n\n```md\n---\ntitle: 'Custom Widget'\norder: 2\n---\n\n
\n Your own widget can go here\n
\n```\n\n### MDX Support\n\nThe theme also supports **MDX** so you can import your own custom components in to the article, sidebar widgets, custom content areas, and pages **Markdown** files.\n\n## Help\n\nIf you would like some help want to report an issue follow [@adamwebster](https://twitter.com/adamwebster) and send him a message and he will get back to you ASAP.\n","readmeFilename":"README.md"}
![](\"https://gatsbytheme.adamwebster.me/static/8f76ddec2c566cfc3f5abec85e2aa2ef/14b42/socialPic.jpg\")