Skip to content

Commit

Permalink
rework feed integration to use Asciidoctor extension, a handlebars te…
Browse files Browse the repository at this point in the history
…mplate, and a simpler HTML structure
  • Loading branch information
mojavelinux committed Dec 20, 2023
1 parent 9a0a58f commit f0b1a0e
Show file tree
Hide file tree
Showing 13 changed files with 133 additions and 145 deletions.
2 changes: 2 additions & 0 deletions antora-playbook.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ asciidoc:
idprefix: ''
idseparator: '-'
page-pagination: ''
extensions:
- ./lib/feed-block-macro.js
ui:
bundle:
url: https://github.com/webtide/jetty.website/releases/download/ui-prod-latest/ui-bundle.zip
Expand Down
5 changes: 3 additions & 2 deletions home/modules/ROOT/pages/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
Jetty provides a web server and servlet container, additionally providing support for HTTP/2, WebSocket, OSGi, JMX, JNDI, JAAS and many other integrations.
These components are open source and are freely available for commercial use and distribution.

[#wtb-id]
== Blog Entries
:wtblog:

.Jetty Blogs
feed::https://webtide.com/blog/feed/[id=jetty-feed,max=6]
38 changes: 38 additions & 0 deletions lib/feed-block-macro.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
'use strict'

const toHash = (object) => object && !object.$$is_hash ? Opal.hash2(Object.keys(object), object) : object

const toProc = (fn) => Object.defineProperty(fn, '$$arity', { value: fn.length })

function register (registry, { file } = {}) {
if (!registry) return this.register('feed', createExtensionGroup())
registry.$groups().$store('feed', toProc(createExtensionGroup(file)))
return registry
}

function createExtensionGroup (file) {
return function () {
this.blockMacro('feed', function () {
this.process((parent, target, attrs) => {
if (file) file.asciidoc.attributes['page-has-feeds'] = ''
let currentParent = parent
let sect
if ('title' in attrs) {
const title = attrs.title
delete attrs.title
attrs.role = `${attrs.role || ''} card-section`.trimStart()
currentParent.append((sect = this.$create_section(parent, title, toHash(attrs))))
currentParent = sect
}
const dataset = { feed: target }
if ('max' in attrs) dataset.max = attrs.max
const dataAttrlist = Object.entries(dataset).reduce((accum, [name, val]) => `${accum} data-${name}="${val}"`, '')
const container = this.createPassBlock(currentParent, `<div class="card-entries"${dataAttrlist}></div>`, {})
if (!sect) return container
sect.append(container)
})
})
}
}

module.exports = { register, createExtensionGroup }
4 changes: 3 additions & 1 deletion ui/gulp.d/tasks/build-preview-pages.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ module.exports =
])
.then(([baseUiModel, { layouts }]) => {
const extensions = ((baseUiModel.asciidoc || {}).extensions || []).map((request) => {
ASCIIDOC_ATTRIBUTES[request.replace(/^@|\.js$/, '').replace(/[/]/g, '-') + '-loaded'] = ''
const slug = (request.startsWith('./') ? path.basename(request) : request).replace(/^@|\.js$/, '')
ASCIIDOC_ATTRIBUTES[slug.replace(/[/]/g, '-') + '-loaded'] = ''
if (request.startsWith('./')) request = require.resolve(request, { paths: [process.cwd()] })
const extension = require(request)
extension.register.call(Asciidoctor.Extensions)
return extension
Expand Down
2 changes: 1 addition & 1 deletion ui/gulp.d/tasks/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ module.exports = (src, dest, preview) => () => {
// NOTE concat already uses stat from newest combined file
.pipe(concat('js/site.js')),
vfs
.src('js/vendor/*([^.])?(.bundle).js', { ...opts, read: false })
.src('js/**/*([^.])?(.bundle).js', { ...opts, read: false })
.pipe(bundle(opts))
.pipe(uglify({ output: { comments: /^! / } })),
vfs
Expand Down
8 changes: 8 additions & 0 deletions ui/preview-src/home.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
= Home
// page-has-feeds is automatically set by the feed block macro when used with Antora; must be set manually in the UI preview
:page-has-feeds:

== Blog Entries

.Jetty Blogs
feed::https://webtide.com/blog/feed/[id=jetty-feed,max=6]
3 changes: 3 additions & 0 deletions ui/preview-src/ui-model.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
antoraVersion: '1.0.0'
asciidoc:
extensions:
- ./../lib/feed-block-macro.js
site:
url: http://localhost:5252
title: Eclipse Jetty
Expand Down
101 changes: 25 additions & 76 deletions ui/src/css/cards.css
Original file line number Diff line number Diff line change
@@ -1,102 +1,40 @@
.card-section::after {
content: "";
background-image: var(--card-icon);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
}

.card-section .sectionbody,
.card-section {
.card-entries {
display: grid;
/* grid-template-columns: repeat(auto-fill, 230px); */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-gap: 1rem;
margin-top: 1rem;
}

.card-section-2col .sectionbody,
.card-section-2col {
grid-template-columns: repeat(auto-fill, minmax(calc(max(50% - 0.5rem, 250px)), 1fr));
}

.card-section .sectionbody > :not(.card),
.card-section > :not(.card) {
grid-column: 1/-1;
}

.card {
.card-block {
max-height: 15rem;
height: 15rem;
hyphens: initial;
}

.card .content,
.card .paragraph,
.card p {
display: inline;
}

.card-title,
.card-body {
display: block;
}

.card a {
border-radius: var(--border-radius);
.card-block .card-link {
color: inherit;
text-decoration: none;
font-size: 0.9rem;
font-weight: normal;
display: inline-flex;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 1.2rem;
text-align: center;
height: 100%;
width: 100%;
}

.card a .card-title {
font-family: var(--heading);
font-weight: var(--weight-bold);
font-size: 1rem;
line-height: 1.4;
}

.card a .card-body {
hyphens: initial;
}

.card a .card-content-overflow {
--max-lines: 5;

max-height: calc(1.4rem * var(--max-lines));
overflow: hidden;
}

.card-index a {
border: 2px solid var(--color-card-border);
border: 1.5px solid var(--color-card-border);
border-radius: 0.25em;
position: relative;
overflow: hidden;
text-decoration: none;
}

.card-index a .card-title {
font-size: 1.2em;
text-align: center;
hyphens: initial;
}

.card-index a::before {
.card-block .card-link::before {
transition: all 0.2s, transform 0.2s;
transform: translateY(0);
position: relative;
box-shadow: none;
top: 0;
}

.card-index a:hover {
.card-block .card-link:hover {
border: 2px solid var(--color-net-id);
background-color: var(--color-net-id);
color: var(--color-focused);
Expand All @@ -106,11 +44,22 @@
transition: all 0.3s ease-in-out;
}

.card-secondary a {
border: solid 1px #e9e9ed;
color: var(--color-text-light);
.card-block .card-title {
font-size: calc(20 / var(--rem-base) * 1rem);
line-height: 1.4;
text-align: center;
overflow: hidden;
font-weight: var(--body-font-weight-bold);
}

.card-block .card-content p {
font-size: calc(16 / var(--rem-base) * 1rem);
line-height: 1.3;
}

.card-secondary a:hover {
border-color: #dfdfe0;
.card-block .overflow {
--max-lines: 5;

max-height: calc(1.4rem * var(--max-lines));
overflow: hidden;
}
2 changes: 1 addition & 1 deletion ui/src/css/vars.css
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@

/* webtide blogs */
--color-card-shadow: orange;
--color-focused: orange;
--color-focused: blue;
--color-net-id: orange;
--color-text-light: white;
--color-card-border: black;
Expand Down
64 changes: 0 additions & 64 deletions ui/src/js/07-add-wtblog.js

This file was deleted.

35 changes: 35 additions & 0 deletions ui/src/js/feeds.bundle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
;(function () {
'use strict'

var feeds = [].slice.call(document.querySelectorAll('.doc [data-feed]'))
if (!feeds.length) return

var template = document.getElementById('card-entry')
if (!(template && (template = template.content.querySelector('.card-block')))) return

var XMLHttpRequest = window.XMLHttpRequest

feeds.forEach(insertFeed)

function insertFeed (feed) {
try {
var url = feed.dataset.feed
var max = Number(feed.dataset.max) || Infinity
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.addEventListener('load', function () {
var items = [].slice.call(this.responseXML.querySelectorAll('item'), 0, max)
items.forEach(function (item) {
var entry = template.cloneNode(true)
entry.querySelector('.card-link').setAttribute('href', item.querySelector('link').textContent)
entry.querySelector('.card-title').innerHTML = item.querySelector('title').innerHTML
entry.querySelector('.card-content p').innerHTML = item.querySelector('description').textContent
feed.appendChild(entry)
})
})
} catch (e) {
console.error('Failed to retrieve feed: ' + url + '.', e)
}
xhr.send(null)
}
})()
11 changes: 11 additions & 0 deletions ui/src/partials/feeds.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template id="card-entry" class="hidden">
<div class="card-block">
<a class="card-link">
<div class="card-title"></div>
<div class="card-content overflow">
<p></p>
</div>
</a>
</div>
</template>
<script src="{{{uiRootPath}}}/js/feeds.js"></script>
3 changes: 3 additions & 0 deletions ui/src/partials/footer-scripts.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
{{#unless (eq page.attributes.has-feeds undefined)}}
{{> feeds}}
{{/unless}}
<script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
{{#if env.SITE_SEARCH_PROVIDER}}
{{> search-scripts}}
Expand Down

0 comments on commit f0b1a0e

Please sign in to comment.