Merge pull request #61 from Kuadrant/blog-init

Add blog nav with initial post

.eleventy.js

@@ -1,3 +1,4 @@
+const { DateTime } = require("luxon");
 const markdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
 const string = require('string')
@@ -29,6 +30,33 @@ module.exports = function(eleventyConfig) {
   );
   eleventyConfig.addPlugin(eleventyNavigationPlugin);
 
+  eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
+		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
+		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy");
+	});
+
+  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
+		// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+		return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
+	});
+
+  eleventyConfig.addFilter("groupByYear", (posts) => {
+    const groupedPosts = {};
+
+    posts.forEach(post => {
+      const year = DateTime.fromJSDate(post.date).year;
+      if (!groupedPosts[year]) {
+        groupedPosts[year] = [];
+      }
+      groupedPosts[year].push(post);
+    });
+
+    return Object.keys(groupedPosts).sort((a, b) => b - a).map(year => ({
+      year: year,
+      posts: groupedPosts[year]
+    }));
+  });
+
   return {
     dir: {
       input: "src",

src/_includes/layout.njk

@@ -45,14 +45,11 @@ title: Kuadrant.io
 
       <nav id="navbar" class="navbar">
         <ul>
-          <li><a class="nav-link scrollto" href="/#hero">Home</a></li>
-          <li><a class="nav-link scrollto" href="/#features">Features</a></li>
-          <li><a class="nav-link scrollto" href="/#components">Components</a></li>
-          <li><a class="nav-link scrollto" href="/#faq">FAQs</a></li>
+          <li><a class="nav-link {% if "/" == page.url %}active{% endif %}" href="/"><i class="bx bx-home"></i> &nbsp;Home</a></li>
           {% set navPages = collections.all | eleventyNavigation %}
           {%- for entry in navPages %}
             <li>
-              <a class="nav-link {% if entry.url == page.url %}active{% endif %}" href="{{ entry.url }}">{{ entry.title }}</a>
+              <a class="nav-link {% if entry.url == page.url %}active{% endif %}" href="{{ entry.url }}"><i class="bx {{ entry.icon }}"></i> &nbsp;{{ entry.title }}</a>
             </li>
           {%- endfor %}
           <li><a class="nav-link btn-get-started" href="https://docs.kuadrant.io"><i class="bx bx-book"></i> &nbsp;Documentation</a></li>
@@ -97,10 +94,12 @@ title: Kuadrant.io
           <div class="col-lg-4 col-md-6 footer-links">
             <h4>Useful Links</h4>
             <ul>
-              <li><i class="bx bx-chevron-right"></i> <a href="/#hero">Home</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="/#features">Features</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="/#components">Components</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="/#faq">FAQs</a></li>
+              {% set navPages = collections.all | eleventyNavigation %}
+              {%- for entry in navPages %}
+                <li>
+                  <i class="bx bx-chevron-right"></i> <a href="{{ entry.url }}">{{ entry.title }}</a>
+                </li>
+              {%- endfor %}
             </ul>
           </div>
 

src/_includes/layouts/post.njk

@@ -0,0 +1,21 @@
+---
+layout: layout.njk
+---
+<h1>{{ title }}</h1>
+<h4>
+<ul class="post-metadata">
+	<li>By: {{ author }} | <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
+</ul>
+</h4>
+{{ content | safe }}
+
+{%- if collections.posts %}
+{%- set previousPost = collections.posts | getPreviousCollectionItem %}
+{%- set nextPost = collections.posts | getNextCollectionItem %}
+{%- if nextPost or previousPost %}
+<ul class="links-nextprev">
+	{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a></li>{% endif %}
+	{%- if nextPost %}<li>Next: <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a></li>{% endif %}
+</ul>
+{%- endif %}
+{%- endif %}

src/_includes/postslist.njk

@@ -0,0 +1,13 @@
+{% set groupedPosts = postslist | groupByYear %}
+{% for group in groupedPosts %}
+<h3>{{group.year}}</h3>
+<ul reversed class="postlist">
+    {% for post in group.posts | reverse %}
+	<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
+		<a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+		<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
+	</li>
+{% endfor %}
+</ul>
+
+{% endfor %}

src/blog.njk

@@ -0,0 +1,13 @@
+---
+layout: layout.njk
+tags: blog-page # Note: This adds a custom class to layout.njk
+title: Blog
+eleventyNavigation:
+  key: Blog
+  order: 1
+  icon: bx-notepad
+numberOfLatestPostsToShow: 5
+---
+
+{% set postslist = collections.posts %}
+{% include "postslist.njk" %}

src/blog/blog.11tydata.js

@@ -0,0 +1,6 @@
+module.exports = {
+	tags: [
+		"posts"
+	],
+	"layout": "layouts/post.njk",
+};

src/blog/cncf-sandbox.md

@@ -0,0 +1,24 @@
+---
+title: Kuadrant Accepted as Cloud Native Computing Foundation (CNCF) Sandbox Project
+date: 2024-08-02
+author: David Martin
+---
+As of June 2024, Kuadrant has been [accepted](https://github.com/cncf/sandbox/issues/80) as a [sandbox project](https://www.cncf.io/projects/kuadrant/) in the CNCF.
+The [CNCF Sandbox](https://www.cncf.io/sandbox-projects/) is the entry point for early-stage projects.
+This is a significant move towards building the Kuadrant community and aligns well with how existing CNCF and open source projects are used in Kuadrant.
+
+Kuadrant is a set of Kubernetes-native controllers, services and APIs that provide gateway policies for existing [Gateway API](https://gateway-api.sigs.k8s.io/) providers on both single and multi-cluster environments. It builds on top of Kubernetes Gateway API and technologies such as Istio and Envoy to introduce provider-agnostic Gateway Policies for Kubernetes.
+
+The project provides the ability to connect ingress gateways upwards with Cloud DNS and Load Balancing providers, to set policies inwards with TLS and advanced (L7) service protection such as Auth and Rate limiting and to propagate desired gateway configurations downwards across multi-cluster environments.
+
+A high level introduction to the project is available through a short video published on the project's [YouTube channel](https://www.youtube.com/watch?v=euWAMvQojP4).
+
+Since the Kuadrant project began, there have been [numerous releases](https://github.com/Kuadrant/kuadrant-operator/releases), with the most recent release of 0.9.0 being finalised.
+
+We are always looking for ways to extend the community and help people to contribute.
+To find out more about how to help:
+
+* Check out the [documentation](https://docs.kuadrant.io).
+* Explore the Kuadrant [repositories](https://github.com/kuadrant/).
+* Engage with the [community](https://kuadrant.io/community/).
+* Follow the [onboarding process](https://github.com/cncf/toc/issues/1372) as we complete the transition to CNCF and evolve [Kuadrant governance](https://github.com/Kuadrant/governance).

src/community.md

@@ -3,6 +3,8 @@ layout: layout.njk
 title: Community
 eleventyNavigation:
   key: Community
+  order: 2
+  icon: bx-user-circle
 ---
 # Kuadrant Community
 

src/contributing.md

@@ -3,6 +3,8 @@ layout: layout.njk
 title: Contributing Guide
 eleventyNavigation:
   key: Contributing
+  order: 3
+  icon: bx-user-plus
 ---
 # Contributors Guide
 

static/css/style.css

@@ -417,11 +417,15 @@ h6 {
   font-size: 24px;
 }
 
+.navbar a.btn-get-started {
+  margin-top: 0;
+}
+
 .navbar a.btn-get-started, .navbar a.btn-slack {
   padding: 7px 14px;
   margin-left: 10px;
 }
-.navbar a.btn-get-started i, .navbar a.btn-slack i {
+.navbar a.nav-link i, .navbar a.btn-get-started i, .navbar a.btn-slack i {
   font-size: 18px
 }
 
@@ -1652,6 +1656,71 @@ section {
   content: "/";
 }
 
+/* Posts list */
+.postlist {
+	list-style: none;
+	padding: 0;
+	padding-left: 1.5rem;
+}
+.postlist-item {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	counter-increment: start-from 1;
+	margin-bottom: 1em;
+}
+.postlist-item:before {
+	display: inline-block;
+	pointer-events: none;
+	content: "" counter(start-from, decimal-leading-zero) ". ";
+	line-height: 100%;
+	text-align: right;
+	margin-left: -1.5rem;
+}
+.postlist-date,
+.postlist-item:before {
+	font-size: 0.8125em; /* 13px /16 */
+	color: var(--color-gray-90);
+}
+.postlist-date {
+	word-spacing: -0.5px;
+}
+.postlist-link {
+	font-size: 1.1875em; /* 19px /16 */
+	font-weight: 700;
+	flex-basis: calc(100% - 1.5rem);
+	padding-left: .25em;
+	padding-right: .5em;
+	text-underline-position: from-font;
+	text-underline-offset: 0;
+	text-decoration-thickness: 1px;
+}
+.postlist-item-active .postlist-link {
+	font-weight: bold;
+}
+
+/* Tags */
+.post-tag {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	text-transform: capitalize;
+	font-style: italic;
+}
+.postlist-item > .post-tag {
+	align-self: center;
+}
+
+/* Tags list */
+.post-metadata {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: .5em;
+	list-style: none;
+	padding: 0;
+	margin: 10px 0;
+}
+
 /*--------------------------------------------------------------
 # Footer
 --------------------------------------------------------------*/