fix(website): wrap the timeline, run integrations as a reel, fix blog cards

The timeline set six 15rem columns in a flex row with overflow-x:auto, which
needs 90rem and so scrolled sideways on any normal laptop. It is a wrapping
grid now, and the rule that carries the dots moves from the container onto
each item so a wrapped row still gets a line above it. Column gap is zero and
the items carry their own right padding, so the rule stays continuous.

Integrations move from a card grid to a reel. Any single integration is a weak
signal and the whole moving line is the strong one, so the count is doing the
argument. It pauses on hover and on keyboard focus, since the names are links.
The list grows from 8 to 26: Open WebUI, Dify, LibreChat, RAGFlow, Continue,
big-AGI, Nextcloud, Frigate, promptfoo, Mods, TypingMind, baibot, k8sgpt-
operator and others. Each was admitted only after opening that project's own
repository or docs and reading the line that names LocalAI. The ones that
failed that test are listed in the data file so nobody re-adds them.

The blog cards were hand-written, which is how one of them came to advertise
"Porting vLLM to C++", a post that does not exist, and how all three linked to
the blog index instead of an article. They range over the posts now.

The section intro used the "a changelog tells you what moved, these posts show
you what it does" shape, which is the standard machine-written antithesis. It
states what the posts contain instead, including the perplexity regression
that APEX costs, because publishing the price is the actual claim.

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
Assisted-by: Claude Code:claude-opus-5[1m]

Author: mudler

website/data/ecosystem.yaml

@@ -55,35 +55,107 @@ contributors:
 
 integrations:
   note: "These projects reference LocalAI in their own repository or documentation."
+  # Admission rule: the project's OWN repository or official docs must name
+  # LocalAI as a provider, backend or integration. A blog post saying so is not
+  # enough, and neither is a generic "any OpenAI-compatible server" line that
+  # never names us. Every entry below was opened and read before being added,
+  # and the quote that justifies it is in the pull request that added it.
+  #
+  # Deliberately excluded after checking: LiteLLM, n8n, Home Assistant core,
+  # BionicGPT, Semantic Kernel, Spring AI, Jan, CrewAI, Haystack, Onyx,
+  # SillyTavern, Portkey and Kong all have zero mentions in their own repos.
+  # PrivateGPT and Langflow name us only in passing comparisons or a tooltip.
+  # Tools4AI has a LocalAI processor whose methods return null.
   projects:
     - name: AnythingLLM
       by: Mintplex Labs
       url: https://github.com/Mintplex-Labs/anything-llm
       what: "Runs LocalAI as a model provider for its chat and document workspaces."
-    - name: langchain4j
-      url: https://github.com/langchain4j/langchain4j
-      what: "Ships a LocalAI module, so JVM applications can target it directly."
     - name: LangChain
       url: https://python.langchain.com/docs/integrations/providers/localai/
       what: "Documents LocalAI as a provider in the Python integrations."
+    - name: LlamaIndex
+      url: https://docs.llamaindex.ai/en/stable/examples/llm/localai/
+      what: "Documents LocalAI as an OpenAI-compatible LLM you can point it at."
+    - name: Open WebUI
+      url: https://docs.openwebui.com/getting-started/quick-start/connect-a-provider/starting-with-openai-compatible
+      what: "Connects to LocalAI as an OpenAI-compatible local server."
+    - name: Dify
+      by: LangGenius
+      url: https://marketplace.dify.ai/plugin/langgenius/localai
+      what: "Ships an official LocalAI plugin for inference and embeddings."
+    - name: LibreChat
+      url: https://www.librechat.ai/docs/configuration/librechat_yaml/object_structure/speech
+      what: "Uses LocalAI as a speech provider for text to speech."
+    - name: RAGFlow
+      by: InfiniFlow
+      url: https://ragflow.io/docs/supported_models
+      what: "Lists LocalAI as a model provider, and ships a driver for it including rerank."
     - name: Flowise
       by: FlowiseAI
       url: https://github.com/FlowiseAI/Flowise
       what: "Offers LocalAI as a node for chat and embeddings in its visual builder."
-    - name: AIKit
-      by: Sertac Ozercan
-      url: https://github.com/sozercan/aikit
-      what: "Builds fine-tuned models into images that serve through LocalAI."
+    - name: Continue
+      url: https://docs.continue.dev/customize/model-providers/top-level/openai
+      what: "Lists LocalAI among the OpenAI-compatible providers the editor can target."
+    - name: big-AGI
+      url: https://github.com/enricoros/big-AGI/blob/main/docs/config-local-localai.md
+      what: "Adds LocalAI as a model source, with its own setup page and env vars."
     - name: K8sGPT
       by: CNCF Sandbox
       url: https://docs.k8sgpt.ai/reference/providers/backend/
       what: "Lists LocalAI as an analysis backend, alongside Bedrock and Azure OpenAI."
-    - name: LlamaIndex
-      url: https://docs.llamaindex.ai/en/stable/examples/llm/localai/
-      what: "Documents LocalAI as an OpenAI-compatible LLM you can point it at."
+    - name: k8sgpt-operator
+      by: k8sgpt-ai
+      url: https://github.com/k8sgpt-ai/k8sgpt-operator
+      what: "Sets LocalAI as the backend on the K8sGPT custom resource, with no OpenAI secret."
+    - name: Nextcloud
+      url: https://apps.nextcloud.com/apps/integration_openai
+      what: "Points its text, image and speech features at a self-hosted LocalAI."
+    - name: Frigate
+      url: https://github.com/blakeblackshear/frigate/blob/dev/docs/docs/configuration/genai/config.md
+      what: "Names LocalAI as a server for its generative AI features."
+      # Present in the dev branch docs source; not yet on the published site.
     - name: Kairos
       url: https://github.com/kairos-io/kairos
       what: "Ships LocalAI as part of its immutable Linux distribution."
+    - name: AIKit
+      by: Sertac Ozercan
+      url: https://github.com/sozercan/aikit
+      what: "Builds fine-tuned models into images that serve through LocalAI."
+    - name: langchain4j
+      url: https://github.com/langchain4j/langchain4j
+      what: "Ships a LocalAI module, so JVM applications can target it directly."
+    - name: promptfoo
+      url: https://www.promptfoo.dev/docs/providers/localai/
+      what: "Provides a localai: prefix so evals run against chat, completion and embeddings."
+    - name: Mods
+      by: Charm
+      url: https://github.com/charmbracelet/mods
+      what: "Reads a LocalAI endpoint from its config, so the CLI pipes shell output to a local model."
+    - name: TypingMind
+      url: https://docs.typingmind.com/manage-and-connect-ai-models/local-ai
+      what: "Documents pointing a custom model endpoint at a LocalAI server."
+    - name: baibot
+      by: etke.cc
+      url: https://github.com/etkecc/baibot/blob/main/docs/providers.md
+      what: "Has a first-class localai provider for text, speech to text and text to speech."
+    - name: LLM Vision
+      by: Home Assistant
+      url: https://github.com/valentinfrlch/ha-llmvision
+      what: "Lists LocalAI as a provider for analysing camera images and video feeds."
+    - name: VoxInput
+      url: https://github.com/richiejp/VoxInput
+      what: "Sends desktop voice input to LocalAI for transcription and a realtime assistant."
+    - name: Obsidian BMO Chatbot
+      url: https://github.com/longy2k/obsidian-bmo-chatbot
+      what: "Lists LocalAI as a self-hosted endpoint for the note-taking chat plugin."
+    - name: ShellOracle
+      url: https://github.com/djcopley/ShellOracle
+      what: "Ships a LocalAI provider for turning natural language into shell commands."
+    - name: QA-Pilot
+      url: https://github.com/reid41/QA-Pilot
+      what: "Runs its repository chat against a LocalAI base URL."
 
 press:
   note: "Written about LocalAI, by people who do not work on it."

website/layouts/index.html

@@ -429,14 +429,22 @@ <h3 class="eco__h rv">{{ .Site.Params.contributors }} people have put code in th
     <p class="eco__names rv">Some of them do it from a desk at {{ delimit $co ", " " and " | safeHTML }}.
       Others from labs at {{ delimit $ac ", " " and " | safeHTML }}.</p>
     <p class="eco__note rv">That is where they work, not who sent them.
-      <a href="{{ .Site.Params.github }}/graphs/contributors">The commit history is public &#8599;</a></p>
+      <a href="{{ .Site.Params.github }}/graphs/contributors">Check out the full contributor list, 200+ and growing &#8599;</a></p>
 
-    <h3 class="eco__h rv mt3">And these projects integrate it</h3>
-    <p class="eco__note rv">Each one names LocalAI in its own repository or documentation.</p>
-    <div class="eco eco--int rv">
-      {{- range .Site.Data.ecosystem.integrations.projects }}
-      <a href="{{ .url }}"><b>{{ .name }}</b>{{ with .by }}<em>{{ . }}</em>{{ end }}<span>{{ .what }}</span></a>
-      {{- end }}
+    {{/* The list runs as a marquee because the count is the argument: any one
+         of these is a weak signal, and the whole moving line is the strong one.
+         It pauses on hover so the links stay usable. */}}
+    <h3 class="eco__h rv mt3">And many projects integrate it</h3>
+    <p class="eco__note rv">Click any name to see where they say so.</p>
+    <div class="reel reel--int rv">
+      <div class="reel__t">
+        {{- range .Site.Data.ecosystem.integrations.projects }}
+        <a href="{{ .url }}">{{ .name }}</a>
+        {{- end }}
+        {{- range .Site.Data.ecosystem.integrations.projects }}
+        <a href="{{ .url }}" tabindex="-1" aria-hidden="true">{{ .name }}</a>
+        {{- end }}
+      </div>
     </div>
     <p class="eco__aside rv">Using LocalAI at work? Add your organisation to
       <a href="{{ .Site.Params.github }}/blob/master/ADOPTERS.md">ADOPTERS.md</a>.</p>
@@ -491,15 +499,17 @@ <h3 class="eco__h rv mt3">Written about elsewhere</h3>
   <div class="shell">
     <div class="bars rv" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
     <p class="kicker rv">From the team</p>
-    <h2 class="rv mt1" style="max-width:20ch">Every release gets written up and demonstrated.</h2>
-    <p class="lede rv mt2">A changelog tells you what moved. These posts show you what it does, with a recording you can watch and a command you can run.</p>
+    <h2 class="rv mt1" style="max-width:22ch">We publish the numbers, including the ones that cost us.</h2>
+    <p class="lede rv mt2">APEX takes a 35B model from 64.6 GB to 12.2 GB, and from 30.4 to 74.4 tokens a second. Perplexity goes from 6.537 to 7.088. That trade is in the post too, with the command that produced it.</p>
+    {{/* Pulled from the posts themselves. The cards used to be hand-written,
+         which is how one of them ended up advertising a post that did not
+         exist, and how all three linked to the index instead of the article. */}}
     <div class="cards">
-      <a class="cd rv" href="/blog/"><p class="cd__k">Release · v4.8.0</p><h3>What landed in LocalAI 4.8</h3>
-        <p>The audio.cpp backend, Valkey vector search, configurable VAE tiling, and a faster realtime path.</p><span class="cd__go">Read the post →</span></a>
-      <a class="cd rv" href="/blog/"><p class="cd__k">Engineering</p><h3>Porting vLLM to C++</h3>
-        <p>What paged attention looks like without a Python runtime, and what it cost us to get there.</p><span class="cd__go">Read the post →</span></a>
-      <a class="cd rv" href="/blog/"><p class="cd__k">Benchmarks</p><h3>How APEX beats Q8_0 at a third of the size</h3>
-        <p>Per-tensor, per-layer precision for mixture-of-experts models, measured against the alternatives.</p><span class="cd__go">Read the post →</span></a>
+      {{- range first 3 (where .Site.RegularPages "Section" "blog") }}
+      <a class="cd rv" href="{{ .RelPermalink }}">
+        <p class="cd__k">{{ .Date.Format "2 January 2006" }}</p><h3>{{ .Title }}</h3>
+        <p>{{ .Params.summary | truncate 155 }}</p><span class="cd__go">Read the post →</span></a>
+      {{- end }}
     </div>
   </div>
 </section>

website/static/css/site.css

@@ -288,6 +288,15 @@ h2{font-size:clamp(2.1rem,5vw,3.9rem)}
 .reel span::before{content:"/ ";color:var(--cyan)}
 @keyframes roll{to{transform:translateX(-50%)}}
 
+/* Integrations reel. Same motion as the engines reel, but the items are links,
+   so it stops on hover or keyboard focus and the names stay clickable. */
+.reel--int .reel__t{animation-duration:64s}
+.reel--int:hover .reel__t,.reel--int:focus-within .reel__t{animation-play-state:paused}
+.reel--int a{font-family:'Geist Mono',monospace;font-size:.78rem;color:var(--dim);white-space:nowrap;
+  transition:color .18s}
+.reel--int a::before{content:"/ ";color:var(--cyan)}
+.reel--int a:hover,.reel--int a:focus-visible{color:var(--ink)}
+
 /* apex */
 .tw{overflow-x:auto;margin-top:2.2rem;border:1px solid var(--p-line);border-radius:8px;background:#fff}
 table{border-collapse:collapse;width:100%;min-width:640px;font-variant-numeric:tabular-nums}
@@ -344,10 +353,16 @@ tbody tr:hover td{background:rgba(95,205,228,.10)}
   letter-spacing:-.02em;color:var(--cyan);font-variant-numeric:tabular-nums}
 .big span{font-family:'Geist Mono',monospace;font-size:.58rem;letter-spacing:.11em;
   text-transform:uppercase;color:var(--faint)}
-.tl{margin-top:2.6rem;border-top:1px solid var(--line2);overflow-x:auto}
-.tl__t{display:flex;gap:0;min-width:min-content;padding-top:1.4rem}
-.tl__i{flex:0 0 15rem;padding:0 1.3rem 0 0;position:relative}
-.tl__i::before{content:"";position:absolute;left:0;top:-1.4rem;width:7px;height:7px;border-radius:50%;
+/* Six 15rem columns need 90rem, so the old flex row scrolled sideways on any
+   normal laptop. It wraps into a grid instead, and the rule that carried the
+   dots moves from the container onto each item so a wrapped row still gets a
+   line above it. */
+.tl{margin-top:2.6rem}
+/* Zero column gap so the borders of adjacent items meet and the rule reads as
+   one continuous line; the items carry their own right padding instead. */
+.tl__t{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:1.7rem 0}
+.tl__i{padding:1.4rem 1.3rem 0 0;position:relative;border-top:1px solid var(--line2)}
+.tl__i::before{content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
   background:var(--cyan);transform:translateY(-50%) scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
 .in .tl__i::before{transform:translateY(-50%) scale(1)}
 .tl__i:nth-child(1)::before{transition-delay:.05s}.tl__i:nth-child(2)::before{transition-delay:.13s}