@nextsparkjs/theme-blog 0.1.0-beta.1

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@nextsparkjs/theme-blog",
+  "version": "0.1.0-beta.1",
+  "private": false,
+  "type": "module",
+  "main": "./config/theme.config.ts",
+  "requiredPlugins": [],
+  "dependencies": {},
+  "peerDependencies": {
+    "@nextsparkjs/core": "workspace:*",
+    "lucide-react": "^0.539.0",
+    "next": "^15.0.0",
+    "next-intl": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^4.0.0"
+  }
+}

package/permissions-matrix.md

@@ -0,0 +1,63 @@
+# Blog Theme - Permissions Matrix
+
+## Teams Mode: `single-user`
+
+No teams functionality. Single user owns all content.
+
+## Roles
+
+| Role | Description |
+|------|-------------|
+| owner | Blog owner - full control |
+
+> Note: In `single-user` mode, only owner role exists. No team invitations.
+
+---
+
+## Entity Permissions
+
+### Posts
+
+| Action | owner |
+|--------|-------|
+| create | ✅ |
+| read | ✅ |
+| list | ✅ |
+| update | ✅ |
+| delete | ✅ |
+| publish | ✅ |
+| archive | ✅ |
+
+---
+
+## Theme Features
+
+| Feature | owner | Description |
+|---------|-------|-------------|
+| `posts.export_json` | ✅ | Export posts to JSON format |
+| `posts.import_json` | ✅ | Import posts from JSON format |
+
+---
+
+## Disabled Core Permissions
+
+- `teams.invite` - No invitations in single-user mode
+- `teams.remove_member` - N/A
+- `teams.change_roles` - N/A
+- `teams.delete` - N/A
+- `settings.billing` - No billing
+- `settings.api_keys` - No API keys
+
+---
+
+## Test Scenarios
+
+### Owner (only user)
+
+1. ✅ Can create, edit, delete posts
+2. ✅ Can publish/unpublish posts
+3. ✅ Can export posts to JSON
+4. ✅ Can import posts from JSON
+5. ✅ Cannot invite other users
+6. ✅ No team switcher visible
+

package/styles/article.css

@@ -0,0 +1,333 @@
+/**
+ * Blog Theme - Article Typography
+ *
+ * Clean, readable typography for long-form content.
+ * Optimized for reading comfort and legibility.
+ */
+
+/* ============================================================================
+   ARTICLE CONTAINER
+   ============================================================================ */
+
+.article-content {
+  max-width: 680px;
+  margin: 0 auto;
+  font-family: var(--font-serif, 'Merriweather', Georgia, serif);
+  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
+  line-height: 1.8;
+  color: var(--foreground);
+}
+
+/* ============================================================================
+   HEADINGS
+   ============================================================================ */
+
+.article-content h1,
+.article-content h2,
+.article-content h3,
+.article-content h4,
+.article-content h5,
+.article-content h6 {
+  font-family: var(--font-sans, 'Oxanium', sans-serif);
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+}
+
+.article-content h1 {
+  font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem);
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+.article-content h2 {
+  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.article-content h3 {
+  font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.article-content h4 {
+  font-size: 1.125rem;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+/* ============================================================================
+   PARAGRAPHS & TEXT
+   ============================================================================ */
+
+.article-content p {
+  margin-bottom: 1.75rem;
+}
+
+.article-content strong {
+  font-weight: 700;
+  color: var(--foreground);
+}
+
+.article-content em {
+  font-style: italic;
+}
+
+.article-content a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition: text-decoration-thickness 0.2s ease;
+}
+
+.article-content a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* ============================================================================
+   LISTS
+   ============================================================================ */
+
+.article-content ul,
+.article-content ol {
+  margin-bottom: 1.75rem;
+  padding-left: 1.5rem;
+}
+
+.article-content li {
+  margin-bottom: 0.5rem;
+}
+
+.article-content li::marker {
+  color: var(--primary);
+}
+
+.article-content ul li {
+  list-style-type: disc;
+}
+
+.article-content ol li {
+  list-style-type: decimal;
+}
+
+/* ============================================================================
+   BLOCKQUOTES
+   ============================================================================ */
+
+.article-content blockquote {
+  margin: 2rem 0;
+  padding: 1.5rem 2rem;
+  border-left: 4px solid var(--primary);
+  background-color: var(--muted);
+  border-radius: 0 0.5rem 0.5rem 0;
+  font-style: italic;
+  color: var(--muted-foreground);
+}
+
+.article-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* Pull quotes - for emphasis */
+.article-content .pullquote {
+  position: relative;
+  margin: 3rem 0;
+  padding: 2rem;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 500;
+  font-style: normal;
+  border: none;
+  background: none;
+  color: var(--foreground);
+}
+
+.article-content .pullquote::before,
+.article-content .pullquote::after {
+  content: '"';
+  font-size: 4rem;
+  color: var(--primary);
+  opacity: 0.3;
+  line-height: 0;
+}
+
+.article-content .pullquote::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.article-content .pullquote::after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+/* ============================================================================
+   CODE
+   ============================================================================ */
+
+.article-content code {
+  font-family: var(--font-mono, 'Fira Code', monospace);
+  font-size: 0.875em;
+  padding: 0.2em 0.4em;
+  background-color: var(--muted);
+  border-radius: 0.25rem;
+}
+
+.article-content pre {
+  margin: 2rem 0;
+  padding: 1.5rem;
+  background-color: var(--muted);
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.article-content pre code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* ============================================================================
+   IMAGES & FIGURES
+   ============================================================================ */
+
+.article-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 2rem 0;
+}
+
+.article-content figure {
+  margin: 2rem 0;
+}
+
+.article-content figure img {
+  margin: 0;
+}
+
+.article-content figcaption {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  text-align: center;
+  font-style: italic;
+}
+
+/* Full-width images */
+.article-content .full-width {
+  width: 100vw;
+  max-width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  border-radius: 0;
+}
+
+/* ============================================================================
+   HORIZONTAL RULE
+   ============================================================================ */
+
+.article-content hr {
+  margin: 3rem 0;
+  border: none;
+  border-top: 1px solid var(--border);
+}
+
+/* Decorative divider */
+.article-content hr.divider {
+  text-align: center;
+  border: none;
+}
+
+.article-content hr.divider::after {
+  content: '• • •';
+  display: inline-block;
+  font-size: 1.5rem;
+  color: var(--muted-foreground);
+  letter-spacing: 1rem;
+}
+
+/* ============================================================================
+   TABLES
+   ============================================================================ */
+
+.article-content table {
+  width: 100%;
+  margin: 2rem 0;
+  border-collapse: collapse;
+  font-size: 0.9375rem;
+}
+
+.article-content th,
+.article-content td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+
+.article-content th {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  background-color: var(--muted);
+}
+
+.article-content tr:last-child td {
+  border-bottom: none;
+}
+
+/* ============================================================================
+   FOOTNOTES
+   ============================================================================ */
+
+.article-content .footnote {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  vertical-align: super;
+}
+
+.article-content .footnotes {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+/* ============================================================================
+   RESPONSIVE ADJUSTMENTS
+   ============================================================================ */
+
+@media (max-width: 768px) {
+  .article-content {
+    font-size: 1rem;
+    line-height: 1.7;
+  }
+
+  .article-content blockquote {
+    padding: 1rem 1.25rem;
+    margin: 1.5rem 0;
+  }
+
+  .article-content pre {
+    padding: 1rem;
+    font-size: 0.8125rem;
+  }
+
+  .article-content h2 {
+    margin-top: 2rem;
+  }
+
+  .article-content h3 {
+    margin-top: 1.5rem;
+  }
+}

package/styles/components.css

@@ -0,0 +1,204 @@
+/**
+ * Blog Theme - Component Styles
+ * 
+ * Custom component styling for blog theme.
+ */
+
+/* ============================================================================
+   NAVIGATION
+   ============================================================================ */
+
+.blog-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 0;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.blog-nav-logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: hsl(var(--foreground));
+  text-decoration: none;
+}
+
+.blog-nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.blog-nav-link {
+  color: hsl(var(--muted-foreground));
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.blog-nav-link:hover {
+  color: hsl(var(--foreground));
+}
+
+/* ============================================================================
+   POST LIST
+   ============================================================================ */
+
+.post-list {
+  display: grid;
+  gap: 2rem;
+}
+
+.post-list-item {
+  display: flex;
+  gap: 1.5rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.post-list-item:last-child {
+  border-bottom: none;
+}
+
+.post-list-image {
+  flex-shrink: 0;
+  width: 200px;
+  height: 150px;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.post-list-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.post-list-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.post-list-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: hsl(var(--foreground));
+  text-decoration: none;
+}
+
+.post-list-title:hover {
+  color: hsl(var(--primary));
+}
+
+.post-list-excerpt {
+  color: hsl(var(--muted-foreground));
+  margin-bottom: 1rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.post-list-meta {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ============================================================================
+   POST SINGLE
+   ============================================================================ */
+
+.post-header {
+  text-align: center;
+  max-width: 48rem;
+  margin: 0 auto 3rem;
+}
+
+.post-title {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+  letter-spacing: -0.02em;
+}
+
+.post-meta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.post-author {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.post-author-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+.post-featured-image {
+  width: 100%;
+  max-height: 500px;
+  border-radius: 1rem;
+  overflow: hidden;
+  margin-bottom: 3rem;
+}
+
+.post-featured-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.post-content {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+/* ============================================================================
+   FOOTER
+   ============================================================================ */
+
+.blog-footer {
+  margin-top: 4rem;
+  padding: 2rem 0;
+  border-top: 1px solid hsl(var(--border));
+  text-align: center;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+}
+
+/* ============================================================================
+   RESPONSIVE
+   ============================================================================ */
+
+@media (max-width: 768px) {
+  .post-list-item {
+    flex-direction: column;
+  }
+  
+  .post-list-image {
+    width: 100%;
+    height: 200px;
+  }
+  
+  .post-title {
+    font-size: 2rem;
+  }
+  
+  .prose {
+    font-size: 1rem;
+  }
+}
+