diff --git a/.githooks/post-merge/npm-update.sh b/.githooks/post-merge/npm-update.sh index 035401427..f99d0763f 100755 --- a/.githooks/post-merge/npm-update.sh +++ b/.githooks/post-merge/npm-update.sh @@ -26,5 +26,5 @@ CHANGED="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)" # Perform install and prune of NPM dependencies if package.json changed if $(echo "$CHANGED" | grep --quiet package.json); then echo -e "\x1B[33m!\x1B[0m Updating dependencies" - npm install && npm prune + yarn install fi diff --git a/.githooks/pre-commit/check.sh b/.githooks/pre-commit/check.sh index 4364e88fb..17c632132 100755 --- a/.githooks/pre-commit/check.sh +++ b/.githooks/pre-commit/check.sh @@ -57,7 +57,7 @@ if [ "$FILES" ]; then fi # If flow terminated with errors, abort commit - npm run flow --silent > /dev/null + yarn run flow --silent if [ $? -gt 0 ]; then echo -e "\x1B[31m✗\x1B[0m Flow - \x1B[31m$MESSAGE\x1B[0m" exit 1 diff --git a/docs/customization.md b/docs/customization.md index e27a8ff7f..365ee2aeb 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -174,7 +174,8 @@ theme and recompile it. This is fairly easy. ### Environment setup In order to start development on the Material theme, a [Node.js][8] version of -at least 4 is required. Clone the repository from GitHub: +at least 5 is required, as well as the package manager [yarn][9] which is a +better version of `npm`. First, clone the repository: ``` sh git clone https://github.com/squidfunk/mkdocs-material @@ -185,23 +186,24 @@ Next, all dependencies need to be installed, which is done with: ``` sh cd mkdocs-material pip install -r requirements.txt -npm install +yarn install ``` [8]: https://nodejs.org + [9]: https://yarnpkg.com/ ### Development mode -The Material theme uses a sophisticated asset pipeline using [Gulp][9] and +The Material theme uses a sophisticated asset pipeline using [Gulp][10] and Webpack which can be started with the following command: ``` sh -npm start +yarn start ``` This will also start the MkDocs development server which will monitor changes on assets, templates and documentation. Point your browser to -[localhost:8000][10] and you should see this documentation in front of you. +[localhost:8000][11] and you should see this documentation in front of you. For example, changing the color palette is as simple as changing the `$md-color-primary` and `$md-color-accent` variables in @@ -218,15 +220,15 @@ $md-color-accent: $clr-teal-a700; directory are automatically generated from the `src` directory and will be overriden when the theme is built. - [9]: http://gulpjs.com - [10]: http://localhost:8000 + [10]: http://gulpjs.com + [11]: http://localhost:8000 ### Build process When you finished making your changes, you can build the theme by invoking: ``` sh -npm run build +yarn run build ``` This triggers the production-level compilation and minification of all diff --git a/docs/extensions/codehilite.md b/docs/extensions/codehilite.md index c5367aa5f..f15995164 100644 --- a/docs/extensions/codehilite.md +++ b/docs/extensions/codehilite.md @@ -4,13 +4,21 @@ and is included in the standard Markdown library. The highlighting process is executed during compilation of the Markdown file. +!!! fail "Syntax highlighting not working?" + + Please ensure that [Pygments][2] is installed. See the next section for + further directions on how to set up Pygments or use the official + [Docker image][3] with all dependencies pre-installed. + [1]: https://pythonhosted.org/Markdown/extensions/code_hilite.html + [2]: http://pygments.org + [3]: https://hub.docker.com/r/squidfunk/mkdocs-material/ ## Installation CodeHilite parses code blocks and wraps them in `
` tags. If [Pygments][2] is installed, which is a generic syntax highlighter with support for over -[300 languages][3], CodeHilite will also highlight the code block. Pygments can +[300 languages][4], CodeHilite will also highlight the code block. Pygments can be installed with the following command: ``` sh @@ -32,8 +40,7 @@ markdown_extensions: that and defines styles for the default `.codehilite` class, so the part `css_class=code` needs to be removed. - [2]: http://pygments.org - [3]: http://pygments.org/languages + [4]: http://pygments.org/languages ## Usage diff --git a/docs/getting-started.md b/docs/getting-started.md index 314d32c49..cfb636991 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -8,6 +8,8 @@ pre-installed and ready-to-use with the latest version published on PyPI, packaged in a very small image (28MB compressed). + [1]: https://hub.docker.com/r/squidfunk/mkdocs-material/ + ### Installing MkDocs Before installing [MkDocs][2], you need to make sure you have Python and `pip` @@ -40,7 +42,6 @@ pip install pygments pip install pymdown-extensions ``` - [1]: https://hub.docker.com/r/squidfunk/mkdocs-material/ [2]: http://www.mkdocs.org [3]: http://pygments.org [4]: http://facelessuser.github.io/pymdown-extensions/ diff --git a/mkdocs.yml b/mkdocs.yml index 958ed0e4f..7e92db96d 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -42,6 +42,8 @@ extra: primary: indigo accent: indigo social: + - type: globe + link: http://struct.cc - type: github-alt link: https://github.com/squidfunk - type: twitter diff --git a/scripts/build b/scripts/build index 45b3f3210..a4f700b44 100755 --- a/scripts/build +++ b/scripts/build @@ -20,12 +20,12 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run command -$(npm bin)/gulp build --clean --optimize --revision "$@" +$(yarn bin)/gulp build --clean --optimize --revision "$@" diff --git a/scripts/clean b/scripts/clean index 90a6ab619..a2c3018f6 100755 --- a/scripts/clean +++ b/scripts/clean @@ -20,12 +20,12 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run command -$(npm bin)/gulp clean "$@" +$(yarn bin)/gulp clean "$@" diff --git a/scripts/flow b/scripts/flow index 054800bed..c5ab449ca 100755 --- a/scripts/flow +++ b/scripts/flow @@ -20,19 +20,19 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Annotate source files -$(npm bin)/gulp assets:javascripts:annotate "$@" +$(yarn bin)/gulp assets:javascripts:annotate "$@" FLOW_JSDOC=$? # Run flow typecheck -$(npm bin)/flow check tmp +$(yarn bin)/flow check tmp FLOW=$? # If one command failed, exit with error diff --git a/scripts/lint b/scripts/lint index ed059112d..c11814c86 100755 --- a/scripts/lint +++ b/scripts/lint @@ -20,19 +20,19 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run ESLint -$(npm bin)/eslint --max-warnings 0 . +$(yarn bin)/eslint --max-warnings 0 . ESLINT=$? # Run Stylelint -$(npm bin)/stylelint `find src/assets -name *.scss` +$(yarn bin)/stylelint `find src/assets -name *.scss` STYLELINT=$? # If one command failed, exit with error diff --git a/scripts/start b/scripts/start index bdf8dd583..06cd9b3a1 100755 --- a/scripts/start +++ b/scripts/start @@ -20,13 +20,13 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run command -$(npm bin)/gulp clean && \ -$(npm bin)/gulp watch --no-lint "$@" +$(yarn bin)/gulp clean && \ +$(yarn bin)/gulp watch --no-lint "$@" diff --git a/scripts/test/visual/run b/scripts/test/visual/run index 79cfc7ca9..41abfcbc8 100755 --- a/scripts/test/visual/run +++ b/scripts/test/visual/run @@ -20,12 +20,12 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run command -$(npm bin)/gulp tests:visual:run --clean --no-optimize "$@" +$(yarn bin)/gulp tests:visual:run --clean --no-optimize "$@" diff --git a/scripts/test/visual/session b/scripts/test/visual/session index 352387d0f..e8ba5b773 100755 --- a/scripts/test/visual/session +++ b/scripts/test/visual/session @@ -20,12 +20,12 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run command -$(npm bin)/gulp tests:visual:session "$@" +$(yarn bin)/gulp tests:visual:session "$@" diff --git a/scripts/test/visual/update b/scripts/test/visual/update index 61aa20cb4..a431afc3f 100755 --- a/scripts/test/visual/update +++ b/scripts/test/visual/update @@ -20,12 +20,12 @@ # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS # IN THE SOFTWARE. -# Check if "npm install" was executed -if [[ ! -d $(npm bin) ]]; then +# Check if "yarn install" was executed +if [[ ! -d $(yarn bin) ]]; then echo "\"node_modules\" not found:" - echo "npm install" + echo "yarn install" exit 1 fi # Run command -$(npm bin)/gulp tests:visual:update "$@" +$(yarn bin)/gulp tests:visual:update "$@"