├── .bluprintrc ├── .devcontainer └── devcontainer.json ├── .editorconfig ├── .github ├── images │ ├── draft-release.png │ ├── publish-release.png │ ├── releases.png │ ├── use-this-template.png │ └── version-release.png └── workflows │ ├── deploy-prod.yml │ └── deploy-stage.yml ├── .gitignore ├── .prettierignore ├── LICENSE ├── README.md ├── _data ├── copy.aml ├── example.json └── meta.aml ├── _layouts ├── base.html └── year-detail.html ├── _workspace └── README.md ├── assets └── images │ └── baker.jpg ├── baker.config.js ├── index.html ├── package-lock.json ├── package.json ├── scripts ├── app.js └── global.d.ts ├── styles ├── app.scss ├── tools │ └── _normalize.scss └── variables │ ├── _colors.scss │ └── _fonts.scss └── tsconfig.json /.bluprintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bluprint": "^0.6.6", 3 | "name": "baker-example-page", 4 | "category": "baker", 5 | "actions": [ 6 | { 7 | "action": "execute", 8 | "cmds": [ 9 | ["npm", ["install"]] 10 | ] 11 | }, 12 | { 13 | "action": "log", 14 | "msg": "\n\n🏁 Finished creating your project.\n\nRun {green npm start} to open a test page.\n" 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Node.js", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16", 4 | "forwardPorts": [3000], 5 | "postCreateCommand": "npm install" 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.py] 12 | indent_size = 4 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/images/draft-release.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datadesk/baker-example-page-template/c0e9fcd77905385d179f5a9cf193d99b6c1f9d36/.github/images/draft-release.png -------------------------------------------------------------------------------- /.github/images/publish-release.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datadesk/baker-example-page-template/c0e9fcd77905385d179f5a9cf193d99b6c1f9d36/.github/images/publish-release.png -------------------------------------------------------------------------------- /.github/images/releases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datadesk/baker-example-page-template/c0e9fcd77905385d179f5a9cf193d99b6c1f9d36/.github/images/releases.png -------------------------------------------------------------------------------- /.github/images/use-this-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datadesk/baker-example-page-template/c0e9fcd77905385d179f5a9cf193d99b6c1f9d36/.github/images/use-this-template.png -------------------------------------------------------------------------------- /.github/images/version-release.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datadesk/baker-example-page-template/c0e9fcd77905385d179f5a9cf193d99b6c1f9d36/.github/images/version-release.png -------------------------------------------------------------------------------- /.github/workflows/deploy-prod.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to production 2 | 3 | concurrency: 4 | group: deploy-prod-${{ github.ref }} 5 | cancel-in-progress: true 6 | 7 | on: 8 | workflow_dispatch: 9 | release: 10 | types: [published,] 11 | 12 | jobs: 13 | deploy: 14 | name: Deploy 15 | runs-on: ubuntu-latest 16 | steps: 17 | - name: Checkout the repo 18 | uses: actions/checkout@v3 19 | 20 | - name: Use Node.js 14.x 21 | uses: actions/setup-node@v3 22 | with: 23 | node-version: 16 24 | cache: 'npm' 25 | 26 | - id: install-project-modules 27 | name: Install project dependencies 28 | run: npm ci --production 29 | 30 | - id: install-action-modules 31 | name: Install action dependencies 32 | run: npm install archieml 33 | 34 | - id: get-slug 35 | name: Get slug 36 | uses: actions/github-script@v6 37 | with: 38 | result-encoding: string 39 | script: | 40 | // import modules 41 | const fs = require('fs'); 42 | const archieml = require('archieml'); 43 | 44 | // Read in the slug file 45 | const meta = archieml.load(fs.readFileSync('_data/meta.aml', 'utf8')); 46 | 47 | // Pull the slug 48 | const slug = meta.slug.trim(); 49 | console.log(`slug -> ${slug}`); 50 | 51 | // If we get this far, we're good to go. 52 | return meta.slug; 53 | 54 | - id: slack 55 | name: Create Slack notification 56 | uses: datadesk/notify-slack-on-build@v3 57 | with: 58 | slack-token: ${{ secrets.BAKER_BOT_SLACK_TOKEN }} 59 | channel-name: ${{ secrets.BAKER_BOT_SLACK_CHANNEL_NAME }} 60 | status: in_progress 61 | url: http://baker-example-page-template-production.s3-website-us-east-1.amazonaws.com/${{ steps.get-slug.outputs.result }}/ 62 | 63 | - id: npm-build 64 | name: Build project distribution 65 | run: npm run build 66 | env: 67 | BAKER_PATH_PREFIX: ${{ steps.get-slug.outputs.result }} 68 | 69 | - id: configure-aws 70 | name: Configure AWS Credentials 71 | uses: aws-actions/configure-aws-credentials@v1 72 | with: 73 | aws-access-key-id: ${{ secrets.BAKER_AWS_ACCESS_KEY_ID }} 74 | aws-secret-access-key: ${{ secrets.BAKER_AWS_SECRET_ACCESS_KEY }} 75 | aws-region: ${{ secrets.BAKER_AWS_S3_PRODUCTION_REGION }} 76 | 77 | - id: npm-deploy 78 | name: Upload the prepared files 79 | uses: datadesk/delivery-deploy-action@v1 80 | with: 81 | bucket: ${{ secrets.BAKER_AWS_S3_PRODUCTION_BUCKET }} 82 | base-path: ${{ steps.get-slug.outputs.result }} 83 | dir: _dist 84 | should-cache: true 85 | use-accelerate-endpoint: false 86 | public: true 87 | 88 | - name: Update Slack notification (success) 89 | if: success() 90 | uses: datadesk/notify-slack-on-build@v3 91 | with: 92 | slack-token: ${{ secrets.BAKER_BOT_SLACK_TOKEN }} 93 | channel-id: ${{ steps.slack.outputs.channel-id }} 94 | status: success 95 | url: http://baker-example-page-template-production.s3-website-us-east-1.amazonaws.com/${{ steps.get-slug.outputs.result }}/ 96 | message-id: ${{ steps.slack.outputs.message-id }} 97 | 98 | - name: Update Slack notification (failure) 99 | if: failure() 100 | uses: datadesk/notify-slack-on-build@v3 101 | with: 102 | slack-token: ${{ secrets.BAKER_BOT_SLACK_TOKEN }} 103 | channel-id: ${{ steps.slack.outputs.channel-id }} 104 | status: failure 105 | url: http://baker-example-page-template-production.s3-website-us-east-1.amazonaws.com/${{ steps.get-slug.outputs.result }}/ 106 | message-id: ${{ steps.slack.outputs.message-id }} 107 | -------------------------------------------------------------------------------- /.github/workflows/deploy-stage.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to staging 2 | 3 | concurrency: 4 | group: deploy-stage-${{ github.ref }} 5 | cancel-in-progress: true 6 | 7 | on: 8 | workflow_dispatch: 9 | push: 10 | branches: 11 | - "**" # always deploy for branches 12 | tags-ignore: 13 | - "**" # never deploy for tags 14 | 15 | jobs: 16 | deploy: 17 | name: Deploy 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout the repo 21 | uses: actions/checkout@v3 22 | 23 | - name: Use Node.js 14.x 24 | uses: actions/setup-node@v3 25 | with: 26 | node-version: 16 27 | cache: 'npm' 28 | 29 | - name: npm install 30 | run: npm ci --production 31 | 32 | - id: delivery-path-prefix 33 | name: Prepare the Delivery path prefix 34 | uses: actions/github-script@v6 35 | with: 36 | result-encoding: string 37 | script: | 38 | // import path module 39 | const path = require('path'); 40 | 41 | // get reference to this commit 42 | const ref = context.ref; 43 | 44 | // get repo that triggered this push 45 | const { repo } = context.repo; 46 | 47 | // pull branch name off the ref 48 | const parts = ref.split('/'); 49 | const branch = parts[parts.length - 1]; 50 | 51 | // build path used for this deploy 52 | const basePath = path.join(repo, branch); 53 | 54 | // return the prepared path as the output 55 | return basePath; 56 | 57 | - name: Build the project 58 | run: npm run build 59 | env: 60 | BAKER_PATH_PREFIX: ${{ steps.delivery-path-prefix.outputs.result }} 61 | 62 | # - name: Configure AWS Credentials 63 | # uses: aws-actions/configure-aws-credentials@v1 64 | # with: 65 | # aws-access-key-id: ${{ secrets.BAKER_AWS_ACCESS_KEY_ID }} 66 | # aws-secret-access-key: ${{ secrets.BAKER_AWS_SECRET_ACCESS_KEY }} 67 | # aws-region: ${{ secrets.BAKER_AWS_S3_STAGING_REGION }} 68 | 69 | # - name: Upload the prepared files 70 | # uses: datadesk/delivery-deploy-action@v1 71 | # with: 72 | # bucket: ${{ secrets.BAKER_AWS_S3_STAGING_BUCKET }} 73 | # base-path: ${{ steps.delivery-path-prefix.outputs.result }} 74 | # dir: _dist 75 | # should-cache: true 76 | # use-accelerate-endpoint: false 77 | # public: true 78 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | .env.test 68 | 69 | # parcel-bundler cache (https://parceljs.org/) 70 | .cache 71 | 72 | # next.js build output 73 | .next 74 | 75 | # nuxt.js build output 76 | .nuxt 77 | 78 | # vuepress build output 79 | .vuepress/dist 80 | 81 | # Serverless directories 82 | .serverless/ 83 | 84 | # FuseBox cache 85 | .fusebox/ 86 | 87 | # DynamoDB Local files 88 | .dynamodb/ 89 | 90 | # build directory 91 | _dist 92 | 93 | # Jupyter notebooks checkpoints 94 | .ipynb_checkpoints 95 | */.ipynb_checkpoints/* 96 | 97 | # .DS_Stores 98 | *.DS_Store 99 | .DS_Store 100 | 101 | # Text editors 102 | .vscode 103 | 104 | # VIM 105 | # Swap 106 | [._]*.s[a-v][a-z] 107 | !*.svg # comment out if you don't need vector files 108 | [._]*.sw[a-p] 109 | [._]s[a-rt-v][a-z] 110 | [._]ss[a-gi-z] 111 | [._]sw[a-p] 112 | 113 | # Session 114 | Session.vim 115 | Sessionx.vim 116 | 117 | # Temporary 118 | .netrwhist 119 | *~ 120 | # Auto-generated tag files 121 | tags 122 | # Persistent undo 123 | [._]*.un~ 124 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | *.html 4 | *.njk 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Los Angeles Times Data and Graphics Department 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # baker-example-page-template 2 | 3 | A demonstration of how to build and publish pages with the [baker](https://github.com/datadesk/baker) build tool. 4 | 5 | The Los Angeles Times uses baker to create the static pages published at latimes.com/projects. The Times system relies on a private version of a repository much like this one. This simplified example publishes [staging](http://baker-example-page-template-staging.s3-website-us-east-1.amazonaws.com/baker-example-page-template/main/) and [production](http://baker-example-page-template-production.s3-website-us-east-1.amazonaws.com/baker-example-page-template/) versions to public buckets on Amazon S3. 6 | 7 | ## Features 8 | 9 | - 🔃 Live-updating local test server 10 | - 🖨️ HTML templating with [Nunjucks](https://mozilla.github.io/nunjucks/) 11 | - 🖌️ Extended CSS with [Sass](https://sass-lang.com/) 12 | - 🗞️ JavaScript bundling with [Rollup](https://www.rollupjs.org/guide/en/) and [Babel](https://babeljs.io/) 13 | - 🔢 Data imports with [quaff](https://github.com/rdmurphy/quaff) 14 | - 🥞 Dynamic page generation based on structured inputs 15 | - 🏭 Automatic deployment of each branch to a staging environment on each `push` event via [GitHub Action](https://github.com/datadesk/baker-example-page-template/actions/workflows/deploy-stage.yml) 16 | - 🌎 Push button deployment to the production environment on each `release` event via [GitHub Action](https://github.com/datadesk/baker-example-page-template/actions/workflows/deploy-prod.yml) 17 | - 🔔 Slack messages that relay each deployment's status via [datadesk/notify-slack-on-build](https://github.com/datadesk/notify-slack-on-build) Github Action 18 | 19 | ## Requirements 20 | 21 | * [Node.js](https://nodejs.org/en/) version 12, 14 or 16, though at minimum 12.20, 14.14, or 16.0. 22 | * [Node Package Manager](https://www.w3schools.com/whatis/whatis_npm.asp) 23 | * [git](https://git-scm.com/) 24 | 25 | # Documentation 26 | 27 | With a little configuration, you can use this template to easily publish a page. With a little customization, you can make it look any way you'd like. This guide will introduce you to the basics. 28 | 29 | ## Table of Contents 30 | 31 | - [Creating a new page](#creating-a-new-page) 32 | - [Exploring the repository](#exploring-the-repository) 33 | - [Accessing assets](#accessing-assets) 34 | - [Accessing data](#accessing-data) 35 | - [Dynamic pages](#dynamic-pages) 36 | - [Deployment](#deployment) 37 | - [Global variables](#global-variables) 38 | - [baker.config.js](#bakerconfigjs-1) 39 | 40 | ## Creating a new page 41 | 42 | The first step is to click GitHub’s “use this template” button to a make a copy of the repository for yourself. 43 | 44 | ![](./.github/images/use-this-template.png) 45 | 46 | You’ll be asked to provide a slug for your project. Once that’s done, a new repository will be available at `https://github.com/your-username/your-slug`. 47 | 48 | Next you’ll need to clone it down to your computer to work with the code. 49 | 50 | Open up your terminal and cd to your code folder. Clone the project into your folder. This will copy the project onto your computer. 51 | 52 | ```sh 53 | git clone https://github.com/your-username/your-slug 54 | ``` 55 | 56 | If that command doesn’t work for you, it could be because your computer was set up differently and you need to clone to the repository using SSH. Try running this in your terminal: 57 | 58 | ```sh 59 | git clone git@github.com:your-username/your-slug.git 60 | ``` 61 | 62 | Once the repository has finished downloading, cd into your-slug and install the Node.js dependencies. 63 | 64 | ```sh 65 | npm install 66 | ``` 67 | 68 | Once the dependencies have been installed, you’re ready to preview the project. Run the following to start the test server. 69 | 70 | ```sh 71 | npm start 72 | ``` 73 | 74 | Now go to `localhost:3000` in your browser. You should see a boilerplate page ready for your customizations. 75 | 76 | ### Starting with bluprint 77 | 78 | An alternative route is to create a new page with [bluprint](https://github.com/reuters-graphics/bluprint), the command-line scaffolding tool developed by the Reuters graphics department. 79 | 80 | ```bash 81 | bluprint add https://github.com/datadesk/baker-example-page-template 82 | mkdir my-new-page 83 | cd my-new-page 84 | bluprint start baker-example-page 85 | ``` 86 | 87 | ## Exploring the repository 88 | 89 | Here are the standard files and folders that you’ll find when you clone a new project from our page template. You’ll spend more time working with some files than others, but it’s good to have a general sense of what they all do. 90 | 91 | ### _data 92 | 93 | The data folder contains relevant data for the project. We use this folder to store required information about every project — like what URL it should live at. You can also store a variety of other data types here, including `.aml`, `.csv`, and `.json`. 94 | 95 | #### meta.aml 96 | 97 | The `meta.aml` file contains important information about the page such as the headline, byline, slug, publication date and other fields. Filling it out ensures that your page displays correctly and can be indexed by search engines. A full list of all the attributes can be found in our reference materials. You can expand this to include as many, or as little, options as you'd like. 98 | 99 | ### _layouts 100 | 101 | This folder that stores our site’s base template and reusable code snippets. When you’re starting out, you’re unlikely to change anything here. In more advanced use cases, it’s where you can store code that is reused across multiple pages. 102 | 103 | #### `base.html` 104 | 105 | The base.html file contains all the fundamental HTML found on every page we create. The example here is rudimentary by design. You'd likely want include a lot more in a real-world implementation. 106 | 107 | ### _workspace 108 | 109 | The workspace is a place for you to put anything relevant to the project that doesn’t need to be published on the web. AI files, bits of code, writing, etc. It’s up to you. 110 | 111 | ### assets 112 | 113 | This is used to store media and other assets such as images, videos, audio, fonts, etc. They can be pulled into the page via the `static` template tags. 114 | 115 | ### scripts 116 | 117 | JavaScript files are stored in this folder. The main file for JavaScript is called `app.js`, which you can write your code directly. Packages installed via `npm` can be imported and run like any other Node.js script. You can create other files to write your JavaScript code in this folder, but you must make sure that the file is booted from `app.js`. 118 | 119 | ### styles 120 | 121 | Our stylesheets are written in SASS, a powerful stylesheet language that gives developers more control over CSS. If you’re not comfortable with SASS, you can write plain CSS into the stylesheets. 122 | 123 | The styles folder consists of a stylesheet (`app.scss`) where you can add all of your styles custom to your project, though sometimes you might want to make additional stylesheets and import them into `app.scss`. This example project only include the bare minimum necessary simulate a simple site. You'd likely want to start off with a lot more in a real world implementation. 124 | 125 | ### baker.config.js 126 | 127 | The `baker.config.js` file is where we put options that Baker uses to serve and build the project. It has been fully documented elsewhere in this file. With the exception of the `domain` setting, only advanced users will need to change this file. 128 | 129 | ### index.html 130 | 131 | The default template for your page. This is where you will lay out your page. It uses the Nujucks templating system to create HTML. 132 | 133 | ### package.json, package-lock.json 134 | 135 | These files track the Node dependencies used in our projects. When you run `npm install` the libraries you add will be automatically tracked here for you. 136 | 137 | ### .github 138 | 139 | This is a special directory for storing files that GitHub uses to interact with our projects and code. The `.github/workflows` directory contains the GitHub Action that handles our development deployments. You do not need to edit anything in here. 140 | 141 | ## Accessing assets 142 | 143 | Files stores in the assets directory are optimized and hashed as part of the deployment process. To ensure that your references to images and other static files, you should use the `{% static %}` tag. That ensures the file is heavily cached when it’s published and that the link to the image works across all environments. You’ll want to use it for all photos and videos. 144 | 145 | ```jinja 146 |
147 | Baker logo 148 |
149 | ``` 150 | 151 | ## Accessing data 152 | 153 | Structrued data files stored in your `_data` folder are accessible via templatetags or JavaScript. In this demonstration, a file called `example.json` has been included to illustrate what's possible. Other file formats like CSV, YAML and AML are supported. 154 | 155 | ### Via Nunjucks templatetags 156 | 157 | Files in the `_data` folder are available by their name within your templates. So, with `_data/example.json`, you can write something like: 158 | 159 | ```jinja 160 | {% for obj in example %} 161 | {{ obj.year }}: {{ obj.wheat }} 162 | {% endfor %} 163 | ``` 164 | 165 | ### Via JavaScript 166 | 167 | A common need for anyone building a project in Baker is access to raw data within a JavaScript file. Often this data is then passed along to code written using d3 or Svelte to draw graphics or create HTML tables on the page. 168 | 169 | If the data you’re accessing is already available at a URL you trust will stay live, this is easy. But what if it isn’t, and it is data you’ve prepared yourself? 170 | 171 | It’s possible to access records in your _data folder. The only caveat is the job of converting this file into a usable state is your responsibility. A good library for this is `d3-fetch`. 172 | 173 | To build the URL to this file in a way Baker understands, use this format: 174 | 175 | ```javascript 176 | import { json } from 'd3-fetch'; 177 | 178 | // the first parameter should be the path to the file 179 | // the second parameter *must* be “import.meta.url” 180 | const url = new URL(‘../_data/example.json’, import.meta.url); 181 | 182 | // Call it in 183 | const data = await json(url); 184 | ``` 185 | 186 | Another approach is to print the data into your template as a `script` tag. The `jsonScript` filter takes the variable passed to it, runs `JSON.stringify` on it, and outputs the JSON into the HTML within a ` 66 | {% endblock ldjson %} 67 | 68 | {% block styles %} 69 | {% endblock styles %} 70 | 71 | {% block scripts %} 72 | {% endblock scripts %} 73 | 74 | 75 | {% block content %} 76 | {% endblock content %} 77 | 78 | 79 | -------------------------------------------------------------------------------- /_layouts/year-detail.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block styles -%} 4 | 5 | {% endblock styles -%} 6 | 7 | {% block content %} 8 |
9 |
10 |

{{ obj.year }}

11 |
12 |
13 | 14 | 15 | 16 | 18 | 19 | 20 | 22 | 23 | 24 |
Wheat 17 | {{ obj.wheat }}
Wages 21 | {{ obj.wages }}
25 |
26 |
27 | {% endblock content %} 28 | -------------------------------------------------------------------------------- /_workspace/README.md: -------------------------------------------------------------------------------- 1 | # What is this? 2 | 3 | This folder is a safe place for putting scripts and other files you don't want Baker to serve or publish. It's a good spot to put AI files, notebooks and other hodge podge. 4 | -------------------------------------------------------------------------------- /assets/images/baker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/datadesk/baker-example-page-template/c0e9fcd77905385d179f5a9cf193d99b6c1f9d36/assets/images/baker.jpg -------------------------------------------------------------------------------- /baker.config.js: -------------------------------------------------------------------------------- 1 | const entrypoints = [ 2 | // Add more script entrypoints here as needed 3 | 'app', 4 | ]; 5 | 6 | export default { 7 | domain: 'http://baker-example-page-template-production.s3-website-us-east-1.amazonaws.com/', 8 | entrypoints: `scripts/${ 9 | entrypoints.length > 1 ? `{${entrypoints.join(',')}}` : entrypoints[0] 10 | }.js`, 11 | pathPrefix: process.env.BAKER_PATH_PREFIX || process.env.DELIVERY_BASE_PATH || '/', 12 | // An example of how creating dynamic pages, as described in the README 13 | // createPages(createPage, data) { 14 | // const pageList = data.example; 15 | // for (const d of pageList) { 16 | // const template = 'year-detail.html'; 17 | // const url = `${d.year}`; 18 | // const context = { obj: d }; 19 | // createPage(template, url, context); 20 | // } 21 | // }, 22 | }; 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block styles %} 4 | 5 | {% endblock styles %} 6 | 7 | {% block scripts %} 8 | {% script 'app' %} 9 | {% endblock scripts %} 10 | 11 | {% block content %} 12 |
13 |
14 |

{{ meta.headline }}

15 | Baker logo 16 |
17 | {% set comma = joiner() %} 18 |

19 | By {%- for author in meta.byline -%} 20 | {% if not loop.last %}{{ comma() }}{% elif not loop.first %} and{% endif %} 21 | {%- endfor -%} 22 |

23 |
24 |
25 |
26 | {% for p in copy.body %} 27 |

{{ p.value }}

28 | {% endfor %} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {% for obj in example %} 39 | 40 | 41 | 42 | 43 | {% endfor %} 44 | 45 |
Wheat production
YearYield
{{ obj.year }}{{ obj.wheat }}
46 |
47 |
48 | {% endblock content %} 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "page-template", 3 | "private": true, 4 | "scripts": { 5 | "build": "NODE_ENV=production bake build --config", 6 | "git-pre-commit": "lint-staged", 7 | "start": "NODE_ENV=development bake serve --config" 8 | }, 9 | "dependencies": { 10 | "@datagraphics/baker": "^0.44.1", 11 | "@datagraphics/delivery": "^0.6.0", 12 | "intersection-observer": "^0.12.0" 13 | }, 14 | "devDependencies": { 15 | "@datagraphics/prettier-config": "^2.0.0", 16 | "@types/node": "^14.17.20", 17 | "@vercel/git-hooks": "^1.0.0", 18 | "lint-staged": "^11.1.2", 19 | "prettier": "^2.4.1" 20 | }, 21 | "prettier": "@datagraphics/prettier-config", 22 | "lint-staged": { 23 | "*.{js,md,scss}": [ 24 | "prettier --write" 25 | ] 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /scripts/app.js: -------------------------------------------------------------------------------- 1 | // Write your code! 2 | console.log("Hello bakers"); 3 | -------------------------------------------------------------------------------- /scripts/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module 'intersection-observer'; 4 | -------------------------------------------------------------------------------- /styles/app.scss: -------------------------------------------------------------------------------- 1 | // RESET 2 | // Smooths out the rough edges across browsers 3 | @use './tools/normalize'; 4 | 5 | // VARIABLES 6 | // Reusable settings 7 | @use './variables/colors'; 8 | @use './variables/fonts'; 9 | 10 | // YOUR CODE 11 | // Starting writing your stuff below here 12 | .container { 13 | max-width: 630px; 14 | margin: 30px auto; 15 | line-height: 1.4; 16 | @media (max-width: 767px) { 17 | padding: 0 15px; 18 | } 19 | } 20 | 21 | h1 { 22 | font-family: fonts.$font-family-headline; 23 | font-weight: fonts.$font-weight-headline; 24 | font-size: 26px; 25 | } 26 | 27 | p { 28 | font-family: fonts.$font-family-body; 29 | font-weight: fonts.$font-weight-body; 30 | &.byline { 31 | text-transform: uppercase; 32 | font-size: 14px; 33 | } 34 | &.prose { 35 | margin: 18px 0; 36 | font-size: 18px; 37 | } 38 | } 39 | 40 | .table { 41 | font-family: fonts.$font-family-table; 42 | border-collapse: collapse; 43 | width: 100%; 44 | caption { 45 | text-align: left; 46 | text-transform: uppercase; 47 | font-weight: bold; 48 | font-size: 18px; 49 | } 50 | td, th { 51 | border: 1px solid #ddd; 52 | padding: 8px; 53 | } 54 | tr:nth-child(even) { 55 | background-color: colors.$gray; 56 | } 57 | tr:hover { 58 | background-color: #ddd; 59 | } 60 | th { 61 | text-align: left; 62 | background-color: colors.$black; 63 | color: white; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /styles/tools/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ 2 | 3 | /* 4 | Document 5 | ======== 6 | */ 7 | 8 | /** 9 | Use a better box model (opinionated). 10 | */ 11 | 12 | *, 13 | ::before, 14 | ::after { 15 | box-sizing: border-box; 16 | } 17 | 18 | /** 19 | Use a more readable tab size (opinionated). 20 | */ 21 | 22 | html { 23 | -moz-tab-size: 4; 24 | tab-size: 4; 25 | } 26 | 27 | /** 28 | 1. Correct the line height in all browsers. 29 | 2. Prevent adjustments of font size after orientation changes in iOS. 30 | */ 31 | 32 | html { 33 | line-height: 1.15; /* 1 */ 34 | -webkit-text-size-adjust: 100%; /* 2 */ 35 | } 36 | 37 | /* 38 | Sections 39 | ======== 40 | */ 41 | 42 | /** 43 | Remove the margin in all browsers. 44 | */ 45 | 46 | body { 47 | margin: 0; 48 | } 49 | 50 | /** 51 | Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 52 | */ 53 | 54 | body { 55 | font-family: system-ui, -apple-system, 56 | /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, 57 | Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; 58 | } 59 | 60 | /* 61 | Grouping content 62 | ================ 63 | */ 64 | 65 | /** 66 | 1. Add the correct height in Firefox. 67 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 68 | */ 69 | 70 | hr { 71 | height: 0; /* 1 */ 72 | color: inherit; /* 2 */ 73 | } 74 | 75 | /* 76 | Text-level semantics 77 | ==================== 78 | */ 79 | 80 | /** 81 | Add the correct text decoration in Chrome, Edge, and Safari. 82 | */ 83 | 84 | abbr[title] { 85 | text-decoration: underline dotted; 86 | } 87 | 88 | /** 89 | Add the correct font weight in Edge and Safari. 90 | */ 91 | 92 | b, 93 | strong { 94 | font-weight: bolder; 95 | } 96 | 97 | /** 98 | 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 99 | 2. Correct the odd 'em' font sizing in all browsers. 100 | */ 101 | 102 | code, 103 | kbd, 104 | samp, 105 | pre { 106 | font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, 107 | monospace; /* 1 */ 108 | font-size: 1em; /* 2 */ 109 | } 110 | 111 | /** 112 | Add the correct font size in all browsers. 113 | */ 114 | 115 | small { 116 | font-size: 80%; 117 | } 118 | 119 | /** 120 | Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. 121 | */ 122 | 123 | sub, 124 | sup { 125 | font-size: 75%; 126 | line-height: 0; 127 | position: relative; 128 | vertical-align: baseline; 129 | } 130 | 131 | sub { 132 | bottom: -0.25em; 133 | } 134 | 135 | sup { 136 | top: -0.5em; 137 | } 138 | 139 | /* 140 | Tabular data 141 | ============ 142 | */ 143 | 144 | /** 145 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 146 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 147 | */ 148 | 149 | table { 150 | text-indent: 0; /* 1 */ 151 | border-color: inherit; /* 2 */ 152 | } 153 | 154 | /* 155 | Forms 156 | ===== 157 | */ 158 | 159 | /** 160 | 1. Change the font styles in all browsers. 161 | 2. Remove the margin in Firefox and Safari. 162 | */ 163 | 164 | button, 165 | input, 166 | optgroup, 167 | select, 168 | textarea { 169 | font-family: inherit; /* 1 */ 170 | font-size: 100%; /* 1 */ 171 | line-height: 1.15; /* 1 */ 172 | margin: 0; /* 2 */ 173 | } 174 | 175 | /** 176 | Remove the inheritance of text transform in Edge and Firefox. 177 | 1. Remove the inheritance of text transform in Firefox. 178 | */ 179 | 180 | button, 181 | select { 182 | /* 1 */ 183 | text-transform: none; 184 | } 185 | 186 | /** 187 | Correct the inability to style clickable types in iOS and Safari. 188 | */ 189 | 190 | button, 191 | [type='button'], 192 | [type='reset'], 193 | [type='submit'] { 194 | -webkit-appearance: button; 195 | } 196 | 197 | /** 198 | Remove the inner border and padding in Firefox. 199 | */ 200 | 201 | ::-moz-focus-inner { 202 | border-style: none; 203 | padding: 0; 204 | } 205 | 206 | /** 207 | Restore the focus styles unset by the previous rule. 208 | */ 209 | 210 | :-moz-focusring { 211 | outline: 1px dotted ButtonText; 212 | } 213 | 214 | /** 215 | Remove the additional ':invalid' styles in Firefox. 216 | See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 217 | */ 218 | 219 | :-moz-ui-invalid { 220 | box-shadow: none; 221 | } 222 | 223 | /** 224 | Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. 225 | */ 226 | 227 | legend { 228 | padding: 0; 229 | } 230 | 231 | /** 232 | Add the correct vertical alignment in Chrome and Firefox. 233 | */ 234 | 235 | progress { 236 | vertical-align: baseline; 237 | } 238 | 239 | /** 240 | Correct the cursor style of increment and decrement buttons in Safari. 241 | */ 242 | 243 | ::-webkit-inner-spin-button, 244 | ::-webkit-outer-spin-button { 245 | height: auto; 246 | } 247 | 248 | /** 249 | 1. Correct the odd appearance in Chrome and Safari. 250 | 2. Correct the outline style in Safari. 251 | */ 252 | 253 | [type='search'] { 254 | -webkit-appearance: textfield; /* 1 */ 255 | outline-offset: -2px; /* 2 */ 256 | } 257 | 258 | /** 259 | Remove the inner padding in Chrome and Safari on macOS. 260 | */ 261 | 262 | ::-webkit-search-decoration { 263 | -webkit-appearance: none; 264 | } 265 | 266 | /** 267 | 1. Correct the inability to style clickable types in iOS and Safari. 268 | 2. Change font properties to 'inherit' in Safari. 269 | */ 270 | 271 | ::-webkit-file-upload-button { 272 | -webkit-appearance: button; /* 1 */ 273 | font: inherit; /* 2 */ 274 | } 275 | 276 | /* 277 | Interactive 278 | =========== 279 | */ 280 | 281 | /* 282 | Add the correct display in Chrome and Safari. 283 | */ 284 | 285 | summary { 286 | display: list-item; 287 | } 288 | -------------------------------------------------------------------------------- /styles/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | $black: #000000; 2 | $gray: #f2f2f2; 3 | -------------------------------------------------------------------------------- /styles/variables/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font-family-headline: Verdana, sans-serif; 2 | $font-family-body: Georgia, serif; 3 | $font-family-table: Arial, sans-serif; 4 | 5 | $font-weight-headline: 700; 6 | $font-weight-body: 400; 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "allowUmdGlobalAccess": true, 6 | "checkJs": true, 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "importsNotUsedAsValues": "error", 10 | "isolatedModules": true, 11 | "jsx": "preserve", 12 | "jsxFactory": "h", 13 | "lib": ["DOM", "ES2020"], 14 | "module": "ESNext", 15 | "moduleResolution": "node", 16 | "noEmit": true, 17 | "resolveJsonModule": true, 18 | "skipLibCheck": true, 19 | "sourceMap": true, 20 | "strict": true, 21 | "target": "esnext" 22 | }, 23 | "include": ["scripts/**/*"] 24 | } 25 | --------------------------------------------------------------------------------