Sample Pages & How to Create Them

How can I generate a new Sample Page?

Run the sample generator command

1. rails g sample "New Page" --category desired_category
2. Run the above command where "New Page" is the name of your new page and desired_category is the name of an existing sample page category or an entirely new one you'd like to create.
3. There are string parsing safeguards in place under the hood but in general try to name your page with spaces and capitals and your category with snake_case (see command line example above).
4. Make sure you run this command in the interior playbook folder not the root directory of the repo (i.e. app level).

Examine newly created/modified files

1. The generator will create two index files, index.jsx and index.html.erb, in a new folder at playbook/app/views/samples/#{your_page_name}. You will build your sample pages inside these two files.
2. It will also add your new page to a category inside samples.yml (categories = full_page_sample:, pages = - analytics_dashboard)
3. Finally the generator will add imports and WebpackerReact config in samples.js. It will only append them to the file, take some time to rearrange the import alongside the others further up the page.

Check out the newly created index pages on localhost:8089

1. You can view your sample page indexes at localhost:8089/samples/#{your_page_name} where #{your_page_name} is equal to the views/samples folder the generator created (as described in step 1 of the last section).
2. You can also navigate to this page by going to the sample index at localhost:8089/samples, finding your page under its corresponding category, and clicking the link. The index page renders dynamically based upon the [samples.yml`](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/data/samples.yml) structure. It's good to check that the link(s) are functioning and the category/page is rendering as expected after adding a new page/category since it's all happening dynamically.

If you've created a new category, add an preview thumbnail SVG

1. If you've created a new category you'll notice the SVG preview thumbnail is coming up blank on the sample index page. You'll need to add an svg to the app/assets/images folder. The naming convention is the snake case style category name found in the samples.yml. See the full_page_samples.svg for an example.