README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src="web/public/logo/turanj.svg" width="140" alt="دیوان"></p>
+
 # دیوان · Divan
 
 An open-source site for reading and searching **classical Urdu poetry and prose**, in Urdu script (`ur-PK`). Content comes from [divan-data](https://github.com/anas-rashid/divan-data): public-domain texts from Urdu Wikisource, with short poet introductions from Urdu Wikipedia.

reader/index.html

@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>دیوان · قاری</title>
+<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSLYr9uM2YjYp9mGIj48dGl0bGU+2K/bjNmI2KfZhjwvdGl0bGU+PGcgY2xhc3M9InJheXMtbG9uZyI+PHBvbHlnb24gZmlsbD0iI2I4ODgyOCIgb3BhY2l0eT0iLjYiIHBvaW50cz0iNDAuMDIsMi4wNiA0NC4wOSwxMS4wNiA1My45MiwxMC4wOCA1Mi45NCwxOS45MSA2MS45NCwyMy45OCA1Ni4xOCwzMi4wMCA2MS45NCw0MC4wMiA1Mi45NCw0NC4wOSA1My45Miw1My45MiA0NC4wOSw1Mi45NCA0MC4wMiw2MS45NCAzMi4wMCw1Ni4xOCAyMy45OCw2MS45NCAxOS45MSw1Mi45NCAxMC4wOCw1My45MiAxMS4wNiw0NC4wOSAyLjA2LDQwLjAyIDcuODIsMzIuMDAgMi4wNiwyMy45OCAxMS4wNiwxOS45MSAxMC4wOCwxMC4wOCAxOS45MSwxMS4wNiAyMy45OCwyLjA2IDMyLjAwLDcuODIiLz48L2c+PGcgY2xhc3M9InJheXMtc2hvcnQiPjxjaXJjbGUgY3g9IjMyLjAwIiBjeT0iMTEuNTQiIHI9IjYuMjAiIGZpbGw9IiNiODg4MjgiLz48Y2lyY2xlIGN4PSI0Mi4yMyIgY3k9IjE0LjI4IiByPSI2LjIwIiBmaWxsPSIjYjg4ODI4Ii8+PGNpcmNsZSBjeD0iNDkuNzIiIGN5PSIyMS43NyIgcj0iNi4yMCIgZmlsbD0iI2I4ODgyOCIvPjxjaXJjbGUgY3g9IjUyLjQ2IiBjeT0iMzIuMDAiIHI9IjYuMjAiIGZpbGw9IiNiODg4MjgiLz48Y2lyY2xlIGN4PSI0OS43MiIgY3k9IjQyLjIzIiByPSI2LjIwIiBmaWxsPSIjYjg4ODI4Ii8+PGNpcmNsZSBjeD0iNDIuMjMiIGN5PSI0OS43MiIgcj0iNi4yMCIgZmlsbD0iI2I4ODgyOCIvPjxjaXJjbGUgY3g9IjMyLjAwIiBjeT0iNTIuNDYiIHI9IjYuMjAiIGZpbGw9IiNiODg4MjgiLz48Y2lyY2xlIGN4PSIyMS43NyIgY3k9IjQ5LjcyIiByPSI2LjIwIiBmaWxsPSIjYjg4ODI4Ii8+PGNpcmNsZSBjeD0iMTQuMjgiIGN5PSI0Mi4yMyIgcj0iNi4yMCIgZmlsbD0iI2I4ODgyOCIvPjxjaXJjbGUgY3g9IjExLjU0IiBjeT0iMzIuMDAiIHI9IjYuMjAiIGZpbGw9IiNiODg4MjgiLz48Y2lyY2xlIGN4PSIxNC4yOCIgY3k9IjIxLjc3IiByPSI2LjIwIiBmaWxsPSIjYjg4ODI4Ii8+PGNpcmNsZSBjeD0iMjEuNzciIGN5PSIxNC4yOCIgcj0iNi4yMCIgZmlsbD0iI2I4ODgyOCIvPjxwYXRoIGZpbGw9IiMxZDNiOGIiIGQ9Ik0zNy42LDEwLjMgTDM4LjQsMTEuMCBMMzcuNiwxMS44IEwzNi44LDExLjBaIi8+PHBhdGggZmlsbD0iIzFkM2I4YiIgZD0iTTQ3LjMsMTUuOSBMNDguMiwxNi43IEw0Ny4zLDE3LjQgTDQ2LjUsMTYuN1oiLz48cGF0aCBmaWxsPSIjMWQzYjhiIiBkPSJNNTMuMCwyNS42IEw1My44LDI2LjQgTDUzLjAsMjcuMiBMNTIuMSwyNi40WiIvPjxwYXRoIGZpbGw9IiMxZDNiOGIiIGQ9Ik01My4wLDM2LjggTDUzLjgsMzcuNiBMNTMuMCwzOC40IEw1Mi4xLDM3LjZaIi8+PHBhdGggZmlsbD0iIzFkM2I4YiIgZD0iTTQ3LjMsNDYuNiBMNDguMiw0Ny4zIEw0Ny4zLDQ4LjEgTDQ2LjUsNDcuM1oiLz48cGF0aCBmaWxsPSIjMWQzYjhiIiBkPSJNMzcuNiw1Mi4yIEwzOC40LDUzLjAgTDM3LjYsNTMuNyBMMzYuOCw1My4wWiIvPjxwYXRoIGZpbGw9IiMxZDNiOGIiIGQ9Ik0yNi40LDUyLjIgTDI3LjIsNTMuMCBMMjYuNCw1My43IEwyNS42LDUzLjBaIi8+PHBhdGggZmlsbD0iIzFkM2I4YiIgZD0iTTE2LjcsNDYuNiBMMTcuNSw0Ny4zIEwxNi43LDQ4LjEgTDE1LjgsNDcuM1oiLz48cGF0aCBmaWxsPSIjMWQzYjhiIiBkPSJNMTEuMCwzNi44IEwxMS45LDM3LjYgTDExLjAsMzguNCBMMTAuMiwzNy42WiIvPjxwYXRoIGZpbGw9IiMxZDNiOGIiIGQ9Ik0xMS4wLDI1LjYgTDExLjksMjYuNCBMMTEuMCwyNy4yIEwxMC4yLDI2LjRaIi8+PHBhdGggZmlsbD0iIzFkM2I4YiIgZD0iTTE2LjcsMTUuOSBMMTcuNSwxNi43IEwxNi43LDE3LjQgTDE1LjgsMTYuN1oiLz48cGF0aCBmaWxsPSIjMWQzYjhiIiBkPSJNMjYuNCwxMC4zIEwyNy4yLDExLjAgTDI2LjQsMTEuOCBMMjUuNiwxMS4wWiIvPjwvZz48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIyMS4wOCIgZmlsbD0iI2I4ODgyOCIvPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjE5LjIyIiBmaWxsPSIjMWQzYjhiIi8+PHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUuNiA0MS42KSIgZmlsbD0iI2ZiZjZlYSIgZD0iTS0yLjA2IDQuMzUgLTIuNDIgMy4yNVEwLjMwIDEuODQgMi41MyAwLjU3UTQuNzUgLTAuNzAgNi40NiAtMS44N1E4LjE4IC0zLjAzIDkuMzcgLTQuMDRRMTAuNTYgLTUuMDYgMTEuMTUgLTUuOTFRMTEuNzQgLTYuNzcgMTEuNzQgLTcuNDNRMTEuNzQgLTcuOTYgMTEuMDAgLTguODhRMTAuMjUgLTkuODEgOC40NCAtMTAuOTdRNi42NCAtMTIuMTQgMy41MiAtMTMuNDJRMy44MiAtMTQuNTIgNC4zNyAtMTUuOTlRNC45MiAtMTcuNDYgNS41OCAtMTguOThRNi4yNCAtMjAuNTAgNi44NiAtMjEuNzNRNy40OCAtMjIuOTcgNy45MiAtMjMuNTRIOC41M1ExMC41MSAtMjIuNTMgMTIuMDUgLTIwLjk2UTEzLjU5IC0xOS40MCAxNC40NSAtMTcuMzVRMTUuMzEgLTE1LjMxIDE1LjMxIC0xMi43MVExNS4zMSAtMTAuMjUgMTQuNjMgLTcuOThRMTMuOTQgLTUuNzIgMTIuOTEgLTMuODdRMTEuODggLTIuMDIgMTAuODAgLTAuNzlROS43MiAwLjQ0IDguODggMC44M1E3Ljc4IDEuMzYgNC44MSAyLjM3UTEuODQgMy4zOCAtMi4wNiA0LjM1WiIvPjwvc3ZnPg==">
 <meta name="description" content="دیوان کا سادہ قاری: اردو کا کلاسیکی ادب، براہِ راست divan-data سے۔">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

web/public/site.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "دیوان · اردو کا کلاسیکی ادب",
+  "short_name": "دیوان",
+  "lang": "ur-PK",
+  "dir": "rtl",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#fbf6ea",
+  "theme_color": "#fbf6ea",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
+    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
+    { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml" }
+  ]
+}

web/src/layouts/Base.astro

@@ -19,7 +19,23 @@ import logo from '../../public/logo/turanj.svg?raw'; // inline, so the page can
     <title>{fullTitle}</title>
     <meta name="description" content={description} />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="theme-color" content="#fbf6ea" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#14120f" media="(prefers-color-scheme: dark)" />
+    <!-- link previews (WhatsApp, Facebook, X, Slack): the logo and headline -->
+    <meta property="og:site_name" content="دیوان" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="ur_PK" />
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:url" content={new URL(Astro.url.pathname, Astro.url.origin).href} />
+    <meta property="og:image" content={new URL('/og-image.png', Astro.url.origin).href} />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="دیوان: اردو کا کلاسیکی ادب" />
+    <meta name="twitter:card" content="summary_large_image" />
     <script is:inline>
       // font, palette and light/dark applied before paint (Naskh, sepia and the system's light/dark by default)
       try {
@@ -105,6 +121,7 @@ import logo from '../../public/logo/turanj.svg?raw'; // inline, so the page can
     </aside>
     <footer class="site-footer">
       <div class="wrap">
+        <a class="footer-logo" href="/" title="سرورق"><img src="/logo/turanj.svg" width="56" height="56" alt="دیوان" /></a>
         <nav class="footer-links" aria-label="سائٹ کے بارے میں">
           <div><h2>دیوان</h2><ul>
             <li><a href="/about"><Icon name="info" size={18} /><span>دیوان کے بارے میں<small>مقصد اور طریقۂ کار</small></span></a></li>

web/src/pages/signin.astro

@@ -19,6 +19,7 @@ if (Astro.request.method === 'POST') {
 }
 ---
 <Base title="لاگ ان">
+  <img class="hero-logo" src="/logo/turanj.svg" width="96" height="96" alt="" />
   <h1>لاگ ان</h1>
   <form method="post" class="account-form">
     {error && <p class="form-error" role="alert">{error}</p>}

web/src/pages/signup.astro

@@ -20,6 +20,7 @@ if (Astro.request.method === 'POST') {
 }
 ---
 <Base title="نیا اکاؤنٹ">
+  <img class="hero-logo" src="/logo/turanj.svg" width="96" height="96" alt="" />
   <h1>نیا اکاؤنٹ</h1>
   <form method="post" class="account-form">
     {error && <p class="form-error" role="alert">{error}</p>}

web/src/styles/global.css

@@ -195,6 +195,8 @@ mark { background: var(--accent-soft); color: inherit; border-radius: 3px; paddi
 .made-in .flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }
 .site-footer { border-top: 1.5px solid var(--border); padding: 20px 0 16px; margin-top: 16px; font-size: var(--fs-sm); color: var(--text-muted); background: var(--surface-raised); }
 /* footer: three labelled groups of links, each with an icon and a one-line note; external links marked */
+.footer-logo { display: block; width: fit-content; margin: 0 auto 14px; }
+.footer-logo img { display: block; width: 56px; height: 56px; }
 .footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 24px; max-width: 760px; margin: 0 auto; }
 .footer-links h2 { text-align: start; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); letter-spacing: .02em; margin: 0 0 4px; }
 .footer-links h2::after { display: none; }