@fullstackdatasolutions/articles 0.1.0

package/src/index.ts

@@ -0,0 +1,35 @@
+'use client'
+
+// Components
+export { ArticlesPage } from './ArticlesPage'
+export { ArticleCard } from './ArticleCard'
+export { ArticleCategoryGrid } from './ArticleCategoryGrid'
+export { ArticlesHero } from './ArticlesHero'
+export { ArticleSearchBar } from './ArticleSearchBar'
+export { FeaturedArticle } from './FeaturedArticle'
+export { LatestArticles } from './LatestArticles'
+export { LatestArticlesSection } from './LatestArticlesSection'
+export { CategoryArticlesPage } from './CategoryArticlesPage'
+export { ArticleSchema, BreadcrumbSchema, CollectionPageSchema } from './ArticleSchemas'
+
+// Comments
+export { CommentsSection } from './CommentsSection'
+export { CommentThread } from './CommentThread'
+export { CommentItem } from './CommentItem'
+export { CommentForm } from './CommentForm'
+
+// Hooks
+export { useArticles } from './useArticles'
+export type { UseArticlesReturn } from './useArticles'
+
+// Config + types
+export type {
+  ArticlesConfig,
+  ArticlesTheme,
+  ArticlesSection,
+  CategoryDescription,
+  CommentsConfig,
+} from './articlesConfig'
+export { DEFAULT_LAYOUT, DEFAULT_PAGE_SIZE, DEFAULT_CATEGORIES_PAGE_SIZE } from './articlesConfig'
+export type { Article, CategoryInfo } from './articleTypes'
+export type { ArticleComment, ArticleCommentWithReplies } from './commentTypes'

package/src/markdown.ts

@@ -0,0 +1,314 @@
+import type { Element, Root, ElementContent } from 'hast'
+import rehypePrism from 'rehype-prism-plus'
+import rehypeSanitize from 'rehype-sanitize'
+import rehypeStringify from 'rehype-stringify'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+
+// Import the sanitizeImagePath function
+function sanitizeImagePath(rawPath: string, articleSlug: string): string | null {
+  if (!rawPath || typeof rawPath !== 'string') {
+    return null
+  }
+
+  // Remove any null bytes or control characters
+  const cleanPath = rawPath.replaceAll(/[\x00-\x1f\x7f-\x9f]/g, '')
+
+  // Check for absolute URLs (http/https)
+  if (cleanPath.startsWith('http://') || cleanPath.startsWith('https://')) {
+    // For external URLs, just return as-is (they're safe)
+    return cleanPath
+  }
+
+  // For relative paths, ensure they don't contain dangerous patterns
+  if (cleanPath.includes('..') || cleanPath.includes('\\') || cleanPath.startsWith('/')) {
+    console.warn(`Potentially unsafe image path detected: ${cleanPath}`)
+    return null
+  }
+
+  // Only allow alphanumeric characters, hyphens, underscores, dots, and forward slashes
+  if (!/^[a-zA-Z0-9._/-]+$/.test(cleanPath)) {
+    console.warn(`Invalid characters in image path: ${cleanPath}`)
+    return null
+  }
+
+  // Construct safe path within articles directory
+  if (cleanPath.includes('/')) {
+    // Relative path, ensure it's within the article directory
+    const normalizedPath = cleanPath.replaceAll('\\', '/')
+    if (normalizedPath.startsWith('..') || normalizedPath.includes('../')) {
+      console.warn(`Path traversal attempt detected: ${cleanPath}`)
+      return null
+    }
+    return `/articles/${articleSlug}/${normalizedPath}`
+  } else {
+    // Just a filename, construct full path
+    return `/articles/${articleSlug}/${cleanPath}`
+  }
+}
+
+const customRenderer: Plugin<[], Root> = () => {
+  return (tree: Root) => {
+    // First pass: Apply general styles
+    visit(tree, 'element', (node: Element) => {
+      if (node.tagName) {
+        const props = node.properties || {}
+
+        switch (node.tagName) {
+          case 'h1':
+            props.className = 'text-3xl font-bold text-foreground mt-8 mb-4 scroll-mt-20'
+            break
+          case 'h2':
+            props.className = 'text-2xl font-semibold text-foreground mt-6 mb-3 scroll-mt-20'
+            break
+          case 'h3':
+            props.className = 'text-xl font-semibold text-foreground mt-4 mb-2 scroll-mt-20'
+            break
+          case 'h4':
+            props.className = 'text-lg font-semibold text-foreground mt-3 mb-2 scroll-mt-20'
+            break
+          case 'p':
+            props.className = 'text-muted-foreground leading-relaxed mb-4'
+            break
+          case 'a':
+            props.className = 'text-primary hover:underline transition-colors duration-200'
+            props.target = '_blank'
+            props.rel = 'noopener noreferrer'
+            break
+          case 'ul':
+            props.className = 'list-disc list-inside mb-4 space-y-2 ml-4'
+            break
+          case 'ol':
+            props.className = 'list-decimal list-inside mb-4 space-y-2 ml-4'
+            break
+          case 'li':
+            props.className = 'mb-1'
+            break
+          case 'blockquote':
+            props.className = 'border-l-4 border-primary pl-4 italic my-4 text-muted-foreground'
+            break
+          case 'code':
+            props.className =
+              (props.className ? props.className + ' ' : '') +
+              'bg-muted px-1 py-0.5 rounded text-sm font-mono'
+            break
+          case 'pre':
+            props.className = 'bg-muted rounded-lg p-4 overflow-x-auto my-4'
+            break
+          case 'img':
+            props.className = 'rounded-lg my-6 w-full max-w-2xl mx-auto'
+            break
+          case 'table':
+            props.className = 'border-collapse border border-border my-4 w-full'
+            break
+          case 'th':
+            props.className = 'border border-border px-2 py-1 bg-muted font-semibold'
+            break
+          case 'td':
+            props.className = 'border border-border px-2 py-1'
+            break
+          case 'hr':
+            props.className = 'my-8 border-border'
+            break
+          default:
+            break
+        }
+
+        node.properties = props
+      }
+    })
+
+    // Second pass: Fix footnotes and references
+    visit(tree, 'element', (node: Element) => {
+      // Handle footnote references in the body
+      if (
+        node.tagName === 'sup' &&
+        node.children?.[0]?.type === 'element' &&
+        node.children[0].tagName === 'a'
+      ) {
+        const link = node.children[0] as Element
+        if (
+          link.properties?.href &&
+          typeof link.properties.href === 'string' &&
+          link.properties.href.startsWith('#user-content-fn-')
+        ) {
+          // Remove target and rel, and update class
+          if (link.properties) {
+            delete link.properties.target
+            delete link.properties.rel
+            link.properties.className = 'text-primary hover:underline'
+          }
+
+          // Update link href
+          link.properties.href = link.properties.href.replaceAll('#user-content-fn-', '#footnote-')
+
+          // Move ID from sup to link and update format
+          if (node.properties?.id && typeof node.properties.id === 'string') {
+            const newId = node.properties.id.replaceAll('user-content-fnref-', 'ref-')
+            link.properties.id = newId
+            delete node.properties.id
+          }
+
+          // Add brackets to content
+          if (link.children?.[0]?.type === 'text') {
+            link.children[0].value = `[${link.children[0].value}]`
+          }
+        }
+      }
+
+      // Handle footnotes section
+      if (
+        node.tagName === 'section' &&
+        (Array.isArray(node.properties?.className)
+          ? node.properties.className.includes('footnotes')
+          : node.properties?.className === 'footnotes')
+      ) {
+        // Find the ol
+        const olCandidate = node.children.find(
+          (child) => child.type === 'element' && (child as Element).tagName === 'ol'
+        )
+        if (olCandidate?.type === 'element') {
+          const ol = olCandidate as Element
+          ol.properties.className = 'list-decimal ml-6 space-y-2 text-sm text-muted-foreground'
+
+          // Process list items
+          ol.children.forEach((li) => {
+            if (li.type === 'element' && li.tagName === 'li') {
+              const liEl = li as Element
+              if (liEl.properties) {
+                liEl.properties.className = 'pl-2'
+                // Update ID: user-content-fn-1 -> footnote-1
+                if (typeof liEl.properties.id === 'string') {
+                  liEl.properties.id = liEl.properties.id.replaceAll(
+                    'user-content-fn-',
+                    'footnote-'
+                  )
+                }
+              }
+
+              // Unwrap p tags inside li
+              const pIndex = liEl.children.findIndex(
+                (child) => child.type === 'element' && (child as Element).tagName === 'p'
+              )
+
+              if (pIndex !== -1) {
+                const p = liEl.children[pIndex] as Element
+                liEl.children.splice(pIndex, 1, ...p.children)
+              }
+
+              // Style links inside the list item
+              const styleLinks = (nodes: ElementContent[]): void => {
+                nodes.forEach((n) => {
+                  if (n.type !== 'element') return
+                  const el = n as Element
+                  if (el.tagName === 'a') {
+                    const isBackRef =
+                      el.properties?.['dataFootnoteBackref'] !== undefined ||
+                      (el.children[0]?.type === 'text' && el.children[0].value === '↩')
+
+                    if (isBackRef) {
+                      el.properties.className = 'text-primary hover:underline ml-1'
+                      // Update backref href: #user-content-fnref-1 -> #ref-1
+                      if (typeof el.properties.href === 'string') {
+                        el.properties.href = el.properties.href.replaceAll(
+                          '#user-content-fnref-',
+                          '#ref-'
+                        )
+                      }
+                    } else {
+                      el.properties.className = 'text-primary hover:underline break-all'
+                    }
+                  }
+                  if (el.children) styleLinks(el.children)
+                })
+              }
+
+              styleLinks(liEl.children)
+            }
+          })
+
+          // Reconstruct section children with HR and H3
+          const hr: Element = {
+            type: 'element',
+            tagName: 'hr',
+            properties: { className: 'my-8 border-border' },
+            children: [],
+          }
+
+          const h3: Element = {
+            type: 'element',
+            tagName: 'h3',
+            properties: { className: 'text-lg font-semibold mb-4' },
+            children: [{ type: 'text', value: 'References' }],
+          }
+
+          node.children = [hr, h3, ol]
+
+          // Remove the footnotes class to avoid default styling interference
+          if (node.properties) {
+            node.properties.className = undefined
+          }
+        }
+      }
+    })
+  }
+}
+
+// Custom rehype plugin to process image URLs
+const rehypeProcessImages: Plugin<[{ articleSlug?: string }], Root> = (options = {}) => {
+  return (tree: Root) => {
+    visit(tree, 'element', (node: Element) => {
+      if (node.tagName === 'img' && node.properties) {
+        const src = node.properties.src
+        if (src && typeof src === 'string' && options.articleSlug) {
+          // Sanitize the image path
+          const sanitizedSrc = sanitizeImagePath(src, options.articleSlug)
+          if (sanitizedSrc) {
+            node.properties.src = sanitizedSrc
+          } else {
+            // If sanitization fails, use a placeholder
+            console.warn(`Using placeholder for unsafe image path: ${src}`)
+            node.properties.src = '/placeholder-logo.png'
+          }
+        }
+      }
+    })
+  }
+}
+
+export async function markdownToHtml(markdown: string, articleSlug?: string) {
+  try {
+    // Start building the remark processor
+    let processor = remark()
+      .use(remarkParse)
+      .use(remarkGfm)
+      .use(remarkRehype)
+      .use(customRenderer)
+      // @ts-ignore
+      .use(rehypePrism)
+      .use(rehypeSanitize, {
+        attributes: {
+          '*': ['className', 'class', 'id'],
+          a: ['href', 'target', 'rel', 'id'],
+          img: ['src', 'alt'],
+        },
+      })
+
+    // Add image processing plugin if articleSlug is provided
+    if (articleSlug) {
+      processor = processor.use(rehypeProcessImages, { articleSlug })
+    }
+
+    const result = await processor.use(rehypeStringify).process(markdown)
+
+    return result.toString()
+  } catch (error) {
+    console.error('Markdown conversion error:', error)
+    // Return the original markdown as fallback
+    return markdown
+  }
+}

package/src/seoUtils.ts

@@ -0,0 +1,155 @@
+import type { Metadata, MetadataRoute } from 'next'
+import {
+  getArticleMetadata,
+  getAllArticles,
+  getAllCategories,
+  getArticlesByCategory,
+  getAvailableArticleSlugs,
+} from './server-articles'
+import { ArticlesConfig } from './articlesConfig'
+
+export function generateArticleStaticParams(): { slug: string }[] {
+  return getAvailableArticleSlugs().map((slug) => ({ slug }))
+}
+
+export async function generateCategoryStaticParams(): Promise<{ category: string }[]> {
+  const categories = await getAllCategories()
+  return categories.map((cat) => ({ category: cat.slug }))
+}
+
+function resolveImageUrl(featuredImage: string, siteUrl: string): string {
+  const base = siteUrl.replace(/\/$/, '')
+  if (featuredImage.startsWith('http://') || featuredImage.startsWith('https://')) {
+    return featuredImage
+  }
+  return `${base}/${featuredImage.replace(/^\/+/, '')}`
+}
+
+export async function generateArticleMetadata(
+  slug: string,
+  config: ArticlesConfig
+): Promise<Metadata> {
+  const article = await getArticleMetadata(slug)
+
+  if (!article) {
+    return {
+      title: 'Article Not Found',
+      description: 'The requested article could not be found.',
+    }
+  }
+
+  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  const articleUrl = `${siteUrl}/articles/${slug}`
+  const imageUrl = article.featuredImage
+    ? resolveImageUrl(article.featuredImage, siteUrl)
+    : `${siteUrl}/placeholder-logo.png`
+  const description = article.excerpt ?? `Read ${article.title} on ${config.siteName}.`
+
+  return {
+    title: `${article.title} | ${config.siteName}`,
+    description,
+    keywords: [
+      'volunteer management software',
+      'political campaign software',
+      'campaign operations',
+      'civic tech',
+      ...(article.tags ?? []).map((tag) => tag.toLowerCase()),
+    ].join(', '),
+    openGraph: {
+      title: article.title,
+      description,
+      url: articleUrl,
+      siteName: config.siteName,
+      images: [{ url: imageUrl, width: 1200, height: 630, alt: article.title }],
+      locale: 'en_US',
+      type: 'article',
+      ...(article.date && { publishedTime: article.date }),
+      authors: [article.author],
+      tags: article.tags ?? [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: article.title,
+      description,
+      images: [imageUrl],
+    },
+    alternates: {
+      canonical: articleUrl,
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+    other: {
+      'article:author': article.author,
+      ...(article.date && {
+        'article:published_time': new Date(article.date).toISOString(),
+      }),
+      'article:section': article.category,
+      'article:tag': article.tags?.join(',') ?? '',
+      'linkedin:owner': process.env.NEXT_PUBLIC_LINKEDIN_COMPANY_ID ?? '',
+    },
+  }
+}
+
+export async function generateCategoryMetadata(
+  categorySlug: string,
+  config: ArticlesConfig
+): Promise<Metadata> {
+  const articles = await getArticlesByCategory(categorySlug)
+
+  if (articles.length === 0) return { title: 'Category Not Found' }
+
+  const categoryName = articles[0].category
+  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  const categoryUrl = `${siteUrl}/articles/category/${categorySlug}`
+  const raw = config.categoryDescriptions?.[categorySlug]
+  const fallback = `Browse ${articles.length} article${articles.length === 1 ? '' : 's'} in the ${categoryName} category.`
+  const description = typeof raw === 'string' ? raw : (raw?.short ?? fallback)
+
+  return {
+    title: `${categoryName} Articles | ${config.siteName}`,
+    description,
+    openGraph: {
+      title: `${categoryName} Articles`,
+      description,
+      url: categoryUrl,
+      siteName: config.siteName,
+      images: [{ url: articles[0].featuredImage }],
+    },
+    alternates: {
+      canonical: categoryUrl,
+    },
+  }
+}
+
+export async function getArticleSitemapEntries(baseUrl: string): Promise<MetadataRoute.Sitemap> {
+  try {
+    const [articles, categories] = await Promise.all([getAllArticles(), getAllCategories()])
+
+    const articleEntries: MetadataRoute.Sitemap = articles.map((article) => ({
+      url: `${baseUrl}/articles/${article.slug}`,
+      lastModified: article.date ? new Date(article.date) : undefined,
+      changeFrequency: 'weekly' as const,
+      priority: 0.8,
+    }))
+
+    const categoryEntries: MetadataRoute.Sitemap = categories.map((cat) => ({
+      url: `${baseUrl}/articles/category/${cat.slug}`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly' as const,
+      priority: 0.7,
+    }))
+
+    return [...articleEntries, ...categoryEntries]
+  } catch {
+    return []
+  }
+}