feat: add switching among different views, use OpenSeaDragon with ima…

…ge action buttons, use Zustand for the PanelState and open a Popover on click(#543) * chore: use 'preserve' for 'jsx' attribute in config, to get rid of 4 'Cannot use JSX unless the '--jsx' flag is provided' * chore: set up shadcn * wip(content Store): add an initial version of content Store * wip (texts in contentStore): add texts in item of ContentStore * wip (refactor content types toggle): control content types toggle in PanelCentralContent * fix (content types toggle): use the state 't' for the activeContentTypeIndex * chore (content types toggle): minor * chore(content types toggle): add error handling in Content Types toggle * feat (switch text views): add the split image-text view * feat(switch text views): add image view only as a simple image * feat(image view): represent image as OpenSeaDragon and add the existing image actions * fix (Open Sea Dragon): add unique id for the action buttons which is the same as the opened panel index * fix(Open Sea Dragon Viewer): set a unique 'id' for each viewer * refactor(Panel): remove text from Panel * refactor(Config Provider): remove openedPanels * fix (init Data): init data synchronously for each panel in config: firstly store the data in store and then show the panels * refactor(Content Types Toggle): add content types in store * fix (Content Types Toggle): add the necessary change in Content Store * fix (Split View): add the image as Open Sea Dragon Image Viewer * style: clean code in ImageView * style: clean code in PanelCentralContent * style: clean code in SplitView * style: clean code in TextView * style: clean code in TextViewOne * fix (Content Types Toggle): improve the design of the buttons * style: clean Panel component * style: clean PanelsTopBar * style: clean TextViewsToggle and utils/icons * style: add minor changes * refactor (ImageActionButtons): add typescript interface for ImageAction * chore (OpenSeaDragon): add Typescript in OpenSeaDragon * refactor (PanelsWrapper): move a few functions in utils/panel * refactor (ContentStore): improve the code of updating the PanelContent * fix (text views icons): set size to text view icons * wip (pop over tree): display the pop over when clicking at tree icon button * refactor (ContentStore): convert from arrays of PanelContent to an object of key, values for the PanelContent * fix: popover now covers the image action buttons * style: remove eslint errors * style: fix some more lint errors * style: add changes which make all code more readable * refactor: make colors global to the app * refactor: add a PanelProvider with 'panelId' and remove 'panelId' from props * style: rename 'central-content' folder to 'views' * fix: use uuid to identify each panel id and update namings of types --------- Co-authored-by: orlinmalkja <[email protected]>
subugoe · Jan 8, 2025 · d11c8fc · d11c8fc
1 parent 43d30a7
commit d11c8fc
Show file tree

Hide file tree

Showing 30 changed files with 3,259 additions and 1,483 deletions.
diff --git a/components.json b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/css/style.css",
+    "baseColor": "gray",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/index.html b/index.html
@@ -1,45 +1,63 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>TIDO</title>
+  <head>
+    <title>TIDO</title>
 
-  <meta charset="utf-8">
-  <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-  <meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
-  <style>
-    html, body {
-      margin: 0;
-    }
-    #app {
-      height: 100vh;
-    }
-  </style>
-</head>
+    <meta charset="utf-8" />
+    <meta
+      name="description"
+      content="<%= htmlWebpackPlugin.options.productDescription %>"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+    />
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+      #app {
+        height: 100vh;
+      }
+    </style>
+  </head>
 
-<body>
-<noscript>
-  <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-</noscript>
-<div id="app"></div>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but this app doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
 
-<script type="module" src="/src/main.tsx"></script>
-<script>
-  window.addEventListener('load', function () {
-    window.tido = new window.Tido({
-      globalTree: true,
-      panels: [
-        {
-          entrypoint: {
-            url: 'https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/syriac/collection.json',
-            type: 'collection'
-          }
-        }
-      ],
-      }
-    )
-  })
-  </script>
-</body>
+    <script type="module" src="/src/main.tsx"></script>
+    <script>
+      window.addEventListener("load", function () {
+        window.tido = new window.Tido({
+          globalTree: true,
+          colors: {
+            primary: "#1E40AF",
+          },
+          panels: [
+            {
+              entrypoint: {
+                url: "https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/syriac/collection.json",
+                type: "collection",
+              },
+            },
+            {
+              entrypoint: {
+                url: "https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/arabic-karshuni/collection.json",
+                type: "collection",
+              },
+            },
+          ],
+        });
+      });
+    </script>
+  </body>
 </html>