Skip to content

Commit 0c17627

Browse files
guidefariguidefari
committed
chore: opensound workspace
1 parent d8f7e64 commit 0c17627

9 files changed

Lines changed: 232 additions & 24 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# spotify-effect
1+
# opensound
22

3-
A TypeScript SDK for the Spotify Web API built with [Effect](https://effect.website/) — a functional, type-safe approach to handling async operations, errors, and observability.
3+
A monorepo for open source music tooling, with the Spotify Web API SDK as one product in the `spotify-effect` family.
44

55
## What is this?
66

‎bun.lock‎

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

‎examples/browser/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ SPOTIFY_EFFECT_TRACE=1 OTEL_EXPORTER_OTLP_ENDPOINT=http://127.0.0.1:14318 bun ru
3434
Then open the printed local URL.
3535

3636
If you want to verify Jaeger wiring before touching Spotify auth, click `Ping traced server` in the UI.
37-
That should emit a trace for the `spotify-effect-example-browser` service immediately.
37+
That should emit a trace for the `opensound-example-browser` service immediately.
3838

3939
For background on PKCE and Spotify's browser-safe auth flow, see `docs/auth/pkce.md`.
4040
For tracing and collector notes, see `docs/tracing/otel.md`.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "spotify-effect-monorepo",
2+
"name": "opensound",
33
"private": true,
44
"workspaces": [
55
"packages/*",

‎packages/docs/astro.config.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,13 @@ export default defineConfig({
1111
description: "Effect-native Spotify Web API client",
1212
disable404Route: true,
1313
head: [],
14+
customCss: ["./src/styles/theme.css"],
1415
social: {
1516
github: "https://github.com/guidefari/spotify-effect",
1617
},
18+
components: {
19+
SiteTitle: "./src/components/SiteTitle.astro",
20+
},
1721
plugins: [
1822
starlightTypeDoc({
1923
entryPoints: [

‎packages/docs/src/components/SiteTitle.astro‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
import config from "virtual:starlight/user-config";
3+
4+
const title =
5+
typeof config.title === "string" ? config.title : (Object.values(config.title)[0] ?? "");
6+
7+
const opensoundUrl = import.meta.env.DEV ? "http://localhost:4177" : "https://opensound.dev";
8+
---
9+
10+
<a href="/" class="site-title sl-flex">
11+
<span class="title">{title}</span>
12+
</a>
13+
<a href={opensoundUrl} class="back-link" rel="noopener">
14+
<span class="arrow">←</span>
15+
<span>opensound</span>
16+
</a>
17+
18+
<style>
19+
.site-title {
20+
align-items: center;
21+
gap: 0.5rem;
22+
color: var(--sl-color-text-accent);
23+
text-decoration: none;
24+
font-weight: 600;
25+
}
26+
.back-link {
27+
display: inline-flex;
28+
align-items: center;
29+
gap: 0.35rem;
30+
margin-left: 1rem;
31+
padding: 0.25rem 0.6rem;
32+
border: 2px solid var(--sl-color-accent);
33+
color: var(--sl-color-accent);
34+
font-size: 0.75rem;
35+
text-transform: lowercase;
36+
text-decoration: none;
37+
transition: transform 0.15s;
38+
}
39+
.back-link:hover {
40+
transform: translate(-2px, -2px);
41+
box-shadow: var(--sl-shadow-sm);
42+
}
43+
.arrow {
44+
font-family: var(--sl-font-mono);
45+
}
46+
@media (prefers-reduced-motion: reduce) {
47+
.back-link:hover {
48+
transform: none;
49+
}
50+
}
51+
</style>

‎packages/docs/src/styles/theme.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
:root,
2+
[data-theme="dark"] {
3+
--sl-font:
4+
"IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Menlo", "Monaco",
5+
"Consolas", monospace;
6+
--sl-font-mono:
7+
"IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Menlo", "Monaco",
8+
"Consolas", monospace;
9+
10+
--sl-color-white: #f2cc8f;
11+
--sl-color-gray-1: #efe0bb;
12+
--sl-color-gray-2: #d9c39a;
13+
--sl-color-gray-3: #b7a37f;
14+
--sl-color-gray-4: #6e6a5e;
15+
--sl-color-gray-5: #4d506c;
16+
--sl-color-gray-6: #353852;
17+
--sl-color-black: #3d405b;
18+
19+
--sl-color-accent-low: #4d506c;
20+
--sl-color-accent: #89bbfe;
21+
--sl-color-accent-high: #b8d6ff;
22+
23+
--sl-color-text: var(--sl-color-gray-2);
24+
--sl-color-text-accent: var(--sl-color-accent);
25+
--sl-color-text-invert: var(--sl-color-black);
26+
--sl-color-bg: var(--sl-color-black);
27+
--sl-color-bg-nav: var(--sl-color-gray-6);
28+
--sl-color-bg-sidebar: var(--sl-color-gray-6);
29+
--sl-color-bg-inline-code: var(--sl-color-gray-5);
30+
--sl-color-bg-accent: var(--sl-color-accent);
31+
--sl-color-hairline-light: color-mix(in srgb, var(--sl-color-white) 10%, transparent);
32+
--sl-color-hairline: color-mix(in srgb, var(--sl-color-white) 14%, transparent);
33+
--sl-color-hairline-shade: rgba(0, 0, 0, 0.45);
34+
35+
--sl-shadow-sm: 4px 4px 0 0 rgba(137, 187, 254, 0.18);
36+
--sl-shadow-md: 4px 4px 0 0 rgba(137, 187, 254, 0.22);
37+
--sl-shadow-lg: 8px 8px 0 0 rgba(137, 187, 254, 0.18);
38+
39+
--sl-line-height: 1.75;
40+
--sl-line-height-headings: 1.05;
41+
}
42+
43+
:root[data-theme="light"],
44+
[data-theme="light"] {
45+
--sl-font:
46+
"IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Menlo", "Monaco",
47+
"Consolas", monospace;
48+
--sl-font-mono:
49+
"IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Menlo", "Monaco",
50+
"Consolas", monospace;
51+
52+
--sl-color-white: #2f3147;
53+
--sl-color-gray-1: #3d405b;
54+
--sl-color-gray-2: #4d506c;
55+
--sl-color-gray-3: #6e6f84;
56+
--sl-color-gray-4: #9c97a7;
57+
--sl-color-gray-5: #d9c39a;
58+
--sl-color-gray-6: #efe0bb;
59+
--sl-color-gray-7: #f7ecd4;
60+
--sl-color-black: #f2cc8f;
61+
62+
--sl-color-accent-high: #3d405b;
63+
--sl-color-accent: #89bbfe;
64+
--sl-color-accent-low: #dbeaff;
65+
66+
--sl-color-text: var(--sl-color-gray-1);
67+
--sl-color-text-accent: var(--sl-color-accent-high);
68+
--sl-color-text-invert: var(--sl-color-black);
69+
--sl-color-bg: var(--sl-color-black);
70+
--sl-color-bg-nav: var(--sl-color-gray-7);
71+
--sl-color-bg-sidebar: var(--sl-color-gray-7);
72+
--sl-color-bg-inline-code: var(--sl-color-gray-6);
73+
--sl-color-bg-accent: var(--sl-color-accent);
74+
--sl-color-hairline-light: color-mix(in srgb, var(--sl-color-gray-1) 10%, transparent);
75+
--sl-color-hairline: color-mix(in srgb, var(--sl-color-gray-1) 14%, transparent);
76+
--sl-color-hairline-shade: rgba(61, 64, 91, 0.12);
77+
78+
--sl-shadow-sm: 4px 4px 0 0 rgba(61, 64, 91, 0.08);
79+
--sl-shadow-md: 4px 4px 0 0 rgba(61, 64, 91, 0.12);
80+
--sl-shadow-lg: 8px 8px 0 0 rgba(61, 64, 91, 0.08);
81+
}
82+
83+
:root {
84+
--sl-text-h1: clamp(2.75rem, 7vw, 4.5rem);
85+
--sl-text-h2: clamp(1.75rem, 4vw, 2.5rem);
86+
--sl-text-h3: 1.5rem;
87+
--sl-nav-height: 4rem;
88+
}
89+
90+
html {
91+
letter-spacing: -0.01em;
92+
}
93+
94+
body {
95+
background: var(--sl-color-bg);
96+
}
97+
98+
.card,
99+
.sl-link-button,
100+
.expressive-code,
101+
starlight-tabs,
102+
.tablist-wrapper {
103+
border-radius: 0;
104+
}
105+
106+
.card {
107+
background: color-mix(in srgb, var(--sl-color-bg) 88%, var(--sl-color-accent) 12%);
108+
}
109+
110+
.sl-link-button {
111+
border-width: 2px;
112+
text-transform: lowercase;
113+
box-shadow: var(--sl-shadow-md);
114+
}
115+
116+
.sl-link-button:hover {
117+
transform: translate(-2px, -2px);
118+
}
119+
120+
.hero .tagline {
121+
max-width: 52rem;
122+
}
123+
124+
.site-title {
125+
letter-spacing: 0.04em;
126+
text-transform: lowercase;
127+
}
128+
129+
.pagination-links a,
130+
.sidebar a,
131+
.right-sidebar a {
132+
border-radius: 0;
133+
}
134+
135+
@media (prefers-reduced-motion: reduce) {
136+
.sl-link-button:hover {
137+
transform: none;
138+
}
139+
}

‎packages/frontpage/src/routes/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
href={links.product}>open spotify-effect →</a
4949
>
5050
<span
51-
class="border-sky/40 text-sky/60 inline-block cursor-not-allowed border-2 border-dashed px-5 py-3 text-sm lowercase select-none"
51+
class="border-sand/50 text-sand/70 inline-block cursor-not-allowed border-2 border-dashed px-5 py-3 text-sm lowercase select-none"
5252
aria-disabled="true">tidal-effect — brewing</span
5353
>
5454
</div>

‎packages/frontpage/src/routes/layout.css‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
@theme {
44
--font-mono:
5-
"IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Menlo",
6-
"Monaco", "Consolas", monospace;
5+
"IBM Plex Mono", "SFMono-Regular", "SF Mono", "JetBrains Mono", "Fira Code", "Menlo", "Monaco",
6+
"Consolas", monospace;
77
--color-obsidian: #3d405b;
88
--color-sand: #f2cc8f;
99
--color-sky: #89bbfe;
@@ -13,8 +13,22 @@
1313
--shadow-sand-offset: 4px 4px 0 0 #f2cc8f;
1414
--animate-blink: blink 1.1s steps(1) infinite;
1515
@keyframes blink {
16-
0%, 50% { opacity: 1; }
17-
50.01%, 100% { opacity: 0.3; }
16+
0%,
17+
50% {
18+
opacity: 1;
19+
}
20+
50.01%,
21+
100% {
22+
opacity: 0.3;
23+
}
24+
}
25+
}
26+
27+
@media (prefers-color-scheme: light) {
28+
:root {
29+
--color-obsidian: #f2cc8f;
30+
--color-sand: #3d405b;
31+
--shadow-sand-offset: 4px 4px 0 0 #3d405b;
1832
}
1933
}
2034

0 commit comments

Comments
 (0)