Merge pull request #117 from ia3andy/refactor-site

quarkiverse · Sep 26, 2024 · 1dcfdca · 1dcfdca
2 parents 280650d + 39a069b
commit 1dcfdca
Show file tree

Hide file tree

Showing 49 changed files with 692 additions and 577 deletions.
diff --git a/blog/site/_includes/head.html b/blog/site/_includes/head.html
@@ -1,3 +1,6 @@
+{@io.quarkiverse.roq.frontmatter.runtime.model.Site site}
+{@io.quarkiverse.roq.frontmatter.runtime.model.Page page}
+
 <head>
   <meta charset="utf-8">
 
@@ -7,10 +10,10 @@
   <base href="{site.rootUrl.relative}">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <link rel="shortcut icon" href="{site.rootUrl.absolute.resolve('/static/assets/img/favicon/favicon.ico')}" type="image/x-icon">
-  <link rel="apple-touch-icon" href="{site.rootUrl.absolute.resolve('assets/img/favicon/apple-touch-icon.png')}">
-  <link rel="apple-touch-icon" sizes="72x72" href="{site.rootUrl.absolute.resolve('assets/img/favicon/apple-touch-icon-72x72.png')}">
-  <link rel="apple-touch-icon" sizes="144x144" href="{site.rootUrl.absolute.resolve('assets/img/favicon/apple-touch-icon-144x144.png')}">
+  <link rel="shortcut icon" href="{site.rootUrl.resolve('/static/assets/img/favicon/favicon.ico').absolute}" type="image/x-icon">
+  <link rel="apple-touch-icon" href="{site.rootUrl.resolve('assets/img/favicon/apple-touch-icon.png').absolute}">
+  <link rel="apple-touch-icon" sizes="72x72" href="{site.rootUrl.resolve('assets/img/favicon/apple-touch-icon-72x72.png').absolute}">
+  <link rel="apple-touch-icon" sizes="144x144" href="{site.rootUrl.resolve('assets/img/favicon/apple-touch-icon-144x144.png').absolute}">
   <!-- Chrome, Firefox OS and Opera -->
   <meta name="theme-color" content="#263959">
   <!-- Windows Phone -->
@@ -20,7 +23,7 @@
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700|Lato:300,400,700&display=swap" rel="stylesheet">
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="{site.rootUrl.relative.resolve('static/assets/fonts/font-awesome/css/font-awesome.min.css')}">
+  <link rel="stylesheet" href="{site.rootUrl.resolve('static/assets/fonts/font-awesome/css/font-awesome.min.css')}">
 
 
   {#bundle /}

diff --git a/blog/site/_includes/javascripts.html b/blog/site/_includes/javascripts.html
@@ -1,2 +1,5 @@
+{@io.quarkiverse.roq.frontmatter.runtime.model.Site site}
+{@io.quarkiverse.roq.frontmatter.runtime.model.Page page}
+
 <!-- Main Js -->
-<script src="{site.rootUrl.relative.resolve('static/assets/js/main.js')}"></script>
+<script src="{site.rootUrl.resolve('static/assets/js/main.js')}"></script>
diff --git a/blog/site/_includes/pagination.html b/blog/site/_includes/pagination.html
@@ -1,11 +1,13 @@
+{@io.quarkiverse.roq.frontmatter.runtime.model.Site site}
+
 <div class="container">
   <nav class="pagination" role="pagination">
     <ul>
       {#if page.paginator.previous}
       {#if page.paginator.isSecond}
       <p><a class="newer-posts" href="{site.url}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
       {#else}
-      <p><a class="newer-posts" href="{page.paginator.previous.relative}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
+      <p><a class="newer-posts" href="{page.paginator.previous}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
       {/if}
       {/if}
 
@@ -14,7 +16,7 @@
       {/if}
 
       {#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>
+      <p><a class="older-posts" href="{page.paginator.next}"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
       {/if}
     </ul>
   </nav>

diff --git a/blog/site/_layouts/main.html b/blog/site/_layouts/main.html
@@ -2,15 +2,18 @@
 layout: default
 link: ":name.html"
 ---
+
+{@io.quarkiverse.roq.frontmatter.runtime.model.Site site}
+
 <aside class="sidebar">
   <header>
     <div class="about">
-      {#if site.img??}
+      {#if site.img}
       <div class="cover-author-image">
-        <a href="{site.url.relative}"><img src="{site.rootUrl.relative.resolve('static/assets/img/').resolve(site.img)}" alt="{site.name}"></a>
+        <a href="{site.url}"><img src="{site.img}" alt="{site.data.name}"></a>
       </div>
       {/if}
-      <div class="author-name">{site.name}</div>
+      <div class="author-name">{site.data.name}</div>
       <p>{site.description}</p>
       <p>I crafted this blog myself and <a href="https://github.com/quarkiverse/quarkus-roq/actions/workflows/deploy-blog.yml" target="_blank">published it</a> on GitHub Pages. The sources of this example website are located <a href="https://github.com/quarkiverse/quarkus-roq/tree/main/blog" target="_blank">there</a>.</p>
 
@@ -20,25 +23,25 @@
     <section class="contact">
       <h3 class="contact-title">Contact me</h3>
       <ul>
-        {#if site..social-twitter??}
-        <li><a href="https://twitter.com/{site..social-twitter}" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+        {#if site.data.social-twitter??}
+        <li><a href="https://twitter.com/{site.data.social-twitter}" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
         {/if}
-        {#if site..social-facebook??}
-        <li><a href="https://facebook.com/{site..social-facebook}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
+        {#if site.data.social-facebook??}
+        <li><a href="https://facebook.com/{site.data.social-facebook}" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
         {/if}
-        {#if site..social-github??}
-        <li class="github"><a href="http://github.com/{site..social-github}" target="_blank"><i class="fa fa-github"></i></a></li>
+        {#if site.data.social-github??}
+        <li class="github"><a href="http://github.com/{site.data.social-github}" target="_blank"><i class="fa fa-github"></i></a></li>
         {/if}
-        {#if site..social-linkedin??}
-        <li class="linkedin"><a href="https://in.linkedin.com/in/{site..social-linkedin}" target="_blank"><i class="fa fa-linkedin"></i></a></li>
+        {#if site.data.social-linkedin??}
+        <li class="linkedin"><a href="https://in.linkedin.com/in/{site.data.social-linkedin}" target="_blank"><i class="fa fa-linkedin"></i></a></li>
         {/if}
-        {#if site..social-email??}
-        <li class="email"><a href="mailto:{site..social-email?}"><i class="fa fa-envelope-o"></i></a></li>
+        {#if site.data.social-email??}
+        <li class="email"><a href="mailto:{site.data.social-email?}"><i class="fa fa-envelope-o"></i></a></li>
         {/if}
       </ul>
     </section> <!-- End Section Contact -->
     <div class="copyright">
-      <p>{global:now.format('Y')} &copy; {site.simple-name}</p>
+      <p>{global:now.format('Y')} &copy; {site.data.simple-name}</p>
     </div>
   </footer> <!-- End Footer -->
 </aside> <!-- End Sidebar -->

diff --git a/blog/site/_layouts/post.html b/blog/site/_layouts/post.html
@@ -2,14 +2,17 @@
 layout: main
 link: posts/:title
 ---
+
+{@io.quarkiverse.roq.frontmatter.runtime.model.DocumentPage page}
+
 <article class="article-page">
   <div class="page-content">
     {#if page.img}
     <div class="page-cover-image">
       <figure>
-        <img class="page-image" src="{page.img.toUrl.absoluteOrElseFrom(site.rootUrl.relative.resolve('static/images/'))}" alt="{page.title}">
-        {#if page.figCaption}
-        <figcaption>{page.figCaption}</figcaption>
+        <img class="page-image" src="{page.img}" alt="{page.title}">
+        {#if page.data.figCaption??}
+        <figcaption>{page.data.figCaption}</figcaption>
         {/if}
       </figure>
     </div> <!-- End Page Cover Image -->
@@ -22,9 +25,9 @@ <h1 class="page-title">{page.title}</h1>
       {#insert /}
       <div class="page-footer">
         <div class="page-share">
-          <a href="https://twitter.com/intent/tweet?text={page.title}&url={page.url.absolute}" title="Share on Twitter" rel="nofollow" target="_blank">Twitter</a>
-          <a href="https://facebook.com/sharer.php?u={page.url.absolute}" title="Share on Facebook" rel="nofollow" target="_blank">Facebook</a>
-          <a href="https://plus.google.com/share?url={page.url.absolute}" title="Share on Google+" rel="nofollow" target="_blank">Google+</a>
+          <a href="https://twitter.com/intent/tweet?text={page.title}&url={page.url.encoded}" title="Share on Twitter" rel="nofollow" target="_blank">Twitter</a>
+          <a href="https://facebook.com/sharer.php?u={page.url.encoded}" title="Share on Facebook" rel="nofollow" target="_blank">Facebook</a>
+          <a href="https://plus.google.com/share?url={page.url.encoded}" title="Share on Google+" rel="nofollow" target="_blank">Google+</a>
         </div>
         <div class="page-tag">
 

diff --git a/blog/site/_posts/2024-08-29-welcome-to-roq.md b/blog/site/_posts/2024-08-29-welcome-to-roq.md
@@ -3,7 +3,7 @@ layout: post
 title: "Welcome to Roq!"
 date: 2024-08-29 13:32:20 +0200
 description: This is the first article ever made with Quarkus Roq
-img: 2024/08/blogging.jpg # Add image post (optional)
+img: posts/2024/08/blogging.jpg
 author: ia3andy
 ---
 

diff --git a/blog/site/_posts/2024-09-16-nice-url-experience.md b/blog/site/_posts/2024-09-16-nice-url-experience.md
@@ -11,21 +11,29 @@ Managing URLs is now very easy! With our updated Qute-powered feature, you can n
 
 ## How to Use It:
 
-- **Relative URL Example**:
+- **Relative URL Example (toString prints the relative url)**:
 ```html
 <a 
     class="post-thumbnail" 
-    style="background-image: url(\{site.rootUrl.relative('static/images/').resolve(post.img)})" 
-    href="\{post.url.relative}">
+    href="\{post.url}">
 </a>
 ```
 
+- **Absolute URL Example**:
+```html
+<a 
+    class="post-thumbnail" 
+    href="\{post.url.absolute}">
+</a>
+```
 
-- **Absolute URL Example (great for social media previews):**
+- ** Smart URL:**
 ```html
-<meta name="twitter:image:src" content="\{site.rootUrl.absolute.resolve('/static/assets/img/').resolve(page.img)}">
+<meta name="twitter:image:src" content="\{page.img.absolute}">
 ```
 
+There is a method in Page to retrieve the image url as a `RoqUrl` from the configured site images path. It is smart so that if the page image is external, it won't be affected.
+
 ## 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.
@@ -36,7 +44,44 @@ Here’s how the RoqUrl class is coded behind the scenes:
 
 ```java
 
-public record RoqUrl(String path) {
+public record RoqUrl(RootUrl rootUrl, String path) {
+
+    public RoqUrl(RootUrl rootUrl, String path) {
+        this.path = path;
+        this.rootUrl = rootUrl;
+    }
+
+    @Override
+    public String toString() {
+        return relative();
+    }
+
+    public String relative() {
+        if (isExternal()) {
+            return path();
+        }
+        return PathUtils.join(rootUrl.rootPath(), path());
+    }
+
+    public String absolute() {
+        if (isExternal()) {
+            return path();
+        }
+        return PathUtils.join(rootUrl().absolute(), path());
+    }
+
+    public String encoded() {
+        return URLEncoder.encode(absolute(), StandardCharsets.UTF_8);
+    }
+
+    /**
+     * Check if this is an absolute Url starting with http:// or https://
+     *
+     * @return true is it's an absolute url
+     */
+    public static boolean isPathAbsolute(String path) {
+        return path.startsWith("http://") || path.startsWith("https://");
+    }
 
     /**
      * Create a new Url joining the other path
@@ -45,11 +90,14 @@ public record RoqUrl(String path) {
      * @return the new joined url
      */
     public RoqUrl resolve(Object other) {
-        return new RoqUrl(PathUtils.join(path, other.toString()));
+        if (isPathAbsolute(other.toString())) {
+            return new RoqUrl(null, other.toString());
+        }
+        return new RoqUrl(rootUrl(), PathUtils.join(path(), removeTrailingSlash(other.toString())));
     }
 
     /**
-     * {@See RoqUrl#resolve}
+     * {@see Resolvable#resolve}
      *
      * @param other the other path to join
      * @return the new joined url
@@ -59,51 +107,35 @@ public record RoqUrl(String path) {
     }
 
     /**
-     * Create a new Url from the given path/url
+     * This will just append the given string (without adding the `/`)
      *
-     * @param from the url to join from
-     * @return the new joined url
+     * @param other the string to append
+     * @return the concatenated url
      */
-    public RoqUrl from(Object from) {
-        return new RoqUrl(PathUtils.join(from.toString(), path));
+    public RoqUrl append(Object other) {
+        return new RoqUrl(rootUrl(), path() + other.toString());
     }
 
-    /**
-     * 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://");
+    public boolean isExternal() {
+        return rootUrl() == null;
     }
 
-    /**
-     * 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);
+    public static RoqUrl fromRoot(RootUrl rootUrl, String path) {
+        if (isPathAbsolute(path)) {
+            return new RoqUrl(null, path);
+        }
+        return new RoqUrl(rootUrl, removeTrailingSlash(path));
     }
 
-
-    @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(site.rootUrl.relative.resolve('static/images/'))}
+
 ```
 
+With this structure, joining paths is as simple as calling resolve(). This ensures your URLs are clean, predictable, and easy to manage—whether they’re relative or absolute.
+
 
 ## Wrapping Up:
 

diff --git a/blog/site/_posts/2024-09-20-pagination.md b/blog/site/_posts/2024-09-20-pagination.md
@@ -40,7 +40,7 @@ To add pagination controls, add something like this to `_includes/pagination.htm
       \{#if page.paginator.isSecond}
       <p><a class="newer-posts" href="\{site.url}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
       \{#else}
-      <p><a class="newer-posts" href="\{page.paginator.previous.relative)}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
+      <p><a class="newer-posts" href="\{page.paginator.previous)}/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i></a></p>
       \{/if}
       \{/if}
 
@@ -49,7 +49,7 @@ To add pagination controls, add something like this to `_includes/pagination.htm
       \{/if}
 
       \{#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>
+      <p><a class="older-posts" href="\{page.paginator.next)}"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></p>
       \{/if}
     </ul>
   </nav>

diff --git a/blog/site/index.html b/blog/site/index.html
@@ -14,13 +14,16 @@
   size: 4
 ---
 
+{@io.quarkiverse.roq.frontmatter.runtime.model.Site site}
+{@io.quarkiverse.roq.frontmatter.runtime.model.NormalPage page}
+
 {#for post in site.collections.posts.paginated(page.paginator)}
 <article class="post">
   {#if post.img}
-  <a class="post-thumbnail" style="background-image: url({post.img.toUrl.absoluteOrElseFrom(site.rootUrl.relative.resolve('static/images/'))}" href="{post.url.relative}"></a>
+  <a class="post-thumbnail" style="background-image: url({post.img})" href="{post.url}"></a>
   {/if}
   <div class="post-content">
-    <h2 class="post-title"><a href="{post.url.relative}">{post.title}</a></h2>
+    <h2 class="post-title"><a href="{post.url}">{post.title}</a></h2>
     <p>{post.description}</p>
     <span class="post-date">{post.date.format('yyyy, MMM dd')}&nbsp;&nbsp;&nbsp;—&nbsp;</span>
     <span class="post-words">

diff --git a/...esources/web/static/assets/img/iamroq.png → ...urces/web/static/assets/images/iamroq.png b/...esources/web/static/assets/img/iamroq.png → ...urces/web/static/assets/images/iamroq.png
diff --git a/...es/web/static/images/2024/08/blogging.jpg → .../assets/images/posts/2024/08/blogging.jpg b/...es/web/static/images/2024/08/blogging.jpg → .../assets/images/posts/2024/08/blogging.jpg