duto 0.260906.0 → 0.261001.0

package/README.md

@@ -1,25 +1,47 @@
-<h1 align="left">Duto<br/><a href="https://pr.new/attla/duto"><img align="right" src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a><a href="https://npmjs.com/package/duto"><img align="right" src="https://img.shields.io/npm/v/duto.svg" alt="npm package"></a></h1>
+<h1 align="left">
+  ⛳️ Duto &nbsp;
+  <a href="https://npmjs.com/package/duto"><img  src="https://img.shields.io/npm/v/duto.svg" alt="npm package"></a>
+  <br/>
+  <a href="https://pr.new/attla/duto"><img align="right" src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a>
+</h1>
 
 > ⚠️ Duto is under ALFA development — expect updates, rough edges, and occasional breack changes.
 <br/>
 
-This framework is fully geared towards the serverless world, specifically for static pages.
-
-- 💡 SSG
-- ⚡️ Dynamic static routes
-- 📦 Optimized Build
-
-[Read the Docs to Learn More](https://github.com/attla/duto/blob/main/DOCS.md)
+Duto is minimalist framework, focused on client-side pages and serverless APIs.
+
+Principles:
+ - No vendor lock-in! Deploy anywhere with: `duto deploy`
+ - Developer happiness as a design constraint
+ - Optimized by default!
+
+Pages features:
+ - Static pages `/blog.tsx` `getStaticProps()`
+ - Prerendered dynamic pages `/blog/[slug].tsx` `getStaticProps()`
+ - Dynamic pages on client-side `/blog/[slug].tsx` `getProps()`
+ - Not found page on client-side `/blog/not-found.tsx`
+ - Efficient route hierarchy `/not-found.tsx`
+ - Catch-all page whitout SSR! `/blog/[...slug].tsx`
+ - Optional catch-all routes whitout SSR! `/blog/[[...slug]].tsx`
+ - Simple internationalization (i18n) integration `tˋfeaturesˋ`
+
+Server features:
+ - Instant server and cold starts
+ - Optimized build, greater efficiency in less bundle size
+ - Built-in core shims for compatibility with custom runtimes
+ - Fully typed OpenAPI documentation
+ - Powerful request validations
+ - Fine-grained authentication
+
+[Read the Docs to Learn More](https://hub.bi/docs/duto)
 
 ## Ecosystem Packages
 
 | Package | Version | Description |
 | -: | :- | :- |
-| [rajt](https://github.com/attla/rajt) | [![rajt version](https://img.shields.io/npm/v/rajt.svg?label=%20)](https://npm.im/rajt) | 🧱 The core of Rajt serverless framework. |
-| [create-rajt](https://github.com/attla/create-rajt) | [![create-rajt version](https://img.shields.io/npm/v/create-rajt.svg?label=%20)](https://npm.im/create-rajt) | 📁 CLI tool for create new Rajt projects, from starter templates. |
-| [forj](https://github.com/attla/forj) | [![forj version](https://img.shields.io/npm/v/forj.svg?label=%20)](https://npm.im/forj) | 🗂️ Just another query builder in typescript |
-| [t0n](https://github.com/attla/t0n) | [![t0n version](https://img.shields.io/npm/v/t0n.svg?label=%20)](https://npm.im/t0n) | 🧰 Collection of elegant typescript resources for web artisans. |
+| [forj](https://github.com/attla/forj) | [![forj version](https://img.shields.io/npm/v/forj.svg?label=%20)](https://npm.im/forj) | 🗂️ Fast and lightweight query builder in typescript |
 | [cripta](https://github.com/attla/cripta) | [![cripta version](https://img.shields.io/npm/v/cripta.svg?label=%20)](https://npm.im/cripta) | 🧛 A layer of encryption a little too judicious. |
+| [t0n](https://github.com/attla/t0n) | [![t0n version](https://img.shields.io/npm/v/t0n.svg?label=%20)](https://npm.im/t0n) | 🧰 Collection of elegant typescript resources for web artisans. |
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "duto",
   "description": "All-in-one serverless framework for web artisans",
-  "version": "0.260906.0",
+  "version": "0.261001.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
@@ -25,6 +25,10 @@
     "./length": "./src/server/utils/length.ts"
   },
   "dependencies": {
+    "@inquirer/confirm": "^5.1.8",
+    "@inquirer/input": "^4.1.8",
+    "@inquirer/select": "^4.1.0",
+    "nanospinner": "^1.2.2",
     "@hono/node-server": "^1.19.11",
     "@hono/standard-validator": "^0.2.2",
     "@hono/zod-validator": "^0.7.6",
@@ -38,7 +42,6 @@
     "cripta": "0.x",
     "dotenv": "^16.5.0",
     "esbuild": "^0.25.2",
-    "filesize": "^11.0",
     "forj": "0.x",
     "hono": "^4.13.7",
     "hono-openapi": "^1.3.0",
@@ -50,6 +53,7 @@
     "preact-render-to-string": "^6.6.6",
     "quansync": "^0.2.11",
     "t0n": "0.x",
+    "vite": "^8.0.0",
     "wouter-preact": "^3.10.0",
     "wrangler": "^4.128.0",
     "zod": "^4.3.6",
@@ -57,7 +61,9 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20260113.0",
-    "@types/node": "^26.4.1",
+    "@minify-html/node": "^0.18.1",
+    "@preact/preset-vite": "^2.10.5",
+    "@tailwindcss/vite": "^4.3.1",
     "bun-types": "^1.4.0",
     "typescript": "^5.9.3"
   },

package/src/cli.ts

@@ -16,21 +16,20 @@ global.__st = performance.now()
 
 import { join } from 'pathe'
 import { cli } from 't0n/cli'
-import { Envir } from 't0n'
+import { setEnv } from 't0n'
 import { version } from '!/package.json'
 import { _root, _duto } from './utils'
 
-let commands = {
-  // new:
-  // upgrade:
-}
+const cmd = (c: string) => join(import.meta.dirname, 'commands', c)
+
 let pkg
+let commands = {}
 try {
   pkg = await import(join(_root, 'package.json'))
   if (!pkg || !pkg.duto || !pkg?.duto?.type || !['pages', 'server'].includes(pkg.duto.type))
     exit('Error: invalid app type.')
 
-  Envir.set('duto', pkg.duto)
+  setEnv('duto', pkg.duto)
   commands = (await import(join(_duto, pkg.duto.type, 'cli')))?.default
 } catch {}
 
@@ -38,5 +37,9 @@ cli({
   name: 'duto',
   description: 'Duto',
   version,
-  commands,
+  commands: {
+    new: cmd('new'),
+    upgrade: cmd('upgrade'),
+    ...commands,
+  },
 })

package/src/commands/new.ts

@@ -0,0 +1,172 @@
+import { basename, join, resolve } from 'pathe'
+import { command } from 't0n/cli'
+import { bold, dim, red } from 't0n/color'
+import { event, step, rn } from 't0n/log'
+import { _root } from '@/utils'
+
+import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
+import confirm from '@inquirer/confirm'
+import input from '@inquirer/input'
+import select from '@inquirer/select'
+import { createSpinner } from 'nanospinner'
+import { exit } from 'node:process'
+
+const types = ['pages', 'server']
+const templates = [
+  'aws',
+  'workerd',
+  'vercel',
+]
+
+const renameFiles: Record<string, string | undefined> = {
+  _gitignore: '.gitignore',
+  _gitkeep: '.gitkeep',
+}
+
+
+function mkdirp(dir: string) {
+  try {
+    mkdirSync(dir, { recursive: true })
+  } catch (e) {
+    if (e instanceof Error) {
+      if ('code' in e && e.code === 'EEXIST') {
+        return
+      }
+    }
+    throw e
+  }
+}
+
+function copy(src: string, dest: string) {
+  const stat = statSync(src)
+  stat.isDirectory()
+    ? copyDir(src, dest)
+    : copyFileSync(src, dest)
+}
+function copyDir(srcDir: string, destDir: string) {
+  mkdirSync(destDir, { recursive: true })
+  for (const file of readdirSync(srcDir)) {
+    const srcFile = resolve(srcDir, file)
+    const destFile = resolve(destDir, file)
+    copy(srcFile, destFile)
+  }
+}
+
+export default command({
+	meta: {
+		name: 'new',
+		description: '📄 Create new project with duto\n',
+	},
+  args: {
+    install: {
+			alias: 'i',
+      description: 'Install dependencies',
+      type: 'boolean',
+      default: false,
+    },
+    type: {
+      description: 'Project type',
+      type: 'enum',
+      options: types,
+    },
+    template: {
+			alias: 't',
+      description: 'Template to use',
+      type: 'enum',
+      options: templates,
+    },
+  },
+	async run({ args }) { // @ts-ignore
+    let dir = args._[0]
+    if (dir) {
+      step(bold('Using target directory: '+ dim('/'+ dir.replace(/^\//, ''))))
+    } else {
+      dir = await input({ message: 'Target directory', default: _root })
+      if (!dir.startsWith(_root))
+        dir = join(_root, dir)
+    }
+
+    const type = args.type || (await select({
+      loop: true,
+      message: 'Which type of project is it?',
+      choices: types.map(v => ({ title: v, value: v})),
+    }))
+
+    if (!type)
+      throw new Error('No type selected')
+    if (!types.includes(type))
+      throw new Error(`Invalid type selected: ${type}`)
+
+    const dirs = [type === 'server' ? 'base' : '']
+    const name = basename(/^(\.\/|\.\\|\.)$/.test(dir) ? _root : dir)
+
+    if (type === 'server') {
+      const template = args.template || (await select({
+        loop: true,
+        message: 'Which template do you want to use?',
+        choices: templates.map(v => ({ title: v, value: v})),
+        default: 'workerd',
+      }))
+
+      if (!template)
+        throw new Error('No template selected')
+      if (!templates.includes(template))
+        throw new Error(`Invalid template selected: ${template}`)
+
+      dirs.push(template)
+    }
+
+    if (
+      existsSync(dir) && readdirSync(dir).length > 0
+      && !(await confirm({ message: 'Directory not empty. Continue?', default: false }))
+    ) {
+      process.exit(1)
+    } else {
+      mkdirp(dir)
+    }
+
+    const spinner = createSpinner('Cloning project..').start()
+    for (const d of dirs) {
+      const templateDir = resolve(import.meta.dir, `./templates/${type}/`+ d)
+      const files = readdirSync(templateDir)
+      for (const file of files)
+        copy(join(templateDir, file), join(dir, renameFiles[file] ?? file))
+    }
+
+    spinner.success(bold('Cloned project'))
+
+    const pkgPath = join(dir, 'package.json')
+    if (existsSync(pkgPath)) {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
+      pkg.name = name
+      writeFileSync(join(dir, 'package.json'), JSON.stringify(pkg, null, 2))
+    }
+
+
+    const install = args.install || (await confirm({ message: 'Install dependencies?', default: false }))
+    if (install) {
+      const spinner2 = createSpinner('Installing project dependencies').start()
+      const proc = Bun.spawn(['bun', 'i'], { stdout: 'ignore', stderr: 'inherit' })
+      const procExit = await proc.exited
+
+      if (procExit === 0) {
+        spinner2.success(bold('Installed dependencies'))
+      } else {
+        spinner2.stop({
+          mark: red('×'),
+          text: 'Failed to install project dependencies',
+        })
+        exit(procExit)
+      }
+    }
+
+    event(bold('Project successfully created'))
+    if (dir != _root) {
+      rn()
+      console.log(
+        dim('Get started with:'),
+        bold(`cd ${name} && duto dev`),
+      )
+    }
+	},
+})

package/src/commands/templates/pages/.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/pages/README.md

@@ -0,0 +1,21 @@
+# Duto Pages - Starter Template
+
+This template should help get you started developing.
+
+## Install dependencies
+
+To install, run:
+
+```bash
+bun i
+```
+
+## Development environment
+
+Test the application locally in an environment identical to production using the command:
+
+```bash
+duto dev
+```
+
+[Read the Full Docs to Learn More](https://hub.bi/docs/duto)

package/src/commands/templates/pages/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/src/commands/templates/pages/components/locale-select.tsx

@@ -0,0 +1,59 @@
+import { useSignal } from '@preact/signals'
+import { options } from '@/i18n'
+import { local, getLocale, setLocale, isPrefixed, r } from 'duto'
+import { useLayoutEffect } from 'preact/hooks'
+
+import Select from './select'
+
+function Languages(props: any) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={[props.class || '', props.className || ''].filter(Boolean).join(' ')}><path d="m5 8 6 6" /><path d="m4 14 6-6 2-3" /><path d="M2 5h12" /><path d="M7 2h1" /><path d="m22 22-5-10-5 10" /><path d="M14 18h6" /></svg>
+  )
+}
+export default function LocaleSelect({ class: className = '' }) {
+  const localeOptions = Object.entries(options).map(([value, label]) => ({ label, value }))
+  const selectedValue = useSignal(getLocale())
+  let unsubscribe: (() => void) | null = null
+  const handle = (e: any, lang?: string) => {
+    lang ??= getLocale()
+    selectedValue.value = lang
+  }
+
+  useLayoutEffect(() => {
+    unsubscribe = local.subscribe('lang', e => !isPrefixed() && handle(null, e.val as string))
+    const lang = getLocale()
+    selectedValue.value = lang
+
+    window.addEventListener('popstate', handle)
+    return () => {
+      window.removeEventListener('popstate', handle)
+      unsubscribe?.()
+    }
+  }, [])
+
+  const handleChange = async (e: Event) => {
+    const target = e.target as HTMLSelectElement
+    if (target) {
+      await setLocale(target.value)
+      selectedValue.value = target.value
+      isPrefixed() && r((window?.location?.pathname || '').split('/').filter(Boolean).slice(1).join('/'), target.value)
+    }
+  }
+
+  const containerClasses = [
+    'locale-select overflow-hidden text-ellipsis p-1 rounded-lg hover:bg-neutral-200 hover:text-zinc-900',
+    className
+  ].filter(Boolean).join(' ')
+
+  return (
+    <Select
+      Icon={Languages}
+      options={localeOptions}
+      value={selectedValue.value}
+      class={'outline-none text-ellipsis absolute inset-0 opacity-0 cursor-pointer' + className}
+      containerClass={containerClasses}
+      id="locale-select"
+      onchange={handleChange}
+    />
+  )
+}

package/src/commands/templates/pages/components/select.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } from 'preact/compat'
+
+type OptionObject = {
+  label: string
+  value: string
+}
+
+type Option =
+  | OptionObject
+  | [value: string, label: string]
+
+type Props = {
+  placeholder?: string,
+  value?: string,
+  Icon?: any,
+  // icon?: string,
+  id?: string,
+  class?: string,
+  containerClass?: string,
+  options: Record<string, Option[]> | Option[],
+  onchange?: (e: Event) => void,
+  onclick?: (e: Event) => void,
+  required?: boolean,
+  ref?: (el: HTMLSelectElement | null) => void,
+}
+
+function renderOption(op: Option, value: string) {
+  if (Array.isArray(op)) {
+    const [val, label] = op
+    return <option key={val} value={val}>{label}</option>
+  }
+
+  return <option key={op.value} value={op.value}>{op.label}</option>
+}
+
+export default forwardRef<HTMLSelectElement, Props>(function Select({
+  placeholder,
+  value = '',
+  Icon,
+  id,
+  class: className,
+  containerClass,
+  options,
+  ...props
+}, ref) {
+
+  return (
+    <label
+      htmlFor={id}
+      class={[
+        'relative inline-flex items-center cursor-pointer select',
+        containerClass,
+      ].filter(Boolean).join(' ')}
+    >
+      {Icon && <Icon class="size-6 shrink-0" />}
+      {/* {icon && (
+        <Icon
+          name={icon}
+          class="icon label-icon pointer-events-none"
+        />
+      )} */}
+
+      <select
+        ref={ref}
+        id={id}
+        value={value}
+        autocomplete="off"
+        class={className}
+        {...props}
+      >
+        {placeholder && (
+          <option disabled value="">{placeholder}</option>
+        )}
+
+        {Array.isArray(options)
+          ? options.map(op => renderOption(op, value))
+          : Object.entries(options).map(([label, opts]) => (
+              <optgroup
+                key={label}
+                label={label}
+              >
+                {opts.map(op => renderOption(op, value))}
+              </optgroup>
+            ))}
+      </select>
+
+      {/* <Icon
+        name="lucide:chevron-down"
+        class="icon caret"
+        style="scale:115% 115%"
+      /> */}
+    </label>
+  )
+})
+

package/src/commands/templates/pages/i18n/en.ts

@@ -0,0 +1,17 @@
+export default {
+  routes: {
+    about: 'about',
+    shop: 'shop',
+    notfound: 'not-found',
+  },
+  messages: {
+    title: 'Welcome to Duto',
+    description: 'A fast, lightweight framework that keeps things simple!',
+    gotodocs: 'Go to docs',
+    notfound: 'Page not found',
+    sorry404: 'Sorry, the page you are looking for does not exist.',
+    backhome: 'Back to homepage',
+    about: 'About',
+    shop: 'Shop',
+  },
+}

package/src/commands/templates/pages/i18n/index.ts

@@ -0,0 +1,19 @@
+export const fallbackLocale = 'pt-br'
+export const locales = ['en', 'pt-br']
+
+export const options = {
+  en: 'English',
+  'pt-br': 'Português (Brasil)',
+  // de: 'Deutsch',
+  // es: 'Español',
+  // 'zh-cn': '简体中文',
+  // 'zh-tw': '正體中文',
+  // fr: 'Français',
+  // hi: 'हिन्दी',
+  // ar: 'العربية',
+  // ja: '日本語',
+  // ko: '한국어',
+  // pl: 'Polski',
+  // ru: 'Русский',
+  // it: 'Italiano',
+}

package/src/commands/templates/pages/i18n/pt-br.ts

@@ -0,0 +1,17 @@
+export default {
+  routes: {
+    about: 'sobre',
+    shop: 'loja',
+    notfound: 'pagina-desconhecida',
+  },
+  messages: {
+    title: 'Bem-vindo ao Duto',
+    description: 'Um framework rápido e leve que mantém as coisas simples!',
+    gotodocs: 'Documentação',
+    notfound: 'Página não encontrada',
+    sorry404: 'Esta página pode ter sido excluída ou movida...',
+    backhome: 'Ir para página inicial',
+    about: 'Sobre',
+    shop: 'Loja',
+  },
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "duto-docs",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "duto": "workspace:*",
+    "@preact/signals": "catalog:",
+    "preact": "catalog:"
+  },
+  "devDependencies": {
+    "bun-types": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "duto": {
+    "type": "pages",
+    "platform": "workerd",
+    "dev": {
+      "port": 3000
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { t, Link } from 'duto'
+
+export default function NotFound() {
+  return (
+    <div class="flex flex-col items-center justify-center text-center w-full text-lg py-16">
+      <h1 class="text-sky-gratient text-mono text-7xl lg:text-8xl">404</h1>
+      <p class="body-large mb-2 mt-4 text-3xl lg:text-4xl">{t`notfound`}</p>
+      <p class="body lg:body-large">{t`sorry404`}</p>
+      <Link to="/" class="border-b border-current mt-8">{t`backhome`}</Link>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { t, Link } from 'duto'
+
+export default function Index() {
+  return (
+    <div class="relative">
+      <h1 class="title text-sky-gratient mt-10 lg:mt-2">{t`title`}</h1>
+      <p class="sub-title">{t`description`}</p>
+      <div class="flex flex-row gap-8 mt-10">
+
+        <Link href="https://hub.bi/docs/duto" class="group inline-flex shrink-0 items-center justify-center leading-6 font-medium select-none focus:outline-0 gap-2 px-4 py-2.5 text-base rounded-lg bg-white hover:bg-neutral-200 border border-gray-700 text-zinc-900">
+          {t`gotodocs`}<span class="ml-0.5 inline-block transition-transform group-hover:translate-x-1">→</span>
+        </Link>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,24 @@
+import type { ComponentChildren } from 'preact'
+
+import LocaleSelect from '@/components/locale-select'
+
+export default function Layout({ children }: { children: ComponentChildren }) {
+  return (
+    <div class="relative w-full max-w-full min-h-svh overflow-hidden flex flex-col flex-1 justify-center items-center bg-gradient-to-br from-zinc-800 to-zinc-950 text-gray-300 select-none">
+      <div class='absolute top-10 right-10'>
+        <LocaleSelect />
+      </div>
+
+      <main class="flex 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>
+    </div>
+  )
+}