+
diff --git a/app/components/shared/Tooltip.vue b/app/components/shared/Tooltip.vue
index 6043deb62765d8c3fb54be88c8107d0c560eaef8..8e787b93c05b29df185041c67b64e6d54daa5b73 100644
--- a/app/components/shared/Tooltip.vue
+++ b/app/components/shared/Tooltip.vue
@@ -15,14 +15,14 @@ defineProps<{
-
-
+
+
diff --git a/app/components/shared/icon/IconPicker.vue b/app/components/shared/icon/IconPicker.vue
index c158c825f1002777ec654bfa3bcfc2bbad4b61c9..77d9f040031efbd7df12b4008f9da0a0817ecd3d 100644
--- a/app/components/shared/icon/IconPicker.vue
+++ b/app/components/shared/icon/IconPicker.vue
@@ -857,7 +857,7 @@ onUnmounted(() => {
/>
();
const formatted = ref();
+const hasLanguage = ref(false);
function transformerLineNumbers(): ShikiTransformer {
return {
@@ -108,29 +110,36 @@ function transformerAnnotations(
};
}
-const hasLanguage = ref(false);
-
watch(
- [() => props.block.language, shiki],
+ [() => props.block.language, shiki, isReady],
async () => {
- if (!shiki.value) return;
- hasLanguage.value = shiki.value
- .getLoadedLanguages()
- .includes(props.block.language);
- if (!hasLanguage.value) {
- await shiki.value?.loadLanguage(bundledLanguages[props.block.language]);
+ if (!shiki.value || !isReady.value) return;
+ hasLanguage.value = false;
+
+ try {
+ if (!isLanguageLoaded(props.block.language)) {
+ await loadLanguage(props.block.language);
+ }
hasLanguage.value = true;
+ } catch (err) {
+ console.error("Failed to load language:", err);
+ hasLanguage.value = false;
}
},
{ immediate: true },
);
+const isLoading = computed(() => {
+ return !isReady.value || isLanguageLoading(props.block.language);
+});
+
const shikiContent = computed(() => {
if (
!shiki.value ||
!props.block ||
props.block.type !== BlockType.Code ||
- !hasLanguage.value
+ !hasLanguage.value ||
+ isLoading.value
)
return "";
const classNames = ["shiki"];
@@ -157,7 +166,6 @@ const shikiContent = computed(() => {
},
[] as { line: number; classes: string[] }[],
);
-
const hast = shiki.value?.codeToHast(props.block.content, {
lang: props.block.language,
theme: store.value.useCustomTheme
@@ -360,18 +368,7 @@ const innerPaddingX = computed(() => `${store.value.innerPaddingX}px`);
-
Select icon
diff --git a/app/components/ui/editor/Editor.client.vue b/app/components/ui/editor/Editor.client.vue
index c341a78581ddd807b486f85c51b46d3f077a03c5..6244e1bcaa6dc870d247ba3d28ea6ab21f12fa05 100644
--- a/app/components/ui/editor/Editor.client.vue
+++ b/app/components/ui/editor/Editor.client.vue
@@ -19,9 +19,11 @@ const props = defineProps<{
block: CodeBlock;
}>();
-const shiki = useShiki();
+const { shiki, loadLanguage, isLanguageLoaded, isLanguageLoading, isReady } =
+ useShiki();
const editor = ref
-
+
`${store.value.innerPaddingX}px`);
text-size-adjust: none;
caret-color: white;
outline: none;
+ white-space: pre-wrap;
}
.formatted {
@@ -517,6 +515,10 @@ const innerPaddingX = computed(() => `${store.value.innerPaddingX}px`);
cursor: pointer;
}
+.is-light-theme .formatted .line:hover {
+ background: hsla(200, 0%, 85%, 0.4);
+}
+
.formatted .line-number {
float: left;
margin-left: calc(v-bind(gutter) * -1 - 4px);
@@ -538,6 +540,10 @@ const innerPaddingX = computed(() => `${store.value.innerPaddingX}px`);
color: rgba(255, 255, 255, 0.25);
}
+.is-light-theme .formatted .line-number {
+ color: rgba(0, 0, 0, 0.35);
+}
+
.formatted .line span {
white-space: pre-wrap;
}
@@ -546,32 +552,62 @@ const innerPaddingX = computed(() => `${store.value.innerPaddingX}px`);
background: rgba(255, 255, 255, var(--highlight-opacity, 0.1));
}
+.is-light-theme .formatted .highlight {
+ background: hsla(200, 65%, 85%, var(--highlight-opacity, 0.7));
+}
+
.formatted .highlight .line-number,
.formatted .add .line-number,
.formatted .remove .line-number {
color: rgba(255, 255, 255, 0.6);
}
+.is-light-theme .formatted .highlight .line-number,
+.is-light-theme .formatted .add .line-number,
+.is-light-theme .formatted .remove .line-number {
+ color: rgba(0, 0, 0, 0.75);
+}
+
.formatted .highlight .line-number {
background: rgba(255, 255, 255, 0.1);
}
+.is-light-theme .formatted .highlight .line-number {
+ background: hsla(200, 70%, 45%, 0.15);
+}
+
.formatted .line.add {
background: rgba(0, 255, 0, var(--highlight-opacity, 0.15));
}
+.is-light-theme .formatted .line.add {
+ background: hsla(120, 70%, 45%, 0.2);
+}
+
.formatted .add .line-number {
background: rgba(0, 255, 0, var(--highlight-opacity, 0.1));
}
+.is-light-theme .formatted .add .line-number {
+ background: hsla(120, 70%, 45%, 0.15);
+}
+
.formatted .line.remove {
background: rgba(255, 0, 0, var(--highlight-opacity, 0.15));
}
+.is-light-theme .formatted .line.remove {
+ background: hsla(0, 70%, 45%, 0.2);
+}
+
.formatted .remove .line-number {
background: rgba(255, 0, 0, var(--highlight-opacity, 0.1));
}
+.is-light-theme .formatted .remove .line-number {
+ background: hsla(0, 70%, 45%, 0.15);
+}
+
.annotation {
margin-left: v-bind(gutter);
position: relative;
diff --git a/app/components/ui/frame/FrameBackground.vue b/app/components/ui/frame/FrameBackground.vue
index b95cf7cd65cac5b6bae6974a9a2746bb5695970e..bbc3d648ca3d6f39d0385dfd390d491dfe4ba87d 100644
--- a/app/components/ui/frame/FrameBackground.vue
+++ b/app/components/ui/frame/FrameBackground.vue
@@ -37,6 +37,7 @@ const backdrop = computed(() => Backdrops[store.value.backdrop]);
mixBlendMode: SHADOW_OVERLAY_MAPPING[store.shadowOverlay]?.blendMode,
}"
/>
+
+
![]()
-
+
{
shiki.value = await createHighlighterCore({
engine: createOnigurumaEngine(import("shiki/wasm")),
themes: [
- ...chalkistThemes,
+ ...chalkistLightThemes,
+ ...chalkistDarkThemes,
...portedThemes,
...shikiThemes.map((theme) => theme.import),
+ ...lightShikiThemes.map((theme) => theme.import),
],
langs: [bundledLanguages["javascript"]],
});
@@ -49,11 +57,7 @@ const createNewPreset = async () => {
{{ store.name }}
diff --git a/app/components/ui/sidebar/ColorThemeSettings.vue b/app/components/ui/sidebar/ColorThemeSettings.vue
index efcaa55705dae9124b35127d08fa8f43b2482ce1..0f8d2cd742b0056fdada4f34b71c86e6897a42d7 100644
--- a/app/components/ui/sidebar/ColorThemeSettings.vue
+++ b/app/components/ui/sidebar/ColorThemeSettings.vue
@@ -11,16 +11,32 @@ import {
} from "radix-vue";
import {
shikiThemes,
- chalkistThemes,
+ chalkistDarkThemes,
portedThemes,
allThemes,
getThemeColors,
themeLabels,
+ chalkistLightThemes,
+ lightShikiThemes,
} from "~/lib/themes";
import { persistentState } from "~/lib/persistent-state";
+import { copyTextToClipboard } from "~/lib/export";
+import { useMagicKeys } from "@vueuse/core";
+
+const { cmd } = useMagicKeys();
+
+function handleCustomThemeEditToggle(event: MouseEvent) {
+ if (cmd.value) {
+ copyTextToClipboard(JSON.stringify(store.value.customTheme));
+ } else {
+ persistentState.value.expandCustomThemeOptions =
+ !persistentState.value.expandCustomThemeOptions;
+ }
+}
const featuredThemes = allThemes.filter((item) =>
[
+ "Bluesky",
"CodeSandbox",
"Duotone - Dark Sea",
"Liveblocks",
@@ -43,11 +59,29 @@ const themeOptions = computed(() => [
.sort((a, b) => a.label.localeCompare(b.label)),
},
{
- group: "Other",
+ group: "Light",
+ children: [
+ ...chalkistLightThemes.map((item) => ({
+ value: item.id,
+ label: item.displayName,
+ showEdit: true,
+ })),
+ ...lightShikiThemes.map((item) => ({
+ value: item.id,
+ label: item.displayName,
+ })),
+ ]
+ .filter(
+ (item) => !featuredThemes.find((theme) => theme.id === item.value),
+ )
+ .sort((a, b) => a.label.localeCompare(b.label)),
+ },
+ {
+ group: "Dark",
children: shikiThemes
.map((item) => ({ value: item.id, label: item.displayName }))
.concat(
- ...chalkistThemes.map((item) => ({
+ ...chalkistDarkThemes.map((item) => ({
value: item.id,
label: item.displayName,
showEdit: true,
@@ -119,16 +153,14 @@ const themeOptions = computed(() => [
>
-
-
+
+
+
+
@@ -55,6 +83,64 @@ import { store } from "~/lib/store";
/>
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/app/components/ui/window/Window.vue b/app/components/ui/window/Window.vue
index 5d6b0723424d94c64437b538bb1dc620580d6173..5a6847cfabde3bfd7cea81b9b37a451981634b2e 100644
--- a/app/components/ui/window/Window.vue
+++ b/app/components/ui/window/Window.vue
@@ -1,19 +1,135 @@
@@ -21,65 +137,9 @@ const enableAppStyle = computed(() => {
@@ -57,8 +57,8 @@ defineProps<{
v-for="_i in [1, 2, 3]"
class="h-3 w-3 rounded-full border"
:class="{
- 'border-white/25': block.mode === 'edit',
- 'border-black/25': block.mode === 'preview',
+ 'light:border-black/25 border-white/25': block.mode === 'edit',
+ 'light:border-black/25 border-black/25': block.mode === 'preview',
}"
/>
@@ -69,7 +69,7 @@ defineProps<{
diff --git a/app/lib/backdrops.ts b/app/lib/backdrops.ts
index 5c8d4021178f1f72e3617e9f0f882dc4b8bed2c1..5cc4ff0c99532b0fa07526c21b80c350b6cbaed4 100644
--- a/app/lib/backdrops.ts
+++ b/app/lib/backdrops.ts
@@ -1,18 +1,16 @@
// import { generateRandomBackdrop } from "./colors";
+import { svgToFilterUrl } from "./svg";
+
export interface Backdrop {
[key: string]: {
backgroundStyle: {
background: string;
filter?: string;
transform?: string;
- };
- appStyle?: {
- backgroundColor: string;
+ inset?: string;
};
shadow?: string;
- shadowsOpacity?: number;
- lightsOpacity?: number;
};
}
@@ -28,11 +26,6 @@ export const Backdrops: Backdrop = {
background: `var(--solid-background)`,
},
shadow: "hsl(0, 0%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
- appStyle: {
- backgroundColor: "hsla(0, 0%, 6%, 0.85)",
- },
},
Monochrome_1: {
@@ -50,11 +43,6 @@ export const Backdrops: Backdrop = {
transform: `scale(1.385)`,
},
shadow: "hsl(0, 0%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
- appStyle: {
- backgroundColor: "hsla(0, 0%, 6%, 0.85)",
- },
},
Monochrome_2: {
@@ -67,11 +55,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(0, 0%, 4%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
- appStyle: {
- backgroundColor: "hsla(0, 0%, 6%, 0.85)",
- },
},
Nord: {
@@ -85,10 +68,110 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(220, 17%, 17%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.17,
},
+ TurbulentGradient_2: {
+ backgroundStyle: {
+ background: `linear-gradient(#ffffff 5%, #808080 50%, #333 95%)`,
+ filter: svgToFilterUrl(
+ ``,
+ ),
+ inset: "-9em",
+ },
+ shadow: "hsl(220, 17%, 17%)",
+ },
+
+ TurbulentGradient_1: {
+ backgroundStyle: {
+ background: `linear-gradient(yellow 5%, fuchsia, royalblue 95%)`,
+ filter: svgToFilterUrl(
+ ``,
+ ),
+ inset: "-9em",
+ },
+ shadow: "hsl(220, 17%, 17%)",
+ },
+ TurbulentGradient_3: {
+ backgroundStyle: {
+ background: "linear-gradient(#002c66 5%, #006dff 50%, #99c5ff 95%)",
+ filter: svgToFilterUrl(
+ ``,
+ ),
+ inset: "-9em",
+ },
+ shadow: "hsl(220, 17%, 17%)",
+ },
+
+ TurbulentGradient_5: {
+ backgroundStyle: {
+ background: "linear-gradient(#003366 5%, #007eff 50%, #C7E3FF 95%)",
+ filter:
+ svgToFilterUrl(``),
+ inset: "-8em",
+ },
+ shadow: "hsl(220, 17%, 17%)",
+ },
+ TurbulentGradient_4: {
+ backgroundStyle: {
+ background: "linear-gradient(#000e66 5%, #0023ff 50%, #99a7ff 95%)",
+ filter: svgToFilterUrl(
+ ``,
+ ),
+ inset: "-9em",
+ },
+ shadow: "hsl(220, 17%, 17%)",
+ },
+ TurbulentGradient_6: {
+ backgroundStyle: {
+ background: "linear-gradient(#290066 5%, #6800ff 50%, #c299ff 95%)",
+ filter:
+ svgToFilterUrl(``),
+ inset: "-9em",
+ },
+ shadow: "hsl(220, 17%, 17%)",
+ },
R1: {
backgroundStyle: {
background: `conic-gradient(from 45deg, rgb(102, 7, 203), rgb(14, 188, 212), rgb(184, 71, 243), rgb(82, 14, 204), rgb(0, 168, 244), rgb(79, 92, 184))`,
@@ -96,8 +179,6 @@ export const Backdrops: Backdrop = {
transform: `scale(2.49328)`,
},
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.17,
},
Lakka: {
@@ -115,8 +196,6 @@ export const Backdrops: Backdrop = {
transform: `scale(1.385)`,
},
shadow: "hsl(13, 80%, 7%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.19,
},
Chrome: {
@@ -134,11 +213,6 @@ export const Backdrops: Backdrop = {
transform: `scale(1.385)`,
},
shadow: "hsl(300, 50%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
- appStyle: {
- backgroundColor: "#140a17cc",
- },
},
Kozuchi: {
@@ -156,11 +230,6 @@ export const Backdrops: Backdrop = {
transform: `scale(1.385)`,
},
shadow: "hsl(220, 80%, 9%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.15,
- appStyle: {
- backgroundColor: "#140a17dd",
- },
},
Linear: {
@@ -177,12 +246,7 @@ export const Backdrops: Backdrop = {
filter: `blur(120px)`,
transform: `scale(.885)`,
},
- appStyle: {
- backgroundColor: `rgba(16, 15, 20, 0.9)`,
- },
shadow: "hsl(23, 60%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
},
Linear2: {
@@ -192,12 +256,7 @@ export const Backdrops: Backdrop = {
filter: `blur(120px)`,
transform: `scale(.885)`,
},
- appStyle: {
- backgroundColor: `rgba(16, 15, 20, 0.9)`,
- },
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
},
R6: {
@@ -208,8 +267,6 @@ export const Backdrops: Backdrop = {
transform: "scale(1.385)",
},
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.17,
},
R5: {
@@ -219,12 +276,7 @@ export const Backdrops: Backdrop = {
filter: `blur(120px)`,
transform: `scale(.885)`,
},
- appStyle: {
- backgroundColor: `rgba(16, 15, 20, 0.9)`,
- },
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
},
R2: {
@@ -234,12 +286,7 @@ export const Backdrops: Backdrop = {
filter: `blur(120px)`,
transform: `scale(.885)`,
},
- appStyle: {
- backgroundColor: `rgba(16, 15, 20, 0.9)`,
- },
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
},
R3: {
@@ -249,12 +296,7 @@ export const Backdrops: Backdrop = {
filter: `blur(120px)`,
transform: `scale(.885)`,
},
- appStyle: {
- backgroundColor: `rgba(16, 15, 20, 0.9)`,
- },
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
},
R4: {
@@ -264,12 +306,7 @@ export const Backdrops: Backdrop = {
filter: `blur(120px)`,
transform: `scale(.885)`,
},
- appStyle: {
- backgroundColor: `rgba(16, 15, 20, 0.9)`,
- },
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
},
Supa: {
@@ -279,12 +316,14 @@ export const Backdrops: Backdrop = {
filter: "blur(120px)",
transform: "scale(.885)",
},
- appStyle: {
- backgroundColor: "rgba(16, 15, 20, 0.9)",
- },
shadow: "hsl(140, 40%, 2%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
+ },
+
+ Lotion: {
+ backgroundStyle: {
+ background: `linear-gradient(#fafafa,#fafafa)`,
+ },
+ shadow: "hsl(0, 0%, 10%)",
},
WhiteWithDots: {
@@ -299,20 +338,13 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(0, 0%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Liveblocks: {
backgroundStyle: {
background: `linear-gradient(125deg, rgba(253,226,237,1) 0%, rgba(247,229,246,1) 91%, rgba(244,231,250,1) 100%)`,
},
- appStyle: {
- backgroundColor: `#03000AEE`,
- },
shadow: "hsl(347, 100%, 8%)",
- lightsOpacity: 0.35,
- shadowsOpacity: 1,
},
Jigglypuff: {
@@ -325,8 +357,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(300, 60%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Sakura: {
@@ -339,8 +369,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(330, 80%, 13%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.17,
},
Lavender: {
@@ -353,8 +381,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(255, 100%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Gengar: {
@@ -367,8 +393,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(270, 60%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Lucario: {
@@ -384,8 +408,6 @@ export const Backdrops: Backdrop = {
transform: `scale(1.385)`,
},
shadow: "hsl(225, 60%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Snorlax: {
@@ -401,8 +423,6 @@ export const Backdrops: Backdrop = {
transform: `scale(1.385)`,
},
shadow: "hsl(240, 30%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Ocean: {
@@ -415,8 +435,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(200, 80%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Squirtle: {
@@ -429,8 +447,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(195, 100%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
TailwindCSS: {
@@ -444,8 +460,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(198, 93%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.19,
},
Bulbasaur: {
@@ -458,8 +472,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(120, 40%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Vue: {
@@ -473,8 +485,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(153, 50%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.24,
},
Sand: {
@@ -487,8 +497,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(30, 80%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Sunset: {
@@ -501,8 +509,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(30, 80%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Dragonite: {
@@ -515,8 +521,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(39, 100%, 10%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.29,
},
Dawn: {
@@ -529,8 +533,6 @@ export const Backdrops: Backdrop = {
)`,
},
shadow: "hsl(8, 45%, 13%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.17,
},
Transparent: {
@@ -539,10 +541,5 @@ export const Backdrops: Backdrop = {
"repeating-conic-gradient(#000 0% 25%, #111 0% 50%) 0% 0% / 16px 16px",
},
shadow: "hsl(0, 0%, 6%)",
- shadowsOpacity: 1,
- lightsOpacity: 0.08,
- appStyle: {
- backgroundColor: "hsla(0, 0%, 2%, 0.9)",
- },
},
};
diff --git a/app/lib/colors.ts b/app/lib/colors.ts
index c38622fe284141ac9b0bef38aadcd7373fd0d413..7a89782c9b5ac9f2cde52d8c7e08f884c6719f63 100644
--- a/app/lib/colors.ts
+++ b/app/lib/colors.ts
@@ -54,19 +54,31 @@ export function cssGradientToCanvas(
}
export function hslToHex(hsl: string) {
- let [h, s, l] = hsl
- .slice(4, -1)
+ // Check if input is HSLA or HSL
+ const isHsla = hsl.startsWith("hsla");
+ let [h, s, l, a] = hsl
+ .slice(isHsla ? 5 : 4, -1)
.split(",")
- .map((x) => parseInt(x, 10));
+ .map((x) => parseFloat(x));
+
l /= 100;
- const a = (s * Math.min(l, 1 - l)) / 100;
+ const alpha = (s * Math.min(l, 1 - l)) / 100;
const f = (n: number) => {
const k = (n + h / 30) % 12;
- const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+ const color = l - alpha * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color)
.toString(16)
.padStart(2, "0");
};
+
+ // If it's HSLA, append the alpha channel
+ if (isHsla && a !== undefined) {
+ const alphaHex = Math.round(a * 255)
+ .toString(16)
+ .padStart(2, "0");
+ return `#${f(0)}${f(8)}${f(4)}${alphaHex}`;
+ }
+
return `#${f(0)}${f(8)}${f(4)}`;
}
@@ -162,3 +174,11 @@ export function rgbaToHex(str: string) {
(alpha !== 255 ? hex(alpha.toString()) : "")
);
}
+
+export function toHex(color: string) {
+ return color.startsWith("#")
+ ? color
+ : color.startsWith("rgb")
+ ? rgbaToHex(color)
+ : hslToHex(color);
+}
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 5536c749ca15ae4b8d1f0299adf690d32d780d46..f092cc07c92466a2704233714cfb76423092522b 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -27,6 +27,7 @@ export const WINDOW_STYLES: {
value: string;
label: string;
features?: {
+ appStyle?: boolean;
particles?: boolean;
reflection?: boolean;
windowTitle?: boolean;
@@ -40,6 +41,7 @@ export const WINDOW_STYLES: {
value: "variant-4",
label: "Variant 4",
features: {
+ appStyle: false,
particles: false,
reflection: false,
},
@@ -48,12 +50,32 @@ export const WINDOW_STYLES: {
value: "variant-5",
label: "Variant 5",
features: {
+ appStyle: false,
particles: false,
reflection: false,
},
},
];
+export const LIGHT_WINDOW_STYLES: {
+ value: string;
+ label: string;
+ features?: {
+ appStyle?: boolean;
+ particles?: boolean;
+ reflection?: boolean;
+ windowTitle?: boolean;
+ };
+}[] = [
+ { value: "none", label: "None" },
+ { value: "variant-1", label: "Variant 1" },
+ { value: "variant-2", label: "Variant 2" },
+ { value: "variant-3", label: "Variant 3" },
+ { value: "variant-4", label: "Variant 4" },
+ { value: "variant-5", label: "Variant 5" },
+ { value: "variant-6", label: "Variant 6" },
+];
+
export const SHADOW_OVERLAY_STYLES = [
{ value: "none", label: "None" },
{ value: "variant-1", label: "Variant 1" },
@@ -97,6 +119,7 @@ export const FONTS = [
"IBM Plex Mono",
"JetBrains Mono",
"Nova",
+ "Overpass Mono",
"Source Code Pro",
]
.map((font) => ({ value: font, label: font }))
diff --git a/app/lib/create-theme.ts b/app/lib/create-theme.ts
index 640f21ddd4467193429ea5b1c07cdd3394bbd578..b8d3bcd876b17123742eeb20a8cf0ca2dd946067 100644
--- a/app/lib/create-theme.ts
+++ b/app/lib/create-theme.ts
@@ -92,6 +92,7 @@ export function createTheme(name: string, colors: Colors) {
displayName: name,
raw,
colors: {
+ "editor.foreground": colors.foreground,
"editor.background": "#ff000000",
},
settings: [
@@ -109,6 +110,7 @@ export function createTheme(name: string, colors: Colors) {
"variable.other.member",
"variable.other.enummember",
"variable.language",
+ "support.type.object.module",
],
settings: {
foreground: colors.variable,
diff --git a/app/lib/export.ts b/app/lib/export.ts
index 263d6c6a83dda9e70016852dce72115144dc599d..1a0c79d45c1517ec8e38ea6f9abcf1641b4127c4 100644
--- a/app/lib/export.ts
+++ b/app/lib/export.ts
@@ -80,3 +80,49 @@ export function copyPngToClipboard() {
}),
]);
}
+
+export function copyTextToClipboard(text: string) {
+ // Alternative approach using textarea element
+ function copyToClipboardFallback(text: string) {
+ // Create a temporary textarea element
+ const textarea = document.createElement("textarea");
+ textarea.value = text;
+
+ // Make it invisible
+ textarea.style.position = "fixed";
+ textarea.style.opacity = "0";
+
+ // Add to document
+ document.body.appendChild(textarea);
+
+ // Select the text
+ textarea.select();
+
+ try {
+ // Execute copy command
+ document.execCommand("copy");
+ console.log("Text copied successfully");
+ } catch (err) {
+ console.error("Failed to copy text: ", err);
+ }
+
+ // Remove the temporary element
+ document.body.removeChild(textarea);
+ }
+
+ if (navigator.clipboard) {
+ navigator.clipboard
+ .writeText(text)
+ .then(() => {
+ console.log("Text copied successfully");
+ })
+ .catch((err) => {
+ console.error("Failed to copy text: ", err);
+ // Try fallback if Clipboard API fails
+ copyToClipboardFallback(text);
+ });
+ } else {
+ // Use fallback for browsers that don't support Clipboard API
+ copyToClipboardFallback(text);
+ }
+}
diff --git a/app/lib/markdown.ts b/app/lib/markdown.ts
index e1b19da583a71c1570aebefd7568b98ec0349717..b78125a91e5e53c6b495895c0d20eb24ea12e6c7 100644
--- a/app/lib/markdown.ts
+++ b/app/lib/markdown.ts
@@ -5,7 +5,7 @@ import { computed } from "vue";
import { store } from "~/lib/store";
export function useMarkdown(content: string) {
- const shiki = useShiki();
+ const { shiki } = useShiki();
const md = computed(() => {
if (!shiki.value) return;
diff --git a/app/lib/migrations.ts b/app/lib/migrations.ts
index 57f4a7d88fea612b40fc5ccaab71c20fcd87a546..03076c2ca1e8d33ff6163cd7f11a8644a8f17b0d 100644
--- a/app/lib/migrations.ts
+++ b/app/lib/migrations.ts
@@ -51,6 +51,7 @@ export function runMigrations() {
store.value.paddingY = store.value.paddingY ?? 32;
store.value.shadowOverlay = store.value.shadowOverlay || "none";
store.value.showLineNumbers = store.value.showLineNumbers ?? true;
+ store.value.socialIcon = store.value.socialIcon ?? "x";
store.value.showParticles = store.value.showParticles ?? true;
store.value.showWatermark = store.value.showWatermark ?? true;
store.value.showWindow = store.value.showWindow ?? true;
@@ -60,6 +61,12 @@ export function runMigrations() {
store.value.watermarkOpacity = store.value.watermarkOpacity || 50;
store.value.windowNoise = store.value.windowNoise ?? false;
store.value.windowStyle = store.value.windowStyle || "variant-1";
+ store.value.lightWindowStyle = store.value.lightWindowStyle || "variant-1";
+ store.value.windowBackgroundOpacity =
+ store.value.windowBackgroundOpacity ?? 90;
+ store.value.windowShadows = store.value.windowShadows ?? 100;
+ store.value.windowHighlights = store.value.windowHighlights ?? 11;
+ store.value.windowBorderRadius = store.value.windowBorderRadius ?? 6;
store.value.windowControls =
store.value.windowControls ?? WindowControls.MacOutline;
store.value.customTheme = store.value.customTheme || {
diff --git a/app/lib/particle.ts b/app/lib/particle.ts
index 38a60c332e15b870e67c546e727e1b50fb3f471a..7d82f6865541ef2dfd759478695fa2ad6fefe825 100644
--- a/app/lib/particle.ts
+++ b/app/lib/particle.ts
@@ -11,7 +11,7 @@ export class Particle {
this.x = x;
this.y = y;
this.opacity = Math.random() * 0.25;
- this.size = Math.random() * 2 + 2; // Particle diameter varies from 2px to 4px
+ this.size = (Math.random() * 2 + 2) * 4; // Particle diameter varies from 2px to 4px
this.speedX = Math.random() * 1 - 0.5;
this.speedY = Math.random() * 1 - 0.5;
diff --git a/app/lib/presets.ts b/app/lib/presets.ts
index d3739d5b5b14d223cb8cf3fdfeffdcb374ee7dee..9676c9b069e1d6efe6d3659206c154f7d8fabac2 100644
--- a/app/lib/presets.ts
+++ b/app/lib/presets.ts
@@ -9,7 +9,7 @@ import { WindowControls } from "./enums";
import { Backdrops } from "./backdrops";
import { themeNames } from "./themes";
import { FONTS, SHADOW_OVERLAY_MAPPING, WINDOW_STYLES } from "./constants";
-import { rgbaToHex } from "./colors";
+import { hslToHex, rgbaToHex, toHex } from "./colors";
import { computed, ref } from "vue";
type Preset = {
@@ -169,6 +169,7 @@ export const usePresetsStore = defineStore("presets", () => {
}
const { name, picture, watermark, username, ...settings } = preset.settings;
+
const data = utoa(
JSON.stringify({
version: 1,
@@ -179,10 +180,10 @@ export const usePresetsStore = defineStore("presets", () => {
customTheme: Object.fromEntries(
Object.entries(settings.customTheme).map(([key, value]) => [
key,
- value.startsWith("#") ? value : rgbaToHex(value),
+ toHex(value),
]),
),
- solidBackground: rgbaToHex(settings.solidBackground),
+ solidBackground: toHex(settings.solidBackground),
},
}),
);
diff --git a/app/lib/shiki.ts b/app/lib/shiki.ts
index 3a792ca85b7e7804e75831958e3e0e183dc331a6..2d5167041266825f978e30b3618a45ddfda9b47c 100644
--- a/app/lib/shiki.ts
+++ b/app/lib/shiki.ts
@@ -1,28 +1,88 @@
+import { createSharedComposable } from "@vueuse/core";
import {
type HighlighterCore,
createHighlighterCore,
createOnigurumaEngine,
+ bundledLanguages,
+ type BundledLanguage,
} from "shiki";
import { onMounted, ref } from "vue";
-import { chalkistThemes, portedThemes, shikiThemes } from "~/lib/themes";
+import {
+ chalkistDarkThemes,
+ chalkistLightThemes,
+ lightShikiThemes,
+ portedThemes,
+ shikiThemes,
+} from "~/lib/themes";
const shiki = ref();
const engine = createOnigurumaEngine(import("shiki/wasm"));
const themes = [
- ...chalkistThemes,
+ ...chalkistLightThemes,
+ ...chalkistDarkThemes,
...portedThemes,
...shikiThemes.map((theme) => theme.import),
+ ...lightShikiThemes.map((theme) => theme.import),
];
-export function useShiki() {
+const loadedLanguages = ref>(new Set());
+const loadingLanguages = ref>(new Set());
+const isReady = ref(false);
+
+export const useShiki = createSharedComposable(() => {
onMounted(async () => {
if (!shiki.value) {
- shiki.value = await createHighlighterCore({
- engine,
- themes,
- });
+ shiki.value = await createHighlighterCore({ engine, themes });
+ isReady.value = true;
}
});
- return shiki;
-}
+ async function loadLanguage(lang: string) {
+ if (!shiki.value || loadedLanguages.value.has(lang)) return;
+ if (loadingLanguages.value.has(lang)) {
+ // Wait for language to finish loading
+ await new Promise((resolve) => {
+ const interval = setInterval(() => {
+ if (!loadingLanguages.value.has(lang)) {
+ clearInterval(interval);
+ resolve();
+ }
+ }, 50);
+ });
+ return;
+ }
+
+ try {
+ loadingLanguages.value.add(lang);
+ const bundledLang = bundledLanguages[lang as BundledLanguage];
+
+ if (!bundledLang) {
+ console.warn(`Language ${lang} not found in bundled languages`);
+ return;
+ }
+ await shiki.value.loadLanguage(bundledLang);
+ loadedLanguages.value.add(lang);
+ } catch (err) {
+ console.error(`Error loading language ${lang}:`, err);
+ throw err;
+ } finally {
+ loadingLanguages.value.delete(lang);
+ }
+ }
+
+ function isLanguageLoaded(lang: string) {
+ return loadedLanguages.value.has(lang);
+ }
+
+ function isLanguageLoading(lang: string) {
+ return loadingLanguages.value.has(lang);
+ }
+
+ return {
+ shiki,
+ loadLanguage,
+ isLanguageLoaded,
+ isLanguageLoading,
+ isReady,
+ };
+});
diff --git a/app/lib/social-icons.ts b/app/lib/social-icons.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efc1948446f57c9b2f9ef4f6601d23d2b2f39eac
--- /dev/null
+++ b/app/lib/social-icons.ts
@@ -0,0 +1,31 @@
+import RiTwitterFill from "~icons/ri/twitter-fill";
+import RiTwitterXFill from "~icons/ri/twitter-x-fill";
+import RiBlueskyFill from "~icons/ri/bluesky-fill";
+import RiBlueskyLine from "~icons/ri/bluesky-line";
+import RiCodepenLine from "~icons/ri/codepen-line";
+import RiGithubFill from "~icons/ri/github-fill";
+import RiGithubLine from "~icons/ri/github-line";
+import RiLinkedinBoxFill from "~icons/ri/linkedin-box-fill";
+import RiLinkedinFill from "~icons/ri/linkedin-fill";
+import RiRedditFill from "~icons/ri/reddit-fill";
+import RiRedditLine from "~icons/ri/reddit-line";
+import RiMastodonLine from "~icons/ri/mastodon-line";
+import RiMastodonFill from "~icons/ri/mastodon-fill";
+import SolarUserCircleLinear from "~icons/solar/user-circle-linear";
+
+export const socialIcons = {
+ custom: SolarUserCircleLinear,
+ twitter: RiTwitterFill,
+ x: RiTwitterXFill,
+ bluesky: RiBlueskyFill,
+ blueskyLine: RiBlueskyLine,
+ codepen: RiCodepenLine,
+ githubFill: RiGithubFill,
+ githubLine: RiGithubLine,
+ linkedinBox: RiLinkedinBoxFill,
+ linkedin: RiLinkedinFill,
+ redditFill: RiRedditFill,
+ redditLine: RiRedditLine,
+ mastodonLine: RiMastodonLine,
+ mastodonFill: RiMastodonFill,
+};
diff --git a/app/lib/state.ts b/app/lib/state.ts
index 825f760af86483fa49e8d68ead78a0d9dd61546c..f4e60b20797675a0af4681dba933da64d3fb6766 100644
--- a/app/lib/state.ts
+++ b/app/lib/state.ts
@@ -3,6 +3,7 @@ import { ExportState } from "~/lib/enums";
import { WINDOW_STYLES } from "./constants";
import { store } from "./store";
import type { EditMode } from "~/types";
+import { isLightTheme } from "./themes";
const features = computed(() => {
return WINDOW_STYLES.find((style) => style.value === store.value.windowStyle)
@@ -14,6 +15,10 @@ export const state = reactive({
isResizingInnerPadding: false,
editMode: "code" as EditMode,
+ get isLightTheme() {
+ return isLightTheme(store.value.colorTheme);
+ },
+
get supported() {
return {
particles: features.value?.particles !== false,
diff --git a/app/lib/store.ts b/app/lib/store.ts
index 47e43422aec5ffc695b672332306f5dec49e9373..0b7d0bee03a34480227571c18745ecac7958b568 100644
--- a/app/lib/store.ts
+++ b/app/lib/store.ts
@@ -40,6 +40,7 @@ export const store = useStorage("chalk-store", {
showLineNumbers: true,
showParticles: true,
showTwitterBadge: false,
+ socialIcon: "x",
showWatermark: false,
showWindow: true,
solidBackground: "hsl(0, 0%, 0%)",
@@ -48,8 +49,13 @@ export const store = useStorage("chalk-store", {
watermark: "chalk.ist",
watermarkOpacity: 50,
windowControls: WindowControls.MacOutline,
+ windowBackgroundOpacity: 90,
+ windowHighlights: 11,
+ windowShadows: 100,
+ windowBorderRadius: 6,
windowNoise: false,
windowStyle: "variant-1",
+ lightWindowStyle: "variant-1",
});
runMigrations();
diff --git a/app/lib/svg.ts b/app/lib/svg.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1aa3968e2b7bb9daebb5519ab6c73692f87e290
--- /dev/null
+++ b/app/lib/svg.ts
@@ -0,0 +1,5 @@
+export function svgToFilterUrl(svgString: string, filterId = "myFilter") {
+ const cleanSvg = svgString.replace(/\s+/g, " ").trim();
+ const base64 = btoa(cleanSvg);
+ return `url("data:image/svg+xml;base64,${base64}#${filterId}")`;
+}
diff --git a/app/lib/themes.ts b/app/lib/themes.ts
index 1939da13e509f076107cd35472d42b38cd15c3c7..4906a590e3e6e712c6150cbf384eb4f8fe0d4ccf 100644
--- a/app/lib/themes.ts
+++ b/app/lib/themes.ts
@@ -16,6 +16,10 @@ export const shikiThemes = bundledThemesInfo.filter(
({ type, id }) => type === "dark" && excludedThemes.includes(id) === false,
);
+export const lightShikiThemes = bundledThemesInfo.filter(
+ ({ type, id }) => type === "light" && excludedThemes.includes(id) === false,
+);
+
export const portedThemes = [
createTheme("Duotone - Dark Sea", {
function: "#D6E9FF", // uno-1
@@ -83,7 +87,35 @@ export const portedThemes = [
}),
];
-export const chalkistThemes = [
+export const chalkistLightThemes = [
+ createTheme("Nord Light", {
+ comment: "#667680",
+ foreground: "#0c1a3d",
+ function: "#3559c7",
+ keyword: "#3559c7",
+ number: "#117627",
+ operator: "#36434a",
+ punctuation: "#0c1a3d",
+ regexp: "#117627",
+ string: "#0c1a3d",
+ variable: "#36434a",
+ }),
+
+ createTheme("Vercel Light", {
+ comment: "#666",
+ foreground: "#171717",
+ function: "#7d00cc",
+ keyword: "#c41562",
+ number: "#117627",
+ operator: "#c41562",
+ punctuation: "#171717",
+ regexp: "#107d32",
+ string: "#107d32",
+ variable: "#005ff2",
+ }),
+];
+
+export const chalkistDarkThemes = [
createTheme("Vue", {
comment: "#387156",
foreground: "#dff3ea",
@@ -149,6 +181,19 @@ export const chalkistThemes = [
operator: "#65808b",
}),
+ createTheme("Bluesky", {
+ foreground: "#FFFFFF",
+ variable: "#D6E5FF",
+ comment: "#49639F",
+ keyword: "#0085FF",
+ punctuation: "#65808B",
+ string: "#5FA7CE",
+ number: "#507CFF",
+ regexp: "#3899D5",
+ function: "#6AD9FF",
+ operator: "#65808B",
+ }),
+
createTheme("Dawn", {
foreground: "#e4c7c1",
variable: "#e8917d",
@@ -215,7 +260,13 @@ export const themeLabels = {
regexp: "RegExp",
};
-export const allThemes = [...chalkistThemes, ...portedThemes, ...shikiThemes];
+export const allThemes = [
+ ...chalkistLightThemes,
+ ...chalkistDarkThemes,
+ ...portedThemes,
+ ...shikiThemes,
+ ...lightShikiThemes,
+];
export function getThemeColors(themeName: string) {
const theme = allThemes.find((theme) => theme.displayName === themeName);
@@ -223,3 +274,9 @@ export function getThemeColors(themeName: string) {
}
export const themeNames = allThemes.map((theme) => theme.displayName);
+
+export function isLightTheme(themeName: string) {
+ return [...chalkistLightThemes, ...lightShikiThemes].some(
+ (theme) => theme.displayName === themeName || theme.id === themeName,
+ );
+}
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3fe5eb462bed071014a2b071a70da99efa1f53ee..380895ee6c487caf71df2e71ef6f85cf00ead769 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,6 @@