Fix / improve render of meta tags (stream.html.erb)

This commit is contained in:
0x1eef 2024-05-01 00:00:45 -03:00
parent 6bec11a547
commit f544be4144
4 changed files with 30 additions and 25 deletions

View file

@ -8,10 +8,11 @@ module Mixin::OpenGraph
def local_assigns(context) def local_assigns(context)
case context.filename case context.filename
when "stream.html.erb" when "stream.html.erb"
surah = context.surah
{title: t(context.locale, "TheNobleQuran"), {title: t(context.locale, "TheNobleQuran"),
description: t(context.locale, "meta.stream.description", surah_name: context.surah.name), description: t(context.locale, "meta.stream.description", surah_name: surah.name),
url: "https://al-quran.reflectslight.io/#{context.locale}/#{context.surah.slug}/", url: "https://al-quran.reflectslight.io/#{context.locale}/#{surah.slug}/",
image: "https://al-quran.reflectslight.io/images/opengraph/#{context.surah.id}.png"} image: "https://al-quran.reflectslight.io/images/opengraph/#{surah.id}.png"}
when "index.html.erb" when "index.html.erb"
{title: t(context.locale, "TheNobleQuran"), {title: t(context.locale, "TheNobleQuran"),
description: t(context.locale, "meta.index.description"), description: t(context.locale, "meta.index.description"),

View file

@ -12,25 +12,29 @@ compile "/json/*/*/surah.json" do
end end
end end
Ryo.each(name_by_id) do |id, transliterated_name| Ryo.each(name_by_id) do |id, slug|
writer = ->(locale, identifier:) do write_file = ->(locale, pathname:) do
name = tdata[locale].surahs.names[id.to_i - 1] name = tdata[locale].surahs.names[id.to_i - 1]
context = Ryo.from( context = Ryo.from(
filename: "stream.html.erb", filename: "stream.html.erb",
locale:, locale:,
locales:, locales:,
surah: {id:, name:, transliterated_name:} surah: {id:, name:, slug:}
) )
filter(:erb, locals: {context:}) locals = {
locale: context.locale, locales: context.locales,
surah: context.surah, context:
}
filter(:erb, locals:)
filter(:tidy) filter(:tidy)
write "/#{locale}/#{identifier}/index.html" write "/#{locale}/#{pathname}/index.html"
end end
locales.each do |locale| locales.each do |locale|
compile "/html/stream.html.erb", rep: "/#{locale}/#{transliterated_name}/index.html" do compile "/html/stream.html.erb", rep: "/#{locale}/#{slug}/index.html" do
instance_exec(locale, identifier: transliterated_name, &writer) instance_exec(locale, pathname: slug, &write_file)
end end
compile "/html/stream.html.erb", rep: "/#{locale}/#{id}/index.html" do compile "/html/stream.html.erb", rep: "/#{locale}/#{id}/index.html" do
instance_exec(locale, identifier: id, &writer) instance_exec(locale, pathname: id, &write_file)
end end
end end
end end

View file

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<%= context.locale %>"> <html lang="<%= locale %>">
<head> <head>
<title> <%= context.surah.name %> </title> <title><%= t(locale, "TheNobleQuran") %></title>
<%= inline_css('/css/vendor/postman.css') %> <%= inline_css('/css/vendor/postman.css') %>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="description" content='<%= t(context.locale, 'meta.stream.description', {surah_name: context.surah.name}) %>'> <meta name="description" content='<%= t(locale, 'meta.stream.description', {surah_name: surah.name}) %>'>
<%= erb("partials/favicon.html.erb") %> <%= erb("partials/favicon.html.erb") %>
<link <link
rel="canonical" rel="canonical"
hreflang="<%= context.locale %>" hreflang="<%= locale %>"
href="https://al-quran.reflectslight.io/<%= context.locale %>/<%= context.surah.transliterated_name %>/" href="https://al-quran.reflectslight.io/<%= locale %>/<%= surah.slug %>/"
/> />
<% context.locales.each do |locale| %> <% locales.each do |locale| %>
<link <link
rel="alternate" rel="alternate"
type="text/html" type="text/html"
hreflang="<%= locale %>" hreflang="<%= locale %>"
href="https://al-quran.reflectslight.io/<%= locale %>/<%= context.surah.transliterated_name %>/" href="https://al-quran.reflectslight.io/<%= locale %>/<%= surah.slug %>/"
/> />
<% end %> <% end %>
<%= opengraph(context) %> <%= opengraph(context) %>
@ -30,10 +30,10 @@
</div> </div>
</div> </div>
<div class="root" <div class="root"
data-locale="<%= context.locale %>" data-locale="<%= locale %>"
data-surah-id="<%= context.surah.id %>"> data-surah-id="<%= surah.id %>">
</div> </div>
<%= inline_json("/json/durations/alafasy/#{context.surah.id}.json", class_name: 'durations') %> <%= inline_json("/json/durations/alafasy/#{surah.id}.json", class_name: 'durations') %>
<script src="/js/loaders/surah-stream-loader.js"></script> <script src="/js/loaders/surah-stream-loader.js"></script>
</body> </body>
</html> </html>

View file

@ -9,8 +9,8 @@
"of": "of", "of": "of",
"filter": "Filter", "filter": "Filter",
"meta": { "meta": {
"index": {"description": "Explore the chapters of The Noble Quran."}, "index": {"description": "Explore the chapters of The Noble Quran"},
"stream": {"description": "Read and listen to %{surah_name}."} "stream": {"description": "Read and listen to %{surah_name}"}
}, },
"surahs": { "surahs": {
"names": [ "names": [
@ -142,10 +142,10 @@
"filter": "تصفية", "filter": "تصفية",
"meta": { "meta": {
"index": { "index": {
"description": ".استكشف فصول القرآن الكريم" "description": "استكشف فصول القرآن الكريم"
}, },
"stream": { "stream": {
"description": ".%{surah_name} اقرأ واستمع إلى" "description": "%{surah_name} اقرأ واستمع إلى"
} }
}, },
"surahs": { "surahs": {