feat(ssr): Implement server-side rendering for initial table

Implements a hybrid rendering model for the resistance table to improve performance and SEO.

- The main plugin now processes all data at build time and injects it via Docusaurus's global data mechanism.
- The <ResistanceTable> component is now pre-rendered with this initial data (SSR), embedding the table directly into the static HTML.
- Client-side interactivity (changing data sources) is preserved, fetching new data dynamically (CSR).
- Added build-time warnings in the remark plugin to notify authors of invalid configurations or empty tables.
- Fixed a client-side hydration issue that prevented the adaptive layout from working correctly on the initial load.
- Updated the README with a new section explaining the rendering architecture.

Author: Uli-Z

.gitignore

@@ -43,4 +43,4 @@ example/data/eucast_expected_resistance.csv
 example/data/organism_classes.csv
 example/data/organisms.csv
 example/data/resistance_ars_2023_germany_all.csv
-example/data/resistance_ars_2023_germany_icu.csv
+example/data/resistance_ars_2023_germany_icu.csvexample/data/

README.md

@@ -198,6 +198,23 @@ These files allow you to group antibiotics and organisms. The `organism_classes.
 
 UI text is stored in `src/theme/ResistanceTable/i18n.ts`. You can edit this file to add support for new languages or change existing translations. The plugin uses the current Docusaurus locale and falls back to English if a translation is missing.
 
+## For Developers: Rendering Architecture
+
+The plugin employs a hybrid rendering strategy, leveraging both server-side rendering (SSR) at build time and client-side rendering (CSR) for interactivity.
+
+### Build Time (SSR)
+
+During the `docusaurus build` process, the plugin reads and processes all CSV data. It then transforms any `%%RESIST%%` directives in your Markdown files into a fully-formed `<ResistanceTable>` React component. This component is pre-rendered with its initial data, embedding the complete HTML table directly into the static page. This ensures fast initial page loads and makes the table content available to search engine crawlers.
+
+### In the Browser (CSR & Interactivity)
+
+When a user visits the page, the pre-rendered table is instantly visible. React then "hydrates" the component, making it interactive. At this stage, two key client-side features activate:
+
+-   **Adaptive Layout:** The component measures the available container width and automatically adjusts its display mode (e.g., by abbreviating names) to best fit the user's screen.
+-   **Dynamic Data Loading:** If the user selects a new data source from the dropdown, the component fetches the corresponding data from the server and updates the table in place, without needing a page refresh.
+
+This hybrid model provides the fast initial load times and SEO benefits of a static site, combined with the dynamic and responsive experience of a modern web application.
+
 ## License
 
 This project is licensed under the MIT License.

dist/index.mjs

@@ -2173,8 +2173,12 @@ function docusaurusPluginResistogram(ctx, opts = {}) {
     async contentLoaded({ actions }) {
       const { abx, org, sources, hierarchicalSources, allAbxIds, allOrgIds, orgClasses, orgIdToRank, abxSyn2Id, orgSyn2Id } = await getSharedData(dataPath, files);
       const resistanceDataFileNames = /* @__PURE__ */ new Map();
+      const allResistanceData = {};
       for (const source of sources) {
         const resistanceData = await loadResistanceDataForSource(source, sources, dataPath);
+        if (resistanceData.length > 0) {
+          allResistanceData[source.id] = resistanceData;
+        }
         if (resistanceData.length === 0) continue;
         const headers = Object.keys(resistanceData[0] || {});
         const compressedData = [
@@ -2223,10 +2227,13 @@ function docusaurusPluginResistogram(ctx, opts = {}) {
       const dataUrl = isDev ? join(ctx.baseUrl, "resistogram-data", pluginId) : join(ctx.baseUrl, "assets/json");
       const globalData = {
         sources: hierarchicalSources,
-        // Pass the tree structure to the client
         resistanceDataFileNames: Object.fromEntries(resistanceDataFileNames),
         sharedDataFileName,
-        dataUrl
+        dataUrl,
+        ssr: {
+          sharedData,
+          resistanceData: allResistanceData
+        }
       };
       actions.setGlobalData(globalData);
     },