Introduce pagination

.gitignore

@@ -64,3 +64,5 @@ pom.xml.versionsBackup
 release.properties
 
 .quarkus
+
+node_modules/

blog/pom.xml

@@ -48,6 +48,12 @@
             <artifactId>quarkus-web-bundler</artifactId>
             <version>1.7.1</version>
         </dependency>
+        <dependency>
+            <groupId>org.mvnpm</groupId>
+            <artifactId>highlight.js</artifactId>
+            <version>11.10.0</version>
+            <scope>provided</scope>
+        </dependency>
         <dependency>
             <groupId>io.quarkus</groupId>
             <artifactId>quarkus-arc</artifactId>

blog/site/_includes/pagination.html

@@ -1,20 +1,20 @@
 <div class="container">
   <nav class="pagination" role="pagination">
     <ul>
-      {#if paginator.previousPage}
-      {#if paginator.previousPage == 1}
-      <p><a class="newer-posts" href="{config.rootPath}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
+      {#if page.paginator.previous}
+      {#if page.paginator.isSecond}
+      <p><a class="newer-posts" href="{config.url}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
       {#else}
-      <p><a class="newer-posts" href="{config.rootPath}page/{paginator.previousPage}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
+      <p><a class="newer-posts" href="{page.paginator.previous.relative}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
       {/if}
       {/if}
 
-      {#if paginator.totalPages > 1}
-      <p><span class="page-number">Page {paginator.page} of {paginator.totalPages}</span></p>
+      {#if page.paginator.total > 1}
+      <p><span class="page-number">Page {page.paginator.currentIndex} of {page.paginator.total}</span></p>
       {/if}
 
-      {#if paginator.nextPage}
-      <p><a class="older-posts" href="{config.rootPath}page/{paginator.nexPpage}/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
+      {#if page.paginator.next}
+      <p><a class="older-posts" href="{page.paginator.next.relative}"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
       {/if}
     </ul>
   </nav>

blog/site/_layouts/post.html

@@ -7,7 +7,7 @@
     {#if page.img}
     <div class="page-cover-image">
       <figure>
-        <img class="page-image" src="{config.url.relative.resolve('static/images/').resolve(page.img)}" alt="{page.title}">
+        <img class="page-image" src="{page.img.toUrl.absoluteOrElseFrom(config.url.relative.resolve('static/images/'))}" alt="{page.title}">
         {#if page.figCaption}
         <figcaption>{page.figCaption}</figcaption>
         {/if}
@@ -27,11 +27,7 @@ <h1 class="page-title">{page.title}</h1>
           <a href="https://plus.google.com/share?url={page.url.absolute}" title="Share on Google+" rel="nofollow" target="_blank">Google+</a>
         </div>
         <div class="page-tag">
-          {#if page.tags}
-          {#for tag in page.tags}
-          <a href="{config.url.relative.resolve('tags#').resolve(tag)}" class="tag">&#35; {tag}</a>
-          {/for}
-          {/if}
+
         </div>
       </div>
     </div> <!-- End Wrap Content -->

blog/site/_posts/2024-09-16-nice-url-experience.md

@@ -0,0 +1,110 @@
+---
+layout: post
+title: "Effortless URL Handling in Roq with Qute super-power"
+date: 2024-09-16 13:32:20 +0300
+description: Effortlessly manage both relative and absolute URLs with our enhanced Qute-powered feature. Utilizing the RoqUrl class, you can easily join and resolve paths, ensuring clean and predictable URLs. This update simplifies URL handling, making your code more efficient and your content easier to navigate and share.
+img: https://images.unsplash.com/photo-1671530467085-40043a792439?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+author: ia3andy
+---
+
+Managing URLs is now very easy! With our updated Qute-powered feature, you can now manage relative and absolute URLs with more flexibility, thanks to new methods for joining paths and handling absolute URLs. Let’s explore some examples.
+
+## How to Use It:
+
+- **Relative URL Example**:
+```html
+<a 
+    class="post-thumbnail" 
+    style="background-image: url(\{config.url.relative('static/images/').resolve(post.img)})" 
+    href="\{post.url.relative}">
+</a>
+```
+
+
+- **Absolute URL Example (great for social media previews):**
+```html
+<meta name="twitter:image:src" content="\{config.url.absolute.resolve('assets/img/').resolve(page.img)}">
+```
+
+## Under the Hood: The Power of RoqUrl
+
+At the core of this feature is the RoqUrl class that you can leverage from Qute, which makes joining and resolving URLs super easy.
+
+## RoqUrl implementation:
+
+Here’s how the RoqUrl class is coded behind the scenes:
+
+```java
+
+public record RoqUrl(String path) {
+
+    /**
+     * Create a new Url joining the other path
+     *
+     * @param other the other path to join
+     * @return the new joined url
+     */
+    public RoqUrl resolve(Object other) {
+        return new RoqUrl(PathUtils.join(path, other.toString()));
+    }
+
+    /**
+     * {@See RoqUrl#resolve}
+     *
+     * @param other the other path to join
+     * @return the new joined url
+     */
+    public RoqUrl join(Object other) {
+        return this.resolve(other);
+    }
+
+    /**
+     * Create a new Url from the given path/url
+     *
+     * @param from the url to join from
+     * @return the new joined url
+     */
+    public RoqUrl from(Object from) {
+        return new RoqUrl(PathUtils.join(from.toString(), path));
+    }
+
+    /**
+     * Check if this is a absolute Url starting with http:// or https://
+     *
+     * @return true is it's an absolute url
+     */
+    public boolean isAbsolute() {
+        return path.startsWith("http://") || path.startsWith("https://");
+    }
+
+    /**
+     * Return itself if it absolute or from the given url if it's not.
+     * This is useful for blog images which can be absolute or relative to the blog image directory.
+     *
+     * @param other the url to join from
+     * @return either the url if it's absolute or the joined url if it's not
+     */
+    public RoqUrl absoluteOrElseFrom(String other) {
+        return isAbsolute() ? this : from(other);
+    }
+
+
+    @Override
+    public String toString() {
+        return path;
+    }
+}
+
+```
+
+With this structure, joining paths is as simple as calling resolve() or from(). This ensures your URLs are clean, predictable, and easy to manage—whether they’re relative or absolute.
+
+We also provide a Qute extension to convert a String to a RoqUrl:
+```html
+\{page.img.toUrl.absoluteOrElseFrom(config.url.relative.resolve('static/images/'))}
+```
+
+
+## Wrapping Up:
+
+With Qute’s URL handling, you can now dynamically create and manage both relative and absolute URLs without any hassle. This new implementation will help keep your code clean while making it easier to navigate, link, and share content across your site.

blog/site/_posts/2024-09-19-drafts-and-future.md

@@ -0,0 +1,19 @@
+---
+layout: post
+title: "Easily manage Drafts and Future articles in Roq"
+date: 2024-09-19 10:45:00 +0300
+description: Roq SSG introduces a new feature that allows you to hide or show draft and future articles using simple Quarkus configurations. This update gives developers greater control over which content is visible, improving content management and workflow.
+img: https://plus.unsplash.com/premium_photo-1664197369206-597ffd51f65c?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+author: ia3andy
+---
+
+Roq just made content management easier with a cool new feature that lets you control drafts and future articles directly in your configuration. No more messing around with hard-to-track content—now you can manage everything through the Quarkus config:
+```shell
+quarkus dev -Droq.site.drafts -Droq.site.future`
+````
+
+This is using frontmatter data in articles and pages `draft: true` and `date: 2024-09-19 10:45:00 +0300` to take the decision.
+
+By default, both options are set to `false`, meaning that drafts and future pages will stay hidden until you’re ready to reveal them. All you need to do is update these configs when you're ready to publish.
+
+This simple feature adds flexibility and control, making your publishing process more streamlined. Happy content managing!

blog/site/_posts/2024-09-20-hightlight-js.md

@@ -0,0 +1,51 @@
+---
+layout: post
+title: "How to add syntax highlighting to your Roq site"
+date: 2024-09-20 11:00:00 +0300
+description: Learn how to integrate syntax highlighting into your Roq site using Highlight.js and the Quarkus web-bundler extension. This guide walks you through the simple steps to add it via the pom.xml, JavaScript, and SCSS files.
+img: https://images.unsplash.com/photo-1563206767-5b18f218e8de?q=80&w=3538&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+author: ia3andy
+---
+
+Adding syntax highlighting to your Roq project has never been easier. Here’s a quick guide to help you integrate **Highlight.js** in your project with the help of the Quarkus web-bundler extension.
+
+### Step 1: Add the Quarkus Web-Bundler
+
+First, you’ll need to add the [Quarkus Web-Bundler](https://github.com/quarkiverse/quarkus-web-bundler) to your project. This tool will bundle your JavaScript and SCSS resources.
+
+### Step 2: Add Highlight.js Dependency
+
+Next, add **Highlight.js** to your `pom.xml` like this:
+
+```xml
+<dependency>
+    <groupId>org.mvnpm</groupId>
+    <artifactId>highlight.js</artifactId>
+    <version>11.10.0</version>
+    <scope>provided</scope>
+</dependency>
+```
+
+This will make the Highlight.js library available to your project.
+
+### Step 3: Initialize Highlight.js
+
+Now, let’s configure Highlight.js. In your `src/main/resources/web/app/main.js`, import the library and activate it:
+
+```javascript
+import hljs from 'highlight.js';
+
+hljs.highlightAll();
+```
+
+### Step 4: Style Your Syntax Highlighting
+
+To style the code blocks, import the Highlight.js default theme into your SCSS file. Add this to your `src/main/resources/web/app/main.scss`:
+
+```scss
+@import 'highlight.js/scss/default.scss';
+```
+
+And that's it! Now your code blocks will be beautifully highlighted, adding a more polished and professional look to your content.
+
+This process is quick and effective, making it easy to provide clear, readable syntax highlighting for your users. Happy coding!

blog/site/_posts/2024-09-23-pagination.md

@@ -0,0 +1,67 @@
+---
+layout: post
+title: Mastering Pagination in Roq
+img: https://images.unsplash.com/photo-1502126829571-83575bb53030?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+description: Learn how to implement pagination in Roq to enhance your content navigation. This article walks through the process of adding pagination, configuring page size, and customizing links.
+author: ia3andy
+date: 2024-09-23 11:00:00 +0300
+---
+
+Adding pagination to your Roq site is an easy way to improve content navigation. Let’s walk through how to implement pagination and customize its behavior in your site.
+
+## Step 1: Basic Pagination Setup
+
+First, include the following in your frontmatter on the page which will iterate on the paginated collection:
+
+```yaml
+layout: main
+paginate: posts
+```
+
+Next, in your template, loop through the paginated posts using:
+
+```html
+\{#for post in collections.posts.paginated(page.paginator)}
+<article class="post">
+  ...
+</article>
+\{/for}
+```
+
+## Step 2: Adding Pagination Controls
+
+To add pagination controls, add something like this to `_includes/pagination.html` and include it in your page `\{#include pagination.html/}`:
+
+```html
+<div class="container">
+  <nav class="pagination" role="pagination">
+    <ul>
+      \{#if page.paginator.previous}
+      \{#if page.paginator.isSecond}
+      <p><a class="newer-posts" href="\{config.url}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
+      \{#else}
+      <p><a class="newer-posts" href="\{config.url.relative(page.paginator.previous)}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
+      \{/if}
+      \{/if}
+
+      \{#if page.paginator.total > 1}
+      <p><span class="page-number">Page \{page.paginator.currentIndex} of \{page.paginator.total}</span></p>
+      \{/if}
+
+      \{#if page.paginator.next}
+      <p><a class="older-posts" href="\{config.url.relative(page.paginator.next)}"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
+      \{/if}
+    </ul>
+  </nav>
+</div>
+```
+
+You can further customize your pagination by setting the page size and link format:
+```yaml
+paginate: 
+  size: 4
+  collection: posts
+  link: posts/page-:page
+```
+
+With these steps, you can create a flexible pagination system to improve your site’s navigation.

blog/site/index.html

@@ -1,11 +1,14 @@
 ---
 layout: main
+paginate:
+  collection: posts
+  size: 4
 ---
 
-{#for post in collections.posts}
+{#for post in collections.posts.paginated(page.paginator)}
 <article class="post">
   {#if post.img}
-  <a class="post-thumbnail" style="background-image: url({config.url.relative.resolve('static/images/').resolve(post.img)}" href="{post.url.relative}"></a>
+  <a class="post-thumbnail" style="background-image: url({post.img.toUrl.absoluteOrElseFrom(config.url.relative.resolve('static/images/'))}" href="{post.url.relative}"></a>
   {/if}
   <div class="post-content">
     <h2 class="post-title"><a href="{post.url.relative}">{post.title}</a></h2>
@@ -17,3 +20,5 @@ <h2 class="post-title"><a href="{post.url.relative}">{post.title}</a></h2>
   </div>
 </article>
 {/for}
+
+{#include pagination.html/}

blog/src/main/resources/application.properties

@@ -1,4 +1,4 @@
 quarkus.web-bundler.dependencies.node-modules=node_modules
-quarkus.roq.site-dir=site
-%gh-pages.roq.url=https://pages.quarkiverse.io/
-%gh-pages.quarkus.http.root-path=/quarkus-roq/
+%gh-pages.quarkus.roq.site.url=https://pages.quarkiverse.io/
+%gh-pages.quarkus.roq.site.root-path=/quarkus-roq/
+quarkus.web-bundler.dependencies.auto-import=all

blog/src/main/resources/web/app/main.js

@@ -0,0 +1,3 @@
+import hljs from 'highlight.js';
+
+hljs.highlightAll();

blog/src/main/resources/web/app/scss/main.scss → blog/src/main/resources/web/app/main.scss

@@ -1,6 +1,7 @@
-@import 'normalize';
-@import 'syntax';
-@import 'variables';
+@import 'highlight.js/scss/github.scss';
+@import 'scss/normalize';
+@import 'scss/syntax';
+@import 'scss/variables';
 
 *, *::after, *::before {
   box-sizing: border-box;
@@ -137,13 +138,13 @@ table tfoot td {
 }
 
 /* - - - - - - - - - - Home Page Styles - - - - - - - - - - */
-@import 'parts/home-page';
+@import 'scss/parts/home-page';
 
 /* - - - - - - - - - - Post Page Styles - - - - - - - - - - */
-@import 'parts/post-page';
+@import 'scss/parts/post-page';
 
 /* - - - - - - - - - - Tag Styles - - - - - - - - - - */
-@import 'parts/tag';
+@import 'scss/parts/tag';
 
 /* - - - - - - - - - - Media Styles - - - - - - - - - - */
-@import 'media';
+@import 'scss/media';