Add opengraph

Fix #151
ReflectsLight · Oct 5, 2023 · fab1055 · fab1055
1 parent 376bcbe
commit fab1055
Show file tree

Hide file tree

Showing 123 changed files with 46 additions and 7 deletions.
diff --git a/.bundle/config b/.bundle/config
@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: ".localgems"
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 build/
 tmp/
 node_modules/
-.bundle/
+.localgems/
 *.log
 .env
 .idea

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -177,4 +177,4 @@ DEPENDENCIES
   test-cmd.rb (~> 0.3)!
 
 BUNDLED WITH
-   2.3.26
+   2.4.10
diff --git a/nanoc/lib/helper.rb b/nanoc/lib/helper.rb
@@ -32,5 +32,12 @@ def i18n
       )
     )
   end
+
+  def erb(partial, local_assigns = {})
+    erb = File.binread File.join(Dir.getwd, "src", "html", "partials", partial)
+    scope = binding
+    local_assigns.each { scope.local_variable_set(_1, _2) }
+    ERB.new(erb).result(scope)
+  end
 end
 use_helper Helper
diff --git a/nanoc/lib/mixins/opengraph.rb b/nanoc/lib/mixins/opengraph.rb
@@ -0,0 +1,19 @@
+use_helper Module.new {
+  require_relative "helper"
+  include Helper
+
+  def opengraph(locale, basename, options = {})
+    erb "opengraph.html.erb", local_assigns(locale, basename, options)
+  end
+
+  def local_assigns(locale, basename, options)
+    case basename
+    when "stream.html.erb"
+      surah_id = options[:surah_id]
+      { title: t(locale, "TheNobleQuran"),
+        description: t(locale, "meta.stream.description"),
+        url: "https://al-quran.reflectslight.io/#{locale}/#{surah_id}/",
+        image: "https://al-quran.reflectslight.io/images/opengraph/#{surah_id}.png" }
+    end
+  end
+}
diff --git a/nanoc/rules/assets.rules b/nanoc/rules/assets.rules
@@ -23,3 +23,7 @@ end
 compile "/favicon.png" do
   write(item.identifier.to_s)
 end
+
+compile "/images/opengraph/*.png" do
+  write(item.identifier.to_s)
+end
diff --git a/src/html/pages/surah/stream.html.erb b/src/html/pages/surah/stream.html.erb
@@ -2,11 +2,12 @@
 <html lang="<%= locale %>">
   <head>
     <title> <%= t(locale, "TheNobleQuran") %>: <%= surah_name %> </title>
+    <%= inline_css('/css/postman.css') %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
-    <meta name="description" content="<%= t(locale, 'meta.stream.description', {surah_name:}) %>">
+    <meta name="description" content="<%= t(locale, 'meta.stream.description') %>">
+    <%= opengraph(locale, "stream.html.erb", {surah_id:}) %>
     <link rel="icon" href="/favicon.png">
-    <%= inline_css('/css/postman.css') %>
   </head>
   <body>
     <div class="postman loader">

diff --git a/src/html/partials/opengraph.html.erb b/src/html/partials/opengraph.html.erb
@@ -0,0 +1,6 @@
+<meta property="og:type" content="website"/>
+<meta property="og:title" content="<%= title %>"/>
+<meta property="og:description" content="<%= description %>"/>
+<meta property="og:url" content="<%= url %>"/>
+<meta property="og:image" content="<%= image %>"
+<meta property="og:image:type" content="image/png"/>
diff --git a/src/i18n.json b/src/i18n.json
@@ -7,7 +7,7 @@
     "comma": ",",
     "meta": {
       "index": {"description": "Read and listen to The Noble Quran."},
-      "stream": {"description": "Read and listen to '%{surah_name}' from The Noble Quran."}
+      "stream": {"description": "Read and listen to The Noble Quran."}
     },
     "surahs": {
       "names": [
@@ -135,8 +135,8 @@
     "ayah": "آية",
     "comma": "،",
     "meta": {
-      "index": {"description": "اقرأ واستمع إلى القرآن الكريم."},
-      "stream": {"description": "اقرأ واستمع إلى القرآن الكريم - '%{surah_name}'."}
+      "index": {"description": "اقرأ واستمع إلى القرآن الكريم"},
+      "stream": {"description": "اقرأ واستمع إلى القرآن الكريم"}
     },
     "surahs": {
       "names": [

diff --git a/src/images/opengraph/1.png b/src/images/opengraph/1.png
diff --git a/src/images/opengraph/10.png b/src/images/opengraph/10.png
diff --git a/src/images/opengraph/100.png b/src/images/opengraph/100.png
diff --git a/src/images/opengraph/101.png b/src/images/opengraph/101.png
diff --git a/src/images/opengraph/102.png b/src/images/opengraph/102.png
diff --git a/src/images/opengraph/103.png b/src/images/opengraph/103.png
diff --git a/src/images/opengraph/104.png b/src/images/opengraph/104.png
diff --git a/src/images/opengraph/105.png b/src/images/opengraph/105.png
diff --git a/src/images/opengraph/106.png b/src/images/opengraph/106.png
diff --git a/src/images/opengraph/107.png b/src/images/opengraph/107.png
diff --git a/src/images/opengraph/108.png b/src/images/opengraph/108.png
diff --git a/src/images/opengraph/109.png b/src/images/opengraph/109.png
diff --git a/src/images/opengraph/11.png b/src/images/opengraph/11.png
diff --git a/src/images/opengraph/110.png b/src/images/opengraph/110.png
diff --git a/src/images/opengraph/111.png b/src/images/opengraph/111.png
diff --git a/src/images/opengraph/112.png b/src/images/opengraph/112.png
diff --git a/src/images/opengraph/113.png b/src/images/opengraph/113.png
diff --git a/src/images/opengraph/114.png b/src/images/opengraph/114.png
diff --git a/src/images/opengraph/12.png b/src/images/opengraph/12.png
diff --git a/src/images/opengraph/13.png b/src/images/opengraph/13.png
diff --git a/src/images/opengraph/14.png b/src/images/opengraph/14.png
diff --git a/src/images/opengraph/15.png b/src/images/opengraph/15.png
diff --git a/src/images/opengraph/16.png b/src/images/opengraph/16.png
diff --git a/src/images/opengraph/17.png b/src/images/opengraph/17.png
diff --git a/src/images/opengraph/18.png b/src/images/opengraph/18.png
diff --git a/src/images/opengraph/19.png b/src/images/opengraph/19.png
diff --git a/src/images/opengraph/2.png b/src/images/opengraph/2.png
diff --git a/src/images/opengraph/20.png b/src/images/opengraph/20.png
diff --git a/src/images/opengraph/21.png b/src/images/opengraph/21.png
diff --git a/src/images/opengraph/22.png b/src/images/opengraph/22.png
diff --git a/src/images/opengraph/23.png b/src/images/opengraph/23.png
diff --git a/src/images/opengraph/24.png b/src/images/opengraph/24.png
diff --git a/src/images/opengraph/25.png b/src/images/opengraph/25.png
diff --git a/src/images/opengraph/26.png b/src/images/opengraph/26.png
diff --git a/src/images/opengraph/27.png b/src/images/opengraph/27.png
diff --git a/src/images/opengraph/28.png b/src/images/opengraph/28.png
diff --git a/src/images/opengraph/29.png b/src/images/opengraph/29.png
diff --git a/src/images/opengraph/3.png b/src/images/opengraph/3.png
diff --git a/src/images/opengraph/30.png b/src/images/opengraph/30.png
diff --git a/src/images/opengraph/31.png b/src/images/opengraph/31.png
diff --git a/src/images/opengraph/32.png b/src/images/opengraph/32.png
diff --git a/src/images/opengraph/33.png b/src/images/opengraph/33.png
diff --git a/src/images/opengraph/34.png b/src/images/opengraph/34.png
diff --git a/src/images/opengraph/35.png b/src/images/opengraph/35.png
diff --git a/src/images/opengraph/36.png b/src/images/opengraph/36.png
diff --git a/src/images/opengraph/37.png b/src/images/opengraph/37.png
diff --git a/src/images/opengraph/38.png b/src/images/opengraph/38.png
diff --git a/src/images/opengraph/39.png b/src/images/opengraph/39.png
diff --git a/src/images/opengraph/4.png b/src/images/opengraph/4.png
diff --git a/src/images/opengraph/40.png b/src/images/opengraph/40.png
diff --git a/src/images/opengraph/41.png b/src/images/opengraph/41.png
diff --git a/src/images/opengraph/42.png b/src/images/opengraph/42.png
diff --git a/src/images/opengraph/43.png b/src/images/opengraph/43.png
diff --git a/src/images/opengraph/44.png b/src/images/opengraph/44.png
diff --git a/src/images/opengraph/45.png b/src/images/opengraph/45.png
diff --git a/src/images/opengraph/46.png b/src/images/opengraph/46.png
diff --git a/src/images/opengraph/47.png b/src/images/opengraph/47.png
diff --git a/src/images/opengraph/48.png b/src/images/opengraph/48.png
diff --git a/src/images/opengraph/49.png b/src/images/opengraph/49.png
diff --git a/src/images/opengraph/5.png b/src/images/opengraph/5.png
diff --git a/src/images/opengraph/50.png b/src/images/opengraph/50.png
diff --git a/src/images/opengraph/51.png b/src/images/opengraph/51.png
diff --git a/src/images/opengraph/52.png b/src/images/opengraph/52.png
diff --git a/src/images/opengraph/53.png b/src/images/opengraph/53.png
diff --git a/src/images/opengraph/54.png b/src/images/opengraph/54.png
diff --git a/src/images/opengraph/55.png b/src/images/opengraph/55.png
diff --git a/src/images/opengraph/56.png b/src/images/opengraph/56.png
diff --git a/src/images/opengraph/57.png b/src/images/opengraph/57.png
diff --git a/src/images/opengraph/58.png b/src/images/opengraph/58.png
diff --git a/src/images/opengraph/59.png b/src/images/opengraph/59.png
diff --git a/src/images/opengraph/6.png b/src/images/opengraph/6.png
diff --git a/src/images/opengraph/60.png b/src/images/opengraph/60.png
diff --git a/src/images/opengraph/61.png b/src/images/opengraph/61.png
diff --git a/src/images/opengraph/62.png b/src/images/opengraph/62.png
diff --git a/src/images/opengraph/63.png b/src/images/opengraph/63.png
diff --git a/src/images/opengraph/64.png b/src/images/opengraph/64.png
diff --git a/src/images/opengraph/65.png b/src/images/opengraph/65.png
diff --git a/src/images/opengraph/66.png b/src/images/opengraph/66.png
diff --git a/src/images/opengraph/67.png b/src/images/opengraph/67.png
diff --git a/src/images/opengraph/68.png b/src/images/opengraph/68.png
diff --git a/src/images/opengraph/69.png b/src/images/opengraph/69.png
diff --git a/src/images/opengraph/7.png b/src/images/opengraph/7.png
diff --git a/src/images/opengraph/70.png b/src/images/opengraph/70.png
diff --git a/src/images/opengraph/71.png b/src/images/opengraph/71.png
diff --git a/src/images/opengraph/72.png b/src/images/opengraph/72.png
diff --git a/src/images/opengraph/73.png b/src/images/opengraph/73.png
diff --git a/src/images/opengraph/74.png b/src/images/opengraph/74.png
diff --git a/src/images/opengraph/75.png b/src/images/opengraph/75.png
diff --git a/src/images/opengraph/76.png b/src/images/opengraph/76.png
diff --git a/src/images/opengraph/77.png b/src/images/opengraph/77.png
diff --git a/src/images/opengraph/78.png b/src/images/opengraph/78.png
diff --git a/src/images/opengraph/79.png b/src/images/opengraph/79.png
diff --git a/src/images/opengraph/8.png b/src/images/opengraph/8.png
diff --git a/src/images/opengraph/80.png b/src/images/opengraph/80.png
diff --git a/src/images/opengraph/81.png b/src/images/opengraph/81.png
diff --git a/src/images/opengraph/82.png b/src/images/opengraph/82.png
diff --git a/src/images/opengraph/83.png b/src/images/opengraph/83.png
diff --git a/src/images/opengraph/84.png b/src/images/opengraph/84.png
diff --git a/src/images/opengraph/85.png b/src/images/opengraph/85.png
diff --git a/src/images/opengraph/86.png b/src/images/opengraph/86.png
diff --git a/src/images/opengraph/87.png b/src/images/opengraph/87.png
diff --git a/src/images/opengraph/88.png b/src/images/opengraph/88.png
diff --git a/src/images/opengraph/89.png b/src/images/opengraph/89.png
diff --git a/src/images/opengraph/9.png b/src/images/opengraph/9.png
diff --git a/src/images/opengraph/90.png b/src/images/opengraph/90.png
diff --git a/src/images/opengraph/91.png b/src/images/opengraph/91.png
diff --git a/src/images/opengraph/92.png b/src/images/opengraph/92.png
diff --git a/src/images/opengraph/93.png b/src/images/opengraph/93.png
diff --git a/src/images/opengraph/94.png b/src/images/opengraph/94.png
diff --git a/src/images/opengraph/95.png b/src/images/opengraph/95.png
diff --git a/src/images/opengraph/96.png b/src/images/opengraph/96.png
diff --git a/src/images/opengraph/97.png b/src/images/opengraph/97.png
diff --git a/src/images/opengraph/98.png b/src/images/opengraph/98.png
diff --git a/src/images/opengraph/99.png b/src/images/opengraph/99.png