├── .prettierignore ├── gatsby-theme-terminal ├── content │ └── type-check.md ├── index.js ├── src │ ├── components │ │ ├── index.ts │ │ ├── footer.tsx │ │ ├── posts.tsx │ │ ├── layout.tsx │ │ ├── header.tsx │ │ ├── highlight.tsx │ │ ├── mdx.tsx │ │ └── article.tsx │ ├── _templates │ │ ├── posts-template.tsx │ │ ├── index-template.tsx │ │ └── article-template.tsx │ ├── styles │ │ ├── base.ts │ │ └── variable.ts │ └── config │ │ └── gatsby-node.ts ├── gatsby-node.js ├── gatsby-config.js ├── tsconfig.json ├── LICENSE ├── README.md └── package.json ├── .github ├── linters │ └── .jscpd.json └── workflows │ └── build.yml ├── example ├── content │ ├── index-content.md │ └── posts │ │ ├── my-second-post.md │ │ ├── hello-world.md │ │ └── new-beginnings.md ├── README.md ├── package.json ├── gatsby-config.js └── LICENSE ├── .yarnrc.yml ├── .devcontainer ├── Dockerfile └── devcontainer.json ├── LICENSE ├── package.json ├── .gitignore ├── README.md └── .yarn └── plugins └── @yarnpkg └── plugin-workspace-tools.cjs /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .linaria-cache 3 | package.json 4 | package-lock.json 5 | public 6 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/content/type-check.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2021-10-20T23:13:38.523Z 3 | description: '' 4 | hidden: true 5 | noEmit: true 6 | title: '' 7 | tags: [] 8 | --- 9 | -------------------------------------------------------------------------------- /.github/linters/.jscpd.json: -------------------------------------------------------------------------------- 1 | { 2 | "threshold": 0, 3 | "reporters": ["consoleFull"], 4 | "ignore": ["**/__snapshots__/**", "**/*.md", "**/*.mdx"], 5 | "absolute": true 6 | } 7 | -------------------------------------------------------------------------------- /example/content/index-content.md: -------------------------------------------------------------------------------- 1 | --- 2 | noEmit: true 3 | --- 4 | 5 | # Hello there! 6 | 7 | Welcome in demo of the `Terminal` theme. Please, look around and check whether this is what you are looking for. 8 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/index.js: -------------------------------------------------------------------------------- 1 | import Layout, { 2 | Article, 3 | componemts, 4 | Content, 5 | Footer, 6 | Header, 7 | PrismCode, 8 | } from './src/components'; 9 | 10 | export { Article, componemts, Content, Footer, Header, Layout, PrismCode }; 11 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | npmRegistryServer: "https://registry.npm.taobao.org" 4 | 5 | plugins: 6 | - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs 7 | spec: "@yarnpkg/plugin-workspace-tools" 8 | 9 | yarnPath: .yarn/releases/yarn-3.0.2.cjs 10 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Gatsby Theme Minimal Example 2 | 3 | A usage of 4 | [gatsby-theme-terminal](https://github.com/Mogeko/gatsby-theme-terminal/blob/master/gatsby-theme-terminal) 5 | that does nothing but use the theme. As a result you will see `Error: Missing resources for /` when navigating to `http://localhost:8000`. To get 6 | rid of that, create a page in `src/pages/index.js`. 7 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Article from './article'; 2 | import Footer from './footer'; 3 | import Header from './header'; 4 | import PostsList from './posts'; 5 | import PrismCode from './highlight'; 6 | import Layout from './layout'; 7 | import componemts, { Content } from './mdx'; 8 | 9 | export { Article, Footer, Header, PostsList, PrismCode, componemts, Content }; 10 | export default Layout; 11 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/gatsby-node.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | /** 3 | * Implement Gatsby's Node APIs in this file. 4 | * 5 | * See: https://www.gatsbyjs.com/docs/node-apis/ 6 | */ 7 | 8 | 'use strict'; 9 | 10 | require('ts-node').register({ 11 | compilerOptions: { 12 | module: 'commonjs', 13 | target: 'es2020', 14 | }, 15 | }); 16 | 17 | module.exports = require('./src/config/gatsby-node'); 18 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/_templates/posts-template.tsx: -------------------------------------------------------------------------------- 1 | import { PageProps } from 'gatsby'; 2 | import Layout, { PostsList } from '../components'; 3 | import { PostContextData } from '../config/gatsby-node'; 4 | import React from 'react'; 5 | 6 | const PageTemplate = ({ pageContext }: PageProps) => ( 7 | 8 | 9 | 10 | ); 11 | 12 | export default PageTemplate; 13 | -------------------------------------------------------------------------------- /example/content/posts/my-second-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: My Second Post! 3 | date: '2015-05-06T23:46:37.121Z' 4 | tags: ["theme", "wiki"] 5 | --- 6 | 7 | Wow! I love blogging so much already. 8 | 9 | Did you know that "despite its name, salted duck eggs can also be made from 10 | chicken eggs, though the taste and texture will be somewhat different, and the 11 | egg yolk will be less rich."? 12 | ([Wikipedia Link](https://en.wikipedia.org/wiki/Salted_duck_egg)) 13 | 14 | Yeah, I didn't either. 15 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | `gatsby-plugin-typescript`, 4 | `gatsby-plugin-react-helmet`, 5 | { 6 | resolve: 'gatsby-source-filesystem', 7 | options: { 8 | name: 'posts', 9 | path: `${__dirname}/content`, 10 | }, 11 | }, 12 | { 13 | resolve: `gatsby-plugin-mdx`, 14 | options: { 15 | extensions: [`.mdx`, `.md`], 16 | }, 17 | }, 18 | `gatsby-plugin-linaria`, 19 | ], 20 | }; 21 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "author": "Mogeko ", 5 | "license": "MIT", 6 | "scripts": { 7 | "develop": "gatsby develop", 8 | "build": "gatsby build", 9 | "clean": "rm -rf .linaria-cache & gatsby clean" 10 | }, 11 | "peerDependencies": { 12 | "gatsby": "^3.14.2", 13 | "react": "^17.0.2", 14 | "react-dom": "^17.0.2" 15 | }, 16 | "dependencies": { 17 | "gatsby": "^3.14.2", 18 | "gatsby-plugin-typescript": "^3.14.0", 19 | "gatsby-source-filesystem": "^3.14.0", 20 | "gatsby-theme-terminal": "^0.0.1", 21 | "react": "^17.0.2", 22 | "react-dom": "^17.0.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/styles/base.ts: -------------------------------------------------------------------------------- 1 | import { styled } from '@linaria/react'; 2 | import { immutableColors } from './variable'; 3 | 4 | const CssBaseline = styled.div` 5 | :global() { 6 | @import url('https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css'); 7 | @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'); 8 | 9 | body { 10 | font-family: 'Fira Code', Consolas, 'Courier New', monospace; 11 | font-size: 1rem; 12 | letter-spacing: -0.02em; 13 | line-height: 1.54; 14 | background-color: ${immutableColors.backgroundColor}; 15 | color: ${immutableColors.fontColor}; 16 | } 17 | } 18 | `; 19 | 20 | export default CssBaseline; 21 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/styles/variable.ts: -------------------------------------------------------------------------------- 1 | export const useColors = (themeColor = '#8c3a00') => ({ 2 | ...immutableColors, 3 | themeColor: themeColor, 4 | }); 5 | 6 | export const immutableColors = { 7 | backgroundColor: '#181a1b', 8 | fontColor: '#E8E6E3', 9 | }; 10 | 11 | export const color = { 12 | bgColor: '#181a1b', 13 | textColor: '#E8E6E3', 14 | headerColor: '#8c3a00', 15 | post: { 16 | titleColor: '#ffa460', 17 | borderColor: '#933d00', 18 | metaColor: '#ffa464b3', 19 | mark: { 20 | bgColor: '#8c3a00', 21 | textColor: '#d1cdc7', 22 | }, 23 | code: { 24 | bgColor: '#8c3a0033', 25 | textColor: '#ffa464', 26 | }, 27 | img: { 28 | bgColor: '#8c3a00', 29 | textColor: '#d1cdc7', 30 | }, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/components/footer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled } from '@linaria/react'; 3 | import { Link } from 'gatsby'; 4 | 5 | const Footer = ({ year, now }: FooterProps) => { 6 | const FooterWrap = styled.footer` 7 | padding: 40px 0; 8 | opacity: 0.5; 9 | `; 10 | const Copyright = styled.div` 11 | max-width: 100%; 12 | font-size: 1rem; 13 | a { 14 | color: inherit; 15 | } 16 | `; 17 | 18 | return ( 19 | 20 | 21 | © {now === year ? `${year}` : `${year}-${now}`} 22 | Powered by Gatsby.js :: Theme 23 | made by Mogeko 24 | 25 | 26 | ); 27 | }; 28 | 29 | interface FooterProps { 30 | year: number; 31 | now: number; 32 | } 33 | 34 | export default Footer; 35 | -------------------------------------------------------------------------------- /example/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'Terminal', // The name of the site 4 | themeColor: '#8c3a00', // The theme color of the website, default '#8c3a00' 5 | year: 2017, // When did you start writing articles? (year) 6 | author: 'Mogeko', // Your name 7 | menu: [ 8 | // The structure of the main menu 9 | // Pay attention to the order 10 | { 11 | title: 'About', // Name of the menu 12 | path: '/about', // URL of the menu 13 | }, 14 | { 15 | title: 'Tags', 16 | path: '/tags', 17 | }, 18 | ], 19 | }, 20 | plugins: [ 21 | { 22 | // Read files from content/posts 23 | resolve: 'gatsby-source-filesystem', 24 | options: { 25 | name: 'posts', 26 | path: `${__dirname}/content`, 27 | }, 28 | }, 29 | { resolve: `gatsby-theme-terminal`, options: {} }, 30 | ], 31 | }; 32 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "incremental": true, 4 | "target": "es2020", 5 | "jsx": "preserve", 6 | "module": "commonjs", 7 | "rootDir": "./", 8 | "allowJs": true, 9 | "checkJs": true, 10 | "sourceMap": true, 11 | "outDir": "./dist", 12 | "esModuleInterop": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "preserveConstEnums": true, 15 | "noImplicitThis": true, 16 | "removeComments": true, 17 | "strict": true, 18 | "alwaysStrict": true, 19 | "skipLibCheck": true, 20 | "strictNullChecks": true, 21 | "moduleResolution": "node", 22 | "declaration": true, 23 | "plugins": [ 24 | { 25 | "name": "typescript-styled-plugin" 26 | } 27 | ] 28 | }, 29 | "files": [ 30 | "./index.js" 31 | ], 32 | "include": [ 33 | "./src/**/*" 34 | ], 35 | "exclude": [ 36 | "./gatsby-*" 37 | ] 38 | } -------------------------------------------------------------------------------- /.devcontainer/Dockerfile: -------------------------------------------------------------------------------- 1 | # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.202.3/containers/typescript-node/.devcontainer/base.Dockerfile 2 | 3 | # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster 4 | ARG VARIANT="16-bullseye" 5 | FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT} 6 | 7 | # [Optional] Uncomment this section to install additional OS packages. 8 | # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ 9 | # && apt-get -y install --no-install-recommends 10 | 11 | # [Optional] Uncomment if you want to install an additional version of node using nvm 12 | # ARG EXTRA_NODE_VERSION=10 13 | # RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" 14 | 15 | # [Optional] Uncomment if you want to install more global node packages 16 | RUN su node -c "npm install -g gatsby-cli prettier eslint" 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mogeko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mogeko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mogeko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/README.md: -------------------------------------------------------------------------------- 1 | # The smallest possible Gatsby theme 2 | 3 | ## Quick Start 4 | 5 | ```shell 6 | mkdir my-site 7 | cd my-site 8 | yarn init 9 | # install gatsby-theme-terminal and it's dependencies 10 | yarn add gatsby react react-dom gatsby-theme-terminal 11 | ``` 12 | 13 | Then add the theme to your `gatsby-config.js`. We'll use the long-form 14 | here for educational purposes. 15 | 16 | ```javascript 17 | module.exports = { 18 | plugins: [ 19 | { 20 | resolve: 'gatsby-theme-terminal', 21 | options: {}, 22 | }, 23 | ], 24 | }; 25 | ``` 26 | 27 | That's it, you can now run your gatsby site using 28 | 29 | ```shell 30 | yarn gatsby develop 31 | ``` 32 | 33 | Note that this site doesn't _do_ anything, so you're seeing a missing 34 | resources error. Create a simple page in `src/pages/index.js` to see a 35 | page on the root url. 36 | 37 | ```jsx 38 | import React from 'react'; 39 | 40 | export default function Home() { 41 | return
My Site!
; 42 | } 43 | ``` 44 | 45 | ## Doing more with themes 46 | 47 | You can use this as a place to start when developing themes. I 48 | generally suggest using [yarn 49 | workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) like the 50 | [gatsby-theme-examples repo 51 | does](https://github.com/ChristopherBiscardi/gatsby-theme-examples), 52 | but using `yarn link` or `npm link` is a viable alternative if you're 53 | not familiar with workspaces. 54 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: 2 | // https://github.com/microsoft/vscode-dev-containers/tree/v0.202.3/containers/typescript-node 3 | { 4 | "name": "Gatsby", 5 | "runArgs": ["--init"], 6 | "build": { 7 | "dockerfile": "Dockerfile", 8 | // Update 'VARIANT' to pick a Node version: 16, 14, 12. 9 | // Append -bullseye or -buster to pin to an OS version. 10 | // Use -bullseye variants on local arm64/Apple Silicon. 11 | "args": { "VARIANT": "16-bullseye" } 12 | }, 13 | 14 | // Set *default* container specific settings.json values on container create. 15 | "settings": { 16 | "editor.tabSize": 2 17 | }, 18 | 19 | // Add the IDs of extensions you want installed when the container is created. 20 | "extensions": [ 21 | "dbaeumer.vscode-eslint", 22 | "esbenp.prettier-vscode", 23 | "mgmcdermott.vscode-language-babel", 24 | "github.vscode-pull-request-github", 25 | "jpoissonnier.vscode-styled-components" 26 | ], 27 | 28 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 29 | // "forwardPorts": [], 30 | 31 | // Use 'postCreateCommand' to run commands after the container is created. 32 | "postCreateCommand": "yarn install", 33 | 34 | // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. 35 | "remoteUser": "node" 36 | } 37 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-terminal", 3 | "version": "0.0.1", 4 | "main": "index.js", 5 | "author": "Mogeko ", 6 | "license": "MIT", 7 | "scripts": { 8 | "build": "tsc --noEmit", 9 | "clean": "rm -rf dist & gatsby clean" 10 | }, 11 | "peerDependencies": { 12 | "@mdx-js/react": "^1.6.22", 13 | "gatsby": "^3.14.2", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2" 16 | }, 17 | "dependencies": { 18 | "@mdx-js/mdx": "^1.6.22", 19 | "@mdx-js/react": "^1.6.22", 20 | "babel-preset-gatsby": "^1.14.0", 21 | "gatsby": "^3.14.2", 22 | "gatsby-plugin-image": "^1.14.1", 23 | "gatsby-plugin-linaria": "^3.1.0", 24 | "gatsby-plugin-manifest": "^3.14.0", 25 | "gatsby-plugin-mdx": "^2.14.0", 26 | "gatsby-plugin-offline": "^4.14.0", 27 | "gatsby-plugin-react-helmet": "^4.14.0", 28 | "gatsby-plugin-typescript": "^3.14.0", 29 | "gatsby-source-filesystem": "^3.14.0", 30 | "linaria": "^3.0.0-beta.13", 31 | "prism-react-renderer": "^1.2.1", 32 | "react": "^17.0.2", 33 | "react-dom": "^17.0.2", 34 | "react-helmet": "^6.1.0", 35 | "ts-node": "^10.3.0" 36 | }, 37 | "devDependencies": { 38 | "@types/mdx-js__react": "^1.5.4", 39 | "@types/react": "^17.0.30", 40 | "@types/react-dom": "^17.0.9", 41 | "@types/react-helmet": "^6.1.4", 42 | "typescript": "^4.4.4", 43 | "typescript-styled-plugin": "^0.18.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/_templates/index-template.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | import Layout from '../components/layout'; 3 | import { componemts, PostsList } from '../components'; 4 | import { graphql, PageProps } from 'gatsby'; 5 | import { styled } from '@linaria/react'; 6 | import { MDXRenderer } from 'gatsby-plugin-mdx'; 7 | import { PostContextData } from '../config/gatsby-node'; 8 | import { MDXProvider } from '@mdx-js/react'; 9 | 10 | const PageTemplate = ({ 11 | data, 12 | pageContext, 13 | }: PageProps) => ( 14 | 15 | <> 16 | {data.mdx.body} 17 | 18 | 19 | 20 | ); 21 | 22 | const IndexContent = ({ children }: { children: string & ReactNode }) => { 23 | const Content = styled.div` 24 | border: 1px solid #933d00; 25 | margin-top: 20px; 26 | padding: 20px; 27 | :first-child { 28 | margin-top: 0; 29 | } 30 | h1, 31 | h2, 32 | h3 { 33 | font-size: 1.4rem; 34 | } 35 | `; 36 | return ( 37 | 38 | 39 | {children} 40 | 41 | 42 | ); 43 | }; 44 | 45 | export const IndexQuery = graphql` 46 | query IndexQuery { 47 | mdx(slug: { eq: "index-content" }) { 48 | slug 49 | body 50 | } 51 | } 52 | `; 53 | 54 | interface IndexData { 55 | mdx: { 56 | slug: 'index-content'; 57 | body: string; 58 | id: string; 59 | }; 60 | } 61 | 62 | export default PageTemplate; 63 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/components/posts.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from 'gatsby'; 2 | import { styled } from '@linaria/react'; 3 | import { Header } from './article'; 4 | import { PostContextData } from '../config/gatsby-node'; 5 | import React from 'react'; 6 | 7 | const PostsList = ({ data, keyPrefix }: PostsListProps) => { 8 | const PostItem = styled.article` 9 | text-align: left; 10 | margin: 20px auto; 11 | padding: 20px 0; 12 | &:not(:last-of-type) { 13 | border-bottom: 1px solid #3034361a; 14 | } 15 | `; 16 | 17 | return ( 18 |
19 | {data.posts 20 | ?.filter((post) => !post.node.frontmatter.hidden) 21 | .map(({ node }) => ( 22 | 23 |
27 |

{node.excerpt}

28 | 29 | 30 | ))} 31 |
32 | ); 33 | }; 34 | 35 | const ReadMore = ({ url }: { url: string }) => { 36 | const ReadMoreWrap = styled.div` 37 | a { 38 | color: inherit; 39 | display: inline-flex; 40 | background: none; 41 | padding: 0; 42 | margin: 20px 0; 43 | max-width: 100%; 44 | border-color: transparent; 45 | outline-color: currentcolor; 46 | text-decoration: none; 47 | } 48 | `; 49 | return ( 50 | 51 | Read More → 52 | 53 | ); 54 | }; 55 | 56 | interface PostsListProps { 57 | data: PostContextData; 58 | keyPrefix: string; 59 | } 60 | 61 | export default PostsList; 62 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | linter: 7 | name: Lint Code Base 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout Code 11 | uses: actions/checkout@v2 12 | with: 13 | fetch-depth: 0 14 | - name: Lint Code Base 15 | uses: github/super-linter/slim@v4 16 | env: 17 | DEFAULT_BRANCH: master 18 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 19 | VALIDATE_ALL_CODEBASE: false 20 | JAVASCRIPT_DEFAULT_STYLE: prettier 21 | VALIDATE_TYPESCRIPT_STANDARD: false 22 | VALIDATE_MARKDOWN: false 23 | 24 | build: 25 | name: Build Site 26 | needs: linter 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout Code 30 | uses: actions/checkout@v2 31 | with: 32 | fetch-depth: 0 33 | - name: Get yarn cache directory path 34 | id: yarn-cache-dir-path 35 | run: echo "::set-output name=dir::$(yarn config get cacheFolder)" 36 | - name: Cache dependencies 37 | uses: actions/cache@v2 38 | with: 39 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 40 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 41 | restore-keys: ${{ runner.os }}-yarn- 42 | - name: Setup Node.js 43 | uses: actions/setup-node@v2 44 | with: 45 | node-version: '16' 46 | - name: Installation dependencies 47 | run: yarn install 48 | - name: Build example site 49 | run: yarn build 50 | - name: Update example site 51 | uses: actions/upload-artifact@v2 52 | with: 53 | name: site 54 | path: example/public 55 | -------------------------------------------------------------------------------- /gatsby-theme-terminal/src/components/layout.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled } from '@linaria/react'; 3 | import { graphql, useStaticQuery } from 'gatsby'; 4 | import PropTypes from 'prop-types'; 5 | import CssBaseline from '../styles/base'; 6 | import Header from './header'; 7 | import Footer from './footer'; 8 | 9 | const Layout = ({ children, className }: LayoutProps) => { 10 | const data = useStaticQuery(graphql` 11 | query SiteDataQuery { 12 | site { 13 | siteMetadata { 14 | themeColor 15 | title 16 | year 17 | menu { 18 | path 19 | title 20 | } 21 | } 22 | } 23 | siteBuildMetadata { 24 | buildTime 25 | } 26 | } 27 | `); 28 | 29 | const now = new Date( 30 | Date.parse(data.siteBuildMetadata?.buildTime) 31 | ).getFullYear(); 32 | 33 | return ( 34 | 35 | 36 |
40 |
{children}
41 |