Skip to content

Commit 0b3b0f9

Browse files
Hugos68Hugos68
committed
stuff
1 parent c96489a commit 0b3b0f9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+3691
-12
lines changed

‎README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
![github-banner](https://github.com/skeletonlabs/floating-ui-svelte/assets/1509726/46b00221-9088-4986-86c8-60a480d9213f)
2+
3+
# Floating UI Svelte
4+
5+
Svelte bindings for [Floating UI](https://github.com/floating-ui/floating-ui). Based on [Floating UI React](https://floating-ui.com/docs/react).
6+
7+
## Attribution
8+
9+
Maintained by [Hugo Korte](https://github.com/Hugos68), [Skeleton Labs](https://www.skeletonlabs.co/), and the [Svelte community](https://svelte.dev/).
10+
11+
## License
12+
13+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

‎packages/docs/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite dev",
8-
"build": "vite build",
8+
"build": "vite build && pagefind",
99
"preview": "vite preview",
1010
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1111
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
@@ -15,11 +15,13 @@
1515
"@sveltejs/kit": "^2.0.0",
1616
"@sveltejs/vite-plugin-svelte": "^4.0.0",
1717
"autoprefixer": "^10.4.20",
18+
"pagefind": "^1.3.0",
1819
"svelte": "^5.0.0",
1920
"svelte-check": "^4.0.0",
2021
"tailwindcss": "^3.4.9",
2122
"typescript": "^5.0.0",
22-
"vite": "^5.4.11"
23+
"vite": "^5.4.11",
24+
"vite-plugin-pagefind": "^0.3.0"
2325
},
2426
"dependencies": {
2527
"@tailwindcss/forms": "^0.5.9",

‎packages/docs/pagefind.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"site": "build",
3+
"exclude_selectors": [".expressive-code"],
4+
"vite_plugin_pagefind": {
5+
"assets_dir": "static",
6+
"build_command": "pnpm build",
7+
"dev_strategy": "lazy"
8+
}
9+
}

‎packages/docs/src/app.css

Lines changed: 246 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,246 @@
1-
@import "tailwindcss/base";
2-
@import "tailwindcss/components";
3-
@import "tailwindcss/utilities";
1+
/* Write your global styles here, in PostCSS syntax */
2+
@tailwind base;
3+
@tailwind components;
4+
@tailwind utilities;
5+
6+
/* Theme --- */
7+
8+
@layer base {
9+
:root {
10+
/* Colors */
11+
--color-surface-50: 255 255 255;
12+
--color-surface-100: 243 243 247;
13+
--color-surface-200: 220 223 236;
14+
--color-surface-300: 176 178 195;
15+
--color-surface-400: 191 195 217;
16+
--color-surface-500: 87 89 105;
17+
--color-surface-600: 45 46 58;
18+
--color-surface-700: 39 41 53;
19+
--color-surface-800: 31 32 40;
20+
--color-surface-900: 24 25 31;
21+
--color-surface-950: 18 18 21;
22+
}
23+
/* Gradients */
24+
/* .light-xxx-gradient {
25+
background-image: linear-gradient(45deg, #eff6ff, #ecfeff, #cffafe, #f0fdfa, #faf5ff);
26+
}
27+
.dark-xxx-gradient {
28+
background-image: linear-gradient(
29+
45deg,
30+
rgba(255, 100, 255, 0.2),
31+
rgba(100, 100, 255, 0.2),
32+
rgba(50, 200, 255, 0.25)
33+
);
34+
} */
35+
.dark-nav-gradient {
36+
background-image: linear-gradient(
37+
195deg,
38+
hsl(348deg 10% 90%) 0%,
39+
hsl(351deg 31% 80%) 2%,
40+
hsl(325deg 45% 69%) 6%,
41+
hsl(330deg 32% 57%) 12%,
42+
hsl(320deg 22% 48%) 19%,
43+
hsl(285deg 22% 33%) 27%,
44+
hsl(240deg 20% 22%) 38%,
45+
hsl(232deg 18% 17%) 50%,
46+
hsl(232deg 13% 14%) 68%,
47+
hsl(233deg 15% 14%) 100%
48+
);
49+
}
50+
.light-nav-gradient {
51+
background-image: linear-gradient(
52+
195deg,
53+
rgb(245, 245, 255) 0%,
54+
rgb(245, 200, 255) 2%,
55+
rgb(255 210 225) 6%,
56+
rgb(255 227 225) 12%,
57+
rgb(249, 246, 248) 19%,
58+
rgb(240, 240, 255) 27%,
59+
rgb(245, 245, 255) 38%,
60+
rgb(240, 252, 253) 50%,
61+
rgb(252, 252, 253) 68%,
62+
rgb(255, 255, 255) 100%
63+
);
64+
}
65+
}
66+
67+
/* Globals --- */
68+
69+
body {
70+
@apply text-surface-700 dark:text-surface-300;
71+
@apply bg-surface-200 dark:bg-surface-800;
72+
}
73+
74+
/* Typography --- */
75+
76+
/* Headings */
77+
.h1 {
78+
@apply text-rose-500 font-bold text-5xl;
79+
}
80+
.h1 span {
81+
@apply bg-gradient-to-br from-rose-400 to-purple-400/90 bg-clip-text text-transparent box-decoration-clone;
82+
}
83+
.h2 {
84+
@apply text-black dark:text-white font-bold text-3xl;
85+
}
86+
.h3 {
87+
@apply text-black dark:text-white font-bold text-xl;
88+
}
89+
90+
/* Anchors */
91+
#page-container .anchor {
92+
@apply underline;
93+
@apply text-rose-700 hover:text-black;
94+
@apply dark:text-rose-300 hover:dark:text-white;
95+
}
96+
footer .anchor {
97+
@apply text-blue-600 dark:text-blue-400 underline;
98+
}
99+
100+
/* Highlight */
101+
.highlight {
102+
@apply text-black dark:text-white;
103+
}
104+
105+
/* Pre & Code */
106+
.pre {
107+
@apply bg-black text-white p-4 rounded;
108+
}
109+
.code {
110+
@apply bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
111+
@apply text-sm text-emerald-500 dark:text-emerald-300;
112+
}
113+
114+
/* Keyboard */
115+
.kbd {
116+
@apply text-sm bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
117+
}
118+
119+
/* Unordered List */
120+
.ul {
121+
@apply list-disc list-outside ml-7 space-y-4;
122+
}
123+
124+
/* Utility Classes */
125+
126+
/* Preview Examples */
127+
.preview {
128+
@apply bg-surface-100 dark:bg-surface-900 ring-inset p-10 flex justify-center items-center rounded-lg;
129+
}
130+
131+
/* Floating (required) */
132+
.floating {
133+
@apply w-max absolute top-0 left-0 z-10;
134+
}
135+
136+
.popover-neutral {
137+
@apply bg-surface-500 text-white p-8 max-w-sm rounded shadow-xl;
138+
}
139+
140+
/* Buttons */
141+
.btn-gradient {
142+
@apply flex items-center gap-2;
143+
@apply py-3 px-6 rounded shadow-lg;
144+
@apply bg-gradient-to-br from-red-300 via-violet-300 to-cyan-400;
145+
@apply text-black font-bold;
146+
}
147+
.btn-neutral {
148+
@apply flex items-center gap-2;
149+
@apply py-3 px-6 rounded shadow-lg;
150+
@apply bg-neutral-950 hover:bg-neutral-900 dark:bg-surface-50 hover:dark:bg-surface-100;
151+
@apply text-white dark:text-black font-bold;
152+
}
153+
.btn-rose-sm {
154+
@apply flex items-center gap-2;
155+
@apply bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium py-1 px-4 rounded shadow-lg;
156+
}
157+
158+
/* Cards */
159+
.card {
160+
@apply p-8 lg:p-12 rounded-3xl;
161+
}
162+
.card-gradient {
163+
@apply bg-white dark:bg-surface-700 bg-gradient-to-br;
164+
@apply from-blue-50 to-surface-50;
165+
@apply dark:from-purple-700/10 dark:to-cyan-700/10;
166+
}
167+
168+
/* Alerts */
169+
.alert {
170+
@apply bg-blue-500 text-white p-8 rounded-lg space-y-4;
171+
}
172+
173+
/* Tables */
174+
.table-wrap {
175+
@apply w-full overflow-auto;
176+
}
177+
.table {
178+
@apply relative w-full;
179+
}
180+
.table thead {
181+
@apply border-b border-surface-500/50;
182+
}
183+
.table th {
184+
@apply text-left font-bold;
185+
}
186+
.table tbody {
187+
@apply divide-y divide-surface-500/50;
188+
}
189+
.table th,
190+
.table td {
191+
@apply p-2 py-4 align-top;
192+
}
193+
.table .meta-type {
194+
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
195+
@apply text-xs text-purple-500 dark:text-purple-300;
196+
}
197+
.table .meta-default {
198+
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
199+
@apply text-xs italic text-blue-500 dark:text-blue-300;
200+
}
201+
202+
/* Scrollbars --- */
203+
204+
:root {
205+
scrollbar-color: rgba(128, 128, 128, 0.5) rgba(0, 0, 0, 0.1); /* thumb / track */
206+
scrollbar-width: thin;
207+
}
208+
209+
/* Chrome, Safari and Opera */
210+
.no-scrollbar::-webkit-scrollbar {
211+
display: none;
212+
}
213+
/* IE, Edge and Firefox */
214+
.no-scrollbar {
215+
-ms-overflow-style: none;
216+
scrollbar-width: none;
217+
}
218+
219+
/* Animations --- */
220+
221+
.anim-float {
222+
animation-name: animFloat;
223+
animation-duration: 5s;
224+
animation-iteration-count: infinite;
225+
animation-timing-function: ease-in-out;
226+
}
227+
228+
@keyframes animFloat {
229+
0% {
230+
transform: translateY(0px);
231+
}
232+
50% {
233+
transform: translateY(15px);
234+
}
235+
100% {
236+
transform: translateY(0px);
237+
}
238+
}
239+
240+
/* Shiki Highlighting --- */
241+
242+
html.dark .shiki,
243+
html.dark .shiki span {
244+
color: var(--shiki-dark) !important;
245+
background-color: var(--shiki-dark-bg) !important;
246+
}

‎packages/docs/src/lib/components/CodeBlock/CodeBlock.svelte

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<script lang="ts">
2+
import MoonlightDark from '$docs/themes/moonlight-dark.json';
3+
import { page } from '$app/stores';
4+
import type { BuiltinLanguage, SpecialLanguage } from 'shiki';
5+
6+
interface Props {
7+
code: string;
8+
lang: BuiltinLanguage | SpecialLanguage;
9+
mark?: Array<number | [number, number]>;
10+
}
11+
12+
// Props
13+
let { code, lang = 'text', mark = [] }: Props = $props();
14+
15+
const highlightedLineNumbers = $derived(
16+
mark
17+
.map((mark) => {
18+
if (Array.isArray(mark)) {
19+
const [start, end] = mark;
20+
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
21+
}
22+
return mark;
23+
})
24+
.flat(),
25+
);
26+
27+
// Process Language
28+
const renderedCode = $derived(
29+
// FIXME: https://github.com/sveltejs/eslint-plugin-svelte/issues/652
30+
// eslint-disable-next-line svelte/valid-compile
31+
$page.data.highlighter.codeToHtml(code.trim(), {
32+
lang,
33+
themes: {
34+
// @ts-expect-error - Shiki theme type is annoyingly strict
35+
dark: MoonlightDark,
36+
// @ts-expect-error - Shiki theme type is annoyingly strict
37+
light: MoonlightDark,
38+
},
39+
transformers: [
40+
/**
41+
* This transformer adds the `highlighted` class to lines that are to be highlighted.
42+
*/
43+
{
44+
line(node, lineNumber) {
45+
if (!highlightedLineNumbers.includes(lineNumber)) {
46+
return;
47+
}
48+
this.addClassToHast(node, 'highlighted');
49+
},
50+
},
51+
],
52+
}),
53+
);
54+
55+
// Sets the language badge color
56+
function setLangCss() {
57+
let color = 'bg-surface-500 text-white';
58+
if (lang === 'html') color = 'bg-orange-700 text-white';
59+
if (lang === 'css') color = 'bg-blue-700 text-white';
60+
if (['ts', 'js'].includes(lang)) color = 'bg-yellow-400 text-black';
61+
if (lang === 'svelte') color = 'bg-orange-700 text-white';
62+
return color;
63+
}
64+
</script>
65+
66+
<!-- eslint-disable svelte/no-at-html-tags -->
67+
<figure class="relative rounded-md overflow-hidden">
68+
<!-- Language -->
69+
<span
70+
class="absolute top-0 right-0 text-[10px] leading-none font-bold px-1 py-0.5 rounded-bl shadow {setLangCss()}"
71+
>
72+
{lang}
73+
</span>
74+
<!-- Rendered Code -->
75+
<div class="codeblock">{@html renderedCode}</div>
76+
</figure>
77+
78+
<!-- eslint-enable svelte/no-at-html-tags -->
79+
80+
<style lang="postcss">
81+
.codeblock :global {
82+
.shiki {
83+
@apply py-6 text-sm rounded-md whitespace-pre-wrap;
84+
}
85+
.line {
86+
/**
87+
* Horizontal padding is added per line instead of the container
88+
* so that highlights extend fully to the end of the codeblock
89+
*/
90+
@apply px-6 inline-block w-full;
91+
}
92+
.highlighted {
93+
@apply !bg-surface-500/25;
94+
}
95+
.highlighted > span {
96+
@apply !bg-transparent;
97+
}
98+
}
99+
</style>

0 commit comments

Comments
 (0)