From 3162606cb31d7da66777dfe95cbf9bfd2b0ac5b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:06:58 +0100
Subject: [PATCH 1/8] chore: add translation

---
 src/i18n/locales/es.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index da091966..e1ceb7c1 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -1045,5 +1045,13 @@
       }
     }
   },
-  "loading": "Cargando..."
+  "loading": "Cargando...",
+  "blog": {
+    "share": {
+      "modal": {
+        "title": "Difunde este blog por el mundo",
+        "description": "Puedes copiar el enlace para enviarlo y también compartirla en Facebook o X."
+      }
+    }
+  }
 }

From 793c0ac7c907b39accb6d5cb0de7bde624c700dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:07:34 +0100
Subject: [PATCH 2/8] fix: add compilerOptions allowArbitraryExtensions

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index fc7ff75c..af20f012 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,6 @@
   "include": [".astro/types.d.ts", "src/types", "**/*"],
   "exclude": ["dist"],
   "compilerOptions": {
-    "types": ["astro/client", "svelte"]
+    "allowArbitraryExtensions": true
   }
 }

From 83a6769a4f093e5893056170d5567bea634a68be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:07:57 +0100
Subject: [PATCH 3/8] fix: change to the now component share

---
 src/components/project/SingleProject.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/project/SingleProject.svelte b/src/components/project/SingleProject.svelte
index 559d3edb..4ca4a9d7 100644
--- a/src/components/project/SingleProject.svelte
+++ b/src/components/project/SingleProject.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import Banner from "./Banner.svelte";
     import Card from "./Card.svelte";
-    import Sharebutton from "./Sharebutton.svelte";
     import Tabs from "./Tabs.svelte";
     import TopRewards from "./TopRewards.svelte";
     import { setLocale, t } from "../../i18n/store";
@@ -17,6 +16,7 @@
     import Countdown from "../Countdown.svelte";
     import LanguagesDropdown from "../LanguagesDropdown.svelte";
     import Button from "../library/Button.svelte";
+    import Sharebutton from "../library/Share/ShareButton.svelte";
     import Player from "../Player/Player.svelte";
     import Tags from "../Tags.svelte";
 
@@ -152,7 +152,7 @@
     <div class="mb-12 flex w-full flex-col justify-between gap-4 lg:flex-row">
         <Tags {project} />
         <div class="flex flex-row justify-between gap-6">
-            <Sharebutton {project} />
+            <Sharebutton shareText={project.title ?? ""} projectSlug={project.slug ?? ""} />
             <Button kind="invert" size="sm" class="px-0">
                 <RememberIcon />
                 {$t("project.actions.remember")}

From 3c5f313292d886c1152bfefad58bdcab854cd2f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:09:26 +0100
Subject: [PATCH 4/8] feat: implement new sharebutton

---
 src/components/library/Share/CopyUrl.svelte   |  18 ++
 src/components/library/Share/Facebook.svelte  |  39 ++++
 .../library/Share/ShareButton.svelte          |  57 ++++++
 src/components/library/Share/ifreme.svelte    |  89 ++++++++++
 src/components/library/Share/x.svelte         |  26 +++
 src/components/project/Sharebutton.svelte     | 167 ------------------
 6 files changed, 229 insertions(+), 167 deletions(-)
 create mode 100644 src/components/library/Share/CopyUrl.svelte
 create mode 100644 src/components/library/Share/Facebook.svelte
 create mode 100644 src/components/library/Share/ShareButton.svelte
 create mode 100644 src/components/library/Share/ifreme.svelte
 create mode 100644 src/components/library/Share/x.svelte
 delete mode 100644 src/components/project/Sharebutton.svelte

diff --git a/src/components/library/Share/CopyUrl.svelte b/src/components/library/Share/CopyUrl.svelte
new file mode 100644
index 00000000..759d98a1
--- /dev/null
+++ b/src/components/library/Share/CopyUrl.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { t } from "../../../i18n/store";
+    import WebIcon from "../../../svgs/WebIcon.svelte";
+    import Tooltip from "../../Admin/Tooltip.svelte";
+</script>
+
+<Tooltip
+    text={$t("contributions.tootip.copied")}
+    tooltipClass="bg-secondary -translate-x-[50%]"
+    className="cursor-copy shrink-0 w-auto h-auto"
+>
+    <button
+        class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
+        onclick={() => navigator.clipboard.writeText(window.location.href)}
+    >
+        <WebIcon />
+    </button>
+</Tooltip>
diff --git a/src/components/library/Share/Facebook.svelte b/src/components/library/Share/Facebook.svelte
new file mode 100644
index 00000000..26d3b851
--- /dev/null
+++ b/src/components/library/Share/Facebook.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    import FacebookIcon from "../../../svgs/FacebookIcon.svelte";
+
+    const appId = "184483011630708";
+
+    let fbShareUrl = $state("");
+    let fbWindow: Window | null = null;
+
+    function openFbPopup() {
+        const width = 626;
+        const height = 436;
+        const left = window.screenX + (window.innerWidth - width) / 2;
+        const top = window.screenY + (window.innerHeight - height) / 2;
+
+        if (fbWindow && !fbWindow.closed) {
+            fbWindow.close();
+        }
+
+        fbWindow = window.open(
+            fbShareUrl,
+            "facebook-share-dialog",
+            `width=${width},height=${height},top=${top},left=${left}`,
+        );
+    }
+
+    onMount(() => {
+        const currentUrl = encodeURIComponent(window.location.href);
+        fbShareUrl = `https://www.facebook.com/dialog/share?app_id=${appId}&display=popup&href=${currentUrl}&redirect_uri=${currentUrl}`;
+    });
+</script>
+
+<button
+    onclick={openFbPopup}
+    class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
+>
+    <FacebookIcon />
+</button>
diff --git a/src/components/library/Share/ShareButton.svelte b/src/components/library/Share/ShareButton.svelte
new file mode 100644
index 00000000..20a5740d
--- /dev/null
+++ b/src/components/library/Share/ShareButton.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { Modal } from "flowbite-svelte";
+
+    import CopyUrl from "./CopyUrl.svelte";
+    import Facebook from "./Facebook.svelte";
+    import Ifreme from "./ifreme.svelte";
+    import X from "./x.svelte";
+    import { t } from "../../../i18n/store";
+    import ShareIcon from "../../../svgs/ShareIcon.svelte";
+
+    interface Props {
+        shareText?: string;
+        variant?: "blog" | "project";
+        projectSlug?: string;
+    }
+
+    let { shareText = "", variant = "project", projectSlug = "" }: Props = $props();
+
+    let openModal = $state(false);
+
+    const modalTitle = $derived(
+        variant === "blog" ? $t("blog.share.modal.title") : $t("project.share.modal.title"),
+    );
+
+    const modalDescription = $derived(
+        variant === "blog"
+            ? $t("blog.share.modal.description")
+            : $t("project.share.modal.description"),
+    );
+</script>
+
+<button
+    onclick={() => (openModal = true)}
+    class="text-secondary flex cursor-pointer flex-row items-center gap-2 p-2 font-bold"
+>
+    <ShareIcon />
+    {$t("project.actions.share")}
+</button>
+
+<Modal
+    bind:open={openModal}
+    closeBtnClass="top-7 end-7 bg-transparent text-secondary hover:bg-transparent hover:text-secondary hover:scale-110 transition-transform duration-200 transform focus:ring-0 shadow-none dark:text-secondary dark:hover:text-secondary dark:hover:bg-transparent cursor-pointer"
+    class="fixed top-1/2 left-1/2 w-full max-w-[475px] -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-white p-6 shadow-lg backdrop:bg-[#878282B2] backdrop:backdrop-blur-[5px]"
+    title={modalTitle}
+    headerClass="py-2 text-secondary text-2xl"
+>
+    <p>{modalDescription}</p>
+
+    <div class="flex flex-row items-center justify-center gap-6">
+        <CopyUrl />
+        <Facebook />
+        <X text={shareText} />
+        {#if variant === "project"}
+            <Ifreme {projectSlug} />
+        {/if}
+    </div>
+</Modal>
diff --git a/src/components/library/Share/ifreme.svelte b/src/components/library/Share/ifreme.svelte
new file mode 100644
index 00000000..10894d98
--- /dev/null
+++ b/src/components/library/Share/ifreme.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+    import { Modal } from "flowbite-svelte";
+
+    import { t } from "../../../i18n/store";
+    import CodeIcon from "../../../svgs/CodeIcon.svelte";
+    import Loader from "../../../svgs/Loader.svelte";
+
+    interface Props {
+        projectSlug?: string;
+    }
+
+    let { projectSlug = "" }: Props = $props();
+
+    const widgetUrl = $derived(
+        `https://www.goteo.org/widget/project/${projectSlug}`,
+    );
+
+    const iframeCode = $derived(
+        `<iframe frameborder="0" height="492px" src="${widgetUrl}" width="300px" scrolling="no"></iframe>`,
+    );
+
+    let iframeModal = $state(false);
+    let iframeLoaded = $state(false);
+    let copied = $state(false);
+
+    $effect(() => {
+        if (iframeModal) {
+            iframeLoaded = false;
+        }
+    });
+</script>
+
+<button
+    class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
+    onclick={() => (iframeModal = true)}
+>
+    <CodeIcon />
+</button>
+
+<Modal
+    bind:open={iframeModal}
+    closeBtnClass="top-7 end-7 bg-transparent text-secondary hover:bg-transparent hover:text-secondary hover:scale-110 transition-transform duration-200 transform focus:ring-0 shadow-none dark:text-secondary dark:hover:text-secondary dark:hover:bg-transparent cursor-pointer"
+    class="left-1/2! max-w-[600px] p-4 backdrop:bg-[#878282B2] backdrop:backdrop-blur-[5px]"
+    title={$t("project.share.iframe-modal.title")}
+    headerClass="py-2 text-secondary text-2xl"
+>
+    <p>{$t("project.share.iframe-modal.description")}</p>
+
+    <div class="flex w-full flex-row items-stretch justify-center gap-4">
+        <div class="flex w-1/2 items-center justify-center rounded-lg border p-4">
+            {#if !iframeLoaded}
+                <Loader />
+            {/if}
+            <iframe
+                onload={() => (iframeLoaded = true)}
+                src={widgetUrl}
+                width="100%"
+                height="492px"
+                frameborder="0"
+                scrolling="no"
+                title="Project widget preview"
+                class:hidden={!iframeLoaded}
+                class="grayscale"
+            ></iframe>
+        </div>
+        <div class="flex w-1/2 rounded-lg border p-4">
+            <textarea
+                readonly
+                class="w-full resize-none border-none focus:ring-0 focus:outline-none"
+                rows="4">{iframeCode}</textarea
+            >
+        </div>
+    </div>
+
+    <button
+        class="bg-primary text-secondary h-auto w-full cursor-pointer rounded-3xl px-6 py-4 font-bold"
+        class:bg-primary={!copied}
+        class:bg-variant1={copied}
+        onclick={() => {
+            navigator.clipboard.writeText(iframeCode);
+            copied = true;
+            setTimeout(() => (copied = false), 1000);
+        }}
+    >
+        {copied
+            ? $t("project.share.iframe-modal.btnCopied")
+            : $t("project.share.iframe-modal.btnCopy")}
+    </button>
+</Modal>
diff --git a/src/components/library/Share/x.svelte b/src/components/library/Share/x.svelte
new file mode 100644
index 00000000..c58ff649
--- /dev/null
+++ b/src/components/library/Share/x.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    import XIcon from "../../../svgs/XIcon.svelte";
+
+    interface Props {
+        text?: string;
+    }
+
+    let { text = "" }: Props = $props();
+
+    let currentUrl = $state("");
+
+    onMount(() => {
+        currentUrl = encodeURIComponent(window.location.href);
+    });
+</script>
+
+<a
+    href={`https://twitter.com/intent/tweet?url=${currentUrl}&text=${text}`}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
+>
+    <XIcon />
+</a>
diff --git a/src/components/project/Sharebutton.svelte b/src/components/project/Sharebutton.svelte
deleted file mode 100644
index e4fcf414..00000000
--- a/src/components/project/Sharebutton.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts">
-    import { Modal } from "flowbite-svelte";
-    import { onMount } from "svelte";
-
-    import { t } from "../../i18n/store";
-    import CodeIcon from "../../svgs/CodeIcon.svelte";
-    import FacebookIcon from "../../svgs/FacebookIcon.svelte";
-    import Loader from "../../svgs/Loader.svelte";
-    import ShareIcon from "../../svgs/ShareIcon.svelte";
-    import WebIcon from "../../svgs/WebIcon.svelte";
-    import XIcon from "../../svgs/XIcon.svelte";
-    import Tooltip from "../Admin/Tooltip.svelte";
-
-    import type { Project } from "../../openapi/client/index";
-
-    const appId = "184483011630708";
-
-    /* TODO: Implement URL dynamically */
-    const iframeCode = `<iframe frameborder="0" height="492px" src="https://www.goteo.org/widget/project/mostra-de-cinema-arab-i-mediterrani-de-catalunya" width="300px" scrolling="no"></iframe>`;
-
-    let { project }: { project: Project } = $props();
-
-    let currentUrl = $state("");
-    let fbShareUrl = $state("");
-    let openModal = $state(false);
-    let iframeModal = $state(false);
-    let iframeLoaded = $state(false);
-    let copied = $state(false);
-
-    let fbWindow: Window | null = null;
-
-    function openFbPopup() {
-        const width = 626;
-        const height = 436;
-        const left = window.screenX + (window.innerWidth - width) / 2;
-        const top = window.screenY + (window.innerHeight - height) / 2;
-
-        if (fbWindow && !fbWindow.closed) {
-            fbWindow.close();
-        }
-
-        fbWindow = window.open(
-            fbShareUrl,
-            "facebook-share-dialog",
-            `width=${width},height=${height},top=${top},left=${left}`,
-        );
-    }
-
-    $effect(() => {
-        if (iframeModal) {
-            iframeLoaded = false;
-        }
-    });
-
-    onMount(() => {
-        currentUrl = encodeURIComponent(window.location.href);
-        // currentUrl = encodeURIComponent("https://developers.facebook.com/docs/");
-        fbShareUrl = `https://www.facebook.com/dialog/share?app_id=${appId}&display=popup&href=${currentUrl}&redirect_uri=${currentUrl}`;
-    });
-</script>
-
-<button
-    onclick={() => (openModal = true)}
-    class="text-secondary flex cursor-pointer flex-row items-center gap-2 p-2 font-bold"
->
-    <ShareIcon />
-    {$t("project.actions.share")}
-</button>
-
-<Modal
-    bind:open={openModal}
-    closeBtnClass="top-7 end-7 bg-transparent text-secondary hover:bg-transparent hover:text-secondary hover:scale-110 transition-transform duration-200 transform focus:ring-0 shadow-none dark:text-secondary dark:hover:text-secondary dark:hover:bg-transparent cursor-pointer"
-    class="fixed top-1/2 left-1/2 w-full max-w-[475px] -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-white p-6 shadow-lg backdrop:bg-[#878282B2] backdrop:backdrop-blur-[5px]"
-    title={$t("project.share.modal.title")}
-    headerClass="py-2 text-secondary text-2xl"
->
-    <p>{$t("project.share.modal.description")}</p>
-
-    <div class="flex flex-row items-center justify-center gap-6">
-        <Tooltip
-            text={$t("contributions.tootip.copied")}
-            tooltipClass="bg-secondary -translate-x-[50%]"
-            className="cursor-copy shrink-0 w-auto h-auto"
-        >
-            <button
-                class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
-                onclick={() => navigator.clipboard.writeText(window.location.href)}
-            >
-                <WebIcon />
-            </button>
-        </Tooltip>
-        <!-- TODO: Implement Facebook share popup -->
-        <button
-            onclick={openFbPopup}
-            class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
-        >
-            <FacebookIcon />
-        </button>
-
-        <a
-            href={`https://twitter.com/intent/tweet?url=${currentUrl}&text=${project.title}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
-        >
-            <XIcon />
-        </a>
-
-        <button
-            class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
-            onclick={() => (iframeModal = true)}
-        >
-            <CodeIcon />
-        </button>
-    </div>
-</Modal>
-
-<Modal
-    bind:open={iframeModal}
-    closeBtnClass="top-7 end-7 bg-transparent text-secondary hover:bg-transparent hover:text-secondary hover:scale-110 transition-transform duration-200 transform focus:ring-0 shadow-none dark:text-secondary dark:hover:text-secondary dark:hover:bg-transparent cursor-pointer"
-    class="!left-1/2 max-w-[600px] p-4 backdrop:bg-[#878282B2] backdrop:backdrop-blur-[5px]"
-    title={$t("project.share.iframe-modal.title")}
-    headerClass="py-2 text-secondary text-2xl"
->
-    <p>{$t("project.share.iframe-modal.description")}</p>
-
-    <div class="flex w-full flex-row items-stretch justify-center gap-4">
-        <div class="flex w-1/2 items-center justify-center rounded-lg border p-4">
-            {#if !iframeLoaded}
-                <Loader />
-            {/if}
-            <iframe
-                onload={() => (iframeLoaded = true)}
-                src="https://www.goteo.org/widget/project/mostra-de-cinema-arab-i-mediterrani-de-catalunya"
-                width="100%"
-                height="492px"
-                frameborder="0"
-                scrolling="no"
-                title="Project widget preview"
-                class:hidden={!iframeLoaded}
-                class="grayscale"
-            ></iframe>
-        </div>
-        <div class="flex w-1/2 rounded-lg border p-4">
-            <textarea
-                readonly
-                class="w-full resize-none border-none focus:ring-0 focus:outline-none"
-                rows="4">{iframeCode}</textarea
-            >
-        </div>
-    </div>
-
-    <button
-        class="bg-primary text-secondary h-auto w-full cursor-pointer rounded-3xl px-6 py-4 font-bold"
-        class:bg-primary={!copied}
-        class:bg-variant1={copied}
-        onclick={() => {
-            navigator.clipboard.writeText(iframeCode);
-            copied = true;
-            setTimeout(() => (copied = false), 1000);
-        }}
-    >
-        {copied
-            ? $t("project.share.iframe-modal.btnCopied")
-            : $t("project.share.iframe-modal.btnCopy")}
-    </button>
-</Modal>

From 765c82aea08fb134859809c31bf39b5b0ec721c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:09:56 +0100
Subject: [PATCH 5/8] feat: implement component blog

---
 src/components/library/BodyBlog.svelte | 196 +++++++++++++++++++++++++
 1 file changed, 196 insertions(+)
 create mode 100644 src/components/library/BodyBlog.svelte

diff --git a/src/components/library/BodyBlog.svelte b/src/components/library/BodyBlog.svelte
new file mode 100644
index 00000000..3d52fe97
--- /dev/null
+++ b/src/components/library/BodyBlog.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+    import { marked } from "marked";
+    import { twMerge, type ClassNameValue } from "tailwind-merge";
+
+    import ShareButton from "./Share/ShareButton.svelte";
+
+    interface BlogPost {
+        title?: string;
+        description?: string;
+        cover?: string;
+        date?: string;
+        author?: { name: string; avatar: string };
+        body?: string;
+    }
+
+    interface Props {
+        post: BlogPost;
+        class?: ClassNameValue;
+    }
+
+    let { post, class: className = "" }: Props = $props();
+
+    const containerClasses = $derived(twMerge("flex justify-center min-h-screen", className));
+    const parsedBody = $derived(marked(post.body ?? ""));
+</script>
+
+<div class={containerClasses}>
+    <div class="w-full max-w-4xl p-4" id="top">
+        <h1>{post.title}</h1>
+        <p class="text-content pb-4">
+            {post.description}
+        </p>
+
+        {#if post.cover}
+            <img src={post.cover} class="big-img" alt={post.title} />
+        {/if}
+
+        <div class="meta-container pt-6">
+            <div class="profile-section">
+                <img src={post.author?.avatar} class="avatar" alt={post.author?.name} />
+                <div class="info">
+                    <p class="author-name">{post.author?.name}</p>
+                    <p class="date">{post.date}</p>
+                </div>
+            </div>
+
+            <ShareButton shareText={post.title ?? ""} variant="blog" />
+        </div>
+
+        <div
+            class="blog-body marked-content mt-8 flex flex-col gap-6"
+            style="overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;"
+        >
+            {@html parsedBody}
+        </div>
+    </div>
+</div>
+
+<style>
+    h1 {
+        padding-bottom: 16px;
+        color: var(--color-secondary);
+        font-size: 40px;
+        font-weight: var(--font-weight-black);
+        line-height: 1.2;
+    }
+
+    .big-img {
+        width: 100%;
+        max-width: 898px;
+        height: 400px;
+        border-radius: 16px;
+        object-fit: cover;
+    }
+
+    .meta-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .profile-section {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+    }
+
+    .avatar {
+        border-radius: 8px;
+        width: 64px;
+        height: 64px;
+        object-fit: cover;
+    }
+
+    .author-name {
+        color: var(--color-secondary);
+        font-weight: 700;
+        margin: 0;
+    }
+
+    .date {
+        color: #575757;
+        font-size: 14px;
+        margin: 0;
+    }
+
+    .btn-share {
+        display: flex;
+        padding: 8px 16px;
+        align-items: center;
+        gap: 8px;
+        border-radius: 16px;
+        border: 1px solid var(--color-secondary);
+        background: transparent;
+        cursor: pointer;
+        font-weight: bold;
+        color: var(--color-secondary);
+        transition: opacity 0.2s;
+    }
+
+    .blog-body :global(h2) {
+        padding-top: 24px;
+        padding-bottom: 8px;
+        color: var(--color-secondary);
+        font-family: var(--font-body);
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 32px;
+    }
+
+    .blog-body :global(h3) {
+        padding-top: 16px;
+        padding-bottom: 8px;
+        color: var(--color-secondary);
+        font-family: var(--font-body);
+        font-size: 20px;
+        font-weight: 700;
+        line-height: 28px;
+    }
+
+    .blog-body :global(p) {
+        color: var(--color-content);
+        font-family: var(--font-body);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+    }
+
+    .blog-body :global(blockquote) {
+        border-left: 4px solid var(--color-secondary);
+        padding-left: 16px;
+        margin: 16px 0;
+        color: var(--color-content);
+        font-style: italic;
+    }
+
+    .blog-body :global(ul),
+    .blog-body :global(ol) {
+        padding-left: 24px;
+        color: var(--color-content);
+        font-size: 16px;
+        line-height: 24px;
+        list-style: initial;
+    }
+
+    .blog-body :global(ol) {
+        list-style: decimal;
+    }
+
+    .blog-body :global(li) {
+        margin-bottom: 4px;
+    }
+
+    .blog-body :global(strong) {
+        font-weight: 700;
+        color: var(--color-secondary);
+    }
+
+    .blog-body :global(em) {
+        font-style: italic;
+    }
+
+    .blog-body :global(a) {
+        color: var(--color-primary);
+        text-decoration: underline;
+        overflow-wrap: break-word;
+        word-break: break-word;
+    }
+
+    .blog-body :global(pre) {
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        max-width: 100%;
+    }
+</style>

From 7f96932148c5fcf80322564c9569950676c9011c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:35:43 +0100
Subject: [PATCH 6/8] fix: redundant date

---
 src/components/library/BodyBlog.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/library/BodyBlog.svelte b/src/components/library/BodyBlog.svelte
index 3d52fe97..be7f78f8 100644
--- a/src/components/library/BodyBlog.svelte
+++ b/src/components/library/BodyBlog.svelte
@@ -4,11 +4,13 @@
 
     import ShareButton from "./Share/ShareButton.svelte";
 
+    const DATE_REGEX = /^\d{2}\/\d{2}\/\d{4}$/;
+
     interface BlogPost {
         title?: string;
         description?: string;
         cover?: string;
-        date?: string;
+        date: string;
         author?: { name: string; avatar: string };
         body?: string;
     }
@@ -20,6 +22,13 @@
 
     let { post, class: className = "" }: Props = $props();
 
+    const validatedDate = $derived.by(() => {
+        if (!DATE_REGEX.test(post.date)) {
+            throw new Error(`Invalid date format: "${post.date}". Expected DD/MM/YYYY`);
+        }
+        return post.date;
+    });
+
     const containerClasses = $derived(twMerge("flex justify-center min-h-screen", className));
     const parsedBody = $derived(marked(post.body ?? ""));
 </script>
@@ -40,7 +49,7 @@
                 <img src={post.author?.avatar} class="avatar" alt={post.author?.name} />
                 <div class="info">
                     <p class="author-name">{post.author?.name}</p>
-                    <p class="date">{post.date}</p>
+                    <p class="date">{validatedDate}</p>
                 </div>
             </div>
 

From c754b0d8d037e6dc155b264dd8751d4a8b4dd592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Fri, 27 Mar 2026 14:41:39 +0100
Subject: [PATCH 7/8] fix: date format

---
 src/components/library/BodyBlog.svelte | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/library/BodyBlog.svelte b/src/components/library/BodyBlog.svelte
index be7f78f8..5dc34601 100644
--- a/src/components/library/BodyBlog.svelte
+++ b/src/components/library/BodyBlog.svelte
@@ -4,13 +4,11 @@
 
     import ShareButton from "./Share/ShareButton.svelte";
 
-    const DATE_REGEX = /^\d{2}\/\d{2}\/\d{4}$/;
-
     interface BlogPost {
         title?: string;
         description?: string;
         cover?: string;
-        date: string;
+        date: Date;
         author?: { name: string; avatar: string };
         body?: string;
     }
@@ -22,13 +20,6 @@
 
     let { post, class: className = "" }: Props = $props();
 
-    const validatedDate = $derived.by(() => {
-        if (!DATE_REGEX.test(post.date)) {
-            throw new Error(`Invalid date format: "${post.date}". Expected DD/MM/YYYY`);
-        }
-        return post.date;
-    });
-
     const containerClasses = $derived(twMerge("flex justify-center min-h-screen", className));
     const parsedBody = $derived(marked(post.body ?? ""));
 </script>
@@ -49,7 +40,7 @@
                 <img src={post.author?.avatar} class="avatar" alt={post.author?.name} />
                 <div class="info">
                     <p class="author-name">{post.author?.name}</p>
-                    <p class="date">{validatedDate}</p>
+                    <p class="date">{post.date}</p>
                 </div>
             </div>
 

From 7cc0bbab25ad8790f65dc6649777e519d567d597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pep=20Villalonga=20Amor=C3=B3s?=
 <pepvillalonga312345@gmail.com>
Date: Wed, 8 Apr 2026 11:34:45 +0200
Subject: [PATCH 8/8] fix: rename share components to PascalCase, replace
 hardcoded URLs with url prop and use env var for Facebook appId

---
 src/components/library/Share/CopyUrl.svelte   |  8 ++++++-
 src/components/library/Share/Facebook.svelte  | 22 ++++++++++---------
 .../Share/{ifreme.svelte => Iframe.svelte}    | 12 ++++------
 .../library/Share/ShareButton.svelte          | 17 ++++++++------
 .../library/Share/{x.svelte => X.svelte}      | 13 ++++-------
 5 files changed, 37 insertions(+), 35 deletions(-)
 rename src/components/library/Share/{ifreme.svelte => Iframe.svelte} (89%)
 rename src/components/library/Share/{x.svelte => X.svelte} (54%)

diff --git a/src/components/library/Share/CopyUrl.svelte b/src/components/library/Share/CopyUrl.svelte
index 759d98a1..2ff1fcd7 100644
--- a/src/components/library/Share/CopyUrl.svelte
+++ b/src/components/library/Share/CopyUrl.svelte
@@ -2,6 +2,12 @@
     import { t } from "../../../i18n/store";
     import WebIcon from "../../../svgs/WebIcon.svelte";
     import Tooltip from "../../Admin/Tooltip.svelte";
+
+    interface Props {
+        url?: string;
+    }
+
+    let { url = "" }: Props = $props();
 </script>
 
 <Tooltip
@@ -11,7 +17,7 @@
 >
     <button
         class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"
-        onclick={() => navigator.clipboard.writeText(window.location.href)}
+        onclick={() => navigator.clipboard.writeText(url)}
     >
         <WebIcon />
     </button>
diff --git a/src/components/library/Share/Facebook.svelte b/src/components/library/Share/Facebook.svelte
index 26d3b851..8aaeca36 100644
--- a/src/components/library/Share/Facebook.svelte
+++ b/src/components/library/Share/Facebook.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-
     import FacebookIcon from "../../../svgs/FacebookIcon.svelte";
 
-    const appId = "184483011630708";
+    interface Props {
+        url?: string;
+        appId?: string;
+    }
+
+    let { url = "", appId = import.meta.env.PUBLIC_FACEBOOK_APP_ID }: Props = $props();
 
-    let fbShareUrl = $state("");
     let fbWindow: Window | null = null;
 
+    const fbShareUrl = $derived(() => {
+        const encoded = encodeURIComponent(url);
+        return `https://www.facebook.com/dialog/share?app_id=${appId}&display=popup&href=${encoded}&redirect_uri=${encoded}`;
+    });
+
     function openFbPopup() {
         const width = 626;
         const height = 436;
@@ -19,16 +26,11 @@
         }
 
         fbWindow = window.open(
-            fbShareUrl,
+            fbShareUrl(),
             "facebook-share-dialog",
             `width=${width},height=${height},top=${top},left=${left}`,
         );
     }
-
-    onMount(() => {
-        const currentUrl = encodeURIComponent(window.location.href);
-        fbShareUrl = `https://www.facebook.com/dialog/share?app_id=${appId}&display=popup&href=${currentUrl}&redirect_uri=${currentUrl}`;
-    });
 </script>
 
 <button
diff --git a/src/components/library/Share/ifreme.svelte b/src/components/library/Share/Iframe.svelte
similarity index 89%
rename from src/components/library/Share/ifreme.svelte
rename to src/components/library/Share/Iframe.svelte
index 10894d98..7a6c3040 100644
--- a/src/components/library/Share/ifreme.svelte
+++ b/src/components/library/Share/Iframe.svelte
@@ -6,17 +6,13 @@
     import Loader from "../../../svgs/Loader.svelte";
 
     interface Props {
-        projectSlug?: string;
+        url?: string;
     }
 
-    let { projectSlug = "" }: Props = $props();
-
-    const widgetUrl = $derived(
-        `https://www.goteo.org/widget/project/${projectSlug}`,
-    );
+    let { url = "" }: Props = $props();
 
     const iframeCode = $derived(
-        `<iframe frameborder="0" height="492px" src="${widgetUrl}" width="300px" scrolling="no"></iframe>`,
+        `<iframe frameborder="0" height="492px" src="${url}" width="300px" scrolling="no"></iframe>`,
     );
 
     let iframeModal = $state(false);
@@ -53,7 +49,7 @@
             {/if}
             <iframe
                 onload={() => (iframeLoaded = true)}
-                src={widgetUrl}
+                src={url}
                 width="100%"
                 height="492px"
                 frameborder="0"
diff --git a/src/components/library/Share/ShareButton.svelte b/src/components/library/Share/ShareButton.svelte
index 20a5740d..5d1977f4 100644
--- a/src/components/library/Share/ShareButton.svelte
+++ b/src/components/library/Share/ShareButton.svelte
@@ -3,8 +3,8 @@
 
     import CopyUrl from "./CopyUrl.svelte";
     import Facebook from "./Facebook.svelte";
-    import Ifreme from "./ifreme.svelte";
-    import X from "./x.svelte";
+    import Iframe from "./Iframe.svelte";
+    import X from "./X.svelte";
     import { t } from "../../../i18n/store";
     import ShareIcon from "../../../svgs/ShareIcon.svelte";
 
@@ -12,9 +12,12 @@
         shareText?: string;
         variant?: "blog" | "project";
         projectSlug?: string;
+        url?: string;
     }
 
-    let { shareText = "", variant = "project", projectSlug = "" }: Props = $props();
+    let { shareText = "", variant = "project", projectSlug = "", url = "" }: Props = $props();
+
+    const widgetUrl = $derived(`https://www.goteo.org/widget/project/${projectSlug}`);
 
     let openModal = $state(false);
 
@@ -47,11 +50,11 @@
     <p>{modalDescription}</p>
 
     <div class="flex flex-row items-center justify-center gap-6">
-        <CopyUrl />
-        <Facebook />
-        <X text={shareText} />
+        <CopyUrl {url} />
+        <Facebook {url} />
+        <X text={shareText} {url} />
         {#if variant === "project"}
-            <Ifreme {projectSlug} />
+            <Iframe url={widgetUrl} />
         {/if}
     </div>
 </Modal>
diff --git a/src/components/library/Share/x.svelte b/src/components/library/Share/X.svelte
similarity index 54%
rename from src/components/library/Share/x.svelte
rename to src/components/library/Share/X.svelte
index c58ff649..f246fd73 100644
--- a/src/components/library/Share/x.svelte
+++ b/src/components/library/Share/X.svelte
@@ -1,23 +1,18 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-
     import XIcon from "../../../svgs/XIcon.svelte";
 
     interface Props {
         text?: string;
+        url?: string;
     }
 
-    let { text = "" }: Props = $props();
+    let { text = "", url = "" }: Props = $props();
 
-    let currentUrl = $state("");
-
-    onMount(() => {
-        currentUrl = encodeURIComponent(window.location.href);
-    });
+    const encodedUrl = $derived(encodeURIComponent(url));
 </script>
 
 <a
-    href={`https://twitter.com/intent/tweet?url=${currentUrl}&text=${text}`}
+    href={`https://twitter.com/intent/tweet?url=${encodedUrl}&text=${text}`}
     target="_blank"
     rel="noopener noreferrer"
     class="flex h-23 w-23 items-center justify-center rounded-2xl shadow-[0_1px_3px_0_rgba(0,0,0,0.1)]"