├── .editorconfig ├── .gitignore ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── NOTICE ├── package-lock.json ├── package.json ├── patternlab-config.json ├── patternlab.js ├── public └── .gitkeep ├── readme.md ├── scripts └── postinstall.js ├── source ├── _annotations │ └── .gitkeep ├── _app │ ├── readme.md │ ├── samples │ │ └── scss │ │ │ └── webpack.app.js │ └── webpack.app.js ├── _data │ ├── data.json │ └── listitems.json ├── _meta │ ├── _00-head.mustache │ └── _01-foot.mustache ├── _patterns │ └── .gitkeep ├── css │ └── pattern-scaffolding.css ├── favicon.ico ├── fonts │ └── .gitkeep ├── images │ └── .gitkeep ├── js │ └── getting-started.js └── styleguide │ └── css │ └── styleguide-specific.css └── webpack.config.babel.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | tab_width = 4 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | #compiled assets 61 | public 62 | events.json 63 | 64 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - lts/* 5 | 6 | cache: 7 | directories: 8 | - "node_modules" 9 | 10 | install: 11 | - yarn 12 | 13 | script: 14 | - yarn webpack:version 15 | - yarn patternlab:build 16 | 17 | deploy: 18 | provider: pages 19 | skip-cleanup: true 20 | github-token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable 21 | keep-history: true 22 | local-dir: public 23 | on: 24 | branch: master 25 | 26 | branches: 27 | only: 28 | - master 29 | - latest 30 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at Comcast_Open_Source_Services@comcast.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | # Contribution Guidelines 3 | 4 | We love to see contributions to the project and have tried to make it easy to do so. If you would like to contribute code to this project you can do so through GitHub by forking the repository and sending a pull request. 5 | 6 | Before Comcast merges your code into the project you must sign the [Comcast Contributor License Agreement (CLA)](https://gist.github.com/ComcastOSS/a7b8933dd8e368535378cda25c92d19a). 7 | 8 | If you haven't previously signed a Comcast CLA, you'll automatically be asked to when you open a pull request. Alternatively, we can e-mail you a PDF that you can sign and scan back to us. Please send us an e-mail or create a new GitHub issue to request a PDF version of the CLA. 9 | 10 | For more details about contributing to GitHub projects see 11 | http://gun.io/blog/how-to-github-fork-branch-and-pull-request/ -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## I found the following issue: 2 | 3 | Describe in as much detail as possible the issue you have discovered. 4 | 5 | 6 | 7 | ### Recommendations on Solutions: 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2017 Comcast Cable Communications Management, LLC 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | Pattern Lab Node - Webpack Edition 2 | 3 | Copyright 2017 Comcast Cable Communications Management, LLC 4 | Inspired By: https://github.com/pattern-lab/edition-node-gulp 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "edition-node-webpack", 3 | "description": "A pure wrapper around patternlab-node core, the default pattern engine, and supporting frontend assets.", 4 | "version": "2.0.2", 5 | "dependencies": { 6 | "@babel/cli": "^7.6.0", 7 | "@babel/core": "^7.6.0", 8 | "@babel/plugin-proposal-class-properties": "^7.5.5", 9 | "@babel/polyfill": "^7.6.0", 10 | "@babel/preset-env": "^7.6.0", 11 | "@babel/register": "^7.6.0", 12 | "babel-core": "^7.0.0-bridge.0", 13 | "babel-loader": "^8.0.6", 14 | "copy-webpack-plugin": "^5.1.1", 15 | "core-js": "^3.2.1", 16 | "event-hooks-webpack-plugin": "^2.1.4", 17 | "globby": "^9.1.0", 18 | "patternlab-node": "^2.12.0", 19 | "styleguidekit-assets-default": "^3.5.2", 20 | "styleguidekit-mustache-default": "^3.1.0", 21 | "uglifyjs-webpack-plugin": "^2.2.0", 22 | "webpack": "^4.40.2", 23 | "webpack-config-utils": "^2.3.1", 24 | "webpack-merge": "^4.2.2" 25 | }, 26 | "repository": "git@github.com:Comcast/patternlab-edition-node-webpack.git", 27 | "bugs": "https://github.com/Comcast/patternlab-edition-node-webpack/issues", 28 | "author": "Matt Bulfair ", 29 | "contributors": [ 30 | "Josh Schneider ", 31 | "Paul Wright " 32 | ], 33 | "scripts": { 34 | "start": "run-p patternlab:serve", 35 | "webpack:version": "webpack --v", 36 | "patternlab:build": "webpack --mode=production --env.production", 37 | "patternlab:serve": "webpack-dev-server --mode=development --env.development", 38 | "patternlab:version": "node patternlab.js version", 39 | "patternlab:help": "node patternlab.js help", 40 | "patternlab:patternsonly": "node patternlab.js patternsonly", 41 | "patternlab:liststarterkits": "node patternlab.js liststarterkits", 42 | "patternlab:loadstarterkit": "node patternlab.js loadstarterkit", 43 | "patternlab:installplugin": "node patternlab.js installplugin", 44 | "postinstall": "node scripts/postinstall.js", 45 | "diagnosis": "run-s patternlab:version webpack:version patternlab:build patternlab:serve" 46 | }, 47 | "license": "Apache-2.0", 48 | "engines": { 49 | "node": ">=5.0" 50 | }, 51 | "babel": { 52 | "presets": [ 53 | [ 54 | "@babel/preset-env", 55 | { 56 | "useBuiltIns": "usage", 57 | "corejs": 3 58 | } 59 | ] 60 | ], 61 | "plugins": [ 62 | "@babel/plugin-proposal-class-properties" 63 | ] 64 | }, 65 | "devDependencies": { 66 | "kind-of": "^6.0.3", 67 | "npm-run-all": "^4.1.5", 68 | "serialize-javascript": "^3.1.0", 69 | "webpack-cli": "^3.3.9", 70 | "webpack-dev-server": "^3.8.1" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /patternlab-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": { 3 | "webpackDevServer": { 4 | "url": "http://localhost", 5 | "port": 3000, 6 | "watchContentBase": true, 7 | "watchOptions": { 8 | "aggregateTimeout": 500, 9 | "ignored": [], 10 | "info-verbosity": "verbose" 11 | } 12 | }, 13 | "webpackMerge": { 14 | "entry": "replace" 15 | }, 16 | "uglify": { 17 | "sourceMap": false, 18 | "parallel": true, 19 | "uglifyOptions": { 20 | "mangle": false 21 | } 22 | }, 23 | "namespace": "" 24 | }, 25 | "paths": { 26 | "source": { 27 | "root": "./source/", 28 | "app": "./source/_app/", 29 | "patterns": "./source/_patterns/", 30 | "data": "./source/_data/", 31 | "meta": "./source/_meta/", 32 | "annotations": "./source/_annotations/", 33 | "styleguide": "./node_modules/styleguidekit-assets-default/dist/", 34 | "patternlabFiles": 35 | "./node_modules/styleguidekit-mustache-default/views/", 36 | "js": "./source/js/", 37 | "images": "./source/images/", 38 | "fonts": "./source/fonts/", 39 | "css": "./source/css/" 40 | }, 41 | "public": { 42 | "root": "./public/", 43 | "patterns": "./public/patterns/", 44 | "data": "./public/styleguide/data/", 45 | "annotations": "./public/annotations/", 46 | "styleguide": "./public/styleguide/", 47 | "js": "./public/js/", 48 | "images": "./public/images/", 49 | "fonts": "./public/fonts/", 50 | "css": "./public/css/" 51 | } 52 | }, 53 | "styleGuideExcludes": [], 54 | "defaultPattern": "all", 55 | "defaultShowPatternInfo": false, 56 | "cleanPublic": true, 57 | "patternExtension": "mustache", 58 | "debug": false, 59 | "ishControlsHide": { 60 | "s": false, 61 | "m": false, 62 | "l": false, 63 | "full": false, 64 | "random": false, 65 | "disco": false, 66 | "hay": true, 67 | "mqs": false, 68 | "find": false, 69 | "views-all": false, 70 | "views-annotations": false, 71 | "views-code": false, 72 | "views-new": false, 73 | "tools-all": false, 74 | "tools-docs": false 75 | }, 76 | "ishViewportRange": { 77 | "s": [240, 500], 78 | "m": [768, 768], 79 | "l": [800, 2600] 80 | }, 81 | "patternStateCascade": ["inprogress", "inreview", "complete"], 82 | "patternStates": {}, 83 | "patternExportPatternPartials": [], 84 | "patternExportDirectory": "./pattern_exports/", 85 | "cacheBust": true, 86 | "starterkitSubDir": "dist", 87 | "starterkitPostInstallClean": false, 88 | "outputFileSuffixes": { 89 | "rendered": ".rendered", 90 | "rawTemplate": "", 91 | "markupOnly": ".markup-only" 92 | }, 93 | "cleanOutputHtml": true, 94 | "exportToGraphViz": false 95 | } 96 | -------------------------------------------------------------------------------- /patternlab.js: -------------------------------------------------------------------------------- 1 | // NOTE: named arguments passed to npm scripts must be prefixed with '--' 2 | // e.g. npm run loadstarterkit -- --kit=some-kit-name --clean 3 | const plConfig = require('./patternlab-config.json'); 4 | const patternlab = require('patternlab-node')(plConfig); 5 | 6 | function getConfiguredCleanOption() { 7 | return plConfig.cleanPublic; 8 | } 9 | 10 | function build(done) { 11 | done = done || function(){}; 12 | 13 | const buildResult = patternlab.build(() => {}, getConfiguredCleanOption()); 14 | 15 | // handle async version of Pattern Lab 16 | if (buildResult instanceof Promise) { 17 | return buildResult.then(done); 18 | } 19 | 20 | return null; 21 | } 22 | 23 | function version() { 24 | patternlab.version(); 25 | } 26 | 27 | function help(){ 28 | patternlab.help(); 29 | } 30 | 31 | function patternsonly() { 32 | function noop(){} 33 | 34 | patternlab.patternsonly(noop, plConfig.cleanPublic); 35 | } 36 | 37 | function liststarterkits() { 38 | patternlab.liststarterkits() 39 | } 40 | 41 | function loadstarterkit(kit, clean) { 42 | 43 | if(!clean) { 44 | clean = false; 45 | } 46 | patternlab.loadstarterkit(kit, clean); 47 | } 48 | 49 | function installplugin(plugin) { 50 | patternlab.installplugin(plugin); 51 | } 52 | 53 | for (var i=0; i < process.argv.length; i++) { 54 | 55 | switch (process.argv[i]) { 56 | case 'build': 57 | build(); 58 | break; 59 | case 'version': 60 | version(); 61 | break; 62 | case 'help': 63 | help(); 64 | break; 65 | case 'patternsonly': 66 | patternsonly(); 67 | break; 68 | case 'liststarterkits': 69 | liststarterkits(); 70 | break; 71 | case 'loadstarterkit': 72 | if(process.env.npm_config_kit) { 73 | loadstarterkit(process.env.npm_config_kit, process.env.npm_config_clean); 74 | } else { 75 | console.info("====[ Pattern Lab Error: No Valid Kit Found ]===="); 76 | } 77 | break; 78 | case 'installplugin': 79 | if(process.env.npm_config_plugin) { 80 | installplugin(process.env.npm_config_plugin); 81 | } else { 82 | console.info("====[ Pattern Lab Error: No Valid Plugin Found ]===="); 83 | } 84 | break; 85 | } 86 | } -------------------------------------------------------------------------------- /public/.gitkeep: -------------------------------------------------------------------------------- 1 | placeholder for public -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | [![Apache V2 License](http://img.shields.io/badge/license-Apache%20V2-blue.svg)](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/LICENSE) 2 | 3 | # Pattern Lab Node - Webpack Edition 4 | 5 | The webpack wrapper around [Pattern Lab Node Core](https://github.com/pattern-lab/patternlab-node) providing tasks to interact with the core library and move supporting frontend assets. 6 | 7 | ## Packaged Components 8 | 9 | The webpack edition comes with the following components: 10 | 11 | - `patternlab-node`: [GitHub](https://github.com/pattern-lab/patternlab-node), [npm](https://www.npmjs.com/package/patternlab-node) 12 | - `patternengine-node-mustache`: [GitHub](https://github.com/pattern-lab/patternengine-node-mustache), [npm](https://www.npmjs.com/package/patternengine-node-mustache) 13 | - `pattern-lab/styleguidekit-assets-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-assets-default) 14 | - `pattern-lab/styleguidekit-mustache-default`: [GitHub](https://github.com/pattern-lab/styleguidekit-mustache-default) 15 | 16 | ## Prerequisites 17 | 18 | The Pattern Lab Node - webpack edition uses [Node](https://nodejs.org/en/) for core processing, [npm](https://www.npmjs.com/) to manage project dependencies, and [webpack.io](https://webpack.github.io/) to run tasks and interface with the core library. Node version 4 or higher suffices. You can follow the directions for [installing Node](https://nodejs.org/en/download/) on the Node website if you haven't done so already. Installation of Node will include npm. 19 | 20 | ## Quickstart Guide 21 | 22 | _Note: You must have all of the prerequisites first_ 23 | 24 | 1. Download the `.zip` or fork this repository, then clone it locally. 25 | > `git clone git@github.com:YOURGROUP/patternlab-edition-node-webpack.git` 26 | 1. In a terminal window, navigate to the downloaded directory 27 | > `cd path/to/patternlab-edition-node-webpack` 28 | 1. To populate Patternlab with sample data, install a starter kit, there are many [starterkits](https://github.com/pattern-lab?utf8=%E2%9C%93&q=starterkit&type=&language=) choose from 29 | > `npm install starterkit-mustache-demo` 30 | 1. Generate sample files 31 | > `npm run patternlab:loadstarterkit --kit=starterkit-mustache-demo` 32 | 1. Show Patternlab in a Webbrowser 33 | > `npm run patternlab:serve` 34 | 35 | ## Installing 36 | 37 | `npm install` 38 | 39 | ### What's Included 40 | 41 | The pre-built project comes with the [Base Starterkit for Mustache](https://github.com/pattern-lab/starterkit-mustache-base) installed by default. 42 | 43 | **Please note:** Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To upgrade the webpack edition or to install plug-ins you'll need to be familiar with npm. 44 | 45 | ### Use npm 46 | 47 | `npm` is a dependency management and package system which can pull in all of the webpack editions's dependencies for you. To accomplish this: 48 | 49 | - download or `git clone` this repository to an install location. 50 | 51 | - run the following 52 | 53 | ``` 54 | cd install/location 55 | npm install 56 | ``` 57 | 58 | Running `npm install` from a directory containing a `package.json` file will download all dependencies defined within. The `package-lock.json` file is automatically managaged everytime you add/remove/upgrade a dependency. 59 | 60 | #### Install the Webpack Edition of Pattern Lab Node as a Dependency 61 | 62 | Most people want to run Pattern Lab Node standalone and not as a dependency. If you wish to install as a dependency you can do the following: 63 | 64 | Use npm's `install` command with an argument to install the Webpack Edition into a location of your choosing. In Terminal type: 65 | 66 | cd install/location/ 67 | npm install edition-node-webpack 68 | 69 | This will install the Webpack Edition into a directory called `node_modules` in `install/location/`. 70 | 71 | ## Getting Started 72 | 73 | The Pattern Lab Node - Webpack Edition ships with a [base experience](https://github.com/pattern-lab/starterkit-mustache-base) which serves as clean place to start from scratch with Pattern Lab. But if you want to get rolling with a starterkit of your own, or use the [demo starterkit](https://github.com/pattern-lab/starterkit-mustache-demo) like the one on [demo.patternlab.io](http://demo.patternlab.io), you can do so automatically at time of `npm install` by adding your starterkit to the `package.json` file. 74 | 75 | You can also [work with starterkits using the command line](https://github.com/pattern-lab/patternlab-node/wiki/Importing-Starterkits). 76 | 77 | ## Updating Pattern Lab 78 | 79 | To update Pattern Lab please refer to each component's GitHub repository, and the [master instructions for core](https://github.com/pattern-lab/patternlab-node/wiki/Upgrading). The components are listed at the top of the README. 80 | 81 | ### List all of the available commands 82 | 83 | To list all available commands type: 84 | 85 | npm run patternlab:help 86 | 87 | ### Generate Pattern Lab 88 | 89 | To generate the front-end for Pattern Lab type: 90 | 91 | npm run patternlab:build 92 | 93 | ### Watch for changes and re-generate Pattern Lab 94 | 95 | To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type: 96 | 97 | npm run patternlab:serve 98 | 99 | Webpack dev server should open [http://localhost:3000](http://localhost:3000) in your browser, both host and port are configurable in the `patternlab-config.json` file. 100 | 101 | ### Install a StarterKit 102 | 103 | To install a specific StarterKit from GitHub type: 104 | 105 | npm install [starterkit-name] 106 | 107 | npm run patternlab:loadstarterkit --kit=[starterkit-name] 108 | 109 | ### Pattern Lab - Configuration 110 | 111 | Unlike the other editions, there were a few options added just for this edition that allow for easier upgrading, and better flexibility. 112 | 113 | #### Custom Webpack Configuration and Merge Options 114 | 115 | In this edition, it's important to make the configuration for webpack something very easy to update, and very easy to modify. The current setting for webpack custom configuration and merge are described [here.](https://github.com/Comcast/patternlab-edition-node-webpack/blob/master/source/_app/readme.md) 116 | 117 | You can change how it merges by changing this object in `patternlab-config.json`: 118 | 119 | ```javascript 120 | "webpackMerge": { 121 | "entry": "replace" 122 | }, 123 | ``` 124 | By default merge does a `append` if that option works for you only set which webpack configuration you want to change. The merge setting is: `smartStrategy` which is documented over on this [page.](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration) 125 | 126 | #### Setting Webpack Dev Server 127 | 128 | You can set several options to configure your dev server. You can also in the CLI pass any option on demand. 129 | 130 | ```javascript 131 | "webpackDevServer": { 132 | "url": "http://localhost", 133 | "port": 3000, 134 | "watchContentBase": true, 135 | "watchOptions": { 136 | "aggregateTimeout": 500, 137 | "ignored": [], 138 | "info-verbosity": "verbose" 139 | } 140 | }, 141 | ``` 142 | #### Modifying the compression settings for bundles 143 | 144 | You can safely modify the following settings in the the main `webpack.babel.config` that can change how the bundles get optimized. 145 | 146 | _Note: in webpack 4, these settings are automatically triggered when `mode=production` when running the dev server this is not used._ 147 | 148 | All uglify settings are in the `patternlab-config.json`: 149 | 150 | ```javascript 151 | "uglify": { 152 | "sourceMap": false, 153 | "parallel": true, 154 | "uglifyOptions": { 155 | "mangle": false 156 | } 157 | }, 158 | ``` 159 | #### Namespace 160 | In some cases you may want to add a namespace to your JS or CSS/SCSS files. You can now add a global `NAMESPACE` which can be read by any JS module. The sample of .scss includes how to use it in a `.SCSS` file. 161 | 162 | This can be changed in the`patternlab-config.json` under `app`: 163 | 164 | ```javascript 165 | "app": { 166 | "namespace": "" 167 | } 168 | ``` 169 | ### Licenses 170 | * [babel-cli](https://github.com/babel/babel/blob/master/LICENSE) - MIT 171 | * [babel-core](https://github.com/babel/babel/blob/master/LICENSE) - MIT 172 | * [babel-polyfill](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT 173 | * [babel-loader](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT 174 | * [babel-preset-env](https://github.com/babel/babel/blob/master/LICENSE) - MIT 175 | * [babel-register](https://github.com/babel/babel-loader/blob/master/LICENSE) -MIT 176 | * [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/LICENSE) - MIT 177 | * [event-hooks-webpack-plugin](https://github.com/cascornelissen/event-hooks-webpack-plugin/blob/master/LICENSE.md) - MIT 178 | * [globby](https://github.com/sindresorhus/globby/blob/master/license) - MIT 179 | * [patternlab-node](https://github.com/pattern-lab/patternlab-node/blob/master/LICENSE) - MIT 180 | * [styleguidekit-assets-default](https://github.com/pattern-lab/styleguidekit-assets-default/blob/master/LICENSE) - MIT 181 | * [styleguidekit-mustache-default](https://github.com/pattern-lab/styleguidekit-mustache-default/blob/master/LICENSE) - MIT 182 | * [uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/master/LICENSE) - MIT 183 | * [webpack](https://github.com/webpack/webpack/blob/master/LICENSE) - MIT 184 | * [webpack-config-utils](https://github.com/kentcdodds/webpack-config-utils/blob/master/LICENSE) - MIT 185 | * [webpack-dev-server](https://github.com/webpack/webpack-dev-server/blob/master/LICENSE) - MIT 186 | * [webpack-merge](https://github.com/survivejs/webpack-merge/blob/master/LICENSE) - MIT 187 | 188 | ### Contributors 189 | 190 | | | | | 191 | ----------- | :-------------- | :-- | 192 | | ![@Josh68](https://avatars2.githubusercontent.com/u/771447?s=75&v=4)| **Josh Schneider** | [GitHub](https://github.com/Josh68) 193 | | ![@paintedbicycle](https://avatars3.githubusercontent.com/u/371114?s=75&v=4)| **Paul Wright** | [Website](https://paintedbicycle.com) 194 | ```` 195 | -------------------------------------------------------------------------------- /scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | console.log('Beginning Pattern Lab Node Webpack postinstall...'); 3 | 4 | //call the core library postinstall 5 | var patternlab = require('patternlab-node/core/scripts/postinstall'); 6 | -------------------------------------------------------------------------------- /source/_annotations/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Comcast/patternlab-edition-node-webpack/83583eb19e43fe79289330bea427eea218963657/source/_annotations/.gitkeep -------------------------------------------------------------------------------- /source/_app/readme.md: -------------------------------------------------------------------------------- 1 | # _app 2 | 3 | Used to store your app specific files. 4 | 5 | ## Includes 6 | 7 | **Custom Webpack Configuration** 8 | 9 | The file `/source/_app/webpack.app.js` is your custom webpack configuration. This will merge or override the values in `webpack.config.babel.js`. This will provide a way to change your configuration and still get updates in the future. 10 | 11 | **Sample Custom Configuration** 12 | 13 | This edition includes [an example configuration](https://github.com/Comcast/patternlab-edition-node-webpack/blob/latest/source/_app/samples/scss/webpack.app.js) for loading, processing, and bundling SASS/SCSS. Use this sample as a template and modify as you like for working with any project asset-types. 14 | 15 | ### More information 16 | 17 | For details into how webpack merge works, and all the options you can do, check out their page: 18 | [Webpack Merge](https://www.npmjs.com/package/webpack-merge#mergesmartstrategy-key-prependappendreplaceconfiguration--configuration) -------------------------------------------------------------------------------- /source/_app/samples/scss/webpack.app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * NOTE: THIS IS A SAMPLE. 3 | * Any configuration to be merged with 'webpack.config.babel.js' SHOULD BE ADDED TO '/source/_app/webpack.app.js'. 4 | * Add new dependencies like so: 5 | * "yarn add autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes mini-css-extract-plugin sass-loader style-loader --dev" 6 | * or 7 | * "npm install autoprefixer import-glob-loader css-loader node-sass postcss-loader postcss-flexbugs-fixes mini-css-extract-plugin sass-loader style-loader --save-dev" 8 | */ 9 | 10 | 11 | const webpack = require("webpack"); 12 | const { getIfUtils } = require("webpack-config-utils"); 13 | const { resolve } = require("path"); 14 | const globby = require("globby"); 15 | const plConfig = require("../../patternlab-config.json"); 16 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 17 | 18 | module.exports = env => { 19 | const { ifProduction, ifDevelopment } = getIfUtils(env); 20 | const appNamespace = plConfig.app.namespace 21 | ? `$ns:${plConfig.app.namespace};` 22 | : ``; 23 | const app = { 24 | entry: { 25 | "js/sample-project": globby.sync( 26 | [ 27 | resolve(`${plConfig.paths.source.css}scss/*.scss`), 28 | resolve(`${plConfig.paths.source.patterns}**/*.js`), 29 | "!**/*.test.js" 30 | ], 31 | { 32 | gitignore: true 33 | } 34 | ) 35 | }, 36 | optimization: { 37 | splitChunks: { 38 | cacheGroups: { 39 | vendor: { 40 | test: /node_modules/, 41 | chunks: "initial", 42 | name: "js/sample-project-vendor", 43 | priority: 10, 44 | enforce: true 45 | } 46 | } 47 | } 48 | }, 49 | plugins: [ 50 | new MiniCssExtractPlugin({ 51 | filename: "[name].css", 52 | disable: ifDevelopment() 53 | }), 54 | new webpack.DefinePlugin({ 55 | NAMESPACE: appNamespace 56 | }) 57 | ], 58 | module: { 59 | rules: [ 60 | { 61 | test: /\.scss$/, 62 | use: [ 63 | { 64 | loader: ifDevelopment( 65 | "style-loader", 66 | MiniCssExtractPlugin.loader 67 | ) 68 | 69 | }, 70 | { 71 | loader: "css-loader", 72 | options: { 73 | minimize: ifProduction() 74 | } 75 | }, 76 | { 77 | loader: "postcss-loader", 78 | options: { 79 | sourceMap: ifDevelopment(), 80 | plugins: loader => [ 81 | // eslint-disable-line no-unused-vars 82 | require("autoprefixer"), 83 | require("postcss-flexbugs-fixes") 84 | ] 85 | } 86 | }, 87 | { 88 | loader: "sass-loader", 89 | options: { 90 | precision: 3, 91 | sourceMap: ifDevelopment(), 92 | outputStyle: ifProduction( 93 | "compressed", 94 | "expanded" 95 | ), 96 | data: appNamespace 97 | } 98 | }, 99 | { 100 | loader: "import-glob-loader" 101 | } 102 | ] 103 | } 104 | ] 105 | } 106 | }; 107 | return app; 108 | }; 109 | -------------------------------------------------------------------------------- /source/_app/webpack.app.js: -------------------------------------------------------------------------------- 1 | const {getIfUtils} = require('webpack-config-utils'); 2 | 3 | module.exports = env => { 4 | const {ifProd, ifDev} = getIfUtils(env); 5 | 6 | const app = { 7 | //Custom webpack configuration goes here 8 | } 9 | return app; 10 | } 11 | -------------------------------------------------------------------------------- /source/_data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "key": "value", 3 | "key2": "use this for variables you want to load globally", 4 | "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.", 5 | "img": { 6 | "avatar": { 7 | "src": "http://placeimg.com/100/100/people", 8 | "alt": "Avatar" 9 | }, 10 | "square": { 11 | "src": "http://placeimg.com/300/300/nature", 12 | "alt": "Square" 13 | }, 14 | "rectangle": { 15 | "src": "http://placeimg.com/400/300/tech", 16 | "alt": "Rectangle" 17 | }, 18 | "landscape-4x3": { 19 | "src": "http://placeimg.com/400/300/tech", 20 | "alt": "4x3 Image" 21 | }, 22 | "landscape-16x9": { 23 | "src": "http://placeimg.com/640/360/tech", 24 | "alt": "16x9 Image" 25 | } 26 | }, 27 | "headline": { 28 | "short": "Lorizzle pimpin' dolizzle sit amet I", 29 | "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my" 30 | }, 31 | "excerpt": { 32 | "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.", 33 | "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.", 34 | "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni." 35 | }, 36 | "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.", 37 | "url": "http://lorizzle.nl/", 38 | "name": { 39 | "first": "Junius", 40 | "firsti": "J", 41 | "middle": "Marius", 42 | "middlei": "M", 43 | "last": "Koolen", 44 | "lasti": "K" 45 | }, 46 | "year": { 47 | "long": "2013", 48 | "short": "13" 49 | }, 50 | "month": { 51 | "long": "January", 52 | "short": "Jan", 53 | "digit": "01" 54 | }, 55 | "dayofweek": { 56 | "long": "Sunday", 57 | "short": "Sun" 58 | }, 59 | "day": { 60 | "long": "01", 61 | "short": "1", 62 | "ordinal": "st" 63 | }, 64 | "hour": { 65 | "long": "06", 66 | "short": "6", 67 | "military": "06", 68 | "ampm": "am" 69 | }, 70 | "minute": { 71 | "long": "20", 72 | "short": "20" 73 | }, 74 | "seconds": "31" 75 | } 76 | -------------------------------------------------------------------------------- /source/_data/listitems.json: -------------------------------------------------------------------------------- 1 | { 2 | "1": { 3 | "title": "Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.", 4 | "img": { 5 | "avatar": { 6 | "src": "http://placeimg.com/100/100/people", 7 | "alt": "Avatar" 8 | }, 9 | "square": { 10 | "src": "http://placeimg.com/300/300/nature", 11 | "alt": "Square" 12 | }, 13 | "rectangle": { 14 | "src": "http://placeimg.com/400/300/tech", 15 | "alt": "Rectangle" 16 | }, 17 | "landscape-4x3": { 18 | "src": "http://placeimg.com/400/300/tech", 19 | "alt": "4x3 Image" 20 | }, 21 | "landscape-16x9": { 22 | "src": "http://placeimg.com/640/360/tech", 23 | "alt": "16x9 Image" 24 | } 25 | }, 26 | "headline": { 27 | "short": "Lorizzle pimpin' dolizzle sit amet I", 28 | "medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my" 29 | }, 30 | "excerpt": { 31 | "short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.", 32 | "medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.", 33 | "long": "Curabitizzle fo shizzle diam quizzle nisi nizzle mollizzle. Suspendisse boofron. Morbi odio. Sure pizzle. Crazy orci. Shut the shizzle up maurizzle get down get down, check out this a, go to hizzle sit amizzle, malesuada izzle, pede. Pellentesque gravida. Vestibulizzle check it out mi, volutpat izzle, shiz sed, shiznit sempizzle, da bomb. Funky fresh in ipsum. Da bomb volutpat felis vizzle daahng dawg. Crizzle quis dope izzle fo shizzle my ni." 34 | }, 35 | "description": "Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.", 36 | "url": "http://lorizzle.nl/", 37 | "name": { 38 | "first": "Junius", 39 | "firsti": "J", 40 | "middle": "Marius", 41 | "middlei": "M", 42 | "last": "Koolen", 43 | "lasti": "K" 44 | }, 45 | "year": { 46 | "long": "2013", 47 | "short": "13" 48 | }, 49 | "month": { 50 | "long": "January", 51 | "short": "Jan", 52 | "digit": "01" 53 | }, 54 | "dayofweek": { 55 | "long": "Sunday", 56 | "short": "Sun" 57 | }, 58 | "day": { 59 | "long": "01", 60 | "short": "1", 61 | "ordinal": "st" 62 | }, 63 | "hour": { 64 | "long": "06", 65 | "short": "6", 66 | "military": "06", 67 | "ampm": "am" 68 | }, 69 | "minute": { 70 | "long": "20", 71 | "short": "20" 72 | }, 73 | "seconds": "31" 74 | }, 75 | "2": { 76 | "title": "Veggies sunt bona vobis, proinde vos postulo", 77 | "img": { 78 | "avatar": { 79 | "src": "http://placeimg.com/100/100/nature", 80 | "alt": "Avatar" 81 | }, 82 | "square": { 83 | "src": "http://placeimg.com/300/300/tech", 84 | "alt": "Square" 85 | }, 86 | "rectangle": { 87 | "src": "http://placeimg.com/400/300/people", 88 | "alt": "Rectangle" 89 | }, 90 | "landscape-4x3": { 91 | "src": "http://placeimg.com/400/300/people", 92 | "alt": "4x3 Image" 93 | }, 94 | "landscape-16x9": { 95 | "src": "http://placeimg.com/640/360/people", 96 | "alt": "16x9 Image" 97 | } 98 | }, 99 | "headline": { 100 | "short": "Veggies sunt bona vobis, proinde vos", 101 | "medium": "Postulo esse magis azuki bean burdock brussels sprout quandong komatsun" 102 | }, 103 | "excerpt": { 104 | "short": "A fava bean collard greens endive tomatillo lotus root okra winter purslane zucchini parsley spinach artichoke. Brussels sprout pea turnip catsear.", 105 | "medium": "Bush tomato gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.", 106 | "long": "Spinach tigernut. Corn cucumber grape black-eyed pea asparagus spinach avocado dulse bunya nuts epazote celery desert raisin celtuce burdock plantain yarrow napa cabbage. Plantain okra seakale endive tigernut pea sprouts asparagus corn chard peanut beet greens groundnut radicchio carrot coriander gumbo gram celtuce. Jícama nori bamboo shoot collard greens okra radicchio tomato. Catsear mustard corn tigernut celery kale water spinach bok choy." 107 | }, 108 | "description": "Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.", 109 | "url": "http://veggieipsum.com", 110 | "name": { 111 | "first": "Siguror", 112 | "firsti": "S", 113 | "middle": "Aron", 114 | "middlei": "A", 115 | "last": "Hanigan", 116 | "lasti": "H" 117 | }, 118 | "year": { 119 | "long": "2013", 120 | "short": "13" 121 | }, 122 | "month": { 123 | "long": "February", 124 | "short": "Feb", 125 | "digit": "02" 126 | }, 127 | "dayofweek": { 128 | "long": "Monday", 129 | "short": "Mon" 130 | }, 131 | "day": { 132 | "long": "10", 133 | "short": "10", 134 | "ordinal": "th" 135 | }, 136 | "hour": { 137 | "long": "01", 138 | "short": "1", 139 | "military": "13", 140 | "ampm": "pm" 141 | }, 142 | "minute": { 143 | "long": "20", 144 | "short": "20" 145 | }, 146 | "seconds": "31" 147 | }, 148 | "3": { 149 | "title": "Bacon ipsum dolor sit amet turducken strip steak beef ribs shank", 150 | "img": { 151 | "avatar": { 152 | "src": "http://placeimg.com/100/100/tech", 153 | "alt": "Avatar" 154 | }, 155 | "square": { 156 | "src": "http://placeimg.com/300/300/people", 157 | "alt": "Square" 158 | }, 159 | "rectangle": { 160 | "src": "http://placeimg.com/400/300/nature", 161 | "alt": "Rectangle" 162 | }, 163 | "landscape-4x3": { 164 | "src": "http://placeimg.com/400/300/nature", 165 | "alt": "4x3 Image" 166 | }, 167 | "landscape-16x9": { 168 | "src": "http://placeimg.com/640/360/nature", 169 | "alt": "16x9 Image" 170 | } 171 | }, 172 | "headline": { 173 | "short": "Bacon ipsum dolor sit amet spare rib", 174 | "medium": "Tongue pancetta short ribs bacon. Kielbasa ball tip cow bresaola, capic" 175 | }, 176 | "excerpt": { 177 | "short": "Tail jerky rump shoulder t-bone meatball meatloaf salami. Filet mignon shank t-bone venison, ham hock ribeye drumstick bresaola kielbasa. Frankfurter.", 178 | "medium": "Doner biltong turducken leberkas. Rump swine pork loin ribeye ball tip meatloaf, pork chop ground round pig pancetta cow biltong brisket. Beef corned beef beef ribs, bacon pork belly sausage meatball boudin doner ham hock. Swine gro.", 179 | "long": "Und round meatball, bacon pig leberkas corned beef tongue shoulder. Drumstick pork loin prosciutto ball tip shank pancetta spare ribs jowl pastrami. Frankfurter boudin filet mignon ribeye. Pig hamburger strip steak ham turducken prosciutto bresaola ground round pancetta frankfurter jowl. Frankfurter tongue brisket tenderloin, beef ribs pastrami biltong tail bresaola flank. Biltong pork chop beef boudin hamburger bacon. Capicola bresaola sausage." 180 | }, 181 | "description": "Boudin sausage jerky pastrami ground round salami biltong. Sausage fatback strip steak doner pork loin, pork belly drumstick ham short loin hamburger shankle. Short ribs sirloin rump tri-tip beef biltong. Meatball pig salami, jowl pork loin fatback short loin drumstick andouille.", 182 | "url": "http://baconipsum.com/", 183 | "name": { 184 | "first": "Teun", 185 | "firsti": "T", 186 | "middle": "Jodocus", 187 | "middlei": "J", 188 | "last": "Richard", 189 | "lasti": "R" 190 | }, 191 | "year": { 192 | "long": "2013", 193 | "short": "13" 194 | }, 195 | "month": { 196 | "long": "March", 197 | "short": "Mar", 198 | "digit": "03" 199 | }, 200 | "dayofweek": { 201 | "long": "Tuesday", 202 | "short": "Tue" 203 | }, 204 | "day": { 205 | "long": "22", 206 | "short": "22", 207 | "ordinal": "nd" 208 | }, 209 | "hour": { 210 | "long": "04", 211 | "short": "4", 212 | "military": "16", 213 | "ampm": "pm" 214 | }, 215 | "minute": { 216 | "long": "45", 217 | "short": "45" 218 | }, 219 | "seconds": "11" 220 | }, 221 | "4": { 222 | "title": "Whatever swag accusamus occupy, gentrify butcher tote bag", 223 | "img": { 224 | "avatar": { 225 | "src": "http://placeimg.com/100/100/animals", 226 | "alt": "Avatar" 227 | }, 228 | "square": { 229 | "src": "http://placeimg.com/300/300/arch", 230 | "alt": "Square" 231 | }, 232 | "rectangle": { 233 | "src": "http://placeimg.com/400/300/people/grayscale", 234 | "alt": "Rectangle" 235 | }, 236 | "landscape-4x3": { 237 | "src": "http://placeimg.com/400/300/people/greyscale", 238 | "alt": "4x3 Image" 239 | }, 240 | "landscape-16x9": { 241 | "src": "http://placeimg.com/640/360/people/greyscale", 242 | "alt": "16x9 Image" 243 | } 244 | }, 245 | "headline": { 246 | "short": "Nesciunt sunt cillum keytar Pitchfork", 247 | "medium": "Tote bag mixtape PBR Helvetica scenester forage four loko. Irure Tonx" 248 | }, 249 | "excerpt": { 250 | "short": "Golf quis +1, Wes Anderson church-key lo-fi keffiyeh selvage culpa authentic Brooklyn fap chambray. Id synth yr, 3 wolf moon locavore +1 mixtape do.", 251 | "medium": "Sed single-origin coffee anim eu. Bicycle rights Neutra Truffaut pop-up. Paleo hella irure meh Banksy, Wes Anderson typewriter VHS jean shorts yr. Eiusmod officia banjo Thundercats, odio laborum magna deep v cornhole nostrud kitsch.", 252 | "long": "Tattooed Williamsburg. Jean shorts proident kogi laboris. Non tote bag pariatur elit slow-carb, Vice irure eu Echo Park ea aliqua chillwave. Cornhole Etsy quinoa Pinterest cardigan. Excepteur quis forage, Blue Bottle keffiyeh velit hoodie direct trade typewriter Etsy. Fingerstache squid non, sriracha drinking vinegar Shoreditch pork belly. Paleo sartorial mollit 3 wolf moon chambray whatever, sed tote bag small batch freegan. Master cleanse." 253 | }, 254 | "description": "Fanny pack ullamco et veniam semiotics. Shoreditch PBR reprehenderit cliche, magna Tonx aesthetic. Narwhal photo booth DIY aute post-ironic anim. Vice cliche brunch est before they sold out fap, street art Odd Future fashion axe messenger bag nihil Tonx tattooed. Nihil hashtag incididunt, do eu art party Banksy jean shorts four loko typewriter.", 255 | "url": "http://hipsteripsum.me/", 256 | "name": { 257 | "first": "Duane", 258 | "firsti": "D", 259 | "middle": "Edvin", 260 | "middlei": "E", 261 | "last": "Wilms", 262 | "lasti": "W" 263 | }, 264 | "year": { 265 | "long": "2013", 266 | "short": "13" 267 | }, 268 | "month": { 269 | "long": "April", 270 | "short": "Apr", 271 | "digit": "04" 272 | }, 273 | "dayofweek": { 274 | "long": "Wednesday", 275 | "short": "Wed" 276 | }, 277 | "day": { 278 | "long": "13", 279 | "short": "13", 280 | "ordinal": "th" 281 | }, 282 | "hour": { 283 | "long": "10", 284 | "short": "10", 285 | "military": "10", 286 | "ampm": "am" 287 | }, 288 | "minute": { 289 | "long": "14", 290 | "short": "14" 291 | }, 292 | "seconds": "52" 293 | }, 294 | "5": { 295 | "title": "Marshall McLuhan Colbert bump backpack journalist vast wasteland Romenesko CPM", 296 | "img": { 297 | "avatar": { 298 | "src": "http://placeimg.com/100/100/people/grayscale", 299 | "alt": "Avatar" 300 | }, 301 | "square": { 302 | "src": "http://placeimg.com/300/300/animals", 303 | "alt": "Square" 304 | }, 305 | "rectangle": { 306 | "src": "http://placeimg.com/400/300/arch", 307 | "alt": "Rectangle" 308 | }, 309 | "landscape-4x3": { 310 | "src": "http://placeimg.com/400/300/arch", 311 | "alt": "4x3 Image" 312 | }, 313 | "landscape-16x9": { 314 | "src": "http://placeimg.com/640/360/arch", 315 | "alt": "16x9 Image" 316 | } 317 | }, 318 | "headline": { 319 | "short": "Blog meme masthead DocumentCloud Fou", 320 | "medium": "Square tabloid Andy Carvin stupid commenters, Nick Denton mathewi semip" 321 | }, 322 | "excerpt": { 323 | "short": "I love the Weather & Opera section Groupon copyright in the slot, Journal Register open newsroom analytics future totally blowing up on Twitter AOL.", 324 | "medium": "CTR mthomps Flipboard do what you do best and link to the rest Buttry media bias Journal Register RT, newspaper strike do what you do best and link to the rest semipermeable learnings cognitive surplus mathewi, Encyclo Google News.", 325 | "long": "Pulse mathewi Project Thunderdome digital first. HuffPo social media optimization try PR dying the notion of the public monetization data visualization audience atomization overcome community, libel lawyer twitterati should isn't a business model fair use innovation Facebook AOL, Walter Cronkite died for your sins horse-race coverage crowdfunding Patch but what's the business model rubber cement horse-race coverage. Lucius Nieman content farm." 326 | }, 327 | "description": "Like button audience atomization overcome Colbert bump Free Darko inverted pyramid we will make them pay, digital circulation strategy Like button totally blowing up on Twitter church of the savvy. Pictures of Goats section open source discuss Frontline analog thinking filters paidContent.", 328 | "url": "http://www.niemanlab.org/journo-ipsum/", 329 | "name": { 330 | "first": "Frans", 331 | "firsti": "F", 332 | "middle": "Fabius", 333 | "middlei": "F", 334 | "last": "Keegan", 335 | "lasti": "K" 336 | }, 337 | "year": { 338 | "long": "2013", 339 | "short": "13" 340 | }, 341 | "month": { 342 | "long": "May", 343 | "short": "May", 344 | "digit": "05" 345 | }, 346 | "dayofweek": { 347 | "long": "Thursday", 348 | "short": "Thu" 349 | }, 350 | "day": { 351 | "long": "26", 352 | "short": "26", 353 | "ordinal": "th" 354 | }, 355 | "hour": { 356 | "long": "06", 357 | "short": "6", 358 | "military": "18", 359 | "ampm": "pm" 360 | }, 361 | "minute": { 362 | "long": "37", 363 | "short": "37" 364 | }, 365 | "seconds": "24" 366 | }, 367 | "6": { 368 | "title": "Thunder, thunder, thundercats, Ho!", 369 | "img": { 370 | "avatar": { 371 | "src": "http://placeimg.com/100/100/arch", 372 | "alt": "Avatar" 373 | }, 374 | "square": { 375 | "src": "http://placeimg.com/300/300/animals", 376 | "alt": "Square" 377 | }, 378 | "rectangle": { 379 | "src": "http://placeimg.com/400/300/people/grayscale", 380 | "alt": "Rectangle" 381 | }, 382 | "landscape-4x3": { 383 | "src": "http://placeimg.com/400/300/people/grayscale", 384 | "alt": "4x3 Image" 385 | }, 386 | "landscape-16x9": { 387 | "src": "http://placeimg.com/640/360/people/grayscale", 388 | "alt": "16x9 Image" 389 | } 390 | }, 391 | "headline": { 392 | "short": "Hong Kong Phooey, number one super g", 393 | "medium": "Hong Kong Phooey, quicker than the human eye. He's got style, a groovy" 394 | }, 395 | "excerpt": { 396 | "short": "Style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number.", 397 | "medium": "One super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic! One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one.", 398 | "long": "It's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be. This is my boss, Jonathan Hart, a self-made millionaire, he's quite a guy. This is Mrs H., she's gorgeous, she's one lady who knows how to take care of herself." 399 | }, 400 | "description": "Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.", 401 | "url": "http://www.malevole.com/mv/misc/text/", 402 | "name": { 403 | "first": "Fergus", 404 | "firsti": "F", 405 | "middle": "Jon", 406 | "middlei": "J", 407 | "last": "Althuis", 408 | "lasti": "A" 409 | }, 410 | "year": { 411 | "long": "2013", 412 | "short": "13" 413 | }, 414 | "month": { 415 | "long": "June", 416 | "short": "Jun", 417 | "digit": "06" 418 | }, 419 | "dayofweek": { 420 | "long": "Friday", 421 | "short": "Fri" 422 | }, 423 | "day": { 424 | "long": "08", 425 | "short": "8", 426 | "ordinal": "th" 427 | }, 428 | "hour": { 429 | "long": "11", 430 | "short": "11", 431 | "military": "23", 432 | "ampm": "pm" 433 | }, 434 | "minute": { 435 | "long": "37", 436 | "short": "37" 437 | }, 438 | "seconds": "33" 439 | }, 440 | "7": { 441 | "title": "Yeah, I like animals better than people sometimes", 442 | "img": { 443 | "avatar": { 444 | "src": "http://placeimg.com/100/100/any", 445 | "alt": "Avatar" 446 | }, 447 | "square": { 448 | "src": "http://placeimg.com/300/300/any", 449 | "alt": "Square" 450 | }, 451 | "rectangle": { 452 | "src": "http://placeimg.com/400/300/any", 453 | "alt": "Rectangle" 454 | }, 455 | "landscape-4x3": { 456 | "src": "http://placeimg.com/400/300/any", 457 | "alt": "4x3 Image" 458 | }, 459 | "landscape-16x9": { 460 | "src": "http://placeimg.com/640/360/any", 461 | "alt": "16x9 Image" 462 | } 463 | }, 464 | "headline": { 465 | "short": "Now that we know who you are, I know", 466 | "medium": "Who I am. I'm not a mistake! It all makes sense! In a comic, you know" 467 | }, 468 | "excerpt": { 469 | "short": "How you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me.", 470 | "medium": "The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amin.", 471 | "long": "Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. Acid lysine. Unless they're." 472 | }, 473 | "description": "Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull.", 474 | "url": "http://slipsum.com/lite/", 475 | "name": { 476 | "first": "Bertil", 477 | "firsti": "B", 478 | "middle": "Pier", 479 | "middlei": "P", 480 | "last": "Aaij", 481 | "lasti": "A" 482 | }, 483 | "year": { 484 | "long": "2013", 485 | "short": "13" 486 | }, 487 | "month": { 488 | "long": "July", 489 | "short": "Jul", 490 | "digit": "07" 491 | }, 492 | "dayofweek": { 493 | "long": "Saturday", 494 | "short": "Sat" 495 | }, 496 | "day": { 497 | "long": "22", 498 | "short": "22", 499 | "ordinal": "nd" 500 | }, 501 | "hour": { 502 | "long": "11", 503 | "short": "11", 504 | "military": "11", 505 | "ampm": "am" 506 | }, 507 | "minute": { 508 | "long": "12", 509 | "short": "12" 510 | }, 511 | "seconds": "47" 512 | }, 513 | "8": { 514 | "title": "Webtwo ipsum dolor sit amet, eskobo chumby doostang bebo", 515 | "img": { 516 | "avatar": { 517 | "src": "http://placeimg.com/100/100/any/grayscale", 518 | "alt": "Avatar" 519 | }, 520 | "square": { 521 | "src": "http://placeimg.com/300/300/any/grayscale", 522 | "alt": "Square" 523 | }, 524 | "rectangle": { 525 | "src": "http://placeimg.com/400/300/any/grayscale", 526 | "alt": "Rectangle" 527 | }, 528 | "landscape-4x3": { 529 | "src": "http://placeimg.com/400/300/any/grayscale", 530 | "alt": "4x3 Image" 531 | }, 532 | "landscape-16x9": { 533 | "src": "http://placeimg.com/640/360/any/grayscale", 534 | "alt": "16x9 Image" 535 | } 536 | }, 537 | "headline": { 538 | "short": "Webtwo ipsum dolor sit amet, eskobo", 539 | "medium": "Chumby doostang bebo. Wakoopa oooj geni zoho loopt eskobo sifteo chart" 540 | }, 541 | "excerpt": { 542 | "short": "Dropio, chumby waze dopplr plugg oooj yammer jibjab imvu yuntaa knewton, mobly trulia airbnb bitly chegg tivo empressr knewton. Plickers spock voxy.", 543 | "medium": "Zooomr kippt voxy zinch appjet napster trulia, zappos wufoo zapier spotify mzinga jaiku fleck, disqus lijit voxy voki yoono. Dogster elgg jibjab xobni kazaa bebo udemy sifteo kiko, elgg knewton skype mog octopart zoodles kazaa udem.", 544 | "long": "Appjet spock handango empressr lijit palantir weebly dropio jibjab revver kaboodle spotify orkut mobly chegg akismet, handango ebay woopra revver joukuu kosmix unigo oooooc wufoo zanga kno zinch spock knewton. Balihoo greplin bebo squidoo skype kaboodle meebo disqus joost gooru, zlio tumblr edmodo palantir eskobo shopify kiko gsnap. Greplin balihoo chartly plugg imeem diigo trulia plickers qeyno wikia akismet, palantir grockit prezi jabber zo." 545 | }, 546 | "description": "Wufoo diigo grockit sifteo divvyshot, unigo zooomr revver. Edmodo appjet joyent skype bubbli jajah zoodles joukuu xobni hojoki edmodo appjet, mozy mzinga akismet yuntaa joost yuntaa geni tivo insala yoono chumby, grockit sococo loopt zanga etsy cloudera koofers empressr jiglu blippy. Omgpop lanyrd joukuu sococo zimbra airbnb movity jibjab, foodzie.", 547 | "url": "http://web20ipsum.com", 548 | "name": { 549 | "first": "Freyr", 550 | "firsti": "F", 551 | "middle": "Ninian", 552 | "middlei": "N", 553 | "last": "Hines", 554 | "lasti": "H" 555 | }, 556 | "year": { 557 | "long": "2013", 558 | "short": "13" 559 | }, 560 | "month": { 561 | "long": "August", 562 | "short": "Aug", 563 | "digit": "08" 564 | }, 565 | "dayofweek": { 566 | "long": "Sunday", 567 | "short": "Sun" 568 | }, 569 | "day": { 570 | "long": "31", 571 | "short": "31", 572 | "ordinal": "st" 573 | }, 574 | "hour": { 575 | "long": "03", 576 | "short": "3", 577 | "military": "15", 578 | "ampm": "pm" 579 | }, 580 | "minute": { 581 | "long": "42", 582 | "short": "42" 583 | }, 584 | "seconds": "21" 585 | }, 586 | "9": { 587 | "title": "Rebel Mission to Ord Mantell", 588 | "img": { 589 | "avatar": { 590 | "src": "http://placeimg.com/100/100/any/sepia", 591 | "alt": "Avatar" 592 | }, 593 | "square": { 594 | "src": "http://placeimg.com/300/300/any/sepia", 595 | "alt": "Square" 596 | }, 597 | "rectangle": { 598 | "src": "http://placeimg.com/400/300/any/sepia", 599 | "alt": "Rectangle" 600 | }, 601 | "landscape-4x3": { 602 | "src": "http://placeimg.com/400/300/any/sepia", 603 | "alt": "4x3 Image" 604 | }, 605 | "landscape-16x9": { 606 | "src": "http://placeimg.com/640/360/any/sepia", 607 | "alt": "16x9 Image" 608 | } 609 | }, 610 | "headline": { 611 | "short": "All right. Well, take care of yourself, Han", 612 | "medium": "You don't believe in the Force, do you? The Force is strong with this one" 613 | }, 614 | "excerpt": { 615 | "short": "I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.", 616 | "medium": "I'm surprised you had the courage to take the responsibility yourself. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. You don't be.", 617 | "long": "A tremor in the Force. The last time I felt it was in the presence of my old master. You don't believe in the Force, do you? I have traced the Rebel spies to her. Now she is my only link to finding their secret base. A tremor in the Force. The last time I felt it was in the presence of my old master. I'm trying not to, kid. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. There's nothing for me here." 618 | }, 619 | "description": "I find your lack of faith disturbing. A tremor in the Force. The last time I felt it was in the presence of my old master. Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. The plans you refer to will soon be back in our hands.", 620 | "url": "http://chrisvalleskey.com/fillerama/", 621 | "name": { 622 | "first": "Jacobus", 623 | "firsti": "J", 624 | "middle": "Domitianus", 625 | "middlei": "D", 626 | "last": "Sneiders", 627 | "lasti": "S" 628 | }, 629 | "year": { 630 | "long": "2013", 631 | "short": "13" 632 | }, 633 | "month": { 634 | "long": "September", 635 | "short": "Sep", 636 | "digit": "09" 637 | }, 638 | "dayofweek": { 639 | "long": "Monday", 640 | "short": "Mon" 641 | }, 642 | "day": { 643 | "long": "04", 644 | "short": "4", 645 | "ordinal": "th" 646 | }, 647 | "hour": { 648 | "long": "09", 649 | "short": "9", 650 | "military": "09", 651 | "ampm": "am" 652 | }, 653 | "minute": { 654 | "long": "04", 655 | "short": "4" 656 | }, 657 | "seconds": "37" 658 | }, 659 | "10": { 660 | "title": "Help, help, I'm being repressed!", 661 | "img": { 662 | "avatar": { 663 | "src": "http://placeimg.com/100/100/tech/grayscale", 664 | "alt": "Avatar" 665 | }, 666 | "square": { 667 | "src": "http://placeimg.com/300/300/nature/grayscale", 668 | "alt": "Square" 669 | }, 670 | "rectangle": { 671 | "src": "http://placeimg.com/400/300/arch/grayscale", 672 | "alt": "Rectangle" 673 | }, 674 | "landscape-4x3": { 675 | "src": "http://placeimg.com/400/300/arch/grayscale", 676 | "alt": "4x3 Image" 677 | }, 678 | "landscape-16x9": { 679 | "src": "http://placeimg.com/640/360/arch/grayscale", 680 | "alt": "16x9 Image" 681 | } 682 | }, 683 | "headline": { 684 | "short": "The swallow may fly south with the sun", 685 | "medium": "On second thoughts, let's not go there. It is a silly place. You don't" 686 | }, 687 | "excerpt": { 688 | "short": "The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.", 689 | "medium": "The Knights Who Say Ni demand a sacrifice! Found them? In Mercia?! The coconut's tropical! Where'd you get the coconuts? Why do you think that she is a witch? I am your king. You don't vote for kings. But you are dressed as one. Oh, ow!", 690 | "long": "Well, I didn't vote for you. Burn her! Be quiet! He hasn't got shit all over him. Where'd you get the coconuts? The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. No! Yes, yes. A bit. But she's got a wart. Shut up! Will you shut up?! I have to push the pram a lot. Now, look here, my good man. Frighten us, English pig-dogs! Go and boil your bottoms." 691 | }, 692 | "description": "The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!", 693 | "url": "http://chrisvalleskey.com/fillerama/", 694 | "name": { 695 | "first": "Plinius", 696 | "firsti": "P", 697 | "middle": "Varinius", 698 | "middlei": "V", 699 | "last": "Sloane", 700 | "lasti": "S" 701 | }, 702 | "year": { 703 | "long": "2013", 704 | "short": "13" 705 | }, 706 | "month": { 707 | "long": "October", 708 | "short": "Oct", 709 | "digit": "10" 710 | }, 711 | "dayofweek": { 712 | "long": "Tuesday", 713 | "short": "Tue" 714 | }, 715 | "day": { 716 | "long": "25", 717 | "short": "25", 718 | "ordinal": "th" 719 | }, 720 | "hour": { 721 | "long": "03", 722 | "short": "3", 723 | "military": "03", 724 | "ampm": "am" 725 | }, 726 | "minute": { 727 | "long": "51", 728 | "short": "51" 729 | }, 730 | "second": "19" 731 | }, 732 | "11": { 733 | "title": "Danish danish candy canes bonbon cheesecake danish marzipan", 734 | "img": { 735 | "avatar": { 736 | "src": "http://placeimg.com/100/100/tech/sepia", 737 | "alt": "Avatar" 738 | }, 739 | "square": { 740 | "src": "http://placeimg.com/300/300/animals/sepia", 741 | "alt": "Square" 742 | }, 743 | "rectangle": { 744 | "src": "http://placeimg.com/400/300/arch/sepia", 745 | "alt": "Rectangle" 746 | }, 747 | "landscape-4x3": { 748 | "src": "http://placeimg.com/400/300/arch/sepia", 749 | "alt": "4x3 Image" 750 | }, 751 | "landscape-16x9": { 752 | "src": "http://placeimg.com/640/360/arch/sepia", 753 | "alt": "16x9 Image" 754 | } 755 | }, 756 | "headline": { 757 | "short": "Carrot cake fruitcake dessert apple", 758 | "medium": "Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin" 759 | }, 760 | "excerpt": { 761 | "short": "Bread cotton candy marzipan. Baker too go gingerbread topping cupcake donut. Fruitcake marzipan bear claw tart toffee candy cheesecake. Lemon drops.", 762 | "medium": "Cupcake chupa chups pudding gummies. Unerdwear.com cupcake candy soufflé sesame snaps macaroon sesame snaps. Tart dragée muffin. Sweet roll gummi bears caramels fruitcake candy cake. Cotton candy carrot cake tart cotton candy. Jelly.", 763 | "long": "Gingerbread candy icing pastry cake bonbon fruitcake donut. Powder liquorice dessert tart croissant cake. Dessert chocolate cake sweet roll candy candy sesame snaps tiramisu ice cream. Candy candy canes marzipan biscuit cupcake pie pudding. Donut cotton candy muffin. Pastry bear claw icing halvah. Gingerbread cotton candy sweet roll toffee chocolate jujubes. Wafer jujubes danish ice cream lemon drops wafer. Sesame snaps cupcake gummies browni." 764 | }, 765 | "description": "Sugar plum wafer soufflé ice cream. Wafer topping biscuit pie gummi bears topping. Gummies toffee powder applicake oat cake cookie. Bear claw candy tootsie roll fruitcake danish applicake candy canes macaroon. Liquorice tiramisu danish cotton candy gummies. Tiramisu dessert gummi bears macaroon sweet roll jelly-o gummi bears marzipan.", 766 | "url": "http://cupcakeipsum.com/", 767 | "name": { 768 | "first": "Matthias", 769 | "firsti": "M", 770 | "middle": "Brady", 771 | "middlei": "B", 772 | "last": "Macguinness", 773 | "lasti": "M" 774 | }, 775 | "year": { 776 | "long": "2013", 777 | "short": "13" 778 | }, 779 | "month": { 780 | "long": "November", 781 | "short": "Nov", 782 | "digit": "11" 783 | }, 784 | "dayofweek": { 785 | "long": "Wednesday", 786 | "short": "Wed" 787 | }, 788 | "day": { 789 | "long": "19", 790 | "short": "19", 791 | "ordinal": "th" 792 | }, 793 | "hour": { 794 | "long": "11", 795 | "short": "11", 796 | "military": "23", 797 | "ampm": "pm" 798 | }, 799 | "minute": { 800 | "long": "55", 801 | "short": "55" 802 | }, 803 | "seconds": "12" 804 | }, 805 | "12": { 806 | "title": "Cottage cheese brie lancashire. Boursin when the cheese comes out.", 807 | "img": { 808 | "avatar": { 809 | "src": "http://placeimg.com/100/100/people/sepia", 810 | "alt": "Avatar" 811 | }, 812 | "square": { 813 | "src": "http://placeimg.com/300/300/people/sepia", 814 | "alt": "Square" 815 | }, 816 | "rectangle": { 817 | "src": "http://placeimg.com/400/300/people/sepia", 818 | "alt": "Rectangle" 819 | }, 820 | "landscape-4x3": { 821 | "src": "http://placeimg.com/400/300/people/sepia", 822 | "alt": "4x3 Image" 823 | }, 824 | "landscape-16x9": { 825 | "src": "http://placeimg.com/640/360/people/sepia", 826 | "alt": "16x9 Image" 827 | } 828 | }, 829 | "headline": { 830 | "short": "Cauliflower cheese cream cheese baby", 831 | "medium": "Lancashire cheesy feet rubber cheese cheese and wine gouda the big chee" 832 | }, 833 | "excerpt": { 834 | "short": "Queso fromage. Taleggio boursin bavarian bergkase cream cheese when the cheese comes out everybody's happy port-salut halloumi pecorino. Caerphilly cut the cheese manchego camembert de normandie goat melted cheese cheese and biscuit.", 835 | "medium": "Pecorino queso lancashire. Manchego lancashire cheesy feet emmental babybel cheese strings dolcelatte bavarian bergkase. Ricotta cheese slices cheesy grin cow cheesecake smelly cheese mascarpone lancashire. Cow say cheese babybel do.", 836 | "long": "Cheesy grin macaroni cheese airedale. Fromage frais airedale cheese and wine brie cow swiss swiss mozzarella. Emmental cheese triangles edam rubber cheese pepper jack ricotta airedale airedale. Brie parmesan smelly cheese cheese strings stinking bishop cheese strings taleggio. Bocconcini blue castello gouda. Everyone loves caerphilly rubber cheese halloumi smelly cheese melted cheese melted cheese bavarian bergkase. Rubber cheese ricotta emm." 837 | }, 838 | "description": "Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.", 839 | "url": "http://www.cheeseipsum.co.uk/", 840 | "name": { 841 | "first": "Aquila", 842 | "firsti": "A", 843 | "middle": "Gaius", 844 | "middlei": "G", 845 | "last": "Achterkamp", 846 | "lasti": "A" 847 | }, 848 | "year": { 849 | "long": "2013", 850 | "short": "13" 851 | }, 852 | "month": { 853 | "long": "December", 854 | "short": "Dec", 855 | "digit": "12" 856 | }, 857 | "dayofweek": { 858 | "long": "Thursday", 859 | "short": "Thu" 860 | }, 861 | "day": { 862 | "long": "28", 863 | "short": "28", 864 | "ordinal": "th" 865 | }, 866 | "hour": { 867 | "long": "08", 868 | "short": "8", 869 | "military": "08", 870 | "ampm": "am" 871 | }, 872 | "minute": { 873 | "long": "34", 874 | "short": "34" 875 | }, 876 | "seconds": "56" 877 | } 878 | } 879 | -------------------------------------------------------------------------------- /source/_meta/_00-head.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{{ patternLabHead }}} 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /source/_meta/_01-foot.mustache: -------------------------------------------------------------------------------- 1 | 2 | {{{ patternLabFoot }}} 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /source/_patterns/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Comcast/patternlab-edition-node-webpack/83583eb19e43fe79289330bea427eea218963657/source/_patterns/.gitkeep -------------------------------------------------------------------------------- /source/css/pattern-scaffolding.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This stylesheet is for styles you want to include only when displaying demo 3 | * styles for grids, animations, color swatches, etc. 4 | * These styles will not be your production CSS. 5 | */ 6 | #sg-patterns { 7 | -webkit-box-sizing: border-box !important; 8 | box-sizing: border-box !important; 9 | max-width: 100%; 10 | padding: 0 0.5em; 11 | } 12 | 13 | .demo-animate { 14 | background: #ddd; 15 | padding: 1em; 16 | margin-bottom: 1em; 17 | text-align: center; 18 | border-radius: 8px; 19 | cursor: pointer; 20 | } 21 | 22 | .sg-colors { 23 | display: -webkit-box; 24 | display: -ms-flexbox; 25 | display: flex; 26 | -ms-flex-wrap: wrap; 27 | flex-wrap: wrap; 28 | list-style: none !important; 29 | padding: 0 !important; 30 | margin: 0 !important; 31 | } 32 | .sg-colors li { 33 | -webkit-box-flex: 1; 34 | -ms-flex: auto; 35 | flex: auto; 36 | padding: 0.3em; 37 | margin: 0 0.5em 0.5em 0; 38 | min-width: 5em; 39 | max-width: 14em; 40 | border: 1px solid #ddd; 41 | border-radius: 8px; 42 | } 43 | 44 | .sg-swatch { 45 | display: block; 46 | height: 4em; 47 | margin-bottom: 0.3em; 48 | border-radius: 5px; 49 | } 50 | 51 | .sg-label { 52 | font-size: 90%; 53 | line-height: 1; 54 | } 55 | -------------------------------------------------------------------------------- /source/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Comcast/patternlab-edition-node-webpack/83583eb19e43fe79289330bea427eea218963657/source/favicon.ico -------------------------------------------------------------------------------- /source/fonts/.gitkeep: -------------------------------------------------------------------------------- 1 | keeping this dir around -------------------------------------------------------------------------------- /source/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Comcast/patternlab-edition-node-webpack/83583eb19e43fe79289330bea427eea218963657/source/images/.gitkeep -------------------------------------------------------------------------------- /source/js/getting-started.js: -------------------------------------------------------------------------------- 1 | console.info("Welcome to Pattern Library: Webpack Edition"); 2 | console.info("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); 3 | console.info("Place any generic javascript files in the ./source/js folder, and webpack will bundle it up for you."); -------------------------------------------------------------------------------- /source/styleguide/css/styleguide-specific.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. 3 | * This is helpful for displaying demo styles for grids, animations, color swatches, etc 4 | * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements 5 | * These styles will not be your production CSS. 6 | */ 7 | -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | // webpack.config.js 2 | const webpack = require("webpack"); 3 | const { resolve } = require("path"); 4 | const globby = require("globby"); 5 | const { getIfUtils, removeEmpty } = require("webpack-config-utils"); 6 | const CopyWebpackPlugin = require("copy-webpack-plugin"); 7 | const EventHooksPlugin = require("event-hooks-webpack-plugin"); 8 | const plConfig = require("./patternlab-config.json"); 9 | const patternlab = require("patternlab-node")(plConfig); 10 | const patternEngines = require("patternlab-node/core/lib/pattern_engines"); 11 | const merge = require("webpack-merge"); 12 | const customization = require(`${plConfig.paths.source.app}/webpack.app.js`); 13 | const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 14 | 15 | module.exports = env => { 16 | const { ifProduction, ifDevelopment } = getIfUtils(env); 17 | 18 | const config = merge.smartStrategy(plConfig.app.webpackMerge)( 19 | { 20 | devtool: ifDevelopment("source-map"), 21 | context: resolve(__dirname, plConfig.paths.source.root), 22 | node: { 23 | fs: "empty" 24 | }, 25 | entry: { 26 | // Gathers any Source JS files and creates a bundle 27 | //NOTE: This name can be changed, if so, make sure to update _meta/01-foot.mustache 28 | "js/pl-source": globby 29 | .sync([ 30 | resolve(__dirname, `${plConfig.paths.source.js}**/*.js`), 31 | "!**/*.test.js" 32 | ]) 33 | .map(function(filePath) { 34 | return filePath; 35 | }) 36 | }, 37 | output: { 38 | path: resolve(__dirname, plConfig.paths.public.root), 39 | filename: "[name].js" 40 | }, 41 | optimization: { 42 | minimizer: [new UglifyJsPlugin(plConfig.app.uglify)], 43 | splitChunks: { 44 | cacheGroups: { 45 | vendor: { 46 | test: /node_modules/, 47 | chunks: "initial", 48 | name: "js/pl-source-vendor", 49 | priority: 10, 50 | enforce: true 51 | } 52 | } 53 | } 54 | }, 55 | plugins: removeEmpty([ 56 | ifDevelopment( 57 | new webpack.HotModuleReplacementPlugin(), 58 | new webpack.NamedModulesPlugin() 59 | ), 60 | // Remove with PL Core 3.x 61 | new CopyWebpackPlugin([ 62 | { 63 | // Copy all images from source to public 64 | context: resolve(plConfig.paths.source.images), 65 | from: "./**/*.*", 66 | to: resolve(plConfig.paths.public.images) 67 | }, 68 | { 69 | // Copy favicon from source to public 70 | context: resolve(plConfig.paths.source.root), 71 | from: "./*.ico", 72 | to: resolve(plConfig.paths.public.root) 73 | }, 74 | { 75 | // Copy all web fonts from source to public 76 | context: resolve(plConfig.paths.source.fonts), 77 | from: "./*", 78 | to: resolve(plConfig.paths.public.fonts) 79 | }, 80 | { 81 | // Copy all css from source to public 82 | context: resolve(plConfig.paths.source.css), 83 | from: "./*.css", 84 | to: resolve(plConfig.paths.public.css) 85 | }, 86 | { 87 | // Styleguide Copy everything but css 88 | context: resolve(plConfig.paths.source.styleguide), 89 | from: "./**/*", 90 | to: resolve(plConfig.paths.public.root), 91 | ignore: ["*.css"] 92 | }, 93 | { 94 | // Styleguide Copy and flatten css 95 | context: resolve(plConfig.paths.source.styleguide), 96 | from: "./**/*.css", 97 | to: resolve(plConfig.paths.public.styleguide, "css"), 98 | flatten: true 99 | } 100 | ]), 101 | ifDevelopment( 102 | new EventHooksPlugin({ 103 | afterEmit: function(compilation) { 104 | const supportedTemplateExtensions = patternEngines.getSupportedFileExtensions(); 105 | const templateFilePaths = supportedTemplateExtensions.map( 106 | function(dotExtension) { 107 | return `${plConfig.paths.source.patterns}**/*${dotExtension}`; 108 | } 109 | ); 110 | 111 | // additional watch files 112 | const watchFiles = [ 113 | `${plConfig.paths.source.patterns}**/*.(json|md|yaml|yml)`, 114 | `${plConfig.paths.source.data}**/*.(json|md|yaml|yml)`, 115 | `${plConfig.paths.source.fonts}**/*`, 116 | `${plConfig.paths.source.images}**/*`, 117 | `${plConfig.paths.source.meta}**/*`, 118 | `${plConfig.paths.source.annotations}**/*` 119 | ]; 120 | 121 | const allWatchFiles = watchFiles.concat(templateFilePaths); 122 | 123 | allWatchFiles.forEach(function(globPath) { 124 | const patternFiles = globby 125 | .sync(globPath) 126 | .map(function(filePath) { 127 | return resolve(__dirname, filePath); 128 | }); 129 | patternFiles.forEach(item => { 130 | compilation.fileDependencies.add(item); 131 | }); 132 | }); 133 | } 134 | }) 135 | ), 136 | new EventHooksPlugin({ 137 | done: function(stats) { 138 | let cleanPublic = plConfig.cleanPublic; 139 | process.argv.forEach((val, index) => { 140 | if (val.includes("cleanPublic")) { 141 | val = val.split("="); 142 | cleanPublic = JSON.parse(val[1]); 143 | } 144 | }); 145 | 146 | patternlab.build(() => {}, cleanPublic); 147 | } 148 | }) 149 | ]), 150 | devServer: { 151 | contentBase: resolve(__dirname, plConfig.paths.public.root), 152 | publicPath: `${plConfig.app.webpackDevServer.url}:${plConfig.app.webpackDevServer.port}`, 153 | port: plConfig.app.webpackDevServer.port, 154 | open: true, 155 | hot: true, 156 | watchContentBase: plConfig.app.webpackDevServer.watchContentBase, 157 | watchOptions: plConfig.app.webpackDevServer.watchOptions 158 | }, 159 | module: { 160 | rules: [ 161 | { 162 | test: /\.js$/, 163 | exclude: /(node_modules|bower_components)/, 164 | use: [ 165 | { 166 | loader: "babel-loader", 167 | options: { 168 | cacheDirectory: true 169 | } 170 | } 171 | ] 172 | } 173 | ] 174 | } 175 | }, 176 | customization(env) 177 | ); 178 | 179 | return config; 180 | }; 181 | --------------------------------------------------------------------------------