-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (106 loc) · 4.61 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Typography</title>
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.js'
(async () => {
const response = await fetch("https://cdn.jsdelivr.net/npm/google-font-metadata@2/lib/data/google-fonts-v2.json")
const data = await response.json()
const fonts = Object.fromEntries(Object.values(data).map(({family, weights})=>[family, weights]))
const app = new Vue({
el: '#app',
data() {
return {
urlBase: window.location.protocol+'//'+window.location.host+'/render?',
fonts,
family: 'Abel',
weight: '400',
text: 'Typography',
color: '#000000',
size: 20
}
},
computed: {
url() {
return this.urlBase +
'text=' + encodeURIComponent(this.text) +
'&family=' + this.family.replace(/ /g, '+') +
'&weight=' + this.weight +
'&size=' + this.size +
'&color=' + encodeURIComponent(this.color)
}
}
})
})()
</script>
</head>
<body>
<div id="app" class="container">
<h1 class="text-center mb-5 mt-3">
<img :src="urlBase + 'text=Typography&family=Lobster&weight=400&size=40'" alt="Typography" /><br />
<a href="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/tani/typography" style="text-decoration: none;">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/tani/typography?style=social">
</a>
<a href="https://deno.com/deploy" style="text-decoration: none;">
<img src="https://img.shields.io/badge/deno-deploy-yellowgreen" alt="deno deploy" />
</a>
<a href="https://fonts.google.com" style="text-decoration: none;">
<img src="https://img.shields.io/badge/google-fonts-red" alt="google fonts" />
</a>
</h1>
<div class="row mb-1">
<label for="family" class="col-sm-2 col-form-label">Family </label>
<div class="col-sm-10">
<select name="family" v-model="family" class="form-select">
<option v-for="family in Object.keys(fonts)" :value="family">
{{ family }}
</option>
</select>
</div>
</div>
<div class="row mb-1">
<label for="weight" class="col-sm-2 col-form-label">Weight</label>
<div class="col-sm-10">
<select name="weight" v-model="weight" class="form-select">
<option v-for="weight in fonts[family]" :value="weight">
{{ weight }}
</option>
</select>
</div>
</div>
<div class="row mb-1">
<label for="size" class="col-sm-2 col-form-label">Size</label>
<div class="col-sm-10">
<input type="number" name="size" class="form-control" v-model="size" />
</div>
</div>
<div class="row mb-1">
<label for="text" class="col-sm-2 col-form-label">Text</label>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" v-model="text" />
</div>
</div>
<div class="row mb-3">
<label for="size" class="col-sm-2 col-form-label">Color</label>
<div class="col-sm-10">
<input type="color" name="color" class="form-control" v-model="color" />
</div>
</div>
<div class="row mb-1">
<label for="url" class="col-sm-2 col-form-label">Image URL</label>
<div class="col-sm-10">
<input type="url" name="url" class="form-control" v-model="url" readonly />
</div>
</div>
<div class="card">
<div class="card-header">Preview</div>
<div class="card-body text-center">
<img :height="size * 1.3" :src="url" />
</div>
</div>
</div>
</body>
</html>