livemark 0.0.0-dev → 0.7.0

package/build/website/components/ZoomImage.tsx

@@ -1,30 +1,25 @@
-import type { ComponentProps } from "react"
+import { useEffect, useState, type ComponentProps } from "react"
 import Zoom from "react-medium-image-zoom"
 import "react-medium-image-zoom/dist/styles.css"
 
 /** Image component with click-to-zoom and light/dark theme variant support */
 export function ZoomImage(props: ComponentProps<"img">) {
-  const src = props.src ?? ""
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
 
+  const src = props.src ?? ""
+  let imgProps = props
   if (src.endsWith("#light")) {
-    return (
-      <Zoom>
-        <img {...props} src={src.slice(0, -6)} className="dark:hidden" />
-      </Zoom>
-    )
-  }
-
-  if (src.endsWith("#dark")) {
-    return (
-      <Zoom>
-        <img {...props} src={src.slice(0, -5)} className="hidden dark:block" />
-      </Zoom>
-    )
+    imgProps = { ...props, src: src.slice(0, -6), className: "dark:hidden" }
+  } else if (src.endsWith("#dark")) {
+    imgProps = {
+      ...props,
+      src: src.slice(0, -5),
+      className: "hidden dark:block",
+    }
   }
 
-  return (
-    <Zoom>
-      <img {...props} />
-    </Zoom>
-  )
+  const img = <img {...imgProps} alt={imgProps.alt ?? ""} />
+  if (!mounted) return img
+  return <Zoom>{img}</Zoom>
 }

package/build/website/content/article.ts

@@ -0,0 +1,78 @@
+import { allArticles } from "content-collections"
+import type { ArticleGroup } from "../models/article.ts"
+import {
+  buildArticleTree,
+  flattenArticleTree,
+  groupArticleTree,
+} from "../helpers/article.ts"
+import { matchSection, partitionBySection } from "../helpers/section.ts"
+
+/**
+ * Articles sorted by frontmatter `order`:
+ * positive values first (ascending), then unordered, then negative values
+ * (so `order: -1` lands at the very end, `-2` just before it, and so on).
+ */
+export const sortedArticles = [...allArticles].sort(
+  (a, b) => orderKey(a.order) - orderKey(b.order),
+)
+
+/** The article whose path is `/`, if any (rendered in place at the root) */
+export const homeArticle = sortedArticles.find(a => a.path === "/")
+
+/** Sidebar sections derived from the path tree, partitioned by `group` */
+export const articleGroups = groupArticleTree(
+  buildArticleTree(sortedArticles),
+  sortedArticles,
+)
+
+/** Articles in depth-first order across all sections (matches sidebar walk) */
+export const flatArticles = articleGroups.flatMap(group =>
+  flattenArticleTree(group.nodes),
+)
+
+/** The first article in sidebar order, used as the default landing page */
+export const firstArticle = sortedArticles.find(a => a.path === flatArticles[0])
+
+function orderKey(order?: number) {
+  if (order === undefined) return Number.MAX_SAFE_INTEGER / 2
+  if (order < 0) return Number.MAX_SAFE_INTEGER + order
+  return order
+}
+
+const configSections = import.meta.env.CONFIG.sections
+
+/** Per-section article groups, keyed by section prefix */
+export const sectionArticleGroups = new Map<string, ArticleGroup[]>()
+
+/** Per-section flat article lists, keyed by section prefix */
+export const sectionFlatArticles = new Map<string, string[]>()
+
+/** Per-section first article path, keyed by section prefix */
+export const sectionFirstArticle = new Map<string, string | undefined>()
+
+if (configSections?.length) {
+  const sectionByPrefix = new Map(configSections.map(s => [s.prefix, s]))
+  const buckets = partitionBySection(sortedArticles, configSections)
+  for (const [key, bucket] of buckets) {
+    const section = sectionByPrefix.get(key)
+    const sorted =
+      section?.type === "blog" || section?.type === "changelog"
+        ? [...bucket].sort(
+            (a, b) =>
+              new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
+          )
+        : bucket
+    const tree = buildArticleTree(sorted)
+    const groups = groupArticleTree(tree, sorted)
+    const flat = groups.flatMap(g => flattenArticleTree(g.nodes))
+    sectionArticleGroups.set(key, groups)
+    sectionFlatArticles.set(key, flat)
+    sectionFirstArticle.set(key, flat[0])
+  }
+}
+
+/** Find which config section an article path belongs to */
+export function currentSection(path: string) {
+  if (!configSections?.length) return undefined
+  return matchSection(path, configSections)
+}

package/build/website/content/tag.ts

@@ -0,0 +1,29 @@
+import { sectionFlatArticles, sortedArticles } from "./article.ts"
+
+const configSections = import.meta.env.CONFIG.sections
+
+/** Per-section tag → article paths mapping. Articles sorted by date descending. */
+export const sectionTags = new Map<string, Map<string, string[]>>()
+
+if (configSections?.length) {
+  for (const section of configSections) {
+    if (section.type !== "blog") continue
+    const flat = sectionFlatArticles.get(section.prefix) ?? []
+    const tagMap = new Map<string, string[]>()
+    for (const path of flat) {
+      const article = sortedArticles.find(a => a.path === path)
+      if (!article?.tags) continue
+      for (const tag of article.tags) {
+        const list = tagMap.get(tag)
+        if (list) {
+          list.push(path)
+        } else {
+          tagMap.set(tag, [path])
+        }
+      }
+    }
+    if (tagMap.size > 0) {
+      sectionTags.set(section.prefix, tagMap)
+    }
+  }
+}

package/build/website/content-collections.ts

@@ -11,8 +11,9 @@ import remarkDirective from "remark-directive"
 import remarkGemoji from "remark-gemoji"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
-import { z } from "zod"
 import { loadConfig } from "../actions/config/load.ts"
+import { buildChangelog, cacheIncludeGlob } from "../actions/changelog/build.ts"
+import { Article } from "./models/article.ts"
 import { pickDefaultIcon } from "./helpers/article-icon.ts"
 import slugify from "@sindresorhus/slugify"
 import remarkCustomHeadingId from "./plugins/remark-custom-heading-id.ts"
@@ -41,19 +42,34 @@ import {
   transformerNotations,
 } from "./plugins/shiki-line-highlight.ts"
 import { rehypeInlineCode } from "./plugins/rehype-inline-code.ts"
+import { rehypeTaskListA11y } from "./plugins/rehype-task-list-a11y.ts"
 import { transformerIcon } from "./plugins/shiki-icon.ts"
+import { resolveAssetPath } from "./helpers/resolve-asset-path.ts"
 import { resolveIncludes } from "./helpers/resolve-includes.ts"
 import { extractSearchText } from "./helpers/search-text.ts"
 import { extractToc } from "./helpers/toc.ts"
 
 const config = await loadConfig()
 
+const changelogSections =
+  config.sections?.filter(s => s.type === "changelog") ?? []
+for (const section of changelogSections) {
+  await buildChangelog(section, config)
+}
+
+const configInclude = Array.isArray(config.include)
+  ? config.include
+  : [config.include]
+const include = changelogSections.length
+  ? [...configInclude, cacheIncludeGlob()]
+  : configInclude
+
 // content-collections compiles this file to .content-collections/cache/;
 // going up 2 levels reconstructs the baseDirectory it uses for path resolution
 const baseDir = resolve(import.meta.dirname, "../..")
 const directory = relative(baseDir, config.root) || "."
 
-function toPathname(filePath: string) {
+function toPath(filePath: string) {
   const name = basename(filePath).replace(/\.\w+$/, "")
   return slugify(name)
 }
@@ -84,25 +100,20 @@ function extractTitle(content: string, path: string) {
 const articles = defineCollection({
   name: "articles",
   directory,
-  include: config.articles.include,
-  exclude: config.articles.exclude,
-  schema: z.object({
-    content: z.string(),
-    title: z.string().optional(),
-    description: z.string().optional(),
-    icon: z.string().optional(),
-    order: z.number().optional(),
-    pathname: z.string().optional(),
-  }),
+  include,
+  exclude: config.exclude,
+  schema: Article,
   transform: async (document, context) => {
-    const filePath = resolve(config.root, document._meta.filePath)
-    const content = resolveIncludes(document.content, filePath)
-    const title = document.title ?? extractTitle(content, document._meta.path)
-    const icon = document.icon ?? pickDefaultIcon(document._meta.path)
-    const pathname = document.pathname ?? toPathname(document._meta.filePath)
+    const patch = config.patches?.find(p => p.file === document._meta.filePath)
+    const doc = patch ? { ...document, ...patch.article } : document
+    const filePath = resolve(config.root, doc._meta.filePath)
+    const content = resolveIncludes(doc.content, filePath)
+    const title = doc.title ?? extractTitle(content, doc._meta.path)
+    const icon = doc.icon ?? pickDefaultIcon(doc._meta.path)
+    const path = doc.path ?? toPath(doc._meta.filePath)
     const mdx = await compileMDX(
       context,
-      { ...document, content },
+      { ...doc, content },
       {
         remarkPlugins: [
           remarkGfm,
@@ -125,7 +136,7 @@ const articles = defineCollection({
           [
             remarkImage,
             {
-              filePath: resolve(config.root, document._meta.filePath),
+              filePath: resolve(config.root, doc._meta.filePath),
               root: config.root,
             },
           ],
@@ -142,7 +153,18 @@ const articles = defineCollection({
           [
             rehypeShiki,
             {
-              themes: { light: "catppuccin-latte", dark: "catppuccin-mocha" },
+              themes: {
+                light: config.codeThemeLight,
+                dark: config.codeThemeDark,
+              },
+              // Darken catppuccin-latte's green (the colour used for strings and
+              // some comments) — the theme default #40A02B lands at 3.2:1 on the
+              // code-block background, below the WCAG AA 4.5:1 threshold.
+              colorReplacements: {
+                "catppuccin-latte": {
+                  "#40a02b": "#2a7e16",
+                },
+              },
               transformers: [
                 transformerTwoslash({ explicitTrigger: true }),
                 transformerIcon(),
@@ -155,20 +177,25 @@ const articles = defineCollection({
           rehypeInlineCode,
           rehypeSlug,
           rehypeKatex,
+          rehypeTaskListA11y,
         ],
       },
     )
-    const toc = extractToc(content)
+    const tocItems = extractToc(content)
     const searchText = extractSearchText(content)
-    const lastUpdated = getLastUpdated(document._meta.filePath)
+    const lastUpdated = getLastUpdated(doc._meta.filePath)
+    const image = doc.image
+      ? resolveAssetPath(doc.image, filePath, config.root)
+      : undefined
     return {
-      ...document,
-      filePath: document._meta.filePath,
+      ...doc,
+      file: doc._meta.filePath,
       lastUpdated,
+      image,
       title,
       icon,
-      pathname,
-      toc,
+      path,
+      tocItems,
       searchText,
       mdx,
     }

package/build/website/elements/sidebar.tsx

@@ -2,7 +2,7 @@
 import { mergeProps } from "@base-ui/react/merge-props"
 import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
-import { PanelLeftIcon } from "lucide-react"
+import { Menu } from "lucide-react"
 import * as React from "react"
 import { cn } from "../helpers/style.ts"
 import { useIsMobile } from "../hooks/media.ts"
@@ -265,7 +265,7 @@ function SidebarTrigger({
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <Menu />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )
@@ -469,7 +469,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:[&_svg]:stroke-[2.5] data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-primary/2 dark:data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:[&_svg]:stroke-[2.5] data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -673,7 +673,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:font-medium h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-primary/2 dark:data-active:bg-primary/5 data-active:border data-active:border-primary/20 data-active:text-primary data-active:font-medium h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
           className,
         ),
       },

package/build/website/env.d.ts

@@ -1,3 +1,7 @@
+interface ImportMetaEnv {
+  readonly CONFIG: import("../models/config.ts").WebsiteConfig
+}
+
 declare module "content-collections" {
   import type configuration from "./content-collections.ts"
   import type { GetTypeByName } from "@content-collections/core"

package/build/website/helpers/article-icon.ts

@@ -16,6 +16,7 @@ import {
   Rocket,
   Server,
   Shield,
+  SlidersHorizontal,
   Terminal,
   Webhook,
   Zap,
@@ -42,6 +43,7 @@ export const articleIcons: Record<
   rocket: Rocket,
   server: Server,
   shield: Shield,
+  "sliders-horizontal": SlidersHorizontal,
   terminal: Terminal,
   webhook: Webhook,
   zap: Zap,

package/build/website/helpers/article.ts

@@ -0,0 +1,90 @@
+import type { ArticleGroup, ArticleNode } from "../models/article.ts"
+
+/** Build a tree from a flat sorted list of articles based on path hierarchy */
+export function buildArticleTree(
+  articles: {
+    path: string
+    title: string
+    label?: string
+    icon: string
+  }[],
+) {
+  const nodeMap = new Map<string, ArticleNode>()
+
+  for (const article of articles) {
+    nodeMap.set(article.path, {
+      path: article.path,
+      title: article.title,
+      label: article.label,
+      icon: article.icon,
+      children: [],
+    })
+  }
+
+  const roots: ArticleNode[] = []
+
+  for (const article of articles) {
+    const node = nodeMap.get(article.path)
+    if (!node) continue
+    const trimmed = article.path.replace(/\/$/, "")
+    const lastSlash = trimmed.lastIndexOf("/")
+    const parentPath = lastSlash > 0 ? `${trimmed.slice(0, lastSlash)}/` : ""
+    const parent = parentPath ? nodeMap.get(parentPath) : undefined
+
+    if (parent) {
+      parent.children.push(node)
+    } else {
+      roots.push(node)
+    }
+  }
+
+  return roots
+}
+
+/**
+ * Partition root nodes into sidebar sections.
+ *
+ * Walks root nodes in sort order. A root whose article has a `group` field
+ * opens a new section; subsequent roots without `group` append to the current
+ * section. Roots before the first `group` field land in a single leading
+ * section with `name: undefined` (rendered without a label).
+ *
+ * `group` on non-root articles is ignored — only roots gate section boundaries.
+ */
+export function groupArticleTree(
+  tree: ArticleNode[],
+  articles: { path: string; group?: string }[],
+): ArticleGroup[] {
+  const groupByPathname = new Map<string, string | undefined>()
+  for (const article of articles) {
+    groupByPathname.set(article.path, article.group)
+  }
+
+  const sections: ArticleGroup[] = []
+  let current: ArticleGroup | undefined
+
+  for (const node of tree) {
+    const group = groupByPathname.get(node.path)
+    if (group) {
+      current = { name: group, nodes: [node] }
+      sections.push(current)
+    } else if (current) {
+      current.nodes.push(node)
+    } else {
+      current = { name: undefined, nodes: [node] }
+      sections.push(current)
+    }
+  }
+
+  return sections
+}
+
+/** Depth-first flatten of an article tree into a list of paths */
+export function flattenArticleTree(nodes: ArticleNode[]) {
+  const result: string[] = []
+  for (const node of nodes) {
+    result.push(node.path)
+    result.push(...flattenArticleTree(node.children))
+  }
+  return result
+}

package/build/website/helpers/changelog-source.ts

@@ -0,0 +1,16 @@
+/** Returns true if a changelog source string is a GitHub repo URL */
+export function isGitHubUrl(source: string) {
+  return /^(https?:\/\/)?(www\.)?github\.com\//.test(source)
+}
+
+/** Extract `{ owner, repo }` from a GitHub URL. Returns undefined if unparseable */
+export function parseGitHubRepo(source: string) {
+  const match = source.match(
+    /^(?:https?:\/\/)?(?:www\.)?github\.com\/([^/]+)\/([^/#?]+)/,
+  )
+  if (!match) return undefined
+  const owner = match[1]
+  const repo = match[2]?.replace(/\.git$/, "")
+  if (!owner || !repo) return undefined
+  return { owner, repo }
+}

package/build/website/helpers/changelog-source.unit.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vite-plus/test"
+import { isGitHubUrl, parseGitHubRepo } from "./changelog-source.ts"
+
+describe("isGitHubUrl", () => {
+  it("recognizes https github URLs", () => {
+    expect(isGitHubUrl("https://github.com/foo/bar")).toBe(true)
+  })
+
+  it("recognizes bare github.com URLs", () => {
+    expect(isGitHubUrl("github.com/foo/bar")).toBe(true)
+  })
+
+  it("rejects local paths", () => {
+    expect(isGitHubUrl("CHANGELOG.md")).toBe(false)
+    expect(isGitHubUrl("./CHANGELOG.md")).toBe(false)
+    expect(isGitHubUrl("docs/CHANGELOG.md")).toBe(false)
+  })
+})
+
+describe("parseGitHubRepo", () => {
+  it("extracts owner and repo from https URL", () => {
+    expect(parseGitHubRepo("https://github.com/datisthq/livemark")).toEqual({
+      owner: "datisthq",
+      repo: "livemark",
+    })
+  })
+
+  it("strips .git suffix", () => {
+    expect(parseGitHubRepo("https://github.com/foo/bar.git")).toEqual({
+      owner: "foo",
+      repo: "bar",
+    })
+  })
+
+  it("returns undefined for non-github input", () => {
+    expect(parseGitHubRepo("CHANGELOG.md")).toBeUndefined()
+  })
+})

package/build/website/helpers/dynamic-icon-resolver.tsx

@@ -0,0 +1,19 @@
+import { icons } from "lucide-react"
+
+function toPascalCase(name: string) {
+  return name
+    .split("-")
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("")
+}
+
+/** Resolves a Lucide icon by kebab-case name from the full registry */
+export default function DynamicIconResolver(props: {
+  name: string
+  className?: string
+}) {
+  const key = toPascalCase(props.name)
+  if (!(key in icons)) return null
+  const Icon = icons[key as keyof typeof icons]
+  return <Icon className={props.className} />
+}

package/build/website/helpers/dynamic-icon.tsx

@@ -0,0 +1,12 @@
+import { Suspense, lazy } from "react"
+
+const Resolver = lazy(() => import("./dynamic-icon-resolver.tsx"))
+
+/** Lazily loads and renders a Lucide icon by kebab-case name */
+export function DynamicIcon(props: { name: string; className?: string }) {
+  return (
+    <Suspense>
+      <Resolver {...props} />
+    </Suspense>
+  )
+}

package/build/website/helpers/favicon.ts

@@ -0,0 +1,7 @@
+/** Derive the MIME type for a favicon from its file extension */
+export function faviconType(href: string) {
+  if (href.endsWith(".svg")) return "image/svg+xml"
+  if (href.endsWith(".png")) return "image/png"
+  if (href.endsWith(".ico")) return "image/x-icon"
+  return undefined
+}

package/build/website/helpers/model.ts

@@ -0,0 +1,4 @@
+import { z } from "zod"
+
+/** Zod schema for a non-empty string (rejects ""). */
+export const nonEmptyString = z.string().min(1)

package/build/website/helpers/resolve-asset-path.ts

@@ -0,0 +1,9 @@
+import { dirname, relative, resolve } from "node:path"
+
+/** Resolve a relative asset path to an absolute URL serveable by Vite */
+export function resolveAssetPath(url: string, filePath: string, root: string) {
+  if (url.startsWith("http") || url.startsWith("/") || url.startsWith("data:"))
+    return url
+  const absolute = resolve(dirname(filePath), url)
+  return "/" + relative(root, absolute)
+}

package/build/website/helpers/section.ts

@@ -0,0 +1,50 @@
+import type { Section } from "../../models/section.ts"
+
+const DEFAULT_ICONS: Record<Section["type"], string> = {
+  article: "book-open",
+  blog: "rss",
+  changelog: "history",
+}
+
+/** Return the section's icon, falling back to a type-based default */
+export function sectionIcon(section: Pick<Section, "icon" | "type">) {
+  return section.icon ?? DEFAULT_ICONS[section.type]
+}
+
+/** Find the section whose prefix is the longest prefix of the article path */
+export function matchSection<S extends { prefix: string }>(
+  articlePath: string,
+  sections: S[],
+): S | undefined {
+  let best: S | undefined
+  let bestLen = 0
+  for (const section of sections) {
+    if (
+      articlePath.startsWith(section.prefix) &&
+      section.prefix.length > bestLen
+    ) {
+      best = section
+      bestLen = section.prefix.length
+    }
+  }
+  return best
+}
+
+/** Split articles into per-section buckets. Unmatched articles go to "__default__" */
+export function partitionBySection<T extends { path: string }>(
+  articles: T[],
+  sections: { prefix: string }[],
+): Map<string, T[]> {
+  const buckets = new Map<string, T[]>()
+  for (const article of articles) {
+    const section = matchSection(article.path, sections)
+    const key = section?.prefix ?? "__default__"
+    const bucket = buckets.get(key)
+    if (bucket) {
+      bucket.push(article)
+    } else {
+      buckets.set(key, [article])
+    }
+  }
+  return buckets
+}