{"id":16539575,"url":"https://github.com/al3rez/gatsby-theme-chronoblog","last_synced_at":"2026-06-09T05:31:16.326Z","repository":{"id":127306747,"uuid":"349469980","full_name":"al3rez/gatsby-theme-chronoblog","owner":"al3rez","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-19T15:29:36.000Z","size":17537,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-05T00:21:25.461Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/al3rez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-19T15:29:19.000Z","updated_at":"2021-03-19T15:30:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"be6c22f3-a1a9-484b-a929-8e7ed47cf34e","html_url":"https://github.com/al3rez/gatsby-theme-chronoblog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/al3rez/gatsby-theme-chronoblog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al3rez%2Fgatsby-theme-chronoblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al3rez%2Fgatsby-theme-chronoblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al3rez%2Fgatsby-theme-chronoblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al3rez%2Fgatsby-theme-chronoblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/al3rez","download_url":"https://codeload.github.com/al3rez/gatsby-theme-chronoblog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/al3rez%2Fgatsby-theme-chronoblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34093773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T18:49:42.426Z","updated_at":"2026-06-09T05:31:16.308Z","avatar_url":"https://github.com/al3rez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\r\n\u003cp align=\"center\"\u003e\r\n\u003ca href=\"https://chronoblog.now.sh\" target=\"_blank\"\u003e\r\n\u003cimg src=\"https://github.com/Chronoblog/gatsby-theme-chronoblog/raw/master/assets/banner-small-2.png\" alt=\"Chronoblog - Gatsby Theme\" /\u003e\r\n\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003ch1 align=\"center\"\u003e\r\nChronoblog - Gatsby Theme\r\n\u003c/h1\u003e\r\n\r\n[![npm](https://img.shields.io/npm/v/gatsby-theme-chronoblog?color=brightgreen)](https://www.npmjs.com/package/gatsby-theme-chronoblog) [![node](https://img.shields.io/node/v/gatsby-theme-chronoblog)](https://www.npmjs.com/package/gatsby-theme-chronoblog) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](code_of_conduct.md) ![](https://github.com/Chronoblog/gatsby-theme-chronoblog/workflows/tests/badge.svg)\r\n\r\nChronoblog is a [Gatsby js](https://github.com/gatsbyjs/gatsby) theme specifically designed to create a personal website.\r\n\r\nThe main idea of ​​Chronoblog is to allow you not only to write a personal blog but also to keep a record of everything important that you have done.\r\n\r\nI never liked the blog format so that, regardless of the platform (be it Medium or WordPress), they all expect that the content that I will create is text, and this should be a long article. A blog consisting of long articles looks and works organically (on any platform). But a blog consisting of any other content (video, presentations, links to articles on other sites, or even just short notes) - it feels and works \"somehow wrong\".\r\n\r\nMany people solve this problem like this - create separate pages on their website for a blog, for talks, for podcasts, for a portfolio, etc. But it is difficult to maintain and update.\r\n\r\nBut what if we make a blog theme based on a **feed**? Something like twitter or hackernews or reddit, but without restrictions, and in the form of a personal blog?\r\n\r\nChronoblog is a theme that allows you to do just that - create a more universal personal website.\r\n\r\n\u003e Despite the fact that versions start with \"0.\", I want to make the Chronoblog API as stable as possible.\r\n\r\n\u003ch2 align=\"center\"\u003e\r\nDemo and Starters\r\n\u003c/h2\u003e\r\n\r\n\u003cbr /\u003e\r\n\r\n####\r\n\r\n\u003ca target=\"_blank\" href=\"https://chronoblog.now.sh\"\u003e \u003cimg align=\"left\" src=\"https://github.com/Chronoblog/gatsby-theme-chronoblog/raw/master/assets/st-img-chronoblog.png\" alt=\"Chronoblog - Gatsby Theme\" style=\"max-width:100%;\"\u003e \u003c/a\u003e\r\n\r\n### Gatsby Starter Chronoblog\r\n\r\nThis starter is the standard way to start a Chronoblog Gatsby Theme website.\r\n\r\n**Demo: [chronoblog.now.sh](https://chronoblog.now.sh)**  \r\nRepo: [github.com/Chronoblog/gatsby-starter-chronoblog](https://github.com/Chronoblog/gatsby-starter-chronoblog)\r\n\r\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Chronoblog/gatsby-starter-chronoblog) [![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/Chronoblog/gatsby-starter-chronoblog)\r\n\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\r\n####\r\n\r\n\u003ca target=\"_blank\" href=\"https://chronoblog-profile.now.sh\"\u003e \u003cimg align=\"left\" src=\"https://github.com/Chronoblog/gatsby-theme-chronoblog/raw/master/assets/st-img-profile.png\" alt=\"Chronoblog - Gatsby Theme\" style=\"max-width:100%;\"\u003e \u003c/a\u003e\r\n\r\n### Gatsby Starter Chronoblog Profile\r\n\r\nThis starter will help you launch a personal website with a simple text feed on the main page.\r\n\r\n**Demo: [chronoblog-profile.now.sh](https://chronoblog-profile.now.sh)**  \r\nRepo: [github.com/Chronoblog/gatsby-starter-chronoblog-profile](https://github.com/Chronoblog/gatsby-starter-chronoblog-profile)\r\n\r\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Chronoblog/gatsby-starter-chronoblog-profile) [![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/Chronoblog/gatsby-starter-chronoblog-profile)\r\n\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\r\n####\r\n\r\n\u003ca target=\"_blank\" href=\"https://chronoblog-hacker.now.sh\"\u003e \u003cimg align=\"left\" src=\"https://github.com/Chronoblog/gatsby-theme-chronoblog/raw/master/assets/st-img-hacker.png\" alt=\"Chronoblog - Gatsby Theme\" style=\"max-width:100%\"\u003e \u003c/a\u003e\r\n\r\n### Gatsby Starter Chronoblog Hacker\r\n\r\nA dark (but with ability to switch to light) starter that uses the [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) font and minimalistic UI (without emoji, as by default in Chronoblog Theme).\r\n\r\n**Demo: [chronoblog-hacker.now.sh](https://chronoblog-hacker.now.sh)**  \r\nRepo: [github.com/Chronoblog/gatsby-starter-chronoblog-hacker](https://github.com/Chronoblog/gatsby-starter-chronoblog-hacker)\r\n\r\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Chronoblog/gatsby-starter-chronoblog-hacker) [![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/Chronoblog/gatsby-starter-chronoblog-hacker)\r\n\r\n\u003cbr /\u003e\r\n\u003cbr /\u003e\r\n\r\n####\r\n\r\n### Examples\r\n\r\nExamples are the same [standard starter](https://github.com/Chronoblog/gatsby-starter-chronoblog), but with some additional features. You can use the example to start your site or see how this feature was added.\r\n\r\n- Chronoblog with Netlify CMS | [Repo](https://github.com/Chronoblog/gatsby-starter-chronoblog-netlify-cms) | [Demo](https://chronoblog-netlify-cms.now.sh/)\r\n\r\n\u003cbr /\u003e\r\n\r\n#### Use one of the starters as the basis for your unique site\r\n\r\nTo make your website look unique, you first need to work with the file **`src/gatsby-plugin-theme-ui/index.js`** with which you can control the style of the entire site. Basically, starters look different because of the different settings of this file. More about it here: [Style settings](#style-settings).\r\n\r\nAlso, all starters have a different main page, **`src/pages/index.mdx`** and content. Read about all this below in the guide.\r\n\r\n\u003cbr /\u003e\r\n\r\n## Table of Contents\r\n\r\n- [Guide - How to start working with Chronoblog Gatsby Theme](#guide---how-to-start-working-with-chronoblog-gatsby-theme)\r\n  - [Installation and Development](#installation-and-development)\r\n  - [Folder structure](#folder-structure)\r\n  - [Gatsby Config](#gatsby-config)\r\n    - [Site Metadata](#site-metadata)\r\n      - [favicon](#favicon)\r\n    - [Global settings](#global-settings)\r\n    - [Plugins](#plugins)\r\n  - [Style settings](#style-settings)\r\n  - [Content](#content)\r\n    - [Content Types](#content-types)\r\n      - [Posts](#posts)\r\n      - [Links](#links)\r\n      - [Notes](#notes)\r\n    - [Adding Content](#adding-content)\r\n    - [Additional options available to content](#additional-options-available-to-content)\r\n    - [frontmatter-placeholder](#frontmatter-placeholder)\r\n  - [Permanent parts of the site](#permanent-parts-of-the-site)\r\n    - [site-header](#site-header)\r\n    - [site-footer](#site-footer)\r\n    - [post-footer](#post-footer)\r\n      - [Get post data in post footer](#get-post-data-in-post-footer)\r\n  - [Pages](#pages)\r\n    - [index.mdx - homepage of your site](#indexmdx---homepage-of-your-site)\r\n- [Documentation](#documentation)\r\n  - [Feed](#feed)\r\n    - [FeedItems component](#feeditems-component)\r\n    - [Tags component](#tags-component)\r\n    - [FeedSearch component](#feedsearch-component)\r\n  - [SocialLinks component](#sociallinks-component)\r\n  - [AuthorBanner component](#authorbanner-component)\r\n  - [LightDarkSwitchButton component](#lightdarkswitchbutton-component)\r\n  - [Content Cover](#content-cover)\r\n  - [Font Awesome Icons](#font-awesome-icons)\r\n  - [SEO and metadata](#seo-and-metadata)\r\n    - [Metadata generation](#metadata-generation)\r\n    - [Metadata Verification Tools](#metadata-verification-tools)\r\n    - [SEO component in `.mdx`](#seo-component-in-mdx)\r\n  - [Prism Code Highlight](#prism-code-highlight)\r\n    - [Adding support for additional programming languages](#adding-support-for-additional-programming-languages)\r\n  - [Shadowing in Chronoblog Gatsby Theme](#shadowing-in-chronoblog-gatsby-theme)\r\n    - [Components that can and should be shadowed](#components-that-can-and-should-be-shadowed)\r\n- [Feedback](#feedback)\r\n- [Credits](#credits)\r\n  - [Art](#art)\r\n\r\n\u003cbr /\u003e\r\n\r\n# Guide - How to start working with Chronoblog Gatsby Theme\r\n\r\nThis guide will show how to create a personal website using Gatsby Theme Chronoblog.\r\n\r\nTo create a website using the Chronoblog theme, you do not need to be an expert in using Gatsbyjs. However, it’s still recommended that you complete the basic tutorial: [Gatsby.js Tutorials](https://www.gatsbyjs.org/tutorial/)\r\n\r\n## Installation and Development\r\n\r\nIn this guide, we will set up our new site using this starter: [gatsby-starter-chronoblog](https://github.com/Chronoblog/gatsby-starter-chronoblog)\r\n\r\nIf you have `gatsby-cli`:\r\n\r\n```sh\r\ngatsby new chronoblog-site https://github.com/Chronoblog/gatsby-starter-chronoblog\r\n\r\ncd chronoblog-site\r\n\r\ngatsby develop\r\n```\r\n\r\nOr using git clone:\r\n\r\n```sh\r\ngit clone git@github.com:Ganevru/gatsby-starter-chronoblog.git chronoblog-site\r\n\r\ncd chronoblog-site\r\n\r\nnpm i\r\n\r\nnpm start\r\n```\r\n\r\nYour site is now running at http://localhost:8000\r\n\r\nYou can start developing your site.\r\n\r\n\u003e If you want to use some other starter for Chronoblog, for example, a [Profile Starter](https://github.com/Chronoblog/gatsby-starter-chronoblog-profile), just install it according to the instructions from its [readme](https://github.com/Chronoblog/gatsby-starter-chronoblog-profile), or just change the name during installation to:\r\n\u003e\r\n\u003e `gatsby new chronoblog-site https://github.com/Chronoblog/gatsby-starter-chronoblog-profile`\r\n\u003e\r\n\u003e or, if using git clone:  \r\n\u003e `git clone git@github.com:Ganevru/gatsby-starter-chronoblog-profile.git chronoblog-site`.\r\n\r\n## Folder structure\r\n\r\nHere's how the Chronoblog Starter is organized:\r\n\r\n```\r\nchronoblog-site\r\n  ├─ content // unique site content is located here\r\n  │  ├─ links // content type - link cards\r\n  │  ├─ notes // content type - note cards\r\n  │  └─ posts // content type - blog posts\r\n  ├─ gatsby-config.js\r\n  ├─ package.json\r\n  ├─ src\r\n  │  ├─ assets\r\n  │  ├─ gatsby-plugin-theme-ui // style of the site\r\n  │  │  └─ index.js\r\n  │  ├─ gatsby-theme-chronoblog // chronoblog shadow\r\n  │  │  ├─ post-footer.mdx // what comes after every blog post\r\n  │  │  ├─ site-footer.mdx // site footer\r\n  │  │  └─ site-header.mdx // where is the main menu of the site\r\n  │  └─ pages // pages of the site\r\n  │     ├─ index.mdx // the main page of the site\r\n  │     └─ projects.mdx // optional site page\r\n  └─ static\r\n     └─ robots.txt\r\n```\r\n\r\nBelow will be more explanation about various aspects of the site.\r\n\r\n## Gatsby Config\r\n\r\n**`gatsby-config.js`** located in the root of your site and looks like this:\r\n\r\n```js\r\nmodule.exports = {\r\n  siteMetadata: {\r\n    siteTitle: 'Chronoblog Starter',\r\n    siteDescription: 'Starter for Gatsby Theme Chronoblog',\r\n    siteImage: '/banner.png', // main image of the site for metadata\r\n    siteUrl: 'https://chronoblog.now.sh/',\r\n    pathPrefix: '/',\r\n    siteLanguage: 'en',\r\n    ogLanguage: `en_US`,\r\n    author: 'Site Author', // for example - 'Ivan Ganev'\r\n    authorDescription: 'short author description', // short text about the author\r\n    avatar: '/avatar.jpg',\r\n    twitterSite: '', // website account on twitter\r\n    twitterCreator: '', // creator account on twitter\r\n    social: [\r\n      {\r\n        icon: `envelope`,\r\n        url: `mailto:mymail@mail.com`,\r\n      },\r\n      {\r\n        icon: `twitter`,\r\n        url: `https://twitter.com/ganevru`,\r\n      },\r\n      {\r\n        icon: `github`,\r\n        url: `https://github.com/Chronoblog/gatsby-theme-chronoblog`,\r\n      },\r\n      {\r\n        icon: `node-js`,\r\n        url: `https://www.npmjs.com/package/gatsby-theme-chronoblog`,\r\n      },\r\n    ],\r\n  },\r\n  plugins: [\r\n    {\r\n      resolve: 'gatsby-theme-chronoblog',\r\n      options: {\r\n        uiText: {\r\n          // ui text fot translate\r\n          feedShowMoreButton: 'show more',\r\n          feedSearchPlaceholder: 'search',\r\n          cardReadMoreButton: 'read more →',\r\n          allTagsButton: 'all tags',\r\n        },\r\n        feedItems: {\r\n          // global settings for feed items\r\n          limit: 50,\r\n          yearSeparator: true,\r\n          yearSeparatorSkipFirst: true,\r\n          contentTypes: {\r\n            links: {\r\n              beforeTitle: '🔗 ',\r\n            },\r\n          },\r\n        },\r\n        feedSearch: {\r\n          symbol: '🔍',\r\n        },\r\n      },\r\n    },\r\n    {\r\n      resolve: `gatsby-plugin-manifest`,\r\n      options: {\r\n        name: `Chronoblog Gatsby Theme`,\r\n        short_name: `Chronoblog`,\r\n        start_url: `/`,\r\n        background_color: `#fff`,\r\n        theme_color: `#3a5f7d`,\r\n        display: `standalone`,\r\n        icon: `src/assets/favicon.png`,\r\n      },\r\n    },\r\n    {\r\n      resolve: `gatsby-plugin-sitemap`,\r\n    },\r\n    {\r\n      resolve: `gatsby-plugin-google-analytics`,\r\n      options: {\r\n        // replace \"UA-XXXXXXXXX-X\" with your own Tracking ID\r\n        trackingId: 'UA-XXXXXXXXX-X',\r\n      },\r\n    },\r\n  ],\r\n};\r\n```\r\n\r\nThis is the standard file for the gatsby starter.\r\n\r\n### Site Metadata\r\n\r\nIn **`siteMetadata`**, replace information about:\r\n\r\n**`siteTitle`** - The main name of your site, if this is your personal site, you can simply write your name.\r\n\r\n**`siteDescription`** - description of the website.\r\n\r\n**`siteImage`** - image for metadata. Default: `static/banner.png` - you can simply replace this image with your own.\r\n\r\n**`siteUrl`** - a domain where the site will be located. Example: https://chronoblog.now.sh.\r\n\r\n**`author`** - the author of the site. For information at the end of each blog post, as well as for site metadata. Just write your name.\r\n\r\n**`authorDescription`** - short description of the author. For example, \"web developer\", \"designer\", \"front-end engineer\" and so on.\r\n\r\n**`avatar`** - author avatar. The file is located here: `static/avatar.jpg`. Replace this file with yours. It is recommended to use image with a resolution of 1:1 (the size of the default picture - 300x300).\r\n\r\n**`twitterSite`** - twitter account of this site. Needed for twitter metadata.\r\n\r\n**`twitterCreator`** - same as `twitterSite`, but for the author.\r\n\r\n**`social`** - your social networks. List the links to your social networks in the format presented. All of them will be automatically used in the [SocialLinks component](#sociallinks-component) (in this starter this is the main menu, footer and the author banner).\r\n\r\n- **`url`** - link to your social network profile. In general, it can be a link anywhere.\r\n- **`icon`** - name of the icon of this social network. Icons use brand icons from [fontawesome.com/icons?d=gallery\u0026s=brands](https://fontawesome.com/icons?d=gallery\u0026s=brands) - most likely, there are icons for any site on which you have a profile. Additionally you can use icons `at` and `envelope` (a good option if you want to place a link to your email) and `phone`.\r\n\r\n#### favicon\r\n\r\nThanks to the plugin [gatsby-plugin-manifest](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest), you can use one image as an icon (including favicon) for all devices. Just replace `src/assets/favicon.png` image with your own. It is better to use the size of `512x512`.\r\n\r\n### Global settings\r\n\r\nIn `options` for `gatsby-theme-chronoblog` you can find various global settings.\r\n\r\n**`uiText`** - Here you can replace the default values of the UI of the elements of the Chronoblog. This is done to simplify the localization of the site in various languages. If your site is in English, you can leave it as it is. If the site will use any other language - translate the default values right here.\r\n\r\n**`feedItems`** - global options for `feedItems` component. Inside any `feedItems` component on the site, you can specify other settings. Settings that are set through props are always in priority.\r\n\r\n**`feedSearch`** - global options for `feedSearch` component.\r\n\r\n### Plugins\r\n\r\nAll other plugins are optional. Chronoblog does not rely on them, so if you do not need, say, `gatsby-plugin-google-analytics`, you can ignore it or remove it from the list of plugins.\r\n\r\nAnd of course, you can use any other plugins. Gatsby Plugin Ecosystem: [www.gatsbyjs.org/plugins](https://www.gatsbyjs.org/plugins/)\r\n\r\n## Style settings\r\n\r\nChronoblog allows you to change many style settings of the site. You can change the primary and secondary colors, fonts, border-radius of most elements, etc. All this happens thanks to the [Theme-UI](https://theme-ui.com/) library.\r\n\r\nBrowse to the **`/src/gatsby-plugin-theme-ui/index.js`** file. This file already exists in the starter.\r\n\r\nThis file looks like this:\r\n\r\n```js\r\nimport chronoblogTheme from 'gatsby-theme-chronoblog/src/gatsby-plugin-theme-ui';\r\n\r\nexport default {\r\n  ...chronoblogTheme,\r\n  initialColorMode: 'light',\r\n  colors: {\r\n    ...chronoblogTheme.color,\r\n    text: '#222',\r\n    background: '#fff',\r\n    link: '#3d7e9a',\r\n    primary: '#3a5f7d',\r\n    secondary: '#5a809e',\r\n    muted: '#dae1e3',\r\n    modes: {\r\n      ...chronoblogTheme.colors.modes,\r\n      dark: {\r\n        ...chronoblogTheme.colors.modes.dark,\r\n        text: '#eaeaea',\r\n        background: '#0e0f17',\r\n        muted: '#161b1d',\r\n      },\r\n    },\r\n  },\r\n  fontSizes: [14, 16, 18, 20, 22, 24, 28, 36],\r\n  borderRadius: {\r\n    ...chronoblogTheme.borderRadius,\r\n    card: 6,\r\n    button: 6,\r\n    search: 6,\r\n    code: 6,\r\n    img: 6,\r\n    authorBanner: 6,\r\n  },\r\n  borderWidth: {\r\n    ...chronoblogTheme.borderWidth,\r\n    card: 2,\r\n    search: 2,\r\n  },\r\n  fonts: {\r\n    ...chronoblogTheme.fonts,\r\n    body: '-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif',\r\n    heading: 'inherit',\r\n    monospace: 'Menlo, monospace',\r\n  },\r\n};\r\n```\r\n\r\nIn general, this file explains itself. The easiest way to understand what and how it works is simply to “play” with it. Try changing the primary and secondary colors, double the rounding of all elements, and so on.\r\n\r\n`initialColorMode` - here you can select the starting color mode of the site. My be `light` or `dark`.\r\n\r\n`colors` - site color management.\r\n\r\n`borderRadius` - controlling rounding of various elements of a site, as a rule, it is better to use the same value. Usually, you want to have a lower value (for example `4`) for a more formal and serious appearance of the site, and a larger value (`12` for example) for a more informal and playful.\r\n\r\n`borderWidth` - the width of the border of some elements of the site. It is recommended to use the value `2`, it is still possible `1` or `3`. The rest usually look very strange.\r\n\r\n`fonts` - the choice of fonts for sites. Just enter the name of the font.  \r\nValue _inherit_ in the `heading` means that in this case the headers will use the same font as for the `body`.\r\n\r\n`chronoblogTheme` - you may have noticed this object throughout the file. This is done in order to add default values from the Chronoblog theme.\r\n\r\n## Content\r\n\r\nChronoblog has three types of content: **posts**, **links**, and **notes**.\r\n\r\nAll of them are in the `content` folder. They are located in the appropriate folders.\r\n\r\nChronoblog has [pages](#pages), but they are not in the content folder, why? The fact is that everything in the content folder is not just website content, it is [Feed](#feed) content. Everything in the content folder is displayed in the feed (sorted by date, filtered by tags, etc.). But pages are not a `feed` content.\r\n\r\nAll types of content use markdown syntax, you can read more about this in the Gatsby documentation ([markdown-syntax](https://www.gatsbyjs.org/docs/mdx/markdown-syntax)). Especially useful to know about [frontmatter](https://www.gatsbyjs.org/docs/mdx/markdown-syntax/#frontmatter).\r\n\r\n\u003e Markdown is a great format for content like articles - the reason is not an only confirmation but also because if you write your posts on the site in Markdown format, you will not depend on the theme (Chronoblog in this case) or even on the chosen engine (i.e. from Gatsby). At any time, you can easily change the platform on which your site is running, to any other platform that supports Markdown (now many support it).\r\n\r\n### Content Types\r\n\r\n#### Posts\r\n\r\nPosts are regular blog posts.\r\n\r\nPlace your posts inside `content/posts`:\r\n\r\n```\r\nchronoblog-site\r\n  ├─ content\r\n  │  ├─ links\r\n  │  ├─ notes\r\n  │  └─ posts // \u003c- your blog posts folder\r\n  │     └─ some-blog-post // \u003c- one blog post\r\n  │        ├─ image.jpg // \u003c- cover\r\n  │        └─ index.md // \u003c- post file\r\n  ├─ gatsby-config.js\r\n  ├─ package.json\r\n  └─ src\r\n```\r\n\r\nA typical post looks like this:\r\n\r\n`content/posts/some-blog-post/index.md`\r\n\r\n```md\r\n---\r\ntitle: Full Blog Post Example\r\ncover: ./image.jpg\r\ndate: 2019-11-05\r\ndescription: All the usual blog post.\r\ntags: ['post']\r\n---\r\n\r\nSome blog post text\r\n```\r\n\r\nEach post should have a `title` and `date`.\r\n\r\nThe `cover` should lead to a picture file, in this case, the file is located in the same folder as the blog post itself.\r\n\r\nThe `description` will appear in the post card in the feed, and will also be used for post meta tags (for SEO). If there is no description, then the text of the beginning of the post itself will be used instead.\r\n\r\n`tags` are needed for organization within the Chronoblog, they are displayed in the post itself and the post card in the feed.\r\n\r\n#### Links\r\n\r\nLinks in the feed aren’t very different from blog posts. But when clicked, the user will follow the link.\r\n\r\nThe basic idea of ​​links is that they work and feel \"equivalent\" to blog posts - the link also has a cover, title, tags, date, description, etc.\r\n\r\nLinks are needed for materials that you consider important to post in your feed, but for some reason, you can’t post them in the form of posts. This can be your articles on other sites (which you do not have the right to host), interviews, your projects (say on the GitHub), received certificates, completed courses, etc.\r\n\r\nTo prevent users of the site from confusing posts and links, links have additional distinctive elements - emoji (🔗) in front of the title, path where the link leads under the heading, an outgoing link icon in the card. Also, links do not have a \"read more -\u003e\" button like posts.\r\n\r\nPlace your links inside `content/links`:\r\n\r\n```\r\nchronoblog-site\r\n  ├─ content\r\n  │  ├─ links // \u003c- your links folder\r\n  │  │  └─ link-to-chronoblog // \u003c- one link folder\r\n  │  │     ├─ image.jpg // \u003c- link cover\r\n  │  │     └─ index.md // \u003c- link file\r\n  │  ├─ notes\r\n  │  └─ posts\r\n  ├─ gatsby-config.js\r\n  ├─ package.json\r\n  └─ src\r\n```\r\n\r\nA typical link looks like this:\r\n\r\n`content/links/link-to-chronoblog/index.md`\r\n\r\n```md\r\n---\r\ntitle: 'Link to Chronoblog Theme repo'\r\ncover: ./image.jpg\r\ndate: 2019-11-12\r\nlink: https://github.com/Chronoblog/gatsby-theme-chronoblog\r\ntags: ['link', 'project']\r\n---\r\n\r\nLink card is a card when clicked, the user goes to the specified link.\r\n```\r\n\r\nLike a post, a link must have a `title` and a `date`, and also, of course, the link must have a `link`.\r\n\r\nAll other elements are the same as the post. Only in contrast to the post, the body of the link is fully displayed in the feed - because when you click, the user will follow the link, and not the \"full version\". So do not make the link body too large.\r\n\r\n#### Notes\r\n\r\nNotes are a type of content that is fully located in the feed. Cards of notes do not refer anywhere and do not lead anywhere.\r\n\r\nAt the same time, notes allow you to place almost anything in the feed. The starter (demo: [chronoblog.now.sh](https://chronoblog.now.sh)) shows different options for how you can use notes - post podcasts, YouTube videos, presentations, post links or, in fact, text notes.\r\n\r\nPlace your notes inside `content/notes`:\r\n\r\n```\r\nchronoblog-site\r\n  ├─ content\r\n  │  ├─ links\r\n  │  ├─ notes // \u003c- notes folder\r\n  │  │  └─ note-chronoblog // \u003c- one note folder\r\n  │  │     └─ index.md // \u003c- note file\r\n  │  └─ posts\r\n  ├─ gatsby-config.js\r\n  ├─ package.json\r\n  └─ src\r\n```\r\n\r\nA typical note:\r\n\r\n`content/notes/note-chronoblog/index.md`\r\n\r\n```md\r\n---\r\ndate: 2019-11-02\r\ntags: ['note']\r\n---\r\n\r\nNote card - the type of content that is fully displayed in the feed of the site.\r\n```\r\n\r\nA note only needs a `date`.\r\n\r\n### Adding Content\r\n\r\nTo add content locally, you need to create a folder in `content/posts/` (if you are creating a new **blog `post`**). Give this folder any name (`some-blog-post` for example), and create file `index.md` inside this folder.\r\n\r\nThe file `index.md` maybe something like this:\r\n\r\n```md\r\n---\r\ntitle: Some Blog Post Example\r\ncover: ./image.jpg\r\ndate: 2019-11-05\r\ntags: ['post']\r\n---\r\n\r\nSome blog post text\r\n```\r\n\r\nPut some image in the same folder (in `some-blog-post`). If its name matches the `cover` from the `index.md` file, then this image will become the post cover.\r\n\r\nTo create a new **`link`** you need to do the same thing but in the folder `content/links/` (and do not forget that the link must have `link:`).\r\n\r\nAnd to create a new **`note`**, yes, again the same thing, but in the folder `content/notes/`.\r\n\r\nThe type of content is determined by the folder in which it is located!\r\n\r\n### Additional options available to content\r\n\r\nAll types of content have additional, optional options that can help you manage the content on the site.\r\n\r\n**`hide`** - if the content has `hide: true`, then this content will not be displayed in the feed on the site (in any feed). But at the same time, this content itself will exist and will be available.\r\n\r\n**`draft`** - if the content has `draft: true`, this content will not be on the site in any form.\r\n\r\n### frontmatter-placeholder\r\n\r\nAfter you understand the content of the starter, you can delete the default content and start filling the site with your content.\r\n\r\nHowever, it is better to leave the file `content/links/frontmatter-placeholder` in place and do not delete it. This content still doesn’t appear on the site (since it has `draft: true`). But its existence prevents some errors related to Gatsby and GraphQL, which may appear on an empty site.\r\n\r\n## Permanent parts of the site\r\n\r\nIt makes sense to change the default values of some parts of the site.\r\n\r\nAll these parts are just theme components. Starter replaces them with its using [Component Shadowing](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/).\r\n\r\n\u003e Component Shadowing lets you replace the theme’s original file\r\n\r\nYou can replace any component of Chronoblog. But the parts listed here are not just possible to replace - it is recommended to do to make your site unique.\r\n\r\n### site-header\r\n\r\nYou can find this file here: **`src/gatsby-theme-chronoblog/site-header.mdx`**\r\n\r\nUsually here is the main menu of the site. By default, it looks like this:\r\n\r\n```html\r\n\u003cMenuMain\u003e\r\n  \u003cMenuBlock\u003e\r\n    \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\r\n    \u003cLink to=\"/projects\"\u003eProjects\u003c/Link\u003e\r\n  \u003c/MenuBlock\u003e\r\n  \u003cMenuBlock\u003e\r\n    \u003cSocialLinks /\u003e\r\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;\u003c/span\u003e\r\n    \u003cLightDarkSwitchButton darkLabel=\"🌙\" lightLabel=\"☀️\" /\u003e\r\n  \u003c/MenuBlock\u003e\r\n\u003c/MenuMain\u003e\r\n```\r\n\r\nBy default, the starter has two links in the menu - to the main page of the site (`\u003cLink to=\"/\"\u003eHome\u003c/Link\u003e`) and to the additional page of the site (`\u003cLink to=\"/projects\"\u003eProjects\u003c/Link\u003e`). The additional page of the site in the menu exists only as an example, you can change it or delete it if you do not need it. Then this file will look like this:\r\n\r\n```html\r\n\u003cMenuMain\u003e\r\n  \u003cMenuBlock\u003e\r\n    \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\r\n  \u003c/MenuBlock\u003e\r\n  \u003cMenuBlock\u003e\r\n    \u003cSocialLinks /\u003e\r\n    \u003cspan\u003e\u0026nbsp;\u0026nbsp;\u003c/span\u003e\r\n    \u003cLightDarkSwitchButton darkLabel=\"🌙\" lightLabel=\"☀️\" /\u003e\r\n  \u003c/MenuBlock\u003e\r\n\u003c/MenuMain\u003e\r\n```\r\n\r\nYou may also have noticed the `\u003cSocialLinks /\u003e`. This component is designed to display social network icons. Read more about this component here: [`SocialLinks`](#sociallinks-component)\r\n\r\nMore about the button for switching between light and dark: [`LightDarkSwitchButton`](#lightdarkswitchbutton-component)\r\n\r\n### site-footer\r\n\r\nYou can find this file here: **`src/gatsby-theme-chronoblog/site-footer.mdx`**\r\n\r\nThis is a footer of your site, place here everything that you consider necessary to see in the footer.\r\n\r\nBy default, this file looks like this:\r\n\r\n```html\r\n\u003cdiv style={{textAlign: 'center'}}\u003e\r\n  \u003cSocialLinks justifyContent='center' fontSize={40} /\u003e\r\n  \u003cp\u003e\u0026nbsp;\u003c/p\u003e\r\n  \u003cdiv\u003e© {new Date().getFullYear()}\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n### post-footer\r\n\r\nFooter of the post is what comes after every post on the blog. Usually, information about the author is placed here.\r\n\r\nYou can find this file here: **`src/gatsby-theme-chronoblog/post-footer.mdx`**\r\n\r\nBy default, this file looks like this:\r\n\r\n```html\r\n\u003cAuthorBanner\u003e\u003c/AuthorBanner\u003e\r\n```\r\n\r\nThe whole point of this file is to show how you can use it! Feel free to modify this file. Or, if you do not need it, remove everything from it and leave it blank.\r\n\r\nBy default, there is the author’s banner component that displays the author of the site.\r\n\r\nMore about `AuthorBanner` component: [AuthorBanner Component](#authorbanner-component).\r\n\r\n#### Get post data in post footer\r\n\r\nYou can get data about the post under which the footer is located:\r\n\r\n```jsx\r\nPost Slug: {{props.postData.fields.slug}}  // /full-blog-post/\r\nPost Title: {{props.postData.frontmatter.title}} // Full Blog Post Example\r\nPost Date: {{props.postData.frontmatter.date}} // 2019-12-01T00:00:00.000Z\r\nPost id: {{props.postData.id}} // 0ff66c75-f55f-5a87-9652-e2998c7148e0\r\n```\r\n\r\nThis can be useful, for example, to connect a comment system to the site. Example of how you can use Chronoblog and [Gatsby Plugin Disqus](https://github.com/tterb/gatsby-plugin-disqus):\r\n\r\n```jsx\r\nimport { Disqus } from 'gatsby-plugin-disqus';\r\n\r\n\u003cAuthorBanner\u003e\u003c/AuthorBanner\u003e\r\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\r\n\u003cDisqus\r\n\tconfig={{\r\n\t\turl: props.siteMetadata.siteUrl + props.postData.fields.slug,\r\n\t\ttitle: props.postData.frontmatter.title,\r\n\t\tid: props.postData.id\r\n\t}}\r\n/\u003e\r\n```\r\n\r\n## Pages\r\n\r\nSite pages can be found here: **`src/pages`**\r\n\r\nIn Chronoblog starter you can find two pages:\r\n\r\n`index.mdx` - the main page of the site\r\n\r\n`projects.mdx` - example page that you can rename, change, or simply delete\r\n\r\nA path where you can find page corresponds to the name of the file, that is, the page `projects.mdx` can be found at `http://localhost:8000/projects`.\r\n\r\n`index` is an exception to this.\r\n\r\nPages can be used to create: contact pages, portfolio/project pages, pages dedicated to one type of content (articles on a specific topic filtered by tags), etc.\r\n\r\nJust remember to add a link to the page in the main menu (if you want to see this page in the menu). Read more about it here: [site-header](#site-header)\r\n\r\nDue to how Chronoblog works, pages are not the primary way to provide information. It’s quite normal not to use a single page at all (except for the main page). The main way to organize content in Chronoblog is tags, not pages.\r\n\r\n### index.mdx - homepage of your site\r\n\r\nBy default, it looks something like this:\r\n\r\n`src/pages/index.mdx`\r\n\r\n```html\r\n\u003cAuthorBanner /\u003e\r\n\r\nWelcome to the Gatsby Starter Chronoblog! This starter will help you quickly and\r\neasily create a website using Chronoblog Gatsby Theme. What you see is the main\r\npage of the site. Replace everything here with your own content by editing this\r\nfile: `src/pages/index.mdx` ---\r\n\r\n\u003cFeedSearch /\u003e\r\n\u003cTags /\u003e\r\n\u003cFeedItems /\u003e\r\n```\r\n\r\nYou should replace the content of the main page with your own.\r\n\r\nPay attention to these components:\r\n\r\n```html\r\n\u003cFeedSearch /\u003e\r\n\u003cTags /\u003e\r\n\u003cFeedItems /\u003e\r\n```\r\n\r\nYou can read more about them here:\r\n\r\n- [FeedItems component](#feeditems-component)\r\n- [Tags component](#tags-component)\r\n- [FeedSearch component](#feedsearch-component)\r\n\r\n# Documentation\r\n\r\nHere is more in-depth information about various aspects of Chronoblog.\r\n\r\n## Feed\r\n\r\nFeed displays site content.\r\n\r\nThe standard way to use these components is how the main page of the site uses them:\r\n\r\n`src/pages/index.mdx`\r\n\r\n```html\r\n\u003cFeedSearch /\u003e\r\n\u003cTags /\u003e\r\n\u003cFeedItems /\u003e\r\n```\r\n\r\nHow do these components work in `mdx` files if we did not import them there? They are already imported to `mdx` inside Chronoblog! So you do not need to do this. You can read about this technique here: [mdxjs.com/advanced/components](https://mdxjs.com/advanced/components)\r\n\r\n### FeedItems component\r\n\r\nThe most important component of the feed - this component displays content.\r\n\r\nIn this form, it is used, for example, on the main page of the site (`src/pages/index.mdx`):\r\n\r\n```html\r\n\u003cFeedItems /\u003e\r\n```\r\n\r\n| Prop | Required | Type | Description |\r\n| --- | --- | --- | --- |\r\n| `filterByTags` | optional | string[] | takes an array of tags and displays all content that have at least one of these tags |\r\n| `filterByTypes` | optional | string[] | takes an array of content types (**`links`**, **`posts`**, **`notes`**) and displays only this content type |\r\n| `itemsFormat` | optional | string | show **`compact`** or **`card`** items format |\r\n| `limit` | optional | number | number of content items to be displayed |\r\n| `showMoreButton` | optional | boolean | show or not to show the button \"show more\". |\r\n| `yearSeparator` | optional | \"year\" / \"space\" / boolean | show or not the separator by year, and if the separator is displayed, then show the year or the gap of empty space |\r\n\r\n`filterByTags` example. This component will display all site content that have the `project` tag:\r\n\r\n```html\r\n\u003cFeedItems filterByTags={['project']} /\u003e\r\n```\r\n\r\n### Tags component\r\n\r\nThis component displays all tags available on the site.\r\n\r\n```html\r\n\u003cTags /\u003e\r\n```\r\n\r\n### FeedSearch component\r\n\r\nThe search string to search feed items. It makes no sense to put this component if there is no `\u003cFeedItems /\u003e` component nearby.\r\n\r\n```html\r\n\u003cFeedSearch /\u003e \u003cFeedItems /\u003e\r\n```\r\n\r\n## SocialLinks component\r\n\r\n`SocialLinks` component displays links to your profiles on social networks in the form of icons. The information about what to display this component takes from [`gatsby-config.js`](#gatsby-config), from `siteMetadata.social`.\r\n\r\n`\u003cSocialLinks /\u003e` already included in all `mdx`, it can simply be used in any `.mdx` file:\r\n\r\n```html\r\n\u003cSocialLinks /\u003e\r\n```\r\n\r\n| Prop | Required | Type | Description |\r\n| --- | --- | --- | --- |\r\n| `fontSize` | optional | number / string | size of the icons |\r\n| `justifyContent` | optional | string[] / string |  |\r\n| `socialLinks` | optional | array | allows you to set any links, instead of those taken from `siteMetadata.social` |\r\n\r\nThis component also accepts any other props, this can be used to, say, set the style you need. For example, change color:\r\n\r\n```html\r\n\u003cSocialLinks sx={{ color: \"#407b6e\" }} /\u003e\r\n```\r\n\r\n## AuthorBanner component\r\n\r\n`AuthorBanner` component displays information about the author of the site. First of all, this component is needed to display the author at the end of each blog post (see [`post-footer`](#post-footer)). But it can be used in any `.mdx` file.\r\n\r\nInformation about the author (name, description of the author, avatar and links to social networks) are taken from [`gatsby-config.js`](#gatsby-config).\r\n\r\n```html\r\n\u003cAuthorBanner\u003e\u003c/AuthorBanner\u003e\r\n```\r\n\r\n`AuthorBanner` accepts `children`, together with them it can be much more specific:\r\n\r\n```html\r\n\u003cAuthorBanner sx={{color: '#f1f2f6', backgroundColor: `#222`}}\u003e\r\n  \u003cAuthorBannerAvatar /\u003e\r\n  \u003cdiv\u003e\r\n    \u003cAuthorBannerHeading as='h1' sx={{fontSize: [7]}} /\u003e\r\n    \u003cAuthorBannerDescription /\u003e\r\n    \u003cSocialLinks fontSize=\"30px\" /\u003e\r\n  \u003c/div\u003e\r\n\u003c/AuthorBanner\u003e\r\n```\r\n\r\nThis way you can more specifically customize the look of the banner.\r\n\r\n## LightDarkSwitchButton component\r\n\r\nThis component displays a button for switching between light and dark themes.\r\n\r\nIn the starter, it is used in the main menu: [site-header](#site-header)\r\n\r\n```html\r\n\u003cLightDarkSwitchButton /\u003e\r\n```\r\n\r\n| Prop         | Required | Type            | Description      |\r\n| ------------ | -------- | --------------- | ---------------- |\r\n| `fontSize`   | optional | number / string | size of the font |\r\n| `darkLabel`  | optional | string          | dark mode label  |\r\n| `lightLabel` | optional | string          | light mode label |\r\n\r\nYou can use any text for switches (including emoji):\r\n\r\n```html\r\n\u003cLightDarkSwitchButton darkLabel=\"🌙\" lightLabel=\"☀️\" /\u003e\r\n```\r\n\r\n## Content Cover\r\n\r\nAny [content](#content) can have a cover.\r\n\r\nYou most likely want to keep the cover image in the same folder as your blog `post` (or `link`, or `note`). But this is optional:\r\n\r\n```\r\nchronoblog-site\r\n  └─ content\r\n     ├─ links\r\n     ├─ notes\r\n     └─ posts\r\n        └─ some-blog-post // \u003c- blog post with cover\r\n           ├─ image.jpg // \u003c- cover image\r\n           └─ index.md // \u003c- post file\r\n```\r\n\r\nIn `index.md` or in `index.mdx` file of the post:\r\n\r\n```md\r\n---\r\ntitle: Full Blog Post Example\r\ncover: ./image.jpg \u003c- cover image\r\ndate: 2019-11-05\r\n---\r\n\r\nSome blog post text\r\n```\r\n\r\nCover used in the feed, in the full blog post, as well as the main image for the metadata of the content.\r\n\r\nCover very forgiving to the size of the image, it is always in the center and always retains its proportions.\r\n\r\n## Font Awesome Icons\r\n\r\nChronoblog uses [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) for icons. Brand icons (they call them “fab”) are already built into all `.mdx` files - you don’t need to import them from anywhere, just use them, for example like this:\r\n\r\n```html\r\n\u003cFontAwesomeIcon icon={['fab', 'twitter']} /\u003e \u003cFontAwesomeIcon icon={['fab',\r\n'github']} /\u003e \u003cFontAwesomeIcon icon={['fab', 'instagram']} /\u003e\r\n```\r\n\r\nThese three icons that were not related to any brands were also built in:\r\n\r\n```html\r\n\u003cFontAwesomeIcon icon=\"at\" /\u003e\r\n\u003cFontAwesomeIcon icon=\"envelope\" /\u003e\r\n\u003cFontAwesomeIcon icon=\"phone\" /\u003e\r\n```\r\n\r\nYou can use the icons inside the text in the `.md` and `.mdx` files:\r\n\r\n```md\r\nSome Text. Text with \u003cFontAwesomeIcon icon={['fab', 'github']} /\u003e Icon\r\n```\r\n\r\n## SEO and metadata\r\n\r\nTo work with metadata, Chronoblog relies on [react-helmet](https://www.npmjs.com/package/react-helmet) and [gatsby-plugin-react-helmet](https://www.npmjs.com/package/gatsby-plugin-react-helmet).\r\n\r\nMost of the work related to SEO and metadata goes automatically. Just based on what information you most likely would like to see in metadata. It is enough for the user to correctly fill in the information about the site in `gatsby-config.js` - [gatsby-config](#gatsby-config).\r\n\r\n### Metadata generation\r\n\r\n**Basic metadata:**\r\n\r\n- title is taken from the post title + site name.\r\n- description is taken from the description of the post, or, if there is no description, from the beginning of the post itself.\r\n- cover (if any) is used as the main image.\r\n\r\nThe same logic generates metadata for [Open Graph](https://www.ogp.me/) and for [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started).\r\n\r\n### Metadata Verification Tools\r\n\r\nSee how Chronoblog works with metadata using these tools. For example, copy this link and paste it into the validation tool:\r\n\r\n```\r\nhttps://chronoblog.now.sh/full-blog-post/\r\n```\r\n\r\nTwitter card validator: [cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)  \r\nFacebook debug OG: [developers.facebook.com/tools/debug/og/object](https://developers.facebook.com/tools/debug/og/object)\r\n\r\n### SEO component in `.mdx`\r\n\r\nYou can use `SEO` component in any `.mdx` file (it does not need to be imported). This component accepts child elements and you can set any metatags inside it as if you used the [react-helmet](https://www.npmjs.com/package/react-helmet) plugin on its own.\r\n\r\nThis can be useful if you need to set, for example, a special title for some page on the site.\r\n\r\n## Prism Code Highlight\r\n\r\nChronoblog already has built-in code highlighting for posts and other content. This is done thanks to [Prism](https://prismjs.com/) and [@theme-ui/prism](https://theme-ui.com/packages/prism). There is already built in support for many programming languages.\r\n\r\n### Adding support for additional programming languages\r\n\r\n## Shadowing in Chronoblog Gatsby Theme\r\n\r\nShadowing is a feature of any Gatsby Theme. You can read more about this in Gatsby docs: [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/)\r\n\r\n\u003e This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.\r\n\r\nThis all works in the case of Chronoblog Theme. However, there are components that are still better not to touch so as not to break anything when updating Chronoblog.\r\n\r\nFor example, if you want to change the site menu, you need to create file `site-header.mdx` here: `src/gatsby-theme-chronoblog/site-header.mdx`. This will automatically replace default file of Chronoblog itself (which you can see here: [github.com/Chronoblog/gatsby-theme-chronoblog/blob/master/packages/gatsby-theme-chronoblog/src/site-header.mdx](https://github.com/Chronoblog/gatsby-theme-chronoblog/blob/master/packages/gatsby-theme-chronoblog/src/site-header.mdx))\r\n\r\n### Components that can and should be shadowed\r\n\r\nComponents that were specially created for you to change them:\r\n\r\n| shadow | name | description |\r\n| --- | --- | --- |\r\n| ✅ | `src/gatsby-theme-chronoblog/post-footer.mdx` | read: [post-footer](#post-footer) |\r\n| ✅ | `src/gatsby-theme-chronoblog/site-header.mdx` | read: [site-header](#site-header) |\r\n| ✅ | `src/gatsby-theme-chronoblog/site-footer.mdx` | read: [post-footer](#post-footer) |\r\n| ✅ | `src/gatsby-theme-chronoblog/content-bottom.mdx` |  |\r\n\r\n# Feedback\r\n\r\n🤝 If you have any problems with the Chronoblog, or you have interesting ideas, write to the github issue: [github.com/Chronoblog/gatsby-theme-chronoblog/issues](https://github.com/Chronoblog/gatsby-theme-chronoblog/issues)\r\n\r\n🐦 You can also contact me on Twitter: [twitter.com/Ganevru](https://twitter.com/Ganevru), I will be glad to know your opinion about Chronoblog.\r\n\r\n✍️ If you made a site using Chronoblog - write to me about it!\r\n\r\n# Credits\r\n\r\n## Art\r\n\r\nIllustrations and Images that are used in the project (usually in [Starters](#demo-and-starters)).\r\n\r\n- Illlustrations, open source illustrations kit: [illlustrations.co](https://illlustrations.co/)\r\n- Lukasz Adam free illustrations: [lukaszadam.com/illustrations](https://lukaszadam.com/illustrations)\r\n- Deszone: [deszone.net](https://deszone.net/), free vector graphics ratterns, illustrations, icons.\r\n- Unsplash: [unsplash.com](https://unsplash.com/), the internet’s source of freely usable images. Powered by creators everywhere.\r\n- Undraw: [undraw.co](https://undraw.co/), open-source illustrations for every project you can imagine and create.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fal3rez%2Fgatsby-theme-chronoblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fal3rez%2Fgatsby-theme-chronoblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fal3rez%2Fgatsby-theme-chronoblog/lists"}