Home page + contributors updates

src/assets/i18n/en.json

@@ -18,7 +18,8 @@
       },
       "shop": {
         "title": "Shop",
-        "official": "Official ",
+        "og": "SlimeVR Trackers",
+        "butterfly": "Butterfly Trackers",
         "spare-parts": "Spare parts"
       },
       "social": {

src/components/Footer.tsx

@@ -87,12 +87,20 @@ export const Footer: Component = (props) => {
           />
           <div class="flex sm:flex-col sm:gap-0.5 gap-3 flex-wrap">
             <a
-              href="https://www.crowdsupply.com/slimevr/slimevr-full-body-tracker"
+              href="https://slime.gay/site-cs-og"
               target="_blank"
               rel="noopener noreferrer"
               class="link w-fit"
             >
-              <Typography tag="span" key="footer.column.shop.official" />
+              <Typography tag="span" key="footer.column.shop.og" />
+            </a>
+            <a
+              href="https://slime.gay/site-cs-bf"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link w-fit"
+            >
+              <Typography tag="span" key="footer.column.shop.butterfly" />
             </a>
             <a
               href="https://shop.slimevr.dev"

src/components/Navbar.tsx

@@ -93,7 +93,7 @@ export const Navbar: Component = (props) => {
             <div class="items-center sm:flex hidden">
               <Button
                 variant="primary"
-                href="https://www.crowdsupply.com/slimevr/slimevr-full-body-tracker"
+                href="https://slime.gay/site-cs-bf"
                 aria-label="Order SlimeVR 1.2 trackers"
               >
                 <Localized id="navbar.order" />

src/components/commons/ArrowButton.tsx

@@ -9,7 +9,8 @@ import {
   splitProps,
 } from "solid-js";
 import { ArrowIcon } from "./icons/ArrowIcon";
-
+import { createSignal, onMount, onCleanup } from "solid-js";
+import { getContentSize } from "~/utils/dom";
 interface ArrowButtonProps extends AnchorProps {
   prefixIcon?: JSX.Element;
   variant?: "primary" | "default";
@@ -31,10 +32,36 @@ export const ArrowButton: ParentComponent<ArrowButtonProps> = (
   ]);
 
   const prefixIcon = children(() => props.prefixIcon);
+  const [showArrow, setShowArrow] = createSignal(true);
+
+  let containerRef!: HTMLAnchorElement;
+  let arrowRef!: HTMLDivElement;
+
+  const checkOverflow = () => {
+    const margin = 21;
+    const container = getContentSize(containerRef);
+    const arrow = getContentSize(arrowRef);
+    setShowArrow(arrow.right <= container.right - margin);
+  };
+
+  onMount(() => {
+    checkOverflow();
+
+    window.addEventListener("resize", checkOverflow);
+
+    const observer = new ResizeObserver(checkOverflow);
+    observer.observe(containerRef);
+
+    onCleanup(() => {
+      window.removeEventListener("resize", checkOverflow);
+      observer.disconnect();
+    });
+  });
 
   return (
     <A
       {...anchorProps}
+      ref={containerRef}
       class={clsx(
         "flex items-center sm:gap-5 gap-2 bg-background-60/80 rounded-2xl p-3 sm:pl-5 sm:pr-10 px-5 hover:cursor-pointer group hover:bg-background-50 backdrop-blur-[9px] transition-colors border",
         props.variant === "primary"
@@ -52,12 +79,15 @@ export const ArrowButton: ParentComponent<ArrowButtonProps> = (
         </div>
       </Show>
       <div class="flex flex-col grow">{props.children}</div>
-      <div class="flex w-9 group-hover:translate-x-5 transition-transform duration-200">
-        <ArrowIcon
-          class="fill-background-10"
-          size={30}
-          direction="right"
-        ></ArrowIcon>
+
+      <div
+        ref={arrowRef}
+        class={clsx(
+          "flex w-9 group-hover:translate-x-5 transition-transform duration-200",
+          !showArrow() && "invisible"
+        )}
+      >
+        <ArrowIcon class="fill-background-10" size={30} direction="right" />
       </div>
     </A>
   );

src/components/commons/Drawer.tsx

@@ -27,7 +27,7 @@ interface DrawerProps {
 }
 
 export const Drawer: ParentComponent<DrawerProps> = (props) => {
-  let drawerContainerRef: HTMLDivElement;
+  let drawerContainerRef!: HTMLDivElement;
 
   let context: DrawerContextData = {
     events: new TypedEventTarget(),
@@ -61,14 +61,14 @@ interface DrawerItemProps {
 
 export const DrawerItem: ParentComponent<DrawerItemProps> = (props) => {
   const context = useContext(DrawerContext);
-  let itemRef: HTMLDivElement;
-  let itemContentRef: HTMLDivElement;
+  let itemRef!: HTMLDivElement;
+  let itemContentRef!: HTMLDivElement;
   let itemIndex: number;
-  let contentSizeObserver;
+  let contentSizeObserver!: ResizeObserver;
 
   if (!context) throw new Error("no context for the drawer found!");
 
-  const [contentSize, setContentSize] = createSignal<DOMRect | null>(null);
+  const [contentSize, setContentSize] = createSignal<DOMRect>();
   const [isOpen, setOpen] = createSignal(props.open);
 
   const onResize = () => {
@@ -104,7 +104,7 @@ export const DrawerItem: ParentComponent<DrawerItemProps> = (props) => {
     if (isServer) return { height: "inherit" };
     if (!contentSize() || !isOpen()) return { height: `0px` };
 
-    return { height: `${contentSize().height}px` };
+    return { height: `${contentSize()?.height}px` };
   });
 
   return (

src/components/commons/icons/socials/BoothIcon.tsx

@@ -0,0 +1,44 @@
+import { Component } from "solid-js";
+
+export const BoothIcon: Component<IconProps> = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      class={props.class}
+      viewBox="0 0 13.312613 13.188216"
+      id="svg1"
+    >
+      <defs id="defs1">
+        <clipPath clipPathUnits="userSpaceOnUse" id="clipPath2">
+          <rect
+            style="opacity:0.2;fill:#000000;stroke-width:0.990522"
+            id="rect3"
+            width="13.312613"
+            height="13.188216"
+            x="88.338623"
+            y="17.225916"
+          />
+        </clipPath>
+      </defs>
+      <g
+        id="Market-Views"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+        clip-path="url(#clipPath2)"
+        transform="translate(-88.338623,-17.225916)"
+      >
+        <g id="booth_logo">
+          <path d="M 0,40 H 112 V 0 H 0 Z" id="Fill-1" fill="none" />
+          <path
+            d="m 19.4824,13.9795 -0.481,4.588 h 2.353 c 0.873,0 1.523,-0.167 1.95,-0.503 0.428,-0.335 0.687,-0.94 0.783,-1.814 0.094,-0.843 -0.054,-1.433 -0.448,-1.768 -0.39,-0.335 -0.986,-0.503 -1.781,-0.503 z m -0.763,7.21 -0.509,4.917 h 2.656 c 0.42,0 0.779,-0.012 1.074,-0.035 0.296,-0.024 0.608,-0.086 0.94,-0.187 0.33,-0.102 0.603,-0.242 0.819,-0.422 0.217,-0.179 0.402,-0.429 0.557,-0.749 0.155,-0.32 0.259,-0.698 0.314,-1.136 0.039,-0.436 0,-0.811 -0.118,-1.123 -0.119,-0.312 -0.271,-0.551 -0.461,-0.714 -0.187,-0.164 -0.455,-0.289 -0.803,-0.375 -0.349,-0.086 -0.655,-0.136 -0.921,-0.153 -0.267,-0.015 -0.618,-0.023 -1.055,-0.023 z m 3.81,-9.973 c 1.718,0 2.99,0.379 3.819,1.136 0.828,0.756 1.154,1.978 0.979,3.664 -0.072,0.686 -0.272,1.345 -0.596,1.978 -0.326,0.632 -0.761,1.112 -1.305,1.44 0.646,0.125 1.182,0.421 1.604,0.889 0.424,0.468 0.706,1.007 0.847,1.616 0.142,0.608 0.176,1.249 0.103,1.919 -0.178,1.655 -0.829,2.903 -1.953,3.747 -1.127,0.842 -2.532,1.263 -4.218,1.263 h -7.34 l 1.846,-17.652 z m 55.367,7.296 h 5.723 l 0.763,-7.296 h 3.441 l -1.844,17.652 h -3.441 l 0.786,-7.547 h -5.724 l -0.787,7.547 h -3.441 l 1.844,-17.652 h 3.441 z m -8.131,-4.3 -1.537,14.656 h -3.441 l 1.536,-14.656 h -3.558 l 0.308,-2.996 h 10.558 l -0.308,2.996 z m -10.79,5.67 c 0.09,-0.946 -0.008,-1.843 -0.291,-2.691 -0.285,-0.847 -0.764,-1.545 -1.44,-2.095 -0.674,-0.55 -1.479,-0.824 -2.413,-0.824 -0.935,0 -1.79,0.274 -2.569,0.824 -0.778,0.55 -1.384,1.248 -1.815,2.095 -0.433,0.848 -0.694,1.745 -0.784,2.691 -0.027,0.534 -0.027,1.076 0.003,1.626 0.029,0.55 0.145,1.084 0.348,1.603 0.203,0.519 0.456,0.977 0.759,1.374 0.301,0.397 0.712,0.718 1.23,0.961 0.519,0.245 1.109,0.367 1.769,0.367 0.815,0 1.553,-0.18 2.214,-0.539 0.663,-0.358 1.195,-0.835 1.598,-1.43 0.404,-0.596 0.722,-1.229 0.953,-1.901 0.23,-0.671 0.376,-1.359 0.438,-2.061 z m 3.188,0.137 c -0.115,1.268 -0.409,2.459 -0.884,3.573 -0.473,1.114 -1.083,2.08 -1.826,2.896 -0.742,0.817 -1.632,1.462 -2.666,1.936 -1.036,0.473 -2.143,0.709 -3.323,0.709 -1.573,0 -2.925,-0.409 -4.057,-1.225 -1.133,-0.817 -1.948,-1.912 -2.451,-3.286 -0.502,-1.374 -0.672,-2.908 -0.509,-4.603 0.161,-1.709 0.628,-3.247 1.397,-4.614 0.771,-1.366 1.79,-2.45 3.061,-3.252 1.27,-0.801 2.682,-1.202 4.234,-1.202 1.552,0 2.889,0.401 4.013,1.202 1.124,0.802 1.948,1.886 2.471,3.252 0.522,1.367 0.701,2.905 0.54,4.614 z m -20.306,-0.137 c 0.09,-0.946 -0.008,-1.843 -0.291,-2.691 -0.284,-0.847 -0.764,-1.545 -1.439,-2.095 -0.675,-0.55 -1.48,-0.824 -2.415,-0.824 -0.933,0 -1.789,0.274 -2.569,0.824 -0.776,0.55 -1.382,1.248 -1.814,2.095 -0.432,0.848 -0.694,1.745 -0.783,2.691 -0.028,0.534 -0.028,1.076 0.002,1.626 0.029,0.55 0.144,1.084 0.349,1.603 0.202,0.519 0.455,0.977 0.758,1.374 0.302,0.397 0.713,0.718 1.23,0.961 0.519,0.245 1.108,0.367 1.769,0.367 0.813,0 1.552,-0.18 2.215,-0.539 0.662,-0.358 1.194,-0.835 1.598,-1.43 0.404,-0.596 0.721,-1.229 0.952,-1.901 0.231,-0.671 0.377,-1.359 0.438,-2.061 z m 3.189,0.137 c -0.116,1.268 -0.411,2.459 -0.883,3.573 -0.475,1.114 -1.084,2.08 -1.827,2.896 -0.744,0.817 -1.632,1.462 -2.667,1.936 -1.037,0.473 -2.143,0.709 -3.323,0.709 -1.574,0 -2.925,-0.409 -4.057,-1.225 -1.132,-0.817 -1.95,-1.912 -2.452,-3.286 -0.501,-1.374 -0.67,-2.908 -0.507,-4.603 0.161,-1.709 0.627,-3.247 1.396,-4.614 0.771,-1.366 1.79,-2.45 3.061,-3.252 1.27,-0.801 2.681,-1.202 4.233,-1.202 1.553,0 2.891,0.401 4.015,1.202 1.124,0.802 1.947,1.886 2.47,3.252 0.521,1.367 0.702,2.905 0.541,4.614 z m 54.0859,2.4717 v -0.797 l -1.991,-3.186 h -0.687 l -1.087,2.607 -1.068,-2.245 -0.598,-0.001 -1.81,4.273 v -4.055 h -1.231 v 0.359 h -0.941 v 1.249 h 0.941 v 3.606 c 0,0.32 0.26,0.579 0.58,0.579 h 0.615 v 3.975 h 1.256 v -1.8 c 0,-0.997 0.863,-1.806 1.93,-1.812 h 0.012 0.001 0.001 c 1.746,10e-4 3.16,1.321 3.16,2.949 v 0.663 h 0.917 v -3.566 h 0.941 v -1.971 z"
+            id="Combined-Shape"
+            fill="#081E30"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

src/components/commons/icons/socials/SoundCloudIcon.tsx

@@ -0,0 +1,36 @@
+import { Component } from "solid-js";
+
+export const SoundCloudIcon: Component<IconProps> = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      class={props.class}
+      viewBox="0 -4.5 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs></defs>
+      <g
+        id="Page-1"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g
+          id="Dribbble-Light-Preview"
+          transform="translate(-60.000000, -7483.000000)"
+          fill="#000000"
+        >
+          <g id="icons" transform="translate(56.000000, 160.000000)">
+            <path
+              d="M12.5857188,7333.74807 L12.5857188,7323.71968 C12.5857188,7323.40078 12.681671,7323.20964 12.8745748,7323.14824 C16.086973,7322.38863 19.3323547,7324.62982 19.6272077,7328.00596 C22.7676418,7326.67987 25.4982802,7330.67597 23.0644937,7333.07562 C22.4478012,7333.6837 21.7081701,7333.98774 20.8456002,7333.98774 L12.7526356,7333.97883 C12.6456889,7333.94317 12.5857188,7333.83225 12.5857188,7333.74807 L12.5857188,7333.74807 Z M10.4088043,7333.45294 C10.4088043,7334.17789 11.7861176,7334.1868 11.7861176,7333.45294 L11.7861176,7323.80485 C11.7861176,7322.89173 10.4088043,7322.8957 10.4088043,7323.80485 L10.4088043,7333.45294 L10.4088043,7333.45294 Z M8.26987088,7333.45294 C8.26987088,7334.16105 9.6461846,7334.18878 9.6461846,7333.45294 L9.6461846,7327.76629 C9.6461846,7326.85318 8.26987088,7326.85714 8.26987088,7327.76629 L8.26987088,7333.45294 L8.26987088,7333.45294 Z M6.13893345,7333.15782 C6.13893345,7333.88672 7.50725116,7333.89861 7.50725116,7333.15782 L7.50725116,7326.92746 C7.50725116,7326.04504 6.13893345,7326.03415 6.13893345,7326.92746 L6.13893345,7333.15782 Z M4,7332.01494 C4,7332.86566 5.3673182,7333.08057 5.3673182,7332.01494 L5.3673182,7329.34196 C5.3673182,7328.43677 4,7328.44469 4,7329.34196 L4,7332.01494 Z"
+              id="soundcloud-[#164]"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};