+
+Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting. Using the Gatsby Theme [`@lekoarts/gatsby-theme-minimal-blog`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog).
+
+[**Demo Website**](https://minimal-blog.lekoarts.de)
+
+Also be sure to checkout other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de)
+
+## ✨ Features
+
+- MDX
+- Fully customizable through the usage of Gatsby Themes (and Theme UI)
+- Light Mode / Dark Mode
+- Typography driven, minimal style
+- Tags/Categories support
+- Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support. Also allows adding line numbers, line highlighting, language tabs, and file titles.
+- Google Analytics Support
+- SEO (Sitemap, OpenGraph tags, Twitter tags)
+- Offline Support & WebApp Manifest
+
+## 🚀 Getting Started
+
+1. **Create a Gatsby site.**
+
+Use the Gatsby CLI to create a new site, specifying this project
+
+```sh
+gatsby new project-name https://github.com/LekoArts/gatsby-starter-minimal-blog
+```
+
+2. **Start developing.**
+
+Navigate into your new site's directory and start it up.
+
+```sh
+cd project-name
+gatsby develop
+```
+
+3. **Open the code and start customizing!**
+
+Your site is now running at `http://localhost:8000`!
+
+If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can checkout this [shorter](https://www.gatsbyjs.org/docs/themes/using-a-gatsby-theme/) or [longer](https://www.gatsbyjs.org/tutorial/using-a-theme/) tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.
+
+## 📝 Using and modifying this starter
+
+**Important Note:** Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) to understand how to customize the underlying theme!
+
+This starter creates a new Gatsby site that installs and configures the theme [`@lekoarts/gatsby-theme-minimal-blog`](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog).
+
+Have a look at the theme's README and files to see what options are available and how you can shadow the various components including Theme UI. Generally speaking you will want to place your files into `src/@lekoarts/gatsby-theme-minimal-blog/` to shadow/override files. The Theme UI config can be configured by shadowing its files in `src/gatsby-plugin-theme-ui/`.
+
+### Code Highlighting
+
+Since the underlying theme ships with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) certain additional features were added to code blocks. You can find an overview / usage example in the [example repository](https://github.com/LekoArts/gatsby-themes/tree/master/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx)! If you want to change certain code styles or add additional language tabs, you need to shadow the file `src/@lekoarts/gatsby-theme-minimal-blog/styles/code.js`.
+
+**Language tabs:**
+
+When you add a language (such as e.g. `js` or `javascript`) to the code block, a little tab will appear at the top left corner.
+
+````
+```js
+// code goes here
+```
+````
+
+**Code titles:**
+
+You can display a title (e.g. the file path) above the code block.
+
+````
+```jsx:title=your-title
+// code goes here
+```
+````
+
+Or without a specific language:
+
+````
+```:title=your-title
+// code goes here
+```
+````
+
+**Line highlighting:**
+
+You can highlight single or multiple (or both) lines in a code block. You need to add a language.
+
+````
+```js {2,4-5}
+const test = 3
+const foo = 'bar'
+const harry = 'potter'
+const hermione = 'granger'
+const ron = 'weasley'
+```
+````
+
+**Hide line numbers:**
+
+If you want to hide line numbers you can either globally disable them (see Theme options) or on a block-by-block basis. You can also combine that with the other attributes.
+
+````
+```noLineNumbers
+// code goes here
+```
+````
+
+**react-live:**
+
+Add `react-live` to the code block (and render the component) to see a preview below it.
+
+````
+```js react-live
+const onClick = () => {
+ alert("You opened me");
+};
+render();
+```
+````
+
+### Adding content
+
+#### Adding a new blog post
+
+New blog posts will be shown on the index page (the three most recent ones) of this theme and on the blog overview page. They can be added by creating MDX files inside `content/posts`. General setup:
+
+1. Create a new folder inside `content/posts`
+1. Create a new `index.mdx` file, and add the frontmatter
+1. Add images to the created folder (from step 1) you want to reference in your blog post
+1. Reference an image as your `banner` in the frontmatter
+1. Write your content below the frontmatter
+
+**Frontmatter reference:**
+
+```md
+---
+title: Introduction to "Defence against the Dark Arts"
+date: 2019-11-07
+description: Defence Against the Dark Arts (abbreviated as DADA) is a subject taught at Hogwarts School of Witchcraft and Wizardry and Ilvermorny School of Witchcraft and Wizardry.
+tags:
+ - Tutorial
+ - Dark Arts
+banner: ./defence-against-the-dark-arts.jpg
+---
+```
+
+**The fields `description` and `banner` are optional!** If no description is provided, an excerpt of the blog post will be used. If no banner is provided, the default `siteImage` (from `siteMetadata`) is used.
+
+The `date` field has to be written in the format `YYYY-MM-DD`!
+
+#### Adding a new page
+
+Additional pages can be created by placing MDX files inside `contents/pages`, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in `siteMetadata`). General instructions:
+
+1. Create a new folder inside `content/pages`
+1. Create a new `index.mdx` file, and add the frontmatter
+1. Write your content below the frontmatter
+1. Optionally add files/images to the folder you want to reference from the page
+
+**Frontmatter reference:**
+
+```md
+---
+title: About
+slug: "/about"
+---
+```
+
+#### Changing the "Hero" text
+
+To edit the hero text ("Hi, I'm Lupin...), create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx` to edit the text.
+
+#### Changing the "Projects" part
+
+To edit the projects part below "Latest posts", create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx` to edit the contents.
+
+### Change your `static` folder
+
+The `static` folder contains the icons, social media images and robots.txt. Don't forget to change these files, too!
+
+## 🤔 Questions or problems?
+
+Please open up an issue on the main repository: [LekoArts/gatsby-themes](https://github.com/LekoArts/gatsby-themes). Thanks!
+
+## 🎓 Learning Gatsby
+
+Looking for more guidance? Full documentation for Gatsby lives [on Gatsby's website](https://www.gatsbyjs.org/).
+
+### Themes
+
+- To learn more about Gatsby themes specifically, we recommend checking out the [theme docs](https://www.gatsbyjs.org/docs/themes/).
+
+### General
+
+- **For most developers, I recommend starting with the [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.
+
+- **To dive straight into code samples, head [to Gatsby's documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Reference Guides_ and _Gatsby API_ sections in the sidebar.
+
+## 🌟 Supporting me
+
+Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on [Twitter](https://twitter.com/lekoarts_de) and share the project with me.
+
+Please star this project, share it on Social Media or consider supporting me on [Patreon](https://www.patreon.com/lekoarts)!
+
+If you want to hire me for **contract/freelance work**, you can do so! [Get in touch with me!](https://www.lekoarts.de/en/contact)
diff --git a/examples/minimal-blog/content/pages/about/index.mdx b/examples/minimal-blog/content/pages/about/index.mdx
new file mode 100644
index 000000000..ee4a88277
--- /dev/null
+++ b/examples/minimal-blog/content/pages/about/index.mdx
@@ -0,0 +1,10 @@
+---
+title: About
+slug: "/about"
+---
+
+Hi!
+
+Remus Lupin - also known as Moony - is currently teaching "Defense against the Dark Arts" at Hogwarts. He was afflicted with lycanthropy during his childhood, as a result of Fenrir Greyback's revenge against Lyall. He attended Hogwarts School of Witchcraft and Wizardry from 1971-1978 and was Sorted into Gryffindor House. During his school years he was one of the Marauders, best friends with Sirius Black, James Potter, and Peter Pettigrew. Together they created the Marauder's Map.
+
+He fought against Death Eaters once more in the Second Wizarding War, during which he lost his friend Sirius. In 1997, Remus married fellow Order member Nymphadora Tonks and had a son, Edward Remus Lupin, of whom he named Harry the godfather. Remus fought at the Battle of Hogwarts on 2 May, 1998, during which his wife was murdered by Bellatrix Lestrange. Remus was also murdered by Death Eater, Antonin Dolohov, during the first half of the same battle. His death was avenged by Filius Flitwick.
diff --git a/examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx b/examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx
new file mode 100644
index 000000000..fabd246ca
--- /dev/null
+++ b/examples/minimal-blog/content/posts/curses-and-counter-courses/index.mdx
@@ -0,0 +1,10 @@
+---
+title: "Curses and Counter-curses (Bewitch Your Friends and Befuddle Your Enemies with the Latest Revenges: Hair Loss, Jelly-Legs, Tongue-Tying, and Much, Much More)"
+date: 2019-10-25
+---
+
+Thestral dirigible plums, Viktor Krum hexed memory charm Animagus Invisibility Cloak three-headed Dog. Half-Blood Prince Invisibility Cloak cauldron cakes, hiya Harry! Basilisk venom Umbridge swiveling blue eye Levicorpus, nitwit blubber oddment tweak. Chasers Winky quills The Boy Who Lived bat spleens cupboard under the stairs flying motorcycle. Sirius Black Holyhead Harpies, you’ve got dirt on your nose. Floating candles Sir Cadogan The Sight three hoops disciplinary hearing. Grindlewald pig’s tail Sorcerer's Stone biting teacup. Side-along dragon-scale suits Filch 20 points, Mr. Potter.
+
+> Mobilicorpus reducto liberacorpus crucio. Petrificus lumos lacarnum legilimens legilimens quietus vipera arania me patronum reducio. Episkey reducio quietus mobilicorpus fidelius aparecium. Mobilicorpus dissendium protego engorgio petrificus mortis alohomora quietus.
+
+Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with flat side of silver dagger, releases juice better than cutting. Full moon Whomping Willow three turns should do it lemon drops. Locomotor trunks owl treats that will be 50 points, Mr. Potter. Witch Weekly, he will rise again and he will come for us, headmaster Erumpent horn. Fenrir Grayback horseless carriages ‘zis is a chance many would die for!
diff --git a/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/SpotifyPlayer.js b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/SpotifyPlayer.js
new file mode 100644
index 000000000..aae06126c
--- /dev/null
+++ b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/SpotifyPlayer.js
@@ -0,0 +1,55 @@
+/* eslint react/no-unknown-property: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+
+/**
+ * Spotify player iframe widget
+ *
+ * @author Alexander Wallin
+ * @see https://developer.spotify.com/technologies/widgets/spotify-play-button/
+ */
+
+import React, { Component } from "react"
+
+// Size presets, defined by Spotify
+const sizePresets = {
+ large: {
+ width: 300,
+ height: 380,
+ },
+ compact: {
+ width: 300,
+ height: 80,
+ },
+}
+
+/**
+ * SpotifyPlayer class
+ */
+class SpotifyPlayer extends Component {
+ // ------------------------------------------------------
+ // Render
+ // ------------------------------------------------------
+
+ render() {
+ const { uri, view, theme } = this.props
+ let { size } = this.props
+
+ if (typeof size === `string`) {
+ size = sizePresets[size]
+ }
+
+ return (
+
+ )
+ }
+}
+
+export default SpotifyPlayer
diff --git a/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx
new file mode 100644
index 000000000..514203d4a
--- /dev/null
+++ b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx
@@ -0,0 +1,163 @@
+---
+title: Fantastic Beasts and Where to Find Them
+date: 2019-11-01
+tags:
+ - Novel
+---
+
+import SpotifyPlayer from "./SpotifyPlayer";
+
+Here will a React component go:
+
+
+
+Here will a live code example go:
+
+```js react-live
+const onClick = () => {
+ alert("You opened me");
+};
+render();
+```
+
+Here will a normal code block go:
+
+```js
+(function() {
+
+var cache = {};
+var form = $('form');
+var minified = true;
+
+var dependencies = {};
+
+var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
+var treePromise = new Promise(function(resolve) {
+ $u.xhr({
+ url: treeURL,
+ callback: function(xhr) {
+ if (xhr.status < 400) {
+ resolve(JSON.parse(xhr.responseText).tree);
+ }
+ }
+ });
+});
+```
+
+Code block with code highlighting:
+
+```jsx:title=src/components/post.jsx {5-7,10}
+import React from "react";
+
+const Post = ({ data: { post } }) => (
+
+
+ {post.title}
+
+
+
+ {post.body}
+
+
+);
+
+export default Post;
+```
+
+Code block without title:
+
+```
+Harry Potter and the Philosopher's Stone
+```
+
+Code block without lineNumbers (but lang):
+
+```text noLineNumbers
+Harry Potter and the Chamber of Secrets
+```
+
+Code block without lineNumbers (and without lang):
+
+```noLineNumbers
+Harry Potter and the Chamber of Secrets
+```
+
+Code block with only the title:
+
+```:title=src/utils/scream.js
+const scream = (input) => window.alert(input)
+```
+
+Code block with only the title but without lineNumbers:
+
+```:title=src/utils/scream.js noLineNumbers
+const scream = (input) => window.alert(input)
+```
+
+Line highlighting without code title:
+
+```js {2,4-5}
+const test = 3;
+const foo = "bar";
+const harry = "potter";
+const hermione = "granger";
+const ron = "weasley";
+```
+
+Here will `inline code` go, just inside the text. Wow!
+
+Code block without line numbers but with highlighting, language, and title:
+
+```tsx:title=src/components/blog.tsx {7-9,16} noLineNumbers
+import React from "react";
+
+const Blog = ({ posts }: PostsProps) => {
+ const { tagsPath, basePath } = useSiteMetadata();
+
+ return (
+
+
+
+ Blog
+
+
+ View all tags
+
+
+
+
+ );
+};
+
+export default Blog;
+```
diff --git a/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx b/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx
new file mode 100644
index 000000000..9aeadfa02
--- /dev/null
+++ b/examples/minimal-blog/content/posts/harry-potter-and-the-half-blood-prince/index.mdx
@@ -0,0 +1,188 @@
+---
+title: Harry Potter and the Half-Blood Prince
+date: 2019-09-01
+tags:
+ - Novel
+ - Highlight
+---
+
+[View raw (TEST.md)](https://raw.github.com/adamschwartz/github-markdown-kitchen-sink/master/README.md)
+
+This is a paragraph.
+
+ This is a paragraph.
+
+# Header 1
+
+## Header 2
+
+ Header 1
+ ========
+
+ Header 2
+ --------
+
+# Header 1
+
+## Header 2
+
+### Header 3
+
+#### Header 4
+
+##### Header 5
+
+###### Header 6
+
+ # Header 1
+ ## Header 2
+ ### Header 3
+ #### Header 4
+ ##### Header 5
+ ###### Header 6
+
+# Header 1
+
+## Header 2
+
+### Header 3
+
+#### Header 4
+
+##### Header 5
+
+###### Header 6
+
+ # Header 1 #
+ ## Header 2 ##
+ ### Header 3 ###
+ #### Header 4 ####
+ ##### Header 5 #####
+ ###### Header 6 ######
+
+> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+ > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+> ## This is a header.
+>
+> 1. This is the first list item.
+> 2. This is the second list item.
+>
+> Here's some example code:
+>
+> Markdown.generate();
+
+ > ## This is a header.
+ > 1. This is the first list item.
+ > 2. This is the second list item.
+ >
+ > Here's some example code:
+ >
+ > Markdown.generate();
+
+- Red
+- Green
+- Blue
+
+* Red
+* Green
+* Blue
+
+- Red
+- Green
+- Blue
+
+```markdown
+- Red
+- Green
+- Blue
+
+* Red
+* Green
+* Blue
+
+- Red
+- Green
+- Blue
+```
+
+1. Buy flour and salt
+1. Mix together with water
+1. Bake
+
+```markdown
+1. Buy flour and salt
+1. Mix together with water
+1. Bake
+```
+
+Paragraph:
+
+ Code
+
+
+
+ Paragraph:
+
+ Code
+
+---
+
+---
+
+---
+
+---
+
+---
+
+ * * *
+
+ ***
+
+ *****
+
+ - - -
+
+ ---------------------------------------
+
+This is [an example](http://example.com "Example") link.
+
+[This link](http://example.com) has no title attr.
+
+This is [an example][id] reference-style link.
+
+[id]: http://example.com "Optional Title"
+
+ This is [an example](http://example.com "Example") link.
+
+ [This link](http://example.com) has no title attr.
+
+ This is [an example] [id] reference-style link.
+
+ [id]: http://example.com "Optional Title"
+
+_single asterisks_
+
+_single underscores_
+
+**double asterisks**
+
+**double underscores**
+
+ *single asterisks*
+
+ _single underscores_
+
+ **double asterisks**
+
+ __double underscores__
+
+This paragraph has some `code` in it.
+
+ This paragraph has some `code` in it.
+
+
+
+ 
diff --git a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/defence-against-the-dark-arts.jpg b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/defence-against-the-dark-arts.jpg
new file mode 100644
index 000000000..aa8d721ca
Binary files /dev/null and b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/defence-against-the-dark-arts.jpg differ
diff --git a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
new file mode 100644
index 000000000..1317ff6a6
--- /dev/null
+++ b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/index.mdx
@@ -0,0 +1,29 @@
+---
+title: Introduction to "Defence against the Dark Arts"
+date: 2019-11-07
+description: Defence Against the Dark Arts (abbreviated as DADA) is a subject taught at Hogwarts School of Witchcraft and Wizardry and Ilvermorny School of Witchcraft and Wizardry. In this class, students study and learn how to defend themselves against all aspects of the Dark Arts, including dark creatures, curses, hexes and jinxes (dark charms), and duelling.
+tags:
+ - Tutorial
+ - Dark Arts
+banner: ./defence-against-the-dark-arts.jpg
+---
+
+Thestral dirigible plums, Viktor Krum hexed memory charm Animagus Invisibility Cloak three-headed Dog. Half-Blood Prince Invisibility Cloak cauldron cakes, hiya Harry! Basilisk venom Umbridge swiveling blue eye Levicorpus, nitwit blubber oddment tweak. Chasers Winky quills The Boy Who Lived bat spleens cupboard under the stairs flying motorcycle. Sirius Black Holyhead Harpies, you’ve got dirt on your nose. Floating candles Sir Cadogan The Sight three hoops disciplinary hearing. Grindlewald pig’s tail Sorcerer's Stone biting teacup. Side-along dragon-scale suits Filch 20 points, Mr. Potter.
+
+Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with flat side of silver dagger, releases juice better than cutting. Full moon Whomping Willow three turns should do it lemon drops. Locomotor trunks owl treats that will be 50 points, Mr. Potter. Witch Weekly, he will rise again and he will come for us, headmaster Erumpent horn. Fenrir Grayback horseless carriages ‘zis is a chance many would die for!
+
+
+
+Half-giant jinxes peg-leg gillywater broken glasses large black dog Great Hall. Nearly-Headless Nick now string them together, and answer me this, which creature would you be unwilling to kiss? Poltergeist sticking charm, troll umbrella stand flying cars golden locket Lily Potter. Pumpkin juice Trevor wave your wand out glass orbs, a Grim knitted hats. Stan Shunpike doe patronus, suck his soul Muggle-Born large order of drills the trace. Bred in captivity fell through the veil, quaffle blue flame ickle diddykins Aragog. Yer a wizard, Harry Doxycide the woes of Mrs. Weasley Goblet of Fire.
+
+Exume lumos protego leviosa. Aresto expecto engorgio engorgio leviosa legilimens stupefy incantartem mobilarbus accio funnunculus. Serpensortia locomotor incarcerous aguamenti colloportus. Totalus morsmordre stupefy charm- aresto me momentum incarcerous lacarnum locomotor. Revelio relashio veritaserum impedimenta expecto quietus. Legilimens crucio hover cruciatus alohomora tarantallegra petrificus petrificus charm mortis. Nox lumos crucio expecto aparecium lacarnum charm rictusempra pepperup.
+
+Sectumsempra aresto exume reducio momentum tarantallegra patronum. Totalus amortentia momentum mortis quietus evanesco. Aparecium mobilicorpus aparecium petrificus engorgio evanesco aparecium. Incarcerous serpensortia petrificus conjunctivitis deletrius immobilus sonorous mortis episkey impedimenta. Immobilus lacarnum totalus protean. Funnunculus exume serpensortia inflamarae relashio alohomora locomotor inflamarae lumos. Skele-gro totalus.
+
+Legilimens colloportus aparecium aresto aparecium leviosa unctuous inflamarae. Quietus mobilarbus incarcerous stupefy confundus leviosa. Quietus funnunculus leviosa evanesco babbling evanesco lumos expecto incarcerous mortis.
+
+Reparo reparo alohomora vow. Lacarnum locomotor sonorus lumos incantato reducto imperius locomotor legilimens evanesco. Locomotor patronum stupefy lumos scourgify lacarnum. Portus charm inflamarae leviosa stupefy. Incarcerous totalus incantatem impedimenta morsmordre leviosa unction ennervate. Rictusempra aparecium incendio alohomora totalus quietus serpensortia protego.
+
+Mobilicorpus reducto liberacorpus crucio. Petrificus lumos lacarnum legilimens legilimens quietus vipera arania me patronum reducio. Episkey reducio quietus mobilicorpus fidelius aparecium. Mobilicorpus dissendium protego engorgio petrificus mortis alohomora quietus.
+
+Sonorus tarantallegra leviosa wingardium finite stupefy.
diff --git a/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/potions.jpg b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/potions.jpg
new file mode 100644
index 000000000..1c1651bfc
Binary files /dev/null and b/examples/minimal-blog/content/posts/introduction-to-defence-against-the-dark-arts/potions.jpg differ
diff --git a/examples/minimal-blog/gatsby-config.js b/examples/minimal-blog/gatsby-config.js
new file mode 100644
index 000000000..561d028e4
--- /dev/null
+++ b/examples/minimal-blog/gatsby-config.js
@@ -0,0 +1,58 @@
+require(`dotenv`).config({
+ path: `.env`,
+})
+
+module.exports = {
+ siteMetadata: {
+ siteTitleAlt: `Minimal Blog - Gatsby Theme`,
+ navigation: [
+ {
+ title: `Blog`,
+ slug: `/blog`,
+ },
+ {
+ title: `About`,
+ slug: `/about`,
+ },
+ ],
+ },
+ plugins: [
+ {
+ resolve: `@lekoarts/gatsby-theme-minimal-blog`,
+ options: {},
+ },
+ {
+ resolve: `gatsby-plugin-google-analytics`,
+ options: {
+ trackingId: process.env.GOOGLE_ANALYTICS_ID,
+ },
+ },
+ `gatsby-plugin-sitemap`,
+ {
+ resolve: `gatsby-plugin-manifest`,
+ options: {
+ name: `minimal-blog - @lekoarts/gatsby-theme-minimal-blog`,
+ short_name: `minimal-blog`,
+ description: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and code highlighting.`,
+ start_url: `/`,
+ background_color: `#fff`,
+ theme_color: `#6B46C1`,
+ display: `standalone`,
+ icons: [
+ {
+ src: `/android-chrome-192x192.png`,
+ sizes: `192x192`,
+ type: `image/png`,
+ },
+ {
+ src: `/android-chrome-512x512.png`,
+ sizes: `512x512`,
+ type: `image/png`,
+ },
+ ],
+ },
+ },
+ `gatsby-plugin-offline`,
+ `gatsby-plugin-netlify`,
+ ],
+}
diff --git a/examples/minimal-blog/package.json b/examples/minimal-blog/package.json
new file mode 100644
index 000000000..3a8bbc884
--- /dev/null
+++ b/examples/minimal-blog/package.json
@@ -0,0 +1,32 @@
+{
+ "private": true,
+ "name": "minimal-blog",
+ "description": "Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.",
+ "version": "0.0.1",
+ "author": "LekoArts ",
+ "license": "MIT",
+ "starter-name": "gatsby-starter-minimal-blog",
+ "scripts": {
+ "build": "gatsby build",
+ "develop": "gatsby develop",
+ "develop:cypress": "cross-env CYPRESS_SUPPORT=y yarn develop",
+ "build:cypress": "cross-env CYPRESS_SUPPORT=y yarn build",
+ "start": "gatsby develop",
+ "serve": "gatsby serve",
+ "clean": "gatsby clean"
+ },
+ "dependencies": {
+ "@lekoarts/gatsby-theme-minimal-blog": "^1.0.0",
+ "gatsby": "^2.13.3",
+ "gatsby-plugin-google-analytics": "^2.1.4",
+ "gatsby-plugin-manifest": "^2.2.3",
+ "gatsby-plugin-netlify": "^2.1.3",
+ "gatsby-plugin-offline": "^2.2.4",
+ "gatsby-plugin-sitemap": "^2.2.19",
+ "react": "^16.9.0",
+ "react-dom": "^16.9.0"
+ },
+ "devDependencies": {
+ "cross-env": "^5.2.0"
+ }
+}
diff --git a/examples/minimal-blog/static/android-chrome-192x192.png b/examples/minimal-blog/static/android-chrome-192x192.png
new file mode 100644
index 000000000..1f7850229
Binary files /dev/null and b/examples/minimal-blog/static/android-chrome-192x192.png differ
diff --git a/examples/minimal-blog/static/android-chrome-512x512.png b/examples/minimal-blog/static/android-chrome-512x512.png
new file mode 100644
index 000000000..cef32e2c2
Binary files /dev/null and b/examples/minimal-blog/static/android-chrome-512x512.png differ
diff --git a/examples/minimal-blog/static/apple-touch-icon-precomposed.png b/examples/minimal-blog/static/apple-touch-icon-precomposed.png
new file mode 100644
index 000000000..4ce28cf1c
Binary files /dev/null and b/examples/minimal-blog/static/apple-touch-icon-precomposed.png differ
diff --git a/examples/minimal-blog/static/apple-touch-icon.png b/examples/minimal-blog/static/apple-touch-icon.png
new file mode 100644
index 000000000..adef633d1
Binary files /dev/null and b/examples/minimal-blog/static/apple-touch-icon.png differ
diff --git a/examples/minimal-blog/static/banner.jpg b/examples/minimal-blog/static/banner.jpg
new file mode 100644
index 000000000..0347e0206
Binary files /dev/null and b/examples/minimal-blog/static/banner.jpg differ
diff --git a/examples/minimal-blog/static/favicon-16x16.png b/examples/minimal-blog/static/favicon-16x16.png
new file mode 100644
index 000000000..dfa95a5c9
Binary files /dev/null and b/examples/minimal-blog/static/favicon-16x16.png differ
diff --git a/examples/minimal-blog/static/favicon-32x32.png b/examples/minimal-blog/static/favicon-32x32.png
new file mode 100644
index 000000000..79af0d82a
Binary files /dev/null and b/examples/minimal-blog/static/favicon-32x32.png differ
diff --git a/examples/minimal-blog/static/favicon.ico b/examples/minimal-blog/static/favicon.ico
new file mode 100644
index 000000000..18b6bcaed
Binary files /dev/null and b/examples/minimal-blog/static/favicon.ico differ
diff --git a/examples/minimal-blog/static/robots.txt b/examples/minimal-blog/static/robots.txt
new file mode 100644
index 000000000..11bca05d6
--- /dev/null
+++ b/examples/minimal-blog/static/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+
+sitemap: https://minimal-blog.lekoarts.de/sitemap.xml
\ No newline at end of file
diff --git a/plop-templates/theme/README.md.hbs b/plop-templates/theme/README.md.hbs
index 6368e4735..9929d3c88 100644
--- a/plop-templates/theme/README.md.hbs
+++ b/plop-templates/theme/README.md.hbs
@@ -79,9 +79,37 @@ module.exports = {
};
```
+#### Additional configuration
+
+In 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`
+
+```js
+// gatsby-config.js
+module.exports = {
+ siteMetadata: {
+ // Used for the title template on pages other than the index site
+ siteTitle: `{{titleCase name}}`,
+ // Default title of the page
+ siteTitleAlt: `{{titleCase name}} - @lekoarts/gatsby-theme-{{kebabCase name}}`,
+ // Can be used for e.g. JSONLD
+ siteHeadline: `{{titleCase name}} - Gatsby Theme from @lekoarts`,
+ // Will be used to generate absolute URLs for og:image etc.
+ siteUrl: `https://{{kebabCase name}}.lekoarts.de`,
+ // Used for SEO
+ siteDescription: `TODO`,
+ // Will be set on the html tag
+ siteLanguage: `en`,
+ // Used for og:image and must be placed inside the `static` folder
+ siteImage: `/banner.jpg`,
+ // Twitter Handle
+ author: `@lekoarts_de`
+ }
+};
+```
+
### Shadowing
-Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) to understand how to customize the this theme! Generally speaking you will want to place your files into `src/@lekoarts/gatsby-theme-{{kebabCase name}}/` to shadow/override files.
+Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) to understand how to customize the this theme! Generally speaking you will want to place your files into `src/@lekoarts/gatsby-theme-{{kebabCase name}}/` to shadow/override files. The Theme UI config can be configured by shadowing its files in `src/gatsby-plugin-theme-ui/`.
## 🌟 Supporting me
diff --git a/themes/gatsby-theme-emma/src/components/navigation.tsx b/themes/gatsby-theme-emma/src/components/navigation.tsx
index 9d5477e57..a20e4f557 100644
--- a/themes/gatsby-theme-emma/src/components/navigation.tsx
+++ b/themes/gatsby-theme-emma/src/components/navigation.tsx
@@ -1,6 +1,6 @@
/** @jsx jsx */
-import { Link } from "gatsby"
import { jsx, Styled, Flex } from "theme-ui"
+import { Link } from "gatsby"
type Props = {
nav: {
diff --git a/themes/gatsby-theme-minimal-blog-core/.npmignore b/themes/gatsby-theme-minimal-blog-core/.npmignore
new file mode 100644
index 000000000..780a6c548
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog-core/.npmignore
@@ -0,0 +1,17 @@
+.cache
+node_modules
+public
+projects
+
+.idea
+.vscode
+.DS_Store
+
+index.d.ts
+types.ts
+
+__tests__
+
+
+tsconfig.json
+jest.config.js
\ No newline at end of file
diff --git a/themes/gatsby-theme-minimal-blog-core/README.md b/themes/gatsby-theme-minimal-blog-core/README.md
new file mode 100644
index 000000000..75fb61c6f
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog-core/README.md
@@ -0,0 +1,64 @@
+
+
+Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.
+
+[](https://minimal-blog.lekoarts.de) [](https://www.figma.com/file/sq2VwMy8579ioDTXjUdlYr/gatsby-theme-minimal-blog?node-id=0%3A1)
+
+Read the [Source Code](https://github.com/LekoArts/gatsby-starter-minimal-blog).
+
+Also be sure to checkout other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de)
+
+## Features
+
+- MDX
+- Theme UI-based theming
+- Light Mode / Dark Mode
+- Typography driven, minimal style
+- Tags/Categories support
+- Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support. Also allows adding line numbers, line highlighting, language tabs, and file titles.
+
+## Installation
+
+```sh
+npm install @lekoarts/gatsby-theme-minimal-blog
+```
+
+### Install as a starter
+
+This will generate a new site that pre-configures use of the theme.
+
+```sh
+gatsby new minimal-blog LekoArts/gatsby-starter-minimal-blog
+```
+
+[**View the starter's code**](https://github.com/LekoArts/gatsby-starter-minimal-blog)
+
+## Usage
+
+### Theme options
+
+| Key | Default Value | Description |
+| ----------------- | --------------- | --------------------------------------------------------------------------------------------------------- |
+| `basePath` | `/` | Root url for the theme |
+| `blogPath` | `/blog` | url for the blog post overview page |
+| `tagsPath` | `/tags` | url for the tags overview page and prefix for tags (e.g. `/tags/my-tag`) |
+| `postsPath` | `content/posts` | Location of posts |
+| `pagesPath` | `content/pages` | Location of additional pages (optional) |
+| `mdx` | `true` | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) |
+| `showLineNumbers` | `true` | Show line numbers in code blocks |
+
+#### Example usage
+
+```js
+// gatsby-config.js
+module.exports = {
+ plugins: [
+ {
+ resolve: `@lekoarts/gatsby-theme-minimal-blog`,
+ options: {
+ showLineNumbers: false,
+ }
+ }
+ }
+ ]
+};
+```
+
+#### Additional configuration
+
+In 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`
+
+```js
+// gatsby-config.js
+module.exports = {
+ siteMetadata: {
+ // Used for the title template on pages other than the index site
+ siteTitle: `Lupin`,
+ // Default title of the page
+ siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
+ // Can be used for e.g. JSONLD
+ siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
+ // Will be used to generate absolute URLs for og:image etc.
+ siteUrl: `https://minimal-blog.lekoarts.de`,
+ // Used for SEO
+ siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
+ // Will be set on the tag
+ siteLanguage: `en`,
+ // Used for og:image and must be placed inside the `static` folder
+ siteImage: `/banner.jpg`,
+ // Twitter Handle
+ author: `@lekoarts_de`,
+ // Links displayed in the header on the right side
+ externalLinks: [
+ {
+ name: `Twitter`,
+ url: `https://twitter.com/lekoarts_de`
+ },
+ {
+ name: `Instagram`,
+ url: `https://www.instagram.com/lekoarts.de/`
+ }
+ ],
+ // Navigation links
+ navigation: [
+ {
+ title: `Blog`,
+ slug: `/blog`
+ }
+ ]
+ }
+};
+```
+
+If you want to add additional items to the navigation or external links (left and right side of header), add objects in the shape shown above to the arrays.
+
+### Code Highlighting
+
+Since this theme ships with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) certain additional features were added to code blocks. You can find an overview / usage example in the [example repository](https://github.com/LekoArts/gatsby-themes/tree/master/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx)! If you want to change certain code styles or add additional language tabs, you need to shadow the file `src/@lekoarts/gatsby-theme-minimal-blog/styles/code.js`.
+
+**Language tabs:**
+
+When you add a language (such as e.g. `js` or `javascript`) to the code block, a little tab will appear at the top left corner.
+
+````
+```js
+// code goes here
+```
+````
+
+**Code titles:**
+
+You can display a title (e.g. the file path) above the code block.
+
+````
+```jsx:title=your-title
+// code goes here
+```
+````
+
+Or without a specific language:
+
+````
+```:title=your-title
+// code goes here
+```
+````
+
+**Line highlighting:**
+
+You can highlight single or multiple (or both) lines in a code block. You need to add a language.
+
+````
+```js {2,4-5}
+const test = 3
+const foo = 'bar'
+const harry = 'potter'
+const hermione = 'granger'
+const ron = 'weasley'
+```
+````
+
+**Hide line numbers:**
+
+If you want to hide line numbers you can either globally disable them (see Theme options) or on a block-by-block basis. You can also combine that with the other attributes.
+
+````
+```noLineNumbers
+// code goes here
+```
+````
+
+**react-live:**
+
+Add `react-live` to the code block (and render the component) to see a preview below it.
+
+````
+```js react-live
+const onClick = () => {
+ alert("You opened me");
+};
+render();
+```
+````
+
+### Shadowing
+
+Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) to understand how to customize the this theme! Generally speaking you will want to place your files into `src/@lekoarts/gatsby-theme-minimal-blog/` to shadow/override files.
+
+### Adding content
+
+#### Adding a new blog post
+
+New blog posts will be shown on the index page (the three most recent ones) of this theme and on the blog overview page. They can be added by creating MDX files inside `content/posts`. General setup:
+
+1. Create a new folder inside `content/posts`
+1. Create a new `index.mdx` file, and add the frontmatter
+1. Add images to the created folder (from step 1) you want to reference in your blog post
+1. Reference an image as your `banner` in the frontmatter
+1. Write your content below the frontmatter
+
+**Frontmatter reference:**
+
+```md
+---
+title: Introduction to "Defence against the Dark Arts"
+date: 2019-11-07
+description: Defence Against the Dark Arts (abbreviated as DADA) is a subject taught at Hogwarts School of Witchcraft and Wizardry and Ilvermorny School of Witchcraft and Wizardry.
+tags:
+ - Tutorial
+ - Dark Arts
+banner: ./defence-against-the-dark-arts.jpg
+---
+```
+
+**The fields `description` and `banner` are optional!** If no description is provided, an excerpt of the blog post will be used. If no banner is provided, the default `siteImage` (from `siteMetadata`) is used.
+
+The `date` field has to be written in the format `YYYY-MM-DD`!
+
+#### Adding a new page
+
+Additional pages can be created by placing MDX files inside `contents/pages`, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in `siteMetadata`). General instructions:
+
+1. Create a new folder inside `content/pages`
+1. Create a new `index.mdx` file, and add the frontmatter
+1. Write your content below the frontmatter
+1. Optionally add files/images to the folder you want to reference from the page
+
+**Frontmatter reference:**
+
+```md
+---
+title: About
+slug: "/about"
+---
+```
+
+#### Changing the "Hero" text
+
+To edit the hero text ("Hi, I'm Lupin...), create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx` to edit the text.
+
+#### Changing the "Projects" part
+
+To edit the projects part below "Latest posts", create a file at `src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx` to edit the contents.
+
+## 🌟 Supporting me
+
+Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on [Twitter](https://twitter.com/lekoarts_de) and share the project with me.
+
+Please star this project, share it on Social Media or consider supporting me on [Patreon](https://www.patreon.com/lekoarts)!
+
+If you want to hire me for **contract/freelance work**, you can do so! [Get in touch with me!](https://www.lekoarts.de/en/contact)
diff --git a/themes/gatsby-theme-minimal-blog/gatsby-config.js b/themes/gatsby-theme-minimal-blog/gatsby-config.js
new file mode 100644
index 000000000..5c5ba0ffd
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/gatsby-config.js
@@ -0,0 +1,49 @@
+const newsletterFeed = require(`./src/utils/newsletterFeed`)
+
+module.exports = options => {
+ const showLineNumbers = options.showLineNumbers || true
+
+ return {
+ siteMetadata: {
+ siteTitle: `Lupin`,
+ siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
+ siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
+ siteUrl: `https://minimal-blog.lekoarts.de`,
+ siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
+ siteLanguage: `en`,
+ siteImage: `/banner.jpg`,
+ author: `@lekoarts_de`,
+ externalLinks: [
+ {
+ name: `Twitter`,
+ url: `https://twitter.com/lekoarts_de`,
+ },
+ {
+ name: `Instagram`,
+ url: `https://www.instagram.com/lekoarts.de/`,
+ },
+ ],
+ navigation: [
+ {
+ title: `Blog`,
+ slug: `/blog`,
+ },
+ ],
+ showLineNumbers,
+ },
+ plugins: [
+ {
+ resolve: `@lekoarts/gatsby-theme-minimal-blog-core`,
+ options,
+ },
+ {
+ resolve: `gatsby-plugin-feed`,
+ options: newsletterFeed,
+ },
+ `gatsby-plugin-react-helmet`,
+ `gatsby-plugin-typescript`,
+ `gatsby-plugin-catch-links`,
+ `gatsby-plugin-theme-ui`,
+ ],
+ }
+}
diff --git a/themes/gatsby-theme-minimal-blog/index.js b/themes/gatsby-theme-minimal-blog/index.js
new file mode 100644
index 000000000..172f1ae6a
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/themes/gatsby-theme-minimal-blog/package.json b/themes/gatsby-theme-minimal-blog/package.json
new file mode 100644
index 000000000..b13786509
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/package.json
@@ -0,0 +1,57 @@
+{
+ "name": "@lekoarts/gatsby-theme-minimal-blog",
+ "version": "1.0.0",
+ "author": "LekoArts ",
+ "description": "Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.",
+ "license": "MIT",
+ "main": "index.js",
+ "publishConfig": {
+ "access": "public"
+ },
+ "scripts": {
+ "build": "gatsby build",
+ "develop": "gatsby develop",
+ "start": "gatsby develop",
+ "clean": "gatsby clean"
+ },
+ "peerDependencies": {
+ "gatsby": "^2.13.3",
+ "react": "^16.9.0",
+ "react-dom": "^16.9.0"
+ },
+ "dependencies": {
+ "@emotion/core": "^10.0.15",
+ "@lekoarts/gatsby-theme-minimal-blog-core": "^1.0.0",
+ "@mdx-js/react": "^1.1.5",
+ "@theme-ui/color": "^0.2.44",
+ "@theme-ui/components": "^0.2.46",
+ "@theme-ui/presets": "^0.2.15",
+ "gatsby-plugin-catch-links": "^2.1.15",
+ "gatsby-plugin-feed": "^2.3.21",
+ "gatsby-plugin-react-helmet": "^3.1.13",
+ "gatsby-plugin-theme-ui": "^0.2.18",
+ "gatsby-plugin-typescript": "^2.1.2",
+ "lodash.kebabcase": "^4.1.1",
+ "mdx-utils": "^0.2.0",
+ "prism-react-renderer": "^1.0.2",
+ "react-helmet": "^5.2.1",
+ "react-live": "^2.2.1",
+ "theme-ui": "^0.2.21",
+ "typeface-ibm-plex-sans": "^0.0.75"
+ },
+ "keywords": [
+ "gatsby",
+ "gatsby-theme",
+ "gatsby-plugin",
+ "lekoarts"
+ ],
+ "bugs": {
+ "url": "https://github.com/LekoArts/gatsby-themes/issues"
+ },
+ "homepage": "https://themes.lekoarts.de",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/LekoArts/gatsby-themes.git",
+ "directory": "themes/gatsby-theme-minimal-blog"
+ }
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/blog.tsx b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/blog.tsx
new file mode 100644
index 000000000..a89dcd711
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/blog.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import Blog from "../../../components/blog"
+
+type Props = {
+ data: {
+ allPost: any
+ [key: string]: string
+ }
+}
+
+export default ({ data }: Props) => {
+ const { allPost } = data
+
+ return
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/homepage.tsx b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/homepage.tsx
new file mode 100644
index 000000000..61ae47bec
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/homepage.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import Homepage from "../../../components/homepage"
+
+type Props = {
+ data: {
+ allPost: any
+ [key: string]: string
+ }
+}
+
+export default ({ data }: Props) => {
+ const { allPost } = data
+
+ return
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/page.tsx b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/page.tsx
new file mode 100644
index 000000000..4f62d12ab
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/page.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import Page from "../../../components/page"
+
+type Props = {
+ data: {
+ page: any
+ [key: string]: any
+ }
+}
+
+export default ({ data }: Props) => {
+ const { page } = data
+
+ return
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/post.tsx b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/post.tsx
new file mode 100644
index 000000000..8e03f546c
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/post.tsx
@@ -0,0 +1,15 @@
+import React from "react"
+import Post from "../../../components/post"
+
+type Props = {
+ data: {
+ post: any
+ [key: string]: any
+ }
+}
+
+export default ({ data }: Props) => {
+ const { post } = data
+
+ return
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/tag.tsx b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/tag.tsx
new file mode 100644
index 000000000..573354df0
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/tag.tsx
@@ -0,0 +1,16 @@
+import React from "react"
+import Tag from "../../../components/tag"
+
+type Props = {
+ data: {
+ allPost: any
+ [key: string]: any
+ }
+ pageContext: any
+}
+
+export default ({ data, pageContext }: Props) => {
+ const { allPost } = data
+
+ return
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/tags.tsx b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/tags.tsx
new file mode 100644
index 000000000..e282a6979
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/@lekoarts/gatsby-theme-minimal-blog-core/components/tags.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+import Tags from "../../../components/tags"
+
+type Props = {
+ data: {
+ allPost: {
+ group: {
+ fieldValue: string
+ totalCount: number
+ }[]
+ }
+ }
+}
+
+export default ({ data }: Props) => {
+ const { allPost } = data
+
+ return
+}
diff --git a/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx b/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx
new file mode 100644
index 000000000..6394c6dbf
--- /dev/null
+++ b/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx
@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import React from "react"
+import { jsx, Styled } from "theme-ui"
+import { Box } from "@theme-ui/components"
+import { Link } from "gatsby"
+import ItemTags from "./item-tags"
+
+type BlogListItemProps = {
+ post: {
+ slug: string
+ title: string
+ date: string
+ tags?: {
+ name: string
+ slug: string
+ }[]
+ }
+ showTags?: boolean
+}
+
+const BlogListItem = ({ post, showTags = true }: BlogListItemProps) => (
+
+
+ {post.title}
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+ 
+
+ 
+
+
+ 
+ 
+