Fix #31: Enable anchor links for kroxylicious.io

Signed-off-by: kwall <[email protected]>

Author: k-wall

Gemfile

@@ -13,6 +13,7 @@ group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
   gem "jekyll-sass-converter"
   gem "jekyll-seo-tag"
+  gem "jekyll-toc"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -39,6 +39,9 @@ GEM
       sass-embedded (~> 1.54)
     jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
+    jekyll-toc (0.18.0)
+      jekyll (>= 3.9)
+      nokogiri (~> 1.12)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     kramdown (2.4.0)
@@ -50,9 +53,15 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
+    mini_portile2 (2.8.5)
+    nokogiri (1.16.0)
+      mini_portile2 (~> 2.8.2)
+      racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (5.0.3)
+    racc (1.7.3)
+    racc (1.7.3-java)
     rake (13.1.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
@@ -94,6 +103,7 @@ DEPENDENCIES
   jekyll-feed (~> 0.12)
   jekyll-sass-converter
   jekyll-seo-tag
+  jekyll-toc
   tzinfo (>= 1, < 3)
   tzinfo-data
   wdm (~> 0.1.1)

_config.yml

@@ -31,6 +31,7 @@ plugins:
   - jekyll-feed
   - jekyll-sass-converter
   - jekyll-seo-tag
+  - jekyll-toc
 
 # Exclude from processing.
 # The following items will not be processed, by default.

_layouts/index.html

@@ -36,4 +36,4 @@ <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious transparently inje
       </div>
     </div>
   </div>
-</div>
+</div>

_layouts/overview.html

@@ -1,16 +1,17 @@
 ---
 layout: default
+toc: true
 ---
 <div class="row justify-content-center">
   <div class="col-11 col-lg-8 card shadow gx-5 gy-5 m-lg-5">
     <div class="row g-0">
       <div class="col-auto">
         <div class="card-body">
           <div class="card-text m-2">
-            {{ content | markdownify }}
+            {{ content | markdownify | inject_anchors }}
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>

_layouts/use-cases.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+toc: true
 ---
 
 <div class="row justify-content-center">
@@ -9,8 +10,7 @@
             <div class="row g-0">
                 <div class="col-auto">
                   {% for use_case in site.use_cases %}
-                    <h2 class="card-subtitle">{{ use_case.name }}</h2>
-                    <p class="card-text">{{ use_case.content | markdownify }}</p>
+                    <p class="card-text">{{ use_case.content | markdownify | inject_anchors}}</p>
                   {% endfor %}
                 </div>
             </div>

_use_cases/encryption-at-rest.markdown

@@ -2,7 +2,9 @@
 name: Encryption At Rest
 ---
 
-## Why
+### Encryption At Rest
+
+#### Why
 
 Apache Kafka® does not directly support any form of encryption for data stored within a broker. This means that the contents
 of records sent to Apache Kafka are stored in the clear on the broker's disks. Anyone with sufficient access, such as a Kafka Administrator
@@ -20,7 +22,7 @@ data is now residing in the clear on the file systems of the service provider.
 |:-----------------------------------------------------------------:|
 |    *Problem: Plain text records readable by the Kafka Admins*     |
 
-### Isn't TLS sufficient?
+##### Isn't TLS sufficient?
 
 TLS encrypts the content _in transit_.  It means that someone using a network sniffer cannot intercept what is being
 sent over the wire between the application and the Kafka Broker.  However, once the network packets arrive at the broker,
@@ -29,7 +31,7 @@ of the broker and in the clear when the data is written to the file system.
 
 TLS does not change the problem.
 
-### Isn't storage volume encryption an answer?
+##### Isn't storage volume encryption an answer?
 
 With storage volume encryption, the contents of the volume are encrypted with a single key.  This approach provides some mitigations.
 If the storage device is stolen or the storage device hijacked and attached to an attacker's computer, the attacker won't have
@@ -41,7 +43,7 @@ to be able to read the data, including the Kafka confidential records.
 
 Storage volume encryption doesn't really solve the problem.
 
-### Can't the applications encrypt/decrypt the data?
+##### Can't the applications encrypt/decrypt the data?
 
 It is possible for producing applications to encrypt data before sending it to Kafka, and for consuming applications to decrypt it
 again.  With this approach the brokers never possess the records in the clear and as they don't have encryption keys, they cannot
@@ -64,7 +66,7 @@ of a design flaw or bug are significant (confidentiality breach).
 Having the applications encrypt/decrypt data themselves, whilst technically feasible, is not really a tenable solution
 at the scale required for most enterprises.
 
-# Kroxylicious Topic Encryption
+#### Kroxylicious Topic Encryption
 
 The Kroxylicious Topic Encryption feature offers a solution to the problem.  The proxy takes the responsibility
 to encrypt and decrypt the messages. In this way, the Kafka Brokers never see the plain text content of

css/code.css

@@ -148,3 +148,23 @@
 .highlight .w {
   color: #bbbbbb;
 }
+
+h2>a.anchor, h3>a.anchor, h4>a.anchor, h5>a.anchor, h6>a.anchor {
+  display: block;
+  margin-left: -1.5ex;
+  position: absolute;
+  text-decoration: none !important;
+  visibility: hidden;
+  z-index: 2;
+  transition: visibility 1s;
+}
+
+h2>a.anchor::before, h3>a.anchor::before, h4>a.anchor::before, h5>a.anchor::before, h6>a.anchor::before {
+  content: "\00A7";
+  display: block;
+}
+
+h2:hover>a.anchor, h2>a.anchor:hover, h3:hover>a.anchor, h3>a.anchor:hover, h4:hover>a.anchor, h4>a.anchor:hover, h5:hover>a.anchor, h5>a.anchor:hover, h6:hover>a.anchor, h6>a.anchor:hover {
+  visibility: visible;
+}
+

overview.markdown

@@ -2,6 +2,7 @@
 layout: overview
 title: Overview
 permalink: /overview/
+toc: true
 ---
 
 This page provides an overview of how Kroxylicious works.  For more details, please refer to the [documentation](./kroxylicious).

use-cases.markdown

@@ -2,5 +2,6 @@
 layout: use-cases
 title: Use Cases
 permalink: /use-cases/
+toc: true
 ---