-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
168 lines (162 loc) · 5.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<title>aasaam Noto | آسام نوتو</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="shortcut icon"
type="image/png"
href="https://cdn.jsdelivr.net/gh/aasaam/information/logo/icons/favicon-32.png"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"
/>
<link rel="stylesheet" href="./dist/font-face.css" />
<style>
body,
textarea {
font-family: "aasaam-Noto";
}
[lang="fa"] {
direction: rtl;
}
</style>
</head>
<body>
<div id="app">
<section class="hero is-success">
<div class="hero-body has-text-centered">
<h1 class="is-size-1 has-text-weight-bold">aasaam Noto</h1>
<h2 class="is-size-2 has-text-weight-bold" lang="fa">آسام نوتو</h2>
<p class="py-4">
<a href="https://github.com/aasaam/noto-font">
<img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/aasaam/noto-font">
</a>
<a href="https://www.npmjs.com/package/@aasaam/noto-font">
<img alt="npm" src="https://img.shields.io/npm/v/@aasaam/noto-font">
</a>
<a href="https://github.com/aasaam/noto-font/blob/master/LICENSE">
<img alt="License" src="https://img.shields.io/github/license/aasaam/noto-font">
</a>
</p>
<p class="is-size-4">
aasaam Noto is same
<a href="https://www.google.com/get/noto/">Google Noto</a> font but
modified and optimized for using in web pages.
</p>
<p class="is-size-4" lang="fa">
آسام نوتو همان فونت
<a href="https://www.google.com/get/noto/">گوگل نوتو</a> می باشد که
جهت استفاده در نرم‌افزارهای تحت وب بهینه شده است.
</p>
</div>
</section>
<div class="container py-5">
<div class="card">
<div class="card-content">
<div class="columns">
<div class="column">
<h3 class="is-size-3 pb-3 has-text-weight-medium">
Installation
</h3>
<p class="py-3">
Using npm
</p>
<pre>npm i @aasaam/noto-font</pre>
<p class="py-3">
Using CDN
</p>
<pre><link href="https://cdn.jsdelivr.net/npm/@aasaam/noto-font/dist/font-face.min.css" rel="stylesheet"></pre>
<p class="py-3">
Then in your CSS file
</p>
<pre>body { font-family: "aasaam-Noto"; }</pre>
</div>
</div>
<hr />
<div class="columns">
<div class="column">
<h3 class="is-size-3 has-text-centered has-text-weight-medium pb-3">
English Preview
</h3>
<textarea
class="textarea"
placeholder="English Preview"
v-model="en"
rows="4"
></textarea>
<div>
<p v-for="w in weights" v-bind:class="weightClass(w)" class="py-1">
<span class="tag is-warning">{{ w }}</span>
<span v-html="en"><span>
</p>
</div>
</div>
<div class="column">
<h3 class="is-size-3 has-text-centered has-text-weight-medium pb-3">
پیش‌نمایش فارسی
</h3>
<textarea
lang="fa"
class="textarea"
placeholder="پیش‌نمایش فارسی"
v-model="fa"
rows="4"
></textarea>
<div>
<p v-for="w in weights" v-bind:class="weightClass(w)" lang="fa" class="py-1">
<span class="tag is-warning">{{ w }}</span>
<span v-html="fa"><span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-4">
<p class="has-text-centered">
<img
alt="aasaam software development group"
width="64"
src="https://raw.githubusercontent.com/aasaam/information/master/logo/aasaam.svg"
/>
<br />
aasaam software development group
</p>
</div>
</div>
<script type="module">
import Vue from "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js";
const en = `The Lord of the Rings is an epic high fantasy novel written by English
author and scholar J. R. R. Tolkien. The story began as a sequel to
Tolkien's 1937 fantasy novel The Hobbit, but eventually developed into
a much larger work.`.replace(/[\s]+/g, " ");
const fa = `ارباب حلقه‌ها (به انگلیسی: The Lord of the Rings) رمانی به سبک
خیال‌پردازی حماسی به قلم جی.آر.آر. تالکین نویسنده و زبان‌شناس انگلیسی
است. این مجموعه داستان ادامهٔ اثر پیشین تالکین با نام هابیت است که در
همین ژانر نوشته شده بود.`.replace(/[\s]+/g, " ");
const weights = [
"light",
"normal",
"medium",
"bold",
];
new Vue({
el: "#app",
methods: {
weightClass(w) {
return `has-text-weight-${w}`;
}
},
data: {
weights,
en,
fa,
},
});
</script>
</body>
</html>