├── src
├── menu
│ └── .gitkeep
├── index.css
└── index.html
├── .gitignore
├── docs
└── PlopExample.gif
├── devTools
└── templates
│ ├── getCss.js
│ ├── getAddMenu.js
│ ├── getDrinks.js
│ ├── getAlcoholicsDrinks.js
│ └── getFood.js
├── package.json
├── README.md
└── plopfile.js
/src/menu/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: green;
3 | }
4 |
--------------------------------------------------------------------------------
/docs/PlopExample.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/PlopJSExample/master/docs/PlopExample.gif
--------------------------------------------------------------------------------
/devTools/templates/getCss.js:
--------------------------------------------------------------------------------
1 | function getCss({ pageName, normalizedPageName }) {
2 | return `
3 | #${normalizedPageName} {
4 |
5 | }`.trim();
6 | }
7 | module.exports = { getCss };
8 |
--------------------------------------------------------------------------------
/devTools/templates/getAddMenu.js:
--------------------------------------------------------------------------------
1 | function getAddMenu({ normalizedPageName, pageName }) {
2 | return ` ${pageName} Document
7 |
11 | Pizza pizza where the pizza is made of pizza
12 | Menu
13 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # A plop example
2 |
3 | [plopJS](https://plopjs.com/) is a poweful node based code generator.
4 |
5 | ## Context
6 |
7 | You are working on a pizza site that for example sake is made of an HTML and a CSS for each menu(as in a list of prices) page. It might have a lot of pages on the menu and this structure will repeat a lot.
8 |
9 | Additionally the main HTML file menu needs to be modified.
10 |
11 | This same patter could be applied for other examples (Each react component needs a test, a story, some hooks and so on).
12 |
13 | ## How to install
14 |
15 | ```sh
16 | npm install
17 | ```
18 |
19 | ## How to run
20 |
21 | ```sh
22 | npm run plop
23 | ```
24 |
25 | ## How it looks?
26 |
27 | 
28 |
--------------------------------------------------------------------------------
/devTools/templates/getDrinks.js:
--------------------------------------------------------------------------------
1 | function getDrinks({ pageName, normalizedPageName }) {
2 | return `
3 |
4 |
5 | Document
9 |
15 | Pizza pizza where the pizza is made of pizza
16 | Home
17 | ${pageName}
18 | Drinks is like food but not really, except soup
19 |
20 |
21 | `.trim();
22 | }
23 | module.exports = { getDrinks };
24 |
--------------------------------------------------------------------------------
/devTools/templates/getAlcoholicsDrinks.js:
--------------------------------------------------------------------------------
1 | function getAlcoholicsDrinks({ pageName, normalizedPageName }) {
2 | return `
3 |
4 |
5 | Document
9 |
15 | Pizza pizza where the pizza is made of pizza
16 | Home
17 | ${pageName}
18 | Alcoolic Drinks it is like drinks but for grown-ups
19 |
20 |
21 | `.trim();
22 | }
23 |
24 | module.exports = { getAlcoholicsDrinks };
25 |
--------------------------------------------------------------------------------
/devTools/templates/getFood.js:
--------------------------------------------------------------------------------
1 | function getFood({ pageName, normalizedPageName }) {
2 | return `
3 |
4 |
5 | Document
9 |
14 | Pizza pizza where the pizza is made of pizza
15 | Home
16 | ${pageName}
17 | Food. It is solid and probably hot. Might be cold sometimes don't be afraid. Unless it was supposed to be hot and it is cold and vice-versa
18 |
19 |
20 | `.trim();
21 | }
22 | module.exports = { getFood };
23 |
--------------------------------------------------------------------------------
/plopfile.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("path");
2 | const slugify = require("slugify");
3 | const {
4 | getAlcoholicsDrinks,
5 | } = require("./devTools/templates/getAlcoholicsDrinks");
6 | const { getDrinks } = require("./devTools/templates/getDrinks");
7 | const { getFood } = require("./devTools/templates/getFood");
8 | const { getCss } = require("./devTools/templates/getCss");
9 | const { getAddMenu } = require("./devTools/templates/getAddMenu");
10 |
11 | const targetFolder = resolve(__dirname, "./src");
12 | module.exports = (plop) => {
13 | const { setGenerator } = plop;
14 |
15 | setGenerator("menuPage", {
16 | description: "generates a new menu page",
17 | prompts: [
18 | {
19 | type: "confirm",
20 | name: "isDrinks",
21 | message: "Is this a drinks page?",
22 | },
23 | {
24 | type: "confirm",
25 | name: "isAlcoholic",
26 | message: "Are the drinks alcoholics?",
27 | when({ isDrinks }) {
28 | return Boolean(isDrinks);
29 | },
30 | },
31 | {
32 | type: "input",
33 | name: "pageName",
34 | message: "What is the name of this page?",
35 | validate(value) {
36 | if (value.split(" ").length >= 3) {
37 | return true;
38 | }
39 | return `name of the page needs to be at least 3 words. Use more adjectives like "Delicious appertizers for your internal organs" `;
40 | },
41 | },
42 | ],
43 | actions(answers) {
44 | const { pageName, isDrinks, isAlcoholic } = answers;
45 | const normalizedPageName = slugify(pageName);
46 | let htmlTemplate;
47 | if (isDrinks) {
48 | htmlTemplate = isAlcoholic ? getAlcoholicsDrinks : getDrinks;
49 | } else {
50 | htmlTemplate = getFood;
51 | }
52 | return [
53 | {
54 | type: "add",
55 | path: resolve(targetFolder, `./menu/${normalizedPageName}.html`),
56 | template: htmlTemplate({ pageName, normalizedPageName }),
57 | abortOnFail: true,
58 | },
59 | {
60 | type: "add",
61 | path: resolve(targetFolder, `./menu/${normalizedPageName}.css`),
62 | template: getCss({ pageName, normalizedPageName }),
63 | abortOnFail: true,
64 | },
65 | {
66 | type: "modify",
67 | path: resolve(targetFolder, `./index.html`),
68 | template: getAddMenu({ normalizedPageName, pageName }),
69 | abortOnFail: true,
70 | pattern: //,
71 | },
72 | ];
73 | },
74 | });
75 | };
76 |
--------------------------------------------------------------------------------