@uniweb/scholar 0.1.0

package/src/components/CiteButton.jsx

@@ -0,0 +1,175 @@
+/**
+ * CiteButton Component
+ *
+ * A dropdown button that lets users copy citations in various formats.
+ *
+ * @module @uniweb/scholar/components/CiteButton
+ */
+
+import React, { useState, useRef, useEffect } from 'react'
+import { formatReference } from '../bibliography/formatters/index.js'
+import { exportBibtex } from '../bibliography/parsers/bibtex.js'
+
+/**
+ * CiteButton - Copy citation dropdown
+ *
+ * @param {Object} props
+ * @param {Object} props.publication - Publication data
+ * @param {Array<string>} [props.styles=['apa', 'mla', 'chicago', 'ieee', 'bibtex']] - Available citation styles
+ * @param {string} [props.label='Cite'] - Button label
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <CiteButton publication={myPublication} styles={['apa', 'mla', 'bibtex']} />
+ */
+export function CiteButton({
+  publication,
+  styles = ['apa', 'mla', 'chicago', 'ieee', 'bibtex'],
+  label = 'Cite',
+  className,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [copied, setCopied] = useState(null)
+  const dropdownRef = useRef(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  // Copy citation to clipboard
+  async function copyToClipboard(style) {
+    try {
+      let text
+      if (style === 'bibtex') {
+        text = exportBibtex(publication)
+      } else {
+        text = formatReference(publication, { style })
+      }
+
+      await navigator.clipboard.writeText(text)
+      setCopied(style)
+      setTimeout(() => setCopied(null), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }
+
+  const styleLabels = {
+    apa: 'APA',
+    mla: 'MLA',
+    chicago: 'Chicago',
+    ieee: 'IEEE',
+    bibtex: 'BibTeX',
+  }
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={className}
+      style={{ position: 'relative', display: 'inline-block' }}
+      {...props}
+    >
+      {/* Trigger button */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '0.25rem',
+          padding: '0.375rem 0.75rem',
+          fontSize: '0.875rem',
+          fontWeight: '500',
+          color: '#374151',
+          backgroundColor: '#f3f4f6',
+          border: '1px solid #d1d5db',
+          borderRadius: '0.375rem',
+          cursor: 'pointer',
+        }}
+      >
+        {label}
+        <svg
+          style={{
+            width: '1rem',
+            height: '1rem',
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
+            transition: 'transform 0.15s',
+          }}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            marginTop: '0.25rem',
+            minWidth: '8rem',
+            backgroundColor: '#ffffff',
+            border: '1px solid #e5e7eb',
+            borderRadius: '0.375rem',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+            zIndex: 50,
+            overflow: 'hidden',
+          }}
+        >
+          {styles.map((style) => (
+            <button
+              key={style}
+              type="button"
+              onClick={() => copyToClipboard(style)}
+              style={{
+                display: 'block',
+                width: '100%',
+                padding: '0.5rem 1rem',
+                fontSize: '0.875rem',
+                textAlign: 'left',
+                color: copied === style ? '#059669' : '#374151',
+                backgroundColor: copied === style ? '#ecfdf5' : 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+              }}
+              onMouseEnter={(e) => {
+                if (copied !== style) {
+                  e.target.style.backgroundColor = '#f3f4f6'
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (copied !== style) {
+                  e.target.style.backgroundColor = 'transparent'
+                }
+              }}
+            >
+              {copied === style ? '✓ Copied!' : styleLabels[style] || style.toUpperCase()}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CiteButton

package/src/components/DoiLink.jsx

@@ -0,0 +1,97 @@
+/**
+ * DoiLink Component
+ *
+ * Renders a DOI as a clickable link.
+ *
+ * @module @uniweb/scholar/components/DoiLink
+ */
+
+import React from 'react'
+
+/**
+ * DoiLink - Display a DOI with automatic link
+ *
+ * @param {Object} props
+ * @param {string} props.doi - DOI value (with or without URL prefix)
+ * @param {string} [props.format='full'] - Display format: 'full', 'short', or 'link'
+ * @param {boolean} [props.showIcon=false] - Show external link icon
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <DoiLink doi="10.1234/example" />
+ *
+ * @example
+ * // Short format (just the DOI number)
+ * <DoiLink doi="10.1234/example" format="short" />
+ *
+ * @example
+ * // Link format (full URL)
+ * <DoiLink doi="10.1234/example" format="link" />
+ */
+export function DoiLink({
+  doi,
+  format = 'full',
+  showIcon = false,
+  className,
+  ...props
+}) {
+  if (!doi) return null
+
+  // Normalize DOI - remove URL prefix if present
+  const normalizedDoi = doi.replace(/^https?:\/\/doi\.org\//, '')
+  const doiUrl = `https://doi.org/${normalizedDoi}`
+
+  // Determine display text
+  let displayText
+  switch (format) {
+    case 'short':
+      displayText = normalizedDoi
+      break
+    case 'link':
+      displayText = doiUrl
+      break
+    case 'full':
+    default:
+      displayText = `DOI: ${normalizedDoi}`
+  }
+
+  return (
+    <a
+      href={doiUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className}
+      style={{
+        color: '#2563eb',
+        textDecoration: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.25rem',
+      }}
+      {...props}
+    >
+      {displayText}
+      {showIcon && (
+        <svg
+          style={{
+            width: '0.875rem',
+            height: '0.875rem',
+            opacity: 0.7,
+          }}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+          />
+        </svg>
+      )}
+    </a>
+  )
+}
+
+export default DoiLink

package/src/components/index.js

@@ -0,0 +1,12 @@
+/**
+ * UI Components
+ *
+ * Reusable components for displaying academic content.
+ *
+ * @module @uniweb/scholar/components
+ */
+
+export { CiteButton } from './CiteButton.jsx'
+export { BibtexBlock } from './BibtexBlock.jsx'
+export { AuthorList } from './AuthorList.jsx'
+export { DoiLink } from './DoiLink.jsx'

package/src/index.js

@@ -0,0 +1,35 @@
+/**
+ * @uniweb/scholar - Academic content utilities for Uniweb
+ *
+ * Provides math rendering, bibliographic references, and inline citations
+ * for academic and scientific content.
+ *
+ * @module @uniweb/scholar
+ */
+
+// Math components
+export { Math, Equation, EquationRef, loadKatex } from './math/index.js'
+
+// Bibliography utilities
+export {
+  formatReference,
+  formatAuthors,
+  parseBibtex,
+  exportBibtex,
+} from './bibliography/index.js'
+
+// Citation system
+export {
+  CitationProvider,
+  Citation,
+  Bibliography,
+  useCitation,
+} from './citations/index.js'
+
+// UI components
+export {
+  CiteButton,
+  BibtexBlock,
+  AuthorList,
+  DoiLink,
+} from './components/index.js'

package/src/math/Equation.jsx

@@ -0,0 +1,163 @@
+/**
+ * Equation Component
+ *
+ * Renders a numbered equation with an optional label for cross-referencing.
+ * Equations are numbered sequentially within a CitationProvider context.
+ *
+ * @module @uniweb/scholar/math/Equation
+ */
+
+import React, { useEffect, useState, useContext, useId } from 'react'
+import { loadKatex } from './katex-loader.js'
+
+/**
+ * Context for tracking equation numbers
+ * Exported for use by EquationRef
+ */
+export const EquationContext = React.createContext(null)
+
+/**
+ * Provider for equation numbering
+ * Wrap your content with this to enable automatic equation numbering.
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.children
+ * @param {number} [props.startNumber=1] - Starting equation number
+ */
+export function EquationProvider({ children, startNumber = 1 }) {
+  const [equations, setEquations] = useState(new Map())
+  const counterRef = React.useRef(startNumber)
+
+  const register = React.useCallback((id) => {
+    setEquations((prev) => {
+      if (prev.has(id)) return prev
+      const next = new Map(prev)
+      next.set(id, counterRef.current++)
+      return next
+    })
+  }, [])
+
+  const getNumber = React.useCallback(
+    (id) => equations.get(id),
+    [equations]
+  )
+
+  return (
+    <EquationContext.Provider value={{ register, getNumber, equations }}>
+      {children}
+    </EquationContext.Provider>
+  )
+}
+
+/**
+ * Hook to access equation context
+ */
+export function useEquations() {
+  return useContext(EquationContext)
+}
+
+/**
+ * Equation - Numbered display equation with optional label
+ *
+ * @param {Object} props
+ * @param {string} props.children - LaTeX expression
+ * @param {string} [props.id] - Unique identifier for cross-referencing
+ * @param {string} [props.label] - Custom label (defaults to equation number)
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <EquationProvider>
+ *   <Equation id="einstein">E = mc^2</Equation>
+ *   <p>As shown in <EquationRef id="einstein" />, energy equals...</p>
+ * </EquationProvider>
+ */
+export function Equation({ children, id, label, className, ...props }) {
+  const [html, setHtml] = useState(null)
+  const generatedId = useId()
+  const equationId = id || generatedId
+  const ctx = useContext(EquationContext)
+
+  // Extract LaTeX string from children
+  const latex = typeof children === 'string' ? children.trim() : ''
+
+  // Register equation for numbering
+  useEffect(() => {
+    if (ctx) {
+      ctx.register(equationId)
+    }
+  }, [ctx, equationId])
+
+  // Get equation number
+  const number = ctx?.getNumber(equationId)
+
+  // Render LaTeX
+  useEffect(() => {
+    if (!latex) return
+
+    let cancelled = false
+
+    async function render() {
+      const katex = await loadKatex()
+      if (cancelled || !katex) return
+
+      try {
+        const rendered = katex.renderToString(latex, {
+          displayMode: true,
+          throwOnError: false,
+        })
+        if (!cancelled) {
+          setHtml(rendered)
+        }
+      } catch (e) {
+        console.warn('[Equation] Render error:', e.message)
+      }
+    }
+
+    render()
+
+    return () => {
+      cancelled = true
+    }
+  }, [latex])
+
+  const displayLabel = label || (number ? `(${number})` : '')
+
+  return (
+    <div
+      id={equationId}
+      className={className}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: '1.5rem 0',
+        position: 'relative',
+      }}
+      {...props}
+    >
+      {/* Equation content */}
+      <div style={{ flex: 1, textAlign: 'center' }}>
+        {html ? (
+          <span dangerouslySetInnerHTML={{ __html: html }} />
+        ) : (
+          <code>{latex}</code>
+        )}
+      </div>
+
+      {/* Equation number */}
+      {displayLabel && (
+        <span
+          style={{
+            position: 'absolute',
+            right: 0,
+            fontStyle: 'normal',
+          }}
+        >
+          {displayLabel}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default Equation

package/src/math/EquationRef.jsx

@@ -0,0 +1,63 @@
+/**
+ * EquationRef Component
+ *
+ * Creates a reference link to a numbered equation.
+ *
+ * @module @uniweb/scholar/math/EquationRef
+ */
+
+import React, { useContext } from 'react'
+import { EquationContext } from './Equation.jsx'
+
+/**
+ * EquationRef - Reference to a numbered equation
+ *
+ * @param {Object} props
+ * @param {string} props.id - ID of the equation to reference
+ * @param {string} [props.format='parentheses'] - Format: 'parentheses', 'plain', or 'equation'
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * <EquationRef id="einstein" />                    // "(1)"
+ * <EquationRef id="einstein" format="plain" />    // "1"
+ * <EquationRef id="einstein" format="equation" /> // "Equation 1"
+ */
+export function EquationRef({ id, format = 'parentheses', className, ...props }) {
+  const ctx = useContext(EquationContext)
+  const number = ctx?.getNumber(id)
+
+  if (!number) {
+    // Equation not found or not yet registered
+    return (
+      <span className={className} style={{ color: '#cc0000' }} {...props}>
+        ??
+      </span>
+    )
+  }
+
+  let display
+  switch (format) {
+    case 'plain':
+      display = String(number)
+      break
+    case 'equation':
+      display = `Equation ${number}`
+      break
+    case 'parentheses':
+    default:
+      display = `(${number})`
+  }
+
+  return (
+    <a
+      href={`#${id}`}
+      className={className}
+      style={{ textDecoration: 'none' }}
+      {...props}
+    >
+      {display}
+    </a>
+  )
+}
+
+export default EquationRef

package/src/math/Math.jsx

@@ -0,0 +1,115 @@
+/**
+ * Math Component
+ *
+ * Renders LaTeX math expressions using KaTeX.
+ * Supports both inline and display (block) modes.
+ *
+ * @module @uniweb/scholar/math/Math
+ */
+
+import React, { useEffect, useState } from 'react'
+import { loadKatex } from './katex-loader.js'
+
+/**
+ * Math - Render LaTeX math expressions
+ *
+ * @param {Object} props
+ * @param {string} props.children - LaTeX expression to render
+ * @param {boolean} [props.display=false] - Display mode (block) vs inline
+ * @param {string} [props.className] - Additional CSS classes
+ *
+ * @example
+ * // Inline math
+ * <Math>E = mc^2</Math>
+ *
+ * @example
+ * // Display (block) math
+ * <Math display>
+ *   \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
+ * </Math>
+ */
+export function Math({ children, display = false, className, ...props }) {
+  const [html, setHtml] = useState(null)
+  const [error, setError] = useState(null)
+
+  // Extract LaTeX string from children
+  const latex = typeof children === 'string' ? children.trim() : ''
+
+  useEffect(() => {
+    if (!latex) return
+
+    let cancelled = false
+
+    async function render() {
+      const katex = await loadKatex()
+      if (cancelled || !katex) return
+
+      try {
+        const rendered = katex.renderToString(latex, {
+          displayMode: display,
+          throwOnError: false,
+          errorColor: '#cc0000',
+        })
+        if (!cancelled) {
+          setHtml(rendered)
+          setError(null)
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setError(e.message)
+          setHtml(null)
+        }
+      }
+    }
+
+    render()
+
+    return () => {
+      cancelled = true
+    }
+  }, [latex, display])
+
+  // Error state
+  if (error) {
+    return (
+      <span
+        className={className}
+        style={{ color: '#cc0000', fontFamily: 'monospace' }}
+        title={error}
+        {...props}
+      >
+        {latex}
+      </span>
+    )
+  }
+
+  // Loading state - show raw LaTeX in code format
+  if (!html) {
+    return (
+      <code className={className} {...props}>
+        {latex}
+      </code>
+    )
+  }
+
+  // Rendered math
+  if (display) {
+    return (
+      <div
+        className={className}
+        dangerouslySetInnerHTML={{ __html: html }}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <span
+      className={className}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...props}
+    />
+  )
+}
+
+export default Math

package/src/math/index.js

@@ -0,0 +1,12 @@
+/**
+ * Math Module
+ *
+ * Components for rendering LaTeX math expressions using KaTeX.
+ *
+ * @module @uniweb/scholar/math
+ */
+
+export { Math } from './Math.jsx'
+export { Equation, EquationProvider, EquationContext, useEquations } from './Equation.jsx'
+export { EquationRef } from './EquationRef.jsx'
+export { loadKatex, isKatexLoaded, renderLatex } from './katex-loader.js'