Merge pull request #4 from ChrisWatterston/fix/meta-title

Fix/meta title

.storybook/manager-head.html

@@ -0,0 +1,11 @@
+<script>
+  var observer = new MutationObserver(function(mutations) {
+    if (document.title.includes("Storybook")) {
+      document.title = document.title.replace(/Storybook/g, "Eu/Acc Asset Library");
+    }
+  }).observe(document.querySelector("title"), {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+</script>

.storybook/themeAcc.js

@@ -8,7 +8,7 @@ export default create({
   //   fontCode: "monospace",
 
   // Brand
-  brandTitle: "EU/Acc",
+  brandTitle: "Eu/Acc Asset Library",
   brandUrl: "https://eu-acc.com/",
   brandImage: "logo/long/svg/eu-acc-logo-long-light.svg",
   brandTarget: "_self",

.vscode/tasks.json

@@ -4,7 +4,7 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "RUN (sudo) - Storyboard",
+      "label": "RUN - Storyboard",
       "type": "shell",
       "command": "npm run storybook",
       "problemMatcher": []

stories/Configure.mdx

@@ -32,7 +32,7 @@ export const RightArrow = () => (
   <div className='sb-section-title'>
     # Welcome to the European Accelerationism (Eu/Acc) Asset Library.
 
-    🇪🇺 European Accelerationism (Eu/Acc) is a decentralized community movement to accelerate progress in Europe through innovation, technology, and a Europe-positive mindset. For full information and more, visit our official website at <a href="https://eu-acc.com/?utm_source=assetlibrary&utm_campaign=introduction" target="_blank" title="European Accelerationism (Eu/Acc) is a decentralized community movement to accelerate progress in Europe through innovation, technology, and a Europe-positive mindset">eu-acc.com</a>.
+    🇪🇺 European Accelerationism (Eu/Acc) is a decentralized community movement to accelerate progress in Europe through innovation, technology, and a Europe-positive mindset. For full information and more, visit our official website at <a data-cabin-event="Intro / External / EUAcc Website" href="https://eu-acc.com/?utm_source=assetlibrary&utm_campaign=introduction" target="_blank" title="European Accelerationism (Eu/Acc) is a decentralized community movement to accelerate progress in Europe through innovation, technology, and a Europe-positive mindset">eu-acc.com</a>.
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -43,7 +43,7 @@ export const RightArrow = () => (
       <h4 className="sb-section-item-heading">Logo variations</h4>
       <p className="sb-section-item-paragraph">If you need to use or obtain a copy of the European Accelerationism (Eu/Acc) logo, this is where you can download or embed the official assets.</p>
       <a
-        href="/?path=/docs/asset-library-logo--docs"
+         data-cabin-event="Intro / Assets / Logo" href="/?path=/docs/asset-library-logo--docs"
       >Learn more<RightArrow /></a>
     </div>
     <div className="sb-section-item">
@@ -54,7 +54,7 @@ export const RightArrow = () => (
       <h4 className="sb-section-item-heading">Social assets & usages</h4>
       <p className="sb-section-item-paragraph">There are times when you'll need the European Accelerationism (Eu/Acc) logo as an avatar, banner, or reel. We've got you covered.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue#context-for-mocking"
+         data-cabin-event="Intro / Assets / Social" href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue#context-for-mocking"
       >Learn more<RightArrow /></a>
     </div>
   </div>
@@ -71,7 +71,7 @@ export const RightArrow = () => (
         <p className="sb-section-item-paragraph">Nothing shouts that you support a movement quite like adding our support badge to your website, blog, or social channels. By displaying the Eu/Acc badge, you are not only showcasing your commitment to our vision but also helping to spread awareness and rally more people to the cause.</p>
         <p className="sb-section-item-paragraph">Our badge is a symbol of the collective effort to accelerate progress and foster a community driven by innovation, unity, and a shared vision for the future of Europe. It represents a commitment to forward-thinking policies, technological advancement, and social cohesion.</p>
         <a
-          href="/?path=/docs/asset-library-badge--docs"
+          data-cabin-event="Intro / Assets / Badge" href="/?path=/docs/asset-library-badge--docs"
         >Learn more<RightArrow /></a>
       </div>
       <div className="sb-grid-item">
@@ -86,7 +86,7 @@ export const RightArrow = () => (
     <p className="sb-section-item-paragraph">We're only getting started, but we ALWAYS welcome suggestive feedback and new ideas for our Eu/Acc asset library or our official website - and your feedback is essential.</p>
     <p className="sb-section-item-paragraph">If you're open to sharing your thoughts, please complete our short survey (2 mins).</p>
     <a
-        href="https://forms.gle/fiadxd9oxTcnXWAN6"
+        data-cabin-event="Intro / External / Feedback" href="https://forms.gle/fiadxd9oxTcnXWAN6"
         target="_blank"
         titl="Submit feedback for Eu/Acc"
       >Submit feedback<RightArrow /></a>
@@ -106,7 +106,7 @@ export const RightArrow = () => (
       <p>Visit our official website for more information and goals.</p>  
 
       <a
-          href="https://eu-acc.com/?utm_source=assetlibrary&utm_campaign=introduction"
+          data-cabin-event="Intro / Footer / EUAcc Website" href="https://eu-acc.com/?utm_source=assetlibrary&utm_campaign=introduction"
           target="_blank"
           title="European Accelerationism (Eu/Acc) official website"
         >Visit Eu/Acc website<RightArrow /></a>
@@ -117,7 +117,7 @@ export const RightArrow = () => (
         <p>Contribute to our Eu/Acc working group and so much more.</p>
 
         <a
-          href="https://discord.gg/ebfHJDv9cP"
+          data-cabin-event="Intro / Footer / Discord" href="https://discord.gg/ebfHJDv9cP"
           target="_blank"
           title="European Accelerationism (Eu/Acc) Discord server, join today."
         >Join Discord community<RightArrow /></a>
@@ -128,7 +128,7 @@ export const RightArrow = () => (
       <p>Join our contributors building the web presence of Eu/Acc.</p>
 
       <a
-        href="https://github.com/eu-acc/"
+        data-cabin-event="Intro / Footer / Github" href="https://github.com/eu-acc/"
         target="_blank"
         title="European Accelerationism (Eu/Acc) Github repository, start contributing."
       >Star on GitHub<RightArrow /></a>
@@ -139,7 +139,7 @@ export const RightArrow = () => (
         <p>Follow us on X, join our community, and more</p>
 
         <a
-          href="https://x.com/euacchq"
+          data-cabin-event="Intro / Footer / X Twitter" href="https://x.com/euacchq"
           target="_blank"
           title="Follow the unofficial Eu/Acc X account"
         >Follow on X<RightArrow /></a>
@@ -292,3 +292,6 @@ export const RightArrow = () => (
   }
   `}
 </style>
+
+{/* Analytics */}
+<script async defer src="https://scripts.withcabin.com/hello.js"></script>

stories/avatar/avatar.docs.mdx

@@ -29,8 +29,8 @@ The `avatar` assets are used to display the Eu/Acc community movement logo as a
 
 You can download the avatar using the link below:
 
-<a id="linkDownload" href="social/avatar/eu-acc-social-avatar-light.png" download="eu-acc-social-avatar-light.png">Download (Exc. Label)</a>
-<a id="linkDownload" href="social/avatar/eu-acc-social-avatar-label-light.png" download="eu-acc-social-avatar-label-light.png">Download (Inc. Label)</a>
+<a data-cabin-event="Avatar / Download / Light (Inc. Label)" id="linkDownload" href="social/avatar/eu-acc-social-avatar-light.png" download="eu-acc-social-avatar-light.png">Download (Exc. Label)</a>
+<a data-cabin-event="Avatar / Download / Light (Inc. Label)" id="linkDownload" href="social/avatar/eu-acc-social-avatar-label-light.png" download="eu-acc-social-avatar-label-light.png">Download (Inc. Label)</a>
 
 ### Dark Version
 
@@ -55,5 +55,8 @@ You can download the avatar using the link below:
 
 You can download the avatar using the link below:
 
-<a id="linkDownload" href="social/avatar/eu-acc-social-avatar-dark.png" download="eu-acc-social-avatar-dark.png">Download (Exc. Label)</a>
-<a id="linkDownload" href="social/avatar/eu-acc-social-avatar-label-dark.png" download="eu-acc-social-avatar-label-dark.png">Download (Inc. Label)</a>
+<a data-cabin-event="Avatar / Download / Dark (Exc. Label)" id="linkDownload" href="social/avatar/eu-acc-social-avatar-dark.png" download="eu-acc-social-avatar-dark.png">Download (Exc. Label)</a>
+<a data-cabin-event="Avatar / Download / Dark (Inc. Label)" id="linkDownload" href="social/avatar/eu-acc-social-avatar-label-dark.png" download="eu-acc-social-avatar-label-dark.png">Download (Inc. Label)</a>
+
+{/* Analytics */}
+<script async defer src="https://scripts.withcabin.com/hello.js"></script>

stories/badge/badge.docs.mdx

@@ -23,8 +23,8 @@ The `Badge` is used on digital websites or media to show support for the Eu/Acc
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/long/svg/eu-acc-badge-long-horizontal-black.svg" download="eu-acc-badge-long-horizontal-black.svg">Download SVG</a>
-<a id="linkDownload" href="badge/long/png/eu-acc-badge-long-horizontal-black.png" download="eu-acc-badge-long-horizontal-black.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Long Horz Black (SVG)" id="linkDownload" href="badge/long/svg/eu-acc-badge-long-horizontal-black.svg" download="eu-acc-badge-long-horizontal-black.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Long Horz Black (PNG)" id="linkDownload" href="badge/long/png/eu-acc-badge-long-horizontal-black.png" download="eu-acc-badge-long-horizontal-black.png">Download PNG</a>
 
 #### Usage
 
@@ -48,8 +48,8 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/long/svg/eu-acc-badge-long-horizontal-blue.svg" download="eu-acc-badge-long-horizontal-blue.svg">Download SVG</a>
-<a id="linkDownload" href="badge/long/png/eu-acc-badge-long-horizontal-blue.png" download="eu-acc-badge-long-horizontal-blue.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Long Horz Blue (SVG)" id="linkDownload" href="badge/long/svg/eu-acc-badge-long-horizontal-blue.svg" download="eu-acc-badge-long-horizontal-blue.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Long Horz Blue (PNG)" id="linkDownload" href="badge/long/png/eu-acc-badge-long-horizontal-blue.png" download="eu-acc-badge-long-horizontal-blue.png">Download PNG</a>
 
 #### Usage
 
@@ -75,8 +75,8 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/long/svg/eu-acc-badge-long-vertical-black.svg" download="eu-acc-badge-long-vertical-black.svg">Download SVG</a>
-<a id="linkDownload" href="badge/long/png/eu-acc-badge-long-vertical-black.png" download="eu-acc-badge-long-vertical-black.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Long Vert Black (SVG)" id="linkDownload" href="badge/long/svg/eu-acc-badge-long-vertical-black.svg" download="eu-acc-badge-long-vertical-black.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Long Vert Black (PNG)" id="linkDownload" href="badge/long/png/eu-acc-badge-long-vertical-black.png" download="eu-acc-badge-long-vertical-black.png">Download PNG</a>
 
 #### Usage
 
@@ -100,8 +100,8 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/long/svg/eu-acc-badge-long-vertical-blue.svg" download="eu-acc-badge-long-vertical-blue.svg">Download SVG</a>
-<a id="linkDownload" href="badge/long/png/eu-acc-badge-long-vertical-blue.png" download="eu-acc-badge-long-vertical-blue.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Long Vert Blue (SVG)" id="linkDownload" href="badge/long/svg/eu-acc-badge-long-vertical-blue.svg" download="eu-acc-badge-long-vertical-blue.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Long Vert Blue (PNG)" id="linkDownload" href="badge/long/png/eu-acc-badge-long-vertical-blue.png" download="eu-acc-badge-long-vertical-blue.png">Download PNG</a>
 
 #### Usage
 
@@ -127,8 +127,8 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/short/svg/eu-acc-badge-short-horizontal-black.svg" download="eu-acc-badge-short-horizontal-black.svg">Download SVG</a>
-<a id="linkDownload" href="badge/short/png/eu-acc-badge-short-horizontal-black.png" download="eu-acc-badge-short-horizontal-black.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Short Horz Black (SVG)" id="linkDownload" href="badge/short/svg/eu-acc-badge-short-horizontal-black.svg" download="eu-acc-badge-short-horizontal-black.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Short Horz Black (PNG)" id="linkDownload" href="badge/short/png/eu-acc-badge-short-horizontal-black.png" download="eu-acc-badge-short-horizontal-black.png">Download PNG</a>
 
 #### Usage
 
@@ -152,8 +152,8 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/short/svg/eu-acc-badge-short-horizontal-blue.svg" download="eu-acc-badge-short-horizontal-blue.svg">Download SVG</a>
-<a id="linkDownload" href="badge/short/png/eu-acc-badge-short-horizontal-blue.png" download="eu-acc-badge-short-horizontal-blue.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Short Horz Blue (SVG)" id="linkDownload" href="badge/short/svg/eu-acc-badge-short-horizontal-blue.svg" download="eu-acc-badge-short-horizontal-blue.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Short Horz Blue (PNG)" id="linkDownload" href="badge/short/png/eu-acc-badge-short-horizontal-blue.png" download="eu-acc-badge-short-horizontal-blue.png">Download PNG</a>
 
 #### Usage
 
@@ -179,8 +179,8 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/short/svg/eu-acc-badge-short-vertical-black.svg" download="eu-acc-badge-short-vertical-black.svg">Download SVG</a>
-<a id="linkDownload" href="badge/short/png/eu-acc-badge-short-vertical-black.png" download="eu-acc-badge-short-vertical-black.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Short Vert Black (SVG)" id="linkDownload" href="badge/short/svg/eu-acc-badge-short-vertical-black.svg" download="eu-acc-badge-short-vertical-black.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Short Vert Black (PNG)" id="linkDownload" href="badge/short/png/eu-acc-badge-short-vertical-black.png" download="eu-acc-badge-short-vertical-black.png">Download PNG</a>
 
 #### Usage
 
@@ -204,12 +204,15 @@ You can download the badge using the link below:
 
 You can download the badge using the link below:
 
-<a id="linkDownload" href="badge/short/svg/eu-acc-badge-short-vertical-blue.svg" download="eu-acc-badge-short-vertical-blue.svg">Download SVG</a>
-<a id="linkDownload" href="badge/short/png/eu-acc-badge-short-vertical-blue.png" download="eu-acc-badge-short-vertical-blue.png">Download PNG</a>
+<a data-cabin-event="Badge / Download / Short Vert Blue (SVG)" id="linkDownload" href="badge/short/svg/eu-acc-badge-short-vertical-blue.svg" download="eu-acc-badge-short-vertical-blue.svg">Download SVG</a>
+<a data-cabin-event="Badge / Download / Short Vert Blue (PNG)" id="linkDownload" href="badge/short/png/eu-acc-badge-short-vertical-blue.png" download="eu-acc-badge-short-vertical-blue.png">Download PNG</a>
 
 #### Usage
 
 ```html
 <!-- Copy/Paste the this code into your websites footer -->
 <a href="https://eu-acc.com/?utm_source=badge&utm_campaign=support" target="_blank" title="European Accelerationism (Eu/Acc) is a decentralized community movement to accelerate progress in Europe through innovation, technology, and a Europe-positive mindset."><img src="https://eu-acc.github.io/assets-library/badge/short/svg/eu-acc-badge-short-vertical-blue.svg" alt="European Accelerationism (Eu/Acc) logo" width="100px" height="auto" /></a>
-```
+```
+
+{/* Analytics */}
+<script async defer src="https://scripts.withcabin.com/hello.js"></script>

stories/banner/banner.docs.mdx

@@ -23,8 +23,8 @@ The `banner` assets are used to display the Eu/Acc community movement logo as a
 
 You can download the header using the link below:
 
-<a id="linkDownload" href="social/banner/eu-acc-social-linkedin-banner-dark.png" download="eu-acc-social-linkedin-banner-dark.png">Download (1584 × 396)</a>
-<a id="linkDownload" href="social/banner/eu-acc-social-twitter-banner-dark.png" download="eu-acc-social-twitter-banner-dark.png">Download (1500 × 500)</a>
+<a data-cabin-event="Banner / Download / Header Light (1584x396)" id="linkDownload" href="social/banner/eu-acc-social-linkedin-banner-dark.png" download="eu-acc-social-linkedin-banner-dark.png">Download (1584x396)</a>
+<a data-cabin-event="Banner / Download / Header Light (1500x500)" id="linkDownload" href="social/banner/eu-acc-social-twitter-banner-dark.png" download="eu-acc-social-twitter-banner-dark.png">Download (1500x500)</a>
 
 #### Usage
 
@@ -61,8 +61,8 @@ You can download the header using the link below:
 
 You can download the header using the link below:
 
-<a id="linkDownload" href="social/banner/eu-acc-social-linkedin-banner-light.png" download="eu-acc-social-linkedin-banner-light.png">Download (1584 × 396)</a>
-<a id="linkDownload" href="social/banner/eu-acc-social-twitter-banner-light.png" download="eu-acc-social-twitter-banner-light.png">Download (1500 × 500)</a>
+<a data-cabin-event="Banner / Download / Header Dark (1584x396)" id="linkDownload" href="social/banner/eu-acc-social-linkedin-banner-light.png" download="eu-acc-social-linkedin-banner-light.png">Download (1584x396)</a>
+<a data-cabin-event="Banner / Download / Header Dark (1500x500)" id="linkDownload" href="social/banner/eu-acc-social-twitter-banner-light.png" download="eu-acc-social-twitter-banner-light.png">Download (1500x500)</a>
 
 #### Usage
 
@@ -83,3 +83,6 @@ You can download the header using the link below:
   height="auto"
 />
 ```
+
+{/* Analytics */}
+<script async defer src="https://scripts.withcabin.com/hello.js"></script>