Skip to content

Commit 34ac475

Browse files
andreasphilandreasphil
committed
feat: redesign repository list
1 parent e72071b commit 34ac475

File tree

3 files changed

+180
-160
lines changed

3 files changed

+180
-160
lines changed

‎scripts/app.js

+117-120
Original file line numberDiff line numberDiff line change
@@ -26,41 +26,39 @@ export const Home = defineComponent({
2626
return { browseStars, usernameModel };
2727
},
2828

29-
template: /* html */ `
30-
<main class="home">
29+
template: html`<main>
30+
<hgroup class="home">
3131
<img class="logo" src="./assets/icon-192.png" width="72" height="72" />
32-
<hgroup>
33-
<h1>Stargaze</h1>
34-
<p>
35-
A faster way of browsing and searching your starred repositories on
36-
GitHub.
37-
</p>
38-
</hgroup>
39-
40-
<form class="username-form" @submit.prevent="browseStars()">
41-
<label for="ghUsername" data-hidden>Your GitHub username</label>
42-
<input
43-
autofocus
44-
id="ghUsername"
45-
placeholder="Your GitHub username"
46-
type="text"
47-
v-model="usernameModel"
48-
/>
49-
<button class="username-submit" data-variant="outline" type="submit">
50-
🐱 Browse stars
51-
</button>
52-
</form>
53-
54-
<div class="callout">
55-
<div class="calloutIcon">💡</div>
56-
<p class="callout-text">
57-
This uses GitHub&rsquo;s public API and doesn&rsquo;t require you to sign
58-
in. Because we rely on public information, Stargaze won&rsquo;t work with
59-
private profiles.
60-
</p>
61-
</div>
62-
</main>
63-
`,
32+
<h1>Stargaze</h1>
33+
<p>
34+
A faster way of browsing and searching your starred repositories on
35+
GitHub.
36+
</p>
37+
</hgroup>
38+
39+
<form class="username-form" @submit.prevent="browseStars()">
40+
<label for="ghUsername" data-hidden>Your GitHub username</label>
41+
<input
42+
autofocus
43+
id="ghUsername"
44+
placeholder="Your GitHub username"
45+
type="text"
46+
v-model="usernameModel"
47+
/>
48+
<button class="username-submit" data-variant="outline" type="submit">
49+
🐱 Browse stars
50+
</button>
51+
</form>
52+
53+
<div class="callout">
54+
<div class="calloutIcon">💡</div>
55+
<p class="callout-text">
56+
This uses GitHub&rsquo;s public API and doesn&rsquo;t require you to
57+
sign in. Because we rely on public information, Stargaze won&rsquo;t
58+
work with private profiles.
59+
</p>
60+
</div>
61+
</main>`,
6462
});
6563

6664
/* -------------------------------------------------- *
@@ -127,97 +125,96 @@ export const List = defineComponent({
127125
};
128126
},
129127

130-
template: /* html */ `
131-
<div data-nav="fixed">
132-
<header>
133-
<nav data-variant="fixed" class="header">
128+
template: html`<div data-nav="fixed">
129+
<header>
130+
<nav data-variant="fixed" class="header">
131+
<strong>
134132
<img
135-
v-if="avatarUrl"
136-
:src="avatarUrl"
133+
src="./assets/icon-192.png"
134+
class="logo"
135+
width="36"
136+
height="36"
137137
alt=""
138-
class="avatar"
139-
height="48"
140-
width="48"
141-
/>
142-
143-
<input
144-
@keydown.enter.stop="jumpToFirstResult($event.metaKey)"
145-
aria-label="Search"
146-
class="search-input"
147-
placeholder="Search ..."
148-
ref="inputEl"
149-
type="search"
150-
v-model="searchTerm"
151-
/>
152-
153-
<button
154-
@click="signOut()"
155-
class="sign-out-btn"
156-
data-variant="muted"
157-
type="button"
158-
>
159-
👋 Leave
160-
</button>
161-
</nav>
162-
</header>
163-
164-
<!-- Stars list -->
165-
<main data-with-fallback>
166-
<div>
167-
<ul v-if="starredRepositories?.length" class="stars-list">
168-
<li
169-
v-for="(s, i) in starredRepositories"
170-
:key="s.id"
171-
class="stars-list-item"
138+
/>Stargaze
139+
</strong>
140+
141+
<input
142+
@keydown.enter.stop="jumpToFirstResult($event.metaKey)"
143+
aria-label="Search"
144+
class="search-input"
145+
placeholder="Search..."
146+
ref="inputEl"
147+
type="search"
148+
v-model="searchTerm"
149+
/>
150+
151+
<button
152+
@click="signOut()"
153+
class="sign-out-btn"
154+
data-variant="muted"
155+
type="button"
156+
>
157+
<img :src="avatarUrl" alt="" class="avatar" />
158+
Leave
159+
</button>
160+
</nav>
161+
</header>
162+
163+
<!-- Stars list -->
164+
<main data-with-fallback>
165+
<div>
166+
<ul v-if="starredRepositories?.length" class="stars">
167+
<li v-for="(s, i) in starredRepositories" :key="s.id" class="star">
168+
<a
169+
:href="s.html_url"
170+
:ref="(el) => i === 0 && (firstResult = el)"
171+
:title="s.full_name"
172172
>
173-
<a
174-
:href="s.html_url"
175-
:ref="(el) => i === 0 && (firstResult = el)"
176-
class="star"
173+
<img
174+
:src="s.owner.avatar_url"
175+
alt=""
176+
class="star-icon"
177+
loading="lazy"
178+
/>
179+
<strong class="star-title" data-clamp="1">
180+
@{{ s.full_name }}
181+
</strong>
182+
<small
183+
v-if="s.description"
184+
class="star-description"
185+
data-clamp="2"
177186
>
178-
<img
179-
:src="s.owner.avatar_url"
180-
alt=""
181-
class="star-icon"
182-
height="56"
183-
loading="lazy"
184-
width="56"
185-
/>
186-
<span>
187-
<strong class="starName" data-clamp="1">@{{ s.full_name }}</strong>
188-
<small class="star-description" data-clamp="1">{{
189-
s.description
190-
}}</small>
191-
</span>
192-
</a>
193-
</li>
194-
</ul>
195-
</div>
187+
{{ s.description }}
188+
</small>
189+
</a>
190+
</li>
191+
</ul>
192+
</div>
196193
197-
<!-- Empty state -->
198-
<div data-when="empty">
199-
<p>😵‍💫</p>
200-
<p>Sorry, couldn&rsquo;t find anything.</p>
201-
</div>
202-
</main>
203-
204-
<!-- Status notification -->
205-
<div class="status-layout">
206-
<Transition name="slide">
207-
<div
208-
v-if="isLoading || hasError"
209-
aria-busy="true"
210-
class="status"
211-
data-color-scheme="inverted"
212-
>
213-
<small class="status-label">
214-
<template v-if="!hasError">Fetching your stuff ...</template>
215-
<template v-else>🚨 Couldn&rsquo;t fetch your stars!</template>
216-
</small>
217-
</div>
218-
</Transition>
194+
<!-- Empty state -->
195+
<div data-when="empty">
196+
<p>😵‍💫</p>
197+
<p>Sorry, couldn&rsquo;t find anything.</p>
219198
</div>
220-
</div>`,
199+
</main>
200+
201+
<!-- Status notification -->
202+
<div class="status-layout">
203+
<Transition name="slide">
204+
<div
205+
v-if="isLoading || hasError"
206+
aria-busy="true"
207+
class="status"
208+
data-color-scheme="inverted"
209+
>
210+
<small class="status-label">
211+
<template v-if="!hasError">Fetching your stuff ...</template>
212+
<template v-else>🚨 Couldn&rsquo;t fetch your stars!</template>
213+
</small>
214+
</div>
215+
</Transition>
216+
</div>
217+
</div>`,
221218
});
222219

223220
/* -------------------------------------------------- *
@@ -238,7 +235,7 @@ const App = defineComponent({
238235

239236
components: { Home, List },
240237

241-
template: /* html */ `
238+
template: html`
242239
<!-- Page content -->
243240
<Home v-if="!username" />
244241
<List v-else />

‎scripts/lib.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,22 @@ import createSearch, {
44
import { computed, ref, watch } from "vue";
55

66
/* -------------------------------------------------- *
7-
* Utilities *
7+
* Utils *
88
* -------------------------------------------------- */
99

10+
/**
11+
* @param {TemplateStringsArray} strings
12+
* @param {unknown[]} values
13+
* @returns {string}
14+
*/
15+
const tag = (strings, ...values) => String.raw({ raw: strings }, ...values);
16+
17+
/**
18+
* Helper for HTML template strings. The tag does nothing, but using it will
19+
* allow syntax highlighting and formatting if your editor supports it.
20+
*/
21+
export const html = tag;
22+
1023
function isDev() {
1124
return window.location.hostname === "localhost";
1225
}

0 commit comments

Comments
 (0)