├── .github └── workflows │ └── main.yml ├── .gitignore ├── .node-version ├── .prettierignore ├── LICENSE.md ├── README.md ├── ava.config.js ├── cli.js ├── docs ├── components │ ├── SearchInput.html.jsx │ ├── SearchScript.html.jsx │ ├── button.html.jsx │ ├── github-link.html.jsx │ ├── logo.html.jsx │ ├── logomark.html.jsx │ ├── logotype.html.jsx │ ├── main.html.jsx │ ├── nav.html.jsx │ ├── pagination.html.jsx │ └── tracking.html.jsx ├── concepts.html.mdx ├── data-files.html.mdx ├── deployment.html.mdx ├── examples.html.mdx ├── images │ ├── favicon.png │ ├── logomark.png │ └── logomark.svg ├── index.html.mdx ├── installation.html.mdx ├── javascripts.html.mdx ├── json.html.mdx ├── layout.html.jsx ├── pages.html.mdx ├── stylesheets │ ├── atom-one-light.css │ ├── index.css │ └── modern-normalize.css ├── styling.html.mdx ├── svgs.html.mdx ├── usage.html.mdx └── xml.html.mdx ├── lib ├── build.js ├── builders │ ├── css.js │ ├── js.js │ ├── json.js │ ├── jsx.js │ ├── mdx.js │ └── svg.js ├── file.js ├── files │ ├── css.js │ ├── html.js │ ├── js.js │ ├── json.js │ ├── jsx.js │ ├── mdx.js │ ├── svg.js │ └── xml.js ├── import-parsers │ ├── css.js │ ├── jsx.js │ └── mdx.js ├── logger.js ├── serve.js ├── text-file.js └── utilities.js ├── media └── logomark.svg ├── netlify.toml ├── package-lock.json ├── package.json └── test ├── build ├── javascripts_test.js ├── json_test.js ├── jsx_test.js ├── mdx_test.js ├── snapshots │ ├── javascripts_test.js.md │ ├── javascripts_test.js.snap │ ├── json_test.js.md │ ├── json_test.js.snap │ ├── jsx_test.js.md │ ├── jsx_test.js.snap │ ├── mdx_test.js.md │ ├── mdx_test.js.snap │ ├── stylesheets_test.js.md │ ├── stylesheets_test.js.snap │ ├── svg_test.js.md │ ├── svg_test.js.snap │ ├── xml_test.js.md │ └── xml_test.js.snap ├── stylesheets_test.js ├── svg_test.js └── xml_test.js ├── build_test.js ├── file_test.js ├── helpers └── filesystem.js ├── import-parsers ├── jsx_test.js └── mdx_test.js ├── logger_test.js ├── serve_test.js └── snapshots ├── build_test.js.md └── build_test.js.snap /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | 3 | on: [push] 4 | 5 | jobs: 6 | test: 7 | name: ${{ matrix.os }} / node@${{ matrix.node }} 8 | runs-on: ${{ matrix.os }} 9 | strategy: 10 | matrix: 11 | node: [10.18.0, 12] 12 | os: [ubuntu-latest, windows-latest] 13 | 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Run actions/setup-node@v1 with node@${{ matrix.node }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node }} 20 | - name: npm install 21 | run: npm install 22 | - name: npm test 23 | run: npm test 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | tmp 3 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 12.2.0 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md 2 | docs/**/*.mdx 3 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Brandon Weiss 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 |

2 |
3 | Charge 4 |
5 |
6 | Charge 7 |
8 |
9 |

10 | 11 | [![](https://badgen.net/github/checks/brandonweiss/charge?icon=github&label=tests)](https://github.com/brandonweiss/charge/actions) 12 | [![](https://badgen.net/npm/v/@static/charge?icon=npm)](https://www.npmjs.com/package/@static/charge) 13 | ![](https://badgen.net/npm/node/@static/charge) 14 | [![](https://badgen.net/david/dep/brandonweiss/charge)](https://david-dm.org/brandonweiss/charge) 15 | ![](https://badgen.net/badge/documentation/lit/purple) 16 | 17 | ### What? 18 | 19 | Charge is an opinionated, zero-config static site generator written in JavaScript. It supports a wide variety of common uses and it does it without needing to be configured or customized. It’s fast, it’s simple, and it works the way you probably expect it to. That’s it. 20 | 21 | ### Why? 22 | 23 | Yeah, I know, another static site generator. Let me be clear, I really did not want to make a static site generator. It’s really the very last thing I wanted to do. 24 | 25 | I went on [StaticGen][static-gen] and looked at every JavaScript-based one. I could not find a single one that I thought was simple, well-documented, had the features I needed, was actively maintained, and was designed and worked the way I wanted. So here I am, making a static site generator. 26 | 27 | ### Highlights 28 | 29 | - Zero configuration 30 | - Templating via [JSX][jsx] and [MDX][mdx] 31 | - React renders server-side, _not_ client-side 32 | - Write futuristic JavaScript with [Babel][babel] 33 | - Write futuristic CSS with [PostCSS][postcss] 34 | - Live-reloading development server 35 | - Rebuilds the minimum files necessary 36 | - Dynamic pages (coming soon) 37 | - Stellar documentation ✨ 38 | 39 | ## Documentation 40 | 41 | You can find the Charge documentation [on the website][docs]. 42 | 43 | ## How is Charge different from GatsbyJS? 44 | 45 | [Gatsby][gatsby] is really cool, but it’s very different than Charge, with two particularly large differences. 46 | 47 | Gatsby is configuration over convention. It can be used to build complex web applications, but because of that it can be very difficult to understand how to use it. You’ll need to know how to use Webpack, which personally gives me nightmares. It’s likely that you’ll need to spend time learning other tools and then configuring and tweaking Gatsby before you can use it for your site. Charge is convention over configuration. In fact, it has no configuration, it “just works”. 48 | 49 | Gatsby renders pages client-side. That means it serves React and some related libraries to the browser along with your components in order to render the pages. Routing also happens client-side. Gatsby _can_ render the initial page load server-side, but there’s no way to _not_ serve hundreds of kilobytes of JavaScript to the browser. Charge uses React to render everything server-side. It generates a truly static site. 50 | 51 | More practically, Gatsby is great if you’re building a large, complex website and want lots of control over how you build it. Charge is probably better if you’re building a small website and don’t want to waste time fiddling with configurations and cobbling different tools together. 52 | 53 | ## Real examples 54 | 55 | If you’d like to see everything in practice, check out these sites using Charge. 56 | 57 | * [charge.js.org](https://github.com/brandonweiss/charge/tree/master/docs), the documentation for Charge. 58 | * [brandonweiss.me](https://github.com/brandonweiss/brandonweiss), a personal site. 59 | 60 | ## Contributing 61 | 62 | Bug reports and pull requests are welcome on GitHub at [https://github.com/brandonweiss/charge][github-charge]. 63 | 64 | ## License 65 | 66 | The package is available as open source under the terms of the [MIT License][MIT-license]. 67 | 68 | [static-gen]: https://www.staticgen.com 69 | [jsx]: https://reactjs.org/docs/introducing-jsx.html 70 | [mdx]: https://github.com/mdx-js/mdx 71 | [babel]: https://babeljs.io 72 | [postcss]: https://postcss.org 73 | [docs]: https://charge.js.org 74 | [gatsby]: https://www.gatsbyjs.org 75 | [github-charge]: https://github.com/brandonweiss/charge 76 | [MIT-License]: http://opensource.org/licenses/MIT 77 | -------------------------------------------------------------------------------- /ava.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | babel: true, 3 | ignoredByWatcher: ["!tmp/**/*"], 4 | require: ["esm"], 5 | } 6 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require = require("esm")(module) 4 | 5 | const meow = require("meow") 6 | const build = require("./lib/build").default 7 | const serve = require("./lib/serve").default 8 | 9 | const cli = meow(` 10 | Usage 11 | ❯ charge serve 12 | ❯ charge build 13 | `) 14 | 15 | let command = cli.input[0] 16 | 17 | switch (command) { 18 | case undefined: 19 | return cli.showHelp() 20 | case "build": 21 | return build({ 22 | source: cli.input[1], 23 | target: cli.input[2], 24 | }) 25 | case "serve": 26 | case "server": 27 | let serveCLI = meow( 28 | ` 29 | Usage 30 | ❯ charge serve 31 | 32 | Options 33 | --port 34 | 35 | Examples 36 | ❯ charge serve --port 2468 37 | `, 38 | { 39 | flags: { 40 | port: { 41 | type: "number", 42 | }, 43 | }, 44 | }, 45 | ) 46 | 47 | if (cli.input[1]) { 48 | return serve({ 49 | source: cli.input[1], 50 | port: cli.flags.port, 51 | }) 52 | } 53 | 54 | serveCLI.showHelp() 55 | } 56 | -------------------------------------------------------------------------------- /docs/components/SearchInput.html.jsx: -------------------------------------------------------------------------------- 1 | import { Search as SearchIcon } from "react-feather" 2 | import styled from "@emotion/styled" 3 | 4 | const Search = styled.div` 5 | align-items: center; 6 | display: flex; 7 | ` 8 | 9 | const Icon = styled(SearchIcon)` 10 | color: #a9a9a9; 11 | margin-right: -1.8em; 12 | pointer-events: none; 13 | position: relative; 14 | z-index: 2; 15 | ` 16 | 17 | const Input = styled.input` 18 | border-radius: 8px; 19 | background-color: inherit; 20 | border: none; 21 | line-height: normal; 22 | padding: 0.7em 0.7em 0.7em 2.5em; 23 | margin-right: 1em; 24 | width: 115px; 25 | transition: width 0.3s ease-in-out; 26 | 27 | &:focus { 28 | background-color: #e0e0e0; 29 | outline: 0; 30 | width: 240px; 31 | } 32 | 33 | &::placeholder { 34 | color: #a9a9a9; 35 | } 36 | ` 37 | 38 | export default () => ( 39 | 40 | 41 | 42 | 43 | ) 44 | -------------------------------------------------------------------------------- /docs/components/SearchScript.html.jsx: -------------------------------------------------------------------------------- 1 | export default () => { 2 | let scriptBody = ` 3 | docsearch({ 4 | appId: 'UO487BWDJD', 5 | apiKey: '01441532dc9cd7fb2baaf8291966be2f', 6 | indexName: 'brandonweiss_charge', 7 | inputSelector: "#algolia-search", 8 | }) 9 | ` 10 | 11 | let script = { 12 | __html: scriptBody, 13 | } 14 | 15 | return ( 16 | 17 |