Merge pull request #269 from pepkit/dev

Browser compatibility
pepkit · Jan 17, 2024 · baa1713 · baa1713
2 parents 84be1b7 + 44decc0
commit baa1713
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 12 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -2,6 +2,12 @@
 
 This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html) and [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) format.
 
+## [0.11.2] - 01-17-2024
+
+### Added
+
+- Add section to `/about` discussing browser support
+
 ## [0.11.1] - 01-17-2024
 
 ### Added

diff --git a/pephub/_version.py b/pephub/_version.py
@@ -1 +1 @@
-__version__ = "0.11.1"
+__version__ = "0.11.2"
diff --git a/web/index.html b/web/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/pep-dark.svg" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
   </head>

diff --git a/web/package.json b/web/package.json
@@ -31,7 +31,6 @@
     "handsontable": "^12.3.3",
     "jwt-decode": "^3.1.2",
     "prettier": "^2.8.8",
-    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
     "react-cookie": "^4.1.1",
@@ -44,6 +43,8 @@
     "react-papaparse": "^4.1.0",
     "react-router-dom": "^6.9.0",
     "react-select": "^5.7.2",
+    "rehype-highlight": "^7.0.0",
+    "rehype-slug": "^6.0.0",
     "remark": "^14.0.3",
     "remark-breaks": "^3.0.3",
     "remark-gfm": "^3.0.1",
@@ -56,7 +57,6 @@
   "devDependencies": {
     "@mdx-js/rollup": "^3.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/prismjs": "^1.26.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.0.0",

diff --git a/web/src/components/markdown/render.tsx b/web/src/components/markdown/render.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';

diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -8,8 +8,6 @@ import 'handsontable/dist/handsontable.full.min.css';
 // Language
 // handsontable stuff
 import { registerAllModules } from 'handsontable/registry';
-import * as Prism from 'prismjs';
-import 'prismjs/components/prism-python';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
@@ -29,8 +27,6 @@ import { EidoValidator } from './pages/Validator';
 
 registerAllModules();
 
-Prism.highlightAll();
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

diff --git a/web/src/pages/About.tsx b/web/src/pages/About.tsx
@@ -1,10 +1,7 @@
 import { MDXProvider } from '@mdx-js/react';
-import * as Prism from 'prismjs';
 
 import AboutContent from './about.mdx';
 
-Prism.highlightAll();
-
 export const About = () => {
   return (
     <MDXProvider>

diff --git a/web/src/pages/about.mdx b/web/src/pages/about.mdx
@@ -119,4 +119,11 @@ import { PageLayout } from '../components/layout/page-layout';
 
     You can find more information about pephubclient of github page. [https://github.com/pepkit/pephubclient](https://github.com/pepkit/pephubclient)
 
+    ### Browser compatibility
+    We use [browserslist](https://github.com/browserslist/browserslist) to maintain a list of browsers that we support. Currently, PEPhub supports the `defaults` configuration:
+    ```
+    > 0.5%, last 2 versions, Firefox ESR, not dead
+    ```
+    For a comprehensive list of browser compatibility, please visit the [browserslist site](https://browsersl.ist/#q=defaults).
+
 </PageLayout>
diff --git a/web/vite.config.ts b/web/vite.config.ts
@@ -1,11 +1,18 @@
 import mdx from '@mdx-js/rollup';
 import react from '@vitejs/plugin-react-swc';
 import browserslistToEsbuild from 'browserslist-to-esbuild';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeSlug from 'rehype-slug';
 import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [mdx(), react()],
+  plugins: [
+    mdx({
+      rehypePlugins: [rehypeSlug, rehypeHighlight],
+    }),
+    react(),
+  ],
   build: {
     target: browserslistToEsbuild(),
   },