@picloom/create-theme 0.0.0-stage → 0.1.0

package/dist/template/src/Page.vue

@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { ref, onUnmounted, computed } from "vue";
+import type { ThemeContext } from "@picloom/theme-sdk";
+const props = defineProps<{ context: ThemeContext }>();
+const ctx = props.context,
+  s = ref(ctx.getSnapshot());
+const stop = ctx.subscribe((value) => {
+  s.value = value;
+});
+onUnmounted(stop);
+const t = (key: string, params?: Record<string, string | number>) =>
+  ctx.t(key, params);
+function size(value: number) {
+  const unit = value < 1024 ? 1 : value < 1024 ** 2 ? 1024 : 1024 ** 2;
+  const digits = unit === 1 ? 0 : 1;
+  return (
+    new Intl.NumberFormat(s.value.locale, {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+    }).format(value / unit) +
+    (unit === 1 ? " B" : unit === 1024 ? " KB" : " MB")
+  );
+}
+const input = ref<HTMLInputElement>(),
+  username = ref(""),
+  password = ref(""),
+  dragging = ref(false);
+const profile = computed(() =>
+  s.value.profiles.find(
+    (p) => p.id === s.value.selectedProfileId && p.available,
+  ),
+);
+function files(list: FileList | null) {
+  if (list) ctx.uploads.add(Array.from(list));
+}
+function paste(e: ClipboardEvent) {
+  if (
+    s.value.page !== "home" ||
+    (e.target as HTMLElement)?.closest("input,textarea,[contenteditable]")
+  )
+    return;
+  if (e.clipboardData?.files.length) {
+    e.preventDefault();
+    files(e.clipboardData.files);
+    return;
+  }
+  const urls = e.clipboardData?.getData("text/plain").trim().split(/\s+/);
+  if (
+    urls?.length &&
+    urls.every((u) => {
+      try {
+        return ["http:", "https:"].includes(new URL(u).protocol);
+      } catch {
+        return false;
+      }
+    })
+  ) {
+    e.preventDefault();
+    ctx.uploads.addUrls(urls);
+  }
+}
+window.addEventListener("paste", paste);
+onUnmounted(() => window.removeEventListener("paste", paste));
+async function login() {
+  const value = password.value;
+  password.value = "";
+  await ctx.login(username.value, value);
+}
+</script>
+<template>
+  <div
+    class="min-h-screen bg-background text-foreground"
+    :class="{ dark: s.dark }"
+  >
+    <header
+      class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-5 py-6"
+    >
+      <a
+        href="/"
+        class="flex items-center gap-2 text-lg font-semibold"
+        @click.prevent="ctx.navigate('home')"
+        ><img
+          v-if="s.site.logoUrl"
+          :src="s.site.logoUrl"
+          alt=""
+          class="size-8"
+        />{{ s.site.name }}</a
+      >
+      <div class="flex items-center gap-4">
+        <select
+          v-if="s.locales.length > 1"
+          :value="s.locale"
+          :aria-label="t('themes.language')"
+          @change="ctx.setLocale(($event.target as HTMLSelectElement).value)"
+          class="native-select"
+        >
+          <option
+            v-for="language in s.languages"
+            :key="language.tag"
+            :value="language.tag"
+          >
+            {{ language.name }}
+          </option>
+        </select>
+        <select
+          :value="s.mode"
+          :aria-label="t('themes.mode')"
+          @change="
+            ctx.setMode(
+              ($event.target as HTMLSelectElement).value as
+                | 'light'
+                | 'dark'
+                | 'auto',
+            )
+          "
+          class="native-select"
+        >
+          <option value="auto">{{ t("themes.auto") }}</option>
+          <option value="light">{{ t("ui.lightMode") }}</option>
+          <option value="dark">{{ t("ui.darkMode") }}</option>
+        </select>
+        <a
+          v-if="s.page === 'home'"
+          :href="s.user ? '/app/images' : '/login?return=/app/images'"
+          @click.prevent="ctx.navigate(s.user ? 'app' : 'login')"
+          >{{ s.user ? t("ui.app") : t("ui.signIn") }}
+          <span aria-hidden="true">→</span></a
+        >
+      </div>
+    </header>
+    <main
+      v-if="s.page === 'home'"
+      class="mx-auto max-w-3xl px-5 py-12 sm:py-20"
+    >
+      <div
+        v-if="s.site.homeTitle || s.site.description"
+        class="mb-10 text-center"
+      >
+        <h1
+          v-if="s.site.homeTitle"
+          class="text-3xl font-semibold tracking-tight sm:text-4xl"
+        >
+          {{ s.site.homeTitle }}
+        </h1>
+        <p v-if="s.site.description" class="mt-4 text-muted-foreground">
+          {{ s.site.description }}
+        </p>
+      </div>
+      <p v-if="s.loading" class="subtle">{{ t("ui.loading") }}</p>
+      <p v-if="s.error" class="error-box">
+        {{ s.error }}
+        <button @click="ctx.refresh()">{{ t("ui.retry") }}</button>
+      </p>
+      <div class="space-y-6">
+        <div
+          class="cursor-pointer rounded-2xl border-2 border-dashed px-6 py-16 text-center"
+          :class="dragging ? 'border-primary bg-primary/5' : 'border-border'"
+          role="button"
+          tabindex="0"
+          :aria-label="t('ui.dropImagesHere')"
+          :aria-disabled="!profile"
+          @click="profile && input?.click()"
+          @keydown.enter.self.prevent="profile && input?.click()"
+          @keydown.space.self.prevent="profile && input?.click()"
+          @dragover.prevent="dragging = true"
+          @dragleave.prevent="dragging = false"
+          @drop.prevent="
+            dragging = false;
+            files($event.dataTransfer?.files ?? null);
+          "
+        >
+          <p class="mb-2 font-medium">{{ t("ui.dropImagesHere") }}</p>
+          <p class="mb-5 text-sm text-muted-foreground">
+            {{ t("ui.orPasteFromYourClipboard") }}
+          </p>
+          <button
+            class="rounded-lg bg-primary px-5 py-2 text-primary-foreground disabled:opacity-50"
+            :disabled="!profile"
+            @click.stop="input?.click()"
+          >
+            {{ t("ui.chooseFiles") }}
+          </button>
+          <input
+            ref="input"
+            type="file"
+            data-testid="upload-input"
+            accept="image/*"
+            multiple
+            hidden
+            @click.stop
+            @change="
+              files(input?.files ?? null);
+              if (input) input.value = '';
+            "
+          />
+          <p v-if="profile" class="mt-4 text-xs text-muted-foreground">
+            {{ t("uploads.limit", { size: size(profile.maxUploadBytes) }) }} ·
+            {{ profile.allowedMimeTypes.join(" / ") }}
+          </p>
+        </div>
+        <label class="field"
+          >{{ t("ui.uploadProfile")
+          }}<select
+            class="native-select"
+            :aria-label="t('ui.uploadProfile')"
+            :value="s.selectedProfileId"
+            @change="
+              ctx.selectProfile(($event.target as HTMLSelectElement).value)
+            "
+          >
+            <option value="" disabled>{{ t("ui.selectAProfile") }}</option>
+            <option
+              v-for="p in s.profiles"
+              :key="p.id"
+              :value="p.id"
+              :disabled="!p.available"
+            >
+              {{ p.name }}{{ p.reason ? " · " + p.reason : "" }}
+            </option>
+          </select></label
+        >
+        <p v-if="!s.loading && !profile" class="error-box">
+          {{
+            s.profiles.some((p) => p.available)
+              ? t("profiles.required")
+              : !s.user
+                ? t("users.guestUnavailable")
+                : t("users.noProfiles")
+          }}
+        </p>
+        <div class="flex flex-wrap items-center gap-4 border-b pb-6">
+          <label class="field flex-1"
+            >{{ t("uploads.copyFormat")
+            }}<select
+              class="native-select"
+              :aria-label="t('uploads.copyFormat')"
+              :value="s.copy.format"
+              @change="
+                ctx.links.setPreferences(
+                  ($event.target as HTMLSelectElement).value,
+                  s.copy.auto,
+                )
+              "
+            >
+              <option v-for="f in s.copy.formats" :key="f">{{ f }}</option>
+            </select></label
+          >
+          <label
+            ><input
+              type="checkbox"
+              :checked="s.copy.auto"
+              @change="
+                ctx.links.setPreferences(
+                  s.copy.format,
+                  ($event.target as HTMLInputElement).checked,
+                )
+              "
+            />
+            {{ t("uploads.autoCopy") }}</label
+          >
+        </div>
+        <div v-if="s.uploads.length" class="space-y-3">
+          <h2>
+            {{ t("ui.uploadQueue") }} ·
+            {{ s.uploads.filter((u) => u.status === "success").length }} /
+            {{ s.uploads.length }}
+          </h2>
+          <button @click="ctx.links.copyAll()">
+            {{ t("uploads.copyAll") }}
+          </button>
+          <div
+            v-for="u in s.uploads"
+            :key="u.id"
+            class="rounded-lg border p-3"
+            data-testid="upload-row"
+          >
+            <p class="truncate">{{ u.name }}</p>
+            <p class="text-xs text-muted-foreground">
+              {{ u.sourceUrl ? t("uploads.fromUrl") : size(u.size) }} ·
+              {{ u.profileName }}
+            </p>
+            <p class="mt-2 text-xs" aria-live="polite">
+              {{
+                u.error ||
+                {
+                  queued: t("ui.queued"),
+                  uploading: t("uploads.progress", { progress: u.progress }),
+                  processing: t("ui.processingOnServer"),
+                  success: t("ui.uploaded"),
+                  cancelled: t("uploads.cancelled"),
+                  failed: "",
+                }[u.status]
+              }}
+            </p>
+            <progress
+              v-if="u.status === 'uploading'"
+              :value="u.progress"
+              max="100"
+              :aria-label="t('ui.uploadProgress')"
+              class="w-full"
+            />
+            <div class="mt-2 flex gap-3">
+              <button
+                v-if="u.status === 'failed' && u.resumable"
+                @click="ctx.uploads.resume(u.id)"
+              >
+                {{ t("uploads.continue") }}</button
+              ><button
+                v-if="['queued', 'uploading'].includes(u.status)"
+                @click="ctx.uploads.cancel(u.id)"
+              >
+                {{ t("ui.cancel") }}</button
+              ><button
+                v-if="['failed', 'cancelled'].includes(u.status)"
+                @click="ctx.uploads.dismiss(u.id)"
+              >
+                {{ t("uploads.dismiss") }}
+              </button>
+            </div>
+            <div
+              v-if="u.result"
+              role="group"
+              :aria-label="t('ui.copy')"
+              class="mt-3 flex flex-wrap gap-2"
+            >
+              <select
+                class="native-select"
+                :aria-label="t('uploads.copyFormat')"
+                :value="s.copy.format"
+                @change="
+                  ctx.links.setPreferences(
+                    ($event.target as HTMLSelectElement).value,
+                    s.copy.auto,
+                  )
+                "
+              >
+                <option v-for="format in s.copy.formats" :key="format">
+                  {{ format }}
+                </option></select
+              ><input
+                class="native-select min-w-0 flex-1"
+                readonly
+                :value="ctx.links.format(u.result.url)"
+                :aria-label="t('uploads.result')"
+              /><button @click="ctx.links.copy(u.result!.url)">
+                {{ t("ui.copy") }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <main v-else class="mx-auto max-w-sm px-5 py-12">
+      <p
+        v-if="s.site.description"
+        class="mb-5 text-center text-muted-foreground"
+      >
+        {{ s.site.description }}
+      </p>
+      <form class="panel space-y-6 p-7" @submit.prevent="login">
+        <h1 class="text-xl font-semibold">{{ t("ui.signIn") }}</h1>
+        <p v-if="s.login.expired" class="subtle">
+          {{ t("ui.sessionExpiredSignInAgain") }}
+        </p>
+        <p v-if="s.login.unavailable" class="error-box">
+          {{ t("ui.cannotReachTheServerTryAgain") }}
+        </p>
+        <label class="field"
+          >{{ t("ui.username")
+          }}<input
+            v-model="username"
+            class="native-select"
+            autocomplete="username"
+            required
+        /></label>
+        <label class="field"
+          >{{ t("ui.password")
+          }}<input
+            v-model="password"
+            class="native-select"
+            type="password"
+            autocomplete="current-password"
+            required
+        /></label>
+        <p v-if="s.login.error" role="alert" class="error-box">
+          {{ s.login.error }}
+        </p>
+        <button
+          class="w-full rounded-lg bg-primary px-5 py-2 text-primary-foreground"
+          type="submit"
+          :disabled="s.login.busy"
+        >
+          {{ s.login.busy ? t("ui.signingIn") : t("ui.signIn") }}
+        </button>
+      </form>
+    </main>
+    <div
+      v-if="s.notice"
+      role="status"
+      class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl border bg-card px-5 py-3"
+    >
+      {{ s.notice }}
+    </div>
+  </div>
+</template>

package/dist/template/src/entry.ts

@@ -0,0 +1,13 @@
+import { createApp } from "vue";
+import Page from "./Page.vue";
+import type { ThemeContext } from "@picloom/theme-sdk";
+import "./style.css";
+export function mount(container: HTMLElement, context: ThemeContext) {
+  const app = createApp(Page, { context });
+  app.mount(container);
+  return {
+    dispose() {
+      app.unmount();
+    },
+  };
+}

package/dist/template/src/style.css

@@ -0,0 +1,121 @@
+@import "tailwindcss" source(none);
+@source "./";
+@custom-variant dark (&:is(.dark *));
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--foreground);
+  --color-popover: var(--card);
+  --color-popover-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--muted);
+  --color-secondary-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--muted);
+  --color-accent-foreground: var(--foreground);
+  --color-destructive: #d44e55;
+  --color-destructive-foreground: #fff;
+  --color-border: var(--border);
+  --color-input: var(--border);
+  --color-ring: var(--primary);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+}
+:root {
+  --background: #fff;
+  --foreground: #213547;
+  --card: #f9f9f9;
+  --primary: #287f59;
+  --primary-foreground: #fff;
+  color-scheme: light;
+  accent-color: var(--primary);
+  --muted: #f1f1f1;
+  --muted-foreground: #666;
+  --border: #e5e5e5;
+  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
+}
+.dark {
+  color-scheme: dark;
+  accent-color: var(--primary);
+  --background: #1a1a1a;
+  --foreground: #ffffffde;
+  --card: #242424;
+  --primary: #42b883;
+  --primary-foreground: #13261e;
+  --muted: #2f2f2f;
+  --muted-foreground: #ebebeb99;
+  --border: #5454547a;
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    margin: 0;
+  }
+  button,
+  a,
+  input,
+  select {
+    -webkit-tap-highlight-color: transparent;
+  }
+  /* Native popup menus may not inherit the select's transparent background. */
+  select {
+    color-scheme: inherit;
+  }
+  select option,
+  select optgroup {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+  button:not(:disabled),
+  a {
+    cursor: pointer;
+  }
+  :focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 3px;
+  }
+}
+@layer components {
+  .panel {
+    @apply rounded-xl border bg-card dark:bg-transparent;
+  }
+  .field {
+    @apply grid gap-2 text-sm;
+  }
+  .native-select {
+    @apply h-9 min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
+  }
+  input[type="checkbox"] {
+    @apply size-4 shrink-0 accent-primary;
+  }
+  label.field:has(> :required),
+  .required-label {
+    position: relative;
+  }
+  label.field:has(> :required)::after,
+  .required-label::after {
+    content: "*";
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: var(--primary);
+  }
+  [aria-invalid="true"] {
+    border-color: var(--color-destructive);
+  }
+
+  .subtle {
+    @apply text-sm text-muted-foreground;
+  }
+  .error-box {
+    @apply rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive;
+  }
+}

package/dist/template/theme.json

@@ -0,0 +1,108 @@
+{
+  "id": "example.default",
+  "version": "0.1.0",
+  "apiVersion": 1,
+  "defaultLocale": "en-US",
+  "supportedLocales": [
+    "zh-CN",
+    "en-US"
+  ],
+  "nameKey": "package.name",
+  "messages": {
+    "en-US": {
+      "package.name": "Default theme",
+      "profiles.required": "No usable default upload profile. Please select a profile.",
+      "themes.auto": "System",
+      "themes.language": "Language",
+      "themes.mode": "Appearance",
+      "ui.app": "App",
+      "ui.cancel": "Cancel",
+      "ui.cannotReachTheServerTryAgain": "Cannot reach the server. Try again.",
+      "ui.chooseFiles": "Choose files",
+      "ui.copy": "Copy",
+      "ui.darkMode": "Dark mode",
+      "ui.dropImagesHere": "Drop images here",
+      "ui.lightMode": "Light mode",
+      "ui.loading": "Loading…",
+      "ui.orPasteFromYourClipboard": "or paste images or image URLs",
+      "ui.password": "Password",
+      "ui.processingOnServer": "Processing on server…",
+      "ui.queued": "Queued",
+      "ui.retry": "Retry",
+      "ui.selectAProfile": "Select a profile",
+      "ui.sessionExpiredSignInAgain": "Session expired. Sign in again.",
+      "ui.signIn": "Sign in",
+      "ui.signingIn": "Signing in…",
+      "ui.uploadProfile": "Upload profile",
+      "ui.uploadProgress": "Upload progress",
+      "ui.uploadQueue": "Upload queue",
+      "ui.uploaded": "Uploaded",
+      "ui.username": "Username",
+      "uploads.autoCopy": "Auto-copy after upload",
+      "uploads.cancelled": "Cancelled",
+      "uploads.continue": "Continue upload",
+      "uploads.copyAll": "Copy all",
+      "uploads.copyFormat": "Copy format",
+      "uploads.dismiss": "Dismiss",
+      "uploads.fromUrl": "From URL",
+      "uploads.limit": "Up to {size} per file",
+      "uploads.progress": "Uploading {progress}%",
+      "uploads.result": "Upload result",
+      "users.guestUnavailable": "Guest uploads are unavailable. Sign in to upload.",
+      "users.noProfiles": "No upload profiles available. Contact an administrator."
+    },
+    "zh-CN": {
+      "package.name": "默认主题",
+      "profiles.required": "没有可用的默认上传配置，请选择上传配置。",
+      "themes.auto": "跟随系统",
+      "themes.language": "语言",
+      "themes.mode": "显示模式",
+      "ui.app": "管理后台",
+      "ui.cancel": "取消",
+      "ui.cannotReachTheServerTryAgain": "无法连接服务器，请重试。",
+      "ui.chooseFiles": "选择文件",
+      "ui.copy": "复制",
+      "ui.darkMode": "深色模式",
+      "ui.dropImagesHere": "将图片拖到这里",
+      "ui.lightMode": "浅色模式",
+      "ui.loading": "正在加载…",
+      "ui.orPasteFromYourClipboard": "或粘贴图片、图片链接",
+      "ui.password": "密码",
+      "ui.processingOnServer": "服务器处理中…",
+      "ui.queued": "排队中",
+      "ui.retry": "重试",
+      "ui.selectAProfile": "选择上传配置",
+      "ui.sessionExpiredSignInAgain": "登录已过期，请重新登录。",
+      "ui.signIn": "登录",
+      "ui.signingIn": "正在登录…",
+      "ui.uploadProfile": "上传配置",
+      "ui.uploadProgress": "上传进度",
+      "ui.uploadQueue": "上传队列",
+      "ui.uploaded": "已上传",
+      "ui.username": "用户名",
+      "uploads.autoCopy": "上传后自动复制",
+      "uploads.cancelled": "已取消",
+      "uploads.continue": "继续上传",
+      "uploads.copyAll": "复制全部",
+      "uploads.copyFormat": "复制格式",
+      "uploads.dismiss": "关闭",
+      "uploads.fromUrl": "通过链接上传",
+      "uploads.limit": "单文件最大 {size}",
+      "uploads.progress": "正在上传 {progress}%",
+      "uploads.result": "上传结果",
+      "users.guestUnavailable": "访客上传不可用，请登录后上传。",
+      "users.noProfiles": "没有可用的上传配置，请联系管理员。"
+    }
+  },
+  "pages": {
+    "home": {
+      "entry": "entry.js"
+    },
+    "login": {
+      "entry": "entry.js"
+    }
+  },
+  "styles": [
+    "style.css"
+  ]
+}

package/dist/template/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["bun", "vite/client"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "dev/**/*.ts",
+    "scripts/**/*.ts",
+    "vite.config.ts"
+  ]
+}

package/dist/template/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "node:path";
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  publicDir: false,
+  define: { "process.env.NODE_ENV": JSON.stringify("production") },
+  build: {
+    outDir: "dist/package",
+    emptyOutDir: true,
+    sourcemap: false,
+    lib: {
+      entry: resolve("src/entry.ts"),
+      formats: ["es"],
+      fileName: () => "entry.js",
+      cssFileName: "style",
+    },
+  },
+});