Commit 09c74d02 authored by Wohlgemuth, Jason's avatar Wohlgemuth, Jason
Browse files

feat: Replace Graphic with Carousel

parent 0d7daf1c

package-lock.json

+100 −2
Original line number Diff line number Diff line
@@ -14,13 +14,14 @@ 
        "@radix-ui/react-dialog": "^1.1.2",

        "@radix-ui/react-label": "^2.1.0",

        "@radix-ui/react-navigation-menu": "^1.2.5",

        "@radix-ui/react-slot": "^1.1.0",

        "@radix-ui/react-slot": "^1.2.3",

        "astro": "5.3.0",

        "astro-capo": "^0.0.1",

        "astro-lighthouse": "^0.1.3",

        "class-variance-authority": "^0.7.0",

        "clsx": "^2.1.1",

        "cmdk": "^1.0.0",

        "embla-carousel-react": "^8.6.0",

        "fuse.js": "^7.0.0",

        "lucide-react": "^0.441.0",

        "qrcodejs": "github:danielgjackson/qrcodejs",
@@ -1871,6 +1872,24 @@ 
        }

      }

    },

    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {

      "version": "1.1.2",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",

      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",

      "license": "MIT",

      "dependencies": {

        "@radix-ui/react-compose-refs": "1.1.1"

      },

      "peerDependencies": {

        "@types/react": "*",

        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"

      },

      "peerDependenciesMeta": {

        "@types/react": {

          "optional": true

        }

      }

    },

    "node_modules/@radix-ui/react-compose-refs": {

      "version": "1.1.1",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
@@ -1937,6 +1956,24 @@ 
        }

      }

    },

    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {

      "version": "1.1.2",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",

      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",

      "license": "MIT",

      "dependencies": {

        "@radix-ui/react-compose-refs": "1.1.1"

      },

      "peerDependencies": {

        "@types/react": "*",

        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"

      },

      "peerDependenciesMeta": {

        "@types/react": {

          "optional": true

        }

      }

    },

    "node_modules/@radix-ui/react-direction": {

      "version": "1.1.0",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -2167,7 +2204,7 @@ 
        }

      }

    },

    "node_modules/@radix-ui/react-slot": {

    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {

      "version": "1.1.2",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",

      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
@@ -2185,6 +2222,39 @@ 
        }

      }

    },

    "node_modules/@radix-ui/react-slot": {

      "version": "1.2.3",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",

      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",

      "license": "MIT",

      "dependencies": {

        "@radix-ui/react-compose-refs": "1.1.2"

      },

      "peerDependencies": {

        "@types/react": "*",

        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"

      },

      "peerDependenciesMeta": {

        "@types/react": {

          "optional": true

        }

      }

    },

    "node_modules/@radix-ui/react-slot/node_modules/@radix-ui/react-compose-refs": {

      "version": "1.1.2",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",

      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",

      "license": "MIT",

      "peerDependencies": {

        "@types/react": "*",

        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"

      },

      "peerDependenciesMeta": {

        "@types/react": {

          "optional": true

        }

      }

    },

    "node_modules/@radix-ui/react-use-callback-ref": {

      "version": "1.1.0",

      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -4749,6 +4819,34 @@ 
      "integrity": "sha512-P6+XzIkfndgsrjROJWfSvVEgNHtPgbhVyTkwLjUM2HU/h7pZRORgaTlHqfAikqxKmdJMLW8fftrdGWbd/Ds0FA==",

      "license": "ISC"

    },

    "node_modules/embla-carousel": {

      "version": "8.6.0",

      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",

      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",

      "license": "MIT"

    },

    "node_modules/embla-carousel-react": {

      "version": "8.6.0",

      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",

      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",

      "license": "MIT",

      "dependencies": {

        "embla-carousel": "8.6.0",

        "embla-carousel-reactive-utils": "8.6.0"

      },

      "peerDependencies": {

        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"

      }

    },

    "node_modules/embla-carousel-reactive-utils": {

      "version": "8.6.0",

      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",

      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",

      "license": "MIT",

      "peerDependencies": {

        "embla-carousel": "8.6.0"

      }

    },

    "node_modules/emoji-regex": {

      "version": "10.4.0",

      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",

package.json

+2 −1
Original line number Diff line number Diff line
@@ -28,13 +28,14 @@ 
    "@radix-ui/react-dialog": "^1.1.2",

    "@radix-ui/react-label": "^2.1.0",

    "@radix-ui/react-navigation-menu": "^1.2.5",

    "@radix-ui/react-slot": "^1.1.0",

    "@radix-ui/react-slot": "^1.2.3",

    "astro": "5.3.0",

    "astro-capo": "^0.0.1",

    "astro-lighthouse": "^0.1.3",

    "class-variance-authority": "^0.7.0",

    "clsx": "^2.1.1",

    "cmdk": "^1.0.0",

    "embla-carousel-react": "^8.6.0",

    "fuse.js": "^7.0.0",

    "lucide-react": "^0.441.0",

    "qrcodejs": "github:danielgjackson/qrcodejs",

src/components/Carousel.tsx

0 → 100644
+68 −0
Original line number Diff line number Diff line 
import {

    Carousel,

    CarouselContent,

    CarouselItem,

    CarouselNext,

    CarouselPrevious,

} from '@/components/ui/carousel';

import { PiListMagnifyingGlassBold } from 'react-icons/pi';

import { TbTextCaption } from 'react-icons/tb';



const Caption = ({ text }) => {

    return (

        <div className="graphic-caption">

            <span>

                <TbTextCaption />

                {' '}

                {text}

            </span>

        </div>

    );

};

const GraphicCornerLabel = () => {

    return (

        <div className="graphic-corner-label" title="Enlarge image">

            <PiListMagnifyingGlassBold

                style={{

                    color: '#FFF',

                    fontSize: '1.2rem',

                    margin: '3px 0px 0px 3px',

                }}

            />

        </div>

    );

};

const Image = ({ caption, src }) => {

    return <img src={src} alt={caption} title={caption} />;

};

const InteractiveCarousel = ({ id, images }) => {

    const options = {

        loop: true

    };

    return (

        <Carousel opts={options}>

            <CarouselContent>

                {

                    images.map(({ caption, contentUrl }, index : number) => (

                        <CarouselItem key={index}>

                            <div className={`graphic-wrapper graphic-wrapper-${index}`}>

                                {

                                    index === 0 && <GraphicCornerLabel />

                                }

                                <Image src={`/data/${id}/${contentUrl}`} caption={caption} />

                                {

                                    caption ? <Caption text={caption} /> : <Spacer height={20} />

                                }

                            </div>

                        </CarouselItem>

                    ))

                }

            </CarouselContent>

            <CarouselPrevious className="carousel-previous" />

            <CarouselNext className="carousel-next" />

        </Carousel>

    );

};

const Spacer = ({ height }) => <div style={{ height: `${height}px` }}></div>;



export default InteractiveCarousel;

src/components/Graphic.astro

deleted100644 → 0
+0 −48
Original line number Diff line number Diff line 
---

import type { ImageMetadata } from "astro";

import { Image } from "astro:assets";

import { TbTextCaption } from "react-icons/tb";

import Lightbox from "../components/Lightbox.astro";

import GraphicCornerLabel from "./GraphicCornerLabel.astro";



const { path, data } = Astro.props;

const { contentUrl, caption } = data;

const DEFAULT_IMAGE_PATH = "/src/assets/default.png";

const images = import.meta.glob<{ default: ImageMetadata }>("src/**/*.{png,jpg,jpeg}", { import: 'default' });

const re = new RegExp(`/src/data/${path}/${contentUrl}`);

const maybeImagePath = Object.keys(images).find((key) => re.test(key));

const src = images[maybeImagePath ? maybeImagePath : DEFAULT_IMAGE_PATH]();

---



<div class="graphic-wrapper">

    <GraphicCornerLabel />

    <Image src={src} title={caption} alt={caption} width={380} height={200} />

    {

        caption && (

            <div class="graphic-caption">

                <span>

                    <TbTextCaption /> {caption}

                </span>

            </div>

        )

    }

</div>

<Lightbox src={src} title={caption} caption={caption} />

<script>

    const lightbox = document.getElementById("lightbox-overlay");

    const graphic = document.getElementsByClassName("graphic-wrapper")[0];

    const show = () => (lightbox.style.visibility = "visible");

    graphic.addEventListener("click", show);

</script>

<style>

    .graphic-wrapper {

        cursor: pointer;

        margin-bottom: 0px;

        & > img {

            & + div {

                color: #777;

                margin-bottom: 30px;

            }

        }

    }

</style>

src/components/GraphicCornerLabel.astro

deleted100644 → 0
+0 −22
Original line number Diff line number Diff line 
---

import { PiListMagnifyingGlassBold } from "react-icons/pi";

---



<div class="graphic-corner-label">

    <PiListMagnifyingGlassBold

        style={{

            color: "#FFF",

            fontSize: "1.2rem",

            margin: "3px 0px 0px 3px",

        }}

    />

</div>

<style>

    .graphic-corner-label {

        aspect-ratio: 1;

        background: linear-gradient(45deg, var(--secondary), var(--primary));

        clip-path: polygon(0 0, 100% 0, 0 100%);

        position: absolute;

        width: 50px;

    }

</style>
 
 No newline at end of file