Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(font): refactor and improve performance #353

Merged
merged 12 commits into from
Nov 1, 2022
Merged

feat(font): refactor and improve performance #353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
eb76649
feat(font): rename font files
MM25Zamanian Oct 31, 2022
fafa726
feat(font): seprate stylesheets
MM25Zamanian Oct 31, 2022
9d071e6
docs(readme): improve
MM25Zamanian Oct 31, 2022
222e014
feat(demo): seprate fonts
MM25Zamanian Oct 31, 2022
d200583
Merge branch 'next' into feat/alwatr-font
MM25Zamanian Oct 31, 2022
4cc356b
chore(font): default font css
MM25Zamanian Oct 31, 2022
c85f579
Merge branch 'next' into feat/alwatr-font
alimd Nov 1, 2022
89a3696
Merge branch 'next' into feat/alwatr-font
alimd Nov 1, 2022
8bf6f7f
doc(font): update docs and readme
alimd Nov 1, 2022
a371bf2
fix(font): review
alimd Nov 1, 2022
9eaa4a0
Merge branch 'feat/alwatr-font' of github.com:AliMD/alwatr into feat/…
alimd Nov 1, 2022
b89217e
feat(demo): improve demo dark mode
alimd Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"nanoservice",
"preconnect",
"preload",
"roundot",
"Superfast",
"tnum",
"tsbuildinfo",
Expand Down
26 changes: 16 additions & 10 deletions demo/font/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,28 @@
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/font</title>
<link rel="stylesheet" href="/node_modules/@alwatr/font/font.css" fetchpriority="high" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="/node_modules/@alwatr/font/vazirmatn.css" />
<link rel="stylesheet" href="/node_modules/@alwatr/font/vazirmatn-roundot.css" />
<link rel="stylesheet" href="/node_modules/@alwatr/font/sahel.css" />

<style>
html {
color-scheme: light dark;
}

body {
font-family: var(--font-system);
font-family: system-ui;
}

h1 {
text-align: center;
}

section {
max-width: 500px;
max-width: 520px;
margin: 2em auto;
}

Expand All @@ -31,15 +37,15 @@
}

.vazirmatn {
font-family: var(--font-vazirmatn), var(--font-system);
font-family: var(--font-vazirmatn), system-ui;
}

.vazirmatn-rd {
font-family: var(--font-vazirmatn-rd), var(--font-system);
.vazirmatn-roundot {
font-family: var(--font-vazirmatn-roundot), system-ui;
}

.sahel {
font-family: var(--font-sahel), var(--font-system);
font-family: var(--font-sahel), system-ui;
}
</style>
</head>
Expand All @@ -64,7 +70,7 @@ <h3>فونت وزیر‌متن</h3>
</p>
</section>

<section class="vazirmatn-rd">
<section class="vazirmatn-roundot">
<h3>فونت وزیر‌متن نقطه‌گرد</h3>
<p></p>
</section>
Expand Down
5 changes: 5 additions & 0 deletions demo/icon/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/icon</title>
<script type="module" src="./index.js"></script>
<style>
html {
color-scheme: light dark;
}
</style>
</head>

<body>
Expand Down
37 changes: 21 additions & 16 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>One</title>
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alwatr</title>
<style>
html {
color-scheme: light dark;
}
</style>
</head>

<body>
<ol>
<li><a href="./logger/">Logger</a></li>
<li><a href="./fetch/">Fetch</a></li>
<li><a href="./signal/">Signal</a></li>
<li><a href="./router/">Router</a></li>
<li><a href="./font/">Font</a></li>
<li><a href="./math/">Math</a></li>
</ol>
</body>
<body>
<ol>
<li><a href="./logger/">Logger</a></li>
<li><a href="./fetch/">Fetch</a></li>
<li><a href="./signal/">Signal</a></li>
<li><a href="./router/">Router</a></li>
<li><a href="./font/">Font</a></li>
<li><a href="./math/">Math</a></li>
</ol>
</body>
</html>
25 changes: 15 additions & 10 deletions demo/logger/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/logger</title>
<script type="module" src="./index.js"></script>
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/logger</title>
<script type="module" src="./index.js"></script>
<style>
html {
color-scheme: light dark;
}
</style>
</head>

<body>
<h3>Check the console</h3>
</body>
<body>
<h3>Check the console</h3>
</body>
</html>
25 changes: 15 additions & 10 deletions demo/math/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/math</title>
<script type="module" src="./translate-unicode-digits.js"></script>
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/math</title>
<script type="module" src="./translate-unicode-digits.js"></script>
<style>
html {
color-scheme: light dark;
}
</style>
</head>

<body>
<h3>Check the console</h3>
</body>
<body>
<h3>Check the console</h3>
</body>
</html>
63 changes: 34 additions & 29 deletions demo/router/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,39 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/router</title>
<script type="module" src="./index.js"></script>
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/router</title>
<script type="module" src="./index.js"></script>
<style>
html {
color-scheme: light dark;
}
</style>
</head>

<body>
<h3>Check the console</h3>
<ol>
<ul>
<a href="/home">Home</a>
</ul>
<ul>
<a href="/about">About</a>
</ul>
<ul>
<a href="/product-list">Products</a>
</ul>
<ul>
<a href="/product/1">Product 1</a>
</ul>
<ul>
<a href="/contact">Contact</a>
</ul>
</ol>
<body>
<h3>Check the console</h3>
<ol>
<ul>
<a href="/home">Home</a>
</ul>
<ul>
<a href="/about">About</a>
</ul>
<ul>
<a href="/product-list">Products</a>
</ul>
<ul>
<a href="/product/1">Product 1</a>
</ul>
<ul>
<a href="/contact">Contact</a>
</ul>
</ol>

<div class="render"></div>
<div class="render"></div>

<textarea cols="50" rows="10"></textarea>
</body>
<textarea cols="50" rows="10"></textarea>
</body>
</html>
29 changes: 17 additions & 12 deletions demo/signal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/signal</title>
<script type="module" src="./index.js"></script>
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@alwatr/signal</title>
<script type="module" src="./index.js"></script>
<style>
html {
color-scheme: light dark;
}
</style>
</head>

<body>
<h3>Check the console</h3>
<button id="requestButton">Request Signal</button>
<button id="requestButton2">3x Request Signal</button>
</body>
<body>
<h3>Check the console</h3>
<button id="requestButton">Request Signal</button>
<button id="requestButton2">3x Request Signal</button>
</body>
</html>
87 changes: 57 additions & 30 deletions packages/ui/font/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,65 @@
# @alwatr/font

Best practices of using persian/arabic web fonts for progressive web applications (The Right Way).
Best practices (The Right Way) of using Persian/Arabic web fonts for Web Sites/Apps.

## How to use

Insert these lines inside `<head>` tag.
[Demo](https://jsbin.com/zucajut/edit?html,output)

### Vazirmatn

```html
<meta charset="UTF-8" />

<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn/vazirmatn[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>
```

### Vazirmatn Round Dot

```html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/font.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn/vazirmatn[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>

<style>
body {
font-family: var(--font-vazirmatn), var(--font-system);
}
</style>
</head>
<body>
<h1>بِسْمِ اللهِ الرَّحْمنِ الرَّحِیمِ</h1>
<h2>به نام خداوند بخشنده مهربان</h2>
</body>
</html>
<meta charset="UTF-8" />

<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn-roundot.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn-roundot/vazirmatn-roundot[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>
```

[Demo](https://jsbin.com/zucajut/1/edit?html,output)
### Sahel

```html
<meta charset="UTF-8" />

<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn-roundot.min.css" fetchpriority="high" />

<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/@alwatr/[email protected]/vazirmatn-roundot/vazirmatn-roundot[wght].woff2"
as="font"
type="font/woff2"
crossorigin
/>
```
Loading