From 253db19f5e2ee8c87c74d992c69d4f936eaa7db9 Mon Sep 17 00:00:00 2001 From: Karissa McKelvey Date: Fri, 12 Aug 2016 15:55:50 +0200 Subject: add dat-design and sass capability (#16) * add dat-design and sass capability * add watch:css rule * add nodemon * fix typo * update watch css command (it watched and built the css before, but styles still didn't update in the browser. there's probably a more performant way to do this.) * override minidocs default styles with custom dat styles * clean up scss --- .gitignore | 1 + README.md | 2 +- assets/styles.css | 10 -------- assets/styles.scss | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ build.js | 2 +- package.json | 11 +++++--- 6 files changed, 85 insertions(+), 15 deletions(-) delete mode 100644 assets/styles.css create mode 100644 assets/styles.scss diff --git a/.gitignore b/.gitignore index 03dfe09..1a5272c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ dist +*.css .DS_Store repos.txt node_modules diff --git a/README.md b/README.md index 07459c1..afe55ba 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ This documentation uses [minidocs](https://www.npmjs.com/package/minidocs). 1. Clone Repository 2. `npm install` 3. `npm run build:local` to build the docs for local viewing -4. `npm runs start` to view the docs in browser +4. `npm run start` to view the docs in browser ### Updating & Deploying Docs diff --git a/assets/styles.css b/assets/styles.css deleted file mode 100644 index a6888f6..0000000 --- a/assets/styles.css +++ /dev/null @@ -1,10 +0,0 @@ -.minidocs-logo { - max-height: 100px; - width: inherit !important; - margin: 0 auto; - display: block; -} - -.minidocs-content { - padding-bottom: 50px; -} \ No newline at end of file diff --git a/assets/styles.scss b/assets/styles.scss new file mode 100644 index 0000000..58a6113 --- /dev/null +++ b/assets/styles.scss @@ -0,0 +1,74 @@ +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700); + +// ugly selector needed to overwrite default styles +body #choo-root.minidocs { + @import '~dat-design/scss/variables/colors.scss'; + @import '~dat-design/scss/variables/transitions.scss'; + @import '~dat-design/scss/base/links.scss'; + + font-family: 'Source Sans Pro', 'Helvetica Neue', 'Lucida Grande', Arial, sans-serif; + line-height: 1.5; + color: $color-neutral; + + // transitions on interactive elements + a, + button, + input, + select, + textarea { + transition-property: background-color, color; + transition-duration: $transition-duration; + transition-timing-function: $transition-timing-function; + } + + .minidocs-header { + margin: 0; + } + + .minidocs-logo { + max-height: 100px; + width: inherit; + display: block; + } + + .minidocs-content { + padding-bottom: 50px; + max-width: 48em; // sets a max-width to avoid endless lines on wide screens + } + + .minidocs-sidebar { + background-color: $color-neutral--10; + } + + .minidocs-menu { + // overwrite the "#" default style + .h1::before { + display: none; + } + .h1, .h2, .h3 { + font-weight: 400; + } + .h1, .h2 { + margin-bottom: 8px; + } + .h2 { + font-size: 1.4em; + } + .content-link { + transition-property: background-color, color, border-color, padding-left; + color: $color-neutral--80; + padding-left: 0; + &:hover, &:focus { + color: $color-neutral; + border-left-color: transparent; + padding-left: .65rem; + background-color: rgba(0,0,0,.05); + } + &.active { + padding-left: .65rem; + border-left-color: $color-green--hover; + background-color: #FFF; + } + } + } +} diff --git a/build.js b/build.js index 33d1afe..62e06f8 100644 --- a/build.js +++ b/build.js @@ -3,4 +3,4 @@ var ndjson = require('ndjson') process.stdin.pipe(ndjson.parse()).on('data', function (obj) { fs.writeFileSync('docs/' + obj.name + '.md', obj.readme) -}) \ No newline at end of file +}) diff --git a/package.json b/package.json index d889e21..d8e1b01 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,11 @@ "update": "npm run update:list && npm run update:docs", "update:list": "curl -Ssl https://raw.githubusercontent.com/clkao/awesome-dat/master/readme.md | grep '📔' | egrep -o 'github.com/[a-zA-Z0-9_-]+/[a-zA-Z0-9_-]+' | cut -f 2- -d / | uniq > repos.txt", "update:build": "cat repos.txt | ecosystem-docs sync && cat repos.txt | ecosystem-docs read | node build.js", - "build:local": "minidocs docs -c docs/contents.json -i welcome -o dist -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --pushstate", - "build:deploy": "minidocs docs -c docs/contents.json -i welcome -o dist -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --full-html", + "build:local": "npm run build:css && minidocs docs -c docs/contents.json -i welcome -o dist -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --pushstate", + "build:deploy": "npm run build:css && minidocs docs -c docs/contents.json -i welcome -o dist -l ./node_modules/dat-design/downloads/dat-data-logo.png -t 'Dat Data' -s assets/styles.css --full-html", + "build:css": "node-sass --importer node_modules/node-sass-magic-importer assets/styles.scss assets/styles.css", "deploy": "npm run build:deploy && echo docs.dat-data.com > dist/CNAME && gh-pages -d dist", + "watch:css": "nodemon -e scss -x \"npm run build:local\"", "start": "budo --dir dist --pushstate", "paper": "pandoc --variable author=\"Maxwell Ogden, Karissa McKelvey, Mathias Buus\" --variable title=\"Dat - Distributed Dataset Synchronization And Versioning\" --variable date=\"Version 1.0.0, May 2016\" --variable classoption=twocolumn --variable papersize=a4paper -s dat-paper.md -o dat-paper.pdf" }, @@ -32,6 +34,9 @@ "devDependencies": { "budo": "^8.3.0", "ecosystem-docs": "^1.1.1", - "ndjson": "^1.4.3" + "ndjson": "^1.4.3", + "node-sass": "^3.8.0", + "node-sass-magic-importer": "^0.1.4", + "nodemon": "^1.10.0" } } -- cgit v1.2.3