[
{
"path": ".commitlintrc.js",
"content": "module.exports = {\n extends: ['@commitlint/config-conventional'],\n}\n"
},
{
"path": ".github/FUNDING.yml",
"content": "github: [pauliescanlon]\nko_fi: pauliescanlon\n"
},
{
"path": ".gitignore",
"content": "wip-readme.md\ndemo/src/pages/source-days.mdx\ndemo/src/pages/source-list.mdx\ndemo/src/pages/source-months.mdx\ndemo/src/pages/source-tags.mdx\ndemo/src/pages/source-words.mdx\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Typescript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# dotenv environment variables file\n.env\n\n# gatsby files\n.cache/\npublic\n\n# Mac files\n.DS_Store\n\n# Yarn\nyarn-error.log\n.pnp/\n.pnp.js\n# Yarn Integrity file\n.yarn-integrity\n\n.netlify/\n"
},
{
"path": ".husky/commit-msg",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx commitlint --edit \n"
},
{
"path": ".husky/pre-commit",
"content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpm run prettier\n"
},
{
"path": ".prettierignore",
"content": "demo/.cache\ndemo/public"
},
{
"path": ".prettierrc.js",
"content": "module.exports = {\n semi: false,\n trailingComma: 'all',\n singleQuote: true,\n printWidth: 120,\n tabWidth: 2,\n proseWrap: 'always',\n}\n"
},
{
"path": "@pauliescanlon/gatsby-theme-terminal/README.md",
"content": "\n\n\n\n## gatsby-theme-terminal\n\nGatsby Theme Terminal aims to be a **zero component theme**. It provides _data_ components to aid in the abstraction of\npresentational and data layers which together provide the most flexibility\n\nThe theme handles the data but how it's displayed is up to you!\n\nYou can create any page layout or component combination you like using your own components or components provided by\n[theme-ui/components](https://theme-ui.com/components)\n\n## 👀 Preview\n\n- [Live Demo](https://gatsbythemeterminal.gatsbyjs.io/)\n\n## 🚀 Getting started\n\nTo help you get started you can either clone the starter\n[gatsby-starter-terminal](https://github.com/PaulieScanlon/gatsby-starter-terminal) or read the below.\n\n### Install\n\n```\nnpm install @pauliescanlon/gatsby-theme-terminal\n```\n\n### Install Peer Dependencies\n\n```\nnpm install @mdx-js/mdx @mdx-js/react gatsby gatsby-plugin-mdx gatsby-source-filesystem react react-dom\n```\n\n## Setup\n\n### gatsby-config.js\n\nAdd the `siteMetaData` and `@pauliescanlon/gatsby-theme-terminal` to your `gatsby-config.js`\n\n```\n// gatsby-config.js\nmodule.exports = {\n siteMetadata: {\n name: \"Your blog title\",\n description: \"I like tech\",\n keywords: [\"tech\", \"blog\", \"boop\"],\n siteUrl: 'https://gatsby-theme-terminal.netlify.com',\n siteImage: 'name-of-open-graph-image.jpg', // pop an image in the static folder to use it as the og:image,\n profileImage: 'name-of-profile-image.jpg'\n lang: `eng`,\n config: {\n sidebarWidth: 240 // optional,\n },\n },\n plugins: ['@pauliescanlon/gatsby-theme-terminal']\n}\n```\n\n### directory structure\n\nTo add pages create `.mdx` files in the `src/pages` directory. You need at least one file called `index.mdx` located at\n`src/pages` or you'll see a GraphQL error.\n\n\n```\n|-- src\n |-- pages\n |-- index.mdx\n |-- about.mdx\n |-- contact.mdx \n\n```\n\n### frontmatter setup\n\n#### Pages\n\nPages must include `navigationLabel` in the `frontmatter`\n\n```\n// src/pages/about.mdx\n---\nnavigationLabel: About\n---\n\n# About\n\nThis is about page\n\n```\n\n#### Theme options\n\nAdditional `.mdx` can be sourced from _anywhere_ outside the `pages` directory but you need to tell the theme where to\nsource these files from.\n\nUse the `source` option in `gatsby-config.js`\n\n```\n// gatsby-config.js\n...\n plugins: [\n {\n resolve: `@pauliescanlon/gatsby-theme-terminal`,\n options: {\n source: [\n {\n name: \"posts\",\n dir: \"posts\",\n },\n {\n name: \"projects\",\n dir: \"projects\",\n },\n ] // can be an object or array of objects\n\n },\n },\n ],\n}\n```\n\nThen create the relevant files and directories\n\n\n```\n|-- src\n |-- pages\n ...\n |-- posts \n |--2020\n |--02\n |-- some-post.mdx\n |-- featuredImage: markus-spiske-466ENaLuhLY-unsplash.jpg\n |-- markus-spiske-FXFz-sW0uwo-unsplash.jpg\n |-- projects\n |-- some-project.mdx \n\n```\n\nAny file that is _not_ sourced from `pages` can contain any of the following `frontmatter` but a `title` is required,\nthis is how the theme distinguishes between pages and other `.mdx` files\n\n\n```\n// src/posts/2020/02/some-post.mdx\n---\ntitle: Some Post\ntags: [\"JavaScript\", \"React\", \"GatsbyJs\", \"HTML\", \"CSS\", \"theme-ui\"]\ndate: 2020-01-01\ndateModified: 20-20-2020\nauthor: Paul Scanlon\nstatus: draft // => means it won't be rendered\nisPrivate: // => it will be rendered but you can use this prop as a filter\nurl: \"https://example.com\" // => could be an external url\nmisc: \"Ahoy\" // => use how you wish\npinned: false // => Could be used as a filter for pinned posts\nfeaturedImage: markus-spiske-466ENaLuhLY-unsplash.jpg\nfeaturedImageUrl: https://via.placeholder.com/936x528\nembeddedImages:\n - markus-spiske-FXFz-sW0uwo-unsplash.jpg\nembeddedImageUrls:\n - https://via.placeholder.com/468x264\n---\n```\n\n### Embedded Images\n\nBy using the The `` component from `gatsby-plugin-image` you can pass the image data queried by GraphQL\nand pass it on via the `image` prop\n\nThe `gatsbyImageData`, data is available via `props.embedded.image(n)`\n\n```\n\n```\n\nYou can also use the Theme UI `` component by passing it a `src`\n\n```\n\n```\n\n`image1` in this example would be `markus-spiske-FXFz-sW0uwo-unsplash.jpg`\n\nEmbeddedImages can also be sourced from a remote url, in this case use the `` component and pass it the same\nprops\n\n```\n\n```\n\n### markdown\n\nThe theme supports the complete markdown spec and you can see how to use markdown in the\n[demo](https://gatsbythemeterminal.gatsbyjs.io/markdown/)\n\n### theme-ui/components\n\nThe theme supports _all_ the components provided by [theme-ui/components](https://theme-ui.com/components) and you can\nsee in the [demo](https://gatsbythemeterminal.gatsbyjs.io/theme-ui-components/) how they are used.\n\n### gatsby-theme-terminal/components\n\nThe theme also comes with it's own components _but_... These are purely to provide access to the source nodes. What you\nchoose to render is completely up to you!\n\nFor example to display a list of _all_ files sourced from the `source` theme option you _could_ do something like this.\nThis component can be used in ANY `.mdx` file 😎\n\n```javascript\n\n {(source) => (\n
\n"
},
{
"path": "@pauliescanlon/gatsby-theme-terminal/src/utils/index.js",
"content": "const IMAGE_KEY = 'image'\n\nexport const transformImages = (imageArray) => {\n if (Array.isArray(imageArray)) {\n return imageArray.reduce((images, image, index) => {\n images[`${IMAGE_KEY}${index + 1}`] =\n images[`${IMAGE_KEY}${index + 1}`] || image\n ? image.url\n ? image.url[0].childImageSharp\n : image.childImageSharp\n : null\n\n return images\n }, {})\n }\n return {}\n}\n"
},
{
"path": "README.md",
"content": "\n\n\n\n## gatsby-theme-terminal\n\nGatsby Theme Terminal aims to be a **zero component theme**. It provides _data_ components to aid in the abstraction of\npresentational and data layers which together provide the most flexibility\n\nThe theme handles the data but how it's displayed is up to you!\n\nYou can create any page layout or component combination you like using your own components or components provided by\n[theme-ui/components](https://theme-ui.com/components)\n\n## 👀 Preview\n\n- [Live Demo](https://gatsbythemeterminal.gatsbyjs.io/)\n\n## 🚀 Getting started\n\nTo help you get started you can either clone the starter\n[gatsby-starter-terminal](https://github.com/PaulieScanlon/gatsby-starter-terminal) or read the below.\n\n### Install\n\n```\nnpm install @pauliescanlon/gatsby-theme-terminal\n```\n\n### Install Peer Dependencies\n\n```\nnpm install @mdx-js/mdx @mdx-js/react gatsby gatsby-plugin-mdx gatsby-source-filesystem react react-dom\n```\n\n## Setup\n\n### gatsby-config.js\n\nAdd the `siteMetaData` and `@pauliescanlon/gatsby-theme-terminal` to your `gatsby-config.js`\n\n```\n// gatsby-config.js\nmodule.exports = {\n siteMetadata: {\n name: \"Your blog title\",\n description: \"I like tech\",\n keywords: [\"tech\", \"blog\", \"boop\"],\n siteUrl: 'https://gatsby-theme-terminal.netlify.com',\n siteImage: 'name-of-open-graph-image.jpg', // pop an image in the static folder to use it as the og:image,\n profileImage: 'name-of-profile-image.jpg'\n lang: `eng`,\n config: {\n sidebarWidth: 240 // optional,\n },\n },\n plugins: ['@pauliescanlon/gatsby-theme-terminal']\n}\n```\n\n### directory structure\n\nTo add pages create `.mdx` files in the `src/pages` directory. You need at least one file called `index.mdx` located at\n`src/pages` or you'll see a GraphQL error.\n\n\n```\n|-- src\n |-- pages\n |-- index.mdx\n |-- about.mdx\n |-- contact.mdx \n\n```\n\n### frontmatter setup\n\n#### Pages\n\nPages must include `navigationLabel` in the `frontmatter`\n\n```\n// src/pages/about.mdx\n---\nnavigationLabel: About\n---\n\n# About\n\nThis is about page\n\n```\n\n#### Theme options\n\nAdditional `.mdx` can be sourced from _anywhere_ outside the `pages` directory but you need to tell the theme where to\nsource these files from.\n\nUse the `source` option in `gatsby-config.js`\n\n```\n// gatsby-config.js\n...\n plugins: [\n {\n resolve: `@pauliescanlon/gatsby-theme-terminal`,\n options: {\n source: [\n {\n name: \"posts\",\n dir: \"posts\",\n },\n {\n name: \"projects\",\n dir: \"projects\",\n },\n ] // can be an object or array of objects\n\n },\n },\n ],\n}\n```\n\nThen create the relevant files and directories\n\n\n```\n|-- src\n |-- pages\n ...\n |-- posts \n |--2020\n |--02\n |-- some-post.mdx\n |-- featuredImage: markus-spiske-466ENaLuhLY-unsplash.jpg\n |-- markus-spiske-FXFz-sW0uwo-unsplash.jpg\n |-- projects\n |-- some-project.mdx \n\n```\n\nAny file that is _not_ sourced from `pages` can contain any of the following `frontmatter` but a `title` is required,\nthis is how the theme distinguishes between pages and other `.mdx` files\n\n\n```\n// src/posts/2020/02/some-post.mdx\n---\ntitle: Some Post\ntags: [\"JavaScript\", \"React\", \"GatsbyJs\", \"HTML\", \"CSS\", \"theme-ui\"]\ndate: 2020-01-01\ndateModified: 20-20-2020\nauthor: Paul Scanlon\nstatus: draft // => means it won't be rendered\nisPrivate: // => it will be rendered but you can use this prop as a filter\nurl: \"https://example.com\" // => could be an external url\nmisc: \"Ahoy\" // => use how you wish\npinned: false // => Could be used as a filter for pinned posts\nfeaturedImage: markus-spiske-466ENaLuhLY-unsplash.jpg\nfeaturedImageUrl: https://via.placeholder.com/936x528\nembeddedImages:\n - markus-spiske-FXFz-sW0uwo-unsplash.jpg\nembeddedImageUrls:\n - https://via.placeholder.com/468x264\n---\n```\n\n### Embedded Images\n\nBy using the The `` component from `gatsby-plugin-image` you can pass the image data queried by GraphQL\nand pass it on via the `image` prop\n\nThe `gatsbyImageData`, data is available via `props.embedded.image(n)`\n\n```\n\n```\n\nYou can also use the Theme UI `` component by passing it a `src`\n\n```\n\n```\n\n`image1` in this example would be `markus-spiske-FXFz-sW0uwo-unsplash.jpg`\n\nEmbeddedImages can also be sourced from a remote url, in this case use the `` component and pass it the same\nprops\n\n```\n\n```\n\n### markdown\n\nThe theme supports the complete markdown spec and you can see how to use markdown in the\n[demo](https://gatsbythemeterminal.gatsbyjs.io/markdown/)\n\n### theme-ui/components\n\nThe theme supports _all_ the components provided by [theme-ui/components](https://theme-ui.com/components) and you can\nsee in the [demo](https://gatsbythemeterminal.gatsbyjs.io/theme-ui-components/) how they are used.\n\n### gatsby-theme-terminal/components\n\nThe theme also comes with it's own components _but_... These are purely to provide access to the source nodes. What you\nchoose to render is completely up to you!\n\nFor example to display a list of _all_ files sourced from the `source` theme option you _could_ do something like this.\nThis component can be used in ANY `.mdx` file 😎\n\n```javascript\n\n {(source) => (\n
\n )}\n\n```\n\nYou can see more about how to use the theme components in the\n[demo](https://gatsbythemeterminal.gatsbyjs.io/components/)\n\n### Component Shadowing\n\nThere is very little to shadow because almost everything is exposed by the components but you might want to add your own\nlogo.\n\nTo do this create the following directories `@pauliescanlon/gatsby-theme-terminal/components/Logo` in the `src`\ndirectory of your project and then create a `Logo.js` file. You can do anything you like in here.\n\n```\n|-- src\n |-- @pauliescanlon\n |-- gatsby-theme-terminal\n |-- components\n |-- Logo\n |-- Logo.js\n```\n\nIf you would like to customize any part of the theme you can do so by shadowing the theme file.\n\nTo do this create the following directory `src/gatsby-plugin-theme-ui` and then create an `index.js`\n\n```javascript\n// src/gatsby-plugin-theme-ui/index.js\n\nimport baseTheme from '@pauliescanlon/gatsby-theme-terminal/src/gatsby-plugin-theme-ui'\n\nexport default {\n ...baseTheme,\n colors: {\n ...baseTheme.colors,\n primary: '#FF4081',\n secondary: '#03A9F4',\n success: '#FFEB3B',\n background: '#232323',\n surface: '#393939',\n },\n}\n```\n\n### favicon\n\nfavicon(s) need to be saved in `static/images` and named `favicon-16x16.png` and `favicon-32x32.png` along with an\n`.icon` file called `favicon.ico`\n\nIf you're using **gatsby-theme-terminal** in your project i'd love to hear from you\n[@pauliescanlon](https://twitter.com/PaulieScanlon)\n\n[](https://ko-fi.com/P5P31B7G8)\n"
},
{
"path": "copy-readme.js",
"content": "const fs = require('fs')\n\nfs.copyFile('./README.md', './@pauliescanlon/gatsby-theme-terminal/README.md', (err) => {\n if (err) {\n throw err\n }\n console.log('README copied to theme ok!')\n})\n"
},
{
"path": "demo/LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2015 gatsbyjs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n"
},
{
"path": "demo/README.md",
"content": "\n
\n\nKick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.\n\n_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._\n\n## 🚀 Quick start\n\n1. **Create a Gatsby site.**\n\n Use the Gatsby CLI to create a new site, specifying the default starter.\n\n ```shell\n # create a new Gatsby site using the default starter\n gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default\n ```\n\n1. **Start developing.**\n\n Navigate into your new site’s directory and start it up.\n\n ```shell\n cd my-default-starter/\n gatsby develop\n ```\n\n1. **Open the source code and start editing!**\n\n Your site is now running at `http://localhost:8000`!\n\n _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._\n\n Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!\n\n## 🧐 What's inside?\n\nA quick look at the top-level files and directories you'll see in a Gatsby project.\n\n .\n ├── node_modules\n ├── src\n ├── .gitignore\n ├── .prettierrc\n ├── gatsby-browser.js\n ├── gatsby-config.js\n ├── gatsby-node.js\n ├── gatsby-ssr.js\n ├── LICENSE\n ├── package-lock.json\n ├── package.json\n └── README.md\n\n1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.\n\n2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.\n\n3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.\n\n4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.\n\n5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.\n\n6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).\n\n7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.\n\n8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.\n\n9. **`LICENSE`**: Gatsby is licensed under the MIT license.\n\n10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**\n\n11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.\n\n12. **`README.md`**: A text file containing useful reference information about your project.\n\n## 🎓 Learning Gatsby\n\nLooking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:\n\n- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.\n\n- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.\n\n## 💫 Deploy\n\n[](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default)\n\n\n"
},
{
"path": "demo/gatsby-browser.js",
"content": "/**\n * Implement Gatsby's Browser APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/browser-apis/\n */\n\n// You can delete this file if you're not using it\n"
},
{
"path": "demo/gatsby-config.js",
"content": "module.exports = {\n siteMetadata: {\n name: `gatsby-theme-terminal`,\n description: `A zero component Gatsby theme for developers`,\n keywords: [`gatsby`, `gatsbyjs`, `gatsby-theme`],\n siteUrl: `https://gatsbythemeterminal.gatsbyjs.io`,\n siteImage: `https://gatsbythemeterminal.gatsbyjs.io/images/terminal-open-graph-image.jpg`,\n profileImage: `https://gatsbythemeterminal.gatsbyjs.io/images/terminal-profile-image.jpg`,\n lang: `en`,\n config: {\n sidebarWidth: 280,\n },\n },\n plugins: [\n {\n resolve: `@pauliescanlon/gatsby-theme-terminal`,\n options: {\n source: [\n {\n name: 'posts',\n dir: 'posts',\n },\n {\n name: 'projects',\n dir: 'projects',\n },\n ],\n },\n },\n {\n resolve: 'gatsby-plugin-google-analytics',\n options: {\n trackingId: 'UA-76055934-8',\n },\n },\n ],\n}\n"
},
{
"path": "demo/gatsby-node.js",
"content": "/**\n * Implement Gatsby's Node APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/node-apis/\n */\n\n// You can delete this file if you're not using it\n"
},
{
"path": "demo/gatsby-ssr.js",
"content": "/**\n * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.\n *\n * See: https://www.gatsbyjs.org/docs/ssr-apis/\n */\n\n// You can delete this file if you're not using it\n"
},
{
"path": "demo/package.json",
"content": "{\n \"name\": \"demo\",\n \"private\": true,\n \"description\": \"A simple starter using gatsby-theme-terminal\",\n \"version\": \"0.1.0\",\n \"author\": \"Paul Scanlon \",\n \"dependencies\": {\n \"@mdx-js/mdx\": \"^1.6.22\",\n \"@mdx-js/react\": \"^1.6.22\",\n \"@pauliescanlon/gatsby-theme-terminal\": \"*\",\n \"date-fns\": \"^2.23.0\",\n \"gatsby\": \"^4.0.0\",\n \"gatsby-plugin-google-analytics\": \"^4.0.0\",\n \"gatsby-plugin-mdx\": \"^3.0.0\",\n \"gatsby-source-filesystem\": \"^4.0.0\",\n \"react\": \"^17.0.0\",\n \"react-dom\": \"^17.0.0\"\n },\n \"keywords\": [\n \"gatsby\"\n ],\n \"license\": \"MIT\",\n \"scripts\": {\n \"build\": \"gatsby build\",\n \"develop\": \"gatsby develop\",\n \"format\": \"prettier --write \\\"**/*.{js,jsx,json}\\\"\",\n \"start\": \"npm run develop\",\n \"serve\": \"gatsby serve\",\n \"clean\": \"gatsby clean\",\n \"test\": \"echo \\\"Write tests! -> https://gatsby.dev/unit-testing\\\" && exit 1\"\n },\n \"browserslist\": [\n \">0.25%\",\n \"not dead\",\n \"IE 11\"\n ]\n}\n"
},
{
"path": "demo/src/@pauliescanlon/gatsby-theme-terminal/components/Logo/Logo.js",
"content": "/** @jsx jsx */\nimport { Box, jsx } from 'theme-ui'\nimport { Link as GatsbyLink } from 'gatsby'\n\nexport const Logo = () => (\n \n \n \n \n \n \n \n\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n)\n"
},
{
"path": "demo/src/_temp/source-days.mdx",
"content": "---\nnavigationLabel: SourceDays\n---\n\n\n {(sourceDays) => {\n const currentYear = sourceDays[sourceDays.length - 1]\n return (\n \n {currentYear\n .sort((a, b) => a.number - b.number)\n .map((day, index) => {\n const { name, count, percent } = day\n return (\n \n \n \n {name}\n {`x${count}`}\n \n \n )\n })}\n \n )\n }}\n\n"
},
{
"path": "demo/src/_temp/source-list.mdx",
"content": "---\nnavigationLabel: sourceList\n---\n\n\n {(source) => (\n
\n )\n }}\n\n\n\n\n## [SourceList](#source-list)\n\nBy default the source list returns all `.mdx` found from the directories defined in `gatsby-config.js`. You can also use\nthe `filter` prop with this component eg: ``\n\n_NOTE:_ the `filter` source _must_ be one from your `gatsby-config.js`\n\n```javascript\n\n {(source) => (\n
\n )}\n\n\n\n\n## [SourceDays](#source-days)\n\nBy default source days returns an accumulated count and percent of all `frontmatter` date fields grouped by year. You\ncan also use the `filter` prop with this component eg: ``\n\n_NOTE:_ the `filter` source _must_ be one from your `gatsby-config.js`\n\n```javascript\n\n {(sourceDays) => {\n const currentYear = sourceDays[sourceDays.length - 1]\n return (\n \n {currentYear\n .sort((a, b) => a.number - b.number)\n .map((day, index) => {\n const { name, count, percent } = day\n return (\n \n \n \n {name}\n {`x${count}`}\n \n \n )\n })}\n \n )\n }}\n\n```\n\n\n {(sourceDays) => {\n const currentYear = sourceDays[sourceDays.length - 1]\n return (\n \n {currentYear\n .sort((a, b) => a.number - b.number)\n .map((day, index) => {\n const { name, count, percent } = day\n return (\n \n \n \n {name}\n {`x${count}`}\n \n \n )\n })}\n \n )\n }}\n\n\n\n\n## [SourceMonths](#source-months)\n\nBy default source months returns an accumulated count and percent of all `frontmatter` date fields grouped by year. You\ncan also use the `filter` prop with this component eg: ``\n\n_NOTE:_ the `filter` source _must_ be one from your `gatsby-config.js`\n\n```javascript\n\n {(sourceMonths) => {\n const currentYear = sourceMonths[sourceMonths.length - 1]\n return (\n \n {currentYear[0].year}\n \n \n {currentYear.map((month, index) => {\n const { initial, count, percent } = month\n return (\n \n \n {`x${count}`}\n \n \n \n {initial}\n \n \n )\n })}\n \n \n \n )\n }}\n\n```\n\n\n {(sourceMonths) => {\n const currentYear = sourceMonths[sourceMonths.length - 1]\n return (\n \n {currentYear[0].year}\n \n \n {currentYear.map((month, index) => {\n const { initial, count, percent } = month\n return (\n \n \n {`x${count}`}\n \n \n \n {initial}\n \n \n )\n })}\n \n \n \n )\n }}\n\n\n\n\n## [SourceTags](#tag-list)\n\nBy default source tags returns all tags found in the `.mdx` sourced from the directories defined in `gatsby-config.js.\n\nYou can also use the `filter` prop with this component eg: ``\n\n_NOTE:_ the `filter` source _must_ be one from your `gatsby-config.js``\n\n```javascript\n\n {source => (\n \n {\n source.map((tag, index) => {\n const {name, count, percent} = tag\n return (\n {`${name} x${count}`}\n \n \n })\n }\n \n )}\n\n```\n\n\n {(source) => (\n \n {source.map((tag, index) => {\n const { name, count, percent } = tag\n return (\n \n {`${name} x${count}`}\n \n \n )\n })}\n \n )}\n\n\n\n\n## [embeddedImages](#embedded-images)\n\nUsing a frontmatter field called `embeddedImages` you can define a _list_ of locally sourced images to embed in the\n`.mdx` body.\n\n_NOTE:_ this method won't work for `.mdx` sourced from `src/pages`\n\n```javascript\n---\ntitle: Post 1\nembeddedImages:\n - markus-spiske-FXFz-sW0uwo-unsplash.jpg\n---\n```\n\n\n\nYou can then use the `` component like this in your `.mdx`.\n\nThe `image1` object key refers to the position in the `embeddedImages` list in frontmatter\n\n\n\n```javascript\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi\n\n\n```\n\n\n\n## [SourceWords](#source-words)\n\nBy default source words returns a word count for all words found in the `.mdx` sourced from the directories defined in\n`gatsby-config.js.\n\nYou can also use the `filter` prop with this component eg: ``\n\n_NOTE:_ the `filter` source _must_ be one from your `gatsby-config.js``\n\n```javascript\n\n {(source) => {\n const { wordCountTotal, wordCountAverage, wordCountHighest, wordCountLowest, timeToReadTotal, timeToReadAverage } =\n source\n return (\n \n \n \n Average word count\n \n \n \n \n {wordCountAverage}\n \n Words\n \n {`Total words: ${wordCountTotal}`}\n \n \n )\n }}\n\n```\n\n\n {(source) => {\n const { wordCountTotal, wordCountAverage, wordCountHighest, wordCountLowest, timeToReadTotal, timeToReadAverage } =\n source\n return (\n `-${theme.space[2]}px`,\n }}\n >\n \n \n \n Average word count\n \n \n \n \n {wordCountAverage}\n \n Words\n \n {`Total words: ${wordCountTotal}`}\n \n \n \n \n \n Average time to read\n \n \n \n \n {timeToReadAverage}\n \n Minute\n \n {`Total read time: ${timeToReadTotal} mins`}\n \n \n \n \n \n Highest word count\n \n \n \n \n {wordCountHighest}\n \n Words\n \n {`Total words: ${wordCountTotal}`}\n \n \n \n )\n }}\n\n\n\n\n```javascript\n\n {(sourceWords) => {\n const currentYear = sourceWords.wordCountByMonth[sourceWords.wordCountByMonth.length - 1]\n return (\n \n \n \n {currentYear[0].year}\n \n Word count by month\n \n \n \n {currentYear.map((month, index) => {\n const { initial, words } = month\n return (\n \n \n {`x${words}`}\n \n \n \n {initial}\n \n \n )\n })}\n \n \n \n )\n }}\n\n```\n\n\n {(sourceWords) => {\n const currentYear = sourceWords.wordCountByMonth[sourceWords.wordCountByMonth.length - 1]\n return (\n \n \n \n {currentYear[0].year}\n \n Word count by month\n \n \n \n {currentYear.map((month, index) => {\n const { initial, words } = month\n return (\n \n \n {`x${words}`}\n \n \n \n {initial}\n \n \n )\n })}\n \n \n \n )\n }}\n\n"
},
{
"path": "demo/src/pages/index.mdx",
"content": "---\nnavigationLabel: Home\n---\n\nimport { format } from 'date-fns'\n\n\n\n\n {(siteMetadata) => {\n const { name, description } = siteMetadata\n return (\n \n {name}\n {description}\n \n )\n }}\n\n\n\n\n View theme on GitHub\n\n\n\n gatsby-theme-terminal\n\n\n\nAlert... My website is faster than yours!\n\n\n\n\n\n## About\n\nWrite anything you want in `src/pages/index.mdx` and it'll go here.\n\n\n\n \n\n\n## Contact\n\n\n Email\n\n\n ******@gmail.com\n\n\n\n Twitter\n\n\n https://twitter.com/PaulieScanlon/\n\n\n\n GitHub\n\n\n https://github.com/PaulieScanlon/\n\n\n\n LinkedIn\n\n\n https://linkedin.com/in/PaulieScanlon/\n\n\n\n\n\n\n## Top 5 tags\n\n\n {(tags) => (\n \n {tags\n .splice(0, 5)\n .sort((a, b) => b.percent - a.percent)\n .map((tag, index) => {\n const { name, count, percent } = tag\n return (\n \n \n {`${name}`}\n {percent}\n %\n \n \n {'['}\n \n \n \n {']'}\n \n \n )\n })}\n \n )}\n\n\n\n\n"
},
{
"path": "demo/src/pages/markdown.mdx",
"content": "---\nnavigationLabel: Markdown\n---\n\n# [markdown](#markdown)\n\ngatsby-theme-terminal supports the full set of\n[markdown shortcodes](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)\n\n\n\n## [Heading](#heading)\n\n```markdown\n# h1\n\n## h2\n\n### h3\n\n#### h4\n\n##### h5\n\n###### h6\n\nAlternatively, for h1 and h2, an underline-ish style:\n\n# Alt-h1\n\nAlt-h2\n```\n\n# h1\n\n## h2\n\n### h3\n\n#### h4\n\n##### h5\n\n###### h6\n\nAlternatively, for h1 and h2, an underline-ish style:\n\n## [Alt-h1](#alt-h1)\n\nAlt-h2\n\n## [Emphasis](#emphasis)\n\n```markdown\nEmphasis, aka italics, with _asterisks_ or _underscores_.\n\nStrong emphasis, aka bold, with **asterisks** or **underscores**.\n\nCombined emphasis with **asterisks and _underscores_**.\n\nStrikethrough uses two tildes. ~~Scratch this.~~\n```\n\nEmphasis, aka italics, with _asterisks_ or _underscores_.\n\nStrong emphasis, aka bold, with **asterisks** or **underscores**.\n\nCombined emphasis with **asterisks and _underscores_**.\n\nStrikethrough uses two tildes. ~~Scratch this.~~\n\n\n\n## [Lists](#lists)\n\n(In this example, leading and trailing spaces are shown with with dots: ⋅)\n\n```markdown\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n5. Code in list `boop`\n\n- Unordered list can use asterisks\n\n* Or minuses\n\n- Or pluses\n```\n\n1. First ordered list item\n2. Another item\n3. Actual numbers don't matter, just that it's a number\n4. And another item.\n5. Code in list `boop`\n\n- Unordered list can use asterisks\n\n* Or minuses\n\n- Or pluses\n\n\n\n## [Links](#links)\n\nThere are two ways to create links.\n\n```markdown\n[I'm an inline-style link](https://www.google.com)\n\n[I'm an inline-style link with title](https://www.google.com \"Google's Homepage\")\n\n[I'm a reference-style link][arbitrary case-insensitive reference text]\n\n[I'm a relative reference to a repository file](../blob/master/LICENSE)\n\n[You can use numbers for reference-style link definitions][1]\n\nOr leave it empty and use the [link text itself].\n\nURLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or\n and sometimes example.com (but not on Github, for example).\n\nSome text to show that the reference links can follow later.\n\n[arbitrary case-insensitive reference text]: https://www.mozilla.org\n[1]: http://slashdot.org\n[link text itself]: http://www.reddit.com\n```\n\n[I'm an inline-style link](https://www.google.com)\n\n[I'm an inline-style link with title](https://www.google.com \"Google's Homepage\")\n\n[I'm a reference-style link][arbitrary case-insensitive reference text]\n\n[I'm a relative reference to a repository file](../blob/master/LICENSE)\n\n[You can use numbers for reference-style link definitions][1]\n\nOr leave it empty and use the [link text itself].\n\nURLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or\n and sometimes example.com (but not on Github, for example).\n\nSome text to show that the reference links can follow later.\n\n[arbitrary case-insensitive reference text]: https://www.mozilla.org\n[1]: http://slashdot.org\n[link text itself]: http://www.reddit.com\n\n## [Images](#images)\n\n```markdown\nHere's our logo (hover to see the title text):\n\nInline-style:\n\n\nReference-style: ![alt text][logo]\n\n[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'\n```\n\nHere's our logo (hover to see the title text):\n\nInline-style:\n\n\nReference-style: ![alt text][logo]\n\n[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'\n\n## [Code and Syntax Highlighting](#code-and-syntax-highlighting)\n\nCode blocks are part of the Markdown spec, but syntax highlighting isn't.\n\n```markdown\nInline `code` has `back-ticks around` it.\n```\n\nInline `code` has `back-ticks around` it.\n\nBlocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only\nusing the fenced code blocks -- they're easier and only they support syntax highlighting, but you must provide a\nlanguage or none\n\n````markdown\n```javascript\nvar s = 'JavaScript syntax highlighting'\nalert(s)\n```\n\n```python\ns = \"Python syntax highlighting\"\nprint s\n```\n\n```html\n
HTML syntax highlighting
\n```\n\n```none\nvar s = \"JavaScript syntax highlighting\"\nalert(s)\n```\n````\n\n```javascript\nvar s = 'JavaScript syntax highlighting'\nalert(s)\n```\n\n```python\ns = \"Python syntax highlighting\"\nprint s\n```\n\n```html\n
HTML syntax highlighting
\n```\n\n```none\nvar s = \"JavaScript syntax highlighting\"\nalert(s)\n```\n\n## [Tables](#tables)\n\nTables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy\nway of adding tables to your email -- a task that would otherwise require copy-pasting from another application.\n\n```markdown\nColons can be used to align columns.\n\n| Tables | Are | Cool |\n| ------------- | :-----------: | -----: |\n| col 3 is | right-aligned | \\$1600 |\n| col 2 is | centered | \\$12 |\n| zebra stripes | are neat | \\$1 |\n\nThere must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to\nmake the raw Markdown line up prettily. You can also use inline Markdown.\n\n| Markdown | Less | Pretty |\n| -------- | --------- | ---------- |\n| _Still_ | `renders` | **nicely** |\n| 1 | 2 | 3 |\n```\n\nColons can be used to align columns.\n\n| Tables | Are | Cool |\n| ------------- | :-----------: | -----: |\n| col 3 is | right-aligned | \\$1600 |\n| col 2 is | centered | \\$12 |\n| zebra stripes | are neat | \\$1 |\n\nThere must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to\nmake the raw Markdown line up prettily. You can also use inline Markdown.\n\n| Markdown | Less | Pretty |\n| -------- | --------- | ---------- |\n| _Still_ | `renders` | **nicely** |\n| 1 | 2 | 3 |\n\n\n\n## [Blockquotes](#blockquotes)\n\n```markdown\n> Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.\n\nQuote break.\n\n> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this\n> is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.\n```\n\n> Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.\n\nQuote break.\n\n> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this\n> is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.\n\n## [Inline HTML](#inline-html)\n\nYou can also use raw HTML in your Markdown, and it'll mostly work pretty well.\n\n```markdown\n
\n
Definition list
\n
Is something people use sometimes.
\n\n
Markdown in HTML
\n
Does *not* work **very** well. Use HTML tags.
\n
\n```\n\n
\n
Definition list
\n
Is something people use sometimes.
\n\n
Markdown in HTML
\n
Does *not* work **very** well. Use HTML tags.
\n
\n\n\n\n## [Horizontal Rule](#horizontal-rule)\n\n```markdown\nThree or more...\n\n---\n\nHyphens\n\n---\n\nAsterisks\n\n---\n\nUnderscores\n```\n\nThree or more...\n\n---\n\nHyphens\n\n---\n\nAsterisks\n\n---\n\nUnderscores\n\n## [Line Breaks](#line-breaks)\n\nMy basic recommendation for learning how line breaks work is to experiment and discover -- hit `` once (i.e.,\ninsert one newline), then hit it twice (i.e., insert two new lines), see what happens. You'll soon learn to get what you\nwant. \"Markdown Toggle\" is your friend.\n\n```markdown\nHere's a line for us to start with.\n\nThis line is separated from the one above by two newlines, so it will be a _separate paragraph_.\n\nThis line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line\nin the _same paragraph_.\n```\n"
},
{
"path": "demo/src/pages/posts.mdx",
"content": "---\nnavigationLabel: Posts\n---\n\nimport { format } from 'date-fns'\n\n# posts\n\nYou can use the `` component from any `.mdx`.\n\nHere we use it to return all the `posts` by using the filter prop\n\n\n {(posts) => (\n \n {posts\n .filter((edge) => !edge.node.frontmatter.isPrivate)\n .reduce((routes, route) => {\n return route.node.frontmatter.pinned ? [route, ...routes] : [...routes, route]\n }, [])\n .map((edge, index) => {\n const {\n featuredImageUrl,\n frontmatter: { title, featuredImage, tags, date, pinned },\n excerpt,\n fields: { slug },\n } = edge.node\n return (\n \n \n \n \n {featuredImage ? : null}\n {featuredImageUrl ? : null}\n \n \n \n {title}\n \n {format(new Date(date), 'd-MMM-u')}\n {excerpt}\n \n \n View Post\n \n \n \n \n )\n })}\n \n )}\n\n"
},
{
"path": "demo/src/pages/projects.mdx",
"content": "---\nnavigationLabel: Projects\n---\n\nimport { format } from 'date-fns'\n\n# projects\n\nYou can use the `` component from any `.mdx`.\n\nHere we use it to return all the `projects` by using the filter prop\n\n\n {(projects) => (\n \n {projects\n .filter((edge) => !edge.node.frontmatter.isPrivate)\n .reduce((routes, route) => {\n return route.node.frontmatter.pinned ? [route, ...routes] : [...routes, route]\n }, [])\n .map((edge, index) => {\n const {\n featuredImageUrl,\n frontmatter: { title, featuredImage, tags, date, pinned },\n excerpt,\n fields: { slug },\n } = edge.node\n return (\n \n \n \n \n {featuredImage ? : null}\n {featuredImageUrl ? : null}\n \n \n \n {title}\n \n {format(new Date(date), 'd-MMM-u')}\n {excerpt}\n \n \n View Post\n \n \n \n \n )\n })}\n \n )}\n\n"
},
{
"path": "demo/src/pages/theme-ui-components.mdx",
"content": "---\nnavigationLabel: Theme UI\n---\n\n# [theme-ui/components](#theme-ui-components)\n\ngatsby-theme-terminal also supports the full set of [theme-ui/components](https://theme-ui.com/components) and below is\nhow you use them.\n\nIf you'd like to see the default theme `.js` that file can be found in\n[here](https://github.com/PaulieScanlon/gatsby-theme-terminal/blob/master/%40pauliescanlon/gatsby-theme-terminal/src/gatsby-plugin-theme-ui/index.js)\n\n## [Box](#box)\n\n```javascript\n\n Beep\n\n```\n\n\n Beep\n\n\n\n\n## [Flex](#flex)\n\n```javascript\n\n \n Flex\n \n \n Box\n \n\n```\n\n\n \n Flex\n \n \n Box\n \n\n\n\n\n## [Grid](#grid)\n\n```javascript\n\n Box\n Box\n\n```\n\n\n Box\n Box\n\n\n\n\n## [Buttons](#buttons)\n\n```javascript\n\n\n\n\n\n```\n\n\n \n \n \n \n \n\n\n\n\n## [Text](#text)\n\n```javascript\nHello\nHello\nHello www.example.com\nHello\n```\n\nHello\nHello\n\n Hello www.example.com\n\nHello\n\n\n\n## [Heading](#heading)\n\n```javascript\nh1\nh2\nh3\nh4\nh5\nh6\n```\n\n\n h1\n\n\n h2\n\n\n h3\n\n\n h4\n\n\n h5\n\n\n h6\n\n\n## [Link](#link)\n\n```javascript\nHello\n```\n\nHello\n\n\n\n## [Image](#image)\n\n```javascript\n\n```\n\n\n\n\n\n## [Card](#card)\n\n```javascript\n\n \n \n Heading\n Text\n \n\n```\n\n\n \n \n Heading\n Text\n \n\n\n\n\n## [Forms](#forms)\n\n```javascript\n\n \n \n\n \n\n \n \n\n \n \n\n \n \n\n```\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## [Label](#label)\n\n```javascript\n\n```\n\n\n\n\n\n## [Input](#input)\n\n```javascript\n\n```\n\n\n\n\n\n## [Select](#select)\n\n```javascript\n\n```\n\n\n\n\n\n## [Textarea](#text-area)\n\n```javascript\n\n```\n\n\n\n\n\n## [Radio](#radio)\n\n```javascript\n\n\n```\n\n\n\n\n\n\n## [Checkbox](#checkbox)\n\n```javascript\n\n```\n\n\n\n\n\n## [Slider](#slider)\n\n```javascript\n\n```\n\n\n\n\n\n## [Field](#field)\n\n```javascript\n\n```\n\n\n\n\n\n## [Progress](#progress)\n\n```javascript\n\n\n\n\n```\n\n\n\n\n\n\n\n\n\n\n\n## [Donut](#donut)\n\n```javascript\n\n\n\n\n```\n\n\n\n\n\n\n\n\n## [Spinner](#spinner)\n\n```javascript\n\n\n\n\n```\n\n\n\n\n\n\n\n\n## [Avatar](#avatar)\n\n```javascript\n\n```\n\n\n\n## [Badge](#badge)\n\nBadges need a variant, the default can't be styled at the moment\n\n```javascript\n\n Beep boop, this is an badge!\n\n\n\n Beep boop, this is an badge!\n\n\n\n Beep boop, this is an badge!\n\n\n\n Beep boop, this is an badge!\n\n```\n\n\n\n Beep boop, this is an badge!\n\n\nBeep boop, this is an badge!\n\nBeep boop, this is an badge!\n\n\n Beep boop, this is an badge!\n\n\n\n\n\n## [Alert](#alert)\n\n```javascript\n\n Beep boop, this is an alert!\n\n\n\n Beep boop, this is an alert!\n\n\n\n Beep boop, this is an alert!\n\n\n\n Beep boop, this is an alert!\n\n```\n\n\n Beep boop, this is an alert!\n\n\n\n Beep boop, this is an alert!\n\n\n\n Beep boop, this is an alert!\n\n\nBeep boop, this is an alert!\n\n\n\n## [Divider](#divider)\n\n```javascript\n\n```\n\n\n\n\n\n## Embed\n\n```javascript\n\n```\n\n\n\n\n\n## [AspectRatio](#aspect-ratio)\n\n```javascript\n\n \n\n```\n\n\n \n\n\n\n\n## [AspectImage](#aspect-image)\n\n```javascript\n\n```\n\n\n\n\n\n## [Container](#container)\n\n```javascript\n\n Centered container\n\n```\n\n\n Centered container\n\n\n\n\n## [NavLink](#nav-link)\n\n```javascript\n\n \n Home\n \n \n Blog\n \n \n About\n \n\n```\n\n\n \n Home\n \n \n Blog\n \n \n About\n \n\n\n\n\n## [Message](#message)\n\n```javascript\n\n This is just a message for someone to read\n\n\n\n This is just a message for someone to read\n\n\n\n This is just a message for someone to read\n\n\n\n This is just a message for someone to read\n\n```\n\n\n This is just a message for someone to read\n\n\n\n This is just a message for someone to read\n\n\n\n This is just a message for someone to read\n\n\n\n This is just a message for someone to read\n\n\n\n\n## [Close](#close)\n\n```javascript\n\n```\n\n\n\n\n\n## [IconButton](#icon-button)\n\n```javascript\n\n \n\n```\n\n\n \n\n\n\n\n## [MenuButton](#menu-button)\n\n```javascript\n\n```\n\n\n\n\n"
},
{
"path": "demo/src/posts/2019/03/a-pinned-post.mdx",
"content": "---\ntitle: A Pinned Post\ntags: ['React', 'TypeScript']\nfeaturedImage: pankaj-patel-SXihyA4oEJs-unsplash.jpg\npinned: true\ndate: 2019-03-05\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\n- [/posts/post-1/](/posts/post-1/)\n- [/posts/2020/02/post-5/](/posts/2020/02/post-5/)\n- [https://example.com](https://example.com)\n- [http://example.com](http://example.com)\n\n## [Dummy Copy](#dummy-copy)\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui eros, rhoncus at ex eget, commodo lobortis justo.\nAenean eget aliquam risus. Aenean auctor luctus convallis. Pellentesque tincidunt odio ut risus pretium, id gravida quam\ncursus. Quisque at eros facilisis, auctor purus ut, sodales elit. Donec accumsan laoreet enim, ut dictum lacus feugiat\neget. Fusce magna ligula, molestie quis egestas eu, varius eget ante. Suspendisse massa lectus, sollicitudin vel aliquam\nat, convallis ac dui.\n\nOrci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas pellentesque congue\nblandit. Etiam facilisis dapibus dolor, vitae semper neque. Phasellus fermentum, odio quis pharetra aliquam, purus justo\ngravida risus, a fringilla nisl mi nec dui. Nunc suscipit condimentum fringilla. Duis sit amet porttitor ligula, sed\nmaximus velit. Sed at lectus diam. Donec malesuada euismod sodales. Etiam pretium gravida feugiat. Donec cursus enim\nconsequat hendrerit mollis. Quisque ultrices molestie neque et ullamcorper. Aenean fermentum lectus eget ultricies\nrutrum. Nullam blandit enim non vulputate dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nVestibulum finibus mattis feugiat. Vestibulum orci nibh, fermentum at fringilla a, malesuada id lacus. Donec sit amet\nmollis odio. Donec condimentum, est ultricies placerat accumsan, ipsum ex varius purus, ut convallis tellus diam in\nnisl. Donec gravida hendrerit leo, quis porttitor purus varius eget. Maecenas in lorem velit. Sed feugiat ac velit vitae\ntempus. In eget arcu vitae ipsum faucibus pretium sed eu sem. Phasellus nec lorem sollicitudin, vehicula odio in, ornare\nquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam tristique\ncondimentum ipsum quis pellentesque. Morbi vestibulum id tellus ut tincidunt.\n\nMorbi sit amet pulvinar ex. Etiam aliquam est convallis quam placerat dictum. Sed ligula ante, laoreet sit amet laoreet\nquis, semper nec ex. Donec tristique dolor nec maximus sagittis. Duis dictum leo quis volutpat euismod. Praesent porta\nfelis et sem sodales, scelerisque sollicitudin odio porta. Curabitur ultricies nisl a ligula aliquam porttitor.\nCurabitur ligula urna, mattis aliquam dolor nec, scelerisque congue mi.\n\nDuis finibus sagittis tellus at faucibus. Ut sed consequat tellus. Aliquam nec erat dignissim, eleifend lorem sit amet,\nelementum felis. Morbi efficitur massa ut turpis facilisis, nec blandit massa cursus. Cras fringilla, ante a dignissim\ntincidunt, ligula libero blandit nunc, et egestas lectus tortor eget arcu. Nunc venenatis nibh mauris, quis euismod\nlectus congue at. Duis lacinia ligula non est lacinia elementum vitae a ipsum. Mauris et mi nisl. Vivamus facilisis,\nlorem at pellentesque dictum, erat nisl malesuada nisl, ac tincidunt dolor magna non libero. Mauris luctus felis vel\nmagna imperdiet, et molestie est cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\ncubilia curae; Fusce vitae mattis nibh. Vestibulum quis augue nunc. Ut fringilla, neque ultrices mattis facilisis, felis\nlectus ullamcorper ante, et fermentum lectus justo at nibh.\n"
},
{
"path": "demo/src/posts/2019/post-2.mdx",
"content": "---\ntitle: Post 2\ntags: ['React', 'GatsbyJs', 'ES6', 'theme-ui']\nfeaturedImage: markus-spiske-70Rir5vB96U-unsplash.jpg\ndate: 2019-02-17\ndateModified: 2019-03-17\nauthor: Paul Scanlon\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis.\n"
},
{
"path": "demo/src/posts/2020/01/post-3.mdx",
"content": "---\ntitle: Post 3\ntags: ['React', 'HTML']\nfeaturedImage: florian-olivo-Ek9Znm8lQ1U-unsplash.jpg\ndate: 2020-01-17\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n"
},
{
"path": "demo/src/posts/2020/02/post-4.mdx",
"content": "---\ntitle: Post 4\ntags: ['React', 'TypeScript']\nstatus: draft\ndate: 2020-02-12\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n"
},
{
"path": "demo/src/posts/2020/02/post-5.mdx",
"content": "---\ntitle: Post 5\ntags: ['React', 'TypeScript', 'GraphQL', 'Fauna']\nfeaturedImage: pankaj-patel-_SgRNwAVNKw-unsplash.jpg\ndate: 2020-02-12\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nVivamus luctus tincidunt varius. In hac habitasse platea dictumst. Sed eu iaculis velit, in porttitor augue. Ut vitae\nsapien vestibulum, bibendum ipsum in, finibus arcu. Vestibulum euismod velit ex, et posuere elit iaculis vel. Donec\nsodales imperdiet posuere. Phasellus dui dolor, placerat in elementum vitae, gravida in quam\n\n\n"
},
{
"path": "demo/src/posts/2020/04/private.mdx",
"content": "---\ntitle: Private\ntags: ['React', 'TypeScript', 'GraphQL', 'Fauna']\ndate: 2020-04-22\nisPrivate: true\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nVivamus luctus tincidunt varius. In hac habitasse platea dictumst. Sed eu iaculis velit, in porttitor augue. Ut vitae\nsapien vestibulum, bibendum ipsum in, finibus arcu. Vestibulum euismod velit ex, et posuere elit iaculis vel. Donec\nsodales imperdiet posuere. Phasellus dui dolor, placerat in elementum vitae, gravida in quam\n"
},
{
"path": "demo/src/posts/2021/local-image-post.mdx",
"content": "---\ntitle: Local Image Post\ndate: 2021-01-14\ntags: ['React', 'GatsbyJs', 'ES6', 'Css']\nfeaturedImage: pankaj-patel-SXihyA4oEJs-unsplash.jpg\nembeddedImages:\n - pankaj-patel-SXihyA4oEJs-unsplash.jpg\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis.\n\n### Gatsby\n\n```javascript\n\n```\n\n``\n\n\n \n\n\n{JSON.stringify(props.embedded.image1, null, 2)}\n\n### Theme UI\n\n``\n\n\n \n\n\n{JSON.stringify(props.embedded.image1.gatsbyImageData.images.fallback.src, null, 2)}\n"
},
{
"path": "demo/src/posts/2021/remote-image-post.mdx",
"content": "---\ntitle: Remote Image Post\ndate: 2021-01-13\nauthor: Paul Scanlon\ntags: ['JavaScript', 'React', 'GatsbyJs', 'HTML', 'CSS', 'theme-ui']\nfeaturedImageUrl: https://res.cloudinary.com/www-paulie-dev/image/upload/v1603273280/paulie.dev/placeholder_ekfnq2.jpg\nembeddedImageUrls:\n - https://res.cloudinary.com/www-paulie-dev/image/upload/v1603273280/paulie.dev/placeholder_ekfnq2.jpg\n - https://res.cloudinary.com/www-paulie-dev/image/upload/v1603273280/paulie.dev/placeholder_ekfnq2.jpg\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis. Donec non tellus\njusto. Ut sit amet elit mauris. Praesent eleifend cursus luctus. Praesent posuere rhoncus maximus. Donec nec felis nec\nmetus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum pharetra arcu, vel egestas\nturpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n\n\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis. Donec non tellus\njusto. Ut sit amet elit mauris. Praesent eleifend cursus luctus. Praesent posuere rhoncus maximus. Donec nec felis nec\nmetus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum pharetra arcu, vel egestas\nturpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n\n\n"
},
{
"path": "demo/src/posts/post-1.mdx",
"content": "---\ntitle: Post 1\ndate: 2020-04-26\ndateModified: 2020-05-05\nauthor: Paul Scanlon\ntags: ['JavaScript', 'React', 'GatsbyJs', 'HTML', 'CSS', 'theme-ui']\nfeaturedImage: markus-spiske-466ENaLuhLY-unsplash.jpg\nembeddedImages:\n - markus-spiske-FXFz-sW0uwo-unsplash.jpg\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis. Donec non tellus\njusto. Ut sit amet elit mauris. Praesent eleifend cursus luctus. Praesent posuere rhoncus maximus. Donec nec felis nec\nmetus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum pharetra arcu, vel egestas\nturpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n\n```sh\nnpm install aThing `aThing` 'aThing' \"aThing\"\n```\n\n```javascript\n\n```\n\n\n \n Donec nec felis nec metus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum\n pharetra arcu, vel egestas turpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n \n \n \n \n\n\n### [Gatsby](#gatsby)\n\n``\n\n{JSON.stringify(props.embedded.image1, null, 2)}\n"
},
{
"path": "demo/src/projects/2019/project-2.mdx",
"content": "---\ntitle: Project 2\ntags: ['Automotive', 'FinTech', 'Publishing']\ndate: 2019-01-29\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis. Donec non tellus\njusto. Ut sit amet elit mauris. Praesent eleifend cursus luctus. Praesent posuere rhoncus maximus. Donec nec felis nec\nmetus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum pharetra arcu, vel egestas\nturpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n"
},
{
"path": "demo/src/projects/2020/01/project-3.mdx",
"content": "---\ntitle: Project 3\ntags: ['Automotive']\ndate: 2020-01-26\nurl: https://example.com\nmisc: Ahoy\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis. Donec non tellus\njusto. Ut sit amet elit mauris. Praesent eleifend cursus luctus. Praesent posuere rhoncus maximus. Donec nec felis nec\nmetus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum pharetra arcu, vel egestas\nturpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n"
},
{
"path": "demo/src/projects/project-1.mdx",
"content": "---\ntitle: Project 1\ntags: ['Publishing']\ndate: 2020-02-27\n---\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id enim et mauris elementum lobortis. Donec non tellus\njusto. Ut sit amet elit mauris. Praesent eleifend cursus luctus. Praesent posuere rhoncus maximus. Donec nec felis nec\nmetus semper pharetra ut ut libero. Ut hendrerit dui ut tincidunt egestas. Donec interdum pharetra arcu, vel egestas\nturpis ornare a. Phasellus quis euismod diam, sed convallis dolor.\n"
},
{
"path": "netlify.toml",
"content": "[build]\n command = \"yarn build\"\n publish = \"demo/public\"\n"
},
{
"path": "package.json",
"content": "{\n \"private\": true,\n \"scripts\": {\n \"clean\": \"yarn workspace demo clean\",\n \"serve\": \"yarn workspace demo serve\",\n \"develop\": \"yarn workspace demo develop\",\n \"build\": \"yarn workspace demo build\",\n \"prettier\": \"prettier --config ./.prettierrc.js --ignore-path ./.prettierignore --write \\\"**/*.{json,js,ts,tsx,mdx}\\\"\",\n \"release\": \"node copy-readme.js && yarn workspace @pauliescanlon/gatsby-theme-terminal publish\"\n },\n \"postinstall\": \"husky install\",\n \"workspaces\": [\n \"@pauliescanlon/gatsby-theme-terminal\",\n \"demo\"\n ],\n \"devDependencies\": {\n \"@commitlint/cli\": \"^12.1.4\",\n \"@commitlint/config-conventional\": \"^12.1.4\",\n \"husky\": \"^7.0.1\",\n \"prettier\": \"^2.3.2\"\n }\n}\n"
}
]
![\"gatsby-theme-termninal](\"https://gatsbythemeterminal.gatsbyjs.io/images/terminal-open-graph-image.jpg\")
\n![\"Gatsby\"](\"https://www.gatsbyjs.org/monogram.svg\")
\n \n