Adjust Spring Antora UI to SAYA Platform

Use Lunr for client side search
* Remove related projects
* Adjust brand colors

Author: ganapatib

README.md

@@ -1,16 +1,16 @@
 
 <p align="center">
-  <a href="https://www.spring.io/">
-    <img alt="Spring" src="https://spring.io/img/spring-2.svg" width="250" />
+  <a href="https://www.sayaplatform.com/">
+    <img alt="SAYA Platform" src="https://www.sayaplatform.com/wp-content/uploads/2021/12/saya-logo-4.png" width="250" />
   </a>
 </p>
 
-[![On Push](https://github.com/spring-io/antora-ui-spring/actions/workflows/push.yml/badge.svg?branch=main)](https://github.com/spring-io/antora-ui-spring/actions/workflows/push.yml)
+[![On Push](https://github.com/3cortextechnologies/saya-antora-ui/actions/workflows/push.yml/badge.svg?branch=main)](https://github.com/3cortextechnologies/saya-antora-ui/actions/workflows/push.yml)
 
 
-This project generates and packages the static resources that Spring uses for document production.
+This project generates and packages the static resources that SAYA uses for document production.
 
-This project is based on [Antora](https://antora.org).
+This project is based on [Spring Antora UI](https://github.com/spring-io/antora-ui-spring).
 
 
 ## Development Quickstart
@@ -20,15 +20,15 @@ A more comprehensive tutorial can be found in the documentation at [docs.antora.
 
 ### Prerequisites
 
-To preview and bundle the Antora Spring UI, you need the following software on your computer:
+To preview and bundle the SAYA Antora UI, you need the following software on your computer:
 
 * [git](https://git-scm.com/) (command: `git`)
 * [Node.js](https://nodejs.org/) (commands: `node` and `npm`)
 * [Gulp CLI](http://gulpjs.com/) (command: `gulp`)
 
 ### Preview the UI
 
-The Spring Antora UI project is configured to preview offline.
+The SAYA Antora UI project is configured to preview offline.
 The files in the `preview-src/` folder provide the sample content that allow you to see the UI in action.
 In this folder, you'll primarily find pages written in AsciiDoc.
 These pages provide a representative sample and kitchen sink of content from the real site.
@@ -76,31 +76,6 @@ gulp bundle:pack
 
 The UI bundle will again be available at `build/ui-bundle.zip`.
 
-## Extensions to the UI
-
-### Related Documentation
-
-The UI presents a list of related documentation and that documentation can be filtered using two attributes:
-
-* page-related-doc-categories - The categories to be included in the related documentation
-* page-related-doc-projects - The project ids to be included in the related documentation
-
-For a complete listing of valid categories and ids view [related_projects.js](https://github.com/spring-io/antora-ui-spring/blob/main/src/helpers/related_projects.js)
-
-The configuration is typically specified in asciidoc attributes section of the `antora-playbook.yml`:
-
-```
-asciidoc:
-  attributes:
-    # Include the projects with the security category
-    page-related-doc-categories: security
-    # Include the projects with ids framework and graphql
-    page-related-doc-projects: framework,graphql
-```
-
-The Related Documentation links to the `All Docs...` page.
-To include this resource, ensure that the [antora-extensions](https://github.com/spring-io/antora-extensions/blob/main/README.adoc) is using 1.7.0+ and the [Static Page Extension](https://github.com/spring-io/antora-extensions/blob/main/README.adoc#static-page) is included.
-
 ## Authors
 
 Development of Antora is led and sponsored by [OpenDevise Inc](https://opendevise.com/).
@@ -110,4 +85,3 @@ Development of Antora is led and sponsored by [OpenDevise Inc](https://opendevis
 Copyright (C) 2017-present OpenDevise Inc. and the Antora Project.
 
 Use of this software is granted under the terms of the [Mozilla Public License Version 2.0](https://www.mozilla.org/en-US/MPL/2.0/) (MPL-2.0).
-See [LICENSE](https://github.com/spring-io/antora-ui-spring/blob/feat/gh-226/LICENSE) to find the full license text.

gulp.d/tasks/build-preview-search-index.js

@@ -0,0 +1,92 @@
+'use strict'
+
+const Asciidoctor = require('@asciidoctor/core')()
+const fs = require('fs')
+const { promises: fsp } = fs
+const ospath = require('path')
+const yaml = require('js-yaml')
+
+module.exports = (src, previewSrc, previewDest) => async function buildPreviewSearchIndex () {
+  const adocFiles = await collectAdocFiles(previewSrc)
+  const docs = []
+
+  for (const adocPath of adocFiles) {
+    const adocContents = await fsp.readFile(adocPath, 'utf8')
+    const doc = Asciidoctor.load(adocContents, { safe: 'safe' })
+    const title = doc.getDocumentTitle() || ospath.basename(adocPath, '.adoc')
+    const html = doc.convert()
+    const text = html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim()
+
+    const pageModel = await loadPageModel(adocPath)
+    let url = (pageModel && pageModel.url) || ''
+
+    if (!url) {
+      const rel = ospath.relative(previewSrc, adocPath).replace(/\\/g, '/')
+      url = '/' + rel.replace(/\.adoc$/, '.html')
+    }
+
+    const titles = extractSectionTitles(doc, text, title)
+
+    docs.push({ url, title, text, titles })
+  }
+
+  const jsDir = previewDest
+  await fsp.mkdir(jsDir, { recursive: true })
+
+  const indexJs = [
+    'window.antoraLunr = window.antoraLunr || {};',
+    'window.antoraLunr.docs = ' + JSON.stringify(docs, null, 2) + ';',
+    '',
+  ].join('\n')
+
+  await fsp.writeFile(ospath.join(jsDir, 'search-index.js'), indexJs, 'utf8')
+}
+
+function extractSectionTitles (doc, fullText, defaultTitle) {
+  const titles = []
+
+  const sections = doc.findBy({ context: 'section' }) || []
+
+  sections.forEach((sect) => {
+    const title = sect.getTitle && sect.getTitle()
+    const id = sect.getId && sect.getId()
+    const html = sect.convert()
+    const text = html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim()
+
+    if (title || text) {
+      titles.push({ id: id || null, title: title || defaultTitle, text })
+    }
+  })
+
+  if (!titles.length) {
+    titles.push({ id: null, title: defaultTitle, text: fullText })
+  }
+
+  return titles
+}
+
+async function collectAdocFiles (dir) {
+  const entries = await fsp.readdir(dir, { withFileTypes: true })
+  const files = []
+
+  for (const entry of entries) {
+    const fullPath = ospath.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      files.push(...(await collectAdocFiles(fullPath)))
+    } else if (entry.isFile() && entry.name.endsWith('.adoc')) {
+      files.push(fullPath)
+    }
+  }
+
+  return files
+}
+
+async function loadPageModel (adocPath) {
+  const ymlPath = adocPath + '.yml'
+  try {
+    const contents = await fsp.readFile(ymlPath, 'utf8')
+    return yaml.load(contents)
+  } catch (e) {
+    return undefined
+  }
+}

gulpfile.js

@@ -113,10 +113,15 @@ const buildPreviewPagesTask = createTask({
   call: task.buildPreviewPages(srcDir, previewSrcDir, previewDestDir, livereload),
 })
 
+const buildPreviewSearchIndexTask = createTask({
+  name: 'preview:build-search-index',
+  call: task.buildPreviewSearchIndex(srcDir, previewSrcDir, previewDestDir),
+})
+
 const previewBuildTask = createTask({
   name: 'preview:build',
   desc: 'Process and stage the UI assets and generate pages for the preview',
-  call: parallel(buildTask, buildPreviewPagesTask),
+  call: parallel(buildTask, buildPreviewPagesTask, buildPreviewSearchIndexTask),
 })
 
 const previewServeTask = createTask({

package-lock.json

@@ -1,11 +1,10 @@
 {
-  "name": "antora-ui-spring",
-  "description": "Produces the UI bundle for projects on docs.spring.io that are built with Antora",
-  "homepage": "https://docs.spring.io",
-  "license": "MPL-2.0",
+  "name": "saya-antora-ui",
+  "description": "Produces the UI bundle for projects on sayadev.3cortex.com/docs that are built with Antora",
+  "homepage": "https://sayaplatform.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/spring-io/antora-ui-spring"
+    "url": "https://github.com/3cortextechnologies/saya-antora-ui"
   },
   "scripts": {
     "start": "gulp preview",

package.json

@@ -67,7 +67,7 @@ Content after
 
 === URLs
 
-The homepage for the Asciidoctor Project is https://asciidoctor.org. 
+The homepage for the Asciidoctor Project is https://asciidoctor.org.
 
 Ask questions on the http://discuss.asciidoctor.org/[*mailing list*].
 
@@ -82,10 +82,10 @@ The hail-and-rainbow protocol can be initiated at five levels:
 double, tertiary, supernumerary, supermassive, and apocalyptic party.
 A bold statement!
 
-Another outrageous statement.footnote:disclaimer[] 
+Another outrageous statement.footnote:disclaimer[]
 
-footnote:[The double hail-and-rainbow level makes my toes tingle.]   
-footnote:disclaimer[Opinions are my own.] 
+footnote:[The double hail-and-rainbow level makes my toes tingle.]
+footnote:disclaimer[Opinions are my own.]
 
 
 [.impact]
@@ -95,10 +95,10 @@ footnote:disclaimer[Opinions are my own.]
 
 ==== Alone
 
-[#img-sunset] 
-.A mountain sunset 
-[link=https://www.flickr.com/photos/javh/5448336655] 
-image::/_/img/spring-logo.svg[Spring,300,200]
+[#img-sunset]
+.A mountain sunset
+[link=https://www.flickr.com/photos/javh/5448336655]
+image::/_/images/saya-logo.png[Spring,300,200]
 
 ==== Inline
 
@@ -115,32 +115,32 @@ You can find image:https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg[L
 --
 [.left]
 .Image A
-image::/_/img/spring-logo.svg[A,240,180]
+image::/_/images/saya-logo.png[A,240,180]
 
 [.left]
 .Image B
-image::/_/img/spring-logo.svg[B,240,180]
+image::/_/images/saya-logo.png[B,240,180]
 --
 
 Text below images.
 
 
 === Sizing images (1)
 
-image::/_/img/spring-logo.svg[Spring,640,480]
+image::/_/images/saya-logo.png[Spring,640,480]
 
 === Sizing images (2)
 
-image::/_/img/spring-logo.svg[Spring,50%]
+image::/_/images/saya-logo.png[Spring,50%]
 
 
 === Taming SVGs
 
-image::/_/img/spring-logo.svg[Static,300]
+image::/_/images/saya-logo.png[Static,300]
 
-image::/_/img/spring-logo.svg[Interactive,300,opts=interactive]
+image::/_/images/saya-logo.png[Interactive,300,opts=interactive]
 
-image::/_/img/spring-logo.svg[Embedded,300,opts=inline]
+image::/_/images/saya-logo.png[Embedded,300,opts=inline]
 
 === Image invert dark mode
 
@@ -158,9 +158,9 @@ But **u**ltimate victory could only be won if we divined the *_true name_* of th
 
 === Quotation Marks and Apostrophes
 
-"`What kind of charm?`" Lazarus asked. "`An odoriferous one or a mineral one?`" 
+"`What kind of charm?`" Lazarus asked. "`An odoriferous one or a mineral one?`"
 
-Kizmet shrugged. "`The note from Olaf's desk says '`wormwood and licorice,`' but these could be normal groceries for werewolves.`" 
+Kizmet shrugged. "`The note from Olaf's desk says '`wormwood and licorice,`' but these could be normal groceries for werewolves.`"
 
 === Subscript and Superscript
 
@@ -460,7 +460,7 @@ fun doFilter(request: ServletRequest, response: ServletResponse, chain: FilterCh
 
 ==== Multi-lines
 
-[IMPORTANT] 
+[IMPORTANT]
 .title
 ====
 This is an important admonition
@@ -599,8 +599,8 @@ This is a stem block.
 
 ==== Multi-lines
 
-.Gettysburg Address 
-[quote, Abraham Lincoln, Address delivered at the dedication of the Cemetery at Gettysburg]     
+.Gettysburg Address
+[quote, Abraham Lincoln, Address delivered at the dedication of the Cemetery at Gettysburg]
 ____
 Four score and seven years ago our fathers brought forth
 on this continent a new nation...
@@ -643,8 +643,8 @@ But nothing can be changed until it is faced.
 
 ==== Multi-lines
 
-.AsciiDoc history 
-**** 
+.AsciiDoc history
+****
 AsciiDoc was first released in Nov 2002 by Stuart Rackham.
 It was designed from the start to be a shorthand syntax
 for producing professional documents like DocBook and LaTeX.
@@ -686,15 +686,15 @@ on little cat feet.
 
 === Simple table
 
-|==== 
+|====
 
-| Cell in column 1, row 1 | Cell in column 2, row 1  
+| Cell in column 1, row 1 | Cell in column 2, row 1
 
 | Cell in column 1, row 2 | Cell in column 2, row 2
 
 | Cell in column 1, row 3 | Cell in column 2, row 3
 
-|==== 
+|====
 
 
 === Number of columns

preview-src/samples/content/index.adoc

@@ -47,8 +47,8 @@
   margin: 0 auto;
 }
 
-#springlogo,
-#springlogo-foot {
+#sayalogo,
+#sayalogo-foot {
   height: 45px;
   max-width: 250px;
 }
@@ -280,7 +280,7 @@ html.dark-theme #modal-versions .version-toggle span {
 }
 
 #modal-versions .current {
-  background-color: #80ea6e;
+  background-color: #df3d80;
   color: #111;
   align-items: center;
   border-radius: 4px;

src/css/main.css

@@ -125,7 +125,7 @@
     padding: 3rem;
   }
   .modal__container {
-    max-width: 600px;
+    max-width: 720px;
     min-width: 50%;
     width: auto;
   }