initial support for blog cards

jetty · Dec 20, 2023 · 9a0a58f · 9a0a58f
1 parent 60c4a30
commit 9a0a58f
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 0 deletions.
diff --git a/home/modules/ROOT/pages/index.adoc b/home/modules/ROOT/pages/index.adoc
@@ -2,3 +2,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:
diff --git a/ui/src/css/cards.css b/ui/src/css/cards.css
@@ -0,0 +1,116 @@
+.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 {
+  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 {
+  max-height: 15rem;
+  height: 15rem;
+}
+
+.card .content,
+.card .paragraph,
+.card p {
+  display: inline;
+}
+
+.card-title,
+.card-body {
+  display: block;
+}
+
+.card a {
+  border-radius: var(--border-radius);
+  color: inherit;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: normal;
+  display: inline-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);
+  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 {
+  transition: all 0.2s, transform 0.2s;
+  transform: translateY(0);
+  position: relative;
+  box-shadow: none;
+  top: 0;
+}
+
+.card-index a: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-secondary a {
+  border: solid 1px #e9e9ed;
+  color: var(--color-text-light);
+}
+
+.card-secondary a:hover {
+  border-color: #dfdfe0;
+}
diff --git a/ui/src/css/site.css b/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";

diff --git a/ui/src/css/vars.css b/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: orange;
+  --color-net-id: orange;
+  --color-text-light: white;
+  --color-card-border: black;
 }
diff --git a/ui/src/js/07-add-wtblog.js b/ui/src/js/07-add-wtblog.js
@@ -0,0 +1,64 @@
+;(function () {
+  'use strict'
+
+  /* configuration */
+  const _wtbURL = 'https://webtide.com/blog/feed/'
+  const _wtbTitle = 'Jetty Blogs'
+  const _wtbId = 'wtb-id'
+  const _cardMaxNumber = 6
+  var blogCard = document.getElementById(_wtbId)
+  var xhttp = new window.XMLHttpRequest()
+
+  if (blogCard) {
+    window.addEventListener('load', function () {
+      insertWTBlog()
+    })
+  }
+
+  function insertWTBlog () {
+    var feedXML
+
+    xhttp.open('GET', _wtbURL)
+    xhttp.send()
+
+    xhttp.onload = (e) => {
+      console.log(xhttp.responseType)
+
+      if (xhttp.readyState == null) {
+        console.log('response is null')
+      }
+      feedXML = xhttp.responseXML
+      const items = feedXML.querySelectorAll('item')
+      let html = `
+            <div class="sect1 card-section">
+              <h2 id="_wtb_title">${_wtbTitle}</h2>
+              <div class="sectionbody">
+        `
+      var cardCount = 0
+      items.forEach((el) => {
+        if (cardCount < _cardMaxNumber) {
+          html += `
+            <div class="openblock card card-index">
+                <div class="content">
+                    <div class="paragraph">
+                      <p>
+                        <a href="${el.querySelector('link').innerHTML}">
+                          <span class="card-title">${el.querySelector('title').innerHTML}</span>
+                          <span class="card-body card-content-overflow">${el.querySelector('description').textContent}</span>
+                        </a>
+                      </p>
+                    </div>
+                </div>
+            </div>
+      `
+        }
+        ++cardCount
+      })
+      html += `
+              </div>
+           </div>
+        `
+      blogCard.insertAdjacentHTML('beforeend', html)
+    }
+  }
+})()