Merge pull request #12 from willin/website

feat: website

.changeset/gorgeous-papayas-teach.md

@@ -0,0 +1,5 @@
+---
+"@svelte-dev/i18n": patch
+---
+
+fix type

.changeset/smooth-moose-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@svelte-dev/auth": patch
+---
+
+auth handler with more checks

.changeset/tricky-vans-grow.md

@@ -0,0 +1,8 @@
+---
+"@svelte-dev/auth-oauth2": patch
+"@svelte-dev/session": patch
+"@svelte-dev/auth": patch
+"@svelte-dev/i18n": patch
+---
+
+chore: update readme

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
   "conventionalCommits.scopes": ["auth", "i18n", "session", "strategies"],
-  "cSpell.words": ["willin"]
+  "cSpell.words": ["willin"],
+  "svelte.plugin.svelte.compilerWarnings": {
+    "a11y-no-noninteractive-tabindex": "ignore"
+  }
 }

apps/web/mdsvex.config.js

@@ -0,0 +1,74 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineMDSveXConfig as defineConfig } from 'mdsvex';
+import remarkGfm from 'remark-gfm';
+import remarkGithub from 'remark-github';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import { codeToHtml } from 'shikiji';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * @param {string} code
+ * @param {string | undefined} lang
+ */
+async function highlighter(code, lang = '') {
+  /**
+   * escape curlies, backtick, \t, \r, \n to avoid breaking output of {@html `here`} in .svelte
+   * @param {string} str the string to escape
+   * @returns the escaped string
+   */
+  const escape_svelty = (str) =>
+    str
+      .replace(/[{}`]/g, (c) => ({ '`': '`', '{': '{', '}': '}' })[c])
+      .replace(/\\([trn])/g, '\$1');
+
+  const html = await codeToHtml(code, {
+    lang,
+
+    theme: 'nord'
+  });
+
+  return escape_svelty(html);
+}
+
+const config = defineConfig({
+  extensions: ['.svelte.md', '.md', '.svx'],
+  layout: {
+    // blog: './path/to/blog/layout.svelte',
+    // article: './path/to/article/layout.svelte',
+    // _: './path/to/fallback/layout.svelte'
+    _: path.resolve(__dirname, './src/components/mdsvex.svelte')
+  },
+  highlight: {
+    highlighter
+  },
+  rehypePlugins: [
+    rehypeSlug,
+    [
+      rehypeAutolinkHeadings,
+      {
+        behavior: 'wrap',
+        properties: {
+          className: ['anchor']
+        }
+      }
+    ]
+  ],
+  remarkPlugins: [
+    remarkGfm,
+    [
+      remarkGithub,
+      {
+        repository: 'willin/svelte-turbo'
+      }
+    ]
+  ],
+  smartypants: {
+    dashes: 'oldschool'
+  }
+});
+
+export default config;

apps/web/package.json

@@ -13,20 +13,34 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@svelte-dev/i18n": "*",
-    "@svelte-dev/session": "*",
     "@svelte-dev/auth": "*",
+    "@svelte-dev/auth-alipay": "*",
     "@svelte-dev/auth-github": "*",
     "@svelte-dev/auth-sso": "*",
-    "@svelte-dev/auth-alipay": "*"
+    "@svelte-dev/i18n": "*",
+    "@svelte-dev/session": "*",
+    "theme-change": "^2.5.0"
   },
   "devDependencies": {
+    "@melt-ui/pp": "^0.1.4",
+    "@melt-ui/svelte": "^0.65.1",
+    "@svelte-dev/eslint-config": "*",
     "@sveltejs/adapter-cloudflare": "^2.3.3",
     "@sveltejs/kit": "^1.27.4",
-    "@svelte-dev/eslint-config": "*",
+    "@tailwindcss/typography": "^0.5.10",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^4.4.19",
     "eslint": "^8.28.0",
+    "mdsvex": "^0.11.0",
+    "postcss": "^8.4.32",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-github": "^12.0.0",
+    "shikiji": "^0.8.1",
     "svelte": "^5.0.0-next.22",
     "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.4.2",

apps/web/postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer')]
+};

apps/web/src/app.css

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
+  @apply no-underline block;
+}
+
+* {
+  cursor: url('https://willin.wang/images/default.cur'), default;
+}
+
+a,
+a *,
+button,
+button *,
+.btn,
+.btn *,
+.prose .post-image,
+.cursor-pointer * {
+  cursor: url('https://willin.wang/images/pointer.cur'), pointer !important;
+}
+
+html {
+  /* transition: background-color 0.5s linear, color 0.25s linear; */
+  min-height: 100vh;
+}
+
+div,
+p {
+  @apply break-all;
+}
+
+pre {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Remove Safari input shadow on mobile */
+input[type='text'],
+input[type='email'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+table {
+  display: block;
+  max-width: fit-content;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.break-words,
+.break-words p {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.prose img {
+  /* Don't apply styles to next/image */
+  @apply m-0 max-h-[75vh];
+}
+.prose .mermaid > svg {
+  @apply mx-auto my-2;
+}
+
+.prose {
+  @apply min-w-full;
+}
+.prose > * {
+  @apply min-w-[95%] w-full lg:w-[95%] mx-auto;
+}
+.prose h1 a,
+.prose h2 a {
+  @apply relative text-primary-content bg-primary border-primary-content mx-auto rounded shadow-lg text-center w-full py-1;
+}
+.prose h3,
+.prose h4,
+.prose h5,
+.prose h6 {
+  @apply text-secondary relative;
+}
+
+.prose table {
+  @apply table min-w-[95%] w-full lg:w-[95%] table-zebra shadow mx-auto;
+}
+
+.prose tr {
+  @apply hover;
+}

apps/web/src/app.d.ts

@@ -2,6 +2,7 @@
 /// <reference lib="dom.iterable" />
 
 import type { Auth } from '$lib/auth/auth.ts';
+import type { SessionStorage } from '@svelte-dev/session';
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces

apps/web/src/components/ChangeLanguage.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { locales, locale, t } from '@svelte-dev/i18n';
+  import { page } from '$app/stores';
+  import { fallbackLng } from '$lib/i8n';
+  import { getRealPath } from '$lib/utils';
+
+  const pathname = $derived(getRealPath($page.url.pathname, $locales));
+</script>
+
+<div class="dropdown dropdown-end">
+  <div tabindex="0" class="btn btn-ghost gap-1 normal-case">
+    <svg
+      class="inline-block h-4 w-4 fill-current md:h-5 md:w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 512 512">
+      <path
+        d="M363,176,246,464h47.24l24.49-58h90.54l24.49,58H480ZM336.31,362,363,279.85,389.69,362Z" />
+      <path
+        d="M272,320c-.25-.19-20.59-15.77-45.42-42.67,39.58-53.64,62-114.61,71.15-143.33H352V90H214V48H170V90H32v44H251.25c-9.52,26.95-27.05,69.5-53.79,108.36-32.68-43.44-47.14-75.88-47.33-76.22L143,152l-38,22,6.87,13.86c.89,1.56,17.19,37.9,54.71,86.57.92,1.21,1.85,2.39,2.78,3.57-49.72,56.86-89.15,79.09-89.66,79.47L64,368l23,36,19.3-11.47c2.2-1.67,41.33-24,92-80.78,24.52,26.28,43.22,40.83,44.3,41.67L255,362Z" />
+    </svg>
+
+    <svg
+      width="12px"
+      height="12px"
+      class="ml-1 hidden h-3 w-3 fill-current opacity-60 sm:inline-block"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 2048 2048">
+      <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" />
+    </svg>
+  </div>
+  <div
+    tabindex="0"
+    class="dropdown-content bg-base-200 text-base-content rounded-t-box rounded-b-box top-px mt-16 w-48 overflow-y-auto shadow-2xl">
+    <ul class="menu menu-compact gap-1 p-3">
+      {#each $locales as langItem}
+        {#if $t('__name', {}, langItem) !== '__name'}
+          <li>
+            <a
+              class:active={$locale === langItem}
+              href={`${langItem !== fallbackLng ? `/${langItem}` : ''}${pathname}`}
+              onclick={() => locale.set(langItem)}>
+              {#if $t('__flag', {}, langItem) !== '__flag'}
+                <img
+                  loading="lazy"
+                  width="20"
+                  height="20"
+                  alt={$t('__flag', {}, langItem)}
+                  src={`https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${$t(
+                    '__unicode',
+                    {},
+                    langItem
+                  )}.svg`} />
+              {:else if $t('__code', {}, langItem) !== '__code'}
+                <span
+                  class="badge badge-sm badge-outline !pl-1.5 !pr-1 pt-px font-mono !text-[.6rem] font-bold tracking-widest opacity-50">
+                  {$t('__code', {}, langItem)}
+                </span>
+              {/if}
+              <span class="font-[sans-serif]">{$t('__name', {}, langItem)} </span>
+              {#if $t('__status', {}, langItem) !== '__status' && $t('__status', {}, langItem) !== ''}
+                <span class="badge badge-sm badge-ghost">
+                  {$t('__status', {}, langItem)}
+                </span>
+              {/if}
+            </a>
+          </li>
+        {/if}
+      {/each}
+      <!-- {Object.entries(languages).map(([key, { name, flag, unicode }]) => (
+        <li key={key}>
+          <a
+            href={`/${key}${pathname?.replace(reg, '') || '/'}`}
+            class={clsx('flex btn-ghost', {
+              // active: i18n.language === lang
+            })}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              loading='lazy'
+              width='20'
+              height='20'
+              alt={flag}
+              src={`https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${unicode}.svg`}
+            />
+            <span class='flex flex-1 justify-between'>{name}</span>
+          </a>
+        </li>
+      ))} -->
+    </ul>
+  </div>
+</div>

apps/web/src/components/ChangeRepo.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  // @ts-nocheck
+  import { page } from '$app/stores';
+  import { linkPrefix } from '$lib/stores/prefix';
+  import { currentRepo } from '$lib/stores/repo';
+
+  const { className, ...rest } = $props<{ className?: string; tabindex?: string }>();
+
+  const itemClass = $derived(className ? '' : 'btn btn-sm btn-ghost');
+</script>
+
+<ul
+  class={`${className ?? 'animate-menu hidden lg:inline-flex menu menu-horizontal round'}`}
+  {...rest}>
+  <li aria-current={$currentRepo === 'session' ? 'repo' : undefined}>
+    <a class={itemClass} href={`${$linkPrefix}/session`}>Session</a>
+  </li>
+  <li aria-current={$currentRepo === 'auth' ? 'repo' : undefined}>
+    <a class={itemClass} href={`${$linkPrefix}/auth`}>Auth</a>
+  </li>
+  <li aria-current={$currentRepo === 'i18n' ? 'repo' : undefined}>
+    <a class={itemClass} href={`${$linkPrefix}/i18n`}>I18n</a>
+  </li>
+</ul>
+
+<style>
+  .animate-menu li[aria-current='repo'] a {
+    @apply btn btn-sm btn-primary;
+    view-transition-name: active-page;
+  }
+</style>