Move version picker to right of component home link (#159)

* move version picker to right of component home link

* add all items to breadcrumbs trail

* remove latest text on select and shrink font size

* remove assets-manifest and hashing for preview mode

* revert changes to breadcrumbs

Author: colegoldsmith

gulp.d/tasks/build-preview-pages.js

@@ -11,7 +11,6 @@ const { Transform } = require('stream')
 const map = (transform = () => {}, flush = undefined) => new Transform({ objectMode: true, transform, flush })
 const vfs = require('vinyl-fs')
 const yaml = require('js-yaml')
-const { execSync } = require('child_process')
 
 const ASCIIDOC_ATTRIBUTES = { experimental: '', icons: 'font', sectanchors: '', 'source-highlighter': 'highlight.js' }
 
@@ -100,7 +99,8 @@ function registerPartials (src) {
 function registerHelpers (src, previewDest) {
   handlebars.registerHelper('resolvePage', resolvePage)
   handlebars.registerHelper('resolvePageURL', resolvePageURL)
-  handlebars.registerHelper('assets-manifest', (assetPath) => assetsManifest(assetPath, previewDest))
+  // Since we are not creating an assets-manifest.json file in the preview build, we need to mock the helper.
+  handlebars.registerHelper('assets-manifest', (assetPath) => assetPath)
   return vfs.src('helpers/*.js', { base: src, cwd: src }).pipe(
     map((file, enc, next) => {
       if (!(file.stem === 'assets-manifest')) {
@@ -128,12 +128,6 @@ function compileLayouts (src) {
   )
 }
 
-function assetsManifest (assetPath, previewDest) {
-  const manifestPath = execSync(`find ${previewDest} -name assets-manifest.json`).toString().trim()
-  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
-  return manifest[assetPath]
-}
-
 function copyImages (src, dest) {
   return vfs
     .src('**/*.{png,svg}', { base: src, cwd: src })

gulp.d/tasks/build.js

@@ -11,6 +11,7 @@ const ospath = require('path')
 const path = ospath.posix
 const postcss = require('gulp-postcss')
 const postcssCalc = require('postcss-calc')
+const gulpif = require('gulp-if')
 const postcssAdvancedVars = require('postcss-advanced-variables')
 const postcssImport = require('postcss-import')
 const tailwindcss = require('tailwindcss')
@@ -74,34 +75,34 @@ module.exports = (src, dest, preview) => () => {
       .pipe(uglify({ output: { comments: /^! / } }))
       // NOTE concat already uses stat from newest combined file
       .pipe(concat('js/site.js'))
-      .pipe(hash({ template: '<%= name %>-<%= hash %><%= ext %>' }))
+      .pipe(gulpif(!preview, hash({ template: '<%= name %>-<%= hash %><%= ext %>' })))
       .pipe(vfs.dest(dest))
-      .pipe(hash.manifest('assets-manifest.json', { append: true }))
+      .pipe(gulpif(!preview, hash.manifest('assets-manifest.json', { append: true })))
       .pipe(vfs.dest(dest)),
     vfs
       .src('js/vendor/*([^.])?(.bundle).js', { ...opts, read: false })
       .pipe(bundle(opts))
       .pipe(uglify({ output: { comments: /^! / } }))
-      .pipe(hash({ template: '<%= name %>-<%= hash %><%= ext %>' }))
+      .pipe(gulpif(!preview, hash({ template: '<%= name %>-<%= hash %><%= ext %>' })))
       .pipe(vfs.dest(dest))
-      .pipe(hash.manifest('assets-manifest.json', { append: true }))
+      .pipe(gulpif(!preview, hash.manifest('assets-manifest.json', { append: true })))
       .pipe(vfs.dest(dest)),
     vfs
       .src('js/vendor/*.min.js', opts)
       .pipe(map((file, enc, next) => next(null, Object.assign(file, { extname: '' }, { extname: '.js' }))))
-      .pipe(hash({ template: '<%= name %>-<%= hash %><%= ext %>' }))
+      .pipe(gulpif(!preview, hash({ template: '<%= name %>-<%= hash %><%= ext %>' })))
       .pipe(vfs.dest(dest))
-      .pipe(hash.manifest('assets-manifest.json', { append: true }))
+      .pipe(gulpif(!preview, hash.manifest('assets-manifest.json', { append: true })))
       .pipe(vfs.dest(dest)),
     // NOTE use the next line to bundle a JavaScript library that cannot be browserified, like jQuery
     //vfs.src(require.resolve('<package-name-or-require-path>'), opts).pipe(concat('js/vendor/<library-name>.js')),
     vfs.src('./tailwind.config.js').pipe(concat('js/tailwind.config.js')),
     vfs
       .src(['css/site.css', 'css/vendor/*.css'], { ...opts, sourcemaps })
       .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } })))
-      .pipe(hash({ template: '<%= name %>-<%= hash %><%= ext %>' }))
+      .pipe(gulpif(!preview, hash({ template: '<%= name %>-<%= hash %><%= ext %>' })))
       .pipe(vfs.dest(dest))
-      .pipe(hash.manifest('assets-manifest.json', { append: true }))
+      .pipe(gulpif(!preview, hash.manifest('assets-manifest.json', { append: true })))
       .pipe(vfs.dest(dest)),
     vfs.src('font/*.{ttf,woff*(2)}', opts),
     vfs.src('img/**/*.{gif,ico,jpg,png,svg}', opts).pipe(

package-lock.json

@@ -39,6 +39,7 @@
     "gulp-connect": "~5.7",
     "gulp-eslint": "~6.0",
     "gulp-hash": "^4.2.2",
+    "gulp-if": "^3.0.0",
     "gulp-imagemin": "~6.2",
     "gulp-postcss": "~9.0",
     "gulp-uglify": "~3.0",

package.json

@@ -6,10 +6,12 @@
   {{~/if}}
   id="side-nav" 
   class="h-full bg-level1 overflow-y-scroll flex flex-col w-[18.5rem] px-2 pt-2">
-    {{> page-versions page=../page}}
-    {{#with @root.page.componentVersion}}
-    <a class="p-2 mb-1 text-h4 hover:bg-level2 rounded transition-colors !no-underline" href="{{{relativize ./url}}}">{{./title}}</a>
-    {{/with}}
+    <div class="flex items-start gap-1 mb-1 ">
+      {{#with @root.page.componentVersion}}
+      <a class="flex flex-grow py-1 px-2 text-h4 hover:bg-level2 rounded transition-colors !no-underline" href="{{{relativize ./url}}}">{{./title}}</a>
+      {{/with}}
+      {{> page-versions page=../page}}
+    </div>
     {{> nav-tree navigation=this}}
     {{> nav-secondary}}
 </nav>

src/partials/nav.hbs

@@ -1,10 +1,10 @@
 {{#with page.versions}}
-<div class="dropdown my-2">
+<div class="dropdown ml-auto">
   <button id="page-version-dropdown" title="Show other versions of page" class="group dropdown-trigger btn btn-soft btn-primary btn-small" aria-haspopup="true" aria-expanded="false">
-    Version: <span class="font-bold ml-1">{{@root.page.componentVersion.displayVersion}}{{#if (eq @root.page.component.latest.version @root.page.componentVersion.version)}} (Latest){{/if}}</span>
+    <span class="font-bold ml-1 text-xs">{{@root.page.componentVersion.displayVersion}}</span>
     <i class="material-icons text-lg color-primary motion-safe:transition-transform motion-safe:duration-300 motion-safe:ease-in-out ml-[0.15em] group-[.active]:rotate-180">expand_more</i>
   </button>
-  <ul class="dropdown-content py-2 bg-body border rounded w-32 z-40" role="menu" aria-orientation="vertical" aria-labelledby="page-version-dropdown">
+  <ul class="dropdown-content py-2 bg-body border rounded w-48 z-40" role="menu" aria-orientation="vertical" aria-labelledby="page-version-dropdown">
     {{#each this}}
     <li>
       <a