This is an automated email from the ASF dual-hosted git repository.
bdelacretaz pushed a commit to branch pagefind
in repository https://gitbox.apache.org/repos/asf/sling-site.git
commit 560474ff09b926ea76d3ae08836bed6545bdc8e5
Author: Bertrand Delacretaz <bdelacre...@apache.org>
AuthorDate: Thu Sep 28 14:07:07 2023 +0200
Add Pagefind for site search
---
.sling-module.json | 2 +-
README.md | 9 +++++++
pom.xml | 46 +++++++++++++++++++++++++++++++-
src/main/jbake/assets/res/css/site.css | 17 +++++++++---
src/main/jbake/templates/header.tpl | 10 +++++++
src/main/jbake/templates/layout/main.tpl | 3 +++
src/main/jbake/templates/page.tpl | 2 +-
7 files changed, 83 insertions(+), 6 deletions(-)
diff --git a/.sling-module.json b/.sling-module.json
index fae36fa51..9f0b43658 100644
--- a/.sling-module.json
+++ b/.sling-module.json
@@ -5,7 +5,7 @@
"branches": {
"master": {
"nodeLabel": "git-websites",
- "additionalMavenParams": "-Ppublish-site -Dmsg=\"Automatic
website deployment from $BUILD_URL\""
+ "additionalMavenParams": "-Ppagefind,publish-site
-Dmsg=\"Automatic website deployment from $BUILD_URL\""
}
},
"jdks": [
diff --git a/README.md b/README.md
index 3e551f9f8..a3c37a1c0 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,10 @@ Clone this repository, run the below Maven command, open
<http://localhost:8820/
This allows you to experiment with your changes before eventually
publishing them.
+To also activate the site search feature, use
+
+ mvn clean package -Ppagefind,run-site
+
## How to publish the website
The publishing process consists out of 2 steps:
@@ -76,6 +80,11 @@ Highlighting can be disabled by specifying an unknown
language in the `<pre>` bl
This will not be highlighted.
</pre>
+## Site search
+
+The site search is based on [Pagefind](https://pagefind.app/), which is also
used by the ASF
+[community](https://community.apache.org/) and [www](https://www.apache.org/)
websites. Searching the source code for "pagefind" shows how the integration
works.
+
## Other Apache projects using JBake
It's sometimes useful to ~~steal ideas~~ get inspiration from other projects
using similar tools, for now we know of:
diff --git a/pom.xml b/pom.xml
index ec70a016d..d1db2a820 100644
--- a/pom.xml
+++ b/pom.xml
@@ -35,6 +35,12 @@
<repos.list.fullpath>${downloads.dir}/github-repositories.xml</repos.list.fullpath>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+
+ <!-- Must match the JBake output folder -->
+
<pagefind.site.folder>${project.build.directory}/${project.artifactId}-${project.version}</pagefind.site.folder>
+
+ <!-- pagefind needs to run after compile and before package... -->
+ <pagefind.maven.phase>test</pagefind.maven.phase>
</properties>
<build>
@@ -210,6 +216,44 @@
</plugins>
</build>
</profile>
+ <profile>
+ <id>pagefind</id>
+ <build>
+ <plugins>
+ <plugin>
+ <groupId>com.github.eirslett</groupId>
+ <artifactId>frontend-maven-plugin</artifactId>
+ <version>1.14.0</version>
+ <configuration>
+
<npmInheritsProxyConfigFromMaven>false</npmInheritsProxyConfigFromMaven>
+
<installDirectory>${project.build.directory}</installDirectory>
+
<workingDirectory>${project.build.directory}</workingDirectory>
+ </configuration>
+ <executions>
+ <execution>
+ <id>Install node and npm</id>
+ <goals>
+ <goal>install-node-and-npm</goal>
+ </goals>
+ <phase>${pagefind.maven.phase}</phase>
+ <configuration>
+ <nodeVersion>v20.7.0</nodeVersion>
+ </configuration>
+ </execution>
+ <execution>
+ <id>Build pagefind index</id>
+ <goals>
+ <goal>npx</goal>
+ </goals>
+ <phase>${pagefind.maven.phase}</phase>
+ <configuration>
+ <arguments>pagefind --site
${pagefind.site.folder}</arguments>
+ </configuration>
+ </execution>
+ </executions>
+ </plugin>
+ </plugins>
+ </build>
+ </profile>
</profiles>
-
</project>
diff --git a/src/main/jbake/assets/res/css/site.css
b/src/main/jbake/assets/res/css/site.css
index 01bea2c8b..39395e5fc 100644
--- a/src/main/jbake/assets/res/css/site.css
+++ b/src/main/jbake/assets/res/css/site.css
@@ -35,7 +35,7 @@ a:hover {
.sidemenu {
- border-top: 10px solid #f9bb00;
+ border-top: var(--page-border-top-height,10px) solid #f9bb00;
}
.sidemenu ul,.sidemenu p {
@@ -47,7 +47,7 @@ a:hover {
}
.main {
- border-top: 10px solid #cde0ea;
+ border-top: var(--page-border-top-height,10px) solid #cde0ea;
max-width: 1000px;
}
@@ -150,4 +150,15 @@ ul.repolist {
color: #060;
margin: 0;
padding: 0;
-}
\ No newline at end of file
+}
+
+#searchbox {
+ width: 100%;
+ --pagefind-ui-border: #cde0ea;
+ --pagefind-ui-border-width: 1px;
+ --pagefind-ui-border-radius: 1px;
+}
+
+:root {
+ --page-border-top-height: 5px;
+}
diff --git a/src/main/jbake/templates/header.tpl
b/src/main/jbake/templates/header.tpl
index 6b18d31bf..54cabbb34 100644
--- a/src/main/jbake/templates/header.tpl
+++ b/src/main/jbake/templates/header.tpl
@@ -35,4 +35,14 @@ head {
</script>
<!-- End Matomo Code -->
'''
+
+ yieldUnescaped "<link href='/pagefind/pagefind-ui.css'
rel='stylesheet'>"
+ yieldUnescaped "<script src='/pagefind/pagefind-ui.js'
type='text/javascript'></script>"
+ yieldUnescaped '''
+ <script>
+ window.addEventListener('DOMContentLoaded', (event) => {
+ new PagefindUI({ element: "#searchbox" });
+ });
+ </script>
+ '''
}
\ No newline at end of file
diff --git a/src/main/jbake/templates/layout/main.tpl
b/src/main/jbake/templates/layout/main.tpl
index 36e57c265..9b1c8bb77 100644
--- a/src/main/jbake/templates/layout/main.tpl
+++ b/src/main/jbake/templates/layout/main.tpl
@@ -6,6 +6,9 @@ html(lang:'en'){
div(class:"level is-marginless") {
include template: 'logos.tpl'
}
+ section(class:"searchbox level is-marginless") {
+ div(id:"searchbox") {}
+ }
div(class:"columns is-gapless") {
div(class:"column is-narrow sidemenu") {
include template: 'menu.tpl'
diff --git a/src/main/jbake/templates/page.tpl
b/src/main/jbake/templates/page.tpl
index 92da66bd7..a1658776d 100644
--- a/src/main/jbake/templates/page.tpl
+++ b/src/main/jbake/templates/page.tpl
@@ -13,7 +13,7 @@ layout 'layout/main.tpl', true,
include template : 'toc-brick.tpl'
},
bodyContents: contents {
- div(class:"row"){
+ div(class:"row","data-pagefind-body":true){
div(){
section(){
yieldUnescaped U.processBody(content, config)
