Skip to content

Commit 79be534

Browse files
author
Micah Godbolt
committed
Init commit
0 parents  commit 79be534

File tree

12 files changed

+375
-0
lines changed

12 files changed

+375
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build
2+
node_modules
3+
.DS_Store

‎Gruntfile.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
module.exports = function(grunt) {
2+
3+
require('load-grunt-tasks')(grunt);
4+
5+
grunt.initConfig({
6+
sass: {
7+
options: {
8+
sourceMap: false
9+
},
10+
dist: {
11+
files: {
12+
'build/css/style.css': 'sass/style.scss'
13+
}
14+
}
15+
},
16+
17+
shell: {
18+
ms: {
19+
command: 'node metalsmith.js'
20+
}
21+
},
22+
23+
watch: {
24+
sass: {
25+
files: ['sass/**/*.scss'],
26+
tasks: ['sass']
27+
},
28+
ms: {
29+
files: ['src/**/*.md', 'layouts/**/*.html'],
30+
tasks: ['shell:ms']
31+
},
32+
livereload: {
33+
options: { livereload: true },
34+
files: ['build/**/*'],
35+
},
36+
},
37+
38+
connect: {
39+
server: {
40+
options: {
41+
port: 8080,
42+
base: 'build'
43+
}
44+
}
45+
}
46+
});
47+
48+
49+
50+
grunt.registerTask('default', [
51+
'sass',
52+
'shell:ms'
53+
]);
54+
55+
grunt.registerTask('watcher', [
56+
'default',
57+
'connect',
58+
'watch'
59+
]);
60+
61+
};

‎README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# metalsmith-starter
2+
3+
4+
## Install dependencies
5+
6+
`$ npm install`
7+
8+
## One time build of docs
9+
10+
`$ npm run build`
11+
12+
## Build docs, serve, watch for changes
13+
14+
`$ npm run serve`
15+
16+
Docs will be viewable at [http://localhost:8080](http://localhost:8080)
17+
18+
19+
20+

‎layouts/page.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>{{title}}</title>
6+
<link rel="stylesheet" type="text/css" href="css/style.css">
7+
</head>
8+
<body>
9+
{% if contents %}
10+
<a href="/">❮ Back</a>
11+
{{contents|safe}}
12+
{% else %}
13+
<ul>
14+
{% for doc in collections.docs %}
15+
<li><a href="/{{ doc.path }}">{{ doc.title }}</a></li>
16+
{% endfor %}
17+
</ul>
18+
{% endif %}
19+
20+
<script src="http://localhost:35729/livereload.js"></script>
21+
</body>
22+
</html>

‎metalsmith.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const Metalsmith = require('metalsmith');
2+
const markdown = require('metalsmith-markdown');
3+
const layouts = require('metalsmith-layouts');
4+
const nunjucks = require('nunjucks');
5+
const watch = require('metalsmith-watch');
6+
const sass = require('metalsmith-sass');
7+
const serve = require('metalsmith-serve');
8+
const navigation = require('metalsmith-navigation');
9+
const collections = require('metalsmith-collections');
10+
const permalinks = require('metalsmith-permalinks');
11+
12+
metalsmith = Metalsmith(__dirname)
13+
.clean(false)
14+
.use(markdown())
15+
.use(collections({
16+
docs: {
17+
pattern: 'docs/*.html',
18+
sortBy: 'title'
19+
}
20+
}))
21+
.use(permalinks({
22+
pattern: ':title',
23+
linksets: [{
24+
match: { collection: 'docs' },
25+
pattern: 'docs/:title'
26+
}
27+
]
28+
}))
29+
.use(layouts({
30+
engine: 'nunjucks',
31+
default: 'page.html',
32+
pattern: "**/*.html"
33+
}))
34+
.build(function(err){
35+
if (err) throw err;
36+
});

‎package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "Pattern-Builder-Docs",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"serve": "./node_modules/.bin/grunt watcher",
9+
"build": "./node_modules/.bin/grunt"
10+
},
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"grunt": "^1.0.1",
15+
"grunt-cli": "^1.2.0",
16+
"grunt-contrib-connect": "^1.0.1",
17+
"grunt-contrib-watch": "^1.0.0",
18+
"grunt-sass": "^1.1.0",
19+
"grunt-shell": "^1.2.1",
20+
"load-grunt-tasks": "^3.5.0",
21+
"metalsmith": "^2.1.0",
22+
"metalsmith-collections": "^0.7.0",
23+
"metalsmith-layouts": "^1.4.4",
24+
"metalsmith-markdown": "^0.2.1",
25+
"metalsmith-navigation": "^0.2.9",
26+
"metalsmith-permalinks": "^0.5.0",
27+
"nunjucks": "^2.3.0"
28+
}
29+
}

‎sass/style.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
3+
}

‎src/docs/pattern_builder.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Pattern Builder
3+
---
4+
5+
## Pattern Builder
6+
7+
1. Why
8+
1. The Pattern Builder System empowers us to create a design system out of JSON schemas and Twig templates. To do this efficiently we need a tool that allows us to quickly prototype, build and validate our content structure and visual design.
9+
2. It is also important that developers and stakeholders have access to the growing design system.
10+
11+
2. What is it?
12+
1. Pattern Builder is an application that lets us preview our library of templates and manipulate their content by interacting with a form built from the schemas.
13+
2. It is both a development tool and a public facing pattern library.
14+
15+
3. How
16+
1. Good question! It could be:
17+
1. Composer Module
18+
- Add composer dependency
19+
- Symlink assets to web/app root (or use custom install location)
20+
- Create pb_config.yml
21+
1. Includes paths to schemas/templates/data
22+
2. Includes paths to js/css to add to preview
23+
24+
2. Git clone
25+
- Clone repo to root (at least at/above theme)
26+
- Repo includes
27+
1. Index.php (index just pulls from app folder)
28+
2. pb_config.yml
29+
3. App_folder
30+
31+
3. Grunt Project
32+
- Clone grunt repo. NPM install, Bower Install, Composer install
33+
- Use built in yeoman to create templates/schemas
34+
- Add sass and sample data to component/layout folders
35+
- Run grunt commands to compile, spin up local php server, lint etc
36+
37+
38+
Install Options: (NEEDS CLEANUP)
39+
install patternbuilder module, composer install in the patternbuilder module folder + install composer_manager
40+
41+
OR
42+
43+
install patternbuilder module, clone patternbuilder-lib-php into libraries and then composer install from there

‎src/docs/pattern_builder_importer.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Pattern Builder Importer
3+
---
4+
5+
## Pattern Builder Importer Drupal Module
6+
7+
1. Why
8+
1. With a library of patterns created in Pattern Builder, we need a method for creating each Drupal admin interface that allow users to enter the data needed for each template.
9+
2. As a content admin, you may want to create a customizable content type(s) which include entity references to smaller content patterns, such as field collection bundles. These bundles will be built to match the defined components from the Styleguide. This would expose the ability to both create content and control the ordering, layout, and design from within the node editing interface, and would be fully revisionable. Additionally, editors would be able reference & include existing view blocks within the field groups. Editors could then apply data attributes such as layout and theme to these view blocks or field collections.
10+
11+
2. What is it
12+
1. TL;DR
13+
1. It takes an external library (of JSON Schemas and Twig templates), and converts the schemas into fields in Drupal as paragraph bundles, and imports the twig templates and converts them to PHP to render the nodes.
14+
15+
2. Features
16+
1. Includes support for multiple templates and schemas
17+
- You can list WebRH as the default library, then your own custom library
18+
- If templates have namespace collisions…
19+
1. Check to see what twig.js does (does first or last win)
20+
21+
2. Automated Tests
22+
23+
3. How
24+
1. Tech Setup
25+
1. Install and enable module
26+
2. Set up the import paths in settings.php in admin config page
27+
- Go to admin/config/content/patternbuilder
28+
- Schema directories
29+
1. sites/all/libraries/{webrh}/dist/library/schemas
30+
31+
- Template directories
32+
1. sites/all/libraries/{webrh}/dist/library/templates
33+
34+
3. Use Drush to run the pattern builder import command
35+
- If there are new patterns, first rsync webrh
36+
- SSL into sandbox
37+
- Run `drush pbi`
38+
39+
4. View the imported patterns now stored as paragraph bundles
40+
- Visit admin/structure/paragraphs
41+
42+
5. Manage Fields on the (new) content type,
43+
- Add a paragraphs field, choose which patterns you want to make available for content editors
44+
- Set widget to “Embedded Patterns”
45+
46+
6. Manage Display: Set the display format on the paragraph field to "Patternbuilder rendered items"
47+
7. Other Notes:
48+
- Don’t forget to load the webrh.css via a pre-process function or the style module
49+
- Optional: Modify the content type node--[type].tpl.php as needed to remove other regions etc
50+
- To use the test pattern, enabled “Red Hat webrh test” on the modules page: /admin/modules?filter=webrh_test&enabled=1&disabled=1&required=1&unavailable=1 -- it will take a while to import so you have to wait for the page to be done refreshing
51+
52+
53+
54+
1. Drush Commands
55+
1. Imports patterns from defined library
56+
- drush pbi  : Import all schemas.
57+
- drush pbi --all  :  Force the import of all schemas even if specific schemas are defined.
58+
- drush pbi band card :  Import only the "band" and "card" schemas.
59+
- drush pbi --type=layout  : Import only the schemas for the "layout" pattern type.
60+
- drush pbi -image_box
61+
62+
2. Remove imported patterns from Drupal
63+
- drush pbi-remove  : Nothing is removed. This safeguards against accidental commands.
64+
- drush pbi-remove --all : Removes all schemas.
65+
- drush pbi-remove band card : Removes only the "band" and "card" schemas.
66+
- drush pbi-remove --type=layout : Removes only the schemas for the "layout" pattern type.
67+
68+
1. Where
69+
1. [https://www.drupal.org/project/patternbuilder](https://www.drupal.org/project/patternbuilder)
70+
2. [https://web-dev-gitlab03.devlab.redhat.com/it-marketing/webdrupal](https://web-dev-gitlab03.devlab.redhat.com/it-marketing/webdrupal)
71+
72+
2. Supported Extensions
73+
74+
The following are optional Drupal modules that are supported natively by the Pattern Builder Importer.
75+
76+
1. Media ([https://www.drupal.org/project/media](https://www.drupal.org/project/media))
77+
1. Supports: file, image, audio, video
78+
2. Schema usage: "entity": "file|image|audio|video"
79+
80+
2. Media Internet - Submodule of Media ([https://www.drupal.org/project/media](https://www.drupal.org/project/media))
81+
1. Supports: internet based files
82+
2. Schema usage: "entity": "file|image|audio|video"
83+
84+
3. Media YouTube ([https://www.drupal.org/project/media_youtube](https://www.drupal.org/project/media_youtube))
85+
1. Supports: YouTube videos
86+
2. Schema usage: "entity": "video"
87+
88+
4. Link ([https://www.drupal.org/project/link](https://www.drupal.org/project/link))
89+
1. Supports: link fields
90+
2. Schema usage: "entity": "link"
91+
92+
5. Field Collection ([https://www.drupal.org/project/field_collection](https://www.drupal.org/project/field_collection))
93+
1. Supports: array of objects imported as a field collection.
94+
2. Schema usage: array&lt;object&gt;
95+
96+
6. Field Collection Fieldset ([https://www.drupal.org/project/field_collection_fieldset](https://www.drupal.org/project/field_collection_fieldset))
97+
1. Supports: collapsible array of objects imported to a field collection.
98+
2. Schema usage: options.collapsed=true, options.disable_collapse=true
99+
100+
7. Field Multiple Extended ([https://www.drupal.org/project/field_multiple_extended](https://www.drupal.org/project/field_multiple_extended))
101+
1. Supports: Set minimum and maximum items on a property.
102+
2. Schema usage: minItems: 2, maxItems: 10
103+
104+
1. Future Plans
105+
1. Use standard Drupal 8 rendering engine
106+
2. CMI (config mgmt), use schemas to manipulate YML files

‎src/docs/pattern_builder_library.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Pattern Builder Library
3+
---
4+
5+
1. Where
6+
1. Patternbuilderproject
7+
1. (No code here yet)
8+
9+
2. What is it?
10+
1. The library is a Symfony based PHP library that contains classes for setting data in the appropriate object layout for consumption and rendering by the Twig layer.
11+
2. Less jargon version: Lets you take data from anywhere and sets it up to work with FTS.
12+
13+
3. How
14+
1. Tech setup...

0 commit comments

Comments
 (0)