-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (181 loc) · 11.3 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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hacker News Alpine - Top</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon.png">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="./assets/main.js"></script>
<link href="./assets/output.css" rel="stylesheet">
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('pagination', {
currentPage: 1,
nextPage() {
this.currentPage++
},
previousPage() {
this.currentPage--
}
})
})
</script>
</head>
<body class="bg-gray-100">
<!-- Container -->
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8" x-data="{ currentSection: '' }"
x-init="currentSection = getParamFromUrl(window.location.search, 'section') || 'top'">
<!-- Navigation -->
<header>
<div class="border-b border-gray-200">
<nav class="-mb-px flex justify-center space-x-4" aria-label="Tabs">
<template x-for="section in Object.keys(SECTIONS)">
<a :href="`./?section=${section}&page=1`" x-text="section" class="capitalize"
:class="currentSection === section ? 'border-cyan-500 text-cyan-600 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 font-medium text-sm'"
:aria-current="currentSection === section ? 'page' : ''">
</a>
</template>
</nav>
</div>
</header>
<!-- Content -->
<section x-data=" { items: [] }"
x-init="items = await getItems(currentSection, $store.pagination.currentPage), $watch('$store.pagination.currentPage', async (val) => { items = await getItems('top', val) })">
<ul role="list" class="space-y-3">
<template x-for="item, index in items" :key="item.id">
<li class="flex bg-white px-4 sm:px-6 py-4 shadow rounded-md">
<!-- Left Col -->
<template x-if="currentSection !== 'jobs'">
<div class="flex flex-col items-center pr-4">
<span>▲</span>
<span x-text="item.points"
class="text-gray-400 text-sm font-medium w-10 text-center tabular-nums"></span>
</div>
</template>
<template x-if="currentSection === 'jobs'">
<div class="flex items-center pr-4">
<span x-text="index + 1" class="text-gray-400 text-sm font-medium w-10 text-center"></span>
</template>
<!-- Right Col -->
<div class="border-l pl-4">
<!-- Item has domain -->
<template x-if="item.hasOwnProperty('domain')">
<a :href="item.url" target="_blank" rel="noopener noreferrer" class="block">
<span x-text="item.title" class="text-bold text-gray-900"></span>
</a>
</template>
<!-- Item has no domain -->
<template x-if="!item.hasOwnProperty('domain')">
<a :href="buildItemLink(item.id)" x-text="item.title" class="text-bold text-gray-900">
</a>
</template>
<div class="text-xs text-gray-600">
<!-- Check if item has user -->
<template x-if="item.hasOwnProperty('user') && item.user !== null">
<span>
by
<a :href="buildUserLink(item.user)"
class="font-medium underline decoration-cyan-500/40 decoration-2 hover:decoration-cyan-500/80 ease-in duration-150"
x-text="item.user"></a>
</a>
<span class="p-2 text-gray-300 select-none">|</span>
</span>
</template>
<span x-text="item.time_ago"></span>
<span class="p-2 text-gray-300 select-none">|</span>
<a :href="buildItemLink(item.id)"
class="font-medium underline decoration-cyan-500/40 decoration-2 hover:decoration-cyan-500/80 ease-in duration-150">
<span x-text="item.comments_count"></span>
comments
</a>
<span class="p-2 text-gray-300 select-none">|</span>
<!-- Check if item has domain -->
<template x-if="item.hasOwnProperty('domain')">
<span x-text="item.domain" class="font-mono"></span>
</template>
</div>
</div>
</li>
</template>
</ul>
</section>
<!-- Pagination -->
<div>
<nav class="border-t border-gray-200 px-4 flex items-center justify-between sm:px-0" aria-label="Pagination">
<div class="hidden sm:block">
<p class="text-sm text-gray-700">
Page
<span class="font-medium" x-text="$store.pagination.currentPage"></span> •
Showing
<span class="font-medium" x-text="1 + (30 * ($store.pagination.currentPage - 1))"></span>
to
<span class="font-medium" x-text="30 * $store.pagination.currentPage"></span>
of
<span class="font-medium" x-text="30 * 10"></span>
results
</p>
</div>
<div class="flex-1 flex justify-between sm:justify-end mt-4">
<button type="button" x-data x-on:click="$store.pagination.previousPage()"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="$store.pagination.currentPage === 1">
Previous
</button>
<button x-data type="button" @click="$store.pagination.nextPage()"
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="$store.pagination.currentPage === 10">
Next
</div>
</nav>
</div>
</div>
<!-- Footer -->
<footer class="bg-white mt-12">
<div class="mx-auto max-w-7xl py-12 px-6 md:flex md:items-center md:justify-between lg:px-8">
<div class="flex justify-center space-x-6 md:order-2">
<a href="https://www.instagram.com/baumannzone/" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://twitter.com/baumannzone" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="https://github.com/baumannzone" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="https://www.youtube.com/rambitojs" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">YouTube</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="mt-8 md:order-1 md:mt-0">
<p class="text-center text-xs leading-5 text-gray-500">Hacker news clone with Alpine.js and Tailwind CSS by
<a href="https://baumannzone.dev"
class="font-medium underline decoration-cyan-500/40 decoration-2 hover:decoration-cyan-500/80 ease-in duration-150">
baumannzone.dev
</a>
</p>
</div>
</div>
</footer>
</body>
</html>