feat: safari compat

Author: kausko

docs/index.mdx

@@ -16,12 +16,6 @@ ProvenanceWidgets is a Javascript library of UI control elements that track and
 - [Node.js](https://nodejs.org/en/download/) version 20.0 or above and npm version 10.0 or above:
   - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
 
-:::warning
-
-ProvenanceWidgets is not fully compatible with Safari. We recommend using a chromium-based browser or Firefox for the best experience.
-
-:::
-
 ## Quick Start
 
 For getting started quickly, clone one of our starter code repositories:

docusaurus.config.ts

@@ -1,43 +1,49 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
 
 const config: Config = {
-  title: 'ProvenanceWidgets',
-  tagline: 'A JavaScript Library of UI Controls to Track and Dynamically Overlay Analytic Provenance',
-  favicon: 'img/favicon.ico',
+  title: "ProvenanceWidgets",
+  tagline:
+    "A JavaScript Library of UI Controls to Track and Dynamically Overlay Analytic Provenance",
+  favicon: "img/favicon.ico",
   customFields: {
-    authors: ['Arpit Narechania', 'Kaustubh Odak', 'Mennatallah El-Assady', 'Alex Endert'],
-    institutes: ['Georgia Institute of Technology', 'ETH Zürich'],
+    authors: [
+      "Arpit Narechania",
+      "Kaustubh Odak",
+      "Mennatallah El-Assady",
+      "Alex Endert",
+    ],
+    institutes: ["Georgia Institute of Technology", "ETH Zürich"],
   },
   // Set the production url of your site here
-  url: 'https://provenancewidgets.github.io/',
+  url: "https://provenancewidgets.github.io/",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: "/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'ProvenanceWidgets', // Usually your GitHub org/user name.
-  projectName: 'ProvenanceWidgets', // Usually your repo name.
+  organizationName: "ProvenanceWidgets", // Usually your GitHub org/user name.
+  projectName: "ProvenanceWidgets", // Usually your repo name.
 
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+    defaultLocale: "en",
+    locales: ["en"],
   },
 
   presets: [
     [
-      'classic',
+      "classic",
       {
         docs: {
-          sidebarPath: './sidebars.ts',
+          sidebarPath: "./sidebars.ts",
         },
         blog: {
           showReadingTime: false,
@@ -46,117 +52,108 @@ const config: Config = {
             xslt: true,
           },
           // Useful options to enforce blogging best practices
-          onInlineTags: 'warn',
-          onInlineAuthors: 'warn',
-          onUntruncatedBlogPosts: 'warn',
-          routeBasePath: '/show',
+          onInlineTags: "warn",
+          onInlineAuthors: "warn",
+          onUntruncatedBlogPosts: "warn",
+          routeBasePath: "/show",
           blogSidebarCount: 0,
-          showLastUpdateTime: false
+          showLastUpdateTime: false,
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: "./src/css/custom.css",
         },
       } satisfies Preset.Options,
     ],
   ],
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/pw-social-card.png',
+    image: "img/pw-social-card.png",
     navbar: {
-      title: 'ProvenanceWidgets',
+      title: "ProvenanceWidgets",
       logo: {
-        alt: 'ProvenanceWidgets Logo',
-        src: 'img/logo-light.svg',
-        srcDark: 'img/logo-dark.svg',
+        alt: "ProvenanceWidgets Logo",
+        src: "img/logo-light.svg",
+        srcDark: "img/logo-dark.svg",
       },
       items: [
         {
-          type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
-          position: 'left',
-          label: 'Docs',
+          type: "docSidebar",
+          sidebarId: "tutorialSidebar",
+          position: "left",
+          label: "Docs",
         },
         {
-          to: 'docs/showcase/', 
-          label: 'Showcase', 
-          position: 'left'
+          to: "docs/showcase/",
+          label: "Showcase",
+          position: "left",
         },
         {
           href: `https://github.com/ProvenanceWidgets/ProvenanceWidgets`,
-          label: 'GitHub',
-          position: 'right',
+          label: "GitHub",
+          position: "right",
         },
       ],
     },
     footer: {
-      style: 'dark',
+      style: "dark",
       links: [
         {
-          title: 'Links',
+          title: "Links",
           items: [
             {
-              label: 'GitHub',
-              href: 'https://github.com/ProvenanceWidgets/ProvenanceWidgets',
+              label: "GitHub",
+              href: "https://github.com/ProvenanceWidgets/ProvenanceWidgets",
             },
             {
-              label: 'arXiv Preprint',
-              href: 'https://arxiv.org/abs/2407.17431',
+              label: "arXiv Preprint",
+              href: "https://arxiv.org/abs/2407.17431",
             },
             {
-              label: 'Supplemental Material (VIS 2024)',
-              href: 'https://github.com/ProvenanceWidgets/Supplemental-Material'
-            }
+              label: "Supplemental Material (VIS 2024)",
+              href: "https://github.com/ProvenanceWidgets/Supplemental-Material",
+            },
           ],
         },
         {
-          title: 'Contacts',
+          title: "Contacts",
           items: [
             {
-              label: 'Arpit Narechania',
-              href: 'https://arpitnarechania.github.io/'
+              label: "Arpit Narechania",
+              href: "https://arpitnarechania.github.io/",
             },
             {
-              label: 'Kaustubh Odak',
-              href: 'https://kaustubhodak.me/'
+              label: "Kaustubh Odak",
+              href: "https://kaustubhodak.me/",
             },
             {
-              label: 'Mennatallah El-Assady',
-              href: 'https://el-assady.com/'
+              label: "Mennatallah El-Assady",
+              href: "https://el-assady.com/",
             },
             {
-              label: 'Alex Endert',
-              href: 'https://va.gatech.edu/endert/'
-            }
+              label: "Alex Endert",
+              href: "https://va.gatech.edu/endert/",
+            },
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} ProvenanceWidgets`
+      copyright: `Copyright © ${new Date().getFullYear()} ProvenanceWidgets`,
     },
     prism: {
-      additionalLanguages: ['bash', 'json', 'typescript'],
+      additionalLanguages: ["bash", "json", "typescript"],
       theme: prismThemes.oneLight,
-      darkTheme: prismThemes.oceanicNext
+      darkTheme: prismThemes.oceanicNext,
     },
     colorMode: {
       respectPrefersColorScheme: true,
     },
-    announcementBar: {
-      content: '⚠️ ProvenanceWidgets is not yet fully compatible with Safari. We recommend using a chromium-based browser or Firefox for the best experience.',
-      backgroundColor: 'var(--ifm-color-danger-darker)',
-      textColor: 'white'
-    }
   } satisfies Preset.ThemeConfig,
 
-  clientModules: [
-    require.resolve('./src/pw.js')
-  ],
+  clientModules: [require.resolve("./src/pw.js")],
 
-  themes: ['@docusaurus/theme-live-codeblock'],
+  themes: ["@docusaurus/theme-live-codeblock"],
 
-  stylesheets: [
-    '/styles/styles.css'
-  ],
+  stylesheets: ["/styles/styles.css"],
 };
 
 export default config;

package-lock.json

@@ -22,7 +22,7 @@
     "@microlink/react-json-view": "^1.23.1",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
-    "provenance-widgets": "^0.0.1",
+    "provenance-widgets": "^1.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },