feat: localize asciinema recordings, use custom asciinema theme (#932)

.dockerignore

@@ -1,4 +1,4 @@
-./client/node_modules
-./server/dist
-./server/programs
-./server/tmp
+./client/node_modules/
+./server/dist/
+./server/programs/
+./server/tmp/

client/index.html

@@ -30,6 +30,7 @@
         <meta name="apple-mobile-web-app-title" content="Pacstall" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="darkreader-lock" />
         <link rel="shortcut icon" type="image/jpg" href="/favicon.ico" />
         <link rel="image_src" href="/pacstall.svg" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

client/index.production.html

@@ -23,6 +23,7 @@
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
         <meta name="next-head-count" content="20" />
         <link rel="stylesheet" href="/styles/global.css" />
+        <meta name="darkreader-lock" />
         <script>
             const IS_TRACKING_ALLOWED = navigator.doNotTrack !== '1'
 

client/package.json

@@ -26,6 +26,7 @@
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
         "@vitejs/plugin-react": "^4.3.1",
+        "asciinema-player": "^3.8.0",
         "axios": "^1.7.2",
         "framer-motion": "^10.18.0",
         "i18next": "^22.5.1",

client/public/styles/asciicast.css

@@ -0,0 +1,33 @@
+/* Dark theme */
+.asciinema-player-theme-sparkle {
+    --term-color-foreground: #ffffff;
+    --term-color-background: #1a202c;
+
+    --term-color-0: #ffffff;
+    --term-color-1: #f56565;
+    --term-color-2: #9ae6b4;
+    --term-color-3: #f6e05e;
+    --term-color-4: #63b3ed;
+    --term-color-5: #b794f4;
+    --term-color-6: #76e4f7;
+    --term-color-7: #171923;
+}
+
+/* Light theme */
+.asciinema-player-theme-glitter {
+    /* Foreground (default text) color */
+    --term-color-foreground: #1a202c;
+
+    /* Background color */
+    --term-color-background: #ffffff;
+
+    /* Palette of 16 standard ANSI colors */
+    --term-color-0: #171923;
+    --term-color-1: #f56565;
+    --term-color-2: #9ae6b4;
+    --term-color-3: #f6e05e;
+    --term-color-4: #63b3ed;
+    --term-color-5: #b794f4;
+    --term-color-6: #76e4f7;
+    --term-color-7: #ffffff;
+}

client/public/styles/global.css

@@ -5,6 +5,7 @@
 /* Runes */
 @import url('https://fonts.cdnfonts.com/css/catrinity');
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@100;200;300;400;500;600;700;800&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
 
 button:focus,
 a:focus {

client/src/components/AsciinemaFrame.tsx

@@ -1,30 +1,49 @@
-import { FC } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import 'asciinema-player/dist/bundle/asciinema-player.css'
+import '../../public/styles/asciicast.css'
 
-const AsciinemaFrame: FC<{
-    id: string
-    autoplay?: boolean
-    loop?: boolean
-    dark?: boolean
-}> = ({ id, autoplay, loop, dark }) => (
-    <iframe
-        src={`https://asciinema.org/a/${id}/iframe?theme=${dark ? 'solarized-light' : 'monokai'}&autoplay=${
-            autoplay ? 1 : 0
-        }&loop=${loop ? 1 : 0}&speed=0.75`}
-        id={`asciicast-iframe-${id}`}
-        name={`asciicast-iframe-${id}`}
-        scrolling='no'
-        data-allowfullscreen='true'
-        style={{
-            overflow: 'hidden',
-            margin: '0px',
-            border: '0px',
-            display: 'inline-block',
-            width: '100%',
-            float: 'none',
-            visibility: 'visible',
-            aspectRatio: '16 / 9',
-        }}
-    ></iframe>
-)
+type AsciinemaPlayerProps = {
+    src: string
+    // START asciinemaOptions
+    cols?: string
+    rows?: string
+    controls?: boolean | string
+    autoPlay?: boolean
+    preload?: boolean
+    loop?: boolean | number
+    startAt?: number | string
+    speed?: number
+    idleTimeLimit?: number
+    theme?: string
+    poster?: string
+    fit?: string
+    terminalfontSize?: string
+    terminalFontFamily?: string
+    // END asciinemaOptions
+}
+
+function AsciinemaFrame({
+    src,
+    speed = 0.75,
+    controls = false,
+    ...asciinemaOptions
+}: AsciinemaPlayerProps) {
+    const ref = useRef<HTMLDivElement>(null)
+    const [player, setPlayer] = useState<typeof import('asciinema-player')>()
+    useEffect(() => {
+        import('asciinema-player').then(p => {
+            setPlayer(p)
+        })
+    }, [])
+    useEffect(() => {
+        const currentRef = ref.current
+        const instance = player?.create(src, currentRef, asciinemaOptions)
+        return () => {
+            instance?.dispose()
+        }
+    }, [src, player, asciinemaOptions])
+
+    return <div ref={ref} />
+}
 
 export default AsciinemaFrame

client/src/components/asciinema.d.ts

@@ -0,0 +1,23 @@
+declare module 'asciinema-player' {
+    export function create(
+        src: string,
+        element: HTMLElement | null,
+        // START asciinemaOptions
+        opts: {
+            cols?: string
+            rows?: string
+            controls?: boolean | string
+            autoPlay?: boolean
+            preload?: boolean
+            loop?: boolean | number
+            startAt?: number | string
+            speed?: number
+            idleTimeLimit?: number
+            theme?: string
+            poster?: string
+            fit?: string
+            terminalfontSize?: string
+            terminalFontFamily?: string
+        },
+    )
+}

client/src/pages/Home.tsx

@@ -101,16 +101,24 @@ const Home: FC = () => {
                         {t('home.showcase.title')}
                     </Heading>
                     <AsciinemaFrame
-                        autoplay
-                        loop
-                        id='538264'
-                        dark={colorMode === 'light'}
+                        autoPlay={true}
+                        loop={true}
+                        src='/showcase.cast'
+                        preload={true}
+                        terminalFontFamily='Fira Code'
+                        terminalfontSize='13'
+                        theme={colorMode === 'light' ? 'glitter' : 'sparkle'}
                     />
 
                     <Heading size={'lg'} mb='3'>
                         {t('home.showcase.packageSearch')}
                     </Heading>
-                    <AsciinemaFrame id='538265' dark={colorMode === 'light'} />
+                    <AsciinemaFrame
+                        src='/search.cast'
+                        terminalFontFamily='Fira Code'
+                        terminalfontSize='13'
+                        theme={colorMode === 'light' ? 'glitter' : 'sparkle'}
+                    />
 
                     <Stack justify='center'>
                         <Image