feat: multiple desc items in a single desc row

Author: Lancern

src/components/desc-list/Desc.astro

@@ -1,13 +1,19 @@
 ---
+interface Props {
+  kind?: string;
+}
 
+const { kind } = Astro.props;
+const hasKind = kind !== undefined;
 ---
 
 <div class="desc">
-  <div class="desc-item">
+  <div class="desc-items">
     <slot name="item" />
   </div>
   <div class="desc-content">
     <slot />
+    {hasKind ? <div class="desc-kind">({kind})</div> : <></>}
   </div>
 </div>
 
@@ -22,13 +28,19 @@
     padding-bottom: calc(var(--sl-content-gap-y) * 0.35);
   }
 
-  .desc-content {
+  .desc > .desc-content {
+    margin: 0;
+  }
+
+  .desc > .desc-content > .desc-kind {
+    font-size: var(--cppdoc-font-size-desc-kind);
+    color: var(--cppdoc-color-desc-kind);
     margin: 0;
   }
 </style>
 
 <style is:global>
-  .desc-item .revision-tag {
+  .desc-items .revision-tag {
     display: block;
   }
 </style>

src/components/desc-list/DescItem.astro

@@ -0,0 +1,27 @@
+---
+
+---
+
+<div class="desc-item">
+  <slot />
+</div>
+
+<style>
+  .desc-item {
+    margin: 0;
+    padding-top: calc(var(--sl-content-gap-y) * 0.35);
+    padding-bottom: calc(var(--sl-content-gap-y) * 0.35);
+  }
+
+  .desc-item:not(:first-of-type) {
+    border-top: 1px dashed var(--sl-color-gray-4);
+  }
+
+  .desc-item:first-of-type {
+    padding-top: 0;
+  }
+
+  .desc-item:last-of-type {
+    padding-bottom: 0;
+  }
+</style>

src/components/desc-list/index.ts

@@ -1,2 +1,3 @@
 export { default as Desc } from "./Desc.astro";
+export { default as DescItem } from "./DescItem.astro";
 export { default as DescList } from "./DescList.astro";

src/components/revision/RevisionBlock.astro

@@ -2,14 +2,21 @@
 import type { RevisionInfo } from "./types";
 import RevisionTags from "./RevisionTags.astro";
 
+type LayoutDirection = "h" | "v";
+
 interface Props extends RevisionInfo {
   noborder?: boolean;
+  dir?: LayoutDirection;
 }
 
 const { noborder } = Astro.props;
+const dir = Astro.props.dir ?? "h";
+
+const horizontal = dir === "h";
+const vertical = dir === "v";
 ---
 
-<div class:list={["revision", { noborder }]}>
+<div class:list={["revision", { noborder, horizontal, vertical }]}>
   <div class="revision-content">
     <slot />
   </div>
@@ -22,7 +29,6 @@ const { noborder } = Astro.props;
   .revision {
     display: flex;
     align-items: center;
-    column-gap: 1em;
   }
 
   .revision:not(.noborder) {
@@ -33,19 +39,24 @@ const { noborder } = Astro.props;
     padding-bottom: calc(var(--sl-content-gap-y) * 0.25);
   }
 
-  .revision > .revision-content {
+  .revision .revision-tags {
+    margin: 0;
+  }
+
+  .revision.horizontal {
+    column-gap: 1em;
+  }
+
+  .revision.horizontal > .revision-content {
     flex-grow: 1;
   }
 
-  .revision > .revision-tags {
+  .revision.horizontal > .revision-tags {
     flex-shrink: 0;
     flex-grow: 0;
-    margin-top: 0;
   }
 
-  .revision .revision-tag {
-    font-size: var(--cppdoc-font-size-revision);
-    color: var(--cppdoc-color-revision);
-    margin: 0;
+  .revision.vertical {
+    flex-direction: column;
   }
 </style>

src/content/docs/c/library/strings/byte/memcpy.mdx

@@ -7,7 +7,7 @@ cppdoc:
 import Behavior from "@components/Behavior.astro";
 import { CHeader } from "@components/header";
 import { Decl, DeclDoc } from "@components/decl-doc";
-import { Desc, DescList } from "@src/components/desc-list";
+import { Desc, DescItem, DescList } from "@src/components/desc-list";
 import Missing from "@components/Missing.astro";
 import { ParamDoc, ParamDocList } from "@components/param-doc";
 import { Revision, RevisionBlock } from "@components/revision";
@@ -155,3 +155,34 @@ dst = "\0\0\0\0\0yxyxy", r = 22
   - 7.21.2.1 The memcpy function (p: 325) 
 - C89/C90 standard (ISO/IEC 9899:1990): 
   - 4.11.2.1 The memcpy function
+
+## See also
+
+<DescList>
+  <Desc kind="function">
+    <DescItem slot="item">
+      <Revision noborder since="C23"><Missing>`memccpy`</Missing></Revision>
+    </DescItem>
+    copies one buffer to another, stopping after the specified delimiter
+  </Desc>
+
+  <Desc kind="function">
+    <DescItem slot="item">
+      <Missing>`memmove`</Missing>
+    </DescItem>
+    <DescItem slot="item">
+      <RevisionBlock noborder since="C11" dir="v"><Missing>`memmove_s`</Missing></RevisionBlock>
+    </DescItem>
+    moves one buffer to another
+  </Desc>
+
+  <Desc kind="function">
+    <DescItem slot="item">
+      <RevisionBlock noborder since="C95" dir="v"><Missing>`wmemcpy`</Missing></RevisionBlock>
+    </DescItem>
+    <DescItem slot="item">
+      <RevisionBlock noborder since="C11" dir="v"><Missing>`wmemcpy_s`</Missing></RevisionBlock>
+    </DescItem>
+    copies a certain amount of wide characters between two non-overlapping arrays
+  </Desc>
+</DescList>

src/styles/custom.css

@@ -6,6 +6,9 @@
   --cppdoc-color-revision: var(--sl-color-green);
   --cppdoc-font-size-revision: 0.8em;
 
+  --cppdoc-color-desc-kind: var(--sl-color-green);
+  --cppdoc-font-size-desc-kind: 0.8em;
+
   --cppdoc-color-missing-link: #cc6633;
   --cppdoc-color-well-def: var(--sl-color-green);
   --cppdoc-color-impl-def: var(--sl-color-blue);