-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
104 lines (92 loc) · 4.27 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
<!doctype html>
<html lang="en" class="text-gray-900 antialiased leading-tight">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158637929-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-158637929-1');
</script>
<title>Good JS | JavaScript Best Practices</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-200 text-gray-800">
<h1 class="text-4xl font-bold text-center my-10">Good JS</h1>
<h2 class="text-3xl font-bold text-center my-10">JavaScript Best Practices & Style Guide</h2>
<div id="list">
<div v-for="item in items" :id="item.slug" class="rounded bg-gray-300 m-5">
<h2 class="text-2xl pt-5 pl-10 font-bold">{{ item.title }}</h2>
<div class="text-lg pl-10 text-gray-700">{{ item.description }}</div>
<div class="flex flex-wrap">
<div class="w-full sm:w-full md:w-1/2 lg:w-1/2 xl:w-1/2 mb-4">
<div class="bg-white m-5 rounded overflow-hidden shadow-lg">
<div class="px-6 py-4">
<div class="font-bold">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="stroke-current text-green-500 inline-block h-6 w-6">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
Do
</div>
</div>
<pre
class="block px-6 py-4 bg-gray-800 text-gray-500 overflow-x-auto"><template v-for="code in item.do.codes">{{ code }} </template></pre>
<div v-if="item.do.description" class="px-6 py-4">
<p class="text-gray-700 text-base">
{{ item.do.description }}
</p>
</div>
</div>
</div>
<div class="w-full sm:w-full md:w-1/2 lg:w-1/2 xl:w-1/2 mb-4">
<div class="bg-white m-5 rounded overflow-hidden shadow-lg">
<div class="px-6 py-4">
<div class="font-bold">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="stroke-current text-red-500 inline-block h-6 w-6">
<circle cx="12" cy="12" r="10"></circle>
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
</svg>
Don't
</div>
</div>
<pre
class="block px-6 py-4 bg-gray-800 text-gray-500"><template v-for="code in item.dont.codes">{{ code }} </template></pre>
<div v-if="item.do.description" class="px-6 py-4">
<p class="text-gray-700 text-base">
{{ item.dont.description }}
</p>
</div>
</div>
</div>
</div>
<div class="pl-10 pb-5">
<a v-for="ref in item.refs" :href="ref.url"
class="bg-gray-200 rounded-full px-3 py-1 text-xs font-semibold text-gray-700 mr-2">#{{ ref.title }}</a>
</div>
</div>
</div>
</div>
<div class="text-center my-10 text-gray-400">
Will be Completed
</div>
<div class="text-center my-10">
<a target="_blank" href="https://github.com/amirhossein693/good/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="stroke-current inline-block h-8 w-8">
>
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
</path>
</svg>
</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="scripts.js"></script>
</body>
</html>