feat: move animated background to example site canvas

exampleSite/assets/images/v3/site-background.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <radialGradient id="violet" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#7c3aed" stop-opacity=".72"/>
+      <stop offset="1" stop-color="#7c3aed" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="blue" cx="50%" cy="50%" r="50%">
+      <stop offset="0" stop-color="#2563eb" stop-opacity=".68"/>
+      <stop offset="1" stop-color="#2563eb" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="blur"><feGaussianBlur stdDeviation="34"/></filter>
+    <filter id="grain"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .09 0"/></filter>
+    <linearGradient id="line" x1="0" x2="1"><stop stop-color="#60a5fa" stop-opacity="0"/><stop offset=".5" stop-color="#c4b5fd" stop-opacity=".52"/><stop offset="1" stop-color="#fb7185" stop-opacity="0"/></linearGradient>
+  </defs>
+  <rect width="1600" height="900" fill="#061126"/>
+  <g filter="url(#blur)">
+    <circle cx="280" cy="160" r="290" fill="url(#violet)">
+      <animate attributeName="cx" values="280;440;280" dur="22s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="160;260;160" dur="18s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="1320" cy="690" r="350" fill="url(#blue)">
+      <animate attributeName="cx" values="1320;1160;1320" dur="26s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="690;580;690" dur="20s" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="900" cy="250" r="190" fill="url(#blue)" opacity=".7">
+      <animate attributeName="cy" values="250;390;250" dur="16s" repeatCount="indefinite"/>
+    </circle>
+  </g>
+  <g fill="none" stroke="url(#line)" stroke-width="1.5" opacity=".75">
+    <path d="M-80 670 C250 420 470 850 770 600 S1320 280 1680 490"><animate attributeName="d" dur="19s" repeatCount="indefinite" values="M-80 670 C250 420 470 850 770 600 S1320 280 1680 490;M-80 570 C250 720 470 410 770 640 S1320 390 1680 390;M-80 670 C250 420 470 850 770 600 S1320 280 1680 490"/></path>
+    <path d="M-60 760 C230 520 500 780 810 690 S1340 420 1660 610" opacity=".65"><animate attributeName="d" dur="24s" repeatCount="indefinite" values="M-60 760 C230 520 500 780 810 690 S1340 420 1660 610;M-60 660 C230 750 500 510 810 730 S1340 330 1660 520;M-60 760 C230 520 500 780 810 690 S1340 420 1660 610"/></path>
+  </g>
+  <rect width="1600" height="900" filter="url(#grain)" opacity=".55"/>
+</svg>

exampleSite/config/_default/params.toml

@@ -24,7 +24,7 @@ disableImageOptimizationMD = false
 disableTextInHeader = false
 # backgroundImageWidth = 1200
 
-defaultBackgroundImage = "/img/background.svg"
+defaultBackgroundImage = "images/v3/site-background.svg"
 defaultFeaturedImage = "/img/featured.svg"
 defaultSocialImage = "/img/blowfish_banner.png"
 hotlinkFeatureImage = false
@@ -53,8 +53,6 @@ fingerprintAlgorithm = "sha512" # Valid values are "sha512" (default), "sha384",
 [homepage]
   layout = "landing" # valid options: page, profile, hero, card, background, landing, custom
   layoutSwitcher = true # opt-in interactive preview of the built-in layouts
-  animatedBackground = true # opt-in motion background for the landing layout
-  animatedBackgroundImage = "images/v3/animated-background.png"
   # homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = true
   showRecentItems = 12

exampleSite/content/docs/homepage-layout/index.md

@@ -1,6 +1,6 @@
 ---
 title: "Homepage Layout"
-featureimage: "images/v3/layouts.png"
+featureimage: "images/v3/homepage-layout.png"
 weight: 5
 draft: false
 description: "Configuring the homepage layout in the Blowfish theme."

exampleSite/content/docs/shortcodes/index.md

@@ -3,7 +3,7 @@ title: "Shortcodes"
 weight: 6
 draft: false
 description: "All the shortcodes available in Blowfish."
-featureimage: "images/v3/documentation.png"
+featureimage: "images/v3/shortcodes.png"
 slug: "shortcodes"
 tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
 series: ["Documentation"]