First hacking in of Craft Clips for Redactor 😮

Author: j-greig

_craftclips/craftclips-component-list.json

@@ -0,0 +1,57 @@
+const chalk = require('chalk');
+const co = require('co');
+const prettyHrtime = require('pretty-hrtime');
+
+const startTime = process.hrtime();
+
+// require('./src/header-build')()
+// require('./src/gallery-build')()
+// require('./src/resources-build')()
+// console.log('header build complete')
+// require('./src/table-of-styles-build')()
+// console.log('table of styles build complete')
+// require('./src/table-of-properties-build')()
+// console.log('table of properties build complete')
+// require('./src/home-build')()
+// console.log('home build complete')
+
+const componentsBuildCraftClips = require('./src/components-build-craftclips');
+// const componentsBuildIndex = require('./src/components-build-index');
+// const componentsBuildRSS = require('./src/components-build-rss');
+// const componentsBuildPages = require('./src/components-build-pages');
+// const componentsBuildScreenshots = require('./src/components-build-screenshots');
+
+// See src/components-build-defaults for list of options that can be overriden
+const options = {
+  components: {
+    globPattern: 'src/components/pages**/*.html',
+    // frontMatter: {
+    //   bodyClass: 'bg-red',
+    //   screenshot: {
+    //     autocrop: false,
+    //   },
+    // },
+  },
+  // screenshot: {
+  //   aspectRatio: '16x9',
+  // },
+};
+
+// Note that componentsBuildList() generates a temporary components list (saved as JSON),
+// which is re-used by later steps (for performance).
+// If you are working on one component, uncomment and set components.GlobPattern
+// in the options above to only (re-)generate the list, index, pages, and screenshots for the
+// corresponding category. Once you are done, comment components.GlobPattern back, comment
+// the line below that generate the screenshots, then run the script -- this will
+// re-create the full index pages for all components, re-generate all the pages (since they need
+// to cross-reference the new component), and use the previously generated screenshots as well
+// as the new one (i.e. no need to re-generate *all* the screenshots unless you made
+// modifications to the screenshots script itself).
+co(function* generator() {
+  yield componentsBuildCraftClips(options);        // <- builds config file for the Redactor Clips plugin for Craft CMS
+}).then(() => {
+  const elapsed = process.hrtime(startTime);
+  console.log(chalk.green('All done'), chalk.dim(prettyHrtime(elapsed)));
+}).catch((err) => {
+  console.log(err);
+});

build-craftclips.js

@@ -24,7 +24,7 @@ const componentsBuildScreenshots = require('./src/components-build-screenshots')
 // See src/components-build-defaults for list of options that can be overriden
 const options = {
   components: {
-    // globPattern: 'src/components/article**/*.html',
+    globPattern: 'src/components/pages**/*.html',
     // frontMatter: {
     //   bodyClass: 'bg-red',
     //   screenshot: {

build.js

@@ -918,11 +918,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
    Docs: http://tachyons.io/docs/elements/links/
 
 */
-.link { text-decoration: none; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
-.link:link, .link:visited { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
-.link:hover { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
-.link:active { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
-.link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; outline: 1px dotted currentColor; }
+.link { text-decoration: none; transition: color .15s ease-in; }
+.link:link, .link:visited { transition: color .15s ease-in; }
+.link:hover { transition: color .15s ease-in; }
+.link:active { transition: color .15s ease-in; }
+.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
 /*
 
    LISTS
@@ -1881,16 +1881,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
   Dim element on hover by adding the dim class.
 
 */
-.dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
-.dim:hover, .dim:focus { opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
-.dim:active { opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; }
+.dim { opacity: 1; transition: opacity .15s ease-in; }
+.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
+.dim:active { opacity: .8; transition: opacity .15s ease-out; }
 /*
 
   Animate opacity to 100% on hover by adding the glow class.
 
 */
-.glow { -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
-.glow:hover, .glow:focus { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
+.glow { transition: opacity .15s ease-in; }
+.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
 /*
 
   Hide child & reveal on hover:
@@ -1905,15 +1905,15 @@ code, .code { font-family: Consolas, monaco, monospace; }
     <div class="child"> Hidden until hover or focus </div>
   </div>
 */
-.hide-child .child { opacity: 0; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
-.hide-child:hover  .child, .hide-child:focus  .child, .hide-child:active .child { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
+.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
+.hide-child:hover  .child, .hide-child:focus  .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
 .underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
 /* Can combine this with overflow-hidden to make background images grow on hover
  * even if you are using background-size: cover */
-.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-out; transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
+.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
 .grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
 .grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
-.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
+.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
 .grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
 .grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
 /* Add pointer on hover */
@@ -1924,12 +1924,12 @@ code, .code { font-family: Consolas, monaco, monospace; }
    Performant box-shadow animation pattern from 
    http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 
 */
-.shadow-hover { cursor: pointer; position: relative; -webkit-transition: all .5s cubic-bezier( .165, .84, .44, 1 ); transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
-.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
+.shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
+.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
 .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
 /* Combine with classes in skins and skins-pseudo for 
  * many different transition possibilities. */
-.bg-animate, .bg-animate:hover, .bg-animate:focus { -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; }
+.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
 /*
 
   Z-INDEX
@@ -1992,9 +1992,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
 .nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
 .nested-copy-seperator p+p { margin-top: 1.5em; }
 .nested-img img { width: 100%; max-width: 100%; display: block; }
-.nested-links a { color: #408bc9; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
-.nested-links a:hover { color: #76c4e2; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
-.nested-links a:focus { color: #76c4e2; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
+.nested-links a { color: #408bc9; transition: color .15s ease-in; }
+.nested-links a:hover { color: #76c4e2; transition: color .15s ease-in; }
+.nested-links a:focus { color: #76c4e2; transition: color .15s ease-in; }
 /*
 
   STYLES

css/tachyons.css

@@ -7,6 +7,7 @@
     "start": "npm run css && node build.js",
     "css": "tachyons src/css/tachyons.css > css/tachyons.css && tachyons src/css/tachyons.css --minify > css/tachyons.min.css",
     "components:watch": "watch 'node build.js' src/components/*",
+    "components:craftclips": "watch 'node build-craftclips.js' src/components/*",
     "home:watch": "watch 'node build-home.js' src/templates/",
     "gallery:watch": "watch 'node build' src/templates/",
     "build:watch": "watch 'node build.js' src/templates/",

css/tachyons.min.css

@@ -0,0 +1,119 @@
+const _ = require('lodash');
+const chalk = require('chalk');
+const co = require('co');
+const crypto = require('crypto');
+const fm = require('json-front-matter');
+const fs = require('fs');
+const glob = require('glob');
+const mkdirp = require('mkdirp');
+const nodegit = require('nodegit');
+const path = require('path');
+const prettyHrtime = require('pretty-hrtime');
+const rmHtmlExt = require('remove-html-extension');
+
+const defaults = require('./components-build-defaults');
+
+/*
+ * Return the first commit that even introduced a component, given its path
+ */
+const getComponentFirstCommit = (repo, componentPath) =>
+  co(function* generator() {
+    const headCommit = yield repo.getHeadCommit();
+    const walker = repo.createRevWalk();
+    walker.push(headCommit.id());
+    walker.sorting(nodegit.Revwalk.SORT.TIME);
+    // Not happy about that hard-coded constant here, but this is the only way to
+    // tell the walker to go as far back in time as possible. No amount of asking
+    // on nodegit's Slack or Gitter gave me a better way to do it.
+    const historyCommits = yield walker.fileHistoryWalk(componentPath, 30000);
+    return historyCommits[historyCommits.length - 1].commit;
+  });
+
+/*
+ * Return the list of components
+ */
+const getComponents = options => new Promise((resolve, reject) => {
+  glob(options.components.globPattern, {}, (err, componentPaths) => {
+    if (err) {
+      reject(err);
+      return;
+    }
+    const npmPackage = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+    co(function* generator() {
+      const repo = yield nodegit.Repository.open(path.resolve('.'));
+
+      const components = [];
+      for (let comp_idx = 0; comp_idx < componentPaths.length; comp_idx += 1) {
+        const componentPath = componentPaths[comp_idx];
+
+        const firstCommit = yield getComponentFirstCommit(repo, componentPath);
+
+        const componentHtml = fs.readFileSync(componentPath, 'utf8');
+        const fmParsed = fm.parse(componentHtml);
+        const srcFrontMatter = fmParsed.attributes || {};
+        const frontMatter = _.merge({}, options.components.frontMatter, srcFrontMatter);
+
+        const targetDir = componentPath.replace('src/', '').replace('.html', '');
+
+        const tokens = rmHtmlExt(componentPath).replace('src/components/', '').split('/');
+        const category = tokens[0];
+        const id = tokens[1];
+
+        // Compute component signature based on the Tachyons version and the contents of the
+        // component itself. This can be used to bust the browser cache of screenshots.
+        const md5sum = crypto.createHash('md5');
+        md5sum.update(npmPackage.version);
+        md5sum.update(componentHtml);
+        const signature = md5sum.digest('hex');
+
+        const page = {
+          path: `${targetDir}/index.html`,
+          href: `/${targetDir}/index.html`,
+          name: frontMatter.name ||
+            (options.components.prettify.id ? options.components.prettify.id(id) : id),
+          category: options.components.prettify.category
+            ? options.components.prettify.category(category) : category,
+        };
+        page.title = frontMatter.title ||
+          options.components.page.composeTitle(page.category, page.name);
+
+
+        page.href
+
+        // const screenshot = {
+        //   path: `${targetDir}/${options.screenshot.basename}`,
+        //   href: `/${targetDir}/${options.screenshot.basename}?version=${signature}`,
+        // };
+
+        components.push({
+          id,
+          // category,
+          src: componentHtml,
+          // creationTime: firstCommit.date().getTime(),
+          // author: firstCommit.author().toString(),
+          // signature,
+          // page,
+          // screenshot,
+          // This is the raw front matter, as found in the component source, NOT merged
+          // with any defaults, so that it is easier to spot the overrides.
+          // It is up to build scripts to merge with options.components.frontMatter down the road.
+          // frontMatter: srcFrontMatter,
+        });
+      }
+      resolve(components);
+    }); // generator
+  }); // glob
+});
+
+module.exports = _options => new Promise((resolve, reject) => {
+  const options = _.merge({}, defaults, _options);
+  const startTime = process.hrtime();
+  console.log(chalk.magenta('Working on components config for Craft CMS / Redactor Clips plugin...'));
+  getComponents(options).then((components) => {
+    mkdirp.sync(path.dirname(options.components.tempListPath));
+    fs.writeFileSync(options.components.tempListPath, JSON.stringify(components, undefined, 2));
+    console.log('- Working on components config for Craft CMS / Redactor Clips plugin:', options.components.tempListPath);
+    const elapsed = process.hrtime(startTime);
+    console.log(chalk.magenta('Done with Redactor Clips component config file!'), chalk.dim(prettyHrtime(elapsed)));
+  }).then(resolve).catch(reject);
+}); // return promise

package.json

@@ -10,7 +10,7 @@ module.exports = {
   // Components
   components: {
     globPattern: 'src/components/**/*.html',       // source components to process
-    tempListPath: 'tmp/components.json',           // temporary JSON file built by the index
+    tempListPath: '_craftclips/craftclips-component-list.json',           // temporary JSON file built by the index
     build: {
       pages: true,                                 // false to skip building pages
       screenshots: true,                           // false to skip building screenshots

src/components-build-craftclips.js

@@ -0,0 +1 @@
+Subproject commit beaa78d09798332984c729f001990a82670178fb