feat(unify): removing prism and adding infrastructure for shiki (#18514)

* feat: use shikijs for highlighting code

* add line numbers

* fix Jess's remarks

* remove last instances of prism

* fix: remove unused prism packages

* fix broken build

* remove prism

* remnove prism one last time

* remove the last piece of prism in tests

* remove prism and refactor

* restore proper fe-shared test

* use windi to color shiki

* rename theme and create test

* cosmetic fixes

* avoid the jank

* fix image imports in typescript

* restore mistake

* make the shiki theme generator

* gitignore the shiki-heme generated

* add the shiki theme generation to yarn build

* make shiki theme look good

* last colors to update

* styling fixes

* styling fixes

* styling fixes

* styling fixes

* theme

* fix relative positioning

* Update .gitignore

* Update packages/frontend-shared/src/components/ShikiHighlight.vue

* remove conflicting copy button

* dont top level await

* add a readme for theme generation

* ignore generated theme

* fix integration test in launchpad

* fix other integration test

* bring back the cypress theme

* fixing public path issue

* make e2e work

* fix yarn dev (remove the double slash)

* review theme with ryan

* make copy on click optional

* adjust viewports

* move generation of theme before vite build

Co-authored-by: Jessica Sachs <jess@jessicasachs.io>
Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

scripts/gulp/gulpfile.ts

@@ -11,7 +11,7 @@ import gulp from 'gulp'
 import { autobarrelWatcher } from './tasks/gulpAutobarrel'
 import { startCypressWatch, openCypressLaunchpad, openCypressApp, runCypressLaunchpad, wrapRunWithExit, runCypressApp, killExistingCypress } from './tasks/gulpCypress'
 import { graphqlCodegen, graphqlCodegenWatch, nexusCodegen, nexusCodegenWatch, generateFrontendSchema, syncRemoteGraphQL } from './tasks/gulpGraphql'
-import { viteApp, viteCleanApp, viteCleanLaunchpad, viteLaunchpad, viteBuildApp, viteBuildAndWatchApp, viteBuildLaunchpad, viteBuildAndWatchLaunchpad, symlinkViteProjects } from './tasks/gulpVite'
+import { viteApp, viteCleanApp, viteCleanLaunchpad, viteLaunchpad, viteBuildApp, viteBuildAndWatchApp, viteBuildLaunchpad, viteBuildAndWatchLaunchpad, symlinkViteProjects, generateShikiTheme } from './tasks/gulpVite'
 import { checkTs } from './tasks/gulpTsc'
 import { makePathMap } from './utils/makePathMap'
 import { makePackage } from './tasks/gulpMakePackage'
@@ -122,6 +122,7 @@ gulp.task('buildProd',
     syncRemoteGraphQL,
     nexusCodegen,
     graphqlCodegen,
+    generateShikiTheme,
 
     // Build the frontend(s) for production.
     gulp.parallel(

scripts/gulp/tasks/gulpVite.ts

@@ -124,6 +124,12 @@ export function viteBuildAndWatchLaunchpad () {
   })
 }
 
+export function generateShikiTheme () {
+  return spawned('vite:build-generate-shiki-theme', `yarn generate-shiki-theme`, {
+    cwd: monorepoPaths.pkgFrontendShared,
+  })
+}
+
 export function viteCleanApp () {
   return spawned('vite-clean', `yarn clean`, {
     cwd: monorepoPaths.pkgApp,