duto 0.260915.0 → 0.261011.0

package/src/commands/templates/pages/pages/blog/index.tsx

@@ -0,0 +1,74 @@
+// 'use client'
+import { t, Link } from 'duto'
+import type { Posts } from '@/types'
+// import { Counter } from '@/components/counter2'
+
+type Props = {
+  posts?: Posts,
+}
+
+export { Html } from '@/components/html'
+
+export async function getStaticProps() {
+  const posts = (await (await fetch('https://jsonplaceholder.typicode.com/posts')).json())
+    ?.sort(() => 0.5 - Math.random())
+    .slice(0, 10)
+
+  return { posts }
+}
+
+export default function Blog({ posts }: Props) {
+  return (
+    <>
+      <h1 class="title">Blog</h1>
+
+      <div class="highlight">
+        {t`b1`}&nbsp;<b><i>getStaticProps()</i></b> (SSG)
+      </div>
+
+      {!posts?.length && (
+        <p class="mt-8">No posts found.</p>
+      )}
+
+      <div class="mt-8 flex flex-col">
+        {posts?.map((post) => (
+          <Link to={`/blog/${post.id}`} key={post.id}
+            class="group block relative p-4 border-b border-gray-200 dark:border-zinc-700/70 transition-all duration-300 ease-out"
+          >
+            <div class="flex items-start gap-4">
+              <span class="text-sm font-mono text-gray-400 group-hover:text-sky-gradient mt-0.5 min-w-[24px]">
+                #{post.id}
+              </span>
+
+              <div class="flex-1 min-w-0">
+                <h2 class="text-base font-medium group-hover:text-sky-gradient">
+                  {post.title}
+                </h2>
+                <p class="mt-1 text-sm text-gray-500 group-hover:text-gray-800 dark:group-hover:text-gray-400 line-clamp-2 pr-6">
+                  {post.body}
+                </p>
+              </div>
+
+              <div class="absolute right-0 top-[35%] flex-shrink-0 bg-indigo-50 group-hover:bg-gray-100 dark:bg-gray-600/90 dark:group-hover:bg-gray-500 rounded-full p-1 transition-all duration-300 group-hover:translate-x-1">
+                <svg
+                  class="size-5 text-gray-400 group-hover:text-sky-500 dark:group-hover:text-gray-300"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </div>
+            </div>
+
+          </Link>
+        ))}
+</div>
+    </>
+  )
+}

package/src/commands/templates/pages/pages/index.tsx

@@ -0,0 +1,26 @@
+import { t, Link } from 'duto'
+
+export { Html } from '@/components/html'
+
+export default function Index() {
+  return (
+    <div class="relative space-y-8">
+      <h1 class="title text-sky-gradient lg:mt-2">{t`title`}</h1>
+      <p class="sub-title">{t`description`}</p>
+      <div class="divide-y divide-gray-300 dark:divide-zinc-700/70">
+        {[
+          ['https://hub.bi/docs/duto', t`gotodocs`],
+          ['/blog', t`Blog`],
+        ].map(([href, label]) => (
+          <Link
+            href={href}
+            class="group flex items-center justify-between gap-4 py-4 px-2.5"
+          >
+            <span class="font-semibold group-hover:text-sky-gradient">{label}</span>
+            <span class="text-lg mr-3 transition-transform group-hover:text-sky-600 dark:group-hover:text-sky-300 group-hover:translate-x-1">→</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/commands/templates/pages/pages/layout.tsx

@@ -0,0 +1,26 @@
+import type { ComponentChildren } from 'preact'
+
+import LocaleSelect from '@/components/locale-select'
+import ThemeSelect from '@/components/theme-select'
+
+export default function Layout({ children }: { children: ComponentChildren }) {
+  return (
+    <>
+      <div class='absolute top-10 right-10'>
+        <ThemeSelect class='mr-5' />
+        <LocaleSelect />
+      </div>
+
+      <main class="flex flex-col justify-center items-center px-6 py-16 min-h-[calc(100vh-3.75rem)]" children={children} />
+
+      <footer class="py-[1.1rem] relative text-base lex flex-row items-center mx-auto">
+        <a href="https://hub.bi?ref=duto" class="no-underline group flex items-center justify-center" target="_blank" rel="noopener noreferrer">
+          Powered by
+          <span class="group-hover:underline flex items-center">
+            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" class="mx-1 text-xl" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16.555 5.412a8.028 8.028 0 0 0-3.503-2.81 14.899 14.899 0 0 1 1.663 4.472 8.547 8.547 0 0 0 1.84-1.662ZM13.326 7.825a13.43 13.43 0 0 0-2.413-5.773 8.087 8.087 0 0 0-1.826 0 13.43 13.43 0 0 0-2.413 5.773A8.473 8.473 0 0 0 10 8.5c1.18 0 2.304-.24 3.326-.675ZM6.514 9.376A9.98 9.98 0 0 0 10 10c1.226 0 2.4-.22 3.486-.624a13.54 13.54 0 0 1-.351 3.759A13.54 13.54 0 0 1 10 13.5c-1.079 0-2.128-.127-3.134-.366a13.538 13.538 0 0 1-.352-3.758ZM5.285 7.074a14.9 14.9 0 0 1 1.663-4.471 8.028 8.028 0 0 0-3.503 2.81c.529.638 1.149 1.199 1.84 1.66ZM17.334 6.798a7.973 7.973 0 0 1 .614 4.115 13.47 13.47 0 0 1-3.178 1.72 15.093 15.093 0 0 0 .174-3.939 10.043 10.043 0 0 0 2.39-1.896ZM2.666 6.798a10.042 10.042 0 0 0 2.39 1.896 15.196 15.196 0 0 0 .174 3.94 13.472 13.472 0 0 1-3.178-1.72 7.973 7.973 0 0 1 .615-4.115ZM10 15c.898 0 1.778-.079 2.633-.23a13.473 13.473 0 0 1-1.72 3.178 8.099 8.099 0 0 1-1.826 0 13.47 13.47 0 0 1-1.72-3.178c.855.151 1.735.23 2.633.23ZM14.357 14.357a14.912 14.912 0 0 1-1.305 3.04 8.027 8.027 0 0 0 4.345-4.345c-.953.542-1.971.981-3.04 1.305ZM6.948 17.397a8.027 8.027 0 0 1-4.345-4.345c.953.542 1.971.981 3.04 1.305a14.912 14.912 0 0 0 1.305 3.04Z"></path></svg>
+            HUB</span>
+        </a>
+      </footer>
+    </>
+  )
+}

package/src/commands/templates/pages/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="840" height="840" viewBox="0 0 840 840" fill="none"><style>path{color:black}@media (prefers-color-scheme: dark){path{color:#c6c6c6}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M832.965 446.25C837.573 438.269 839.999 429.216 839.999 420C839.999 410.784 837.573 401.731 832.965 393.75L645.173 78.75C640.565 70.7692 633.938 64.1418 625.957 59.534C617.976 54.9262 608.923 52.5002 599.708 52.5H240.293C231.077 52.5002 222.024 54.9262 214.043 59.534C206.063 64.1418 199.435 70.7692 194.828 78.75L7.03518 393.75C2.42735 401.731 0.001544 410.784 0.001544 420C0.001544 429.216 2.42735 438.269 7.03518 446.25L194.828 761.25C199.435 769.231 206.063 775.858 214.043 780.466C222.024 785.074 231.077 787.5 240.293 787.5H599.708C608.923 787.5 617.976 785.074 625.957 780.466C633.938 775.858 640.565 769.231 645.173 761.25L832.965 446.25Z" fill="currentColor"></path></svg>

package/src/commands/templates/pages/style.css

@@ -0,0 +1,127 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {@apply border-border}
+  /* body {@apply bg-background text-foreground} */
+}
+
+@utility s {
+  @apply w-[--value] h-[--value];
+}
+
+@variant children (& > *);
+
+
+@theme {
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla",
+    sans-serif;
+  --font-mono:
+    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --font-serif:
+    Georgia, Garamond, Cambria, "Times New Roman", Times, ui-serif, serif;
+
+  --font-pixel: PixAntiqua, ui-sans-serif, system-ui, sans-serif;
+  /* Medium headers*/
+  /* sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; */
+
+  --color-black: #0D0F14;
+  --color-white: #fff;
+  --color-text: #F041FF;
+
+  --color-accent: var(--color-gray-100);
+  /* --color-primary: #3F224D; */
+  --color-muted: #545864;
+
+  --color-border: var(--color-gray-200);
+  --color-grid: #e5e5e5;
+
+  --color-blue: #3245FF;
+  --color-purple: #BC52EE;
+  --color-purple-dark: #3F224D;
+  --color-red: #D83333;
+  --color-pink: #F041FF;
+  --color-pink-light: #E8C4F9;
+  --color-orange: #F8E42E;
+  --color-yellow: #FF7D54;
+  --color-hover: #E8C4F9;
+  --color-green: #4AF2C8;
+
+  --color-dark-100: #858B98;
+  --color-dark-300: #343841;
+  --color-dark-400: #18191E;
+  --color-dark-500: #4B4B4B;
+  --color-dark-600: #2C2C2C;
+  --color-dark-700: #11172A;
+  --color-dark-800: #0C0F19;
+  --color-dark-900: #060913;
+
+
+  --sky-grad-1: rgb(2, 132, 199);
+  --sky-grad-2: rgb(14, 165, 233);
+  --sky-grad-3: rgb(56, 189, 248);
+}
+
+.dark {
+  --color-white: #F2F6FA;
+
+  --color-accent: #17191E;
+  --color-primary: #BC52EE;
+  --color-muted: #BFC1C9;
+
+  --color-border: color-mix(in oklab, var(--color-gray-100) 10%, transparent);
+
+
+  --sky-grad-1: rgb(112, 209, 255);
+  --sky-grad-2: rgb(173, 228, 255);
+  --sky-grad-3: rgb(219, 243, 255);
+}
+
+/* App styles */
+
+html, body {
+  @apply overscroll-y-none;
+  /* font-size-adjust: ex-height 0.5; */
+
+  /* Standardize line height across different system fonts */
+  /* line-height: 1.5; */
+  /* Consider setting letter-spacing for more consistent text blocks */
+  /* letter-spacing: 0.01em; */
+
+  /* Advanced font metric overrides (modern browsers only) */
+  /* ascent-override: 90%;
+  descent-override: 25%;
+  line-gap-override: 0%; */
+}
+
+.text-sky-gradient,
+.group-hover\:text-sky-gradient:is(:where(.group):hover *),
+.hover\:text-sky-gradient:hover {
+  @apply bg-clip-text text-transparent;
+  background-image: radial-gradient(
+    138.06% 1036.51% at 95.25% -2.54%,
+    var(--sky-grad-1) 14.06%,
+    var(--sky-grad-2) 51.02%,
+    var(--sky-grad-3) 79.09%
+  );
+}
+
+/* .text-sky-gradient,
+.group-hover\:text-sky-gradient:is(:where(.group):hover *),
+.hover\:text-sky-gradient:hover
+{
+  @apply bg-clip-text text-transparent;
+  background-image: radial-gradient(138.06% 1036.51% at 95.25% -2.54%, rgb(112, 209, 255) 14.06%, rgb(173, 228, 255) 51.02%, rgb(219, 243, 255) 79.09%);
+} */
+
+.title {
+  @apply text-4xl lg:text-[3.5rem] leading-[1.1] font-semibold tracking-tight text-balance
+}
+
+.sub-title {
+  @apply mt-4 max-w-[60ch] text-lg text-balance md:mt-6 md:text-xl
+}

package/src/commands/templates/pages/tsconfig.json

@@ -0,0 +1,56 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "bun-types", "node"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "useDefineForClassFields": true,
+
+    /* Linting */
+    "strict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"],
+      // "@duto/*": ["./@duto/*"],
+      // "duto/*": ["./node_modules/duto/*"],
+      // "~icons/*": ["./@iconify-json/*"],
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "components",
+    "configs",
+    "enums",
+    "libs",
+    "i18n",
+    "layouts",
+    "pages",
+    "public",
+    "tests/**/*",
+    "utils",
+    "i18n.ts",
+    "i18n.tsx",
+    "config.ts",
+    "types.ts"
+  ],
+  "exclude": [
+    ".duto",
+    "node_modules"
+  ]
+}

package/src/commands/templates/pages/types.ts

@@ -0,0 +1,8 @@
+
+export type Posts = Post[]
+export type Post = {
+  id: number | string,
+  userid?: string,
+  title: string,
+  body: string,
+}

package/src/commands/templates/server/base/.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+# [*.{js,jsx,ts,tsx,json,yaml,yml}]
+# Inherits all settings from [*] and applies to these extensions
+
+[*.{json,jsonc}]
+insert_final_newline = false
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Dockerfile]
+indent_size = 4

package/src/commands/templates/{base → server/base}/README.md

@@ -1,4 +1,4 @@
-# Duto - Starter Template
+# Duto Server - Starter Template
 
 This template should help get you started developing.
 

package/src/pages/cli/commands/dev.ts

@@ -26,20 +26,26 @@ export default command({
 		name: 'dev',
 		description: '🧪  Start dev server\n',
 	}, // @ts-ignore
-	args,
+  args: {
+    ...args,
+		minify: {
+			description: 'Minify the result',
+			type: 'boolean',
+			default: true,
+		},
+  },
   async run({ args }) {
     const config = await getConfig()
     const duto = getEnv('duto', {})
     const desiredPort = Number(args.port || duto?.dev?.port || 3000)
     const host = String(args.host || duto?.dev?.host || 'localhost')
-    // const desiredPort = args.port ? Number(args.port) : (config?.preview?.port ? Number(config.preview.port) : 3000)
-    // const host = args.host ? String(args.host) : (config?.preview?.host ? String(config.preview.host) : 'localhost')
 
+    const minify = args.minify ?? true
     let buildProcess: Bun.Subprocess | null = null
 
     const _build = async () => {
       if (buildProcess) await killProcess(buildProcess)
-      buildProcess = Bun.spawn(['duto', 'build', '--hmr'], {stdin: 'inherit', stdout: 'ignore', stderr: 'inherit'})
+      buildProcess = Bun.spawn(['duto', 'build', '--hmr', minify ? '' : '--no-minify'], {stdin: 'inherit', stdout: 'ignore', stderr: 'inherit'})
 
       try {
         const code = await buildProcess.exited

package/src/pages/cli/utils.ts

@@ -8,6 +8,7 @@ import config from '#/compiler/vite-plugin'
 import { _root } from '@/utils'
 import { match, match404 } from '#/compiler/routes'
 import type { Metadata, PluginOptions } from '#/compiler/types'
+import { EXTENSIONS_LIST, NF_NAMES } from '#/compiler/constants'
 
 export async function getConfig(name = 'config'): Promise<UserConfig & PluginOptions> {
   let opts = {} as UserConfig
@@ -16,18 +17,6 @@ export async function getConfig(name = 'config'): Promise<UserConfig & PluginOpt
   return config(opts)
 }
 
-// export const formatTime = (ms: number) => {
-//   if (ms < 1000) return `${ms}ms`
-//   return `${(ms / 1000).toFixed(2)}s`
-// }
-export const formatTime = (ms: number) => {
-  if (ms < 0.001) return `${(ms * 1_000_000).toFixed(2)}ns`
-  if (ms < 1) return `${(ms * 1000).toFixed(2)}µs`
-  if (ms < 1000) return `${ms.toFixed(2)}ms`
-  if (ms < 60000) return `${(ms / 1000).toFixed(2)}s`
-  return `${Math.floor(ms / 60000)}m ${((ms % 60000) / 1000).toFixed(1)}s`
-}
-
 const statusColorMap = new Map([
   [5, red],
   [4, yellow],
@@ -93,29 +82,23 @@ export function preview(
         let file = Bun.file(join(_root, dist, path))
 
         if (await file.exists()) {
-          // route = path
           res = new Response(file)
         } else {
           matched = match(path)
-
-          // console.log(matched)
-          route = matched?.name || match404(meta, path)
-
+          const r404 = match404(meta, path) || '404'
+          route = matched?.name || r404
           res = new Response(null, { status: 404 })
 
-          // for (const asset of path !== '/' && matched && matched.kind === 'exact' ? [
-          //   path,
-          //   join(path, 'index'),
-          // ] : ['index']) {
           for (const asset of [
             path,
             join(path, 'index'),
+            r404,
             'index',
           ]) {
             file = Bun.file(join(_root, dist, asset +'.html'))
 
             if (await file.exists()) {
-              // if (route === '/' || !route) route = asset
+              NF_NAMES.includes(asset.split('/').pop()!) && (route = r404)
               res = new Response(file)
               break
             }
@@ -128,7 +111,8 @@ export function preview(
         status = 500
         throw err
       } finally {
-        if (route || matched) {
+        if (EXTENSIONS_LIST.has(path.split('.').pop()!.toLowerCase())) {
+        } else if (route || matched) {
           const elapsed = `${Math.max(1, Math.ceil(performance.now() - start))}ms`
 
           console.log([