From 872bf0a461b90214c35eb3a5eb3f82e1b9ca68ce Mon Sep 17 00:00:00 2001 From: Cole Goldsmith Date: Mon, 26 Aug 2024 15:32:52 -0500 Subject: [PATCH] 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 --- gulp.d/tasks/build-preview-pages.js | 10 +- gulp.d/tasks/build.js | 17 +-- package-lock.json | 182 +++++++++++++++++++++++++++- package.json | 1 + src/partials/nav.hbs | 10 +- src/partials/page-versions.hbs | 6 +- 6 files changed, 197 insertions(+), 29 deletions(-) diff --git a/gulp.d/tasks/build-preview-pages.js b/gulp.d/tasks/build-preview-pages.js index dadc99a2..a3bfa810 100644 --- a/gulp.d/tasks/build-preview-pages.js +++ b/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 }) diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js index 2099fd00..1b89d0e4 100644 --- a/gulp.d/tasks/build.js +++ b/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,24 +75,24 @@ 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(''), opts).pipe(concat('js/vendor/.js')), @@ -99,9 +100,9 @@ module.exports = (src, dest, preview) => () => { 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( diff --git a/package-lock.json b/package-lock.json index daa56699..168ee832 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,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", @@ -5791,6 +5792,12 @@ "node": ">=0.10.0" } }, + "node_modules/fork-stream": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz", + "integrity": "sha512-Pqq5NnT78ehvUnAk/We/Jr22vSvanRlFTpAmQ88xBY/M1TlHe+P0ILuEyXS595ysdGfaj22634LBkGMA2GTcpA==", + "dev": true + }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -6407,6 +6414,27 @@ "vinyl": "^2.1.0" } }, + "node_modules/gulp-if": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz", + "integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==", + "dev": true, + "dependencies": { + "gulp-match": "^1.1.0", + "ternary-stream": "^3.0.0", + "through2": "^3.0.1" + } + }, + "node_modules/gulp-if/node_modules/through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "dependencies": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + }, "node_modules/gulp-imagemin": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-6.2.0.tgz", @@ -6439,6 +6467,15 @@ } } }, + "node_modules/gulp-match": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz", + "integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==", + "dev": true, + "dependencies": { + "minimatch": "^3.0.3" + } + }, "node_modules/gulp-postcss": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/gulp-postcss/-/gulp-postcss-9.0.1.tgz", @@ -14411,9 +14448,9 @@ } }, "node_modules/stream-shift": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", - "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz", + "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==", "dev": true }, "node_modules/stream-splicer": { @@ -15154,6 +15191,54 @@ "node": ">=4" } }, + "node_modules/ternary-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz", + "integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==", + "dev": true, + "dependencies": { + "duplexify": "^4.1.1", + "fork-stream": "^0.0.4", + "merge-stream": "^2.0.0", + "through2": "^3.0.1" + } + }, + "node_modules/ternary-stream/node_modules/duplexify": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz", + "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==", + "dev": true, + "dependencies": { + "end-of-stream": "^1.4.1", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1", + "stream-shift": "^1.0.2" + } + }, + "node_modules/ternary-stream/node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dev": true, + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/ternary-stream/node_modules/through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "dependencies": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -21171,6 +21256,12 @@ "for-in": "^1.0.1" } }, + "fork-stream": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/fork-stream/-/fork-stream-0.0.4.tgz", + "integrity": "sha512-Pqq5NnT78ehvUnAk/We/Jr22vSvanRlFTpAmQ88xBY/M1TlHe+P0ILuEyXS595ysdGfaj22634LBkGMA2GTcpA==", + "dev": true + }, "fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -21690,6 +21781,29 @@ "vinyl": "^2.1.0" } }, + "gulp-if": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/gulp-if/-/gulp-if-3.0.0.tgz", + "integrity": "sha512-fCUEngzNiEZEK2YuPm+sdMpO6ukb8+/qzbGfJBXyNOXz85bCG7yBI+pPSl+N90d7gnLvMsarthsAImx0qy7BAw==", + "dev": true, + "requires": { + "gulp-match": "^1.1.0", + "ternary-stream": "^3.0.0", + "through2": "^3.0.1" + }, + "dependencies": { + "through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "requires": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + } + } + }, "gulp-imagemin": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-6.2.0.tgz", @@ -21709,6 +21823,15 @@ "through2-concurrent": "^2.0.0" } }, + "gulp-match": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/gulp-match/-/gulp-match-1.1.0.tgz", + "integrity": "sha512-DlyVxa1Gj24DitY2OjEsS+X6tDpretuxD6wTfhXE/Rw2hweqc1f6D/XtsJmoiCwLWfXgR87W9ozEityPCVzGtQ==", + "dev": true, + "requires": { + "minimatch": "^3.0.3" + } + }, "gulp-postcss": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/gulp-postcss/-/gulp-postcss-9.0.1.tgz", @@ -27857,9 +27980,9 @@ } }, "stream-shift": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", - "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz", + "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==", "dev": true }, "stream-splicer": { @@ -28415,6 +28538,53 @@ "uuid": "^3.0.1" } }, + "ternary-stream": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ternary-stream/-/ternary-stream-3.0.0.tgz", + "integrity": "sha512-oIzdi+UL/JdktkT+7KU5tSIQjj8pbShj3OASuvDEhm0NT5lppsm7aXWAmAq4/QMaBIyfuEcNLbAQA+HpaISobQ==", + "dev": true, + "requires": { + "duplexify": "^4.1.1", + "fork-stream": "^0.0.4", + "merge-stream": "^2.0.0", + "through2": "^3.0.1" + }, + "dependencies": { + "duplexify": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz", + "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==", + "dev": true, + "requires": { + "end-of-stream": "^1.4.1", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1", + "stream-shift": "^1.0.2" + } + }, + "readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + }, + "through2": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz", + "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==", + "dev": true, + "requires": { + "inherits": "^2.0.4", + "readable-stream": "2 || 3" + } + } + } + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index 0eb93396..11fa33aa 100644 --- a/package.json +++ b/package.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", diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs index 50078897..dee24729 100644 --- a/src/partials/nav.hbs +++ b/src/partials/nav.hbs @@ -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}} - {{./title}} - {{/with}} +
+ {{#with @root.page.componentVersion}} + {{./title}} + {{/with}} + {{> page-versions page=../page}} +
{{> nav-tree navigation=this}} {{> nav-secondary}} diff --git a/src/partials/page-versions.hbs b/src/partials/page-versions.hbs index 53bd5426..58b4effb 100644 --- a/src/partials/page-versions.hbs +++ b/src/partials/page-versions.hbs @@ -1,10 +1,10 @@ {{#with page.versions}} -
+
-