fix issues with overview and blog

Signed-off-by: Grace Grimwood <[email protected]>

Author: gracegrimwood

_includes/footer.html

@@ -36,7 +36,7 @@
                 </ul>
             </div>
             <div class="col-6 col-lg-2 offset-lg-2 mb-3 text-lg-end">
-                <h3 class="fs-5">Links</h3>
+                <h1 class="fs-5">Links</h1>
                 <ul class="list-unstyled">
                     <li class="mb-2">
                         <a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="{{ '/' | absolute_url }}">
@@ -61,7 +61,7 @@ <h3 class="fs-5">Links</h3>
                 </ul>
             </div>
             <div class="col-6 col-lg-2 mb-3 text-lg-end">
-                <h3 class="fs-5">Projects</h3>
+                <h1 class="fs-5">Projects</h1>
                 <ul class="list-unstyled">
                     <li class="mb-2">
                         <a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="https://github.com/kroxylicious/kroxylicious">
@@ -76,7 +76,7 @@ <h3 class="fs-5">Projects</h3>
                 </ul>
             </div>
             <div class="col-6 col-lg-2 mb-3 text-lg-end">
-                <h3 class="fs-5">Community</h3>
+                <h1 class="fs-5">Community</h1>
                 <ul class="list-unstyled">
                     <li class="mb-2">
                         <a class="text-body link-underline-dark link-underline-opacity-0 link-underline-opacity-10-hover" href="https://kroxylicious.slack.com" target="_blank" rel="noopener">

_includes/nested-card-tabbed/tab.html

@@ -1,8 +1,8 @@
-<li class="nav-item">
+<li class="nav-item" role="tab">
     <button class="nav-link krx-card-nav-link {% if include.is_active_tab %}active{% endif %}"
             id="{{ include.htmlid }}" data-bs-toggle="tab"
             data-bs-target="#{{ include.htmlid }}-tab-pane" type="button"
-            role="tab" aria-controls="{{ include.htmlid }}-tab-pane"
+            aria-controls="{{ include.htmlid }}-tab-pane"
             {% if include.is_active_tab %}aria-current="true"{% endif %}
             aria-selected="{{ include.is_active_tab }}">
         {{ include.tab_title | markdownify }}

_layouts/blog.html

@@ -5,7 +5,7 @@
     <div class="col-lg-3 mb-5">
         <div class="card px-2 mx-2">
             <div class="card-body">
-                <h3 class="card-title">{{ page.title }}</h3>
+                <h1 class="fs-3" class="card-title">{{ page.title }}</h1>
                 <div class="container g-0 mt-4">
                     <p class="card-text">
                         {{ content }}
@@ -35,13 +35,13 @@ <h3 class="card-title">{{ page.title }}</h3>
                             <div class="col-md align-self-center">
                         {% endif %}
                             <div class="card-body mx-3 my-2">
-                                <h4 class="card-title">
+                                <h2 class="card-title fs-4">
                                     <a class="page-link" href="{{ post.url | absolute_url }}">
                                         {{ post.title | escape }}
                                     </a>
-                                </h4>
+                                </h2>
                                 <p class="card-text">{{ post.excerpt | markdownify }}</p>
-                                <p class="card-text text-end"><small class="text-primary">{{ post.date | date: date_format }}</small></p>
+                                <p class="card-text text-end"><small class="text-secondary">{{ post.date | date: date_format }}</small></p>
                             </div>
                         </div>
                     </div>

_quickstarts/deploy.markdown

@@ -7,11 +7,11 @@ To help you get started with Kroxylicious, we've created this quick setup guide.
 
 <br />
 
-# Getting started
+<h1 id="getting-started-deployment">Getting started</h1>
 
-### Prerequisites
+<h2 class="fs-3" id="prerequisites-deployment">Prerequisites</h2>
 
-#### Java
+<h3 class="fs-4" id="java-deployment">Java</h3>
 
 To get started deploying Kroxylicious, you will need to install a Java Runtime Environment (JRE) with minimum version 17. This does not come included with Kroxylicious.
 
@@ -27,15 +27,15 @@ If you get an error or the command doesn't return anything, you may not have a J
 
 {% include bs-alert.html type="primary" icon="info-circle-fill" content=jre_note %}
 
-#### Apache Kafka&#174;
+<h3 class="fs-4" id="apache-kafka-deployment">Apache Kafka&#174;</h3>
 
 You will also need a running Apache Kafka&#174; cluster for Kroxylicious to proxy. The official Apache Kafka&#174; [quickstart](https://kafka.apache.org/documentation/#quickstart) has instructions for setting up a local bare metal cluster.
 
-Once your cluster is set up, the cluster bootstrap address used by Kroxylicious can be changed in the configuration YAML file (see the [**Configure**](#configure) section below).
+Once your cluster is set up, the cluster bootstrap address used by Kroxylicious can be changed in the configuration YAML file (see the [**Configure**](#configure-deployment) section below).
 
 <br />
 
-### Downloading Kroxylicious
+<h2 class="fs-3" id="downloading-kroxylicious-deployment">Downloading Kroxylicious</h2>
 
 Kroxylicious can be downloaded from the [releases](https://github.com/kroxylicious/kroxylicious/releases) page of the Kroxylicious GitHub repository, or from Maven Central.
 
@@ -49,14 +49,14 @@ If you're trying Kroxylicious out on Linux or macOS, you may find the `.tar.gz`
 
 <br />
 
-# Install
+<h1 id="install-deployment">Install</h1>
 
 Extract the downloaded Kroxylicious Zip file into the directory you would like to install Kroxylicious in.
 Ensure the `kroxylicious-start.sh` and `run-java.sh` files in the `bin/` directory within the extracted folder have at least read and execute (`r-x`) permissions for the owner.
 
 <br />
 
-# Configure
+<h1 id="configure-deployment">Configure</h1>
 
 Kroxylicious is configured with YAML. From the configuration file you can specify how Kroxylicious presents each Apache Kafka&#174; broker to clients, where Kroxylicious will locate the Apache Kafka&#174; cluster(s) to be proxied, and which filters Kroxylicious should use along with any configuration for those filters.
 
@@ -68,7 +68,7 @@ If your machine uses a non-standard port configuration, or if you have used cust
 
 <br />
 
-# Run
+<h1 id="run-deployment">Run</h1>
 
 From within the extracted Kroxylicious folder, run the following command:
 
@@ -80,7 +80,7 @@ To use your own configuration file instead of the example, just replace the file
 
 <br />
 
-# Use
+<h1 id="use-deployment">Use</h1>
 
 To use your Kroxylicious proxy, your client(s) will need to point to the proxy (using the configured address) rather than directly at the Apache Kafka&#174; cluster.
 
@@ -97,23 +97,23 @@ In each command below, substitute `$KROXYLICIOUS_BOOTSTRAP` for the bootstrap ad
 
 <br />
 
-##### 1. Create a topic via Kroxylicious
+<h2 class="fs-5">1. Create a topic via Kroxylicious</h2>
 Create a topic called "my_topic" using the `kafka-topics.sh` command line client:
 ```shell
 bin/kafka-topics.sh --create --topic my_topic --bootstrap-server $KROXYLICIOUS_BOOTSTRAP
 ```
 
 <br />
 
-##### 2. Produce a string to your topic via Kroxylicious
+<h2 class="fs-5">2. Produce a string to your topic via Kroxylicious</h2>
 Produce the string "hello world" to your new topic using the `kafka-console-producer.sh` command line client:
 ```shell
 echo "hello world" | bin/kafka-console-producer.sh --topic my_topic --bootstrap-server $KROXYLICIOUS_BOOTSTRAP
 ```
 
 <br />
 
-##### 3. Consume your string from your topic via Kroxylicious
+<h2 class="fs-5">3. Consume your string from your topic via Kroxylicious</h2>
 Consume your string ("hello world") from your topic ("my_topic") using the `kafka-console-consumer.sh` command line client:
 ```shell
 bin/kafka-console-consumer.sh --topic my_topic --from-beginning --bootstrap-server $KROXYLICIOUS_BOOTSTRAP
@@ -125,23 +125,23 @@ In each command below, substitute `$KROXYLICIOUS_BOOTSTRAP` for the bootstrap ad
 
 <br />
 
-##### 1. Create a topic via Kroxylicious
+<h2 class="fs-5">1. Create a topic with Kaf via Kroxylicious</h2>
 Create a topic called "my_topic" using Kaf:
 ```shell
 kaf -b $KROXYLICIOUS_BOOTSTRAP topic create my_topic
 ```
 
 <br />
 
-##### 2. Produce a string to your topic via Kroxylicious
+<h2 class="fs-5">2. Produce a string to your topic with Kaf via Kroxylicious</h2>
 Produce the string "hello world" to your new topic:
 ```shell
 echo "hello world" | kaf -b $KROXYLICIOUS_BOOTSTRAP produce my_topic
 ```
 
 <br />
 
-##### 3. Consume your string from your topic via Kroxylicious
+<h2 class="fs-5">3. Consume your string from your topic with Kaf via Kroxylicious</h2>
 Consume your string ("hello world") from your topic ("my_topic"):
 ```shell
 kaf -b $KROXYLICIOUS_BOOTSTRAP consume my_topic

_quickstarts/develop.markdown

@@ -8,17 +8,17 @@ In this quickstart you will build a custom filter and use it to modify messages
 
 <br />
 
-# Getting started
+<h1 id="getting-started-development">Getting started</h1>
 
-### Prerequisites
+<h2 class="fs-3" id="prerequisites-development">Prerequisites</h2>
 
 To start developing your own custom filters for Kroxylicious, you will need to install [JDK 21](https://openjdk.org/projects/jdk/21/).
 
 You'll also need to install the [Apache Maven CLI](https://maven.apache.org/index.html) and one of either [Podman](https://podman.io/docs/installation) or [Docker](https://docs.docker.com/install/) (Note that if you are using Podman, you may encounter issues with the integration tests. There are instructions [here](https://github.com/kroxylicious/kroxylicious/blob/main/DEV_GUIDE.md#running-integration-tests-on-podman) to resolve this).
 
 <br />
 
-### Get the code
+<h2 class="fs-3" id="get-the-code-development">Get the code</h2>
 
 The easiest way to learn how to build custom filters is with our `kroxylicious-sample` module, which contains some basic find-and-replace filters for you to experiment with.
 Begin by downloading the latest `kroxylicious-sample` sources from the [Kroxylicious repository](https://github.com/kroxylicious/kroxylicious).
@@ -29,7 +29,7 @@ git clone https://github.com/kroxylicious/kroxylicious.git
 
 <br />
 
-# Build
+<h1 id="build-development">Build</h1>
 
 Building the sample project is easy! You can build the `kroxylicious-sample` jar either on its own or with the rest of the Kroxylicious project.
 
@@ -47,7 +47,7 @@ mvn verify -Pdist -Dquick
 
 <br />
 
-# Run
+<h1 id="run-development">Run</h1>
 
 Build both `kroxylicious-sample` and `kroxylicious-app` with the `dist` profile as above, then run the following command:
 
@@ -57,7 +57,7 @@ KROXYLICIOUS_CLASSPATH="kroxylicious-sample/target/*" kroxylicious-app/target/kr
 
 <br />
 
-# Configure
+<h1 id="configure-development">Configure</h1>
 
 Filters can be added and removed by altering the `filters` list in the `sample-proxy-config.yml` file. You can also reconfigure the sample filters by changing the configuration values in this file.
 
@@ -68,7 +68,7 @@ The **SampleFetchResponseFilter** and **SampleProduceRequestFilter** each have t
 
 <br />
 
-### Default Configuration
+<h2 class="fs-3" id="default-Configuration-development">Default Configuration</h2>
 
 The default configuration for **SampleProduceRequestFilter** is:
 
@@ -96,6 +96,6 @@ This means that it will search for the string `bar` in the fetch data and replac
 
 <br />
 
-# Modify
+<h1 id="modify-development">Modify</h1>
 
 Now that you know how the sample filters work, you can start modifying them! Replace the `SampleFilterTransformer` logic with your own code, change which messages they apply to, or whatever else you like!

_sass/kroxylicious.scss

@@ -19,6 +19,7 @@ $primary: $kroxy-light-green;
 $secondary: $kroxy-dark-green;
 $dark: $kroxy-dark;
 $light: $kroxy-light;
+$code-color: #b1266b;
 
 @import "./bootstrap/scss/variables";
 @import "./bootstrap/scss/variables-dark";

overview.markdown

@@ -7,7 +7,7 @@ toc: true
 
 This page provides an overview of how Kroxylicious works.  For more details, please refer to the [documentation](https://kroxylicious.io/docs/v0.6.0/).
 
-#### What is Kroxylicious?
+# What is Kroxylicious?
 
 Kroxylicious is an Apache Kafka® protocol-aware proxy.  It can be used to layer uniform behaviours onto a
 Kafka based system in areas such as data-governance, security, policy enforcement and audit without needing to
@@ -32,7 +32,7 @@ A key concept in Kroxylicious is the Filter.  It is these that layer additional
 |:---------------------------------------------------:|
 |                     *Overview*                      |
 
-##### Filters
+## Filters
 
 The Filter is at the heart of Kroxylicious. Filters intercept [Kafka RPCs](https://kafka.apache.org/protocol.html)
 as they travel through the proxy.  Filters can observe or transform the RPC, depending on the needs of the use-case. 
@@ -47,7 +47,7 @@ that lets you build custom filters, to fit your own use-case.
 |             *Request/Response Filtering*             |
 
 
-##### Filter Chains
+## Filter Chains
 
 Filters are composable, meaning you can chain filters together to build complex behaviours from simpler units.
 
@@ -58,7 +58,7 @@ audit filter to suit the requirements of your use-case.
 |:----------------------------------------------------------:|
 |                      *Filter Chains*                       |
 
-##### Performance
+## Performance
 
 Kroxylicious is careful to decode only the Kafka RPCs that the filters actually need to process. If no filter is
 interested in a particular RPC, its bytes will pass straight through Kroxylicious.  This approach helps keep Kroxylicious