@orhancodestudio/ocsm-core 0.1.0-alpha.1

package/src/auth/permissions.ts

@@ -0,0 +1,27 @@
+import type { OcsmPermission } from "../roles/role.types";
+import { getSessionUser, type SessionUser } from "./session";
+
+/** Whether a session user holds a permission. `null` users have none. */
+export function userHasPermission(
+  user: SessionUser | null,
+  permission: OcsmPermission,
+): boolean {
+  return user !== null && user.permissions.includes(permission);
+}
+
+/**
+ * Asserts the current session user holds a permission, returning them. Throws
+ * otherwise — use as a guard at the top of privileged Server Actions.
+ *
+ * Permissions are resolved into the session at login, so role changes take
+ * effect after the affected user signs in again.
+ */
+export async function requirePermission(
+  permission: OcsmPermission,
+): Promise<SessionUser> {
+  const user = await getSessionUser();
+  if (!user || !user.permissions.includes(permission)) {
+    throw new Error("OCSM: bu işlem için yetkiniz yok");
+  }
+  return user;
+}

package/src/auth/session.ts

@@ -0,0 +1,103 @@
+import { Buffer } from "node:buffer";
+import { createHmac, timingSafeEqual } from "node:crypto";
+import { cookies } from "next/headers";
+import type { OcsmPermission } from "../roles/role.types";
+
+const SESSION_COOKIE = "ocsm_session";
+const SESSION_TTL_SECONDS = 60 * 60 * 24 * 7;
+const DEV_SECRET = "ocsm-dev-insecure-secret-change-me";
+
+/**
+ * Session schema version. Bump this whenever {@link SessionUser}'s shape changes
+ * so that older sessions are automatically invalidated (the user is asked to log
+ * in again) instead of running with a stale/incomplete payload.
+ */
+const SESSION_VERSION = 1;
+
+/** The authenticated user attached to the current request. */
+export interface SessionUser {
+  id: string;
+  username: string;
+  name: string;
+  /** Role id. */
+  role: string;
+  /** Display name of the role, resolved at login. */
+  roleName: string;
+  /** Effective permissions, resolved from the role at login. */
+  permissions: OcsmPermission[];
+}
+
+interface SessionPayload extends SessionUser {
+  /** Schema version — see {@link SESSION_VERSION}. */
+  v: number;
+  exp: number;
+}
+
+/** Issues a signed session cookie. Call from a Server Action or Route Handler. */
+export async function createSession(user: SessionUser): Promise<void> {
+  const payload: SessionPayload = {
+    ...user,
+    v: SESSION_VERSION,
+    exp: Math.floor(Date.now() / 1000) + SESSION_TTL_SECONDS,
+  };
+  const body = Buffer.from(JSON.stringify(payload)).toString("base64url");
+  const token = `${body}.${sign(body)}`;
+
+  const store = await cookies();
+  store.set(SESSION_COOKIE, token, {
+    httpOnly: true,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    maxAge: SESSION_TTL_SECONDS,
+  });
+}
+
+/** Returns the current session user, or `null` if unauthenticated or expired. */
+export async function getSessionUser(): Promise<SessionUser | null> {
+  const store = await cookies();
+  const token = store.get(SESSION_COOKIE)?.value;
+  if (!token) return null;
+
+  const [body, signature] = token.split(".");
+  if (!body || !signature || !safeEqual(signature, sign(body))) return null;
+
+  try {
+    const payload = JSON.parse(
+      Buffer.from(body, "base64url").toString("utf8"),
+    ) as SessionPayload;
+    // Stale schema (created before a session-shape change) → force re-login.
+    if (payload.v !== SESSION_VERSION) return null;
+    if (payload.exp * 1000 < Date.now()) return null;
+    return {
+      id: payload.id,
+      username: payload.username,
+      name: payload.name,
+      role: payload.role,
+      roleName: payload.roleName ?? payload.role,
+      permissions: Array.isArray(payload.permissions) ? payload.permissions : [],
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** Clears the session cookie. Call from a Server Action or Route Handler. */
+export async function destroySession(): Promise<void> {
+  const store = await cookies();
+  store.delete(SESSION_COOKIE);
+}
+
+function secret(): string {
+  return process.env.OCSM_AUTH_SECRET ?? DEV_SECRET;
+}
+
+function sign(value: string): string {
+  return createHmac("sha256", secret()).update(value).digest("base64url");
+}
+
+function safeEqual(a: string, b: string): boolean {
+  const bufferA = Buffer.from(a);
+  const bufferB = Buffer.from(b);
+  return bufferA.length === bufferB.length && timingSafeEqual(bufferA, bufferB);
+}

package/src/blocks/block-renderer.tsx

@@ -0,0 +1,428 @@
+import type { CSSProperties } from "react";
+import type { Block, BlockStyle } from "./block.types";
+import { OcsmMarkdown } from "./markdown";
+
+/**
+ * Renders a list of section blocks. Pure and isomorphic — used both for the
+ * live preview in the page builder and for the public site.
+ */
+export function BlockRenderer({ blocks }: { blocks: Block[] }) {
+  return (
+    <>
+      {blocks
+        .filter((block) => !block.hidden)
+        .map((block) => (
+          <BlockItem key={block.id} block={block} />
+        ))}
+    </>
+  );
+}
+
+const LEVEL_SIZE: Record<1 | 2 | 3, string> = {
+  1: "34px",
+  2: "26px",
+  3: "20px",
+};
+
+/** Renders a single block. Exported so the builder can wrap it for selection. */
+export function BlockItem({ block }: { block: Block }) {
+  const outer = sectionStyle(block.style);
+  const inner = innerStyle(block.style);
+
+  switch (block.type) {
+    case "navbar": {
+      const justify: Record<string, CSSProperties["justifyContent"]> = {
+        left: "flex-start",
+        center: "center",
+        right: "flex-end",
+      };
+      const logoEl = block.logoImageUrl ? (
+        <a href={block.logoHref || "#"}>
+          {/* biome-ignore lint/a11y/useAltText: alt from logo text */}
+          <img
+            src={block.logoImageUrl}
+            alt={block.logoText}
+            style={{ height: 34, display: "block" }}
+          />
+        </a>
+      ) : (
+        <a
+          href={block.logoHref || "#"}
+          style={{
+            fontWeight: 800,
+            fontSize: px(block.style.fontSize) ?? "20px",
+            color: "inherit",
+            textDecoration: "none",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {block.logoText}
+        </a>
+      );
+      const linksEl = (
+        <nav style={{ display: "flex", gap: 20, alignItems: "center" }}>
+          {block.links.map((link, index) => (
+            <a
+              // biome-ignore lint/suspicious/noArrayIndexKey: static nav list
+              key={index}
+              href={link.url || "#"}
+              style={{
+                color: "inherit",
+                textDecoration: "none",
+                fontSize: px(block.style.fontSize) ?? "15px",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      );
+      const slot = (which: "left" | "center" | "right") => {
+        const hasLogo = block.logoAlign === which;
+        const hasLinks = block.linksAlign === which;
+        return (
+          <div
+            style={{
+              display: "flex",
+              gap: 24,
+              alignItems: "center",
+              justifyContent: justify[which],
+            }}
+          >
+            {hasLogo ? logoEl : null}
+            {hasLinks ? linksEl : null}
+          </div>
+        );
+      };
+      return (
+        <section
+          style={{
+            ...outer,
+            ...(block.sticky
+              ? { position: "sticky", top: 0, zIndex: 50 }
+              : {}),
+          }}
+        >
+          <div
+            style={{
+              ...inner,
+              display: "grid",
+              gridTemplateColumns: "1fr auto 1fr",
+              alignItems: "center",
+              gap: 16,
+            }}
+          >
+            {slot("left")}
+            {slot("center")}
+            {slot("right")}
+          </div>
+        </section>
+      );
+    }
+
+    case "hero":
+      return (
+        <section style={outer}>
+          <div style={inner}>
+            <h1
+              style={{
+                fontSize: px(block.style.fontSize) ?? "44px",
+                lineHeight: 1.15,
+                margin: "0 0 14px",
+              }}
+            >
+              {block.heading}
+            </h1>
+            {block.subheading ? (
+              <p
+                style={{
+                  fontSize: 18,
+                  opacity: 0.85,
+                  margin: "0 auto 26px",
+                  maxWidth: 580,
+                }}
+              >
+                {block.subheading}
+              </p>
+            ) : null}
+            {block.buttonLabel ? (
+              <a href={block.buttonUrl || "#"} style={buttonStyle(block.buttonColor)}>
+                {block.buttonLabel}
+              </a>
+            ) : null}
+          </div>
+        </section>
+      );
+
+    case "heading": {
+      const Tag = `h${block.level}` as "h1" | "h2" | "h3";
+      return (
+        <section style={outer}>
+          <div style={inner}>
+            <Tag
+              style={{
+                margin: 0,
+                fontSize: px(block.style.fontSize) ?? LEVEL_SIZE[block.level],
+              }}
+            >
+              {block.text}
+            </Tag>
+          </div>
+        </section>
+      );
+    }
+
+    case "richText":
+      return (
+        <section style={outer}>
+          <div
+            style={{ ...inner, fontSize: px(block.style.fontSize), lineHeight: 1.7 }}
+          >
+            <OcsmMarkdown>{block.markdown}</OcsmMarkdown>
+          </div>
+        </section>
+      );
+
+    case "image": {
+      const align = block.style.textAlign;
+      const imgStyle: CSSProperties = {
+        display: "block",
+        width: `${block.width || "100"}%`,
+        height: block.height ? `${block.height}px` : "auto",
+        objectFit: block.height ? block.fit : undefined,
+        borderRadius: `${block.radius || "0"}px`,
+        marginLeft: align === "center" || align === "right" ? "auto" : undefined,
+        marginRight: align === "center" ? "auto" : undefined,
+      };
+      // biome-ignore lint/a11y/useAltText: alt is provided via the block field
+      const img = <img src={block.url} alt={block.alt} style={imgStyle} />;
+      return (
+        <section style={outer}>
+          <figure style={{ ...inner, margin: "0 auto" }}>
+            {block.url ? (
+              block.link ? (
+                <a href={block.link}>{img}</a>
+              ) : (
+                img
+              )
+            ) : (
+              <Placeholder>Görsel URL'si girilmedi</Placeholder>
+            )}
+            {block.caption ? (
+              <figcaption style={{ color: "#64748b", fontSize: 13, marginTop: 8 }}>
+                {block.caption}
+              </figcaption>
+            ) : null}
+          </figure>
+        </section>
+      );
+    }
+
+    case "button":
+      return (
+        <section style={outer}>
+          <div style={inner}>
+            <a href={block.url || "#"} style={buttonStyle(block.buttonColor)}>
+              {block.label}
+            </a>
+          </div>
+        </section>
+      );
+
+    case "quote":
+      return (
+        <section style={outer}>
+          <div style={inner}>
+            <blockquote
+              style={{
+                borderLeft: "4px solid currentColor",
+                margin: 0,
+                paddingLeft: 18,
+                fontSize: px(block.style.fontSize) ?? "20px",
+                fontStyle: "italic",
+              }}
+            >
+              {block.text}
+              {block.author ? (
+                <footer
+                  style={{
+                    marginTop: 10,
+                    fontSize: 14,
+                    opacity: 0.7,
+                    fontStyle: "normal",
+                  }}
+                >
+                  — {block.author}
+                </footer>
+              ) : null}
+            </blockquote>
+          </div>
+        </section>
+      );
+
+    case "banner":
+      return (
+        <aside style={{ ...outer, fontSize: px(block.style.fontSize) ?? "15px" }}>
+          <div style={inner}>
+            {block.url ? (
+              <a href={block.url} style={{ color: "inherit" }}>
+                {block.text}
+              </a>
+            ) : (
+              block.text
+            )}
+          </div>
+        </aside>
+      );
+
+    case "marquee": {
+      const copies = Math.min(
+        40,
+        Math.max(1, Number.parseInt(block.repeat || "1", 10) || 1),
+      );
+      return (
+        <section style={{ ...outer, paddingLeft: 0, paddingRight: 0 }}>
+          <style>
+            {"@keyframes ocsm-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}"}
+          </style>
+          <div style={{ overflow: "hidden", whiteSpace: "nowrap" }}>
+            <div
+              style={{
+                display: "inline-block",
+                paddingLeft: "100%",
+                animation: `ocsm-marquee ${block.speed || "16"}s linear infinite`,
+                animationDirection:
+                  block.direction === "right" ? "reverse" : "normal",
+              }}
+            >
+              {Array.from({ length: copies }).map((_, index) => (
+                <span
+                  // biome-ignore lint/suspicious/noArrayIndexKey: static repeated text
+                  key={index}
+                  style={{
+                    paddingRight: `${block.gap || "40"}px`,
+                    fontSize: px(block.style.fontSize) ?? "16px",
+                    fontWeight: 600,
+                  }}
+                >
+                  {block.text}
+                </span>
+              ))}
+            </div>
+          </div>
+        </section>
+      );
+    }
+
+    case "video": {
+      const src = toEmbedUrl(block.url);
+      return (
+        <section style={outer}>
+          <div style={inner}>
+            {src ? (
+              <div style={{ position: "relative", paddingBottom: "56.25%", height: 0 }}>
+                <iframe
+                  src={src}
+                  title="Video"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                  style={{
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    border: 0,
+                    borderRadius: "var(--ocsm-radius, 8px)",
+                  }}
+                />
+              </div>
+            ) : (
+              <Placeholder>Video URL'si girilmedi</Placeholder>
+            )}
+          </div>
+        </section>
+      );
+    }
+
+    case "spacer":
+      return (
+        <div
+          style={{
+            height: `${block.height || "40"}px`,
+            background: resolveBackground(block.style) ?? "transparent",
+          }}
+        />
+      );
+  }
+}
+
+function Placeholder({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        padding: 48,
+        textAlign: "center",
+        color: "#94a3b8",
+        border: "1px dashed #cbd5e1",
+        borderRadius: 8,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function buttonStyle(color: string): CSSProperties {
+  return {
+    display: "inline-block",
+    background: color || "#2563eb",
+    color: "#fff",
+    padding: "12px 28px",
+    borderRadius: "var(--ocsm-radius, 8px)",
+    textDecoration: "none",
+    fontWeight: 600,
+  };
+}
+
+function resolveBackground(style: BlockStyle): string | undefined {
+  if (style.bgType === "gradient") {
+    const angle = style.gradientAngle || "135";
+    const from = style.gradientFrom || "#7c3aed";
+    const to = style.gradientTo || "#2563eb";
+    return `linear-gradient(${angle}deg, ${from}, ${to})`;
+  }
+  return style.background || undefined;
+}
+
+function sectionStyle(style: BlockStyle): CSSProperties {
+  return {
+    background: resolveBackground(style),
+    color: style.textColor || undefined,
+    textAlign: style.textAlign,
+    fontFamily: style.fontFamily || undefined,
+    fontWeight: style.fontWeight || undefined,
+    paddingTop: px(style.paddingY) ?? "0",
+    paddingBottom: px(style.paddingY) ?? "0",
+  };
+}
+
+function innerStyle(style: BlockStyle): CSSProperties {
+  return {
+    maxWidth: style.maxWidth === "full" ? "100%" : (px(style.maxWidth) ?? "720px"),
+    margin: "0 auto",
+    paddingLeft: 24,
+    paddingRight: 24,
+  };
+}
+
+function toEmbedUrl(url: string): string {
+  if (!url) return "";
+  const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+  if (match) return `https://www.youtube.com/embed/${match[1]}`;
+  return url;
+}
+
+function px(value: string): string | undefined {
+  return value ? `${value}px` : undefined;
+}