Added table index and fixed few minor bugs

component/src/main/resources/application.properties

@@ -1,9 +1,18 @@
-# Application
+# application
 application.base-uri=http://localhost:${quarkus.http.port}
 
 quarkus.application.name=blog
 quarkus.http.port=9000
 
-# Jackson
+# jackson
 quarkus.jackson.serialization-inclusion=non-null
 quarkus.jackson.accept-case-insensitive-enums=true
+
+# web-bundler
+quarkus.web-bundler.bundle.utils=true
+quarkus.web-bundler.bundle.utils.key=utils
+quarkus.web-bundler.bundle.utils.dir=utils
+
+quarkus.web-bundler.bundle.blog-page=true
+quarkus.web-bundler.bundle.blog-page.key=blogpage
+quarkus.web-bundler.bundle.blog-page.dir=blogpage

component/src/main/resources/templates/BlogPostResource/blogPost.html

@@ -15,11 +15,15 @@
         <script>hljs.highlightAll();</script>
     {/extraJs}
 
+    {#extraBundle}
+        {#bundle key="blogpage" tag="script" /}
+    {/extraBundle}
+
     {#withProgressBar}{/withProgressBar}
 
     <div class="mb-5 pb-5 rounded-top bg-body-tertiary">
 
-        <div class="card mb-4 background-purple rounded-top" style="border: none; border-radius: unset">
+        <div class="card background-purple rounded-top" style="border: none; border-radius: unset">
             <div class="row g-0">
                 <div class="col">
                     <img src="{blogPost.image.url}?w=200" class="img-fluid rounded-top rounded-end-0 fit-all" style="min-height: 200px" alt="{blogPost.image.title}">
@@ -34,40 +38,60 @@ <h1 class="card-title">{blogPost.title}</h1>
             </div>
         </div>
 
-        {#for block in blogPost.blocks}
-            {#when block.node}
-                {#is EMBEDDED_ENTRY}
-                    {#include blog/blog-image image=block.image /}
-                {#is HEADING_1}
-                    {#include blog/blog-header heading=1 value=block.blocks[0].value}{/include}
-                {#is HEADING_2}
-                    {#include blog/blog-header heading=2 value=block.blocks[0].value}{/include}
-                {#is HEADING_3}
-                    {#include blog/blog-header heading=3 value=block.blocks[0].value}{/include}
-                {#is HEADING_4}
-                    {#include blog/blog-header heading=4 value=block.blocks[0].value}{/include}
-                {#is HEADING_5}
-                    {#include blog/blog-header heading=5 value=block.blocks[0].value}{/include}
-                {#is HEADING_6}
-                    {#include blog/blog-header heading=6 value=block.blocks[0].value}{/include}
-                {#is PARAGRAPH}
-                    {#include blog/blog-paragraph blocks=block.blocks /}
-                {#is UL_LIST}
-                    {#include blog/blog-unordered-list blocks=block.blocks /}
-                {#else}
-            {/when}
-        {/for}
-
-    </div>
-
-    {#if blogPost.relatedBlogPosts}
-        <div>
-            <span class="fst-italic">Related blog posts</span>
-            <hr />
-            {#for relatedBlogPost in blogPost.relatedBlogPosts}
-                {#if relatedBlogPost_isFirst}/{/if}&nbsp;<a href="/blog-posts/{relatedBlogPost.slug}" class="text-decoration-none link-opacity-75 link-opacity-100-hover">{relatedBlogPost.title}</a>&nbsp;/
-            {/for}
+        <div class="row pt-3 g-0">
+            {#if blogPost.withIndexHeading}
+                <div class="col-2 d-none d-xl-flex flex-column">
+                    <div id="index" class="mt-auto sticky-bottom pb-3">
+                        <div class="ps-3">
+                            <hr>
+                        </div>
+                        {#for block in blogPost.blocks}
+                            {#if block.node.indexHeading}
+                                {#include blog/blog-index block=block index=block.blocks[0] /}
+                            {/if}
+                        {/for}
+                    </div>
+                </div>
+                <div class="col col-xl-10">
+            {#else}
+                <div class="col">
+            {/if}
+                    {#for block in blogPost.blocks}
+                        {#when block.node}
+                            {#is EMBEDDED_ENTRY}
+                                {#include blog/blog-image image=block.image /}
+                            {#is HEADING_1}
+                                {#include blog/blog-header heading=1 value=block.blocks[0] /}
+                            {#is HEADING_2}
+                                {#include blog/blog-header heading=2 value=block.blocks[0] /}
+                            {#is HEADING_3}
+                                {#include blog/blog-header heading=3 value=block.blocks[0] /}
+                            {#is HEADING_4}
+                                {#include blog/blog-header heading=4 value=block.blocks[0] /}
+                            {#is HEADING_5}
+                                {#include blog/blog-header heading=5 value=block.blocks[0] /}
+                            {#is HEADING_6}
+                                {#include blog/blog-header heading=6 value=block.blocks[0] /}
+                            {#is PARAGRAPH}
+                                {#include blog/blog-paragraph blocks=block.blocks /}
+                            {#is UL_LIST}
+                                {#include blog/blog-unordered-list blocks=block.blocks /}
+                            {#else}
+                        {/when}
+                    {/for}
+                </div>
+            </div>
         </div>
-    {/if}
+        {#if blogPost.relatedBlogPosts}
+            <div class="row g-0">
+                <div class="col-12">
+                <span class="fst-italic">Related blog posts</span>
+                <hr />
+                {#for relatedBlogPost in blogPost.relatedBlogPosts}
+                    {#if relatedBlogPost_isFirst}/{/if}&nbsp;<a href="/blog-posts/{relatedBlogPost.slug}" class="text-decoration-none link-opacity-100 link-opacity-75-hover">{relatedBlogPost.title}</a>&nbsp;/
+                {/for}
+                </div>
+            </div>
+        {/if}
 
 {/include}

component/src/main/resources/templates/HomeResource/home.html

@@ -45,7 +45,7 @@
 				<div class="py-2 border-top">
 					{#for post in recentBlogPosts}
 						<p class="text-end">
-							<a href="{post.url}" class="text-decoration-none link-opacity-75 link-opacity-100-hover" target="_self">{post.title}</a>
+							<a href="{post.url}" class="text-decoration-none link-opacity-100 link-opacity-75-hover" target="_self">{post.title}</a>
 							<span class="fs-7 fw-lighter d-block">{post.publishedDate.formatted}</span>
 						</p>
 					{/for}

component/src/main/resources/templates/base.html

@@ -16,6 +16,7 @@
     {#insert extraCss}{/insert}
     {#insert extraJs}{/insert}
     {#bundle /}
+    {#insert extraBundle}{/insert}
 </head>
 <body class="d-flex flex-column h-100">
 

component/src/main/resources/templates/blog/blog-header.html

@@ -1,3 +1,3 @@
-<p id="{value.replaceAll('\s','-').toLowerCase()}" class="h{heading} blog-header">
-	<a href="#{value.replaceAll('\s','-').toLowerCase()}" class="text-decoration-none link-opacity-75 link-opacity-100-hover">#</a>&nbsp;{value}
+<p id="{value.toHtmlIdentifier}" class="h{heading} blog-header">
+	<a href="#{value.toHtmlIdentifier}" class="text-decoration-none link-opacity-100 link-opacity-75-hover">#</a>&nbsp;{value.value}
 </p>

component/src/main/resources/templates/blog/blog-hyperlink.html

@@ -1 +1 @@
-<a href="{hyperlink}" class="text-decoration-none link-opacity-75 link-opacity-100-hover" target="_blank">{value}</a>
+<a href="{hyperlink}" class="text-decoration-none link-opacity-100 link-opacity-75-hover" target="_blank">{value}</a>

component/src/main/resources/templates/blog/blog-index.html

@@ -0,0 +1,3 @@
+<div class="ps-index-{block.node} pb-index">
+	<a href="#{index.toHtmlIdentifier}" class="text-decoration-none">&#123;{index.value}&#125;</a>
+</div>

component/src/main/resources/web/app/app.css

@@ -1,12 +1,16 @@
 :root {
-    --bs-link-color-rgb: 254, 11, 239;
-    --bs-link-color: rgba(var(--bs-link-color-rgb), 0.5);
+    --color-neon: 254, 11, 239;
+    --bs-color-neon: rgb(var(--color-neon));
+    --bs-link-color-rgb: var(--color-neon);
+    --bs-link-color: rgba(var(--color-neon), 1.0);
     --bs-link-hover-color-rgb: var(--bs-link-color-rgb);
-    --bs-link-hover-color: rgba(var(--bs-link-hover-color-rgb), 1.0);
+    --bs-link-hover-color: rgba(var( --bs-link-hover-color-rgb), 0.5);
+    --bs-index-color: rgba(255, 255, 255, 0.75);
+    --bs-index-hover-color: rgba(255, 255, 255, 1.0);
 }
 
 .background-neon {
-    background-color: #FE0BEF
+    background-color: var(--bs-color-neon);
 }
 
 .background-purple {
@@ -97,8 +101,39 @@
     font-size: 0.5rem !important;
 }
 
+.active-index {
+    color: var(--bs-color-neon) !important;
+}
+
+.pb-index a {
+    color: var(--bs-index-color);
+}
+
+.pb-index a:hover {
+    color: var(--bs-index-hover-color);
+}
+
+.pb-index {
+    padding-bottom: 1em;
+}
+
+.ps-index-HEADING_1 {
+    font-size: 1.2rem;
+    padding-left: 1em;
+}
+
+.ps-index-HEADING_2 {
+    font-size: 1rem;
+    padding-left: 2em;
+}
+
+.ps-index-HEADING_3 {
+    font-size: 0.8rem;
+    padding-left: 3em;
+}
+
 .text-neon {
-    color: #FE0BEF
+    color: var(--bs-color-neon);
 }
 
 .text-string {

component/src/main/resources/web/blogpage/blog-index.js

@@ -0,0 +1,35 @@
+import $ from 'jquery';
+import '../utils/utils.js';
+
+$(document).ready(function() {
+
+	const headings = $("p.h1, p.h2, p.h3");
+	const indexLinks = $("#index a");
+	let activeIndex = undefined;
+
+	function checkScrollPosition() {
+
+		indexLinks.removeClass('active-index');
+
+		if (isBottomPage()) {
+			activeIndex = indexLinks.length - 1;
+		} else {
+			headings.each(function(index)  {
+				if (isElementInView(this)) {
+					activeIndex = index;
+					return false;
+				}
+			});
+		}
+
+		if (activeIndex !== undefined) {
+			$(indexLinks[activeIndex]).addClass('active-index');
+		}
+	}
+
+	$(window).on('scroll', function() {
+		checkScrollPosition();
+	});
+
+	checkScrollPosition();
+});

component/src/main/resources/web/utils/utils.js

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+
+function isElementInView(element, fullyInView) {
+	const pageTop = $(window).scrollTop();
+	const pageBottom = pageTop + $(window).height();
+	const elementTop = $(element).offset().top;
+	const elementBottom = elementTop + $(element).height();
+
+	if (fullyInView === true) {
+		return ((pageTop < elementTop) && (pageBottom > elementBottom));
+	} else {
+		return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
+	}
+}
+
+function isBottomPage() {
+	const scrollPosition = $(window).scrollTop() + $(window).height();
+	const documentHeight = $(document).height();
+	return scrollPosition >= documentHeight - 5;
+}
+
+window.isElementInView = isElementInView;
+window.isBottomPage = isBottomPage;

model/pom.xml

@@ -12,11 +12,11 @@
 
 	<artifactId>blog-model</artifactId>
 
-	<properties>
-		<skip.quarkus.build>true</skip.quarkus.build>
-	</properties>
-
 	<dependencies>
+		<dependency>
+			<groupId>io.quarkus</groupId>
+			<artifactId>quarkus-core</artifactId>
+		</dependency>
 		<dependency>
 			<groupId>io.quarkus.qute</groupId>
 			<artifactId>qute-core</artifactId>

model/src/main/java/com/gdevxy/blog/model/BlogPost.java

@@ -28,6 +28,10 @@ public class BlogPost {
 	@Builder.Default
 	private final List<RelatedBlogPost> relatedBlogPosts = List.of();
 
+	public boolean withIndexHeading() {
+		return blocks.stream().map(ContentBlock::getNode).anyMatch(Node::indexHeading);
+	}
+
 	@Getter
 	@Builder
 	@ToString
@@ -51,6 +55,10 @@ public static class ContentBlock {
 		private final List<ContentBlock> blocks = List.of();
 		private final Image image;
 
+		public String toHtmlIdentifier() {
+			return value.replaceAll("\\s","-").toLowerCase();
+		}
+
 	}
 
 	@Getter

model/src/main/java/com/gdevxy/blog/model/contentful/Node.java

@@ -1,15 +1,18 @@
 package com.gdevxy.blog.model.contentful;
 
+import io.quarkus.runtime.annotations.RegisterForReflection;
 import lombok.Getter;
 import lombok.RequiredArgsConstructor;
 
+import java.util.EnumSet;
 import java.util.Map;
 import java.util.Optional;
 import java.util.stream.Collectors;
 import java.util.stream.Stream;
 
 @Getter
 @RequiredArgsConstructor
+@RegisterForReflection
 public enum Node {
 
 	DOCUMENT("document"),
@@ -40,6 +43,12 @@ public enum Node {
 	private static final Map<String, Node> LOOKUP = Stream.of(Node.values())
 			.collect(Collectors.toUnmodifiableMap(Node::getCode, t -> t));
 
+	private static final EnumSet<Node> HEADERS = EnumSet.of(HEADING_1, HEADING_2, HEADING_3);
+
+	public boolean indexHeading() {
+		return HEADERS.contains(this);
+	}
+
 	public static Node of(String code) {
 
 		return Optional.ofNullable(LOOKUP.get(code)).orElseThrow();