Skip to content

Commit ef18cd5

Browse files
hyochanhyochan
committed
chore: pwa
1 parent 2b08d82 commit ef18cd5

File tree

9 files changed

+135
-123
lines changed

9 files changed

+135
-123
lines changed

‎app/[lang]/(home)/Hero/index.tsx‎

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import clsx from 'clsx';
1010
import type {StatsInfo} from '../../../../src/fetches/github';
1111
import {fetchGithubStats} from '../../../../src/fetches/github';
1212
import type {Translates} from '../../../../src/localization';
13-
import Button from '../../(common)/Button';
1413
import ButtonGroup from '../../(common)/ButtonGroup';
1514
import Dropdown from '../../(common)/Dropdown';
1615
import TextInput from '../../(common)/TextInput';
@@ -158,63 +157,61 @@ function Hero({t, statsInfo}: Props): ReactElement {
158157
>
159158
<div
160159
className={clsx(
161-
'rounded-[16px] px-3 h-[64px] relative body2 w-full',
162-
'flex flex-row-reverse items-center',
160+
'rounded-[16px] px-3 h-[64px] body2 w-full',
161+
'flex flex-row items-center gap-2',
163162
'bg-white/50 dark:bg-black/40',
164163
'backdrop-blur-2xl',
165164
'border border-black/10 dark:border-white/20',
166165
'shadow-[0_20px_60px_-15px_rgba(0,0,0,0.2)]',
167166
'hover:bg-white/60 dark:hover:bg-black/50',
168167
'transition-all duration-300',
169-
'max-[425px]:p-3 max-[425px]:self-stretch max-[425px]:h-auto max-[425px]:flex-wrap',
170-
'max-[320px]:py-3 max-[320px]:items-start',
168+
'max-[425px]:px-2 max-[425px]:h-[56px]',
171169
)}
172170
>
173-
<Button
174-
loading={formState.isSubmitting}
175-
type="submit"
171+
<Dropdown
172+
data={statTypes}
173+
selected={selectedPluginType}
174+
setSelected={(el) => {
175+
setSelectedPluginType(el);
176+
}}
177+
/>
178+
<span
176179
className={clsx(
177-
'bg-transparent border-0 text-center max-w-[100px] p-2',
178-
'absolute',
180+
'text-gray5 dark:text-gray3',
181+
'body3 text-[22px]',
182+
'max-[480px]:hidden',
179183
)}
180-
text={<SearchIcon size={22} className="text-gray8 dark:text-white" />}
184+
>
185+
/
186+
</span>
187+
<TextInput
188+
className="text-gray7 dark:text-white placeholder:text-gray5 dark:placeholder:text-gray4"
189+
placeholder={t.githubUsername}
190+
value={login}
191+
onChange={(e) => {
192+
setLogin(e.target.value.trim());
193+
}}
194+
onFocus={() => setShowHistory(true)}
195+
onBlur={() => {
196+
// Delay to allow click on history items
197+
setTimeout(() => setShowHistory(false), 200);
198+
}}
181199
/>
182-
<div
200+
<button
201+
type="submit"
202+
disabled={formState.isSubmitting}
183203
className={clsx(
184-
'flex-1',
185-
'flex flex-row items-center overflow-x-clip',
204+
'p-2 flex-shrink-0 cursor-pointer',
205+
'bg-transparent border-none outline-none',
206+
formState.isSubmitting && 'opacity-50',
186207
)}
187208
>
188-
<Dropdown
189-
data={statTypes}
190-
selected={selectedPluginType}
191-
setSelected={(el) => {
192-
setSelectedPluginType(el);
193-
}}
194-
/>
195-
<span
196-
className={clsx(
197-
'text-gray5 dark:text-gray3',
198-
'mx-3 body3 text-[22px]',
199-
'max-[425px]:invisible max-[425px]:hidden',
200-
)}
201-
>
202-
/
203-
</span>
204-
<TextInput
205-
className="text-gray7 dark:text-white placeholder:text-gray5 dark:placeholder:text-gray4"
206-
placeholder={t.githubUsername}
207-
value={login}
208-
onChange={(e) => {
209-
setLogin(e.target.value.trim());
210-
}}
211-
onFocus={() => setShowHistory(true)}
212-
onBlur={() => {
213-
// Delay to allow click on history items
214-
setTimeout(() => setShowHistory(false), 200);
215-
}}
216-
/>
217-
</div>
209+
{formState.isSubmitting ? (
210+
<div className="border-2 border-gray8 dark:border-gray3 border-t-transparent rounded-full w-5 h-5 animate-spin" />
211+
) : (
212+
<SearchIcon size={22} className="text-gray8 dark:text-white" />
213+
)}
214+
</button>
218215
</div>
219216
</form>
220217
<SearchHistoryDropdown

‎app/[lang]/stats/Container.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ export default function Container({t, children, headerSearch, headerRight}: Prop
2727
)}
2828
>
2929
{hasHeaderContent ? (
30-
<div className="flex flex-row items-center justify-between gap-4">
31-
<div className="flex flex-row items-center gap-8">
30+
<div className="flex flex-row items-center justify-between gap-4 max-[480px]:flex-col max-[480px]:items-start">
31+
<div className="flex flex-row items-center gap-4 max-[480px]:flex-col max-[480px]:items-start max-[480px]:w-full">
3232
<H1
3333
className={clsx(
3434
'text-[44px] font-bold mt-12 mb-[28px]',
35-
'max-[480px]:px-6 max-[480px]:text-[28px] max-[480px]:mb-4 max-[480px]:mt-8',
36-
'max-[380px]:hidden',
35+
'max-[480px]:text-[28px] max-[480px]:mb-4 max-[480px]:mt-8',
36+
'flex-shrink-0',
3737
inter.className,
3838
)}
3939
>
@@ -47,8 +47,7 @@ export default function Container({t, children, headerSearch, headerRight}: Prop
4747
<H1
4848
className={clsx(
4949
'text-[44px] font-bold mt-12 mb-[28px] text-center',
50-
'max-[480px]:px-6 max-[480px]:text-[28px] max-[480px]:mb-4 max-[480px]:mt-8',
51-
'max-[380px]:hidden',
50+
'max-[480px]:text-[28px] max-[480px]:mb-4 max-[480px]:mt-8',
5251
inter.className,
5352
)}
5453
>

‎app/[lang]/stats/[login]/SearchTextInput.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import clsx from 'clsx';
88
import {usePathname, useRouter} from 'next/navigation';
99

1010
import type {Translates} from '../../../../src/localization';
11-
import TextInput from '../../(common)/TextInput';
1211
import SearchHistoryDropdown from '../../(home)/Hero/SearchHistoryDropdown';
1312
import {useSearchHistory} from '../../../../src/hooks/useSearchHistory';
1413

@@ -85,16 +84,17 @@ export default function SearchTextInput({
8584
>
8685
<div
8786
className={clsx(
88-
'rounded-[16px] body4 px-4 h-[56px]',
87+
'rounded-[16px] body4 px-3 h-[56px]',
8988
'bg-black/10 dark:bg-white/5',
9089
'backdrop-blur-md',
9190
'border border-black/20 dark:border-white/10',
92-
'flex items-center gap-2',
91+
'flex items-center',
9392
'hover:bg-black/15 dark:hover:bg-white/8',
9493
'transition-all duration-300',
9594
)}
9695
>
97-
<TextInput
96+
<input
97+
type="text"
9898
value={login}
9999
placeholder={t.githubUsername}
100100
onChange={(e) => {
@@ -105,6 +105,12 @@ export default function SearchTextInput({
105105
// Delay to allow click on history items
106106
setTimeout(() => setShowHistory(false), 200);
107107
}}
108+
className={clsx(
109+
'flex-1 min-w-0 h-full',
110+
'bg-transparent border-none outline-none',
111+
'text-basic placeholder:text-placeholder',
112+
'font-inter px-2',
113+
)}
108114
/>
109115
<button
110116
type="submit"
@@ -115,7 +121,7 @@ export default function SearchTextInput({
115121
: t.search || 'Search'
116122
}
117123
className={clsx(
118-
'p-2 rounded-full',
124+
'w-10 h-10 flex-shrink-0 rounded-full ml-1',
119125
'hover:bg-black/10 dark:hover:bg-white/10',
120126
'transition-all duration-200',
121127
'disabled:opacity-50 disabled:cursor-not-allowed',

‎app/[lang]/stats/[login]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default async function Page(props: Props): Promise<ReactElement> {
9595
headerSearch={
9696
<SearchTextInput
9797
t={tStats}
98-
className="mt-4 flex-1 min-w-[400px] max-[768px]:min-w-[300px] max-[480px]:hidden"
98+
className="mt-4 flex-1 min-w-[200px] max-[480px]:mt-0 max-[480px]:w-full"
9999
initialValue={login}
100100
/>
101101
}

‎app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export default function RootLayout({children}: {children: ReactNode}) {
7272
<html lang="en" className="dark h-full">
7373
<head>
7474
<meta content="width=device-width, initial-scale=1" name="viewport" />
75+
<link rel="manifest" href="/manifest.json" />
76+
<meta name="theme-color" content="#4190EB" />
7577
<script
7678
async
7779
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8181493727238996"

‎next.config.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
const enablePWA = process.env.ENABLE_PWA === 'true';
2-
const withPWA = enablePWA
3-
? require('next-pwa')({
4-
disable: process.env.NODE_ENV !== 'production',
5-
dest: 'public',
6-
})
7-
: (config) => config;
1+
const withPWA = require('next-pwa')({
2+
disable: process.env.NODE_ENV !== 'production',
3+
dest: 'public',
4+
});
85

96
/** @type {import('next').NextConfig} */
107
const nextConfig = {

‎proxy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ export async function proxy(
7878
}
7979

8080
export const config = {
81-
// Matcher ignoring `/_next/`, `/api/`, `/auth/`, `/assets/`, sitemap.xml, robots.txt
81+
// Matcher ignoring `/_next/`, `/api/`, `/auth/`, `/assets/`, static files
8282
matcher: [
83-
'/((?!api|auth|assets|_next/static|_next/image|favicon.ico|public|sitemap.xml|robots.txt).*)',
83+
'/((?!api|auth|assets|_next/static|_next/image|favicon.ico|public|sitemap\\.xml|robots\\.txt|manifest\\.json|.*\\.png$|.*\\.ico$|.*\\.svg$|.*\\.jpg$|.*\\.jpeg$|.*\\.webp$).*)',
8484
],
8585
};

‎public/manifest.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "GitHub Stats - Developer Power Meter",
3+
"short_name": "GitHub Stats",
4+
"description": "Analyze your GitHub contributions and showcase your developer stats",
5+
"start_url": "/en",
6+
"display": "standalone",
7+
"background_color": "#1a1a2e",
8+
"theme_color": "#4190EB",
9+
"orientation": "portrait-primary",
10+
"icons": [
11+
{
12+
"src": "/logo192.png",
13+
"sizes": "192x192",
14+
"type": "image/png",
15+
"purpose": "any maskable"
16+
},
17+
{
18+
"src": "/logo512.png",
19+
"sizes": "512x512",
20+
"type": "image/png",
21+
"purpose": "any maskable"
22+
}
23+
]
24+
}

0 commit comments

Comments
 (0)