Skip to content

Commit e8ec084

Browse files
alinnertalinnert
committed
New islands design, new links
Update design, inspired by IntelliJ's islands design. Rearrange some links and groups. New links: - GSAP - Get Lorem - Lorem Picsum - OKLCH Color Picker - Harmonizer
1 parent 4be3167 commit e8ec084

19 files changed

Lines changed: 281 additions & 175 deletions

‎_assets/background.af‎

6.67 MB
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
}
2222
</style>
2323
</head>
24-
<body class="bg-white dark:bg-gray-700">
24+
<body class="bg-gray-200 dark:bg-gray-800">
2525
<div id="root"></div>
2626
<script type="module" src="/src/index.tsx"></script>
2727
</body>

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webdevhome.github.io",
3-
"version": "2.6.1",
3+
"version": "2.7.0",
44
"type": "module",
55
"scripts": {
66
"dev": "vite --host 0.0.0.0",
@@ -34,7 +34,7 @@
3434
"prettier": "^3.0.3",
3535
"prettier-plugin-tailwindcss": "^0.7.2",
3636
"react-svg": "^16.1.15",
37-
"tailwindcss": "^3.0.14",
37+
"tailwindcss": "^3.4.19",
3838
"typescript": "^5.1.3",
3939
"typescript-eslint": "^8.8.1",
4040
"vite": "^7.2.6"

‎public/assets/images/background-dark.jpg‎

124 KB
Loading

‎public/assets/images/background-light.jpg‎

33.9 KB
Loading

‎public/assets/images/background.jpg‎

-78.8 KB
Binary file not shown.

‎src/components/App/App.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
EyeOffIcon,
77
FormIcon,
88
ListTodoIcon,
9+
SearchIcon,
910
SettingsIcon,
1011
WallpaperIcon,
1112
} from 'lucide-react'
@@ -62,11 +63,19 @@ export const WebdevHome: FC = () => {
6263
actions={
6364
<>
6465
{isCurrentAppMode(AppMode.default) ? (
65-
<AppAction
66-
icon={<ArrowUpToLineIcon />}
67-
label="Top"
68-
action={handleScrollTopClick}
69-
/>
66+
<>
67+
<AppAction
68+
icon={<SearchIcon />}
69+
label="Search"
70+
visible="small-screens"
71+
action={searchMode.handleSearchAction}
72+
/>
73+
<AppAction
74+
icon={<ArrowUpToLineIcon />}
75+
label="Top"
76+
action={handleScrollTopClick}
77+
/>
78+
</>
7079
) : isCurrentAppMode(AppMode.search) ? (
7180
<AppAction
7281
icon={<ArrowLeftIcon />}

‎src/components/App/AppLayout.tsx‎

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import classNames from 'classnames'
2-
import { FC, PropsWithChildren, ReactElement } from 'react'
2+
import { FC, PropsWithChildren, ReactElement, useEffect, useRef } from 'react'
3+
import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
4+
import { AppMode } from '../../stores/appMode/appModeReducer'
35
import { useToggleBackground } from './useToggleBackground'
6+
import { useToggleJumpLinks } from './useToggleJumpLinks'
47

58
type Props = {
69
header: ReactElement
@@ -12,24 +15,62 @@ export const AppLayout: FC<PropsWithChildren<Props>> = ({
1215
header,
1316
sidebar,
1417
}) => {
18+
const mainContentRef = useRef<HTMLDivElement>(null)
19+
1520
const toggleBackground = useToggleBackground()
21+
const toggleJumpLinks = useToggleJumpLinks()
22+
const isCurrentAppMode = useIsCurrentAppMode()
23+
24+
useEffect(() => {
25+
mainContentRef.current?.focus()
26+
}, [])
1627

1728
return (
1829
<div
1930
className={classNames(
20-
'fixed inset-0',
21-
'grid grid-cols-[auto,1fr] grid-rows-[auto,1fr]',
31+
'fixed inset-0 p-2',
32+
'grid grid-cols-1 grid-rows-[auto,1fr] gap-2',
33+
{
34+
'md:grid-cols-[auto,1fr]': toggleJumpLinks.showJumpLinks,
35+
'md:grid-cols-1': !toggleJumpLinks.showJumpLinks,
36+
},
2237
'overflow-hidden',
2338
{
2439
'bg-page-light bg-cover bg-center dark:bg-page-dark':
2540
toggleBackground.showBackground,
26-
'bg-white dark:bg-gray-800': !toggleBackground.showBackground,
41+
'bg-gray-200 dark:bg-gray-800': !toggleBackground.showBackground,
2742
},
2843
)}
2944
>
30-
<div className="col-span-2">{header}</div>
31-
<div className="overflow-auto">{sidebar}</div>
32-
<div className="overflow-auto" id="main-content">
45+
<div className="md:col-span-2">{header}</div>
46+
47+
<div
48+
className={classNames([
49+
'overflow-auto rounded-xl bg-white/30 dark:bg-white/5 max-md:contents',
50+
{
51+
'max-md:hidden': !toggleJumpLinks.showJumpLinksMobile,
52+
'md:hidden':
53+
!toggleJumpLinks.showJumpLinks ||
54+
isCurrentAppMode(AppMode.search),
55+
},
56+
])}
57+
>
58+
{sidebar}
59+
</div>
60+
61+
<div
62+
className={classNames([
63+
'overflow-auto rounded-xl bg-white/30 outline-none dark:bg-white/5',
64+
{
65+
'row-start-2 md:col-span-2':
66+
!toggleJumpLinks.showJumpLinks ||
67+
isCurrentAppMode(AppMode.search),
68+
},
69+
])}
70+
id="main-content"
71+
ref={mainContentRef}
72+
tabIndex={0}
73+
>
3374
{children}
3475
</div>
3576
</div>

‎src/components/Header/AppAction.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ type Props = {
55
icon: ReactElement
66
available?: boolean
77
active?: boolean
8+
visible?: 'small-screens' | 'big-screens' | 'always'
89
highlight?: boolean
910
label?: string
1011
action?: () => void
@@ -14,6 +15,7 @@ export const AppAction: FC<Props> = ({
1415
icon,
1516
available = true,
1617
active = false,
18+
visible = 'always',
1719
highlight = false,
1820
label,
1921
action = () => {},
@@ -28,7 +30,11 @@ export const AppAction: FC<Props> = ({
2830
className={classNames(
2931
'flex items-center',
3032
'p-1.5',
31-
{ 'sm:px-3': label !== undefined },
33+
{ 'lg:px-3': label !== undefined },
34+
{
35+
'max-md:hidden': visible === 'big-screens',
36+
'md:hidden': visible === 'small-screens',
37+
},
3238
'rounded-md',
3339
'select-none',
3440
{

0 commit comments

Comments
 (0)