feat: support watermark

Barbapapazes · Barbapapazes · commit 691dea0a29c3 · 2025-01-30T22:43:12.000+01:00
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Code - Estéban Soubiran</title>
   </head>
   <body>
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "shiki": "^2.1.0",
     "tailwind-variants": "^0.3.1",
     "tailwindcss": "^4.0.0",
+    "unplugin-fonts": "^1.3.1",
     "vue": "^3.5.13"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import Watermark from '@/code/components/Watermark.vue';
 import type { Language } from '@/code/types/language'
 import type { Size } from '@/code/types/size'
 import { camera as cameraIcon, moon as moonIcon, sun as sunIcon } from '@/icons'
@@ -7,6 +8,8 @@ const app = tv({
   slots: {
     base: 'w-screen h-screen p-4 bg-[var(--ui-bg)] text-[var(--ui-text)] flex flex-col items-center justify-center gap-8',
     container: 'w-full flex flex-col gap-8',
+    wrapper: 'relative',
+    watermark: 'absolute inset-x-0 bottom-6 text-center translate-y-1/2',
     actions: 'absolute bottom-8 inset-x-0 max-w-screen-sm mx-auto w-full flex justify-between gap-2',
   },
   variants: {
@@ -62,8 +65,10 @@ const ui = computed(() => app({
 <template>
   <main :class="ui.base()">
     <div :class="ui.container()">
-      <EditorWrapper ref="editor">
+      <EditorWrapper ref="editor" :class="ui.wrapper()">
         <Editor />
+
+        <Watermark :class="ui.watermark()" />
       </EditorWrapper>
 
       <div :class="ui.actions()">
diff --git a/src/code/components/Watermark.vue b/src/code/components/Watermark.vue
@@ -0,0 +1,28 @@
+<script lang="ts">
+const watermark = tv({
+  base: 'text-sm text-[var(--ui-bg-elevated)] font-sofia',
+})
+
+export interface WatermarkProps {
+  text?: string
+  class?: any
+}
+export interface WatermarkEmits {}
+export interface WatermarkSlots {}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<WatermarkProps>()
+defineEmits<WatermarkEmits>()
+defineSlots<WatermarkSlots>()
+
+const { watermark: text } = useCode()
+
+const ui = computed(() => watermark({ class: props.class }))
+</script>
+
+<template>
+  <p :class="ui" v-if="text">
+    {{ text }}
+  </p>
+</template>
diff --git a/src/code/composables/useCode.ts b/src/code/composables/useCode.ts
@@ -8,6 +8,8 @@ const size = ref<Size>(defaultSize)
 const defaultLanguage = 'markdown'
 const language = ref<Language>(defaultLanguage)
 
+const watermark = ref<string | undefined>(undefined)
+
 export function useCode() {
   const params = useUrlSearchParams<SearchParams>('history')
 
@@ -26,9 +28,15 @@ export function useCode() {
     params.code = base64Encode(code.value)
   })
 
+  watermark.value = params.watermark
+  watch(watermark, () => {
+    params.watermark = watermark.value
+  })
+
   return {
     language,
     size,
     code,
+    watermark,
   }
 }
diff --git a/src/code/types/search-params.ts b/src/code/types/search-params.ts
@@ -8,4 +8,5 @@ export interface SearchParams {
   code?: string
   language?: Language
   size?: Size
+  watermark?: string
 }
diff --git a/src/common/styles/main.css b/src/common/styles/main.css
@@ -1,7 +1,13 @@
 @import "tailwindcss";
-@config "../tailwind.config.js";
+@config "../../../tailwind.config.js";
 @import "./shiki.css";
 
+@theme {
+  --font-sans: 'DM Sans', sans-serif;
+  --font-sofia: 'Sofia sans', sans-serif;
+  --font-mono: 'DM Mono', monospace;
+}
+
 :root {
   --ui-text-dimmed: var(--color-neutral-400);
   --ui-text-muted: var(--color-neutral-500);
diff --git a/src/common/styles/shiki.css b/src/common/styles/shiki.css
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './main.css'
+import './common/styles/main.css'
 
 createApp(App).mount('#app')
diff --git a/vite.config.ts b/vite.config.ts
@@ -6,6 +6,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 import VueDevTools from 'vite-plugin-vue-devtools'
+import Fonts from 'unplugin-fonts/vite'
 
 export default defineConfig({
   plugins: [
@@ -30,11 +31,32 @@ export default defineConfig({
       dts: './src/components.d.ts',
     }),
 
+    Fonts({
+      google: {
+        families: [
+          {
+            name: 'DM Sans',
+            styles: 'ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000',
+          },
+          {
+            name: 'DM Mono',
+            styles: 'ital,wght@0,300;0,400;0,500;1,300;1,400;1,500',
+          },
+          {
+            name: 'Sofia Sans',
+            styles: 'ital,wght@0,1..1000;1,1..1000',
+          },
+        ],
+      },
+    }),
+
     VueDevTools(),
   ],
 
   optimizeDeps: {
     include: [
+      'defu',
+      'ohash',
       'reka-ui',
       'shiki/core',
       'tailwind-variants',

Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@ export interface SearchParams {`
`8`	`8`	`code?: string`
`9`	`9`	`language?: Language`
`10`	`10`	`size?: Size`
	`11`	`+ watermark?: string`
`11`	`12`	`}`