Update website design

aliftype · Sep 8, 2023 · 0cef796 · 0cef796
1 parent ff4b125
commit 0cef796
Show file tree

Hide file tree

Showing 57 changed files with 496 additions and 173 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 /venv
 /build
 *.swp
+/docs/_site
+/fonts/*.woff2
diff --git a/Makefile b/Makefile
@@ -18,7 +18,7 @@ NAME = Qahiri
 MAKEFLAGS := -sr
 SHELL = bash
 
-CONFIG = _config.yml
+CONFIG = docs/_config.yml
 VERSION = $(shell grep "version:" $(CONFIG) | sed -e 's/.*.: "\(.*.\)".*/\1/')
 DIST = $(NAME)-$(VERSION)
 
@@ -29,17 +29,27 @@ TESTDIR = tests
 BUILDDIR = build
 
 FONTS = $(FONTDIR)/$(NAME)-Regular.ttf
+WOFF2 = $(FONTDIR)/$(NAME)-Regular.woff2
 
 .SECONDARY:
 .ONESHELL:
 .PHONY: all dist
 
-all: $(FONTS)
+all: ttf web
+ttf: $(FONTS)
+
+web: $(WOFF2)
+	cp $(WOFF2) docs/assets/fonts/
+	cp $(FONTS) docs/app/assets/fonts/
 
 %.ttf: $(SOURCEDIR)/$(NAME).glyphs $(CONFIG)
 	$(info   BUILD  $(@F))
 	python $(SCRIPTDIR)/build.py $< $(VERSION) $@
 
+%.woff2: %.ttf
+	$(info   WOFF2  $(@F))
+	python $(SCRIPTDIR)/buildwoff2.py $< $@
+
 dist: all
 	$(info   DIST   $(DIST).zip)
 	install -Dm644 -t $(DIST) $(FONTS)

diff --git a/_config.yml b/_config.yml
diff --git a/_layouts/default.html b/_layouts/default.html
diff --git a/app/assets/fonts/Qahiri-Regular.ttf b/app/assets/fonts/Qahiri-Regular.ttf
diff --git a/assets/css/style.scss b/assets/css/style.scss
diff --git a/assets/images/favicon.svg b/assets/images/favicon.svg
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -0,0 +1,4 @@
+version: "3.00" # Increment only when tagging release, download link uses it.
+name: Qahiri
+title: قاهري
+description: خط كوفي مصحفي
diff --git a/docs/_data/messages.yml b/docs/_data/messages.yml
@@ -0,0 +1,27 @@
+en-US:
+  foundry: Alif Type
+  foundry-description: <em>Alif Type</em> is a virtual type foundry specialized in Arabic and mathematical libre fonts.
+  contact: Contact
+  contact-detail: Do you have questions or suggestions about our typefaces? Reach out!
+  facebook: Facebook
+  instagram: Instagram
+  google-fonts: Google Fonts
+  sitedesigner: Website design by Abdo Mohamed
+  github: Project page on GitHub
+  app: Go to app
+  download: Download font
+  description: Raqq (رَقّ) is a manuscript Kufic typeface, intends to revive (as faithfully as possible) the style of Kufic script used in writing the Qur’an in the third century AH. Raqq is Arabic for parchment, on which early Qur’ans were written.
+
+ar:
+  foundry: حروف ألف
+  foundry-description: «مسبك حروف ألف» هو مسبك حروف رقمی متخصص فی الخطوط العربیة والریاضیاتیة.
+  contact: تواصل معنا
+  contact-detail: هل لديك أي أسئلة أو اقتراحات عن خطوطنا؟ يمكن التواصل معنا عبر
+  facebook: فيسبوك
+  instagram: إنستاجرام
+  google-fonts: خطوط جوجل
+  sitedesigner: الموقع من تصميم عبد الرحمن محمد
+  download: نزِّل الخط
+  app: اذهب إلى التطبيق
+  github: صفحة المشروع على جت&zwnj;هب
+  description: «رَقّ» هو خط حاسوبي كوفي مصحفي، يهدف إلى إحياء الخط الكوفي الذي كتبت به المصاحف المبكرة، وتحديدا مصاحف القرن الثالث الهجري، عبر رقمنته رقمنة دقيقة قدر الإمكان. الرَقّ هو الجلد الذي كتبت عليه المصاحف المبكرة.
diff --git a/_layouts/arabic.html → docs/_layouts/arabic.html b/_layouts/arabic.html → docs/_layouts/arabic.html
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -0,0 +1,63 @@
+{% assign messages = site.data.messages[page.language] %}
+<!DOCTYPE html>
+<html lang="{{ page.language }}" dir="{{ page.direction | default: rtl }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./assets/images/favicon.svg"/>
+
+    <title>{{ page.title | default: site.title }} | {{ page.description | default: site.description }}</title>
+    <meta property="og:locale" content="{{ page.language }}" />
+    <meta        name="description" content="{{ messages.description }}" />
+    <meta property="og:description" content="{{ messages.description }}" />
+    <link      rel="canonical" href="{{ site.url }}/{{ site.github.repository_name }}{{ page.url }}" />
+    <meta property="og:url" content="{{ site.url }}/{{ site.github.repository_name }}{{ page.url }}" />
+    <meta property="og:site_name" content="{{ site.title }}" />
+    <meta property="og:image" content="{{ "/assets/images/card.png" | relative_url }}" />
+
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+  </head>
+  <body>
+    <header>
+      <p id="logo">أ</p>
+      <h1>{{ messages.foundry }}</h1>
+      <p class="lang-switcher-side">
+      {% if page.language == "ar" %}
+        عربي | <a lang="en-US" href="./" hreflang="en-US">English</a>
+      {% else %}
+        English | <a lang=ar" href="./arabic" hreflang="ar">عربي</a>
+      {% endif %}
+      </p>
+      <p>{{ messages.foundry-description }}</p>
+      <h2>{{ messages.contact }}</h2>
+      <p>{{ messages.contact-detail }} <a href="mailto:[email protected]"><code>[email protected]</code></a></p>
+      <p>
+        <a href="https://www.facebook.com/AlifTypeFoundry">{{ messages.facebook }}</a></br>
+        <a href="https://www.instagram.com/khaledhosny.type">{{ messages.instagram }}</a></br>
+        <a href="https://fonts.google.com/?subset=arabic&query=Khaled+Hosny">{{ messages.google-fonts }}</a></br>
+      </p>
+      <p id="sitedesigner"><a href="https://abdomohamed.com">{{ messages.sitedesigner }}</a></p>
+    </header>
+
+    <p class="lang-switcher-top">
+    {% if page.language == "ar" %}
+      عربي | <a lang="en-US" href="./english" hreflang="en-US">English</a>
+    {% else %}
+      English | <a lang=ar" href="./" hreflang="ar">عربي</a>
+    {% endif %}
+    </p>
+    <h1 dir="rtl" id="title">{{ site.title }}—{{ site.description }}</h1>
+    <section>
+      {% if page.title and page.description %}
+      <h1>{{ page.title }}&#x200A;—&#x200A;{{ page.description }}</h1>
+      {% endif %}
+      {{ content }}
+    </section>
+
+    <footer>
+      <p class="downloads"><a href="{{ site.github.repository_url }}/releases/download/v{{ site.version }}/{{ site.name }}-{{ site.version }}.zip">{{ messages.download }}</a></p>
+      <p class="downloads"><a href="./app">{{ messages.app }}</a></p>
+      <p>{{ messages.github }} </br><a href="{{ site.github.repository_url }}"><code>{{ site.github.repository_nwo }}</code></a></p>
+    </footer>
+  </body>
+</html>
diff --git a/app/Config.js → docs/app/Config.js b/app/Config.js → docs/app/Config.js
diff --git a/app/FontRemapper.js → docs/app/FontRemapper.js b/app/FontRemapper.js → docs/app/FontRemapper.js
diff --git a/app/HarfBuzz.js → docs/app/HarfBuzz.js b/app/HarfBuzz.js → docs/app/HarfBuzz.js
diff --git a/app/OpenType.js → docs/app/OpenType.js b/app/OpenType.js → docs/app/OpenType.js
diff --git a/app/ServiceWorker.js → docs/app/ServiceWorker.js b/app/ServiceWorker.js → docs/app/ServiceWorker.js
diff --git a/app/TextView.js → docs/app/TextView.js b/app/TextView.js → docs/app/TextView.js
diff --git a/app/app.webmanifest → docs/app/app.webmanifest b/app/app.webmanifest → docs/app/app.webmanifest
diff --git a/docs/app/assets/fonts/Qahiri-Regular.ttf b/docs/app/assets/fonts/Qahiri-Regular.ttf
diff --git a/app/assets/images/app-icon.png → docs/app/assets/images/app-icon.png b/app/assets/images/app-icon.png → docs/app/assets/images/app-icon.png
diff --git a/app/assets/images/app-icon.svg → docs/app/assets/images/app-icon.svg b/app/assets/images/app-icon.svg → docs/app/assets/images/app-icon.svg
diff --git a/app/assets/images/clear.svg → docs/app/assets/images/clear.svg b/app/assets/images/clear.svg → docs/app/assets/images/clear.svg
diff --git a/app/assets/images/export.svg → docs/app/assets/images/export.svg b/app/assets/images/export.svg → docs/app/assets/images/export.svg
diff --git a/app/assets/images/onum.svg → docs/app/assets/images/onum.svg b/app/assets/images/onum.svg → docs/app/assets/images/onum.svg
diff --git a/app/assets/images/open.svg → docs/app/assets/images/open.svg b/app/assets/images/open.svg → docs/app/assets/images/open.svg
diff --git a/app/assets/images/remove-dots.svg → docs/app/assets/images/remove-dots.svg b/app/assets/images/remove-dots.svg → docs/app/assets/images/remove-dots.svg
diff --git a/app/assets/images/round-dots.svg → docs/app/assets/images/round-dots.svg b/app/assets/images/round-dots.svg → docs/app/assets/images/round-dots.svg
diff --git a/app/assets/images/save.svg → docs/app/assets/images/save.svg b/app/assets/images/save.svg → docs/app/assets/images/save.svg
diff --git a/app/hb.js → docs/app/hb.js b/app/hb.js → docs/app/hb.js
diff --git a/app/hb.wasm → docs/app/hb.wasm b/app/hb.wasm → docs/app/hb.wasm
diff --git a/app/index.css → docs/app/index.css b/app/index.css → docs/app/index.css
diff --git a/app/index.html → docs/app/index.html b/app/index.html → docs/app/index.html
diff --git a/app/index.js → docs/app/index.js b/app/index.js → docs/app/index.js
diff --git a/app/override.css → docs/app/override.css b/app/override.css → docs/app/override.css
diff --git a/arabic.md → docs/arabic.md b/arabic.md → docs/arabic.md
@@ -1,6 +1,7 @@
 ---
-layout: arabic
-title: قاهري
+layout: default
+language: ar
+direction: rtl
 ---
 
 «قاهري» هو خط حاسوبي [كوفي] مبني على القاعدة الحديثة لخط كوفي المصاحف التي