[pull] main from tsparticles:main

websites/confetti/index.html

@@ -15,8 +15,60 @@
 
     <meta name="theme-color" content="#393939" />
 
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="tsParticles Confetti | JavaScript Confetti, Particles and Fireworks animations for your website"
+    />
+    <meta
+      property="og:description"
+      content="Create stunning confetti, particles and fireworks animations with tsParticles. Interactive playground with live code editor. Supports React, Vue, Angular, Svelte, and more."
+    />
+    <meta property="og:url" content="https://confetti.js.org" />
+    <meta property="og:site_name" content="tsParticles Confetti" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:image" content="https://particles.js.org/images/banner3.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="tsParticles Confetti | JavaScript Confetti, Particles and Fireworks animations"
+    />
+    <meta
+      name="twitter:description"
+      content="Create stunning confetti, particles and fireworks animations with tsParticles. Interactive playground with live code editor."
+    />
+    <meta name="twitter:image" content="https://particles.js.org/images/banner3.png" />
+
+    <link rel="canonical" href="https://confetti.js.org" />
+    <link rel="icon" type="image/png" href="https://particles.js.org/tsParticles-64.png" />
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "tsParticles Confetti",
+        "url": "https://confetti.js.org",
+        "description": "Interactive confetti animation playground built with tsParticles. Create customizable confetti, particle and fireworks animations with a live code editor.",
+        "applicationCategory": "Multimedia",
+        "operatingSystem": "All",
+        "browserRequirements": "Requires JavaScript",
+        "author": {
+          "@type": "Person",
+          "name": "Matteo Bruni",
+          "url": "https://github.com/matteobruni"
+        },
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "USD"
+        }
+      }
+    </script>
+
     <title>
-      tsParticles 🎉🎊 | JavaScript Confetti, Particles and Fireworks animations for your website
+      tsParticles Confetti | JavaScript Confetti, Particles and Fireworks animations for your
+      website
     </title>
 
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet" />

websites/confetti/public/llms.txt

@@ -0,0 +1,19 @@
+# tsParticles Confetti
+
+> Interactive showcase and playground for tsParticles confetti animations. Explore confetti modes, customize settings with a live editor, and generate code snippets for your own projects. Hosted at confetti.js.org.
+
+## Docs
+
+- [Confetti Modes](https://confetti.js.org/): Interactive confetti animation demos with live code editor
+- [tsParticles Documentation](https://particles.js.org/): Main tsParticles documentation site
+- [tsParticles GitHub](https://github.com/tsparticles/tsparticles): Source code and issue tracker
+
+## Core
+
+- [Confetti Bundle](https://particles.js.org/guide/bundles-confetti): Guide for using the @tsparticles/confetti bundle
+- [Confetti Presets](https://particles.js.org/demos/recipes/confetti): Confetti preset demos and recipes
+- [Confetti Cannon Preset](https://particles.js.org/demos/recipes/confetti-cannon): Confetti cannon recipe
+- [Confetti Explosions Preset](https://particles.js.org/demos/recipes/confetti-explosions): Confetti explosions recipe
+- [Confetti Falling Preset](https://particles.js.org/demos/recipes/confetti-falling): Confetti falling animation recipe
+- [Confetti Parade Preset](https://particles.js.org/demos/recipes/confetti-parade): Confetti parade recipe
+- [npm: @tsparticles/confetti](https://www.npmjs.com/package/@tsparticles/confetti): npm package for @tsparticles/confetti

websites/confetti/public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://confetti.js.org/sitemap.xml

websites/confetti/public/sitemap.xml

@@ -2,14 +2,14 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://confetti.js.org/</loc>
-    <lastmod>2026-04-05</lastmod>
+    <lastmod>2026-06-04</lastmod>
     <changefreq>monthly</changefreq>
     <priority>1</priority>
   </url>
   <url>
     <loc>https://confetti.js.org/cookie-policy.html</loc>
-    <lastmod>2026-04-06</lastmod>
+    <lastmod>2026-06-04</lastmod>
     <changefreq>monthly</changefreq>
-    <priority>0.5</priority>
+    <priority>0.3</priority>
   </url>
 </urlset>

websites/confetti/vite.config.js

@@ -14,6 +14,6 @@ export default defineConfig({
   ],
   build: {
     outDir: 'dist',
-    minify: false,
+    minify: true,
   },
 });

websites/ribbons/index.html

@@ -15,6 +15,57 @@
 
     <meta name="theme-color" content="#393939" />
 
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:title"
+      content="tsParticles Ribbons | JavaScript Ribbon animations for your website"
+    />
+    <meta
+      property="og:description"
+      content="Create stunning ribbon animations with tsParticles. Interactive playground with live code editor. Supports React, Vue, Angular, Svelte, and more."
+    />
+    <meta property="og:url" content="https://ribbons.js.org" />
+    <meta property="og:site_name" content="tsParticles Ribbons" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:image" content="https://particles.js.org/images/banner3.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="tsParticles Ribbons | JavaScript Ribbon animations for your website"
+    />
+    <meta
+      name="twitter:description"
+      content="Create stunning ribbon animations with tsParticles. Interactive playground with live code editor."
+    />
+    <meta name="twitter:image" content="https://particles.js.org/images/banner3.png" />
+
+    <link rel="canonical" href="https://ribbons.js.org" />
+    <link rel="icon" type="image/png" href="https://particles.js.org/tsParticles-64.png" />
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "tsParticles Ribbons",
+        "url": "https://ribbons.js.org",
+        "description": "Interactive ribbon animation playground built with tsParticles. Create customizable ribbon animations with a live code editor.",
+        "applicationCategory": "Multimedia",
+        "operatingSystem": "All",
+        "browserRequirements": "Requires JavaScript",
+        "author": {
+          "@type": "Person",
+          "name": "Matteo Bruni",
+          "url": "https://github.com/matteobruni"
+        },
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "USD"
+        }
+      }
+    </script>
+
     <title>tsParticles Ribbons | JavaScript Ribbon animations for your website</title>
 
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet" />

websites/ribbons/public/llms.txt

@@ -0,0 +1,15 @@
+# tsParticles Ribbons
+
+> Interactive showcase and playground for tsParticles ribbon animations. Explore ribbon modes (basic, custom colors, multiple bursts, continuous fall, custom canvas, fixed position) with a live code editor. Hosted at ribbons.js.org.
+
+## Docs
+
+- [Ribbons Modes](https://ribbons.js.org/): Interactive ribbon animation demos with live code editor
+- [tsParticles Documentation](https://particles.js.org/): Main tsParticles documentation site
+- [tsParticles GitHub](https://github.com/tsparticles/tsparticles): Source code and issue tracker
+
+## Core
+
+- [Ribbons Preset](https://particles.js.org/demos/recipes/ribbons): Ribbon animation demo and recipe
+- [Ribbon Shape Plugin](https://particles.js.org/options/plugin-shapes): Documentation for the ribbon shape plugin options
+- [npm: @tsparticles/ribbons](https://www.npmjs.com/package/@tsparticles/ribbons): npm package for @tsparticles/ribbons

websites/ribbons/public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://ribbons.js.org/sitemap.xml

websites/ribbons/public/sitemap.xml

@@ -2,14 +2,14 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://ribbons.js.org/</loc>
-    <lastmod>2026-04-05</lastmod>
+    <lastmod>2026-06-04</lastmod>
     <changefreq>monthly</changefreq>
     <priority>1</priority>
   </url>
   <url>
     <loc>https://ribbons.js.org/cookie-policy.html</loc>
-    <lastmod>2026-04-06</lastmod>
+    <lastmod>2026-06-04</lastmod>
     <changefreq>monthly</changefreq>
-    <priority>0.5</priority>
+    <priority>0.3</priority>
   </url>
 </urlset>

websites/ribbons/vite.config.js

@@ -14,6 +14,6 @@ export default defineConfig({
   ],
   build: {
     outDir: 'dist',
-    minify: false,
+    minify: true,
   },
 });

websites/website/docs/.vitepress/config.ts

@@ -10,6 +10,7 @@ const gaMeasurementId = loadedEnv.VITE_GA_MEASUREMENT_ID ?? "";
 const nav: DefaultTheme.NavItem[] = [
   { text: "Start", link: "/guide/getting-started" },
   { text: "Playground", link: "/playground/" },
+  { text: "Guides", link: "/guides/" },
   { text: "Demos", link: "/demos/" },
   { text: "Wrappers", link: "/guide/wrappers" },
   { text: "Options", link: "/options/" },
@@ -296,6 +297,33 @@ const baseSidebar: DefaultTheme.Sidebar = {
       ],
     },
   ],
+  "/guides/": [
+    {
+      text: "Guides",
+      items: [
+        { text: "Overview", link: "/guides/" },
+        { text: "Vanilla JS", link: "/guides/vanilla" },
+        { text: "React", link: "/guides/react" },
+        { text: "Vue 3", link: "/guides/vue3" },
+        { text: "Angular", link: "/guides/angular" },
+        { text: "Svelte", link: "/guides/svelte" },
+        { text: "Next.js", link: "/guides/nextjs" },
+        { text: "Nuxt", link: "/guides/nuxt" },
+        { text: "Solid", link: "/guides/solid" },
+        { text: "Preact", link: "/guides/preact" },
+        { text: "Lit", link: "/guides/lit" },
+        { text: "Qwik", link: "/guides/qwik" },
+        { text: "jQuery", link: "/guides/jquery" },
+        { text: "Astro", link: "/guides/astro" },
+        { text: "Web Components", link: "/guides/webcomponents" },
+        { text: "Stencil", link: "/guides/stencil" },
+        { text: "Ember", link: "/guides/ember" },
+        { text: "Riot", link: "/guides/riot" },
+        { text: "Inferno", link: "/guides/inferno" },
+        { text: "WordPress", link: "/guides/wordpress" },
+      ],
+    },
+  ],
 };
 
 function prefixSidebarItems(items: DefaultTheme.SidebarItem[], prefix: string): DefaultTheme.SidebarItem[] {
@@ -338,6 +366,51 @@ export default defineConfig({
   lastUpdated: false,
   base,
   ignoreDeadLinks: [],
+  transformHead: ({ pageData }) => {
+    let path = pageData.relativePath.replace(/\.md$/, "").replace(/\/?index$/, "");
+    const localePrefixesMap: Record<string, string> = {
+      root: "x-default",
+      it: "it",
+      fr: "fr",
+      es: "es",
+      de: "de",
+      pt: "pt",
+      ru: "ru",
+      zh: "zh",
+      ja: "ja",
+      hi: "hi",
+    };
+    let detectedLocale = "root";
+    for (const locale of Object.keys(localePrefixesMap)) {
+      if (locale === "root") continue;
+      if (path === locale || path.startsWith(locale + "/")) {
+        detectedLocale = locale;
+        path = path.slice(locale.length).replace(/^\//, "");
+        break;
+      }
+    }
+    const head: any[] = [];
+    for (const [locale, hreflang] of Object.entries(localePrefixesMap)) {
+      const hrefPath = locale === "root" ? path : `${locale}/${path}`;
+      head.push([
+        "link",
+        {
+          rel: "alternate",
+          href: `https://particles.js.org/${hrefPath}`,
+          hreflang,
+        },
+      ]);
+    }
+    const canonicalPath = detectedLocale === "root" ? path : `${detectedLocale}/${path}`;
+    head.push([
+      "link",
+      {
+        rel: "canonical",
+        href: `https://particles.js.org/${canonicalPath}`,
+      },
+    ]);
+    return head;
+  },
   locales: {
     root: {
       label: "English",
@@ -464,6 +537,9 @@ export default defineConfig({
         "vue",
         "svelte",
         "astro",
+        "riot",
+        "hbs",
+        "php",
       ],
     },
   },
@@ -475,6 +551,32 @@ export default defineConfig({
     ["meta", { property: "og:type", content: "website" }],
     ["meta", { property: "og:title", content: "tsParticles" }],
     ["meta", { property: "og:description", content: "TypeScript particle engine for websites and apps" }],
+    ["meta", { property: "og:url", content: "https://particles.js.org" }],
+    ["meta", { property: "og:site_name", content: "tsParticles" }],
+    ["meta", { property: "og:locale", content: "en_US" }],
+    ["meta", { property: "og:image", content: "https://particles.js.org/images/banner3.png" }],
+    ["meta", { property: "og:image:width", content: "1200" }],
+    ["meta", { property: "og:image:height", content: "630" }],
+    ["meta", { name: "twitter:card", content: "summary_large_image" }],
+    ["meta", { name: "twitter:title", content: "tsParticles" }],
+    ["meta", { name: "twitter:description", content: "TypeScript particle engine for websites and apps" }],
+    ["meta", { name: "twitter:image", content: "https://particles.js.org/images/banner3.png" }],
+    [
+      "script",
+      { type: "application/ld+json" },
+      JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        name: "tsParticles",
+        url: "https://particles.js.org",
+        description: "Modern particle animations for the web. TypeScript particle engine for websites and apps.",
+        author: {
+          "@type": "Person",
+          name: "Matteo Bruni",
+          url: "https://github.com/matteobruni",
+        },
+      }),
+    ],
     ...(gaMeasurementId
       ? [
           [