106 feature new artifact page (#118)

* Remove redundant PR type spec

* Implemented routes, added pages

* Comments

* Link to artifact pages, use artifact id

* Artifact page basic components

* Artifact page responsive layout

* Extract props and fixed prop names

* Rich Link basic in place, fine-tuning sass

* Rich links with style

* Tweak margins, fixed back button styling

* Installed photoswipe...

* Added style and is rendering, but opening in new tab

* Fixed gallery not opening

* Set thumbnail width

* Extra comments

.eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
   },
   plugins: ["@typescript-eslint"],
   root: true,
-  ignorePatterns: ["dist", "vite.config.ts"],
+  ignorePatterns: ["dist", "vite.config.ts", "src/components/Gallery.jsx"],
   rules: {
     "sort-imports": "error",
   },

.github/workflows/build.yml

@@ -3,7 +3,6 @@ name: Build Website
 # Controls when the workflow will run
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.github/workflows/reformat-and-lint.yml

@@ -2,7 +2,6 @@ name: Reformat and Lint
 
 on:
   pull_request:
-    types: [opened, synchronize, reopened]
 
   workflow_dispatch:
 

package.json

@@ -10,12 +10,17 @@
     "relint": "prettier --write . && eslint --fix ."
   },
   "dependencies": {
+    "photoswipe": "^5.3.4",
+    "photoswipe-dynamic-caption-plugin": "^1.2.7",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
     "@vitejs/plugin-legacy": "^3.0.1",

src/components/ArtifactCard.tsx

@@ -1,20 +1,26 @@
 import "../styles/ArtifactCard.sass";
-import { Artifact } from "../scripts/interfaces";
+import { ArtifactData } from "../scripts/interfaces";
+import { NavLink } from "react-router-dom";
 
 /**
- * Artifact card component. Displays high-level information about an artifact (title, subtitle, 3D graphic).
- * @param props {Artifact} artifact - Artifact object
+ * ArtifactPage card component. Displays high-level information about an artifact (title, subtitle, 3D graphic).
+ * @param {{artifact: ArtifactData}} props - Artifact to display
  * @constructor
  * @return {JSX.Element}
  */
 export default function ArtifactCard(props: {
-  artifact: Artifact;
+  artifact: ArtifactData;
 }): JSX.Element {
+  // Extract props
+  const { id, title, subtitle } = props.artifact;
+
+  // Render
   return (
-    <div className="artifact-card">
+    /* skipcq: JS-0394 */
+    <NavLink to={`/honors-portfolio/${id}`} className="artifact-card">
       <div className="artifact-card__graphic-container" />
-      <h1 className="artifact-card__title">{props.artifact.title}</h1>
-      <h3 className="artifact-card__subtitle">{props.artifact.subtitle}</h3>
-    </div>
+      <h1 className="artifact-card__title">{title}</h1>
+      <h3 className="artifact-card__subtitle">{subtitle}</h3>
+    </NavLink>
   );
 }

src/components/Gallery.d.ts

@@ -0,0 +1,3 @@
+import { ImageData } from "../scripts/interfaces";
+
+export default function Gallery(props: { images: ImageData[] }): JSX.Element;

src/components/Gallery.jsx

@@ -0,0 +1,93 @@
+// noinspection JSUnusedGlobalSymbols
+
+import "../styles/Gallery.sass";
+import { useEffect } from "react";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import "photoswipe/style.css";
+import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
+import PropTypes from "prop-types";
+import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin";
+
+/**
+ * Gallery component, displays a gallery of images
+ * @param {object} props - Images to display
+ * @constructor
+ * @returns {JSX.Element}
+ */
+export default function Gallery(props) {
+  // Extract prop data
+  const { images } = props;
+  const galleryID = images[0].artifact.replaceAll(" ", "-").toLowerCase();
+
+  // Initialize the gallery
+  useEffect(() => {
+    // Create lightbox
+    let lightbox = new PhotoSwipeLightbox({
+      gallery: `#${galleryID}`,
+      children: "a",
+      padding: { top: 30, right: 70, bottom: 30, left: 70 },
+      preloaderDelay: 0,
+      pswpModule: () => import("photoswipe"),
+    });
+
+    // Add dynamic caption plugin
+    // noinspection JSUnusedLocalSymbols
+    const _photoSwipeDynamicCaption = new PhotoSwipeDynamicCaption(lightbox, {
+      type: "auto",
+      captionContent: ".pswp-caption-content",
+    });
+
+    // Start the lightbox
+    lightbox.init();
+
+    // Cleanup
+    return () => {
+      lightbox.destroy();
+      lightbox = null;
+    };
+  }, []);
+
+  // Render
+  return (
+    <div className={"Gallery"} id={galleryID}>
+      {images.map((image) => (
+        <a
+          key={image.name}
+          href={image.image}
+          data-pswp-width={image.width}
+          data-pswp-height={image.height}
+          target={"_blank"}
+          rel={"noopener noreferrer"}
+        >
+          {/* Thumbnail */}
+          <img
+            className={"Gallery__thumbnail"}
+            src={image.thumbnail}
+            alt={image.name}
+          />
+
+          {/* Caption */}
+          <span className={"pswp-caption-content"}>
+            <h2>{image.name}</h2>
+            <br />
+            {image.description}
+          </span>
+        </a>
+      ))}
+    </div>
+  );
+}
+
+Gallery.propTypes = {
+  images: PropTypes.arrayOf(
+    PropTypes.shape({
+      artifact: PropTypes.string.isRequired,
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      description: PropTypes.string,
+      thumbnail: PropTypes.string.isRequired,
+      image: PropTypes.string.isRequired,
+    })
+  ),
+};

src/components/Quarter.tsx

@@ -1,19 +1,19 @@
 import "../styles/Quarter.sass";
-import { Artifact } from "../scripts/interfaces";
 import ArtifactCard from "./ArtifactCard";
+import { ArtifactData } from "../scripts/interfaces";
 
 /**
  * Quarter component. Groups a quarter heading with a grid of artifacts.
- * @param props {Artifact[]} filterArtifacts - Artifacts filtered by quarter
+ * @param {{filteredArtifacts: ArtifactData[]}} props - filterArtifacts - Artifacts filtered by quarter
  * @constructor
  * @return {JSX.Element}
  */
 export default function Quarter(props: {
-  filterArtifacts: Artifact[];
+  filteredArtifacts: ArtifactData[];
 }): JSX.Element {
   // Compute quarter string
   let quarter = "Fall";
-  switch (props.filterArtifacts[0].quarter) {
+  switch (props.filteredArtifacts[0].quarter) {
     case 1:
       quarter = "Winter";
       break;
@@ -27,12 +27,13 @@ export default function Quarter(props: {
       break;
   }
 
+  // Render
   return (
     <div className="quarter">
       <h1 className="quarter__name">{quarter}</h1>
       <div className="quarter__artifacts">
-        {props.filterArtifacts.map((artifact: Artifact) => (
-          <ArtifactCard key={artifact.title} artifact={artifact} />
+        {props.filteredArtifacts.map((artifact: ArtifactData) => (
+          <ArtifactCard key={artifact.id} artifact={artifact} />
         ))}
       </div>
     </div>