Lengkapi identitas social preview Ramu

CHANGELOG.md

@@ -8,6 +8,7 @@ Formatnya mengikuti prinsip [Keep a Changelog](https://keepachangelog.com/) dan
 
 ### Added
 
+- Social preview 1280×640 dengan identitas quiet editorial Ramu, dipakai ulang oleh Open Graph/Twitter metadata website.
 - English entry surfaces through `README.en.md` and `CONTRIBUTING.en.md`, while Bahasa Indonesia remains the canonical project documentation.
 - **UT S1 Akuntansi Semester 1 2026/2027** sebagai maintained pack 18 SKS, termasuk slot Pendidikan Agama yang mengikuti pilihan resmi sesuai data pribadi/registrasi UT.
 - Dukungan manifest untuk `selection.mode: choose-one` agar satu slot kurikulum dapat memiliki beberapa kode mata kuliah resmi tanpa membuat kode akademik palsu atau menggandakan seluruh pack.

docs/UX-DIRECTION.md

@@ -390,6 +390,12 @@ Remove from the redesign:
 
 `prefers-reduced-motion: reduce` remains mandatory, but the normal experience should already be calm enough that accessibility is not achieved merely by disabling an otherwise over-animated interface.
 
+## Appearance decision
+
+Ramu intentionally ships one polished light appearance for this redesign. Dark mode is not added in Phase 6 because there is no product requirement yet that justifies maintaining a second complete token/state surface. Revisit it only when usage evidence or accessibility needs make the extra maintenance worthwhile.
+
+The social preview follows the same quiet editorial identity: warm ivory canvas, graphite type, muted sage accent, real product information, no gradients/glow/fake metrics.
+
 ## Accessibility contract
 
 Implementation must preserve or improve:

scripts/validate_site.py

@@ -4,6 +4,7 @@
 from __future__ import annotations
 
 import re
+import struct
 import sys
 from pathlib import Path
 
@@ -62,7 +63,11 @@ def main() -> int:
         'property="og:url" content="https://man612.github.io/ramu/"',
         'property="og:site_name" content="Ramu"',
         'property="og:locale" content="id_ID"',
-        'name="twitter:card" content="summary"',
+        'property="og:image" content="https://man612.github.io/ramu/social-preview.png"',
+        'property="og:image:width" content="1280"',
+        'property="og:image:height" content="640"',
+        'name="twitter:card" content="summary_large_image"',
+        'name="twitter:image" content="https://man612.github.io/ramu/social-preview.png"',
         'href="https://github.com/man612/ramu/blob/main/README.en.md"',
         'href="https://github.com/man612/ramu/blob/main/SUPPORT.md"',
     ])
@@ -88,7 +93,11 @@ def main() -> int:
         'href="https://github.com/man612/ramu/blob/main/README.en.md"',
         'property="og:site_name" content="Ramu"',
         'property="og:locale" content="id_ID"',
-        'name="twitter:card" content="summary"',
+        'property="og:image" content="https://man612.github.io/ramu/social-preview.png"',
+        'property="og:image:width" content="1280"',
+        'property="og:image:height" content="640"',
+        'name="twitter:card" content="summary_large_image"',
+        'name="twitter:image" content="https://man612.github.io/ramu/social-preview.png"',
         '<title>Setup Ramu | siapkan ChatGPT Project untuk mata kuliah</title>',
     ])
     require_text(SITE / "app.js", [
@@ -125,6 +134,20 @@ def main() -> int:
         "@media (max-width: 430px)",
     ])
 
+    preview = SITE / "social-preview.png"
+    if not preview.is_file():
+        fail("Social preview asset tidak ditemukan.")
+    else:
+        data = preview.read_bytes()
+        if len(data) >= 24 and data[:8] == b"\x89PNG\r\n\x1a\n":
+            width, height = struct.unpack(">II", data[16:24])
+            if (width, height) != (1280, 640):
+                fail(f"Social preview harus 1280x640, sekarang {width}x{height}.")
+        else:
+            fail("Social preview harus PNG valid.")
+        if len(data) >= 1_000_000:
+            fail(f"Social preview harus <1 MB, sekarang {len(data)} byte.")
+
     foundations_text = (SITE / "foundations.css").read_text(encoding="utf-8") if (SITE / "foundations.css").is_file() else ""
     motion_text = (SITE / "motion.css").read_text(encoding="utf-8") if (SITE / "motion.css").is_file() else ""
     tokens = dict(re.findall(r"--([a-z0-9-]+):\s*(#[0-9a-fA-F]{6})\s*;", foundations_text))

site/index.html

@@ -11,7 +11,12 @@
   <meta property="og:site_name" content="Ramu">
   <meta property="og:locale" content="id_ID">
   <meta property="og:url" content="https://man612.github.io/ramu/">
-  <meta name="twitter:card" content="summary">
+  <meta property="og:image" content="https://man612.github.io/ramu/social-preview.png">
+  <meta property="og:image:width" content="1280">
+  <meta property="og:image:height" content="640">
+  <meta property="og:image:alt" content="Ramu — structured learning workspace for ChatGPT Projects">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="https://man612.github.io/ramu/social-preview.png">
   <link rel="canonical" href="https://man612.github.io/ramu/">
   <title>Ramu — workspace belajar terstruktur untuk ChatGPT Projects</title>
   <link rel="stylesheet" href="styles.css">

site/setup.html

@@ -11,7 +11,12 @@
   <meta property="og:site_name" content="Ramu">
   <meta property="og:locale" content="id_ID">
   <meta property="og:url" content="https://man612.github.io/ramu/setup.html">
-  <meta name="twitter:card" content="summary">
+  <meta property="og:image" content="https://man612.github.io/ramu/social-preview.png">
+  <meta property="og:image:width" content="1280">
+  <meta property="og:image:height" content="640">
+  <meta property="og:image:alt" content="Ramu — structured learning workspace for ChatGPT Projects">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="https://man612.github.io/ramu/social-preview.png">
   <link rel="canonical" href="https://man612.github.io/ramu/setup.html">
   <title>Setup Ramu | siapkan ChatGPT Project untuk mata kuliah</title>
   <link rel="stylesheet" href="styles.css">