From 487b051b4e1eedf5c236a991a275af75476a518e Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Jan 2026 18:09:35 -0500 Subject: [PATCH 01/11] feat(post-summary): update to SHINE styles --- .../components/post-summary/post-summary.less | 217 ++++++++++++++++++ packages/stacks-docs/_data/post-summary.json | 64 +++++- .../product/components/post-summary.html | 132 +++++++++++ 3 files changed, 412 insertions(+), 1 deletion(-) diff --git a/packages/stacks-classic/lib/components/post-summary/post-summary.less b/packages/stacks-classic/lib/components/post-summary/post-summary.less index c52328047f..1b74a5f635 100644 --- a/packages/stacks-classic/lib/components/post-summary/post-summary.less +++ b/packages/stacks-classic/lib/components/post-summary/post-summary.less @@ -1,3 +1,220 @@ +.s-psx { + @psx-container-sm: 28rem; + --_ps-stats-answers-bg: unset; + --_ps-stats-answers-fc: unset; + --_ps-stats-answers-fw: unset; + --_ps-stats-answers-icon-fc: unset; + --_ps-title-link-fc: var(--theme-secondary-600); + + // Conditional styles + // Note: we cannot use CSS custom properties for container query values + @container post-summary (width <= @psx-container-sm) { + .s-psx--sm-hide { + display: none !important; + } + .s-psx--sm-show { + display: flex !important; + } + } + + @container post-summary (width > @psx-container-sm) { + .s-psx--sm-hide { + display: flex !important; + } + .s-psx--sm-show { + display: none !important; + } + } + + // MODIFIERS + &&__answered { + --_ps-stats-answers-bg: var(--green-400); + --_ps-stats-answers-fc: var(--white); + --_ps-stats-answers-fw: 600; + --_ps-stats-answers-icon-fc: var(--green-400); + } + + &&__deleted { + background-color: var(--red-100); + } + + &&__deleted, + &&__ignored { + --_ps-ignored-bg: var(--black-100); + --_ps-ignored-fc: var(--black-400); + + &.s-psx__answered { + --_ps-stats-answers-bg: var(--_ps-ignored-bg); + --_ps-stats-answers-fc: var(--_ps-ignored-fc); + --_ps-stats-answers-icon-fc: var(--_ps-ignored-fc); + } + + * { + &:not(.s-badge):not(.s-popover):not(.s-tag):not(.s-psx--stats-answers):not(.s-psx--stats-bounty) { + background-color: transparent !important; + } + + color: var(--_ps-ignored-fc) !important; + } + + .s-avatar { + opacity: 0.5; + } + .s-user-card--rep .s-bling:before { + background-color: var(--_ps-ignored-fc) !important; + } + + .s-badge, + .s-tag, + .s-psx--stats-bounty { + background-color: var(--_ps-ignored-bg) !important; + border-color: var(--_ps-ignored-bg) !important; + color: var(--_ps-ignored-fc) !important; + } + } + + // Child components + & &--content { + display: flex; + flex-direction: column; + gap: var(--su6); + } + + & &--content-meta { + align-items: center; + color: var(--black-400); + display: flex; + flex-wrap: wrap; + font-size: var(--fs-caption); + gap: var(--su6); + } + + & &--content-meta-views { + &:before { + aspect-ratio: 1/1; + background-color: var(--black-300); + content: ""; + display: block; + height: var(--su4); + } + + align-items: center; + display: flex; + gap: var(--su6); + } + + & &--stats { + &.s-psx--sm-hide { + .s-psx--stats-answers { + background-color: var(--_ps-stats-answers-bg); + color: var(--_ps-stats-answers-fc); + font-weight: var(--_ps-stats-answers-fw); + + align-items: center; + display: flex; + gap: var(--su4); + justify-content: center; + padding: var(--su4); + } + + .s-psx--stats-bounty { + align-items: center; + background-color: var(--blue-400); + color: var(--white); + display: flex; + gap: var(--su2); + font-weight: 600; + justify-content: center; + padding: var(--su4); + } + + .s-psx--stats-votes { + align-items: center; + aspect-ratio: 1/1; + border: var(--su1) solid var(--black-200); + display: flex; + justify-content: center; + font-size: var(--fs-body2); + font-weight: 600; + padding: var(--su4); + width: calc(var(--su48) + var(--su8)); // 3.5rem + } + + flex-direction: column; + } + + &.s-psx--sm-show { + .s-psx--stats-answers--icon { + color: var(--_ps-stats-answers-icon-fc); + } + + align-items: center; + justify-content: center; + padding: var(--su4); + } + + .s-psx--stats-bounty { + align-items: center; + justify-content: center; + background-color: var(--blue-400); + color: var(--white); + display: flex; + gap: var(--su1); + padding: 0 calc(var(--su4) - var(--su1)); + } + + display: flex; + gap: var(--su6); + font-size: var(--fs-caption); + } + + & &--tags { + display: flex; + flex-wrap: wrap; + gap: var(--su4); + margin-top: var(--su2); + } + + & &--title { + display: flex; + gap: var(--su6); + } + + & &--title-link { + &:hover { + --_ps-title-link-fc: var(--theme-secondary-500); + + &:visited { + color: var(--theme-secondary-600); + } + } + + // TODO: Since custom property is not being applied for some reason, we're changing the color directly. Remove this once the custom property is fixed. + &:visited { + color: var(--theme-secondary-400); + } + + color: var(--_ps-title-link-fc); + display: flex; + font-size: var(--fs-body3); + font-weight: 600; + gap: var(--su16); + line-height: var(--lh-sm); + margin-top: var(--su2); + } + + // Container query setup + container-type: inline-size; + container-name: post-summary; + + color: var(--black-500); + display: flex; + gap: var(--su16); + padding: var(--su8); + position: relative; +} + +// Reference .s-post-summary { // --_ps-state-* are custom properties to broadly override colors for a given post summary state --_ps-bb: var(--su1) solid var(--bc-light); diff --git a/packages/stacks-docs/_data/post-summary.json b/packages/stacks-docs/_data/post-summary.json index 80f0c84491..d65c57147d 100644 --- a/packages/stacks-docs/_data/post-summary.json +++ b/packages/stacks-docs/_data/post-summary.json @@ -110,5 +110,67 @@ "applies": ".s-post-summary--meta", "description": "A container for tags and other taxonomy." } + ], + "examples": [ + { + "type": "Default", + "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", + "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", + "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], + "user": { + "avatar": "/assets/img/avatar-disgusted-16.svg", + "href": "#", + "reputation": 1, + "time": "2 hours ago", + "tooltip": "2026-01-09 12:15:39Z", + "username": "SofiaAlc" + }, + "answered": true, + "answers": 1, + "bounty": 50, + "views": 98, + "votes": "24", + "badge": { + "class": "s-badge__warning", + "text": "review", + "icon": "Eye16" + } + }, + { + "type": "Ignored", + "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", + "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", + "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], + "user": { + "avatar": "/assets/img/avatar-disgusted-16.svg", + "href": "#", + "reputation": 1, + "time": "2 hours ago", + "tooltip": "2026-01-09 12:15:39Z", + "username": "SofiaAlc" + }, + "answered": true, + "answers": 1, + "views": 98, + "votes": "24" + }, + { + "type": "Deleted", + "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", + "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", + "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], + "user": { + "avatar": "/assets/img/avatar-disgusted-16.svg", + "href": "#", + "reputation": 1, + "time": "2 hours ago", + "tooltip": "2026-01-09 12:15:39Z", + "username": "SofiaAlc" + }, + "answered": true, + "answers": 1, + "views": 98, + "votes": "24" + } ] -} \ No newline at end of file +} diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index 89da614064..86e88d98e6 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -5,6 +5,138 @@ description: The post summary component summarizes various content and associated meta data into a highly configurable component. tags: components --- + +
+ {% header "h2", "Examples" %} +
+ {% for example in post-summary.examples %} +

{{ example.type }}

+ {% assign modifier = "" %} + {% if example.type == "Ignored" %} + {% assign modifier = modifier | append: "s-psx__ignored" %} + {% elsif example.type == "Deleted" %} + {% assign modifier = modifier | append: "s-psx__deleted" %} + {% endif %} +
+
+
+{{ example.votes }}
+
+ {% if example.answered %} + {% icon "Answer16Fill" %} + {% else %} + {% icon "Answer16" %} + {% endif %} + {{ example.answers }} +
+ {% if example.bounty %} +
+ + + {{ example.bounty }} +
+ {% endif %} +
+
+
+ {% if example.badge %} + + {% if example.badge.icon %} + {% icon example.badge.icon %} + {% endif %} + {{ example.badge.text }} + + {% endif %} +
+
+
+ + + {{ example.user.username }} + + {{ example.user.username }} + + {% if example.user.reputation %} +
    +
  • + + reputation bling + + {{ example.user.reputation }} +
    • +
+ {% endif %} + {% if example.user.time %} + + + + {% endif %} +
+ +
+ +
+ {% icon "Vote16Up" %} + {{ example.votes }} +
+ +
+ {% if example.answered %} + {% icon "Answer16Fill", "s-psx--stats-answers--icon" %} + {% else %} + {% icon "Answer16" %} + {% endif %} + {{ example.answers }} +
+ + {% if example.bounty %} +
+ + + {{ example.bounty }} +
+ {% endif %} +
+
+ {{ example.views }} views +
+ {% if example.badge %} + + {% if example.badge.icon %} + {% icon example.badge.icon %} + {% endif %} + {{ example.badge.text }} + + {% endif %} +
+
+ + + {{ example.title }} + +
+
+ {{ example.excerpt }} +
+
+ {% for tag in example.tags %} + {{ tag }} + {% endfor %} +
+
+
+ {% endfor %} + + + + + + + + + + + + +
+
{% header "h2", "Classes" %}
From e7907e1462b612a161d805a2c78caf2e71d68040 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Jan 2026 18:13:50 -0500 Subject: [PATCH 02/11] rename s-psx to s-post-summary --- .../components/post-summary/post-summary.less | 493 +----------------- .../product/components/post-summary.html | 42 +- 2 files changed, 36 insertions(+), 499 deletions(-) diff --git a/packages/stacks-classic/lib/components/post-summary/post-summary.less b/packages/stacks-classic/lib/components/post-summary/post-summary.less index 1b74a5f635..22f3e2c4a2 100644 --- a/packages/stacks-classic/lib/components/post-summary/post-summary.less +++ b/packages/stacks-classic/lib/components/post-summary/post-summary.less @@ -1,4 +1,4 @@ -.s-psx { +.s-post-summary { @psx-container-sm: 28rem; --_ps-stats-answers-bg: unset; --_ps-stats-answers-fc: unset; @@ -9,19 +9,19 @@ // Conditional styles // Note: we cannot use CSS custom properties for container query values @container post-summary (width <= @psx-container-sm) { - .s-psx--sm-hide { + .s-post-summary--sm-hide { display: none !important; } - .s-psx--sm-show { + .s-post-summary--sm-show { display: flex !important; } } @container post-summary (width > @psx-container-sm) { - .s-psx--sm-hide { + .s-post-summary--sm-hide { display: flex !important; } - .s-psx--sm-show { + .s-post-summary--sm-show { display: none !important; } } @@ -43,30 +43,27 @@ --_ps-ignored-bg: var(--black-100); --_ps-ignored-fc: var(--black-400); - &.s-psx__answered { + &.s-post-summary__answered { --_ps-stats-answers-bg: var(--_ps-ignored-bg); --_ps-stats-answers-fc: var(--_ps-ignored-fc); --_ps-stats-answers-icon-fc: var(--_ps-ignored-fc); } * { - &:not(.s-badge):not(.s-popover):not(.s-tag):not(.s-psx--stats-answers):not(.s-psx--stats-bounty) { - background-color: transparent !important; - } - color: var(--_ps-ignored-fc) !important; } .s-avatar { opacity: 0.5; } + .s-user-card--rep .s-bling:before { background-color: var(--_ps-ignored-fc) !important; } .s-badge, .s-tag, - .s-psx--stats-bounty { + .s-post-summary--stats-bounty { background-color: var(--_ps-ignored-bg) !important; border-color: var(--_ps-ignored-bg) !important; color: var(--_ps-ignored-fc) !important; @@ -104,8 +101,8 @@ } & &--stats { - &.s-psx--sm-hide { - .s-psx--stats-answers { + &.s-post-summary--sm-hide { + .s-post-summary--stats-answers { background-color: var(--_ps-stats-answers-bg); color: var(--_ps-stats-answers-fc); font-weight: var(--_ps-stats-answers-fw); @@ -117,7 +114,7 @@ padding: var(--su4); } - .s-psx--stats-bounty { + .s-post-summary--stats-bounty { align-items: center; background-color: var(--blue-400); color: var(--white); @@ -128,7 +125,7 @@ padding: var(--su4); } - .s-psx--stats-votes { + .s-post-summary--stats-votes { align-items: center; aspect-ratio: 1/1; border: var(--su1) solid var(--black-200); @@ -143,8 +140,8 @@ flex-direction: column; } - &.s-psx--sm-show { - .s-psx--stats-answers--icon { + &.s-post-summary--sm-show { + .s-post-summary--stats-answers--icon { color: var(--_ps-stats-answers-icon-fc); } @@ -153,7 +150,7 @@ padding: var(--su4); } - .s-psx--stats-bounty { + .s-post-summary--stats-bounty { align-items: center; justify-content: center; background-color: var(--blue-400); @@ -213,463 +210,3 @@ padding: var(--su8); position: relative; } - -// Reference -.s-post-summary { - // --_ps-state-* are custom properties to broadly override colors for a given post summary state - --_ps-bb: var(--su1) solid var(--bc-light); - --_ps-bg: unset; - --_ps-o: unset; - // Child components - --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium)); - --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)))); - --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)))); - --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)))); - --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)))); - --_ps-stats-ai: flex-end; - --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light)); - --_ps-stats-fd: column; - --_ps-stats-w: calc(var(--su96) + var(--su12)); - // Stats item modifiers - --_ps-has-answers-bc: var(--green-400); - --_ps-has-answers-bg: unset; - --_ps-has-answers-fc: var(--green-400); - --_ps-has-accepted-answers-bc: var(--green-400); - --_ps-has-accepted-answers-bg: var(--green-400); - --_ps-has-accepted-answers-fc: var(--white); - --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark)); - - // CONTEXTUAL STYLES - #stacks-internals #screen-md({ - --_ps-stats-ai: center; - --_ps-stats-fd: row; - --_ps-stats-w: auto; - - flex-direction: column; - }); - - // MODIFIERS - &&__minimal, - & &--answer { - --_ps-stats-ai: center; - --_ps-stats-fd: row; - --_ps-stats-w: auto; - } - - &&__minimal { - .s-post-summary--content { - width: 100%; - } - - flex-direction: column; - } - - // VARIANTS - &&__deleted, - &&__ignored { - --_ps-o: 0.75; - --_ps-has-answers-bc: var(--black-350); - --_ps-has-answers-bg: transparent; - --_ps-has-answers-fc: var(--_ps-state-fc); - --_ps-has-accepted-answers-bc: transparent; - --_ps-has-accepted-answers-bg: var(--black-150); - --_ps-has-accepted-answers-fc: var(--_ps-state-fc); - --_ps-meta-tags-tag-bg: var(--black-150); - --_ps-meta-tags-tag-fc: var(--_ps-state-fc); - --_ps-state-fc: var(--black-400); - - .s-post-summary--meta-tags { - a, // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag` - .post-tag, - .s-tag { - &, - &:active, - &:hover, - &:focus, - .focus-bordered { - .highcontrast-mode({ - border-color: currentColor; - }); - - background-color: var(--_ps-meta-tags-tag-bg); - color: var(--black-500); - border-color: var(--black-300); - } - } - } - - .s-user-card { - a, - .s-user-card--link, - .s-user-card--rep, - .s-user-card--time { - color: var(--_ps-state-fc); - } - - .s-badge { - filter: grayscale(100%); - } - } - } - &&__deleted, - &&__watched { - background-color: var(--_ps-bg); - } - - &&__deleted { - --_ps-bg: var(--red-100); - --_ps-has-accepted-answers-bg: var(--black-200); - --_ps-has-accepted-answers-fc: var(--black-500); - --_ps-meta-tags-tag-bg: var(--black-200); - - .is-deleted, - .s-badge__danger.s-badge__filled { - .dark-mode({ - background-color: var(--red-600); - color: var(--white); - }); - - background-color: var(--red-500); - } - } - - &&__watched { - &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) { - --_ps-bg: var(--yellow-100); - --_ps-stats-fc: var(--black-400); - --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))); - --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))); - --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))); - --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))); - - .s-user-card { - a { - &:active, - &:hover { - color: var(--_ps-content-title-a-fc-hover); - } - - &:visited { - &:hover { - color: var(--_ps-content-title-a-fc-hover-visited); - } - - color: var(--_ps-content-title-a-fc-visited); - } - - color: var(--_ps-content-title-a-fc); - } - - .s-user-card--rep, - .s-user-card--time { - color: var(--black-500); - } - } - } - } - - &:last-child { - --_ps-bb: none; - } - - // Child Elements - & & { - &--answer { - & + & { - margin-top: var(--su16); - } - - &:before { - .highcontrast-mode({ - background: var(--black-500); - }); - - background: var(--black-250); - border-radius: var(--su8); - bottom: 0; - content: ""; - display: block; - left: 0; - position: absolute; - top: 0; - width: var(--su4); - } - - margin: var(--su16) 1em 0 1em; - padding: 0.5em 0 0.5em calc(1em + var(--su4)); - position: relative; - } - - &--answer-excerpt { - .v-truncate4; - color: var(--black-500); - margin-bottom: var(--su8); - } - - &--content { - > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta):not(.s-popover) { - opacity: var(--_ps-o); - } - - flex-grow: 1; - max-width: 100%; - } - - &--content-excerpt { - &.s-post-summary--content-excerpt { - &__sm { - .v-truncate1; - } - - &__md { - .v-truncate3; - } - - &__lg { - .v-truncate4; - } - } - - .break-word; - .v-truncate2; - color: var( --_ps-content-excerpt-fc); - font-family: var(--theme-post-body-font-family, var(--theme-body-font-family)); - margin-top: var(--sun2); - margin-bottom: var(--su8); - } - - &--content-menu-button { - .svg-icon { - margin: 0 !important; - } - - &, - &.s-btn { // To override .s-btn class attributes - padding: var(--su8); - position: absolute; - } - - right: var(--su8); - top: var(--su8); - } - - &--content-title { - a { - &:active, - &:hover { - color: var(--_ps-content-title-a-fc-hover); - } - &:visited { - &:hover { - color: var(--_ps-content-title-a-fc-hover-visited); - } - - color: var(--_ps-content-title-a-fc-visited); - } - - .break-word; - color: var(--_ps-content-title-a-fc); - font-family: var(--theme-post-title-font-family, var(--theme-body-font-family)); - } - - .iconShield { - color: var(--fc-light); - } - - .svg-icon { - position: relative; - top: var(--sun1); - vertical-align: text-bottom; // Optical alignment - } - - .break-word; - display: block; - font-size: var(--fs-body3); - font-weight: normal; - line-height: var(--lh-md); - margin-bottom: 0.3365rem; - margin-top: -0.125rem; // Optical alignment to compensate for title's containing block - padding-right: var(--su24); - } - - &--content-type { - .svg-icon { - color: var(--fc-light); - margin-left: var(--sun2); - } - - color: var(--fc-medium); - margin-bottom: var(--su4); - } - - &--meta { - > *:not(.s-post-summary--meta-tags):not(.s-user-card) > * { - opacity: var(--_ps-o); - } - - .s-user-card { - > *:not(.magic-popup) { - opacity: var(--_ps-o); - } - - flex-wrap: wrap; - justify-content: flex-end; - margin-left: auto; - } - - align-items: center; - column-gap: var(--su6); - display: flex; - flex-wrap: wrap; - justify-content: space-between; - row-gap: var(--su8); - } - - &--meta-tags { - > ul > li > a, - > a, - .post-tag, - .s-tag { - opacity: var(--_ps-o); - } - - display: flex; - flex-wrap: wrap; - gap: var(--su4); - } - - &--stats { - > *:not(.s-badge__danger) { - opacity: var(--_ps-o); - } - - align-items: var(--_ps-stats-ai); - color: var(--_ps-stats-fc); - flex-direction: var(--_ps-stats-fd); - width: var(--_ps-stats-w); - - display: flex; - flex-shrink: 0; - flex-wrap: wrap; - font-size: var(--fs-body1); - gap: var(--su6); - margin-bottom: var(--su4); - margin-right: var(--su16); - } - - &--stats-item { - &:not(.s-badge) { - &.is-deleted { - color: var(--white); - } - - align-items: center; - border: var(--su1) solid transparent; - display: inline-flex; - gap: 0.3em; - justify-content: center; - white-space: nowrap; - } - - &.s-badge { - font-size: var(--fs-body1); - line-height: var(--lh-md); - padding: var(--su2) var(--su4); - } - - &.has-answers, - &.has-bounty, // TODO DEPRECATED: Remove .has-bounty styling - &.is-archived, - &.is-closed, - &.is-deleted, - &.is-draft, - &.is-pinned, - &.is-published, - &.is-review { - border-radius: var(--br-md); - padding: var(--su2) var(--su4); - } - - &.has-answers { - &.has-accepted-answer { - background-color: var(--_ps-has-accepted-answers-bg); - border-color: var(--_ps-has-accepted-answers-bc); - color: var(--_ps-has-accepted-answers-fc); - } - - background-color: var(--_ps-has-answers-bg); - border: var(--su1) solid var(--_ps-has-answers-bc); - color: var(--_ps-has-answers-fc); - } - - &.has-bounty { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty` - background-color: var(--blue-500); - color: var(--white); - } - - // Hotness - &.is-warm { - color: var(--_ps-state-fc, var(--yellow-500)); - } - - &.is-hot { - color: var(--_ps-state-fc, var(--orange-500)); - } - - &.is-supernova { - color: var(--_ps-state-fc, var(--red-500)); - } - - // Status - &.is-archived { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon` - background-color: var(--black-225); - border-color: var(--black-500); - color: var(--black-600); - } - - &.is-closed { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon` - background-color: var(--red-300); - border-color: var(--red-500); - color: var(--red-600); - } - - &.is-draft { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon` - background-color: var(--blue-300); - border-color: var(--blue-500); - color: var(--blue-600); - } - - &.is-pinned { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon` - background-color: var(--black-500); - color: var(--white); - } - - &.is-published { - background-color: var(--black-150); - color: var(--black-600); - } - - &.is-review { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon` - background-color: var(--yellow-300); - border-color: var(--yellow-500); - color: var(--yellow-600); - } - - &__emphasized { - color: var(--_ps-stats-item-emphasized-fc); - } - } - - &--stats-item-number { - font-weight: 500; - } - - } - - background-color: var(--_ps-bg); - border-bottom: var(--_ps-bb); - - display: flex; - padding: var(--su16); - position: relative; -} diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index 86e88d98e6..a02414fe40 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -13,14 +13,14 @@

{{ example.type }}

{% assign modifier = "" %} {% if example.type == "Ignored" %} - {% assign modifier = modifier | append: "s-psx__ignored" %} + {% assign modifier = modifier | append: "s-post-summary__ignored" %} {% elsif example.type == "Deleted" %} - {% assign modifier = modifier | append: "s-psx__deleted" %} + {% assign modifier = modifier | append: "s-post-summary__deleted" %} {% endif %} -
-
-
+{{ example.votes }}
-
+
+
+
+{{ example.votes }}
+
{% if example.answered %} {% icon "Answer16Fill" %} {% else %} @@ -29,14 +29,14 @@

{{ example.type }}

{{ example.answers }}
{% if example.bounty %} -
+
+ {{ example.bounty }}
{% endif %}
-
-
+
+
{% if example.badge %} {% if example.badge.icon %} @@ -46,7 +46,7 @@

{{ example.type }}

 {% endif %}
-
+
@@ -71,16 +71,16 @@

{{ example.type }}

{% endif %}
-
+
-
+
{% icon "Vote16Up" %} {{ example.votes }}
-
+
{% if example.answered %} - {% icon "Answer16Fill", "s-psx--stats-answers--icon" %} + {% icon "Answer16Fill", "s-post-summary--stats-answers--icon" %} {% else %} {% icon "Answer16" %} {% endif %} @@ -88,17 +88,17 @@

{{ example.type }}

{% if example.bounty %} -
+
+ {{ example.bounty }}
{% endif %}
-
+
{{ example.views }} views
{% if example.badge %} - + {% if example.badge.icon %} {% icon example.badge.icon %} {% endif %} @@ -106,16 +106,16 @@

{{ example.type }}

 {% endif %}
-
- +
+ {{ example.title }}
-
+
{{ example.excerpt }}
-
+
{% for tag in example.tags %} {{ tag }} {% endfor %} From 8842530b2f0f9839b84b8332f054955725061334 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Jan 2026 18:18:39 -0500 Subject: [PATCH 03/11] Styling tweaks to ignored, deleted --- .../lib/components/post-summary/post-summary.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/stacks-classic/lib/components/post-summary/post-summary.less b/packages/stacks-classic/lib/components/post-summary/post-summary.less index 22f3e2c4a2..ebce6dc3c3 100644 --- a/packages/stacks-classic/lib/components/post-summary/post-summary.less +++ b/packages/stacks-classic/lib/components/post-summary/post-summary.less @@ -34,10 +34,6 @@ --_ps-stats-answers-icon-fc: var(--green-400); } - &&__deleted { - background-color: var(--red-100); - } - &&__deleted, &&__ignored { --_ps-ignored-bg: var(--black-100); @@ -46,7 +42,7 @@ &.s-post-summary__answered { --_ps-stats-answers-bg: var(--_ps-ignored-bg); --_ps-stats-answers-fc: var(--_ps-ignored-fc); - --_ps-stats-answers-icon-fc: var(--_ps-ignored-fc); + --_ps-stats-answers-icon-fc: var(--black-350); } * { @@ -70,6 +66,11 @@ } } + &&__deleted { + background-color: var(--red-100); + border: var(--su8) solid var(--red-100); + } + // Child components & &--content { display: flex; @@ -207,6 +208,5 @@ color: var(--black-500); display: flex; gap: var(--su16); - padding: var(--su8); position: relative; } From 9f33f49e168114349a13e78831f849036ad73867 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Jan 2026 18:23:09 -0500 Subject: [PATCH 04/11] Add docs todos --- .../product/components/post-summary.html | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index a02414fe40..2dc2de7a0f 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -5,7 +5,7 @@ description: The post summary component summarizes various content and associated meta data into a highly configurable component. tags: components --- - +
{% header "h2", "Examples" %}
@@ -137,6 +137,28 @@

{{ example.type }}

+ + + + + + + + + + + + + + + + + + + + + +
{% header "h2", "Classes" %}
From e1a1b3d2cfd23f534f6fb9a5ad4a781e4cf4c1fa Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Wed, 21 Jan 2026 15:00:40 -0500 Subject: [PATCH 05/11] Docs tweaks --- packages/stacks-docs/_data/post-summary.json | 115 +++---- .../product/components/post-summary.html | 292 ++++++++++++++++-- 2 files changed, 320 insertions(+), 87 deletions(-) diff --git a/packages/stacks-docs/_data/post-summary.json b/packages/stacks-docs/_data/post-summary.json index d65c57147d..ef929d0bdd 100644 --- a/packages/stacks-docs/_data/post-summary.json +++ b/packages/stacks-docs/_data/post-summary.json @@ -6,54 +6,29 @@ "description": "Base parent container for a post summary" }, { - "class": ".s-post-summary--stats", + "class": ".s-post-summary__answered", "applies": ".s-post-summary", - "description": "Container for the post summary stats" - }, - { - "class": ".s-post-summary--stats-item", - "applies": ".s-post-summary--stats", - "description": "Individual stat item within the stats container" - }, - { - "class": ".s-post-summary--stats-item-number", - "applies": ".s-post-summary--stats-item", - "description": "Container for applying styling to the number of a stat item" - }, - { - "class": ".s-post-summary--stats-item-unit", - "applies": ".s-post-summary--stats-item", - "description": "Container for applying styling to the unit of a stat item" - }, - { - "class": ".has-answers", - "applies": ".s-post-summary--stats-item", - "description": "Adds the styling necessary for a question with answers" - }, - { - "class": ".has-accepted-answer", - "applies": ".s-post-summary--stats-item", "description": "Adds the styling necessary for a question with accepted answers" }, { - "class": ".has-bounty", - "applies": ".s-post-summary--stats-item", - "description": "Styles the stats item appropriately to display a bounty" + "class": ".s-post-summary__deleted", + "applies": ".s-post-summary", + "description": "Adds the styling necessary for a deleted post" }, { - "class": ".is-warm", - "applies": ".s-post-summary--stats-item", - "description": "Styles post stats with a warm color" + "class": ".s-post-summary__ignored", + "applies": ".s-post-summary", + "description": "Adds the styling necessary for an ignored post" }, { - "class": ".is-hot", - "applies": ".s-post-summary--stats-item", - "description": "Warmer still, for more popular posts" + "class": ".s-post-summary--sm-hide", + "applies": ".s-post-summary", + "description": "Hides the stats container on small screens" }, { - "class": ".is-supernova", - "applies": ".s-post-summary--stats-item", - "description": "Paired with a fire icon, these are the most popular stats" + "class": ".s-post-summary--sm-show", + "applies": ".s-post-summary", + "description": "Shows the stats container on small screens" }, { "class": ".s-post-summary--content", @@ -61,59 +36,63 @@ "description": "Container for the post summary content" }, { - "class": ".s-post-summary--content-type", + "class": ".s-post-summary--content-title", "applies": ".s-post-summary--content", - "description": "A container for various content types, eg. How-to guide on Articles" + "description": "Post title styling" }, { - "class": ".s-post-summary--content-title", + "class": ".s-post-summary--content-meta", "applies": ".s-post-summary--content", - "description": "Post title styling" + "description": "A container for post meta data, things like tags and user cards." + }, + { + "class": ".s-post-summary--content-meta-views", + "applies": ".s-post-summary--content-meta", + "description": "A container for views and other meta data." }, { "class": ".s-post-summary--content-excerpt", "applies": ".s-post-summary--content", - "description": "An optional content excerpt truncated at 2 lines." + "description": "Container for the post summary excerpt" }, { - "class": ".s-post-summary--content-excerpt__sm", - "applies": ".s-post-summary--content-excerpt", - "description": "An optional content excerpt truncated at 1 line." + "class": ".s-post-summary--stats", + "applies": ".s-post-summary", + "description": "Container for the post summary stats" }, { - "class": ".s-post-summary--content-excerpt__md", - "applies": ".s-post-summary--content-excerpt", - "description": "An optional content excerpt truncated at 3 lines." + "class": ".s-post-summary--stats-answers", + "applies": ".s-post-summary--stats", + "description": "Container for the post summary answers" }, { - "class": ".s-post-summary--answer", - "applies": ".s-post-summary--content", - "description": "Adds blockquote styling and spacing for answer previews" + "class": ".s-post-summary--stats-bounty", + "applies": ".s-post-summary--stats", + "description": "Container for the post summary bounty" }, { - "class": ".s-post-summary--answer-excerpt", - "applies": ".s-post-summary--content", - "description": "Provides padding, and truncation to 4 lines." + "class": ".s-post-summary--stats-votes", + "applies": ".s-post-summary--stats", + "description": "Container for the post summary votes" }, { - "class": ".s-post-summary--content-menu-button", - "applies": ".s-post-summary--content", - "description": "An optional button for displaying a post-specific menu." + "class": ".s-post-summary--tags", + "applies": ".s-post-summary", + "description": "Container for the post summary tags" }, { - "class": ".s-post-summary--meta", - "applies": ".s-post-summary--content", - "description": "A container for post meta data, things like tags and user cards." + "class": ".s-post-summary--title", + "applies": ".s-post-summary", + "description": "Container for the post summary title" }, { - "class": ".s-post-summary--meta-tags", - "applies": ".s-post-summary--meta", - "description": "A container for tags and other taxonomy." + "class": ".s-post-summary--title-link", + "applies": ".s-post-summary--title", + "description": "Link styling for the post summary title" } ], - "examples": [ + "base": [ { - "type": "Default", "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], @@ -135,7 +114,9 @@ "text": "review", "icon": "Eye16" } - }, + } + ], + "states": [ { "type": "Ignored", "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", diff --git a/packages/stacks-docs/product/components/post-summary.html b/packages/stacks-docs/product/components/post-summary.html index 2dc2de7a0f..b05d26363c 100644 --- a/packages/stacks-docs/product/components/post-summary.html +++ b/packages/stacks-docs/product/components/post-summary.html @@ -139,26 +139,6 @@

{{ example.type }}

- - - - - - - - - - - - - - - - - - - -
{% header "h2", "Classes" %}
@@ -182,6 +162,278 @@

{{ example.type }}

+ + +
+ {% header "h2", "Examples" %} + {% header "h3", "Base" %} +
+{% highlight html %} +
+ … +
+{% endhighlight %} +
+ {% for example in post-summary.base %} + {% assign modifier = "" %} + {% if example.type == "Ignored" %} + {% assign modifier = modifier | append: "s-post-summary__ignored" %} + {% elsif example.type == "Deleted" %} + {% assign modifier = modifier | append: "s-post-summary__deleted" %} + {% endif %} +
+
+
+{{ example.votes }}
+
+ {% if example.answered %} + {% icon "Answer16Fill" %} + {% else %} + {% icon "Answer16" %} + {% endif %} + {{ example.answers }} +
+ {% if example.bounty %} +
+ + + {{ example.bounty }} +
+ {% endif %} +
+
+
+ {% if example.badge %} + + {% if example.badge.icon %} + {% icon example.badge.icon %} + {% endif %} + {{ example.badge.text }} + + {% endif %} +
+
+
+ + + {{ example.user.username }} + + {{ example.user.username }} + + {% if example.user.reputation %} +
    +
  • + + reputation bling + + {{ example.user.reputation }} +
    • +
+ {% endif %} + {% if example.user.time %} + + + + {% endif %} +
+ +
+ +
+ {% icon "Vote16Up" %} + {{ example.votes }} +
+ +
+ {% if example.answered %} + {% icon "Answer16Fill", "s-post-summary--stats-answers--icon" %} + {% else %} + {% icon "Answer16" %} + {% endif %} + {{ example.answers }} +
+ + {% if example.bounty %} +
+ + + {{ example.bounty }} +
+ {% endif %} +
+
+ {{ example.views }} views +
+ {% if example.badge %} + + {% if example.badge.icon %} + {% icon example.badge.icon %} + {% endif %} + {{ example.badge.text }} + + {% endif %} +
+
+ + + {{ example.title }} + +
+
+ {{ example.excerpt }} +
+
+ {% for tag in example.tags %} + {{ tag }} + {% endfor %} +
+
+
+ {% endfor %} +
+
+
+ + +
+ {% header "h3", "States" %} +
+{% highlight html %} + + + + + + + + +
+ … +
+{% endhighlight %} +
+ {% for example in post-summary.states %} + {% assign modifier = "" %} + {% if example.type == "Ignored" %} + {% assign modifier = modifier | append: "s-post-summary__ignored" %} + {% elsif example.type == "Deleted" %} + {% assign modifier = modifier | append: "s-post-summary__deleted" %} + {% endif %} +
+
+
+{{ example.votes }}
+
+ {% if example.answered %} + {% icon "Answer16Fill" %} + {% else %} + {% icon "Answer16" %} + {% endif %} + {{ example.answers }} +
+ {% if example.bounty %} +
+ + + {{ example.bounty }} +
+ {% endif %} +
+
+
+ {% if example.badge %} + + {% if example.badge.icon %} + {% icon example.badge.icon %} + {% endif %} + {{ example.badge.text }} + + {% endif %} +
+
+
+ + + {{ example.user.username }} + + {{ example.user.username }} + + {% if example.user.reputation %} +
    +
  • + + reputation bling + + {{ example.user.reputation }} +
    • +
+ {% endif %} + {% if example.user.time %} + + + + {% endif %} +
+ +
+ +
+ {% icon "Vote16Up" %} + {{ example.votes }} +
+ +
+ {% if example.answered %} + {% icon "Answer16Fill", "s-post-summary--stats-answers--icon" %} + {% else %} + {% icon "Answer16" %} + {% endif %} + {{ example.answers }} +
+ + {% if example.bounty %} +
+ + + {{ example.bounty }} +
+ {% endif %} +
+
+ {{ example.views }} views +
+ {% if example.badge %} + + {% if example.badge.icon %} + {% icon example.badge.icon %} + {% endif %} + {{ example.badge.text }} + + {% endif %} +
+
+ + + {{ example.title }} + +
+
+ {{ example.excerpt }} +
+
+ {% for tag in example.tags %} + {{ tag }} + {% endfor %} +
+
+
+ {% endfor %} +
+
+
+ + + + + + + + +
{% header "h2", "Layout Examples" %}

Post summaries are a flexible component capable of previewing various content types—questions or articles. Post summaries are meant to be flexible, allowing for each individual piece to be removed. Let’s start with a full example of a few questions and an article interleaved.

From 808cca452a19d64011bd9aede08e75379461df92 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Fri, 23 Jan 2026 17:02:41 -0500 Subject: [PATCH 06/11] docs updates; inline answers; and more! --- .../components/post-summary/post-summary.less | 62 +- packages/stacks-docs/_data/post-summary.json | 181 +- .../stacks-docs/_includes/layouts/page.html | 2 +- .../_includes/post-summary-item.html | 191 ++ .../assets/less/stacks-documentation.less | 3 +- .../product/components/post-summary.html | 2352 +---------------- 6 files changed, 497 insertions(+), 2294 deletions(-) create mode 100644 packages/stacks-docs/_includes/post-summary-item.html diff --git a/packages/stacks-classic/lib/components/post-summary/post-summary.less b/packages/stacks-classic/lib/components/post-summary/post-summary.less index ebce6dc3c3..eb76b26075 100644 --- a/packages/stacks-classic/lib/components/post-summary/post-summary.less +++ b/packages/stacks-classic/lib/components/post-summary/post-summary.less @@ -1,5 +1,9 @@ .s-post-summary { @psx-container-sm: 28rem; + --_ps-answer-icon-fc: unset; + --_ps-content-type-bc: var(--black-200); + --_ps-content-type-bg: var(--black-050); + --_ps-content-type-fc: var(--black-600); --_ps-stats-answers-bg: unset; --_ps-stats-answers-fc: unset; --_ps-stats-answers-fw: unset; @@ -35,7 +39,7 @@ } &&__deleted, - &&__ignored { + &:has(.s-tag.s-tag__ignored) { --_ps-ignored-bg: var(--black-100); --_ps-ignored-fc: var(--black-400); @@ -72,6 +76,38 @@ } // Child components + .s-tag.s-tag__watched { + --_ta-bc: var(--yellow-200); + --_ta-bg: var(--yellow-200); + --_ta-fc: var(--yellow-600); + --_ta-bc-hover: var(--yellow-200); + --_ta-bg-hover: var(--yellow-200); + } + + // TODO SHINE complete answers styling + & &--answers { + display: flex; + flex-direction: column; + gap: var(--su16); + padding-top: calc(var(--su8) + var(--su2)); // 10px + } + + & &--answer { + &__accepted { + --_ps-answer-icon-fc: var(--green-400); + } + + .s-post-summary--stats-answers--icon { + color: var(--_ps-answer-icon-fc); + } + + border-left: var(--su4) solid var(--black-150); + display: flex; + flex-direction: column; + gap: var(--su6); + padding-left: var(--su8); + } + & &--content { display: flex; flex-direction: column; @@ -101,6 +137,28 @@ gap: var(--su6); } + & &--content-type { + &:focus-visible { + .focus-styles(); + } + + &:hover { + --_ps-content-type-bc: var(--black-150); + --_ps-content-type-bg: var(--black-100); + --_ps-content-type-fc: var(--black-600); + } + + border: var(--su-static1) solid var(--_ps-content-type-bc); + background-color: var(--_ps-content-type-bg); + color: var(--_ps-content-type-fc); + + display: flex; + align-items: center; + gap: var(--su4); + padding: 0 var(--su4); + font-size: var(--fs-caption); + } + & &--stats { &.s-post-summary--sm-hide { .s-post-summary--stats-answers { @@ -188,6 +246,8 @@ } // TODO: Since custom property is not being applied for some reason, we're changing the color directly. Remove this once the custom property is fixed. + // I suspect this is because of restrictions on the `:visited` pseudo-class. + // See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:visited#privacy_restrictions &:visited { color: var(--theme-secondary-400); } diff --git a/packages/stacks-docs/_data/post-summary.json b/packages/stacks-docs/_data/post-summary.json index ef929d0bdd..aa64f7fb71 100644 --- a/packages/stacks-docs/_data/post-summary.json +++ b/packages/stacks-docs/_data/post-summary.json @@ -15,11 +15,6 @@ "applies": ".s-post-summary", "description": "Adds the styling necessary for a deleted post" }, - { - "class": ".s-post-summary__ignored", - "applies": ".s-post-summary", - "description": "Adds the styling necessary for an ignored post" - }, { "class": ".s-post-summary--sm-hide", "applies": ".s-post-summary", @@ -30,6 +25,16 @@ "applies": ".s-post-summary", "description": "Shows the stats container on small screens" }, + { + "class": ".s-post-summary--answers", + "applies": ".s-post-summary", + "description": "Container for the post summary answers" + }, + { + "class": ".s-post-summary--answer", + "applies": ".s-post-summary--answers", + "description": "Container for the post summary answer" + }, { "class": ".s-post-summary--content", "applies": ".s-post-summary", @@ -92,66 +97,132 @@ } ], "base": [ + {}, + { + "answered": true + }, + { + "bounty": 50 + } + ], + "small": [ + { + "excerptLines": 2 + }, { - "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", - "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", - "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], - "user": { - "avatar": "/assets/img/avatar-disgusted-16.svg", - "href": "#", - "reputation": 1, - "time": "2 hours ago", - "tooltip": "2026-01-09 12:15:39Z", - "username": "SofiaAlc" - }, "answered": true, - "answers": 1, + "excerptLines": 2 + }, + { "bounty": 50, - "views": 98, - "votes": "24", + "excerptLines": 2 + } + ], + "ignored": { + "tags": [ + { + "text": "retrieval-augmented-generation", + "ignored": true + }, + "langchain", + "llm", + "vector-database", + "ai" + ], + "answered": true, + "bounty": 50 + }, + "watched": { + "tags": [ + { + "text": "retrieval-augmented-generation", + "watched": true + }, + "langchain", + "llm", + "vector-database", + "ai" + ], + "answered": true + }, + "deleted": { + "answered": true, + "modifier": "s-post-summary__deleted" + }, + "states": [ + { + "badge": { + "class": "s-badge__info", + "text": "Draft", + "icon": "Compose" + } + }, + { "badge": { "class": "s-badge__warning", - "text": "review", - "icon": "Eye16" + "text": "Review", + "icon": "Eye" + } + }, + { + "badge": { + "class": "s-badge__danger", + "text": "Closed", + "icon": "Flag" + } + }, + { + "badge": { + "text": "Archived", + "icon": "Document" + } + }, + { + "badge": { + "class": "s-badge__tonal", + "text": "Pinned", + "icon": "Key" } } ], - "states": [ + "contentTypes": [ + { + "type": "Announcement" + }, + { + "type": "How to guide" + }, + { + "type": "Knowledge article" + }, + { + "type": "Policy" + } + ], + "excerptSizes": [ + { + "excerptLines": 0 + }, + { + "excerptLines": 1 + }, + { + "excerptLines": 2 + }, + { + "excerptLines": 3 + } + ], + "answered": [ { - "type": "Ignored", - "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", - "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", - "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], - "user": { - "avatar": "/assets/img/avatar-disgusted-16.svg", - "href": "#", - "reputation": 1, - "time": "2 hours ago", - "tooltip": "2026-01-09 12:15:39Z", - "username": "SofiaAlc" - }, - "answered": true, - "answers": 1, - "views": 98, - "votes": "24" - }, - { - "type": "Deleted", - "title": "How to reduce hallucinations and improve source relevance in a RAG pipeline?", - "excerpt": "I have built a Retrieval-Augmented Generation (RAG) system using LangChain, a vector database, and an open-source LLM. While it works reasonably well, the model often hallucinates answers or cites sources that are only tangentially related to the user's query. My chunking strategy is set to a chunk size of 1000 tokens, which seems to be the sweet spot for the model.", - "tags": ["retrieval-augmented-generation", "langchain", "llm", "vector-database", "ai"], - "user": { - "avatar": "/assets/img/avatar-disgusted-16.svg", - "href": "#", - "reputation": 1, - "time": "2 hours ago", - "tooltip": "2026-01-09 12:15:39Z", - "username": "SofiaAlc" - }, "answered": true, - "answers": 1, - "views": 98, - "votes": "24" + "answerCount": 2, + "answers": [ + { + "accepted": true + }, + {} + ] } ] } diff --git a/packages/stacks-docs/_includes/layouts/page.html b/packages/stacks-docs/_includes/layouts/page.html index 1d33e36487..5d6dde584e 100644 --- a/packages/stacks-docs/_includes/layouts/page.html +++ b/packages/stacks-docs/_includes/layouts/page.html @@ -208,7 +208,7 @@

{{ title }}

{% if hide-menu != true %}