{"_id":"@alotool/blogger-pack","_rev":"12-1360cac15d3d48e182300b95b5715081","time":{"1.2.0":"2021-12-01T10:04:20.486Z","1.2.2":"2021-12-01T10:04:20.486Z","1.2.3":"2021-12-01T10:04:20.486Z","1.2.4":"2021-12-01T10:04:20.486Z","1.3.1":"2021-12-01T10:04:20.486Z","created":"2021-12-01T10:09:27.215Z","1.3.2":"2021-12-01T10:09:27.429Z","modified":"2022-04-04T13:37:32.956Z","1.3.3":"2021-12-01T12:20:32.642Z","1.3.4":"2021-12-02T07:57:31.540Z"},"name":"@alotool/blogger-pack","dist-tags":{"latest":"1.3.4"},"versions":{"1.3.2":{"name":"@alotool/blogger-pack","version":"1.3.2","description":"A tool for develop Blogger theme.","license":"MIT","homepage":"https://github.com/alotool/blogger-pack/tree/main#readme","repository":{"type":"git","url":"git+https://github.com/alotool/blogger-pack.git"},"bugs":{"url":"https://github.com/alotool/blogger-pack/issues"},"author":{"name":"alotool","email":"alotool360@gmail.com","url":"https://alotool.github.io"},"keywords":["@alotool","blogger-pack","blogger","blogspot"],"bin":{"blogger-pack":"bin.js"},"dependencies":{"@babel/core":"7.15.5","@babel/eslint-parser":"7.15.7","@babel/preset-env":"7.15.6","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"20.0.0","@rollup/plugin-node-resolve":"13.0.5","@rollup/stream":"2.0.0","@taufik-nurrohman/quote":"0.0.14","autoprefixer":"9.8.6","chalk":"4.1.2","chokidar":"3.5.2","commander":"8.2.0","cross-spawn":"7.0.3","dedent":"0.7.0","del":"6.0.0","fibers":"5.0.0","glob":"7.2.0","gulp":"4.0.2","gulp-clean-css":"4.3.0","gulp-concat":"2.6.1","gulp-debug":"4.0.0","gulp-eslint":"6.0.0","gulp-header":"2.0.9","gulp-postcss":"9.0.1","gulp-rename":"2.0.0","gulp-replace":"1.1.3","gulp-sass":"5.0.0","gulp-sourcemaps":"3.0.0","gulp-stylelint":"13.0.0","gulp-terser":"2.1.0","merge-options":"3.0.4","merge-stream":"2.0.0","minimist":"1.2.5","node-sass-glob-importer":"5.3.2","node-sass-package-importer":"5.3.2","nunjucks":"3.2.3","postcss":"8.3.8","postcss-easy-import":"3.0.0","prettier":"2.4.1","rollup":"2.57.0","rollup-plugin-glob-import":"0.5.0","rollup-plugin-node-globals":"1.4.0","sass":"1.42.1","strip-css-comments":"4.1.0","strip-indent":"3.0.0","stylelint":"13.13.1","through2":"4.0.2","undertaker-registry":"1.0.1","util":"0.12.4","vinyl":"2.2.1","vinyl-buffer":"1.0.1","vinyl-fs":"3.0.3","vinyl-source-stream":"2.0.0","path":"0.12.7","gulp-csso":"4.0.1","gulp-notify":"4.0.0","gulp-size":"4.0.1","gulp-uglify":"3.0.2"},"devDependencies":{"mocha":"9.0.3","should":"13.2.3"},"gitHead":"16cac3a8455e5e0adfc583bd40a161cc64e1e278","_id":"@alotool/blogger-pack@1.3.2","_nodeVersion":"14.16.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-nAQ5xRzr6UFdAL0m1PP/ziqCvx+SvGtKuAtbknv9/14IkksjrK60I8AwTcZ9TlwRDRduyo7+XOUTSYtnM0BLJA==","shasum":"b986239ea24bf21cf3ab49c02d31f4aa8a2e3d38","tarball":"https://registry.npmjs.org/@alotool/blogger-pack/-/blogger-pack-1.3.2.tgz","fileCount":16,"unpackedSize":61304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp0nXCRA9TVsSAnZWagAA80EP/3JnoE8fyATRjL5bVMFw\n6ssDa3YkXd37LzsoGjBQcSr9chC7dPwTuSNa4uQq5d9xIoL/5ltlEnZmLvXm\n6Zg9muHhAc3INnX0MgJ/V8N2Ug/dkxfuvzcSinAXekB1AZ+dUzFFzXQxA0cT\nAJCoIp1wctLGK8tg3CBPq5LGM7HXoVrjf8kdEn+6H3xA1NjFIloZI+TPW2rd\nlwu0VLovSYFjmjrlRb36ntYM1YM9nkYhxgtv6ykyxCIgAcFlsbOixps4NVIY\nBy+bggQ6z9Sm0LufDFBeDEANhGKQbTyNhrLscwt/JEeN/SJYFAbAEJVIsBVU\nQ01hX6k2eDsxnl5w4z90uTbbffHYq0b1wzWRD7FNvUwGTVcp5WOuBNeNtG4R\n5jfeqgAgMuTC+RiAvXMmnnlI56a10Rq5dUdeFhL95N4FvozlfY6SBAzS+Mnl\nltbENaSws39OcPa5h8ZLwKIaidpPGvBmWygXe6CrtEoniZ1sN/JUY3LdTAOB\ntuyrWrB0lz3mLV7jdamqRDJvC7xgkjvbfvsuoADVQl75VSuHeYeQWBJKQ08p\nurB5chGHkImnC0K6S+4XheANhUrwNRDadHjiVzzi+dw+R8Iz80g/UPjVX7G5\nU0lRSGIIDRQVMW0giV1Y7TvXSNJgafacQeMuDh97QTIfEZ4pfgYn8n27+a0N\nQRVl\r\n=T7ij\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9ziLaV3dMiP6UCPOfdSNPhjyb0ZuujzhvIhFHjsLyygIhAJRegAu3pZIRFX6naFUXP/HA6ubwcbaAjzOf/qFnW4LE"}]},"_npmUser":{"name":"alotool","email":"alotool360@gmail.com"},"directories":{},"maintainers":[{"name":"alotool","email":"alotool360@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blogger-pack_1.3.2_1638353367270_0.18817263316016786"},"_hasShrinkwrap":false},"1.3.3":{"name":"@alotool/blogger-pack","version":"1.3.3","description":"A tool for develop Blogger theme.","license":"MIT","homepage":"https://github.com/alotool/blogger-pack/tree/main#readme","repository":{"type":"git","url":"git+https://github.com/alotool/blogger-pack.git"},"bugs":{"url":"https://github.com/alotool/blogger-pack/issues"},"author":{"name":"alotool","email":"alotool360@gmail.com","url":"https://alotool.github.io"},"keywords":["@alotool","blogger-pack","blogger","blogspot"],"bin":{"blogger-pack":"bin.js"},"dependencies":{"@babel/core":"7.15.5","@babel/eslint-parser":"7.15.7","@babel/preset-env":"7.15.6","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"20.0.0","@rollup/plugin-node-resolve":"13.0.5","@rollup/stream":"2.0.0","@taufik-nurrohman/quote":"0.0.14","autoprefixer":"9.8.6","chalk":"4.1.2","chokidar":"3.5.2","commander":"8.2.0","cross-spawn":"7.0.3","dedent":"0.7.0","del":"6.0.0","fibers":"5.0.0","glob":"7.2.0","gulp":"4.0.2","gulp-clean-css":"4.3.0","gulp-concat":"2.6.1","gulp-debug":"4.0.0","gulp-eslint":"6.0.0","gulp-header":"2.0.9","gulp-postcss":"9.0.1","gulp-rename":"2.0.0","gulp-replace":"1.1.3","gulp-sass":"5.0.0","gulp-sourcemaps":"3.0.0","gulp-stylelint":"13.0.0","gulp-terser":"2.1.0","merge-options":"3.0.4","merge-stream":"2.0.0","minimist":"1.2.5","node-sass-glob-importer":"5.3.2","node-sass-package-importer":"5.3.2","nunjucks":"3.2.3","postcss":"8.3.8","postcss-easy-import":"3.0.0","prettier":"2.4.1","rollup":"2.57.0","rollup-plugin-glob-import":"0.5.0","rollup-plugin-node-globals":"1.4.0","sass":"1.42.1","strip-css-comments":"4.1.0","strip-indent":"3.0.0","stylelint":"13.13.1","through2":"4.0.2","undertaker-registry":"1.0.1","util":"0.12.4","vinyl":"2.2.1","vinyl-buffer":"1.0.1","vinyl-fs":"3.0.3","vinyl-source-stream":"2.0.0","path":"0.12.7","gulp-csso":"4.0.1","gulp-notify":"4.0.0","gulp-size":"4.0.1","gulp-uglify":"3.0.2"},"devDependencies":{"mocha":"9.0.3","should":"13.2.3"},"gitHead":"3172d93f9bcffb2d3d39c7da45c917039a88c6c7","_id":"@alotool/blogger-pack@1.3.3","_nodeVersion":"14.16.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-LAVympHmPnr9GD6xkudfJwwXjRX4dOMomQnuaKmOEqCAR9Vr8ja5tDui2EWv3VLUVn3Yw3/LZ485hFEcyvwhiw==","shasum":"192d7af36c09abfde5ee3a236fba89a69ccd8999","tarball":"https://registry.npmjs.org/@alotool/blogger-pack/-/blogger-pack-1.3.3.tgz","fileCount":16,"unpackedSize":61319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2iQCRA9TVsSAnZWagAACdkP/A7VqkKFAAcanqinYYki\nxdF5C0nPvZkGXU3HkXhPmHNNi3z/v2lpQRQnxMrPR1n86BHDwpn4y+IC4lps\nX14uaTbZtrjz/9S0T9MNUFtB5vlkfwviKxNlABgn8xjeSzee0VrfDyuhMz+L\nqT5rwBt7+xeK46iT3QY0Df/8pCETS1e7e1creFaieg17oU+wUhUd7q3VnzHE\nOASvRzCkuEvB04/Oo7EtHbelbiPua2BWVQUZ60odgAFwN2Wz8ISvLVfb06VZ\nqqPPB4AdROPlN21SJVU/5bYpcPloNSRo49ySdEqk/PCA8rqOCtyOXdpsRJ1m\nr6iXWGxLBVRMrGpSYliZkEvFNseUp2jjmkIULHG2/rNu3nAXExyosTbYm3rY\nVGJY9VfDWIJbktAufz2vOzHMkezC3IIBdQTbvC3GCPh2HgoBN4VnVAvZ9//r\n/WU4v8PXURpl6A9M4hvvdCxkGQ5c1efqX5b6ITGdk6TbRs/FB9lxtMtN1jNL\nHrhCSRUVpGmpZFINZm+FjVxxaNY7+0AbI4BNYo9Cb/0eTh7OeaHZxg26JtBh\nsxSTYXaGN+UfRhtSn3li9zc4O1MH2b0V1Sod5Vty4UAXC/u0qARoDpW2P3km\nTkAxbBSJfjb4EfD3rn5fjjELVof168Rjce1P0DTsJe9l3eum2FFdKjuLJloJ\nfERC\r\n=xwf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChZJmph2fMeF6Dm1fild0hxxbmV8HoZG2p53MvVJO4HQIgIxFYMWKwR6CAcUuBT/l4aAwvIEAm15WkID+Cai40UyM="}]},"_npmUser":{"name":"alotool","email":"alotool360@gmail.com"},"directories":{},"maintainers":[{"name":"alotool","email":"alotool360@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blogger-pack_1.3.3_1638361232439_0.17697610649219309"},"_hasShrinkwrap":false},"1.3.4":{"name":"@alotool/blogger-pack","version":"1.3.4","description":"A tool for develop Blogger theme.","license":"MIT","homepage":"https://github.com/alotool/blogger-pack/tree/main#readme","repository":{"type":"git","url":"git+https://github.com/alotool/blogger-pack.git"},"bugs":{"url":"https://github.com/alotool/blogger-pack/issues"},"author":{"name":"alotool","email":"alotool360@gmail.com","url":"https://alotool.github.io"},"keywords":["@alotool","blogger-pack","blogger","blogspot"],"bin":{"blogger-pack":"bin.js"},"dependencies":{"@babel/core":"7.15.5","@babel/eslint-parser":"7.15.7","@babel/preset-env":"7.15.6","@rollup/plugin-babel":"5.3.0","@rollup/plugin-commonjs":"20.0.0","@rollup/plugin-node-resolve":"13.0.5","@rollup/stream":"2.0.0","@taufik-nurrohman/quote":"0.0.14","autoprefixer":"9.8.6","chalk":"4.1.2","chokidar":"3.5.2","commander":"8.2.0","cross-spawn":"7.0.3","dedent":"0.7.0","del":"6.0.0","fibers":"5.0.0","glob":"7.2.0","gulp":"4.0.2","gulp-clean-css":"4.3.0","gulp-concat":"2.6.1","gulp-debug":"4.0.0","gulp-eslint":"6.0.0","gulp-header":"2.0.9","gulp-postcss":"9.0.1","gulp-rename":"2.0.0","gulp-replace":"1.1.3","gulp-sass":"5.0.0","gulp-sourcemaps":"3.0.0","gulp-stylelint":"13.0.0","gulp-terser":"2.1.0","merge-options":"3.0.4","merge-stream":"2.0.0","minimist":"1.2.5","node-sass-glob-importer":"5.3.2","node-sass-package-importer":"5.3.2","nunjucks":"3.2.3","postcss":"8.3.8","postcss-easy-import":"3.0.0","prettier":"2.4.1","rollup":"2.57.0","rollup-plugin-glob-import":"0.5.0","rollup-plugin-node-globals":"1.4.0","sass":"1.42.1","strip-css-comments":"4.1.0","strip-indent":"3.0.0","stylelint":"13.13.1","through2":"4.0.2","undertaker-registry":"1.0.1","util":"0.12.4","vinyl":"2.2.1","vinyl-buffer":"1.0.1","vinyl-fs":"3.0.3","vinyl-source-stream":"2.0.0","path":"0.12.7","gulp-csso":"4.0.1","gulp-notify":"4.0.0","gulp-size":"4.0.1","gulp-uglify":"3.0.2"},"devDependencies":{"mocha":"9.0.3","should":"13.2.3"},"gitHead":"d2b0580e7afdb1e033899d7dcb0e6d23fd48ec29","_id":"@alotool/blogger-pack@1.3.4","_nodeVersion":"14.16.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-k1P5QT1bXyThGLEJYaTMK5w5ti4F/LSjsV12hOCGKWnBvA6BKLSZ7vCc4ailZbKGeopXrV8qM1RaxViztkit2w==","shasum":"a1f77975ee62e1482af22a2dc4da743e6be25e9c","tarball":"https://registry.npmjs.org/@alotool/blogger-pack/-/blogger-pack-1.3.4.tgz","fileCount":16,"unpackedSize":61381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqHxrCRA9TVsSAnZWagAAwdQP+wQ2UbAbmhnxQiq8AduF\n1T/CyLqcB4Hof5EttoVTJeFLNU41N9XPIUs9UJrapz4L5+/TDXSXOnTH4HUv\nTr62ODSbDgzF90/SOkvrkHJ8nrp7hWmXMIDHcnSmK5Aym4dQmxSVjkQg8D8q\nv1rnCrLXUEaUnhr0eIJ0/EjBzE0sAYSutXsT7hb1fGvssOuNLAswdKGkdYC2\nCPJYq8KelZj8Y4aqG/kavfZfRGla2DfEQlLFXLFBqk7lRhIpWya1UdXVN6iD\nIrOC5/DIo2bkhQNQm3KEUqq/vLthD+yV2WjHITm+tl0I8lVrRaNgoC4tBrg9\naDjWv6pra1OiWK/hupVnuge9It944WryuOJ/819bt1EmCRClNIkpil8/3KKt\nEHeA7pvLsLYgPCLXDPazGjML0LguLlK4eOxETHwmpL6TCS+foaSEYt70xtKH\nJZvctOvzfJhAzZ3QA2RrjcVmjxtDQspQjcD4HCG2SzIj3DZNpCOAsdcx5hUL\n05EB0XqMMWDu+qjJyX1oH5vt4qCgi18biSUSGcbF3pJwipJQmJ9o8GWMU2+G\nq+RGS0/J3T3fdVDj2lDsp+GJ+Uchz2J6Zi7WZ5W4wiT5HQIpF2snoHTpMkf2\nxbKbj+edJj4+gz0CzVC+eltzLoqYI3QQ5kCSnqK0NuLMzHQiSwHclih/V5+I\n9JEN\r\n=G7oI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLpH6ptdcaDyYXBs8z3N3a+DWY/3wPuyQdQtWRd1PlCAiAsoY1N2CgqIuypge3cbha0ppzSVtLpCR6cLroy1tssvg=="}]},"_npmUser":{"name":"alotool","email":"alotool360@gmail.com"},"directories":{},"maintainers":[{"name":"alotool","email":"alotool360@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/blogger-pack_1.3.4_1638431851370_0.7449902324712205"},"_hasShrinkwrap":false}},"maintainers":[{"name":"alotool","email":"alotool360@gmail.com"}],"description":"A tool for develop Blogger theme.","homepage":"https://github.com/alotool/blogger-pack/tree/main#readme","keywords":["@alotool","blogger-pack","blogger","blogspot"],"repository":{"type":"git","url":"git+https://github.com/alotool/blogger-pack.git"},"author":{"name":"alotool","email":"alotool360@gmail.com","url":"https://alotool.github.io"},"bugs":{"url":"https://github.com/alotool/blogger-pack/issues"},"license":"MIT","readme":"# Blogger-pack\n\n> A tool for develop Blogger theme.\n\n# Getting started\n\n## Features\n\n- [Nunjucks](https://mozilla.github.io/nunjucks/)\n- Sass and ES6+\n- CSS and JS linter\n- CSS and JS minification\n- and more\n\n## Usage\n\nUse [starter themes](https://github.com/bloggerpack/bloggerpack/tree/main/starters) for quick start.\n\n## Main folder structure\n\n```text\n.\n├── dist/ (g)\n| └── theme.xml <---------------------------+\n├── src/ |\n| ├── js/ |\n| | ├── dist/ (g) |\n| | | └── script.js <-------+ |\n| | ├── js-in-template/ (g) | |\n| | └── index.js >------------^ |\n| ├── sass/ |\n| | ├── dist/ (g) |\n| | | └── style.css <-----------+ |\n| | ├── sass-in-template/ (g) | |\n| | └── index.scss >--------------^ |\n| ├── skin/ |\n| | ├── dist/ (g) |\n| | | └── style.css <---------------+ | # (<-) = Compiled\n| | ├── skin-in-template/ (g) | | # (>-) = Source\n| | └── index.css >-------------------^ | # (c) = Config file\n| └── index.xml >---------------------------^ # (g) = Auto-generated\n├── .browserslistrc (c)\n├── .eslintrc.json (c)\n├── .stylelintrc.json (c)\n├── banner.txt (c)\n├── data.json (c)\n└── package.json (c)\n```\n\n### Index files\n\n- Template: `src/index.xml`\n- Sass: `src/sass/index.scss`\n- Skin: `src/skin/index.css`\n- JS: `src/js/index.js`\n\n### Config files\n\n#### `.browserslistrc`\n\nThe config to share target browsers. Learn more about [Browserslist](https://github.com/browserslist/browserslist).\n\n#### `.eslintrc.json`\n\nThe default config is recommended, but if you want to change the config you can read the [ESLint docs](https://eslint.org/docs/user-guide/configuring).\n\n#### `.stylelintrc.json`\n\nThe default config is recommended, but if you want to change the config you can read the [Stylelint docs](https://stylelint.io/user-guide/configure).\n\n#### `banner.txt`\n\nThe header for compiled Sass, Skin and JS. You can access data from `data.json` using `<%= data.keyName %>`, you can also access data from `package.json` using `<%= pkg.keyName %>`.\n\n#### `data.json`\n\nStore your theme config in this file. This is Nunjucks template context, which means it can be accessed in template using `{{ data.keyName }}`. [Learn more](#template-variables).\n\n#### `package.json`\n\nUse this file to manage and install Bloggerpack and other packages. You also will need to add [Bloggerpack commands and tasks](#bloggerpack-commands).\n\n## Bloggerpack commands\n\nDefine Bloggerpack commands and tasks to build and develop Bloggerpack theme.\n\nThe commands and tasks are defined in the `scripts` property of `package.json`.\n\n### Basic example\n\npackage.json\n\n```json\n{\n \"scripts\": {\n \"start\": \"blogger-pack --mode production --watch\",\n \"build\": \"blogger-pack --mode production\"\n }\n}\n```\n\nYou’ll be able to run:\n\n- `npm start` - Watches the source files and automatically building them whenever you save.\n- `npm run build` - Build the theme.\n\n### Available flags\n\n| Flag | Description |\n| ---- | ----------- |\n| `--mode` | `production` or `development` (no minification) |\n| `--no-sass` | Exclude Sass from compilation. |\n| `--no-sass-lint` | Disable Sass linter. |\n| `--no-skin` | Exclude Skin from compilation. |\n| `--no-skin-lint` | Disable Skin linter. |\n| `--no-js` | Exclude JS from compilation. |\n| `--no-js-lint` | Disable JS linter. |\n| `--watch` | Watches the source files and automatically building them whenever you save. |\n| `--gulpfile` | Custom gulpfile. |\n| `--cwd` | Custom CWD. |\n\n# Concepts\n\n## Template\n\nWe uses [Nunjucks](https://mozilla.github.io/nunjucks/templating.html) for its template engine. File extension for template files is `.xml`.\n\n### Source\n\n- Index file: `src/index.xml`\n- Compiled to: `dist/theme.xml`\n\n### Paths\n\n- `./example.xml` - Relative to file's directory.\n- `../example.xml` - Relative to file's parent directory.\n- `example.xml` - Relative to the `index.xml` directory.\n\n### `` tag\n\nWrap the markup with `` tag in `.xml` files.\n\n```njk\n\n

example

\n\n```\n\nNote: The `` tag is always required.\n\n### `template` tag\n\n**Do not use** the default Nunjucks `{% include %}` tag, use `{% template %}` tag instead.\n\nsrc/example-dir/example.xml:\n\n```njk\n\n
\n

example

\n
\n\n```\n\nsrc/index.xml:\n\n```njk\n\n
\n {% template \"./example-dir/example.xml\" %}\n
\n\n```\n\nOutput:\n\n```html\n
\n
\n

example

\n
\n
\n```\n\n##### Including template from node modules\n\nYou can also include template from node modules:\n\n```njk\n\n {% template \"package-name/path/to/file.xml\" %}\n\n```\n\nLearn how to create plugin for Bloggerpack by reading [this section](#creating-plugins) below.\n\n### `asset` tag\n\nUse `{% asset %}` tag to include compiled [Sass](#sass), [Skin](#skin), [JS](#js), and other CSS and JS assets.\n\nNote: You must use the `{% asset %}` tag to prevent assets from being prettied.\n\n#### Usage example\n\n```njk\n{% asset %}\n \n{% endasset %}\n```\n\nWith files:\n\n```njk\n{% asset %}\n \n{% endasset %}\n```\n\n#### Examples\n\nNormal CSS:\n\n```njk\n{% asset %}\n \n \n \n{% endasset %}\n```\n\nSkin CSS:\n\n```njk\n{% asset %}\n \n \n \n \n \n{% endasset %}\n```\n\nLayout Mode CSS:\n\n```njk\n{% asset %}\n \n \n \n \n \n{% endasset %}\n```\n\nJS:\n\n```njk\n{% asset %}\n \n{% endasset %}\n```\n\n#### Including assets from node modules\n\nYou can also include assets from node modules:\n\n```njk\n{% asset %}\n \n \n \n{% endasset %}\n```\n\n### `extends` tag\n\nUse Nunjucks `{% extends %}` tag. See [Nunjucks template inheritance](https://mozilla.github.io/nunjucks/templating.html#template-inheritance).\n\nsrc/base.xml:\n\n```njk\n\n
\n {% block header %}{% endblock %}\n
\n\n
\n {% block main %}{% endblock %}\n
\n\n
\n {% block footer %}{% endblock %}\n
\n\n```\n\nsrc/index.xml:\n\n```njk\n\n {% extends \"./base.xml\" %}\n\n {% block header %}\n This is header content.\n {% endblock %}\n\n {% block main %}\n This is main content.\n {% endblock %}\n\n {% block footer %}\n This is footer content.\n {% endblock %}\n\n```\n\nOutput:\n\n```html\n
\n This is header content.\n
\n\n
\n This is main content.\n
\n\n
\n This is footer content.\n
\n```\n\n### Variables\n\nYou can use variables from [`data.json`](#datajson) using `{{ data.keyName }}` and you can also use variables from [`package.json`](#packagejson) using `{{ pkg.keyName }}`.\n\n##### Example\n\ndata.json:\n\n```json\n{\n \"myVar\": \"Value of myVar\"\n}\n```\n\npackage.json:\n\n```json\n{\n \"name\": \"my-awesome-theme\"\n}\n```\n\nfile.xml:\n\n```njk\n\n

{{ data.myVar }}

\n

{{ pkg.name }}

\n\n```\n\nOutput:\n\n```html\n

Value of myVar

\n

my-awesome-theme

\n```\n\n## Sass\n\nWrite your styles with [Sass](https://sass-lang.com/).\n\n### Source\n\n- Index file: `src/sass/index.scss`\n- Compiled to: `src/sass/dist/style.css`\n\n### Partialize\n\n**Do not write styles in `src/sass/index.scss` directly.** Add a new file (e.g., `_my-component.scss`) within `src/sass/` and than import the file to `src/sass/index.scss`:\n\nNote: You can omit the `_` prefix and the `.scss` extension.\n\n```scss\n@import \"my-component\";\n```\n\nIt also support glob imports:\n\n```scss\n@import \"dir/**/*.scss\";\n```\n\nImport from node modules:\n\n```scss\n@import \"~package-name\"; // node_modules/package-name/\n@import \"~package-name/dir/file\"; // node_modules/package-name/dir/file.scss\n```\n\n```scss\n// @import \"~package-name/dir/**/*.scss\";\n// Glob import is not supported. You don't need glob import inside node_modules.\n```\n\n### Sass-in-Template\n\nYou can write Sass **for specific template** in the template file directly using `` tag.\n\n```njk\n\n

Example

\n\n\n\n$heading-color: #fff !default;\n\n.example {\n color: $heading-color;\n}\n\n```\n\nThe styles within the tag would be automatically extracted to `src/sass/sass-in-template` folder.\n\n## Skin\n\nSkin is CSS that support Blogger's skin variables to allow your theme to be able to customize through the Blogger theme designer.\n\n### Source\n\n- Index file: `src/skin/index.css`\n- Compiled to: `src/skin/dist/style.css`\n\nNote: The compiled skin is not minified, so it can be customizable in the Blogger code editor.\n\n### Partialize\n\n**Do not write styles in `src/skin/index.css` directly.** Add a new file (e.g., `_my-component.css`) within `src/skin/` and than import the file to `src/skin/index.css`:\n\nNote: You can omit the `_` prefix and the `.css` extension.\n\n```css\n@import \"./my-component\";\n```\n\nIt also support glob imports:\n\n```css\n@import \"./dir/**/*.css\";\n```\n\nImport from node modules:\n\n```css\n@import \"package-name\"; /* node_modules/package-name/ */\n@import \"package-name/dir/file\"; /* node_modules/package-name/dir/file.css */\n@import \"package-name/dir/**/*.css\"; /* glob inside node_modules/package-name/dir */\n```\n\n### Skin-in-Template\n\nYou can write skin CSS **for specific template** in the template file directly using `` tag.\n\n```njk\n\n

Example

\n\n\n\n/*\n\n*/\n\n.example {\n color: $(heading.color);\n}\n\n```\n\nThe styles within the tag would be automatically extracted to `src/skin/skin-in-template` folder.\n\n## JS\n\nThe JavaScript. You can write your script with ES6+.\n\n### Source\n\n- Index file: `src/js/index.js`\n- Compiled to: `src/js/dist/script.js`\n\n### Partialize\n\n**Do not write scripts in `src/js/index.js` directly.** Add a new file (e.g., `my-script.js`) within `src/js/` and than import the file to `src/js/index.js`:\n\nNote: You can omit the `.js` extension.\n\n```js\nimport './my-script';\n```\n\nIt also support glob imports:\n\n```js\nimport './dir/**/*.js';\n```\n\nImport from node modules:\n\n```js\nimport 'package-name'; // node_modules/package-name/\n```\n\n```js\nimport square from 'package-name/lib/math'; // node_modules/package-name/lib/math.js\n\nconsole.log(square(5));\n```\n\n```js\n// import 'package-name/dir/**/*.js';\n// Glob import is not supported. You don't need glob import inside node_modules.\n```\n\n### JS-in-Template\n\nYou can write JavaScript for specific template in the template file directly using `` tag.\n\n```njk\n\n

Example

\n\n\n\nconst example = document.getElementById('example');\n\n```\n\nThe JavaScript within the tag would be automatically extracted to `src/js/js-in-template` folder.\n\n# Tips\n\n## Creating theme variants\n\nYou may want to create a variants of theme with shared components, CSS and JS.\n\nTo create a variant of theme, just create a file named `src/index-.xml`, `src/sass/index-.scss`, `src/skin/index-.css` and `src/js/index-.js`.\n\n- The `src/index-.xml` would be compiled to `dist/theme-.xml`.\n- The `src/sass/index-.scss` would be compiled to `src/sass/dist/style-.css`.\n- The `src/skin/index-.css` would be compiled to `src/skin/dist/style-.css`.\n- The `src/js/index-.js` would be compiled to `src/js/dist/script-.js`.\n\nExample:\n\n```text\n.\n├── dist/\n| ├── theme.xml <-------------------------------+\n| ├── theme-one-column.xml <--------------------|--+\n| └── theme-offcanvas.xml <---------------------|--|--+\n└── src/ | | |\n ├── js/ | | |\n | ├── dist/ | | |\n | | ├── script.js <--------------+ | | |\n | | ├── script-one-column.js <---|--+ | | |\n | | └── script-offcanvas.js <----|--|--+ | | |\n | ├── index.js >-------------------^ | | | | |\n | ├── index-one-column.js >-----------^ | | | |\n | └── index-offcanvas.js >---------------^ | | |\n ├── sass/ | | |\n | ├── dist/ | | |\n | | ├── style.css <--------------+ | | |\n | | ├── style-one-column.css <---|--+ | | |\n | | └── style-offcanvas.css <----|--|--+ | | |\n | ├── index.scss >-----------------^ | | | | |\n | ├── index-one-column.scss >---------^ | | | |\n | └── index-offcanvas.scss >-------------^ | | |\n ├── skin/ | | |\n | ├── dist/ | | |\n | | ├── style.css <--------------+ | | |\n | | ├── style-one-column.css <---|--+ | | |\n | | └── style-offcanvas.css <----|--|--+ | | |\n | ├── index.css >------------------^ | | | | |\n | ├── index-one-column.css >----------^ | | | |\n | └── index-offcanvas.css >--------------^ | | |\n ├── index.xml >-------------------------------^ | |\n ├── index-one-column.xml >-----------------------^ |\n └── index-offcanvas.xml >---------------------------^\n```\n\n## Creating plugins\n\nYou just need to write Bloggerpack [template](#template) in a `.xml` file or you can use [@bloggerpack/plugin-create](https://github.com/bloggerpack/bloggerpack/tree/main/plugins/create).\n\nExample `my-plugin.xml`:\n\n```njk\n\n
\n ...\n
\n\n```\n\nUse `.bloggerpack.xml` extension to extract [Sass-in-Template](#sass-in-template), [Skin-in-Template](#skin-in-template), and [JS-in-Template](#js-in-template) to the user theme.\n\n`my-plugin.bloggerpack.xml`:\n\n```njk\n\n
\n ...\n
\n\n\n\n.my-component {\n ...\n}\n\n\n\n.my-component {\n ...\n}\n\n\n\nconst myComponent = document.getElementById('myComponent');\n\n```\n\n### Sharing plugins\n\nUse the `bloggerpack-plugin` keyword within your `package.json` and GitHub topics.\n\n### Learn more\n\nLearn how to **include template from node modules** by reading [this section](#including-template-from-node-modules) above.\n\nLearn how to create **npm package** by reading its [documentation](https://docs.npmjs.com/getting-started/).\n\n### Official plugins\n\n[Bloggerpack plugins](https://github.com/bloggerpack/bloggerpack/tree/main/plugins)\n\n## Creating starters\n\nYou can use [@bloggerpack/starter-create](https://github.com/bloggerpack/bloggerpack/tree/main/starters/create) to create a new starter theme for Bloggerpack.\n\n### Sharing starters\n\nUse the `bloggerpack-starter` keyword within your `package.json` and GitHub topics.\n\n### Official starters\n\n[Bloggerpack starters](https://github.com/bloggerpack/bloggerpack/tree/main/starters)\n\n# Changelog\n\nSee [CHANGELOG](https://github.com/bloggerpack/bloggerpack/blob/main/packages/bloggerpack/CHANGELOG.md).\n","readmeFilename":"README.md"}