Skip to content

Commit f593596

Browse files
mapsandappsbrandyscarney
mapsandapps
and
brandyscarney
authored
feat(generation): generate playgrounds for guides (#3098)
* Conditional prompting * Improve console.log copy * Adjust templates for guide playground generation * Add validation --------- Co-authored-by: Brandy Carney <[email protected]>
1 parent ab5c450 commit f593596

10 files changed

+102
-80
lines changed

‎_templates/playground/new/angular.md.ejs.t

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
# this file's location depends on whether or not the css option or angular_ts option is selected via the prompt
3-
to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
3+
to: "<%= `static/usage/v${version}/${name}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
44
---
55
```html
6-
<<%= name %>></<%= name %>>
6+
<<%= component %>></<%= component %>>
77
```

‎_templates/playground/new/angular_example_component_css.md.ejs.t

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
# this file only gets generated if `css` (from the command line prompt) is true
3-
to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_css.md` : null %>"
3+
to: "<%= css ? `static/usage/v${version}/${name}/${path}/angular/example_component_css.md` : null %>"
44
---
55
```css
6-
<%= name %> {
6+
<%= component %> {
77
/* styles go here */
88
}
99
```

‎_templates/playground/new/angular_example_component_ts.md.ejs.t

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
# this file only gets generated if `angular_ts` (from the command line prompt) is true
3-
to: "<%= angular_ts ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_ts.md` : null %>"
3+
to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
44
---
55
```ts
66
import { Component } from '@angular/core';

‎_templates/playground/new/demo.html.ejs.t

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
---
2-
arbitrary: <% nameWithoutIon = name.replace('ion-', ''); numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
3-
to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
2+
arbitrary: <% numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
3+
to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
44
---
55
<!DOCTYPE html>
66
<html lang="en">
77
<head>
88
<meta charset="UTF-8" />
99
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10-
<title><%= h.changeCase.titleCase(nameWithoutIon) %></title>
10+
<title><%= h.changeCase.titleCase(name) %></title>
1111
<link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
1212
<script src="<%= directoryChanges %>../../../common.js"></script>
1313
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
1414
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
1515
1616
<style>
17-
<%= name %> {
17+
<%= component %> {
1818
/* styles go here */
1919
}
2020
</style><% } %>
@@ -24,7 +24,7 @@ to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
2424
<ion-app>
2525
<ion-content>
2626
<div class="container">
27-
<<%= name %>></<%= name %>>
27+
<<%= component %>></<%= component %>>
2828
</div>
2929
</ion-content>
3030
</ion-app>

‎_templates/playground/new/index.js

Lines changed: 75 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,60 +5,83 @@ const changeCase = require('change-case');
55
//
66
module.exports = {
77
prompt: ({ inquirer }) => {
8-
const questions = [
9-
{
10-
type: 'input',
11-
name: 'name',
12-
message: 'Which component is this playground for?',
13-
initial: 'ion-button',
14-
validate(value) {
15-
return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'";
8+
return inquirer
9+
.prompt([
10+
{
11+
type: 'toggle',
12+
name: 'is_component',
13+
message: 'Is this playground for a component?',
14+
initial: true,
1615
},
17-
},
18-
{
19-
type: 'input',
20-
name: 'path',
21-
message: 'What should the playground path be?',
22-
hint: 'e.g. `basic` or `theming/colors`',
23-
validate(value) {
24-
return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
25-
? true
26-
: "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
27-
},
28-
},
29-
{
30-
type: 'select',
31-
name: 'version',
32-
message: 'Select the Ionic Framework version for the playground',
33-
initial: '7',
34-
choices: ['6', '7'],
35-
},
36-
{
37-
type: 'toggle',
38-
name: 'css',
39-
message: 'Generate custom CSS files?',
40-
enabled: 'Yes',
41-
disabled: 'No',
42-
},
43-
{
44-
type: 'toggle',
45-
name: 'angular_ts',
46-
message: 'Generate an Angular TypeScript file?',
47-
enabled: 'Yes',
48-
disabled: 'No',
49-
},
50-
];
16+
])
17+
.then((answers) => {
18+
return inquirer
19+
.prompt([
20+
// ask a different question for components vs. other playgrounds
21+
answers.is_component
22+
? {
23+
type: 'input',
24+
name: 'component',
25+
message: 'Which component is this playground for?',
26+
initial: 'ion-button',
27+
validate(value) {
28+
return value.match(/^ion-[a-z/-]*[a-z]+$/)
29+
? true
30+
: "Component name must be kebab-case and begin with 'ion-'";
31+
},
32+
}
33+
: {
34+
type: 'input',
35+
name: 'name',
36+
message: 'Which guide section is this playground for?',
37+
initial: 'animations',
38+
validate(value) {
39+
return value.match(/^[a-z/-]+$/) ? true : 'Section must be kebab-case';
40+
},
41+
},
42+
{
43+
type: 'input',
44+
name: 'path',
45+
message: 'What should the playground path be?',
46+
hint: 'e.g. `basic` or `theming/colors`',
47+
validate(value) {
48+
return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
49+
? true
50+
: "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
51+
},
52+
},
53+
{
54+
type: 'select',
55+
name: 'version',
56+
message: 'Select the Ionic Framework version for the playground',
57+
initial: '7',
58+
choices: ['6', '7'],
59+
},
60+
{
61+
type: 'toggle',
62+
name: 'css',
63+
message: 'Generate custom CSS files?',
64+
},
65+
{
66+
type: 'toggle',
67+
name: 'angular_ts',
68+
message: 'Generate an Angular TypeScript file?',
69+
},
70+
])
71+
.then((answers) => {
72+
answers.name = answers.name || answers.component.replace('ion-', '');
73+
74+
// if the playground is not for a component,
75+
// include an ion-card in the playground
76+
answers.component = answers.component || 'ion-card';
5177

52-
return inquirer.prompt(questions).then((answers) => {
53-
const componentName = changeCase.pascal(answers.path.split('/').pop());
54-
console.log(
55-
`\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
56-
'ion-',
57-
''
58-
)}/${answers.path}/index.md';\n\n<${componentName} />\n`
59-
);
78+
const playgroundName = changeCase.pascal(answers.path.split('/').pop());
79+
console.log(
80+
`\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
81+
);
6082

61-
return answers;
62-
});
83+
return answers;
84+
});
85+
});
6386
},
6487
};

‎_templates/playground/new/index.md.ejs.t

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
2-
arbitrary: <% nameWithoutIon = name.replace('ion-', '') %>
3-
to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>"
2+
to: "<%= `static/usage/v${version}/${name}/${path}/index.md` %>"
43
---
54
import Playground from '@site/src/components/global/Playground';
65

@@ -56,5 +55,5 @@ import angular_example_component_css from './angular/example_component_css.md';
5655
angular,
5756
<% } -%>
5857
}}
59-
src="usage/v<%= version %>/<%= nameWithoutIon %>/<%= path %>/demo.html"
58+
src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html"
6059
/>

‎_templates/playground/new/javascript.md.ejs.t

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>"
2+
to: "<%= `static/usage/v${version}/${name}/${path}/javascript.md` %>"
33
---
44
```html
5-
<<%= name %>></<%= name %>>
5+
<<%= component %>></<%= component %>>
66
<% if (css){ -%>
77
88
<style>
9-
<%= name %> {
9+
<%= component %> {
1010
/* styles go here */
1111
}
1212
</style>

‎_templates/playground/new/react.md.ejs.t

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
2-
arbitrary: <% pascalName = h.changeCase.pascal(name) %>
2+
arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
33
# this file's location depends on whether or not the css option is selected via the prompt
4-
to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>"
4+
to: "<%= `static/usage/v${version}/${name}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>"
55
---
66
```tsx
77
import React from 'react';
8-
import { <%= pascalName %> } from '@ionic/react';<% if (css){ %>
8+
import { <%= pascalComponent %> } from '@ionic/react';<% if (css){ %>
99
1010
import './main.css';<% } %>
1111

1212
function Example() {
1313
return (
14-
<<%= pascalName %>></<%= pascalName %>>
14+
<<%= pascalComponent %>></<%= pascalComponent %>>
1515
);
1616
}
1717
export default Example;

‎_templates/playground/new/react_main_css.md.ejs.t

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
# this file only gets generated if `css` (from the command line prompt) is true
3-
to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/react/main_css.md` : null %>"
3+
to: "<%= css ? `static/usage/v${version}/${name}/${path}/react/main_css.md` : null %>"
44
---
55
```css
6-
<%= name %> {
6+
<%= component %> {
77
/* styles go here */
88
}
99
```

‎_templates/playground/new/vue.md.ejs.t

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
---
2-
arbitrary: <% pascalName = h.changeCase.pascal(name) %>
3-
to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %>"
2+
arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
3+
to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>"
44
---
55
```html
66
<template>
7-
<<%= name %>></<%= name %>>
7+
<<%= component %>></<%= component %>>
88
</template>
99

1010
<script lang="ts">
11-
import { <%= pascalName %> } from '@ionic/vue';
11+
import { <%= pascalComponent %> } from '@ionic/vue';
1212
import { defineComponent } from 'vue';
1313
1414
export default defineComponent({
1515
components: {
16-
<%= pascalName %>,
16+
<%= pascalComponent %>,
1717
},
1818
});
1919
</script>
2020
<% if (css){ -%>
2121
2222
<style scoped>
23-
<%= name %> {
23+
<%= component %> {
2424
/* styles go here */
2525
}
2626
</style>

0 commit comments

Comments
 (0)