@commonpub/layer 0.1.0

package/theme/prose.css

@@ -0,0 +1,342 @@
+@layer commonpub {
+/* ===========================================
+   CommonPub Prose — Content rendering styles
+   Extracted from unified-v2 08-view-article.html
+   =========================================== */
+
+.cpub-prose {
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text);
+  max-width: var(--content-max-width);
+}
+
+/* Headings */
+.cpub-prose h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-4);
+  line-height: var(--leading-tight);
+  color: var(--text);
+}
+
+.cpub-prose h3 {
+  font-size: var(--text-md);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--space-6);
+  margin-bottom: var(--space-3);
+  line-height: var(--leading-tight);
+  color: var(--text);
+}
+
+.cpub-prose h4 {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-semibold);
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-2);
+  line-height: var(--leading-snug);
+  color: var(--text);
+}
+
+/* Paragraphs */
+.cpub-prose p {
+  margin-bottom: var(--space-4);
+  line-height: var(--leading-normal);
+}
+
+.cpub-prose p:last-child {
+  margin-bottom: 0;
+}
+
+/* Links */
+.cpub-prose a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid var(--accent-border);
+}
+
+.cpub-prose a:hover {
+  border-bottom-color: var(--accent);
+}
+
+/* Inline code */
+.cpub-prose code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  color: var(--teal);
+  background: var(--surface2);
+  padding: 2px 6px;
+  border: 1px solid var(--border2);
+}
+
+/* Code blocks */
+.cpub-prose pre {
+  background: #0d1117;
+  color: #e6edf3;
+  padding: var(--space-4);
+  margin: var(--space-5) 0;
+  border: var(--border-width-default) solid var(--border);
+  overflow-x: auto;
+  line-height: 1.5;
+  font-size: var(--text-sm);
+}
+
+.cpub-prose pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+/* Basic syntax highlighting for pre-rendered federated code */
+.cpub-prose pre .hljs-keyword { color: #ff7b72; }
+.cpub-prose pre .hljs-string { color: #a5d6ff; }
+.cpub-prose pre .hljs-comment { color: #8b949e; font-style: italic; }
+.cpub-prose pre .hljs-number { color: #79c0ff; }
+.cpub-prose pre .hljs-title { color: #d2a8ff; }
+.cpub-prose pre .hljs-name { color: #7ee787; }
+.cpub-prose pre .hljs-variable { color: #ffa657; }
+
+/* Blockquotes */
+.cpub-prose blockquote {
+  border-left: 4px solid var(--accent);
+  padding: var(--space-3) var(--space-5);
+  margin: var(--space-5) 0;
+  background: var(--accent-bg);
+  color: var(--text-dim);
+}
+
+.cpub-prose blockquote p {
+  margin-bottom: var(--space-2);
+}
+
+.cpub-prose blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* Images */
+.cpub-prose img {
+  max-width: 100%;
+  height: auto;
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-md);
+  display: block;
+  margin: var(--space-5) 0;
+}
+
+/* Lists */
+.cpub-prose ul,
+.cpub-prose ol {
+  margin: var(--space-4) 0;
+  padding-left: var(--space-6);
+}
+
+.cpub-prose li {
+  margin-bottom: var(--space-2);
+  line-height: var(--leading-normal);
+}
+
+.cpub-prose li::marker {
+  color: var(--text-faint);
+}
+
+/* Horizontal rules / dividers */
+.cpub-prose hr {
+  border: none;
+  border-top: var(--border-width-default) solid var(--border2);
+  margin: var(--space-8) 0;
+}
+
+/* Bold, italic, strikethrough */
+.cpub-prose strong {
+  font-weight: var(--font-weight-bold);
+}
+
+.cpub-prose em {
+  font-style: italic;
+}
+
+.cpub-prose s {
+  text-decoration: line-through;
+  color: var(--text-dim);
+}
+
+/* Callout variants */
+.cpub-prose .callout {
+  padding: var(--space-4);
+  margin: var(--space-5) 0;
+  border: var(--border-width-default) solid var(--border);
+  border-left-width: 4px;
+}
+
+.cpub-prose .callout-info {
+  border-left-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-prose .callout-tip {
+  border-left-color: var(--green);
+  background: var(--green-bg);
+}
+
+.cpub-prose .callout-warning {
+  border-left-color: var(--yellow);
+  background: var(--yellow-bg);
+}
+
+.cpub-prose .callout-danger {
+  border-left-color: var(--red);
+  background: var(--red-bg);
+}
+
+/* Gallery */
+.cpub-prose .cpub-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-3);
+  margin: var(--space-5) 0;
+}
+
+/* Video */
+.cpub-prose .cpub-video {
+  margin: var(--space-5) 0;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface2);
+  padding: var(--space-6);
+  text-align: center;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+/* Embed */
+.cpub-prose .cpub-embed {
+  margin: var(--space-5) 0;
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+/* Markdown */
+.cpub-prose .cpub-markdown {
+  margin: var(--space-5) 0;
+}
+
+/* Parts list */
+.cpub-prose .cpub-parts-list {
+  margin: var(--space-5) 0;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  overflow-x: auto;
+}
+
+/* Build step */
+.cpub-prose .cpub-build-step {
+  margin: var(--space-5) 0;
+  padding: var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+.cpub-prose .cpub-build-step-number {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--accent);
+  display: block;
+  margin-bottom: var(--space-2);
+}
+
+/* Tool list */
+.cpub-prose .cpub-tool-list {
+  margin: var(--space-5) 0;
+  padding: var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface2);
+}
+
+/* Downloads */
+.cpub-prose .cpub-downloads {
+  margin: var(--space-5) 0;
+  padding: var(--space-4);
+  border: var(--border-width-default) solid var(--border);
+}
+
+/* Quiz */
+.cpub-prose .cpub-quiz {
+  margin: var(--space-5) 0;
+  padding: var(--space-5);
+  border: var(--border-width-default) solid var(--purple-border);
+  background: var(--purple-bg);
+}
+
+.cpub-prose .cpub-quiz-question {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-3);
+}
+
+/* Interactive slider */
+.cpub-prose .cpub-interactive-slider {
+  margin: var(--space-5) 0;
+  padding: var(--space-5);
+  border: var(--border-width-default) solid var(--teal-border);
+  background: var(--teal-bg);
+}
+
+/* Checkpoint */
+.cpub-prose .cpub-checkpoint {
+  margin: var(--space-6) 0;
+  padding: var(--space-4) var(--space-5);
+  border: var(--border-width-default) solid var(--green-border);
+  background: var(--green-bg);
+  font-weight: var(--font-weight-medium);
+  color: var(--green);
+  text-align: center;
+}
+
+/* Math notation */
+.cpub-prose .cpub-math {
+  margin: var(--space-4) 0;
+  font-family: var(--font-mono);
+}
+
+.cpub-prose .cpub-math-display {
+  text-align: center;
+  padding: var(--space-4);
+  background: var(--surface2);
+  border: 1px solid var(--border2);
+  font-size: var(--text-lg);
+}
+
+.cpub-prose .cpub-math-inline {
+  display: inline;
+}
+
+/* Table (generic) */
+.cpub-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space-5) 0;
+  font-size: var(--text-sm);
+}
+
+.cpub-prose th,
+.cpub-prose td {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border2);
+  text-align: left;
+}
+
+.cpub-prose th {
+  background: var(--surface2);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+}
+}

package/types/hub.ts

@@ -0,0 +1,61 @@
+/** Data-agnostic view models for hub components.
+ *  Components accept these shapes — pages map domain types into them. */
+
+export interface HubViewModel {
+  name: string
+  description: string | null
+  iconUrl: string | null
+  bannerUrl: string | null
+  hubType: 'community' | 'product' | 'company'
+  memberCount: number
+  postCount: number
+  foundedLabel: string | null
+  isOfficial: boolean
+  joinPolicy: string | null
+  categories: string[] | null
+  website: string | null
+}
+
+export interface HubPostViewModel {
+  id: string
+  type: string
+  content: string
+  author: HubPostAuthor
+  createdAt: string
+  likeCount: number
+  replyCount: number
+  isPinned: boolean
+  isLocked: boolean
+  linkTo: string | null
+  sharedContent?: {
+    type: string
+    slug: string
+    title: string
+    description: string | null
+    coverImageUrl: string | null
+    /** External URL for federated shared content (when slug isn't a local route) */
+    url?: string | null
+  }
+}
+
+export interface HubPostAuthor {
+  name: string
+  handle: string | null
+  avatarUrl: string | null
+}
+
+export interface HubMemberViewModel {
+  name: string
+  username: string
+  role: string
+  avatarUrl: string | null
+  profileLink: string
+  joinedAt: string
+}
+
+export interface HubTabDef {
+  value: string
+  label: string
+  icon: string
+  count?: number
+}