CollaboraOnline · Yatharth-coding · Jan 26, 2026
diff --git a/config.toml b/config.toml
@@ -1,9 +1,10 @@
 baseURL = "https://CollaboraOnline.github.io"
-RelativeURLs=true
+RelativeURLs=false
 CanonifyURLs=true
 title = "Collabora Online - Community Page"
 copyright = "Unless a license is otherwise specified, content is under CC-BY-SA 3.0 <br> <br> Beaver illustrations are under <a href='https://github.com/CollaboraOnline/CollaboraOnline.github.io/blob/master/content/images/beaver/LICENSE'>Copyright © 2025 Collabora Ltd. All rights reserved.</a>"
-paginate = 2
+[pagination]
+  pagerSize = 2
 languageCode = "en"
 DefaultContentLanguage = "en"
 enableInlineShortcodes = true
@@ -53,8 +54,8 @@ type = "type"
   showLanguageSwitcher = false
 
   # Custom CSS and JS. Relative to /static/css and /static/js respectively.
-  customCSS = ["buttons.css", "anim.css", "header.css", "dropdown.css", "sidebar.css", "post-content.css"]
-  customJS = []
+  customCSS = ["buttons.css", "anim.css", "header.css", "dropdown.css", "sidebar.css", "post-content.css", "copy-code.css"]
+  customJS = ["copy-code.js"]
 
   [params.social]
     rss = true
@@ -91,5 +92,5 @@ type = "type"
   [services.instagram]
     disableInlineCSS = true
 
-  [services.twitter]
+  [services.x]
     disableInlineCSS = true
diff --git a/data/chunky-poster/assets.json b/data/chunky-poster/assets.json
@@ -0,0 +1,6 @@
+{
+  "main": {
+    "css": "main.37ab3f61b95417873748.min.css",
+    "js": "main.d608eadfe5ac0688902e.min.js"
+  }
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode | default "en-us" }}">
+<head>
+    {{ partial "head.html" . }}
+</head>
+<body>
+    {{ partial "header.html" . }}
+
+    {{ block "main" . }}{{ end }}
+
+    {{ partial "footer.html" . }}
+    {{ partial "foot.html" . }}
+
+    {{ template "_internal/google_analytics.html" . }}
+</body>
+</html>
diff --git a/layouts/partials/authors.html b/layouts/partials/authors.html
@@ -0,0 +1,40 @@
+{{- if .Params.authors -}}
+    <ul class="authors list-inline">
+        {{- range .Params.authors -}}
+            {{- with $.Site.GetPage (printf "/authors/%s" (. | urlize)) -}}
+                {{- $term := . -}}
+                <li class="list-inline-item mr-3">
+                    <div class="media author">
+                        {{- if $term.Params.images -}}
+                            {{- with .Resources.GetMatch (index $term.Params.images 0) -}}
+                                {{- $image := .Resize "64x" -}}
+                                {{- $2ximage := .Resize "128x q100" -}}
+                                {{- $3ximage := .Resize "192x q100" -}}
+                                <a href="{{ $term.RelPermalink }}" class="mr-3">
+                                    <picture>
+                                        <source srcset="{{ $image.RelPermalink }} 1x, {{ $2ximage.RelPermalink }} 2x, {{ $3ximage.RelPermalink }} 3x">
+                                        <img src="{{ $image.RelPermalink }}" class="rounded-circle" alt="{{ $term.Params.name }}">
+                                    </picture>
+                                </a>
+                            {{- end -}}
+                        {{- end -}}
+                        <div class="media-body">
+                            <h5 class="name my-0">
+                                {{- .Scratch.Set "name" .Title -}}
+                                {{- if $term.Params.name -}}
+                                    {{- .Scratch.Set "name" $term.Params.name -}}
+                                {{- end -}}
+                                <a href="{{ $term.RelPermalink }}" class="small">{{ .Scratch.Get "name" }}</a>
+                            </h5>
+                            {{- with $term.Params.twitter -}}
+                                <p class="social small text-muted">
+                                    <a href="https://x.com/@{{ . | urlize }}">@{{ . }}</a>
+                                </p>
+                            {{- end -}}
+                        </div>
+                    </div>
+                </li>
+            {{- end -}}
+        {{- end -}}
+    </ul>
+{{- end -}}
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
@@ -0,0 +1,21 @@
+{{ with index .Site.Data "chunky-poster" }}
+    {{ range $vendor := .assets }}
+        {{ if $vendor.js }}
+            <script src="{{ print "dist/" $vendor.js | relURL }}"></script>
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+{{ if .Site.Params.prismJS.enable }}
+<script>
+    window.Prism = window.Prism || {};
+    window.Prism.manual = true;
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
+{{ end }}
+
+{{ range .Site.Params.customJS -}}
+    <script src="{{ "js/" | relURL }}{{ . }}"></script>
+{{ end }}
+
diff --git a/layouts/partials/i18nlist.html b/layouts/partials/i18nlist.html
@@ -0,0 +1,6 @@
+{{ if .IsTranslated }}
+    {{ range .Translations }}
+	<li class="nav-item"><a class="nav-link" href="{{ .Permalink }}">{{ .Lang }}</a>
+    </li>
+    {{ end}}
+{{ end }}
diff --git a/layouts/partials/related.html b/layouts/partials/related.html
@@ -0,0 +1,10 @@
+{{- $related := .Site.RegularPages.Related . | first 3 -}}
+{{- with $related -}}
+    <div class="related-content row mt-5 row-cols-1 row-cols-lg-3">
+        {{- range . -}}
+            <div class="col mb-3">
+                {{ .Render "card" }}
+            </div>
+        {{- end -}}
+    </div>
+{{- end -}}
diff --git a/layouts/partials/sharer.html b/layouts/partials/sharer.html
@@ -0,0 +1,24 @@
+{{- if and .Site.Params.share (ne .Params.share false) -}}
+    <ul class="share nav my-3 justify-content-end">
+        <li class="nav-item">
+            <a class="nav-link" target="_blank" href="https://x.com/intent/tweet?url={{ .Permalink | htmlEscape }}&text={{ .Title | htmlEscape }}">
+              <i class="fa-fw fab fa-twitter"></i>
+          </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" target="_blank" href="https://www.linkedin.com/shareArticle?url={{ .Permalink | htmlEscape }}&title={{ .Title | htmlEscape }}">
+                <i class="fa-fw fab fa-linkedin-in"></i>
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" target="_blank" href="https://www.facebook.com/sharer.php?u={{ .Permalink | htmlEscape }}&t={{ .Title | htmlEscape }}">
+                <i class="fa-fw fab fa-facebook-f"></i>
+            </a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" target="_blank" href="https://reddit.com/submit?url={{ .Permalink | htmlEscape }}&title={{ .Title | htmlEscape }}">
+                <i class="fa-fw fab fa-reddit-alien"></i>
+            </a>
+        </li>
+    </nav>
+{{- end -}}
diff --git a/static/css/copy-code.css b/static/css/copy-code.css
@@ -0,0 +1,55 @@
+.copy-code-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 4px;
+  /* Moved closer to the right edge */
+  background-color: transparent;
+  color: #a1a1aa;
+  /* zinc-400 */
+  border: none;
+  border-radius: 4px;
+  padding: 4px;
+  line-height: 0;
+  cursor: pointer;
+  opacity: 1;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 10;
+  transform: scale(1);
+}
+
+.copy-code-button:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  /* Subtle hover background */
+  color: #71717a;
+  /* Darker on hover for visibility against light bg, or keep zinc-400 if dark bg. User said "same shade", assuming zinc-400 for consistency */
+  outline: none;
+}
+
+.copy-code-button:focus {
+  outline: none;
+}
+
+.copy-code-button:active {
+  transform: scale(0.95);
+  /* Slight press effect */
+}
+
+.copy-code-button.copied {
+  color: #a1a1aa;
+  /* Same shade as default state for visibility */
+  transform: scale(1.1);
+  /* Pop effect when copied */
+}
+
+.copy-code-button svg {
+  width: 18px;
+  /* Slightly larger for better visibility */
+  height: 18px;
+  display: block;
+  /* Removes potential line-height issues */
+}
+
+/* Ensure the pre block handles the button overlap */
+pre {
+  position: relative;
+}
diff --git a/static/js/copy-code.js b/static/js/copy-code.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const codeBlocks = document.querySelectorAll('pre > code');
+
+  codeBlocks.forEach(function (codeBlock) {
+    const pre = codeBlock.parentNode;
+
+    // Create the copy button container
+    const button = document.createElement('button');
+    button.className = 'copy-code-button';
+    button.type = 'button';
+    button.ariaLabel = 'Copy code to clipboard';
+
+    // SVG Icons
+    const copyIcon = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+      </svg>
+    `;
+
+    const checkIcon = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    `;
+
+    button.innerHTML = copyIcon;
+
+    // Add click event
+    button.addEventListener('click', function () {
+      const codeToCopy = codeBlock.innerText;
+
+      navigator.clipboard.writeText(codeToCopy).then(function () {
+        button.innerHTML = checkIcon;
+        button.classList.add('copied');
+
+        setTimeout(function () {
+          button.innerHTML = copyIcon;
+          button.classList.remove('copied');
+        }, 1000);
+      }).catch(function (err) {
+        console.error('Failed to copy text: ', err);
+      });
+    });
+
+    // Position the button relative to the pre block
+    pre.style.position = 'relative';
+    pre.appendChild(button);
+  });
+});