migrate documentation to v2 (#2)

Author: LEONL0VE

README.md

@@ -1,6 +1,6 @@
-# SuperProvenanceWidgets (SW) Homepage
+# ProvenanceWidgets Documentation
 
-The homepage for SuperProvenanceWidgets (SW), the React-based second generation of ProvenanceWidgets. This repository contains its documentation and live playground.
+The homepage and documentation for ProvenanceWidgets. Version 2.0 integrates SuperProvenanceWidgets (SW), an extension for tracking and visualizing analytic provenance across multiple UI controls. This repository also contains the SW live playground.
 
 Operating Systems: Windows 10 or newer, MacOSX 11 or newer, Ubuntu 20.04.1 LTS or newer
 

docs/index.mdx

@@ -6,7 +6,7 @@ title: Introduction
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-SuperProvenanceWidgets (SW) is the React-based second generation of ProvenanceWidgets, a JavaScript library of UI control elements that track and dynamically overlay a user's analytic provenance ***in situ*** and ***out of the box***. SW preserves the frequency and recency overlays introduced by PW and extends them with Aggregate and Temporal views, including a shared provenance view that connects the interaction histories of multiple controls in one interface.
+ProvenanceWidgets is a JavaScript library of UI control elements that track and dynamically overlay a user's analytic provenance ***in situ*** and ***out of the box***. Version 2.0 integrates SuperProvenanceWidgets (SW), an extension that preserves PW's frequency and recency overlays while adding Aggregate and Temporal views, including a shared provenance view that connects the interaction histories of multiple controls in one interface.
 
 ## Getting Started
 

docusaurus.config.ts

@@ -97,6 +97,8 @@ const config: Config = {
       "@docusaurus/plugin-client-redirects",
       {
         redirects: [
+          { from: "/sw/showcase", to: "/showcase/" },
+          { from: "/pw/showcase", to: "/showcase/" },
           { from: "/docs", to: "/docs/pw/" },
           {
             from: "/docs/category/widgets",
@@ -194,28 +196,25 @@ const config: Config = {
           ],
         },
         {
-          title: "Contacts",
+          title: "Collaborators",
           items: [
             {
-              label: "Arpit Narechania",
-              href: "https://arpitnarechania.github.io/",
+              label: "Georgia Tech",
+              href: "https://www.gatech.edu/",
             },
             {
-              label: "Kaustubh Odak",
-              href: "https://kaustubhodak.me/",
+              label: "ETH Zürich",
+              href: "https://ethz.ch/",
             },
             {
-              label: "Mennatallah El-Assady",
-              href: "https://el-assady.com/",
-            },
-            {
-              label: "Alex Endert",
-              href: "https://va.gatech.edu/endert/",
+              label: "AWS",
+              href: "https://aws.amazon.com/",
             },
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} ProvenanceWidgets`,
+      copyright:
+        'Copyright 2026 <a href="https://datavisards.com/">DataVisards Lab</a> at <a href="https://hkust.edu.hk/">HKUST</a>. Contact <a href="https://narechania.com/">Arpit Narechania</a> about anything.',
     },
     prism: {
       additionalLanguages: ["bash", "json", "typescript"],

src/components/SiteVersionNavbarLink/index.tsx

@@ -7,7 +7,6 @@ import {
 import {useLocation} from '@docusaurus/router';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {
-  getShowcasePath,
   getSiteVersionFromPath,
   type SiteVersionName,
 } from '@site/src/utils/siteVersion';
@@ -34,7 +33,7 @@ export default function SiteVersionNavbarLink({
   const version =
     versions.find(candidate => candidate.name === versionName) ?? versions[0];
   const mainDoc = version.docs.find(doc => doc.id === version.mainDocId)!;
-  const to = target === 'docs' ? mainDoc.path : getShowcasePath(versionName);
+  const to = target === 'docs' ? mainDoc.path : '/showcase/';
 
   return (
     <DefaultNavbarItem
@@ -43,7 +42,7 @@ export default function SiteVersionNavbarLink({
       isActive={() =>
         target === 'docs'
           ? /^\/docs\/(?:sw|pw)(?:\/|$)/.test(pathname)
-          : /^(?:\/sw|\/pw)\/showcase(?:\/|$)/.test(pathname)
+          : /^\/showcase(?:\/|$)/.test(pathname)
       }
     />
   );

src/components/showcase/ShowcasePage.tsx

@@ -6,8 +6,6 @@ import React from "react";
 
 import styles from "./showcase.module.css";
 
-type ShowcaseVersion = "2.0" | "1.0";
-
 type Project = {
   title: string;
   description: string;
@@ -16,10 +14,9 @@ type Project = {
   route: string;
 };
 
-const swShowcaseBaseUrl: string = "";
-const pwShowcaseBaseUrl = "https://provenancewidgets.github.io/showcase/#";
+const showcaseBaseUrl = "https://provenancewidgets.github.io/showcase/#";
 
-const swProjects: Project[] = [
+const projects: Project[] = [
   {
     title: "Playground",
     description:
@@ -86,99 +83,14 @@ const swProjects: Project[] = [
   },
 ];
 
-const pwProjects: Project[] = [
-  {
-    title: "Playground",
-    description: "A playground to test out all widgets available in the library.",
-    image: "/img/playground.png",
-    imageAlt: "ProvenanceWidgets playground",
-    route: "/playground",
-  },
-  {
-    title: "Scented Widgets",
-    description:
-      "A showcase replicating Scented Widgets for facilitating navigation in information spaces.",
-    image: "/img/scented-widgets.png",
-    imageAlt: "ProvenanceWidgets Scented Widgets showcase",
-    route: "/scented-widgets",
-  },
-  {
-    title: "Phosphor Objects",
-    description:
-      "A showcase replicating Phosphor objects by limiting provenance to the last two interactions.",
-    image: "/img/phosphor-objects.png",
-    imageAlt: "ProvenanceWidgets Phosphor Objects showcase",
-    route: "/phosphor-objects",
-  },
-  {
-    title: "Data Distribution",
-    description:
-      "A showcase visualizing attribute distributions using different widgets in the library.",
-    image: "/img/data-distribution.png",
-    imageAlt: "ProvenanceWidgets Data Distribution showcase",
-    route: "/data-distribution",
-  },
-  {
-    title: "Vega Integration",
-    description:
-      "A showcase demonstrating the integration of ProvenanceWidgets with Vega signals.",
-    image: "/img/vega-example.png",
-    imageAlt: "ProvenanceWidgets Vega Integration showcase",
-    route: "/vega-example",
-  },
-  {
-    title: "Dynamic Query Widgets",
-    description:
-      "A showcase replicating dynamic query widgets for the HomeFinder application.",
-    image: "/img/dynamic-query-widgets-homefinder.png",
-    imageAlt: "ProvenanceWidgets Dynamic Query Widgets showcase",
-    route: "/dynamic-query-widgets-homefinder",
-  },
-  {
-    title: "Widgets to Visualization one-way",
-    description:
-      "A showcase using ProvenanceWidgets to interact with a visualization.",
-    image: "/img/widgets-to-vis-one-way.png",
-    imageAlt: "ProvenanceWidgets Widgets to Visualization showcase",
-    route: "/widgets-to-vis-one-way",
-  },
-  {
-    title: "Visualization to Widgets one-way",
-    description:
-      "A showcase updating widgets through interactions with a visualization.",
-    image: "/img/vis-to-widgets-one-way.png",
-    imageAlt: "ProvenanceWidgets Visualization to Widgets showcase",
-    route: "/vis-to-widgets-one-way",
-  },
-];
-
-const showcases = {
-  "2.0": {
-    description:
-      "Demonstrations of the SuperProvenanceWidgets library in action.",
-    baseUrl: swShowcaseBaseUrl,
-    projects: swProjects,
-  },
-  "1.0": {
-    description: "Demonstrations of the ProvenanceWidgets library in action.",
-    baseUrl: pwShowcaseBaseUrl,
-    projects: pwProjects,
-  },
-} satisfies Record<
-  ShowcaseVersion,
-  { description: string; baseUrl: string; projects: Project[] }
->;
+const description = "See the library in action.";
 
 function ProjectCard({
   project,
-  baseUrl,
 }: {
   project: Project;
-  baseUrl: string;
 }) {
-  const href = baseUrl
-    ? `${baseUrl.replace(/\/$/, "")}${project.route}`
-    : undefined;
+  const href = `${showcaseBaseUrl}${project.route}`;
   const content = (
     <>
       <div className="card__image">
@@ -189,21 +101,12 @@ function ProjectCard({
           <Heading as="h3" className={styles.titleOverride}>
             {project.title}
           </Heading>
-          {!href && <span className={styles.status}>Coming soon</span>}
         </div>
         <p className={styles.paragraphReset}>{project.description}</p>
       </div>
     </>
   );
 
-  if (!href) {
-    return (
-      <article className={clsx("card h-full", styles.pendingCard)}>
-        {content}
-      </article>
-    );
-  }
-
   return (
     <Link
       className={clsx("card h-full", styles.linkReset)}
@@ -214,31 +117,25 @@ function ProjectCard({
   );
 }
 
-export function ShowcasePage({
-  version,
-}: {
-  version: ShowcaseVersion;
-}): JSX.Element {
-  const activeShowcase = showcases[version];
-
+export function ShowcasePage(): JSX.Element {
   return (
     <Layout
-      title={`Showcase ${version}`}
-      description={activeShowcase.description}
+      title="Showcase"
+      description={description}
       wrapperClassName={styles.layout}
     >
       <main className="container padding-top--lg padding-bottom--lg">
         <header className={styles.pageHeader}>
           <Heading as="h1" className="hero__title">
             Showcase
           </Heading>
-          <p className="hero__subtitle">{activeShowcase.description}</p>
+          <p className="hero__subtitle">{description}</p>
         </header>
 
         <div className="grid">
-          {activeShowcase.projects.map(project => (
+          {projects.map(project => (
             <div className="col col--3 margin-bottom--lg" key={project.title}>
-              <ProjectCard project={project} baseUrl={activeShowcase.baseUrl} />
+              <ProjectCard project={project} />
             </div>
           ))}
         </div>

src/components/showcase/showcase.module.css

@@ -29,8 +29,7 @@
   transform: translateY(-2px);
 }
 
-.linkReset :global(.card__image),
-.pendingCard :global(.card__image) {
+.linkReset :global(.card__image) {
   display: flex;
   height: 10.5rem;
   overflow: hidden;
@@ -39,8 +38,7 @@
   background: #fff;
 }
 
-.linkReset :global(.card__image img),
-.pendingCard :global(.card__image img) {
+.linkReset :global(.card__image img) {
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -65,19 +63,3 @@
   font-size: 0.88rem;
   line-height: 1.65;
 }
-
-.pendingCard {
-  opacity: 0.82;
-}
-
-.status {
-  flex: 0 0 auto;
-  padding: 0.2rem 0.42rem;
-  border-radius: 999px;
-  color: var(--ifm-color-emphasis-700);
-  background: var(--ifm-color-emphasis-200);
-  font-size: 0.64rem;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}

src/pages/index.module.css

@@ -59,7 +59,7 @@
 .heroTitle {
   margin-bottom: 0.85rem;
   color: #1d2733;
-  font-size: clamp(3rem, 7vw, 5.5rem);
+  font-size: clamp(2.4rem, 4vw, 3.5rem);
   letter-spacing: -0.055em;
   line-height: 0.98;
 }
@@ -407,7 +407,7 @@
 
 @media screen and (max-width: 560px) {
   .heroTitle {
-    font-size: 2.65rem;
+    font-size: 2.15rem;
     line-height: 1.02;
   }
 

src/pages/index.tsx

@@ -39,7 +39,7 @@ const papers: Paper[] = [
     links: [
       {
         label: "PDF",
-        href: "https://narechania.com/docs/publications/provenance_widgets_2024.pdf",
+        href: "https://datavisards.com/assets/pdfs/publications/2025-paper-provenance-widgets.pdf",
         kind: "primary",
       },
       {
@@ -76,11 +76,11 @@ const papers: Paper[] = [
     imageAlt:
       "Overview of SuperProvenanceWidgets showing aggregate and temporal provenance within and across controls",
     summary:
-      "SuperProvenanceWidgets extends the library from individual controls to the interface as a whole. Its cross-widget provenance view summarizes which controls were used, how often, when, and in what sequence - supporting workflow auditing and sharing, reflection on exploration bias, and interface personalization.",
+      "SuperProvenanceWidgets extends ProvenanceWidgets from individual controls to the interface as a whole. Its cross-widget provenance view summarizes which controls were used, how often, when, and in what sequence - supporting workflow auditing and sharing, reflection on exploration bias, and interface personalization.",
     links: [
       {
         label: "PDF",
-        href: "https://narechania.com/docs/publications/superprovenancewidgets_chi_2026.pdf",
+        href: "https://datavisards.com/assets/pdfs/publications/2026-paper-super-provenance-widgets.pdf",
         kind: "primary",
       },
       {

src/pages/pw/index.module.css

@@ -4,6 +4,11 @@
   text-align: center;
 }
 
+.heroTitle {
+  font-size: clamp(2.4rem, 4vw, 3.5rem);
+  line-height: 1.05;
+}
+
 .citationLink {
   display: inline-flex;
   align-items: center;
@@ -29,3 +34,9 @@
     aspect-ratio: 5 / 3;
   }
 }
+
+@media screen and (max-width: 560px) {
+  .heroTitle {
+    font-size: 2.15rem;
+  }
+}

src/pages/pw/index.tsx

@@ -33,10 +33,16 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className="hero__title hidden sm:block">
+        <Heading
+          as="h1"
+          className={clsx("hero__title hidden sm:block", styles.heroTitle)}
+        >
           {siteConfig.title}
         </Heading>
-        <Heading as="h1" className="text-5xl block sm:hidden">
+        <Heading
+          as="h1"
+          className={clsx("block sm:hidden", styles.heroTitle)}
+        >
           Provenance Widgets
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>