├── .gitignore ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── index.js ├── package.json ├── src ├── components │ ├── common │ │ ├── HtmlContent.js │ │ ├── Layout.js │ │ └── index.js │ ├── index.js │ └── legal │ │ ├── LegalPageBody.js │ │ ├── LegalPageHero.js │ │ ├── LegalPageNavigation.js │ │ ├── LegalPageSection.js │ │ ├── MobileNavigationButton.js │ │ ├── MobileNavigationIcon.js │ │ ├── NavigationItem.js │ │ └── index.js ├── gatsby-plugin-theme-ui │ └── index.js ├── schemas │ └── legal.json ├── styles │ ├── global.js │ ├── htmlContentStyle.js │ └── theme.js ├── templates │ └── legal.js └── util │ └── helpers.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | ### Node ### 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | 7 | # Runtime data 8 | pids 9 | *.pid 10 | *.seed 11 | *.pid.lock 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # nyc test coverage 20 | .nyc_output 21 | 22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 23 | .grunt 24 | 25 | # node-waf configuration 26 | .lock-wscript 27 | 28 | # Compiled binary addons (http://nodejs.org/api/addons.html) 29 | build/Release 30 | 31 | # Dependency directories 32 | node_modules 33 | jspm_packages 34 | .idea 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional eslint cache 40 | .eslintcache 41 | 42 | # Optional REPL history 43 | .node_repl_history 44 | 45 | # Output of 'npm pack' 46 | *.tgz 47 | 48 | # Yarn Integrity file 49 | .yarn-integrity 50 | 51 | 52 | # Build Files 53 | public/ 54 | .cache/ 55 | 56 | # Gatsby context 57 | .gatsby-context.js 58 | 59 | # Bundle stats 60 | bundle-stats.json 61 | 62 | netlify.toml 63 | .env.development 64 | .env.production 65 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Mockups of gatsby-theme-legals-prismic in action](https://raw.githubusercontent.com/AllanPooley/gatsby-theme-legals-demo/master/src/assets/images/gatsby-theme-legals-prismic-mockup.jpg) 2 | 3 | # Gatsby Theme Legals Prismic 4 | 5 | - [Gatsby Theme](https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/) for adding polished legal pages 💅out-of-the-box. 6 | - Responsive across Mobiles 📱, Tablets 💊 and Desktops 🖥️ 7 | - Customisable to your brand using [Theme UI](https://theme-ui.com/) 🎨 8 | - Builds legal pages sourced from content in [Prismic](https://prismic.io/) 9 | - Demo at [https://gatsby-theme-legals.netlify.com/](https://gatsby-theme-legals.netlify.com/) 10 | 11 | ## Why? 12 | 13 | Legal pages are probably the most unexciting part of your site, and the last place you want to expend your creative energy. 14 | 15 | The purpose of `gatsby-theme-legals` is to do the heavy lifting for you. Super polished, responsive legal pages that you can just plug onto your existing project. 16 | 17 | ## Installation 18 | 19 | ``` 20 | yarn add @littleplusbig/gatsby-theme-legals-prismic 21 | ``` 22 | 23 | ## Configuration 24 | 25 | In your `gatsby-config.js`, under `plugins` add: 26 | 27 | ``` 28 | { 29 | resolve: "gatsby-theme-legals-prismic", 30 | options: { 31 | prismicRepositoryName: PRISMIC_REPO_NAME, 32 | prismicAccessToken: PRISMIC_API_KEY, 33 | siteName: YOUR_SITE_NAME, // (Optional) 34 | homePath: HOME_PATH // (Optional) Defaults to '/' 35 | }, 36 | }, 37 | ``` 38 | 39 | Replacing `PRISMIC_REPO_NAME`, `PRISMIC_API_KEY`, `YOUR_SITE_NAME` and `HOME_PATH` with their respective values. 40 | 41 | ## Prismic Configuration 42 | 43 | 1. Create a new custom type in your Prismic repository. 44 | 2. Make sure that it is repeatable and name it `Legal`. 45 | 3. Using the JSON Editor paste in the following content structure: 46 | 47 | ``` 48 | { 49 | "Main": { 50 | "page_name": { 51 | "type": "StructuredText", 52 | "config": { 53 | "single": "heading1", 54 | "label": "Page Name", 55 | "placeholder": "Privacy Policy" 56 | } 57 | }, 58 | "uid": { 59 | "type": "UID", 60 | "config": { 61 | "label": "Slug", 62 | "placeholder": "privacy-policy" 63 | } 64 | }, 65 | "hero_subtitle": { 66 | "type": "StructuredText", 67 | "config": { 68 | "single": "paragraph", 69 | "label": "Hero Subtitle", 70 | "placeholder": "How we manage your data" 71 | } 72 | }, 73 | "sections": { 74 | "type": "Group", 75 | "config": { 76 | "fields": { 77 | "section_heading": { 78 | "type": "StructuredText", 79 | "config": { 80 | "single": "heading2", 81 | "label": "Section Heading", 82 | "placeholder": "General information" 83 | } 84 | }, 85 | "content": { 86 | "type": "StructuredText", 87 | "config": { 88 | "multi": "paragraph, preformatted, heading3, strong, em, hyperlink, list-item, o-list-item, o-list-item", 89 | "allowTargetBlank": true, 90 | "label": "Content", 91 | "placeholder": "Information on this website is of a general nature. Our company has ..." 92 | } 93 | } 94 | }, 95 | "label": "Sections" 96 | } 97 | } 98 | }, 99 | "SEO": { 100 | "meta_title": { 101 | "type": "StructuredText", 102 | "config": { 103 | "single": "heading1", 104 | "label": "Meta Title", 105 | "placeholder": "Enter meta title" 106 | } 107 | }, 108 | "meta_description": { 109 | "type": "StructuredText", 110 | "config": { 111 | "single": "paragraph", 112 | "label": "Meta Description", 113 | "placeholder": "Enter meta description" 114 | } 115 | }, 116 | "open_graph_image": { 117 | "type": "Image", 118 | "config": { 119 | "constraint": { 120 | "width": 1200, 121 | "height": 630 122 | }, 123 | "thumbnails": [], 124 | "label": "Open Graph Image" 125 | } 126 | } 127 | } 128 | } 129 | ``` 130 | 131 | 4. Create one or more `Legal` Content pages, each with 1 or more sections. Don't forget to populate each page's `SEO` tab! 132 | 133 | ## Laying Down the Law 134 | 135 | If you don't already have a Privacy Policy or Terms and Conditions document, you can generate one at [Iubenda](https://www.iubenda.com/). 136 | 137 | ## Overriding the Theme 138 | 139 | ### Colors and Styles 140 | 141 | This project uses [theme-ui](https://theme-ui.com/), allowing some of the styling to be customised to your project's brand. 142 | 143 | In order to override the styles, in the `src` directory of your project, add a folder titled `gatsby-plugin-theme-ui`, and within that folder a file named `index.js`. 144 | 145 | Inside of this file (`your-gatsby-project/src/gatsby-plugin-theme-ui/index.js`) add the following: 146 | 147 | ``` 148 | import baseTheme from '@littleplusbig/gatsby-theme-legals-prismic/src/gatsby-plugin-theme-ui'; 149 | 150 | export default { 151 | ...baseTheme, 152 | fonts: { 153 | ...baseTheme.fonts, 154 | body: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', 155 | heading: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif', 156 | }, 157 | colors: { 158 | ...baseTheme.colors, 159 | text: '#333333', 160 | background: '#FFFFFF', 161 | primary: '#6F2B9F', 162 | primaryDark: '#5B2589', 163 | primaryLight: '#BB75D1', 164 | white: '#FFFFFF', 165 | offWhite: '#FCFAFF', 166 | black: '#000000', 167 | offBlack: '#333333', 168 | grey: '#F3F3F3', 169 | }, 170 | }; 171 | 172 | ``` 173 | 174 | Above are the default values for the theme, which you can change depending on your project. 175 | 176 | In particular, the colours accenting each legal page are controlled by `primary`, `primaryLight` and `primaryDark`. 177 | 178 | For example, here is how I might change the theme colours from shades of purple, to a snazzy blue: 179 | 180 | ``` 181 | import baseTheme from '@littleplusbig/gatsby-theme-legals-prismic/src/gatsby-plugin-theme-ui'; 182 | 183 | export default { 184 | ...baseTheme, 185 | colors: { 186 | ...baseTheme.colors, 187 | primary: '#7ed6df', 188 | primaryDark: '#22a6b3', 189 | primaryLight: '#c7ecee', 190 | }, 191 | }; 192 | 193 | ``` 194 | 195 | ![An example of a theme color change](https://raw.githubusercontent.com/AllanPooley/gatsby-theme-legals-demo/master/src/assets/images/gatsby-theme-legals-prismic-mockup-color-change.jpg) 196 | 197 | The complete set of customisable theme values can be explored in [gatsby-theme-legals-prismic/src/styles/theme.js](https://github.com/littleplusbig/gatsby-theme-legals-prismic/blob/master/src/styles/theme.js) 198 | 199 | More information about `gatsby-plugin-theme-ui` [here](https://www.npmjs.com/package/gatsby-plugin-theme-ui). 200 | 201 | ### Components 202 | 203 | The components that make up the legal pages can be some what customised too. This can be done through concept new to Gatsby Themes called '[Component Shadowing](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/)'. 204 | 205 | If you wish to override a component, in the `src` directory of your project, create the following directory structure: `@littleplusbig/gatsby-theme-legals-prismic/components`. 206 | 207 | There are several components that a legal page, they can all be viewed here: [gatsby-theme-legals-prismic/src/components](https://github.com/littleplusbig/gatsby-theme-legals-prismic/tree/master/src/components) 208 | 209 | An example of how these components might be customised is adding your project's `
` and `