{"id":13393854,"url":"https://github.com/PaulieScanlon/gatsby-theme-terminal","last_synced_at":"2025-03-13T19:31:54.349Z","repository":{"id":38431855,"uuid":"240838510","full_name":"PaulieScanlon/gatsby-theme-terminal","owner":"PaulieScanlon","description":"A zero component Gatsby theme for developers 🔋","archived":true,"fork":false,"pushed_at":"2022-07-07T16:38:09.000Z","size":7975,"stargazers_count":311,"open_issues_count":8,"forks_count":35,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-05-16T19:02:34.802Z","etag":null,"topics":["gatsby","gatsby-theme","gatsbyjs","mdx"],"latest_commit_sha":null,"homepage":"https://gatsbythemeterminal.gatsbyjs.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PaulieScanlon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["pauliescanlon"],"ko_fi":"pauliescanlon"}},"created_at":"2020-02-16T05:43:08.000Z","updated_at":"2024-02-24T12:33:32.000Z","dependencies_parsed_at":"2022-09-02T19:01:06.103Z","dependency_job_id":null,"html_url":"https://github.com/PaulieScanlon/gatsby-theme-terminal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulieScanlon%2Fgatsby-theme-terminal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulieScanlon%2Fgatsby-theme-terminal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulieScanlon%2Fgatsby-theme-terminal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PaulieScanlon%2Fgatsby-theme-terminal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PaulieScanlon","download_url":"https://codeload.github.com/PaulieScanlon/gatsby-theme-terminal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469225,"owners_count":20295715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-theme","gatsbyjs","mdx"],"created_at":"2024-07-30T17:01:01.415Z","updated_at":"2025-03-13T19:31:51.825Z","avatar_url":"https://github.com/PaulieScanlon.png","language":"JavaScript","funding_links":["https://github.com/sponsors/pauliescanlon","https://ko-fi.com/pauliescanlon","https://ko-fi.com/P5P31B7G8"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ca href=\"https://gatsbythemeterminal.gatsbyjs.io/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://gatsbythemeterminal.gatsbyjs.io/images/terminal-open-graph-image.jpg\" alt=\"gatsby-theme-termninal main image\" /\u003e\n\u003c/a\u003e\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\u003c!-- prettier-ignore --\u003e\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\u003c!-- prettier-ignore --\u003e\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\u003c!-- prettier-ignore --\u003e\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 // =\u003e means it won't be rendered\nisPrivate: // =\u003e it will be rendered but you can use this prop as a filter\nurl: \"https://example.com\"  // =\u003e could be an external url\nmisc: \"Ahoy\" // =\u003e use how you wish\npinned: false // =\u003e 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 `\u003cGatsbyImage /\u003e` 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\u003cGatsbyImage image={props.embedded.image1} /\u003e\n```\n\nYou can also use the Theme UI `\u003cImage /\u003e` component by passing it a `src`\n\n```\n\u003cImage src={props.embedded.image1.gatsbyImageData.images.fallback.src} /\u003e\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 `\u003cImage /\u003e` component and pass it the same\nprops\n\n```\n\u003cImage src={props.embedded.image2.gatsbyImageData.images.fallback.src} /\u003e\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\u003cSourceList\u003e\n  {(source) =\u003e (\n    \u003cul\u003e\n      {source.map((edge, index) =\u003e {\n        const {\n          frontmatter: { title },\n        } = edge.node\n        return \u003cli key={index}\u003e{title}\u003c/li\u003e\n      })}\n    \u003c/ul\u003e\n  )}\n\u003c/SourceList\u003e\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[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/P5P31B7G8)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPaulieScanlon%2Fgatsby-theme-terminal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPaulieScanlon%2Fgatsby-theme-terminal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPaulieScanlon%2Fgatsby-theme-terminal/lists"}