Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 AHMED
|
87e653cc96 | ||
|
AHMED
|
61aea8d83e | ||
|
AHMED
|
54dfe2ff3c | ||
|
AHMED
|
4aeb747d56 | ||
|
AHMED
|
00f8e4aee7 | ||
|
AHMED
|
690c2deed7 |
+3
-7
@@ -13,10 +13,6 @@ screenshot-*.png
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Local AI coding hosts (procoder init); .procoder/ stays trackable.
|
||||
/skills/procoder/
|
||||
|
||||
# procoder state (regenerable)
|
||||
.procoder/state/
|
||||
.procoder/index/
|
||||
.lycheecache
|
||||
# Python runtime files
|
||||
__pycache__/
|
||||
*.pyc
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
[git]
|
||||
default_branch_policy = "report" # rulebook allows docs/evidence commits to main
|
||||
@@ -1,13 +0,0 @@
|
||||
# Context — anwarpy.ai
|
||||
|
||||
## effective access
|
||||
|
||||
The single server-side decision (launch.ts policy + doc.access + doc.status) consumed identically by the article page, public JSON route, download gate, and llms-full.
|
||||
|
||||
## ghost-read
|
||||
|
||||
Fetching an intended-VIP post logged out to assert what a stranger sees; the acceptance check for any access-logic change.
|
||||
|
||||
## honest 503
|
||||
|
||||
A dependency-down response with a fixed Arabic sentence (e.g. billing disabled, mail transport down) instead of a fake success; reference implementation: /api/notify.
|
||||
@@ -1,3 +0,0 @@
|
||||
[
|
||||
"skills"
|
||||
]
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"version": 1,
|
||||
"synced_at": "2026-10-13T02:31:48Z",
|
||||
"lockfiles": {
|
||||
"web/package-lock.json": "b0168d824c755b061aeb7dc8bddb7faa05b7a236ccc82b196843d5752e3632d3"
|
||||
},
|
||||
"migrations": {
|
||||
"web/src/migrations": {
|
||||
"count": 14,
|
||||
"entries": [
|
||||
"20261002_130505_init.json",
|
||||
"20261002_130505_init.ts",
|
||||
"20261002_170000_add_full_name.ts",
|
||||
"20261003_111451.json",
|
||||
"20261003_111451.ts",
|
||||
"20261003_133758.json",
|
||||
"20261003_133758.ts",
|
||||
"20261003_201454.json",
|
||||
"20261003_201454.ts",
|
||||
"20261009_130817.json",
|
||||
"20261009_130817.ts",
|
||||
"20261010_142214.json",
|
||||
"20261010_142214.ts",
|
||||
"index.ts"
|
||||
]
|
||||
}
|
||||
},
|
||||
"env_keys": {}
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
# AGENT.md — AnwarPi for AI agents
|
||||
|
||||
Orientation doc for AI agents (coding assistants, autonomous maintainers, content
|
||||
pipelines) working on this repository. Read this before changing anything.
|
||||
|
||||
## What this is
|
||||
|
||||
**AnwarPi (أنور بي آي)** — an Arabic-first, RTL platform for learning practical
|
||||
AI at **https://anwarpy.ai**. Free guides for everyone, VIP-gated deep-dives, a
|
||||
searchable library/catalog, moderated comments, member accounts, and a Stripe
|
||||
subscription that is fully wired but public-facing "coming soon" until keys are
|
||||
set. Content is also published programmatically by an external agent pipeline
|
||||
through a key-authenticated API.
|
||||
|
||||
Canonical domain: `anwarpy.ai` (`anwarpi.ai` is legacy). Owner: Ahmed
|
||||
(ahmedalkhair.sa@gmail.com). Owner constraint: **never change site flow/UX
|
||||
without explicit approval** (e.g. no CAPTCHA, no aggressive limits).
|
||||
|
||||
## Stack
|
||||
|
||||
| Component | Choice |
|
||||
|---|---|
|
||||
| Framework | Next.js 15 (App Router, `output: 'standalone'`), React 19 |
|
||||
| CMS/Auth | Payload 3.90 (`@payloadcms/next`), Lexical editor |
|
||||
| Database | PostgreSQL 16 via `@payloadcms/db-postgres` |
|
||||
| Styling | Plain CSS files per page (see `web/src/app/(frontend)/styles/`), dark-first brand (see `brand-spec.md`) |
|
||||
| Email | Cloudflare Email Routing (inbound) + Cloudflare Email Sending REST (outbound) — **not SMTP** (docs/adr/0003) |
|
||||
| Payments | Stripe SDK, webhook at `/api/stripe/webhook` |
|
||||
| Edge | Traefik 2/3 with Docker provider (labels in `web/docker-compose.vps.yml`) |
|
||||
|
||||
## Repo layout
|
||||
|
||||
```
|
||||
web/ ← the entire application (deploy unit)
|
||||
src/
|
||||
payload.config.ts ← Payload config: collections, postgres adapter
|
||||
seed.ts ← `npm run seed`
|
||||
middleware.ts ← Next middleware: auth rate limits (F2)
|
||||
collections/ ← Users, Posts, Media, Files, PostLikes, Comments
|
||||
migrations/ ← Payload migrations (`payload migrate` runs on boot)
|
||||
lib/ ← viewer.ts (session helper), mail.ts, format.ts, topics.ts, agent-*
|
||||
app/
|
||||
(frontend)/ ← public Arabic site (page.tsx per route, styles/ css)
|
||||
(payload)/ ← Payload admin + API catch-all
|
||||
api/ ← custom REST routes (posts, auth, subscribe, stripe, agent, files)
|
||||
public/ ← brand/, covers/, og-default.png
|
||||
Dockerfile ← standalone build; CMD runs `npx payload migrate` first
|
||||
docker-compose.vps.yml ← prod: web + postgres, Traefik labels (rate limits)
|
||||
GLOSSARY.md ← canonical domain vocabulary — USE THESE TERMS
|
||||
docs/adr/ ← architecture decision records — do not contradict
|
||||
brand-spec.md ← visual identity: dark blue-black, silver beams, cyan-teal accent
|
||||
```
|
||||
|
||||
## Data model (Payload collections)
|
||||
|
||||
- **Users** — auth collection. `role: 'free' | 'vip' | 'admin'` (server-forced),
|
||||
`emailVerified`, `onboarded`, `termsVersion`. Login lockout: 5 attempts /
|
||||
15 min; admin accounts never lock (hook clears lock before login).
|
||||
- **Posts** — guides. `access: 'free' | 'vip'`, `slug`, category (وكلاء، نماذج،
|
||||
استرجاع، سلامة، أدوات، أعمال), cover image (1200×630), Lexical body, likes/views.
|
||||
- **Comments** — moderated: `pending → approved | rejected`. Only `approved` is
|
||||
public. Authors cannot edit/delete their own comments (moderated model,
|
||||
docs/adr/0002). Display name is a snapshot of `fullName` at submit time.
|
||||
- **Media / Files** — uploads (files served via `/api/files/[id]`).
|
||||
- **PostLikes** — one like per member per post.
|
||||
|
||||
## Trust model (critical — do not break)
|
||||
|
||||
1. **Roles are server-forced.** `POST /api/users` and any client write cannot
|
||||
set `role`, `emailVerified`, `stripeCustomerId`, or `verificationToken` —
|
||||
the `beforeChange` hook in `Users.ts` deletes them for untrusted operations.
|
||||
Only `req.user.role === 'admin'` or `context.systemActivation === true`
|
||||
(payment activation from server code) counts as trusted.
|
||||
2. **Entitlement is derived, never stored on the user**: viewer may read a
|
||||
post's body iff `post.access === 'free' || role in ('vip','admin')`. Gating
|
||||
happens server-side (locked body is stripped from API responses).
|
||||
3. **Comments require verification** (`emailVerified`), admins exempt.
|
||||
4. Client requests can never mint VIP (free `/payment-success` visits redirect
|
||||
to `/subscription`; docs/adr/0004, 0005).
|
||||
|
||||
## Auth & rate limiting
|
||||
|
||||
- Passwords: Payload local auth → **PBKDF2-SHA256, 600 000 iterations, 32
|
||||
bytes** (NOT bcrypt — verified in payload's `generatePasswordSaltHash`).
|
||||
- `web/src/middleware.ts` (F2): per-IP in-memory buckets —
|
||||
`POST /api/users` 5/h, `POST /api/users/login` 10/15min,
|
||||
`POST /api/users/forgot-password` 5/h. Over limit → 429 JSON
|
||||
`{"error":"محاولات كثيرة جدًا. حاول بعد قليل."}` + `Retry-After`.
|
||||
**In-memory is correct for the single-container deployment**; moving to
|
||||
horizontal scaling requires a shared store (Redis) — do not silently assume
|
||||
one replica.
|
||||
- Timing equalization (F7): `Users.ts` `beforeOperation` login hook runs a
|
||||
dummy PBKDF2 (same params, salt `anwarpy-dummy-salt-v1`) when no user
|
||||
matches, so ghost emails are not enumerable by response time. Keep this when
|
||||
touching the hook.
|
||||
- Traefik edge (F1, VPS only): pages `pagelimit` 60/min burst 120 +
|
||||
`connlimit` 50 in-flight per IP; API `apilimit` 90/min burst 180.
|
||||
- `Strict-Transport-Security: max-age=63072000; includeSubDomains` on all
|
||||
routes (`web/next.config.mjs`). Do not add `preload`.
|
||||
|
||||
## Key routes
|
||||
|
||||
Frontend: `/` (home), `/articles`, `/catalog`, `/posts/[slug]` (gated body,
|
||||
engagement, comments), `/signup`, `/login`, `/forgot-password`,
|
||||
`/verify-email`, `/subscription`, `/payment-success`, `/payment-cancelled`,
|
||||
`/vip-onboarding`, `/onboarding`, `/account-settings`, `/about`, `/privacy`,
|
||||
`/terms`. Admin UI: `/admin`.
|
||||
|
||||
Custom API (see `web/src/app/api/`): `posts` (list) + `posts/[slug]` (detail —
|
||||
strips locked bodies), `posts/[slug]/{like,view,comments}`,
|
||||
`auth/{verify-email,resend-verification}`, `users` REST is Payload's own,
|
||||
`subscribe`, `stripe/webhook` (returns 503 until `STRIPE_SECRET_KEY` +
|
||||
`STRIPE_WEBHOOK_SECRET` exist; verifies `stripe-signature` once configured),
|
||||
`agent/posts` (POST/PUT with `x-agent-key` header — external publishing), and
|
||||
`files/[id]`.
|
||||
|
||||
## Environment variables
|
||||
|
||||
`DATABASE_URI`, `PAYLOAD_SECRET`, `NEXT_PUBLIC_SITE_URL`, `AGENT_API_KEY`,
|
||||
`MAIL_FROM`, `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_ACCOUNT_ID`, plus optional
|
||||
`STRIPE_SECRET_KEY` / `STRIPE_WEBHOOK_SECRET`. Prod values live in
|
||||
`/root/anwarpi/.env.production` on the VPS — never commit `.env*`.
|
||||
|
||||
## Development & verification
|
||||
|
||||
```bash
|
||||
cd web && npm install
|
||||
npm run dev # localhost:3000, /admin for CMS
|
||||
npm run build # MUST exit 0 — typescript.ignoreBuildErrors is false
|
||||
npm run seed
|
||||
```
|
||||
|
||||
- Regenerates `payload-types.ts` automatically on build
|
||||
(`payload generate:types`).
|
||||
- Schema changes require a migration (`payload migrate:create`); the container
|
||||
CMD runs `payload migrate` on every deploy — no manual DB steps.
|
||||
- Auth endpoints are rate-limited in dev too; restart the dev server to reset
|
||||
buckets when testing.
|
||||
|
||||
## Deployment
|
||||
|
||||
Single VPS `147.79.102.201`, app at `/root/anwarpi`, managed by
|
||||
`docker compose -f docker-compose.vps.yml` (web + postgres + Traefik proxy
|
||||
network). Update flow: rsync `web/` → `/root/anwarpi/` excluding
|
||||
`node_modules .next .git media files-private '.env*' '*.tsbuildinfo'`, then
|
||||
`docker compose -f docker-compose.vps.yml up -d --build` (label changes force
|
||||
recreate; migration runs on boot). Traefik labels only affect the VPS.
|
||||
|
||||
## House rules
|
||||
|
||||
- Follow the **reuse ladder**: existing helper → stdlib → platform feature →
|
||||
installed dependency → then write the complete version.
|
||||
- **Do not add UX changes** (new limits, captchas, gates) without owner
|
||||
approval; thresholds are deliberately generous for humans.
|
||||
- New decisions → add an ADR in `docs/adr/` (next number, `NNNN-slug.md`).
|
||||
- Use GLOSSARY terms exactly (عضوية/entitlement, مفتوح/unlocked, موثّق/
|
||||
verified, كتابة موثوقة/trusted write).
|
||||
- **Pentest context**: the 2026-10-09 report items F1–F9 are closed; see PR #1
|
||||
and release v1.0.0 on Gitea for what was done and verified. Do not
|
||||
re-implement.
|
||||
@@ -1,5 +1,4 @@
|
||||
<!-- gstack digest, source: https://github.com/garrytan/gstack (agents-digest/gstack-AGENTS.md) -->
|
||||
|
||||
# gstack digest v1.91.12.0 — regenerate/re-copy after upgrading gstack
|
||||
|
||||
Behavioral rules from gstack (https://github.com/garrytan/gstack), compressed
|
||||
@@ -16,7 +15,6 @@ reviews, and evals on top of these rules.
|
||||
## The reuse ladder
|
||||
|
||||
Before writing new code, stop at the first rung that holds:
|
||||
|
||||
1. A helper, util, or pattern already in this repo.
|
||||
2. The standard library.
|
||||
3. A native platform feature (CSS over JS, DB constraint over app code).
|
||||
@@ -36,55 +34,3 @@ corporate tone, no AI vocabulary.
|
||||
Clone https://github.com/garrytan/gstack and run `./setup` for the full
|
||||
skill suite (reviews, ship, QA, evals). This digest is generated — edit
|
||||
scripts/gen-agents-digest.ts, not this file.
|
||||
|
||||
---
|
||||
|
||||
# Anwarpy.ai Operational Rulebook (agents)
|
||||
|
||||
Appended 2026-10-11 by owner request. The gstack digest above is untouched and authoritative for behavior; this section is project-specific operations. The specs live beside it: `PRD.md`, `ARCHITECTURE.md`, `DESIGN_SYSTEM.md`, `DATABASE.md`, `SECURITY.md`, `CODE_STYLE.md`, `TESTING.md` — read the relevant one before touching that layer.
|
||||
|
||||
## Always do
|
||||
|
||||
1. **Work in `web/`** for app code; docs/specs at root. Read before writing: the spec for the layer you're touching + existing patterns in sibling files.
|
||||
2. **Verify before claiming**: `cd web && npx tsc --noEmit` and `npm run build` must exit 0 for any TS change. Behavioral changes get exercised (ghost-read for access changes, curl for API changes, screenshot for UI).
|
||||
3. **Ghost-read after touching access logic**: fetch an intended-VIP post logged out and assert what a stranger sees (full body in free early access; preview+paywall when billing is on).
|
||||
4. **Keep contracts verbatim**: the honest-503 Arabic strings, notice-strip copy, and meta lines are product contracts (PRD §3) — copy them exactly.
|
||||
5. **Record evidence**: a claim without command+output is not verification (launch-doc standard). Test rows use `@example.com` and are deleted after; report prod counts post-cleanup.
|
||||
6. **ADR for structural decisions**: anything changing routes, contracts, policy layer, or schema gets `docs/adr/NNNN-*.md` in the same PR.
|
||||
7. **Clean up**: delete throwaway scripts, temp env files, smoke rows, and dev servers (`pkill -f "next dev"`) when done.
|
||||
|
||||
## Allowed without asking
|
||||
|
||||
- Read anything in the repo; read prod **state** via `ssh root@147.79.102.201` (read-only psql selects, `docker compose logs`, `curl` checks).
|
||||
- Create/edit files under `web/src/`, `web/scripts/`, root docs; run `tsc`, `next build`, vitest, `payload generate:types`, local dev server on :3000.
|
||||
- Run the local seed/backfill scripts against the **local** DB.
|
||||
- Commit to a feature branch; open Gitea PRs (merge = **POST** `/repos/ahmed/anwar-pi-website/pulls/{index}/merge` `{"Do":"merge"}`; PUT → 405).
|
||||
|
||||
## Ask the owner before
|
||||
|
||||
- **Deploying**: `rsync` to the VPS or `docker compose up -d --build` (recipe below) — deploy is owner-visible truth.
|
||||
- **Merging to `main`** (except doc/evidence commits recording verified facts).
|
||||
- **Destructive or irreversible**: DB writes on prod (inserts/updates/deletes beyond smoke-row cleanup), `rm` outside your own scaffolds, `git reset --hard`/force-push, rotating credentials.
|
||||
- **Changing contracts**: launch policy values, API status codes/bodies, the access decision, schema fields, or anything marked «verbatim» in the PRD.
|
||||
- **Spending**: new services, paid plans, DNS/Cloudflare console changes, new dependencies (one justification line in the PR).
|
||||
|
||||
## Never
|
||||
|
||||
- Never print, commit, rsync, or video-render secret values (`.env*`, tokens, `DB_PASSWORD`, `AGENT_API_KEY`, `PAYLOAD_SECRET`). Partial leaks → recommend rotation immediately (precedent: 2026-10-10, 8 chars of DB_PASSWORD).
|
||||
- Never rewrite `access` fields to simulate a launch state; the launch state is `LAUNCH_MODE`.
|
||||
- Never edit an applied migration, restore over the live DB, or run pipeline payloads without the secret scan.
|
||||
- Never add CAPTCHA/rate limits beyond the login lockout, a component library, Tailwind, or a global state lib (recorded decisions).
|
||||
- Never let a VIP body reach an anonymous response (JSON route, files, llms-full, or the future chatbot) when billing is on.
|
||||
|
||||
## Deploy recipe (owner-approved only)
|
||||
|
||||
```bash
|
||||
rsync -az web/ root@147.79.102.201:/root/anwarpi/ \
|
||||
--exclude node_modules --exclude .next --exclude .git \
|
||||
--exclude media --exclude files-private \
|
||||
--exclude '.env*' --exclude '*.tsbuildinfo' # NO --delete (protects backups/, media/, files-private/)
|
||||
ssh root@147.79.102.201 'cd /root/anwarpi && docker compose -f docker-compose.vps.yml up -d --build'
|
||||
# migrations apply on boot; LAUNCH_MODE persists in /root/anwarpi/.env.production
|
||||
```
|
||||
|
||||
Prod scripts (no `scripts/` in the standalone image): `ssh -f -N -L 15432:<db-container-ip>:5432 root@…`, then locally `set -a; source <tmp env>; set +a; DATABASE_URI=postgresql://anwarpi:$DB_PASSWORD@127.0.0.1:15432/anwarpi npx tsx scripts/<script>.ts`; delete the temp env file after. Never echo the password.
|
||||
|
||||
-117
@@ -1,117 +0,0 @@
|
||||
# ARCHITECTURE — anwarpy.ai
|
||||
|
||||
> Source of truth for structure and boundaries. Change this file with the code, in the same PR.
|
||||
|
||||
## 1. Stack (pinned 2026-10-11)
|
||||
|
||||
| Layer | Choice | Version |
|
||||
| ----------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| Framework | Next.js App Router (server components first) | next@15.5.27 (CVE-driven bump from 15.4.11, owner-approved 2026-10-13) |
|
||||
| CMS / API / admin | Payload 3 (Next-native, Lexical rich text) | ^3.60.0 |
|
||||
| Database | PostgreSQL | postgres:16 (container) |
|
||||
| DB adapter | @payloadcms/db-postgres (Drizzle migrations) | ^3.60.0 |
|
||||
| UI runtime | React | ^19.2.0 |
|
||||
| Styling | Hand-rolled CSS (`src/app/design.css` + per-route CSS). No Tailwind, no component library. | — |
|
||||
| Payments | stripe | ^18.5.0 (scaffolded, gated by `billingEnabled()`) |
|
||||
| Email | Cloudflare Email REST API (ADR-0003) — **never SMTP** | — |
|
||||
| Language | TypeScript strict | ^5.9.0 |
|
||||
| Deploy | Docker Compose on VPS `root@147.79.102.201:/root/anwarpi`, Traefik proxy network, apex anwarpy.ai (www 308) | — |
|
||||
|
||||
## 2. Repository layout
|
||||
|
||||
```
|
||||
/ docs + specs (PRD.md, ARCHITECTURE.md, docs/adr/, docs/launch/)
|
||||
web/ the app — everything below lives here
|
||||
src/app/
|
||||
(frontend)/ public site routes (about, articles, catalog, posts, topics,
|
||||
subscription, signup, login, verify-email, onboarding,
|
||||
account-settings, payment-*, terms, privacy)
|
||||
api/ route handlers (see §5)
|
||||
design.css design tokens — single source of visual truth
|
||||
layout.tsx fonts (Readex Pro), metadata templates
|
||||
src/collections/ Payload collections = the schema (see DATABASE.md)
|
||||
src/lib/ shared modules (see §4)
|
||||
src/migrations/ generated Drizzle migrations
|
||||
src/middleware.ts rate limiting on /api/users (login/lockout fidelity)
|
||||
scripts/ backup-db.sh, backfill-reading-minutes.ts, generate-covers.mjs, seed.ts
|
||||
docker-compose.vps.yml prod topology (db, web, volumes, proxy network)
|
||||
```
|
||||
|
||||
Rules: root holds docs only; the app never imports from outside `web/`; docs are committed with the change they describe.
|
||||
|
||||
## 3. The one decision that rules everything: effective access
|
||||
|
||||
```
|
||||
launch.ts (policy) + doc.access + doc.status → effective access
|
||||
```
|
||||
|
||||
- `src/lib/launch.ts` is the **only** place that reads `LAUNCH_MODE`. `billingEnabled()`, `freeEarlyAccess()`, `READING_WORDS_PER_MINUTE = 160`.
|
||||
- `Posts.ts` field-level `read` ACL on `content` (public iff `status=published && (access=free || freeEarlyAccess())`) — and the **same decision** is consumed independently by:
|
||||
- the article page (`posts/[slug]/page.tsx`) → full body vs H2-preview paywall,
|
||||
- the public post JSON route,
|
||||
- the download gate (`Files.ts` per-file access),
|
||||
- `llms.ts` (`fetchIndexDocs(withContent)`).
|
||||
- If you touch access logic, update **all** surfaces or extract a shared function first. Ghost-read (logged-out VIP post) is the acceptance check.
|
||||
|
||||
## 4. Module boundaries (`src/lib/`)
|
||||
|
||||
| Module | Owns | Must not |
|
||||
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
|
||||
| `launch.ts` | LAUNCH_MODE policy, WPM constant | read env elsewhere for launch state |
|
||||
| `viewer.ts` | `getViewer()` — session → `{email, role, id, interest?, level?, emailVerified?, onboarded?}` | touch collections directly beyond auth |
|
||||
| `lexical.ts` | Lexical serialization: `lexicalToText`, `countLexicalWords` (walks `content.root`!), `extractH2s`, `lexicalToPlain` | know about Posts/DB |
|
||||
| `secret-scan.ts` | `scanForSecrets`/`scanAgentPayload` — pattern names only in responses | log or return matched secret text |
|
||||
| `llms.ts` | llms.txt/full rendering, `fetchIndexDocs(withContent)` | bypass the access decision |
|
||||
| `topics.ts` | TOPICS registry (agents/models/automation/foundations), `topicsFor()`, `isTopic()` | hardcode slugs elsewhere |
|
||||
| `format.ts` | Arabic number/label agreement (`guidesLabel`, `minutesLabel`, `MEMBERSHIP_PRICE`) | duplicate Arabic plurals inline |
|
||||
| `mail.ts` | Cloudflare Email REST send | use SMTP; log recipient addresses |
|
||||
| `agent-media.ts` / `agent-files.ts` | pipeline ingestion of media/attachments | accept `access` from the payload |
|
||||
| `next.ts` | shared Next helpers | — |
|
||||
|
||||
Import rule: pages/components may import lib + payload; lib modules never import each other's internals — if two libs need shared logic, promote it to the lower-level module.
|
||||
|
||||
## 5. API surface & communication patterns
|
||||
|
||||
**Route handlers** (`src/app/api/**/route.ts`) return `NextResponse.json`. Every error body is `{"error": "<real Arabic sentence>"}` — honest, specific, never a bare code.
|
||||
|
||||
| Route | Auth | Notes |
|
||||
| ---------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| `POST /api/agent/posts`, `PUT /api/agent/posts/[slug]` | `x-agent-key` header | pipeline; 401 bad key, 400 shape, 409 slug conflict (after sourceId dedup), 422 secret scan |
|
||||
| `GET /api/posts/[slug]` | public | JSON honoring the access decision |
|
||||
| `POST /api/posts/[slug]/comments` | session required | server-forced author; moderated status (ADR-0001/0002) |
|
||||
| `POST /api/posts/[slug]/like` | session required | one per user per post |
|
||||
| `POST /api/posts/[slug]/view` | public | anonymous view counter |
|
||||
| `POST /api/notify` | public | always records; honest 503 when mail transport down; dup → `alreadySubscribed` |
|
||||
| `POST /api/subscribe` | public | 503 honest Arabic while billing disabled |
|
||||
| `POST /api/users`, `/api/auth/verify-email`, `/api/auth/resend-verification` | public / token | verification-token writes at signup; middleware rate-limits this path |
|
||||
| `GET /api/files/[id]` | per-file access gate | streams attachments |
|
||||
| `POST /api/stripe/webhook` | signature | no-op while `billingEnabled()` is false |
|
||||
|
||||
**Data access patterns:**
|
||||
|
||||
- Server components use the **Payload Local API** (`payload.find`, `payload.findByID`) — never internal fetch to own routes.
|
||||
- Client components are thin: forms POST to route handlers and render the returned Arabic message. No client data-fetching library, no global store; if a page needs reactive data, it re-fetches via a route handler or uses Payload's REST with credentials.
|
||||
- Generated types: `npm run generate:types` (runs as part of `build`) — collections' `Collection` types come from `payload-types.ts`, never hand-written interfaces for docs.
|
||||
|
||||
## 6. Rendering & state
|
||||
|
||||
- **Server components by default.** `'use client'` only for: forms (signup, notify, comments, account settings), small interactive bits (menu, like button). Check before adding more.
|
||||
- **State management = URL + server.** No Redux/Zustand/Jotai. Session state = `getViewer()`; launch state = `launch.ts`; content state = Payload. The only client state is form-local.
|
||||
- **No render-time nondeterminism** in components that render on the server: no `Date.now()` in bodies that should be static, no unseeded randomness.
|
||||
|
||||
## 7. Deployment topology
|
||||
|
||||
```
|
||||
Internet → Traefik (proxy net) → web (Next standalone, port 3000) → db (postgres:16, internal only)
|
||||
```
|
||||
|
||||
- `docker-compose.vps.yml` services: `db` (postgres:16, volume `db-data`, **no published ports**), `web` (volume `media-uploads`, `files-uploads`), Traefik labels for apex + `www → apex 308` (priority above API router).
|
||||
- `LAUNCH_MODE=free_early_access` lives in `/root/anwarpi/.env.production` — compose passes it; the file is never committed.
|
||||
- Migrations apply **on container boot**. Deploy = rsync `web/` (excludes `node_modules .next .git media files-private '.env*' '*.tsbuildinfo'`, **no `--delete`**) → `docker compose -f docker-compose.vps.yml up -d --build`.
|
||||
- Prod DB access for scripts: the standalone image has no `scripts/`; open an SSH tunnel to the db container IP and run `npx tsx` locally (see AGENTS.md rulebook).
|
||||
- Rollback: previous image + `docker compose up -d`; DB restores come from `backup-db.sh` dumps (rehearsed 2026-10-10).
|
||||
- **Anticipated: Railway move (owner, 2026-10-11).** Keep the app deployable there without redesign: all config via env vars (already true), **no host-local state in the container** (media/files volumes must move to object storage / managed volume; DB → managed Postgres), Traefik labels replaced by Railway's router + custom domain. Any change that deepens VPS coupling (cron on host, local disk caches) must be flagged in the PR that adds it.
|
||||
|
||||
## 8. Decision records
|
||||
|
||||
Architecture decisions live in `docs/adr/NNNN-*.md` (current: 0001 comments route, 0002 moderated comments/server-forced author, 0003 Cloudflare Email REST not SMTP, 0004 coming-soon subscribe at public launch, 0005 member trust model). New decisions that change structure, contracts, or policy get a numbered ADR — one file, context + decision + consequences.
|
||||
@@ -1,62 +0,0 @@
|
||||
# CODE_STYLE — anwarpy.ai
|
||||
|
||||
> TypeScript, strict, boring on purpose. The existing codebase is the style guide; this file makes it explicit. Formatting tooling may be added later only if it matches, not fights, this file.
|
||||
|
||||
## 1. TypeScript
|
||||
|
||||
- `strict: true` (tsc is a commit gate — `cd web && npx tsc --noEmit` must exit 0).
|
||||
- No `any`. Use `unknown` + narrowing, or the generated Payload types.
|
||||
- Document types come from `src/payload-types.ts` (`npm run generate:types`, runs inside `npm run build`). **Never hand-write an interface that mirrors a collection doc** — import the generated one; hand-written mirrors drift and lie.
|
||||
- Payload collection access/hook args: annotate the request/doc shape explicitly (existing pattern: `args: { doc?: {...}; req: { user?: {...} } | null }`).
|
||||
- Avoid non-null `!`; if you're sure, prove it with a check or a comment stating the invariant.
|
||||
|
||||
## 2. Naming
|
||||
|
||||
| Thing | Convention | Example |
|
||||
|---|---|---|
|
||||
| Files | kebab-case | `secret-scan.ts`, `notify-form.tsx` |
|
||||
| Route folders | Next convention, exact segment names in brackets | `posts/[slug]/route.ts` |
|
||||
| Components | named exports (function name = file name, PascalCase) | `export function Topnav()` |
|
||||
| Route handlers | Next default exports | `export async function POST(req: NextRequest)` |
|
||||
| Lib functions | camelCase, exported individually | `lexicalToText`, `freeEarlyAccess` |
|
||||
| Constants | SCREAMING_SNAKE | `READING_WORDS_PER_MINUTE`, `MEMBERSHIP_PRICE` |
|
||||
| DB fields | camelCase in Payload | `readingMinutes`, `authorName` |
|
||||
| Booleans | is/has/can/should or unambiguous verb | `billingEnabled`, `emailVerified` |
|
||||
|
||||
## 3. Error handling
|
||||
|
||||
- **Route handlers**: validate → early `NextResponse.json({ error: '<Arabic sentence>' }, { status })`. Statuses: 400 shape, 401 auth, 403 forbidden, 404 missing, 409 conflict (slug), 422 semantic rejection (secret scan), 429 rate-limited, 503 dependency honestly down.
|
||||
- Error text is a **fixed Arabic sentence owned by the route** — specific about what failed («الدفع غير مفعّل خلال فترة الوصول المبكر.»). Never echo user input into the message; never expose stack traces or internal hosts; never a bare code with no words.
|
||||
- Never swallow: no empty `catch`. If you catch to continue, comment why. Server-side failures get `console.error` with context (no secrets).
|
||||
- **Honest failure is a feature** (PRD principle 1): if a dependency is down (mail transport, billing), return 503 with the true Arabic explanation instead of faking success. The notify route is the reference implementation.
|
||||
|
||||
## 4. Server vs client components
|
||||
|
||||
- Default: server components. `'use client'` only for forms and small interactions — check existing (`account-settings/client.tsx`, `notify-form.tsx`) before adding a new one.
|
||||
- No secrets, no `process.env` (non-public), no Payload local API calls in client components. They talk to route handlers with `fetch` and render the returned Arabic message.
|
||||
- No data-fetching libraries, no global client state (ARCHITECTURE §6).
|
||||
|
||||
## 5. Arabic & RTL in code
|
||||
|
||||
- UI copy is Arabic with «» quotes; keep strings verbatim from the PRD where they're contracts (honest 503s, notice strips).
|
||||
- Latin islands inside RTL: wrap in `<bdi dir="ltr">` (`$10`, `anwarpy.ai`, code, `GPTBot`).
|
||||
- Plurals/counts via `src/lib/format.ts` (`guidesLabel`, `minutesLabel`, `formatNumber`) — never inline Arabic number agreement.
|
||||
|
||||
## 6. Comments & docs
|
||||
|
||||
- Comments explain invariants and decisions, not syntax. Reference the contract: «L-02», «ADR-0003», «PRD §3.2» are valid shorthand — these docs are the map.
|
||||
- When you change a documented decision, update the doc in the same PR (ADR for structural decisions — ARCHITECTURE §8).
|
||||
- No commented-out code committed. Delete it; git remembers.
|
||||
|
||||
## 7. Git & PRs (Gitea)
|
||||
|
||||
- `main` is deployable truth. Feature branches: `launch/…`-style prefixes (`feat/…`, `fix/…`, `docs/…`).
|
||||
- PRs via Gitea; merge = **POST** `/repos/ahmed/anwar-pi-website/pulls/{index}/merge` with `{"Do":"merge"}` (PUT → 405). Evidence-updating doc commits may go straight to `main` when they record verified facts.
|
||||
- Commit messages: imperative, specific («fix: unwrap Lexical root in lexicalToText/countLexicalWords»), no «update stuff».
|
||||
- Never commit: `.env*`, `media/`, `files-private/`, `backups/`, build output, `.tsbuildinfo`.
|
||||
- Destructive ops (`reset --hard`, `push -f`, branch deletion) require the owner's explicit go-ahead.
|
||||
|
||||
## 8. Dependencies
|
||||
|
||||
- Reuse ladder (gstack): repo helper → stdlib → platform → installed dep → new dep. `stripe` is already installed (do not add a second payment lib); `sharp` exists for images; `tsx` for scripts.
|
||||
- New runtime deps need a PR-level justification line in the description; dev deps for testing are pre-approved by TESTING.md.
|
||||
-75
@@ -1,75 +0,0 @@
|
||||
# DATABASE — anwarpy.ai
|
||||
|
||||
> The schema is **Payload-first**: collections in `web/src/collections/` are the source of truth; SQL in Postgres is a generated artifact. This document maps the logical schema; never edit SQL by hand.
|
||||
|
||||
## 1. Adapter & migrations
|
||||
|
||||
- `@payloadcms/db-postgres` (Drizzle). Connection = `DATABASE_URI` (prod: composed by `docker-compose.vps.yml` from `DB_PASSWORD`; local: `web/.env` → LAN Postgres 192.168.88.36).
|
||||
- Migrations live in `src/migrations/` (timestamped `YYYYMMDD_HHMMSS.ts` + paired `.json`). Created with `npx payload migrate:create`; applied **on container boot** in prod, or `npx payload migrate` locally.
|
||||
- Rules: never edit an applied migration (history: the `20261003_111451` duplicate-`full_name` fix was done in place *before* prod applied it — that's the exception that proves the risk). Data backfills are standalone scripts under `web/scripts/` (`backfill-reading-minutes.ts` pattern), not migrations. `payload_migrations` is bookkeeping — if it says applied, it is.
|
||||
|
||||
## 2. Collections
|
||||
|
||||
### `posts` — guides (the core table)
|
||||
| Field | Type | Notes |
|
||||
|---|---|---|
|
||||
| `title`, `slug` | text | slug **unique**, URL identity, 409 on conflict |
|
||||
| `dek` | text | standfirst/summary, feeds metadata + JSON-LD |
|
||||
| `category` | select | وكلاء / نماذج / استرجاع / سلامة / أدوات / أعمال |
|
||||
| `topics` | select/array | registry in `src/lib/topics.ts` (agents, models, automation, foundations) |
|
||||
| `access` | select `free` \| `vip` | **intended tier — data, not state**; never rewritten to simulate launch states |
|
||||
| `content` | lexical (richtext) | serialized `{root:{children:[…]}}`; **field-level read ACL** (ARCHITECTURE §3) |
|
||||
| `contentType` | select | note / tutorial / case_study / comparison — badge |
|
||||
| `authorName` | text | visible byline; also JSON-LD author Person |
|
||||
| `sourceId` | text | agent-pipeline idempotency; dedup before slug-409 |
|
||||
| `cover` | upload → `media` | og:image source (1200×630) |
|
||||
| `readingMinutes` | number | **computed at write** (`countLexicalWords` ÷ `READING_WORDS_PER_MINUTE`=160); stripped from agent payloads; backfilled honestly |
|
||||
| `publishedAt` | date | feeds «حُدّث» + JSON-LD |
|
||||
| `status` | select `draft` \| `published` | public visibility gate; `publish: true` agent opt-in |
|
||||
| derived/rels | — | `views`, `likes` counters (see routes) |
|
||||
|
||||
### `users`
|
||||
Payload auth: `email` (unique), `password` (hash), `fullName`, `interest`/`level` (onboarding), `emailVerified` flag + `verification_token` (written at signup, ADR-compliant), `stripeCustomerId` (Phase 3; hidden/removed when empty — never exposed to frontend). Roles: `admin` vs member (see SECURITY §3). Note: `20261003_111451` removed a duplicate `full_name` column.
|
||||
|
||||
### `comments`
|
||||
`post` (rel → posts), `author` (rel → users, **forced server-side** — the API ignores any client-sent author, ADR-0002), `authorName` (display snapshot), `body` (textarea), `status` (moderation: pending → published / rejected). Anonymous requests are rejected at the route (PRD §3.5). `admin.defaultColumns: post, authorName, status, createdAt`.
|
||||
|
||||
### `launch_notifications`
|
||||
`email`, `topic`, timestamps. Written by `/api/notify` on every submission (even when mail transport is down — the honest-503 still records the row). Duplicate email → no new row, `alreadySubscribed: true`. Zero rows during the 2026-10-10 prod smoke cleanup is the expected state.
|
||||
|
||||
### `post_likes`
|
||||
`user` (rel), `post` (rel) — **one per user per post** (uniqueness enforced in the like route before insert); counter incremented on `posts`. Auth required (401 otherwise).
|
||||
|
||||
### `media`
|
||||
Payload uploads (covers + pipeline images) → volume `media-uploads`; `sharp` for sizes. Public URL pattern `/api/media/file/...`.
|
||||
|
||||
### `files`
|
||||
Guide attachments → volume `files-uploads`; per-file `access` mirrors its post (download gate `GET /api/files/[id]`); ingested via `agent-files.ts` (never accepts `access` from the payload).
|
||||
|
||||
## 3. Relationships & integrity
|
||||
|
||||
```
|
||||
posts 1─* comments *─1 users
|
||||
posts 1─* post_likes *─1 users (unique(user,post))
|
||||
posts *─1 media (cover)
|
||||
posts 1─* files (each file carries its own access)
|
||||
```
|
||||
|
||||
Enforcement lives in collection hooks/route handlers (Payload has no SQL-level FK constraints across its tables for these patterns) — hence the "check then insert" pattern in `like` (query `where user+post` before `create`). Keep that pattern for any new per-user-once resource.
|
||||
|
||||
## 4. Indexing
|
||||
|
||||
- Unique: `posts.slug`, `users.email`, `posts.sourceId` (dedup lookup), `verification_token`.
|
||||
- Hot lookups: `comments.post` (+ `status`), `post_likes.post`, `launch_notifications.email` (dup check).
|
||||
- Add indexes via migrations when a query pattern shows up in slow logs — not speculatively.
|
||||
|
||||
## 5. Backups & restore
|
||||
|
||||
- `web/scripts/backup-db.sh` → `pg_dump` gzip; prod cron/backup policy is an owner action.
|
||||
- Rehearsed restore (2026-10-10): restore into a **temp DB** (`anwarpi_restore_test`), verify counts (`posts`, `users`, `payload_migrations`), then drop. Never restore over the live DB without owner approval.
|
||||
|
||||
## 6. Data rules that are also PRD rules
|
||||
|
||||
- `access` and `readingMinutes` are stripped from agent payloads (`pickFields`) — the pipeline cannot set them.
|
||||
- Reading minutes are computed, never trusted from input; if a script touches them, it must recompute from `content` and report scanned/updated counts.
|
||||
- Personal data in `launch_notifications`/`users` emails: never rendered into docs, videos, or evidence (the smoke test uses `@example.com` rows and deletes them).
|
||||
@@ -1,74 +0,0 @@
|
||||
# DESIGN_SYSTEM — anwarpy.ai
|
||||
|
||||
> Canonical tokens live in `web/src/app/design.css`. This file documents them and the rules for using them. If CSS and this file disagree, fix one of them in the same PR.
|
||||
|
||||
## 1. Design personality
|
||||
|
||||
Editorial, calm, premium-dark. Ink surfaces, champagne accents, generous whitespace, Arabic-first typography. Restraint is the brand: one accent color, used sparingly; motion is short and soft; nothing blinks, nothing bounces.
|
||||
|
||||
## 2. Color tokens
|
||||
|
||||
| Token | Value | Role |
|
||||
|---|---|---|
|
||||
| `--ink` | `#131519` | page background (`--bg`) |
|
||||
| `--ink-2` | `#17191d` | raised background |
|
||||
| `--basalt` | `#1c1f24` | card/surface (`--surface`) |
|
||||
| `--seam` | `#2b2f36` | hairline borders (`--border`) |
|
||||
| `--seam-2` | `#3a3f47` | hover border, stronger seam |
|
||||
| `--mist` | `#ece9e3` | primary text (`--fg`) |
|
||||
| `--stone` | `#a3a09a` | muted text (`--muted`) |
|
||||
| `--dim` | `#7b7974` | faintest text (meta only) |
|
||||
| `--champagne` | `#d4b47c` | THE accent (`--accent`) — badges, CTAs, highlights |
|
||||
| `--champagne-ink` | `#1a150c` | text/icons on champagne (`--accent-ink`) |
|
||||
|
||||
Rules:
|
||||
- Never introduce a new hue. Semantic aliases (`--bg`, `--surface`, `--fg`, `--muted`, `--border`, `--accent`) are the only tokens components may use — raw hex is for `design.css` only.
|
||||
- Champagne on ink or champagne-ink on champagne. Never champagne text on basalt for body copy (contrast), never stone below 14px.
|
||||
- Success/warning/error states (form errors, honest 503s) use `--mist`/`--stone` + wording first; reserve red only where the CSS already defines it. Do not invent traffic-light colors.
|
||||
|
||||
## 3. Typography
|
||||
|
||||
- **Readex Pro** (Arabic + Latin, single family), loaded in `layout.tsx` via `next/font/google`, weights 300–700. `--font-display: var(--font-sans), "Segoe UI", sans-serif`.
|
||||
- Scale: hero H1 ~2.5rem/700; section H2 ~1.5rem/600; body 1rem/400 with line-height ≥1.8 for Arabic; meta/captions 0.875rem `--stone`.
|
||||
- Arabic-first: `direction: rtl` at the page root; Arabic quotes «»; numerals via `formatNumber` (Arabic-Indic where the site does).
|
||||
- **LTR islands** inside RTL text use `<bdi dir="ltr">`: `anwarpy.ai`, `$10`, code, identifiers, agent names (GPTBot…). Never let a raw Latin token break RTL flow.
|
||||
- No `<br>` for spacing; use margins. No font-size below 0.75rem.
|
||||
|
||||
## 4. Spacing & shape
|
||||
|
||||
- Space scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px. Section padding 48–64px; card padding 16–24px; page max-width container per existing layout (centered, ≥24px gutters).
|
||||
- Radii: cards/pills 8–12px; badges/buttons pill (999px) where the existing CSS does; inputs match buttons.
|
||||
- Borders: 1px `--seam` everywhere; hover → `--seam-2`. No heavy shadows; elevation = `--ink-2`/`--basalt` layering, not blur.
|
||||
|
||||
## 5. Component inventory (build from these, extend the list, never fork it)
|
||||
|
||||
Existing, in `src/components/` + route CSS: `topnav.tsx`, `site-menu.tsx`, `nav-links.tsx`, `footer.tsx`, `anwarpi-background.tsx`, `set-body-attr.tsx`.
|
||||
|
||||
Recurring patterns (CSS classes are the contract):
|
||||
- **Buttons**: `.btn`, `.btn.btn-primary` (champagne bg, `--accent-ink` text), disabled/coming-soon state = «قريباً» pill, wired to `subscribe-button.tsx comingSoon` prop. Disabled buttons are visually disabled from first paint and explain why in Arabic.
|
||||
- **Badges/pills**: access badge «مجاني» / «للأعضاء»; content-type badge (note/tutorial/case_study/comparison); «وصول مبكر مجاني» champagne strip.
|
||||
- **Notice strip**: the early-access notice on articles — champagne-tinted band, verbatim copy from PRD §3.2, never a modal.
|
||||
- **Guide card**: surface card, dek line, meta row (category · reading minutes · «حُدّث»), champagne hover seam. Topic hubs and «ابدأ من هنا» reuse it.
|
||||
- **Article body**: headings, paragraphs, lists, blockquote, code (LTR island, scrollable), **real `<table>`** for tabular data (never screenshot/ASCII), links `--champagne` underline.
|
||||
- **Forms**: label above input, input bg `--ink-2`, border `--seam`, error text = the API's Arabic sentence verbatim, loading state disables + keeps label, success replaces form state («تم! سنراسلك عند تفعيل العضوية.»).
|
||||
- **Tables renderer**: for Lexical table nodes — mobile-safe overflow wrapper.
|
||||
|
||||
New components: reuse an existing class first, then extend `design.css` (or the route's CSS) — do not add a component library (no shadcn/radui/MUI) and no Tailwind (decision, 2026-10-11).
|
||||
|
||||
## 6. Motion
|
||||
|
||||
- Durations 150–250ms, ease-out. Hover: border color + 1–2px translate. Entrances: fade/rise ≤8px.
|
||||
- No parallax, no infinite loops, no scroll-hijack. Reduced-motion: honor `prefers-reduced-motion` for any added animation.
|
||||
- Micro-interactions (like button) may pulse once on success — once, not looping.
|
||||
|
||||
## 7. Accessibility floor (enforced by `npx hyperframes check` on the brag video; treat as the site bar too)
|
||||
|
||||
- Contrast: body text ≥ 4.5:1, large text ≥ 3:1 (`--stone` on `--basalt` passes; `--dim` only ≥1.5rem or decorative).
|
||||
- Focus visible: 2px `--champagne` outline on interactive elements.
|
||||
- Every image has meaningful Arabic `alt` (covers: the guide title); icon buttons have `aria-label`.
|
||||
- Landmarks: header/nav/main/footer; one H1 per page; heading order never skips.
|
||||
- Forms: `<label for>`, `aria-live="polite"` status regions (existing pattern: `#notify-done`).
|
||||
|
||||
## 8. Cover images
|
||||
|
||||
Generated via `npm run covers` (`scripts/generate-covers.mjs`) — 1200×630, ink/champagne system, Arabic title shaping checked. og:image dimensions are asserted in tests/evidence (1200×630). Don't hand-drop covers of other sizes.
|
||||
-49
@@ -1,49 +0,0 @@
|
||||
# GLOSSARY — أنور بي آي
|
||||
|
||||
Implementation-free vocabulary shared across code, QA, and product talk.
|
||||
|
||||
## العضوية / Entitlement
|
||||
|
||||
A user's paid access level. Server-derived from `users.role`: `vip` or `admin` counts as entitled; `free` does not. Never cached client-side as a boolean.
|
||||
|
||||
## مفتوح / Unlocked
|
||||
|
||||
Whether the current viewer may read a given post's full body: `post.access === 'free' || entitled`. Derived per request; never stored on the user.
|
||||
|
||||
## تعليق / Comment
|
||||
|
||||
A moderated note by an authenticated member on a published post. Lifecycle `pending → approved | rejected`; only `approved` is publicly visible; only admins move status; authors cannot edit or delete their own comments (moderated model). Authors see their own `pending` comments on the post page tagged «قيد المراجعة».
|
||||
|
||||
## اسم العرض / Display name
|
||||
|
||||
The public author label of a comment: a snapshot of `users.fullName` taken at submit time, or the fixed word «عضو» when absent. Never the email.
|
||||
|
||||
## الهوية / Identity
|
||||
|
||||
- **Canonical domain: `anwarpy.ai`** — the Cloudflare zone (`anwarpi.ai` references are legacy being replaced; see repo history).
|
||||
- **Contact inbox: `hello@anwarpy.ai`** — receives via Cloudflare Email Routing, forwards to ahmedalkhair.sa@gmail.com.
|
||||
- **Sender: `noreply@anwarpy.ai`** — sends via Cloudflare Email Sending (REST).
|
||||
|
||||
## الاشتراك قريبًا / Coming soon
|
||||
|
||||
The public state of the subscribe flow while billing is disabled. From the first paint the UI renders a disabled «قريباً» button (when `LAUNCH_MODE` disables billing there is no active «اشترك الآن» that fails late); if a request is still attempted while Stripe keys are absent, `POST /api/subscribe` returns `{ comingSoon: true }` with no `url`, and the button shows an in-page retry state — **not a redirect** to `/payment-success` and no VIP is minted there either way. No VIP is granted without a Stripe-verified session.
|
||||
|
||||
## الوصول المبكر المجاني / Free early access
|
||||
|
||||
The launch policy (`LAUNCH_MODE=free_early_access`, the compose default): every approved **published** post is readable and its approved files downloadable without an account, regardless of the post's intended tier. Billing stays off; nothing is charged or auto-subscribed. The mode has no date expiry — the ~two-week checkpoint is a review date, not a cutoff.
|
||||
|
||||
## الطبقة المقصودة / Intended tier
|
||||
|
||||
The post's `access` field (`free` | `vip`) — what the content is meant to be once billing is enabled. The launch never rewrites it: a VIP-designated post opened by early access keeps `access: 'vip'` so rollback is instant and cards/comparisons stay truthful.
|
||||
|
||||
## الوصول الفعلي / Effective access
|
||||
|
||||
The decision actually enforced at request time: `status: 'published'` **and** (`access: 'free'` **or** free early access). One policy (`src/lib/launch.ts`) feeds pages, `/api/posts/[slug]`, the file gate, and the llms exports, so visible labels and served bytes can't disagree. A draft is never readable in any mode.
|
||||
|
||||
## كتابة موثوقة / Trusted write
|
||||
|
||||
An operation on a member record performed by server code (email verification, payment activation, billing webhook, seed), as opposed to a client request. Client requests can never set a member's privilege, verification, or billing fields.
|
||||
|
||||
## موثّق / Verified
|
||||
|
||||
Whether the member confirmed their email address. Required to comment; admins are exempt; set only by server code, never by client requests.
|
||||
@@ -1,101 +0,0 @@
|
||||
# PRD — أنور بآي (anwarpy.ai)
|
||||
|
||||
> Owner: Ahmed (anwarpy). Maintainer of record: this document. Last revised: 2026-10-11.
|
||||
> Status vocabulary in this doc: **MVP** = shipped 2026-10-10 (verified, see `docs/launch/2026-10-10-launch-readiness.md` §11). **Roadmap** = committed, not built. **Out of scope** = we will not build it; do not ask.
|
||||
|
||||
## 1. Vision
|
||||
|
||||
Anwarpy.ai is an Arabic-first library of practical AI tips and tricks — automation, agentic workflows, models, tooling — whose single goal is: **help the Arabic reader actually use AI and keep discovering new tricks.** Arabic engineers, founders, and curious professionals learn to *understand* AI and then *build* with it: «افهم الذكاء الاصطناعي، ثم ابنِ به.»
|
||||
|
||||
Three product principles, all enforced server-side:
|
||||
|
||||
1. **Honesty over theater.** Reading times are computed from real content, errors say what failed in real Arabic, the paywall never lies about what the visitor can read.
|
||||
2. **The reader is sovereign.** During free early access every published guide — including membership-tier ones — is fully readable. No dark patterns, no fake scarcity, no confirm-password, no CAPTCHA.
|
||||
3. **Machines are readers too.** Guides are served clean to humans and to AI crawlers (robots.txt policy, llms.txt/llms-full.txt, honest JSON-LD).
|
||||
|
||||
## 2. Personas
|
||||
|
||||
| Persona | Who | What they get |
|
||||
|---|---|---|
|
||||
| **The Curious Reader** | Arabic speaker googling «كيف أبني وكيل ذكاء اصطناعي» | Free guides, topic hubs, honest reading times, notify list |
|
||||
| **The Practitioner** | Engineer/founder implementing agents at work | Advanced guides + work files during early access (free); after billing launches: the $10/mo membership (S-01…S-08) |
|
||||
| **The Writer (Ahmed)** | Solo owner; writes in `/admin`, ships via the agent pipeline | Payload admin, agent API with secret scanning, moderation queue, comment management |
|
||||
|
||||
## 3. MVP — shipped 2026-10-10
|
||||
|
||||
The MVP is exactly what launched. Nothing below may regress without an explicit owner decision.
|
||||
|
||||
### 3.1 Reading & content
|
||||
- **Guides** (`Posts`): Arabic titles/deks, Lexical bodies, categories وكلاء/نماذج/استرجاع/سلامة/أدوات/أعمال, topics (agents|models|automation|foundations), `contentType` badge (note/tutorial/case_study/comparison), `authorName` byline, «حُدّث» freshness, computed `readingMinutes` (160 wpm, written at save + backfilled honestly).
|
||||
- **Topic hubs** `/topics/{agents,models,automation,foundations}` with sitemap entries.
|
||||
- **Tables** in article bodies render as real tables (mobile-safe), not code blocks.
|
||||
- **AI/SEO surfaces**: robots.txt allows the 10 named AI crawlers; `/llms.txt` index; `/llms-full.txt` full bodies; JSON-LD Article + BreadcrumbList (+ FAQPage on /subscription, Organization on home); `isAccessibleForFree` reflects reality.
|
||||
- **Downloads**: guide attachments gated by the same access policy as their post (per-file `access`).
|
||||
|
||||
### 3.2 Access policy (the core contract)
|
||||
- `LAUNCH_MODE` server-side policy (`web/src/lib/launch.ts`): `free_early_access` = every published post serves its full body; billing routes honestly 503 in Arabic. `paid` = membership-tier (`access: 'vip'`) posts paywall with H2-preview + fine print.
|
||||
- The *intended tier* (`access: free|vip`) is data; the *effective access* is policy. Never rewrite `access` to simulate a launch state.
|
||||
- Ghost rule: any verification must be done as a logged-out visitor reading a VIP post.
|
||||
|
||||
### 3.3 Accounts & trust
|
||||
- Email+password signup (no confirm-password field), verification email with token, honest 429 lockout message, duplicate-email inline error, email-typo suggestion, live password hint, reassurance microcopy.
|
||||
- Verification state is written at signup (`verification_token`); verify-email flow supports changing the email.
|
||||
- Account settings + onboarding (interest/level) exist; `getViewer()` resolves the session.
|
||||
|
||||
### 3.4 Notify list
|
||||
- `/api/notify` records every submission; sends a confirmation mail when transport is live; honest 503 «خدمة البريد غير مربوطة بعد.» when Cloudflare Email Sending is off (row still kept); duplicate emails return `alreadySubscribed: true` without re-mailing.
|
||||
|
||||
### 3.5 Comments (decided 2026-10-11 — in MVP scope)
|
||||
- Any **logged-in** user may comment on a post — free or VIP, tier does not matter. **Anonymous visitors cannot comment** (API rejects unauthenticated; UI prompts login).
|
||||
- Moderated: comments enter a non-public status; the author identity is **forced server-side** from the session (client cannot spoof `author`), display name from `authorName` (ADR-0002).
|
||||
- Route contract: not a public CRUD API — comment creation is a server-validated route bound to the post (ADR-0001).
|
||||
- Admin moderation lives in `/admin` (status transitions: pending → published / rejected).
|
||||
|
||||
### 3.6 Agent pipeline (authoring automation)
|
||||
- `POST/PUT /api/agent/posts` with `x-agent-key` header; strips `access`/`readingMinutes` from accepted fields; `sourceId` dedup (idempotent re-runs); secret scanning (`scanAgentPayload`) rejects AWS keys, PEM blocks, `sk-` keys, GitHub tokens, generic credentials with **422 + pattern names only**; string `content` is a 400 (Lexical JSON required); `publish: true` is explicit opt-in, PUT cannot set `status`.
|
||||
- Media/Files ingestion helpers (`agent-media.ts`, `agent-files.ts`).
|
||||
|
||||
### 3.7 Interactions
|
||||
- One like per logged-in user per post (`PostLikes`, uniqueness enforced), public like counter; anonymous view counting on `/api/posts/[slug]/view`.
|
||||
|
||||
### 3.8 Ops floor
|
||||
- `web/scripts/backup-db.sh` + documented restore rehearsal (VPS).
|
||||
- Feedback = `mailto:hello@anwarpy.ai` in the footer.
|
||||
- Deployment: rsync → `docker compose -f docker-compose.vps.yml up -d --build` on the VPS; migrations apply on boot.
|
||||
|
||||
## 4. Roadmap (committed, phased)
|
||||
|
||||
### Phase 2 — Trust & legal
|
||||
- **L-03 /terms + /privacy**: real content from owner facts recorded in `docs/launch/owner-inputs-terms-privacy.md`; effective date; §9 items 1–7. Acceptance: pages live, linked in footer, listed in sitemap.
|
||||
- **Comments shipping polish**: notification to writer on new pending comment; abuse valve (delete + block author) in admin.
|
||||
|
||||
### Phase 3 — Money & measurement (gate: S-01…S-08 checklist §6)
|
||||
- **Stripe paid tier S-01…S-08**: checkout, webhook (`/api/stripe/webhook` exists; `stripeCustomerId` on Users), `vip-onboarding`, payment success/cancel pages; flip = `LAUNCH_MODE=paid` policy change only. Paywall CRO (H2 preview + fine print + #faq) already built.
|
||||
- **L-11 analytics**: vendor decision (owner); event list is pre-agreed in the launch checklist.
|
||||
- **L-12 editorial distribution**: owner-driven announcement; no agent-posted content.
|
||||
|
||||
### Phase 4 — Product growth (owner-added 2026-10-11)
|
||||
- **Mailing list v2**: move from notify rows to a real newsletter (send digests of new guides; unsubscribe honoring; Cloudflare Email transport).
|
||||
- **Direct messaging with the writer**: logged-in members can message Ahmed from within the site; inbox in `/admin`; rate-limited; no exposure of his personal email.
|
||||
- **In-post tool-finder chatbot**: assistant that reads the site's own posts (llms-full corpus) and points the reader to the right guide/tool inside anwarpy.ai; Arabic-first; cites posts; never invents tools. Must reuse the same access policy (never leak VIP bodies to unauthenticated users through the bot).
|
||||
|
||||
## 5. Strictly out of scope
|
||||
|
||||
Do not build, do not scaffold, do not "prepare" these:
|
||||
|
||||
- OAuth / Passkeys / SMS or WhatsApp login in the MVP — **anticipated evolution** (owner, 2026-10-11): Google auth or Clerk may be added later for easy integration; keep `viewer.ts` as the single session seam so providers can swap behind it.
|
||||
- Native mobile apps.
|
||||
- Multi-tenant or white-label anything; a second site on the same deploy.
|
||||
- Public third-party REST API beyond what exists (agent API is for the owner's pipeline only).
|
||||
- User-generated uploads of arbitrary files; media uploads stay author/admin-only.
|
||||
- CAPTCHA, aggressive rate limiting beyond the existing login lockout (owner decision, recorded).
|
||||
- Real-time anything (WebSockets/presence) until Phase 4 messaging is designed.
|
||||
- Any rewrite of `access` fields to simulate launch states.
|
||||
|
||||
## 6. Success metrics
|
||||
|
||||
Available now (no vendor dependency): notify signups, verified-account ratio, likes per post, views per post, comment quality (published/rejected ratio). Post-L-11: activation (first guide read), return rate, member conversion once billing is live.
|
||||
|
||||
## 7. Acceptance culture
|
||||
|
||||
A checkbox without evidence is not verification. Every claim in the launch doc has a command + observed output. This PRD inherits that rule: features in §3 are verified by the §11 evidence; new features get the same treatment (ghost-read checks, honest-error checks, row-count checks).
|
||||
@@ -1,180 +1,37 @@
|
||||
<div align="center">
|
||||
# أنور بي آي
|
||||
|
||||
<img src="web/public/brand/icon-256.png" alt="شعار أنور بي آي" width="120"/>
|
||||
منصة عربية ثابتة لتعلّم الذكاء الاصطناعي، تتضمن محتوى مجانيًا ومقالات VIP وتجربة اشتراك وتهيئة للمشترك الجديد. الواجهة متجاوبة مع الهاتف واللوحي وسطح المكتب.
|
||||
|
||||
# أنور بي آي — AnwarPi
|
||||
## الصفحات الرئيسية
|
||||
|
||||
**محتوى عربي عملي لتعلّم الذكاء الاصطناعي، بلا ضجيج.**
|
||||
- الصفحة الرئيسية والكتالوج التعليمي
|
||||
- مقال مجاني ومعاينة مقال VIP ومقال VIP كامل
|
||||
- الاشتراك وتهيئة مشترك VIP جديد
|
||||
- تسجيل الدخول واستعادة كلمة المرور وإعدادات الحساب
|
||||
- سياسة الخصوصية
|
||||
|
||||
Arabic-first platform for learning AI: free guides, VIP deep-dives, a searchable library, and moderated community — built with **Next.js 15 + Payload 3 + PostgreSQL** behind Traefik.
|
||||
## التشغيل محليًا
|
||||
|
||||
**[anwarpy.ai](https://anwarpy.ai)** · [دليل الوكيل الآلي (AGENT.md)](AGENT.md) · [مسرد المصطلحات](GLOSSARY.md) · [قرارات التصميم](docs/adr)
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 🖼️ لقطات من الموقع
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center"><strong>الصفحة الرئيسية</strong></td>
|
||||
<td align="center"><strong>المكتبة</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="docs/screenshots/home.png" alt="الصفحة الرئيسية — أنور بي آي" width="470"/></td>
|
||||
<td><img src="docs/screenshots/articles.png" alt="المكتبة — أنور بي آي" width="470"/></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><strong>صفحة دليل</strong></td>
|
||||
<td align="center"><strong>العضوية</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="docs/screenshots/post.png" alt="صفحة دليل — أنور بي آي" width="470"/></td>
|
||||
<td><img src="docs/screenshots/subscription.png" alt="العضوية — أنور بي آي" width="470"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## ما هو أنور بي آي؟
|
||||
|
||||
منصة عربية لتعلّم الذكاء الاصطناعي بشكل عملي: أدلة مجانية للجميع، وأدلة متعمقة لأعضاء **VIP**، ومكتبة قابلة للبحث والتصفية، وتعليقات مُراقَّبة، ومسارات تعلّم (كتالوج). الواجهة عربية بالكامل (RTL) وتعمل على الهاتف واللوحي وسطح المكتب.
|
||||
|
||||
## ✨ المميزات
|
||||
|
||||
- 📚 **المكتبة** — كل الأدلة مع بحث وتصفية حسب التصنيف (وكلاء، نماذج، استرجاع، سلامة، أدوات، أعمال).
|
||||
- 🔓 **بوابة محتوى** — الأدلة المجانية كاملة؛ أدلة VIP تظهر بمعاينة مقفلة حتى يصبح القارئ مشتركًا.
|
||||
- 👤 **حسابات** — تسجيل، دخول، استعادة كلمة المرور، تحقق البريد، وإعدادات حساب كاملة.
|
||||
- 💬 **تعليقات مُراقَّبة** — دورة حياة `pending → approved`؛ يظهر العلني المعتمَد فقط.
|
||||
- 🗺️ **الكتالوج والمسارات** — رحلة تعلّم مرتّبة حسب المستوى (مبتدئ/متوسط/متقدم).
|
||||
- 🤖 **نشر آلي** — API للوكلاء الخارجيين (`/api/agent/posts` بمفتاح `x-agent-key`) لنشر الأدلة من خط إدارة المحتوى.
|
||||
- 💳 **عضوية VIP** — Stripe جاهز؛ حتى تفعيل المفاتيح يعمل زر الاشتراك بوضع «قريبًا».
|
||||
- 🌓 **هوية بصرية داكنة** — أشعة فضية ولمسة سماوية؛ انظر `brand-spec.md`.
|
||||
|
||||
## 🔄 كيف يعمل الموقع؟ (شرح التدفق)
|
||||
|
||||
### تدفق الزائر
|
||||
|
||||
```mermaid
|
||||
flowchart RL
|
||||
Z[الزائر] --> A[الصفحة الرئيسية]
|
||||
A --> B[المكتبة / الكتالوج]
|
||||
B --> C{نوع الدليل؟}
|
||||
C -->|مجاني| D[قراءة كاملة + إعجاب وتعليق]
|
||||
C -->|VIP| E[معاينة مقفلة]
|
||||
E --> F[إنشاء حساب / دخول]
|
||||
F --> G{مشترك VIP؟}
|
||||
G -->|نعم| D
|
||||
G -->|لا| H[صفحة العضوية]
|
||||
H --> I[تهيئة مشترك VIP جديد]
|
||||
I --> D
|
||||
```
|
||||
|
||||
1. **تصفّح** — الزائر يفتح الرئيسية، يتصفح المكتبة أو الكتالوج، ثم يفتح دليلًا.
|
||||
2. **قراءة** — الدليل المجاني يُقرأ كاملًا. دليل VIP يظهر جزءًا منه فقط مع طبقة قفل.
|
||||
3. **حساب** — التسجيل يمنح دور `free` فقط (الخادم يجبر ذلك؛ طلب العميل لا يستطيع ترقية نفسه). بعد التحقق من البريد يمكن التعليق.
|
||||
4. **ترقية** — صفحة العضوية تقود لـ Stripe؛ بعد الدفع الناجح يُفعَّل دور `vip` عبر مسار موثوق من الخادم، ثم معالجة تهيئة VIP الجديد.
|
||||
|
||||
### تدفق المحتوى (نشر الأدلة)
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
T[مواضيع المالك في AppFlowy] --> P[خط النشر الآلي]
|
||||
P -->|POST/PUT مع x-agent-key| A[API الوكلاء]
|
||||
A --> V[التحقق والتغطية الافتراضية للغلاف]
|
||||
V --> D[(PostgreSQL)]
|
||||
D --> S[anwarpy.ai]
|
||||
```
|
||||
|
||||
- يملك المالك قائمة مواضيع؛ يعمل خط النشر FIFO (دليل واحد لكل تشغيل، الاثنين/الأربعاء/الجمعة).
|
||||
- كل دليل يُوسم `free` أو `vip`؛ غير الموسوم = مجاني.
|
||||
- الأغلفة 1200×630، ولكل تصنيف غلاف افتراضي احتياطي.
|
||||
|
||||
### تدفق الطلب عبر الخادم
|
||||
|
||||
```
|
||||
المتصفح → Traefik (حدود المعدل: pagelimit / apilimit / connlimit)
|
||||
→ Next.js 15 (الصفحات + /api)
|
||||
→ Payload 3 (التحكم بالوصول + الخطافات)
|
||||
→ PostgreSQL 16
|
||||
```
|
||||
|
||||
## 🏗️ البنية التقنية
|
||||
|
||||
| الطبقة | التقنية |
|
||||
|---|---|
|
||||
| الواجهة | Next.js 15 (App Router) + React 19، عربية RTL |
|
||||
| لوحة التحكم | Payload 3 (`/admin`) مع محرر Lexical |
|
||||
| قاعدة البيانات | PostgreSQL 16 عبر `@payloadcms/db-postgres` |
|
||||
| المصادقة | جلسات Payload، تجزئة PBKDF2-SHA256 600k تكرار |
|
||||
| الوسيط | `web/src/middleware.ts` — حدود معدل لمسارات المصادقة |
|
||||
| الحاوية | Docker Compose + Traefik (TLS + حدود معدل الحافة) |
|
||||
| البريد | Cloudflare (توجيه + إرسال REST) |
|
||||
| المدفوعات | Stripe (جاهز، بوضع «قريبًا» حتى المفاتيح) |
|
||||
|
||||
## 🚀 التشغيل محليًا
|
||||
لا يحتاج المشروع إلى تثبيت حزم. شغّل خادمًا محليًا من مجلد المشروع:
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm install
|
||||
python3 -m http.server 8000
|
||||
```
|
||||
|
||||
أنشئ `web/.env`:
|
||||
ثم افتح `http://localhost:8000`.
|
||||
|
||||
```env
|
||||
DATABASE_URI=postgres://anwarpi:anwarpi@127.0.0.1:5432/anwarpi
|
||||
PAYLOAD_SECRET=<سري عشوائي طويل>
|
||||
NEXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||
AGENT_API_KEY=<مفتاح نشر الوكلاء>
|
||||
MAIL_FROM=noreply@anwarpy.ai
|
||||
```
|
||||
## التحقق قبل النشر
|
||||
|
||||
```bash
|
||||
npm run dev # http://localhost:3000 — لوحة التحكم على /admin
|
||||
npm run build # تحقق قبل النشر
|
||||
npm run seed # تعبئة بيانات تجريبية
|
||||
python3 scripts/check_site.py
|
||||
```
|
||||
|
||||
## 📡 أهم مسارات الـ API
|
||||
يتحقق الفحص من صفحات HTML والروابط والأصول المحلية وبيانات العرض وسياسة أمان المحتوى.
|
||||
|
||||
| المسار | الوصف |
|
||||
|---|---|
|
||||
| `POST /api/users` | تسجيل (حد 5/ساعة لكل IP) |
|
||||
| `POST /api/users/login` | دخول (حد 10/15دقيقة) |
|
||||
| `POST /api/users/forgot-password` | استعادة (حد 5/ساعة) |
|
||||
| `GET/PATCH /api/users/me` | حسابي |
|
||||
| `GET /api/posts` و `GET /api/posts/[slug]` | الأدلة (المحتوى المقفل يُقتطع حسب الدور) |
|
||||
| `POST /api/posts/[slug]/like` / `view` / `comments` | تفاعلات |
|
||||
| `POST/PUT /api/agent/posts` | نشر آلي — يتطلب ترويسة `x-agent-key` |
|
||||
| `POST /api/subscribe` | اشتراك Stripe (يعيد `comingSoon` حتى المفاتيح) |
|
||||
| `POST /api/stripe/webhook` | ويبهوك Stripe — يتحقق من التوقيع |
|
||||
## النشر
|
||||
|
||||
## 🔐 الأمان
|
||||
المستودع الرئيسي مستضاف على Gitea، والفرع الجاهز للنشر هو `main`. يحتوي المشروع أيضًا على مسار عمل GitHub Pages عند نسخ المستودع إلى GitHub وتفعيل Pages من GitHub Actions.
|
||||
|
||||
- **حدود المعدل** (وسيط Next): تسجيل 5/ساعة، دخول 10/15دقيقة، استعادة 5/ساعة — لكل IP، استجابة 429 مع `Retry-After` ورسالة عامة.
|
||||
- **حدود الحافة** (Traefik): 60 طلب/دقيقة للصفحات (انفجار 120) و50 طلبًا جاريًا لكل IP، و`apilimit` للـ API.
|
||||
- **قاعدة الكتابة الموثوقة**: طلبات العميل لا تستطيع تعيين الدور أو التحقق أو حقول الفواتير — تُحذف في خطاف `beforeChange` (`verificationToken`, `stripeCustomerId`, `role`, `emailVerified`).
|
||||
- **HSTS** `max-age=63072000; includeSubDomains` على كل المسارات.
|
||||
- **تكافؤ زمن الدخول**: البريد غير الموجود يستهلك نفس كلفة PBKDF2 (منع تعداد المستخدمين بالزمن).
|
||||
- **التعليقات مُراقَّبة** ولا تُنشر قبل اعتماد المشرف.
|
||||
## حدود النسخة الحالية
|
||||
|
||||
## 📚 الوثائق
|
||||
|
||||
| الملف | المحتوى |
|
||||
|---|---|
|
||||
| [AGENT.md](AGENT.md) | شرح التطبيق والبنية للوكلاء الآليين (AI agents) |
|
||||
| [GLOSSARY.md](GLOSSARY.md) | مسرد المصطلحات الموحّد (عضوية، مفتوح، موثّق…) |
|
||||
| [docs/adr](docs/adr) | قرارات التصميم (ADRs) |
|
||||
| [brand-spec.md](brand-spec.md) | الهوية البصرية والألوان |
|
||||
| [web/docker-compose.vps.yml](web/docker-compose.vps.yml) | تكوين النشر على الـ VPS |
|
||||
|
||||
## 🚢 النشر
|
||||
|
||||
```bash
|
||||
rsync -az --exclude node_modules --exclude .next --exclude .git \
|
||||
--exclude media --exclude files-private --exclude '.env*' --exclude '*.tsbuildinfo' \
|
||||
web/ root@<VPS>:/root/anwarpi/
|
||||
|
||||
ssh root@<VPS> "cd /root/anwarpi && docker compose -f docker-compose.vps.yml up -d --build"
|
||||
```
|
||||
|
||||
أمر التشغيل داخل الحاوية ينفّذ `payload migrate` تلقائيًا قبل الإقلاع.
|
||||
الموقع نموذج واجهة ثابتة. تسجيل الدخول واستعادة كلمة المرور والدفع والعضوية وحماية محتوى VIP محاكاة داخل المتصفح وليست حماية إنتاجية. لا تستخدمه لجمع بيانات أو مدفوعات حقيقية قبل إضافة مصادقة وتفويض ودفع من جهة الخادم.
|
||||
|
||||
-64
@@ -1,64 +0,0 @@
|
||||
# SECURITY — anwarpy.ai
|
||||
|
||||
> Threat model: a solo-writer content site. The assets are the content, the member trust (ADR-0005), and the pipeline key. Not a fintech app — but every rule below is load-bearing.
|
||||
|
||||
## 1. Authentication
|
||||
|
||||
- **Payload auth** (email + password). Signup writes `verification_token` + `emailVerified` flag at creation (ADR-0005 trust model); verification/resend routes: `/api/auth/verify-email`, `/api/auth/resend-verification`. Forgot/reset via Payload's built-in flow.
|
||||
- **Session seam**: `src/lib/viewer.ts` `getViewer()` is the only place components read identity. If auth provider changes (anticipated: Google OAuth or Clerk — owner decision 2026-10-11), it changes behind this seam; callers keep consuming `Viewer`.
|
||||
- **No password rules theater**: one live hint (strength guidance) at signup; no confirm-password field (owner decision, recorded).
|
||||
- **Lockout**: login attempts on `/api/users` are rate-limited by `src/middleware.ts`; the 429 message stays honest («too many attempts» fidelity — step 14 evidence). No CAPTCHA (owner decision, recorded 2026-10-10).
|
||||
- Verification emails go through **Cloudflare Email REST** (ADR-0003, never SMTP). Transport down → the UI/API says so in Arabic («خدمة البريد غير مربوطة بعد.»); it does not pretend success.
|
||||
|
||||
## 2. Environment variables & secrets
|
||||
|
||||
| Var | Scope | Rule |
|
||||
|---|---|---|
|
||||
| `DATABASE_URI` / `DB_PASSWORD` | server | compose builds the URI; never commit, never echo |
|
||||
| `PAYLOAD_SECRET` | server | signing/encryption; rotate = invalidate sessions |
|
||||
| `AGENT_API_KEY` | server | pipeline auth; header `x-agent-key` |
|
||||
| `CLOUDFLARE_API_TOKEN`, `CLOUDFLARE_ACCOUNT_ID`, `MAIL_FROM` | server | mail transport |
|
||||
| `LAUNCH_MODE` | server | launch policy (SECURITY-relevant: gates paid flows) |
|
||||
| `NEXT_PUBLIC_SITE_URL` | public | canonical/og origin |
|
||||
| `STRIPE_SECRET_KEY`, `STRIPE_PRICE_ID`, `STRIPE_WEBHOOK_SECRET` | server | Phase 3 |
|
||||
| `SEED_TEST_USERS` | dev only | never set in prod |
|
||||
|
||||
Rules:
|
||||
- `.env*` files are gitignored and **excluded from rsync deploys**; prod secrets live only in `/root/anwarpi/.env.production`.
|
||||
- Never print secret values into transcripts, docs, videos, or evidence. Known incident: 8 chars of prod `DB_PASSWORD` leaked in a session transcript on 2026-10-10 → **owner to rotate**; rotation is the standing remedy for any partial leak.
|
||||
- Read secrets at runtime via `process.env` inside server modules only; never in `'use client'` code (only `NEXT_PUBLIC_*` there).
|
||||
|
||||
## 3. RBAC & content access
|
||||
|
||||
- Two tiers: `role: 'admin'` (Ahmed, `/admin` + agent pipeline ownership) and everyone else (member/public). No roles table beyond that until a real need.
|
||||
- **Content ACL is the crown jewel** (ARCHITECTURE §3): `Posts.content` field-level read rule — public iff `status=published && (access=free || freeEarlyAccess())`. VIP previews (H2 list, dek) are the only VIP fields served to logged-out users when billing is on.
|
||||
- Files: `GET /api/files/[id]` enforces **per-file access** before streaming; the download gate and the article page must agree (one decision, ARCHITECTURE §3).
|
||||
- Admin UI access = Payload's built-in `admin` gate; never hand-roll admin pages on the frontend.
|
||||
|
||||
## 4. Input handling & pipeline hardening
|
||||
|
||||
- **`pickFields`** on the agent API strips privileged fields (`access`, `readingMinutes`, `status` except explicit `publish: true` opt-in on POST; PUT cannot set `status`).
|
||||
- **`scanForSecrets` / `scanAgentPayload`** (`src/lib/secret-scan.ts`): POST and PUT scan the *real text* (Lexical → `lexicalToText`, or the raw string) for AWS AKIA keys, PEM blocks, `sk-` API keys, GitHub tokens (`ghp_`…), generic credential shapes → **422 with pattern NAMES only**. Never echo the matched text, never log it.
|
||||
- String `content` → 400 (Lexical JSON required); no silent placeholder substitution.
|
||||
- Comment bodies: textarea, moderated (pending until approved), author forced server-side from the session — client-supplied `author`/`authorName` identity is ignored/overwritten (ADR-0002). Display names are a snapshot, not a live join, so renamed users can't retroactively forge old comments.
|
||||
- All user-facing error strings are fixed Arabic sentences from the route handlers — errors never reflect raw input back (no echo = reflected-input hygiene).
|
||||
|
||||
## 5. Transport & external calls
|
||||
|
||||
- Everything behind Traefik with TLS on anwarpy.ai; www → apex 308.
|
||||
- Outbound: Cloudflare Email REST with scoped token; Stripe webhook verifies signature (`STRIPE_WEBHOOK_SECRET`) before trusting the body; agent API requires the key header (Authorization Bearer → 401).
|
||||
- The db container publishes **no ports**; prod DB access for maintenance = SSH tunnel (AGENTS.md rulebook recipe), never a public 5432.
|
||||
|
||||
## 6. Operational security
|
||||
|
||||
- Backups: `web/scripts/backup-db.sh` → gzipped `pg_dump`; rehearsed restore 2026-10-10 (temp DB, count check, drop). Backup artifacts stay on the VPS `backups/` dir, never in git, never in the deploy rsync.
|
||||
- Test rows (smoke signups, notify rows) use `@example.com` addresses and are **deleted after verification** — prod counts (`users=6`, `launch_notifications=0`) are the post-cleanup ground truth.
|
||||
- Media/files volumes are excluded from rsync (`no --delete` protects them).
|
||||
- Incident rule: any suspected leak (secret in transcript/log/URL) → rotate the credential first, then investigate. Recording the incident in docs is required; pretending it didn't happen is not.
|
||||
|
||||
## 7. What NOT to add (recorded decisions)
|
||||
|
||||
- No CAPTCHA, no aggressive rate limits beyond login lockout (owner, 2026-10-10).
|
||||
- No WAF/Cloudflare proxy changes without owner approval — the domain's DNS/proxy is Ahmed's console.
|
||||
- No secrets in client bundles; no `NEXT_PUBLIC_` for anything except the site URL.
|
||||
- No new auth provider without routing it through `viewer.ts` (see §1).
|
||||
-60
@@ -1,60 +0,0 @@
|
||||
# TESTING — anwarpy.ai
|
||||
|
||||
> Owner decision 2026-10-11: **tier (b) is the bar** — Vitest unit tests for the core libs + regression tests for API route behavior. Tier (c) — Playwright E2E for critical journeys — activates when Phase 3 (Stripe) lands; journeys to cover then: signup→verify→login, VIP ghost-read (billing on), checkout happy path, webhook apply.
|
||||
|
||||
## 1. Standing gates (before any commit/merge)
|
||||
|
||||
```bash
|
||||
cd web && npx tsc --noEmit # must exit 0
|
||||
cd web && npm run build # must exit 0 (includes generate:types)
|
||||
```
|
||||
|
||||
Both green = minimum. Gates alone are not proof of behavior — see §3.
|
||||
|
||||
## 2. Unit tests (Vitest, tier b)
|
||||
|
||||
- Add `vitest` as a dev dependency; tests live beside the code or under `web/src/lib/__tests__/` — pick one location and stay consistent (recommend `__tests__/` next to `src/lib`).
|
||||
- **Required suites (the known-risk list):**
|
||||
|
||||
| Suite | Must pin |
|
||||
|---|---|
|
||||
| `launch.test.ts` | policy truth table: `billingEnabled()` false when `LAUNCH_MODE` unset/**free_early_access**/**paid**… — including the fail-safe default |
|
||||
| `lexical.test.ts` | `lexicalToText`/`countLexicalWords` **descend into `content.root`** (regression: the 2026-10-10 launch-blocking bug where both returned 0/'' on real serialized trees); `extractH2s`, `lexicalToPlain` |
|
||||
| `secret-scan.test.ts` | one case per pattern (aws_access_key, pem_private_key, openai_api_key, github_token, generic_credential) returns **pattern name only, never the matched text**; clean payload passes; string content is scanned too |
|
||||
| `topics.test.ts` | `isTopic` accepts exactly agents/models/automation/foundations; `topicsFor` mapping |
|
||||
| `format.test.ts` | `guidesLabel` (1 دليل، 2 دليلان، 3–10 أدلة، 11+), `minutesLabel`, `MEMBERSHIP_PRICE` |
|
||||
|
||||
- Rule: tests assert **behavior**, not implementation text. No snapshot-of-source, no tautologies (`expect(fn).toBeDefined()`), no mock-echo tests, no bare "does not throw".
|
||||
- Runtime env manipulation: use `vi.stubEnv`/`unstubAllEnvs` — never let one test's `LAUNCH_MODE` leak into another.
|
||||
|
||||
## 3. API route regression tests
|
||||
|
||||
Behavior tests for the routes with contracts (per PRD §3.6, SECURITY §4):
|
||||
|
||||
- `POST/PUT /api/agent/posts`: 401 wrong/missing key (note: **`x-agent-key`**, not Bearer); 400 on string `content`; 422 with pattern names on secret-bearing Lexical; `sourceId` dedup returns existing post (no 409, no duplicate row); `pickFields` strips `access`/`readingMinutes`; PUT cannot set `status`.
|
||||
- `POST /api/subscribe`: 503 + exact Arabic body while billing is off.
|
||||
- `POST /api/notify`: records row then honest 503 when mail transport fails; duplicate email → 200 `alreadySubscribed: true`; no double-send on dup.
|
||||
- Comments route: unauthenticated → reject; client-sent `author` ignored (server-forced).
|
||||
- Likes: 401 anonymous; second like by same user → no duplicate row.
|
||||
|
||||
Implementation: pure logic moves into `src/lib` helpers where possible and gets unit-tested; handler-level tests run the route module with a mocked Payload local API (or hit a dev server for the smoke tier — §5). Prefer extracting decision logic over wiring up heavy mocks.
|
||||
|
||||
## 4. What must NOT become a test
|
||||
|
||||
- Wiring/copies/forwarding, mock echoes, source-text greps, "file exists".
|
||||
- Incidental defaults that aren't contracts (an unstyled div's class list is not a spec).
|
||||
- Anything already verified cheaper by the ghost-read/smoke script in §5.
|
||||
- Per the gstack rule: existing tests that pin wording/implementation instead of behavior get deleted, not "fixed".
|
||||
|
||||
## 5. Smoke & verification scripts (throwaway, not committed)
|
||||
|
||||
- Prod verification is HTTP-level and scripted ad hoc (curl batches): ghost-read a VIP post logged out; check `isAccessibleForFree`, og:image 1200×630, JSON-LD types; subscribe 503; notify row + cleanup; sitemap contents; www 308. Use `@example.com` rows and **delete them after** (ground truth: users=6, launch_notifications=0).
|
||||
- Keep the failing-before/passing-after pair when fixing a bug — a permanent regression test in §2/§3 if it's pure logic, the script transcript if it's deploy/config.
|
||||
|
||||
## 6. Before-merge checklist (condensed)
|
||||
|
||||
1. `tsc --noEmit` + `npm run build` exit 0.
|
||||
2. New/changed lib behavior → matching Vitest suite updated or added.
|
||||
3. Changed route contract → §3 regression updated (status + body shape).
|
||||
4. Changed access logic → ghost-read check (logged-out VIP post) recorded in the PR.
|
||||
5. No new `any`, no new `'use client'` without justification, no new dependency without a line of justification (CODE_STYLE §8).
|
||||
@@ -106,9 +106,6 @@
|
||||
.deck-frame { position: relative; min-height: 470px; border: 1px solid var(--fg); background: var(--surface); overflow: hidden; }
|
||||
.deck-slide { position: absolute; inset: 0; padding: clamp(28px, 4vw, 52px); display: none; grid-template-rows: auto 1fr auto; }
|
||||
.deck-slide.active { display: grid; }
|
||||
.deck-slide-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
|
||||
.deck-slide-link:focus-visible { outline-offset: -8px; }
|
||||
.deck-slide:hover .deck-slide-body h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
|
||||
.deck-slide::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 4px; background: var(--fg); }
|
||||
.deck-slide-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.deck-slide-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .05em; }
|
||||
@@ -215,10 +212,9 @@
|
||||
<div class="container topnav-inner">
|
||||
<a class="logo" href="#top" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a>
|
||||
<nav aria-label="التنقل الرئيسي">
|
||||
<a href="articles.html" data-od-id="path-0-0-1-0">المكتبة</a>
|
||||
<a href="#catalog">المكتبة</a>
|
||||
<a href="#topics">المسارات</a>
|
||||
<a href="#membership">العضوية</a>
|
||||
<a href="about.html" data-od-id="nav-about-team">عن الفريق</a>
|
||||
</nav>
|
||||
<button class="nav-action" data-open-membership>تسجيل الدخول</button>
|
||||
</div>
|
||||
@@ -241,19 +237,16 @@
|
||||
<div class="deck" data-od-id="featured-deck" aria-label="مختارات مميزة">
|
||||
<div class="deck-frame" aria-live="polite">
|
||||
<article class="deck-slide active" data-slide="0">
|
||||
<a class="deck-slide-link" href="articles.html?topic=agents" aria-label="افتح قسم مقالات الوكلاء في المكتبة"></a>
|
||||
<div class="deck-slide-top"><span class="deck-slide-kicker">دليل حصري · المستوى المتوسط</span><span class="deck-slide-index num">01</span></div>
|
||||
<div class="deck-slide-body"><h2>ابنِ وكيلك الأول دون فوضى</h2><p>خريطة عملية لتقسيم المهام، اختيار الأدوات، وضبط ذاكرة الوكيل قبل كتابة الكود.</p></div>
|
||||
<div class="deck-slide-foot"><span class="deck-slide-format"><span class="play" aria-hidden="true">▶</span>فيديو · 28 دقيقة</span><span class="meta"><bdi dir="ltr">AGENTIC AI</bdi></span></div>
|
||||
</article>
|
||||
<article class="deck-slide" data-slide="1">
|
||||
<a class="deck-slide-link" href="articles.html?topic=models" aria-label="افتح قسم مقالات النماذج في المكتبة"></a>
|
||||
<div class="deck-slide-top"><span class="deck-slide-kicker">مقال تطبيقي · للمبتدئين</span><span class="deck-slide-index num">02</span></div>
|
||||
<div class="deck-slide-body"><h2>كيف تختار نموذجاً لمهمتك؟</h2><p>مقارنة منهجية حسب الجودة، التكلفة، السرعة، والخصوصية — من دون ضجيج تسويقي.</p></div>
|
||||
<div class="deck-slide-foot"><span class="deck-slide-format">قراءة · 12 دقيقة</span><span class="meta">النماذج</span></div>
|
||||
</article>
|
||||
<article class="deck-slide" data-slide="2">
|
||||
<a class="deck-slide-link" href="articles.html?topic=models" aria-label="افتح قسم مقالات RAG في المكتبة"></a>
|
||||
<div class="deck-slide-top"><span class="deck-slide-kicker">مسار متقدم · للأعضاء</span><span class="deck-slide-index num">03</span></div>
|
||||
<div class="deck-slide-body"><h2>من <bdi dir="ltr">RAG</bdi> إلى إجابة موثوقة</h2><p>صمّم الاسترجاع، اختبر المصادر، وافهم أين تنهار الإجابة قبل أن تصل إلى المستخدم.</p></div>
|
||||
<div class="deck-slide-foot"><span class="deck-slide-format"><span class="play" aria-hidden="true">▶</span>سلسلة · 4 أجزاء</span><span class="meta"><bdi dir="ltr">RAG</bdi></span></div>
|
||||
@@ -281,10 +274,10 @@
|
||||
<p class="lead">تصفح المحتوى حسب ما تريد بناءه، لا حسب المصطلحات التي تحفظها.</p>
|
||||
</div>
|
||||
<div class="topic-grid">
|
||||
<a class="topic" href="articles.html?topic=agents" data-od-id="topic-agents"><strong>الوكلاء</strong><span>تخطيط · أدوات · ذاكرة</span></a>
|
||||
<a class="topic" href="articles.html?topic=models" data-od-id="topic-models"><strong>النماذج</strong><span>اختيار · تقييم · تشغيل</span></a>
|
||||
<a class="topic" href="articles.html?topic=automation" data-od-id="topic-automation"><strong>الأتمتة</strong><span>سير عمل · ربط · مراقبة</span></a>
|
||||
<a class="topic" href="articles.html?topic=foundations" data-od-id="topic-foundations"><strong>الأساسيات</strong><span>مفاهيم · تطبيق · أمان</span></a>
|
||||
<a class="topic" href="#catalog" data-topic-link="agents" data-od-id="topic-agents"><strong>الوكلاء</strong><span>تخطيط · أدوات · ذاكرة</span></a>
|
||||
<a class="topic" href="#catalog" data-topic-link="models" data-od-id="topic-models"><strong>النماذج</strong><span>اختيار · تقييم · تشغيل</span></a>
|
||||
<a class="topic" href="#catalog" data-topic-link="automation" data-od-id="topic-automation"><strong>الأتمتة</strong><span>سير عمل · ربط · مراقبة</span></a>
|
||||
<a class="topic" href="#catalog" data-topic-link="foundations" data-od-id="topic-foundations"><strong>الأساسيات</strong><span>مفاهيم · تطبيق · أمان</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -376,18 +369,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="pagefoot" data-od-id="footer">
|
||||
<div class="container row-between">
|
||||
<span>© أنور بي آي 2026 · تعلّم بوضوح</span>
|
||||
<nav aria-label="روابط الموقع" style="display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px;">
|
||||
<a href="arabic-ai-learning-catalog-v2.html" style="min-height:44px; display:inline-flex; align-items:center;">الرئيسية</a>
|
||||
<a href="articles.html" style="min-height:44px; display:inline-flex; align-items:center;">المكتبة</a>
|
||||
<a href="subscription.html" style="min-height:44px; display:inline-flex; align-items:center;">الاشتراك</a>
|
||||
<a href="about.html" style="min-height:44px; display:inline-flex; align-items:center;">عن الفريق</a>
|
||||
<a href="privacy.html" style="min-height:44px; display:inline-flex; align-items:center;">الخصوصية</a>
|
||||
<a href="login.html" style="min-height:44px; display:inline-flex; align-items:center;">تسجيل الدخول</a>
|
||||
</nav>
|
||||
<span class="meta">العربية أولاً · خصوصيتك محفوظة</span>
|
||||
</div>
|
||||
<div class="container row-between"><span>© أنور بي آي 2026 · تعلّم بوضوح</span><span class="meta">العربية أولاً · خصوصيتك محفوظة</span></div>
|
||||
</footer>
|
||||
|
||||
<div class="modal" id="previewModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-hidden="true" data-od-id="preview-dialog">
|
||||
|
||||
@@ -1,233 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
|
||||
<meta name="description" content="جميع مقالات وأدلة أنور بي آي، مع تصفية حسب الفئة ونوع الوصول." />
|
||||
<title>المكتبة — أنور بي آي</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: oklch(16% 0.03 225);
|
||||
--surface: oklch(22% 0.04 220);
|
||||
--fg: oklch(96% 0.015 210);
|
||||
--muted: oklch(74% 0.03 215);
|
||||
--border: oklch(36% 0.05 215);
|
||||
--accent: oklch(78% 0.17 190);
|
||||
--accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
|
||||
--fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--container: 1180px;
|
||||
--gutter: 32px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font-body); text-rendering: optimizeLegibility; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { color: inherit; font: inherit; cursor: pointer; }
|
||||
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
|
||||
p { text-wrap: pretty; }
|
||||
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
|
||||
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
|
||||
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
|
||||
.topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
|
||||
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 23px; font-weight: 700; }
|
||||
.logo-mark { width: 30px; height: 34px; object-fit: contain; border-radius: 4px; }
|
||||
.topnav nav { display: flex; align-items: center; gap: 28px; }
|
||||
.topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); border-bottom: 1px solid transparent; }
|
||||
.topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
|
||||
.nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
|
||||
.nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.hero { padding-block: clamp(64px, 9vw, 112px); border-bottom: 1px solid var(--border); }
|
||||
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); letter-spacing: .06em; }
|
||||
h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; letter-spacing: -.025em; }
|
||||
.lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
|
||||
.library { padding-block: clamp(52px, 8vw, 88px); }
|
||||
.filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
|
||||
.filter-group { min-width: 0; }
|
||||
.filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
|
||||
.filters::-webkit-scrollbar { display: none; }
|
||||
.filter { flex: none; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
|
||||
.filter:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.filter[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
|
||||
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
|
||||
.count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
|
||||
.posts { border-top: 1px solid var(--fg); }
|
||||
.post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 130px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
|
||||
.post[hidden] { display: none; }
|
||||
.post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
|
||||
.post-meta span { display: block; }
|
||||
.post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
|
||||
.post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
|
||||
.access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.access.free { border-color: var(--accent); color: var(--accent); }
|
||||
.post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
|
||||
.post-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.soon { color: var(--muted); cursor: default; }
|
||||
.empty { display: none; padding: 42px 0; color: var(--muted); }
|
||||
.empty.show { display: block; }
|
||||
.pagefoot { padding-block: 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
|
||||
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
|
||||
@media (max-width: 920px) {
|
||||
:root { --gutter: 22px; }
|
||||
.topnav-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
|
||||
.logo, .nav-action { margin-bottom: 10px; }
|
||||
.topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
|
||||
.topnav nav::-webkit-scrollbar { display: none; }
|
||||
.topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
|
||||
.filter-panel { grid-template-columns: 1fr; gap: 20px; }
|
||||
.post { grid-template-columns: 112px minmax(0, 1fr); }
|
||||
.access { justify-self: start; grid-column: 2; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
:root { --gutter: 18px; }
|
||||
.nav-action { padding-inline: 12px; }
|
||||
h1 { font-size: clamp(42px, 13vw, 58px); }
|
||||
.results-head { align-items: start; flex-direction: column; }
|
||||
.post { grid-template-columns: 1fr; gap: 12px; }
|
||||
.access { grid-column: 1; }
|
||||
.post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="assets/anwarpi.css?v=5" />
|
||||
<script src="assets/anwarpi.js?v=4" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topnav" data-od-id="topnav">
|
||||
<div class="container topnav-inner">
|
||||
<a class="logo" href="arabic-ai-learning-catalog-v2.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352" />أنور بي آي</a>
|
||||
<nav aria-label="التنقل الرئيسي">
|
||||
<a href="articles.html" aria-current="page" data-od-id="nav-library">المكتبة</a>
|
||||
<a href="arabic-ai-learning-catalog-v2.html#topics">المسارات</a>
|
||||
<a href="subscription.html">العضوية</a>
|
||||
</nav>
|
||||
<a class="nav-action" href="login.html">تسجيل الدخول</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="content">
|
||||
<section class="hero" data-od-id="library-hero">
|
||||
<div class="container">
|
||||
<p class="eyebrow">مكتبة أنور بي آي</p>
|
||||
<h1 data-od-id="library-title">كل الأدلة في مكان واحد.</h1>
|
||||
<p class="lead">صفِّ المحتوى حسب الفئة ونوع الوصول، ثم افتح المقال المجاني أو معاينة محتوى العضوية.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="library" data-od-id="article-library">
|
||||
<div class="container">
|
||||
<div class="filter-panel" data-od-id="library-filters">
|
||||
<div class="filter-group" role="group" aria-label="تصفية حسب الفئة">
|
||||
<span class="filter-label">الفئة</span>
|
||||
<div class="filters">
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="agents" aria-pressed="false">الوكلاء</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="models" aria-pressed="false">النماذج</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="automation" aria-pressed="false">الأتمتة</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="foundations" aria-pressed="false">الأساسيات</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group" role="group" aria-label="تصفية حسب نوع الوصول">
|
||||
<span class="filter-label">نوع الوصول</span>
|
||||
<div class="filters">
|
||||
<button class="filter" type="button" data-filter-kind="access" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button class="filter" type="button" data-filter-kind="access" data-filter-value="free" aria-pressed="false">مجاني</button>
|
||||
<button class="filter" type="button" data-filter-kind="access" data-filter-value="vip" aria-pressed="false">VIP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-head">
|
||||
<h2 data-od-id="posts-heading">جميع المواد</h2>
|
||||
<span class="count" id="resultCount" aria-live="polite">٦ مواد</span>
|
||||
</div>
|
||||
|
||||
<div class="posts" id="postList">
|
||||
<article class="post" data-topic="agents" data-access="vip" data-od-id="post-agent-loop">
|
||||
<div class="post-meta"><span>الوكلاء</span><span>١٨ دقيقة</span></div>
|
||||
<div><h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3><p>حدود واضحة بين التخطيط والتنفيذ والتحقق، مع نموذج بسيط لسجل الحالة.</p><a class="post-link" href="post-locked.html">شاهد المعاينة ←</a></div>
|
||||
<span class="access">VIP · معاينة</span>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="models" data-access="free" data-od-id="post-model-selection">
|
||||
<div class="post-meta"><span>النماذج</span><span>١٢ دقيقة</span></div>
|
||||
<div><h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3><p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p><a class="post-link" href="article-agent-guide.html">ابدأ القراءة ←</a></div>
|
||||
<span class="access free">مجاني · كامل</span>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="automation" data-access="vip" data-od-id="post-automation-observability">
|
||||
<div class="post-meta"><span>الأتمتة</span><span>٢٤ دقيقة</span></div>
|
||||
<div><h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3><p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<span class="access">VIP</span>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="foundations" data-access="free" data-od-id="post-prompt-context">
|
||||
<div class="post-meta"><span>الأساسيات</span><span>٩ دقائق</span></div>
|
||||
<div><h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3><p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<span class="access free">مجاني</span>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="agents" data-access="vip" data-od-id="post-tool-safety">
|
||||
<div class="post-meta"><span>الوكلاء</span><span>١٥ دقيقة</span></div>
|
||||
<div><h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3><p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<span class="access">VIP</span>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="models" data-access="vip" data-od-id="post-rag-evaluation">
|
||||
<div class="post-meta"><span>النماذج</span><span>٤ أجزاء</span></div>
|
||||
<div><h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3><p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<span class="access">VIP</span>
|
||||
</article>
|
||||
</div>
|
||||
<p class="empty" id="emptyState">لا توجد مواد تطابق هذين الفلترين.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="pagefoot" data-od-id="footer">
|
||||
<div class="container footer-row"><span>© أنور بي آي ٢٠٢٦ · تعلّم بوضوح</span><a href="privacy.html">الخصوصية</a></div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const state = { topic: 'all', access: 'all' };
|
||||
const buttons = [...document.querySelectorAll('[data-filter-kind]')];
|
||||
const posts = [...document.querySelectorAll('.post')];
|
||||
const count = document.getElementById('resultCount');
|
||||
const empty = document.getElementById('emptyState');
|
||||
const arabicCounts = ['٠', '١', '٢', '٣', '٤', '٥', '٦'];
|
||||
|
||||
function applyFilters() {
|
||||
let visible = 0;
|
||||
posts.forEach(post => {
|
||||
const topicMatch = state.topic === 'all' || post.dataset.topic === state.topic;
|
||||
const accessMatch = state.access === 'all' || post.dataset.access === state.access;
|
||||
post.hidden = !(topicMatch && accessMatch);
|
||||
if (!post.hidden) visible += 1;
|
||||
});
|
||||
count.textContent = `${arabicCounts[visible]} ${visible === 1 ? 'مادة' : 'مواد'}`;
|
||||
empty.classList.toggle('show', visible === 0);
|
||||
}
|
||||
|
||||
buttons.forEach(button => button.addEventListener('click', () => {
|
||||
const kind = button.dataset.filterKind;
|
||||
state[kind] = button.dataset.filterValue;
|
||||
buttons.filter(item => item.dataset.filterKind === kind).forEach(item => {
|
||||
item.setAttribute('aria-pressed', String(item === button));
|
||||
});
|
||||
applyFilters();
|
||||
}));
|
||||
|
||||
applyFilters();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
-308
@@ -1,308 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
|
||||
<meta name="description" content="جميع مقالات وأدلة أنور بي آي، مع تصفية حسب الفئة ونوع الوصول." />
|
||||
<title>المكتبة — أنور بي آي</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: oklch(16% 0.03 225);
|
||||
--surface: oklch(22% 0.04 220);
|
||||
--fg: oklch(96% 0.015 210);
|
||||
--muted: oklch(74% 0.03 215);
|
||||
--border: oklch(36% 0.05 215);
|
||||
--accent: oklch(78% 0.17 190);
|
||||
--accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
|
||||
--fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--container: 1180px;
|
||||
--gutter: 32px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font-body); text-rendering: optimizeLegibility; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { color: inherit; font: inherit; cursor: pointer; }
|
||||
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
|
||||
p { text-wrap: pretty; }
|
||||
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
|
||||
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
|
||||
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
|
||||
.topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
|
||||
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 23px; font-weight: 700; }
|
||||
.logo-mark { width: 30px; height: 34px; object-fit: contain; border-radius: 4px; }
|
||||
.topnav nav { display: flex; align-items: center; gap: 28px; }
|
||||
.topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); border-bottom: 1px solid transparent; }
|
||||
.topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
|
||||
.nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
|
||||
.nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.hero { padding-block: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--border); }
|
||||
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(36px, 7vw, 88px); align-items: end; }
|
||||
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); letter-spacing: .06em; }
|
||||
h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; letter-spacing: -.025em; }
|
||||
.lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
|
||||
.weekly { display: block; padding: clamp(24px, 4vw, 40px); background: var(--surface); border: 1px solid var(--border); border-top-color: var(--accent); }
|
||||
.weekly:hover { border-color: var(--fg); background: color-mix(in oklch, var(--surface) 88%, var(--fg)); }
|
||||
.weekly-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.weekly h2 { margin-top: 42px; font-size: clamp(28px, 4vw, 44px); line-height: 1.18; }
|
||||
.weekly p { margin: 14px 0 30px; color: var(--muted); }
|
||||
.weekly-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
|
||||
.library { padding-block: clamp(52px, 8vw, 88px); }
|
||||
.library-tools { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; margin-bottom: 22px; }
|
||||
.control { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; }
|
||||
.control::placeholder { color: var(--muted); }
|
||||
.control:hover { border-color: var(--fg); }
|
||||
.control:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
|
||||
.filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
|
||||
.filter-group { min-width: 0; }
|
||||
.filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
|
||||
.filters::-webkit-scrollbar { display: none; }
|
||||
.filter { flex: none; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
|
||||
.filter:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.filter[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
|
||||
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
|
||||
.count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
|
||||
.posts { border-top: 1px solid var(--fg); }
|
||||
.post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 168px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
|
||||
.post[hidden] { display: none; }
|
||||
.post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
|
||||
.post-meta span { display: block; }
|
||||
.post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
|
||||
.post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
|
||||
.post-side { justify-self: stretch; display: grid; gap: 12px; }
|
||||
.access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.access.free { border-color: var(--fg); color: var(--fg); }
|
||||
.engagement { display: flex; justify-content: flex-end; gap: 12px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.like { min-height: 44px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--muted); }
|
||||
.like:hover, .like[aria-pressed="true"] { color: var(--fg); border-color: var(--border); }
|
||||
.post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
|
||||
.post-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.soon { color: var(--muted); cursor: default; }
|
||||
.empty { display: none; padding: 42px 0; color: var(--muted); }
|
||||
.empty.show { display: block; }
|
||||
.pagefoot { padding-block: 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
|
||||
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
|
||||
@media (max-width: 920px) {
|
||||
:root { --gutter: 22px; }
|
||||
.topnav-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
|
||||
.logo, .nav-action { margin-bottom: 10px; }
|
||||
.topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
|
||||
.topnav nav::-webkit-scrollbar { display: none; }
|
||||
.topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
|
||||
.hero-grid, .filter-panel { grid-template-columns: 1fr; gap: 20px; }
|
||||
.weekly { margin-top: 8px; }
|
||||
.post { grid-template-columns: 112px minmax(0, 1fr); }
|
||||
.post-side { justify-self: start; grid-column: 2; }
|
||||
.access { justify-self: start; }
|
||||
.engagement { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
:root { --gutter: 18px; }
|
||||
.nav-action { padding-inline: 12px; }
|
||||
h1 { font-size: clamp(42px, 13vw, 58px); }
|
||||
.library-tools { grid-template-columns: 1fr; }
|
||||
.results-head { align-items: start; flex-direction: column; }
|
||||
.post { grid-template-columns: 1fr; gap: 12px; }
|
||||
.post-side { grid-column: 1; }
|
||||
.post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="assets/anwarpi.css?v=5" />
|
||||
<script src="assets/anwarpi.js?v=4" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topnav" data-od-id="topnav">
|
||||
<div class="container topnav-inner">
|
||||
<a class="logo" href="arabic-ai-learning-catalog-v2.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352" />أنور بي آي</a>
|
||||
<nav aria-label="التنقل الرئيسي">
|
||||
<a href="articles.html" aria-current="page" data-od-id="nav-library">المكتبة</a>
|
||||
<a href="arabic-ai-learning-catalog-v2.html#topics">المسارات</a>
|
||||
<a href="subscription.html">العضوية</a>
|
||||
<a href="about.html">عن الفريق</a>
|
||||
</nav>
|
||||
<a class="nav-action" href="login.html">تسجيل الدخول</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="content">
|
||||
<section class="hero" data-od-id="library-hero">
|
||||
<div class="container hero-grid">
|
||||
<div>
|
||||
<p class="eyebrow">مكتبة أنور بي آي</p>
|
||||
<h1 data-od-id="library-title">كل المقالات. بلا ضياع.</h1>
|
||||
<p class="lead">ابحث، اختر مسارك، ورتّب النتائج حسب الأحدث أو التفاعل المسجل على جهازك.</p>
|
||||
</div>
|
||||
<a class="weekly" href="article-agent-guide.html" data-od-id="weekly-post">
|
||||
<div class="weekly-meta"><span>مقال هذا الأسبوع</span><span>مجاني · ١٢ دقيقة</span></div>
|
||||
<h2>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h2>
|
||||
<p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p>
|
||||
<span class="weekly-link">اقرأ المقال ←</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="library" data-od-id="article-library">
|
||||
<div class="container">
|
||||
<div class="library-tools" data-od-id="library-search-sort">
|
||||
<label><span class="filter-label">ابحث في العناوين والوصف</span><input class="control" id="postSearch" type="search" autocomplete="off" placeholder="مثال: الوكلاء، RAG، اختيار النموذج" /></label>
|
||||
<label><span class="filter-label">الترتيب</span><select class="control" id="postSort"><option value="latest">الأحدث أولاً</option><option value="views">الأكثر مشاهدة على هذا الجهاز</option><option value="likes">الأكثر إعجاباً على هذا الجهاز</option></select></label>
|
||||
</div>
|
||||
<div class="filter-panel" data-od-id="library-filters">
|
||||
<div class="filter-group" role="group" aria-label="تصفية حسب المسار">
|
||||
<span class="filter-label">المسار / الفئة</span>
|
||||
<div class="filters">
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="agents" aria-pressed="false">الوكلاء</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="models" aria-pressed="false">النماذج</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="automation" aria-pressed="false">الأتمتة</button>
|
||||
<button class="filter" type="button" data-filter-kind="topic" data-filter-value="foundations" aria-pressed="false">الأساسيات</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group" role="group" aria-label="تصفية حسب نوع الوصول">
|
||||
<span class="filter-label">نوع الوصول</span>
|
||||
<div class="filters">
|
||||
<button class="filter" type="button" data-filter-kind="access" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button class="filter" type="button" data-filter-kind="access" data-filter-value="free" aria-pressed="false">مجاني</button>
|
||||
<button class="filter" type="button" data-filter-kind="access" data-filter-value="vip" aria-pressed="false">VIP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-head">
|
||||
<h2 data-od-id="posts-heading">جميع المواد</h2>
|
||||
<span class="count" id="resultCount" aria-live="polite">٦ مواد</span>
|
||||
</div>
|
||||
|
||||
<div class="posts" id="postList">
|
||||
<article class="post" data-topic="agents" data-access="vip" data-order="6" data-id="agent-loop" data-od-id="post-agent-loop">
|
||||
<div class="post-meta"><span>الوكلاء</span><span>١٨ دقيقة</span></div>
|
||||
<div><h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3><p>حدود واضحة بين التخطيط والتنفيذ والتحقق، مع نموذج بسيط لسجل الحالة.</p><a class="post-link" href="post-locked.html">شاهد المعاينة ←</a></div>
|
||||
<div class="post-side"><span class="access">VIP · معاينة</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="models" data-access="free" data-order="5" data-id="model-selection" data-od-id="post-model-selection">
|
||||
<div class="post-meta"><span>النماذج</span><span>١٢ دقيقة</span></div>
|
||||
<div><h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3><p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p><a class="post-link" href="article-agent-guide.html">ابدأ القراءة ←</a></div>
|
||||
<div class="post-side"><span class="access free">مجاني · كامل</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="automation" data-access="vip" data-order="4" data-id="automation-observability" data-od-id="post-automation-observability">
|
||||
<div class="post-meta"><span>الأتمتة</span><span>٢٤ دقيقة</span></div>
|
||||
<div><h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3><p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<div class="post-side"><span class="access">VIP</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="foundations" data-access="free" data-order="3" data-id="prompt-context" data-od-id="post-prompt-context">
|
||||
<div class="post-meta"><span>الأساسيات</span><span>٩ دقائق</span></div>
|
||||
<div><h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3><p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<div class="post-side"><span class="access free">مجاني</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="agents" data-access="vip" data-order="2" data-id="tool-safety" data-od-id="post-tool-safety">
|
||||
<div class="post-meta"><span>الوكلاء</span><span>١٥ دقيقة</span></div>
|
||||
<div><h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3><p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<div class="post-side"><span class="access">VIP</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
|
||||
</article>
|
||||
|
||||
<article class="post" data-topic="models" data-access="vip" data-order="1" data-id="rag-evaluation" data-od-id="post-rag-evaluation">
|
||||
<div class="post-meta"><span>النماذج</span><span>٤ أجزاء</span></div>
|
||||
<div><h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3><p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p><span class="post-link soon" aria-label="هذه المادة ستتوفر قريباً">قريباً</span></div>
|
||||
<div class="post-side"><span class="access">VIP</span><div class="engagement"><span data-views>٠ مشاهدة</span><button class="like" type="button" data-like aria-pressed="false">إعجاب · <span>٠</span></button></div></div>
|
||||
</article>
|
||||
</div>
|
||||
<p class="empty" id="emptyState">لا توجد مواد تطابق البحث والفلاتر الحالية.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="pagefoot" data-od-id="footer">
|
||||
<div class="container footer-row"><span>© أنور بي آي ٢٠٢٦ · تعلّم بوضوح</span><a href="privacy.html">الخصوصية</a></div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const params = new URLSearchParams(location.search);
|
||||
const allowedTopics = ['all', 'agents', 'models', 'automation', 'foundations'];
|
||||
const state = { topic: allowedTopics.includes(params.get('topic')) ? params.get('topic') : 'all', access: 'all', query: '', sort: 'latest' };
|
||||
const buttons = [...document.querySelectorAll('[data-filter-kind]')];
|
||||
const posts = [...document.querySelectorAll('.post')];
|
||||
const list = document.getElementById('postList');
|
||||
const count = document.getElementById('resultCount');
|
||||
const empty = document.getElementById('emptyState');
|
||||
const search = document.getElementById('postSearch');
|
||||
const sort = document.getElementById('postSort');
|
||||
const formatNumber = value => new Intl.NumberFormat('ar').format(value);
|
||||
const readMetric = (post, metric) => Number(localStorage.getItem(`anwarpi:${metric}:${post.dataset.id}`) || 0);
|
||||
|
||||
function normalize(value) {
|
||||
return value.toLocaleLowerCase('ar').normalize('NFKD').replace(/[\u064B-\u065F\u0670]/g, '').replace(/[إأآ]/g, 'ا').replace(/ى/g, 'ي');
|
||||
}
|
||||
|
||||
function paintMetrics(post) {
|
||||
const views = readMetric(post, 'views');
|
||||
const liked = localStorage.getItem(`anwarpi:liked:${post.dataset.id}`) === '1';
|
||||
post.querySelector('[data-views]').textContent = `${formatNumber(views)} مشاهدة`;
|
||||
const like = post.querySelector('[data-like]');
|
||||
like.setAttribute('aria-pressed', String(liked));
|
||||
like.querySelector('span').textContent = formatNumber(liked ? 1 : 0);
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const ordered = [...posts].sort((a, b) => {
|
||||
if (state.sort === 'views') return readMetric(b, 'views') - readMetric(a, 'views') || Number(b.dataset.order) - Number(a.dataset.order);
|
||||
if (state.sort === 'likes') return Number(localStorage.getItem(`anwarpi:liked:${b.dataset.id}`) === '1') - Number(localStorage.getItem(`anwarpi:liked:${a.dataset.id}`) === '1') || Number(b.dataset.order) - Number(a.dataset.order);
|
||||
return Number(b.dataset.order) - Number(a.dataset.order);
|
||||
});
|
||||
ordered.forEach(post => list.appendChild(post));
|
||||
let visible = 0;
|
||||
posts.forEach(post => {
|
||||
const topicMatch = state.topic === 'all' || post.dataset.topic === state.topic;
|
||||
const accessMatch = state.access === 'all' || post.dataset.access === state.access;
|
||||
const queryMatch = !state.query || normalize(post.textContent).includes(normalize(state.query));
|
||||
post.hidden = !(topicMatch && accessMatch && queryMatch);
|
||||
if (!post.hidden) visible += 1;
|
||||
});
|
||||
count.textContent = `${formatNumber(visible)} ${visible === 1 ? 'مادة' : 'مواد'}`;
|
||||
empty.classList.toggle('show', visible === 0);
|
||||
}
|
||||
|
||||
buttons.forEach(button => button.addEventListener('click', () => {
|
||||
const kind = button.dataset.filterKind;
|
||||
state[kind] = button.dataset.filterValue;
|
||||
buttons.filter(item => item.dataset.filterKind === kind).forEach(item => {
|
||||
item.setAttribute('aria-pressed', String(item === button));
|
||||
});
|
||||
applyFilters();
|
||||
}));
|
||||
|
||||
search.addEventListener('input', () => { state.query = search.value.trim(); applyFilters(); });
|
||||
sort.addEventListener('change', () => { state.sort = sort.value; applyFilters(); });
|
||||
posts.forEach(post => {
|
||||
paintMetrics(post);
|
||||
post.querySelector('[data-like]').addEventListener('click', () => {
|
||||
const key = `anwarpi:liked:${post.dataset.id}`;
|
||||
localStorage.setItem(key, localStorage.getItem(key) === '1' ? '0' : '1');
|
||||
paintMetrics(post);
|
||||
applyFilters();
|
||||
});
|
||||
post.querySelectorAll('a.post-link').forEach(link => link.addEventListener('click', () => {
|
||||
localStorage.setItem(`anwarpi:views:${post.dataset.id}`, String(readMetric(post, 'views') + 1));
|
||||
}));
|
||||
});
|
||||
|
||||
buttons.filter(button => button.dataset.filterKind === 'topic').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.filterValue === state.topic)));
|
||||
applyFilters();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1
-4
@@ -197,15 +197,12 @@
|
||||
"article-agent-guide.html": "nav a[href='article-agent-guide.html']",
|
||||
"post-locked.html": "nav a[href='article-agent-guide.html']",
|
||||
"post-unlocked.html": "nav a[href='article-agent-guide.html']",
|
||||
"articles.html": "nav a[href='articles.html']",
|
||||
"subscription.html": "nav a[href='#exclusive-guides']",
|
||||
"vip-onboarding.html": "nav a[href='subscription.html']",
|
||||
"account-settings.html": ".nav-account",
|
||||
"login.html": ".logo",
|
||||
"signup.html": ".logo",
|
||||
"forgot-password.html": ".logo",
|
||||
"privacy.html": "nav a[href='privacy.html']",
|
||||
"about.html": "nav a[href='about.html']"
|
||||
"privacy.html": "nav a[href='privacy.html']"
|
||||
}[page];
|
||||
|
||||
var active = selector && topnav.querySelector(selector);
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import base64
|
||||
import hashlib
|
||||
from pathlib import Path
|
||||
import random
|
||||
import re
|
||||
|
||||
from PIL import Image, ImageDraw, ImageFilter
|
||||
|
||||
from publication_meta import CATEGORIES
|
||||
|
||||
WIDTH = 1200
|
||||
HEIGHT = 630
|
||||
MAX_BYTES = 5 * 1024 * 1024
|
||||
SLUG_RE = re.compile(r"^[a-z0-9]+(?:-[a-z0-9]+)*$")
|
||||
|
||||
_PALETTES = {
|
||||
"وكلاء": ((17, 25, 48), (82, 214, 186)),
|
||||
"نماذج": ((20, 22, 48), (129, 140, 248)),
|
||||
"استرجاع": ((13, 31, 43), (56, 189, 248)),
|
||||
"سلامة": ((37, 21, 35), (244, 114, 182)),
|
||||
"أدوات": ((16, 30, 35), (245, 174, 65)),
|
||||
"أعمال": ((31, 24, 20), (249, 115, 80)),
|
||||
}
|
||||
|
||||
|
||||
def _art(slug: str, category: str) -> Image.Image:
|
||||
seed = int.from_bytes(hashlib.sha256(f"{slug}|{category}".encode()).digest()[:8], "big")
|
||||
rng = random.Random(seed)
|
||||
background, accent = _PALETTES[category]
|
||||
image = Image.new("RGB", (WIDTH, HEIGHT), background)
|
||||
|
||||
glow = Image.new("RGBA", image.size, (0, 0, 0, 0))
|
||||
glow_draw = ImageDraw.Draw(glow, "RGBA")
|
||||
for _ in range(5):
|
||||
x = rng.randint(80, WIDTH - 80)
|
||||
y = rng.randint(60, HEIGHT - 60)
|
||||
radius = rng.randint(130, 320)
|
||||
glow_draw.ellipse(
|
||||
(x - radius, y - radius, x + radius, y + radius),
|
||||
fill=(*accent, rng.randint(18, 42)),
|
||||
)
|
||||
glow = glow.filter(ImageFilter.GaussianBlur(70))
|
||||
image = Image.alpha_composite(image.convert("RGBA"), glow)
|
||||
|
||||
overlay = Image.new("RGBA", image.size, (0, 0, 0, 0))
|
||||
draw = ImageDraw.Draw(overlay, "RGBA")
|
||||
points = [(rng.randint(110, WIDTH - 110), rng.randint(90, HEIGHT - 90)) for _ in range(12)]
|
||||
for index, start in enumerate(points):
|
||||
end = points[(index * 5 + 3) % len(points)]
|
||||
draw.line((start, end), fill=(*accent, 95), width=3)
|
||||
for index, (x, y) in enumerate(points):
|
||||
radius = 8 + (index % 4) * 4
|
||||
draw.ellipse(
|
||||
(x - radius, y - radius, x + radius, y + radius),
|
||||
fill=(*accent, 220),
|
||||
outline=(235, 241, 247, 180),
|
||||
width=2,
|
||||
)
|
||||
|
||||
left = 68
|
||||
top = 54
|
||||
right = WIDTH - 68
|
||||
bottom = HEIGHT - 54
|
||||
draw.rounded_rectangle((left, top, right, bottom), radius=32, outline=(*accent, 120), width=3)
|
||||
draw.line((left + 35, bottom - 55, right - 35, bottom - 55), fill=(*accent, 155), width=4)
|
||||
return Image.alpha_composite(image, overlay).convert("RGB")
|
||||
|
||||
|
||||
def generate_cover(slug: str, category: str, output_dir: Path) -> dict:
|
||||
if not SLUG_RE.fullmatch(slug):
|
||||
raise ValueError("slug must be lowercase ASCII kebab-case")
|
||||
if category not in CATEGORIES:
|
||||
raise ValueError("category is invalid")
|
||||
|
||||
output_dir.mkdir(parents=True, exist_ok=True)
|
||||
output = output_dir / f"{slug}.jpg"
|
||||
temporary = output.with_suffix(".jpg.tmp")
|
||||
image = _art(slug, category)
|
||||
image.save(temporary, format="JPEG", quality=91, optimize=True, progressive=True)
|
||||
|
||||
if temporary.stat().st_size > MAX_BYTES:
|
||||
temporary.unlink(missing_ok=True)
|
||||
raise ValueError("generated cover exceeds 5MB")
|
||||
with Image.open(temporary) as check:
|
||||
if check.size != (WIDTH, HEIGHT) or check.format != "JPEG" or check.mode != "RGB":
|
||||
temporary.unlink(missing_ok=True)
|
||||
raise ValueError("generated cover failed validation")
|
||||
temporary.replace(output)
|
||||
|
||||
encoded = base64.b64encode(output.read_bytes()).decode("ascii")
|
||||
return {
|
||||
"path": output,
|
||||
"coverImage": {"filename": output.name, "dataBase64": encoded},
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from dataclasses import dataclass
|
||||
import re
|
||||
from typing import Iterable, Mapping, Optional
|
||||
|
||||
from publication_meta import clean, parse_meta
|
||||
|
||||
|
||||
class MarkerError(ValueError):
|
||||
pass
|
||||
|
||||
|
||||
@dataclass(frozen=True)
|
||||
class PageMarker:
|
||||
block_id: str
|
||||
raw: str
|
||||
meta: dict[str, str]
|
||||
|
||||
|
||||
def find_marker(blocks: Iterable[Mapping[str, object]]) -> Optional[PageMarker]:
|
||||
valid: list[PageMarker] = []
|
||||
near_misses: list[str] = []
|
||||
|
||||
for block in blocks:
|
||||
block_id = str(block.get("id", "unknown"))
|
||||
raw_value = block.get("text", "")
|
||||
raw = raw_value if isinstance(raw_value, str) else ""
|
||||
normalized = clean(raw)
|
||||
if re.search(r"anwarpy", normalized, re.IGNORECASE) is None:
|
||||
continue
|
||||
if not normalized.startswith("anwarpy:"):
|
||||
near_misses.append(block_id)
|
||||
continue
|
||||
try:
|
||||
meta = parse_meta(normalized)
|
||||
except ValueError:
|
||||
near_misses.append(block_id)
|
||||
continue
|
||||
valid.append(PageMarker(block_id=block_id, raw=raw, meta=meta))
|
||||
|
||||
if len(valid) > 1:
|
||||
ids = ", ".join(marker.block_id for marker in valid)
|
||||
raise MarkerError(f"multiple anwarpy markers found in blocks: {ids}")
|
||||
if valid and near_misses:
|
||||
ids = ", ".join(near_misses)
|
||||
raise MarkerError(f"ambiguous anwarpy markers; near-miss blocks: {ids}")
|
||||
if near_misses:
|
||||
ids = ", ".join(near_misses)
|
||||
raise MarkerError(f"near-miss anwarpy marker in blocks: {ids}")
|
||||
return valid[0] if valid else None
|
||||
@@ -0,0 +1 @@
|
||||
anwarpy.ai
|
||||
@@ -0,0 +1,168 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from datetime import datetime
|
||||
import re
|
||||
import unicodedata
|
||||
from urllib.parse import urlsplit
|
||||
|
||||
CATEGORIES = ("وكلاء", "نماذج", "استرجاع", "سلامة", "أدوات", "أعمال")
|
||||
ACCESSES = ("free", "vip")
|
||||
STATUSES = ("pending", "publishing", "published", "blocked", "republish")
|
||||
BLOCKED_REASONS = ("sanitizer", "generation", "article_schema", "cover", "video")
|
||||
SLUG_RE = re.compile(r"^[a-z0-9]+(?:-[a-z0-9]+)*$")
|
||||
_INVISIBLE = re.compile(r"[\u061c\u200e\u200f\u202a-\u202e\u2066-\u2069\ufeff]")
|
||||
_NO_BREAK = re.compile(r"[\u00a0\u202f]")
|
||||
|
||||
_FIELD_ORDER = (
|
||||
"status",
|
||||
"access",
|
||||
"category",
|
||||
"queued_at",
|
||||
"slug",
|
||||
"published_at",
|
||||
"url",
|
||||
"blocked_reason",
|
||||
)
|
||||
_REQUIRED = {
|
||||
"pending": {"status", "access", "category", "queued_at"},
|
||||
"publishing": {"status", "access", "category", "queued_at", "slug"},
|
||||
"published": {"status", "access", "category", "queued_at", "slug", "published_at", "url"},
|
||||
"blocked": {"status", "access", "category", "queued_at", "blocked_reason"},
|
||||
"republish": {"status", "access", "category", "queued_at", "slug", "published_at", "url"},
|
||||
}
|
||||
|
||||
|
||||
def clean(line: str) -> str:
|
||||
line = _INVISIBLE.sub(" ", line)
|
||||
line = _NO_BREAK.sub(" ", line)
|
||||
return unicodedata.normalize("NFC", line).strip()
|
||||
|
||||
|
||||
def _aware_datetime(value: str, field: str) -> datetime:
|
||||
try:
|
||||
parsed = datetime.fromisoformat(value.replace("Z", "+00:00"))
|
||||
except ValueError as exc:
|
||||
raise ValueError(f"{field} must be a valid ISO-8601 datetime") from exc
|
||||
if parsed.tzinfo is None or parsed.utcoffset() is None:
|
||||
raise ValueError(f"{field} must include a timezone offset")
|
||||
return parsed
|
||||
|
||||
|
||||
def _validate_url(value: str, slug: str) -> None:
|
||||
parsed = urlsplit(value)
|
||||
expected_path = f"/posts/{slug}"
|
||||
if (
|
||||
parsed.scheme != "https"
|
||||
or parsed.netloc != "anwarpy.ai"
|
||||
or parsed.path != expected_path
|
||||
or parsed.query
|
||||
or parsed.fragment
|
||||
):
|
||||
raise ValueError(f"url must equal https://anwarpy.ai{expected_path}")
|
||||
|
||||
|
||||
def parse_meta(raw: str) -> dict[str, str]:
|
||||
line = clean(raw)
|
||||
if not line.startswith("anwarpy:"):
|
||||
raise ValueError("marker must start with exact prefix anwarpy:")
|
||||
|
||||
body = line.removeprefix("anwarpy:").strip()
|
||||
if not body:
|
||||
raise ValueError("marker fields are required")
|
||||
|
||||
meta: dict[str, str] = {}
|
||||
for part in body.split("|"):
|
||||
segment = clean(part)
|
||||
if "=" not in segment:
|
||||
raise ValueError(f"invalid marker field: {segment}")
|
||||
key, value = (clean(item) for item in segment.split("=", 1))
|
||||
if key not in _FIELD_ORDER:
|
||||
raise ValueError(f"unknown marker field: {key}")
|
||||
if key in meta:
|
||||
raise ValueError(f"duplicate marker field: {key}")
|
||||
if not value:
|
||||
raise ValueError(f"empty marker field: {key}")
|
||||
meta[key] = value
|
||||
|
||||
status = meta.get("status")
|
||||
if status not in STATUSES:
|
||||
raise ValueError("status is invalid")
|
||||
required = _REQUIRED[status]
|
||||
missing = required - meta.keys()
|
||||
if missing:
|
||||
raise ValueError(f"missing required fields: {', '.join(sorted(missing))}")
|
||||
forbidden = meta.keys() - required
|
||||
if forbidden:
|
||||
raise ValueError(f"fields not allowed for {status}: {', '.join(sorted(forbidden))}")
|
||||
|
||||
if meta["access"] not in ACCESSES:
|
||||
raise ValueError("access is invalid")
|
||||
if meta["category"] not in CATEGORIES:
|
||||
raise ValueError("category is invalid")
|
||||
_aware_datetime(meta["queued_at"], "queued_at")
|
||||
|
||||
slug = meta.get("slug")
|
||||
if slug is not None and not SLUG_RE.fullmatch(slug):
|
||||
raise ValueError("slug must be lowercase ASCII kebab-case")
|
||||
if "published_at" in meta:
|
||||
_aware_datetime(meta["published_at"], "published_at")
|
||||
if "url" in meta:
|
||||
_validate_url(meta["url"], meta["slug"])
|
||||
if "blocked_reason" in meta and meta["blocked_reason"] not in BLOCKED_REASONS:
|
||||
raise ValueError("blocked_reason is invalid")
|
||||
|
||||
return meta
|
||||
|
||||
|
||||
def render_meta(meta: dict[str, str]) -> str:
|
||||
validated = parse_meta(
|
||||
"anwarpy: " + " | ".join(f"{key}={value}" for key, value in meta.items())
|
||||
)
|
||||
return "anwarpy: " + " | ".join(
|
||||
f"{key}={validated[key]}" for key in _FIELD_ORDER if key in validated
|
||||
)
|
||||
|
||||
|
||||
def same_meta(expected_raw: str, actual_raw: str) -> bool:
|
||||
return parse_meta(expected_raw) == parse_meta(actual_raw)
|
||||
|
||||
|
||||
def mark_publishing(raw: str, slug: str) -> str:
|
||||
meta = parse_meta(raw)
|
||||
if meta["status"] not in ("pending", "republish"):
|
||||
raise ValueError("only pending or republish markers can be claimed")
|
||||
normalized_slug = clean(slug)
|
||||
if meta["status"] == "republish" and normalized_slug != meta["slug"]:
|
||||
raise ValueError("republish slug cannot change")
|
||||
meta = {
|
||||
"status": "publishing",
|
||||
"access": meta["access"],
|
||||
"category": meta["category"],
|
||||
"queued_at": meta["queued_at"],
|
||||
"slug": normalized_slug,
|
||||
}
|
||||
return render_meta(meta)
|
||||
|
||||
|
||||
def mark_published(raw: str, published_at: str, url: str) -> str:
|
||||
meta = parse_meta(raw)
|
||||
if meta["status"] not in ("publishing", "republish"):
|
||||
raise ValueError("only publishing or republish markers can become published")
|
||||
meta["status"] = "published"
|
||||
meta["published_at"] = clean(published_at)
|
||||
meta["url"] = clean(url)
|
||||
return render_meta(meta)
|
||||
|
||||
|
||||
def mark_blocked(raw: str, reason: str) -> str:
|
||||
meta = parse_meta(raw)
|
||||
if meta["status"] not in ("pending", "publishing"):
|
||||
raise ValueError("only pending or publishing markers can be blocked")
|
||||
meta = {
|
||||
"status": "blocked",
|
||||
"access": meta["access"],
|
||||
"category": meta["category"],
|
||||
"queued_at": meta["queued_at"],
|
||||
"blocked_reason": clean(reason),
|
||||
}
|
||||
return render_meta(meta)
|
||||
@@ -0,0 +1,321 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from contextlib import contextmanager
|
||||
from dataclasses import dataclass
|
||||
from datetime import datetime
|
||||
import fcntl
|
||||
import math
|
||||
from pathlib import Path
|
||||
import re
|
||||
from typing import Any, Iterable
|
||||
from zoneinfo import ZoneInfo
|
||||
|
||||
from page_state import MarkerError, PageMarker, find_marker
|
||||
from publication_meta import (
|
||||
SLUG_RE,
|
||||
mark_blocked,
|
||||
mark_published,
|
||||
mark_publishing,
|
||||
same_meta,
|
||||
)
|
||||
from sanitize import assert_publishable, sanitize_text
|
||||
|
||||
RIYADH = ZoneInfo("Asia/Riyadh")
|
||||
|
||||
|
||||
class AmbiguousWrite(RuntimeError):
|
||||
"""The remote side effect may have succeeded; reconcile before retrying."""
|
||||
|
||||
|
||||
class PublicVerificationError(RuntimeError):
|
||||
pass
|
||||
|
||||
|
||||
class DeterministicFailure(RuntimeError):
|
||||
def __init__(self, reason: str, message: str):
|
||||
super().__init__(message)
|
||||
self.reason = reason
|
||||
|
||||
|
||||
@dataclass(frozen=True)
|
||||
class Candidate:
|
||||
page: dict[str, Any]
|
||||
marker: PageMarker
|
||||
blocks: list[dict[str, Any]]
|
||||
|
||||
|
||||
@contextmanager
|
||||
def exclusive_run_lock(path: Path):
|
||||
path.parent.mkdir(parents=True, exist_ok=True)
|
||||
with path.open("a+") as handle:
|
||||
try:
|
||||
fcntl.flock(handle.fileno(), fcntl.LOCK_EX | fcntl.LOCK_NB)
|
||||
except BlockingIOError:
|
||||
yield False
|
||||
return
|
||||
try:
|
||||
yield True
|
||||
finally:
|
||||
fcntl.flock(handle.fileno(), fcntl.LOCK_UN)
|
||||
|
||||
|
||||
def _queued_at(candidate: Candidate) -> datetime:
|
||||
return datetime.fromisoformat(candidate.marker.meta["queued_at"].replace("Z", "+00:00"))
|
||||
|
||||
|
||||
def _lexical(article: dict[str, Any]) -> dict[str, Any]:
|
||||
children: list[dict[str, Any]] = []
|
||||
for section in article["sections"]:
|
||||
children.append({
|
||||
"type": "heading",
|
||||
"tag": "h2",
|
||||
"version": 1,
|
||||
"children": [{"type": "text", "version": 1, "text": section["heading"]}],
|
||||
})
|
||||
for paragraph in section["paragraphs"]:
|
||||
children.append({
|
||||
"type": "paragraph",
|
||||
"version": 1,
|
||||
"children": [{"type": "text", "version": 1, "text": paragraph}],
|
||||
})
|
||||
if section.get("code"):
|
||||
children.append({
|
||||
"type": "code",
|
||||
"version": 1,
|
||||
"language": "text",
|
||||
"children": [{"type": "text", "version": 1, "text": section["code"]}],
|
||||
})
|
||||
return {
|
||||
"root": {
|
||||
"type": "root",
|
||||
"format": "",
|
||||
"indent": 0,
|
||||
"version": 1,
|
||||
"direction": "rtl",
|
||||
"children": children,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
def _validate_article(article: Any, access: str, expected_slug: str | None = None) -> dict[str, Any]:
|
||||
if not isinstance(article, dict):
|
||||
raise DeterministicFailure("article_schema", "article must be an object")
|
||||
for field in ("title", "slug", "dek", "sections"):
|
||||
if field not in article:
|
||||
raise DeterministicFailure("article_schema", f"article field missing: {field}")
|
||||
for field in ("title", "slug", "dek"):
|
||||
if not isinstance(article[field], str) or not article[field].strip():
|
||||
raise DeterministicFailure("article_schema", f"article field invalid: {field}")
|
||||
if not SLUG_RE.fullmatch(article["slug"]):
|
||||
raise DeterministicFailure("article_schema", "article slug must be lowercase ASCII kebab-case")
|
||||
if expected_slug is not None and article["slug"] != expected_slug:
|
||||
raise DeterministicFailure("article_schema", "republish slug cannot change")
|
||||
if access == "vip" and (not isinstance(article.get("teaser"), str) or not article["teaser"].strip()):
|
||||
raise DeterministicFailure("article_schema", "VIP teaser is required")
|
||||
|
||||
sections = article["sections"]
|
||||
if not isinstance(sections, list) or not 3 <= len(sections) <= 6:
|
||||
raise DeterministicFailure("article_schema", "article must contain 3 to 6 sections")
|
||||
for section in sections:
|
||||
if not isinstance(section, dict):
|
||||
raise DeterministicFailure("article_schema", "section must be an object")
|
||||
if not isinstance(section.get("heading"), str) or not section["heading"].strip():
|
||||
raise DeterministicFailure("article_schema", "section heading is required")
|
||||
paragraphs = section.get("paragraphs")
|
||||
if not isinstance(paragraphs, list) or not paragraphs or not all(
|
||||
isinstance(value, str) and value.strip() for value in paragraphs
|
||||
):
|
||||
raise DeterministicFailure("article_schema", "section paragraphs are invalid")
|
||||
return article
|
||||
|
||||
|
||||
def _riyadh_iso(value: str) -> str:
|
||||
parsed = datetime.fromisoformat(value.replace("Z", "+00:00"))
|
||||
if parsed.tzinfo is None or parsed.utcoffset() is None:
|
||||
raise ValueError("publishedAt must include a timezone")
|
||||
return parsed.astimezone(RIYADH).isoformat()
|
||||
|
||||
|
||||
class Publisher:
|
||||
def __init__(self, *, appflowy, api, generator, media, lock_path: Path, allowed_hosts: Iterable[str] = ("anwarpy.ai",)):
|
||||
self.appflowy = appflowy
|
||||
self.api = api
|
||||
self.generator = generator
|
||||
self.media = media
|
||||
self.lock_path = lock_path
|
||||
self.allowed_hosts = set(allowed_hosts)
|
||||
self.marker_errors: list[str] = []
|
||||
|
||||
def run(self) -> str:
|
||||
with exclusive_run_lock(self.lock_path) as acquired:
|
||||
if not acquired:
|
||||
return "busy"
|
||||
candidates = self._candidates()
|
||||
publishing = sorted(
|
||||
(candidate for candidate in candidates if candidate.marker.meta["status"] == "publishing"),
|
||||
key=lambda candidate: (_queued_at(candidate), candidate.page["view_id"]),
|
||||
)
|
||||
if publishing:
|
||||
return self._reconcile(publishing[0])
|
||||
|
||||
eligible = sorted(
|
||||
(
|
||||
candidate
|
||||
for candidate in candidates
|
||||
if candidate.marker.meta["status"] in ("pending", "republish")
|
||||
),
|
||||
key=lambda candidate: (_queued_at(candidate), candidate.page["view_id"]),
|
||||
)
|
||||
if not eligible:
|
||||
return "idle"
|
||||
return self._publish(eligible[0])
|
||||
|
||||
def _candidates(self) -> list[Candidate]:
|
||||
found: list[Candidate] = []
|
||||
self.marker_errors = []
|
||||
for page in self.appflowy.list_pages():
|
||||
page_id = page["view_id"]
|
||||
blocks = self.appflowy.get_blocks(page_id)
|
||||
try:
|
||||
marker = find_marker(blocks)
|
||||
except MarkerError as error:
|
||||
self.marker_errors.append(f"{page_id}: {error}")
|
||||
continue
|
||||
if marker is not None:
|
||||
found.append(Candidate(page=page, marker=marker, blocks=blocks))
|
||||
return found
|
||||
|
||||
def _read_marker(self, candidate: Candidate) -> PageMarker:
|
||||
marker = find_marker(self.appflowy.get_blocks(candidate.page["view_id"]))
|
||||
if marker is None:
|
||||
raise ValueError("publication marker disappeared")
|
||||
return marker
|
||||
|
||||
def _edit_and_verify(self, candidate: Candidate, marker_text: str) -> PageMarker:
|
||||
self.appflowy.edit_block(candidate.page["view_id"], candidate.marker.block_id, marker_text)
|
||||
readback = self._read_marker(candidate)
|
||||
if not same_meta(marker_text, readback.raw):
|
||||
raise ValueError("AppFlowy marker read-back mismatch")
|
||||
return readback
|
||||
|
||||
def _evidence(self, candidate: Candidate) -> str:
|
||||
texts = [
|
||||
str(block.get("text") or "")
|
||||
for block in candidate.blocks
|
||||
if block.get("id") != candidate.marker.block_id
|
||||
]
|
||||
sanitized = sanitize_text("\n\n".join(texts), allowed_hosts=self.allowed_hosts)
|
||||
assert_publishable(sanitized, allowed_hosts=self.allowed_hosts)
|
||||
if not sanitized.strip():
|
||||
raise DeterministicFailure("sanitizer", "source is empty after sanitization")
|
||||
return sanitized
|
||||
|
||||
def _block(self, candidate: Candidate, reason: str) -> str:
|
||||
current = self._read_marker(candidate)
|
||||
blocked = mark_blocked(current.raw, reason)
|
||||
self._edit_and_verify(Candidate(candidate.page, current, candidate.blocks), blocked)
|
||||
return f"blocked:{reason}"
|
||||
|
||||
def _publish(self, candidate: Candidate) -> str:
|
||||
original = candidate.marker
|
||||
meta = original.meta
|
||||
try:
|
||||
evidence = self._evidence(candidate)
|
||||
article = _validate_article(
|
||||
self.generator.generate(candidate.page["name"], evidence, meta),
|
||||
meta["access"],
|
||||
meta.get("slug") if meta["status"] == "republish" else None,
|
||||
)
|
||||
media = self.media.render(article, meta)
|
||||
if not isinstance(media, dict) or "coverImage" not in media:
|
||||
raise DeterministicFailure("cover", "cover output is incomplete")
|
||||
except DeterministicFailure as error:
|
||||
return self._block(candidate, error.reason)
|
||||
except ValueError:
|
||||
return self._block(candidate, "sanitizer")
|
||||
|
||||
current = self._read_marker(candidate)
|
||||
if not same_meta(original.raw, current.raw):
|
||||
raise ValueError("AppFlowy marker changed during generation")
|
||||
|
||||
claimed_text = mark_publishing(current.raw, article["slug"])
|
||||
claimed = self._edit_and_verify(Candidate(candidate.page, current, candidate.blocks), claimed_text)
|
||||
claimed_candidate = Candidate(candidate.page, claimed, candidate.blocks)
|
||||
|
||||
body = self._post_body(article, meta, media["coverImage"])
|
||||
existing = self.api.lookup(article["slug"])
|
||||
record = None
|
||||
if meta["status"] == "republish":
|
||||
if existing is None:
|
||||
raise AmbiguousWrite("republish target is missing; POST is forbidden")
|
||||
record = self.api.update(article["slug"], body)
|
||||
elif existing is None:
|
||||
try:
|
||||
record = self.api.create(body)
|
||||
except AmbiguousWrite:
|
||||
record = self.api.lookup(article["slug"])
|
||||
if record is None:
|
||||
raise
|
||||
elif existing.get("status") == "draft":
|
||||
record = self.api.update(article["slug"], {"publish": True})
|
||||
else:
|
||||
record = existing
|
||||
|
||||
return self._finish(claimed_candidate, record)
|
||||
|
||||
def _reconcile(self, candidate: Candidate) -> str:
|
||||
slug = candidate.marker.meta["slug"]
|
||||
record = self.api.lookup(slug)
|
||||
if record is None:
|
||||
return f"awaiting-reconciliation:{slug}"
|
||||
if record.get("status") == "draft":
|
||||
record = self.api.update(slug, {"publish": True})
|
||||
result = self._finish(candidate, record)
|
||||
return result
|
||||
|
||||
def _finish(self, candidate: Candidate, record: Any) -> str:
|
||||
if not isinstance(record, dict):
|
||||
raise ValueError("agent API returned an invalid record")
|
||||
expected = candidate.marker.meta
|
||||
slug = expected["slug"]
|
||||
for field in ("slug", "access", "category"):
|
||||
if record.get(field) != expected[field]:
|
||||
raise ValueError(f"agent API {field} mismatch")
|
||||
if record.get("status") != "published":
|
||||
raise ValueError("agent API post is not published")
|
||||
published_at = record.get("publishedAt")
|
||||
if not isinstance(published_at, str):
|
||||
raise ValueError("agent API publishedAt is missing")
|
||||
url = record.get("url") or f"https://anwarpy.ai/posts/{slug}"
|
||||
if not self.api.verify_public(record):
|
||||
raise PublicVerificationError(f"public verification failed for {slug}")
|
||||
|
||||
published = mark_published(candidate.marker.raw, _riyadh_iso(published_at), url)
|
||||
self._edit_and_verify(candidate, published)
|
||||
return f"published:{slug}"
|
||||
|
||||
@staticmethod
|
||||
def _post_body(article: dict[str, Any], meta: dict[str, str], cover_image: dict[str, Any]) -> dict[str, Any]:
|
||||
words = re.findall(r"\S+", " ".join(
|
||||
paragraph
|
||||
for section in article["sections"]
|
||||
for paragraph in section["paragraphs"]
|
||||
))
|
||||
body: dict[str, Any] = {
|
||||
"title": article["title"],
|
||||
"slug": article["slug"],
|
||||
"dek": article["dek"],
|
||||
"content": _lexical(article),
|
||||
"category": meta["category"],
|
||||
"access": meta["access"],
|
||||
"readingMinutes": max(1, math.ceil(len(words) / 200)),
|
||||
"publish": True,
|
||||
"coverImage": cover_image,
|
||||
}
|
||||
if meta["access"] == "vip":
|
||||
body["teaser"] = article["teaser"]
|
||||
if body["category"] != meta["category"]:
|
||||
raise ValueError("category changed")
|
||||
if body["access"] != meta["access"]:
|
||||
raise ValueError("access changed")
|
||||
return body
|
||||
@@ -0,0 +1,336 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import asyncio
|
||||
import json
|
||||
import os
|
||||
from pathlib import Path
|
||||
import time
|
||||
from typing import Any
|
||||
from urllib.error import HTTPError, URLError
|
||||
from urllib.parse import quote
|
||||
from urllib.request import Request, urlopen
|
||||
|
||||
from cover import generate_cover
|
||||
from publish_one import AmbiguousWrite, DeterministicFailure, Publisher, _validate_article
|
||||
|
||||
WORKSPACE_ID = "6082aea5-a29e-410f-97be-3cd55fbc2a3a"
|
||||
ROOT_VIEW_ID = "3a743541-abbf-495a-a18a-74f405fa5d70"
|
||||
|
||||
|
||||
def _json_from_text(text: str) -> Any:
|
||||
value: Any = json.loads(text)
|
||||
while isinstance(value, dict) and isinstance(value.get("result"), str):
|
||||
value = json.loads(value["result"])
|
||||
return value
|
||||
|
||||
|
||||
class AppFlowyMcp:
|
||||
"""Root-scoped AppFlowy access through Hermes's configured MCP endpoint."""
|
||||
|
||||
def __init__(self, config_path: Path | None = None):
|
||||
self.config_path = config_path or Path.home() / ".hermes/config.yaml"
|
||||
self.allowed_page_ids: set[str] = set()
|
||||
|
||||
async def _call_async(self, tool: str, arguments: dict[str, Any]) -> Any:
|
||||
import httpx
|
||||
import yaml
|
||||
from mcp import ClientSession
|
||||
from mcp.client.streamable_http import streamable_http_client
|
||||
|
||||
config = yaml.safe_load(self.config_path.read_text())["mcp_servers"]["appflowy"]
|
||||
timeout = httpx.Timeout(30, read=120)
|
||||
async with httpx.AsyncClient(
|
||||
headers=config.get("headers", {}),
|
||||
follow_redirects=True,
|
||||
timeout=timeout,
|
||||
) as http:
|
||||
async with streamable_http_client(config["url"], http_client=http) as streams: # type: ignore[arg-type]
|
||||
async with ClientSession(streams[0], streams[1]) as session:
|
||||
await session.initialize()
|
||||
result = await session.call_tool(tool, arguments)
|
||||
if getattr(result, "is_error", False):
|
||||
raise RuntimeError(f"AppFlowy MCP call failed: {tool}")
|
||||
if not result.content or not hasattr(result.content[0], "text"):
|
||||
raise RuntimeError(f"AppFlowy MCP returned no JSON: {tool}")
|
||||
return _json_from_text(getattr(result.content[0], "text"))
|
||||
|
||||
def _call(self, tool: str, arguments: dict[str, Any]) -> Any:
|
||||
# ponytail: one session per call; keep one open only if scheduled scans become measurably slow.
|
||||
return asyncio.run(self._call_async(tool, arguments))
|
||||
|
||||
@staticmethod
|
||||
def _flatten(children: list[dict[str, Any]]) -> list[dict[str, Any]]:
|
||||
pages: list[dict[str, Any]] = []
|
||||
for child in children:
|
||||
pages.append(child)
|
||||
pages.extend(AppFlowyMcp._flatten(child.get("children") or []))
|
||||
return pages
|
||||
|
||||
def list_pages(self) -> list[dict[str, Any]]:
|
||||
response = self._call(
|
||||
"get_workspace_folder",
|
||||
{"workspace_id": WORKSPACE_ID, "root_view_id": ROOT_VIEW_ID, "depth": 10},
|
||||
)
|
||||
root = response.get("data", response)
|
||||
if root.get("view_id") != ROOT_VIEW_ID:
|
||||
raise RuntimeError("AppFlowy returned the wrong source root")
|
||||
pages = self._flatten(root.get("children") or [])
|
||||
self.allowed_page_ids = {page["view_id"] for page in pages}
|
||||
return pages
|
||||
|
||||
def _require_allowed(self, page_id: str) -> None:
|
||||
if page_id not in self.allowed_page_ids:
|
||||
raise PermissionError("page is outside the configured Ai research subtree")
|
||||
|
||||
def get_blocks(self, page_id: str) -> list[dict[str, Any]]:
|
||||
self._require_allowed(page_id)
|
||||
response = self._call(
|
||||
"get_page_blocks",
|
||||
{"workspace_id": WORKSPACE_ID, "page_id": page_id},
|
||||
)
|
||||
return response.get("blocks") or response.get("data", {}).get("blocks") or []
|
||||
|
||||
def edit_block(self, page_id: str, block_id: str, text: str) -> None:
|
||||
self._require_allowed(page_id)
|
||||
self._call(
|
||||
"edit_block_text",
|
||||
{
|
||||
"workspace_id": WORKSPACE_ID,
|
||||
"page_id": page_id,
|
||||
"block_id": block_id,
|
||||
"text": text,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
class AgentApi:
|
||||
def __init__(self, key: str, base_url: str = "https://anwarpy.ai"):
|
||||
if not key:
|
||||
raise ValueError("ANWARPY_AGENT_KEY is required")
|
||||
self.key = key
|
||||
self.base_url = base_url.rstrip("/")
|
||||
self.body_probes: dict[str, str] = {}
|
||||
|
||||
def _request(self, method: str, path: str, body: dict[str, Any] | None = None, *, anonymous: bool = False):
|
||||
data = None if body is None else json.dumps(body, ensure_ascii=False).encode()
|
||||
headers = {"Accept": "application/json", "User-Agent": "anwarpy-publisher/1"}
|
||||
if body is not None:
|
||||
headers["Content-Type"] = "application/json"
|
||||
if not anonymous:
|
||||
headers["x-agent-key"] = self.key
|
||||
request = Request(f"{self.base_url}{path}", data=data, headers=headers, method=method)
|
||||
try:
|
||||
with urlopen(request, timeout=30) as response:
|
||||
raw = response.read()
|
||||
return response.status, raw, response.headers.get("content-type", "")
|
||||
except HTTPError as error:
|
||||
return error.code, error.read(), error.headers.get("content-type", "")
|
||||
except (TimeoutError, URLError) as error:
|
||||
if method in ("POST", "PATCH"):
|
||||
raise AmbiguousWrite(f"agent API {method} outcome is unknown") from error
|
||||
raise
|
||||
|
||||
@staticmethod
|
||||
def _decode(status: int, raw: bytes) -> dict[str, Any]:
|
||||
try:
|
||||
value = json.loads(raw)
|
||||
except (UnicodeDecodeError, json.JSONDecodeError) as error:
|
||||
raise RuntimeError(f"agent API returned invalid JSON ({status})") from error
|
||||
if not isinstance(value, dict):
|
||||
raise RuntimeError(f"agent API returned invalid object ({status})")
|
||||
return value
|
||||
|
||||
@staticmethod
|
||||
def _probe(body: dict[str, Any]) -> str | None:
|
||||
children = body.get("content", {}).get("root", {}).get("children", [])
|
||||
for child in children:
|
||||
for text in child.get("children", []):
|
||||
value = text.get("text")
|
||||
if isinstance(value, str) and len(value.strip()) >= 20:
|
||||
return value.strip()
|
||||
return None
|
||||
|
||||
def lookup(self, slug: str) -> dict[str, Any] | None:
|
||||
status, raw, _ = self._request("GET", f"/api/agent/posts/{quote(slug)}")
|
||||
if status == 404:
|
||||
return None
|
||||
if status != 200:
|
||||
raise RuntimeError(f"agent API lookup failed ({status})")
|
||||
return self._decode(status, raw)
|
||||
|
||||
def create(self, body: dict[str, Any]) -> dict[str, Any]:
|
||||
probe = self._probe(body)
|
||||
if probe:
|
||||
self.body_probes[body["slug"]] = probe
|
||||
status, raw, _ = self._request("POST", "/api/agent/posts", body)
|
||||
if status == 409:
|
||||
existing = self.lookup(body["slug"])
|
||||
if existing is None:
|
||||
raise RuntimeError("agent API returned 409 without an existing slug")
|
||||
return existing
|
||||
if status != 201:
|
||||
raise RuntimeError(f"agent API create failed ({status})")
|
||||
return self._decode(status, raw)
|
||||
|
||||
def update(self, slug: str, body: dict[str, Any]) -> dict[str, Any]:
|
||||
probe = self._probe(body)
|
||||
if probe:
|
||||
self.body_probes[slug] = probe
|
||||
status, raw, _ = self._request("PATCH", f"/api/agent/posts/{quote(slug)}", body)
|
||||
if status != 200:
|
||||
raise RuntimeError(f"agent API update failed ({status})")
|
||||
return self._decode(status, raw)
|
||||
|
||||
def _public_get(self, url: str, *, rsc: bool = False) -> tuple[int, bytes]:
|
||||
headers = {"Accept": "text/x-component" if rsc else "text/html", "User-Agent": "anwarpy-publisher/1"}
|
||||
if rsc:
|
||||
headers["RSC"] = "1"
|
||||
request = Request(url, headers=headers)
|
||||
try:
|
||||
with urlopen(request, timeout=20) as response:
|
||||
return response.status, response.read()
|
||||
except HTTPError as error:
|
||||
return error.code, error.read()
|
||||
|
||||
def verify_public(self, record: dict[str, Any]) -> bool:
|
||||
slug = record["slug"]
|
||||
canonical = f"https://anwarpy.ai/posts/{slug}"
|
||||
if record.get("url", canonical) != canonical:
|
||||
return False
|
||||
|
||||
probe = self.body_probes.get(slug, "").encode()
|
||||
for attempt in range(5):
|
||||
html_status, html = self._public_get(canonical)
|
||||
rsc_status, rsc = self._public_get(f"{canonical}?__rsc=publisher", rsc=True)
|
||||
rest_status, rest, _ = self._request(
|
||||
"GET",
|
||||
f"/api/posts?where%5Bslug%5D%5Bequals%5D={quote(slug)}&depth=0",
|
||||
anonymous=True,
|
||||
)
|
||||
status_ok = html_status == 200 and rsc_status in (200, 204) and rest_status in (200, 401, 403)
|
||||
vip_leak = record.get("access") == "vip" and probe and any(probe in value for value in (html, rsc, rest))
|
||||
if status_ok and not vip_leak:
|
||||
return True
|
||||
if attempt < 4:
|
||||
time.sleep(2)
|
||||
return False
|
||||
|
||||
|
||||
class LocalArticleGenerator:
|
||||
def __init__(self, endpoint: str = "http://100.64.0.5:8080/v1/chat/completions", model: str | None = None):
|
||||
self.endpoint = endpoint
|
||||
self.model = model
|
||||
|
||||
def _model_id(self) -> str:
|
||||
if self.model:
|
||||
return self.model
|
||||
models_url = self.endpoint.rsplit("/chat/completions", 1)[0] + "/models"
|
||||
try:
|
||||
with urlopen(models_url, timeout=10) as response:
|
||||
data = json.loads(response.read())
|
||||
model = data["data"][0]["id"]
|
||||
except (HTTPError, URLError, TimeoutError, json.JSONDecodeError, KeyError, IndexError) as error:
|
||||
raise DeterministicFailure("generation", "local model discovery failed") from error
|
||||
if not isinstance(model, str) or not model:
|
||||
raise DeterministicFailure("generation", "local model discovery returned no model")
|
||||
self.model = model
|
||||
return model
|
||||
|
||||
def _request(self, messages: list[dict[str, str]]) -> str:
|
||||
payload = {
|
||||
"model": self._model_id(),
|
||||
"messages": messages,
|
||||
"temperature": 0.35,
|
||||
"max_tokens": 7000,
|
||||
"response_format": {"type": "json_object"},
|
||||
}
|
||||
request = Request(
|
||||
self.endpoint,
|
||||
data=json.dumps(payload, ensure_ascii=False).encode(),
|
||||
headers={"Content-Type": "application/json"},
|
||||
method="POST",
|
||||
)
|
||||
try:
|
||||
with urlopen(request, timeout=240) as response:
|
||||
data = json.loads(response.read())
|
||||
except (HTTPError, URLError, TimeoutError, json.JSONDecodeError) as error:
|
||||
raise DeterministicFailure("generation", "local article model failed") from error
|
||||
return data["choices"][0]["message"]["content"]
|
||||
|
||||
@staticmethod
|
||||
def _parse(raw: str, access: str, expected_slug: str | None) -> dict[str, Any]:
|
||||
try:
|
||||
article = json.loads(raw)
|
||||
except json.JSONDecodeError as error:
|
||||
raise DeterministicFailure("article_schema", "model returned invalid JSON") from error
|
||||
article = _validate_article(article, access, expected_slug)
|
||||
visible_words = sum(
|
||||
len(paragraph.split())
|
||||
for section in article["sections"]
|
||||
for paragraph in section["paragraphs"]
|
||||
)
|
||||
if not 900 <= visible_words <= 2500:
|
||||
raise DeterministicFailure("article_schema", "article must contain 900 to 2500 visible words")
|
||||
return article
|
||||
|
||||
def generate(self, title: str, evidence: str, meta: dict[str, str]) -> dict[str, Any]:
|
||||
expected_slug = meta.get("slug") if meta["status"] == "republish" else None
|
||||
prompt = f"""اكتب دليلاً عربياً أصلياً لموقع anwarpy.ai اعتماداً حصراً على الأدلة أدناه.
|
||||
العنوان المصدر: {title}
|
||||
نوع الوصول الذي حدده المالك: {meta['access']}
|
||||
التصنيف الذي حدده المالك: {meta['category']}
|
||||
|
||||
أعد JSON فقط بهذه الحقول: title, slug, dek, teaser, sections.
|
||||
slug إنجليزي ASCII بصيغة kebab-case، ولا تغيّره عند إعادة النشر: {expected_slug or 'اختر وصفاً دقيقاً'}.
|
||||
sections مصفوفة من 3 إلى 6 عناصر؛ كل عنصر يحتوي heading وparagraphs وcode.
|
||||
النص المرئي بين 900 و2500 كلمة. رتّب الدليل: المشكلة، المتطلبات، التنفيذ، التحقق، القيود.
|
||||
لا تختر أو تغيّر access أو category. لا تخترع إصدارات أو أرقاماً أو نتائج أو اقتباسات.
|
||||
مقال VIP يحتاج teaser عربي مفيداً من فقرتين، والمقال المجاني يستخدم teaser فارغاً.
|
||||
|
||||
الأدلة المنقحة:
|
||||
{evidence}
|
||||
"""
|
||||
messages = [
|
||||
{"role": "system", "content": "أنت محرر تقني عربي دقيق. أعد JSON صالحاً فقط."},
|
||||
{"role": "user", "content": prompt},
|
||||
]
|
||||
raw = self._request(messages)
|
||||
try:
|
||||
return self._parse(raw, meta["access"], expected_slug)
|
||||
except DeterministicFailure as first_error:
|
||||
corrected = self._request(messages + [
|
||||
{"role": "assistant", "content": raw},
|
||||
{"role": "user", "content": f"صحح JSON فقط. خطأ التحقق: {first_error}"},
|
||||
])
|
||||
return self._parse(corrected, meta["access"], expected_slug)
|
||||
|
||||
|
||||
class CoverMedia:
|
||||
def __init__(self, output_dir: Path | None = None):
|
||||
self.output_dir = output_dir or Path.home() / ".hermes/cache/scratch/anwarpy-covers"
|
||||
|
||||
def render(self, article: dict[str, Any], meta: dict[str, str]) -> dict[str, Any]:
|
||||
try:
|
||||
return generate_cover(article["slug"], meta["category"], self.output_dir)
|
||||
except (OSError, ValueError) as error:
|
||||
raise DeterministicFailure("cover", "cover generation failed") from error
|
||||
|
||||
|
||||
def main() -> int:
|
||||
key = os.environ.get("ANWARPY_AGENT_KEY", "")
|
||||
publisher = Publisher(
|
||||
appflowy=AppFlowyMcp(),
|
||||
api=AgentApi(key),
|
||||
generator=LocalArticleGenerator(),
|
||||
media=CoverMedia(),
|
||||
lock_path=Path.home() / ".hermes/locks/anwarpy-publish.lock",
|
||||
)
|
||||
result = publisher.run()
|
||||
print(result)
|
||||
for error in publisher.marker_errors:
|
||||
print(f"marker-error: {error}")
|
||||
return 0
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
raise SystemExit(main())
|
||||
@@ -0,0 +1,73 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import ipaddress
|
||||
import re
|
||||
from typing import Iterable
|
||||
from urllib.parse import urlsplit
|
||||
|
||||
REDACTION = "[REDACTED]"
|
||||
|
||||
_URL_RE = re.compile(r"https?://[^\s<>\]\[\)\(\"']+", re.IGNORECASE)
|
||||
_EMAIL_RE = re.compile(r"\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b", re.IGNORECASE)
|
||||
_IPV4_RE = re.compile(r"(?<![\d.])(?:\d{1,3}\.){3}\d{1,3}(?![\d.])")
|
||||
_IPV6_CANDIDATE_RE = re.compile(r"(?<![0-9A-Fa-f:])(?:[0-9A-Fa-f]{0,4}:){2,}[0-9A-Fa-f]{0,4}(?![0-9A-Fa-f:])")
|
||||
_PHONE_RE = re.compile(r"(?<!\w)\+?\d(?:[\s().-]*\d){7,14}(?!\w)")
|
||||
_PATH_RE = re.compile(r"(?:/(?:Users|home|root|opt|etc|var)/[^\s,;]+|[A-Za-z]:\\Users\\[^\s,;]+)")
|
||||
_CREDENTIAL_RE = re.compile(
|
||||
r"(?i)\b(?:password|passwd|secret|token|api[_-]?key|authorization)\s*[:=]\s*[^\s,;]+"
|
||||
)
|
||||
_PRIVATE_HOST_RE = re.compile(r"\b(?:[A-Z0-9-]+\.)+(?:local|internal|lan|home)\b", re.IGNORECASE)
|
||||
_FQDN_RE = re.compile(r"\b(?:[A-Z0-9-]+\.)+[A-Z]{2,63}\b", re.IGNORECASE)
|
||||
|
||||
|
||||
def _normalized_hosts(hosts: Iterable[str]) -> set[str]:
|
||||
return {host.strip().lower().rstrip(".") for host in hosts if host.strip()}
|
||||
|
||||
|
||||
def _redact_url(match: re.Match[str], allowed_hosts: set[str]) -> str:
|
||||
value = match.group(0)
|
||||
host = (urlsplit(value).hostname or "").lower().rstrip(".")
|
||||
return value if host in allowed_hosts else REDACTION
|
||||
|
||||
|
||||
def _redact_ipv4(match: re.Match[str]) -> str:
|
||||
value = match.group(0)
|
||||
try:
|
||||
ipaddress.IPv4Address(value)
|
||||
except ipaddress.AddressValueError:
|
||||
return value
|
||||
return REDACTION
|
||||
|
||||
|
||||
def _redact_ipv6(match: re.Match[str]) -> str:
|
||||
value = match.group(0)
|
||||
try:
|
||||
ipaddress.IPv6Address(value)
|
||||
except ipaddress.AddressValueError:
|
||||
return value
|
||||
return REDACTION
|
||||
|
||||
|
||||
def _redact_fqdn(match: re.Match[str], allowed_hosts: set[str]) -> str:
|
||||
host = match.group(0)
|
||||
return host if host.lower().rstrip(".") in allowed_hosts else REDACTION
|
||||
|
||||
|
||||
def sanitize_text(text: str, *, allowed_hosts: Iterable[str]) -> str:
|
||||
hosts = _normalized_hosts(allowed_hosts)
|
||||
cleaned = _URL_RE.sub(lambda match: _redact_url(match, hosts), text)
|
||||
cleaned = _CREDENTIAL_RE.sub(REDACTION, cleaned)
|
||||
cleaned = _EMAIL_RE.sub(REDACTION, cleaned)
|
||||
cleaned = _PATH_RE.sub(REDACTION, cleaned)
|
||||
cleaned = _IPV4_RE.sub(_redact_ipv4, cleaned)
|
||||
cleaned = _IPV6_CANDIDATE_RE.sub(_redact_ipv6, cleaned)
|
||||
cleaned = _PHONE_RE.sub(REDACTION, cleaned)
|
||||
cleaned = _PRIVATE_HOST_RE.sub(REDACTION, cleaned)
|
||||
cleaned = _FQDN_RE.sub(lambda match: _redact_fqdn(match, hosts), cleaned)
|
||||
return cleaned
|
||||
|
||||
|
||||
def assert_publishable(text: str, *, allowed_hosts: Iterable[str]) -> None:
|
||||
sanitized = sanitize_text(text, allowed_hosts=allowed_hosts)
|
||||
if sanitized != text:
|
||||
raise ValueError("content still contains private or unapproved data")
|
||||
@@ -0,0 +1,36 @@
|
||||
import hashlib
|
||||
import tempfile
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
|
||||
from PIL import Image
|
||||
|
||||
from cover import generate_cover
|
||||
|
||||
|
||||
class CoverTests(unittest.TestCase):
|
||||
def test_generates_deterministic_1200x630_jpeg_under_5mb(self):
|
||||
output_dir = Path(tempfile.mkdtemp())
|
||||
first = generate_cover("arabic-ai-guide", "أدوات", output_dir)
|
||||
first_hash = hashlib.sha256(first["path"].read_bytes()).hexdigest()
|
||||
second = generate_cover("arabic-ai-guide", "أدوات", output_dir)
|
||||
second_hash = hashlib.sha256(second["path"].read_bytes()).hexdigest()
|
||||
|
||||
self.assertEqual(first_hash, second_hash)
|
||||
self.assertEqual(first["coverImage"]["filename"], "arabic-ai-guide.jpg")
|
||||
self.assertLessEqual(first["path"].stat().st_size, 5 * 1024 * 1024)
|
||||
with Image.open(first["path"]) as image:
|
||||
self.assertEqual(image.size, (1200, 630))
|
||||
self.assertEqual(image.format, "JPEG")
|
||||
self.assertEqual(image.mode, "RGB")
|
||||
|
||||
def test_rejects_invalid_slug_or_category(self):
|
||||
output_dir = Path(tempfile.mkdtemp())
|
||||
with self.assertRaises(ValueError):
|
||||
generate_cover("عنوان عربي", "أدوات", output_dir)
|
||||
with self.assertRaises(ValueError):
|
||||
generate_cover("valid-slug", "عام", output_dir)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -0,0 +1,50 @@
|
||||
import unittest
|
||||
|
||||
from page_state import MarkerError, find_marker
|
||||
|
||||
|
||||
VALID = "anwarpy: status=pending | access=free | category=نماذج | queued_at=2026-10-09T15:12:00+03:00"
|
||||
|
||||
|
||||
class PageStateTests(unittest.TestCase):
|
||||
def test_finds_one_exact_marker_after_unrelated_blocks(self):
|
||||
result = find_marker([
|
||||
{"id": "a", "text": "ملاحظات"},
|
||||
{"id": "b", "text": VALID},
|
||||
{"id": "c", "text": "مصدر عام"},
|
||||
])
|
||||
self.assertEqual(result.block_id, "b")
|
||||
self.assertEqual(result.meta["status"], "pending")
|
||||
|
||||
def test_returns_none_when_anwarpy_is_never_mentioned(self):
|
||||
self.assertIsNone(find_marker([{"id": "a", "text": "لا توجد علامة"}]))
|
||||
|
||||
def test_reports_every_near_miss(self):
|
||||
for text in (
|
||||
VALID.replace("anwarpy:", "Anwarpy:"),
|
||||
"prefix " + VALID,
|
||||
"documentation mentions anwarpy but has no marker",
|
||||
VALID.replace("anwarpy:", "anwarpy ="),
|
||||
):
|
||||
with self.subTest(text=text):
|
||||
with self.assertRaisesRegex(MarkerError, "near-miss"):
|
||||
find_marker([{"id": "bad", "text": text}])
|
||||
|
||||
def test_scans_all_blocks_and_rejects_ambiguity(self):
|
||||
with self.assertRaisesRegex(MarkerError, "multiple"):
|
||||
find_marker([
|
||||
{"id": "first", "text": VALID},
|
||||
{"id": "middle", "text": "unrelated"},
|
||||
{"id": "last", "text": VALID.replace("category=نماذج", "category=أدوات")},
|
||||
])
|
||||
|
||||
def test_exact_plus_near_miss_is_ambiguous(self):
|
||||
with self.assertRaisesRegex(MarkerError, "ambiguous"):
|
||||
find_marker([
|
||||
{"id": "good", "text": VALID},
|
||||
{"id": "bad", "text": "Anwarpy: pending"},
|
||||
])
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -0,0 +1,83 @@
|
||||
import unittest
|
||||
|
||||
from publication_meta import (
|
||||
clean,
|
||||
mark_blocked,
|
||||
mark_published,
|
||||
mark_publishing,
|
||||
parse_meta,
|
||||
same_meta,
|
||||
)
|
||||
|
||||
|
||||
PENDING = "anwarpy: status=pending | access=vip | category=أدوات | queued_at=2026-10-09T15:12:00+03:00"
|
||||
|
||||
|
||||
class PublicationMetaTests(unittest.TestCase):
|
||||
def test_parses_pending_and_normalizes_formatting_controls(self):
|
||||
raw = "\ufeffanwarpy:\u00a0status=pending | access=vip | category=أدوات | queued_at=2026-10-09T15:12:00+03:00\u200f"
|
||||
meta = parse_meta(raw)
|
||||
self.assertEqual(meta["status"], "pending")
|
||||
self.assertEqual(meta["category"], "أدوات")
|
||||
|
||||
def test_rejects_invalid_values_and_dates(self):
|
||||
for raw in (
|
||||
PENDING.replace("access=vip", "access=paid"),
|
||||
PENDING.replace("category=أدوات", "category=عام"),
|
||||
PENDING.replace("2026-10-09", "2026-13-45"),
|
||||
PENDING.replace("+03:00", ""),
|
||||
):
|
||||
with self.subTest(raw=raw):
|
||||
with self.assertRaises(ValueError):
|
||||
parse_meta(raw)
|
||||
|
||||
def test_rejects_invalid_state_shapes(self):
|
||||
with self.assertRaisesRegex(ValueError, "slug"):
|
||||
parse_meta(PENDING.replace("status=pending", "status=publishing"))
|
||||
with self.assertRaisesRegex(ValueError, "blocked_reason"):
|
||||
parse_meta(PENDING.replace("status=pending", "status=blocked"))
|
||||
with self.assertRaisesRegex(ValueError, "not allowed"):
|
||||
parse_meta(PENDING + " | url=https://anwarpy.ai/posts/example")
|
||||
|
||||
def test_transitions_reparse_raw_input(self):
|
||||
publishing = mark_publishing(PENDING, "arabic-ai-guide")
|
||||
self.assertEqual(parse_meta(publishing)["status"], "publishing")
|
||||
published = mark_published(
|
||||
publishing,
|
||||
"2026-10-09T12:20:11+00:00",
|
||||
"https://anwarpy.ai/posts/arabic-ai-guide",
|
||||
)
|
||||
self.assertEqual(parse_meta(published)["status"], "published")
|
||||
|
||||
def test_blocked_is_terminal_and_carries_a_bounded_reason(self):
|
||||
blocked = mark_blocked(PENDING, "cover")
|
||||
self.assertEqual(parse_meta(blocked)["blocked_reason"], "cover")
|
||||
publishing = mark_publishing(PENDING, "arabic-ai-guide")
|
||||
blocked_after_claim = parse_meta(mark_blocked(publishing, "generation"))
|
||||
self.assertEqual(blocked_after_claim["status"], "blocked")
|
||||
self.assertNotIn("slug", blocked_after_claim)
|
||||
with self.assertRaises(ValueError):
|
||||
mark_blocked(PENDING, "network")
|
||||
|
||||
def test_canonical_url_and_slug_are_exact(self):
|
||||
publishing = mark_publishing(PENDING, "arabic-ai-guide")
|
||||
for url in (
|
||||
"http://anwarpy.ai/posts/arabic-ai-guide",
|
||||
"https://www.anwarpy.ai/posts/arabic-ai-guide",
|
||||
"https://anwarpy.ai/posts/arabic-ai-guide/",
|
||||
"https://anwarpy.ai/posts/other",
|
||||
):
|
||||
with self.subTest(url=url):
|
||||
with self.assertRaises(ValueError):
|
||||
mark_published(publishing, "2026-10-09T15:20:11+03:00", url)
|
||||
with self.assertRaises(ValueError):
|
||||
mark_publishing(PENDING, "عنوان-عربي")
|
||||
|
||||
def test_readback_comparison_is_semantic_after_cleaning(self):
|
||||
formatted = "\u200fanwarpy: status=pending|access=vip|category=أدوات|queued_at=2026-10-09T15:12:00+03:00"
|
||||
self.assertTrue(same_meta(PENDING, formatted))
|
||||
self.assertEqual(clean("\ufeff أداة\u00a0"), "أداة")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -0,0 +1,269 @@
|
||||
import fcntl
|
||||
import tempfile
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
|
||||
from page_state import find_marker
|
||||
from publish_one import (
|
||||
AmbiguousWrite,
|
||||
DeterministicFailure,
|
||||
PublicVerificationError,
|
||||
Publisher,
|
||||
)
|
||||
|
||||
|
||||
WORKSPACE = "workspace"
|
||||
PENDING_OLD = "anwarpy: status=pending | access=free | category=نماذج | queued_at=2026-10-08T09:00:00+03:00"
|
||||
PENDING_NEW = "anwarpy: status=pending | access=vip | category=أدوات | queued_at=2026-10-09T09:00:00+03:00"
|
||||
BLOCKED_OLDER = "anwarpy: status=blocked | access=free | category=نماذج | queued_at=2026-10-07T09:00:00+03:00 | blocked_reason=cover"
|
||||
REPUBLISH = "anwarpy: status=republish | access=vip | category=أدوات | queued_at=2026-10-10T09:00:00+03:00 | slug=existing-guide | published_at=2026-10-09T12:00:00+03:00 | url=https://anwarpy.ai/posts/existing-guide"
|
||||
|
||||
|
||||
def blocks(marker, evidence="Public source text"):
|
||||
return [
|
||||
{"id": "body", "type": "paragraph", "text": evidence, "depth": 0},
|
||||
{"id": "marker", "type": "paragraph", "text": marker, "depth": 0},
|
||||
]
|
||||
|
||||
|
||||
class FakeAppFlowy:
|
||||
def __init__(self, page_markers):
|
||||
self.pages = [
|
||||
{"view_id": page_id, "name": title}
|
||||
for page_id, (title, _marker) in page_markers.items()
|
||||
]
|
||||
self.block_map = {
|
||||
page_id: blocks(marker) for page_id, (_title, marker) in page_markers.items()
|
||||
}
|
||||
self.list_calls = 0
|
||||
self.edits = []
|
||||
|
||||
def list_pages(self):
|
||||
self.list_calls += 1
|
||||
return self.pages
|
||||
|
||||
def get_blocks(self, page_id):
|
||||
return [dict(block) for block in self.block_map[page_id]]
|
||||
|
||||
def edit_block(self, page_id, block_id, text):
|
||||
self.edits.append((page_id, block_id, text))
|
||||
for block in self.block_map[page_id]:
|
||||
if block["id"] == block_id:
|
||||
block["text"] = text
|
||||
return
|
||||
raise KeyError(block_id)
|
||||
|
||||
def marker(self, page_id):
|
||||
return find_marker(self.get_blocks(page_id)).meta
|
||||
|
||||
|
||||
class FakeGenerator:
|
||||
def __init__(self, slugs=None):
|
||||
self.slugs = slugs or {}
|
||||
self.calls = []
|
||||
|
||||
def generate(self, title, evidence, meta):
|
||||
self.calls.append((title, evidence, dict(meta)))
|
||||
slug = self.slugs.get(title, "generated-guide")
|
||||
return {
|
||||
"title": f"دليل {title}",
|
||||
"slug": slug,
|
||||
"dek": "شرح عربي عملي ومباشر",
|
||||
"teaser": "مقدمة مجانية مفيدة" if meta["access"] == "vip" else "",
|
||||
"sections": [
|
||||
{"heading": "المشكلة", "paragraphs": ["شرح واضح للمشكلة والحل."], "code": None},
|
||||
{"heading": "التحقق", "paragraphs": ["تحقق من النتيجة بخطوة قابلة للقياس."], "code": None},
|
||||
{"heading": "القيود", "paragraphs": ["راجع القيود قبل الاستخدام."], "code": None},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
class FakeMedia:
|
||||
def __init__(self):
|
||||
self.calls = []
|
||||
|
||||
def render(self, article, meta):
|
||||
self.calls.append((article["slug"], dict(meta)))
|
||||
return {
|
||||
"coverImage": {"filename": f"{article['slug']}.jpg", "dataBase64": "/9j/2Q=="},
|
||||
"video_path": f"/tmp/{article['slug']}.mp4",
|
||||
}
|
||||
|
||||
|
||||
class FakeApi:
|
||||
def __init__(self, records=None, timeout_after_create=False, public_ok=True):
|
||||
self.records = records or {}
|
||||
self.timeout_after_create = timeout_after_create
|
||||
self.public_ok = public_ok
|
||||
self.create_calls = []
|
||||
self.update_calls = []
|
||||
self.verify_calls = []
|
||||
|
||||
def lookup(self, slug):
|
||||
record = self.records.get(slug)
|
||||
return dict(record) if record else None
|
||||
|
||||
def create(self, body):
|
||||
self.create_calls.append(dict(body))
|
||||
record = {
|
||||
"id": len(self.records) + 1,
|
||||
"title": body["title"],
|
||||
"slug": body["slug"],
|
||||
"status": "published" if body["publish"] else "draft",
|
||||
"access": body["access"],
|
||||
"category": body["category"],
|
||||
"publishedAt": "2026-10-09T12:20:11+00:00",
|
||||
"url": f"https://anwarpy.ai/posts/{body['slug']}",
|
||||
}
|
||||
self.records[body["slug"]] = record
|
||||
if self.timeout_after_create:
|
||||
self.timeout_after_create = False
|
||||
raise AmbiguousWrite("timeout after create")
|
||||
return dict(record)
|
||||
|
||||
def update(self, slug, body):
|
||||
self.update_calls.append((slug, dict(body)))
|
||||
old = self.records[slug]
|
||||
old.update({
|
||||
"title": body.get("title", old.get("title")),
|
||||
"status": "published" if body.get("publish") else old["status"],
|
||||
"access": body.get("access", old["access"]),
|
||||
"category": body.get("category", old["category"]),
|
||||
"publishedAt": old.get("publishedAt") or "2026-10-09T12:20:11+00:00",
|
||||
"url": f"https://anwarpy.ai/posts/{slug}",
|
||||
})
|
||||
return dict(old)
|
||||
|
||||
def verify_public(self, record):
|
||||
self.verify_calls.append(dict(record))
|
||||
return self.public_ok
|
||||
|
||||
|
||||
class PublisherTests(unittest.TestCase):
|
||||
def make_publisher(self, app, api, generator=None, media=None, lock_path=None):
|
||||
return Publisher(
|
||||
appflowy=app,
|
||||
api=api,
|
||||
generator=generator or FakeGenerator(),
|
||||
media=media or FakeMedia(),
|
||||
lock_path=lock_path or Path(tempfile.mkdtemp()) / "publisher.lock",
|
||||
)
|
||||
|
||||
def test_lock_loser_makes_no_external_calls(self):
|
||||
lock_path = Path(tempfile.mkdtemp()) / "publisher.lock"
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi()
|
||||
with lock_path.open("a+") as handle:
|
||||
fcntl.flock(handle.fileno(), fcntl.LOCK_EX | fcntl.LOCK_NB)
|
||||
result = self.make_publisher(app, api, lock_path=lock_path).run()
|
||||
self.assertEqual(result, "busy")
|
||||
self.assertEqual(app.list_calls, 0)
|
||||
|
||||
def test_fifo_uses_queued_at_and_skips_blocked(self):
|
||||
app = FakeAppFlowy({
|
||||
"blocked": ("Blocked", BLOCKED_OLDER),
|
||||
"new": ("New", PENDING_NEW),
|
||||
"old": ("Old", PENDING_OLD),
|
||||
})
|
||||
generator = FakeGenerator({"Old": "old-guide", "New": "new-guide"})
|
||||
result = self.make_publisher(app, FakeApi(), generator=generator).run()
|
||||
self.assertEqual(result, "published:old-guide")
|
||||
self.assertEqual(generator.calls[0][0], "Old")
|
||||
self.assertEqual(app.marker("blocked")["status"], "blocked")
|
||||
self.assertEqual(app.marker("new")["status"], "pending")
|
||||
|
||||
def test_pending_absent_slug_posts_once_and_rerun_is_idle(self):
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi()
|
||||
publisher = self.make_publisher(app, api)
|
||||
self.assertEqual(publisher.run(), "published:generated-guide")
|
||||
self.assertEqual(len(api.create_calls), 1)
|
||||
self.assertEqual(app.marker("page")["status"], "published")
|
||||
self.assertEqual(publisher.run(), "idle")
|
||||
self.assertEqual(len(api.create_calls), 1)
|
||||
|
||||
def test_existing_draft_is_promoted_without_post(self):
|
||||
record = {
|
||||
"id": 1, "title": "Draft", "slug": "generated-guide", "status": "draft",
|
||||
"access": "free", "category": "نماذج", "publishedAt": None,
|
||||
}
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi({"generated-guide": record})
|
||||
self.assertEqual(self.make_publisher(app, api).run(), "published:generated-guide")
|
||||
self.assertEqual(api.create_calls, [])
|
||||
self.assertEqual(len(api.update_calls), 1)
|
||||
|
||||
def test_republish_updates_existing_slug_and_never_posts(self):
|
||||
record = {
|
||||
"id": 7, "title": "Old", "slug": "existing-guide", "status": "published",
|
||||
"access": "vip", "category": "أدوات", "publishedAt": "2026-10-09T09:00:00Z",
|
||||
"url": "https://anwarpy.ai/posts/existing-guide",
|
||||
}
|
||||
app = FakeAppFlowy({"page": ("Topic", REPUBLISH)})
|
||||
api = FakeApi({"existing-guide": record})
|
||||
generator = FakeGenerator({"Topic": "existing-guide"})
|
||||
self.assertEqual(self.make_publisher(app, api, generator=generator).run(), "published:existing-guide")
|
||||
self.assertEqual(api.create_calls, [])
|
||||
self.assertEqual(len(api.update_calls), 1)
|
||||
|
||||
def test_ambiguous_create_reconciles_without_second_post(self):
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi(timeout_after_create=True)
|
||||
self.assertEqual(self.make_publisher(app, api).run(), "published:generated-guide")
|
||||
self.assertEqual(len(api.create_calls), 1)
|
||||
|
||||
def test_public_failure_leaves_publishing_and_does_not_repost(self):
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi(public_ok=False)
|
||||
publisher = self.make_publisher(app, api)
|
||||
with self.assertRaises(PublicVerificationError):
|
||||
publisher.run()
|
||||
self.assertEqual(app.marker("page")["status"], "publishing")
|
||||
self.assertEqual(len(api.create_calls), 1)
|
||||
with self.assertRaises(PublicVerificationError):
|
||||
publisher.run()
|
||||
self.assertEqual(len(api.create_calls), 1)
|
||||
|
||||
def test_api_metadata_mismatch_leaves_publishing(self):
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi()
|
||||
original_create = api.create
|
||||
|
||||
def mismatched(body):
|
||||
result = original_create(body)
|
||||
result["access"] = "vip"
|
||||
api.records[body["slug"]]["access"] = "vip"
|
||||
return result
|
||||
|
||||
api.create = mismatched
|
||||
with self.assertRaisesRegex(ValueError, "access mismatch"):
|
||||
self.make_publisher(app, api).run()
|
||||
self.assertEqual(app.marker("page")["status"], "publishing")
|
||||
self.assertEqual(len(api.create_calls), 1)
|
||||
|
||||
def test_generation_failure_blocks_page_without_api_write(self):
|
||||
app = FakeAppFlowy({"page": ("Topic", PENDING_OLD)})
|
||||
api = FakeApi()
|
||||
generator = FakeGenerator()
|
||||
|
||||
def fail(*_args):
|
||||
raise DeterministicFailure("generation", "model failed")
|
||||
|
||||
generator.generate = fail
|
||||
self.assertEqual(self.make_publisher(app, api, generator=generator).run(), "blocked:generation")
|
||||
self.assertEqual(app.marker("page")["status"], "blocked")
|
||||
self.assertEqual(api.create_calls, [])
|
||||
|
||||
def test_malformed_marker_is_reported_and_valid_page_can_run(self):
|
||||
app = FakeAppFlowy({
|
||||
"bad": ("Bad", "Anwarpy: pending"),
|
||||
"good": ("Good", PENDING_OLD),
|
||||
})
|
||||
publisher = self.make_publisher(app, FakeApi(), generator=FakeGenerator({"Good": "good-guide"}))
|
||||
self.assertEqual(publisher.run(), "published:good-guide")
|
||||
self.assertEqual(len(publisher.marker_errors), 1)
|
||||
self.assertIn("bad", publisher.marker_errors[0])
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -0,0 +1,126 @@
|
||||
import json
|
||||
import tempfile
|
||||
import unittest
|
||||
from pathlib import Path
|
||||
from unittest.mock import patch
|
||||
|
||||
from runtime import (
|
||||
AgentApi,
|
||||
AppFlowyMcp,
|
||||
CoverMedia,
|
||||
LocalArticleGenerator,
|
||||
_json_from_text,
|
||||
)
|
||||
|
||||
|
||||
class FakeAppFlowy(AppFlowyMcp):
|
||||
def __init__(self):
|
||||
super().__init__(Path("unused"))
|
||||
self.edits = []
|
||||
|
||||
def _call(self, tool, arguments):
|
||||
if tool == "get_workspace_folder":
|
||||
return {
|
||||
"data": {
|
||||
"view_id": "3a743541-abbf-495a-a18a-74f405fa5d70",
|
||||
"children": [
|
||||
{"view_id": "a", "name": "A", "children": [
|
||||
{"view_id": "b", "name": "B", "children": []},
|
||||
]},
|
||||
],
|
||||
}
|
||||
}
|
||||
if tool == "get_page_blocks":
|
||||
return {"blocks": [{"id": "x", "text": "body"}]}
|
||||
if tool == "edit_block_text":
|
||||
self.edits.append(arguments)
|
||||
return {"code": 0}
|
||||
raise AssertionError(tool)
|
||||
|
||||
|
||||
class FakeAgentApi(AgentApi):
|
||||
def __init__(self):
|
||||
super().__init__("test-key")
|
||||
self.responses = []
|
||||
self.requests = []
|
||||
self.public = (200, b"page")
|
||||
self.rsc = (200, b"rsc")
|
||||
|
||||
def _request(self, method, path, body=None, *, anonymous=False):
|
||||
self.requests.append((method, path, body, anonymous))
|
||||
if self.responses:
|
||||
return self.responses.pop(0)
|
||||
return 200, b"{}", "application/json"
|
||||
|
||||
def _public_get(self, url, *, rsc=False):
|
||||
return self.rsc if rsc else self.public
|
||||
|
||||
|
||||
class RuntimeTests(unittest.TestCase):
|
||||
def test_unwraps_nested_mcp_result(self):
|
||||
nested = json.dumps({"result": json.dumps({"data": {"ok": True}})})
|
||||
self.assertEqual(_json_from_text(nested), {"data": {"ok": True}})
|
||||
|
||||
def test_appflowy_enforces_enumerated_subtree(self):
|
||||
client = FakeAppFlowy()
|
||||
self.assertEqual([page["view_id"] for page in client.list_pages()], ["a", "b"])
|
||||
self.assertEqual(client.get_blocks("b")[0]["id"], "x")
|
||||
client.edit_block("a", "x", "new")
|
||||
self.assertEqual(client.edits[0]["page_id"], "a")
|
||||
with self.assertRaises(PermissionError):
|
||||
client.get_blocks("outside")
|
||||
|
||||
def test_agent_api_records_body_probe_and_decodes_create(self):
|
||||
api = FakeAgentApi()
|
||||
api.responses = [(201, json.dumps({"slug": "guide"}).encode(), "application/json")]
|
||||
body = {
|
||||
"slug": "guide",
|
||||
"content": {"root": {"children": [
|
||||
{"children": [{"text": "distinctive protected body sentence"}]},
|
||||
]}},
|
||||
}
|
||||
self.assertEqual(api.create(body)["slug"], "guide")
|
||||
self.assertEqual(api.body_probes["guide"], "distinctive protected body sentence")
|
||||
|
||||
def test_agent_api_updates_with_patch(self):
|
||||
api = FakeAgentApi()
|
||||
api.responses = [(200, json.dumps({"slug": "guide"}).encode(), "application/json")]
|
||||
self.assertEqual(api.update("guide", {"publish": True})["slug"], "guide")
|
||||
self.assertEqual(api.requests[0][0:2], ("PATCH", "/api/agent/posts/guide"))
|
||||
|
||||
@patch("runtime.time.sleep", return_value=None)
|
||||
def test_vip_verification_rejects_body_leak(self, _sleep):
|
||||
api = FakeAgentApi()
|
||||
api.body_probes["guide"] = "VIP_BODY_MUST_NOT_LEAK"
|
||||
api.public = (200, b"VIP_BODY_MUST_NOT_LEAK")
|
||||
record = {"slug": "guide", "access": "vip", "url": "https://anwarpy.ai/posts/guide"}
|
||||
self.assertFalse(api.verify_public(record))
|
||||
|
||||
def test_local_article_parser_enforces_word_count(self):
|
||||
article = {
|
||||
"title": "دليل عربي",
|
||||
"slug": "arabic-guide",
|
||||
"dek": "وصف عملي",
|
||||
"teaser": "",
|
||||
"sections": [
|
||||
{"heading": "أ", "paragraphs": ["كلمة " * 300], "code": None},
|
||||
{"heading": "ب", "paragraphs": ["كلمة " * 300], "code": None},
|
||||
{"heading": "ج", "paragraphs": ["كلمة " * 300], "code": None},
|
||||
],
|
||||
}
|
||||
parsed = LocalArticleGenerator._parse(json.dumps(article, ensure_ascii=False), "free", None)
|
||||
self.assertEqual(parsed["slug"], "arabic-guide")
|
||||
article["sections"][0]["paragraphs"] = ["قصير"]
|
||||
with self.assertRaisesRegex(Exception, "900 to 2500"):
|
||||
LocalArticleGenerator._parse(json.dumps(article, ensure_ascii=False), "free", None)
|
||||
|
||||
def test_cover_media_returns_cover_without_video(self):
|
||||
media = CoverMedia(Path(tempfile.mkdtemp())).render(
|
||||
{"slug": "arabic-guide"}, {"category": "أدوات"}
|
||||
)
|
||||
self.assertIn("coverImage", media)
|
||||
self.assertNotIn("video_path", media)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -0,0 +1,44 @@
|
||||
import unittest
|
||||
|
||||
from sanitize import assert_publishable, sanitize_text
|
||||
|
||||
|
||||
class SanitizeTests(unittest.TestCase):
|
||||
def test_redacts_private_identifiers_and_credentials(self):
|
||||
raw = """Connect to 10.1.2.3 or fd00::12 as admin@example.test.
|
||||
SSH root@private.internal and use password=FakeSecret123.
|
||||
Read /Users/example/private/config and call https://hidden.internal/api.
|
||||
Phone +1 555 123 4567; token: abcdefghijklmnop.
|
||||
"""
|
||||
cleaned = sanitize_text(raw, allowed_hosts={"anwarpy.ai"})
|
||||
for secret in (
|
||||
"10.1.2.3",
|
||||
"fd00::12",
|
||||
"admin@example.test",
|
||||
"root@private.internal",
|
||||
"FakeSecret123",
|
||||
"/Users/example/private/config",
|
||||
"hidden.internal",
|
||||
"+1 555 123 4567",
|
||||
"abcdefghijklmnop",
|
||||
):
|
||||
self.assertNotIn(secret, cleaned)
|
||||
assert_publishable(cleaned, allowed_hosts={"anwarpy.ai"})
|
||||
|
||||
def test_preserves_approved_public_urls(self):
|
||||
text = "راجع https://anwarpy.ai/posts/example للمزيد."
|
||||
self.assertEqual(sanitize_text(text, allowed_hosts={"anwarpy.ai"}), text)
|
||||
assert_publishable(text, allowed_hosts={"anwarpy.ai"})
|
||||
|
||||
def test_redacts_unapproved_public_hosts(self):
|
||||
cleaned = sanitize_text("Source: https://unapproved.example/article", allowed_hosts={"anwarpy.ai"})
|
||||
self.assertNotIn("unapproved.example", cleaned)
|
||||
assert_publishable(cleaned, allowed_hosts={"anwarpy.ai"})
|
||||
|
||||
def test_assert_publishable_raises_without_using_assert_statement(self):
|
||||
with self.assertRaises(ValueError):
|
||||
assert_publishable("internal address 192.168.1.10", allowed_hosts={"anwarpy.ai"})
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
@@ -1,21 +0,0 @@
|
||||
# ADR 0001 — Comments endpoint lives at /api/posts/[slug]/comments, not /api/comments
|
||||
|
||||
Date: 2026-10-03
|
||||
|
||||
## Status
|
||||
|
||||
Accepted
|
||||
|
||||
## Context
|
||||
|
||||
The comments API needs a route. The conventional-looking path `/api/comments` collides with Payload: it auto-mounts REST CRUD for every collection at `/api/<slug>`. A `comments` collection therefore already serves `/api/comments` for the admin panel, and moderation (approve/reject) runs through that panel. An app-router route at the same path would shadow and break the panel's CRUD.
|
||||
|
||||
## Decision
|
||||
|
||||
Comments are created at `POST /api/posts/[slug]/comments` (`src/app/api/posts/[slug]/comments/route.ts`), matching the existing `/api/posts/[slug]/like` pattern. Admin moderation keeps using Payload's own REST/admin panel.
|
||||
|
||||
## Tests for a real ADR
|
||||
|
||||
- **Hard to reverse**: the endpoint is a public contract consumed by the client form; moving it breaks every deployed client.
|
||||
- **Surprising**: the collision with Payload's auto-mounted REST is non-obvious — a developer would naturally reach for `/api/comments`.
|
||||
- **Real trade-off**: a shorter conventional path vs. a working admin moderation panel.
|
||||
@@ -1,25 +0,0 @@
|
||||
# ADR 0002 — Moderated comments with server-forced author
|
||||
|
||||
Date: 2026-10-03
|
||||
|
||||
## Status
|
||||
|
||||
Accepted
|
||||
|
||||
## Context
|
||||
|
||||
Comments are user-generated content on a public site. Risks: identity spoofing (a request forging `author`), spam (no gate), and orphaned identity data (nested user lookups through restrictive read access). QA-D04 required a real backend for comments.
|
||||
|
||||
## Decision
|
||||
|
||||
- Comments default to `status: 'pending'`; only `approved` are publicly visible. The read access rule returns `{ status: { equals: 'approved' } }` for non-admins.
|
||||
- The author is forced server-side on create, twice: a `beforeChange` hook on the collection and the custom route — REST-created comments can never spoof identity.
|
||||
- `authorName` is denormalized at submit time (snapshot of `fullName`, else «عضو») to avoid nested user-read access issues when rendering; the email is never exposed.
|
||||
- Approval/rejection is admin-only, done in the Payload admin panel. Authors cannot edit or delete their comments (moderated model).
|
||||
- Authors see their own pending comments rendered on the post page tagged «قيد المراجعة» (via `overrideAccess` query filtered to their own author id), so a submitted comment does not "vanish".
|
||||
|
||||
## Tests for a real ADR
|
||||
|
||||
- **Hard to reverse**: the display-name snapshot and status lifecycle are visible in every rendered comment and in the DB.
|
||||
- **Surprising**: forcing author in two places (hook + route) and `overrideAccess` for the pending query are non-obvious.
|
||||
- **Real trade-off**: moderation latency for users vs. spam safety; denormalization vs. live join through restricted user reads.
|
||||
@@ -1,25 +0,0 @@
|
||||
# ADR 0003 — Cloudflare Email Sending REST, not SMTP
|
||||
|
||||
Date: 2026-10-03
|
||||
|
||||
## Status
|
||||
|
||||
Accepted
|
||||
|
||||
## Context
|
||||
|
||||
The site needs exactly one transactional email: the verification mail sent by `POST /api/auth/resend-verification` via `sendVerificationEmail(to, token)` in `src/lib/mail.ts`. The first implementation used nodemailer over generic SMTP. Cloudflare Email Service (the mail provider chosen for anwarpy.ai) has **no SMTP interface** — it exposes a REST endpoint only — so the nodemailer path could never be activated on the target host.
|
||||
|
||||
## Decision
|
||||
|
||||
- `src/lib/mail.ts` sends via `POST https://api.cloudflare.com/client/v4/accounts/{CLOUDFLARE_ACCOUNT_ID}/email/sending/send` using `fetch`, authenticated with `Authorization: Bearer ${CLOUDFLARE_API_TOKEN}`.
|
||||
- The `from` field uses the REST shape `{ address, name }` (key is `address`, **not** `email`); default address `noreply@anwarpy.ai` (override: `MAIL_FROM`).
|
||||
- Active only when `CLOUDFLARE_API_TOKEN` **and** `CLOUDFLARE_ACCOUNT_ID` are set; otherwise `{ sent: false }` (existing degrade-gracefully contract — the resend route answers 503 with a clear message).
|
||||
- Non-OK response or fetch throw: `console.error` the error body, return `{ sent: false }`. No retry logic (single-shot; the resend route re-invokes).
|
||||
- nodemailer is uninstalled; the exported signature `sendVerificationEmail(to: string, token: string): Promise<{ sent: boolean }>` is unchanged.
|
||||
|
||||
## Consequences
|
||||
|
||||
- The API token needs the Email Sending permission; the sender domain must be onboarded in Cloudflare (SPF/DKIM records created via `wrangler email sending dns get`).
|
||||
- `smtpConfigured()` and all `SMTP_*` env vars are gone; anything expecting them must be updated when mail features grow.
|
||||
- Adding more email types later means extending this one module — it is the single mail boundary.
|
||||
@@ -1,28 +0,0 @@
|
||||
# ADR 0004 — Coming-soon subscribe on public launch (no simulated VIP)
|
||||
|
||||
Date: 2026-10-03
|
||||
|
||||
## Status
|
||||
|
||||
Accepted
|
||||
|
||||
## Context
|
||||
|
||||
Until Stripe keys exist, the subscribe flow had two self-grant holes that are fatal on a public site:
|
||||
|
||||
1. `POST /api/subscribe` (no keys) returned `{ url: '/payment-success?simulated=1' }`.
|
||||
2. `/payment-success` without a `session_id` set `activate = true` — i.e. any logged-in user visiting the URL became `role: 'vip'` for free.
|
||||
|
||||
On the public internet this lets anyone self-grant VIP.
|
||||
|
||||
## Decision
|
||||
|
||||
- With no Stripe keys, `POST /api/subscribe` returns `{ comingSoon: true }` and no `url`; `SubscribeButton` already renders a disabled «قريباً» button whenever the response has no `url`.
|
||||
- `/payment-success` no longer activates anything without a session: the `else if (!sessionId) { activate = true }` branch is deleted and `simulated` is removed from the page props. After the activation block, free users (`role` not `vip`/`admin`) are redirected to `/subscription`. VIP/admin users pass through to the success copy.
|
||||
- The real Stripe path is unchanged: `session_id` present + `STRIPE_SECRET_KEY` set → session verified with Stripe → VIP activated.
|
||||
- When Stripe keys land, the same pages switch to real Checkout without further flow changes.
|
||||
|
||||
## Consequences
|
||||
|
||||
- No revenue until Stripe is configured; VIP can still be granted manually by an admin in `/admin`.
|
||||
- Anyone with a saved `?simulated=1` link gets redirected — the query param is simply ignored now.
|
||||
@@ -1,47 +0,0 @@
|
||||
# ADR 0005 — Member trust model (server-only privilege/verification/billing fields)
|
||||
|
||||
Date: 2026-10-09
|
||||
|
||||
## Status
|
||||
|
||||
Accepted
|
||||
|
||||
## Context
|
||||
|
||||
The 2026-10-08 pentest (findings #1, #3, #4, #6) confirmed that anonymous or self-authenticated
|
||||
client requests could write privileged fields on `users`:
|
||||
|
||||
1. `POST /api/users` accepted client-supplied `emailVerified`, `role`, `onboarded`,
|
||||
`stripeCustomerId`, `verificationToken` — e.g. instant self-verified admin.
|
||||
2. Self-`PATCH /api/users/{id}` accepted the same fields on update.
|
||||
3. Per-account login lockout (no time-box) let an attacker lock the admin out of the site
|
||||
indefinitely with wrong-password floods.
|
||||
|
||||
## Decision
|
||||
|
||||
- `role`, `emailVerified`, `verificationToken`, `stripeCustomerId`, `onboarded` are stripped from
|
||||
every **untrusted write** in `Users.beforeChange` (`web/src/collections/Users.ts`). Untrusted =
|
||||
no authenticated admin **and** no `context.systemActivation === true`. On create, the hook forces
|
||||
`role: 'free'`, `emailVerified: false`, `onboarded: false`.
|
||||
- Server-side writers opt back in with `context: { systemActivation: true }` on their local-API
|
||||
`payload.update`/`create` calls. Enumerated writers: `verify-email`, `resend-verification`,
|
||||
`subscribe`, `stripe/webhook` (×2), `payment-success`, `seed`. **Omitting the context silently
|
||||
no-ops the write (the field is deleted) — that is the intended failure mode**, so a missing
|
||||
context is caught in QA rather than leaking privilege.
|
||||
- Login lockout is per-account, time-boxed: 5 failed attempts → 15-minute lock (`auth:
|
||||
{ maxLoginAttempts: 5, lockTime: 15 * 60 * 1000 }`).
|
||||
- `role === 'admin'` accounts are **exempt from lockout** (owner decision 2026-10-09): a
|
||||
`beforeOperation` hook on `login` pre-clears `lockUntil`/`loginAttempts` via
|
||||
`db.updateOne` (which, like Payload's own `incrementLoginAttempts`, bypasses hooks). Free/VIP
|
||||
accounts keep the normal 5/15-min lockout.
|
||||
- Commenting requires a verified email; admins are exempt (see the 403 gate in
|
||||
`api/posts/[slug]/comments`).
|
||||
|
||||
## Consequences
|
||||
|
||||
- Every future server-side writer of these fields MUST pass `context.systemActivation`; a writer
|
||||
that forgets it silently loses its write.
|
||||
- The admin password has **no brute-force throttle** — compensate with a strong password. If that
|
||||
posture changes, delete the `beforeOperation` hook and the account falls back to 5/15-min lockout.
|
||||
- Client-sent profile fields (`fullName`, `termsVersion`, `interest`, `level`, `goal`, `prefs`) stay
|
||||
writable; only privilege/verification/billing fields are protected.
|
||||
@@ -1,73 +0,0 @@
|
||||
# Marketing-skills audit — anwarpy.ai (2026-10-10)
|
||||
|
||||
> Copy of the local audit of 2026-10-10 (source: agent workspace `marketing-skills-audit-findings.md`), committed for the launch PR. Items marked ❌ were fixed the same day in the launch/early-access branch; see `docs/launch/2026-10-10-launch-readiness.md` for per-item evidence.
|
||||
|
||||
Audited against installed playbooks: paywalls, signup, ai-seo, programmatic-seo, aso (`.agents/skills/`). Evidence: repo `web/src` (file:line) + live production HTML. Verdicts: ✅ compliant · ⚠️ partial · ❌ gap.
|
||||
|
||||
## Paywalls (skill: paywalls v2.0)
|
||||
|
||||
**Current state — technically solid.** Gating = `users.role` (free/vip/admin); VIP body has field-level read ACL (`collections/Posts.ts:57-71`) + page-level select — never served to non-VIP. Teaser paragraphs required for VIP posts (`Posts.ts:39-51`) with fade-out mask; paywall box on locked posts has headline, price-in-CTA («اشترك بـ $10 شهرياً», `lib/format.ts:11`), objection line («تلغي في أي وقت»), login secondary. Per-file byte gate on attachments (`/api/files/[id]`). Stripe: Checkout → `/payment-success` re-verification + webhook activation; deletion webhook downgrades. No dark patterns anywhere.
|
||||
|
||||
**Gaps**
|
||||
- ❌ Value demonstration: locked H2 titles never shown (`posts/[slug]/page.tsx:202` extracts TOC only when unlocked) — paywall promises «الأقسام العملية» generically.
|
||||
- ❌ Social proof absent on paywall and subscription (subscription shows guide counts only). No fabricated quotes allowed; needs owner-provided testimonial or real aggregate.
|
||||
- ❌ No FAQ link or free-escape-hatch inside the paywall box (FAQ lives only on /subscription).
|
||||
- ❌ Coming-soon discovered after failed click (`subscription/subscribe-button.tsx:16-27`): glossary says disabled «قريباً» button; actual renders active «اشترك الآن» and reveals coming-soon only after POST fails.
|
||||
- ❌ No measurement (paywall impression/CTA events) — blocked on analytics-tooling owner decision.
|
||||
- ⚠️ Pricing: monthly $10 only; skill suggests annual toggle — owner policy.
|
||||
- 🧹 Dead code: `styles/post-locked.css`, `styles/post-unlocked.css` imported nowhere (live styles in globals.css:168-190, design.css:271-287).
|
||||
|
||||
## Signup (skill: signup v2.0)
|
||||
|
||||
**Current state.** 5 fields (الاسم required, email, password ≥8 with show-toggle + hint, تأكيد كلمة المرور, terms checkbox) + hidden `termsVersion`. Native constraint validation with Arabic custom messages; paste allowed; visible labels; single column mobile. Post-submit: auto-login → `/verify-email` (can explore unverified; only commenting gated, 403 with Arabic copy) → `/onboarding` preserving `anwarpi:signup-next`. `safeNext` redirect hygiene. Rate limits: 5/h signup, 10/15min login per-IP (`middleware.ts`), Payload lockout 5/15min (admin exempt, PBKDF2 timing-equalizer).
|
||||
|
||||
**Gaps**
|
||||
- ❌ **Verification email is never sent at signup** — `sendVerificationEmail` has a single call site (`api/auth/resend-verification/route.ts`); `Users.ts` has no afterChange hook. The verify page claims «أرسلنا رابط التأكيد إلى:» falsely until the user clicks resend. Highest-impact fix.
|
||||
- ❌ 429 body mis-parsed: signup reads only `err?.errors?.[0]?.message` (`signup/page.tsx:44-47`), so middleware's `{error}` JSON is ignored → rate-limited users see «قد يكون البريد مستخدماً بالفعل» (wrong). Login shows one generic message for all failures (`login/page.tsx:29-31`). Retry-After never surfaced.
|
||||
- ❌ No spam-folder step and no change-email affordance on `/verify-email` (skill post-submit checklist).
|
||||
- ❌ Field count above skill's ≤3 guidance (confirm-password cuttable; name kept for comment display names).
|
||||
- ❌ No «مجاناً — بلا بطاقة ائتمانية» / privacy microcopy near CTA; no inline duplicate-email error with login link; no email-typo suggestion; static (not live) password hint.
|
||||
- ❌ Social auth absent (Google/Apple) — needs owner (OAuth apps).
|
||||
- ✅ Already compliant: single email field, no placeholder-only labels, value-story panel, terms timestamped (`termsAcceptedAt`).
|
||||
|
||||
## AI-SEO (skill: ai-seo v2.0)
|
||||
|
||||
**Current state — good SSR baseline.** All pages force-dynamic server components (content in initial HTML); `lang="ar" dir="rtl"`; self-canonical everywhere; title template; sitemap (published posts + lastmod, 8 static paths); robots with disallow list + sitemap pointer; WebSite JSON-LD (home) and Article JSON-LD (posts); answer-first seed content; public per-post JSON at `/api/posts/[slug]`.
|
||||
|
||||
**Gaps**
|
||||
- ❌ No `llms.txt` / `llms-full.txt`.
|
||||
- ❌ No named AI-crawler robots policy (implied `*` only); `/api` disallow hides the agent-readable post JSON.
|
||||
- ❌ Article pages emit **no og:image** — `generateMetadata` (`posts/[slug]/page.tsx:16-33`) defines `openGraph` which *replaces* the root OG object (no siteName/locale/images), though `post.cover.url` exists.
|
||||
- ❌ Draft leak: the metadata query lacks the `status: 'published'` filter the page query has → draft titles/deks render in metadata of 404 pages.
|
||||
- ❌ Article JSON-LD missing `image`, `dateModified`, `description`, `mainEntityOfPage`, `publisher`.
|
||||
- ❌ FAQPage schema absent despite real Q&A (`subscription/page.tsx:16-21` FAQ_ITEMS); BreadcrumbList absent despite breadcrumb UI (`posts/[slug]/page.tsx:179-183`); no Organization schema.
|
||||
- ❌ Lexical renderer has no `table` node case (~`page.tsx:373-387`) — comparison tables in content fall through to `<p>`.
|
||||
- ⚠️ Freshness: sitemap uses updatedAt but the page shows only publishedAt — add «حُدّث» when they differ.
|
||||
- ✅ Answer-first style present; single H1; h2 extraction; agent-accessible free JSON exists.
|
||||
|
||||
## Programmatic SEO (skill: programmatic-seo)
|
||||
|
||||
**Current state.** Indexable surface = `/`, `/articles`, `/posts/[slug]`, 7 static pages. All category/topic navigation is client-side DOM filtering on ONE URL (`articles-client.tsx:11-19, 62-70`) — clicks never update the URL; `?topic=` states share one canonical. `/catalog` permanently redirects to /articles; `catalog-filters.tsx` + `catalog-deck.tsx` exported nowhere (dead).
|
||||
|
||||
**Data available in Postgres** (Posts): title, slug, dek, category (6 values), level (3), access, status, publishedAt/updatedAt, readingMinutes, views, likes, cover, attachments. Public taxonomy already exists: `lib/topics.ts` — 4 topics (`agents` الوكلاء, `models` النماذج, `automation` الأتمتة, `foundations` الأساسيات) mapped from the 6 CMS categories via `topicsFor(post)` + `isTopic()`.
|
||||
|
||||
**Decision (owner-confirmed 2026-10-10): build 4 topic hub pages `/topics/[topic]`** — server-rendered directories with unique intros, counts, breadcrumbs + BreadcrumbList, sitemap entries, internal links from home/articles/post breadcrumbs. Later candidates (not now): topic×level personas (gate on ≥3 posts/combo), templates directory, glossary (needs new field). Comparisons/locations/translations: no data, N/A.
|
||||
|
||||
## ASO (transferable items only — site, not an app)
|
||||
|
||||
- ❌ Home title is brand-only «أنور بآي» — unknown brands need keywords: «أنور بآي — أدلة الذكاء الاصطناعي العملي بالعربية».
|
||||
- ❌ Only root + posts have descriptions; give /articles, /subscription, /about their own Arabic descriptions.
|
||||
- ❌ One static OG image for everything → per-post `cover` as og:image (same fix as ai-seo list).
|
||||
- ❌ Surface «حُدّث» freshness date on articles.
|
||||
- ✅ Localization correct (ar locale, RTL, og:locale). Ratings/screenshot fields: N/A.
|
||||
|
||||
## Needs owner (not in this pass)
|
||||
|
||||
1. Social auth providers (Google/Apple or magic links) — OAuth apps + keys.
|
||||
2. Analytics/experimentation tooling (paywall impressions, CTA CTR, form drop-off) — vendor + privacy stance; code ready once chosen.
|
||||
3. Annual plan / money-back guarantee — pricing policy.
|
||||
4. Testimonial content — must be real; nothing fabricated.
|
||||
5. Brand spelling inconsistency: site uses «أنور بآي» everywhere (title, og:site_name, JSON-LD); docs use «أنور بي آي». Pick one canonical spelling.
|
||||
6. Policy: allow free users to comment on VIP posts (currently hard-403) — easy conversion lever if allowed.
|
||||
7. Sitemap `limit: 500` with no pagination — fine at 13 posts; revisit at scale. /login + /signup kept in sitemap.
|
||||
8. `GLOSSARY.md` says free users are *redirected* from /payment-success; actual behavior is an in-page retry state — doc will be aligned to code (no redirect; no VIP minting either way).
|
||||
@@ -1,347 +0,0 @@
|
||||
# Anwarpy.ai launch readiness and developer handoff
|
||||
|
||||
Prepared for Ahmed and the developer team. Basis: public-site audit on 10 October 2026, refreshed membership/terms/privacy pages, Ahmed's confirmation that Stripe is unfinished, and the installed launch skill's readiness and site-QA framework.
|
||||
|
||||
## 1. Decision
|
||||
|
||||
**Paid/VIP launch: NO-GO at present. Free early-access launch: CONDITIONAL GO after the launch-blocking checks below pass.**
|
||||
|
||||
Stripe does not have to delay a useful free content launch. Launch the complete experience of reading useful Arabic posts and approved downloads first. Run an approximately two-week learning period; treat its end as a review checkpoint, not an automatic paywall date. Continue free early access if Stripe or access control remains unready. Do not advertise an exact paid-start date until approved.
|
||||
|
||||
This document is a proposed implementation specification, not evidence that fixes have been applied. No website, Stripe account, source notebook or production database was modified during preparation. Ticket owners are recommended roles; individual assignees and calendar dates remain to be assigned.
|
||||
|
||||
### User decisions incorporated
|
||||
|
||||
- Blog content originates primarily in AppFlowy and Obsidian notes.
|
||||
- An AI agent will help turn approved notes into blog posts.
|
||||
- Stripe integration is unfinished.
|
||||
- Desired initial period: about two weeks with free access, followed by VIP gating after Stripe is ready.
|
||||
|
||||
### Important correction to the earlier audit
|
||||
|
||||
Short notes are a legitimate content type. A 150–300-word note need not become a long tutorial to be useful. The problem is a mismatch between short content and labels promising a complete implementation or nine/ten minutes of reading. Add explicit content types and honest estimates. Expand only posts intended to be implementation guides, not every note.
|
||||
|
||||
## 2. Evidence and status
|
||||
|
||||
Confirmed in the earlier public audit:
|
||||
- All 22 unique sitemap URLs returned 200, including 14 posts: eight public full posts and six VIP previews.
|
||||
- Public text and membership price were present in initial HTML.
|
||||
- Canonicals, Arabic/RTL settings, sitemap and robots.txt exist.
|
||||
- Article and WebSite JSON-LD were observed in initial HTML. Schema is not absent.
|
||||
- Homepage/library titles are generic; eight non-post pages share a generic description.
|
||||
- Login and signup are in the sitemap; no noindex meta was observed in their initial HTML.
|
||||
- www serves a 200 homepage while canonical points to the apex domain.
|
||||
- First-agent and RAG article bodies were approximately 165 and 154 whitespace-delimited words, despite nine/ten-minute reading estimates.
|
||||
- No n8n mention was found in public text of the 14 posts. Paid bodies were not inspected.
|
||||
- Some free posts display download controls, while the paid comparison frames working files as a membership benefit. Actual download behavior was not tested.
|
||||
|
||||
Rechecked for this handoff:
|
||||
- /subscription still advertises $10 monthly, subscription CTAs and Stripe payment.
|
||||
- /terms still declares itself a prelaunch draft and calls the price experimental.
|
||||
- /privacy still contains prelaunch placeholders for actual providers, retention and effective dates.
|
||||
|
||||
Not verified; developer must test:
|
||||
- Full reading/download access when launch-free mode is applied.
|
||||
- Account signup, email verification, password reset, save/comment flows.
|
||||
- Mobile rendering, RTL behavior, browser interactions, accessible controls.
|
||||
- Checkout, webhooks, entitlements, cancellation and renewal.
|
||||
- Paid-body protection in APIs, page source, hydration payloads, search, feeds, assets and caches.
|
||||
- Restore procedures, monitoring, deployed security controls.
|
||||
- Search Console index status, field performance, analytics and actual AI citations.
|
||||
|
||||
The audit browser failed to start and PageSpeed returned 429. These failures do not establish website defects. Public metadata checks do not certify application behavior.
|
||||
|
||||
## 3. Recommended launch policy
|
||||
|
||||
### Free launch mode
|
||||
|
||||
Recommended initial settings, to adapt to the actual application rather than copy as existing field names:
|
||||
|
||||
```yaml
|
||||
launch_mode: free_early_access
|
||||
billing_enabled: false
|
||||
vip_enforcement_enabled: false
|
||||
review_checkpoint: approximately_two_weeks_after_actual_launch
|
||||
paid_transition: manual_owner_approval_only
|
||||
reading_requires_account: false
|
||||
newsletter_opt_in_required: true
|
||||
```
|
||||
|
||||
Open approved published content, including posts designated for future VIP access, during the early-access period. Keep drafts, private source notes, internal comments and unsafe attachments private. Guest reading should work without an account; accounts can remain optional for tested features. If signup is not ready, disable its CTA instead of blocking reading.
|
||||
|
||||
**Do not create Stripe trial subscriptions to implement this temporary editorial launch.** A site-level free-access policy is simpler and avoids accidentally collecting cards, issuing charges or making every reader a billing customer.
|
||||
|
||||
### Preserve editorial classification
|
||||
|
||||
Store the intended tier independently from effective access. A post can be designated VIP for the future while temporarily open now. Recommended conceptual fields:
|
||||
|
||||
```yaml
|
||||
publication_status: draft | review | published | archived
|
||||
content_type: note | tutorial | case_study | comparison
|
||||
intended_tier: free | vip
|
||||
early_access_eligible: true | false
|
||||
source_reference: private_traceability_record
|
||||
author_id: approved_real_author
|
||||
review_status: pending | approved
|
||||
```
|
||||
|
||||
The global launch override should apply only to approved published posts and approved associated assets. Never rewrite every VIP post to a permanent free tier, grant permanent VIP user roles, or expose raw CMS records in a public launch feed.
|
||||
|
||||
### What happens after the two-week checkpoint?
|
||||
|
||||
- If Stripe is not ready: continue free mode, update messaging and set a new review checkpoint.
|
||||
- If Stripe is ready but tests fail: continue free mode; repair failures before gating.
|
||||
- If tests pass: notify readers, specify the future gated set, have Ahmed approve the transition, then enable billing and gating in a controlled rollout.
|
||||
- Posts designated permanently free remain free.
|
||||
- Posts explicitly labeled as temporary VIP early-access may become previews. Preserve their URLs and public summaries.
|
||||
- Already downloaded public files cannot reliably be recalled. Do not promise otherwise.
|
||||
- Readers are never automatically subscribed or charged. Joining an update list is not consent to recurring billing.
|
||||
|
||||
Recommended trust-preserving alternative: keep the strongest launch tutorials free permanently and monetize new advanced workflows and files. This is an option for Ahmed to choose, not an assumed change to his requested VIP plan.
|
||||
|
||||
## 4. P0 blockers for the free launch
|
||||
|
||||
### L-01 — Replace premature paid messaging
|
||||
|
||||
**Owner:** developer + Ahmed. **Evidence:** /subscription, homepage membership section and VIP CTAs currently promise purchasing through Stripe.
|
||||
|
||||
**Change:** Replace purchase CTAs across home, membership, cards, article gates, menus and account pages. Retain /subscription URL but present early-access status and an optional, functional notification signup. Disable checkout initiation server-side as well as hiding buttons. Never publish a fake working purchase flow.
|
||||
|
||||
Suggested Arabic copy:
|
||||
|
||||
> وصول مبكر مجاني
|
||||
>
|
||||
> يمكنك قراءة المحتوى المنشور خلال فترة الوصول المبكر دون بطاقة دفع. نراجع إطلاق العضوية بعد نحو أسبوعين، وقد تمتد الفترة إذا لم تكتمل خدمة الدفع. بعض المواد محددة للعضوية مستقبلاً، وسنوضح ذلك قبل تفعيلها. لن يتم إنشاء اشتراك أو تحصيل مبلغ تلقائياً.
|
||||
|
||||
For an intended-VIP post:
|
||||
|
||||
> متاح مجاناً خلال الوصول المبكر. هذا المحتوى مخصص للعضوية لاحقاً؛ سنعلن موعد التفعيل قبل تغيير الوصول.
|
||||
|
||||
Use only when this is the actual implemented access policy. Do not put an unapproved fixed end date in the UI. Remove '$10 subscribe now' and completed-payment claims until payment is genuinely enabled. A future-price preview, if retained, must be labeled not currently purchasable and subject to owner confirmation.
|
||||
|
||||
**Acceptance:** Search all rendered templates and emails for obsolete purchase claims; direct checkout calls fail safely with an explicit unavailable response; no card data is requested; /subscription remains a useful page rather than 404.
|
||||
|
||||
### L-02 — Implement consistent launch-free access
|
||||
|
||||
**Owner:** backend developer. **Evidence:** six posts currently show public membership previews; desired open period is new policy.
|
||||
|
||||
**Change:** One server-side policy function controls article bodies and downloads. It checks publication/review status, actual launch mode, intended tier, and valid entitlement when paid mode is eventually enabled. Frontend labels consume the same effective-access decision.
|
||||
|
||||
**Acceptance:** Guest can read every approved launch-open post from its canonical URL, library and related links. Approved downloads work. Draft/private/unreviewed posts remain inaccessible. Original intended tier survives opening and rollback. Repeated config changes are idempotent. Date expiry alone cannot activate a paywall.
|
||||
|
||||
### L-03 — Finalize free-launch terms and privacy
|
||||
|
||||
**Owner:** Ahmed + qualified reviewer + developer. **Evidence:** /terms and /privacy are publicly marked drafts with unfinished instructions.
|
||||
|
||||
**Change:** Document the actual free service, content license, whether future VIP materials are temporary-access, contact channel, real data collection, providers, retention, deletion process and effective date. Distinguish operational email from optional marketing. Remove paid billing provisions that do not apply now or label future features accurately. Do not invent legal entity, governing law, retention duration or compliance claims.
|
||||
|
||||
**Acceptance:** Final pages contain facts approved by the operator, no editorial TODO instructions, and a real effective date. Their account and analytics descriptions match the deployed behavior. If analytics requires consent in the applicable context, blocking and withdrawal work. Legal text is professionally reviewed as appropriate; this document is not legal advice.
|
||||
|
||||
### L-04 — Test the complete reading and download journey
|
||||
|
||||
**Owner:** QA/developer. **Status:** unverified, not a known failure.
|
||||
|
||||
**Change:** Test home → library → each launch article → approved file download on desktop and mobile, including Safari and Telegram in-app browser. Check filters, navigation, pagination if any, table/code readability, Arabic text mixed with English commands, and contact links.
|
||||
|
||||
**Acceptance:** No placeholder/empty files; names and contents match promises; links and images resolve; keyboard controls and labels work; no horizontal page overflow. Code blocks may scroll independently. For meaningful diagrams use descriptive alt; decorative card covers may have empty alt. Store a browser/version test log and example screenshots.
|
||||
|
||||
### L-05 — Protect private notes and publishing permissions
|
||||
|
||||
**Owner:** developer + editorial operator. **Status:** new requirement for the publishing pipeline, not an observed leak.
|
||||
|
||||
**Change:** Separate public artifacts from AppFlowy/Obsidian sources. Restrict the agent to explicitly approved notes and CMS permissions. Scan text, images and downloads for credentials, private URLs, customer data, internal names and unlicensed assets. Sanitize Markdown/HTML, block executable content and unsafe URLs.
|
||||
|
||||
**Acceptance:** Deliberately seeded private markers in test inputs never reach public output. Source notes remain unchanged. An agent cannot publish another author's private note, alter a tier, modify billing, or inject unsafe HTML. Logs contain identifiers and outcomes rather than secrets/full private source text.
|
||||
|
||||
### L-06 — Reliable feedback, monitoring and rollback
|
||||
|
||||
**Owner:** developer + operator. **Status:** unverified.
|
||||
|
||||
**Change:** Ensure at least one monitored support/feedback route works. Add uptime/error visibility, persistence/backups and a tested restore. Test optional signup/reset flows before promoting them; disable unfinished features rather than presenting stubs.
|
||||
|
||||
**Acceptance:** A test feedback request reaches the actual destination and confirmation is truthful. A restore/rollback rehearsal recovers public content and configuration. Transactional notices reach the intended test mailbox without leaking data. Operator and emergency contact are named in the runbook.
|
||||
|
||||
## 5. P1 work during the early-access period
|
||||
|
||||
### L-07 — Content labels and reading estimates
|
||||
|
||||
**Owner:** editorial + developer. Add visible 'ملاحظة تقنية', 'دليل عملي', 'تجربة موثقة' or equivalent content-type labels. Compute reading estimate from article body using a configurable rate validated with Arabic readers; exclude navigation/comments and treat exercise time separately. Do not force a minimum long reading time.
|
||||
|
||||
**Acceptance:** Short notes are labeled honestly; tutorials show prerequisites and usable steps. The first-agent and RAG labels/estimates match actual content. No arbitrary padding to increase word count.
|
||||
|
||||
### L-08 — Metadata and domain hygiene
|
||||
|
||||
**Owner:** developer + editorial. Write individual descriptions for home/library/early-access/about. Improve discoverability-oriented titles without adding unsupported topics. Review noindex for login/signup, remove utility pages from sitemap, retain crawl visibility so noindex can be read. Permanently redirect www to apex while preserving path/query. Test nonexisting paths remain 404 and HTTPS canonical consistency.
|
||||
|
||||
**Acceptance:** Public posts remain indexable, private/draft pages do not enter sitemap, sitemap URLs return canonical 200s, metadata matches actual article and access status. Never ship staging noindex to public content.
|
||||
|
||||
### L-09 — Author, evidence and structured data
|
||||
|
||||
**Owner:** editorial + developer. Display real author/reviewer and sources. Enhance Article/BlogPosting fields with author profile, image, dates and canonical identity where correct. Do not invent credentials, reviews or performance data. Validate initial and rendered markup with suitable validators. Preserve existing useful schema.
|
||||
|
||||
**Acceptance:** Visible author and schema agree. Update date reflects real substantive updates. Early-access availability and future paywall fields match actual current access; no false paid Offer while billing is off. Validators report understood results; no promise of a special Google AI ranking boost.
|
||||
|
||||
### L-10 — Publishing workflow and deduplication
|
||||
|
||||
**Owner:** developer + editorial. Implement the companion agent prompt. Map proposed metadata to real CMS fields, create drafts first, review evidence and redactions, approve a specific revision, then publish and read it back. Use stable source IDs plus revision/hash to prevent duplicate posts; existing slugs should not change silently.
|
||||
|
||||
**Acceptance:** Same source retried produces no duplicate. Missing-source and failed-test inputs stop safely. Live output is verified against the approved draft. Retries after an ambiguous publish first search/read the expected record. Previous revisions can be restored. No note is marked published until verification succeeds.
|
||||
|
||||
### L-11 — Measure the launch
|
||||
|
||||
**Owner:** operator + developer. Configure privacy-respecting analytics and search ownership. Suggested events: article_view, meaningful_read, download_success, signup_confirmed, notification_opt_in_confirmed, feedback_received. Fire confirmations on real success, not button clicks. Define meaningful_read rather than using a page-open event as consumption.
|
||||
|
||||
**Acceptance:** Test event evidence exists, duplicate analytics installation is avoided, consent is respected, no source notes/emails/credentials appear in event parameters. Verify sitemap and priority URL inspection in Search Console; a search-tool miss is not proof of nonindexation.
|
||||
|
||||
### L-12 — Content and launch distribution
|
||||
|
||||
**Owner:** Ahmed/editorial. Select an initial set of useful notes and at least one demonstrated implementation if advertised as an implementation library. Publish a specific n8n guide only when an approved working example exists. Keep related links useful; differentiate overlapping beginner posts.
|
||||
|
||||
Use the launch skill's owned/rented/borrowed channel mix proportionally:
|
||||
- Owned: website and opt-in email updates.
|
||||
- Rented: one LinkedIn announcement and a real demonstration where the audience is present.
|
||||
- Borrowed: ask relevant collaborators for feedback/share only with permission.
|
||||
|
||||
**Acceptance:** Announcement links to an actually accessible post, accurately states free early access, makes no fabricated testimonial or availability claim, and has a monitored feedback path. Product Hunt, affiliate programs and paid ads are optional, not prerequisites for this content launch.
|
||||
|
||||
## 6. Stripe/VIP gate — required only before paid launch
|
||||
|
||||
Do not block the initial free reading experience on these. Do block purchases and paid enforcement until complete.
|
||||
|
||||
### S-01 — Business and account readiness
|
||||
|
||||
Operator checks actual Stripe entity eligibility, verification, settlement/payout setup and enabled capabilities for the business jurisdiction. Do not assume an account is eligible because customers are Saudi or a domain is .sa. No workaround through an unsupported entity. Resolve applicable billing/tax requirements with qualified advice. Do not promise a completion timeline based on this document.
|
||||
|
||||
### S-02 — Product, price and checkout
|
||||
|
||||
Create/verify the approved subscription product and immutable price reference in the correct environment. Confirm currency, monthly interval, actual amount, tax treatment and displayed totals. Use a hosted Checkout subscription flow rather than handling raw card details. Server selects the allowed price, amount and user; reject client-supplied substitutions. Map customer/subscription to the authenticated app user using trusted server-side data.
|
||||
|
||||
**Tests:** correct plan, tampered price, wrong customer, repeated checkout, cancelled checkout, authentication-required payment and declined payment. Returning to a success URL never grants VIP by itself. Early free access is not retroactively billed.
|
||||
|
||||
### S-03 — Verified webhook processing
|
||||
|
||||
Use official signature verification with the raw body and the proper environment-specific signing secret. Persist event IDs, process duplicates safely and reconcile subscription state instead of assuming delivery order. Durably record/enqueue work before acknowledging; maintain retry/dead-letter visibility. Use narrowly selected relevant events such as checkout completion, invoice paid/payment failure and subscription changes/end as required by the chosen integration; account for delayed payment methods if enabled.
|
||||
|
||||
**Tests:** invalid signature, duplicate delivery, out-of-order event, network interruption, delayed event, update/cancellation and recovery. A duplicate event neither duplicates entitlements nor creates additional charges. Test mode never activates production VIP rights.
|
||||
|
||||
### S-04 — Server-side entitlements and lifecycle policy
|
||||
|
||||
Define explicit access rules for active, incomplete, unpaid, past-due, canceled and any genuinely supported trial states. Document grace periods; do not invent one silently. Maintain paid-through timestamps and cancellation-at-period-end behavior consistent with promises. Reconcile against Stripe after missed events; do not revoke valid existing access merely because of a transient retrieval error. New unverifiable purchases stay pending and are not granted based on UI redirects.
|
||||
|
||||
**Tests:** paid user receives correct access; nonpayer cannot gain VIP by changing frontend storage; scheduled cancellation retains access through paid end and expires correctly; renewal extends once; failed renewal follows the approved policy; reversal/refund/dispute handling matches business policy.
|
||||
|
||||
### S-05 — Prevent full-content leaks
|
||||
|
||||
Paid gating must exclude restricted bodies/assets for unauthorized users from server HTML, page hydration/RSC payloads, APIs, GraphQL/REST responses, RSS/search feeds, public files, alternate Markdown and optional llms exports. Do not send full bodies and blur/hide them with CSS. Protect VIP downloads server-side and use scoped delivery where needed.
|
||||
|
||||
Separate guest/free/member caching; invalidate public copies of newly restricted content when switching. Previously public copies on third-party caches cannot be fully recalled.
|
||||
|
||||
**Tests:** guest/free user sees a useful public intro but never the restricted payload; valid member can read/download; expired member is denied; direct asset/API attempts do not bypass checks. If a crawler sampling policy is used, follow applicable search guidance without returning special promotional content or disabling authentication for arbitrary bot strings.
|
||||
|
||||
### S-06 — Customer self-service and notices
|
||||
|
||||
Provide a tested billing-management path for invoices, payment-method updates and cancellation. The app must generate a portal session for the logged-in user's own customer, not arbitrary IDs. Verify actual supported portal language; do not promise Arabic availability without testing. Keep Arabic app guidance around an English portal if needed. Confirm receipt/support contacts, statement details, renewal/cancellation notices and refund policy.
|
||||
|
||||
### S-07 — Sandbox acceptance and production preparation
|
||||
|
||||
Use Stripe sandbox/test resources and official test methods for success, failures, authentication, renewals and time-based lifecycle scenarios. Do not use real card data or arbitrary real purchases for testing. Record environment, SDK/API versions, relevant object/event IDs, expected result, actual result and pass/fail, with secrets removed. Test signing-secret rotation and failure visibility. Production keys and price IDs are stored securely and never inserted into source notes, prompts or repositories.
|
||||
|
||||
### S-08 — Owner-approved transition and rollback
|
||||
|
||||
Before switch, take an access/content snapshot, confirm notification copy and approve a list of specific intended-VIP posts/assets. Keep canonical URLs; retain public introductions and meaningful metadata. Synchronize all counters, cards, comparison tables and policies. Invalidate relevant caches and verify guest/member journeys immediately.
|
||||
|
||||
Rollback should disable new purchases and revert the faulty restriction configuration without deleting Stripe records, canceling paid customers or erasing paid entitlements. Repair paid readers' access quickly and reconcile outstanding events. A kill switch is not authorization to give all private content away.
|
||||
|
||||
## 7. Approximate two-week operating plan
|
||||
|
||||
Relative timing only; actual launch date is not yet set.
|
||||
|
||||
- Before day 1: close L-01 through L-06, approve content/access labels, and complete the free-launch QA gate.
|
||||
- First few days: publish one useful launch post, invite a small set of readers, gather specific feedback, fix broken journeys before wider announcement.
|
||||
- First week: ship reviewed notes and at least one evidence-backed implementation if available; correct metadata/reading estimates; test notifications and source pipeline.
|
||||
- Second week: review read/download/feedback evidence, publish improvements, and complete Stripe sandbox work in parallel.
|
||||
- Around the two-week checkpoint: inspect the free experience and Stripe/VIP test matrix. Either extend early access honestly or schedule an owner-approved paid transition. Do not activate gating solely because a calendar timer expired.
|
||||
|
||||
No automatic schedule or campaign was created by this document.
|
||||
|
||||
## 8. Developer signoff checklist
|
||||
|
||||
### Free launch GO only when
|
||||
|
||||
- [ ] L-01: paid claims and backend purchase paths are disabled consistently.
|
||||
- [ ] L-02: all approved launch-open content/assets work for intended readers; private content stays private.
|
||||
- [ ] L-03: real free-launch terms/privacy/access expectations are approved and published.
|
||||
- [ ] L-04: desktop/mobile/in-app reading and download QA passes.
|
||||
- [ ] L-05: note redaction, safe rendering and agent permissions pass negative tests.
|
||||
- [ ] L-06: feedback, monitoring, backup/restore and rollback work.
|
||||
- [ ] Ahmed approves the precise launch-open set and announcement.
|
||||
|
||||
### Paid launch GO only when
|
||||
|
||||
- [ ] S-01 to S-08 pass with recorded evidence.
|
||||
- [ ] Actual billing currency, amount, tax and refund handling are approved.
|
||||
- [ ] Guest, free, active member and expired member access matrices pass.
|
||||
- [ ] No restricted data appears in anonymous responses/feeds/assets/caches.
|
||||
- [ ] Readers receive honest notice of the transition and no automatic charge.
|
||||
- [ ] Ahmed signs off the transition; operator and rollback owner are assigned.
|
||||
|
||||
For each item record: ticket ID; assignee; environment; PR/deployment ID; test steps; expected/actual result; evidence link; status; remaining risk; reviewer. A checkbox without evidence is not release verification.
|
||||
|
||||
## 9. Decisions Ahmed/developer must settle
|
||||
|
||||
1. Which existing intended-VIP posts/assets are temporarily opened? Recommended: approved published VIP materials only, not raw notes or drafts.
|
||||
2. Which launch tutorials remain permanently free? Recommended: retain core introductory tutorials for discovery.
|
||||
3. What must require an account? Recommended: guest reading; account only for tested save/comment functions.
|
||||
4. Is an email-update feature ready? If not, omit the CTA rather than deploying a fake signup.
|
||||
5. What notice period will be used before restricting temporary VIP early-access materials? Agree and implement; no arbitrary period is treated as approved here.
|
||||
6. Who approves posts and launch switches? Until explicitly delegated, human approval is required for a specific article revision and for paid-mode changes.
|
||||
7. What are the actual retention periods, providers, legal entity and billing jurisdiction? Operator supplies facts; the agent must not invent them.
|
||||
|
||||
## 10. Reference links
|
||||
|
||||
Website evidence:
|
||||
- https://anwarpy.ai/
|
||||
- https://anwarpy.ai/articles
|
||||
- https://anwarpy.ai/subscription
|
||||
- https://anwarpy.ai/terms
|
||||
- https://anwarpy.ai/privacy
|
||||
- https://anwarpy.ai/posts/first-arabic-agent
|
||||
- https://anwarpy.ai/posts/simple-arabic-rag
|
||||
- https://anwarpy.ai/posts/dograh-voice-agent-evaluation
|
||||
- https://anwarpy.ai/sitemap.xml
|
||||
- https://anwarpy.ai/robots.txt
|
||||
|
||||
Stripe primary guidance consulted:
|
||||
- https://docs.stripe.com/billing/subscriptions/webhooks
|
||||
- https://docs.stripe.com/webhooks
|
||||
- https://docs.stripe.com/testing
|
||||
- https://docs.stripe.com/customer-management
|
||||
|
||||
Companion document: anwarpy-blog-publishing-agent-prompt.md. The prompt controls content generation and approval, not billing activation.
|
||||
|
||||
## ملخص عربي
|
||||
|
||||
الإطلاق المدفوع غير جاهز الآن لأن ربط Stripe لم يكتمل. يمكن إطلاق قراءة مجانية مبكرة بعد إصلاح رسائل الاشتراك والسياسات، وفتح المواد المعتمدة فقط، واختبار القراءة والتنزيل وحماية الملاحظات الخاصة. الأسبوعان نقطة مراجعة وليسا موعد حجب تلقائي. الملاحظات القصيرة مقبولة إذا سُمّيت ملاحظات وكان وقت القراءة صادقاً. لا تتحول المواد إلى VIP إلا بعد نجاح اختبارات الدفع والصلاحيات وإبلاغ القراء وموافقة أحمد، ولا يُنشأ اشتراك أو يُحصّل مبلغ تلقائياً.
|
||||
|
||||
---
|
||||
|
||||
## 11. Evidence — free-launch items executed 2026-10-10
|
||||
|
||||
Launch implemented on branch `launch/early-access-2026-10-10` (step references = execution plan). `LAUNCH_MODE=free_early_access` is the compose default; billing stays off until owner approval. Per the checklist rule, a checkbox without evidence is not verification — prod-verify items below are re-checked at step 48 and the lines updated.
|
||||
|
||||
- **L-01 (paid claims off)** — Steps 8–11, 21, 22: `/subscription` shows an early-access panel + working notify form; all subscribe CTAs render a disabled «قريباً» button when billing is off (`subscribe-button.tsx` comingSoon prop); `POST /api/subscribe` returns 503 server-side with the exact Arabic error; home membership copy swept for purchase claims. **Prod-verified 2026-10-10: `POST https://anwarpy.ai/api/subscribe` → `503 {"error":"الدفع غير مفعّل خلال فترة الوصول المبكر."}`.**
|
||||
- **L-02 (launch-free access policy)** — Steps 1–6: `src/lib/launch.ts` policy (`LAUNCH_MODE`, fail-safe default = free early access, no date expiry), field-level `content` read ACL in `Posts.ts` (public iff `status=published && (access=free || early)`) — same decision consumed by pages, `/api/posts/[slug]`, file gate, and llms-full. Intended tier (`access`) never rewritten. **Prod-verified: ghost-read of intended-VIP `/posts/agent-loop-stop-condition` serves the full body + early-access notice, zero paywall markers, `isAccessibleForFree: true`.**
|
||||
- **L-03 (terms/privacy)** — **NOT DONE — owner facts pending.** `docs/launch/owner-inputs-terms-privacy.md` lists exactly what Ahmed must supply; `/terms` and `/privacy` untouched until then.
|
||||
- **L-04 (reading/download QA)** — Step 45 local smoke + step 48 prod QA at HTTP level (home → library → topic hub → article; reading time «دقيقتان», no horizontal-marker regressions observed in markup). Safari and Telegram in-app browsers are owner-manual tests. A full visual browser pass remains open.
|
||||
- **L-05 (private notes / pipeline permissions)** — Steps 28–30: agent API strips `access`/`readingMinutes` from accepted fields; `sourceId` dedup returns the existing post (no duplicate); `scanForSecrets` 422s payloads matching AWS AKIA / PEM / sk- / ghp_ / generic-credential patterns (pattern names only in the response); publish stays an explicit opt-in and PUT cannot set `status`. **Post-copy fixes found in smoke, included in the merged commit:** `lexicalToText`/`countLexicalWords` never unwrapped the Lexical `root` (scan was inert on real content — fixed + verified 422), string `content` was silently replaced with a placeholder (now 400), and llms-full never requested `content` (`fetchIndexDocs(true)` — prod llms-full now 49 KB with bodies).
|
||||
- **L-06 (feedback, backup, rollback)** — Step 40: `scripts/backup-db.sh` + restore rehearsal on the VPS (2026-10-10): `pg_dump` → gzip 25K, restored into `anwarpi_restore_test` with 0 SQL errors, counts `posts=15, users=6, payload_migrations=6`, temp DB dropped. Feedback: footer `mailto:hello@anwarpy.ai` (opens the visitor's mail client; no server dependency). Production mail transport test via the same Cloudflare Email Sending REST call the app uses → `10203 email.sending_disabled` — **the account feature is off; transactional mail (verification, notify confirmations) will honestly report failure until the owner enables Email Sending** (prod `/api/notify` honestly 503s and still records the row). Monitoring/uptime tooling: owner decision, recorded not built.
|
||||
- **L-07 (labels + reading estimates)** — Steps 24–26: `contentType` badge, `authorName` byline, «حُدّث» freshness line; `readingMinutes` computed at write time via `countLexicalWords`/`READING_WORDS_PER_MINUTE` (160 wpm). **Prod backfill run 2026-10-10 (local tsx over an SSH tunnel to the prod DB — the standalone container has no `scripts/`): 15 scanned, 15 updated** (old estimates were inflated: 18→2, 12→2, 10→1, …).
|
||||
- **L-08 (metadata/domain hygiene)** — Steps 32, 37, 38, 39: Arabic descriptions on articles/subscription/about; sitemap gains `/topics/*` and drops `/login`,`/signup`; those pages (plus forgot-password) are `robots: noindex, follow`; Traefik `anwarpi-www` router permanently redirects `https://www.anwarpy.ai/*` → apex preserving path (prod-verified: `HTTP/2 308`, `location: https://anwarpy.ai/posts`). Sitemap prod-verified: 4 `/topics/*`, no `/login`,`/signup`. og:image 1200×630 + og:site_name present on articles.
|
||||
- **L-09 (author/evidence/structured data)** — Step 33: Article JSON-LD with `image`, `dateModified`, `description`, `mainEntityOfPage`, publisher logo, `author` = Person (authorName) or Organization; `isAccessibleForFree` = actual current access (never a false paid Offer while billing is off); BreadcrumbList (home → topic hub → post); FAQPage on `/subscription`; Organization on home. Visible byline and schema share the same fields.
|
||||
- **L-10 (publishing workflow/dedup)** — Steps 24, 28–31: agent creates drafts (`status` forced draft unless `publish: true`), `sourceId` unique-ish dedup before slug-409, secret scan on POST/PUT.
|
||||
- **L-11 (measurement)** — **NOT BUILT — owner decision** (analytics vendor; recorded only). Suggested events remain in the checklist.
|
||||
- **L-12 (content/distribution)** — **Owner/editorial.** No announcement drafted or sent by the agent.
|
||||
|
||||
### Prod verification 2026-10-10 (post-deploy)
|
||||
|
||||
Deployed to `root@147.79.102.201:/root/anwarpi` via rsync + `docker compose -f docker-compose.vps.yml up -d --build`; boot applied migration `20261010_142214`; `LAUNCH_MODE=free_early_access` set in `.env.production`. Verified live: home/admin 200; ghost VIP read full-body; subscribe 503 honest; notify honest-503 + row persisted (row deleted after); signup 201 + `verification_token` written (row deleted after); robots lists the 10 named AI crawlers; `/llms.txt` + `/llms-full.txt` (49 KB, bodies); `/topics/agents` 200; sitemap 4 topics, no auth pages; www 308 → apex; Article + BreadcrumbList JSON-LD; reading minutes honest («دقيقتان»). PR #3 merged to `main` (638a590).
|
||||
@@ -1,27 +0,0 @@
|
||||
# Owner inputs required for L-03 — /terms and /privacy
|
||||
|
||||
Ahmed must supply the facts below before `/terms` or `/privacy` are edited. The agent will not invent any of them (checklist §9.7). Once provided, the pages get real text, an effective date, and go into the launch checklist evidence.
|
||||
|
||||
## Legal facts (checklist L-03 + §9)
|
||||
|
||||
1. **Legal entity** — registered company name and form, or an explicit statement that the site is operated as a sole proprietorship (and under what name).
|
||||
2. **Governing law / jurisdiction** — the law that governs the terms and the courts or venue for disputes.
|
||||
3. **Retention periods per data type** — accounts and hashed passwords, verification/reset tokens, comments, saved posts, launch-notification emails, server logs. Include "until account deletion" where that is the real answer.
|
||||
4. **Full provider list** — as currently known: Cloudflare (DNS/proxy, Email Routing + Email Sending), VPS host for 147.79.102.201, Postgres (self-hosted on that VPS). Confirm or correct; note anything that processes personal data outside these.
|
||||
5. **Data-deletion process** — how a user requests deletion (email address or in-app), what is deleted vs retained, and the timeframe.
|
||||
6. **Contact channel** — the address that appears in the pages and must actually reach Ahmed (currently the footer `mailto:hello@anwarpy.ai`).
|
||||
7. **Effective date** — the date the final terms/privacy go live (this becomes the published "آخر تحديث").
|
||||
|
||||
## Checklist §9 decisions (needed to finalize the same pages)
|
||||
|
||||
1. Which existing intended-VIP posts/assets are temporarily opened? (Recommended: approved published VIP materials only.)
|
||||
2. Which launch tutorials remain permanently free? (Recommended: core introductory tutorials.)
|
||||
3. What requires an account? (Recommended: guest reading; account only for save/comment.)
|
||||
4. Is an email-update feature ready? (The notify list exists; confirm it may be advertised.)
|
||||
5. Notice period before restricting temporary VIP early-access materials.
|
||||
6. Who approves posts and launch switches (Ahmed until delegated)?
|
||||
7. Actual retention periods, providers, legal entity and billing jurisdiction (see items 1–7 above).
|
||||
|
||||
## Operational blocker found 2026-10-10 (also affects the pages' email claims)
|
||||
|
||||
Cloudflare Email Sending is **disabled** on the account (API test returned `10203 email.sending_disabled`). Before any page or flow promises email delivery: enable Email Sending in the Cloudflare dashboard (Account → Email), then re-test the transport. The footer mailto link is unaffected (it opens the visitor's own mail client).
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
+1
-1
@@ -25,7 +25,7 @@
|
||||
<header class="topnav" data-od-id="topnav"><div class="container nav-inner"><a class="logo" href="arabic-ai-learning-catalog.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><div class="nav-tools"><a class="nav-return" href="arabic-ai-learning-catalog.html">العودة إلى المكتبة</a><button class="icon-btn" id="menuTrigger" aria-label="فتح القائمة" aria-expanded="false" aria-controls="siteMenu" data-od-id="menu-button">☰</button></div></div></header>
|
||||
<main class="auth">
|
||||
<section class="auth-story" data-od-id="login-story"><div><p class="eyebrow">مساحتك في أنور بي آي</p><h1 data-od-id="login-story-title">أكمل من حيث توقفت.</h1><p>احفظ أدلتك، تابع مسارات الفيديو، وارجع إلى ملاحظاتك من أي جهاز.</p><ul class="story-list"><li><span>المقالات المحفوظة</span><span class="story-mark">مرتبّة</span></li><li><span>تقدّم المسارات</span><span class="story-mark">متزامن</span></li><li><span>ملفات العضوية</span><span class="story-mark">جاهزة</span></li></ul></div><p class="story-foot">العربية أولاً · خصوصيتك محفوظة</p></section>
|
||||
<section class="auth-form-wrap" data-od-id="login-form-section"><form class="auth-form" id="loginForm" novalidate data-od-id="login-form"><p class="eyebrow">أهلاً بعودتك</p><h2 data-od-id="login-title">تسجيل الدخول</h2><p class="lead">استخدم بريدك وكلمة المرور للوصول إلى حسابك.</p><div class="field"><label for="email">البريد الإلكتروني</label><input class="input" id="email" name="email" type="email" inputmode="email" autocomplete="email" placeholder="name@example.com" dir="ltr" required /></div><div class="field"><label for="password">كلمة المرور</label><div class="input-wrap"><input class="input" id="password" name="password" type="password" autocomplete="current-password" minlength="8" required /><button class="password-toggle" id="passwordToggle" type="button" aria-controls="password">إظهار</button></div></div><div class="form-row"><label class="check"><input type="checkbox" name="remember" /> تذكّرني</label><a href="forgot-password.html">نسيت كلمة المرور؟</a></div><button class="btn btn-primary" type="submit">ادخل إلى حسابك</button><div class="status" id="loginStatus" role="status"></div><div class="divider">أو</div><button class="magic" id="magicLink" type="button">أرسل رابط دخول إلى بريدي</button><p class="signup">ليس لديك حساب؟ <a href="signup.html">أنشئ حساباً جديداً</a></p><p class="fine">بالمتابعة، أنت توافق على شروط الاستخدام و<a href="privacy.html">سياسة الخصوصية</a>.</p></form></section>
|
||||
<section class="auth-form-wrap" data-od-id="login-form-section"><form class="auth-form" id="loginForm" novalidate data-od-id="login-form"><p class="eyebrow">أهلاً بعودتك</p><h2 data-od-id="login-title">تسجيل الدخول</h2><p class="lead">استخدم بريدك وكلمة المرور للوصول إلى حسابك.</p><div class="field"><label for="email">البريد الإلكتروني</label><input class="input" id="email" name="email" type="email" inputmode="email" autocomplete="email" placeholder="name@example.com" dir="ltr" required /></div><div class="field"><label for="password">كلمة المرور</label><div class="input-wrap"><input class="input" id="password" name="password" type="password" autocomplete="current-password" minlength="8" required /><button class="password-toggle" id="passwordToggle" type="button" aria-controls="password">إظهار</button></div></div><div class="form-row"><label class="check"><input type="checkbox" name="remember" /> تذكّرني</label><a href="forgot-password.html">نسيت كلمة المرور؟</a></div><button class="btn btn-primary" type="submit">ادخل إلى حسابك</button><div class="status" id="loginStatus" role="status"></div><div class="divider">أو</div><button class="magic" id="magicLink" type="button">أرسل رابط دخول إلى بريدي</button><p class="signup">ليس لديك حساب؟ <a href="subscription.html">اكتشف العضوية</a></p><p class="fine">بالمتابعة، أنت توافق على شروط الاستخدام و<a href="privacy.html">سياسة الخصوصية</a>.</p></form></section>
|
||||
</main>
|
||||
<aside class="menu-panel" id="siteMenu" aria-hidden="true" data-od-id="site-menu"><button class="menu-scrim" type="button" aria-label="إغلاق القائمة" data-menu-close></button><div class="menu-drawer" role="dialog" aria-modal="true" aria-label="قائمة أنور بي آي"><div class="menu-head"><a class="logo" href="arabic-ai-learning-catalog.html"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352">أنور بي آي</a><button class="icon-btn" type="button" aria-label="إغلاق القائمة" data-menu-close>×</button></div><nav class="menu-links"><a href="arabic-ai-learning-catalog.html#catalog">المكتبة <span>←</span></a><a href="article-agent-guide.html">مقال الأسبوع <span>←</span></a><a href="subscription.html">العضوية والأسعار <span>←</span></a></nav><div class="menu-foot"><p>محتوى عربي عملي، بلا ضجيج.</p></div></div></aside>
|
||||
<script>
|
||||
|
||||
-87
@@ -1,87 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'" />
|
||||
<meta name="description" content="إنشاء حساب جديد في أنور بي آي." />
|
||||
<title>إنشاء حساب — أنور بي آي</title>
|
||||
<style>
|
||||
:root{--bg:oklch(16% .03 225);--surface:oklch(22% .04 220);--fg:oklch(96% .015 210);--muted:oklch(74% .03 215);--border:oklch(36% .05 215);--accent:oklch(78% .17 190);--accent-soft:color-mix(in oklch,var(--accent) 12%,transparent);--fg-soft:color-mix(in oklch,var(--fg) 6%,transparent);--font-display:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,monospace;--container:1180px;--gutter:32px}
|
||||
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body);text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border)}.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}
|
||||
.auth{min-height:calc(100vh - 70px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auth>*{min-width:0}.auth-story{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)));padding-inline-end:clamp(48px,8vw,100px);background:var(--fg);color:var(--surface);display:flex;flex-direction:column;justify-content:space-between}.eyebrow{font:11px/1.5 var(--font-mono);letter-spacing:0;color:var(--accent);margin:0 0 20px}.auth-story .eyebrow{color:var(--surface);opacity:.78}.auth-story h1{font-size:clamp(46px,6vw,82px);line-height:1.08;letter-spacing:-.025em;max-width:10ch;margin:0}.auth-story>div>p{color:color-mix(in oklch,var(--surface) 78%,transparent);font-size:19px;max-width:40ch}.story-list{list-style:none;margin:54px 0 0;padding:0;border-top:1px solid color-mix(in oklch,var(--surface) 32%,transparent)}.story-list li{padding:15px 0;border-bottom:1px solid color-mix(in oklch,var(--surface) 22%,transparent);display:flex;justify-content:space-between;gap:20px}.story-mark{font:12px/1.5 var(--font-mono);opacity:.74}.story-foot{font-size:13px;color:color-mix(in oklch,var(--surface) 72%,transparent)}
|
||||
.auth-form-wrap{padding:clamp(46px,7vw,88px) max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)));padding-inline-start:clamp(48px,8vw,100px);display:flex;align-items:center}.auth-form{width:min(440px,100%)}.auth-form h2{font-size:clamp(38px,4vw,54px);line-height:1.15;margin:0}.lead{color:var(--muted);font-size:18px;margin:12px 0 28px}.field{display:grid;gap:7px;margin-top:16px}.field label{font-size:13px;color:var(--muted)}.input-wrap{position:relative}.input{width:100%;min-height:52px;border:1px solid color-mix(in oklch,var(--border) 72%,var(--fg));background:var(--surface);color:var(--fg);padding:13px 14px;border-radius:0}.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.password-toggle{position:absolute;inset-inline-end:6px;top:6px;min-width:70px;height:40px;border:0;background:transparent;color:var(--muted)}.password-toggle:hover{color:var(--fg);background:var(--fg-soft)}.check{display:flex;align-items:flex-start;gap:10px;margin:20px 0}.check input{margin-top:6px;flex:none}.check a{text-decoration:underline;text-underline-offset:3px}.check a:hover{color:var(--accent)}.btn{min-height:52px;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid transparent;font-weight:700}.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--bg)}.signin{text-align:center;color:var(--muted);font-size:14px;margin-top:22px}.signin a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}.signin a:hover{color:var(--accent)}.fine{font-size:12px;color:var(--muted);margin-top:14px}.status{min-height:28px;margin-top:12px;color:var(--accent);font-size:13px}
|
||||
@media(max-width:920px){:root{--gutter:22px}.auth{grid-template-columns:1fr}.auth-story{min-height:390px;padding:58px var(--gutter)}.auth-form-wrap{padding:58px var(--gutter);justify-content:center}.story-foot{margin-top:48px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-inner{gap:12px}.nav-return{font-size:13px}.auth-story{min-height:auto}.auth-story h1{font-size:46px}.auth-form-wrap{padding-block:46px}.story-list{margin-top:38px}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="assets/anwarpi.css?v=5" />
|
||||
<script src="assets/anwarpi.js?v=4" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topnav" data-od-id="topnav">
|
||||
<div class="container nav-inner">
|
||||
<a class="logo" href="arabic-ai-learning-catalog.html" data-od-id="brand"><img class="logo-mark" src="assets/anwarpi-logo.jpg" alt="" width="1200" height="1352" />أنور بي آي</a>
|
||||
<a class="nav-return" href="login.html" data-od-id="login-link">لديك حساب؟ سجّل الدخول</a>
|
||||
</div>
|
||||
</header>
|
||||
<main class="auth">
|
||||
<section class="auth-story" data-od-id="signup-story">
|
||||
<div>
|
||||
<p class="eyebrow">ابدأ مسارك</p>
|
||||
<h1 data-od-id="signup-story-title">ابنِ معرفتك، خطوة بخطوة.</h1>
|
||||
<p>أنشئ حساباً لحفظ المقالات ومتابعة تقدّمك والوصول إلى مزايا العضوية من أي جهاز.</p>
|
||||
<ul class="story-list">
|
||||
<li><span>مكتبتك الشخصية</span><span class="story-mark">محفوظة</span></li>
|
||||
<li><span>تقدّم المسارات</span><span class="story-mark">متزامن</span></li>
|
||||
<li><span>إعدادات واضحة</span><span class="story-mark">تحت سيطرتك</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="story-foot">العربية أولاً · خصوصيتك محفوظة</p>
|
||||
</section>
|
||||
<section class="auth-form-wrap" data-od-id="signup-form-section">
|
||||
<form class="auth-form" id="signupForm" novalidate data-od-id="signup-form">
|
||||
<p class="eyebrow">حساب جديد</p>
|
||||
<h2 data-od-id="signup-title">إنشاء حساب</h2>
|
||||
<p class="lead">أدخل بياناتك الأساسية للبدء.</p>
|
||||
<div class="field"><label for="name">الاسم</label><input class="input" id="name" name="name" type="text" autocomplete="name" minlength="2" required /></div>
|
||||
<div class="field"><label for="email">البريد الإلكتروني</label><input class="input" id="email" name="email" type="email" inputmode="email" autocomplete="email" placeholder="name@example.com" dir="ltr" required /></div>
|
||||
<div class="field"><label for="password">كلمة المرور</label><div class="input-wrap"><input class="input" id="password" name="password" type="password" autocomplete="new-password" minlength="8" aria-describedby="passwordHint" required /><button class="password-toggle" type="button" data-toggle-password="password" aria-controls="password">إظهار</button></div><span class="fine" id="passwordHint">ثمانية أحرف على الأقل.</span></div>
|
||||
<div class="field"><label for="confirmPassword">تأكيد كلمة المرور</label><div class="input-wrap"><input class="input" id="confirmPassword" name="confirmPassword" type="password" autocomplete="new-password" minlength="8" required /><button class="password-toggle" type="button" data-toggle-password="confirmPassword" aria-controls="confirmPassword">إظهار</button></div></div>
|
||||
<label class="check"><input id="terms" name="terms" type="checkbox" required /><span>أوافق على <a href="privacy.html">سياسة الخصوصية</a> وشروط الاستخدام.</span></label>
|
||||
<button class="btn btn-primary" type="submit" data-od-id="create-account-cta">أنشئ حسابي</button>
|
||||
<div class="status" id="signupStatus" role="status" aria-live="polite"></div>
|
||||
<p class="signin">لديك حساب بالفعل؟ <a href="login.html">سجّل الدخول</a></p>
|
||||
<p class="fine">هذه معاينة للواجهة؛ إنشاء الحساب الفعلي يتطلب ربط خدمة مصادقة آمنة.</p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<script>
|
||||
(()=>{
|
||||
const form=document.getElementById('signupForm');
|
||||
const status=document.getElementById('signupStatus');
|
||||
const password=document.getElementById('password');
|
||||
const confirmPassword=document.getElementById('confirmPassword');
|
||||
document.querySelectorAll('[data-toggle-password]').forEach(button=>button.addEventListener('click',()=>{
|
||||
const input=document.getElementById(button.dataset.togglePassword);
|
||||
const show=input.type==='password';
|
||||
input.type=show?'text':'password';
|
||||
button.textContent=show?'إخفاء':'إظهار';
|
||||
}));
|
||||
form.addEventListener('submit',event=>{
|
||||
event.preventDefault();
|
||||
confirmPassword.setCustomValidity(password.value===confirmPassword.value?'':'كلمتا المرور غير متطابقتين.');
|
||||
if(!form.checkValidity()){
|
||||
status.textContent=password.value!==confirmPassword.value?'كلمتا المرور غير متطابقتين.':'تحقق من جميع الحقول المطلوبة.';
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
status.textContent='تم التحقق من النموذج. ربط إنشاء الحساب بالخادم هو الخطوة التالية.';
|
||||
});
|
||||
confirmPassword.addEventListener('input',()=>confirmPassword.setCustomValidity(''));
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,6 @@
|
||||
node_modules/
|
||||
.next/
|
||||
media/
|
||||
files-private/
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
+1
-1
@@ -35,7 +35,7 @@ curl -X POST http://localhost:3000/api/agent/posts \
|
||||
-d '{"title":"...","slug":"my-post","dek":"...","category":"وكلاء","access":"vip","teaser":"...","readingMinutes":8,"content":{"root":{"type":"root","children":[],"format":"","indent":0,"version":1}}}'
|
||||
|
||||
# update (cannot change status)
|
||||
curl -X PUT http://localhost:3000/api/agent/posts/my-post -H "x-agent-key: $AGENT_API_KEY" ...
|
||||
curl -X PATCH http://localhost:3000/api/agent/posts/my-post -H "x-agent-key: $AGENT_API_KEY" ...
|
||||
```
|
||||
|
||||
Omitting `cover` assigns the per-category default cover.
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
services:
|
||||
db:
|
||||
image: postgres:16
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
POSTGRES_USER: anwarpi
|
||||
POSTGRES_PASSWORD: ${DB_PASSWORD}
|
||||
POSTGRES_DB: anwarpi
|
||||
volumes:
|
||||
- db-data:/var/lib/postgresql/data
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U anwarpi -d anwarpi"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 10
|
||||
|
||||
web:
|
||||
build:
|
||||
context: .
|
||||
args:
|
||||
NEXT_PUBLIC_SITE_URL: https://anwarpy.ai
|
||||
restart: unless-stopped
|
||||
expose:
|
||||
- "3000"
|
||||
volumes:
|
||||
- media-uploads:/app/media
|
||||
- files-uploads:/app/files-private
|
||||
environment:
|
||||
DATABASE_URI: postgres://anwarpi:${DB_PASSWORD}@db:5432/anwarpi
|
||||
PAYLOAD_SECRET: ${PAYLOAD_SECRET}
|
||||
AGENT_API_KEY: ${AGENT_API_KEY}
|
||||
NEXT_PUBLIC_SITE_URL: https://anwarpy.ai
|
||||
LAUNCH_MODE: ${LAUNCH_MODE:-free_early_access}
|
||||
CLOUDFLARE_API_TOKEN: ${CLOUDFLARE_API_TOKEN}
|
||||
CLOUDFLARE_ACCOUNT_ID: ${CLOUDFLARE_ACCOUNT_ID}
|
||||
MAIL_FROM: noreply@anwarpy.ai
|
||||
labels:
|
||||
- traefik.enable=true
|
||||
- traefik.http.routers.anwarpi.rule=Host(`anwarpy.ai`)
|
||||
- traefik.http.routers.anwarpi.entrypoints=websecure
|
||||
- traefik.http.routers.anwarpi.tls.certresolver=mytlschallenge
|
||||
- traefik.http.routers.anwarpi.middlewares=pagelimit@docker,connlimit@docker
|
||||
- traefik.http.services.anwarpi.loadbalancer.server.port=3000
|
||||
# 39: canonical host is the apex. www hits this router first (priority
|
||||
# above anwarpi-api's 100) and is 301-redirected before any rate limit.
|
||||
- traefik.http.routers.anwarpi-www.rule=Host(`www.anwarpy.ai`)
|
||||
- traefik.http.routers.anwarpi-www.entrypoints=websecure
|
||||
- traefik.http.routers.anwarpi-www.tls.certresolver=mytlschallenge
|
||||
- traefik.http.routers.anwarpi-www.priority=110
|
||||
- traefik.http.routers.anwarpi-www.service=anwarpi
|
||||
- traefik.http.routers.anwarpi-www.middlewares=www-redirect
|
||||
- traefik.http.middlewares.www-redirect.redirectregex.regex=^https://www\.anwarpy\.ai/(.*)
|
||||
- traefik.http.middlewares.www-redirect.redirectregex.replacement=https://anwarpy.ai/$$1
|
||||
- traefik.http.middlewares.www-redirect.redirectregex.permanent=true
|
||||
- traefik.http.routers.anwarpi-api.rule=PathPrefix(`/api`) && Host(`anwarpy.ai`)
|
||||
- traefik.http.routers.anwarpi-api.entrypoints=websecure
|
||||
- traefik.http.routers.anwarpi-api.tls=true
|
||||
- traefik.http.routers.anwarpi-api.tls.certresolver=mytlschallenge
|
||||
- traefik.http.routers.anwarpi-api.service=anwarpi
|
||||
- traefik.http.routers.anwarpi-api.middlewares=apilimit@docker
|
||||
- traefik.http.routers.anwarpi-api.priority=100
|
||||
- traefik.http.middlewares.apilimit.ratelimit.average=90
|
||||
- traefik.http.middlewares.apilimit.ratelimit.burst=180
|
||||
- traefik.http.middlewares.apilimit.ratelimit.period=1m
|
||||
# F1: the pentest flood froze pages while /api held. Cap per-IP page
|
||||
# rate and in-flight requests; apilimit already guards /api itself.
|
||||
- traefik.http.middlewares.pagelimit.ratelimit.average=60
|
||||
- traefik.http.middlewares.pagelimit.ratelimit.period=1m
|
||||
- traefik.http.middlewares.pagelimit.ratelimit.burst=120
|
||||
- traefik.http.middlewares.connlimit.inflightreq.amount=50
|
||||
- traefik.docker.network=proxy
|
||||
depends_on:
|
||||
db:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- default
|
||||
- proxy
|
||||
|
||||
volumes:
|
||||
db-data:
|
||||
media-uploads:
|
||||
files-uploads:
|
||||
|
||||
networks:
|
||||
default:
|
||||
proxy:
|
||||
external: true
|
||||
@@ -27,7 +27,6 @@ services:
|
||||
- "3000:3000"
|
||||
volumes:
|
||||
- media-uploads:/app/media
|
||||
- files-uploads:/app/files-private
|
||||
environment:
|
||||
DATABASE_URI: postgres://anwarpi:${DB_PASSWORD}@db:5432/anwarpi
|
||||
PAYLOAD_SECRET: ${PAYLOAD_SECRET}
|
||||
@@ -45,4 +44,3 @@ services:
|
||||
volumes:
|
||||
db-data:
|
||||
media-uploads:
|
||||
files-uploads:
|
||||
|
||||
@@ -1,109 +1,75 @@
|
||||
# Agent Publish API — /api/agent/posts
|
||||
# Agent publishing API
|
||||
|
||||
Publish and manage blog posts programmatically. Auth: send the agent key in the
|
||||
`x-agent-key` header. The key lives on the VPS in `/root/anwarpi/.env.production`
|
||||
(`AGENT_API_KEY`).
|
||||
Base URL: `https://anwarpy.ai/api/agent/posts`
|
||||
|
||||
- Base URL: `https://anwarpy.ai`
|
||||
- Content-Type: `application/json`
|
||||
- Posts are created **draft** by default. Pass `"publish": true` to publish
|
||||
(sets `status: published` + `publishedAt` now). Unpublishing stays admin-only
|
||||
(`/admin`).
|
||||
- `access` controls gating: `"free"` (public) or `"vip"` (members only).
|
||||
- `content` (Lexical) may be omitted on create — a minimal valid doc is
|
||||
inserted; update it later with PUT. Other writable fields: `title`, `slug`,
|
||||
`dek`, `teaser`, `category` (`agents` | `models` | `automation` |
|
||||
`foundations`), `readingMinutes`, `cover`.
|
||||
- `attachments` attaches per-post work files: an array of
|
||||
`{ "filename": "agent-state.md", "dataBase64": "…", "access": "vip" }`.
|
||||
`access` is per file (`"free"` downloads for anyone, `"vip"` members only)
|
||||
and defaults to `"vip"`. Max 5 files, ≤5MB each, extensions pdf/zip/md/csv/
|
||||
txt/json. On PUT, sending `attachments` **replaces** the post's file set —
|
||||
omit the field to keep existing files.
|
||||
Authentication: send the current secret in `x-agent-key`. The key is stored only in the deployment environment and the local secret store; it must not appear in source, logs, prompts, or this document.
|
||||
|
||||
## Create + publish a post with an image
|
||||
## Create
|
||||
|
||||
```bash
|
||||
KEY="$AGENT_API_KEY" # never hardcode — export AGENT_API_KEY in your shell; it lives in the server's .env.production
|
||||
|
||||
# Inline base64 image (jpeg/png/webp, ≤5MB)
|
||||
python3 - <<'EOF' > /tmp/post.json
|
||||
import base64, json, pathlib
|
||||
print(json.dumps({
|
||||
"title": "دليلي الجديد",
|
||||
"slug": "my-new-guide",
|
||||
"dek": "وصف قصير يظهر في القوائم.",
|
||||
"teaser": "نص المعاينة للزوار غير المشتركين.",
|
||||
"category": "وكلاء",
|
||||
"access": "vip", # or "free"
|
||||
"readingMinutes": 9,
|
||||
"publish": True, # omit → draft
|
||||
"coverImage": {
|
||||
"filename": "my-cover.jpg",
|
||||
"mimeType": "image/jpeg",
|
||||
"dataBase64": base64.b64encode(pathlib.Path("my-cover.jpg").read_bytes()).decode(),
|
||||
},
|
||||
}))
|
||||
EOF
|
||||
curl -s -X POST https://anwarpy.ai/api/agent/posts \
|
||||
-H "x-agent-key: $KEY" -H "Content-Type: application/json" \
|
||||
--data @/tmp/post.json
|
||||
```
|
||||
|
||||
Response `201`:
|
||||
`POST /api/agent/posts`
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 113,
|
||||
"title": "دليلي الجديد",
|
||||
"slug": "my-new-guide",
|
||||
"status": "published",
|
||||
"title": "دليل عربي",
|
||||
"slug": "arabic-ai-guide",
|
||||
"dek": "وصف عملي",
|
||||
"teaser": "مطلوب لمقال VIP فقط",
|
||||
"content": { "root": { "type": "root", "children": [] } },
|
||||
"category": "أدوات",
|
||||
"access": "vip",
|
||||
"category": "agents",
|
||||
"cover": { "id": 113, "url": "/api/media/file/my-cover.jpg" },
|
||||
"attachments": [
|
||||
{
|
||||
"id": 42,
|
||||
"filename": "agent-state.md",
|
||||
"access": "vip",
|
||||
"url": "/api/files/42"
|
||||
}
|
||||
]
|
||||
"readingMinutes": 7,
|
||||
"publish": true,
|
||||
"coverImage": {
|
||||
"filename": "arabic-ai-guide.jpg",
|
||||
"dataBase64": "<raw JPEG base64>"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Update a post
|
||||
Rules:
|
||||
|
||||
```bash
|
||||
curl -s -X PUT https://anwarpy.ai/api/agent/posts/my-new-guide \
|
||||
-H "x-agent-key: $KEY" -H "Content-Type: application/json" \
|
||||
-d '{"access": "free", "publish": true,
|
||||
"coverImage": {"url": "https://example.com/cover.png"}}'
|
||||
- `slug`: lowercase ASCII kebab-case.
|
||||
- `category`: one of `وكلاء`, `نماذج`, `استرجاع`, `سلامة`, `أدوات`, `أعمال`.
|
||||
- `access`: `free` or `vip`.
|
||||
- VIP requires a non-empty teaser.
|
||||
- `coverImage` is optional. When provided it must be JPEG and no larger than 5MB. Otherwise the seeded category cover is used.
|
||||
- `publish` omitted or false creates `status=draft`; true creates `status=published` with a server timestamp.
|
||||
- Unknown fields, including direct `status`, `publishedAt`, and `level`, return 400.
|
||||
- An existing or racing duplicate slug returns 409.
|
||||
|
||||
Success: 201.
|
||||
|
||||
## Lookup
|
||||
|
||||
`GET /api/agent/posts/<slug>`
|
||||
|
||||
Returns 200 for a draft or published post, 404 when absent. Authentication is required. The response never includes article or teaser content.
|
||||
|
||||
## Promote or republish
|
||||
|
||||
`PATCH /api/agent/posts/<slug>`
|
||||
|
||||
Draft promotion body:
|
||||
|
||||
```json
|
||||
{ "publish": true }
|
||||
```
|
||||
|
||||
- `coverImage` accepts `{ "dataBase64": "…" }` or `{ "url": "https://…" }`
|
||||
(server fetches and stores it; `filename`/`mimeType` optional).
|
||||
- `cover` may also be an existing media ID (integer).
|
||||
A full republish uses the same body as create, requires `publish=true`, and requires the body slug to match the URL slug. It updates the existing post and never creates a second slug.
|
||||
|
||||
## Where the image appears
|
||||
## Response
|
||||
|
||||
The cover is rendered on:
|
||||
```json
|
||||
{
|
||||
"id": 42,
|
||||
"title": "دليل عربي",
|
||||
"slug": "arabic-ai-guide",
|
||||
"status": "published",
|
||||
"access": "vip",
|
||||
"category": "أدوات",
|
||||
"publishedAt": "2026-10-09T12:00:00.000Z",
|
||||
"url": "https://anwarpy.ai/posts/arabic-ai-guide"
|
||||
}
|
||||
```
|
||||
|
||||
1. **Post page** (`/posts/<slug>`) — full-width cover under the header.
|
||||
2. **Articles listing** (`/articles`) — thumbnail on each card.
|
||||
3. **Homepage** (`/`) — "أحدث الأدلة" section (latest 6 published posts).
|
||||
|
||||
If a post has no cover, the catalog card falls back to the category's default
|
||||
decorative cover; the post page and listing simply omit the image.
|
||||
|
||||
## Rules
|
||||
|
||||
- The agent **cannot** set `status` directly — only via `"publish": true`.
|
||||
- The agent **cannot** unpublish or delete — do that in `/admin`.
|
||||
- Images are validated: jpeg/png/webp, ≤5MB; stored as Payload `media`
|
||||
documents and served from `/api/media/file/<filename>`.
|
||||
- Attachments are stored as Payload `files` documents under `files-private/`
|
||||
(volume-mount it like `media/` on the VPS). Downloads go through
|
||||
`GET /api/files/<id>`: `free` files stream to anyone, `vip` files return
|
||||
401 anonymous / 403 for non-members. The `vip` badge on the post page links
|
||||
only for entitled viewers.
|
||||
Canonical URLs have no `www` and no trailing slash.
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
// Minimal flat config — procoder's lint domain checks .ts/.tsx with this.
|
||||
// Report-only by default (see .procoder/config.toml policy); add rules as needed.
|
||||
import tseslint from "typescript-eslint";
|
||||
|
||||
export default tseslint.config(
|
||||
{
|
||||
ignores: [
|
||||
".next/**",
|
||||
"node_modules/**",
|
||||
"src/payload-types.ts", // generated — do not lint
|
||||
"src/migrations/**",
|
||||
"media/**",
|
||||
"files-uploads/**",
|
||||
],
|
||||
},
|
||||
...tseslint.configs.recommended.map((c) => ({
|
||||
...c,
|
||||
files: ["**/*.{ts,tsx,mjs,cjs}"],
|
||||
})),
|
||||
{
|
||||
rules: {
|
||||
// Generated Payload types use `any` in payload-types.ts; local code may pass
|
||||
// narrow unknowns. Keep the floor permissive until a lint pass is scheduled.
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
|
||||
],
|
||||
},
|
||||
},
|
||||
);
|
||||
@@ -12,7 +12,6 @@ const nextConfig = {
|
||||
{ key: 'X-Content-Type-Options', value: 'nosniff' },
|
||||
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
|
||||
{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()' },
|
||||
{ key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains' },
|
||||
],
|
||||
}]
|
||||
},
|
||||
|
||||
Generated
+912
-3655
File diff suppressed because it is too large
Load Diff
+5
-15
@@ -5,6 +5,7 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"test": "node --experimental-strip-types --test tests/*.test.ts",
|
||||
"build": "payload generate:types && next build",
|
||||
"start": "next start",
|
||||
"generate:types": "payload generate:types",
|
||||
@@ -12,36 +13,25 @@
|
||||
"covers": "node scripts/generate-covers.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@clerk/nextjs": "^7.9.14",
|
||||
"@payloadcms/db-postgres": "^3.60.0",
|
||||
"@payloadcms/next": "^3.60.0",
|
||||
"@payloadcms/richtext-lexical": "^3.60.0",
|
||||
"next": "^15.5.27",
|
||||
"next": "15.4.11",
|
||||
"nodemailer": "^10.0.13",
|
||||
"payload": "^3.60.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"sharp": "^0.35.5",
|
||||
"sharp": "^0.34.0",
|
||||
"stripe": "^18.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.64.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"@types/nodemailer": "^8.0.2",
|
||||
"@types/react": "^19.2.0",
|
||||
"@types/react-dom": "^19.2.0",
|
||||
"eslint": "^10.12.0",
|
||||
"prettier": "^3.9.10",
|
||||
"typescript": "^5.9.0",
|
||||
"typescript-eslint": "^8.71.2",
|
||||
"vitest": "^5.0.4"
|
||||
"typescript": "^5.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.9.0"
|
||||
},
|
||||
"overrides": {
|
||||
"undici": "^8.11.2",
|
||||
"sharp": "^0.35.5",
|
||||
"postcss": "^8.5.6",
|
||||
"sass": "^1.79.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.6 KiB |
@@ -1,40 +0,0 @@
|
||||
/**
|
||||
* Backfill `readingMinutes` on every post from its body (L-07).
|
||||
* No schema change — safe to re-run any time.
|
||||
*
|
||||
* Usage: cd web && npx tsx scripts/backfill-reading-minutes.ts
|
||||
*/
|
||||
import { getPayload } from 'payload'
|
||||
import configPromise from '@payload-config'
|
||||
import { countLexicalWords } from '../src/lib/lexical'
|
||||
import { READING_WORDS_PER_MINUTE } from '../src/lib/launch'
|
||||
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
|
||||
const { docs } = await payload.find({
|
||||
collection: 'posts',
|
||||
limit: 500,
|
||||
depth: 0,
|
||||
overrideAccess: true,
|
||||
})
|
||||
|
||||
let updated = 0
|
||||
for (const post of docs) {
|
||||
const words = countLexicalWords(post.content)
|
||||
const readingMinutes = Math.max(1, Math.round(words / READING_WORDS_PER_MINUTE))
|
||||
if (readingMinutes !== post.readingMinutes) {
|
||||
await payload.update({
|
||||
collection: 'posts',
|
||||
id: post.id,
|
||||
data: { readingMinutes },
|
||||
overrideAccess: true,
|
||||
context: { systemBackfill: true },
|
||||
})
|
||||
payload.logger.info(`backfill: ${post.slug} ${post.readingMinutes} → ${readingMinutes} (${words} words)`)
|
||||
updated += 1
|
||||
}
|
||||
}
|
||||
|
||||
payload.logger.info(`backfill complete: ${docs.length} scanned, ${updated} updated`)
|
||||
// Postgres pool keeps the loop alive — release it so the script exits.
|
||||
await payload.db.destroy?.()
|
||||
@@ -1,30 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# anwarpy.ai — Postgres backup (L-06)
|
||||
#
|
||||
# Run ON THE VPS (needs the `proxy`/compose network up):
|
||||
# ./scripts/backup-db.sh
|
||||
#
|
||||
# Cron (nightly 03:15, keep dir writable):
|
||||
# 15 3 * * * cd /root/anwarpi && ./scripts/backup-db.sh >> backups/backup.log 2>&1
|
||||
#
|
||||
# Restore a dump into the running db container:
|
||||
# gunzip -c backups/anwarpi-YYYYMMDD-HHMMSS.sql.gz | \
|
||||
# docker compose -f docker-compose.vps.yml exec -T db psql -U anwarpi anwarpi
|
||||
#
|
||||
# Restore-rehearsal (verify a backup is loadable BEFORE you need it):
|
||||
# gunzip -c backups/<file>.sql.gz | \
|
||||
# docker compose -f docker-compose.vps.yml exec -T db psql -U anwarpi -c "CREATE DATABASE anwarpi_restore_test;"
|
||||
# gunzip -c backups/<file>.sql.gz | \
|
||||
# docker compose -f docker-compose.vps.yml exec -T db psql -U anwarpi -d anwarpi_restore_test -q
|
||||
# docker compose -f docker-compose.vps.yml exec -T db psql -U anwarpi -d anwarpi_restore_test -tAc \
|
||||
# "SELECT (SELECT count(*) FROM posts) AS posts, (SELECT count(*) FROM users) AS users;"
|
||||
# docker compose -f docker-compose.vps.yml exec -T db psql -U anwarpi -c "DROP DATABASE anwarpi_restore_test;"
|
||||
set -euo pipefail
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
mkdir -p backups
|
||||
STAMP=$(date +%Y%m%d-%H%M%S)
|
||||
OUT="backups/anwarpi-${STAMP}.sql.gz"
|
||||
|
||||
docker compose -f docker-compose.vps.yml exec -T db pg_dump -U anwarpi anwarpi | gzip > "$OUT"
|
||||
echo "wrote $OUT ($(du -h "$OUT" | cut -f1))"
|
||||
@@ -1,76 +1,99 @@
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import { getViewer } from '@/lib/viewer'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = {
|
||||
title: 'عن الفريق',
|
||||
description:
|
||||
'فريق أنور بآي: عرب يكتبون أدلة ذكاء اصطناعي عملية — تجارب موثقة، خطوات قابلة للتطبيق، وملفات عمل حقيقية بلا حشو تسويقي.',
|
||||
}
|
||||
|
||||
export default async function AboutPage() {
|
||||
const viewer = await getViewer()
|
||||
return (
|
||||
<div id="site" className="site-page v2 v2-about">
|
||||
<Topnav viewer={viewer} />
|
||||
<main id="content">
|
||||
<section className="about-hero" aria-labelledby="about-title">
|
||||
<div className="wrap about-hero-grid">
|
||||
<div>
|
||||
<h1 id="about-title">نكتب عن تجاربنا، ونشارك ما جرّبناه عمليًا</h1>
|
||||
<p className="lede">أنور بآي منصة يقودها أنور عنبتاوي مع أحمد محمد. نحوّل خبرة سنوات في البنية التحتية والذكاء الاصطناعي التطبيقي إلى أدلة عربية يمكن تنفيذها في عملك.</p>
|
||||
</div>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="about-mark" src="/brand/mark-light.svg" alt="" width={436} height={382} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="about-team" aria-labelledby="team-title">
|
||||
<div className="wrap">
|
||||
<h2 id="team-title">الفريق</h2>
|
||||
<div className="people">
|
||||
<article className="person">
|
||||
<p className="person-role">المؤسس، 20 عاماً في البنية التحتية</p>
|
||||
<h3>أنور عنبتاوي</h3>
|
||||
<p>يقود رؤية المنصة بخبرة عقدين في البنية التحتية لتقنية المعلومات. يهتم بتشغيل النماذج الكبيرة محلياً، واستكشاف النماذج المفتوحة، وبناء بيئات تجعل التجربة التقنية قابلة للتشغيل الحقيقي.</p>
|
||||
<ul className="tags" aria-label="مجالات اهتمام أنور" role="list">
|
||||
<li>البنية التحتية</li><li>النماذج المفتوحة</li><li>التشغيل المحلي</li><li>الأنظمة الموثوقة</li>
|
||||
</ul>
|
||||
<a className="text-link" href="https://www.linkedin.com/in/anwaranabtawi/" target="_blank" rel="noopener noreferrer">أنور على LinkedIn</a>
|
||||
</article>
|
||||
<article className="person">
|
||||
<p className="person-role">الذكاء الاصطناعي التطبيقي وتكامل الأعمال</p>
|
||||
<h3>أحمد محمد</h3>
|
||||
<p>يركز على ضبط النماذج، وأطر الوكلاء وتنسيقها، وأنظمة <bdi dir="ltr">RAG</bdi>. يهمه أن يصبح الذكاء الاصطناعي جزءاً فعّالاً من طريقة إنجاز العمل، لا تجربة منفصلة عنه.</p>
|
||||
<ul className="tags" aria-label="مجالات اهتمام أحمد" role="list">
|
||||
<li>ضبط النماذج</li><li>أطر الوكلاء</li><li>تنسيق الوكلاء</li><li><bdi dir="ltr">RAG</bdi></li>
|
||||
</ul>
|
||||
<a className="text-link" href="https://www.linkedin.com/in/ahmed-mohamed-423583151/" target="_blank" rel="noopener noreferrer">أحمد على LinkedIn</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="about-principles" aria-labelledby="principles-title">
|
||||
<div className="wrap principles-grid">
|
||||
<h2 id="principles-title">كيف نكتب كل دليل</h2>
|
||||
<dl className="principles">
|
||||
<div><dt>التطبيق قبل الاستعراض</dt><dd>نقيس قيمة التقنية بقدرتها على حل مشكلة واضحة أو تحسين خطوة حقيقية في العمل.</dd></div>
|
||||
<div><dt>نشرح ما تحت الغطاء</dt><dd>نفضّل الأدوات المفتوحة والتشغيل الذي يمنحك فهماً وتحكماً أكبر في بياناتك ومواردك.</dd></div>
|
||||
<div><dt>حدود قبل الإطلاق</dt><dd>الوكيل أو النموذج لا يكتمل دون مراقبة وحدود واضحة تمنع الفشل الصامت.</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="about-contact">
|
||||
<div className="wrap contact-strip">
|
||||
<p>عندك سؤال عن دليل أو فكرة تريد تطبيقها؟</p>
|
||||
<a className="btn btn-quiet" href="mailto:hello@anwarpy.ai" dir="ltr">hello@anwarpy.ai</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import Topnav from '@/components/topnav'
|
||||
import SiteMenu from '@/components/site-menu'
|
||||
import Footer from '@/components/footer'
|
||||
import '../styles/about.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'عن الفريق' }
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<>
|
||||
<Topnav
|
||||
viewer={null}
|
||||
menu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/article-agent-guide', label: 'المقالات' },
|
||||
{ href: '/subscription', label: 'العضوية' },
|
||||
{ href: '/about', label: 'عن الفريق' },
|
||||
]}
|
||||
/>
|
||||
<SiteMenu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/article-agent-guide', label: 'المقالات' },
|
||||
{ href: '/subscription', label: 'العضوية والأسعار' },
|
||||
]}
|
||||
foot={{ href: '/about', label: '', note: 'محتوى عربي عملي، بلا ضجيج.', variant: 'hidden' }}
|
||||
/>
|
||||
<main>
|
||||
<section className="hero" data-od-id="about-hero">
|
||||
<div className="container hero-grid">
|
||||
<div>
|
||||
<p className="eyebrow">عن أنور بي آي · خبرة تبني وتشرح</p>
|
||||
<h1 data-od-id="about-title">خبرة تقنية تتحول إلى معرفة عملية.</h1>
|
||||
<p className="lead">يقود أنور عنبتاوي المنصة، ويشاركه أحمد محمد شغف تحويل تقنيات الذكاء الاصطناعي والبنية التحتية إلى تطبيقات مفهومة ونافعة للأعمال.</p>
|
||||
</div>
|
||||
<div className="hero-note" data-od-id="team-mission">
|
||||
<strong>لا نكتفي بعرض الأدوات.</strong>
|
||||
<p>نشرح كيف تختارها، تربطها بسير العمل، وتشغّلها بوعي على بنية يمكن الاعتماد عليها.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="team" id="team-contact" data-od-id="team">
|
||||
<div className="container">
|
||||
<div className="section-head">
|
||||
<h2>العقول خلف أنور بي آي.</h2>
|
||||
<p>يجمع الفريق بين خبرة طويلة في البنية التحتية واهتمام تطبيقي بالنماذج المفتوحة والوكلاء وأنظمة الاسترجاع.</p>
|
||||
</div>
|
||||
<div className="profile-grid">
|
||||
<article className="profile profile-main" data-od-id="profile-anwar">
|
||||
<span className="profile-label">المؤسس الرئيسي · خبرة ٢٠ عاماً</span>
|
||||
<h3>أنور عنبتاوي</h3>
|
||||
<p className="role">متخصص بنية تحتية وتقنيات معلومات</p>
|
||||
<p className="bio">يقود أنور الرؤية الأساسية للمنصة بخبرة تمتد لعقدين في البنية التحتية لتقنية المعلومات. يهتم بتشغيل النماذج الكبيرة محلياً، واستكشاف النماذج المفتوحة، وبناء بيئات قوية تجعل التجربة التقنية قابلة للتشغيل الحقيقي لا للعرض فقط.</p>
|
||||
<div className="topics" aria-label="مجالات اهتمام أنور">
|
||||
<span className="topic">البنية التحتية</span>
|
||||
<span className="topic">النماذج المفتوحة</span>
|
||||
<span className="topic">تشغيل النماذج محلياً</span>
|
||||
<span className="topic">الأنظمة الموثوقة</span>
|
||||
</div>
|
||||
<a className="profile-link" href="https://www.linkedin.com/in/anwaranabtawi/" target="_blank" rel="noopener noreferrer" data-od-id="anwar-linkedin"><span>ملف أنور على LinkedIn</span><span aria-hidden="true">↗</span></a>
|
||||
</article>
|
||||
<article className="profile" data-od-id="profile-ahmed">
|
||||
<span className="profile-label">ذكاء اصطناعي تطبيقي · تكامل الأعمال</span>
|
||||
<h3>أحمد محمد</h3>
|
||||
<p className="role">مهتم بهندسة حلول الذكاء الاصطناعي</p>
|
||||
<p className="bio">يركز أحمد على ضبط النماذج، وأطر الذكاء الاصطناعي الوكيل، وتنسيق الوكلاء، وأنظمة <bdi dir="ltr">RAG</bdi>. اهتمامه الأساسي هو دمج الذكاء الاصطناعي داخل تدفقات الأعمال بحيث يتحول من تجربة منفصلة إلى جزء فعّال من طريقة إنجاز العمل.</p>
|
||||
<div className="topics" aria-label="مجالات اهتمام أحمد">
|
||||
<span className="topic">ضبط النماذج</span>
|
||||
<span className="topic">أطر الوكلاء</span>
|
||||
<span className="topic">تنسيق الوكلاء</span>
|
||||
<span className="topic"><bdi dir="ltr">RAG</bdi></span>
|
||||
</div>
|
||||
<a className="profile-link" href="https://www.linkedin.com/in/ahmed-mohamed-423583151/" target="_blank" rel="noopener noreferrer" data-od-id="ahmed-linkedin"><span>ملف أحمد على LinkedIn</span><span aria-hidden="true">↗</span></a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="principles" data-od-id="team-principles">
|
||||
<div className="container principle-grid">
|
||||
<div>
|
||||
<p className="eyebrow">طريقة العمل</p>
|
||||
<h2>من المختبر إلى سير العمل.</h2>
|
||||
</div>
|
||||
<div className="principle-list">
|
||||
<article className="principle" data-od-id="principle-practical"><span className="principle-index">01</span><div><h3>التطبيق قبل الاستعراض</h3><p>نقيس قيمة التقنية بقدرتها على حل مشكلة واضحة أو تحسين خطوة حقيقية في العمل.</p></div></article>
|
||||
<article className="principle" data-od-id="principle-open"><span className="principle-index">02</span><div><h3>فهم ما يحدث تحت الغطاء</h3><p>نفضّل الأدوات المفتوحة والتشغيل الذي يمنح المستخدم فهماً وتحكماً أكبر في بياناته وموارده.</p></div></article>
|
||||
<article className="principle" data-od-id="principle-reliable"><span className="principle-index">03</span><div><h3>أنظمة يمكن الاعتماد عليها</h3><p>الوكيل أو النموذج لا يكتمل من دون بنية ومراقبة وحدود واضحة تمنع الفشل الصامت.</p></div></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,223 +1,220 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
|
||||
/* 4-tab settings — markup from account-settings.html with the real Payload
|
||||
endpoints wired (PATCH /api/users/me for profile + password). Prefs stay
|
||||
client-side (localStorage) faithful to the original. Stripe is pending:
|
||||
the cancel button renders disabled with a note. */
|
||||
|
||||
type Props = {
|
||||
email: string
|
||||
userId: number
|
||||
fullName: string
|
||||
role: string
|
||||
billingEnabled: boolean
|
||||
}
|
||||
|
||||
type Status = { ok: boolean; text: string } | null
|
||||
|
||||
const TABS = [
|
||||
{ id: 'profile', label: 'الملف الشخصي' },
|
||||
{ id: 'password', label: 'كلمة المرور' },
|
||||
{ id: 'prefs', label: 'التفضيلات' },
|
||||
{ id: 'membership', label: 'العضوية والفوترة' },
|
||||
]
|
||||
|
||||
export default function AccountSettingsClient({ email, userId, fullName, role, billingEnabled }: Props) {
|
||||
const router = useRouter()
|
||||
const [tab, setTab] = useState('profile')
|
||||
const [name, setName] = useState(fullName)
|
||||
const [profileStatus, setProfileStatus] = useState<Status>(null)
|
||||
const [profileBusy, setProfileBusy] = useState(false)
|
||||
|
||||
const [currentPw, setCurrentPw] = useState('')
|
||||
const [newPw, setNewPw] = useState('')
|
||||
const [confirmPw, setConfirmPw] = useState('')
|
||||
const [pwStatus, setPwStatus] = useState<Status>(null)
|
||||
const [pwBusy, setPwBusy] = useState(false)
|
||||
|
||||
const [prefs, setPrefs] = useState({ weekly: true, replies: true, updates: false })
|
||||
const [prefsStatus, setPrefsStatus] = useState<Status>(null)
|
||||
const [logoutBusy, setLogoutBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem('anw-prefs')
|
||||
if (raw) setPrefs(p => ({ ...p, ...JSON.parse(raw) }))
|
||||
} catch { /* ignore */ }
|
||||
}, [])
|
||||
|
||||
const rulesOk = {
|
||||
len: newPw.length >= 8,
|
||||
num: /\d/.test(newPw),
|
||||
diff: newPw.length > 0 && newPw !== currentPw,
|
||||
}
|
||||
|
||||
async function saveProfile(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (name.trim().length < 3) {
|
||||
setProfileStatus({ ok: false, text: 'أدخل اسماً من 3 أحرف على الأقل.' })
|
||||
return
|
||||
}
|
||||
setProfileBusy(true)
|
||||
const res = await fetch(`/api/users/${userId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ fullName: name.trim() }),
|
||||
})
|
||||
setProfileStatus(res.ok
|
||||
? { ok: true, text: 'تم حفظ الاسم ✓' }
|
||||
: { ok: false, text: 'تعذّر الحفظ — أعد المحاولة.' })
|
||||
setProfileBusy(false)
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function changePassword(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!currentPw) { setPwStatus({ ok: false, text: 'أدخل كلمة المرور الحالية.' }); return }
|
||||
if (!(rulesOk.len && rulesOk.num)) { setPwStatus({ ok: false, text: 'كلمة المرور الجديدة لا تحقق الشروط أعلاه.' }); return }
|
||||
if (newPw === currentPw) { setPwStatus({ ok: false, text: 'كلمة المرور الجديدة تطابق الحالية.' }); return }
|
||||
if (newPw !== confirmPw) { setPwStatus({ ok: false, text: 'التأكيد لا يطابق كلمة المرور الجديدة.' }); return }
|
||||
setPwBusy(true)
|
||||
const res = await fetch(`/api/users/${userId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password: newPw }),
|
||||
})
|
||||
setPwStatus(res.ok
|
||||
? { ok: true, text: 'تم تحديث كلمة المرور ✓' }
|
||||
: { ok: false, text: 'تعذّر التحديث — تحقق من كلمة المرور الحالية أو أعد المحاولة.' })
|
||||
if (res.ok) {
|
||||
setCurrentPw(''); setNewPw(''); setConfirmPw('')
|
||||
}
|
||||
setPwBusy(false)
|
||||
}
|
||||
|
||||
function savePrefs() {
|
||||
try { localStorage.setItem('anw-prefs', JSON.stringify(prefs)) } catch { /* ignore */ }
|
||||
setPrefsStatus({ ok: true, text: 'تم حفظ التفضيلات ✓' })
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
setLogoutBusy(true)
|
||||
await fetch('/api/users/logout', { method: 'POST' })
|
||||
router.refresh()
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const entitled = role === 'vip' || role === 'admin'
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="settings-nav" role="tablist" aria-label="أقسام الإعدادات" data-od-id="settings-nav">
|
||||
{TABS.map(t => (
|
||||
<button role="tab" key={t.id} id={`tab-${t.id}`} aria-selected={tab === t.id} aria-controls={`panel-${t.id}`} data-tab={t.id} onClick={() => setTab(t.id)}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="panels">
|
||||
<section className={`panel${tab === 'profile' ? ' active' : ''}`} id="panel-profile" role="tabpanel" aria-labelledby="tab-profile" data-od-id="panel-profile">
|
||||
<h2>الملف الشخصي</h2>
|
||||
<p className="panel-sub">الاسم كما يظهر في تعليقاتك وقوائم الحفظ. البريد الإلكتروني هو معرّف الدخول ولا يتغير من هنا.</p>
|
||||
<form className="form-grid" id="profileForm" noValidate onSubmit={saveProfile}>
|
||||
<div className="field"><label htmlFor="fullName">الاسم الكامل</label><input className="input" id="fullName" name="fullName" value={name} onChange={e => setName(e.target.value)} autoComplete="name" required /></div>
|
||||
<div className="field"><label htmlFor="email">البريد الإلكتروني</label><input className="input" id="email" value={email} disabled /><span className="hint">لتغيير البريد تواصل معنا على <bdi>hello@anwarpy.ai</bdi></span></div>
|
||||
<button className="btn btn-primary" type="submit" data-od-id="save-profile" disabled={profileBusy}>{profileBusy ? 'جارٍ الحفظ…' : 'حفظ التغييرات'}</button>
|
||||
<p className={`status ${profileStatus?.ok ? 'ok' : profileStatus ? 'err' : ''}`} id="profileStatus" role="status">{profileStatus?.text}</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className={`panel${tab === 'password' ? ' active' : ''}`} id="panel-password" role="tabpanel" aria-labelledby="tab-password" data-od-id="panel-password">
|
||||
<h2>تغيير كلمة المرور</h2>
|
||||
<p className="panel-sub">بعد التغيير تبقى جلستك الحالية مفتوحة، وتُطلب كلمة المرور الجديدة عند الدخول من جهاز آخر.</p>
|
||||
<form className="form-grid" id="passwordForm" noValidate onSubmit={changePassword}>
|
||||
<div className="field"><label htmlFor="currentPw">كلمة المرور الحالية</label><input className="input" id="currentPw" type="password" name="currentPw" autoComplete="current-password" required value={currentPw} onChange={e => setCurrentPw(e.target.value)} /></div>
|
||||
<div className="field"><label htmlFor="newPw">كلمة المرور الجديدة</label><input className="input" id="newPw" type="password" name="newPw" autoComplete="new-password" required minLength={8} aria-describedby="pwRules" value={newPw} onChange={e => setNewPw(e.target.value)} /></div>
|
||||
<ul className="pw-rules" id="pwRules">
|
||||
<li data-rule="len" className={rulesOk.len ? 'ok' : ''}>8 أحرف على الأقل</li>
|
||||
<li data-rule="num" className={rulesOk.num ? 'ok' : ''}>تحتوي رقماً واحداً على الأقل</li>
|
||||
<li data-rule="diff" className={rulesOk.diff ? 'ok' : ''}>تختلف عن كلمة المرور الحالية</li>
|
||||
</ul>
|
||||
<div className="field"><label htmlFor="confirmPw">تأكيد كلمة المرور</label><input className="input" id="confirmPw" type="password" name="confirmPw" autoComplete="new-password" required value={confirmPw} onChange={e => setConfirmPw(e.target.value)} /></div>
|
||||
<button className="btn btn-primary" type="submit" data-od-id="save-password" disabled={pwBusy}>{pwBusy ? 'جارٍ التحديث…' : 'تحديث كلمة المرور'}</button>
|
||||
<p className={`status ${pwStatus?.ok ? 'ok' : pwStatus ? 'err' : ''}`} id="passwordStatus" role="status" aria-live="polite">{pwStatus?.text}</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className={`panel${tab === 'prefs' ? ' active' : ''}`} id="panel-prefs" role="tabpanel" aria-labelledby="tab-prefs" data-od-id="panel-prefs">
|
||||
<h2>التفضيلات</h2>
|
||||
<p className="panel-sub">رسائل أنور بآي قليلة ومقصودة. يمكنك إيقاف أي نوع منها من دون التأثير على عضويتك.</p>
|
||||
<div className="prefs">
|
||||
<div className="pref-row"><div><strong>الرسالة الأسبوعية</strong><p>خلاصة ما نُشر من أدلة ومقالات، كل يوم أحد.</p></div>
|
||||
<label className="switch"><input type="checkbox" id="prefWeekly" aria-label="تفعيل الرسالة الأسبوعية" checked={prefs.weekly} onChange={e => setPrefs(p => ({ ...p, weekly: e.target.checked }))} /><span className="track"></span></label></div>
|
||||
<div className="pref-row"><div><strong>إشعارات التعليقات</strong><p>رسالة عند ردّ أحد الأعضاء على تعليقك.</p></div>
|
||||
<label className="switch"><input type="checkbox" id="prefReplies" aria-label="تفعيل إشعارات التعليقات" checked={prefs.replies} onChange={e => setPrefs(p => ({ ...p, replies: e.target.checked }))} /><span className="track"></span></label></div>
|
||||
<div className="pref-row"><div><strong>تحديثات الأدلة المحفوظة</strong><p>إشعار عندما يُحدَّث دليل حفظته للعودة إليه.</p></div>
|
||||
<label className="switch"><input type="checkbox" id="prefUpdates" aria-label="تفعيل تحديثات الأدلة المحفوظة" checked={prefs.updates} onChange={e => setPrefs(p => ({ ...p, updates: e.target.checked }))} /><span className="track"></span></label></div>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="button" id="savePrefs" style={{ marginTop: 28 }} data-od-id="save-prefs" onClick={savePrefs}>حفظ التفضيلات</button>
|
||||
<p className={`status ${prefsStatus?.ok ? 'ok' : prefsStatus ? 'err' : ''}`} id="prefsStatus" role="status">{prefsStatus?.text}</p>
|
||||
</section>
|
||||
|
||||
<section className={`panel${tab === 'membership' ? ' active' : ''}`} id="panel-membership" role="tabpanel" aria-labelledby="tab-membership" data-od-id="panel-membership">
|
||||
<h2>العضوية والفوترة</h2>
|
||||
<p className="panel-sub">خطتك وحالة وصولك. الإلغاء يوقف التجديد التالي ويحفظ وصولك حتى نهاية الفترة المدفوعة.</p>
|
||||
<article className="membership-card" data-od-id="membership-card">
|
||||
<div className="membership-head">
|
||||
<div><h3 id="planName">{entitled ? 'عضوية فردية' : 'حساب مجاني'}</h3><span className="hint">الحالة الحقيقية لحسابك</span></div>
|
||||
<span className={`state-chip${entitled ? '' : ' cancelled'}`} id="planState">{entitled ? 'نشطة' : role === 'admin' ? 'إداري' : 'مجاني'}</span>
|
||||
</div>
|
||||
<div className="plan-details">
|
||||
{billingEnabled
|
||||
? <div><span className="price-tag"><bdi dir="ltr">$10</bdi><small>شهرياً</small></span></div>
|
||||
: <div><span className="price-tag price-tag-early">وصول مبكر مجاني</span></div>}
|
||||
<dl style={{ margin: 0 }}><dt>الوصول</dt><dd>{entitled ? 'كامل — كل الأدلة الحصرية وملفات العمل' : billingEnabled ? 'الأدلة المجانية ومعاينة الأدلة' : 'كل المحتوى المنشور مؤقتاً — الوصول المبكر المجاني'}</dd></dl>
|
||||
<dl style={{ margin: 0 }}><dt>طريقة الدفع</dt><dd id="payMethod">{billingEnabled ? 'ستُربط عبر Stripe' : 'لا يوجد — لن يُحصَّل أي مبلغ خلال الوصول المبكر'}</dd></dl>
|
||||
<dl style={{ margin: 0 }}><dt>الوصول بعد الإلغاء</dt><dd>حتى نهاية الفترة المدفوعة</dd></dl>
|
||||
</div>
|
||||
<div className="membership-actions" id="membershipActions">
|
||||
{!entitled && billingEnabled && <Link className="btn btn-primary" href="/subscription" id="resubLink">اشترك الآن</Link>}
|
||||
</div>
|
||||
</article>
|
||||
<div className="cancel-zone" id="cancelZone" data-od-id="cancel-zone">
|
||||
<h3>إلغاء الاشتراك</h3>
|
||||
{entitled ? (
|
||||
<>
|
||||
<p>ربط الدفع (Stripe) غير مكتمل بعد — الإلغاء الذاتي سيتاح بعد ربط الدفع. حتى ذلك الحين تواصل معنا على <bdi>hello@anwarpy.ai</bdi> لأي تغيير.</p>
|
||||
<button className="text-danger" type="button" id="cancelOpen" data-od-id="cancel-open" disabled>إلغاء الاشتراك</button>
|
||||
<p className="hint">سيتاح بعد ربط الدفع</p>
|
||||
</>
|
||||
) : (
|
||||
<p>لا يوجد اشتراك مدفوع لإلغائه. يمكنك الترقية في أي وقت من صفحة <Link className="text-link" href="/subscription">العضوية</Link>.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="billing" data-od-id="billing-history">
|
||||
<h3>سجل الفواتير</h3>
|
||||
<p className="billing-sub">كل دفعة تُصدر فاتورة ضريبية فور اكتمالها وترسل إلى بريدك المسجّل. الفواتير متاحة للتنزيل في أي وقت.</p>
|
||||
<div className="billing-table" role="table" aria-label="سجل الفواتير">
|
||||
<div className="billing-row head" role="row">
|
||||
<span role="columnheader">التاريخ</span><span role="columnheader">الوصف</span><span role="columnheader">المبلغ</span><span role="columnheader">الحالة</span><span role="columnheader">الفاتورة</span>
|
||||
</div>
|
||||
<div className="billing-row" role="row">
|
||||
<span className="bdate" role="cell">—</span>
|
||||
<span className="desc" role="cell">لا فواتير بعد — ربط الدفع قادم</span>
|
||||
<span className="amt" role="cell">—</span>
|
||||
<span role="cell"><span className="hint">—</span></span>
|
||||
<span role="cell"><span className="hint">—</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="form-actions" style={{ marginTop: 32 }}>
|
||||
<button className="btn btn-secondary" type="button" onClick={logout} disabled={logoutBusy}>تسجيل الخروج</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
|
||||
/* 4-tab settings — markup from account-settings.html with the real Payload
|
||||
endpoints wired (PATCH /api/users/me for profile + password). Prefs stay
|
||||
client-side (localStorage) faithful to the original. Stripe is pending:
|
||||
the cancel button renders disabled with a note. */
|
||||
|
||||
type Props = {
|
||||
email: string
|
||||
userId: number
|
||||
fullName: string
|
||||
role: string
|
||||
}
|
||||
|
||||
type Status = { ok: boolean; text: string } | null
|
||||
|
||||
const TABS = [
|
||||
{ id: 'profile', label: 'الملف الشخصي' },
|
||||
{ id: 'password', label: 'كلمة المرور' },
|
||||
{ id: 'prefs', label: 'التفضيلات' },
|
||||
{ id: 'membership', label: 'العضوية والفوترة' },
|
||||
]
|
||||
|
||||
export default function AccountSettingsClient({ email, userId, fullName, role }: Props) {
|
||||
const router = useRouter()
|
||||
const [tab, setTab] = useState('profile')
|
||||
const [name, setName] = useState(fullName)
|
||||
const [profileStatus, setProfileStatus] = useState<Status>(null)
|
||||
const [profileBusy, setProfileBusy] = useState(false)
|
||||
|
||||
const [currentPw, setCurrentPw] = useState('')
|
||||
const [newPw, setNewPw] = useState('')
|
||||
const [confirmPw, setConfirmPw] = useState('')
|
||||
const [pwStatus, setPwStatus] = useState<Status>(null)
|
||||
const [pwBusy, setPwBusy] = useState(false)
|
||||
|
||||
const [prefs, setPrefs] = useState({ weekly: true, replies: true, updates: false })
|
||||
const [prefsStatus, setPrefsStatus] = useState<Status>(null)
|
||||
const [logoutBusy, setLogoutBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem('anw-prefs')
|
||||
if (raw) setPrefs(p => ({ ...p, ...JSON.parse(raw) }))
|
||||
} catch { /* ignore */ }
|
||||
}, [])
|
||||
|
||||
const rulesOk = {
|
||||
len: newPw.length >= 8,
|
||||
num: /\d/.test(newPw),
|
||||
diff: newPw.length > 0 && newPw !== currentPw,
|
||||
}
|
||||
|
||||
async function saveProfile(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (name.trim().length < 3) {
|
||||
setProfileStatus({ ok: false, text: 'أدخل اسماً من ٣ أحرف على الأقل.' })
|
||||
return
|
||||
}
|
||||
setProfileBusy(true)
|
||||
const res = await fetch(`/api/users/${userId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ fullName: name.trim() }),
|
||||
})
|
||||
setProfileStatus(res.ok
|
||||
? { ok: true, text: 'تم حفظ الاسم ✓' }
|
||||
: { ok: false, text: 'تعذّر الحفظ — أعد المحاولة.' })
|
||||
setProfileBusy(false)
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function changePassword(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!currentPw) { setPwStatus({ ok: false, text: 'أدخل كلمة المرور الحالية.' }); return }
|
||||
if (!(rulesOk.len && rulesOk.num)) { setPwStatus({ ok: false, text: 'كلمة المرور الجديدة لا تحقق الشروط أعلاه.' }); return }
|
||||
if (newPw === currentPw) { setPwStatus({ ok: false, text: 'كلمة المرور الجديدة تطابق الحالية.' }); return }
|
||||
if (newPw !== confirmPw) { setPwStatus({ ok: false, text: 'التأكيد لا يطابق كلمة المرور الجديدة.' }); return }
|
||||
setPwBusy(true)
|
||||
const res = await fetch(`/api/users/${userId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password: newPw }),
|
||||
})
|
||||
setPwStatus(res.ok
|
||||
? { ok: true, text: 'تم تحديث كلمة المرور ✓' }
|
||||
: { ok: false, text: 'تعذّر التحديث — تحقق من كلمة المرور الحالية أو أعد المحاولة.' })
|
||||
if (res.ok) {
|
||||
setCurrentPw(''); setNewPw(''); setConfirmPw('')
|
||||
}
|
||||
setPwBusy(false)
|
||||
}
|
||||
|
||||
function savePrefs() {
|
||||
try { localStorage.setItem('anw-prefs', JSON.stringify(prefs)) } catch { /* ignore */ }
|
||||
setPrefsStatus({ ok: true, text: 'تم حفظ التفضيلات ✓' })
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
setLogoutBusy(true)
|
||||
await fetch('/api/users/logout', { method: 'POST' })
|
||||
router.refresh()
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const entitled = role === 'vip' || role === 'admin'
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="settings-nav" role="tablist" aria-label="أقسام الإعدادات" data-od-id="settings-nav">
|
||||
{TABS.map(t => (
|
||||
<button role="tab" key={t.id} id={`tab-${t.id}`} aria-selected={tab === t.id} aria-controls={`panel-${t.id}`} data-tab={t.id} onClick={() => setTab(t.id)}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="panels">
|
||||
<section className={`panel${tab === 'profile' ? ' active' : ''}`} id="panel-profile" role="tabpanel" aria-labelledby="tab-profile" data-od-id="panel-profile">
|
||||
<h2>الملف الشخصي</h2>
|
||||
<p className="panel-sub">الاسم كما يظهر في تعليقاتك وقوائم الحفظ. البريد الإلكتروني هو معرّف الدخول ولا يتغير من هنا.</p>
|
||||
<form className="form-grid" id="profileForm" noValidate onSubmit={saveProfile}>
|
||||
<div className="field"><label htmlFor="fullName">الاسم الكامل</label><input className="input" id="fullName" name="fullName" value={name} onChange={e => setName(e.target.value)} autoComplete="name" required /></div>
|
||||
<div className="field"><label htmlFor="email">البريد الإلكتروني</label><input className="input" id="email" value={email} disabled /><span className="hint">لتغيير البريد تواصل معنا على <bdi>hello@anwarpi.ai</bdi></span></div>
|
||||
<button className="btn btn-primary" type="submit" data-od-id="save-profile" disabled={profileBusy}>{profileBusy ? 'جارٍ الحفظ…' : 'حفظ التغييرات'}</button>
|
||||
<p className={`status ${profileStatus?.ok ? 'ok' : profileStatus ? 'err' : ''}`} id="profileStatus" role="status">{profileStatus?.text}</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className={`panel${tab === 'password' ? ' active' : ''}`} id="panel-password" role="tabpanel" aria-labelledby="tab-password" data-od-id="panel-password">
|
||||
<h2>تغيير كلمة المرور</h2>
|
||||
<p className="panel-sub">بعد التغيير تبقى جلستك الحالية مفتوحة، وتُطلب كلمة المرور الجديدة عند الدخول من جهاز آخر.</p>
|
||||
<form className="form-grid" id="passwordForm" noValidate onSubmit={changePassword}>
|
||||
<div className="field"><label htmlFor="currentPw">كلمة المرور الحالية</label><input className="input" id="currentPw" type="password" name="currentPw" autoComplete="current-password" required value={currentPw} onChange={e => setCurrentPw(e.target.value)} /></div>
|
||||
<div className="field"><label htmlFor="newPw">كلمة المرور الجديدة</label><input className="input" id="newPw" type="password" name="newPw" autoComplete="new-password" required minLength={8} aria-describedby="pwRules" value={newPw} onChange={e => setNewPw(e.target.value)} /></div>
|
||||
<ul className="pw-rules" id="pwRules">
|
||||
<li data-rule="len" className={rulesOk.len ? 'ok' : ''}>٨ أحرف على الأقل</li>
|
||||
<li data-rule="num" className={rulesOk.num ? 'ok' : ''}>تحتوي رقماً واحداً على الأقل</li>
|
||||
<li data-rule="diff" className={rulesOk.diff ? 'ok' : ''}>تختلف عن كلمة المرور الحالية</li>
|
||||
</ul>
|
||||
<div className="field"><label htmlFor="confirmPw">تأكيد كلمة المرور</label><input className="input" id="confirmPw" type="password" name="confirmPw" autoComplete="new-password" required value={confirmPw} onChange={e => setConfirmPw(e.target.value)} /></div>
|
||||
<button className="btn btn-primary" type="submit" data-od-id="save-password" disabled={pwBusy}>{pwBusy ? 'جارٍ التحديث…' : 'تحديث كلمة المرور'}</button>
|
||||
<p className={`status ${pwStatus?.ok ? 'ok' : pwStatus ? 'err' : ''}`} id="passwordStatus" role="status" aria-live="polite">{pwStatus?.text}</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className={`panel${tab === 'prefs' ? ' active' : ''}`} id="panel-prefs" role="tabpanel" aria-labelledby="tab-prefs" data-od-id="panel-prefs">
|
||||
<h2>التفضيلات</h2>
|
||||
<p className="panel-sub">رسائل أنور بي آي قليلة ومقصودة. يمكنك إيقاف أي نوع منها من دون التأثير على عضويتك.</p>
|
||||
<div className="prefs">
|
||||
<div className="pref-row"><div><strong>الرسالة الأسبوعية</strong><p>خلاصة ما نُشر من أدلة ومقالات، كل يوم أحد.</p></div>
|
||||
<label className="switch"><input type="checkbox" id="prefWeekly" aria-label="تفعيل الرسالة الأسبوعية" checked={prefs.weekly} onChange={e => setPrefs(p => ({ ...p, weekly: e.target.checked }))} /><span className="track"></span></label></div>
|
||||
<div className="pref-row"><div><strong>إشعارات التعليقات</strong><p>رسالة عند ردّ أحد الأعضاء على تعليقك.</p></div>
|
||||
<label className="switch"><input type="checkbox" id="prefReplies" aria-label="تفعيل إشعارات التعليقات" checked={prefs.replies} onChange={e => setPrefs(p => ({ ...p, replies: e.target.checked }))} /><span className="track"></span></label></div>
|
||||
<div className="pref-row"><div><strong>تحديثات الأدلة المحفوظة</strong><p>إشعار عندما يُحدَّث دليل حفظته للعودة إليه.</p></div>
|
||||
<label className="switch"><input type="checkbox" id="prefUpdates" aria-label="تفعيل تحديثات الأدلة المحفوظة" checked={prefs.updates} onChange={e => setPrefs(p => ({ ...p, updates: e.target.checked }))} /><span className="track"></span></label></div>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="button" id="savePrefs" style={{ marginTop: 28 }} data-od-id="save-prefs" onClick={savePrefs}>حفظ التفضيلات</button>
|
||||
<p className={`status ${prefsStatus?.ok ? 'ok' : prefsStatus ? 'err' : ''}`} id="prefsStatus" role="status">{prefsStatus?.text}</p>
|
||||
</section>
|
||||
|
||||
<section className={`panel${tab === 'membership' ? ' active' : ''}`} id="panel-membership" role="tabpanel" aria-labelledby="tab-membership" data-od-id="panel-membership">
|
||||
<h2>العضوية والفوترة</h2>
|
||||
<p className="panel-sub">خطتك وحالة وصولك. الإلغاء يوقف التجديد التالي ويحفظ وصولك حتى نهاية الفترة المدفوعة.</p>
|
||||
<article className="membership-card" data-od-id="membership-card">
|
||||
<div className="membership-head">
|
||||
<div><h3 id="planName">{entitled ? 'عضوية فردية' : 'حساب مجاني'}</h3><span className="hint">الحالة الحقيقية لحسابك</span></div>
|
||||
<span className={`state-chip${entitled ? '' : ' cancelled'}`} id="planState">{entitled ? 'نشطة' : role === 'admin' ? 'إداري' : 'مجاني'}</span>
|
||||
</div>
|
||||
<div className="plan-details">
|
||||
<div><span className="price-tag"><bdi dir="ltr">10$</bdi><small>شهرياً</small></span></div>
|
||||
<dl style={{ margin: 0 }}><dt>الوصول</dt><dd>{entitled ? 'كامل — كل الأدلة الحصرية وملفات العمل' : 'المقالات المجانية ومعاينة الأدلة'}</dd></dl>
|
||||
<dl style={{ margin: 0 }}><dt>طريقة الدفع</dt><dd id="payMethod">ستُربط عبر Stripe</dd></dl>
|
||||
<dl style={{ margin: 0 }}><dt>الوصول بعد الإلغاء</dt><dd>حتى نهاية الفترة المدفوعة</dd></dl>
|
||||
</div>
|
||||
<div className="membership-actions" id="membershipActions">
|
||||
{!entitled && <Link className="btn btn-primary" href="/subscription" id="resubLink">اشترك الآن</Link>}
|
||||
</div>
|
||||
</article>
|
||||
<div className="cancel-zone" id="cancelZone" data-od-id="cancel-zone">
|
||||
<h3>إلغاء الاشتراك</h3>
|
||||
{entitled ? (
|
||||
<>
|
||||
<p>ربط الدفع (Stripe) غير مكتمل بعد — الإلغاء الذاتي سيتاح بعد ربط الدفع. حتى ذلك الحين تواصل معنا على <bdi>hello@anwarpi.ai</bdi> لأي تغيير.</p>
|
||||
<button className="text-danger" type="button" id="cancelOpen" data-od-id="cancel-open" disabled>إلغاء الاشتراك</button>
|
||||
<p className="hint">سيتاح بعد ربط الدفع</p>
|
||||
</>
|
||||
) : (
|
||||
<p>لا يوجد اشتراك مدفوع لإلغائه. يمكنك الترقية في أي وقت من صفحة <Link className="text-link" href="/subscription">العضوية</Link>.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="billing" data-od-id="billing-history">
|
||||
<h3>سجل الفواتير</h3>
|
||||
<p className="billing-sub">كل دفعة تُصدر فاتورة ضريبية فور اكتمالها وترسل إلى بريدك المسجّل. الفواتير متاحة للتنزيل في أي وقت.</p>
|
||||
<div className="billing-table" role="table" aria-label="سجل الفواتير">
|
||||
<div className="billing-row head" role="row">
|
||||
<span role="columnheader">التاريخ</span><span role="columnheader">الوصف</span><span role="columnheader">المبلغ</span><span role="columnheader">الحالة</span><span role="columnheader">الفاتورة</span>
|
||||
</div>
|
||||
<div className="billing-row" role="row">
|
||||
<span className="bdate" role="cell">—</span>
|
||||
<span className="desc" role="cell">لا فواتير بعد — ربط الدفع قادم</span>
|
||||
<span className="amt" role="cell">—</span>
|
||||
<span role="cell"><span className="hint">—</span></span>
|
||||
<span role="cell"><span className="hint">—</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="form-actions" style={{ marginTop: 32 }}>
|
||||
<button className="btn btn-secondary" type="button" onClick={logout} disabled={logoutBusy}>تسجيل الخروج</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,53 +1,64 @@
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import AccountSettingsClient from './client'
|
||||
import { formatDate } from '@/lib/format'
|
||||
import { billingEnabled } from '@/lib/launch'
|
||||
import configPromise from '@payload-config'
|
||||
import '../styles/account-settings.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'إعدادات الحساب' }
|
||||
|
||||
export default async function AccountSettingsPage() {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page page-account-settings">
|
||||
<Topnav viewer={user} />
|
||||
{user ? (
|
||||
<main id="content">
|
||||
<section className="page-head" data-od-id="settings-header"><div className="container">
|
||||
<p className="crumb">حسابك في أنور بآي</p>
|
||||
<h1 data-od-id="settings-title">إعدادات الحساب</h1>
|
||||
<p className="sub"><bdi>{String(user.email)}</bdi> · عضو منذ {user.createdAt ? formatDate(String(user.createdAt)) : 'اليوم'}</p>
|
||||
</div></section>
|
||||
<section className="container settings-layout" data-od-id="settings-layout">
|
||||
<AccountSettingsClient
|
||||
email={String(user.email)}
|
||||
userId={Number(user.id)}
|
||||
fullName={(user.fullName as string) || ''}
|
||||
role={((user.role as string) || 'free')}
|
||||
billingEnabled={billingEnabled()}
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
<main id="content" className="gate">
|
||||
<section className="gate-card">
|
||||
<h1>سجّل الدخول لإدارة حسابك</h1>
|
||||
<p>من هنا تعدّل اسمك وكلمة المرور وتفضيلات الرسائل، وتدير عضويتك.</p>
|
||||
<div className="actions">
|
||||
<a className="btn btn-primary" href="/login?next=%2Faccount-settings">تسجيل الدخول</a>
|
||||
<a className="btn btn-quiet" href="/signup">إنشاء حساب مجاني</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)}
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import Topnav from '@/components/topnav'
|
||||
import SiteMenu from '@/components/site-menu'
|
||||
import Footer from '@/components/footer'
|
||||
import AccountSettingsClient from './client'
|
||||
import configPromise from '@payload-config'
|
||||
import '../styles/account-settings.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'إعدادات الحساب' }
|
||||
|
||||
export default async function AccountSettingsPage() {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
|
||||
return (
|
||||
<>
|
||||
<Topnav
|
||||
viewer={user ? { email: String(user.email) } : null}
|
||||
accountLabel={user ? undefined : undefined}
|
||||
menu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/article-agent-guide', label: 'المقالات' },
|
||||
{ href: '/subscription', label: 'العضوية' },
|
||||
]}
|
||||
/>
|
||||
<SiteMenu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/agent-loop-stop-condition', label: 'دليل الأعضاء' },
|
||||
{ href: '/subscription', label: 'العضوية' },
|
||||
]}
|
||||
/>
|
||||
{user ? (
|
||||
<main>
|
||||
<section className="page-head" data-od-id="settings-header"><div className="container">
|
||||
<p className="crumb">حسابك في أنور بي آي</p>
|
||||
<h1 data-od-id="settings-title">إعدادات الحساب</h1>
|
||||
<p className="sub"><bdi>{String(user.email)}</bdi> · عضو منذ {user.createdAt ? new Date(String(user.createdAt)).toLocaleDateString('ar') : 'اليوم'}</p>
|
||||
</div></section>
|
||||
<section className="container settings-layout" data-od-id="settings-layout">
|
||||
<AccountSettingsClient
|
||||
email={String(user.email)}
|
||||
userId={Number(user.id)}
|
||||
fullName={(user.fullName as string) || ''}
|
||||
role={((user.role as string) || 'free')}
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
<main>
|
||||
<section className="page-head" data-od-id="settings-header"><div className="container">
|
||||
<p className="crumb">حسابك في أنور بي آي</p>
|
||||
<h1 data-od-id="settings-title">إعدادات الحساب</h1>
|
||||
<p className="sub">يجب <a className="text-link" href="/login">تسجيل الدخول</a> لعرض إعدادات الحساب.</p>
|
||||
</div></section>
|
||||
</main>
|
||||
)}
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { guidesLabel } from '@/lib/format'
|
||||
|
||||
/* Library controller — search/sort/filters/likes from articles.html, wired to
|
||||
the real backend: likes toggle via /api/posts/[slug]/like (401 → login),
|
||||
views come from the post-page counter, sort reads data-* attributes. */
|
||||
export default function ArticlesClient({ loggedIn }: { loggedIn: boolean }) {
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
const params = new URLSearchParams(location.search)
|
||||
const allowedTopics = ['all', 'agents', 'models', 'automation', 'foundations']
|
||||
const allowedAccess = ['all', 'free', 'vip']
|
||||
@@ -25,7 +23,7 @@ export default function ArticlesClient({ loggedIn }: { loggedIn: boolean }) {
|
||||
const empty = document.getElementById('emptyState')
|
||||
const search = document.getElementById('postSearch') as HTMLInputElement | null
|
||||
const sort = document.getElementById('postSort') as HTMLSelectElement | null
|
||||
const formatNumber = (value: number) => new Intl.NumberFormat('en-US').format(value)
|
||||
const formatNumber = (value: number) => new Intl.NumberFormat('ar').format(value)
|
||||
|
||||
function normalize(value: string) {
|
||||
return value.toLocaleLowerCase('ar').normalize('NFKD').replace(/[\u064B-\u065F\u0670]/g, '').replace(/[إأآ]/g, 'ا').replace(/ى/g, 'ي')
|
||||
@@ -35,7 +33,7 @@ export default function ArticlesClient({ loggedIn }: { loggedIn: boolean }) {
|
||||
const views = Number(post.dataset.viewsCount || 0)
|
||||
const likes = Number(post.dataset.likesCount || 0)
|
||||
const viewsEl = post.querySelector('[data-views]')
|
||||
if (viewsEl) viewsEl.textContent = `${formatNumber(views)} قراءة`
|
||||
if (viewsEl) viewsEl.textContent = `${formatNumber(views)} مشاهدة`
|
||||
const like = post.querySelector('[data-like]') as HTMLElement | null
|
||||
if (like) {
|
||||
like.setAttribute('aria-pressed', post.dataset.liked === '1' ? 'true' : 'false')
|
||||
@@ -53,13 +51,13 @@ export default function ArticlesClient({ loggedIn }: { loggedIn: boolean }) {
|
||||
ordered.forEach(post => list.appendChild(post))
|
||||
let visible = 0
|
||||
posts.forEach(post => {
|
||||
const topicMatch = state.topic === 'all' || (post.dataset.topic || '').split(' ').includes(state.topic)
|
||||
const topicMatch = state.topic === 'all' || post.dataset.topic === state.topic
|
||||
const accessMatch = state.access === 'all' || post.dataset.access === state.access
|
||||
const queryMatch = !state.query || normalize(post.textContent || '').includes(normalize(state.query))
|
||||
post.hidden = !(topicMatch && accessMatch && queryMatch)
|
||||
if (!post.hidden) visible += 1
|
||||
})
|
||||
if (count) count.textContent = visible === 0 ? 'لا نتائج' : guidesLabel(visible)
|
||||
if (count) count.textContent = `${formatNumber(visible)} ${visible === 1 ? 'مادة' : 'مواد'}`
|
||||
empty?.classList.toggle('show', visible === 0)
|
||||
}
|
||||
|
||||
@@ -71,10 +69,10 @@ export default function ArticlesClient({ loggedIn }: { loggedIn: boolean }) {
|
||||
})
|
||||
button.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
||||
applyFilters()
|
||||
}, { signal: controller.signal }))
|
||||
}))
|
||||
|
||||
search?.addEventListener('input', () => { state.query = search.value.trim(); applyFilters() }, { signal: controller.signal })
|
||||
sort?.addEventListener('change', () => { state.sort = sort.value; applyFilters() }, { signal: controller.signal })
|
||||
search?.addEventListener('input', () => { state.query = search.value.trim(); applyFilters() })
|
||||
sort?.addEventListener('change', () => { state.sort = sort.value; applyFilters() })
|
||||
|
||||
posts.forEach(post => {
|
||||
paintMetrics(post)
|
||||
@@ -92,12 +90,11 @@ export default function ArticlesClient({ loggedIn }: { loggedIn: boolean }) {
|
||||
post.dataset.liked = data.liked ? '1' : '0'
|
||||
paintMetrics(post)
|
||||
applyFilters()
|
||||
}, { signal: controller.signal })
|
||||
})
|
||||
})
|
||||
|
||||
buttons.forEach(button => button.setAttribute('aria-pressed', String(button.dataset.filterValue === state[button.dataset.filterKind!])))
|
||||
applyFilters()
|
||||
return () => controller.abort()
|
||||
}, [loggedIn])
|
||||
|
||||
return null
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import configPromise from '@payload-config'
|
||||
import Link from 'next/link'
|
||||
import ArticlesClient from './articles-client'
|
||||
import { TOPICS, topicsFor, INTEREST_MAP } from '@/lib/topics'
|
||||
import { formatNumber, guidesLabel, minutesLabel, contentTypeLabel } from '@/lib/format'
|
||||
import '../styles/articles.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = {
|
||||
title: 'المكتبة',
|
||||
description:
|
||||
'أدلة الذكاء الاصطناعي العملية بالعربية: وكلاء، نماذج، استرجاع، سلامة، أدوات، وأعمال — بخطوات قابلة للتطبيق وتجارب موثقة وملفات عمل.',
|
||||
export const metadata = { title: 'المكتبة' }
|
||||
|
||||
const TOPIC_MAP: Record<string, string> = {
|
||||
'وكلاء': 'agents',
|
||||
'نماذج': 'models',
|
||||
'استرجاع': 'models',
|
||||
'سلامة': 'agents',
|
||||
'أدوات': 'agents',
|
||||
'أعمال': 'automation',
|
||||
}
|
||||
|
||||
/* Interest (member onboarding) → library topic, for personalization boost */
|
||||
const INTEREST_MAP: Record<string, string> = {
|
||||
'الوكلاء': 'agents',
|
||||
'RAG': 'models',
|
||||
'الأتمتة': 'automation',
|
||||
'النماذج المفتوحة': 'models',
|
||||
}
|
||||
|
||||
type PostDoc = {
|
||||
@@ -27,25 +37,26 @@ type PostDoc = {
|
||||
views: number
|
||||
likes: number
|
||||
publishedAt: string
|
||||
cover?: { url?: string | null } | number | null
|
||||
contentType?: string | null
|
||||
}
|
||||
|
||||
type Viewer = { id: number; email: string; role: string; interest: string | null; level: string | null } | null
|
||||
|
||||
function toArabic(n: number): string {
|
||||
return String(n).replace(/\d/g, d => '٠١٢٣٤٥٦٧٨٩'[Number(d)])
|
||||
}
|
||||
|
||||
export default async function ArticlesPage() {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const [res, auth] = await Promise.all([
|
||||
payload.find({
|
||||
collection: 'posts',
|
||||
where: { status: { equals: 'published' } },
|
||||
depth: 1,
|
||||
depth: 0,
|
||||
limit: 100,
|
||||
sort: '-publishedAt',
|
||||
select: {
|
||||
title: true, slug: true, dek: true, access: true, category: true, level: true,
|
||||
readingMinutes: true, views: true, likes: true, publishedAt: true, cover: true,
|
||||
contentType: true,
|
||||
readingMinutes: true, views: true, likes: true, publishedAt: true,
|
||||
},
|
||||
}),
|
||||
payload.auth({ headers: await headers() }),
|
||||
@@ -79,105 +90,133 @@ export default async function ArticlesPage() {
|
||||
posts.forEach((post, i) => {
|
||||
const el = post as unknown as { _order?: number; _match?: boolean }
|
||||
el._order = posts.length - i
|
||||
el._match = !!interestTopic && topicsFor(post).some(topic => topic === interestTopic) && post.level === viewer!.level
|
||||
el._match = !!interestTopic && TOPIC_MAP[post.category] === interestTopic && post.level === viewer!.level
|
||||
if (el._match) el._order += 1000
|
||||
})
|
||||
|
||||
const freeCount = posts.filter(p => p.access === 'free').length
|
||||
const weekly = posts.find(p => p.slug === 'article-agent-guide')
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page v2 v2-library">
|
||||
<Topnav viewer={viewer} />
|
||||
<>
|
||||
<TopnavStatic loggedIn={!!viewer} />
|
||||
<ArticlesClient loggedIn={!!viewer} />
|
||||
<main id="content">
|
||||
<section className="lib-head" aria-labelledby="library-title">
|
||||
<div className="wrap">
|
||||
<h1 id="library-title">المكتبة</h1>
|
||||
<p className="lede">تضم المكتبة {guidesLabel(posts.length)}، منها {guidesLabel(freeCount)} متاحة مجاناً بالكامل. ابحث بالموضوع أو صفِّ النتائج حسب المسار.</p>
|
||||
<div className="lib-tools">
|
||||
<label className="lib-search">
|
||||
<span className="sr-only">ابحث في العناوين والوصف</span>
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M13 13l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
|
||||
<input id="postSearch" type="search" autoComplete="off" placeholder="ابحث: وكيل، RAG، اختيار النموذج…" />
|
||||
</label>
|
||||
<label className="lib-sort">
|
||||
<span>الترتيب</span>
|
||||
<select id="postSort"><option value="latest">الأحدث</option><option value="views">الأكثر قراءة</option><option value="likes">الأكثر إعجاباً</option></select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="lib-filters">
|
||||
<div className="segmented" role="group" aria-label="المسار">
|
||||
<button type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">كل المسارات</button>
|
||||
{TOPICS.map(topic => (
|
||||
<button type="button" data-filter-kind="topic" data-filter-value={topic.key} aria-pressed="false" key={topic.key}>{topic.label}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="segmented" role="group" aria-label="نوع الوصول">
|
||||
<button type="button" data-filter-kind="access" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button type="button" data-filter-kind="access" data-filter-value="free" aria-pressed="false">مجاني</button>
|
||||
<button type="button" data-filter-kind="access" data-filter-value="vip" aria-pressed="false">للأعضاء</button>
|
||||
</div>
|
||||
<section className="hero" data-od-id="library-hero">
|
||||
<div className="container hero-grid">
|
||||
<div>
|
||||
<p className="eyebrow">مكتبة أنور بي آي</p>
|
||||
<h1 data-od-id="library-title">كل المقالات. بلا ضياع.</h1>
|
||||
<p className="lead">ابحث، اختر مسارك، ورتّب النتائج حسب الأحدث أو التفاعل المسجّل.</p>
|
||||
</div>
|
||||
{weekly && (
|
||||
<a className="weekly" href={`/posts/${weekly.slug}`} data-od-id="weekly-post">
|
||||
<div className="weekly-meta"><span>مقال هذا الأسبوع</span><span>مجاني · {toArabic(weekly.readingMinutes)} دقيقة</span></div>
|
||||
<h2>{weekly.title}</h2>
|
||||
<p>{weekly.dek}</p>
|
||||
<span className="weekly-link">اقرأ المقال ←</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="lib-results" aria-label="الأدلة">
|
||||
<div className="wrap">
|
||||
<nav className="topic-strip" aria-label="تصفّح المسارات">
|
||||
{TOPICS.map(topic => <Link key={topic.key} href={`/topics/${topic.key}`}>{topic.label}</Link>)}
|
||||
</nav>
|
||||
<p className="results-count" id="resultCount" aria-live="polite">{guidesLabel(posts.length)}</p>
|
||||
<div className="lib-grid" id="postList">
|
||||
<section className="library" data-od-id="article-library">
|
||||
<div className="container">
|
||||
<div className="library-tools" data-od-id="library-search-sort">
|
||||
<label><span className="filter-label">ابحث في العناوين والوصف</span><input className="control" id="postSearch" type="search" autoComplete="off" placeholder="مثال: الوكلاء، RAG، اختيار النموذج" /></label>
|
||||
<label><span className="filter-label">الترتيب</span><select className="control" id="postSort"><option value="latest">الأحدث أولاً</option><option value="views">الأكثر مشاهدة</option><option value="likes">الأكثر إعجاباً</option></select></label>
|
||||
</div>
|
||||
<div className="filter-panel" data-od-id="library-filters">
|
||||
<div className="filter-group" role="group" aria-label="تصفية حسب المسار">
|
||||
<span className="filter-label">المسار / الفئة</span>
|
||||
<div className="filters">
|
||||
<button className="filter" type="button" data-filter-kind="topic" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button className="filter" type="button" data-filter-kind="topic" data-filter-value="agents" aria-pressed="false">الوكلاء</button>
|
||||
<button className="filter" type="button" data-filter-kind="topic" data-filter-value="models" aria-pressed="false">النماذج</button>
|
||||
<button className="filter" type="button" data-filter-kind="topic" data-filter-value="automation" aria-pressed="false">الأتمتة</button>
|
||||
<button className="filter" type="button" data-filter-kind="topic" data-filter-value="foundations" aria-pressed="false">الأساسيات</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="filter-group" role="group" aria-label="تصفية حسب نوع الوصول">
|
||||
<span className="filter-label">نوع الوصول</span>
|
||||
<div className="filters">
|
||||
<button className="filter" type="button" data-filter-kind="access" data-filter-value="all" aria-pressed="true">الكل</button>
|
||||
<button className="filter" type="button" data-filter-kind="access" data-filter-value="free" aria-pressed="false">مجاني</button>
|
||||
<button className="filter" type="button" data-filter-kind="access" data-filter-value="vip" aria-pressed="false">VIP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="results-head">
|
||||
<h2 data-od-id="posts-heading">جميع المواد</h2>
|
||||
<span className="count" id="resultCount" aria-live="polite">{toArabic(posts.length)} مواد</span>
|
||||
</div>
|
||||
|
||||
<div className="posts" id="postList">
|
||||
{posts.map(post => {
|
||||
const meta = post as unknown as { _order?: number; _match?: boolean }
|
||||
const topics = topicsFor(post)
|
||||
const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
|
||||
const topic = TOPIC_MAP[post.category] ?? 'agents'
|
||||
return (
|
||||
<article
|
||||
className="post guide-card"
|
||||
className="post"
|
||||
key={post.id}
|
||||
data-topic={topics.join(' ')}
|
||||
data-topic={topic}
|
||||
data-access={post.access}
|
||||
data-level={post.level}
|
||||
data-views-count={post.views ?? 0}
|
||||
data-likes-count={post.likes ?? 0}
|
||||
data-liked={likedSlugs.has(post.slug) ? '1' : '0'}
|
||||
data-order={meta._order}
|
||||
data-od-id={`post-${post.slug}`}
|
||||
>
|
||||
{coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
|
||||
<div className="guide-card-body">
|
||||
<p className="meta-row">
|
||||
<span>{post.category}</span>
|
||||
{contentTypeLabel(post.contentType) && <span className="badge">{contentTypeLabel(post.contentType)}</span>}
|
||||
<span>{minutesLabel(post.readingMinutes)}</span>
|
||||
<span>{post.level}</span>
|
||||
{meta._match && <span className="for-you">يناسب مستواك</span>}
|
||||
</p>
|
||||
<h2 className="guide-card-title"><Link href={`/posts/${post.slug}`}>{post.title}</Link></h2>
|
||||
<p className="guide-card-dek">{post.dek}</p>
|
||||
<div className="guide-card-foot">
|
||||
<span className={`badge ${post.access === 'vip' ? 'badge-vip' : 'badge-free'}`}>{post.access === 'free' ? 'مجاني' : 'للأعضاء'}</span>
|
||||
<span className="engagement">
|
||||
<span data-views>{formatNumber(post.views ?? 0)} قراءة</span>
|
||||
<button className="like" type="button" data-like={post.slug} aria-pressed={likedSlugs.has(post.slug)} aria-label="أعجبني">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 13.5 2.6 8.3a3.2 3.2 0 0 1 4.5-4.6L8 4.6l.9-.9a3.2 3.2 0 0 1 4.5 4.6Z" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>
|
||||
<span>{formatNumber(post.likes ?? 0)}</span>
|
||||
</button>
|
||||
</span>
|
||||
<div className="post-meta">
|
||||
<span>{post.category}</span>
|
||||
<span className="num">{toArabic(post.readingMinutes)} دقيقة · {post.level}</span>
|
||||
{meta._match && <span className="foryou">يناسب مستواك</span>}
|
||||
</div>
|
||||
<div><h3>{post.title}</h3><p>{post.dek}</p><Link className="post-link" href={`/posts/${post.slug}`}>{post.access === 'free' ? 'ابدأ القراءة ←' : 'شاهد المعاينة ←'}</Link></div>
|
||||
<div className="post-side">
|
||||
<span className={`access${post.access === 'free' ? ' free' : ''}`}>{post.access === 'free' ? 'مجاني · كامل' : 'VIP · معاينة'}</span>
|
||||
<div className="engagement">
|
||||
<span data-views>{toArabic(post.views ?? 0)} مشاهدة</span>
|
||||
<button className="like" type="button" data-like={post.slug} aria-pressed={likedSlugs.has(post.slug)}>
|
||||
إعجاب · <span>{toArabic(post.likes ?? 0)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="empty" id="emptyState">
|
||||
<p>لا يوجد دليل يطابق هذا البحث.</p>
|
||||
<p>جرّب كلمة أقصر أو اختر «كل المسارات».</p>
|
||||
</div>
|
||||
<p className="empty" id="emptyState">لا توجد مواد تطابق البحث والفلاتر الحالية.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<footer className="pagefoot" data-od-id="footer">
|
||||
<div className="container footer-row"><span>© أنور بي آي ٢٠٢٦ · تعلّم بوضوح</span><span><Link href="/terms">الشروط</Link> · <Link href="/privacy">الخصوصية</Link></span></div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function TopnavStatic({ loggedIn }: { loggedIn: boolean }) {
|
||||
return (
|
||||
<header className="topnav" data-od-id="topnav">
|
||||
<div className="container topnav-inner">
|
||||
<Link className="logo" href="/" data-od-id="brand">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="logo-mark" src="/anwarpi-logo.jpg" alt="" width={30} height={34} />
|
||||
أنور بي آي
|
||||
</Link>
|
||||
<nav aria-label="التنقل الرئيسي">
|
||||
<Link href="/articles" aria-current="page" data-od-id="nav-library">المكتبة</Link>
|
||||
<Link href="/#topics" data-od-id="nav-topics">المسارات</Link>
|
||||
<Link href="/subscription" data-od-id="nav-subscription">العضوية</Link>
|
||||
<Link href="/about" data-od-id="nav-about">عن الفريق</Link>
|
||||
</nav>
|
||||
{!loggedIn
|
||||
? <Link className="nav-action" href="/login" data-od-id="login-link">تسجيل الدخول</Link>
|
||||
: <Link className="nav-action" href="/account-settings" data-od-id="account-link">حسابي</Link>}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export type DeckSlide = {
|
||||
kicker: string
|
||||
index: string
|
||||
title: React.ReactNode
|
||||
body: string
|
||||
format: React.ReactNode
|
||||
link?: { href: string; label: string }
|
||||
meta?: React.ReactNode
|
||||
}
|
||||
|
||||
const V1_SLIDES: DeckSlide[] = [
|
||||
{
|
||||
kicker: 'دليل حصري · المستوى المتوسط',
|
||||
index: '01',
|
||||
title: 'ابنِ وكيلك الأول دون فوضى',
|
||||
body: 'خريطة عملية لتقسيم المهام، اختيار الأدوات، وضبط ذاكرة الوكيل قبل كتابة الكود.',
|
||||
format: <><span className="play" aria-hidden="true">▶</span>فيديو · 28 دقيقة</>,
|
||||
link: { href: '/posts/agent-loop-stop-condition', label: 'شاهد المعاينة ←' },
|
||||
},
|
||||
{
|
||||
kicker: 'مقال تطبيقي · للمبتدئين',
|
||||
index: '02',
|
||||
title: 'كيف تختار نموذجاً لمهمتك؟',
|
||||
body: 'مقارنة منهجية حسب الجودة، التكلفة، السرعة، والخصوصية — من دون ضجيج تسويقي.',
|
||||
format: <>قراءة · 12 دقيقة</>,
|
||||
link: { href: '/posts/article-agent-guide', label: 'ابدأ القراءة ←' },
|
||||
},
|
||||
{
|
||||
kicker: 'مسار متقدم · للأعضاء',
|
||||
index: '03',
|
||||
title: <>من <bdi dir="ltr">RAG</bdi> إلى إجابة موثوقة</>,
|
||||
body: 'صمّم الاسترجاع، اختبر المصادر، وافهم أين تنهار الإجابة قبل أن تصل إلى المستخدم.',
|
||||
format: <><span className="play" aria-hidden="true">▶</span>سلسلة · 4 أجزاء</>,
|
||||
link: { href: '/subscription', label: 'شاهد للأعضاء ←' },
|
||||
},
|
||||
]
|
||||
|
||||
const DOT_LABELS = ['الشريحة الأولى', 'الشريحة الثانية', 'الشريحة الثالثة']
|
||||
|
||||
/* Featured deck — markup and slide logic from arabic-ai-learning-catalog(.v2).html
|
||||
(autoplay 6.5s, dots, arrows, localStorage persistence). Slides render a
|
||||
link when given; otherwise the v2 home variant shows a meta tag. */
|
||||
export default function CatalogDeck({ slides = V1_SLIDES }: { slides?: DeckSlide[] }) {
|
||||
useEffect(() => {
|
||||
const slideEls = [...document.querySelectorAll('.deck-slide')] as HTMLElement[]
|
||||
const dots = [...document.querySelectorAll('.deck-dot')] as HTMLElement[]
|
||||
let activeSlide = Number(localStorage.getItem('midad-slide') || 0) % slideEls.length
|
||||
let timer: ReturnType<typeof setInterval> | undefined
|
||||
|
||||
function showSlide(index: number) {
|
||||
activeSlide = (index + slideEls.length) % slideEls.length
|
||||
slideEls.forEach((slide, i) => slide.classList.toggle('active', i === activeSlide))
|
||||
dots.forEach((dot, i) => {
|
||||
dot.classList.toggle('active', i === activeSlide)
|
||||
dot.setAttribute('aria-current', i === activeSlide ? 'true' : 'false')
|
||||
})
|
||||
localStorage.setItem('midad-slide', String(activeSlide))
|
||||
}
|
||||
function restartDeck() {
|
||||
clearInterval(timer)
|
||||
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) timer = setInterval(() => showSlide(activeSlide + 1), 6500)
|
||||
}
|
||||
document.getElementById('prevSlide')?.addEventListener('click', () => { showSlide(activeSlide - 1); restartDeck() })
|
||||
document.getElementById('nextSlide')?.addEventListener('click', () => { showSlide(activeSlide + 1); restartDeck() })
|
||||
dots.forEach(dot => dot.addEventListener('click', () => { showSlide(Number((dot as HTMLElement).dataset.dot)); restartDeck() }))
|
||||
/* QA-05: keep controls stationary — pause autoplay while hovered/focused. */
|
||||
const deck = document.querySelector('.deck')
|
||||
deck?.addEventListener('mouseenter', () => clearInterval(timer))
|
||||
deck?.addEventListener('mouseleave', () => restartDeck())
|
||||
deck?.addEventListener('focusin', () => clearInterval(timer))
|
||||
deck?.addEventListener('focusout', () => restartDeck())
|
||||
showSlide(activeSlide)
|
||||
restartDeck()
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="deck" data-od-id="featured-deck" aria-label="مختارات مميزة">
|
||||
<div className="deck-frame" aria-live="polite">
|
||||
{slides.map((s, i) => (
|
||||
<article className={`deck-slide${i === 0 ? ' active' : ''}`} data-slide={i} key={i}>
|
||||
<div className="deck-slide-top"><span className="deck-slide-kicker">{s.kicker}</span><span className="deck-slide-index num">{s.index}</span></div>
|
||||
<div className="deck-slide-body"><h2>{s.title}</h2><p>{s.body}</p></div>
|
||||
<div className="deck-slide-foot">
|
||||
<span className="deck-slide-format">{s.format}</span>
|
||||
{s.link
|
||||
? <Link className="deck-slide-link" href={s.link.href}>{s.link.label}</Link>
|
||||
: <span className="meta">{s.meta}</span>}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<div className="deck-controls">
|
||||
<div className="deck-dots" aria-label="اختيار الشريحة">
|
||||
{slides.map((_, i) => (
|
||||
<button className={`deck-dot${i === 0 ? ' active' : ''}`} data-dot={i} aria-label={DOT_LABELS[i]} key={i}></button>
|
||||
))}
|
||||
</div>
|
||||
<div className="deck-arrows">
|
||||
<button className="icon-btn" id="prevSlide" aria-label="الشريحة السابقة">←</button>
|
||||
<button className="icon-btn" id="nextSlide" aria-label="الشريحة التالية">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
/* Filter bar — port of the catalog page's filter logic; also wired to the
|
||||
topic path cards via [data-topic-link]. Hides non-matching catalog cards. */
|
||||
export default function CatalogFilters() {
|
||||
useEffect(() => {
|
||||
const filters = [...document.querySelectorAll('.filter')] as HTMLElement[]
|
||||
const cards = [...document.querySelectorAll('.catalog-card')] as HTMLElement[]
|
||||
const empty = document.getElementById('emptyState')
|
||||
|
||||
function filterCatalog(topic: string) {
|
||||
let visible = 0
|
||||
filters.forEach(button => {
|
||||
const selected = (button as HTMLElement).dataset.filter === topic
|
||||
button.classList.toggle('active', selected)
|
||||
button.setAttribute('aria-pressed', String(selected))
|
||||
})
|
||||
cards.forEach(card => {
|
||||
const show = topic === 'all' || card.dataset.topic === topic
|
||||
card.hidden = !show
|
||||
if (show) visible += 1
|
||||
})
|
||||
empty?.classList.toggle('show', visible === 0)
|
||||
}
|
||||
|
||||
filters.forEach(button => button.addEventListener('click', () => {
|
||||
button.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
||||
filterCatalog((button as HTMLElement).dataset.filter!)
|
||||
}))
|
||||
document.querySelectorAll('[data-topic-link]').forEach(link =>
|
||||
link.addEventListener('click', () => {
|
||||
const topic = (link as HTMLElement).dataset.topicLink!
|
||||
filterCatalog(topic)
|
||||
filters.find(button => button.dataset.filter === topic)?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
|
||||
})
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="filterbar" role="group" aria-label="تصفية المحتوى" data-od-id="catalog-filters">
|
||||
<button className="filter active" data-filter="all" aria-pressed="true">الكل</button>
|
||||
<button className="filter" data-filter="agents" aria-pressed="false">الوكلاء</button>
|
||||
<button className="filter" data-filter="models" aria-pressed="false">النماذج</button>
|
||||
<button className="filter" data-filter="automation" aria-pressed="false">الأتمتة</button>
|
||||
<button className="filter" data-filter="foundations" aria-pressed="false">الأساسيات</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
/* QA-07: /catalog was a stale duplicate library — /articles is canonical. */
|
||||
/* QA-07: /catalog was a stale duplicate library — /articles is canonical.
|
||||
Deck/filter components in this folder are still used by the homepage. */
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export default function CatalogPage() {
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
/* QA-06: page-specific title (the page itself is a client component).
|
||||
Utility pages stay out of search indexes (step 38). */
|
||||
export const metadata: Metadata = {
|
||||
title: 'استعادة كلمة المرور',
|
||||
robots: { index: false, follow: true },
|
||||
}
|
||||
/* QA-06: page-specific title (the page itself is a client component). */
|
||||
export const metadata: Metadata = { title: 'استعادة كلمة المرور' }
|
||||
|
||||
export default function ForgotPasswordLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
|
||||
@@ -1,62 +1,59 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import '../styles/forgot-password.css'
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [status, setStatus] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const form = e.currentTarget
|
||||
if (!form.checkValidity()) {
|
||||
setStatus('أدخل بريداً إلكترونياً صحيحاً.')
|
||||
form.reportValidity()
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
setStatus('')
|
||||
try {
|
||||
const response = await fetch('/api/users/forgot-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email }),
|
||||
})
|
||||
if (!response.ok) throw new Error('Request failed')
|
||||
setStatus('إذا كان البريد مسجلاً، فسيصلك رابط الاستعادة.')
|
||||
setEmail('')
|
||||
} catch {
|
||||
setStatus('تعذّر إرسال الطلب. حاول مرة أخرى بعد قليل.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page page-forgot-password">
|
||||
<Topnav />
|
||||
<main id="content" className="reset" data-od-id="password-reset">
|
||||
<section className="reset-card" data-od-id="reset-card">
|
||||
<p className="eyebrow">استعادة الحساب</p>
|
||||
<h1 data-od-id="reset-title">استعادة كلمة المرور</h1>
|
||||
<p className="lead">أدخل البريد الإلكتروني المرتبط بحسابك لتصلك رسالة إعادة تعيين كلمة المرور.</p>
|
||||
<form id="resetForm" method="post" action="/api/users/forgot-password" noValidate onSubmit={onSubmit} data-od-id="reset-form">
|
||||
<div className="field">
|
||||
<label htmlFor="resetEmail">البريد الإلكتروني</label>
|
||||
<input className="input" id="resetEmail" name="email" type="email" inputMode="email" autoComplete="email" dir="ltr" required value={email} onChange={e => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<button className="btn btn-primary" type="submit" data-od-id="reset-submit" disabled={busy}>{busy ? 'جارٍ الإرسال…' : 'إرسال رابط الاستعادة'}</button>
|
||||
<p className="status" id="resetStatus" role="status" aria-live="polite">{status}</p>
|
||||
</form>
|
||||
<Link className="back" href="/login">تذكرت كلمة المرور؟ سجّل الدخول</Link>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import '../styles/forgot-password.css'
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [status, setStatus] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const form = e.currentTarget
|
||||
if (!form.checkValidity()) {
|
||||
setStatus('أدخل بريداً إلكترونياً صحيحاً.')
|
||||
form.reportValidity()
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
await fetch('/api/users/forgot-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email }),
|
||||
})
|
||||
setStatus('إذا كان البريد مسجلاً، فسيصلك رابط الاستعادة.')
|
||||
form.reset()
|
||||
setBusy(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Topnav
|
||||
viewer={null}
|
||||
logoHref="/articles"
|
||||
links={[]}
|
||||
/>
|
||||
<main className="reset" data-od-id="password-reset">
|
||||
<section className="reset-card" data-od-id="reset-card">
|
||||
<p className="eyebrow">استعادة الحساب</p>
|
||||
<h1 data-od-id="reset-title">أرسل رابطاً جديداً.</h1>
|
||||
<p className="lead">أدخل بريد حسابك وسنجهّز طلب إعادة تعيين كلمة المرور.</p>
|
||||
<form id="resetForm" method="post" action="/api/users/forgot-password" noValidate onSubmit={onSubmit} data-od-id="reset-form">
|
||||
<div className="field">
|
||||
<label htmlFor="resetEmail">البريد الإلكتروني</label>
|
||||
<input className="input" id="resetEmail" name="email" type="email" inputMode="email" autoComplete="email" dir="ltr" required value={email} onChange={e => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<button className="btn" type="submit" data-od-id="reset-submit" disabled={busy}>{busy ? 'جارٍ الإرسال…' : 'إرسال رابط الاستعادة'}</button>
|
||||
<p className="status" id="resetStatus" role="status" aria-live="polite">{status}</p>
|
||||
</form>
|
||||
<Link className="back" href="/login">تذكرت كلمة المرور؟ سجّل الدخول</Link>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
/* QA-06: page-specific title (the page itself is a client component).
|
||||
Utility pages stay out of search indexes (step 38). */
|
||||
export const metadata: Metadata = {
|
||||
title: 'تسجيل الدخول',
|
||||
robots: { index: false, follow: true },
|
||||
}
|
||||
/* QA-06: page-specific title (the page itself is a client component). */
|
||||
export const metadata: Metadata = { title: 'تسجيل الدخول' }
|
||||
|
||||
export default function LoginLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import SiteMenu from '@/components/site-menu'
|
||||
import { safeNext } from '@/lib/next'
|
||||
import '../styles/login.css'
|
||||
|
||||
@@ -30,51 +30,69 @@ export default function LoginPage() {
|
||||
setBusy(true)
|
||||
setStatus('')
|
||||
const data = new FormData(form)
|
||||
try {
|
||||
const res = await fetch('/api/users/login', {
|
||||
const res = await fetch('/api/users/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: data.get('email'), password: data.get('password') }),
|
||||
})
|
||||
if (res.ok) {
|
||||
})
|
||||
if (res.ok) {
|
||||
router.refresh()
|
||||
router.push(safeNext(new URLSearchParams(window.location.search).get('next')) ?? '/account-settings')
|
||||
return
|
||||
}
|
||||
const err = await res.json().catch(() => null) as { error?: string; errors?: { message?: string }[] } | null
|
||||
// Rate-limit / middleware shape first: { error: string } + optional Retry-After.
|
||||
if (typeof err?.error === 'string') {
|
||||
const retryAfterSec = Number(res.headers.get('Retry-After'))
|
||||
setStatus(
|
||||
res.headers.get('Retry-After') && Number.isFinite(retryAfterSec)
|
||||
? `${err.error} حاول بعد ${Math.max(1, Math.ceil(retryAfterSec / 60))} دقيقة.`
|
||||
: err.error,
|
||||
)
|
||||
return
|
||||
}
|
||||
const message = err?.errors?.[0]?.message
|
||||
if (message && /locked/i.test(message)) {
|
||||
// Payload lockout: maxLoginAttempts 5 / lockTime 15min (Users.ts).
|
||||
setStatus('تم تجاوز عدد المحاولات المسموح. حاول بعد ١٥ دقيقة.')
|
||||
return
|
||||
}
|
||||
setStatus('تعذّر تسجيل الدخول — تحقّق من البريد وكلمة المرور.')
|
||||
} catch {
|
||||
setStatus('تعذّر الاتصال. حاول تسجيل الدخول مرة أخرى.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
return
|
||||
}
|
||||
setStatus('تعذّر تسجيل الدخول — تحقّق من البريد وكلمة المرور.')
|
||||
setBusy(false)
|
||||
}
|
||||
|
||||
/* رابط الدخول بالبريد — يستخدم مسار استعادة كلمة المرور الحقيقي في Payload. */
|
||||
async function sendMagicLink() {
|
||||
const form = document.getElementById('loginForm') as HTMLFormElement
|
||||
const email = form.elements.namedItem('email') as HTMLInputElement
|
||||
if (!email.value.trim() || !email.checkValidity()) {
|
||||
setStatus('أدخل بريداً إلكترونياً صحيحاً أولاً.')
|
||||
email.focus()
|
||||
return
|
||||
}
|
||||
setStatus('')
|
||||
const res = await fetch('/api/users/forgot-password', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: email.value.trim() }),
|
||||
})
|
||||
setStatus(res.ok ? 'أرسلنا رابط الدخول إلى بريدك إن كان مسجلاً.' : 'تعذّر الإرسال — خدمة البريد غير مربوطة بعد.')
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page page-login">
|
||||
<Topnav />
|
||||
<main id="content" className="auth">
|
||||
<section className="auth-story">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="auth-mark" src="/brand/mark-light.svg" alt="" width={436} height={382} />
|
||||
<h1>أكمل من حيث توقفت.</h1>
|
||||
<p>سجّل الدخول لمتابعة قراءة الأدلة والمشاركة في النقاشات.</p>
|
||||
<>
|
||||
<Topnav
|
||||
viewer={null}
|
||||
menu
|
||||
hideAction
|
||||
logoHref="/"
|
||||
links={[]}
|
||||
returnLink={{ href: '/', label: 'العودة إلى المكتبة' }}
|
||||
/>
|
||||
<SiteMenu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/article-agent-guide', label: 'مقال الأسبوع' },
|
||||
{ href: '/subscription', label: 'العضوية والأسعار' },
|
||||
]}
|
||||
foot={{ href: '/login', label: '', note: 'محتوى عربي عملي، بلا ضجيج.', variant: 'hidden' }}
|
||||
/>
|
||||
<main className="auth">
|
||||
<section className="auth-story" data-od-id="login-story">
|
||||
<div>
|
||||
<p className="eyebrow">مساحتك في أنور بي آي</p>
|
||||
<h1 data-od-id="login-story-title">أكمل من حيث توقفت.</h1>
|
||||
<p>احفظ أدلتك، تابع مسارات الفيديو، وارجع إلى ملاحظاتك من أي جهاز.</p>
|
||||
<ul className="story-list">
|
||||
<li><span>المقالات المحفوظة</span><span className="story-mark">مرتبّة</span></li>
|
||||
<li><span>تقدّم المسارات</span><span className="story-mark">متزامن</span></li>
|
||||
<li><span>ملفات العضوية</span><span className="story-mark">جاهزة</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="story-foot">العربية أولاً · خصوصيتك محفوظة</p>
|
||||
</section>
|
||||
<section className="auth-form-wrap" data-od-id="login-form-section">
|
||||
<form className="auth-form" id="loginForm" method="post" action="/api/users/login" noValidate onSubmit={onSubmit} data-od-id="login-form">
|
||||
@@ -89,23 +107,22 @@ export default function LoginPage() {
|
||||
<label htmlFor="password">كلمة المرور</label>
|
||||
<div className="input-wrap">
|
||||
<input className="input" id="password" name="password" type={showPassword ? 'text' : 'password'} autoComplete="current-password" minLength={8} required onInvalid={e => e.currentTarget.setCustomValidity('أدخل كلمة المرور.')} onInput={e => e.currentTarget.setCustomValidity('')} />
|
||||
<button className="password-toggle" id="passwordToggle" type="button" aria-controls="password" aria-label={showPassword ? 'إخفاء كلمة المرور' : 'إظهار كلمة المرور'} aria-pressed={showPassword} onClick={() => setShowPassword(v => !v)}>{showPassword ? 'إخفاء' : 'إظهار'}</button>
|
||||
<button className="password-toggle" id="passwordToggle" type="button" aria-controls="password" onClick={() => setShowPassword(v => !v)}>{showPassword ? 'إخفاء' : 'إظهار'}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label className="check"><input type="checkbox" name="remember" /> تذكّرني</label>
|
||||
<Link href="/forgot-password">نسيت كلمة المرور؟</Link>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy}>{busy ? 'جارٍ تسجيل الدخول…' : 'ادخل إلى حسابك'}</button>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy}>{busy ? 'جارٍ الدخول…' : 'ادخل إلى حسابك'}</button>
|
||||
<div className="status" id="loginStatus" role="status">{status}</div>
|
||||
<div className="divider">أو</div>
|
||||
<Link className="magic" href="/forgot-password">استعد الوصول إلى حسابك</Link>
|
||||
<button className="magic" id="magicLink" type="button" onClick={sendMagicLink}>أرسل رابط دخول إلى بريدي</button>
|
||||
<p className="signup">ليس لديك حساب؟ <Link href={nextPath ? `/signup?next=${encodeURIComponent(nextPath)}` : '/signup'}>أنشئ حساباً جديداً</Link></p>
|
||||
<p className="fine">بالمتابعة، أنت توافق على <Link href="/terms">شروط الاستخدام</Link> و<Link href="/privacy">سياسة الخصوصية</Link>.</p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@ import { safeNext } from '@/lib/next'
|
||||
|
||||
type Viewer = { id: number; email: string; interest: string | null; level: string | null; onboarded: boolean } | null
|
||||
|
||||
const COPY = ['الخطوة 1 من 3', 'الخطوة 2 من 3', 'الخطوة 3 من 3']
|
||||
const PERCENTS = ['33٪', '67٪', '100٪']
|
||||
const COPY = ['الخطوة ١ من ٣', 'الخطوة ٢ من ٣', 'الخطوة ٣ من ٣']
|
||||
const PERCENTS = ['٣٣٪', '٦٧٪', '١٠٠٪']
|
||||
|
||||
/* Wizard markup/steps from member-onboarding.html. Interest + level PATCH the
|
||||
user record when leaving each step (falls back to localStorage if no session). */
|
||||
@@ -71,7 +71,7 @@ export default function OnboardingWizard({ viewer }: { viewer: Viewer }) {
|
||||
<nav className="step-nav" aria-label="خطوات إعداد الحساب" data-od-id="onboarding-steps">
|
||||
{[0, 1, 2].map(i => (
|
||||
<div key={i} className={i === step ? 'active' : i < step ? 'done' : ''} data-step-label={i}>
|
||||
<span>{['01', '02', '03'][i]}</span><span>{['اهتمامك', 'مستواك', 'خيارات العضوية'][i]}</span>
|
||||
<span>{['٠١', '٠٢', '٠٣'][i]}</span><span>{['اهتمامك', 'مستواك', 'اختر الوصول'][i]}</span>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
@@ -82,7 +82,7 @@ export default function OnboardingWizard({ viewer }: { viewer: Viewer }) {
|
||||
<div className="choices">
|
||||
{[
|
||||
['الوكلاء', 'الوكلاء وتنسيقهم', 'التخطيط والتنفيذ والتحقق وتنسيق عدة وكلاء.'],
|
||||
['RAG', 'التوليد المعزّز بالاسترجاع (RAG)', 'اختيار المصادر وقياس جودة الاسترجاع والإجابة.'],
|
||||
['RAG', 'الاسترجاع وRAG', 'اختيار المصادر وقياس جودة الاسترجاع والإجابة.'],
|
||||
['الأتمتة', 'الأتمتة للأعمال', 'دمج الذكاء الاصطناعي في تدفقات عمل قابلة للمراقبة.'],
|
||||
['النماذج المفتوحة', 'النماذج المفتوحة', 'التشغيل المحلي والضبط الدقيق واختيار النموذج المناسب.'],
|
||||
].map(([value, label, desc]) => (
|
||||
@@ -98,12 +98,12 @@ export default function OnboardingWizard({ viewer }: { viewer: Viewer }) {
|
||||
</div>
|
||||
</section>
|
||||
<section className={`panel${step === 1 ? ' active' : ''}`} data-step="1" data-od-id="step-experience">
|
||||
<h2>ما مستوى خبرتك العملية؟</h2>
|
||||
<h2>ما مستوى خبرتك العملي؟</h2>
|
||||
<p className="intro">سنستخدمه فقط لترتيب نقطة البداية، لا لإخفاء أي محتوى مجاني.</p>
|
||||
<div className="choices">
|
||||
{[
|
||||
['مبتدئ', 'أبدأ من الأساسيات', 'أستخدم أدوات الذكاء الاصطناعي ولم أبنِ مشروعاً بعد.'],
|
||||
['متوسط', 'بنيت تجارب بسيطة', 'جرّبت واجهات برمجة التطبيقات (API) أو أتمتة أو تطبيقاً صغيراً.'],
|
||||
['متوسط', 'بنيت تجارب بسيطة', 'جرّبت واجهات API أو أتمتة أو تطبيقاً صغيراً.'],
|
||||
['متقدم', 'أعمل على أنظمة فعلية', 'أبحث عن أنماط أعمق للقياس والموثوقية والتشغيل.'],
|
||||
].map(([value, label, desc]) => (
|
||||
<label className="choice" key={value}>
|
||||
@@ -120,23 +120,23 @@ export default function OnboardingWizard({ viewer }: { viewer: Viewer }) {
|
||||
</section>
|
||||
<section className={`panel${step === 2 ? ' active' : ''}`} data-step="2" data-od-id="step-access">
|
||||
<p className="eyebrow">اختيارك، بلا ضغط</p>
|
||||
<h2>ابدأ مجاناً أو افتح محتوى العضوية الكامل.</h2>
|
||||
<h2>ابدأ مجاناً أو افتح تجربة VIP الكاملة.</h2>
|
||||
<p className="intro" id="summaryCopy">{summary}</p>
|
||||
<div className="benefits" data-od-id="vip-benefits">
|
||||
<article className="benefit"><span className="benefit-num">01</span><div><h3>الأدلة المتقدمة كاملة</h3><p>اقرأ ما بعد المعاينة في أدلة الوكلاء وRAG والأتمتة والنماذج.</p></div></article>
|
||||
<article className="benefit"><span className="benefit-num">02</span><div><h3>ملفات العمل</h3><p>نزّل القوالب وقوائم الفحص المرتبطة بكل دليل.</p></div></article>
|
||||
<article className="benefit"><span className="benefit-num">03</span><div><h3>نقطة بداية مخصصة</h3><p>إعداد العضوية ترتّب دليلك الأول ورسائلك بناءً على هدفك.</p></div></article>
|
||||
<article className="benefit"><span className="benefit-num">٠١</span><div><h3>الأدلة المتقدمة كاملة</h3><p>اقرأ ما بعد المعاينة في أدلة الوكلاء وRAG والأتمتة والنماذج.</p></div></article>
|
||||
<article className="benefit"><span className="benefit-num">٠٢</span><div><h3>مسارات الفيديو والملفات</h3><p>تابع كل أجزاء المسار ونزّل قوالب العمل المرتبطة به.</p></div></article>
|
||||
<article className="benefit"><span className="benefit-num">٠٣</span><div><h3>نقطة بداية مخصصة</h3><p>تهيئة VIP ترتّب دليلك الأول ورسائلك بناءً على هدفك.</p></div></article>
|
||||
</div>
|
||||
<div className="upgrade-note">
|
||||
<strong>الحساب المجاني لا يختفي.</strong>
|
||||
<p>يمكنك قراءة الأدلة المجانية وحفظها، والترقية عندما تحتاج الأدلة الحصرية.</p>
|
||||
<p>يمكنك قراءة المقالات المجانية وحفظها، والترقية عندما تحتاج الأدلة الحصرية.</p>
|
||||
</div>
|
||||
<div className="actions" data-od-id="final-actions">
|
||||
{nextPath ? (
|
||||
<Link className="btn btn-primary" href={nextPath} data-od-id="continue-next-cta">تابع إلى وجهتك</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link className="btn btn-secondary" href="/articles?access=free" data-od-id="continue-free-cta">ابدأ بالأدلة المجانية</Link>
|
||||
<Link className="btn btn-secondary" href="/articles?access=free" data-od-id="continue-free-cta">ابدأ بالمقالات المجانية</Link>
|
||||
<Link className="btn btn-primary" href="/subscription" data-od-id="view-membership-cta">شاهد العضوية والأسعار</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import configPromise from '@payload-config'
|
||||
import Link from 'next/link'
|
||||
import { redirect } from 'next/navigation'
|
||||
import OnboardingWizard from './client'
|
||||
import '../styles/member-onboarding.css'
|
||||
|
||||
@@ -31,26 +28,35 @@ export default async function OnboardingPage() {
|
||||
/* render wizard without persistence */
|
||||
}
|
||||
|
||||
if (!viewer) redirect('/login?next=%2Fonboarding')
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page page-onboarding">
|
||||
<Topnav viewer={viewer} />
|
||||
<main id="content">
|
||||
<>
|
||||
<header className="topnav" data-od-id="topnav">
|
||||
<div className="container nav-inner">
|
||||
<Link className="logo" href="/" data-od-id="brand">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="logo-mark" src="/anwarpi-logo.jpg" alt="" width={30} height={34} />
|
||||
أنور بي آي
|
||||
</Link>
|
||||
<Link className="nav-return" href="/articles" data-od-id="skip-link">تخطي إلى المكتبة</Link>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section className="head" data-od-id="onboarding-hero">
|
||||
<div className="container">
|
||||
<p className="eyebrow">حسابك جاهز · إعداد سريع</p>
|
||||
<h1 data-od-id="onboarding-title">اختر ما تريد تعلّمه أولاً.</h1>
|
||||
<p className="lead">سؤالان فقط لترتيب المكتبة حول هدفك، ثم نوضح الفرق بين الحساب المجاني والعضوية المدفوعة.</p>
|
||||
<p className="lead">سؤالان فقط لترتيب المكتبة حول هدفك، ثم نوضح الفرق بين الحساب المجاني وعضوية VIP.</p>
|
||||
<div className="progress" aria-label="تقدم الإعداد">
|
||||
<div className="progress-copy"><span id="progressLabel">الخطوة 1 من 3</span><span id="progressPercent">33٪</span></div>
|
||||
<div className="progress-copy"><span id="progressLabel">الخطوة ١ من ٣</span><span id="progressPercent">٣٣٪</span></div>
|
||||
<div className="progress-track"><div className="progress-bar" id="progressBar"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<OnboardingWizard viewer={viewer} />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<footer className="pagefoot" data-od-id="footer">
|
||||
<div className="container footer-row"><span>© أنور بي آي ٢٠٢٦</span><span>يمكنك تغيير المسار لاحقاً من إعدادات الحساب.</span></div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
+136
-142
@@ -1,174 +1,168 @@
|
||||
import { getViewer } from '@/lib/viewer'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import CatalogDeck from './catalog/catalog-deck'
|
||||
import CatalogFilters from './catalog/catalog-filters'
|
||||
import Link from 'next/link'
|
||||
import { getPayload } from 'payload'
|
||||
import configPromise from '@payload-config'
|
||||
import { TOPICS, topicsFor, INTEREST_MAP } from '@/lib/topics'
|
||||
import { formatNumber, guidesLabel, minutesLabel, MEMBERSHIP_PRICE } from '@/lib/format'
|
||||
import { freeEarlyAccess } from '@/lib/launch'
|
||||
import './styles/arabic-ai-learning-catalog.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
/* Editorial picks for «ابدأ من هنا». */
|
||||
const START_HERE = ['first-arabic-agent', 'choosing-your-model', 'prototype-to-production', 'simple-arabic-rag', 'safe-agent-guardrails', 'agent-loop-stop-condition']
|
||||
|
||||
type Doc = { id: number; title: string; slug: string; dek?: string | null; access: 'free' | 'vip'; category: string; level?: string | null; readingMinutes: number; cover?: { url?: string | null } | number | null }
|
||||
const HOME_SLIDES = [
|
||||
{
|
||||
kicker: 'دليل حصري · المستوى المتوسط',
|
||||
index: '01',
|
||||
title: <>ابنِ وكيلك الأول دون فوضى</>,
|
||||
body: 'خريطة عملية لتقسيم المهام، اختيار الأدوات، وضبط ذاكرة الوكيل قبل كتابة الكود.',
|
||||
format: <><span className="play" aria-hidden="true">▶</span>فيديو · 28 دقيقة</>,
|
||||
meta: <bdi dir="ltr">AGENTIC AI</bdi>,
|
||||
},
|
||||
{
|
||||
kicker: 'مقال تطبيقي · للمبتدئين',
|
||||
index: '02',
|
||||
title: <>كيف تختار نموذجاً لمهمتك؟</>,
|
||||
body: 'مقارنة منهجية حسب الجودة، التكلفة، السرعة، والخصوصية — من دون ضجيج تسويقي.',
|
||||
format: <>قراءة · 12 دقيقة</>,
|
||||
meta: <>النماذج</>,
|
||||
},
|
||||
{
|
||||
kicker: 'مسار متقدم · للأعضاء',
|
||||
index: '03',
|
||||
title: <>من <bdi dir="ltr">RAG</bdi> إلى إجابة موثوقة</>,
|
||||
body: 'صمّم الاسترجاع، اختبر المصادر، وافهم أين تنهار الإجابة قبل أن تصل إلى المستخدم.',
|
||||
format: <><span className="play" aria-hidden="true">▶</span>سلسلة · 4 أجزاء</>,
|
||||
meta: <bdi dir="ltr">RAG</bdi>,
|
||||
},
|
||||
]
|
||||
|
||||
export default async function HomePage() {
|
||||
const viewer = await getViewer()
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { docs: raw } = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { status: { equals: 'published' } },
|
||||
depth: 1,
|
||||
limit: 200,
|
||||
sort: '-publishedAt',
|
||||
select: { title: true, slug: true, dek: true, access: true, category: true, level: true, readingMinutes: true, cover: true },
|
||||
})
|
||||
const docs = raw as unknown as Doc[]
|
||||
const freeCount = docs.filter(d => d.access === 'free').length
|
||||
|
||||
// Hero personalization: matching the viewer's interest floats to the top,
|
||||
// level match ranks higher, ties keep the -publishedAt order. Anonymous
|
||||
// viewers get the plain newest-first list.
|
||||
const interestTopic = viewer?.interest ? INTEREST_MAP[viewer.interest] : undefined
|
||||
const score = (d: Doc) => {
|
||||
if (!interestTopic || !topicsFor(d).includes(interestTopic)) return 0
|
||||
return d.level === viewer?.level ? 2 : 1
|
||||
}
|
||||
const hero = docs
|
||||
.map((d, i) => ({ d, i, s: score(d) }))
|
||||
.sort((a, b) => b.s - a.s || a.i - b.i)
|
||||
.slice(0, 4)
|
||||
.map(({ d }) => d)
|
||||
const counts = Object.fromEntries(TOPICS.map(t => [t.key, docs.filter(d => topicsFor(d).includes(t.key)).length]))
|
||||
const startHere = START_HERE.map(slug => docs.find(d => d.slug === slug)).filter((d): d is Doc => Boolean(d))
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page v2 v2-home">
|
||||
{/* Organization structured data (home page only; WebSite LD lives in layout). */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Organization',
|
||||
name: 'أنور بآي',
|
||||
url: process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai',
|
||||
logo: `${process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'}/brand/icon-256.png`,
|
||||
}),
|
||||
}}
|
||||
<>
|
||||
<Topnav
|
||||
viewer={viewer}
|
||||
logoHref="#top"
|
||||
loginClass="nav-action"
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '#topics', label: 'المسارات' },
|
||||
{ href: '#membership', label: 'العضوية' },
|
||||
]}
|
||||
/>
|
||||
<Topnav viewer={viewer} />
|
||||
<main id="content">
|
||||
<section className="home-hero">
|
||||
<div className="wrap home-hero-grid">
|
||||
<div className="home-hero-copy">
|
||||
<p className="kicker">مكتبة عربية للذكاء الاصطناعي العملي</p>
|
||||
<h1>افهم الذكاء الاصطناعي، ثم ابنِ به.</h1>
|
||||
<p className="lede">أدلة عربية عملية عن الوكلاء والنماذج والأتمتة، يكتبها مهندسو بنية تحتية لمن يريد أن يشغّل شيئاً حقيقياً.</p>
|
||||
<div className="actions">
|
||||
<a className="btn btn-primary" href="/articles?access=free">ابدأ بدليل مجاني</a>
|
||||
<Link className="btn btn-quiet" href="/articles">تصفح المكتبة</Link>
|
||||
<section className="section hero" id="top" data-od-id="hero">
|
||||
<div className="container hero-split">
|
||||
<div className="hero-copy">
|
||||
<p className="eyebrow">مكتبة عربية عملية · <bdi dir="ltr">AI + AGENTS</bdi></p>
|
||||
<h1 data-od-id="hero-title">افهم الذكاء الاصطناعي. ثم ابنِ به.</h1>
|
||||
<p className="lead">أدلة واضحة، دروس فيديو، ومسارات متدرجة تساعدك على الانتقال من الفكرة إلى وكيل يعمل.</p>
|
||||
<div className="hero-cta">
|
||||
<a className="btn btn-primary" href="/articles" data-od-id="hero-primary-cta">استكشف المكتبة</a>
|
||||
<a className="btn btn-ghost" href="#membership">شاهد محتوى العضوية ←</a>
|
||||
</div>
|
||||
<p className="trust-line">بالعربية أولاً · أمثلة قابلة للتطبيق · تحديثات مرتبطة بما يتغير فعلاً</p>
|
||||
</div>
|
||||
{hero.length > 0 && (
|
||||
<aside className="hero-panel" aria-labelledby="new-title">
|
||||
<h2 id="new-title">أحدث الأدلة</h2>
|
||||
<ul role="list">
|
||||
{hero.map(d => {
|
||||
const coverUrl = typeof d.cover === 'object' ? d.cover?.url ?? null : null
|
||||
return (
|
||||
<li key={d.id}>
|
||||
<Link href={`/posts/${d.slug}`}>
|
||||
{coverUrl && <img className="hero-panel-thumb" src={coverUrl} alt="" width={72} height={48} loading="lazy" />}
|
||||
<span className="hero-panel-title">{d.title}</span>
|
||||
<span className="meta-row"><span>{d.category}</span><span>{minutesLabel(d.readingMinutes)}</span><span className={d.access === 'vip' ? 'is-vip' : undefined}>{d.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></span>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<Link className="text-link" href="/articles">كل الأدلة</Link>
|
||||
</aside>
|
||||
)}
|
||||
<CatalogDeck slides={HOME_SLIDES} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="home-paths" id="topics" aria-labelledby="paths-title">
|
||||
<div className="wrap">
|
||||
<header className="section-head">
|
||||
<h2 id="paths-title">اختر مساراً حسب ما تريد بناءه</h2>
|
||||
<p>كل دليل ينتمي إلى مسار، وأدلة المبتدئين تظهر أيضاً في الأساسيات.</p>
|
||||
</header>
|
||||
<ol className="paths" role="list">
|
||||
{TOPICS.map(topic => (
|
||||
<li key={topic.key}>
|
||||
<Link href={`/topics/${topic.key}`} className="path">
|
||||
<span className="path-name">{topic.label}</span>
|
||||
<span className="path-hint">{topic.hint}</span>
|
||||
<span className="path-count">{guidesLabel(counts[topic.key])}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<section className="section" id="topics" data-od-id="learning-paths">
|
||||
<div className="container">
|
||||
<div className="row-between section-head">
|
||||
<div><p className="eyebrow">ابدأ من اهتمامك</p><h2 data-od-id="topics-title">أربعة مسارات. هدف واحد: فهم قابل للاستخدام.</h2></div>
|
||||
<p className="lead">تصفح المحتوى حسب ما تريد بناءه، لا حسب المصطلحات التي تحفظها.</p>
|
||||
</div>
|
||||
<div className="topic-grid">
|
||||
<a className="topic" href="/articles" data-topic-link="agents" data-od-id="topic-agents"><strong>الوكلاء</strong><span>تخطيط · أدوات · ذاكرة</span></a>
|
||||
<a className="topic" href="/articles" data-topic-link="models" data-od-id="topic-models"><strong>النماذج</strong><span>اختيار · تقييم · تشغيل</span></a>
|
||||
<a className="topic" href="/articles" data-topic-link="automation" data-od-id="topic-automation"><strong>الأتمتة</strong><span>سير عمل · ربط · مراقبة</span></a>
|
||||
<a className="topic" href="/articles" data-topic-link="foundations" data-od-id="topic-foundations"><strong>الأساسيات</strong><span>مفاهيم · تطبيق · أمان</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{startHere.length > 0 && (
|
||||
<section className="home-start" aria-labelledby="start-title">
|
||||
<div className="wrap">
|
||||
<header className="section-head">
|
||||
<h2 id="start-title">ابدأ من هنا</h2>
|
||||
<Link className="text-link" href="/articles">كل الأدلة ({formatNumber(docs.length)})</Link>
|
||||
</header>
|
||||
<ul className="card-grid" role="list">
|
||||
{startHere.map(post => {
|
||||
const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
|
||||
return (
|
||||
<li key={post.id}>
|
||||
<article className="guide">
|
||||
{coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
|
||||
<p className="meta-row"><span className="cat">{post.category}</span><span>{minutesLabel(post.readingMinutes)}</span><span className={post.access === 'vip' ? 'is-vip' : undefined}>{post.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></p>
|
||||
<h3><Link href={`/posts/${post.slug}`}>{post.title}</Link></h3>
|
||||
<p className="guide-dek">{post.dek}</p>
|
||||
<span className="guide-link" aria-hidden="true">اقرأ الدليل</span>
|
||||
</article>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
<section className="section" id="catalog" data-od-id="catalog">
|
||||
<div className="container">
|
||||
<div className="row-between section-head">
|
||||
<div><p className="eyebrow">مختارات المحررين</p><h2 data-od-id="catalog-title">دليل تقرؤه اليوم، وتستخدمه غداً.</h2></div>
|
||||
<span className="meta">محتوى عربي · نص وفيديو</span>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
<CatalogFilters />
|
||||
|
||||
<section className="home-membership" id="membership" aria-labelledby="membership-title">
|
||||
<div className="wrap membership-panel">
|
||||
<div className="catalog" id="catalogGrid">
|
||||
<article className="catalog-card" data-topic="agents" data-od-id="guide-agent-architecture">
|
||||
<div className="cover"><span className="cover-label">دليل عملي · حصري</span><span className="cover-title">تشريح وكيل ناجح</span></div>
|
||||
<div className="card-meta"><span>الوكلاء</span><span className="num">18 دقيقة</span></div>
|
||||
<h3>البنية التي تمنع وكيلك من الدوران في حلقة</h3>
|
||||
<p>حدود واضحة بين التخطيط، التنفيذ، والتحقق مع نموذج بسيط لسجلّ الحالة.</p>
|
||||
<Link className="card-link" href="/posts/agent-loop-stop-condition"><span>شاهد المعاينة</span><span>←</span></Link>
|
||||
</article>
|
||||
|
||||
<article className="catalog-card" data-topic="models" data-od-id="guide-model-selection">
|
||||
<div className="cover cover-light"><span className="cover-label">مقال · مجاني</span><span className="cover-title">خريطة اختيار النموذج</span></div>
|
||||
<div className="card-meta"><span>النماذج</span><span className="num">12 دقيقة</span></div>
|
||||
<h3>لا تبدأ باسم النموذج؛ ابدأ بطبيعة المهمة</h3>
|
||||
<p>مصفوفة قرار عملية توازن بين الدقة، السياق، السرعة، والكلفة.</p>
|
||||
<Link className="card-link" href="/posts/systematic-model-eval"><span>ابدأ القراءة</span><span>←</span></Link>
|
||||
</article>
|
||||
|
||||
<article className="catalog-card" data-topic="automation" data-od-id="guide-automation-observability">
|
||||
<div className="cover cover-lined"><span className="cover-label">فيديو · حصري</span><span className="cover-title">راقب قبل أن تؤتمت</span></div>
|
||||
<div className="card-meta"><span>الأتمتة</span><span className="num">24 دقيقة</span></div>
|
||||
<h3>كيف تكتشف فشل سير العمل قبل المستخدم؟</h3>
|
||||
<p>إشارات قليلة تكفي لمراقبة التكلفة، التأخير، ونقاط الانقطاع.</p>
|
||||
<Link className="card-link" href="/posts/prototype-to-production"><span>شاهد المقدمة</span><span>←</span></Link>
|
||||
</article>
|
||||
|
||||
<article className="catalog-card" data-topic="foundations" data-od-id="guide-prompt-context">
|
||||
<div className="cover cover-lined"><span className="cover-label">شرح · مجاني</span><span className="cover-title">السياق قبل البرومبت</span></div>
|
||||
<div className="card-meta"><span>الأساسيات</span><span className="num">9 دقائق</span></div>
|
||||
<h3>لماذا لا يصلح تحسين الصياغة بياناتك الرديئة؟</h3>
|
||||
<p>افصل بين التعليمات، المعرفة، وذاكرة المحادثة لتحصل على نتيجة مستقرة.</p>
|
||||
<Link className="card-link" href="/posts/first-arabic-agent"><span>ابدأ القراءة</span><span>←</span></Link>
|
||||
</article>
|
||||
|
||||
<article className="catalog-card" data-topic="agents" data-od-id="guide-tool-safety">
|
||||
<div className="cover cover-light"><span className="cover-label">قائمة فحص · حصري</span><span className="cover-title">أدوات بلا مفاجآت</span></div>
|
||||
<div className="card-meta"><span>الوكلاء</span><span className="num">15 دقيقة</span></div>
|
||||
<h3>قبل أن تمنح الوكيل صلاحية التنفيذ</h3>
|
||||
<p>حدود الصلاحيات، التأكيد البشري، وسجل تدقيق يمكنك الرجوع إليه.</p>
|
||||
<Link className="card-link" href="/posts/safe-agent-guardrails"><span>عرض التفاصيل</span><span>←</span></Link>
|
||||
</article>
|
||||
|
||||
<article className="catalog-card" data-topic="models" data-od-id="guide-rag-evaluation">
|
||||
<div className="cover"><span className="cover-label">سلسلة فيديو · حصري</span><span className="cover-title">قياس RAG بصدق</span></div>
|
||||
<div className="card-meta"><span>النماذج</span><span className="num">4 أجزاء</span></div>
|
||||
<h3>اختبر الاسترجاع والإجابة كلّاً على حدة</h3>
|
||||
<p>منهج تقييم يفصل فشل المصدر عن فشل النموذج ويقودك إلى إصلاح صحيح.</p>
|
||||
<Link className="card-link" href="/posts/simple-arabic-rag"><span>شاهد المقدمة</span><span>←</span></Link>
|
||||
</article>
|
||||
</div>
|
||||
<p className="empty" id="emptyState">لا توجد مواد في هذا المسار حالياً.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section membership" id="membership" data-od-id="membership">
|
||||
<div className="container membership-grid">
|
||||
<div>
|
||||
<h2 id="membership-title">العضوية تفتح الأدلة المتقدمة وملفات العمل.</h2>
|
||||
<p>الأدلة المجانية كاملة دائماً. العضوية تضيف الأدلة المعمّقة، القوالب الجاهزة للتنزيل، والنقاش مع الفريق.</p>
|
||||
<p className="eyebrow">عضوية أنور بي آي</p>
|
||||
<h2 data-od-id="membership-title">المحتوى الذي يحترم وقتك يبقى معك.</h2>
|
||||
<p className="lead" style={{ marginTop: 20 }}>وصول إلى الأدلة المتقدمة، مسارات الفيديو، والملفات العملية عند إضافتها.</p>
|
||||
</div>
|
||||
<div className="membership-offer">
|
||||
{freeEarlyAccess() ? (
|
||||
<>
|
||||
<p className="price price-early">وصول مبكر مجاني</p>
|
||||
<p className="early-line">يمكنك قراءة المحتوى المنشور خلال الوصول المبكر دون بطاقة دفع.</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="price"><bdi dir="ltr">{MEMBERSHIP_PRICE}</bdi> <span>شهرياً، وتلغي متى شئت</span></p>
|
||||
)}
|
||||
<ul role="list">
|
||||
<li>{guidesLabel(docs.length - freeCount)} للأعضاء، وتُضاف أدلة جديدة باستمرار</li>
|
||||
<li>قوالب وقوائم فحص قابلة للتنزيل</li>
|
||||
<li>التعليق والنقاش على كل دليل</li>
|
||||
<div>
|
||||
<ul className="membership-list" aria-label="مزايا العضوية">
|
||||
<li><span>الأدلة الحصرية</span><span>كاملة</span></li>
|
||||
<li><span>مسارات الفيديو</span><span>متدرجة</span></li>
|
||||
<li><span>ملفات العمل</span><span>قابلة للتنزيل</span></li>
|
||||
</ul>
|
||||
<Link className="btn btn-primary" href="/subscription">اطّلع على العضوية</Link>
|
||||
<Link className="btn btn-primary" href="/subscription" data-od-id="membership-cta">شاهد الأسعار والمزايا</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<footer className="pagefoot" data-od-id="footer">
|
||||
<div className="container row-between"><span>© أنور بي آي ٢٠٢٦ · تعلّم بوضوح</span><span className="meta"><Link href="/terms">الشروط</Link> · <Link href="/privacy">الخصوصية</Link></span></div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,37 +1,46 @@
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import Link from 'next/link'
|
||||
import '../styles/payment-cancelled.css'
|
||||
|
||||
export const metadata = { title: 'لم يكتمل الدفع' }
|
||||
|
||||
/* Payment cancelled — design from payment-cancelled.html. */
|
||||
export default function PaymentCancelledPage() {
|
||||
return (
|
||||
<div id="site" className="site-page page-payment-cancelled">
|
||||
<Topnav />
|
||||
<main id="content">
|
||||
<section className="section" data-od-id="payment-cancelled">
|
||||
<div className="container">
|
||||
<article className="state-card">
|
||||
<div className="status-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={2}><path d="M9 9l14 14M23 9 9 23" /></svg></div>
|
||||
<p className="eyebrow">لم يكتمل الدفع</p>
|
||||
<h1 data-od-id="cancelled-title">لم تُخصم أي دفعة.</h1>
|
||||
<p className="lead">ألغيت عملية الدفع أو عدت قبل إكمالها. حسابك المجاني وأدلتك المحفوظة لم تتغير.</p>
|
||||
<div className="notice" data-od-id="account-safety-note">
|
||||
<h2 data-od-id="account-safety-title">يمكنك المتابعة وقتما يناسبك</h2>
|
||||
<p>ارجع إلى صفحة العضوية لمراجعة المزايا أو أكمل استخدام المكتبة المجانية الآن.</p>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<Link className="btn btn-primary" href="/subscription" data-od-id="retry-payment-cta">العودة إلى العضوية</Link>
|
||||
<Link className="btn btn-secondary" href="/articles" data-od-id="browse-free-articles-cta">تصفح الأدلة المجانية</Link>
|
||||
</div>
|
||||
<p className="help">واجهت مشكلة أثناء الدفع؟ <a href="mailto:hello@anwarpy.ai?subject=%D9%85%D8%B4%D9%83%D9%84%D8%A9%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%AF%D9%81%D8%B9" data-od-id="payment-help-link">تواصل مع الفريق</a>.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import Link from 'next/link'
|
||||
import '../styles/payment-cancelled.css'
|
||||
|
||||
export const metadata = { title: 'لم يكتمل الدفع' }
|
||||
|
||||
/* Payment cancelled — design from payment-cancelled.html. */
|
||||
export default function PaymentCancelledPage() {
|
||||
return (
|
||||
<>
|
||||
<header className="topnav" data-od-id="topnav">
|
||||
<div className="container topnav-inner">
|
||||
<Link className="logo" href="/" data-od-id="brand">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="logo-mark" src="/anwarpi-logo.jpg" alt="" width={30} height={34} />
|
||||
أنور بي آي
|
||||
</Link>
|
||||
<Link className="nav-link" href="/account-settings" data-od-id="account-link">حسابي</Link>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section className="section" data-od-id="payment-cancelled">
|
||||
<div className="container">
|
||||
<article className="state-card">
|
||||
<div className="status-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={2}><path d="M9 9l14 14M23 9 9 23" /></svg></div>
|
||||
<p className="eyebrow">لم يكتمل الدفع</p>
|
||||
<h1 data-od-id="cancelled-title">لم تُخصم أي دفعة.</h1>
|
||||
<p className="lead">ألغيت عملية الدفع أو عدت قبل إكمالها. حسابك المجاني ومقالاتك المحفوظة لم تتغير.</p>
|
||||
<div className="notice" data-od-id="account-safety-note">
|
||||
<h2 data-od-id="account-safety-title">يمكنك المتابعة وقتما يناسبك</h2>
|
||||
<p>ارجع إلى صفحة العضوية لمراجعة المزايا أو أكمل استخدام المكتبة المجانية الآن.</p>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<Link className="btn btn-primary" href="/subscription" data-od-id="retry-payment-cta">العودة إلى العضوية</Link>
|
||||
<Link className="btn btn-secondary" href="/articles" data-od-id="browse-free-articles-cta">تصفح المقالات المجانية</Link>
|
||||
</div>
|
||||
<p className="help">واجهت مشكلة أثناء الدفع؟ <a href="mailto:hello@anwarpi.ai?subject=%D9%85%D8%B4%D9%83%D9%84%D8%A9%20%D9%81%D9%8A%20%D8%A7%D9%84%D8%AF%D9%81%D8%B9" data-od-id="payment-help-link">تواصل مع الفريق</a>.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer className="pagefoot" data-od-id="footer">
|
||||
<div className="container footer-row"><span>© أنور بي آي ٢٠٢٦</span><span>لن تتغير حالة الحساب حتى يكتمل الدفع.</span></div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,99 +1,88 @@
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import Stripe from 'stripe'
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import { redirect } from 'next/navigation'
|
||||
import configPromise from '@payload-config'
|
||||
import Link from 'next/link'
|
||||
import '../styles/payment-success.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'تم تفعيل العضوية' }
|
||||
|
||||
type Props = { searchParams: Promise<{ session_id?: string }> }
|
||||
|
||||
/* Payment success — design from payment-success.html.
|
||||
- real Stripe: verifies the checkout session_id with Stripe before
|
||||
activating (paid + the checkout email matches the signed-in account)
|
||||
- no session: nobody is activated here — /api/stripe/webhook is the primary
|
||||
activator; this page only re-verifies a session it can prove */
|
||||
export default async function PaymentSuccessPage({ searchParams }: Props) {
|
||||
const { session_id: sessionId } = await searchParams
|
||||
const stripeKey = process.env.STRIPE_SECRET_KEY
|
||||
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
if (!user) redirect('/login?next=/payment-success')
|
||||
|
||||
let activate = false
|
||||
if (sessionId && stripeKey) {
|
||||
try {
|
||||
const stripe = new Stripe(stripeKey)
|
||||
const session = await stripe.checkout.sessions.retrieve(sessionId)
|
||||
activate =
|
||||
session.payment_status === 'paid' &&
|
||||
(session.customer_details?.email ?? '').toLowerCase() === user.email.toLowerCase()
|
||||
} catch {
|
||||
// Any Stripe failure (bad key, unknown session, network) → no activation.
|
||||
activate = false
|
||||
}
|
||||
}
|
||||
|
||||
if (activate && user.role !== 'vip' && user.role !== 'admin') {
|
||||
await payload.update({
|
||||
collection: 'users',
|
||||
id: user.id,
|
||||
data: { role: 'vip' },
|
||||
overrideAccess: true,
|
||||
context: { systemActivation: true },
|
||||
})
|
||||
}
|
||||
|
||||
const vipNow = user.role === 'vip' || user.role === 'admin' || activate
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page page-payment-success">
|
||||
<Topnav viewer={user} />
|
||||
<main id="content">
|
||||
<section className="section" data-od-id="payment-success">
|
||||
<div className="container">
|
||||
<article className="state-card">
|
||||
<div className="status-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={2}><path d="m8 17 5 5 11-13" /></svg></div>
|
||||
{vipNow ? (
|
||||
<>
|
||||
<p className="eyebrow">تم الدفع · العضوية فعّالة</p>
|
||||
<h1 data-od-id="success-title">مرحباً بك في عضوية أنور بآي.</h1>
|
||||
<p className="lead">تم تفعيل وصولك إلى الأدلة الحصرية وملفات العمل. بقيت خطوة قصيرة لاختيار نقطة البداية المناسبة لك.</p>
|
||||
<dl className="summary" data-od-id="payment-summary">
|
||||
<div className="summary-row"><dt>الحالة</dt><dd>عضوية فعّالة</dd></div>
|
||||
<div className="summary-row"><dt>الخطة</dt><dd>عضوية فردية · شهرياً · <bdi dir="ltr">$10</bdi></dd></div>
|
||||
<div className="summary-row"><dt>الوصول</dt><dd>كل محتوى العضوية وملفات الأعضاء</dd></div>
|
||||
</dl>
|
||||
<div className="next-step" data-od-id="next-step">
|
||||
<h2 data-od-id="next-step-title">جهّز مسارك الأول</h2>
|
||||
<p>حدد هدفك ومستواك في أقل من خمس دقائق، ثم ابدأ بدليل واحد يناسبك.</p>
|
||||
<div className="actions">
|
||||
<Link className="btn btn-primary" href="/vip-onboarding" data-od-id="start-onboarding-cta">ابدأ إعداد العضوية</Link>
|
||||
<Link className="btn btn-secondary" href="/posts/agent-loop-stop-condition" data-od-id="open-member-guide-cta">افتح دليل الأعضاء</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="eyebrow">لم تكتمل عملية الدفع</p>
|
||||
<h1 data-od-id="payment-incomplete-title">لم يتم تأكيد الدفع بعد</h1>
|
||||
<p className="lead">لم نتمكن من تأكيد عملية دفع مرتبطة بحسابك. إن أتممت الدفع للتو فقد يحتاج التأكيد بضع دقائق، ويمكنك إعادة المحاولة من صفحة الاشتراك.</p>
|
||||
<div className="actions">
|
||||
<Link className="btn btn-primary" href="/subscription" data-od-id="retry-subscription-cta">العودة إلى صفحة الاشتراك</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import { redirect } from 'next/navigation'
|
||||
import configPromise from '@payload-config'
|
||||
import Link from 'next/link'
|
||||
import '../styles/payment-success.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'تم تفعيل العضوية' }
|
||||
|
||||
type Props = { searchParams: Promise<{ session_id?: string; simulated?: string }> }
|
||||
|
||||
/* Payment success — design from payment-success.html.
|
||||
- simulated gateway (no Stripe keys): activates VIP on the logged-in account
|
||||
- real Stripe: verifies the checkout session_id with Stripe before activating
|
||||
- no session: VIP users pass through; logged-out users go to login */
|
||||
export default async function PaymentSuccessPage({ searchParams }: Props) {
|
||||
const { session_id: sessionId, simulated } = await searchParams
|
||||
const stripeKey = process.env.STRIPE_SECRET_KEY
|
||||
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
if (!user) redirect('/login?next=/payment-success')
|
||||
|
||||
let activate = false
|
||||
if (sessionId && stripeKey) {
|
||||
const { default: Stripe } = await import('stripe')
|
||||
const stripe = new Stripe(stripeKey)
|
||||
const session = await stripe.checkout.sessions.retrieve(sessionId)
|
||||
activate = session.payment_status === 'paid' || session.status === 'complete'
|
||||
} else if (!sessionId) {
|
||||
// Simulated gateway (pending mode) — activate the logged-in account
|
||||
activate = true
|
||||
}
|
||||
|
||||
if (activate && user.role !== 'vip' && user.role !== 'admin') {
|
||||
await payload.update({
|
||||
collection: 'users',
|
||||
id: user.id,
|
||||
data: { role: 'vip' },
|
||||
overrideAccess: true,
|
||||
context: { systemActivation: true },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="topnav" data-od-id="topnav">
|
||||
<div className="container topnav-inner">
|
||||
<Link className="logo" href="/" data-od-id="brand">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="logo-mark" src="/anwarpi-logo.jpg" alt="" width={30} height={34} />
|
||||
أنور بي آي
|
||||
</Link>
|
||||
<Link className="nav-link" href="/account-settings" data-od-id="account-link">حسابي</Link>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section className="section" data-od-id="payment-success">
|
||||
<div className="container">
|
||||
<article className="state-card">
|
||||
<div className="status-mark" aria-hidden="true"><svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth={2}><path d="m8 17 5 5 11-13" /></svg></div>
|
||||
<p className="eyebrow">تم الدفع · العضوية فعّالة</p>
|
||||
<h1 data-od-id="success-title">مرحباً بك في عضوية أنور بي آي.</h1>
|
||||
<p className="lead">تم تفعيل وصولك إلى الأدلة الحصرية ومسارات الفيديو وملفات العمل. بقيت خطوة قصيرة لاختيار نقطة البداية المناسبة لك.</p>
|
||||
<dl className="summary" data-od-id="payment-summary">
|
||||
<div className="summary-row"><dt>الحالة</dt><dd>عضوية فعّالة</dd></div>
|
||||
<div className="summary-row"><dt>الخطة</dt><dd>عضوية فردية · شهرياً · <bdi dir="ltr">10$</bdi></dd></div>
|
||||
<div className="summary-row"><dt>الوصول</dt><dd>كل محتوى VIP وملفات الأعضاء</dd></div>
|
||||
</dl>
|
||||
<div className="next-step" data-od-id="next-step">
|
||||
<h2 data-od-id="next-step-title">جهّز مسارك الأول</h2>
|
||||
<p>حدد هدفك ومستواك في أقل من خمس دقائق، ثم ابدأ بدليل واحد يناسبك.</p>
|
||||
<div className="actions">
|
||||
<Link className="btn btn-primary" href="/vip-onboarding" data-od-id="start-onboarding-cta">ابدأ إعداد العضوية</Link>
|
||||
<Link className="btn btn-secondary" href="/posts/agent-loop-stop-condition" data-od-id="open-member-guide-cta">افتح دليل الأعضاء</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer className="pagefoot" data-od-id="footer">
|
||||
<div className="container footer-row"><span>© أنور بي آي ٢٠٢٦</span><span>يمكنك إدارة العضوية من صفحة حسابك.</span></div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -44,10 +44,9 @@ export function LikeButton({ slug, loggedIn, initialLiked, initialCount }: { slu
|
||||
onClick={toggle}
|
||||
disabled={busy}
|
||||
aria-pressed={liked}
|
||||
aria-label={liked ? 'ألغِ الإعجاب' : 'أعجبني'}
|
||||
data-od-id="post-like"
|
||||
>
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 13.5 2.6 8.3a3.2 3.2 0 0 1 4.5-4.6L8 4.6l.9-.9a3.2 3.2 0 0 1 4.5 4.6Z" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>
|
||||
<span>{count}</span>
|
||||
إعجاب · <span>{count}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,472 +1,375 @@
|
||||
import { getPayload } from 'payload'
|
||||
import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import configPromise from '@payload-config'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import PostExtras from './post-extras'
|
||||
import { LikeButton, ViewPing } from './engagement'
|
||||
import { getViewer } from '@/lib/viewer'
|
||||
import { TOPICS, topicsFor } from '@/lib/topics'
|
||||
import { formatDate, formatNumber, minutesLabel, contentTypeLabel, MEMBERSHIP_PRICE } from '@/lib/format'
|
||||
import { freeEarlyAccess } from '@/lib/launch'
|
||||
import { extractH2s, innerText, type Node } from '@/lib/lexical'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
/* QA-06: article pages get their own title/description. */
|
||||
export async function generateMetadata({ params }: Args) {
|
||||
const { slug } = await params
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
// Drafts must never leak title/description into metadata.
|
||||
const res = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { and: [{ slug: { equals: slug } }, { status: { equals: 'published' } }] },
|
||||
depth: 1,
|
||||
limit: 1,
|
||||
select: { title: true, dek: true, publishedAt: true, updatedAt: true, cover: true },
|
||||
})
|
||||
const post = res.docs[0] as unknown as
|
||||
| { title: string; dek: string; publishedAt?: string | null; updatedAt?: string | null; cover?: { url?: string | null } | number }
|
||||
| undefined
|
||||
if (!post) return { title: 'أنور بآي' }
|
||||
|
||||
const ogImage =
|
||||
post.cover && typeof post.cover === 'object' && post.cover.url ? post.cover.url : '/og-default.png'
|
||||
return {
|
||||
title: post.title,
|
||||
description: post.dek,
|
||||
openGraph: {
|
||||
// Next replaces (not merges) the layout-level openGraph — redeclare fully.
|
||||
type: 'article',
|
||||
siteName: 'أنور بآي',
|
||||
locale: 'ar',
|
||||
title: post.title,
|
||||
description: post.dek,
|
||||
publishedTime: post.publishedAt ?? undefined,
|
||||
images: [{ url: ogImage, width: 1200, height: 630 }],
|
||||
},
|
||||
twitter: { card: 'summary_large_image', title: post.title, description: post.dek, images: [ogImage] },
|
||||
}
|
||||
}
|
||||
|
||||
type Args = { params: Promise<{ slug: string }> }
|
||||
|
||||
type PostDoc = {
|
||||
id: number
|
||||
title: string
|
||||
slug: string
|
||||
dek: string
|
||||
access: 'free' | 'vip'
|
||||
category: string
|
||||
level?: string | null
|
||||
views?: number | null
|
||||
likes?: number | null
|
||||
readingMinutes: number
|
||||
publishedAt?: string | null
|
||||
updatedAt?: string | null
|
||||
teaser?: string | null
|
||||
content?: unknown
|
||||
cover?: { url?: string | null }
|
||||
attachments?: (number | { id: number })[]
|
||||
contentType?: string | null
|
||||
authorName?: string | null
|
||||
}
|
||||
|
||||
async function isLikedByViewer(postId: number, viewerId?: number): Promise<boolean> {
|
||||
try {
|
||||
if (!viewerId) return false
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { docs } = await payload.find({
|
||||
collection: 'post-likes',
|
||||
where: { and: [{ user: { equals: viewerId } }, { post: { equals: postId } }] },
|
||||
depth: 0,
|
||||
limit: 1,
|
||||
overrideAccess: true,
|
||||
})
|
||||
return docs.length > 0
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default async function PostPage({ params }: Args) {
|
||||
const { slug } = await params
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
|
||||
const res = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { and: [{ slug: { equals: slug } }, { status: { equals: 'published' } }] },
|
||||
depth: 1,
|
||||
limit: 1,
|
||||
// content selected only for entitled viewers — never reaches non-VIP clients
|
||||
select: {
|
||||
title: true, slug: true, dek: true, access: true, category: true, level: true,
|
||||
views: true, likes: true,
|
||||
readingMinutes: true, publishedAt: true, updatedAt: true, teaser: true, cover: true,
|
||||
content: true, attachments: true,
|
||||
contentType: true, authorName: true,
|
||||
},
|
||||
})
|
||||
const post = res.docs[0] as unknown as PostDoc | undefined
|
||||
if (!post) notFound()
|
||||
|
||||
// One auth lookup per request; everything below reads from it.
|
||||
const viewer = await getViewer()
|
||||
const role = viewer?.role ?? null
|
||||
const viewerId = viewer?.id
|
||||
const viewerLevel = viewer?.level ?? null
|
||||
// L-02: free early access unlocks every published post (the query above
|
||||
// already filters status: 'published'); paid mode keeps the tier gate.
|
||||
const earlyAccessNotice = freeEarlyAccess() && post.access === 'vip'
|
||||
const unlocked = freeEarlyAccess() || post.access === 'free' || role === 'vip' || role === 'admin'
|
||||
const postTopics = topicsFor(post)
|
||||
// The downloadable templates are agent-workflow files; only offer them on agent guides.
|
||||
const hasAgentFiles = postTopics.includes('agents')
|
||||
const liked = await isLikedByViewer(post.id, viewerId)
|
||||
|
||||
// Attachment metadata (label/access) is safe to expose — the bytes are
|
||||
// gated by GET /api/files/[id]. Fetched with overrideAccess because the
|
||||
// files collection read rule is vip/admin and depth population would
|
||||
// otherwise collapse to bare ids for anonymous/free viewers.
|
||||
const attachmentIds = (post.attachments ?? []).map(a => (typeof a === 'object' ? a.id : a))
|
||||
type Attachment = { id: number; label: string; filename: string; access: 'free' | 'vip' }
|
||||
let attachments: Attachment[] = []
|
||||
if (attachmentIds.length > 0) {
|
||||
const filesRes = await payload.find({
|
||||
collection: 'files',
|
||||
depth: 0,
|
||||
limit: 20,
|
||||
overrideAccess: true,
|
||||
where: { id: { in: attachmentIds } },
|
||||
select: { label: true, filename: true, access: true },
|
||||
})
|
||||
const fileDocs = filesRes.docs as unknown as Attachment[]
|
||||
attachments = attachmentIds
|
||||
.map(id => fileDocs.find(d => d.id === id))
|
||||
.filter((d): d is Attachment => Boolean(d))
|
||||
}
|
||||
|
||||
// «اقرأ بعد ذلك»: real published guides, same learning path first.
|
||||
const { docs: others } = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { and: [{ status: { equals: 'published' } }, { slug: { not_equals: post.slug } }] },
|
||||
depth: 0,
|
||||
limit: 100,
|
||||
sort: '-publishedAt',
|
||||
select: { title: true, slug: true, category: true, access: true, readingMinutes: true, level: true },
|
||||
})
|
||||
const related = [...others]
|
||||
.sort((a, b) => Number(topicsFor(b).includes(postTopics[0])) - Number(topicsFor(a).includes(postTopics[0])))
|
||||
.slice(0, 3)
|
||||
|
||||
// Approved comments (public read access allows the approved-only filter).
|
||||
const comments = await payload.find({
|
||||
collection: 'comments',
|
||||
depth: 0,
|
||||
limit: 50,
|
||||
sort: '-createdAt',
|
||||
where: { and: [{ post: { equals: post.id } }, { status: { equals: 'approved' } }] },
|
||||
})
|
||||
// Authors see their own pending comments tagged «قيد المراجعة» — needs
|
||||
// overrideAccess because non-admin read access filters to approved only.
|
||||
const myPending = viewerId
|
||||
? await payload.find({
|
||||
collection: 'comments',
|
||||
depth: 0,
|
||||
limit: 10,
|
||||
overrideAccess: true,
|
||||
where: {
|
||||
and: [
|
||||
{ post: { equals: post.id } },
|
||||
{ author: { equals: viewerId } },
|
||||
{ status: { equals: 'pending' } },
|
||||
],
|
||||
},
|
||||
})
|
||||
: null
|
||||
|
||||
// TOC from content h2s (server-extracted from the Lexical tree) — computed
|
||||
// unconditionally; the paywall preview (paid mode) also uses it.
|
||||
const toc = extractH2s(post.content)
|
||||
|
||||
const topic = postTopics[0]
|
||||
const topicLabel = TOPICS.find(t => t.key === topic)?.label ?? post.category
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page v2 v2-article page-posts">
|
||||
<ViewPing slug={post.slug} />
|
||||
{/* L-09: honest Article + Breadcrumb structured data. JSON-LD array = multiple objects in one script. */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify([
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'Article',
|
||||
headline: post.title,
|
||||
description: post.dek,
|
||||
image: typeof post.cover === 'object' && post.cover?.url ? post.cover.url : undefined,
|
||||
datePublished: post.publishedAt ?? undefined,
|
||||
dateModified: post.updatedAt ?? post.publishedAt ?? undefined,
|
||||
author: post.authorName
|
||||
? { '@type': 'Person', name: post.authorName }
|
||||
: { '@type': 'Organization', name: 'أنور بآي' },
|
||||
publisher: {
|
||||
'@type': 'Organization',
|
||||
name: 'أنور بآي',
|
||||
logo: { '@type': 'ImageObject', url: `${siteUrl}/brand/icon-256.png` },
|
||||
},
|
||||
mainEntityOfPage: { '@type': 'WebPage', '@id': `${siteUrl}/posts/${post.slug}` },
|
||||
isAccessibleForFree: post.access === 'free' || freeEarlyAccess(),
|
||||
inLanguage: 'ar',
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'BreadcrumbList',
|
||||
itemListElement: [
|
||||
{ '@type': 'ListItem', position: 1, name: 'الرئيسية', item: siteUrl },
|
||||
{ '@type': 'ListItem', position: 2, name: topicLabel, item: `${siteUrl}/topics/${topic}` },
|
||||
{ '@type': 'ListItem', position: 3, name: post.title, item: `${siteUrl}/posts/${post.slug}` },
|
||||
],
|
||||
},
|
||||
]),
|
||||
}}
|
||||
/>
|
||||
<Topnav viewer={viewer} />
|
||||
<main id="content">
|
||||
<header className="art-head">
|
||||
<div className="wrap art-head-grid">
|
||||
<div className="art-head-copy">
|
||||
<nav className="crumbs" aria-label="مسار التصفح">
|
||||
<Link href="/articles">المكتبة</Link>
|
||||
<span aria-hidden="true">/</span>
|
||||
<Link href={`/articles?topic=${topic}`}>{topicLabel}</Link>
|
||||
</nav>
|
||||
<h1>{post.title}</h1>
|
||||
<p className="lede">{post.dek}</p>
|
||||
<div className="art-meta">
|
||||
<span className={`badge${post.access === 'vip' ? ' badge-vip' : ''}`}>
|
||||
{post.access === 'vip' && <LockIcon />}
|
||||
{post.access === 'free' ? 'مجاني بالكامل' : unlocked ? 'للأعضاء' : 'معاينة مجانية'}
|
||||
</span>
|
||||
<span>{post.category}</span>
|
||||
{contentTypeLabel(post.contentType) && <span className="badge">{contentTypeLabel(post.contentType)}</span>}
|
||||
{post.authorName && <span>بقلم {post.authorName}</span>}
|
||||
<span>{minutesLabel(post.readingMinutes)} للقراءة</span>
|
||||
<span>{post.level ?? 'مبتدئ'}</span>
|
||||
{post.publishedAt && <time dateTime={post.publishedAt}>{formatDate(post.publishedAt)}</time>}
|
||||
{post.updatedAt && post.publishedAt && new Date(post.updatedAt) > new Date(post.publishedAt) && (
|
||||
<span>· حُدّث {formatDate(post.updatedAt)}</span>
|
||||
)}
|
||||
{(post.level ?? 'مبتدئ') === viewerLevel && <span className="for-you">يناسب مستواك</span>}
|
||||
</div>
|
||||
<div className="art-actions">
|
||||
<LikeButton slug={post.slug} loggedIn={role !== null} initialLiked={liked} initialCount={post.likes ?? 0} />
|
||||
<span className="views" data-views>{formatNumber(post.views)} قراءة</span>
|
||||
{unlocked && post.access === 'vip' && <SaveButton />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{typeof post.cover === 'object' && post.cover?.url && (
|
||||
<div className="wrap"><figure className="art-cover"><img src={post.cover.url} alt={post.title} width={1200} height={630} loading="eager" /></figure></div>
|
||||
)}
|
||||
|
||||
<div className="wrap art-layout">
|
||||
<article className="art-body">
|
||||
{unlocked ? (
|
||||
<>
|
||||
{earlyAccessNotice && (
|
||||
<section className="early-notice" aria-label="إشعار الوصول المبكر">
|
||||
<p>متاح مجاناً خلال الوصول المبكر. هذا المحتوى مخصص للعضوية لاحقاً؛ سنعلن موعد التفعيل قبل تغيير الوصول.</p>
|
||||
</section>
|
||||
)}
|
||||
<RichText data={post.content} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{(post.teaser || '').split(/\n{2,}/).map((para, i, arr) => (
|
||||
i === arr.length - 1 && arr.length > 1
|
||||
? <p key={i} className="fade-out">{para}</p>
|
||||
: <p key={i} className={i === 0 ? 'intro' : undefined}>{para}</p>
|
||||
))}
|
||||
<section className="paywall" aria-labelledby="paywall-title">
|
||||
<h2 id="paywall-title">بقية هذا الدليل للأعضاء</h2>
|
||||
<p>قرأت المقدمة المجانية. العضوية تفتح بقية الأقسام العملية{hasAgentFiles ? '، وقالب حالة الوكيل وقائمة الفحص قبل التشغيل' : ''}، وكل الأدلة الحصرية الأخرى.</p>
|
||||
{toc.length > 0 && (
|
||||
<div className="paywall-preview">
|
||||
<p className="aside-title">ماذا ينتظرك داخل هذا الدليل:</p>
|
||||
<ul role="list">{toc.map((t, i) => <li key={i}><LockIcon />{t}</li>)}</ul>
|
||||
</div>
|
||||
)}
|
||||
<div className="paywall-actions">
|
||||
<a className="btn btn-primary" href="/subscription">اشترك بـ <bdi dir="ltr">{MEMBERSHIP_PRICE}</bdi> شهرياً</a>
|
||||
<a className="btn btn-quiet" href={`/login?next=/posts/${post.slug}`}>لدي عضوية، تسجيل الدخول</a>
|
||||
</div>
|
||||
<p className="fine">تلغي في أي وقت من صفحة حسابك. <Link href="/subscription#faq">أسئلة قبل الاشتراك</Link> · <Link href="/articles?access=free">أكمل بالأدلة المجانية</Link></p>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
<aside className="art-aside" aria-label="داخل هذا الدليل">
|
||||
{unlocked && toc.length > 0 && (
|
||||
<nav className="toc" aria-label="فهرس الدليل">
|
||||
<p className="aside-title">في هذا الدليل</p>
|
||||
<ol>{toc.map((t, i) => <li key={i}><a href={`#sec-${i}`}>{t}</a></li>)}</ol>
|
||||
</nav>
|
||||
)}
|
||||
{unlocked && hasAgentFiles && (
|
||||
<div className="files">
|
||||
<p className="aside-title">ملفات العمل</p>
|
||||
<ul>
|
||||
<li><span>قالب حالة الوكيل <bdi dir="ltr">.md</bdi></span><button className="dl-btn" type="button" data-dl="agent-state.md">تنزيل</button></li>
|
||||
<li><span>قائمة الفحص قبل التشغيل <bdi dir="ltr">.md</bdi></span><button className="dl-btn" type="button" data-dl="pre-run-checklist.md">تنزيل</button></li>
|
||||
<li><span>سجل الأخطاء <bdi dir="ltr">.csv</bdi></span><button className="dl-btn" type="button" data-dl="error-log.csv">تنزيل</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{!unlocked && (
|
||||
<div className="files is-locked">
|
||||
<p className="aside-title">مع العضوية</p>
|
||||
<ul>
|
||||
<li><LockIcon />الأقسام العملية كاملة</li>
|
||||
{hasAgentFiles && <li><LockIcon />ملفات العمل القابلة للتنزيل</li>}
|
||||
<li><LockIcon />النقاش مع الفريق</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{attachments.length > 0 && (
|
||||
<div className="files">
|
||||
<p className="aside-title">ملفات هذا الدليل</p>
|
||||
<ul>
|
||||
{attachments.map(item => {
|
||||
// Per-file gate mirrors GET /api/files/[id]: free streams to
|
||||
// anyone; vip needs a vip/admin viewer (post access is
|
||||
// irrelevant — a vip file on a free post stays locked).
|
||||
const canDownload = item.access === 'free' || role === 'vip' || role === 'admin'
|
||||
const accessLabel = item.access === 'free' ? 'مجاني' : 'للأعضاء'
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<span>{item.label || item.filename} <span className="file-access">· {accessLabel}</span></span>
|
||||
{canDownload
|
||||
? <a className="dl-btn" href={`/api/files/${item.id}`} download>تنزيل</a>
|
||||
: <span className="dl-locked"><LockIcon />للأعضاء</span>}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{unlocked && (
|
||||
<section className="art-comments" aria-labelledby="comments-title">
|
||||
<div className="wrap narrow">
|
||||
<h2 id="comments-title">النقاش</h2>
|
||||
<div className="comment-list" id="commentList">
|
||||
{comments.docs.map((c) => (
|
||||
<article key={c.id} className="comment">
|
||||
<header><strong>{c.authorName || 'عضو'}</strong><time dateTime={String(c.createdAt)}>{formatDate(String(c.createdAt))}</time></header>
|
||||
<p>{c.body}</p>
|
||||
</article>
|
||||
))}
|
||||
{myPending?.docs.map((c) => (
|
||||
<article key={c.id} className="comment is-pending">
|
||||
<header><strong>{c.authorName || 'عضو'}</strong><span>بانتظار المراجعة</span></header>
|
||||
<p>{c.body}</p>
|
||||
</article>
|
||||
))}
|
||||
{comments.docs.length === 0 && !(myPending && myPending.docs.length > 0) && (
|
||||
<p className="muted">لا تعليقات بعد. شارك سؤالك أو تجربتك مع هذا الدليل.</p>
|
||||
)}
|
||||
</div>
|
||||
<PostExtras slug={post.slug} loggedIn={role !== null} />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{related.length > 0 && (
|
||||
<section className="art-related" aria-labelledby="related-title">
|
||||
<div className="wrap">
|
||||
<h2 id="related-title">اقرأ بعد ذلك</h2>
|
||||
<ul className="related-grid" role="list">
|
||||
{related.map(item => (
|
||||
<li key={item.id}>
|
||||
<Link href={`/posts/${item.slug}`} className="related-item">
|
||||
<span className="meta-row"><span>{item.category}</span><span>{minutesLabel(item.readingMinutes)}</span><span>{item.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></span>
|
||||
<span className="related-title">{item.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LockIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7" /><path d="M5 7V5a3 3 0 0 1 6 0v2" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
function SaveButton() {
|
||||
return <button className="save-btn" id="saveArticle" type="button" aria-pressed="false">احفظ للعودة لاحقاً</button>
|
||||
}
|
||||
|
||||
// Minimal Lexical/JSON renderer — headings, paragraphs, lists, quotes, code, rules.
|
||||
// `Node`, `innerText` and `extractH2s` live in lib/lexical (shared with llms routes).
|
||||
|
||||
function renderChildren(nodes: Node[] | undefined, counter: { h2: number }): React.ReactNode[] {
|
||||
return (nodes || []).map((n, i) => {
|
||||
const key = `${n.type}-${i}`
|
||||
if (n.type === 'text') {
|
||||
const text = n.text || ''
|
||||
return <span key={key}>{text}</span>
|
||||
}
|
||||
if (n.type === 'linebreak') return <br key={key} />
|
||||
if (n.type === 'link') return <a key={key} href={n.url || '#'} className="text-link">{renderChildren(n.children, counter)}</a>
|
||||
const inner = renderChildren(n.children, counter)
|
||||
switch (n.type) {
|
||||
case 'heading': {
|
||||
const Tag = (n.tag || 'h2') as 'h1' | 'h2' | 'h3' | 'h4'
|
||||
const id = Tag === 'h2' ? `sec-${counter.h2++}` : undefined
|
||||
return <Tag key={key} id={id}>{inner}</Tag>
|
||||
}
|
||||
case 'quote': return <blockquote key={key}>{inner}</blockquote>
|
||||
case 'list': {
|
||||
if (n.listType === 'number') return <ol key={key}>{inner}</ol>
|
||||
return <ul key={key}>{inner}</ul>
|
||||
}
|
||||
case 'listitem': return <li key={key}>{inner}</li>
|
||||
case 'paragraph': return <p key={key}>{inner}</p>
|
||||
case 'code': return <pre key={key} aria-label="مثال برمجي"><code>{n.code ?? innerText(n.children)}</code></pre>
|
||||
case 'horizontalrule': return <hr key={key} />
|
||||
case 'table':
|
||||
return (
|
||||
<div key={key} className="post-table" role="region" aria-label="جدول" tabIndex={0}>
|
||||
<table>{inner}</table>
|
||||
</div>
|
||||
)
|
||||
case 'tablerow': return <tr key={key}>{inner}</tr>
|
||||
case 'tablecell': return n.headerState ? <th key={key}>{inner}</th> : <td key={key}>{inner}</td>
|
||||
default: return <p key={key}>{inner}</p>
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function RichText({ data }: { data: unknown }) {
|
||||
if (!data || typeof data !== 'object' || !('root' in data)) return null
|
||||
const rootUnknown = data.root
|
||||
if (!rootUnknown || typeof rootUnknown !== 'object' || !('children' in rootUnknown)) return null
|
||||
const root = rootUnknown as { children?: Node[] } // named const: same JSON tree the editor produced
|
||||
return <>{renderChildren(root.children, { h2: 0 })}</>
|
||||
}
|
||||
import { getPayload } from 'payload'
|
||||
import { headers } from 'next/headers'
|
||||
import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import configPromise from '@payload-config'
|
||||
import Topnav from '@/components/topnav'
|
||||
import SiteMenu from '@/components/site-menu'
|
||||
import Footer from '@/components/footer'
|
||||
import SetBodyAttr from '@/components/set-body-attr'
|
||||
import PostExtras from './post-extras'
|
||||
import { LikeButton, ViewPing } from './engagement'
|
||||
import '../../styles/post-locked.css'
|
||||
import '../../styles/post-unlocked.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
/* QA-06: article pages get their own title/description. */
|
||||
export async function generateMetadata({ params }: Args) {
|
||||
const { slug } = await params
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const res = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { slug: { equals: slug } },
|
||||
depth: 0,
|
||||
limit: 1,
|
||||
select: { title: true, dek: true, publishedAt: true },
|
||||
})
|
||||
const post = res.docs[0] as unknown as { title: string; dek: string; publishedAt?: string | null } | undefined
|
||||
return post
|
||||
? {
|
||||
title: post.title,
|
||||
description: post.dek,
|
||||
openGraph: { type: 'article', title: post.title, description: post.dek, publishedTime: post.publishedAt ?? undefined },
|
||||
}
|
||||
: { title: 'أنور بي آي' }
|
||||
}
|
||||
|
||||
type Args = { params: Promise<{ slug: string }> }
|
||||
|
||||
type PostDoc = {
|
||||
id: number
|
||||
title: string
|
||||
slug: string
|
||||
dek: string
|
||||
access: 'free' | 'vip'
|
||||
category: string
|
||||
level?: string | null
|
||||
views?: number | null
|
||||
likes?: number | null
|
||||
readingMinutes: number
|
||||
publishedAt?: string | null
|
||||
teaser?: string | null
|
||||
content?: unknown
|
||||
cover?: { url?: string | null }
|
||||
}
|
||||
|
||||
async function getViewerRole(): Promise<string | null> {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
return (user?.role as string) ?? null
|
||||
}
|
||||
|
||||
async function getViewerField(field: 'level' | 'id'): Promise<string | number | null> {
|
||||
try {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
if (!user) return null
|
||||
return (user as unknown as Record<string, string | number>)[field] ?? null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function isLikedByViewer(postId: number): Promise<boolean> {
|
||||
try {
|
||||
const viewerId = await getViewerField('id')
|
||||
if (!viewerId) return false
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { docs } = await payload.find({
|
||||
collection: 'post-likes',
|
||||
where: { and: [{ user: { equals: viewerId } }, { post: { equals: postId } }] },
|
||||
depth: 0,
|
||||
limit: 1,
|
||||
overrideAccess: true,
|
||||
})
|
||||
return docs.length > 0
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default async function PostPage({ params }: Args) {
|
||||
const { slug } = await params
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
|
||||
const res = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { and: [{ slug: { equals: slug } }, { status: { equals: 'published' } }] },
|
||||
depth: 1,
|
||||
limit: 1,
|
||||
// VIP content is deliberately excluded here. It is fetched only after
|
||||
// the viewer's entitlement has been established below.
|
||||
select: {
|
||||
title: true, slug: true, dek: true, access: true, category: true, level: true,
|
||||
views: true, likes: true,
|
||||
readingMinutes: true, publishedAt: true, teaser: true, cover: true,
|
||||
},
|
||||
})
|
||||
const post = res.docs[0] as unknown as PostDoc | undefined
|
||||
if (!post) notFound()
|
||||
|
||||
const role = await getViewerRole()
|
||||
const unlocked = post.access === 'free' || role === 'vip' || role === 'admin'
|
||||
if (unlocked) {
|
||||
const entitled = await payload.findByID({
|
||||
collection: 'posts',
|
||||
id: post.id,
|
||||
depth: 0,
|
||||
overrideAccess: true,
|
||||
select: { content: true },
|
||||
})
|
||||
post.content = entitled.content
|
||||
}
|
||||
const accessChip = post.access === 'free' ? 'مقال مجاني · وصول كامل' : 'VIP · وصول كامل'
|
||||
const viewerLevel = await getViewerField('level')
|
||||
const viewerId = await getViewerField('id')
|
||||
|
||||
// Approved comments (public read access allows the approved-only filter).
|
||||
const comments = await payload.find({
|
||||
collection: 'comments',
|
||||
depth: 0,
|
||||
limit: 50,
|
||||
sort: '-createdAt',
|
||||
where: { and: [{ post: { equals: post.id } }, { status: { equals: 'approved' } }] },
|
||||
})
|
||||
// Authors see their own pending comments tagged «قيد المراجعة» — needs
|
||||
// overrideAccess because non-admin read access filters to approved only.
|
||||
const myPending = viewerId
|
||||
? await payload.find({
|
||||
collection: 'comments',
|
||||
depth: 0,
|
||||
limit: 10,
|
||||
overrideAccess: true,
|
||||
where: {
|
||||
and: [
|
||||
{ post: { equals: post.id } },
|
||||
{ author: { equals: viewerId } },
|
||||
{ status: { equals: 'pending' } },
|
||||
],
|
||||
},
|
||||
})
|
||||
: null
|
||||
|
||||
// TOC from content h2s (server-extracted from the Lexical tree)
|
||||
const toc = unlocked ? extractH2s(post.content) : []
|
||||
const accountEmail = await getViewerEmail().catch(() => null)
|
||||
|
||||
return (
|
||||
<>
|
||||
<SetBodyAttr attr="data-anw-dim" />
|
||||
<ViewPing slug={post.slug} />
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ '@context': 'https://schema.org', '@type': 'Article', headline: post.title, datePublished: post.publishedAt ?? undefined, author: { '@type': 'Organization', name: 'أنور بي آي' }, inLanguage: 'ar' }) }} />
|
||||
<Topnav
|
||||
viewer={accountEmail ? { email: accountEmail } : null}
|
||||
menu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/article-agent-guide', label: 'المقالات' },
|
||||
{ href: '/subscription', label: 'العضوية' },
|
||||
]}
|
||||
/>
|
||||
<SiteMenu />
|
||||
<main>
|
||||
<section className="article-head" data-od-id="article-header"><div className="container">
|
||||
{!unlocked && post.access === 'vip' ? (
|
||||
<span className="lock-chip" data-od-id="access-status">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7" /><path d="M5 7V5a3 3 0 0 1 6 0v2" /></svg>
|
||||
VIP · معاينة مجانية
|
||||
</span>
|
||||
) : (
|
||||
<span className="open-chip" data-od-id="access-status">{accessChip}</span>
|
||||
)}
|
||||
<p className="crumb">{post.category} · دليل عملي</p>
|
||||
<h1 data-od-id="article-title">{post.title}</h1>
|
||||
<p className="dek">{post.dek}</p>
|
||||
<div className="article-meta">
|
||||
<span>فريق تحرير أنور بي آي</span>
|
||||
<span className="num">قراءة {post.readingMinutes} دقيقة · {post.level ?? 'مبتدئ'}</span>
|
||||
{(post.level ?? 'مبتدئ') === viewerLevel && <span className="foryou num">يناسب مستواك</span>}
|
||||
<span className="num" data-views>{post.views ?? 0} مشاهدة</span>
|
||||
<LikeButton slug={post.slug} loggedIn={role !== null} initialLiked={await isLikedByViewer(post.id)} initialCount={post.likes ?? 0} />
|
||||
{post.publishedAt && <span>نُشر: {new Date(post.publishedAt).toLocaleDateString('ar')}</span>}
|
||||
{!unlocked && <span>المتاح مجاناً: المقدمة والقسم الأول</span>}
|
||||
{unlocked && post.access === 'vip' && <SaveButton />}
|
||||
</div>
|
||||
</div></section>
|
||||
<section className="container article-layout" data-od-id="article-content">
|
||||
<article className="article-body">
|
||||
{unlocked ? (
|
||||
<RichText data={post.content} />
|
||||
) : (
|
||||
<>
|
||||
<p className="free-tag">معاينة مجانية</p>
|
||||
{(post.teaser || '').split(/\n{2,}/).map((para, i, arr) => (
|
||||
i === 0 ? <p key={i} className="lede">{para}</p>
|
||||
: i === arr.length - 1 ? (
|
||||
<div className="lock-cut" data-od-id="lock-cut" key={i}>
|
||||
<p className="cut-p">{para}</p>
|
||||
</div>
|
||||
)
|
||||
: <p key={i}>{para}</p>
|
||||
))}
|
||||
<div className="paywall" data-od-id="paywall" aria-labelledby="paywall-title">
|
||||
<p className="crumb">الجزء المتبقي · للأعضاء فقط</p>
|
||||
<h2 id="paywall-title">أكملت الجزء المجاني من هذا الدليل</h2>
|
||||
<p>بقية الدليل غير موجودة في صفحة المعاينة، وتُفتح فقط بعد تسجيل الدخول بعضوية فعّالة. اشتراك واحد يفتح الأدلة الحصرية ومسارات الفيديو وملفات العمل.</p>
|
||||
<ul className="locked-in">
|
||||
<li><LockIcon />بقية الأقسام العملية للدليل<span className="num">—</span></li>
|
||||
<li><LockIcon />كل الأدلة الحصرية الأخرى<span className="num">—</span></li>
|
||||
<li><LockIcon />ملفات العمل قابلة للتنزيل<span className="num">ملفات</span></li>
|
||||
</ul>
|
||||
<div className="paywall-actions">
|
||||
<a className="btn btn-primary" href="/subscription" data-od-id="subscribe-cta">اشترك لفتح الدليل</a>
|
||||
<a className="text-link" href={`/login?next=/posts/${post.slug}`} data-od-id="login-cta">لدي اشتراك؟ سجّل الدخول</a>
|
||||
</div>
|
||||
<p className="price-line"><bdi dir="ltr">10$</bdi> شهرياً · إلغاء فوري في أي وقت</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
<aside className="toc" aria-label="فهرس الدليل" data-od-id="article-toc">
|
||||
<strong>داخل هذا الدليل</strong>
|
||||
{unlocked ? (
|
||||
<>
|
||||
{toc.map((t, i) => <a key={i} href={`#sec-${i}`}>{t}</a>)}
|
||||
<div className="progress-card" data-od-id="progress-card">
|
||||
<strong>تقدّمك في المسار</strong>
|
||||
<div className="progress-track" role="progressbar" aria-valuenow={40} aria-valuemin={0} aria-valuemax={100} aria-label="تقدم المسار"><div className="progress-bar"></div></div>
|
||||
<span className="p-label">قرأت ٢ من ٥ أدلة مسار الوكلاء</span>
|
||||
</div>
|
||||
<div className="files-card" data-od-id="files-card"><strong>ملفات العمل</strong>
|
||||
<div className="file-row"><span>قالب حالة الوكيل <bdi dir="ltr">.md</bdi></span><button className="dl-btn" type="button" data-dl="agent-state.md">تنزيل</button></div>
|
||||
<div className="file-row"><span>قائمة الفحص قبل التشغيل</span><button className="dl-btn" type="button" data-dl="pre-run-checklist.md">تنزيل</button></div>
|
||||
<div className="file-row"><span>سجل الأخطاء <bdi dir="ltr">.csv</bdi></span><button className="dl-btn" type="button" data-dl="error-log.csv">تنزيل</button></div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="toc-locked"><LockIcon />الأقسام العملية</span>
|
||||
<span className="toc-locked"><LockIcon />ملفات العمل</span>
|
||||
<div className="member-note"><strong>ملفات الأعضاء</strong><p>قالب حالة الوكيل وقائمة الفحص قبل التشغيل متاحان للتنزيل داخل العضوية.</p><a className="btn btn-primary" href="/subscription">شاهد مزايا العضوية</a></div>
|
||||
</>
|
||||
)}
|
||||
</aside>
|
||||
</section>
|
||||
{unlocked && (
|
||||
<section className="comments" data-od-id="comments"><div className="container comments-wrap">
|
||||
<p className="crumb">نقاش الأعضاء · هادئ ومفيد</p>
|
||||
<h2 data-od-id="comments-title">التعليقات</h2>
|
||||
<div className="comment-list" id="commentList">
|
||||
{comments.docs.map((c) => (
|
||||
<article key={c.id} className="comment">
|
||||
<div className="comment-head">
|
||||
<strong>{c.authorName || 'عضو'}</strong>
|
||||
<span className="crumb">{new Date(String(c.createdAt)).toLocaleDateString('ar')}</span>
|
||||
</div>
|
||||
<p>{c.body}</p>
|
||||
</article>
|
||||
))}
|
||||
{myPending?.docs.map((c) => (
|
||||
<article key={c.id} className="comment">
|
||||
<div className="comment-head">
|
||||
<strong>{c.authorName || 'عضو'}</strong>
|
||||
<span className="crumb">قيد المراجعة</span>
|
||||
</div>
|
||||
<p>{c.body}</p>
|
||||
</article>
|
||||
))}
|
||||
{comments.docs.length === 0 && !(myPending && myPending.docs.length > 0) && (
|
||||
<p className="crumb">لا تعليقات بعد — كن أول من يشارك.</p>
|
||||
)}
|
||||
</div>
|
||||
<PostExtras slug={post.slug} loggedIn={role !== null} />
|
||||
</div></section>
|
||||
)}
|
||||
<section className="related" data-od-id="related-articles"><div className="container">
|
||||
<p className="crumb">اقرأ بعد ذلك · ضمن عضويتك</p>
|
||||
<div className="related-grid">
|
||||
<article className="related-card" data-od-id="related-monitor"><span>الأتمتة · ٢٤ دقيقة</span><h3>اكتشف فشل سير العمل قبل المستخدم</h3><Link href="/articles?topic=automation" aria-label="افتح الدليل التالي">تصفح المكتبة ←</Link></article>
|
||||
<article className="related-card" data-od-id="related-rag"><span>النماذج · ٤ أجزاء</span><h3>افصل فشل الاسترجاع عن فشل الإجابة</h3><Link href="/articles?topic=models" aria-label="افتح الدليل التالي">تصفح المكتبة ←</Link></article>
|
||||
<article className="related-card" data-od-id="related-catalog"><span>المكتبة</span><h3>كل الأدلة والمسارات</h3><Link href="/articles">افتح المكتبة ←</Link></article>
|
||||
</div>
|
||||
</div></section>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function LockIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7" /><path d="M5 7V5a3 3 0 0 1 6 0v2" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
function SaveButton() {
|
||||
return <button className="save-btn" id="saveArticle" type="button" aria-pressed="false" data-od-id="save-article">احفظ للعودة لاحقاً</button>
|
||||
}
|
||||
|
||||
async function getViewerEmail(): Promise<string | null> {
|
||||
try {
|
||||
const payload = await getPayload({ config: configPromise })
|
||||
const { user } = await payload.auth({ headers: await headers() })
|
||||
return (user?.email as string) ?? null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal Lexical/JSON renderer — headings, paragraphs, lists, quotes, code, rules.
|
||||
type Node = { type?: string; text?: string; children?: Node[]; tag?: string; url?: string; listType?: string; code?: string }
|
||||
|
||||
function renderChildren(nodes: Node[] | undefined, counter: { h2: number }): React.ReactNode[] {
|
||||
return (nodes || []).map((n, i) => {
|
||||
const key = `${n.type}-${i}`
|
||||
if (n.type === 'text') {
|
||||
const text = n.text || ''
|
||||
return <span key={key}>{text}</span>
|
||||
}
|
||||
if (n.type === 'linebreak') return <br key={key} />
|
||||
if (n.type === 'link') return <a key={key} href={n.url || '#'} className="text-link">{renderChildren(n.children, counter)}</a>
|
||||
const inner = renderChildren(n.children, counter)
|
||||
switch (n.type) {
|
||||
case 'heading': {
|
||||
const Tag = (n.tag || 'h2') as 'h1' | 'h2' | 'h3' | 'h4'
|
||||
const id = Tag === 'h2' ? `sec-${counter.h2++}` : undefined
|
||||
return <Tag key={key} id={id}>{inner}</Tag>
|
||||
}
|
||||
case 'quote': return <blockquote key={key}>{inner}</blockquote>
|
||||
case 'list': {
|
||||
if (n.listType === 'number') return <ol key={key}>{inner}</ol>
|
||||
return <ul key={key}>{inner}</ul>
|
||||
}
|
||||
case 'listitem': return <li key={key}>{inner}</li>
|
||||
case 'paragraph': return <p key={key}>{inner}</p>
|
||||
case 'code': return <pre key={key} aria-label="مثال برمجي"><code>{n.code ?? innerText(n.children)}</code></pre>
|
||||
case 'horizontalrule': return <hr key={key} />
|
||||
default: return <p key={key}>{inner}</p>
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function innerText(nodes?: Node[]): string {
|
||||
return (nodes || []).map(n => (n.type === 'text' ? n.text || '' : innerText(n.children))).join('')
|
||||
}
|
||||
|
||||
function extractH2s(data: unknown): string[] {
|
||||
try {
|
||||
const root = (data as { root?: { children?: Node[] } })?.root
|
||||
if (!root?.children) return []
|
||||
return root.children
|
||||
.filter(n => n.type === 'heading' && (n.tag || 'h2') === 'h2')
|
||||
.map(n => innerText(n.children))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function RichText({ data }: { data: unknown }) {
|
||||
if (!data || typeof data !== 'object' || !('root' in data)) return null
|
||||
const rootUnknown = data.root
|
||||
if (!rootUnknown || typeof rootUnknown !== 'object' || !('children' in rootUnknown)) return null
|
||||
const root = rootUnknown as { children?: Node[] } // named const: same JSON tree the editor produced
|
||||
return <>{renderChildren(root.children, { h2: 0 })}</>
|
||||
}
|
||||
|
||||
@@ -56,11 +56,11 @@ export default function PostExtras({ slug, loggedIn }: { slug: string; loggedIn:
|
||||
'',
|
||||
'- [ ] الهدف مكتوب في جملة واحدة قابلة للقياس',
|
||||
'- [ ] شرط توقف واضح يمنع الحلقة اللانهائية',
|
||||
'- [ ] كل أداة لها صلاحية محددة وشخص مسؤول عن الموافقة',
|
||||
'- [ ] كل أداة لها صلاحية محددة ومسؤول تأكيد بشري',
|
||||
'- [ ] بيانات الاختبار جاهزة وليست بيانات إنتاج',
|
||||
'- [ ] سجل تدقيق يكتب كل فعل يقوم به الوكيل',
|
||||
'- [ ] سقف تكلفة وزمن محدد لكل تشغيل',
|
||||
'- [ ] خطة مراجعة بشرية للمخرجات قبل نشرها',
|
||||
'- [ ] سقف تكلفة وزمن محدد للتشغيلة الواحدة',
|
||||
'- [ ] خطة تراجع بشري للمخرجات قبل نشرها',
|
||||
].join('\n'),
|
||||
},
|
||||
'error-log.csv': {
|
||||
@@ -106,7 +106,7 @@ export default function PostExtras({ slug, loggedIn }: { slug: string; loggedIn:
|
||||
e.preventDefault()
|
||||
const form = e.currentTarget
|
||||
if (!form.checkValidity()) {
|
||||
setStatus('اكتب تعليقاً من 8 أحرف على الأقل.')
|
||||
setStatus('اكتب تعليقاً من ٨ أحرف على الأقل.')
|
||||
form.reportValidity()
|
||||
return
|
||||
}
|
||||
@@ -135,24 +135,15 @@ export default function PostExtras({ slug, loggedIn }: { slug: string; loggedIn:
|
||||
}
|
||||
}
|
||||
|
||||
if (!loggedIn) {
|
||||
return (
|
||||
<div className="comment-gate">
|
||||
<p>سجّل الدخول لتشارك سؤالك أو تجربتك مع هذا الدليل.</p>
|
||||
<a className="btn btn-quiet" href={`/login?next=/posts/${slug}`}>سجّل الدخول للتعليق</a>
|
||||
<p>لا تملك حساباً؟ <a href={`/signup?next=/posts/${slug}`}>أنشئ حساباً مجاناً</a></p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="comment-form" id="commentForm" method="post" noValidate onSubmit={onSubmit}>
|
||||
<form className="comment-form" id="commentForm" method="post" noValidate onSubmit={onSubmit} data-od-id="comment-form">
|
||||
<div className="field">
|
||||
<label htmlFor="commentBody">تعليقك</label>
|
||||
<textarea className="textarea" id="commentBody" name="comment" required minLength={8} maxLength={2000}></textarea>
|
||||
</div>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy}>{busy ? 'جارٍ الإرسال…' : 'أرسل التعليق'}</button>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy}>{busy ? '…' : 'أضف التعليق'}</button>
|
||||
<p className="status" id="commentStatus" role="status">{status}</p>
|
||||
{!loggedIn && <p className="crumb">التعليق متاح للأعضاء بعد <a className="text-link" href="/login">تسجيل الدخول</a>.</p>}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,32 +1,48 @@
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
import '../styles/privacy.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'الخصوصية' }
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<div id="site" className="site-page page-privacy">
|
||||
<Topnav />
|
||||
<main id="content">
|
||||
<section className="hero" data-od-id="privacy-hero">
|
||||
<div className="container">
|
||||
<p className="eyebrow">الخصوصية · مسودة ما قبل الإطلاق</p>
|
||||
<h1 data-od-id="privacy-title">بياناتك ليست مادة للمحتوى.</h1>
|
||||
<p className="lead">توضح هذه المسودة الحد الأدنى المقترح لجمع البيانات واستخدامها داخل أنور بآي.</p>
|
||||
<p className="notice" role="note">هذه سياسة تجريبية للواجهة وليست نصاً قانونياً نهائياً. يجب مراجعتها واعتمادها قبل نشر الموقع.</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="container policy" data-od-id="privacy-content">
|
||||
<section data-od-id="privacy-data"><h2>ما الذي نجمعه؟</h2><p>عند تشغيل الحسابات فعلياً قد نحتاج إلى الاسم والبريد الإلكتروني، وبيانات العضوية والفوترة التي يوفرها مزوّد الدفع. لا ينبغي تخزين بيانات البطاقة كاملة داخل المنصة.</p></section>
|
||||
<section data-od-id="privacy-use"><h2>كيف تُستخدم البيانات؟</h2><ul><li>تسجيل الدخول وحفظ التقدّم والتفضيلات.</li><li>إدارة العضوية وإرسال الرسائل التي اختارها المستخدم.</li><li>حماية المنصة وتشخيص الأعطال وتحسين تجربة القراءة.</li></ul></section>
|
||||
<section data-od-id="privacy-sharing"><h2>المشاركة والاحتفاظ</h2><p>لا تُباع البيانات الشخصية. قبل الإطلاق يجب تسمية مزوّدي الاستضافة والبريد والدفع والتحليلات، وتحديد مدة الاحتفاظ بكل نوع من البيانات بوضوح.</p></section>
|
||||
<section data-od-id="privacy-rights"><h2>حقوقك</h2><p>يمكنك طلب نسخة من بياناتك أو تصحيحها أو حذفها بعد تفعيل الحسابات. أرسل طلبك إلى <a href="mailto:hello@anwarpy.ai">hello@anwarpy.ai</a>.</p></section>
|
||||
<section data-od-id="privacy-updates"><h2>التحديثات</h2><p>يجب إضافة تاريخ السريان وملخص أي تغيير جوهري عند اعتماد النسخة القانونية النهائية.</p></section>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import Topnav from '@/components/topnav'
|
||||
import SiteMenu from '@/components/site-menu'
|
||||
import '../styles/privacy.css'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const metadata = { title: 'الخصوصية' }
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<>
|
||||
<Topnav
|
||||
viewer={null}
|
||||
menu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/subscription', label: 'العضوية' },
|
||||
{ href: '/privacy', label: 'الخصوصية' },
|
||||
]}
|
||||
/>
|
||||
<SiteMenu
|
||||
links={[
|
||||
{ href: '/articles', label: 'المكتبة' },
|
||||
{ href: '/posts/article-agent-guide', label: 'مقال الأسبوع' },
|
||||
{ href: '/subscription', label: 'العضوية والأسعار' },
|
||||
]}
|
||||
foot={{ href: '/login', label: '', note: 'محتوى عربي عملي، بلا ضجيج.', variant: 'hidden' }}
|
||||
/>
|
||||
<main>
|
||||
<section className="hero" data-od-id="privacy-hero">
|
||||
<div className="container">
|
||||
<p className="eyebrow">الخصوصية · مسودة ما قبل الإطلاق</p>
|
||||
<h1 data-od-id="privacy-title">بياناتك ليست مادة للمحتوى.</h1>
|
||||
<p className="lead">توضح هذه المسودة الحد الأدنى المقترح لجمع البيانات واستخدامها داخل أنور بي آي.</p>
|
||||
<p className="notice" role="note">هذه سياسة تجريبية للواجهة وليست نصاً قانونياً نهائياً. يجب مراجعتها واعتمادها قبل نشر الموقع.</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="container policy" data-od-id="privacy-content">
|
||||
<section data-od-id="privacy-data"><h2>ما الذي نجمعه؟</h2><p>عند تشغيل الحسابات فعلياً قد نحتاج إلى الاسم والبريد الإلكتروني، وبيانات العضوية والفوترة التي يوفرها مزوّد الدفع. لا ينبغي تخزين بيانات البطاقة كاملة داخل المنصة.</p></section>
|
||||
<section data-od-id="privacy-use"><h2>كيف تُستخدم البيانات؟</h2><ul><li>تسجيل الدخول وحفظ التقدّم والتفضيلات.</li><li>إدارة العضوية وإرسال الرسائل التي اختارها المستخدم.</li><li>حماية المنصة وتشخيص الأعطال وتحسين تجربة القراءة.</li></ul></section>
|
||||
<section data-od-id="privacy-sharing"><h2>المشاركة والاحتفاظ</h2><p>لا تُباع البيانات الشخصية. قبل الإطلاق يجب تسمية مزوّدي الاستضافة والبريد والدفع والتحليلات، وتحديد مدة الاحتفاظ بكل نوع من البيانات بوضوح.</p></section>
|
||||
<section data-od-id="privacy-rights"><h2>حقوقك</h2><p>يمكنك طلب نسخة من بياناتك أو تصحيحها أو حذفها بعد تفعيل الحسابات. أرسل طلبك إلى <a href="mailto:hello@anwarpi.ai">hello@anwarpi.ai</a>.</p></section>
|
||||
<section data-od-id="privacy-updates"><h2>التحديثات</h2><p>يجب إضافة تاريخ السريان وملخص أي تغيير جوهري عند اعتماد النسخة القانونية النهائية.</p></section>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="pagefoot" data-od-id="footer"><div className="container footer-bottom"><span>© أنور بي آي ٢٠٢٦</span><a href="mailto:hello@anwarpi.ai">تواصل معنا</a></div></footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'إنشاء حساب',
|
||||
robots: { index: false, follow: true },
|
||||
}
|
||||
export const metadata: Metadata = { title: 'إنشاء حساب' }
|
||||
|
||||
export default function SignupLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
'use client'
|
||||
import Topnav from '@/components/topnav'
|
||||
import Footer from '@/components/footer'
|
||||
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
@@ -14,29 +11,11 @@ import '../styles/signup.css'
|
||||
export default function SignupPage() {
|
||||
const router = useRouter()
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [showConfirm, setShowConfirm] = useState(false)
|
||||
const [status, setStatus] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [emailError, setEmailError] = useState<string | null>(null)
|
||||
const [suggestion, setSuggestion] = useState<string | null>(null)
|
||||
const [pwOk, setPwOk] = useState(false)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [nextPath, setNextPath] = useState<string | null>(null)
|
||||
|
||||
/* Common typos → canonical domain (step 16; on blur of the email input). */
|
||||
const EMAIL_TYPOS: Record<string, string> = {
|
||||
'gmial.com': 'gmail.com',
|
||||
'gmai.com': 'gmail.com',
|
||||
'gmail.co': 'gmail.com',
|
||||
'hotmial.com': 'hotmail.com',
|
||||
'outlook.co': 'outlook.com',
|
||||
'yahoo.co': 'yahoo.com',
|
||||
}
|
||||
function domainSuggestion(raw: string): string | null {
|
||||
const at = raw.lastIndexOf('@')
|
||||
if (at < 0) return null
|
||||
return EMAIL_TYPOS[raw.slice(at + 1).toLowerCase().trim()] ?? null
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setNextPath(safeNext(new URLSearchParams(window.location.search).get('next')))
|
||||
}, [])
|
||||
@@ -45,44 +24,23 @@ export default function SignupPage() {
|
||||
e.preventDefault()
|
||||
const form = e.currentTarget
|
||||
const data = new FormData(form)
|
||||
setEmailError(null)
|
||||
const confirm = form.elements.namedItem('confirmPassword') as HTMLInputElement
|
||||
confirm.setCustomValidity(data.get('password') === data.get('confirmPassword') ? '' : 'كلمتا المرور غير متطابقتين.')
|
||||
if (!form.checkValidity()) {
|
||||
setStatus('تحقق من جميع الحقول المطلوبة.')
|
||||
setStatus(data.get('password') !== data.get('confirmPassword') ? 'كلمتا المرور غير متطابقتين.' : 'تحقق من جميع الحقول المطلوبة.')
|
||||
form.reportValidity()
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
setStatus('')
|
||||
try {
|
||||
const res = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email: data.get('email'), password: data.get('password'), fullName: data.get('name'), termsVersion: '2026-10-03' }),
|
||||
})
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null) as { error?: string; errors?: { message?: string; path?: string; field?: string }[] } | null
|
||||
// Middleware 429 shape: { error: 'محاولات كثيرة جدًا. حاول بعد قليل.' }
|
||||
// + Retry-After seconds → show verbatim, append «حاول بعد X دقيقة.»
|
||||
const retryAfterHeader = res.headers.get('Retry-After')
|
||||
if (typeof err?.error === 'string') {
|
||||
const retryAfterSec = Number(retryAfterHeader)
|
||||
setStatus(
|
||||
retryAfterHeader && Number.isFinite(retryAfterSec)
|
||||
? `${err.error} حاول بعد ${Math.max(1, Math.ceil(retryAfterSec / 60))} دقيقة.`
|
||||
: err.error,
|
||||
)
|
||||
setBusy(false)
|
||||
return
|
||||
}
|
||||
const first = err?.errors?.[0]
|
||||
const failedField = first?.path ?? first?.field
|
||||
if (failedField === 'email' && first?.message) {
|
||||
// Duplicate email (unique-constraint ValidationError) → inline under
|
||||
// the email input, not the global status line.
|
||||
setEmailError('هذا البريد مسجَّل لدينا.')
|
||||
} else {
|
||||
setStatus(first?.message || 'تعذّر إنشاء الحساب — قد يكون البريد مستخدماً بالفعل.')
|
||||
}
|
||||
const err = await res.json().catch(() => null)
|
||||
setStatus(err?.errors?.[0]?.message || 'تعذّر إنشاء الحساب — قد يكون البريد مستخدماً بالفعل.')
|
||||
setBusy(false)
|
||||
return
|
||||
}
|
||||
@@ -100,22 +58,33 @@ export default function SignupPage() {
|
||||
}
|
||||
setStatus('تم إنشاء الحساب — سجّل الدخول للمتابعة.')
|
||||
router.push(nextPath ? '/login?next=' + encodeURIComponent(nextPath) : '/login')
|
||||
} catch {
|
||||
setStatus('تعذّر الاتصال. حاول مرة أخرى بعد التحقق من اتصالك.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="site" className="site-page page-signup">
|
||||
<Topnav />
|
||||
<main id="content" className="auth">
|
||||
<section className="auth-story">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="auth-mark" src="/brand/mark-light.svg" alt="" width={436} height={382} />
|
||||
<h1>ابدأ بحساب مجاني.</h1>
|
||||
<p>الحساب المجاني يفتح كل الأدلة المجانية كاملة والتعليق عليها. يمكنك الاشتراك في العضوية لاحقاً إن احتجتها.</p>
|
||||
<>
|
||||
<header className="topnav" data-od-id="topnav">
|
||||
<div className="container nav-inner">
|
||||
<Link className="logo" href="/" data-od-id="brand">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="logo-mark" src="/anwarpi-logo.jpg" alt="" width={30} height={34} />
|
||||
أنور بي آي
|
||||
</Link>
|
||||
<Link className="nav-return" href={nextPath ? `/login?next=${encodeURIComponent(nextPath)}` : '/login'} data-od-id="login-link">لديك حساب؟ سجّل الدخول</Link>
|
||||
</div>
|
||||
</header>
|
||||
<main className="auth">
|
||||
<section className="auth-story" data-od-id="signup-story">
|
||||
<div>
|
||||
<p className="eyebrow">ابدأ مسارك</p>
|
||||
<h1 data-od-id="signup-story-title">ابنِ معرفتك، خطوة بخطوة.</h1>
|
||||
<p>أنشئ حساباً لحفظ المقالات ومتابعة تقدّمك والوصول إلى مزايا العضوية من أي جهاز.</p>
|
||||
<ul className="story-list">
|
||||
<li><span>مكتبتك الشخصية</span><span className="story-mark">محفوظة</span></li>
|
||||
<li><span>تقدّم المسارات</span><span className="story-mark">متزامن</span></li>
|
||||
<li><span>إعدادات واضحة</span><span className="story-mark">تحت سيطرتك</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="story-foot">العربية أولاً · خصوصيتك محفوظة</p>
|
||||
</section>
|
||||
<section className="auth-form-wrap" data-od-id="signup-form-section">
|
||||
<form className="auth-form" id="signupForm" method="post" action="/api/users" noValidate onSubmit={onSubmit} data-od-id="signup-form">
|
||||
@@ -123,26 +92,16 @@ export default function SignupPage() {
|
||||
<h2 data-od-id="signup-title">إنشاء حساب</h2>
|
||||
<p className="lead">أدخل بياناتك الأساسية للبدء.</p>
|
||||
<div className="field"><label htmlFor="name">الاسم</label><input className="input" id="name" name="name" type="text" autoComplete="name" minLength={2} required onInvalid={e => e.currentTarget.setCustomValidity('أدخل اسمك.')} onInput={e => e.currentTarget.setCustomValidity('')} /></div>
|
||||
<div className="field"><label htmlFor="email">البريد الإلكتروني</label><input className="input" id="email" name="email" type="email" inputMode="email" autoComplete="email" placeholder="name@example.com" dir="ltr" required value={email} onChange={e => setEmail(e.target.value)} onBlur={e => setSuggestion(domainSuggestion(e.target.value))} onInvalid={e => e.currentTarget.setCustomValidity('أدخل بريداً إلكترونياً صحيحاً.')} onInput={e => e.currentTarget.setCustomValidity('')} />
|
||||
{emailError && (
|
||||
<p className="field-error" role="alert">هذا البريد مسجَّل لدينا. <Link href="/login?next=/verify-email">تسجيل الدخول</Link></p>
|
||||
)}
|
||||
{!emailError && suggestion && (
|
||||
<button type="button" className="typo-suggest" onClick={() => { const at = email.lastIndexOf('@'); setEmail(`${email.slice(0, at + 1)}${suggestion}`); setSuggestion(null) }}>
|
||||
هل تقصد <bdi dir="ltr">{suggestion}</bdi>؟
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="field"><label htmlFor="password">كلمة المرور</label><div className="input-wrap"><input className="input" id="password" name="password" type={showPassword ? 'text' : 'password'} autoComplete="new-password" minLength={8} aria-describedby="passwordHint" required onInvalid={e => e.currentTarget.setCustomValidity('أدخل كلمة مرور من ثمانية أحرف على الأقل.')} onInput={e => { e.currentTarget.setCustomValidity(''); setPwOk(e.currentTarget.value.length >= 8) }} /><button className="password-toggle" type="button" aria-controls="password" onClick={() => setShowPassword(v => !v)}>{showPassword ? 'إخفاء' : 'إظهار'}</button></div><span className={`fine${pwOk ? ' ok' : ''}`} id="passwordHint">ثمانية أحرف على الأقل.</span></div>
|
||||
<div className="field"><label htmlFor="email">البريد الإلكتروني</label><input className="input" id="email" name="email" type="email" inputMode="email" autoComplete="email" placeholder="name@example.com" dir="ltr" required onInvalid={e => e.currentTarget.setCustomValidity('أدخل بريداً إلكترونياً صحيحاً.')} onInput={e => e.currentTarget.setCustomValidity('')} /></div>
|
||||
<div className="field"><label htmlFor="password">كلمة المرور</label><div className="input-wrap"><input className="input" id="password" name="password" type={showPassword ? 'text' : 'password'} autoComplete="new-password" minLength={8} aria-describedby="passwordHint" required onInvalid={e => e.currentTarget.setCustomValidity('أدخل كلمة مرور من ثمانية أحرف على الأقل.')} onInput={e => e.currentTarget.setCustomValidity('')} /><button className="password-toggle" type="button" aria-controls="password" onClick={() => setShowPassword(v => !v)}>{showPassword ? 'إخفاء' : 'إظهار'}</button></div><span className="fine" id="passwordHint">ثمانية أحرف على الأقل.</span></div>
|
||||
<div className="field"><label htmlFor="confirmPassword">تأكيد كلمة المرور</label><div className="input-wrap"><input className="input" id="confirmPassword" name="confirmPassword" type={showConfirm ? 'text' : 'password'} autoComplete="new-password" minLength={8} required onInvalid={e => e.currentTarget.setCustomValidity('أعد إدخال كلمة المرور.')} onInput={e => e.currentTarget.setCustomValidity('')} /><button className="password-toggle" type="button" aria-controls="confirmPassword" onClick={() => setShowConfirm(v => !v)}>{showConfirm ? 'إخفاء' : 'إظهار'}</button></div></div>
|
||||
<label className="check"><input id="terms" name="terms" type="checkbox" required /><span>أوافق على <Link href="/privacy">سياسة الخصوصية</Link> و<Link href="/terms">شروط الاستخدام</Link>.</span></label>
|
||||
<button className="btn btn-primary" type="submit" disabled={busy} data-od-id="create-account-cta">{busy ? 'جارٍ إنشاء الحساب…' : 'أنشئ حسابي'}</button>
|
||||
<p className="fine signup-reassure">مجاناً — بلا بطاقة ائتمانية. لن نشارك بريدك أبداً.</p>
|
||||
<div className="status" id="signupStatus" role="status" aria-live="polite">{status}</div>
|
||||
<p className="signin">لديك حساب بالفعل؟ <Link href={nextPath ? `/login?next=${encodeURIComponent(nextPath)}` : '/login'}>سجّل الدخول</Link></p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,89 +1,77 @@
|
||||
/* Page-scoped styles: .page-about. Shared tokens live in globals.css. */
|
||||
.page-about *,.page-about *::before,.page-about *::after{box-sizing:border-box}
|
||||
.page-about{-webkit-text-size-adjust:100%}
|
||||
.page-about{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
.page-about img,.page-about svg{display:block;max-width:100%;height:auto}
|
||||
.page-about a{color:inherit;text-decoration:none}
|
||||
.page-about h1,.page-about h2,.page-about h3{font-family:var(--font-display);text-wrap:balance}
|
||||
.page-about p{text-wrap:pretty}
|
||||
.page-about :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.page-about .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-about .topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
|
||||
.page-about .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.page-about .logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}
|
||||
.page-about .logo-mark{width:30px;height:34px;object-fit:contain;flex:none;border-radius:4px}
|
||||
.page-about .nav-links{display:flex;align-items:center;gap:28px}
|
||||
.page-about .nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
|
||||
.page-about .nav-links a:hover,.page-about .nav-links a[aria-current="page"]{color:var(--fg)}
|
||||
.page-about .hero{padding-block:clamp(70px,10vw,132px);border-bottom:1px solid var(--border)}
|
||||
.page-about .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(48px,9vw,112px);align-items:flex-end}
|
||||
.page-about .eyebrow{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 22px}
|
||||
.page-about .hero h1{font-size:clamp(48px,7.5vw,92px);line-height:1.06;max-width:10ch;margin:0}
|
||||
.page-about .lead{font-size:clamp(19px,2vw,23px);line-height:1.75;color:var(--muted);max-width:54ch;margin:28px 0 0}
|
||||
.page-about .hero-note{border-top:1px solid var(--fg);padding-top:24px}
|
||||
.page-about .hero-note strong{display:block;font-size:clamp(24px,3vw,34px);line-height:1.35}
|
||||
.page-about .hero-note p{color:var(--muted);margin:10px 0 0}
|
||||
.page-about .team{padding-block:clamp(64px,9vw,104px);border-bottom:1px solid var(--border)}
|
||||
.page-about .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:46px}
|
||||
.page-about .section-head h2{font-size:clamp(38px,5vw,62px);line-height:1.12;max-width:12ch;margin:0}
|
||||
.page-about .section-head p{color:var(--muted);max-width:48ch;margin:0}
|
||||
.page-about .profile-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;border-top:1px solid var(--fg)}
|
||||
.page-about .profile{padding:34px 0 0;display:flex;flex-direction:column;min-width:0}
|
||||
.page-about .profile+.profile{padding-inline-start:42px;border-inline-start:1px solid var(--border)}
|
||||
.page-about .profile-label{font:12px/1.5 var(--font-mono);color:var(--muted)}
|
||||
.page-about .profile-main .profile-label{color:var(--accent)}
|
||||
.page-about .profile h3{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:20px 0 8px}
|
||||
.page-about .role{color:var(--fg);font-weight:700;margin:0 0 22px}
|
||||
.page-about .bio{color:var(--muted);font-size:17px;margin:0;max-width:58ch}
|
||||
.page-about .topics{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 32px}
|
||||
.page-about .topic{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border:1px solid var(--border);color:var(--muted);font-size:13px}
|
||||
.page-about .profile-link{min-height:50px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding:12px 16px;border:1px solid var(--fg);font-weight:700}
|
||||
.page-about .profile-link:hover{background:var(--fg);color:var(--surface)}
|
||||
.page-about .principles{padding-block:clamp(64px,9vw,104px)}
|
||||
.page-about .principle-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(48px,9vw,112px);align-items:flex-start}
|
||||
.page-about .principle-grid h2{font-size:clamp(38px,5vw,60px);line-height:1.14;margin:0;max-width:11ch}
|
||||
.page-about .principle-list{border-top:1px solid var(--fg)}
|
||||
.page-about .principle{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--border)}
|
||||
.page-about .principle-index{font:12px/1.5 var(--font-mono);color:var(--muted);padding-top:7px}
|
||||
.page-about .principle h3{font-size:24px;margin:0 0 8px}
|
||||
.page-about .principle p{color:var(--muted);margin:0}
|
||||
.page-about .pagefoot{padding-block:50px;border-top:1px solid var(--border);color:var(--muted)}
|
||||
.page-about .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
|
||||
.page-about .footer-links{display:flex;gap:20px;flex-wrap:wrap}
|
||||
.page-about .footer-links a{min-height:44px;display:inline-flex;align-items:center}
|
||||
.page-about .footer-links a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
|
||||
@media(max-width:920px){
|
||||
.page-about .hero-grid,.page-about .profile-grid,.page-about .principle-grid{grid-template-columns:1fr}
|
||||
.page-about .profile-grid{gap:0}
|
||||
.page-about .profile+.profile{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--border);margin-top:42px;padding-top:42px}
|
||||
.page-about .section-head{align-items:flex-start;flex-direction:column}
|
||||
.page-about .hero-note{max-width:560px}
|
||||
}
|
||||
@media(max-width:620px){
|
||||
.page-about .hero{padding-block:54px}
|
||||
.page-about .team,.page-about .principles{padding-block:58px}
|
||||
.page-about .profile h3{font-size:36px}
|
||||
.page-about .principle{grid-template-columns:42px 1fr}
|
||||
.page-about .footer-bottom,.page-about .footer-links{align-items:stretch;flex-direction:column;gap:8px}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce){.page-about *{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
|
||||
/* Matched team cards, independent of generic card and heading overrides. */
|
||||
#site.page-about .section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; margin-bottom: 32px; }
|
||||
#site.page-about .section-head h2 { max-width: none; margin: 0; font-size: clamp(28px, 3vw, 40px); }
|
||||
#site.page-about .section-head p { max-width: none; margin: 0; line-height: 1.9; }
|
||||
#site.page-about .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border: 0; align-items: stretch; }
|
||||
#site.page-about .profile, #site.page-about .profile + .profile { margin: 0; padding: 32px; border: 1px solid var(--border); background: var(--surface); border-radius: 16px; }
|
||||
#site.page-about .profile-label { font: 13px/1.8 var(--font-body); color: var(--accent); min-height: 24px; }
|
||||
#site.page-about .profile h3 { font-size: 32px; line-height: 1.6; margin: 16px 0 4px; }
|
||||
#site.page-about .profile .role { font-size: 16px; line-height: 1.8; margin: 0 0 20px; }
|
||||
#site.page-about .profile .bio { font-size: 16px; line-height: 2; max-width: none; }
|
||||
#site.page-about .topics { margin: 24px 0; gap: 8px; }
|
||||
#site.page-about .topic { border-radius: 24px; background: var(--accent-soft); border-color: transparent; color: var(--muted); }
|
||||
#site.page-about .profile-link { margin-top: auto; border: 1px solid var(--border); border-radius: 8px; color: var(--accent); font-size: 14px; }
|
||||
#site.page-about .profile-link:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
|
||||
@media (max-width: 760px) {
|
||||
#site.page-about .section-head, #site.page-about .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
|
||||
#site.page-about .profile, #site.page-about .profile + .profile { padding: 24px; }
|
||||
#site.page-about .profile h3 { font-size: 28px; }
|
||||
}
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--container: 1120px;
|
||||
--gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html{-webkit-text-size-adjust:100%}
|
||||
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
img,svg{display:block;max-width:100%;height:auto}
|
||||
a{color:inherit;text-decoration:none}
|
||||
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
|
||||
p{text-wrap:pretty}
|
||||
:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
|
||||
.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}
|
||||
.logo-mark{width:30px;height:34px;object-fit:contain;flex:none;border-radius:4px}
|
||||
.nav-links{display:flex;align-items:center;gap:28px}
|
||||
.nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
|
||||
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg)}
|
||||
.hero{padding-block:clamp(70px,10vw,132px);border-bottom:1px solid var(--border)}
|
||||
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(48px,9vw,112px);align-items:end}
|
||||
.eyebrow{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 22px}
|
||||
.hero h1{font-size:clamp(48px,7.5vw,92px);line-height:1.06;max-width:10ch;margin:0}
|
||||
.lead{font-size:clamp(19px,2vw,23px);line-height:1.75;color:var(--muted);max-width:54ch;margin:28px 0 0}
|
||||
.hero-note{border-top:1px solid var(--fg);padding-top:24px}
|
||||
.hero-note strong{display:block;font-size:clamp(24px,3vw,34px);line-height:1.35}
|
||||
.hero-note p{color:var(--muted);margin:10px 0 0}
|
||||
.team{padding-block:clamp(64px,9vw,104px);border-bottom:1px solid var(--border)}
|
||||
.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:46px}
|
||||
.section-head h2{font-size:clamp(38px,5vw,62px);line-height:1.12;max-width:12ch;margin:0}
|
||||
.section-head p{color:var(--muted);max-width:48ch;margin:0}
|
||||
.profile-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;border-top:1px solid var(--fg)}
|
||||
.profile{padding:34px 0 0;display:flex;flex-direction:column;min-width:0}
|
||||
.profile+.profile{padding-inline-start:42px;border-inline-start:1px solid var(--border)}
|
||||
.profile-label{font:12px/1.5 var(--font-mono);color:var(--muted)}
|
||||
.profile-main .profile-label{color:var(--accent)}
|
||||
.profile h3{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:20px 0 8px}
|
||||
.role{color:var(--fg);font-weight:700;margin:0 0 22px}
|
||||
.bio{color:var(--muted);font-size:17px;margin:0;max-width:58ch}
|
||||
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 32px}
|
||||
.topic{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border:1px solid var(--border);color:var(--muted);font-size:13px}
|
||||
.profile-link{min-height:50px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding:12px 16px;border:1px solid var(--fg);font-weight:700}
|
||||
.profile-link:hover{background:var(--fg);color:var(--surface)}
|
||||
.principles{padding-block:clamp(64px,9vw,104px)}
|
||||
.principle-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(48px,9vw,112px);align-items:start}
|
||||
.principle-grid h2{font-size:clamp(38px,5vw,60px);line-height:1.14;margin:0;max-width:11ch}
|
||||
.principle-list{border-top:1px solid var(--fg)}
|
||||
.principle{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--border)}
|
||||
.principle-index{font:12px/1.5 var(--font-mono);color:var(--muted);padding-top:7px}
|
||||
.principle h3{font-size:24px;margin:0 0 8px}
|
||||
.principle p{color:var(--muted);margin:0}
|
||||
.pagefoot{padding-block:50px;border-top:1px solid var(--border);color:var(--muted)}
|
||||
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
|
||||
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
|
||||
.footer-links a{min-height:44px;display:inline-flex;align-items:center}
|
||||
.footer-links a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
|
||||
@media(max-width:920px){
|
||||
:root{--gutter:22px}
|
||||
.hero-grid,.profile-grid,.principle-grid{grid-template-columns:1fr}
|
||||
.profile-grid{gap:0}
|
||||
.profile+.profile{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--border);margin-top:42px;padding-top:42px}
|
||||
.section-head{align-items:start;flex-direction:column}
|
||||
.hero-note{max-width:560px}
|
||||
}
|
||||
@media(max-width:620px){
|
||||
:root{--gutter:18px}
|
||||
.hero{padding-block:54px}
|
||||
.team,.principles{padding-block:58px}
|
||||
.profile h3{font-size:36px}
|
||||
.principle{grid-template-columns:42px 1fr}
|
||||
.footer-bottom,.footer-links{align-items:stretch;flex-direction:column;gap:8px}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
|
||||
@@ -1,109 +1,112 @@
|
||||
/* Page-scoped styles: .page-account-settings. Shared tokens live in globals.css. */
|
||||
.page-account-settings *,.page-account-settings *::before,.page-account-settings *::after{box-sizing:border-box} .page-account-settings{scroll-behavior:smooth;-webkit-text-size-adjust:100%} .page-account-settings{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility} .page-account-settings.locked{overflow:hidden}
|
||||
.page-account-settings a{color:inherit;text-decoration:none} .page-account-settings button,.page-account-settings input{font:inherit} .page-account-settings button{cursor:pointer} .page-account-settings h1,.page-account-settings h2,.page-account-settings h3{font-family:var(--font-display);text-wrap:balance} .page-account-settings p{text-wrap:pretty} .page-account-settings :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.page-account-settings .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-account-settings .topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .page-account-settings .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.page-account-settings .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.page-account-settings .logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)} .page-account-settings .nav-links{display:flex;align-items:center;gap:28px}.page-account-settings .nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.page-account-settings .nav-links a:hover{color:var(--fg)}
|
||||
.page-account-settings .nav-tools{display:flex;align-items:center;gap:8px}
|
||||
.page-account-settings .nav-account{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding-inline:16px;border:1px solid var(--fg);background:var(--fg);color:var(--surface);font-weight:700}.page-account-settings .nav-account:hover{background:var(--accent);border-color:var(--accent)}
|
||||
.page-account-settings .nav-account .avatar{width:22px;height:22px;background:var(--surface);color:var(--fg);display:grid;place-items:center;font:12px/1 var(--font-mono);font-weight:700}
|
||||
.page-account-settings .icon-btn{min-height:44px;width:46px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.page-account-settings .icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.page-account-settings .demo-strip{background:var(--fg);color:var(--surface);font:11px/1.6 var(--font-mono);padding:8px 0;text-align:center}
|
||||
.page-account-settings .demo-strip b{color:var(--surface);font-weight:700}
|
||||
.page-account-settings .page-head{padding-block:clamp(48px,7vw,84px) 0}
|
||||
.page-account-settings .crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}
|
||||
.page-account-settings .page-head h1{font-size:clamp(42px,6vw,72px);line-height:1.1;margin:0}
|
||||
.page-account-settings .page-head .sub{color:var(--muted);margin:16px 0 0;max-width:52ch}
|
||||
.page-account-settings .settings-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(40px,7vw,90px);align-items:start;padding-block:56px 90px}
|
||||
.page-account-settings .settings-nav{position:sticky;top:100px;border-top:1px solid var(--fg)}
|
||||
.page-account-settings .settings-nav button{width:100%;min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--muted);font-size:16px;text-align:right;padding:0 4px}
|
||||
.page-account-settings .settings-nav button:hover{color:var(--fg)}
|
||||
.page-account-settings .settings-nav button[aria-selected="true"]{color:var(--fg);font-weight:700}
|
||||
.page-account-settings .settings-nav button[aria-selected="true"]::after{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
|
||||
.page-account-settings .panel{display:none}
|
||||
.page-account-settings .panel.active{display:block}
|
||||
.page-account-settings .panel h2{font-size:clamp(30px,3.4vw,42px);line-height:1.2;margin:0 0 10px}
|
||||
.page-account-settings .panel .panel-sub{color:var(--muted);max-width:56ch;margin:0 0 34px}
|
||||
.page-account-settings .form-grid{display:grid;gap:24px;max-width:560px}
|
||||
.page-account-settings .field{display:grid;gap:7px}
|
||||
.page-account-settings .field label{font-size:13px;color:var(--muted)}
|
||||
.page-account-settings .field .hint{font-size:12px;color:var(--muted)}
|
||||
.page-account-settings .input{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;min-height:48px}
|
||||
.page-account-settings .input:hover{border-color:var(--muted)}
|
||||
.page-account-settings .input:focus{outline:2px solid var(--accent);outline-offset:1px}
|
||||
.page-account-settings .input[disabled]{background:var(--fg-soft);color:var(--muted);cursor:not-allowed}
|
||||
.page-account-settings .input.invalid{border-color:var(--accent)}
|
||||
.page-account-settings .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid transparent;font-weight:700}
|
||||
.page-account-settings .btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.page-account-settings .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black)}
|
||||
.page-account-settings .btn-secondary{border-color:var(--border);background:transparent;color:var(--fg)}.page-account-settings .btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.page-account-settings .status{font-size:14px;min-height:24px;display:flex;align-items:center;gap:8px}
|
||||
.page-account-settings .status.ok{color:var(--accent);font-weight:700}
|
||||
.page-account-settings .status.err{color:var(--accent)}
|
||||
.page-account-settings .pw-rules{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:4px}
|
||||
.page-account-settings .pw-rules li{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
|
||||
.page-account-settings .pw-rules li::before{content:"";width:7px;height:7px;border:1px solid var(--muted);transform:rotate(45deg);flex:none}
|
||||
.page-account-settings .pw-rules li.ok{color:var(--fg)}
|
||||
.page-account-settings .pw-rules li.ok::before{background:var(--accent);border-color:var(--accent)}
|
||||
.page-account-settings .prefs{border-top:1px solid var(--fg);max-width:640px}
|
||||
.page-account-settings .pref-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--border)}
|
||||
.page-account-settings .pref-row strong{display:block;font-size:17px}
|
||||
.page-account-settings .pref-row p{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:44ch}
|
||||
.page-account-settings .switch{position:relative;width:52px;min-height:32px;flex:none}
|
||||
.page-account-settings .switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
|
||||
.page-account-settings .switch .track{position:absolute;inset:0;border:1px solid var(--muted);background:var(--surface);pointer-events:none;transition:background .15s,border-color .15s}
|
||||
.page-account-settings .switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
|
||||
.page-account-settings .switch .track::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:22px;height:22px;background:var(--fg);transition:transform .15s}
|
||||
.page-account-settings .switch input:checked + .track::after{transform:translateX(-20px);background:var(--surface)}
|
||||
.page-account-settings .switch input:focus-visible + .track{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.page-account-settings .membership-card{border:1px solid var(--fg);padding:clamp(24px,4vw,38px);max-width:640px}
|
||||
.page-account-settings .membership-head{display:flex;justify-content:space-between;align-items:start;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--border)}
|
||||
.page-account-settings .membership-head h3{font-size:28px;margin:0}
|
||||
.page-account-settings .state-chip{font:11px/1.5 var(--font-mono);padding:6px 12px;border:1px solid var(--accent);color:var(--accent);white-space:nowrap}
|
||||
.page-account-settings .state-chip.cancelled{border-color:var(--muted);color:var(--muted)}
|
||||
.page-account-settings .plan-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px;padding-block:24px}
|
||||
.page-account-settings .plan-details dt{font:12px/1.6 var(--font-mono);color:var(--muted)}
|
||||
.page-account-settings .plan-details dd{margin:4px 0 0;font-size:16px}
|
||||
.page-account-settings .price-tag{font-family:var(--font-display);font-size:44px;line-height:1}
|
||||
.page-account-settings .price-tag-early{font-size:24px;color:var(--accent,var(--fg))}
|
||||
.page-account-settings .price-tag small{display:block;font:11px/1.5 var(--font-mono);color:var(--muted);margin-top:6px}
|
||||
.page-account-settings .membership-actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--border)}
|
||||
.page-account-settings .cancel-zone{margin-top:34px;max-width:640px;border-top:1px solid var(--border);padding-top:24px}
|
||||
.page-account-settings .cancel-zone h3{font-size:22px;margin:0 0 6px}
|
||||
.page-account-settings .cancel-zone p{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:52ch}
|
||||
.page-account-settings .billing{margin-top:34px;max-width:640px;border-top:1px solid var(--border);padding-top:24px}
|
||||
.page-account-settings .billing h3{font-size:22px;margin:0 0 6px}
|
||||
.page-account-settings .billing-sub{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:52ch}
|
||||
.page-account-settings .billing-table{border:1px solid var(--border)}
|
||||
.page-account-settings .billing-row{display:grid;grid-template-columns:1.1fr 1.5fr .7fr .8fr auto;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);font-size:14px}
|
||||
.page-account-settings .billing-row:last-child{border-bottom:0}
|
||||
.page-account-settings .billing-row.head{font:11px/1.6 var(--font-mono);color:var(--muted);padding:10px 18px}
|
||||
.page-account-settings .billing-row .amt,.page-account-settings .billing-row .bdate{font-family:var(--font-mono);white-space:nowrap}
|
||||
.page-account-settings .billing-row .desc{color:var(--fg)}
|
||||
.page-account-settings .chip{display:inline-block;padding:2px 10px;border:1px solid var(--border);font:11px/1.9 var(--font-mono);color:var(--muted);white-space:nowrap}
|
||||
.page-account-settings .chip.paid{color:var(--fg);border-color:var(--fg)}
|
||||
.page-account-settings .chip.upcoming{color:var(--accent);border-color:var(--accent)}
|
||||
.page-account-settings .chip.voided{color:var(--muted);border-color:var(--border);text-decoration:line-through}
|
||||
.page-account-settings .inv-link{font:12px/1.6 var(--font-mono);color:var(--fg);text-decoration:underline;text-underline-offset:3px}
|
||||
.page-account-settings .inv-link:hover{color:var(--accent)}
|
||||
.page-account-settings .inv-link:disabled{color:var(--muted);text-decoration:none;cursor:default}
|
||||
.page-account-settings .inv-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
||||
.page-account-settings .text-danger{background:transparent;border:0;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px}
|
||||
.page-account-settings .text-danger:hover{color:color-mix(in oklch,var(--accent) 80%,black)}
|
||||
.page-account-settings .dialog{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.page-account-settings .dialog.open{visibility:visible;pointer-events:auto}
|
||||
.page-account-settings .dialog-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 58%,transparent);opacity:0;transition:opacity .2s}
|
||||
.page-account-settings .dialog.open .dialog-scrim{opacity:1}
|
||||
.page-account-settings .dialog-panel{position:absolute;inset-inline:0;top:50%;transform:translateY(calc(-50% + 12px));margin-inline:auto;width:min(560px,92vw);background:var(--bg);border:1px solid var(--fg);padding:clamp(26px,4vw,40px);opacity:0;transition:opacity .2s,transform .2s}
|
||||
.page-account-settings .dialog.open .dialog-panel{opacity:1;transform:translateY(-50%)}
|
||||
.page-account-settings .dialog-panel h2{font-size:30px;margin:0 0 12px}
|
||||
.page-account-settings .dialog-panel p{color:var(--muted);margin:0 0 14px}
|
||||
.page-account-settings .dialog-panel .keep-note{border-inline-start:2px solid var(--border);padding-inline-start:14px}
|
||||
.page-account-settings .dialog-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
|
||||
.page-account-settings .pagefoot{padding-block:54px;border-top:1px solid var(--border);color:var(--muted)}
|
||||
.page-account-settings .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px}
|
||||
.page-account-settings .footer-col strong{display:block;color:var(--fg);margin-bottom:12px}
|
||||
.page-account-settings .footer-col a{display:block;min-height:36px}.page-account-settings .footer-col a:hover{color:var(--fg);text-decoration:underline}
|
||||
.page-account-settings .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:38px;border-top:1px solid var(--border);font-size:13px}
|
||||
.page-account-settings .menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.page-account-settings .menu-panel.open{visibility:visible;pointer-events:auto}.page-account-settings .menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.page-account-settings .menu-panel.open .menu-scrim{opacity:1}.page-account-settings .menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.page-account-settings .menu-panel.open .menu-drawer{transform:translateX(0)}.page-account-settings .menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.page-account-settings .menu-links{display:flex;flex-direction:column}.page-account-settings .menu-links a{display:flex;justify-content:space-between;align-items:center;min-height:58px;border-bottom:1px solid var(--border);font-size:18px}
|
||||
@media(max-width:920px){.page-account-settings .nav-links{display:none}.page-account-settings .settings-layout{grid-template-columns:1fr}.page-account-settings .settings-nav{position:static;display:grid;grid-template-columns:1fr 1fr;border-top:0;margin-bottom:10px}.page-account-settings .settings-nav button{border:1px solid var(--border)}.page-account-settings .footer-grid{grid-template-columns:1fr 1fr}}
|
||||
@media(max-width:620px){.page-account-settings .nav-account .name-label{display:none}.page-account-settings .page-head h1{font-size:44px}.page-account-settings .settings-layout{padding-block:40px 60px}.page-account-settings .footer-grid{grid-template-columns:1fr;gap:28px}.page-account-settings .plan-details{grid-template-columns:1fr}.page-account-settings .dialog-actions{flex-direction:column}.page-account-settings .dialog-actions .btn{width:100%}.page-account-settings .billing-row{grid-template-columns:1fr 1fr;row-gap:2px}.page-account-settings .billing-row.head{display:none}.page-account-settings .billing-row .bdate{grid-column:1}.page-account-settings .billing-row .desc{grid-column:1 / -1;color:var(--muted)}}
|
||||
@media(prefers-reduced-motion:reduce){.page-account-settings *{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; --container: 1180px; --gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility} body.locked{overflow:hidden}
|
||||
a{color:inherit;text-decoration:none} button,input{font:inherit} button{cursor:pointer} h1,h2,h3{font-family:var(--font-display);text-wrap:balance} p{text-wrap:pretty} :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)} .nav-links{display:flex;align-items:center;gap:28px}.nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.nav-links a:hover{color:var(--fg)}
|
||||
.nav-tools{display:flex;align-items:center;gap:8px}
|
||||
.nav-account{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding-inline:16px;border:1px solid var(--fg);background:var(--fg);color:var(--surface);font-weight:700}.nav-account:hover{background:var(--accent);border-color:var(--accent)}
|
||||
.nav-account .avatar{width:22px;height:22px;background:var(--surface);color:var(--fg);display:grid;place-items:center;font:12px/1 var(--font-mono);font-weight:700}
|
||||
.icon-btn{min-height:44px;width:46px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.demo-strip{background:var(--fg);color:var(--surface);font:11px/1.6 var(--font-mono);padding:8px 0;text-align:center}
|
||||
.demo-strip b{color:var(--surface);font-weight:700}
|
||||
.page-head{padding-block:clamp(48px,7vw,84px) 0}
|
||||
.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}
|
||||
.page-head h1{font-size:clamp(42px,6vw,72px);line-height:1.1;margin:0}
|
||||
.page-head .sub{color:var(--muted);margin:16px 0 0;max-width:52ch}
|
||||
.settings-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(40px,7vw,90px);align-items:start;padding-block:56px 90px}
|
||||
.settings-nav{position:sticky;top:100px;border-top:1px solid var(--fg)}
|
||||
.settings-nav button{width:100%;min-height:52px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--muted);font-size:16px;text-align:right;padding:0 4px}
|
||||
.settings-nav button:hover{color:var(--fg)}
|
||||
.settings-nav button[aria-selected="true"]{color:var(--fg);font-weight:700}
|
||||
.settings-nav button[aria-selected="true"]::after{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
|
||||
.panel{display:none}
|
||||
.panel.active{display:block}
|
||||
.panel h2{font-size:clamp(30px,3.4vw,42px);line-height:1.2;margin:0 0 10px}
|
||||
.panel .panel-sub{color:var(--muted);max-width:56ch;margin:0 0 34px}
|
||||
.form-grid{display:grid;gap:24px;max-width:560px}
|
||||
.field{display:grid;gap:7px}
|
||||
.field label{font-size:13px;color:var(--muted)}
|
||||
.field .hint{font-size:12px;color:var(--muted)}
|
||||
.input{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;min-height:48px}
|
||||
.input:hover{border-color:var(--muted)}
|
||||
.input:focus{outline:2px solid var(--accent);outline-offset:1px}
|
||||
.input[disabled]{background:var(--fg-soft);color:var(--muted);cursor:not-allowed}
|
||||
.input.invalid{border-color:var(--accent)}
|
||||
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid transparent;font-weight:700}
|
||||
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black)}
|
||||
.btn-secondary{border-color:var(--border);background:transparent;color:var(--fg)}.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.status{font-size:14px;min-height:24px;display:flex;align-items:center;gap:8px}
|
||||
.status.ok{color:var(--accent);font-weight:700}
|
||||
.status.err{color:var(--accent)}
|
||||
.pw-rules{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:4px}
|
||||
.pw-rules li{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
|
||||
.pw-rules li::before{content:"";width:7px;height:7px;border:1px solid var(--muted);transform:rotate(45deg);flex:none}
|
||||
.pw-rules li.ok{color:var(--fg)}
|
||||
.pw-rules li.ok::before{background:var(--accent);border-color:var(--accent)}
|
||||
.prefs{border-top:1px solid var(--fg);max-width:640px}
|
||||
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--border)}
|
||||
.pref-row strong{display:block;font-size:17px}
|
||||
.pref-row p{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:44ch}
|
||||
.switch{position:relative;width:52px;min-height:32px;flex:none}
|
||||
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
|
||||
.switch .track{position:absolute;inset:0;border:1px solid var(--muted);background:var(--surface);pointer-events:none;transition:background .15s,border-color .15s}
|
||||
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
|
||||
.switch .track::after{content:"";position:absolute;top:4px;inset-inline-start:4px;width:22px;height:22px;background:var(--fg);transition:transform .15s}
|
||||
.switch input:checked + .track::after{transform:translateX(-20px);background:var(--surface)}
|
||||
.switch input:focus-visible + .track{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.membership-card{border:1px solid var(--fg);padding:clamp(24px,4vw,38px);max-width:640px}
|
||||
.membership-head{display:flex;justify-content:space-between;align-items:start;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--border)}
|
||||
.membership-head h3{font-size:28px;margin:0}
|
||||
.state-chip{font:11px/1.5 var(--font-mono);padding:6px 12px;border:1px solid var(--accent);color:var(--accent);white-space:nowrap}
|
||||
.state-chip.cancelled{border-color:var(--muted);color:var(--muted)}
|
||||
.plan-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 32px;padding-block:24px}
|
||||
.plan-details dt{font:12px/1.6 var(--font-mono);color:var(--muted)}
|
||||
.plan-details dd{margin:4px 0 0;font-size:16px}
|
||||
.price-tag{font-family:var(--font-display);font-size:44px;line-height:1}
|
||||
.price-tag small{display:block;font:11px/1.5 var(--font-mono);color:var(--muted);margin-top:6px}
|
||||
.membership-actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--border)}
|
||||
.cancel-zone{margin-top:34px;max-width:640px;border-top:1px solid var(--border);padding-top:24px}
|
||||
.cancel-zone h3{font-size:22px;margin:0 0 6px}
|
||||
.cancel-zone p{color:var(--muted);font-size:14px;margin:0 0 16px;max-width:52ch}
|
||||
.billing{margin-top:34px;max-width:640px;border-top:1px solid var(--border);padding-top:24px}
|
||||
.billing h3{font-size:22px;margin:0 0 6px}
|
||||
.billing-sub{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:52ch}
|
||||
.billing-table{border:1px solid var(--border)}
|
||||
.billing-row{display:grid;grid-template-columns:1.1fr 1.5fr .7fr .8fr auto;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);font-size:14px}
|
||||
.billing-row:last-child{border-bottom:0}
|
||||
.billing-row.head{font:11px/1.6 var(--font-mono);color:var(--muted);padding:10px 18px}
|
||||
.billing-row .amt,.billing-row .bdate{font-family:var(--font-mono);white-space:nowrap}
|
||||
.billing-row .desc{color:var(--fg)}
|
||||
.chip{display:inline-block;padding:2px 10px;border:1px solid var(--border);font:11px/1.9 var(--font-mono);color:var(--muted);white-space:nowrap}
|
||||
.chip.paid{color:var(--fg);border-color:var(--fg)}
|
||||
.chip.upcoming{color:var(--accent);border-color:var(--accent)}
|
||||
.chip.voided{color:var(--muted);border-color:var(--border);text-decoration:line-through}
|
||||
.inv-link{font:12px/1.6 var(--font-mono);color:var(--fg);text-decoration:underline;text-underline-offset:3px}
|
||||
.inv-link:hover{color:var(--accent)}
|
||||
.inv-link:disabled{color:var(--muted);text-decoration:none;cursor:default}
|
||||
.inv-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
|
||||
.text-danger{background:transparent;border:0;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px}
|
||||
.text-danger:hover{color:color-mix(in oklch,var(--accent) 80%,black)}
|
||||
.dialog{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.dialog.open{visibility:visible;pointer-events:auto}
|
||||
.dialog-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 58%,transparent);opacity:0;transition:opacity .2s}
|
||||
.dialog.open .dialog-scrim{opacity:1}
|
||||
.dialog-panel{position:absolute;inset-inline:0;top:50%;transform:translateY(calc(-50% + 12px));margin-inline:auto;width:min(560px,92vw);background:var(--bg);border:1px solid var(--fg);padding:clamp(26px,4vw,40px);opacity:0;transition:opacity .2s,transform .2s}
|
||||
.dialog.open .dialog-panel{opacity:1;transform:translateY(-50%)}
|
||||
.dialog-panel h2{font-size:30px;margin:0 0 12px}
|
||||
.dialog-panel p{color:var(--muted);margin:0 0 14px}
|
||||
.dialog-panel .keep-note{border-inline-start:2px solid var(--border);padding-inline-start:14px}
|
||||
.dialog-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
|
||||
.pagefoot{padding-block:54px;border-top:1px solid var(--border);color:var(--muted)}
|
||||
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px}
|
||||
.footer-col strong{display:block;color:var(--fg);margin-bottom:12px}
|
||||
.footer-col a{display:block;min-height:36px}.footer-col a:hover{color:var(--fg);text-decoration:underline}
|
||||
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:38px;border-top:1px solid var(--border);font-size:13px}
|
||||
.menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.menu-panel.open{visibility:visible;pointer-events:auto}.menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.menu-panel.open .menu-scrim{opacity:1}.menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.menu-panel.open .menu-drawer{transform:translateX(0)}.menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.menu-links{display:flex;flex-direction:column}.menu-links a{display:flex;justify-content:space-between;align-items:center;min-height:58px;border-bottom:1px solid var(--border);font-size:18px}
|
||||
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:grid;grid-template-columns:1fr 1fr;border-top:0;margin-bottom:10px}.settings-nav button{border:1px solid var(--border)}.footer-grid{grid-template-columns:1fr 1fr}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-account .name-label{display:none}.page-head h1{font-size:44px}.settings-layout{padding-block:40px 60px}.footer-grid{grid-template-columns:1fr;gap:28px}.plan-details{grid-template-columns:1fr}.dialog-actions{flex-direction:column}.dialog-actions .btn{width:100%}.billing-row{grid-template-columns:1fr 1fr;row-gap:2px}.billing-row.head{display:none}.billing-row .bdate{grid-column:1}.billing-row .desc{grid-column:1 / -1;color:var(--muted)}}
|
||||
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
|
||||
@@ -1,7 +1,28 @@
|
||||
/* Page-scoped styles: .page-home. Shared tokens live in globals.css. */
|
||||
.page-home *, .page-home *::before, .page-home *::after { box-sizing: border-box; }
|
||||
.page-home { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||||
.page-home {
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--fs-h1: clamp(46px, 6.3vw, 82px);
|
||||
--fs-h2: clamp(32px, 4vw, 52px);
|
||||
--fs-h3: 22px;
|
||||
--fs-lead: 19px;
|
||||
--fs-body: 16px;
|
||||
--fs-meta: 12px;
|
||||
--gap-xs: 8px;
|
||||
--gap-sm: 12px;
|
||||
--gap-md: 20px;
|
||||
--gap-lg: 32px;
|
||||
--gap-xl: 56px;
|
||||
--gap-2xl: 96px;
|
||||
--container: 1180px;
|
||||
--gutter: 32px;
|
||||
--radius: 2px;
|
||||
--radius-lg: 2px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
@@ -11,179 +32,181 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.page-home.modal-open { overflow: hidden; }
|
||||
.page-home img, .page-home svg { display: block; max-width: 100%; }
|
||||
.page-home a { color: inherit; text-decoration: none; }
|
||||
.page-home button, .page-home input { font: inherit; }
|
||||
.page-home button { cursor: pointer; }
|
||||
.page-home p { text-wrap: pretty; }
|
||||
.page-home h1, .page-home h2, .page-home h3 { text-wrap: balance; }
|
||||
.page-home :focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 55%, transparent); outline-offset: 3px; }
|
||||
.page-home .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
|
||||
.page-home .section { padding-block: clamp(64px, 9vw, var(--gap-2xl)); }
|
||||
.page-home .section + .section { border-top: 1px solid var(--border); }
|
||||
.page-home .stack { display: flex; flex-direction: column; }
|
||||
.page-home .stack > * + * { margin-top: var(--gap-md); }
|
||||
.page-home .row { display: flex; align-items: center; gap: var(--gap-md); }
|
||||
.page-home .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
|
||||
.page-home .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
|
||||
.page-home .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
|
||||
.page-home .h1, .page-home h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.08; margin: 0; }
|
||||
.page-home .h2, .page-home h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; margin: 0; }
|
||||
.page-home .h3, .page-home h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.35; margin: 0; }
|
||||
.page-home .lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); max-width: 54ch; margin: 0; }
|
||||
.page-home .eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin: 0 0 var(--gap-md); }
|
||||
.page-home .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
|
||||
.page-home .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
body.modal-open { overflow: hidden; }
|
||||
img, svg { display: block; max-width: 100%; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
p { text-wrap: pretty; }
|
||||
h1, h2, h3 { text-wrap: balance; }
|
||||
:focus-visible { outline: 3px solid color-mix(in oklch, var(--accent) 55%, transparent); outline-offset: 3px; }
|
||||
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
|
||||
.section { padding-block: clamp(64px, 9vw, var(--gap-2xl)); }
|
||||
.section + .section { border-top: 1px solid var(--border); }
|
||||
.stack { display: flex; flex-direction: column; }
|
||||
.stack > * + * { margin-top: var(--gap-md); }
|
||||
.row { display: flex; align-items: center; gap: var(--gap-md); }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
|
||||
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
|
||||
.h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.08; margin: 0; }
|
||||
.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; margin: 0; }
|
||||
.h3, h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.35; margin: 0; }
|
||||
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--muted); max-width: 54ch; margin: 0; }
|
||||
.eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin: 0 0 var(--gap-md); }
|
||||
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
|
||||
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
|
||||
.page-home .topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
|
||||
.page-home .topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); }
|
||||
.page-home .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 23px; font-weight: 700; }
|
||||
.page-home .logo-mark { width: 12px; height: 12px; background: var(--fg); transform: rotate(45deg); }
|
||||
.page-home .logo:hover { opacity: .72; }
|
||||
.page-home .topnav nav { display: flex; align-items: center; gap: var(--gap-lg); }
|
||||
.page-home .topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 14px; border-bottom: 1px solid transparent; }
|
||||
.page-home .topnav nav a:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.page-home .nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); background: transparent; color: var(--fg); }
|
||||
.page-home .nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.page-home .nav-tools { display: flex; align-items: center; gap: 8px; }
|
||||
.page-home .menu-trigger { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--fg); background: var(--fg); color: var(--surface); }
|
||||
.page-home .menu-trigger:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); }
|
||||
.page-home .menu-trigger svg { width: 20px; height: 20px; }
|
||||
.page-home .menu-panel { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; }
|
||||
.page-home .menu-panel.open { visibility: visible; pointer-events: auto; }
|
||||
.page-home .menu-scrim { position: absolute; inset: 0; border: 0; background: color-mix(in oklch, var(--fg) 55%, transparent); opacity: 0; transition: opacity .2s ease; }
|
||||
.page-home .menu-panel.open .menu-scrim { opacity: 1; }
|
||||
.page-home .menu-drawer { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(520px, 92vw); padding: 28px clamp(24px, 5vw, 54px); background: var(--bg); border-inline-end: 1px solid var(--fg); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
|
||||
.page-home .menu-panel.open .menu-drawer { transform: translateX(0); }
|
||||
.page-home .menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.page-home .menu-links { display: grid; margin-top: 34px; }
|
||||
.page-home .menu-links a { min-height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: clamp(27px, 4vw, 38px); }
|
||||
.page-home .menu-links a:hover { color: var(--accent); }
|
||||
.page-home .menu-foot { margin-top: auto; padding-top: 24px; color: var(--muted); }
|
||||
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
|
||||
.topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); }
|
||||
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 23px; font-weight: 700; }
|
||||
.logo-mark { width: 12px; height: 12px; background: var(--fg); transform: rotate(45deg); }
|
||||
.logo:hover { opacity: .72; }
|
||||
.topnav nav { display: flex; align-items: center; gap: var(--gap-lg); }
|
||||
.topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 14px; border-bottom: 1px solid transparent; }
|
||||
.topnav nav a:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); background: transparent; color: var(--fg); }
|
||||
.nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.nav-tools { display: flex; align-items: center; gap: 8px; }
|
||||
.menu-trigger { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--fg); background: var(--fg); color: var(--surface); }
|
||||
.menu-trigger:hover { background: var(--accent); border-color: var(--accent); color: var(--surface); }
|
||||
.menu-trigger svg { width: 20px; height: 20px; }
|
||||
.menu-panel { position: fixed; inset: 0; z-index: 60; visibility: hidden; pointer-events: none; }
|
||||
.menu-panel.open { visibility: visible; pointer-events: auto; }
|
||||
.menu-scrim { position: absolute; inset: 0; border: 0; background: color-mix(in oklch, var(--fg) 55%, transparent); opacity: 0; transition: opacity .2s ease; }
|
||||
.menu-panel.open .menu-scrim { opacity: 1; }
|
||||
.menu-drawer { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(520px, 92vw); padding: 28px clamp(24px, 5vw, 54px); background: var(--bg); border-inline-end: 1px solid var(--fg); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
|
||||
.menu-panel.open .menu-drawer { transform: translateX(0); }
|
||||
.menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.menu-links { display: grid; margin-top: 34px; }
|
||||
.menu-links a { min-height: 70px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: clamp(27px, 4vw, 38px); }
|
||||
.menu-links a:hover { color: var(--accent); }
|
||||
.menu-foot { margin-top: auto; padding-top: 24px; color: var(--muted); }
|
||||
|
||||
.page-home .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 700; transition: transform .12s ease, background .16s ease, border-color .16s ease; }
|
||||
.page-home .btn:active { transform: translateY(1px); }
|
||||
.page-home .btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
|
||||
.page-home .btn-primary:hover { background: color-mix(in oklch, var(--accent) 86%, black); color: var(--surface); }
|
||||
.page-home .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
|
||||
.page-home .btn-secondary:hover { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.page-home .btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
|
||||
.page-home .btn-ghost:hover { border-color: var(--fg); }
|
||||
.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 700; transition: transform .12s ease, background .16s ease, border-color .16s ease; }
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
|
||||
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 86%, black); color: var(--surface); }
|
||||
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
|
||||
.btn-secondary:hover { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
|
||||
.btn-ghost:hover { border-color: var(--fg); }
|
||||
|
||||
.page-home .hero { padding-block: clamp(56px, 8vw, 112px); overflow: hidden; }
|
||||
.page-home .hero-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(42px, 7vw, 96px); align-items: center; }
|
||||
.page-home .hero-copy h1 { max-width: 9ch; }
|
||||
.page-home .hero-copy .lead { margin-top: 24px; }
|
||||
.page-home .hero-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; margin-top: 32px; }
|
||||
.page-home .trust-line { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
|
||||
.hero { padding-block: clamp(56px, 8vw, 112px); overflow: hidden; }
|
||||
.hero-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(42px, 7vw, 96px); align-items: center; }
|
||||
.hero-copy h1 { max-width: 9ch; }
|
||||
.hero-copy .lead { margin-top: 24px; }
|
||||
.hero-cta { display: flex; gap: var(--gap-sm); flex-wrap: wrap; margin-top: 32px; }
|
||||
.trust-line { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
|
||||
|
||||
.page-home .deck { position: relative; min-height: 510px; }
|
||||
.page-home .deck-frame { position: relative; min-height: 470px; border: 1px solid var(--fg); background: var(--surface); overflow: hidden; }
|
||||
.page-home .deck-slide { position: absolute; inset: 0; padding: clamp(28px, 4vw, 52px); display: none; grid-template-rows: auto 1fr auto; }
|
||||
.page-home .deck-slide.active { display: grid; }
|
||||
.page-home .deck-slide::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 4px; background: var(--fg); }
|
||||
.page-home .deck-slide-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.page-home .deck-slide-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
|
||||
.page-home .deck-slide-index { font-family: var(--font-display); font-size: 30px; }
|
||||
.page-home .deck-slide-body { align-self: center; }
|
||||
.page-home .deck-slide-body h2 { font-size: clamp(38px, 5vw, 66px); max-width: 9ch; }
|
||||
.page-home .deck-slide-body p { color: var(--muted); max-width: 38ch; margin: 18px 0 0; }
|
||||
.page-home .deck-slide-foot { display: flex; align-items: end; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
|
||||
.page-home .deck-slide-format { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
|
||||
.page-home .deck-slide-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
|
||||
.page-home .deck-slide-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.page-home .play { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--fg); border-radius: 50%; }
|
||||
.page-home .deck-controls { min-height: 44px; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
|
||||
.page-home .deck-dots { display: flex; gap: 8px; }
|
||||
.page-home .deck-dot { width: 34px; height: 4px; border: 0; padding: 0; background: var(--border); }
|
||||
.page-home .deck-dot.active { background: var(--fg); }
|
||||
.page-home .deck-arrows { display: flex; gap: 8px; direction: ltr; }
|
||||
.page-home .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); background: transparent; color: var(--fg); }
|
||||
.page-home .icon-btn:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.deck { position: relative; min-height: 510px; }
|
||||
.deck-frame { position: relative; min-height: 470px; border: 1px solid var(--fg); background: var(--surface); overflow: hidden; }
|
||||
.deck-slide { position: absolute; inset: 0; padding: clamp(28px, 4vw, 52px); display: none; grid-template-rows: auto 1fr auto; }
|
||||
.deck-slide.active { display: grid; }
|
||||
.deck-slide::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 4px; background: var(--fg); }
|
||||
.deck-slide-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.deck-slide-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
|
||||
.deck-slide-index { font-family: var(--font-display); font-size: 30px; }
|
||||
.deck-slide-body { align-self: center; }
|
||||
.deck-slide-body h2 { font-size: clamp(38px, 5vw, 66px); max-width: 9ch; }
|
||||
.deck-slide-body p { color: var(--muted); max-width: 38ch; margin: 18px 0 0; }
|
||||
.deck-slide-foot { display: flex; align-items: end; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
|
||||
.deck-slide-format { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
|
||||
.deck-slide-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
|
||||
.deck-slide-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.play { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--fg); border-radius: 50%; }
|
||||
.deck-controls { min-height: 44px; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
|
||||
.deck-dots { display: flex; gap: 8px; }
|
||||
.deck-dot { width: 34px; height: 4px; border: 0; padding: 0; background: var(--border); }
|
||||
.deck-dot.active { background: var(--fg); }
|
||||
.deck-arrows { display: flex; gap: 8px; direction: ltr; }
|
||||
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); background: transparent; color: var(--fg); }
|
||||
.icon-btn:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
|
||||
.page-home .topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border); }
|
||||
.page-home .topic { min-height: 132px; padding: 24px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.page-home .topic:first-child { border-inline-start: 0; }
|
||||
.page-home .topic strong { font-family: var(--font-display); font-size: 22px; }
|
||||
.page-home .topic span { color: var(--muted); font-size: 13px; }
|
||||
.page-home .topic:hover { background: var(--fg-soft); }
|
||||
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border); }
|
||||
.topic { min-height: 132px; padding: 24px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.topic:first-child { border-inline-start: 0; }
|
||||
.topic strong { font-family: var(--font-display); font-size: 22px; }
|
||||
.topic span { color: var(--muted); font-size: 13px; }
|
||||
.topic:hover { background: var(--fg-soft); }
|
||||
|
||||
.page-home .section-head { margin-bottom: 42px; align-items: end; }
|
||||
.page-home .section-head > div { max-width: 54ch; }
|
||||
.page-home .filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
|
||||
.page-home .filter { min-height: 44px; padding: 9px 16px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
|
||||
.page-home .filter:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.page-home .filter.active { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.page-home .catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 1px solid var(--fg); }
|
||||
.page-home .catalog-card { padding-block: 28px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; min-height: 330px; }
|
||||
.page-home .catalog-card[hidden] { display: none; }
|
||||
.page-home .cover { min-height: 142px; padding: 20px; margin-bottom: 22px; background: var(--fg); color: var(--surface); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
|
||||
.page-home .cover::before { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid color-mix(in oklch, var(--surface) 28%, transparent); border-radius: 50%; inset-inline-end: -28px; top: -35px; }
|
||||
.page-home .cover-light { background: var(--border); color: var(--fg); }
|
||||
.page-home .cover-lined { background: repeating-linear-gradient(0deg, var(--surface), var(--surface) 23px, var(--border) 24px); color: var(--fg); border: 1px solid var(--border); }
|
||||
.page-home .cover-label { position: relative; font-family: var(--font-mono); font-size: 10px; }
|
||||
.page-home .cover-title { position: relative; font-family: var(--font-display); font-size: 27px; line-height: 1.2; max-width: 11ch; }
|
||||
.page-home .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
|
||||
.page-home .catalog-card h3 { font-size: 24px; }
|
||||
.page-home .catalog-card p { color: var(--muted); margin: 9px 0 20px; font-size: 14px; }
|
||||
.page-home .card-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--fg); padding: 14px 0 0; font-weight: 700; text-align: start; }
|
||||
.page-home .card-link:hover { border-color: var(--fg); }
|
||||
.page-home .card-link span:last-child { direction: ltr; }
|
||||
.page-home .empty { display: none; padding: 40px 0; color: var(--muted); }
|
||||
.page-home .empty.show { display: block; }
|
||||
.section-head { margin-bottom: 42px; align-items: end; }
|
||||
.section-head > div { max-width: 54ch; }
|
||||
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
|
||||
.filter { min-height: 44px; padding: 9px 16px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
|
||||
.filter:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.filter.active { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 1px solid var(--fg); }
|
||||
.catalog-card { padding-block: 28px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; min-height: 330px; }
|
||||
.catalog-card[hidden] { display: none; }
|
||||
.cover { min-height: 142px; padding: 20px; margin-bottom: 22px; background: var(--fg); color: var(--surface); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
|
||||
.cover::before { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid color-mix(in oklch, var(--surface) 28%, transparent); border-radius: 50%; inset-inline-end: -28px; top: -35px; }
|
||||
.cover-light { background: var(--border); color: var(--fg); }
|
||||
.cover-lined { background: repeating-linear-gradient(0deg, var(--surface), var(--surface) 23px, var(--border) 24px); color: var(--fg); border: 1px solid var(--border); }
|
||||
.cover-label { position: relative; font-family: var(--font-mono); font-size: 10px; }
|
||||
.cover-title { position: relative; font-family: var(--font-display); font-size: 27px; line-height: 1.2; max-width: 11ch; }
|
||||
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
|
||||
.catalog-card h3 { font-size: 24px; }
|
||||
.catalog-card p { color: var(--muted); margin: 9px 0 20px; font-size: 14px; }
|
||||
.card-link { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--fg); padding: 14px 0 0; font-weight: 700; text-align: start; }
|
||||
.card-link:hover { border-color: var(--fg); }
|
||||
.card-link span:last-child { direction: ltr; }
|
||||
.empty { display: none; padding: 40px 0; color: var(--muted); }
|
||||
.empty.show { display: block; }
|
||||
|
||||
.page-home .membership { background: var(--fg); color: var(--surface); }
|
||||
.page-home .membership .eyebrow { color: var(--surface); opacity: .7; }
|
||||
.page-home .membership .lead { color: color-mix(in oklch, var(--surface) 70%, transparent); }
|
||||
.page-home .membership-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--gap-xl); align-items: end; }
|
||||
.page-home .membership-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklch, var(--surface) 25%, transparent); }
|
||||
.page-home .membership-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in oklch, var(--surface) 15%, transparent); }
|
||||
.page-home .membership .btn-primary { background: var(--surface); color: var(--fg); border-color: var(--surface); margin-top: 24px; width: 100%; }
|
||||
.page-home .membership .btn-primary:hover { background: var(--border); color: var(--fg); }
|
||||
.membership { background: var(--fg); color: var(--surface); }
|
||||
.membership .eyebrow { color: var(--surface); opacity: .7; }
|
||||
.membership .lead { color: color-mix(in oklch, var(--surface) 70%, transparent); }
|
||||
.membership-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--gap-xl); align-items: end; }
|
||||
.membership-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklch, var(--surface) 25%, transparent); }
|
||||
.membership-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in oklch, var(--surface) 15%, transparent); }
|
||||
.membership .btn-primary { background: var(--surface); color: var(--fg); border-color: var(--surface); margin-top: 24px; width: 100%; }
|
||||
.membership .btn-primary:hover { background: var(--border); color: var(--fg); }
|
||||
|
||||
.page-home .pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
|
||||
.page-home .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gap-xl); padding-bottom: var(--gap-xl); }
|
||||
.page-home .footer-brand p { max-width: 34ch; margin: 14px 0 0; }
|
||||
.page-home .footer-col strong { display: block; color: var(--fg); margin-bottom: 12px; }
|
||||
.page-home .footer-col a { display: block; min-height: 36px; }
|
||||
.page-home .footer-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
|
||||
.page-home .footer-bottom { padding-top: 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.page-home .modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 24px; background: color-mix(in oklch, var(--fg) 62%, transparent); }
|
||||
.page-home .modal.open { display: grid; }
|
||||
.page-home .modal-panel { width: min(620px, 100%); max-height: min(680px, 90vh); overflow: auto; background: var(--surface); color: var(--fg); border: 1px solid var(--fg); padding: clamp(26px, 5vw, 52px); }
|
||||
.page-home .modal-close { float: left; margin: -14px -14px 20px 0; }
|
||||
.page-home .modal-panel h2 { clear: both; font-size: clamp(32px, 5vw, 50px); }
|
||||
.page-home .modal-panel p { color: var(--muted); }
|
||||
.page-home .modal-outline { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
|
||||
.page-home .modal-outline li { padding: 13px 0; border-bottom: 1px solid var(--border); }
|
||||
.pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
|
||||
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gap-xl); padding-bottom: var(--gap-xl); }
|
||||
.footer-brand p { max-width: 34ch; margin: 14px 0 0; }
|
||||
.footer-col strong { display: block; color: var(--fg); margin-bottom: 12px; }
|
||||
.footer-col a { display: block; min-height: 36px; }
|
||||
.footer-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
|
||||
.footer-bottom { padding-top: 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 24px; background: color-mix(in oklch, var(--fg) 62%, transparent); }
|
||||
.modal.open { display: grid; }
|
||||
.modal-panel { width: min(620px, 100%); max-height: min(680px, 90vh); overflow: auto; background: var(--surface); color: var(--fg); border: 1px solid var(--fg); padding: clamp(26px, 5vw, 52px); }
|
||||
.modal-close { float: left; margin: -14px -14px 20px 0; }
|
||||
.modal-panel h2 { clear: both; font-size: clamp(32px, 5vw, 50px); }
|
||||
.modal-panel p { color: var(--muted); }
|
||||
.modal-outline { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
|
||||
.modal-outline li { padding: 13px 0; border-bottom: 1px solid var(--border); }
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.page-home .hero-split, .page-home .grid-3, .page-home .grid-2-1, .page-home .membership-grid { grid-template-columns: 1fr; }
|
||||
.page-home .topnav nav { display: none; }
|
||||
.page-home .footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
.page-home .hero-copy h1 { max-width: 11ch; }
|
||||
.page-home .deck { min-height: 440px; }
|
||||
.page-home .deck-frame { min-height: 400px; }
|
||||
.page-home .topic-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.page-home .topic:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--border); }
|
||||
.page-home .topic:nth-child(4) { border-top: 1px solid var(--border); }
|
||||
.page-home .catalog { grid-template-columns: 1fr 1fr; }
|
||||
:root { --gutter: 22px; }
|
||||
.hero-split, .grid-3, .grid-2-1, .membership-grid { grid-template-columns: 1fr; }
|
||||
.topnav nav { display: none; }
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
.hero-copy h1 { max-width: 11ch; }
|
||||
.deck { min-height: 440px; }
|
||||
.deck-frame { min-height: 400px; }
|
||||
.topic-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.topic:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--border); }
|
||||
.topic:nth-child(4) { border-top: 1px solid var(--border); }
|
||||
.catalog { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.page-home .nav-action { padding-inline: 12px; }
|
||||
.page-home .hero { padding-top: 42px; }
|
||||
.page-home .deck-slide { padding: 26px; }
|
||||
.page-home .deck-slide-body h2 { font-size: 38px; }
|
||||
.page-home .deck-slide-foot { align-items: start; flex-direction: column; }
|
||||
.page-home .topic-grid, .page-home .catalog { grid-template-columns: 1fr; }
|
||||
.page-home .topic { min-height: 104px; border-inline-start: 0; border-top: 1px solid var(--border); }
|
||||
.page-home .topic:first-child { border-top: 0; }
|
||||
.page-home .section-head { align-items: start; flex-direction: column; }
|
||||
.page-home .catalog-card { min-height: auto; }
|
||||
.page-home .nav-action { display: none; }
|
||||
.page-home .footer-grid { grid-template-columns: 1fr; gap: 28px; }
|
||||
:root { --gutter: 18px; }
|
||||
.nav-action { padding-inline: 12px; }
|
||||
.hero { padding-top: 42px; }
|
||||
.deck-slide { padding: 26px; }
|
||||
.deck-slide-body h2 { font-size: 38px; }
|
||||
.deck-slide-foot { align-items: start; flex-direction: column; }
|
||||
.topic-grid, .catalog { grid-template-columns: 1fr; }
|
||||
.topic { min-height: 104px; border-inline-start: 0; border-top: 1px solid var(--border); }
|
||||
.topic:first-child { border-top: 0; }
|
||||
.section-head { align-items: start; flex-direction: column; }
|
||||
.catalog-card { min-height: auto; }
|
||||
.nav-action { display: none; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.page-home *, .page-home *::before, .page-home *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
/* Page-scoped styles: .page-posts. Shared tokens live in globals.css. */
|
||||
.page-posts *,.page-posts *::before,.page-posts *::after{box-sizing:border-box} .page-posts{scroll-behavior:smooth;-webkit-text-size-adjust:100%} .page-posts{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility} .page-posts.locked{overflow:hidden}
|
||||
.page-posts a{color:inherit;text-decoration:none} .page-posts button,.page-posts input,.page-posts textarea{font:inherit} .page-posts button{cursor:pointer} .page-posts h1,.page-posts h2,.page-posts h3{font-family:var(--font-display);text-wrap:balance} .page-posts p{text-wrap:pretty} .page-posts :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.page-posts .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .page-posts .topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .page-posts .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.page-posts .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.page-posts .logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)} .page-posts .nav-links{display:flex;align-items:center;gap:28px}.page-posts .nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.page-posts .nav-links a:hover{color:var(--fg)}
|
||||
.page-posts .nav-tools{display:flex;align-items:center;gap:8px}.page-posts .nav-login,.page-posts .icon-btn{min-height:44px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.page-posts .nav-login{padding-inline:16px}.page-posts .nav-login:hover,.page-posts .icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}.page-posts .icon-btn{width:46px}.page-posts .menu-trigger{background:var(--fg);color:var(--surface);border-color:var(--fg)}.page-posts .menu-trigger:hover{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.page-posts .article-head{padding-block:clamp(58px,9vw,110px);border-bottom:1px solid var(--border)}.page-posts .crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.page-posts .access-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid var(--accent);color:var(--accent);font:12px/1.5 var(--font-mono);margin-bottom:22px}.page-posts .article-head h1{font-size:clamp(48px,7.4vw,94px);line-height:1.06;max-width:12ch;margin:0}.page-posts .dek{font-size:clamp(19px,2vw,24px);line-height:1.7;color:var(--muted);max-width:58ch;margin:28px 0 0}.page-posts .article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font:12px/1.5 var(--font-mono);color:var(--muted)}
|
||||
.page-posts .article-layout{display:grid;grid-template-columns:minmax(0,740px) 240px;gap:clamp(48px,8vw,100px);align-items:start;padding-block:80px}.page-posts .article-body{font-size:19px;line-height:2}.page-posts .article-body h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:72px 0 20px}.page-posts .article-body h3{font-size:27px;margin:42px 0 14px}.page-posts .article-body p{margin:0 0 26px}.page-posts .article-body ul{padding-inline-start:24px}.page-posts .article-body li{margin-block:10px}.page-posts .lede{font-family:var(--font-display);font-size:28px;line-height:1.6}.page-posts .code{direction:ltr;text-align:left;background:var(--fg);color:var(--surface);padding:26px;overflow:auto;font:14px/1.8 var(--font-mono);margin:34px 0}.page-posts .note{border-block:1px solid var(--fg);padding:28px 0;margin:42px 0}.page-posts .note strong{display:block;font-family:var(--font-display);font-size:24px;margin-bottom:8px}.page-posts .steps{counter-reset:step;list-style:none;padding:0}.page-posts .steps li{counter-increment:step;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--border)}.page-posts .steps li::before{content:counter(step,decimal-leading-zero);font:14px/1.7 var(--font-mono);color:var(--accent)}
|
||||
.page-posts .toc{position:sticky;top:100px;border-top:1px solid var(--fg);padding-top:18px}.page-posts .toc strong{font-family:var(--font-display);font-size:20px}.page-posts .toc a{display:block;padding:11px 0;border-bottom:1px solid var(--border);color:var(--muted)}.page-posts .toc a:hover{color:var(--fg)}.page-posts .member-note{margin-top:28px;padding:22px;background:var(--fg);color:var(--surface)}.page-posts .member-note p{color:color-mix(in oklch,var(--surface) 72%,transparent);font-size:14px}.page-posts .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border:1px solid transparent;font-weight:700}.page-posts .btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.page-posts .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}.page-posts .btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.page-posts .btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
.page-posts .comments{padding-block:80px;border-top:1px solid var(--border)}.page-posts .comments-wrap{max-width:740px}.page-posts .comments h2{font-size:clamp(36px,5vw,54px);margin:0}.page-posts .comment-empty{color:var(--muted);padding:28px 0;border-bottom:1px solid var(--border)}.page-posts .comment-list{display:grid}.page-posts .comment{padding:24px 0;border-bottom:1px solid var(--border)}.page-posts .comment-head{display:flex;justify-content:space-between;gap:16px}.page-posts .comment p{margin:8px 0 0}.page-posts .comment-form{display:grid;gap:18px;margin-top:36px}.page-posts .field{display:grid;gap:7px}.page-posts .field label{font-size:13px;color:var(--muted)}.page-posts .input,.page-posts .textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;border-radius:0}.page-posts .textarea{min-height:130px;resize:vertical}.page-posts .input:focus,.page-posts .textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.page-posts .form-status{min-height:24px;color:var(--accent);font-weight:700}
|
||||
.page-posts .related{padding-block:80px;border-top:1px solid var(--border)}.page-posts .related-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fg)}.page-posts .related-card{padding:24px 0;border-bottom:1px solid var(--border)}.page-posts .related-card+.related-card{margin-inline-start:28px}.page-posts .related-card span{font:12px/1.5 var(--font-mono);color:var(--muted)}.page-posts .related-card h3{font-size:24px;margin:12px 0}.page-posts .related-card a{font-weight:700}.page-posts .related-card a:hover{color:var(--accent)}
|
||||
.page-posts .pagefoot{padding-block:54px;border-top:1px solid var(--border);color:var(--muted)}.page-posts .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px}.page-posts .footer-col strong{display:block;color:var(--fg);margin-bottom:12px}.page-posts .footer-col a{display:block;min-height:36px}.page-posts .footer-col a:hover{color:var(--fg);text-decoration:underline}.page-posts .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:38px;border-top:1px solid var(--border);font-size:13px}
|
||||
.page-posts .menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.page-posts .menu-panel.open{visibility:visible;pointer-events:auto}.page-posts .menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.page-posts .menu-panel.open .menu-scrim{opacity:1}.page-posts .menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.page-posts .menu-panel.open .menu-drawer{transform:translateX(0)}.page-posts .menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.page-posts .menu-links{display:grid;margin-top:34px}.page-posts .menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.page-posts .menu-links a:hover{color:var(--accent)}.page-posts .menu-foot{margin-top:auto;color:var(--muted)}
|
||||
@media(max-width:920px){.page-posts .nav-links{display:none}.page-posts .article-layout{grid-template-columns:1fr}.page-posts .toc{position:static;order:0;margin-top:24px}.page-posts .footer-grid{grid-template-columns:1fr 1fr}.page-posts .related-grid{grid-template-columns:1fr}.page-posts .related-card+.related-card{margin-inline-start:0}.page-posts .article-body{font-size:18px}}
|
||||
@media(max-width:620px){.page-posts .nav-login{display:none}.page-posts .article-head h1{font-size:48px}.page-posts .article-layout,.page-posts .comments,.page-posts .related{padding-block:56px}.page-posts .footer-grid{grid-template-columns:1fr;gap:28px}.page-posts .article-meta{align-items:flex-start;flex-direction:column}.page-posts .steps li{grid-template-columns:38px 1fr}}
|
||||
@media(prefers-reduced-motion:reduce){.page-posts *{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; --container: 1180px; --gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility} body.locked{overflow:hidden}
|
||||
a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button{cursor:pointer} h1,h2,h3{font-family:var(--font-display);text-wrap:balance} p{text-wrap:pretty} :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)} .nav-links{display:flex;align-items:center;gap:28px}.nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.nav-links a:hover{color:var(--fg)}
|
||||
.nav-tools{display:flex;align-items:center;gap:8px}.nav-login,.icon-btn{min-height:44px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.nav-login{padding-inline:16px}.nav-login:hover,.icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}.icon-btn{width:46px}.menu-trigger{background:var(--fg);color:var(--surface);border-color:var(--fg)}.menu-trigger:hover{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.article-head{padding-block:clamp(58px,9vw,110px);border-bottom:1px solid var(--border)}.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.access-chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid var(--accent);color:var(--accent);font:12px/1.5 var(--font-mono);margin-bottom:22px}.article-head h1{font-size:clamp(48px,7.4vw,94px);line-height:1.06;max-width:12ch;margin:0}.dek{font-size:clamp(19px,2vw,24px);line-height:1.7;color:var(--muted);max-width:58ch;margin:28px 0 0}.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font:12px/1.5 var(--font-mono);color:var(--muted)}
|
||||
.article-layout{display:grid;grid-template-columns:minmax(0,740px) 240px;gap:clamp(48px,8vw,100px);align-items:start;padding-block:80px}.article-body{font-size:19px;line-height:2}.article-body h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:72px 0 20px}.article-body h3{font-size:27px;margin:42px 0 14px}.article-body p{margin:0 0 26px}.article-body ul{padding-inline-start:24px}.article-body li{margin-block:10px}.lede{font-family:var(--font-display);font-size:28px;line-height:1.6}.code{direction:ltr;text-align:left;background:var(--fg);color:var(--surface);padding:26px;overflow:auto;font:14px/1.8 var(--font-mono);margin:34px 0}.note{border-block:1px solid var(--fg);padding:28px 0;margin:42px 0}.note strong{display:block;font-family:var(--font-display);font-size:24px;margin-bottom:8px}.steps{counter-reset:step;list-style:none;padding:0}.steps li{counter-increment:step;display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--border)}.steps li::before{content:counter(step,decimal-leading-zero);font:14px/1.7 var(--font-mono);color:var(--accent)}
|
||||
.toc{position:sticky;top:100px;border-top:1px solid var(--fg);padding-top:18px}.toc strong{font-family:var(--font-display);font-size:20px}.toc a{display:block;padding:11px 0;border-bottom:1px solid var(--border);color:var(--muted)}.toc a:hover{color:var(--fg)}.member-note{margin-top:28px;padding:22px;background:var(--fg);color:var(--surface)}.member-note p{color:color-mix(in oklch,var(--surface) 72%,transparent);font-size:14px}.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border:1px solid transparent;font-weight:700}.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
.comments{padding-block:80px;border-top:1px solid var(--border)}.comments-wrap{max-width:740px}.comments h2{font-size:clamp(36px,5vw,54px);margin:0}.comment-empty{color:var(--muted);padding:28px 0;border-bottom:1px solid var(--border)}.comment-list{display:grid}.comment{padding:24px 0;border-bottom:1px solid var(--border)}.comment-head{display:flex;justify-content:space-between;gap:16px}.comment p{margin:8px 0 0}.comment-form{display:grid;gap:18px;margin-top:36px}.field{display:grid;gap:7px}.field label{font-size:13px;color:var(--muted)}.input,.textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;border-radius:0}.textarea{min-height:130px;resize:vertical}.input:focus,.textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.form-status{min-height:24px;color:var(--accent);font-weight:700}
|
||||
.related{padding-block:80px;border-top:1px solid var(--border)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fg)}.related-card{padding:24px 0;border-bottom:1px solid var(--border)}.related-card+.related-card{margin-inline-start:28px}.related-card span{font:12px/1.5 var(--font-mono);color:var(--muted)}.related-card h3{font-size:24px;margin:12px 0}.related-card a{font-weight:700}.related-card a:hover{color:var(--accent)}
|
||||
.pagefoot{padding-block:54px;border-top:1px solid var(--border);color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px}.footer-col strong{display:block;color:var(--fg);margin-bottom:12px}.footer-col a{display:block;min-height:36px}.footer-col a:hover{color:var(--fg);text-decoration:underline}.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:38px;border-top:1px solid var(--border);font-size:13px}
|
||||
.menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.menu-panel.open{visibility:visible;pointer-events:auto}.menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.menu-panel.open .menu-scrim{opacity:1}.menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.menu-panel.open .menu-drawer{transform:translateX(0)}.menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.menu-links{display:grid;margin-top:34px}.menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.menu-links a:hover{color:var(--accent)}.menu-foot{margin-top:auto;color:var(--muted)}
|
||||
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.article-layout{grid-template-columns:1fr}.toc{position:static;order:0;margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr}.related-card+.related-card{margin-inline-start:0}.article-body{font-size:18px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-login{display:none}.article-head h1{font-size:48px}.article-layout,.comments,.related{padding-block:56px}.footer-grid{grid-template-columns:1fr;gap:28px}.article-meta{align-items:flex-start;flex-direction:column}.steps li{grid-template-columns:38px 1fr}}
|
||||
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
|
||||
@@ -1,95 +1,103 @@
|
||||
/* Page-scoped styles: .page-articles. Shared tokens live in globals.css. */
|
||||
|
||||
.page-articles *, .page-articles *::before, .page-articles *::after { box-sizing: border-box; }
|
||||
.page-articles { -webkit-text-size-adjust: 100%; }
|
||||
.page-articles { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font-body); text-rendering: optimizeLegibility; }
|
||||
.page-articles a { color: inherit; text-decoration: none; }
|
||||
.page-articles button { color: inherit; font: inherit; cursor: pointer; }
|
||||
.page-articles h1, .page-articles h2, .page-articles h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
|
||||
.page-articles p { text-wrap: pretty; }
|
||||
.page-articles :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
|
||||
.page-articles .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
|
||||
.page-articles .topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
|
||||
.page-articles .topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
|
||||
.page-articles .logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 23px; font-weight: 700; }
|
||||
.page-articles .logo-mark { width: 30px; height: 34px; object-fit: contain; border-radius: 4px; }
|
||||
.page-articles .topnav nav { display: flex; align-items: center; gap: 28px; }
|
||||
.page-articles .topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); border-bottom: 1px solid transparent; }
|
||||
.page-articles .topnav nav a:hover, .page-articles .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
|
||||
.page-articles .nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
|
||||
.page-articles .nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.page-articles .hero { padding-block: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--border); }
|
||||
.page-articles .hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(36px, 7vw, 88px); align-items: end; }
|
||||
.page-articles .eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); }
|
||||
.page-articles h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; }
|
||||
.page-articles .lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
|
||||
.page-articles .weekly { display: block; padding: clamp(24px, 4vw, 40px); background: var(--surface); border: 1px solid var(--border); border-top-color: var(--accent); }
|
||||
.page-articles .weekly:hover { border-color: var(--fg); background: color-mix(in oklch, var(--surface) 88%, var(--fg)); }
|
||||
.page-articles .weekly-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.page-articles .weekly h2 { margin-top: 42px; font-size: clamp(28px, 4vw, 44px); line-height: 1.18; }
|
||||
.page-articles .weekly p { margin: 14px 0 30px; color: var(--muted); }
|
||||
.page-articles .weekly-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
|
||||
.page-articles .library { padding-block: clamp(52px, 8vw, 88px); }
|
||||
.page-articles .library-tools { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; margin-bottom: 22px; }
|
||||
.page-articles .control { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; }
|
||||
.page-articles .control::placeholder { color: var(--muted); }
|
||||
.page-articles .control:hover { border-color: var(--fg); }
|
||||
.page-articles .control:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
|
||||
.page-articles .filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
|
||||
.page-articles .filter-group { min-width: 0; }
|
||||
.page-articles .filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.page-articles .filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
|
||||
.page-articles .filters::-webkit-scrollbar { display: none; }
|
||||
.page-articles .filter { flex: none; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
|
||||
.page-articles .filter:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.page-articles .filter[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.page-articles .results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
|
||||
.page-articles h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
|
||||
.page-articles .foryou { color: var(--accent); font: 11px/1.5 var(--font-mono); }
|
||||
.page-articles .count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
|
||||
.page-articles .posts { border-top: 1px solid var(--fg); }
|
||||
.page-articles .post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 168px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
|
||||
.page-articles .post[hidden] { display: none; }
|
||||
.page-articles .post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
|
||||
.page-articles .post-meta span { display: block; }
|
||||
.page-articles .post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
|
||||
.page-articles .post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
|
||||
.page-articles .post-side { justify-self: stretch; display: grid; gap: 12px; }
|
||||
.page-articles .access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.page-articles .access.free { border-color: var(--fg); color: var(--fg); }
|
||||
.page-articles .engagement { display: flex; justify-content: flex-end; gap: 12px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.page-articles .like { min-height: 44px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--muted); }
|
||||
.page-articles .like:hover, .page-articles .like[aria-pressed="true"] { color: var(--fg); border-color: var(--border); }
|
||||
.page-articles .post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
|
||||
.page-articles .post-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.page-articles .soon { color: var(--muted); cursor: default; }
|
||||
.page-articles .empty { display: none; padding: 42px 0; color: var(--muted); }
|
||||
.page-articles .empty.show { display: block; }
|
||||
.page-articles .pagefoot { padding-block: 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
|
||||
.page-articles .footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--container: 1180px;
|
||||
--gutter: 32px;
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.7 var(--font-body); text-rendering: optimizeLegibility; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { color: inherit; font: inherit; cursor: pointer; }
|
||||
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
|
||||
p { text-wrap: pretty; }
|
||||
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
|
||||
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
|
||||
.topnav { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--bg) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
|
||||
.topnav-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
|
||||
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 23px; font-weight: 700; }
|
||||
.logo-mark { width: 30px; height: 34px; object-fit: contain; border-radius: 4px; }
|
||||
.topnav nav { display: flex; align-items: center; gap: 28px; }
|
||||
.topnav nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); border-bottom: 1px solid transparent; }
|
||||
.topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
|
||||
.nav-action { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 16px; border: 1px solid var(--border); }
|
||||
.nav-action:hover { border-color: var(--fg); background: var(--fg-soft); }
|
||||
.hero { padding-block: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--border); }
|
||||
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(36px, 7vw, 88px); align-items: end; }
|
||||
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 11px/1.5 var(--font-mono); }
|
||||
h1 { max-width: 10ch; font-size: clamp(48px, 7vw, 88px); line-height: 1.06; }
|
||||
.lead { max-width: 56ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
|
||||
.weekly { display: block; padding: clamp(24px, 4vw, 40px); background: var(--surface); border: 1px solid var(--border); border-top-color: var(--accent); }
|
||||
.weekly:hover { border-color: var(--fg); background: color-mix(in oklch, var(--surface) 88%, var(--fg)); }
|
||||
.weekly-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.weekly h2 { margin-top: 42px; font-size: clamp(28px, 4vw, 44px); line-height: 1.18; }
|
||||
.weekly p { margin: 14px 0 30px; color: var(--muted); }
|
||||
.weekly-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 1px solid var(--fg); }
|
||||
.library { padding-block: clamp(52px, 8vw, 88px); }
|
||||
.library-tools { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; margin-bottom: 22px; }
|
||||
.control { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; }
|
||||
.control::placeholder { color: var(--muted); }
|
||||
.control:hover { border-color: var(--fg); }
|
||||
.control:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
|
||||
.filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 44px; padding-block: 22px; border-block: 1px solid var(--border); }
|
||||
.filter-group { min-width: 0; }
|
||||
.filter-label { display: block; margin-bottom: 10px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
|
||||
.filters::-webkit-scrollbar { display: none; }
|
||||
.filter { flex: none; min-height: 44px; padding: 9px 15px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
|
||||
.filter:hover { color: var(--fg); border-color: var(--fg); }
|
||||
.filter[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
|
||||
.results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
|
||||
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; }
|
||||
.foryou { color: var(--accent); font: 11px/1.5 var(--font-mono); }
|
||||
.count { color: var(--muted); font: 12px/1.5 var(--font-mono); }
|
||||
.posts { border-top: 1px solid var(--fg); }
|
||||
.post { display: grid; grid-template-columns: 138px minmax(0, 1fr) 168px; gap: 28px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--border); }
|
||||
.post[hidden] { display: none; }
|
||||
.post-meta { color: var(--muted); font: 12px/1.8 var(--font-mono); }
|
||||
.post-meta span { display: block; }
|
||||
.post h3 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; }
|
||||
.post p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }
|
||||
.post-side { justify-self: stretch; display: grid; gap: 12px; }
|
||||
.access { justify-self: end; display: inline-flex; align-items: center; min-height: 34px; padding: 5px 11px; border: 1px solid var(--border); color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.access.free { border-color: var(--fg); color: var(--fg); }
|
||||
.engagement { display: flex; justify-content: flex-end; gap: 12px; color: var(--muted); font: 11px/1.5 var(--font-mono); }
|
||||
.like { min-height: 44px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--muted); }
|
||||
.like:hover, .like[aria-pressed="true"] { color: var(--fg); border-color: var(--border); }
|
||||
.post-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 700; border-bottom: 1px solid transparent; }
|
||||
.post-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.soon { color: var(--muted); cursor: default; }
|
||||
.empty { display: none; padding: 42px 0; color: var(--muted); }
|
||||
.empty.show { display: block; }
|
||||
.pagefoot { padding-block: 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
|
||||
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
|
||||
@media (max-width: 920px) {
|
||||
.page-articles .topnav-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
|
||||
.page-articles .logo, .page-articles .nav-action { margin-bottom: 10px; }
|
||||
.page-articles .topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
|
||||
.page-articles .topnav nav::-webkit-scrollbar { display: none; }
|
||||
.page-articles .topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
|
||||
.page-articles .hero-grid, .page-articles .filter-panel { grid-template-columns: 1fr; gap: 20px; }
|
||||
.page-articles .weekly { margin-top: 8px; }
|
||||
.page-articles .post { grid-template-columns: 112px minmax(0, 1fr); }
|
||||
.page-articles .post-side { justify-self: start; grid-column: 2; }
|
||||
.page-articles .access { justify-self: start; }
|
||||
.page-articles .engagement { justify-content: flex-start; }
|
||||
:root { --gutter: 22px; }
|
||||
.topnav-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
|
||||
.logo, .nav-action { margin-bottom: 10px; }
|
||||
.topnav nav { order: 3; flex: 0 0 calc(100% + (var(--gutter) * 2)); gap: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; border-top: 1px solid var(--border); scrollbar-width: none; }
|
||||
.topnav nav::-webkit-scrollbar { display: none; }
|
||||
.topnav nav a { flex: none; min-height: 52px; padding-inline: 12px; white-space: nowrap; }
|
||||
.hero-grid, .filter-panel { grid-template-columns: 1fr; gap: 20px; }
|
||||
.weekly { margin-top: 8px; }
|
||||
.post { grid-template-columns: 112px minmax(0, 1fr); }
|
||||
.post-side { justify-self: start; grid-column: 2; }
|
||||
.access { justify-self: start; }
|
||||
.engagement { justify-content: flex-start; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.page-articles .nav-action { padding-inline: 12px; }
|
||||
.page-articles h1 { font-size: clamp(42px, 13vw, 58px); }
|
||||
.page-articles .library-tools { grid-template-columns: 1fr; }
|
||||
.page-articles .results-head { align-items: start; flex-direction: column; }
|
||||
.page-articles .post { grid-template-columns: 1fr; gap: 12px; }
|
||||
.page-articles .post-side { grid-column: 1; }
|
||||
.page-articles .post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
|
||||
:root { --gutter: 18px; }
|
||||
.nav-action { padding-inline: 12px; }
|
||||
h1 { font-size: clamp(42px, 13vw, 58px); }
|
||||
.library-tools { grid-template-columns: 1fr; }
|
||||
.results-head { align-items: start; flex-direction: column; }
|
||||
.post { grid-template-columns: 1fr; gap: 12px; }
|
||||
.post-side { grid-column: 1; }
|
||||
.post-link { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.page-articles * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
* { scroll-behavior: auto !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
/* Page-scoped styles: .page-verify-email. Shared tokens live in globals.css. */
|
||||
|
||||
.page-verify-email *,.page-verify-email *::before,.page-verify-email *::after{box-sizing:border-box}.page-verify-email{-webkit-text-size-adjust:100%}.page-verify-email{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);min-height:100vh}.page-verify-email a{color:inherit;text-decoration:none}.page-verify-email button{font:inherit;cursor:pointer}.page-verify-email h1,.page-verify-email h2{font-family:var(--font-display);text-wrap:balance}.page-verify-email p{text-wrap:pretty}.page-verify-email :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.page-verify-email .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-verify-email .topnav{border-bottom:1px solid var(--border)}.page-verify-email .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.page-verify-email .logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.page-verify-email .logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}.page-verify-email .nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.page-verify-email .nav-return:hover{color:var(--fg);border-color:var(--fg)}
|
||||
.page-verify-email .verification{min-height:calc(100vh - 70px);display:grid;place-items:center;padding-block:clamp(54px,9vw,110px)}.page-verify-email .card{width:min(700px,100%);background:color-mix(in oklch,var(--surface) 92%,transparent);border:1px solid var(--border);padding:clamp(28px,6vw,64px)}.page-verify-email .eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.page-verify-email .card h1{font-size:clamp(42px,7vw,72px);line-height:1.08;margin:0;max-width:11ch}.page-verify-email .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:54ch;margin:22px 0 0}.page-verify-email .email{display:block;color:var(--fg);font:700 16px/1.6 var(--font-mono);direction:ltr;text-align:right;overflow-wrap:anywhere;margin-top:8px}.page-verify-email .steps{list-style:none;margin:36px 0;padding:0;border-top:1px solid var(--fg)}.page-verify-email .steps li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--border)}.page-verify-email .step-num{font:12px/1.8 var(--font-mono);color:var(--accent)}.page-verify-email .actions{display:flex;gap:12px;flex-wrap:wrap}.page-verify-email .btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}.page-verify-email .btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.page-verify-email .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--bg)}.page-verify-email .btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.page-verify-email .btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}.page-verify-email .status{min-height:27px;color:var(--muted);font-size:14px;margin:16px 0 0}.page-verify-email .fine{color:var(--muted);font-size:12px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border)}
|
||||
@media(max-width:620px){.page-verify-email .nav-inner{gap:10px}.page-verify-email .logo{font-size:20px}.page-verify-email .nav-return{font-size:13px}.page-verify-email .verification{align-items:start;padding-block:34px}.page-verify-email .card{padding:28px 20px}.page-verify-email .actions{align-items:stretch}.page-verify-email .actions .btn{width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){.page-verify-email *{transition-duration:.01ms!important}}
|
||||
.page-verify-email .change-email{margin-top:18px}
|
||||
.page-verify-email .change-email summary{cursor:pointer;font-size:13px;color:var(--muted)}
|
||||
.page-verify-email .change-email summary:hover{color:var(--fg)}
|
||||
.page-verify-email .change-email-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
|
||||
.page-verify-email .change-email-row .input{min-height:48px;border:1px solid color-mix(in oklch,var(--border) 72%,var(--fg));background:var(--surface);color:var(--fg);padding:0 14px;min-width:min(300px,100%)}
|
||||
:root{--font-display:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,monospace;--container:1180px;--gutter:32px}
|
||||
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);min-height:100vh}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}h1,h2{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border)}.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}
|
||||
.verification{min-height:calc(100vh - 70px);display:grid;place-items:center;padding-block:clamp(54px,9vw,110px)}.card{width:min(700px,100%);background:color-mix(in oklch,var(--surface) 92%,transparent);border:1px solid var(--border);padding:clamp(28px,6vw,64px)}.eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.card h1{font-size:clamp(42px,7vw,72px);line-height:1.08;margin:0;max-width:11ch}.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:54ch;margin:22px 0 0}.email{display:block;color:var(--fg);font:700 16px/1.6 var(--font-mono);direction:ltr;text-align:right;overflow-wrap:anywhere;margin-top:8px}.steps{list-style:none;margin:36px 0;padding:0;border-top:1px solid var(--fg)}.steps li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--border)}.step-num{font:12px/1.8 var(--font-mono);color:var(--accent)}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--bg)}.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}.status{min-height:27px;color:var(--muted);font-size:14px;margin:16px 0 0}.fine{color:var(--muted);font-size:12px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border)}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-inner{gap:10px}.logo{font-size:20px}.nav-return{font-size:13px}.verification{align-items:start;padding-block:34px}.card{padding:28px 20px}.actions{align-items:stretch}.actions .btn{width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
/* Page-scoped styles: .page-forgot-password. Shared tokens live in globals.css. */
|
||||
.page-forgot-password *,.page-forgot-password *::before,.page-forgot-password *::after{box-sizing:border-box}.page-forgot-password{-webkit-text-size-adjust:100%}.page-forgot-password{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body)}.page-forgot-password a{color:inherit;text-decoration:none}.page-forgot-password button,.page-forgot-password input{font:inherit}.page-forgot-password button{cursor:pointer}.page-forgot-password h1{font-family:var(--font-display);text-wrap:balance}.page-forgot-password p{text-wrap:pretty}.page-forgot-password .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-forgot-password .topnav{border-bottom:1px solid var(--border)}.page-forgot-password .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.page-forgot-password .logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.page-forgot-password .nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.page-forgot-password .nav-return:hover{color:var(--fg);border-color:var(--fg)}
|
||||
.page-forgot-password .reset{min-height:calc(100dvh - 142px);display:grid;place-items:center;padding:64px var(--gutter)}.page-forgot-password .reset-card{width:min(520px,100%);border:1px solid var(--border);background:var(--surface);padding:clamp(28px,6vw,54px)}.page-forgot-password .eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.page-forgot-password .reset-card h1{font-size:clamp(38px,6vw,58px);line-height:1.12;margin:0}.page-forgot-password .lead{color:var(--muted);font-size:18px;margin:16px 0 30px}.page-forgot-password .field{display:grid;gap:8px}.page-forgot-password .field label{font-size:13px;color:var(--muted)}.page-forgot-password .input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:13px 14px}.page-forgot-password .input:focus{outline:2px solid var(--accent);outline-offset:1px}.page-forgot-password .btn{width:100%;min-height:50px;margin-top:18px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);font-weight:700;padding:12px 20px}.page-forgot-password .btn:hover{background:color-mix(in oklch,var(--accent) 86%,black)}.page-forgot-password .status{min-height:26px;margin:16px 0 0;color:var(--fg)}.page-forgot-password .back{min-height:44px;display:inline-flex;align-items:center;margin-top:18px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.page-forgot-password .back:hover{color:var(--fg)}.page-forgot-password .pagefoot{padding-block:26px;border-top:1px solid var(--border);color:var(--muted);text-align:center;font-size:13px}
|
||||
@media(max-width:620px){.page-forgot-password .nav-return{display:none}.page-forgot-password .reset{padding-block:40px;align-items:start}.page-forgot-password .reset-card{padding:26px 20px}}
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; --container: 1180px; --gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border)}.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}
|
||||
.reset{min-height:calc(100dvh - 142px);display:grid;place-items:center;padding:64px var(--gutter)}.reset-card{width:min(520px,100%);border:1px solid var(--border);background:var(--surface);padding:clamp(28px,6vw,54px)}.eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.reset-card h1{font-size:clamp(38px,6vw,58px);line-height:1.12;margin:0}.lead{color:var(--muted);font-size:18px;margin:16px 0 30px}.field{display:grid;gap:8px}.field label{font-size:13px;color:var(--muted)}.input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:13px 14px}.input:focus{outline:2px solid var(--accent);outline-offset:1px}.btn{width:100%;min-height:50px;margin-top:18px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);font-weight:700;padding:12px 20px}.btn:hover{background:color-mix(in oklch,var(--accent) 86%,black)}.status{min-height:26px;margin:16px 0 0;color:var(--fg)}.back{min-height:44px;display:inline-flex;align-items:center;margin-top:18px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.back:hover{color:var(--fg)}.pagefoot{padding-block:26px;border-top:1px solid var(--border);color:var(--muted);text-align:center;font-size:13px}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-return{display:none}.reset{padding-block:40px;align-items:start}.reset-card{padding:26px 20px}}
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
/* Homepage presentation, scoped to avoid changing article and account layouts. */
|
||||
.home-page {
|
||||
--border: #2a2d32;
|
||||
--surface: #15171a;
|
||||
--muted: #a5a39d;
|
||||
--radius: 10px;
|
||||
--radius-lg: 20px;
|
||||
background: linear-gradient(180deg, #0b0c0eee, #0c0d0f 70%);
|
||||
}
|
||||
.home-page .topnav { background: #0c0d0fed; }
|
||||
.home-page .nav-inner { min-height: 84px; }
|
||||
.home-page .logo { text-decoration: none; }
|
||||
.home-page .nav-action { border-radius: 8px; font-size: 14px; }
|
||||
.home-page .section { border-bottom: 0; padding-block: 76px; }
|
||||
.home-page section[id] { scroll-margin-top: 135px; }
|
||||
.home-page .hero { padding-block: 86px 72px; background: radial-gradient(ellipse at 20% 30%, #3a332640, transparent 60%); }
|
||||
.home-page .hero-split { grid-template-columns: 1.1fr 1fr; gap: 64px; }
|
||||
.home-page .eyebrow { font-family: var(--font-body); font-size: 13px; font-weight: 600; }
|
||||
.home-page .hero-copy h1 { max-width: 15ch; font-size: clamp(42px, 4.7vw, 64px); line-height: 1.4; letter-spacing: -.025em; }
|
||||
.home-page .hero-highlight { color: var(--accent); }
|
||||
.home-page .hero .lead { font-size: 18px; max-width: 44ch; margin-top: 20px; }
|
||||
.home-page .btn { min-height: 52px; padding-inline: 24px; }
|
||||
.home-page .btn-ghost { border-color: var(--border); }
|
||||
.home-page .trust-line { font-size: 13px; line-height: 1.9; }
|
||||
.home-page .deck { min-height: 460px; }
|
||||
.home-page .deck-frame { min-height: 400px; border: 1px solid #33363b; border-radius: 20px; background: linear-gradient(135deg, #1c1e22, #121316); box-shadow: 0 24px 60px #0003; }
|
||||
.home-page .deck-frame::before { content: ''; position: absolute; width: 280px; height: 280px; border: 1px solid #d4b47c26; border-radius: 50%; left: -100px; top: -120px; box-shadow: 0 0 0 35px #d4b47c0a, 0 0 0 70px #d4b47c08; pointer-events: none; }
|
||||
.home-page .deck-slide { padding: 30px; }
|
||||
.home-page .deck-slide::after { background: var(--accent); height: 3px; opacity: .65; }
|
||||
.home-page .deck-slide-index { color: var(--accent); font: 24px var(--font-mono); }
|
||||
.home-page .deck-slide-body h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.5; max-width: 16ch; margin: 0; }
|
||||
.home-page .deck-slide-body p { font-size: 15px; line-height: 1.9; }
|
||||
.home-page .deck-slide-kicker { font: 12px var(--font-body); }
|
||||
.home-page .deck-slide-foot { font-size: 13px; }
|
||||
.home-page .deck-slide-link { color: var(--accent); border: 0; }
|
||||
.home-page .icon-btn { border-radius: 50%; }
|
||||
.home-page .deck-dot { height: 44px; position: relative; background: transparent; }
|
||||
.home-page .deck-dot::before { content: ''; position: absolute; inset: 20px 0; background: var(--border); border-radius: 8px; }
|
||||
.home-page .deck-dot.active::before { background: var(--accent); }
|
||||
.home-page .section-head { margin-bottom: 30px; gap: 32px; }
|
||||
.home-page .section h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.5; margin: 0; }
|
||||
.home-page .section-head .lead { font-size: 16px; max-width: 35ch; }
|
||||
.home-page .topic-grid { border: 0; gap: 16px; }
|
||||
.home-page .topic { position: relative; min-height: 158px; border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: #141619; }
|
||||
.home-page .topic::before { content: '01'; color: var(--accent); font: 12px var(--font-mono); margin-bottom: 12px; }
|
||||
.home-page .topic:nth-child(2)::before { content: '02'; color: #c9c6bf; }
|
||||
.home-page .topic:nth-child(3)::before { content: '03'; color: #d4b47c; }
|
||||
.home-page .topic:nth-child(4)::before { content: '04'; color: #c9c6bf; }
|
||||
.home-page .topic::after { content: '↖'; position: absolute; top: 20px; left: 22px; color: var(--muted); }
|
||||
.home-page .topic strong { font-size: 21px; margin-bottom: 4px; }
|
||||
.home-page .topic:hover { border-color: var(--accent); background: #1a1c20; }
|
||||
.home-page #catalog { background: #101114; }
|
||||
.home-page .filterbar { gap: 10px; margin-bottom: 28px; }
|
||||
.home-page .filter { border-radius: 30px; font-size: 14px; padding-inline: 22px; }
|
||||
.home-page .filter.active { background: var(--fg); border-color: var(--fg); color: var(--bg); }
|
||||
.home-page .catalog { border: 0; gap: 24px; }
|
||||
.home-page .catalog-card { border: 1px solid var(--border); padding: 14px; border-radius: 16px; background: #141619; }
|
||||
.home-page .cover { min-height: 172px; border-radius: 9px; margin-bottom: 20px; background: linear-gradient(135deg, #3a3d43, #1a1c20); color: #f4f2ee; }
|
||||
.home-page .cover-light { background: linear-gradient(135deg, #43392d, #1f1b16); }
|
||||
.home-page .cover-lined { background: repeating-linear-gradient(135deg, transparent, transparent 22px, #ffffff06 23px, #ffffff06 24px), #2a2826; border: 0; }
|
||||
.home-page .cover-label { font: 12px var(--font-body); color: #e4e1db; }
|
||||
.home-page .cover-title { font-size: 26px; line-height: 1.5; max-width: 14ch; }
|
||||
.home-page .card-meta, .home-page .catalog-card h3, .home-page .catalog-card p, .home-page .card-link { margin-inline: 8px; }
|
||||
.home-page .catalog-card h3 { font-size: 20px; line-height: 1.65; }
|
||||
.home-page .catalog-card p { line-height: 1.9; }
|
||||
.home-page .card-link { color: var(--accent); font-size: 14px; padding-bottom: 8px; }
|
||||
.home-page .membership { margin: 64px auto; max-width: 1116px; border: 1px solid #3a3d43; border-radius: 20px; background: linear-gradient(115deg, #1e1d1b, #141517); color: var(--fg); }
|
||||
.home-page .membership .eyebrow { color: var(--accent); opacity: 1; }
|
||||
.home-page .membership .lead { color: var(--muted); font-size: 17px; }
|
||||
.home-page .membership-list, .home-page .membership-list li { border-color: #ffffff20; }
|
||||
.home-page .membership-list li span:last-child { color: var(--accent); font-size: 14px; }
|
||||
.home-page .membership .btn-primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
|
||||
.home-page .pagefoot { padding-block: 36px; }
|
||||
.home-page .pagefoot .row-between { flex-wrap: wrap; font-size: 13px; }
|
||||
.home-page .footer-home-brand { font-size: 20px; font-weight: 700; color: var(--fg); }
|
||||
.home-page .footer-home-brand span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
|
||||
@media (max-width: 920px) {
|
||||
.home-page .hero-split { grid-template-columns: 1fr; gap: 36px; }
|
||||
.home-page .hero-copy h1 { max-width: 20ch; }
|
||||
.home-page .hero { padding-top: 48px; }
|
||||
.home-page .deck { min-height: 0; }
|
||||
.home-page .membership { margin-inline: 22px; }
|
||||
.home-page .nav-inner { min-height: 64px; }
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.home-page .section { padding-block: 44px; }
|
||||
.home-page .hero-copy h1 { font-size: 36px !important; line-height: 1.5; }
|
||||
.home-page .hero .lead { font-size: 16px; }
|
||||
.home-page .hero-cta { margin-top: 24px; }
|
||||
.home-page .nav-action { display: inline-flex; font-size: 12px; padding-inline: 10px; }
|
||||
.home-page .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||||
.home-page .topic { padding: 16px; min-height: 150px; }
|
||||
.home-page .topic span { font-size: 12px; }
|
||||
.home-page .topic::after { left: 14px; top: 14px; }
|
||||
.home-page .deck-frame { min-height: 390px; }
|
||||
.home-page .deck-slide { padding: 24px; }
|
||||
.home-page .deck-slide-body h2 { font-size: 30px; }
|
||||
.home-page .deck-slide-foot { flex-direction: row; align-items: center; gap: 12px; }
|
||||
.home-page .deck-slide-format { font-size: 12px; }
|
||||
.home-page .play { width: 28px; height: 28px; }
|
||||
.home-page .membership { margin: 32px 18px; }
|
||||
.home-page .membership-grid { gap: 28px; }
|
||||
.home-page .filterbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
|
||||
.home-page .filter { flex: none; }
|
||||
.home-page .pagefoot .row-between { flex-direction: column; align-items: start; gap: 18px; }
|
||||
}
|
||||
|
||||
/* Carousel controls and content must not inherit legacy active backgrounds. */
|
||||
#site.home-page .deck-dot, #site.home-page .deck-dot.active { width: 34px; height: 44px; border: 0; padding: 0; background: transparent; border-radius: 8px; }
|
||||
#site.home-page .deck-dot::before { inset: 20px 0; background: var(--border); }
|
||||
#site.home-page .deck-dot.active::before { background: var(--accent); }
|
||||
#site.home-page .deck-frame { display: grid; min-height: 400px; }
|
||||
#site.home-page .deck-slide { position: relative; inset: auto; min-height: 400px; gap: 24px; }
|
||||
#site.home-page .deck-slide-body h2 { max-width: none; }
|
||||
#site.home-page .deck-slide-foot { flex-wrap: wrap; }
|
||||
#site.home-page .deck-controls { gap: 16px; align-items: center; }
|
||||
#site.home-page .deck-arrows { display: flex; gap: 8px; }
|
||||
#site.home-page .deck-controls button:disabled { cursor: default; }
|
||||
@media (max-width: 620px) {
|
||||
#site.home-page .deck-slide { min-height: 390px; padding: 24px; }
|
||||
#site.home-page .deck-controls { gap: 8px; }
|
||||
#site.home-page .deck-arrows { gap: 6px; }
|
||||
#site.home-page .deck-dot, #site.home-page .deck-dot.active { width: 28px; }
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
/* Page-scoped styles: .page-login. Shared tokens live in globals.css. */
|
||||
.page-login *,.page-login *::before,.page-login *::after{box-sizing:border-box}.page-login{-webkit-text-size-adjust:100%}.page-login{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body);text-rendering:optimizeLegibility}.page-login.locked{overflow:hidden}.page-login a{color:inherit;text-decoration:none}.page-login button,.page-login input{font:inherit}.page-login button{cursor:pointer}.page-login h1,.page-login h2,.page-login h3{font-family:var(--font-display);text-wrap:balance}.page-login p{text-wrap:pretty}.page-login :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.page-login .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-login .topnav{border-bottom:1px solid var(--border)}.page-login .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.page-login .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.page-login .logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)}.page-login .nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.page-login .nav-return:hover{color:var(--fg);border-color:var(--fg)}.page-login .icon-btn{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--fg);background:var(--fg);color:var(--surface)}.page-login .icon-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}.page-login .nav-tools{display:flex;align-items:center;gap:14px}
|
||||
.page-login .auth{min-height:calc(100vh - 70px);display:grid;grid-template-columns:1fr 1fr}.page-login .auth-story{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-inline-end:clamp(48px,8vw,100px);background:var(--fg);color:var(--surface);display:flex;flex-direction:column;justify-content:space-between}.page-login .eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.page-login .auth-story .eyebrow{color:var(--surface);opacity:.68}.page-login .auth-story h1{font-size:clamp(46px,6vw,82px);line-height:1.08;max-width:9ch;margin:0}.page-login .auth-story>div>p{color:color-mix(in oklch,var(--surface) 68%,transparent);font-size:19px;max-width:40ch}.page-login .story-list{list-style:none;margin:54px 0 0;padding:0;border-top:1px solid color-mix(in oklch,var(--surface) 24%,transparent)}.page-login .story-list li{padding:15px 0;border-bottom:1px solid color-mix(in oklch,var(--surface) 15%,transparent);display:flex;justify-content:space-between;gap:20px}.page-login .story-mark{font:12px/1.5 var(--font-mono);opacity:.58}.page-login .story-foot{font-size:13px;color:color-mix(in oklch,var(--surface) 58%,transparent)}
|
||||
.page-login .auth-form-wrap{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-inline-start:clamp(48px,8vw,100px);display:flex;align-items:center}.page-login .auth-form{width:min(440px,100%)}.page-login .auth-form h2{font-size:clamp(38px,4vw,54px);line-height:1.15;margin:0}.page-login .lead{color:var(--muted);font-size:18px;margin:12px 0 34px}.page-login .field{display:grid;gap:7px;margin-top:18px}.page-login .field label{font-size:13px;color:var(--muted)}.page-login .input-wrap{position:relative}.page-login .input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;border-radius:0}.page-login .input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.page-login .password-toggle{position:absolute;inset-inline-end:6px;top:6px;min-width:70px;height:40px;border:0;background:transparent;color:var(--muted)}.page-login .password-toggle:hover{color:var(--fg);background:var(--fg-soft)}.page-login .form-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 24px;font-size:13px}.page-login .check{display:flex;align-items:center;gap:8px}.page-login .form-row a{text-decoration:underline;text-underline-offset:3px}.page-login .form-row a:hover{color:var(--accent)}.page-login .btn{min-height:50px;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid transparent;font-weight:700}.page-login .btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.page-login .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}.page-login .divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;margin:26px 0}.page-login .divider::before,.page-login .divider::after{content:"";height:1px;background:var(--border);flex:1}.page-login .magic{min-height:50px;width:100%;border:1px solid var(--border);background:transparent;color:var(--fg);font-weight:700}.page-login .magic:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}.page-login .signup{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}.page-login .signup a{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:3px}.page-login .status{min-height:25px;color:var(--accent);font-weight:700;margin-top:14px}.page-login .fine{font-size:12px;color:var(--muted);margin-top:28px}
|
||||
.page-login .menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.page-login .menu-panel.open{visibility:visible;pointer-events:auto}.page-login .menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.page-login .menu-panel.open .menu-scrim{opacity:1}.page-login .menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.page-login .menu-panel.open .menu-drawer{transform:translateX(0)}.page-login .menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.page-login .menu-links{display:grid;margin-top:34px}.page-login .menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.page-login .menu-links a:hover{color:var(--accent)}.page-login .menu-foot{margin-top:auto;color:var(--muted)}
|
||||
@media(max-width:920px){.page-login .auth{grid-template-columns:1fr}.page-login .auth-story{min-height:440px;padding:64px var(--gutter)}.page-login .auth-form-wrap{padding:64px var(--gutter);justify-content:center}.page-login .story-foot{margin-top:54px}}
|
||||
@media(max-width:620px){.page-login .nav-return{display:none}.page-login .auth-story{min-height:auto}.page-login .auth-story h1{font-size:46px}.page-login .auth-form-wrap{padding-block:50px}.page-login .form-row{align-items:flex-start;flex-direction:column}}
|
||||
@media(prefers-reduced-motion:reduce){.page-login *{transition-duration:.01ms!important}}
|
||||
:root{--font-display:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,monospace;--container:1180px;--gutter:32px}
|
||||
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 var(--font-body);text-rendering:optimizeLegibility}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2,h3{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border)}.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted);border-bottom:1px solid transparent}.nav-return:hover{color:var(--fg);border-color:var(--fg)}.icon-btn{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--fg);background:var(--fg);color:var(--surface)}.icon-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}.nav-tools{display:flex;align-items:center;gap:14px}
|
||||
.auth{min-height:calc(100vh - 70px);display:grid;grid-template-columns:1fr 1fr}.auth-story{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-inline-end:clamp(48px,8vw,100px);background:var(--fg);color:var(--surface);display:flex;flex-direction:column;justify-content:space-between}.eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}.auth-story .eyebrow{color:var(--surface);opacity:.68}.auth-story h1{font-size:clamp(46px,6vw,82px);line-height:1.08;max-width:9ch;margin:0}.auth-story>div>p{color:color-mix(in oklch,var(--surface) 68%,transparent);font-size:19px;max-width:40ch}.story-list{list-style:none;margin:54px 0 0;padding:0;border-top:1px solid color-mix(in oklch,var(--surface) 24%,transparent)}.story-list li{padding:15px 0;border-bottom:1px solid color-mix(in oklch,var(--surface) 15%,transparent);display:flex;justify-content:space-between;gap:20px}.story-mark{font:12px/1.5 var(--font-mono);opacity:.58}.story-foot{font-size:13px;color:color-mix(in oklch,var(--surface) 58%,transparent)}
|
||||
.auth-form-wrap{padding:clamp(54px,8vw,104px) max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)));padding-inline-start:clamp(48px,8vw,100px);display:flex;align-items:center}.auth-form{width:min(440px,100%)}.auth-form h2{font-size:clamp(38px,4vw,54px);line-height:1.15;margin:0}.lead{color:var(--muted);font-size:18px;margin:12px 0 34px}.field{display:grid;gap:7px;margin-top:18px}.field label{font-size:13px;color:var(--muted)}.input-wrap{position:relative}.input{width:100%;min-height:52px;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:13px 14px;border-radius:0}.input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}.password-toggle{position:absolute;inset-inline-end:6px;top:6px;min-width:70px;height:40px;border:0;background:transparent;color:var(--muted)}.password-toggle:hover{color:var(--fg);background:var(--fg-soft)}.form-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 24px;font-size:13px}.check{display:flex;align-items:center;gap:8px}.form-row a{text-decoration:underline;text-underline-offset:3px}.form-row a:hover{color:var(--accent)}.btn{min-height:50px;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid transparent;font-weight:700}.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}.divider{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;margin:26px 0}.divider::before,.divider::after{content:"";height:1px;background:var(--border);flex:1}.magic{min-height:50px;width:100%;border:1px solid var(--border);background:transparent;color:var(--fg);font-weight:700}.magic:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}.signup{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}.signup a{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:3px}.status{min-height:25px;color:var(--accent);font-weight:700;margin-top:14px}.fine{font-size:12px;color:var(--muted);margin-top:28px}
|
||||
.menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.menu-panel.open{visibility:visible;pointer-events:auto}.menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.menu-panel.open .menu-scrim{opacity:1}.menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.menu-panel.open .menu-drawer{transform:translateX(0)}.menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.menu-links{display:grid;margin-top:34px}.menu-links a{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:clamp(27px,4vw,38px)}.menu-links a:hover{color:var(--accent)}.menu-foot{margin-top:auto;color:var(--muted)}
|
||||
@media(max-width:920px){:root{--gutter:22px}.auth{grid-template-columns:1fr}.auth-story{min-height:440px;padding:64px var(--gutter)}.auth-form-wrap{padding:64px var(--gutter);justify-content:center}.story-foot{margin-top:54px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-return{display:none}.auth-story{min-height:auto}.auth-story h1{font-size:46px}.auth-form-wrap{padding-block:50px}.form-row{align-items:flex-start;flex-direction:column}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/* Page-scoped styles: .page-onboarding. Shared tokens live in globals.css. */
|
||||
|
||||
.page-onboarding *,.page-onboarding *::before,.page-onboarding *::after{box-sizing:border-box}.page-onboarding{-webkit-text-size-adjust:100%}.page-onboarding{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body)}.page-onboarding a{color:inherit;text-decoration:none}.page-onboarding button,.page-onboarding input{font:inherit}.page-onboarding button{cursor:pointer}.page-onboarding h1,.page-onboarding h2,.page-onboarding h3{font-family:var(--font-display);text-wrap:balance}.page-onboarding p{text-wrap:pretty}.page-onboarding :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.page-onboarding .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-onboarding .topnav{border-bottom:1px solid var(--border)}.page-onboarding .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.page-onboarding .logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.page-onboarding .logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}.page-onboarding .nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.page-onboarding .nav-return:hover{color:var(--fg)}
|
||||
.page-onboarding .head{padding-block:clamp(40px,6vw,64px) 34px;border-bottom:1px solid var(--border)}.page-onboarding .eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.page-onboarding .head h1{font-size:clamp(40px,5vw,58px);line-height:1.16;margin:0;max-width:15ch}.page-onboarding .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:58ch;margin:16px 0 0}.page-onboarding .progress{margin-top:26px;max-width:720px}.page-onboarding .progress-copy{display:flex;justify-content:space-between;color:var(--fg);font:12px/1.5 var(--font-mono);margin-bottom:10px}.page-onboarding .progress-track{height:6px;background:var(--border)}.page-onboarding .progress-bar{height:100%;width:33.333%;background:var(--accent);transition:width .2s ease}
|
||||
.page-onboarding .flow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(38px,7vw,84px);align-items:start;padding-block:46px 72px}.page-onboarding .step-nav{border-top:1px solid var(--fg)}.page-onboarding .step-nav div{min-height:58px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;border-bottom:1px solid var(--border);color:var(--muted)}.page-onboarding .step-nav div.active{color:var(--fg);font-weight:700;border-bottom-color:var(--fg)}.page-onboarding .step-nav div.done{color:var(--fg)}.page-onboarding .step-nav span:first-child{font:12px/1 var(--font-mono)}.page-onboarding .step-nav div.active span:first-child{color:var(--accent)}.page-onboarding .panel{display:none;max-width:760px}.page-onboarding .panel.active{display:block}.page-onboarding .panel h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:0 0 12px}.page-onboarding .intro{color:var(--muted);max-width:58ch;margin:0 0 30px}.page-onboarding .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.page-onboarding .choice{position:relative;display:block}.page-onboarding .choice input{position:absolute;opacity:0}.page-onboarding .choice-body{min-height:145px;display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 90%,transparent)}.page-onboarding .choice-body:hover{border-color:var(--fg)}.page-onboarding .choice input:checked+.choice-body{border-color:var(--fg);background:var(--fg-soft)}.page-onboarding .choice input:focus-visible+.choice-body{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.page-onboarding .choice strong{font-size:19px;padding-inline-end:34px}.page-onboarding .choice small{color:var(--muted);font-size:14px;margin-top:8px}.page-onboarding .choice-mark{position:absolute;inset-block-start:24px;inset-inline-end:22px;width:18px;height:18px;border:1px solid var(--fg)}.page-onboarding .choice input:checked+.choice-body .choice-mark{background:var(--fg);box-shadow:inset 0 0 0 4px var(--surface)}
|
||||
.page-onboarding .benefits{border-top:1px solid var(--fg)}.page-onboarding .benefit{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}.page-onboarding .benefit-num{font:12px/1.8 var(--font-mono);color:var(--muted)}.page-onboarding .benefit h3{font-size:22px;margin:0 0 5px}.page-onboarding .benefit p{color:var(--muted);margin:0}.page-onboarding .upgrade-note{margin-top:26px;padding:22px;border:1px solid var(--border);background:var(--surface)}.page-onboarding .upgrade-note strong{display:block;font-size:18px}.page-onboarding .upgrade-note p{color:var(--muted);margin:6px 0 0}.page-onboarding .actions{display:flex;gap:12px;align-items:center;margin-top:32px}.page-onboarding .btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}.page-onboarding .btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.page-onboarding .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--bg)}.page-onboarding .btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.page-onboarding .btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}.page-onboarding .status{min-height:26px;color:var(--muted);font-size:14px;margin:14px 0 0}.page-onboarding .pagefoot{padding-block:42px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}.page-onboarding .footer-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
|
||||
@media(max-width:920px){.page-onboarding .flow{grid-template-columns:1fr}.page-onboarding .step-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:0}.page-onboarding .step-nav div{padding-inline:12px;border:1px solid var(--border)}.page-onboarding .choices{grid-template-columns:1fr 1fr}}
|
||||
@media(max-width:620px){.page-onboarding .logo{font-size:20px}.page-onboarding .nav-return{font-size:13px}.page-onboarding .head{padding-block:40px 30px}.page-onboarding .flow{padding-block:30px 60px;gap:30px}.page-onboarding .step-nav{overflow-x:auto;grid-template-columns:repeat(3,minmax(140px,1fr))}.page-onboarding .choices{grid-template-columns:1fr}.page-onboarding .choice-body{min-height:130px}.page-onboarding .actions{align-items:stretch;flex-direction:column-reverse}.page-onboarding .actions .btn{width:100%}.page-onboarding .footer-row{flex-direction:column}}
|
||||
@media(prefers-reduced-motion:reduce){.page-onboarding *{transition-duration:.01ms!important}}
|
||||
:root{--font-display:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"SF Arabic","Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,monospace;--container:1180px;--gutter:32px}
|
||||
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}h1,h2,h3{font-family:var(--font-display);text-wrap:balance}p{text-wrap:pretty}:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border)}.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:700}.logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}.nav-return{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.nav-return:hover{color:var(--fg)}
|
||||
.head{padding-block:clamp(40px,6vw,64px) 34px;border-bottom:1px solid var(--border)}.eyebrow{font:11px/1.5 var(--font-mono);color:var(--accent);margin:0 0 18px}.head h1{font-size:clamp(40px,5vw,58px);line-height:1.16;margin:0;max-width:15ch}.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:58ch;margin:16px 0 0}.progress{margin-top:26px;max-width:720px}.progress-copy{display:flex;justify-content:space-between;color:var(--fg);font:12px/1.5 var(--font-mono);margin-bottom:10px}.progress-track{height:6px;background:var(--border)}.progress-bar{height:100%;width:33.333%;background:var(--accent);transition:width .2s ease}
|
||||
.flow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(38px,7vw,84px);align-items:start;padding-block:46px 72px}.step-nav{border-top:1px solid var(--fg)}.step-nav div{min-height:58px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;border-bottom:1px solid var(--border);color:var(--muted)}.step-nav div.active{color:var(--fg);font-weight:700;border-bottom-color:var(--fg)}.step-nav div.done{color:var(--fg)}.step-nav span:first-child{font:12px/1 var(--font-mono)}.step-nav div.active span:first-child{color:var(--accent)}.panel{display:none;max-width:760px}.panel.active{display:block}.panel h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:0 0 12px}.intro{color:var(--muted);max-width:58ch;margin:0 0 30px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.choice{position:relative;display:block}.choice input{position:absolute;opacity:0}.choice-body{min-height:145px;display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 90%,transparent)}.choice-body:hover{border-color:var(--fg)}.choice input:checked+.choice-body{border-color:var(--fg);background:var(--fg-soft)}.choice input:focus-visible+.choice-body{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}.choice strong{font-size:19px;padding-inline-end:34px}.choice small{color:var(--muted);font-size:14px;margin-top:8px}.choice-mark{position:absolute;inset-block-start:24px;inset-inline-end:22px;width:18px;height:18px;border:1px solid var(--fg)}.choice input:checked+.choice-body .choice-mark{background:var(--fg);box-shadow:inset 0 0 0 4px var(--surface)}
|
||||
.benefits{border-top:1px solid var(--fg)}.benefit{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}.benefit-num{font:12px/1.8 var(--font-mono);color:var(--muted)}.benefit h3{font-size:22px;margin:0 0 5px}.benefit p{color:var(--muted);margin:0}.upgrade-note{margin-top:26px;padding:22px;border:1px solid var(--border);background:var(--surface)}.upgrade-note strong{display:block;font-size:18px}.upgrade-note p{color:var(--muted);margin:6px 0 0}.actions{display:flex;gap:12px;align-items:center;margin-top:32px}.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--bg)}.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}.status{min-height:26px;color:var(--muted);font-size:14px;margin:14px 0 0}.pagefoot{padding-block:42px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}.footer-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
|
||||
@media(max-width:920px){:root{--gutter:22px}.flow{grid-template-columns:1fr}.step-nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:0}.step-nav div{padding-inline:12px;border:1px solid var(--border)}.choices{grid-template-columns:1fr 1fr}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.logo{font-size:20px}.nav-return{font-size:13px}.head{padding-block:40px 30px}.flow{padding-block:30px 60px;gap:30px}.step-nav{overflow-x:auto;grid-template-columns:repeat(3,minmax(140px,1fr))}.choices{grid-template-columns:1fr}.choice-body{min-height:130px}.actions{align-items:stretch;flex-direction:column-reverse}.actions .btn{width:100%}.footer-row{flex-direction:column}}
|
||||
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
|
||||
|
||||
@@ -1,39 +1,45 @@
|
||||
/* Page-scoped styles: .page-payment-cancelled. Shared tokens live in globals.css. */
|
||||
|
||||
.page-payment-cancelled *,.page-payment-cancelled *::before,.page-payment-cancelled *::after{box-sizing:border-box}
|
||||
.page-payment-cancelled{-webkit-text-size-adjust:100%}
|
||||
.page-payment-cancelled{min-height:100vh;margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
.page-payment-cancelled a{color:inherit;text-decoration:none}
|
||||
.page-payment-cancelled h1,.page-payment-cancelled h2{font-family:var(--font-display);text-wrap:balance}
|
||||
.page-payment-cancelled p{text-wrap:pretty}
|
||||
.page-payment-cancelled :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.page-payment-cancelled .container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-payment-cancelled .topnav{border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
|
||||
.page-payment-cancelled .topnav-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.page-payment-cancelled .logo{min-height:44px;display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700}
|
||||
.page-payment-cancelled .logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}
|
||||
.page-payment-cancelled .nav-link{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
|
||||
.page-payment-cancelled .nav-link:hover{color:var(--fg)}
|
||||
.page-payment-cancelled .section{padding-block:clamp(56px,9vw,104px)}
|
||||
.page-payment-cancelled .state-card{max-width:760px;margin-inline:auto;padding:clamp(28px,6vw,64px);border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 92%,transparent)}
|
||||
.page-payment-cancelled .status-mark{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--fg);margin-bottom:30px}
|
||||
.page-payment-cancelled .status-mark svg{width:28px;height:28px}
|
||||
.page-payment-cancelled .eyebrow{margin:0 0 18px;color:var(--muted);font:12px/1.5 var(--font-mono);}
|
||||
.page-payment-cancelled h1{max-width:12ch;margin:0;font-size:clamp(42px,7vw,72px);line-height:1.1;}
|
||||
.page-payment-cancelled .lead{max-width:54ch;margin:20px 0 0;color:var(--muted);font-size:clamp(18px,2.3vw,22px)}
|
||||
.page-payment-cancelled .notice{margin-top:34px;padding-block:22px;border-block:1px solid var(--border)}
|
||||
.page-payment-cancelled .notice h2{margin:0 0 8px;font-size:24px}
|
||||
.page-payment-cancelled .notice p{margin:0;color:var(--muted)}
|
||||
.page-payment-cancelled .actions{display:flex;align-items:center;gap:12px;margin-top:30px}
|
||||
.page-payment-cancelled .btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}
|
||||
.page-payment-cancelled .btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.page-payment-cancelled .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}
|
||||
.page-payment-cancelled .btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}
|
||||
.page-payment-cancelled .btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
.page-payment-cancelled .help{margin:24px 0 0;color:var(--muted);font-size:14px}
|
||||
.page-payment-cancelled .help a{text-decoration:underline;text-underline-offset:4px;color:var(--fg)}
|
||||
.page-payment-cancelled .help a:hover{color:var(--accent)}
|
||||
.page-payment-cancelled .pagefoot{padding-block:36px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
|
||||
.page-payment-cancelled .footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||||
@media(max-width:620px){.page-payment-cancelled .topnav-inner{min-height:64px}.page-payment-cancelled .state-card{padding:26px 20px}.page-payment-cancelled .actions{align-items:stretch;flex-direction:column}.page-payment-cancelled .actions .btn{width:100%}.page-payment-cancelled .footer-row{flex-direction:column;gap:8px}}
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--container: 920px;
|
||||
--gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html{-webkit-text-size-adjust:100%}
|
||||
body{min-height:100vh;margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
a{color:inherit;text-decoration:none}
|
||||
h1,h2{font-family:var(--font-display);text-wrap:balance}
|
||||
p{text-wrap:pretty}
|
||||
:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
|
||||
.topnav-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.logo{min-height:44px;display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700}
|
||||
.logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}
|
||||
.nav-link{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
|
||||
.nav-link:hover{color:var(--fg)}
|
||||
.section{padding-block:clamp(56px,9vw,104px)}
|
||||
.state-card{max-width:760px;margin-inline:auto;padding:clamp(28px,6vw,64px);border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 92%,transparent)}
|
||||
.status-mark{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--fg);margin-bottom:30px}
|
||||
.status-mark svg{width:28px;height:28px}
|
||||
.eyebrow{margin:0 0 18px;color:var(--muted);font:12px/1.5 var(--font-mono);}
|
||||
h1{max-width:12ch;margin:0;font-size:clamp(42px,7vw,72px);line-height:1.1;}
|
||||
.lead{max-width:54ch;margin:20px 0 0;color:var(--muted);font-size:clamp(18px,2.3vw,22px)}
|
||||
.notice{margin-top:34px;padding-block:22px;border-block:1px solid var(--border)}
|
||||
.notice h2{margin:0 0 8px;font-size:24px}
|
||||
.notice p{margin:0;color:var(--muted)}
|
||||
.actions{display:flex;align-items:center;gap:12px;margin-top:30px}
|
||||
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}
|
||||
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}
|
||||
.btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
.help{margin:24px 0 0;color:var(--muted);font-size:14px}
|
||||
.help a{text-decoration:underline;text-underline-offset:4px;color:var(--fg)}
|
||||
.help a:hover{color:var(--accent)}
|
||||
.pagefoot{padding-block:36px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
|
||||
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||||
@media(max-width:620px){:root{--gutter:18px}.topnav-inner{min-height:64px}.state-card{padding:26px 20px}.actions{align-items:stretch;flex-direction:column}.actions .btn{width:100%}.footer-row{flex-direction:column;gap:8px}}
|
||||
|
||||
@@ -1,40 +1,46 @@
|
||||
/* Page-scoped styles: .page-payment-success. Shared tokens live in globals.css. */
|
||||
|
||||
.page-payment-success *,.page-payment-success *::before,.page-payment-success *::after{box-sizing:border-box}
|
||||
.page-payment-success{-webkit-text-size-adjust:100%}
|
||||
.page-payment-success{min-height:100vh;margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
.page-payment-success a{color:inherit;text-decoration:none}
|
||||
.page-payment-success h1,.page-payment-success h2{font-family:var(--font-display);text-wrap:balance}
|
||||
.page-payment-success p{text-wrap:pretty}
|
||||
.page-payment-success :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.page-payment-success .container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.page-payment-success .topnav{border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
|
||||
.page-payment-success .topnav-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.page-payment-success .logo{min-height:44px;display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700}
|
||||
.page-payment-success .logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}
|
||||
.page-payment-success .nav-link{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
|
||||
.page-payment-success .nav-link:hover{color:var(--fg)}
|
||||
.page-payment-success .section{padding-block:clamp(56px,9vw,104px)}
|
||||
.page-payment-success .state-card{max-width:760px;margin-inline:auto;padding:clamp(28px,6vw,64px);border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 92%,transparent)}
|
||||
.page-payment-success .status-mark{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--fg);margin-bottom:30px}
|
||||
.page-payment-success .status-mark svg{width:30px;height:30px}
|
||||
.page-payment-success .eyebrow{margin:0 0 18px;color:var(--accent);font:12px/1.5 var(--font-mono);}
|
||||
.page-payment-success h1{max-width:12ch;margin:0;font-size:clamp(42px,7vw,72px);line-height:1.1;}
|
||||
.page-payment-success .lead{max-width:54ch;margin:20px 0 0;color:var(--muted);font-size:clamp(18px,2.3vw,22px)}
|
||||
.page-payment-success .summary{margin:34px 0 0;border-top:1px solid var(--fg)}
|
||||
.page-payment-success .summary-row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--border)}
|
||||
.page-payment-success .summary-row dt{color:var(--muted);font:12px/1.7 var(--font-mono)}
|
||||
.page-payment-success .summary-row dd{margin:0;font-weight:700}
|
||||
.page-payment-success .next-step{margin-top:34px;padding-top:30px;border-top:1px solid var(--border)}
|
||||
.page-payment-success .next-step h2{margin:0 0 8px;font-size:26px}
|
||||
.page-payment-success .next-step p{margin:0;color:var(--muted)}
|
||||
.page-payment-success .actions{display:flex;align-items:center;gap:12px;margin-top:26px}
|
||||
.page-payment-success .btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}
|
||||
.page-payment-success .btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.page-payment-success .btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}
|
||||
.page-payment-success .btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}
|
||||
.page-payment-success .btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
.page-payment-success .pagefoot{padding-block:36px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
|
||||
.page-payment-success .footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||||
@media(max-width:620px){.page-payment-success .topnav-inner{min-height:64px}.page-payment-success .state-card{padding:26px 20px}.page-payment-success .summary-row{grid-template-columns:1fr;gap:4px}.page-payment-success .actions{align-items:stretch;flex-direction:column}.page-payment-success .actions .btn{width:100%}.page-payment-success .footer-row{flex-direction:column;gap:8px}}
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--container: 920px;
|
||||
--gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html{-webkit-text-size-adjust:100%}
|
||||
body{min-height:100vh;margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility}
|
||||
a{color:inherit;text-decoration:none}
|
||||
h1,h2{font-family:var(--font-display);text-wrap:balance}
|
||||
p{text-wrap:pretty}
|
||||
:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px)}
|
||||
.topnav-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.logo{min-height:44px;display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700}
|
||||
.logo-mark{width:30px;height:34px;object-fit:contain;border-radius:4px}
|
||||
.nav-link{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}
|
||||
.nav-link:hover{color:var(--fg)}
|
||||
.section{padding-block:clamp(56px,9vw,104px)}
|
||||
.state-card{max-width:760px;margin-inline:auto;padding:clamp(28px,6vw,64px);border:1px solid var(--border);background:color-mix(in oklch,var(--surface) 92%,transparent)}
|
||||
.status-mark{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--fg);margin-bottom:30px}
|
||||
.status-mark svg{width:30px;height:30px}
|
||||
.eyebrow{margin:0 0 18px;color:var(--accent);font:12px/1.5 var(--font-mono);}
|
||||
h1{max-width:12ch;margin:0;font-size:clamp(42px,7vw,72px);line-height:1.1;}
|
||||
.lead{max-width:54ch;margin:20px 0 0;color:var(--muted);font-size:clamp(18px,2.3vw,22px)}
|
||||
.summary{margin:34px 0 0;border-top:1px solid var(--fg)}
|
||||
.summary-row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--border)}
|
||||
.summary-row dt{color:var(--muted);font:12px/1.7 var(--font-mono)}
|
||||
.summary-row dd{margin:0;font-weight:700}
|
||||
.next-step{margin-top:34px;padding-top:30px;border-top:1px solid var(--border)}
|
||||
.next-step h2{margin:0 0 8px;font-size:26px}
|
||||
.next-step p{margin:0;color:var(--muted)}
|
||||
.actions{display:flex;align-items:center;gap:12px;margin-top:26px}
|
||||
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid transparent;font-weight:700}
|
||||
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black);color:var(--surface)}
|
||||
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--border)}
|
||||
.btn-secondary:hover{background:var(--fg);color:var(--surface);border-color:var(--fg)}
|
||||
.pagefoot{padding-block:36px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
|
||||
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||||
@media(max-width:620px){:root{--gutter:18px}.topnav-inner{min-height:64px}.state-card{padding:26px 20px}.summary-row{grid-template-columns:1fr;gap:4px}.actions{align-items:stretch;flex-direction:column}.actions .btn{width:100%}.footer-row{flex-direction:column;gap:8px}}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--font-display: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-body: "SF Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; --container: 1180px; --gutter: 32px;
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.75 var(--font-body);text-rendering:optimizeLegibility} body.locked{overflow:hidden}
|
||||
a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button{cursor:pointer} h1,h2,h3{font-family:var(--font-display);text-wrap:balance} p{text-wrap:pretty} :focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 55%,transparent);outline-offset:3px}
|
||||
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
|
||||
.topnav{position:sticky;top:0;z-index:20;background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)} .nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
|
||||
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700}.logo-mark{width:12px;height:12px;background:var(--fg);transform:rotate(45deg)} .nav-links{display:flex;align-items:center;gap:28px}.nav-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.nav-links a:hover{color:var(--fg)}
|
||||
.nav-tools{display:flex;align-items:center;gap:8px}.nav-login,.icon-btn{min-height:44px;border:1px solid var(--border);background:transparent;color:var(--fg);display:inline-grid;place-items:center}.nav-login{padding-inline:16px}.nav-login:hover,.icon-btn:hover{border-color:var(--fg);background:var(--fg-soft)}.icon-btn{width:46px}
|
||||
.demo-strip{background:var(--fg);color:var(--surface);font:11px/1.6 var(--font-mono);padding:8px 0;text-align:center}
|
||||
.demo-strip b{color:var(--surface);font-weight:700}
|
||||
.article-head{padding-block:clamp(58px,9vw,100px);border-bottom:1px solid var(--border)}
|
||||
.crumb{font:12px/1.5 var(--font-mono);color:var(--accent);margin:0 0 20px}
|
||||
.lock-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg);padding:6px 14px;font:12px/1.5 var(--font-mono);color:var(--fg);margin-bottom:22px}
|
||||
.lock-chip svg{width:14px;height:14px}
|
||||
.article-head h1{font-size:clamp(46px,7vw,88px);line-height:1.06;max-width:12ch;margin:0}
|
||||
.dek{font-size:clamp(19px,2vw,24px);line-height:1.7;color:var(--muted);max-width:58ch;margin:28px 0 0}
|
||||
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:34px;padding-top:20px;border-top:1px solid var(--border);font:12px/1.5 var(--font-mono);color:var(--muted)}
|
||||
.article-layout{display:grid;grid-template-columns:minmax(0,740px) 240px;gap:clamp(48px,8vw,100px);align-items:start;padding-block:80px}
|
||||
.article-body{font-size:19px;line-height:2}
|
||||
.article-body h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:64px 0 20px}
|
||||
.article-body p{margin:0 0 26px}
|
||||
.lede{font-family:var(--font-display);font-size:28px;line-height:1.6}
|
||||
.note{border-block:1px solid var(--fg);padding:28px 0;margin:42px 0}
|
||||
.note strong{display:block;font-family:var(--font-display);font-size:22px;margin-bottom:8px}
|
||||
.free-tag{font:11px/1.5 var(--font-mono);color:var(--muted);margin-bottom:6px;display:block}
|
||||
.lock-cut{position:relative}
|
||||
.lock-cut::after{content:"";position:absolute;inset-inline:0;bottom:0;height:120px;background:linear-gradient(to bottom,transparent,var(--bg) 88%);pointer-events:none}
|
||||
.lock-cut .cut-p{margin-bottom:0}
|
||||
.paywall{margin-top:-30px;position:relative;border:1px solid var(--fg);background:var(--surface);padding:clamp(28px,4vw,44px);z-index:2}
|
||||
.paywall .crumb{margin-bottom:12px}
|
||||
.paywall h2{font-size:clamp(30px,3.6vw,44px);line-height:1.18;margin:0 0 14px;max-width:16ch}
|
||||
.paywall p{color:var(--muted);max-width:56ch;margin:0 0 24px}
|
||||
.locked-in{border-top:1px solid var(--fg);margin:0 0 26px}
|
||||
.locked-in li{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--border);color:var(--muted);font-size:16px}
|
||||
.locked-in svg{width:14px;height:14px;flex:none}
|
||||
.locked-in .num{margin-inline-start:auto;font:12px/1.5 var(--font-mono)}
|
||||
.paywall-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
|
||||
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;border:1px solid transparent;font-weight:700}
|
||||
.btn-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
|
||||
.btn-primary:hover{background:color-mix(in oklch,var(--accent) 86%,black)}
|
||||
.btn-secondary{border-color:var(--border);background:transparent;color:var(--fg)}
|
||||
.btn-secondary:hover{border-color:var(--fg);background:var(--fg-soft)}
|
||||
.text-link{font-weight:700;color:var(--fg);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
|
||||
.text-link:hover{color:var(--accent)}
|
||||
.price-line{font:12px/1.6 var(--font-mono);color:var(--muted);margin-top:18px}
|
||||
.toc{position:sticky;top:100px;border-top:1px solid var(--fg);padding-top:18px}
|
||||
.toc strong{font-family:var(--font-display);font-size:20px}
|
||||
.toc a,.toc .toc-locked{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);color:var(--muted)}
|
||||
.toc a:hover{color:var(--fg)}
|
||||
.toc .toc-locked{color:color-mix(in oklch,var(--muted) 60%,transparent)}
|
||||
.toc .toc-locked svg{width:12px;height:12px;flex:none}
|
||||
.member-note{margin-top:28px;border:1px solid var(--fg);padding:22px}
|
||||
.member-note strong{font-family:var(--font-display);font-size:20px;display:block;margin-bottom:8px}
|
||||
.member-note p{color:var(--muted);font-size:14px;margin:0 0 16px}
|
||||
.pagefoot{padding-block:54px;border-top:1px solid var(--border);color:var(--muted)}
|
||||
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:44px}
|
||||
.footer-col strong{display:block;color:var(--fg);margin-bottom:12px}
|
||||
.footer-col a{display:block;min-height:36px}
|
||||
.footer-col a:hover{color:var(--fg);text-decoration:underline}
|
||||
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;margin-top:38px;border-top:1px solid var(--border);font-size:13px}
|
||||
.menu-panel{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}.menu-panel.open{visibility:visible;pointer-events:auto}.menu-scrim{position:absolute;inset:0;border:0;background:color-mix(in oklch,var(--fg) 55%,transparent);opacity:0}.menu-panel.open .menu-scrim{opacity:1}.menu-drawer{position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,92vw);padding:28px clamp(24px,5vw,54px);background:var(--bg);border-inline-end:1px solid var(--fg);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column}.menu-panel.open .menu-drawer{transform:translateX(0)}.menu-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--border)}.menu-links{display:flex;flex-direction:column}.menu-links a{display:flex;justify-content:space-between;align-items:center;min-height:58px;border-bottom:1px solid var(--border);font-size:18px}
|
||||
@media(max-width:920px){:root{--gutter:22px}.nav-links{display:none}.article-layout{grid-template-columns:1fr}.toc{position:static;order:0;margin-top:24px}.footer-grid{grid-template-columns:1fr 1fr}.article-body{font-size:18px}}
|
||||
@media(max-width:620px){:root{--gutter:18px}.nav-login{display:none}.article-head h1{font-size:46px}.article-layout{padding-block:56px}.footer-grid{grid-template-columns:1fr;gap:28px}.paywall-actions{flex-direction:column;align-items:stretch}.paywall-actions .btn{width:100%}}
|
||||
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user