Skip to content

Commit

Permalink
stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hugos68
Hugos68 committed Dec 31, 2024
1 parent c96489a commit 0b3b0f9
Show file tree
Hide file tree
Showing 54 changed files with 3,691 additions and 12 deletions.
13 changes: 13 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
![github-banner](https://github.com/skeletonlabs/floating-ui-svelte/assets/1509726/46b00221-9088-4986-86c8-60a480d9213f)

# Floating UI Svelte

Svelte bindings for [Floating UI](https://github.com/floating-ui/floating-ui). Based on [Floating UI React](https://floating-ui.com/docs/react).

## Attribution

Maintained by [Hugo Korte](https://github.com/Hugos68), [Skeleton Labs](https://www.skeletonlabs.co/), and the [Svelte community](https://svelte.dev/).

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
6 changes: 4 additions & 2 deletions packages/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"build": "vite build && pagefind",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
Expand All @@ -15,11 +15,13 @@
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"autoprefixer": "^10.4.20",
"pagefind": "^1.3.0",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"tailwindcss": "^3.4.9",
"typescript": "^5.0.0",
"vite": "^5.4.11"
"vite": "^5.4.11",
"vite-plugin-pagefind": "^0.3.0"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.9",
Expand Down
9 changes: 9 additions & 0 deletions packages/docs/pagefind.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"site": "build",
"exclude_selectors": [".expressive-code"],
"vite_plugin_pagefind": {
"assets_dir": "static",
"build_command": "pnpm build",
"dev_strategy": "lazy"
}
}
249 changes: 246 additions & 3 deletions packages/docs/src/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,246 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme --- */

@layer base {
:root {
/* Colors */
--color-surface-50: 255 255 255;
--color-surface-100: 243 243 247;
--color-surface-200: 220 223 236;
--color-surface-300: 176 178 195;
--color-surface-400: 191 195 217;
--color-surface-500: 87 89 105;
--color-surface-600: 45 46 58;
--color-surface-700: 39 41 53;
--color-surface-800: 31 32 40;
--color-surface-900: 24 25 31;
--color-surface-950: 18 18 21;
}
/* Gradients */
/* .light-xxx-gradient {
background-image: linear-gradient(45deg, #eff6ff, #ecfeff, #cffafe, #f0fdfa, #faf5ff);
}
.dark-xxx-gradient {
background-image: linear-gradient(
45deg,
rgba(255, 100, 255, 0.2),
rgba(100, 100, 255, 0.2),
rgba(50, 200, 255, 0.25)
);
} */
.dark-nav-gradient {
background-image: linear-gradient(
195deg,
hsl(348deg 10% 90%) 0%,
hsl(351deg 31% 80%) 2%,
hsl(325deg 45% 69%) 6%,
hsl(330deg 32% 57%) 12%,
hsl(320deg 22% 48%) 19%,
hsl(285deg 22% 33%) 27%,
hsl(240deg 20% 22%) 38%,
hsl(232deg 18% 17%) 50%,
hsl(232deg 13% 14%) 68%,
hsl(233deg 15% 14%) 100%
);
}
.light-nav-gradient {
background-image: linear-gradient(
195deg,
rgb(245, 245, 255) 0%,
rgb(245, 200, 255) 2%,
rgb(255 210 225) 6%,
rgb(255 227 225) 12%,
rgb(249, 246, 248) 19%,
rgb(240, 240, 255) 27%,
rgb(245, 245, 255) 38%,
rgb(240, 252, 253) 50%,
rgb(252, 252, 253) 68%,
rgb(255, 255, 255) 100%
);
}
}

/* Globals --- */

body {
@apply text-surface-700 dark:text-surface-300;
@apply bg-surface-200 dark:bg-surface-800;
}

/* Typography --- */

/* Headings */
.h1 {
@apply text-rose-500 font-bold text-5xl;
}
.h1 span {
@apply bg-gradient-to-br from-rose-400 to-purple-400/90 bg-clip-text text-transparent box-decoration-clone;
}
.h2 {
@apply text-black dark:text-white font-bold text-3xl;
}
.h3 {
@apply text-black dark:text-white font-bold text-xl;
}

/* Anchors */
#page-container .anchor {
@apply underline;
@apply text-rose-700 hover:text-black;
@apply dark:text-rose-300 hover:dark:text-white;
}
footer .anchor {
@apply text-blue-600 dark:text-blue-400 underline;
}

/* Highlight */
.highlight {
@apply text-black dark:text-white;
}

/* Pre & Code */
.pre {
@apply bg-black text-white p-4 rounded;
}
.code {
@apply bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
@apply text-sm text-emerald-500 dark:text-emerald-300;
}

/* Keyboard */
.kbd {
@apply text-sm bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
}

/* Unordered List */
.ul {
@apply list-disc list-outside ml-7 space-y-4;
}

/* Utility Classes */

/* Preview Examples */
.preview {
@apply bg-surface-100 dark:bg-surface-900 ring-inset p-10 flex justify-center items-center rounded-lg;
}

/* Floating (required) */
.floating {
@apply w-max absolute top-0 left-0 z-10;
}

.popover-neutral {
@apply bg-surface-500 text-white p-8 max-w-sm rounded shadow-xl;
}

/* Buttons */
.btn-gradient {
@apply flex items-center gap-2;
@apply py-3 px-6 rounded shadow-lg;
@apply bg-gradient-to-br from-red-300 via-violet-300 to-cyan-400;
@apply text-black font-bold;
}
.btn-neutral {
@apply flex items-center gap-2;
@apply py-3 px-6 rounded shadow-lg;
@apply bg-neutral-950 hover:bg-neutral-900 dark:bg-surface-50 hover:dark:bg-surface-100;
@apply text-white dark:text-black font-bold;
}
.btn-rose-sm {
@apply flex items-center gap-2;
@apply bg-rose-500 hover:bg-rose-600 text-white text-sm font-medium py-1 px-4 rounded shadow-lg;
}

/* Cards */
.card {
@apply p-8 lg:p-12 rounded-3xl;
}
.card-gradient {
@apply bg-white dark:bg-surface-700 bg-gradient-to-br;
@apply from-blue-50 to-surface-50;
@apply dark:from-purple-700/10 dark:to-cyan-700/10;
}

/* Alerts */
.alert {
@apply bg-blue-500 text-white p-8 rounded-lg space-y-4;
}

/* Tables */
.table-wrap {
@apply w-full overflow-auto;
}
.table {
@apply relative w-full;
}
.table thead {
@apply border-b border-surface-500/50;
}
.table th {
@apply text-left font-bold;
}
.table tbody {
@apply divide-y divide-surface-500/50;
}
.table th,
.table td {
@apply p-2 py-4 align-top;
}
.table .meta-type {
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
@apply text-xs text-purple-500 dark:text-purple-300;
}
.table .meta-default {
@apply inline-block bg-surface-50/50 dark:bg-surface-600 px-2 py-1 rounded;
@apply text-xs italic text-blue-500 dark:text-blue-300;
}

/* Scrollbars --- */

:root {
scrollbar-color: rgba(128, 128, 128, 0.5) rgba(0, 0, 0, 0.1); /* thumb / track */
scrollbar-width: thin;
}

/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

/* Animations --- */

.anim-float {
animation-name: animFloat;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes animFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(15px);
}
100% {
transform: translateY(0px);
}
}

/* Shiki Highlighting --- */

html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
}
99 changes: 99 additions & 0 deletions packages/docs/src/lib/components/CodeBlock/CodeBlock.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<script lang="ts">
import MoonlightDark from '$docs/themes/moonlight-dark.json';
import { page } from '$app/stores';
import type { BuiltinLanguage, SpecialLanguage } from 'shiki';
interface Props {
code: string;
lang: BuiltinLanguage | SpecialLanguage;
mark?: Array<number | [number, number]>;
}
// Props
let { code, lang = 'text', mark = [] }: Props = $props();
const highlightedLineNumbers = $derived(
mark
.map((mark) => {
if (Array.isArray(mark)) {
const [start, end] = mark;
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}
return mark;
})
.flat(),
);
// Process Language
const renderedCode = $derived(
// FIXME: https://github.com/sveltejs/eslint-plugin-svelte/issues/652
// eslint-disable-next-line svelte/valid-compile
$page.data.highlighter.codeToHtml(code.trim(), {
lang,
themes: {
// @ts-expect-error - Shiki theme type is annoyingly strict
dark: MoonlightDark,
// @ts-expect-error - Shiki theme type is annoyingly strict
light: MoonlightDark,
},
transformers: [
/**
* This transformer adds the `highlighted` class to lines that are to be highlighted.
*/
{
line(node, lineNumber) {
if (!highlightedLineNumbers.includes(lineNumber)) {
return;
}
this.addClassToHast(node, 'highlighted');
},
},
],
}),
);
// Sets the language badge color
function setLangCss() {
let color = 'bg-surface-500 text-white';
if (lang === 'html') color = 'bg-orange-700 text-white';
if (lang === 'css') color = 'bg-blue-700 text-white';
if (['ts', 'js'].includes(lang)) color = 'bg-yellow-400 text-black';
if (lang === 'svelte') color = 'bg-orange-700 text-white';
return color;
}
</script>

<!-- eslint-disable svelte/no-at-html-tags -->
<figure class="relative rounded-md overflow-hidden">
<!-- Language -->
<span
class="absolute top-0 right-0 text-[10px] leading-none font-bold px-1 py-0.5 rounded-bl shadow {setLangCss()}"
>
{lang}
</span>
<!-- Rendered Code -->
<div class="codeblock">{@html renderedCode}</div>
</figure>

<!-- eslint-enable svelte/no-at-html-tags -->

<style lang="postcss">
.codeblock :global {
.shiki {
@apply py-6 text-sm rounded-md whitespace-pre-wrap;
}
.line {
/**
* Horizontal padding is added per line instead of the container
* so that highlights extend fully to the end of the codeblock
*/
@apply px-6 inline-block w-full;
}
.highlighted {
@apply !bg-surface-500/25;
}
.highlighted > span {
@apply !bg-transparent;
}
}
</style>
Loading

0 comments on commit 0b3b0f9

Please sign in to comment.