@devilsdev/rag-pipeline-utils 2.1.1 → 2.1.3

package/docs-site/package.json

@@ -1,8 +1,7 @@
 {
-  "name": "docs-site",
+  "name": "rag-docs-test",
   "version": "0.0.0",
   "private": true,
-   "type": "module",
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
@@ -12,21 +11,18 @@
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
-    "watch:images": "node scripts/watch-images.js"
+    "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@docusaurus/core": "3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
-    "plaiceholder": "^3.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sharp": "^0.34.1"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@docusaurus/core": "^3.7.0",
     "@docusaurus/module-type-aliases": "3.7.0",
     "@docusaurus/types": "3.7.0"
   },

package/docs-site/src/components/HomepageFeatures/index.js

@@ -1,59 +1,56 @@
+/**
+ * Version: 1.4.1
+ * Description: Feature grid with Framer Motion and deduplicated layout
+ * Author: Ali Kahwaji
+ */
+
 import React from 'react';
 import clsx from 'clsx';
-import styles from './styles.module.css';
+import { motion } from 'framer-motion';
+import styles from './index.module.css';
 
 import FeatureImage from '@site/static/img/logo.svg';
 
-const FeatureList = [
+const features = [
   {
     title: 'Composable Pipelines',
-    Svg: FeatureImage,
-    description: (
-      <>
-        Build flexible RAG workflows with interchangeable loaders, embedders, retrievers, and LLM runners using a clean plugin-based design.
-      </>
-    ),
+    description: 'Build flexible RAG workflows with interchangeable loaders, embedders, retrievers, and LLM runners using a clean plugin-based design.',
   },
   {
     title: 'Evaluation & Dashboard',
-    Svg: FeatureImage,
-    description: (
-      <>
-        Use built-in CLI tooling and React dashboards to assess LLM accuracy, BLEU/ROUGE scores, and prompt results at scale.
-      </>
-    ),
+    description: 'Use built-in CLI tooling and React dashboards to assess LLM accuracy, BLEU/ROUGE scores, and prompt results at scale.',
   },
   {
     title: 'Fully Extendable',
-    Svg: FeatureImage,
-    description: (
-      <>
-        Register custom components with the PluginRegistry and extend the system without modifying the core logic.
-      </>
-    ),
+    description: 'Register custom components with the PluginRegistry and extend the system without modifying the core logic.',
   },
 ];
 
-function Feature({Svg, title, description}) {
-  return (
-    <div className={clsx('col col--4', styles.feature)}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3 className={styles.featureTitle}>{title}</h3>
-        <p className={styles.featureText}>{description}</p>
-      </div>
-    </div>
-  );
-}
-
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
-      {FeatureList.map((props, idx) => (
-        <Feature key={idx} {...props} />
-      ))}
+      <div className="container">
+        <div className="row">
+          {features.map((feature, idx) => (
+            <motion.div
+              key={idx}
+              className={clsx('col col--4', styles.feature)}
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6, delay: idx * 0.2 }}
+            >
+              <div className="text--center">
+                <FeatureImage className={styles.featureSvg} role="img" alt={feature.title} />
+              </div>
+              <div className="text--center padding-horiz--md">
+                <h3 className={styles.featureTitle}>{feature.title}</h3>
+                <p className={styles.featureText}>{feature.description}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
     </section>
   );
 }

package/docs-site/src/components/HomepageFeatures/index.module.css

@@ -0,0 +1,57 @@
+/**
+ * Version: 1.4.1
+ * Description: HomepageFeatures styles with consistent spacing, mint theming, and animation polish
+ * Author: Ali Kahwaji
+ */
+
+ .features {
+  padding: 4rem 0;
+  background-color: var(--ifm-background-color);
+  transition: background-color 0.3s ease;
+}
+
+.feature {
+  text-align: center;
+  padding: 2rem 1rem;
+  transition: transform 0.3s ease;
+}
+
+.feature:hover {
+  transform: translateY(-4px);
+}
+
+.featureSvg {
+  height: 100px;
+  width: auto;
+  margin-bottom: 1rem;
+  fill: var(--ifm-color-primary);
+}
+
+.featureTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ifm-heading-color);
+  margin-bottom: 0.5rem;
+}
+
+.featureText {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--ifm-font-color-base);
+  max-width: 280px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .features {
+    padding: 2rem 0;
+  }
+
+  .feature {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .featureSvg {
+    height: 80px;
+  }
+}

package/docs-site/src/components/HomepageHeader/index.js

@@ -0,0 +1,46 @@
+/**
+ * Version: 2.4.2
+ * Description: Crash-proof homepage header with full fallback safety
+ * Author: Ali Kahwaji
+ */
+
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import styles from './index.module.css';
+import Logo from '@site/static/img/logo.svg';
+
+export default function HomepageHeader() {
+  let siteConfig = { title: 'RAG Pipeline Utils', tagline: 'Composable pipelines for LLMs' };
+
+  try {
+    const context = useDocusaurusContext();
+    if (context && context.siteConfig) {
+      siteConfig = {
+        title: context.siteConfig.title || siteConfig.title,
+        tagline: context.siteConfig.tagline || siteConfig.tagline,
+      };
+    }
+  } catch (e) {
+    console.warn('useDocusaurusContext failed:', e);
+  }
+
+  return (
+    <header className={clsx('hero', styles.heroBanner)}>
+      <div className="container text--center">
+        <Logo className={styles.logo} role="img" alt="RAG Utils Logo" />
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link className="button button--primary button--lg" to="/docs/Introduction">
+            Get Started
+          </Link>
+          <Link className="button button--outline button--lg" to="/blog">
+            Visit Blog
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}

package/docs-site/src/components/HomepageHeader/index.module.css

@@ -0,0 +1,77 @@
+/**
+ * Version: 1.4.0
+ * Path: docs-site/src/components/HomepageHeader/index.module.css
+ * Description: Styles for responsive hero banner with mint green CTA
+ * Author: Ali Kahwaji
+ */
+
+ :root {
+  --hero-accent: #3EF4B6;
+}
+
+.heroBanner {
+  padding: 5rem 2rem;
+  background: var(--ifm-background-color);
+  text-align: center;
+}
+
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 700;
+  color: var(--ifm-heading-color);
+  margin-bottom: 1rem;
+  line-height: 1.2;
+}
+
+.heroSubtitle {
+  font-size: 1.2rem;
+  color: var(--ifm-font-color-base);
+  max-width: 720px;
+  margin: 0 auto 2rem auto;
+}
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.ctaButton {
+  border-radius: 8px;
+  font-weight: 600;
+  padding: 0.75rem 2rem;
+  transition: all 0.25s ease-in-out;
+}
+
+.ctaButton.button--primary {
+  background-color: var(--hero-accent);
+  border: none;
+  color: black;
+}
+
+.ctaButton.button--primary:hover {
+  background-color: #33e3a6;
+  box-shadow: 0 0 0 4px rgba(62, 244, 182, 0.3);
+}
+
+.ctaButton.button--outline {
+  border-color: var(--hero-accent);
+  color: var(--hero-accent);
+}
+
+.ctaButton.button--outline:hover {
+  background-color: rgba(62, 244, 182, 0.1);
+  border-color: var(--hero-accent);
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .heroTitle {
+    font-size: 2.25rem;
+  }
+
+  .heroSubtitle {
+    font-size: 1rem;
+  }
+}

package/docs-site/src/css/custom.css

@@ -1,81 +1,104 @@
-/*
- * Version: 0.2.0
- * Path: /docs-site/src/css/custom.css
- * Description: Customized global styles for RAG Pipeline Utils Docusaurus site
+/**
+ * Version: 1.4.2
+ * Path: docs-site/src/css/custom.css
+ * Description: Robust theme override for SSR support in Docusaurus static build with correct light/dark contrast.
  * Author: Ali Kahwaji
  */
 
-/* Infima overrides */
-:root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);
-
-  /* Custom enhancements */
-  --ifm-font-family-base: 'Segoe UI', Roboto, sans-serif;
-  --ifm-spacing-horizontal: 1.2rem;
-  --ifm-container-width: 90%;
-}
-
-[data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
-
-/* Hero section styling */
-main.container {
-  padding-top: 3rem;
-}
-
-.hero__subtitle {
-  font-size: 1.25rem;
-  color: #444;
-  margin-bottom: 2rem;
-}
-
-[data-theme='dark'] .hero__subtitle {
-  color: #ccc;
-}
-
-/* Button enhancements */
-.button--info {
-  background-color: #e0f2ff !important;
-  color: #0366d6 !important;
-  border: 1px solid #b6e0fe !important;
-  font-weight: 500;
-}
-
-.button--info:hover {
-  background-color: #d2ecfc !important;
-  border-color: #a4d7fa !important;
-}
-
-/* Footer padding */
-.footer {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-/* Improve readability of inline code */
-code {
-  background-color: rgba(27,31,35,.05);
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  font-size: 90%;
-}
-
-[data-theme='dark'] code {
-  background-color: rgba(255,255,255,0.08);
-}
+/* ----------------------
+ * Explicit Light Theme Scope (SSR Safe)
+ * ---------------------- */
+ html[data-theme='light'],
+ :root {
+   --ifm-color-primary: #3EF4B6;
+   --ifm-color-primary-dark: #33e3a6;
+   --ifm-color-primary-darker: #2fd29b;
+   --ifm-color-primary-light: #55f7c0;
+   --ifm-color-primary-lighter: #69f9ca;
+   --ifm-color-primary-lightest: #86fbd6;
+ 
+   --ifm-background-color: #ffffff;
+   --ifm-navbar-background-color: #f8f8f8;
+   --ifm-footer-background-color: #f4f4f4;
+ 
+   --ifm-font-color-base: #1a1a1a;
+   --ifm-heading-color: #121212;
+   --ifm-link-color: var(--ifm-color-primary);
+ }
+ 
+ /* ----------------------
+  * Dark Theme Overrides
+  * ---------------------- */
+ html[data-theme='dark'] {
+   --ifm-background-color: #0d0d0d;
+   --ifm-navbar-background-color: #151515;
+   --ifm-footer-background-color: #121212;
+ 
+   --ifm-font-color-base: #f2f2f2;
+   --ifm-heading-color: #ffffff;
+   --ifm-link-color: var(--ifm-color-primary);
+ }
+ 
+ /* ------------------
+  * Typography
+  * ------------------ */
+ body {
+   font-family: 'Inter', system-ui, sans-serif;
+   line-height: 1.6;
+   font-size: 16px;
+   background-color: var(--ifm-background-color);
+   color: var(--ifm-font-color-base);
+   transition: background-color 0.3s ease, color 0.3s ease;
+ }
+ 
+ /* ------------------
+  * Buttons
+  * ------------------ */
+ .button--primary {
+   background-color: var(--ifm-color-primary);
+   color: black;
+   border: none;
+   font-weight: 500;
+   transition: background-color 0.2s ease;
+ }
+ .button--primary:hover {
+   background-color: var(--ifm-color-primary-dark);
+   box-shadow: 0 0 0 3px rgba(62, 244, 182, 0.25);
+ }
+ .button--outline {
+   border: 2px solid var(--ifm-color-primary);
+   color: var(--ifm-color-primary);
+ }
+ .button--outline:hover {
+   background-color: rgba(62, 244, 182, 0.05);
+ }
+ 
+ /* ------------------
+  * Code Blocks
+  * ------------------ */
+ pre {
+   background-color: #f5f5f5;
+   border-radius: 8px;
+   padding: 1rem;
+   font-size: 0.95rem;
+   overflow-x: auto;
+ }
+ html[data-theme='dark'] pre {
+   background-color: #1e1e1e;
+ }
+ 
+ /* ------------------
+  * Scrollbars
+  * ------------------ */
+ ::-webkit-scrollbar {
+   width: 8px;
+   height: 8px;
+ }
+ ::-webkit-scrollbar-thumb {
+   background-color: rgba(62, 244, 182, 0.45);
+   border-radius: 4px;
+ }
+ ::-webkit-scrollbar-track {
+   background: transparent;
+ }
+ 

package/docs-site/src/pages/index.js

@@ -1,36 +1,19 @@
+// docs-site/src/pages/index.js
+
 import React from 'react';
 import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
+import HomepageHeader from '@site/src/components/HomepageHeader';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 export default function Home() {
   return (
-    <Layout title="RAG Pipeline Utils" description="Modular tools for retrieval-augmented generation">
-      <main className="container margin-vert--xl text--center">
-        <h1>Welcome to RAG Pipeline Utils</h1>
-        <p className="hero__subtitle">
-          A composable, pluggable RAG framework for Node.js with CLI, evaluation, and dashboard support.
-        </p>
-
-        <div style={{ marginTop: '2rem' }}>
-          <Link
-            className="button button--primary button--lg margin-horiz--sm"
-            to="/docs/Introduction">
-            📄 Get Started
-          </Link>
-
-          <Link
-            className="button button--secondary button--lg margin-horiz--sm"
-            to="/docs/CLI">
-            🧰 CLI Reference
-          </Link>
-
-          <Link
-            className="button button--info button--lg margin-horiz--sm"
-            style={{ backgroundColor: '#e0f2ff', color: '#0366d6', border: '1px solid #b6e0fe' }}
-            to="/docs/Evaluation">
-            📈 Evaluation Dashboard
-          </Link>
-        </div>
+    <Layout
+      title="RAG Pipeline Utils"
+      description="Composable RAG pipelines, dashboards, and plugin architecture for Node.js"
+    >
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
       </main>
     </Layout>
   );