Add handling for details & summary tags (collapsible sections)

components/text.js

@@ -125,7 +125,9 @@ export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, child
       return <Link id={props.id} target='_blank' rel={rel} href={href}>{children}</Link>
     },
     img: TextMediaOrLink,
-    embed: Embed
+    embed: Embed,
+    details: Details,
+    summary: Summary
   }), [outlawed, rel, TextMediaOrLink, topLevel])
 
   const carousel = useCarousel()
@@ -252,3 +254,19 @@ function P ({ children, node, onlyImages, somethingBefore, somethingAfter, ...pr
     </div>
   )
 }
+
+function Details ({ children, node, ...props }) {
+  return (
+    <details className={styles.details} {...props}>
+      {children}
+    </details>
+  )
+}
+
+function Summary ({ children, node, ...props }) {
+  return (
+    <summary className={styles.summary} {...props}>
+      {children}
+    </summary>
+  )
+}

components/text.module.css

@@ -436,4 +436,31 @@
     max-width: 480px;
     border-radius: 13px;
     overflow: hidden;
-}
+}
+
+/* Details/Summary styling */
+.details {
+    border: 1px solid rgba(220, 220, 220, 0.5);
+    border-radius: 4px;
+    padding: 1rem;
+    margin: calc(var(--grid-gap) * 0.5) 0;
+    transition: all 0.2s ease;
+}
+
+.details[open] {
+    border-color: rgba(249, 217, 94, 0.5);
+}
+
+.summary {
+    cursor: pointer;
+    color: rgba(220, 220, 220, 0.5);
+    transition: color 0.2s ease;
+}
+
+.details[open] > .summary {
+    color: rgba(249, 217, 94, 0.5);
+}
+
+.summary:hover {
+    color: #f9d95e;
+}