Criar páginas web deveria ser simples, ne?

Duto é um framework minimalista para artesãos que desejam manter as coisas simples.

blog/[slug].tsx

import { t, Link } from 'duto'
import { posts } from '~/blog'
import Article from '@/views/blog/article'
import NotFound from '@/views/not-found'
 
export function getStaticProps() {
  return posts.map(post => ({ slug: post.id, post }))
}
 
export async function getProps({ slug }: { slug?: string }){
  const post = await (
    await fetch('https://jsonplaceholder.typicode.com/posts/'+ slug).json()
  )
 
  return { post }
}
 
export type Props = {
  post?: Post | null,
  slug?: string,
}
 
export default function BlogPost({ post, slug }: Props){
  if (!post?.title)
    return <NotFound />
 
  return <Article post={post} />
}

Conheça o projeto

Características

Páginas estáticas

/blog.tsxgetStaticProps()

Páginas dinâmicas pré-renderizadas

/blog/[slug].tsxgetStaticProps()

Páginas dinâmicas no lado do cliente

/blog/[slug].tsxgetProps()

Página de erro 404 no lado do cliente

/blog/not-found.tsx

Hierarquia de rotas eficiente

/not-found.tsx

Página "catch-all" sem SSR!

/blog/[...slug].tsx

Rotas "catch-all" opcionais sem SSR!

/blog/[[...slug]].tsx

Integração simples de traduções (i18n)

t`features`

Por que "Duto"?

Duto [ˈdu.tu] — uma palavra derivada do latim ductus ("condução"), significa: cano, tubo, canal por onde algo passa.

Curiosidade: Inicialmente o projeto se chamava "Void", mas Evan You (Criador do Vue, Vite, Oxc, etc.), pegou o nome para o void.cloud, como alternativa nomeei de "Duto", por ser um "Void abrasileirado" — um cano vazio por onde flui a criatividade (e as gambiarras também) 🧉🗿.

Sobre

Duto é um framework minimalista, focado em páginas do lado do cliente.

Depois de frustrações no fluxo de trabalho com os frameworks atuais (Next, Nuxt, SvelteKit, Astro, etc.), decidimos reimaginar como um bom framework front-end deveria se comportar. Então nasceu esse projeto!

Nos bastidores usamos Vite, Preact e Tailwind.

Esta é uma página puramente estática - sem getStaticProps() ou getProps(). É renderizado no build.