{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "post",
  "name": "Social post",
  "category": "Data display",
  "description": "A post in a feed: author, time, text, media and like / reply / repost / share actions with counts.",
  "tags": [
    "post",
    "social",
    "feed",
    "tweet",
    "status",
    "like",
    "comment",
    "share",
    "timeline",
    "social media"
  ],
  "requiresJs": true,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "social post",
      "feed item",
      "like and share",
      "status update"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/post",
  "markdownUrl": "https://mian.ro/ai/components/post.md",
  "classes": [
    {
      "name": "mn-post",
      "description": "The post. Add mn-card for the noodle’s surface."
    },
    {
      "name": "mn-post-head",
      "description": "Name, handle and <time>."
    },
    {
      "name": "mn-post-body",
      "description": "The text."
    },
    {
      "name": "mn-post-actions",
      "description": "The action row."
    },
    {
      "name": "mn-post-action",
      "description": "An action button. aria-pressed makes it a toggle (like, repost); data-mn-count keeps its number in step; data-kind=\"repost\" colours it green."
    }
  ],
  "accessibility": [
    "Wrap each post in <article> with an accessible name (the author).",
    "Toggles use aria-pressed; a visually hidden word before the count gives each a full name, e.g. “Like, 128”."
  ],
  "examples": [
    {
      "title": "Post",
      "description": null,
      "html": "<article class=\"mn-card mn-post\" style=\"max-width:34rem\" aria-label=\"Post by Ilinca Sava\">\n  <span class=\"mn-avatar\" aria-hidden=\"true\">IS</span>\n  <p class=\"mn-post-head\"><strong>Ilinca Sava</strong><span>@ilinca</span><span aria-hidden=\"true\">·</span><time datetime=\"2026-09-25T08:40\">2 h</time></p>\n  <p class=\"mn-post-body\">Spent a month on a stool at a noodle counter. The cook decides once how far apart his hands go, and every strand follows. Best design system I have ever seen.</p>\n  <div class=\"mn-media\" style=\"--ratio:16/9\"><svg viewBox=\"0 0 600 360\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" aria-label=\"A running route drawn over a street grid\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"600\" height=\"360\" fill=\"var(--mn-surface-2)\"/>\n<g stroke=\"color-mix(in srgb, var(--mn-fg) 10%, transparent)\" stroke-width=\"10\">\n  <path d=\"M0 80h600M0 190h600M0 300h600M90 0v360M230 0v360M380 0v360M520 0v360\"/>\n</g>\n<path d=\"M300 360c40-80 60-110 150-120\" stroke=\"color-mix(in srgb, var(--mn-info) 45%, transparent)\" stroke-width=\"22\" fill=\"none\" stroke-linecap=\"round\"/>\n<path d=\"M120 292c-30-60-20-140 40-176s150-40 206-10 120 70 112 132-70 84-150 70-116-8-150 14-44-10-58-30\" fill=\"none\" stroke=\"var(--mn-primary)\" stroke-width=\"6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<circle cx=\"120\" cy=\"292\" r=\"10\" fill=\"var(--mn-bg)\" stroke=\"var(--mn-primary)\" stroke-width=\"5\"/>\n<circle cx=\"478\" cy=\"246\" r=\"7\" fill=\"var(--mn-accent)\"/></svg></div>\n  <div class=\"mn-post-actions\">\n    <button class=\"mn-post-action\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 12a8 8 0 0 1-11.5 7.2L4 20l.9-4.6A8 8 0 1 1 21 12Z\"/></svg><span class=\"mn-sr-only\">Reply, </span><span>14</span></button>\n    <button class=\"mn-post-action\" type=\"button\" data-kind=\"repost\" aria-pressed=\"false\" data-mn-count=\"31\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m17 2 4 4-4 4\"/><path d=\"M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4\"/><path d=\"M21 13v2a3 3 0 0 1-3 3H3\"/></svg><span class=\"mn-sr-only\">Repost, </span><span>31</span></button>\n    <button class=\"mn-post-action\" type=\"button\" aria-pressed=\"true\" data-mn-count=\"127\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg><span class=\"mn-sr-only\">Like, </span><span>128</span></button>\n    <button class=\"mn-post-action\" type=\"button\" aria-label=\"Share\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13\"/></svg></button>\n  </div>\n</article>"
    }
  ],
  "css": ".mn-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; padding: 1rem 1.1rem .6rem; }\n.mn-post > .mn-avatar { grid-row: span 4; }\n.mn-post > :not(.mn-avatar) { grid-column: 2; min-width: 0; margin: 0; }\n.mn-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; font-size: var(--mn-text-sm); line-height: 1.3; }\n.mn-post-head strong { font-weight: 600; }\n.mn-post-head span, .mn-post-head time { color: var(--mn-muted); }\n.mn-post-body { font-size: .9688rem; line-height: 1.55; overflow-wrap: anywhere; }\n.mn-post > .mn-media { margin-top: .6rem; }\n.mn-post-actions { display: flex; flex-wrap: wrap; gap: .15rem; margin-inline-start: -.55rem !important; margin-top: .2rem !important; }\n.mn-post-action {\n  display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .6rem; border: 0; border-radius: 999px;\n  background: none; color: var(--mn-muted); font: 500 .8125rem/1 var(--mn-font); font-variant-numeric: tabular-nums; cursor: pointer;\n  transition: color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-post-action svg { width: 1.1rem; height: 1.1rem; }\n.mn-post-action:hover { background: var(--mn-hover); color: var(--mn-fg); }\n.mn-post-action[aria-pressed=\"true\"] { color: var(--mn-danger-text); }\n.mn-post-action[aria-pressed=\"true\"] svg { fill: currentColor; }\n.mn-post-action[data-kind=\"repost\"][aria-pressed=\"true\"] { color: var(--mn-success-text); }\n.mn-post-action[data-kind=\"repost\"][aria-pressed=\"true\"] svg { fill: none; }",
  "js": "/* <button class=\"mn-post-action\" aria-pressed=\"false\" data-mn-count=\"12\">\n   Toggles aria-pressed and keeps the visible count (the first <span>) in\n   step. Emits mn:change { pressed, count }. */\ndocument.addEventListener('click', (e) => {\n  const b = e.target.closest('.mn-post-action[aria-pressed]');\n  if (!b) return;\n  const on = b.getAttribute('aria-pressed') !== 'true';\n  b.setAttribute('aria-pressed', String(on));\n  const span = b.querySelector('span:not(.mn-sr-only)');\n  let count = null;\n  if (span && b.hasAttribute('data-mn-count')) {\n    count = Number(b.dataset.mnCount) + (on ? 1 : 0);\n    span.textContent = count.toLocaleString();\n  }\n  emit(b, 'change', { pressed: on, count });\n});",
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": "https://mian.ro/dist/mian.js",
    "registryItem": "https://mian.ro/r/post.json"
  }
}