This is my personal website
fix styles
fix styles
fix styles
fix styles
fix styles
+17
-31
-2
fresh.gen.ts
-2
fresh.gen.ts
···
7
7
import * as $api_joke from "./routes/api/joke.ts";
8
8
import * as $greet_name_ from "./routes/greet/[name].tsx";
9
9
import * as $index from "./routes/index.tsx";
10
-
import * as $Counter from "./islands/Counter.tsx";
11
10
import * as $NowPlaying from "./islands/NowPlaying.tsx";
12
11
import type { Manifest } from "$fresh/server.ts";
13
12
···
20
19
"./routes/index.tsx": $index,
21
20
},
22
21
islands: {
23
-
"./islands/Counter.tsx": $Counter,
24
22
"./islands/NowPlaying.tsx": $NowPlaying,
25
23
},
26
24
baseUrl: import.meta.url,
-16
islands/Counter.tsx
-16
islands/Counter.tsx
···
1
-
import type { Signal } from "@preact/signals";
2
-
import { Button } from "../components/Button.tsx";
3
-
4
-
interface CounterProps {
5
-
count: Signal<number>;
6
-
}
7
-
8
-
export default function Counter(props: CounterProps) {
9
-
return (
10
-
<div class="flex gap-8 py-6">
11
-
<Button onClick={() => props.count.value -= 1}>-1</Button>
12
-
<p class="text-3xl tabular-nums">{props.count}</p>
13
-
<Button onClick={() => props.count.value += 1}>+1</Button>
14
-
</div>
15
-
);
16
-
}
+17
-13
islands/NowPlaying.tsx
+17
-13
islands/NowPlaying.tsx
···
81
81
useEffect(() => {
82
82
const interval = setInterval(() => {
83
83
fetchNowPlaying();
84
-
}, 10000);
84
+
}, 15000);
85
85
fetchNowPlaying();
86
86
return () => clearInterval(interval);
87
87
}, []);
···
91
91
{song && (
92
92
<div class="flex flex-row">
93
93
{song?.albumUri && (
94
-
<a href={song.albumUri} target="_blank">
94
+
<a href={song.albumUri} target="_blank" class="mr-[20px]">
95
+
<div class="max-w-[96px] max-h-[96px]">
96
+
<img
97
+
class="w-[96px] h-[96px] rounded-[10px]"
98
+
src={song?.albumArt!}
99
+
/>
100
+
</div>
101
+
</a>
102
+
)}
103
+
{!song?.albumUri && (
104
+
<div class="max-w-[96px] max-h-[96px] mr-[20px]">
95
105
<img
96
106
class="w-[96px] h-[96px] rounded-[10px] mr-[20px]"
97
107
src={song?.albumArt!}
98
108
/>
99
-
</a>
100
-
)}
101
-
{!song?.albumUri && (
102
-
<img
103
-
class="w-[96px] h-[96px] rounded-[10px] mr-[20px]"
104
-
src={song?.albumArt!}
105
-
/>
109
+
</div>
106
110
)}
107
111
<div>
108
112
<p class="text-[16px] text-[rgb(109,109,156)]">
···
119
123
{song?.songUri && (
120
124
<a
121
125
href={song?.songUri}
122
-
class="text-[20px] line-clamp-1 overflow-hidden text-ellipsis max-w-[600px]"
126
+
class="text-[20px] line-clamp-1 overflow-hidden text-ellipsis max-w-[240px] md:max-w-[630px]"
123
127
target="_blank"
124
128
>
125
129
{song?.title}
126
130
</a>
127
131
)}
128
132
{!song?.songUri && (
129
-
<p class="text-[20px] line-clamp-1 overflow-hidden text-ellipsis max-w-[600px]">
133
+
<p class="text-[20px] line-clamp-1 overflow-hidden text-ellipsis max-w-[240px] md:max-w-[630px]">
130
134
{song?.title}
131
135
</p>
132
136
)}
···
135
139
{song?.artistUri && (
136
140
<a
137
141
href={song?.artistUri}
138
-
class="line-clamp-2 overflow-hidden text-ellipsis max-w-[600px]"
142
+
class="line-clamp-1 overflow-hidden text-ellipsis max-w-[240px] md:max-w-[630px]"
139
143
target="_blank"
140
144
>
141
145
{song?.artist}
142
146
</a>
143
147
)}
144
148
{!song?.artistUri && (
145
-
<p class="line-clamp-2 overflow-hidden text-ellipsis max-w-[600px]">
149
+
<p class="line-clamp-1 overflow-hidden text-ellipsis max-w-[240px] md:max-w-[630px]">
146
150
{song?.artist}
147
151
</p>
148
152
)}