diff --git a/dev/app.js b/dev/app.js index 779d5339..cc61695e 100644 --- a/dev/app.js +++ b/dev/app.js @@ -1,6 +1,6 @@ -import documentationSearch from '../index.js'; +import docSearch from '../index.js'; -documentationSearch({ +docSearch({ apiKey: '14d0acfb8112462711980dd2a5e5c43d', indexName: 'stripe-dev', inputSelector: '#search-input' diff --git a/dev/docsearch.css b/dev/docsearch.css new file mode 120000 index 00000000..ed139d05 --- /dev/null +++ b/dev/docsearch.css @@ -0,0 +1 @@ +../dist/cdn/docsearch.css \ No newline at end of file diff --git a/dev/docsearch.min.css b/dev/docsearch.min.css new file mode 120000 index 00000000..1491e082 --- /dev/null +++ b/dev/docsearch.min.css @@ -0,0 +1 @@ +../dist/cdn/docsearch.min.css \ No newline at end of file diff --git a/dev/index.html b/dev/index.html index 3c0a853a..401241af 100644 --- a/dev/index.html +++ b/dev/index.html @@ -5,6 +5,8 @@ Documentation + + diff --git a/package.json b/package.json index 3c7da5be..447855d0 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,13 @@ "description": "Add an autocomplete dropdown to your documentation", "main": "dist-es5-module/index.js", "scripts": { - "dev": "webpack-dev-server --config webpack.dev.config.babel.js --hot --inline --no-info", + "dev": "./scripts/dev", "shrinkwrap": "npm-shrinkwrap --dev", "prepublish": "NODE_ENV=production npm run build", - "build": "./scripts/build.sh", - "release": "./scripts/release.sh", + "build": "./scripts/build", + "build:css": "./scripts/build-css", + "build:js": "./scripts/build-js", + "release": "./scripts/release", "lint": "eslint .", "test": "BABEL_ENV=test mocha --reporter dot", "test:watch": "BABEL_ENV=test mocha --reporter min --watch", @@ -18,11 +20,13 @@ "license": "MIT", "repository": "algolia/documentationsearch.js", "devDependencies": { + "autoprefixer": "^6.1.2", "babel": "^5.8.29", "babel-core": "^5.8.29", "babel-eslint": "^4.1.3", "babel-loader": "^5.3.2", "conventional-changelog": "^0.5.1", + "cssnano": "^3.4.0", "doctoc": "^0.15.0", "eslint": "^1.6.0", "eslint-config-airbnb": "^0.1.0", @@ -35,7 +39,10 @@ "mocha": "^2.3.4", "mocha-jsdom": "^1.0.0", "mversion": "^1.10.1", + "node-sass": "^3.4.2", "npm-shrinkwrap": "^200.4.0", + "onchange": "^2.0.0", + "postcss-cli": "^2.3.2", "pretty-bytes": "^2.0.1", "uglifyjs": "^2.4.10", "webpack": "^1.12.2", diff --git a/scripts/build b/scripts/build new file mode 100755 index 00000000..87972d40 --- /dev/null +++ b/scripts/build @@ -0,0 +1,9 @@ +#!/usr/bin/env bash + +set -e # exit when error + +rm -rf dist + +# JavaScript +npm run build:js +npm run build:css diff --git a/scripts/build-css b/scripts/build-css new file mode 100755 index 00000000..0f2c8ce7 --- /dev/null +++ b/scripts/build-css @@ -0,0 +1,25 @@ +#!/usr/bin/env bash + +set -e # exit when error + +VERSION=$(json version < package.json) +NAME='docsearch' +LICENSE="/*! ${NAME} ${VERSION:-UNRELEASED} | © Algolia | github.com/algolia/docsearch */" +DIST_DIR="dist/cdn" +DIST_FILE="$DIST_DIR/${NAME}.css" +DIST_FILE_MIN="$DIST_DIR/${NAME}.min.css" + +mkdir -p "$DIST_DIR" + +# ./dist/cdn/docsearch.css +echo "$LICENSE" > "$DIST_FILE"; +node-sass --output-style expanded ./src/styles/main.scss \ + | postcss --use autoprefixer \ + >> "$DIST_FILE" + +# ./dist/cdn/docsearch.min.css +postcss --use cssnano "$DIST_FILE" \ + >> "$DIST_FILE_MIN" + +gzip_size=$(gzip -9 < $DIST_FILE_MIN | wc -c | pretty-bytes) +echo "=> $DIST_FILE_MIN gzipped will weight $gzip_size-bytes" diff --git a/scripts/build-js b/scripts/build-js new file mode 100755 index 00000000..17f4f186 --- /dev/null +++ b/scripts/build-js @@ -0,0 +1,35 @@ +#!/usr/bin/env bash + +set -e # exit when error + +VERSION=$(json version < package.json) +NAME='docsearch' +LICENSE="/*! ${NAME} ${VERSION:-UNRELEASED} | © Algolia | github.com/algolia/docsearch */" +DIST_DIR_CDN="dist/cdn" +DIST_DIR_NPM="dist/npm" +DIST_FILE="$DIST_DIR_CDN/${NAME}.js" +DIST_FILE_MIN="$DIST_DIR_CDN/${NAME}.min.js" +DIST_FILE_SOURCEMAP="$DIST_DIR_CDN/${NAME}.min.map" + +mkdir -p "$DIST_DIR_CDN" "$DIST_DIR_NPM" + +# docsearch.js as one ES5 file + minified version and source maps +webpack --config webpack.config.jsdelivr.babel.js +echo "$LICENSE" | cat - "${DIST_FILE}" > /tmp/out && mv /tmp/out "${DIST_FILE}" +uglifyjs "${DIST_FILE}" \ + --source-map "${DIST_FILE_SOURCEMAP}" \ + --preamble "$LICENSE" \ + -c warnings=false \ + -m \ + -o "${DIST_FILE_MIN}" + +# docsearch as several ES5 files, to be `require`d +babel -q index.js -o "$DIST_DIR_NPM/index.js" +declare -a sources=("src") +for source in "${sources[@]}" +do + babel -q --out-dir "$DIST_DIR_NPM/${source}" ${source} +done + +gzip_size=$(gzip -9 < $DIST_FILE_MIN | wc -c | pretty-bytes) +echo "=> $DIST_FILE_MIN gzipped will weight $gzip_size-bytes" diff --git a/scripts/build.sh b/scripts/build.sh deleted file mode 100755 index 2d7a54b0..00000000 --- a/scripts/build.sh +++ /dev/null @@ -1,33 +0,0 @@ -#!/usr/bin/env bash - -set -e # exit when error - -mkdir -p dist/ -mkdir -p dist-es5-module/ - -rm -rf dist/* -rm -rf dist-es5-module/* - -VERSION=$(json version < package.json) - -bundle='documentationsearch' - -license="/*! ${bundle} ${VERSION:-UNRELEASED} | © Algolia | github.com/algolia/documentationsearch.js */" - -webpack --config webpack.config.jsdelivr.babel.js - -# only transpile to ES5 for package.json main entry -babel -q index.js -o dist-es5-module/index.js -declare -a sources=("src") -for source in "${sources[@]}" -do - babel -q --out-dir dist-es5-module/${source} ${source} -done - -echo "$license" | cat - dist/${bundle}.js > /tmp/out && mv /tmp/out dist/${bundle}.js -cd dist -uglifyjs ${bundle}.js --source-map ${bundle}.min.map --preamble "$license" -c warnings=false -m -o ${bundle}.min.js -cd .. - -gzip_size=$(gzip -9 < dist/${bundle}.min.js | wc -c | pretty-bytes) -echo "=> ${bundle}.min.js gzipped will weight $gzip_size-bytes" diff --git a/scripts/dev b/scripts/dev new file mode 100755 index 00000000..0b38b0a4 --- /dev/null +++ b/scripts/dev @@ -0,0 +1,16 @@ +#!/usr/bin/env bash + +npm run build:css + +# /bundle.js in memory +webpack-dev-server \ + --config webpack.dev.config.babel.js \ + --hot \ + --inline \ + --no-info & \ +# rebuild docsearch.css and docsearch.min.css +onchange './src/styles/*.scss' -- npm run build:css & \ + +wait + + diff --git a/scripts/release.sh b/scripts/release similarity index 100% rename from scripts/release.sh rename to scripts/release diff --git a/src/lib/DocumentationSearch.js b/src/lib/DocSearch.js similarity index 93% rename from src/lib/DocumentationSearch.js rename to src/lib/DocSearch.js index a5b93986..4c9a6bc8 100644 --- a/src/lib/DocumentationSearch.js +++ b/src/lib/DocSearch.js @@ -22,7 +22,7 @@ const usage = `Usage: inputSelector, [ options.{hint,debug} ] })`; -class DocumentationSearch { +class DocSearch { constructor({ apiKey, indexName, @@ -47,12 +47,6 @@ class DocumentationSearch { this.autocomplete.on('autocomplete:selected', this.handleSelected); } - // TEST: - // - Usage error if no apiKey or no indexName - // - Error if nothing matches - // - Error if matches are not input - // - apiKey nad indexName are set - // - input is set to the Zepto-wrapped inputSelector checkArguments(args) { if (!args.apiKey || !args.indexName) { throw new Error(usage); @@ -120,7 +114,6 @@ class DocumentationSearch { getHighlightedValue(object, key) { let highlight = object._highlightResult[key]; - console.info(highlight); return highlight ? highlight.value : object[key]; } @@ -137,6 +130,6 @@ class DocumentationSearch { } } -export default DocumentationSearch; +export default DocSearch; diff --git a/src/lib/main.js b/src/lib/main.js index de729790..1c4c4f4e 100644 --- a/src/lib/main.js +++ b/src/lib/main.js @@ -1,6 +1,6 @@ import toFactory from 'to-factory'; -import DocumentationSearch from './DocumentationSearch'; +import DocSearch from './DocSearch'; -let documentationSearch = toFactory(DocumentationSearch); +let docSearch = toFactory(DocSearch); -export default documentationSearch; +export default docSearch; diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 00000000..dfbc7d08 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,131 @@ +// /* Main autocomplete wrapper */ +// .eslint-nav .algolia-autocomplete { +// width: 100%; +// } +// .eslint-nav .aa-dropdown-menu { +// background-color: #FFF; +// border: 1px solid #333; +// border-radius: 4px; +// font-size: 16px; +// margin: 6px 0 0; +// padding: 4px; +// text-align: left; +// left: -20px !important; +// right: -20px !important; +// } +// +// /* Category headers */ +// .eslint-nav .suggestion-category { +// background-color: #4B54DE; +// color: white; +// font-weight: 600; +// padding: 5px 10px; +// text-align: left; +// } +// .eslint-nav .suggestion-category mark { +// background-color: #4D47D5; +// color: white; +// padding: 0; +// } +// +// /* Suggestion */ +// .eslint-nav .suggestion { +// color: #333; +// cursor: pointer; +// overflow: hidden; +// border-bottom: 1px solid #3A33D1; +// } +// .eslint-nav .aa-suggestion:last-child .suggestion { +// border-bottom-color: transparent; +// } +// .eslint-nav .suggestion mark { +// padding: 0; +// color: #3A33D1; +// background: none; +// font-weight: 600; +// } +// .eslint-nav .suggestion-subcategory-secondary { +// display: inline-block; +// font-weight: bold; +// } +// .eslint-nav .suggestion-subcategory-secondary:after { +// content: " › "; +// } +// .eslint-nav .suggestion-title { +// display: inline; +// } +// .eslint-nav .suggestion-content { +// padding: 3px 5px; +// } +// /* Hidden elements for this viewport */ +// .eslint-nav .suggestion-subcategory-main, +// .eslint-nav .suggestion-text { +// display: none; +// } +// +// /* Selected suggestion */ +// .eslint-nav .aa-cursor .suggestion-content, +// .eslint-nav .aa-cursor .suggestion-content code, +// .eslint-nav .aa-cursor .suggestion-content mark { +// color: #272296; +// } +// .eslint-nav .aa-cursor .suggestion { +// background: #EBEBFB; +// } +// +// /* Screen big enough to display the text snippets */ +// @media (min-width: 568px) { +// .eslint-nav .suggestion-text { +// display: block; +// font-size: .9em; +// } +// } +// +// /* Screen big enough to display results in two columns */ +// @media (min-width: 768px) { +// /* Use table display for the two columns */ +// .eslint-nav .suggestion { +// display: table; +// width: 100%; +// border-bottom: 1px solid #9D99E8; +// } +// .eslint-nav .suggestion-subcategory-main { +// border-right: 1px solid #9D99E8; +// background: #F2F2FF; +// color: #4E4726; +// display: table-cell; +// max-width: 135px; +// min-width: 135px; +// overflow: hidden; +// padding: 5px 7px 5px 5px; +// text-align: right; +// text-overflow: ellipsis; +// vertical-align: top; +// width: 135px; +// } +// .eslint-nav .suggestion-content { +// display: table-cell; +// padding: 5px 10px; +// } +// .eslint-nav .suggestion-subcategory-secondary { +// display: none; +// } +// .eslint-nav .suggestion-title { +// font-weight: 600; +// } +// .eslint-nav .suggestion-text { +// display: block; +// font-weight: normal; +// padding: 2px; +// } +// } +// +// /* Enough room to display the autocomplete in the header directly */ +// @media (min-width: 996px) { +// .eslint-nav .aa-dropdown-menu { +// left: -30px !important; +// right: -270px !important; +// } +// } +// +// diff --git a/webpack.config.jsdelivr.babel.js b/webpack.config.jsdelivr.babel.js index ed22f23c..83cd5167 100644 --- a/webpack.config.jsdelivr.babel.js +++ b/webpack.config.jsdelivr.babel.js @@ -1,9 +1,9 @@ export default { entry: './index.js', output: { - path: './dist/', - filename: 'documentationsearch.js', - library: 'documentationSearch', + path: './dist/cdn', + filename: 'docsearch.js', + library: 'docsearch', libraryTarget: 'umd' }, module: {