You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2021/12/14 10:00:07 UTC

[camel-website] branch main updated: feat: cache bursting for UI images

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-website.git


The following commit(s) were added to refs/heads/main by this push:
     new 3403988  feat: cache bursting for UI images
3403988 is described below

commit 3403988883092088a40daadecc3b54fbcb6891ab
Author: Zoran Regvart <zo...@regvart.com>
AuthorDate: Tue Dec 7 13:48:19 2021 +0100

    feat: cache bursting for UI images
    
    This configures the UI build to generate files with the hash within them
    for images in addition to the CSS and JavaScript files we had. Also
    layouts/partials that were pointing to the un-hashed versions were
    updated.
    
    Since images are quite possibly linked from other websites, most likely
    the logo image, a set of redirect rules was added not to break those
    sites.
    
    An opportunity to cleanup some long standing CSS issues was also taken.
    
    Fixes #702
---
 .pnp.cjs                                           |  22 ++++++
 ...rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip | Bin 0 -> 4546 bytes
 ...scaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip | Bin 0 -> 4255 bytes
 antora-ui-camel/.pnp.cjs                           |  47 ++++++++++--
 ...d-of-stream-npm-1.4.1-ccccf6139c-ac0f75d57c.zip | Bin 3049 -> 0 bytes
 ...d-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip | Bin 0 -> 3181 bytes
 ...rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip | Bin 0 -> 4546 bytes
 ...scaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip | Bin 0 -> 4255 bytes
 .../through2-npm-4.0.2-da7b2da443-ac7430bd54.zip   | Bin 0 -> 4874 bytes
 antora-ui-camel/gulp.d/tasks/build.js              |  16 ++--
 antora-ui-camel/package.json                       |   1 +
 antora-ui-camel/src/css/docs.css                   |  71 ------------------
 antora-ui-camel/src/css/frontpage.css              |   7 +-
 antora-ui-camel/src/css/static.css                 |  82 +++++++++++++++++++--
 antora-ui-camel/src/partials/footer-content.hbs    |  10 +--
 antora-ui-camel/src/partials/head-meta.hbs         |   2 +-
 antora-ui-camel/src/partials/header-content.hbs    |  12 +--
 antora-ui-camel/yarn.lock                          |  36 ++++++++-
 config.toml                                        |  10 +--
 content/_index.md                                  |  14 ++--
 content/community/_index.md                        |  46 +++---------
 content/docs/_index.md                             |  40 ++--------
 gulpfile.js                                        |  23 +++++-
 layouts/partials/footer.html                       |  10 +--
 layouts/partials/header.html                       |  14 ++--
 layouts/shortcodes/icon.html                       |   1 +
 static/.htaccess                                   |   5 +-
 tests/redirect.sh                                  |   3 +
 yarn.lock                                          |  19 +++++
 29 files changed, 284 insertions(+), 207 deletions(-)

diff --git a/.pnp.cjs b/.pnp.cjs
index b660915..daa60dc 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -4759,6 +4759,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["gulp-postcss", "npm:8.0.0"],
             ["gulp-rename", "npm:1.4.0"],
             ["gulp-rev", "npm:9.0.0"],
+            ["gulp-rev-rewrite", "npm:5.0.0"],
             ["gulp-stylelint", "virtual:40e0eba2b2747b78b17285b5a80d54e9bed0c51acd01aa1fab2b869ee61f21c6d6cda6fee2acf095fea1709035ac613a1bc772c8e59bb0339d7af2ceea528de8#npm:13.0.0"],
             ["gulp-template", "npm:5.0.0"],
             ["gulp-terser", "npm:1.4.1"],
@@ -11927,6 +11928,18 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD",
         }]
       ]],
+      ["gulp-rev-rewrite", [
+        ["npm:5.0.0", {
+          "packageLocation": "./.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip/node_modules/gulp-rev-rewrite/",
+          "packageDependencies": [
+            ["gulp-rev-rewrite", "npm:5.0.0"],
+            ["lodash.escaperegexp", "npm:4.1.2"],
+            ["plugin-error", "npm:1.0.1"],
+            ["through2", "npm:4.0.2"]
+          ],
+          "linkType": "HARD",
+        }]
+      ]],
       ["gulp-stylelint", [
         ["npm:13.0.0", {
           "packageLocation": "./.yarn/cache/gulp-stylelint-npm-13.0.0-dd9bc9b127-0992e8342f.zip/node_modules/gulp-stylelint/",
@@ -14840,6 +14853,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD",
         }]
       ]],
+      ["lodash.escaperegexp", [
+        ["npm:4.1.2", {
+          "packageLocation": "./.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip/node_modules/lodash.escaperegexp/",
+          "packageDependencies": [
+            ["lodash.escaperegexp", "npm:4.1.2"]
+          ],
+          "linkType": "HARD",
+        }]
+      ]],
       ["lodash.filter", [
         ["npm:4.6.0", {
           "packageLocation": "./.yarn/cache/lodash.filter-npm-4.6.0-21e2aceac9-f21d245d24.zip/node_modules/lodash.filter/",
diff --git a/.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip b/.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip
new file mode 100644
index 0000000..381a612
Binary files /dev/null and b/.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip differ
diff --git a/.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip b/.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip
new file mode 100644
index 0000000..b5485a5
Binary files /dev/null and b/.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip differ
diff --git a/antora-ui-camel/.pnp.cjs b/antora-ui-camel/.pnp.cjs
index 84a7ef3..89cb65e 100755
--- a/antora-ui-camel/.pnp.cjs
+++ b/antora-ui-camel/.pnp.cjs
@@ -59,6 +59,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["gulp-postcss", "npm:8.0.0"],
             ["gulp-rename", "npm:1.4.0"],
             ["gulp-rev", "npm:9.0.0"],
+            ["gulp-rev-rewrite", "npm:5.0.0"],
             ["gulp-stylelint", "virtual:53a2c559876ac93d5e6cf4689198c015a86ce923a72ff31018f4155c30b7da56dbd10410abafabb98da7a76016aae31ad749fae1ec28733b94edc21faa0ef05b#npm:13.0.0"],
             ["gulp-template", "npm:5.0.0"],
             ["gulp-terser", "npm:1.2.0"],
@@ -1120,6 +1121,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["gulp-postcss", "npm:8.0.0"],
             ["gulp-rename", "npm:1.4.0"],
             ["gulp-rev", "npm:9.0.0"],
+            ["gulp-rev-rewrite", "npm:5.0.0"],
             ["gulp-stylelint", "virtual:53a2c559876ac93d5e6cf4689198c015a86ce923a72ff31018f4155c30b7da56dbd10410abafabb98da7a76016aae31ad749fae1ec28733b94edc21faa0ef05b#npm:13.0.0"],
             ["gulp-template", "npm:5.0.0"],
             ["gulp-terser", "npm:1.2.0"],
@@ -1534,7 +1536,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageLocation": "./.yarn/cache/async-done-npm-1.3.1-e17882bb72-4cf4d232ca.zip/node_modules/async-done/",
           "packageDependencies": [
             ["async-done", "npm:1.3.1"],
-            ["end-of-stream", "npm:1.4.1"],
+            ["end-of-stream", "npm:1.4.4"],
             ["once", "npm:1.4.0"],
             ["process-nextick-args", "npm:1.0.7"],
             ["stream-exhaust", "npm:1.0.2"]
@@ -3871,7 +3873,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageLocation": "./.yarn/cache/duplexify-npm-3.7.1-8f4f1e821f-3c2ed2223d.zip/node_modules/duplexify/",
           "packageDependencies": [
             ["duplexify", "npm:3.7.1"],
-            ["end-of-stream", "npm:1.4.1"],
+            ["end-of-stream", "npm:1.4.4"],
             ["inherits", "npm:2.0.4"],
             ["readable-stream", "npm:2.3.6"],
             ["stream-shift", "npm:1.0.0"]
@@ -3961,10 +3963,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
         }]
       ]],
       ["end-of-stream", [
-        ["npm:1.4.1", {
-          "packageLocation": "./.yarn/cache/end-of-stream-npm-1.4.1-ccccf6139c-ac0f75d57c.zip/node_modules/end-of-stream/",
+        ["npm:1.4.4", {
+          "packageLocation": "./.yarn/cache/end-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip/node_modules/end-of-stream/",
           "packageDependencies": [
-            ["end-of-stream", "npm:1.4.1"],
+            ["end-of-stream", "npm:1.4.4"],
             ["once", "npm:1.4.0"]
           ],
           "linkType": "HARD",
@@ -5899,6 +5901,18 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD",
         }]
       ]],
+      ["gulp-rev-rewrite", [
+        ["npm:5.0.0", {
+          "packageLocation": "./.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip/node_modules/gulp-rev-rewrite/",
+          "packageDependencies": [
+            ["gulp-rev-rewrite", "npm:5.0.0"],
+            ["lodash.escaperegexp", "npm:4.1.2"],
+            ["plugin-error", "npm:1.0.1"],
+            ["through2", "npm:4.0.2"]
+          ],
+          "linkType": "HARD",
+        }]
+      ]],
       ["gulp-stylelint", [
         ["npm:13.0.0", {
           "packageLocation": "./.yarn/cache/gulp-stylelint-npm-13.0.0-dd9bc9b127-0992e8342f.zip/node_modules/gulp-stylelint/",
@@ -7718,6 +7732,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD",
         }]
       ]],
+      ["lodash.escaperegexp", [
+        ["npm:4.1.2", {
+          "packageLocation": "./.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip/node_modules/lodash.escaperegexp/",
+          "packageDependencies": [
+            ["lodash.escaperegexp", "npm:4.1.2"]
+          ],
+          "linkType": "HARD",
+        }]
+      ]],
       ["lodash.memoize", [
         ["npm:3.0.4", {
           "packageLocation": "./.yarn/cache/lodash.memoize-npm-3.0.4-40c36c3de4-fc52e0916b.zip/node_modules/lodash.memoize/",
@@ -10267,7 +10290,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageLocation": "./.yarn/cache/pump-npm-2.0.1-05afac7fc4-e9f26a17be.zip/node_modules/pump/",
           "packageDependencies": [
             ["pump", "npm:2.0.1"],
-            ["end-of-stream", "npm:1.4.1"],
+            ["end-of-stream", "npm:1.4.4"],
             ["once", "npm:1.4.0"]
           ],
           "linkType": "HARD",
@@ -10276,7 +10299,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "packageLocation": "./.yarn/cache/pump-npm-3.0.0-0080bf6a7a-e42e9229fb.zip/node_modules/pump/",
           "packageDependencies": [
             ["pump", "npm:3.0.0"],
-            ["end-of-stream", "npm:1.4.1"],
+            ["end-of-stream", "npm:1.4.4"],
             ["once", "npm:1.4.0"]
           ],
           "linkType": "HARD",
@@ -12295,7 +12318,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["tar-stream", "npm:1.6.2"],
             ["bl", "npm:1.2.2"],
             ["buffer-alloc", "npm:1.2.0"],
-            ["end-of-stream", "npm:1.4.1"],
+            ["end-of-stream", "npm:1.4.4"],
             ["fs-constants", "npm:1.0.0"],
             ["readable-stream", "npm:2.3.6"],
             ["to-buffer", "npm:1.1.1"],
@@ -12371,6 +12394,14 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["readable-stream", "npm:3.6.0"]
           ],
           "linkType": "HARD",
+        }],
+        ["npm:4.0.2", {
+          "packageLocation": "./.yarn/cache/through2-npm-4.0.2-da7b2da443-ac7430bd54.zip/node_modules/through2/",
+          "packageDependencies": [
+            ["through2", "npm:4.0.2"],
+            ["readable-stream", "npm:3.6.0"]
+          ],
+          "linkType": "HARD",
         }]
       ]],
       ["through2-concurrent", [
diff --git a/antora-ui-camel/.yarn/cache/end-of-stream-npm-1.4.1-ccccf6139c-ac0f75d57c.zip b/antora-ui-camel/.yarn/cache/end-of-stream-npm-1.4.1-ccccf6139c-ac0f75d57c.zip
deleted file mode 100644
index 7bd5a5e..0000000
Binary files a/antora-ui-camel/.yarn/cache/end-of-stream-npm-1.4.1-ccccf6139c-ac0f75d57c.zip and /dev/null differ
diff --git a/antora-ui-camel/.yarn/cache/end-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip b/antora-ui-camel/.yarn/cache/end-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip
new file mode 100644
index 0000000..fecd228
Binary files /dev/null and b/antora-ui-camel/.yarn/cache/end-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip differ
diff --git a/antora-ui-camel/.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip b/antora-ui-camel/.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip
new file mode 100644
index 0000000..381a612
Binary files /dev/null and b/antora-ui-camel/.yarn/cache/gulp-rev-rewrite-npm-5.0.0-7f674f2659-4b75625849.zip differ
diff --git a/antora-ui-camel/.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip b/antora-ui-camel/.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip
new file mode 100644
index 0000000..b5485a5
Binary files /dev/null and b/antora-ui-camel/.yarn/cache/lodash.escaperegexp-npm-4.1.2-c5b90e0e9c-6d99452b1c.zip differ
diff --git a/antora-ui-camel/.yarn/cache/through2-npm-4.0.2-da7b2da443-ac7430bd54.zip b/antora-ui-camel/.yarn/cache/through2-npm-4.0.2-da7b2da443-ac7430bd54.zip
new file mode 100644
index 0000000..7fd3f01
Binary files /dev/null and b/antora-ui-camel/.yarn/cache/through2-npm-4.0.2-da7b2da443-ac7430bd54.zip differ
diff --git a/antora-ui-camel/gulp.d/tasks/build.js b/antora-ui-camel/gulp.d/tasks/build.js
index d58a94f..c89c94b 100644
--- a/antora-ui-camel/gulp.d/tasks/build.js
+++ b/antora-ui-camel/gulp.d/tasks/build.js
@@ -8,7 +8,6 @@ const cssnano = require('cssnano')
 const data = require('gulp-data')
 const fs = require('fs-extra')
 const imagemin = require('gulp-imagemin')
-const { obj: map } = require('through2')
 const merge = require('merge-stream')
 const ospath = require('path')
 const path = ospath.posix
@@ -19,9 +18,11 @@ const postcssUrl = require('postcss-url')
 const postcssVar = require('postcss-custom-properties')
 const rename = require('gulp-rename')
 const rev = require('gulp-rev')
+const rewrite = require('gulp-rev-rewrite')
 const template = require('gulp-template')
 const terser = require('gulp-terser')
 const vfs = require('vinyl-fs')
+const { obj: map } = require('through2')
 
 module.exports = (src, dest, preview) => () => {
   const opts = { base: src, cwd: src }
@@ -99,16 +100,16 @@ module.exports = (src, dest, preview) => () => {
       )
       .pipe(buffer())
       .pipe(terser())
-    // NOTE use this statement to bundle a JavaScript library that cannot be browserified, like jQuery
-    //vfs.src(require.resolve('<package-name-or-require-path>'), opts).pipe(concat('js/vendor/<library-name>.js')),
+      // NOTE use this statement to bundle a JavaScript library that cannot be browserified, like jQuery
+      //vfs.src(require.resolve('<package-name-or-require-path>'), opts).pipe(concat('js/vendor/<library-name>.js')),
       .pipe(rev()),
     vfs
       .src('css/site.css', { ...opts, sourcemaps })
       .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } })))
       .pipe(rev()),
     vfs.src('font/*.{ttf,woff*(2)}', opts),
-    vfs.src('img/**/*.{jpg,ico,png,svg}', opts).pipe(
-      imagemin([
+    vfs.src('img/**/*.{jpg,ico,png,svg}', opts)
+      .pipe(imagemin([
         imagemin.gifsicle(),
         imagemin.jpegtran(),
         imagemin.optipng(),
@@ -120,12 +121,13 @@ module.exports = (src, dest, preview) => () => {
             { removeDesc: false },
           ],
         }),
-      ])
-    ),
+      ]))
+      .pipe(rev()),
     vfs.src('helpers/*.js', opts),
     vfs.src('layouts/*.hbs', opts),
     vfs.src('partials/*.hbs', opts)
   )
+    .pipe(rewrite())
     .pipe(vfs.dest(dest, { sourcemaps: sourcemaps && '.' }))
     .pipe(rev.manifest())
     .pipe(vfs.dest(path.join(dest, 'data')))
diff --git a/antora-ui-camel/package.json b/antora-ui-camel/package.json
index 763e058..cd7c6fc 100644
--- a/antora-ui-camel/package.json
+++ b/antora-ui-camel/package.json
@@ -43,6 +43,7 @@
     "gulp-postcss": "~8.0",
     "gulp-rename": "~1.4",
     "gulp-rev": "~9.0",
+    "gulp-rev-rewrite": "^5.0.0",
     "gulp-stylelint": "~13.0",
     "gulp-template": "~5.0",
     "gulp-terser": "^1.2.0",
diff --git a/antora-ui-camel/src/css/docs.css b/antora-ui-camel/src/css/docs.css
index 586ccb2..02e22cb 100644
--- a/antora-ui-camel/src/css/docs.css
+++ b/antora-ui-camel/src/css/docs.css
@@ -6,81 +6,10 @@
   flex-direction: column;
 }
 
-.docs .box,
-.community .box {
-  display: flex;
-  margin: 1rem 0;
-}
-
-.docs .box .content,
-.community .box .content {
-  width: 70%;
-}
-
-.docs .box img,
-.community .box img {
-  margin-top: 4rem;
-  height: 8vw;
-  max-height: 6rem;
-  margin-right: 0.5rem;
-}
-
-.docs .box .icon {
-  width: 30%;
-  text-align: center;
-}
-
-.docs .box.camel-core .icon,
-.community .box .icon {
-  width: 20%;
-  text-align: center;
-}
-
-.icon a,
-a.button-light,
-a.button-dark {
-  background-image: none;
-}
-
-.docs .box.camel-core .content {
-  width: 80%;
-}
-
 @media screen and (max-width: 1024px) {
   .docs,
   .community {
     padding: 0 1rem 4rem;
     width: 100%;
   }
-
-  .docs .box,
-  .community .box,
-  .docs .box .content,
-  .community .box .content,
-  .docs .box .icon,
-  .community .box .icon,
-  .docs .box.camel-core .content,
-  .docs .box.camel-core .icon {
-    flex-direction: column;
-    margin: 0 auto;
-    padding: 0;
-    text-align: center;
-    width: 90%;
-  }
-
-  .docs .box img,
-  .community .box img {
-    height: 6rem;
-    max-width: 25vw;
-    margin: 2.5rem 0.5rem 0;
-  }
-
-  .docs .box.right,
-  .community .box.right {
-    flex-direction: column-reverse;
-  }
-
-  .docs .button-light {
-    line-height: 4rem;
-  }
 }
diff --git a/antora-ui-camel/src/css/frontpage.css b/antora-ui-camel/src/css/frontpage.css
index e9e1b44..fdeebb5 100644
--- a/antora-ui-camel/src/css/frontpage.css
+++ b/antora-ui-camel/src/css/frontpage.css
@@ -77,11 +77,12 @@ header.frontpage p {
 a.button,
 section.frontpage a.button {
   white-space: nowrap;
-  margin-right: 0.5rem;
+  margin: 0.5rem;
   background-image: none;
   border-radius: 3rem;
   font-weight: bold;
   padding: 0.4rem 1rem;
+  display: inline-block;
 }
 
 header.frontpage a.button {
@@ -320,7 +321,7 @@ section.frontpage.projects .project img {
   section.frontpage.functionalities .icon img,
   section.frontpage.projects .icon img {
     max-width: 25vw;
-    margin: 2vw;
+    margin: auto;
   }
 
   section.frontpage.functionalities .content {
@@ -352,7 +353,7 @@ section.frontpage.projects .project img {
 
   a.button,
   section.frontpage a.button {
-    line-height: 3rem;
+    line-height: 1.5rem;
   }
 }
 
diff --git a/antora-ui-camel/src/css/static.css b/antora-ui-camel/src/css/static.css
index b33e010..dfcd27c 100644
--- a/antora-ui-camel/src/css/static.css
+++ b/antora-ui-camel/src/css/static.css
@@ -2,12 +2,6 @@
   margin: var(--static-margin);
 }
 
-@media screen and (min-width: 1025px) {
-  .static {
-    max-width: var(--static-max-width--desktop);
-  }
-}
-
 /* Antora markup is wrapped in <div>, we need to emulate the same */
 .static dl,
 .static ol,
@@ -16,3 +10,79 @@
 .static ul {
   margin: 1rem 0 0;
 }
+
+.static a.icon {
+  margin: 2rem;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  background: none;
+}
+
+.static .box {
+  display: flex;
+  margin: 1rem 0;
+}
+
+.static .box img {
+  margin-top: 1rem;
+  height: 6rem;
+  margin-right: 0.5rem;
+}
+
+.static .icon a,
+.static a.button-light,
+.static a.button-dark {
+  background-image: none;
+}
+
+@media screen and (min-width: 1025px) {
+  .static {
+    max-width: var(--static-max-width--desktop);
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .static .box,
+  .static .content,
+  .static .icon {
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    width: 100%;
+  }
+
+  .static .box .content {
+    width: 100%;
+  }
+
+  .static .box img {
+    height: 6rem;
+    max-width: 25vw;
+    margin-left: auto;
+  }
+
+  .static .box img:only-child {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .static .box img + img {
+    margin-left: 1rem;
+    margin-right: auto;
+  }
+
+  .static .box.right {
+    flex-direction: column-reverse;
+  }
+
+  .static .button-light {
+    line-height: 4rem;
+  }
+
+  .static a.icon {
+    margin: 0;
+    width: 100%;
+  }
+}
diff --git a/antora-ui-camel/src/partials/footer-content.hbs b/antora-ui-camel/src/partials/footer-content.hbs
index 70c1600..8724dd6 100644
--- a/antora-ui-camel/src/partials/footer-content.hbs
+++ b/antora-ui-camel/src/partials/footer-content.hbs
@@ -4,7 +4,7 @@
     <footer>
         <div class="footer">
             <figure class="logo">
-                <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo"
+                <img src="{{uiRootPath}}/{{asset 'img/logo-d.svg'}}" class="logo-small mt-60" alt="Apache Camel Logo"
                     aria-label="white silhouette of a camel in front of a sand dune">
             </figure>
             <input id="footer-toggle-overview" type="checkbox" title="Show/Hide Overview section" />
@@ -66,10 +66,10 @@
                 </div>
             </div>
             <div class="footer-icons">
-                <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
-                <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip" /></svg></a>
-                <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
-                <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/{{asset 'img/brand-logos.svg'}}#github" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/{{asset 'img/brand-logos.svg'}}#zulip" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/{{asset 'img/brand-logos.svg'}}#twitter" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg class="brand-icon" focusable="false"><use xlink:href="{{uiRootPath}}/{{asset 'img/brand-logos.svg'}}#linkedin" /></svg></a>
             </div>
         </div>
     </footer>
diff --git a/antora-ui-camel/src/partials/head-meta.hbs b/antora-ui-camel/src/partials/head-meta.hbs
index e846eb6..925c3d5 100644
--- a/antora-ui-camel/src/partials/head-meta.hbs
+++ b/antora-ui-camel/src/partials/head-meta.hbs
@@ -4,6 +4,6 @@
 <meta property="og:url" content="https://camel.apache.org">
 <meta property="og:description" content="Camel is an open source integration framework that empowers you to quickly and easily integrate various systems consuming or producing data.">
 <meta property="og:type" content="website">
-<meta property="og:image" content="https://camel.apache.org/_/img/logo-d.svg">
+<meta property="og:image" content="{{site.url}}/_/img/logo-d.svg">
 <link rel="manifest" href="{{siteRootPath}}/site.webmanifest">
 {{! Add additional meta tags here}}
diff --git a/antora-ui-camel/src/partials/header-content.hbs b/antora-ui-camel/src/partials/header-content.hbs
index bb1a986..e4159f2 100644
--- a/antora-ui-camel/src/partials/header-content.hbs
+++ b/antora-ui-camel/src/partials/header-content.hbs
@@ -7,7 +7,7 @@
           {{#withMenuData}}
             {{#each @items}}
                 <a class="navbar-item-section navbar-item navbar-topics" href="{{url}}">
-                  <img alt="{{name}}" src="{{pre}}">
+                  <img alt="{{name}}" src="{{uiRootPath}}/_{{asset pre}}">
                   {{name}}
                 </a>
             {{/each}}
@@ -18,14 +18,14 @@
       <div class="break-row"></div>
       <div class="navbar-search results-hidden">
         <input id="search" class="search" placeholder="Search" autocomplete="off">
-        <img src= "/_/img/cancel.svg" alt="Clear" id="search-cancel">
+        <img src="{{uiRootPath}}{{asset 'img/cancel.svg'}}" alt="Clear" id="search-cancel">
         <div id="search_results"></div>
       </div>
       <div class="navbar-tools">
-        <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#github" /></svg></a>
-        <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#zulip" /></svg></a>
-        <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#twitter" /></svg></a>
-        <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}/img/brand-logos.svg#linkedin" /></svg></a>
+        <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}{{asset 'img/brand-logos.svg'}}#github" /></svg></a>
+        <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}{{asset 'img/brand-logos.svg'}}#zulip" /></svg></a>
+        <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}{{asset 'img/brand-logos.svg'}}#twitter" /></svg></a>
+        <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg focusable="false" class="brand-icon"><use xlink:href="{{uiRootPath}}{{asset 'img/brand-logos.svg'}}#linkedin" /></svg></a>
       </div>
       <button class="navbar-burger" data-target="topbar-nav" type="button" aria-label="Menu">
         <span></span>
diff --git a/antora-ui-camel/yarn.lock b/antora-ui-camel/yarn.lock
index 1218572..9d4537f 100644
--- a/antora-ui-camel/yarn.lock
+++ b/antora-ui-camel/yarn.lock
@@ -861,6 +861,7 @@ __metadata:
     gulp-postcss: ~8.0
     gulp-rename: ~1.4
     gulp-rev: ~9.0
+    gulp-rev-rewrite: ^5.0.0
     gulp-stylelint: ~13.0
     gulp-template: ~5.0
     gulp-terser: ^1.2.0
@@ -3375,11 +3376,11 @@ __metadata:
   linkType: hard
 
 "end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0":
-  version: 1.4.1
-  resolution: "end-of-stream@npm:1.4.1"
+  version: 1.4.4
+  resolution: "end-of-stream@npm:1.4.4"
   dependencies:
     once: ^1.4.0
-  checksum: ac0f75d57cfcd5569af5bd2d7d005efb21e1a939fcfcc367e3d991c7e3275eeb10c400880aab4b3be72d5cda0406401511e98990d85996e72b2210cfdd4c8f8a
+  checksum: 530a5a5a1e517e962854a31693dbb5c0b2fc40b46dad2a56a2deec656ca040631124f4795823acc68238147805f8b021abbe221f4afed5ef3c8e8efc2024908b
   languageName: node
   linkType: hard
 
@@ -5087,6 +5088,17 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"gulp-rev-rewrite@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "gulp-rev-rewrite@npm:5.0.0"
+  dependencies:
+    lodash.escaperegexp: ^4.1.2
+    plugin-error: ^1.0.1
+    through2: ^4.0.2
+  checksum: 4b7562584991ac152ce0be0eedcadc32f63a0fbbe41adc3382d24100c91891a74e5eb3fff87bfe2fddacc96ed0a14397e1d235a4f41c09c090d5362e458959d2
+  languageName: node
+  linkType: hard
+
 "gulp-rev@npm:~9.0":
   version: 9.0.0
   resolution: "gulp-rev@npm:9.0.0"
@@ -6715,6 +6727,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"lodash.escaperegexp@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "lodash.escaperegexp@npm:4.1.2"
+  checksum: 6d99452b1cfd6073175a9b741a9b09ece159eac463f86f02ea3bee2e2092923fce812c8d2bf446309cc52d1d61bf9af51c8118b0d7421388e6cead7bd3798f0f
+  languageName: node
+  linkType: hard
+
 "lodash.memoize@npm:^4.1.2":
   version: 4.1.2
   resolution: "lodash.memoize@npm:4.1.2"
@@ -9204,7 +9223,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:2 || 3, readable-stream@npm:^3.1.1, readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0":
+"readable-stream@npm:2 || 3, readable-stream@npm:3, readable-stream@npm:^3.1.1, readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0":
   version: 3.6.0
   resolution: "readable-stream@npm:3.6.0"
   dependencies:
@@ -10917,6 +10936,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"through2@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "through2@npm:4.0.2"
+  dependencies:
+    readable-stream: 3
+  checksum: ac7430bd54ccb7920fd094b1c7ff3e1ad6edd94202e5528331253e5fde0cc56ceaa690e8df9895de2e073148c52dfbe6c4db74cacae812477a35660090960cc0
+  languageName: node
+  linkType: hard
+
 "through@npm:>=2.2.7 <3, through@npm:^2.3.6, through@npm:^2.3.8, through@npm:~2.3.4":
   version: 2.3.8
   resolution: "through@npm:2.3.8"
diff --git a/config.toml b/config.toml
index 28daa4e..e3ef543 100644
--- a/config.toml
+++ b/config.toml
@@ -39,35 +39,35 @@ defaultMarkdownHandler = "blackfriday"
     weight = 2
     identifier = "blog"
     url = "/blog/"
-    pre = "/_/img/blog.svg"
+    pre = "img/blog.svg"
 
 [[menu.main]]
     name = "Documentation"
     identifier = "docs"
     weight = 3
     url = "/docs/"
-    pre = "/_/img/documentation.svg"
+    pre = "img/documentation.svg"
 
 [[menu.main]]
     name = "Community"
     identifier = "community"
     weight = 4
     url = "/community/"
-    pre = "/_/img/community.svg"
+    pre = "img/community.svg"
 
 [[menu.main]]
     name = "Download"
     weight = 5
     identifier = "download"
     url = "/download/"
-    pre = "/_/img/download.svg"
+    pre = "img/download.svg"
 
 [[menu.main]]
     name = "Security"
     weight = 6
     identifier = "security"
     url = "/security/"
-    pre = "/_/img/security.svg"
+    pre = "img/security.svg"
 
 [module]
 
diff --git a/content/_index.md b/content/_index.md
index a1dd498..7c1ede4 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -97,7 +97,7 @@ Camel supports around 50 data formats, allowing to translate messages in multipl
 
 {{< div "icon" >}}
 
-<img src="/_/img/logo-d.svg" alt="data icon"/>
+{{< icon "logo-d" "Apache Camel logo" >}}
 
 {{< /div >}}
 
@@ -115,7 +115,7 @@ Apache Camel helps you integrate various systems consuming or producing data.
 
 {{< div "icon" >}}
 
-<img src="/_/img/knative.svg" alt="data icon"/>
+{{< icon "knative" "KNatve logo" >}}
 
 {{< /div >}}
 
@@ -133,7 +133,7 @@ Apache Camel K is a lightweight integration framework that runs natively on Kube
 
 {{< div "icon" >}}
 
-<img src="/_/img/quarkus.svg" alt="data icon"/>
+{{< icon "quarkus" "Quarkus logo" >}}
 
 {{< /div >}}
 
@@ -151,7 +151,7 @@ Apache Camel Quarkus packages 280+ Camel components as Quarkus extensions.
 
 {{< div "icon" >}}
 
-<img src="/_/img/apache-kafka.svg" alt="data icon"/>
+{{< icon "apache-kafka" "Apache Kafka logo" >}}
 
 {{< /div >}}
 
@@ -170,7 +170,7 @@ Apache Camel Kafka Connector embeds Camel within Kafka Connect.
 
 {{< div "icon" >}}
 
-<img src="/_/img/spring-boot.svg" alt="data icon"/>
+{{< icon "spring-boot" "Spring Boot logo" >}}
 
 {{< /div >}}
 
@@ -188,7 +188,7 @@ Apache Camel Spring Boot runs Camel on Spring Boot and provides starters for Cam
 
 {{< div "icon" >}}
 
-<img src="/_/img/apache-karaf.svg" alt="data icon"/>
+{{< icon "apache-karaf" "Apache Karaf logo" >}}
 
 {{< /div >}}
 
@@ -200,8 +200,6 @@ Apache Camel Karaf makes running Apache Camel components to run in the OSGi envi
 
 {{< /div >}}
 
-{{< /div >}}
-
 {{< /section >}}
 
 {{< section "frontpage columns apache" >}}
diff --git a/content/community/_index.md b/content/community/_index.md
index f2dc277..c924637 100644
--- a/content/community/_index.md
+++ b/content/community/_index.md
@@ -4,11 +4,7 @@ Title: "Community"
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/support.svg)](/community/support/)
-
-{{< /div >}}
+<a href="/community/support/" class="icon" title="Community support">{{< icon "support" "Question bubble" >}}</a>
 
 {{< div "content" >}}
 
@@ -25,17 +21,13 @@ If you are experiencing problems using Camel there are several channels availabl
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/support.svg)](/community/mailing-list/)
-
-{{< /div >}}
+<a href="/community/mailing-list/" class="icon" title="Mailing list">{{< icon "support" "Question bubble" >}}</a>
 
 {{< div "content" >}}
 
 ## Mailing List
 
-One way to get help is to use the Camel mailing lists. This allows the entire community to help with your problem. 
+One way to get help is to use the Camel mailing lists. This allows the entire community to help with your problem.
 
 <p>
 <a class="button dark" href="/community/mailing-list/">Read More</a>
@@ -48,11 +40,7 @@ One way to get help is to use the Camel mailing lists. This allows the entire co
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/contributing.svg)](/community/contributing/)
-
-{{< /div >}}
+<a href="/community/contributing/" class="icon" title="How to contribuite">{{< icon "contributing" "Git fork" >}}</a>
 
 {{< div "content" >}}
 
@@ -70,11 +58,7 @@ There are many ways you can help make Camel better - please dive in and help!Ide
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/user-stories.svg)](/community/user-stories/)
-
-{{< /div >}}
+<a href="/community/user-stories/" class="icon" title="User stories">{{< icon "user-stories" "Person talking" >}}</a>
 
 {{< div "content" >}}
 
@@ -92,11 +76,7 @@ This page is intended as a place to collect user stories and feedback on Apache
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/articles.svg)](/community/articles/)
-
-{{< /div >}}
+<a href="/community/articles/" class="icon" title="Articles">{{< icon "articles" "Article" >}}</a>
 
 {{< div "content" >}}
 
@@ -114,11 +94,7 @@ Articles are divided into several sections. As the lists grow, further sectionin
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/books.svg)](/community/books/)
-
-{{< /div >}}
+<a href="/community/books/" class="icon" title="Books">{{< icon "books" "Books" >}}</a>
 
 {{< div "content" >}}
 
@@ -136,17 +112,13 @@ This page lists the known books about Apache Camel. If you happen to know a book
 
 {{< div "box" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/team.svg)](/community/team/)
-
-{{< /div >}}
+<a href="/community/team/" class="icon" title="Team">{{< icon "team" "People" >}}</a>
 
 {{< div "content" >}}
 
 ## Team
 
-This page lists who we are. By all means add yourself to the list - lets sort it in alphabetical order. When posting to the mailing lists, use plain text mails. Do not use HTML mails. 
+This page lists who we are. By all means add yourself to the list - lets sort it in alphabetical order. When posting to the mailing lists, use plain text mails. Do not use HTML mails.
 
 <p>
 <a class="button dark" href="/community/team/">Read More</a>
diff --git a/content/docs/_index.md b/content/docs/_index.md
index 2792998..c647989 100644
--- a/content/docs/_index.md
+++ b/content/docs/_index.md
@@ -1,13 +1,9 @@
 ---
 Title: "Documentation"
 ---
-{{< div "box left camel-core" >}}
-
-{{< div "icon" >}}
+{{< div "box left" >}}
 
-[![Camel](/_/img/logo-d.svg)](/camel-k/latest/)
-
-{{< /div >}}
+<a href="/manual/" class="icon" title="Camel User Manual">{{< icon "logo-d" "Apache Camel logo" >}}</a>
 
 {{< div "content" >}}
 
@@ -47,7 +43,7 @@ Apache Camel K is a lightweight integration framework built on Apache Camel that
 <a class="button light" href="https://github.com/apache/camel-k-examples">Examples</a>
 </p>
 
-Apache Camel K now leverages a catalog of connectors called "Kamelets" (_Kamel_ route snipp_ets_) that allow creating sources or sinks towards external systems via a 
+Apache Camel K now leverages a catalog of connectors called "Kamelets" (_Kamel_ route snipp_ets_) that allow creating sources or sinks towards external systems via a
 simplified interface, hiding all the low level details about how those connections are implemented.
 
 <p>
@@ -56,21 +52,13 @@ simplified interface, hiding all the low level details about how those connectio
 
 {{< /div >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/logo-d.svg)![Knative](/_/img/knative.svg)](/camel-k/latest/)
-
-{{< /div >}}
+<a href="/camel-k/latest/" class="icon" title="Camel-K Manual ">{{< icon "logo-d" "Apache Camel logo" "knative" "KNative logo" >}}</a>
 
 {{< /div >}}
 
 {{< div "box left" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/logo-d.svg)![Knative](/_/img/apache-kafka.svg)](/camel-k/latest/)
-
-{{< /div >}}
+<a href="/camel-kafka-connector/latest/" class="icon" title="Camel Kafka Connector Manual ">{{< icon "logo-d" "Apache Camel logo" "apache-kafka" "Apache Kafka logo" >}}</a>
 
 {{< div "content">}}
 
@@ -104,21 +92,13 @@ This project hosts the efforts to port and package the 280+ Camel components as
 
 {{< /div >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/logo-d.svg)![Quarkus](/_/img/quarkus.svg)](/camel-quarkus/latest/)
-
-{{< /div >}}
+<a href="/camel-quarkus/latest/" class="icon" title="Camel Quarkus Manual ">{{< icon "logo-d" "Apache Camel logo" "quarkus" "Quarkus logo" >}}</a>
 
 {{< /div >}}
 
 {{< div "box left" >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/logo-d.svg)![Spring Boot](/_/img/spring-boot.svg)](/camel-spring-boot/latest/)
-
-{{< /div >}}
+<a href="/camel-spring-boot/latest/" class="icon" title="Camel Spring Boot latest documentation">{{< icon "logo-d" "Apache Camel logo" "spring-boot" "Spring Boot logo" >}}</a>
 
 {{< div "content">}}
 
@@ -152,10 +132,6 @@ Camel support for Spring Boot provides auto-configuration of the Camel context b
 
 {{< /div >}}
 
-{{< div "icon" >}}
-
-[![Camel](/_/img/logo-d.svg)![Karaf](/_/img/apache-karaf.svg)](/camel-karaf/latest/)
-
-{{< /div >}}
+<a href="/camel-karaf/latest/" class="icon" title="Camel Karaf Manual ">{{< icon "logo-d" "Apache Camel logo" "apache-karaf" "Apache Karaf logo" >}}</a>
 
 {{< /div >}}
diff --git a/gulpfile.js b/gulpfile.js
index 881724e..853e669 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -60,7 +60,7 @@ gulp.task('htaccess', (done) => {
       inject(
         gulp.src('documentation/.htaccess'),
         {
-          starttag:'<!-- inject:htaccess -->',
+          starttag:'<!-- inject:htaccess:docs -->',
           removeTags: true,
           transform: (filename, file) => {
             return versionlessRedirects(file.contents.toString('utf8'))
@@ -68,6 +68,27 @@ gulp.task('htaccess', (done) => {
         }
       )
     )
+    // redirect un-hashed resources (e.g. `/_/img/logo-d.svg`) to hashed resources (e.g. `/_/img/logo-d-f21b25ba38.svg`)
+    // so we don't break backward compatibility
+    .pipe(
+      inject(
+        gulp.src('documentation/_/data/rev-manifest.json'),
+        {
+          starttag:'<!-- inject:htaccess:resources -->',
+          removeTags: true,
+          transform: (filename, file) => {
+            const data = JSON.parse(file.contents)
+            let rules = ''
+            for (const [key, value] of Object.entries(data)) {
+              if (key.endsWith('.svg') || key.endsWith('.png')) {
+                rules += `Redirect 301 /_/${key} /_/${value}\n`
+              }
+            }
+            return rules
+          },
+        }
+      )
+    )
     .pipe(gulp.dest('public'))
 });
 
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index a66fcf2..a60b0f1 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -7,7 +7,7 @@
     <footer>
         <div class="footer">
             <figure class="logo">
-                <img class="logo" src="/_/img/logo-d.svg" alt="Apache Camel Logo"
+                <img class="logo" src="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/logo-d.svg") | relURL }}" alt="Apache Camel Logo"
                     aria-label="white silhouette of a camel in front of a sand dune">
             </figure>
             <input id="footer-toggle-overview" type="checkbox" title="Show/Hide Overview section" />
@@ -72,10 +72,10 @@
                 </div>
             </div>
             <div class="footer-icons">
-                <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon" focusable="false"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
-                <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg class="brand-icon" focusable="false"><use href="{{ "/_/img/brand-logos.svg#zulip" | relURL }}" /></svg></a>
-                <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon" focusable="false"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
-                <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg class="brand-icon" focusable="false"><use href="{{ "/_/img/brand-logos.svg#linkedin" | relURL }}" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg class="brand-icon" focusable="false"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#github" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg class="brand-icon" focusable="false"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#zulip" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg class="brand-icon" focusable="false"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#twitter" /></svg></a>
+                <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg class="brand-icon" focusable="false"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#linkedin" /></svg></a>
             </div>
         </div>
     </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 411b714..3ffa2f4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -22,7 +22,7 @@
     <meta property="og:url" content="https://camel.apache.org">
     <meta property="og:description" content="Camel is an open source integration framework that empowers you to quickly and easily integrate various systems consuming or producing data.">
     <meta property="og:type" content="website">
-    <meta property="og:image" content="https://camel.apache.org/_/img/logo-d.svg">
+    <meta property="og:image" content="{{ .Site.Params.organizationLogo }}">
     <link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
     <title>{{ block "title" . }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title>
     <link rel="canonical" href="{{ .Permalink }}">
@@ -44,7 +44,7 @@
                     <div class="navbar-end">
                         {{ range .Site.Menus.main }}
                         <a class="navbar-item-section navbar-item navbar-topics" href="{{ .URL | relURL }}">
-                            <img alt="{{ .Name }}" src="{{ .Pre }}">
+                            <img alt="{{ .Name }}" src="{{ path.Join "_" (index site.Data "rev-manifest" (string .Pre)) | relURL }}">
                             {{ .Name }}
                         </a>
                         {{ end }}
@@ -54,14 +54,14 @@
                 <div class="break-row"></div>
                 <div class="navbar-search results-hidden">
                     <input id="search" class="search" placeholder="Search" autocomplete="off">
-                    <img src= "/_/img/cancel.svg" alt="Clear" id="search-cancel">
+                    <img src= "{{ path.Join "_" (index .Site.Data "rev-manifest" "img/cancel.svg") | relURL }}" alt="Clear" id="search-cancel">
                     <div id="search_results"></div>
                 </div>
                 <div class="navbar-tools">
-                  <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg focusable="false" class="brand-icon"><use href="{{ "_/img/brand-logos.svg#github" | relURL }}" /></svg></a>
-                  <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg focusable="false" class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#zulip" | relURL }}" /></svg></a>
-                  <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg focusable="false" class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#twitter" | relURL }}" /></svg></a>
-                  <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg focusable="false" class="brand-icon"><use href="{{ "/_/img/brand-logos.svg#linkedin" | relURL }}" /></svg></a>
+                  <a rel="noopener noreferrer nofollow" href="https://github.com/apache/camel/" title="Collaborate on GitHub"><svg focusable="false" class="brand-icon"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#github" /></svg></a>
+                  <a rel="noopener noreferrer nofollow" href="https://camel.zulipchat.com" title="Chat on Zulip"><svg focusable="false" class="brand-icon"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#zulip" /></svg></a>
+                  <a rel="noopener noreferrer nofollow" href="https://twitter.com/ApacheCamel" title="Follow Apache Camel on Twitter"><svg focusable="false" class="brand-icon"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#twitter" /></svg></a>
+                  <a rel="noopener noreferrer nofollow" href="https://www.linkedin.com/groups/2447439/" title="Apache Camel group on Linkedin"><svg focusable="false" class="brand-icon"><use href="{{ path.Join "_" (index .Site.Data "rev-manifest" "img/brand-logos.svg") | relURL }}#linkedin" /></svg></a>
                 </div>
                 <button class="navbar-burger" data-target="topbar-nav" type="button" aria-label="Menu">
                     <span></span>
diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html
new file mode 100644
index 0000000..a1db7eb
--- /dev/null
+++ b/layouts/shortcodes/icon.html
@@ -0,0 +1 @@
+{{- range $idx := (seq 0 2 (sub (len .Params) 1)) }}<img src="{{ path.Join "_" (index site.Data "rev-manifest" (printf "img/%s.svg" (index $.Params $idx))) | relURL }}" alt="{{ index $.Params (add $idx 1) }}"/>{{- end }}
diff --git a/static/.htaccess b/static/.htaccess
index dd65921..83adfa3 100644
--- a/static/.htaccess
+++ b/static/.htaccess
@@ -1102,7 +1102,10 @@ Redirect 301 /blog/release-3-4-4.html /blog/2020/09/RELEASE-3.4.4/
 Redirect 301 /blog/release-3-5-0.html /blog/2020/09/RELEASE-3.5.0/
 Redirect 301 /blog/release-3-6-0.html /blog/2020/09/RELEASE-3.6.0/
 
-<!-- inject:htaccess -->
+<!-- inject:htaccess:docs -->
+<!-- endinject -->
+
+<!-- inject:htaccess:resources -->
 <!-- endinject -->
 
 # Disable the pattern matching based on filenames.
diff --git a/tests/redirect.sh b/tests/redirect.sh
index 96e53f0..a05ebad 100755
--- a/tests/redirect.sh
+++ b/tests/redirect.sh
@@ -207,6 +207,9 @@ test "$BASE_URL/manual/latest/component-dsl.html" 302 "$BASE_URL/manual/componen
 test "$BASE_URL/manual/" 200
 test "$BASE_URL/manual/component-dsl.html" 200
 
+test "$BASE_URL/_/img/logo-d.svg" 301 "$BASE_URL/_/$(jq -r '."img/logo-d.svg"' documentation/_/data/rev-manifest.json)"
+test "$BASE_URL/_/$(jq -r '."img/logo-d.svg"' documentation/_/data/rev-manifest.json)" 200
+
 # prints summary
 if [ "$TOTAL" == "$SUCCESS" ]; then
   echo -e "$0 \e[1mSUCCESSFULLY\e[0m ran $TOTAL tests"
diff --git a/yarn.lock b/yarn.lock
index ce82300..7598306 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3514,6 +3514,7 @@ __metadata:
     gulp-postcss: ~8.0
     gulp-rename: ~1.4
     gulp-rev: ~9.0
+    gulp-rev-rewrite: ^5.0.0
     gulp-stylelint: ~13.0
     gulp-template: ~5.0
     gulp-terser: ^1.2.0
@@ -9981,6 +9982,17 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
+"gulp-rev-rewrite@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "gulp-rev-rewrite@npm:5.0.0"
+  dependencies:
+    lodash.escaperegexp: ^4.1.2
+    plugin-error: ^1.0.1
+    through2: ^4.0.2
+  checksum: 4b7562584991ac152ce0be0eedcadc32f63a0fbbe41adc3382d24100c91891a74e5eb3fff87bfe2fddacc96ed0a14397e1d235a4f41c09c090d5362e458959d2
+  languageName: node
+  linkType: hard
+
 "gulp-rev@npm:~9.0":
   version: 9.0.0
   resolution: "gulp-rev@npm:9.0.0"
@@ -12607,6 +12619,13 @@ fsevents@~2.1.2:
   languageName: node
   linkType: hard
 
+"lodash.escaperegexp@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "lodash.escaperegexp@npm:4.1.2"
+  checksum: 6d99452b1cfd6073175a9b741a9b09ece159eac463f86f02ea3bee2e2092923fce812c8d2bf446309cc52d1d61bf9af51c8118b0d7421388e6cead7bd3798f0f
+  languageName: node
+  linkType: hard
+
 "lodash.filter@npm:^4.4.0":
   version: 4.6.0
   resolution: "lodash.filter@npm:4.6.0"