Merge pull request #10 from webtide/add-blog

initial support for blog cards

antora-playbook.yml

@@ -19,6 +19,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

home/modules/ROOT/pages/index.adoc

@@ -2,3 +2,8 @@
 
 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.
+
+== Blog Entries
+
+.Jetty Blogs
+feed::https://webtide.com/blog/feed/[id=jetty-feed,max=6]

lib/feed-block-macro.js

@@ -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 }

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

@@ -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

ui/gulp.d/tasks/build.js

@@ -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

ui/preview-src/home.adoc

@@ -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]

ui/preview-src/ui-model.yml

@@ -1,4 +1,7 @@
 antoraVersion: '1.0.0'
+asciidoc:
+  extensions:
+  - ./../lib/feed-block-macro.js
 site:
   url: http://localhost:5252
   title: Eclipse Jetty

ui/src/css/cards.css

@@ -0,0 +1,65 @@
+.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-block {
+  max-height: 15rem;
+  height: 15rem;
+  hyphens: initial;
+}
+
+.card-block .card-link {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 1.2rem;
+  height: 100%;
+  width: 100%;
+  border: 1.5px solid var(--color-card-border);
+  border-radius: 0.25em;
+  position: relative;
+}
+
+.card-block .card-link::before {
+  transition: all 0.2s, transform 0.2s;
+  transform: translateY(0);
+  position: relative;
+  box-shadow: none;
+  top: 0;
+}
+
+.card-block .card-link:hover {
+  border: 2px solid var(--color-net-id);
+  background-color: var(--color-net-id);
+  color: var(--color-focused);
+  transform: translateY(-3px);
+  top: -3px;
+  box-shadow: 0 10px 20px 0 var(--color-card-shadow);
+  transition: all 0.3s ease-in-out;
+}
+
+.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-block .overflow {
+  --max-lines: 5;
+
+  max-height: calc(1.4rem * var(--max-lines));
+  overflow: hidden;
+}

ui/src/css/site.css

@@ -5,6 +5,7 @@
 @import "body.css";
 @import "nav.css";
 @import "main.css";
+@import "cards.css";
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";

ui/src/css/vars.css

@@ -144,4 +144,11 @@
   --z-index-toolbar: 2;
   --z-index-page-version-menu: 3;
   --z-index-navbar: 4;
+
+  /* webtide blogs */
+  --color-card-shadow: orange;
+  --color-focused: blue;
+  --color-net-id: orange;
+  --color-text-light: white;
+  --color-card-border: black;
 }

ui/src/js/feeds.bundle.js

@@ -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)
+  }
+})()

ui/src/partials/feeds.hbs

@@ -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>

ui/src/partials/footer-scripts.hbs

@@ -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}}