Modelo do encurtador em Next.js

Gerado a partir de deploy-templates/nextjs (dado.cloud 4c2a882).
2026-10-21 12:26:50 +00:00
commit b0ba007020
14 changed files with 2069 additions and 0 deletions
@@ -0,0 +1,76 @@
+import { headers } from 'next/headers';
+
+import { enderecoBase, listarLinks, paraJson } from '@/lib/links';
+
+import pacote from '../package.json';
+import Encurtador from './Encurtador';
+
+// A página lê os links e as variáveis a cada visita (nada de HTML congelado no build).
+export const dynamic = 'force-dynamic';
+
+// Variável de ambiente de exemplo: na Dado, ela se configura no painel do app.
+const MENSAGEM = process.env.MENSAGEM_BOAS_VINDAS || 'Defina a variável MENSAGEM_BOAS_VINDAS para trocar este texto.';
+// Hora em que o processo do servidor subiu (= a publicação mais recente).
+const INICIO = new Date(Date.now() - process.uptime() * 1000);
+const fusoBrasilia = { timeZone: 'America/Sao_Paulo' } as const;
+const INICIO_FORMATADO = `${INICIO.toLocaleDateString('pt-BR', fusoBrasilia)} às ${INICIO.toLocaleTimeString('pt-BR', {
+  ...fusoBrasilia,
+  hour: '2-digit',
+  minute: '2-digit',
+})} (horário de Brasília)`;
+
+export default async function Pagina() {
+  const base = enderecoBase(await headers());
+  const linksIniciais = listarLinks().map((link) => paraJson(link, base));
+
+  return (
+    <main className="pagina">
+      <header className="topo">
+        <span className="marca" aria-hidden="true">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+            <path d="M10 14l4-4M8.5 11.5l-1.8 1.8a3.2 3.2 0 004.5 4.5l1.8-1.8M15.5 12.5l1.8-1.8a3.2 3.2 0 00-4.5-4.5l-1.8 1.8" />
+          </svg>
+        </span>
+        <h1>Encurtador de links</h1>
+      </header>
+      <p className="lead">Cole um link comprido e receba um endereço curto, pronto para compartilhar.</p>
+
+      <Encurtador linksIniciais={linksIniciais} />
+
+      <p className="aviso">
+        Os links ficam na memória do app e somem quando ele é publicado de novo. Para guardar os links de vez,{' '}
+        <a href="https://app.dado.cloud/deploys" target="_blank" rel="noopener">
+          ligue um Postgres
+        </a>
+        .
+      </p>
+
+      <section className="sobre cartao" aria-labelledby="sobre-titulo">
+        <h2 id="sobre-titulo">Sobre este deploy</h2>
+        <dl>
+          <dt>Runtime</dt>
+          <dd>{`Next.js ${pacote.dependencies.next} · Node.js ${process.versions.node}`}</dd>
+          <dt>Região</dt>
+          <dd>Rodando em São Paulo</dd>
+          <dt>No ar desde</dt>
+          <dd>
+            <time dateTime={INICIO.toISOString()}>{INICIO_FORMATADO}</time>
+          </dd>
+          <dt>Mensagem</dt>
+          <dd>{MENSAGEM}</dd>
+        </dl>
+        <p className="dica">
+          A mensagem vem da variável <code>MENSAGEM_BOAS_VINDAS</code>. Troque o valor nas configurações do app, no
+          painel, e publique de novo.
+        </p>
+      </section>
+
+      <footer className="rodape">
+        Publicado na{' '}
+        <a href="https://dado.cloud" target="_blank" rel="noopener">
+          Dado
+        </a>
+      </footer>
+    </main>
+  );
+}