Shopify/draggable

Examples new page generator

Open

#110 opened on Jan 7, 2018

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (17,381 stars) (1,066 forks)batch import
examplesfeature-requesthelp wanted

Description

For when we launch the Examples site

I would like a simple way to bootstrap a new page.

Here is how I'm imagining it would work:

$ yarn run new-page

Answer the following questions and a blank new page template will be generated for you.

- - - - -

Under what group does this Example belong?
> 1. Draggable
  2. Droppable
  3. Sortable
  4. Swappable
  5. Plugins

- - - - -

What is the name of this Example?
> new page|

- - - - -

Provide a roughly 150-character description of this example
> My descr|

- - - - -

Generating files...
Okay, all set! The following new files have been created/modified:

m: src/content/index.js
m: src/styles/examples-app.scss
m: src/views/data-pages.json

a: src/content/Draggable/NewPage/index.js
a: src/content/Draggable/NewPage/NewPage.html
a: src/content/Draggable/NewPage/NewPage.scss
a: src/views/new-page.html

Now, get to work on those added files!

$ |

If anyone is interested in taking this on, that would be awesome! Please assign yourself to the issue if you are going to start work on it.

Otherwise, I will try to do this when I get the chance. If I decide to tackle it, I will assign myself to the issue.

Contributor guide

Tech stack
javascriptnodejs
Domain
frontendtooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Node.jsYarnBasic knowledge of Draggable examples
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
The script should be a Node.js CLI that prompts the user for group and name and description, then generates files based on existing example templates. Key files to modify include src/content/index.js (to register new page), src/styles/examples app.scss (if new styles?), src/views/data pages.json (to add route). The generated files should be placed under src/content/{Group}/{PageName}/ with index.js, PageName.html, PageName.scss. See existing examples like src/content/Draggable for reference. Also create a new view file at src/views/new page.html. The script can be run via `yarn run new page` after adding the command to package.json. Use inquirer or similar for prompts.