Skip to content

Commit

Permalink
Move version picker to right of component home link (#159)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
colegoldsmith authored Aug 26, 2024
1 parent ed28d4e commit 872bf0a
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 29 deletions.
10 changes: 2 additions & 8 deletions gulp.d/tasks/build-preview-pages.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' }

Expand Down Expand Up @@ -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')) {
Expand Down Expand Up @@ -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 })
Expand Down
17 changes: 9 additions & 8 deletions gulp.d/tasks/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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(
Expand Down
182 changes: 176 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 6 additions & 4 deletions src/partials/nav.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/partials/page-versions.hbs
Original file line number Diff line number Diff line change
@@ -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
Expand Down

0 comments on commit 872bf0a

Please sign in to comment.