├── .github └── main.workflow ├── .gitignore ├── examples └── gatsby-starter-glossary │ ├── .gitignore │ ├── gatsby-config.js │ ├── glossary │ ├── a.mdx │ ├── b.mdx │ ├── c.mdx │ ├── d.mdx │ ├── e.mdx │ ├── f.mdx │ ├── g.mdx │ ├── h.mdx │ ├── i.mdx │ └── z.mdx │ ├── package.json │ ├── readme.md │ └── src │ └── gatsby-theme-documentation │ └── theme.js ├── gatsby-config.js ├── lerna.json ├── license.md ├── now.json ├── package.json ├── packages └── gatsby-theme-glossary │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── index.js │ ├── package.json │ ├── readme.md │ └── src │ ├── components │ ├── glossary.js │ ├── heading.js │ ├── layout.js │ ├── nav.js │ └── title.js │ ├── description.mdx │ ├── gatsby-plugin-theme-ui │ └── index.js │ ├── links.js │ └── templates │ └── glossary.js ├── readme.md ├── renovate.json └── yarn.lock /.github/main.workflow: -------------------------------------------------------------------------------- 1 | workflow "Publish packages and starters" { 2 | resolves = [ 3 | "yarn:publish:ci", 4 | "site:alias", 5 | ] 6 | on = "push" 7 | } 8 | 9 | action "master" { 10 | uses = "actions/bin/filter@3c0b4f0e63ea54ea5df2914b4fabf383368cd0da" 11 | args = "branch master" 12 | } 13 | 14 | action "starters:publish" { 15 | uses = "johno/actions-push-subdirectories@master" 16 | needs = ["master"] 17 | args = "examples johno" 18 | secrets = [ 19 | "GITHUB_TOKEN", 20 | "API_TOKEN_GITHUB", 21 | ] 22 | } 23 | 24 | action "yarn:publish:ci" { 25 | uses = "johno/actions-yarn@master" 26 | args = "publish:ci" 27 | secrets = ["NPM_AUTH_TOKEN"] 28 | needs = ["starters:publish"] 29 | } 30 | 31 | action "site:publish" { 32 | uses = "actions/zeit-now@5c51b26db987d15a0133e4c760924896b4f1512f" 33 | needs = ["master"] 34 | secrets = ["ZEIT_TOKEN"] 35 | args = "--public --no-clipboard > $HOME/ZEIT.txt" 36 | } 37 | 38 | action "site:alias" { 39 | uses = "actions/zeit-now@5c51b26db987d15a0133e4c760924896b4f1512f" 40 | args = "alias" 41 | secrets = ["ZEIT_TOKEN"] 42 | needs = ["site:publish"] 43 | } 44 | 45 | workflow "Test" { 46 | on = "push" 47 | resolves = ["test"] 48 | } 49 | 50 | action "install" { 51 | uses = "johno/actions-yarn@master" 52 | args = "install" 53 | } 54 | 55 | action "test" { 56 | uses = "johno/actions-yarn@master" 57 | needs = ["install"] 58 | args = "test" 59 | } 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | public 4 | *.log 5 | *.swp 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | public 4 | *.log 5 | *.swp 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'Gatsby Glossary Starter', 4 | description: 'This is a starter for gatsby-theme-glossary' 5 | }, 6 | plugins: [ 7 | 'gatsby-theme-glossary' 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/a.mdx: -------------------------------------------------------------------------------- 1 | # A 2 | 3 | ## Animal 4 | 5 | Hello! 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/b.mdx: -------------------------------------------------------------------------------- 1 | # B 2 | 3 | ## Banana 4 | 5 | The best snack 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/c.mdx: -------------------------------------------------------------------------------- 1 | # C 2 | 3 | ## Cat 4 | 5 | Meow! 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/d.mdx: -------------------------------------------------------------------------------- 1 | # D 2 | 3 | ## Dog 4 | 5 | Woof! 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/e.mdx: -------------------------------------------------------------------------------- 1 | # E 2 | 3 | ## Emoji 4 | 5 | _noun_ 6 | 7 | A small digital image or icon used to express an idea, emotion, etc. 8 | 9 | > emoji liven up your text messages with tiny smiley faces 10 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/f.mdx: -------------------------------------------------------------------------------- 1 | # F 2 | 3 | ## Friend 4 | 5 | They're the best. 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/g.mdx: -------------------------------------------------------------------------------- 1 | # G 2 | 3 | ## Gift 4 | 5 | Presents are the best. 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/h.mdx: -------------------------------------------------------------------------------- 1 | # H 2 | 3 | ## Hello 4 | 5 | A friendly greeting. 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/i.mdx: -------------------------------------------------------------------------------- 1 | # I 2 | 3 | ## Igloo 4 | 5 | _noun_ 6 | 7 | A type of dome-shaped shelter built from blocks of solid snow. 8 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/glossary/z.mdx: -------------------------------------------------------------------------------- 1 | # Z 2 | 3 | ## Zebra 4 | 5 | Stripey horse 6 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "gatsby-starter-glossary", 4 | "version": "0.0.9", 5 | "scripts": { 6 | "start": "gatsby develop", 7 | "build": "gatsby build", 8 | "now-build": "yarn build" 9 | }, 10 | "license": "MIT", 11 | "dependencies": { 12 | "gatsby": "^2.13.18", 13 | "gatsby-theme-glossary": "^0.0.9", 14 | "react": "^16.8.6", 15 | "react-dom": "^16.8.6" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/readme.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-glossary 2 | 3 | A minimalist starter for 4 | [gatsby-theme-glossary](https://github.com/johno/gatsby-theme-glossary). 5 | 6 | ![image](https://user-images.githubusercontent.com/1424573/62055530-04ea6300-b1d9-11e9-9800-75c41798bedf.png) 7 | 8 | ## Installation 9 | 10 | ```sh 11 | gatsby new my-glossary johno/gatsby-starter-glossary 12 | cd my-glossary 13 | ``` 14 | 15 | ## Usage 16 | 17 | ```sh 18 | yarn start 19 | ``` 20 | -------------------------------------------------------------------------------- /examples/gatsby-starter-glossary/src/gatsby-theme-documentation/theme.js: -------------------------------------------------------------------------------- 1 | const heading = { 2 | fontFamily: 'heading', 3 | fontWeight: 'heading', 4 | lineHeight: 'heading', 5 | a: { 6 | color: 'inherit', 7 | textDecoration: 'none' 8 | } 9 | } 10 | 11 | export default { 12 | initialColorMode: 'light', 13 | colors: { 14 | text: '#000', 15 | background: '#fff', 16 | primary: '#33e', 17 | secondary: '#119', 18 | muted: '#f6f6f6', 19 | highlight: '#ffffcc', 20 | gray: '#777', 21 | purple: '#609', 22 | modes: { 23 | dark: { 24 | text: '#fff', 25 | background: '#060606', 26 | primary: '#3cf', 27 | secondary: '#e0f', 28 | muted: '#191919', 29 | highlight: '#ffffcc', 30 | gray: '#999', 31 | purple: '#c0f', 32 | }, 33 | deep: { 34 | text: 'hsl(210, 50%, 96%)', 35 | background: 'hsl(230, 25%, 18%)', 36 | primary: 'hsl(260, 100%, 80%)', 37 | secondary: 'hsl(290, 100%, 80%)', 38 | purple: 'hsl(290, 100%, 80%)', 39 | muted: 'hsla(230, 20%, 0%, 20%)', 40 | gray: 'hsl(210, 50%, 60%)', 41 | }, 42 | swiss: { 43 | text: 'hsl(10, 20%, 20%)', 44 | background: 'hsl(10, 10%, 98%)', 45 | primary: 'hsl(10, 80%, 50%)', 46 | secondary: 'hsl(10, 60%, 50%)', 47 | purple: 'hsl(250, 60%, 30%)', 48 | muted: 'hsl(10, 20%, 94%)', 49 | gray: 'hsl(10, 20%, 50%)', 50 | }, 51 | }, 52 | }, 53 | fonts: { 54 | body: 'system-ui, sans-serif', 55 | heading: 'inherit', 56 | monospace: 'Menlo, monospace', 57 | }, 58 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], 59 | fontWeights: { 60 | body: '400', 61 | heading: '700', 62 | }, 63 | lineHeights: { 64 | body: 1.5, 65 | heading: 1.25, 66 | }, 67 | textStyles: { 68 | heading, 69 | display: { 70 | variant: 'textStyles.heading', 71 | fontSize: [5, 6, 7], 72 | mt: 3, 73 | }, 74 | }, 75 | styles: { 76 | Container: { 77 | p: 3, 78 | maxWidth: 1024, 79 | }, 80 | root: { 81 | fontFamily: 'body', 82 | lineHeight: 'body', 83 | fontWeight: 'body', 84 | }, 85 | h1: { 86 | variant: 'textStyles.display', 87 | }, 88 | h2: { 89 | variant: 'textStyles.heading', 90 | fontSize: 5, 91 | }, 92 | h3: { 93 | variant: 'textStyles.heading', 94 | fontSize: 4, 95 | }, 96 | h4: { 97 | variant: 'textStyles.heading', 98 | fontSize: 3, 99 | }, 100 | h5: { 101 | variant: 'textStyles.heading', 102 | fontSize: 2, 103 | }, 104 | h6: { 105 | variant: 'textStyles.heading', 106 | fontSize: 1, 107 | }, 108 | a: { 109 | color: 'primary', 110 | '&:hover': { 111 | color: 'secondary', 112 | }, 113 | }, 114 | pre: { 115 | variant: 'prism', 116 | fontFamily: 'monospace', 117 | fontSize: 1, 118 | p: 3, 119 | color: 'text', 120 | bg: 'muted', 121 | overflow: 'auto', 122 | code: { 123 | color: 'inherit', 124 | }, 125 | }, 126 | code: { 127 | fontFamily: 'monospace', 128 | color: 'secondary', 129 | fontSize: 1, 130 | }, 131 | inlineCode: { 132 | fontFamily: 'monospace', 133 | color: 'secondary', 134 | bg: 'muted', 135 | }, 136 | table: { 137 | width: '100%', 138 | my: 4, 139 | borderCollapse: 'separate', 140 | borderSpacing: 0, 141 | [['th', 'td']]: { 142 | textAlign: 'left', 143 | py: '4px', 144 | pr: '4px', 145 | pl: 0, 146 | borderColor: 'muted', 147 | borderBottomStyle: 'solid', 148 | }, 149 | }, 150 | th: { 151 | verticalAlign: 'bottom', 152 | borderBottomWidth: '2px', 153 | }, 154 | td: { 155 | verticalAlign: 'top', 156 | borderBottomWidth: '1px', 157 | }, 158 | hr: { 159 | border: 0, 160 | borderBottom: '1px solid', 161 | borderColor: 'muted', 162 | }, 163 | img: { 164 | maxWidth: '100%' 165 | } 166 | }, 167 | prism: { 168 | [[ 169 | '.comment', 170 | '.prolog', 171 | '.doctype', 172 | '.cdata', 173 | '.punctuation', 174 | '.operator', 175 | '.entity', 176 | '.url', 177 | ]]: { 178 | color: 'gray', 179 | }, 180 | '.comment': { 181 | fontStyle: 'italic', 182 | }, 183 | [[ 184 | '.property', 185 | '.tag', 186 | '.boolean', 187 | '.number', 188 | '.constant', 189 | '.symbol', 190 | '.deleted', 191 | '.function', 192 | '.class-name', 193 | '.regex', 194 | '.important', 195 | '.variable', 196 | ]]: { 197 | color: 'purple', 198 | }, 199 | [['.atrule', '.attr-value', '.keyword']]: { 200 | color: 'primary', 201 | }, 202 | [[ 203 | '.selector', 204 | '.attr-name', 205 | '.string', 206 | '.char', 207 | '.builtin', 208 | '.inserted', 209 | ]]: { 210 | color: 'secondary', 211 | }, 212 | }, 213 | } 214 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'gatsby-theme-glossary', 4 | description: 'Minimal Gatsby Theme for adding a glossary to your site' 5 | }, 6 | plugins: [ 7 | { 8 | resolve: 'gatsby-theme-glossary', 9 | options: { 10 | contentPath: './examples/gatsby-starter-glossary/glossary', 11 | basePath: '/' 12 | } 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "examples/*", 4 | "packages/*" 5 | ], 6 | "version": "0.0.9" 7 | } 8 | -------------------------------------------------------------------------------- /license.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | ### Copyright (c) 2019 John Otander 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "alias": ["glossary-theme.johno.com"], 4 | "builds": [ 5 | { 6 | "src": "package.json", 7 | "use": "@now/static-build", 8 | "config": { 9 | "distDir": "public" 10 | } 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "gatsby-theme-glossary", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "start": "yarn workspace gatsby-starter-glossary start", 7 | "build": "gatsby build", 8 | "docs": "gatsby develop", 9 | "now-build": "yarn build", 10 | "publish": "lerna publish", 11 | "publish:ci": "lerna publish -y --canary --preid ci --dist-tag=ci --force-publish=*", 12 | "test": "yarn build" 13 | }, 14 | "workspaces": [ 15 | "packages/*", 16 | "examples/*" 17 | ], 18 | "dependencies": { 19 | "gatsby": "2.13.18", 20 | "lerna": "3.15.0", 21 | "react": "16.8.6", 22 | "react-dom": "16.8.6" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = options => { 2 | const { mdx = true, contentPath = 'glossary' } = options 3 | 4 | return { 5 | plugins: [ 6 | 'gatsby-plugin-theme-ui', 7 | mdx && { 8 | resolve: 'gatsby-plugin-mdx', 9 | options: { 10 | extensions: ['.mdx', '.md'], 11 | remarkPlugins: [require('remark-slug'), require('remark-emoji')] 12 | } 13 | }, 14 | { 15 | resolve: 'gatsby-source-filesystem', 16 | options: { 17 | path: contentPath, 18 | name: 'glossary' 19 | } 20 | } 21 | ] 22 | .filter(Boolean) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/gatsby-node.js: -------------------------------------------------------------------------------- 1 | let basePath 2 | 3 | const GlossaryTemplate = require.resolve('./src/templates/glossary') 4 | 5 | exports.onPreBootstrap = (_, themeOptions) => { 6 | contentPath = themeOptions.contentPath || `glossary` 7 | basePath = themeOptions.basePath || `glossary` 8 | } 9 | 10 | exports.createPages = ({ actions }) => { 11 | const { createPage } = actions 12 | 13 | createPage({ 14 | path: basePath, 15 | component: GlossaryTemplate 16 | }) 17 | } 18 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/index.js: -------------------------------------------------------------------------------- 1 | // Noop 2 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-glossary", 3 | "version": "0.0.9", 4 | "author": "John Otander", 5 | "license": "MIT", 6 | "repository": "johno/gatsby-theme-glossary", 7 | "keywords": [ 8 | "gatsby", 9 | "gatsby-theme", 10 | "gatsby-plugin" 11 | ], 12 | "dependencies": { 13 | "@emotion/core": "10.0.14", 14 | "@mdx-js/mdx": "1.0.25", 15 | "@mdx-js/react": "1.0.23", 16 | "gatsby-plugin-mdx": "1.0.12", 17 | "gatsby-plugin-theme-ui": "0.2.6", 18 | "gatsby-source-filesystem": "2.1.5", 19 | "is-absolute-url": "3.0.0", 20 | "remark-emoji": "2.0.2", 21 | "remark-slug": "5.1.2", 22 | "theme-ui": "0.2.13" 23 | }, 24 | "devDependencies": { 25 | "gatsby": "2.13.18", 26 | "react": "16.8.6", 27 | "react-dom": "16.8.6" 28 | }, 29 | "peerDependencies": { 30 | "gatsby": "^2.13.18", 31 | "react": "^16.8.6", 32 | "react-dom": "^16.8.6" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/readme.md: -------------------------------------------------------------------------------- 1 | # gatsby-theme-glossary 2 | 3 | A minimalist [Gatsby Theme](https://gatsbyjs.org/docs/themes) 4 | for a glossary built with [MDX](https://mdxjs.com) 5 | and [Theme UI](https://theme-ui.com). 6 | 7 | Get up and running in seconds with a beautiful glossary so 8 | you can do what's more important: **define terminology**. 9 | 10 | ![image](https://user-images.githubusercontent.com/1424573/62055530-04ea6300-b1d9-11e9-9800-75c41798bedf.png) 11 | 12 | ## Features 13 | 14 | - 📑 MDX files per letter 15 | - 🎨 Theme UI-based theming 16 | - 📱 Mobile friendly 17 | 18 | ### Directory structure 19 | 20 | ``` 21 | glossary 22 | ├── a.mdx 23 | ├── b.mdx 24 | ├── ... 25 | └── z.mdx 26 | ``` 27 | 28 | ## Installation 29 | 30 | ``` 31 | yarn add gatsby-theme-glossary 32 | ``` 33 | 34 | ### Install as a starter 35 | 36 | Name | Command 37 | ---- | ------- 38 | [Base](https://github.com/johno/gatsby-starter-glossary) | `gatsby new johno/gatsby-starter-glossary` 39 | 40 | ## Usage 41 | 42 | ```js 43 | // gatsby-config.js 44 | module.exports = { 45 | plugins: [ 46 | 'gatsby-theme-glossary' 47 | ] 48 | } 49 | ``` 50 | 51 | ### Options 52 | 53 | Name | Default | Description 54 | ---- | ------- | ----------- 55 | `contentPath` | `glossary` | Path to directory of glossary files 56 | `basePath` | `glossary` | Path to render the glossary page 57 | 58 | ## Customizing 59 | 60 | The glossary itself can be customized in a few ways. You can change 61 | the description text, the layout, and even the theme. 62 | 63 | ### Description 64 | 65 | You can optionally include a description under the glossary title 66 | that can introduce/describe the glossary that will follow below. 67 | You can achieve this by shadowing the `description.mdx` file: 68 | 69 | `src/gatsby-theme-glossary/description.mdx` 70 | ```md 71 | ## Hey! 72 | 73 | This is a custom description of my glossary. 74 | ``` 75 | 76 | ### Layout 77 | 78 | `gatsby-theme-glossary` doesn't use a layout because it's intended 79 | that you shadow the layout component with your own so that it's properly 80 | embedded in your site. 81 | 82 | ```js 83 | // src/gatsby-theme-glossary/components/layout.js 84 | export { default } from '../../components/layout' 85 | ``` 86 | 87 | ### Theme 88 | 89 | This theme uses Theme UI so you can read about how to customize 90 | the theme in [the official docs](https://theme-ui.com/gatsby-plugin#customizing-the-theme). 91 | 92 | ## License 93 | 94 | MIT 95 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/components/glossary.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { MDXRenderer } from 'gatsby-plugin-mdx' 3 | import { Container, Styled } from 'theme-ui' 4 | import { MDXProvider } from '@mdx-js/react' 5 | 6 | import Layout from './layout' 7 | import Title from './title' 8 | import Nav from './nav' 9 | import heading from './heading' 10 | 11 | import Description from '../description.mdx' 12 | 13 | // Adjust all glossary page headings to be one level 14 | // less since all files are being aggregated into one 15 | // in order to ensure proper semantic structure of the 16 | // document. 17 | const components = { 18 | h1: heading(Styled.h2), 19 | h2: heading(Styled.h3), 20 | h3: heading(Styled.h4), 21 | h4: heading(Styled.h5), 22 | h5: heading(Styled.h6), 23 | } 24 | 25 | export default ({ sections }) => { 26 | const includedLinks = sections 27 | .map(section => { 28 | const headings = section.childMdx.headings || [] 29 | const value = headings && headings[0] && headings[0].value 30 | return value ? value.toLowerCase() : null 31 | }) 32 | .filter(Boolean) 33 | 34 | return ( 35 | 36 | 37 | 38 | 39 | <Description /> 40 | <Nav includedLinks={includedLinks} /> 41 | <MDXProvider components={components}> 42 | {sections.map(section => ( 43 | <MDXRenderer>{section.childMdx.body}</MDXRenderer> 44 | ))} 45 | </MDXProvider> 46 | </Container> 47 | </Styled.root> 48 | </Layout> 49 | ) 50 | } 51 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/components/heading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Styled } from 'theme-ui' 3 | 4 | export default Tag => props => ( 5 | <Tag {...props}> 6 | <Styled.a href={'#' + props.id}>{props.children}</Styled.a> 7 | </Tag> 8 | ) 9 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default ({ children }) => <>{children}</> 4 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/components/nav.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Styled, jsx } from 'theme-ui' 3 | 4 | import links from '../links' 5 | 6 | export default ({ includedLinks }) => ( 7 | <nav 8 | sx={{ 9 | display: 'flex', 10 | flexWrap: 'wrap', 11 | '& > a': { 12 | borderRightStyle: 'solid', 13 | borderRightWidth: 'thin', 14 | borderColor: 'muted' 15 | }, 16 | '& > a:last-child': { 17 | borderColor: 'transparent' 18 | } 19 | }} 20 | > 21 | {links.map(link => { 22 | if (!includedLinks.includes(link)) { 23 | return ( 24 | <Styled.a 25 | key={link} 26 | disabled={true} 27 | sx={{ 28 | py: 1, 29 | px: 2, 30 | fontSize: 2, 31 | fontWeight: 'bold', 32 | textDecoration: 'none', 33 | textTransform: 'uppercase', 34 | color: 'darkGray', 35 | '&:hover': { 36 | color: 'darkGray', 37 | } 38 | }} 39 | > 40 | {link} 41 | </Styled.a> 42 | ) 43 | } 44 | 45 | return ( 46 | <Styled.a 47 | key={link} 48 | href={'#' + link} 49 | sx={{ 50 | py: 1, 51 | px: 2, 52 | fontSize: 2, 53 | fontWeight: 'bold', 54 | textDecoration: 'none', 55 | textTransform: 'uppercase' 56 | }} 57 | > 58 | {link} 59 | </Styled.a> 60 | ) 61 | })} 62 | </nav> 63 | ) 64 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/components/title.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Styled } from 'theme-ui' 3 | 4 | export default () => <Styled.h1>Glossary</Styled.h1> 5 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/description.mdx: -------------------------------------------------------------------------------- 1 | export default ({ children }) => <>{children}</> 2 | 3 | This is an example glossary for 4 | [`gatsby-theme-glossary`](https://github.com/johno/gatsby-theme-glossary). 5 | It's a theme that turns a directory of letter definitions that exist as MDX 6 | files into a single glossary page. 7 | 8 | [Read the full docs →](https://github.com/johno/gatsby-theme-glossary) 9 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/gatsby-plugin-theme-ui/index.js: -------------------------------------------------------------------------------- 1 | const heading = { 2 | fontFamily: 'heading', 3 | fontWeight: 'heading', 4 | lineHeight: 'heading', 5 | a: { 6 | color: 'inherit', 7 | textDecoration: 'none' 8 | } 9 | } 10 | 11 | export default { 12 | initialColorMode: 'light', 13 | colors: { 14 | text: '#000', 15 | background: '#fff', 16 | primary: '#33e', 17 | secondary: '#119', 18 | muted: '#f6f6f6', 19 | highlight: '#ffffcc', 20 | gray: '#777', 21 | purple: '#609', 22 | modes: { 23 | dark: { 24 | text: '#fff', 25 | background: '#060606', 26 | primary: '#3cf', 27 | secondary: '#e0f', 28 | muted: '#191919', 29 | highlight: '#ffffcc', 30 | gray: '#999', 31 | purple: '#c0f', 32 | }, 33 | deep: { 34 | text: 'hsl(210, 50%, 96%)', 35 | background: 'hsl(230, 25%, 18%)', 36 | primary: 'hsl(260, 100%, 80%)', 37 | secondary: 'hsl(290, 100%, 80%)', 38 | purple: 'hsl(290, 100%, 80%)', 39 | muted: 'hsla(230, 20%, 0%, 20%)', 40 | gray: 'hsl(210, 50%, 60%)', 41 | }, 42 | swiss: { 43 | text: 'hsl(10, 20%, 20%)', 44 | background: 'hsl(10, 10%, 98%)', 45 | primary: 'hsl(10, 80%, 50%)', 46 | secondary: 'hsl(10, 60%, 50%)', 47 | purple: 'hsl(250, 60%, 30%)', 48 | muted: 'hsl(10, 20%, 94%)', 49 | gray: 'hsl(10, 20%, 50%)', 50 | }, 51 | }, 52 | }, 53 | fonts: { 54 | body: 'system-ui, sans-serif', 55 | heading: 'inherit', 56 | monospace: 'Menlo, monospace', 57 | }, 58 | fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], 59 | fontWeights: { 60 | body: '400', 61 | heading: '700', 62 | }, 63 | lineHeights: { 64 | body: 1.5, 65 | heading: 1.25, 66 | }, 67 | textStyles: { 68 | heading, 69 | display: { 70 | variant: 'textStyles.heading', 71 | fontSize: [5, 6, 7], 72 | mt: 3, 73 | }, 74 | }, 75 | styles: { 76 | Container: { 77 | p: 3, 78 | maxWidth: 1024, 79 | }, 80 | root: { 81 | fontFamily: 'body', 82 | lineHeight: 'body', 83 | fontWeight: 'body', 84 | }, 85 | h1: { 86 | variant: 'textStyles.display', 87 | }, 88 | h2: { 89 | variant: 'textStyles.heading', 90 | fontSize: 5, 91 | }, 92 | h3: { 93 | variant: 'textStyles.heading', 94 | fontSize: 4, 95 | }, 96 | h4: { 97 | variant: 'textStyles.heading', 98 | fontSize: 3, 99 | }, 100 | h5: { 101 | variant: 'textStyles.heading', 102 | fontSize: 2, 103 | }, 104 | h6: { 105 | variant: 'textStyles.heading', 106 | fontSize: 1, 107 | }, 108 | a: { 109 | color: 'primary', 110 | '&:hover': { 111 | color: 'secondary', 112 | }, 113 | }, 114 | pre: { 115 | variant: 'prism', 116 | fontFamily: 'monospace', 117 | fontSize: 1, 118 | p: 3, 119 | color: 'text', 120 | bg: 'muted', 121 | overflow: 'auto', 122 | code: { 123 | color: 'inherit', 124 | }, 125 | }, 126 | code: { 127 | fontFamily: 'monospace', 128 | color: 'secondary', 129 | fontSize: 1, 130 | }, 131 | inlineCode: { 132 | fontFamily: 'monospace', 133 | color: 'secondary', 134 | bg: 'muted', 135 | }, 136 | table: { 137 | width: '100%', 138 | my: 4, 139 | borderCollapse: 'separate', 140 | borderSpacing: 0, 141 | [['th', 'td']]: { 142 | textAlign: 'left', 143 | py: '4px', 144 | pr: '4px', 145 | pl: 0, 146 | borderColor: 'muted', 147 | borderBottomStyle: 'solid', 148 | }, 149 | }, 150 | th: { 151 | verticalAlign: 'bottom', 152 | borderBottomWidth: '2px', 153 | }, 154 | td: { 155 | verticalAlign: 'top', 156 | borderBottomWidth: '1px', 157 | }, 158 | hr: { 159 | border: 0, 160 | borderBottom: '1px solid', 161 | borderColor: 'muted', 162 | } 163 | }, 164 | prism: { 165 | [[ 166 | '.comment', 167 | '.prolog', 168 | '.doctype', 169 | '.cdata', 170 | '.punctuation', 171 | '.operator', 172 | '.entity', 173 | '.url', 174 | ]]: { 175 | color: 'gray', 176 | }, 177 | '.comment': { 178 | fontStyle: 'italic', 179 | }, 180 | [[ 181 | '.property', 182 | '.tag', 183 | '.boolean', 184 | '.number', 185 | '.constant', 186 | '.symbol', 187 | '.deleted', 188 | '.function', 189 | '.class-name', 190 | '.regex', 191 | '.important', 192 | '.variable', 193 | ]]: { 194 | color: 'purple', 195 | }, 196 | [['.atrule', '.attr-value', '.keyword']]: { 197 | color: 'primary', 198 | }, 199 | [[ 200 | '.selector', 201 | '.attr-name', 202 | '.string', 203 | '.char', 204 | '.builtin', 205 | '.inserted', 206 | ]]: { 207 | color: 'secondary', 208 | }, 209 | }, 210 | } 211 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/links.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 3 | 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' 4 | ] 5 | -------------------------------------------------------------------------------- /packages/gatsby-theme-glossary/src/templates/glossary.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | 4 | import Glossary from '../components/glossary' 5 | 6 | export default ({ data }) => { 7 | const sections = data.sections.nodes.sort((a, b) => { 8 | if (a.name < b.name) return -1 9 | if (a.name > b.name) return 1 10 | 11 | return 0 12 | }) 13 | 14 | return <Glossary sections={sections} /> 15 | } 16 | 17 | export const pageQuery = graphql` 18 | { 19 | sections: allFile(filter: {sourceInstanceName: {eq: "glossary"}}) { 20 | nodes { 21 | name 22 | childMdx { 23 | body 24 | headings(depth: h1) { 25 | value 26 | } 27 | } 28 | } 29 | } 30 | } 31 | ` 32 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | packages/gatsby-theme-glossary/readme.md -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "automerge": true, 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | --------------------------------------------------------------------------------