\n```\n\nNesse exemplo, estamos combinando flexbox (classe `flex`) com unidades percentuais (`width: 100%`). Isso pode funcionar em navegadores mais recentes, mas causa problemas em versões mais antigas do Safari, como o iPhone 10, 11 e 12.\n\nPara solucionar esse problema, recomendamos substituir `w-full` por classes relacionadas ao flexbox:\n\n ```html\n
\n
\n
\n```\n\nIsso garantirá que o layout funcione corretamente em todos os navegadores.\n\n\nEstamos sempre acompanhando os novos projetos, coletando os apresentados e melhorando o template [Storefront](https://github.com/deco-sites/storefront)."},{"img":"https://user-images.githubusercontent.com/121065272/278023987-b7ab4ae9-6669-4e38-94b8-268049fa6569.png","date":"06/10/2023","path":"partials.md","descr":"Revolucionando o Desenvolvimento Web","title":"Partials","author":"Marcos Candeia, Tiago Gimenes","content":"[Fresh](https://fresh.deno.dev/), o framework web utilizado pela Deco, é conhecido por possibilitar a criação de páginas de altíssimo desempenho. Uma das razões pelas quais as páginas criadas na Deco são tão eficientes é devido à arquitetura de ilhas. Essa arquitetura permite que os desenvolvedores removam partes não interativas do pacote final de JavaScript, reduzindo a quantidade total de JavaScript na página e aliviando o navegador para realizar outras tarefas.\n\nNo entanto, uma das limitações dessa arquitetura é que páginas muito complexas, com muita interatividade e, portanto, muitas ilhas, ainda exigem uma grande quantidade de JavaScript. Felizmente, essa limitação agora é coisa do passado, graças à introdução dos Partials.\n\n## Como Funciona?\n\nOs Partials, inspirados no [htmx](https://htmx.org/docs/), operam com um runtime que intercepta as interações do usuário com elementos de botão, âncora e formulário. Essas interações são enviadas para nosso servidor, que calcula o novo estado da página e responde ao navegador. O navegador recebe o novo estado da IU em HTML puro, que é então processado e as diferenças são aplicadas, alterando a página para o seu estado final. Para obter informações mais detalhadas sobre os Partials, consulte a [documentação](https://github.com/denoland/fresh/issues/1609) do Fresh.\n\n## Partials em Ação\n\nEstamos migrando os componentes da loja da Deco para a nova solução de Partials. Até o momento, migramos o seletor de SKU, que pode ser visualizado em ação [aqui](http://storefront-vtex.deco.site/camisa-masculina-xadrez-sun-e-azul/p?skuId=120). Mais mudanças, como `infinite scroll` e melhorias nos filtros, estão por vir.\n\nOutra funcionalidade desbloqueada é a possibilidade de criar dobras na página. As páginas de comércio eletrônico geralmente são longas e contêm muitos elementos. Os navegadores costumam enfrentar problemas quando há muitos elementos no HTML. Para lidar com isso, foi inventada a técnica de dobra.\n\nA ideia básica dessa técnica é dividir o conteúdo da página em duas partes: o conteúdo acima e o conteúdo abaixo da dobra. O conteúdo acima da dobra é carregado na primeira solicitação ao servidor. O conteúdo abaixo da dobra é carregado assim que a primeira solicitação é concluída. Esse tipo de funcionalidade costumava ser difícil de implementar em arquiteturas mais antigas. Felizmente, embutimos essa lógica em uma nova seção chamada `Deferred`. Esta seção aceita uma lista de seções como parâmetro que devem ter seu carregamento adiado para um momento posterior.\n\nPara usar essa nova seção:\n\n1. Acesse o painel de administração da Deco e adicione a seção `Rendering > Deferred` à sua página.\n2. Mova as seções que deseja adiar para a seção `Deferred`.\n3. Salve e publique a página.\n4. Pronto! As seções agora estão adiadas sem a necessidade de alterar o código!\n\nVeja `Deferred` em ação neste [link](https://storefront-vtex.deco.site/home-partial).\n\n> Observe que, para a seção `Deferred` aparecer, você deve estar na versão mais recente do `fresh`, `apps` e deco!\n\nUma pergunta que você pode estar se fazendo agora é: Como escolher as seções que devo incluir no deferred? Para isso, use a aba de desempenho e comece pelas seções mais pesadas que oferecem o maior retorno!\n\nPara mais informações, veja nossas [docs](https://www.deco.cx/docs/en/developing-capabilities/interactive-sections/partial)"},{"img":"https://user-images.githubusercontent.com/121065272/278021874-91a4ffea-3a22-4631-a4b3-c21bbc056386.png","date":"31/08/2023","path":"case-lojas-torra","descr":"Como a Lojas Torra dobrou sua taxa de conversão após migrar o front do seu ecommerce para a deco.cx","title":"A nova fase da Lojas Torra com a deco.cx.","author":"Por Maria Cecilia Marques"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/5a07de58-ba83-4c6c-92e1-bea033350318","date":"23/01/2023","path":"apps-era.md","descr":"A era dos Apps!","title":"Como utilizar apps para adicionar funcionalidades aos seus sites.","author":"Marcos Candeia, Tiago Gimenes","content":"Nesta última versão, a deco está revolucionando a forma como você adiciona funcionalidades em seus **sites**. Dê as boas-vindas à era dos Apps.\n\n**O que são Apps?**\n\nAs Apps são poderosos conjuntos de capacidades de negócios que podem ser importados e configurados em sites deco. Uma App na deco é essencialmente uma coleção de vários componentes, como **Actions**, **Sections**, **Loaders**, **Workflows**, **Handlers**, ou quaisquer outros tipos de blocks que podem ser usados para estender a funcionalidade dos seus sites.\n\nCom as apps, você tem o poder de definir propriedades necessárias para a funcionalidade como um todo, como chaves de aplicação, nomes de contas entre outros.\n\n**Templates de Loja**\n\nIntroduzimos vários templates de lojas integradas com plataformas como - Vnda., VTEX e Shopify. Agora, você tem a flexibilidade de escolher o template que melhor se adapta às suas necessidades e pode criar facilmente sua loja a partir desses templates.\n\n
\n\n**DecoHub: Seu Hub de Apps**\n\nCom a estreia do DecoHub, você pode descobrir e instalar uma variedade de apps com base em suas necessidades do seu negócio. Se você é um desenvolvedor, pode criar seus próprios apps fora do repositório do [deco-cx/apps](http://github.com/deco-cx/apps) e enviar um PR para adicioná-los ao DecoHub.\n\n**Transição de Deco-Sites/Std para Apps**\n\nMigramos do hub central de integrações do [deco-sites/std](https://github.com/deco-sites/std) para uma abordagem mais modular com o [deco-cx/apps](http://github.com/deco-cx/apps). O STD agora está em modo de manutenção, portanto, certifique-se de migrar sua loja e seguir as etapas de instalação em nossa [documentação](https://www.deco.cx/docs/en/getting-started/installing-an-app) para aproveitar o novo ecossistema de Apps.\n\n**Comece a Usar os Apps Agora Mesmo!**\n\nDesenvolvedores, mergulhem em nosso [guia](https://www.deco.cx/docs/en/developing-capabilities/apps/creating-an-app) sobre como criar seu primeiro App no Deco. Para lojas existentes, faça a migração executando `deno run -A -r https://deco.cx/upgrade`.\n\nIsso é apenas o começo. Estamos trabalhando continuamente para aprimorar nosso ecossistema de Apps e explorar novos recursos, como transições de visualização e soluções de estilo.\n\nFiquem ligados e vamos construir juntos o futuro do desenvolvimento web!"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/450efa63-082e-427a-b218-e8b3690823cc","date":"14/04/2023","path":"como-a-deco-faz-sua-loja-converter-mais.md","descr":"Descubra como a nossa plataforma headless ajuda lojas virtuais a converter mais clientes, simplificando a criação e manutenção de lojas rápidas e personalizáveis. ","title":"Como a deco.cx faz sua loja converter mais","author":"Rafael Crespo","content":"Com dezenas de milhões de e-commerces, o varejo digital nunca enfrentou tanta competição. Por outro lado, com o grande aumento do número de consumidores online, nunca houve maior oportunidade pra crescer. Neste contexto, **oferecer experiências distintas é crucial.**\n\nContudo, mesmo as maiores marcas tem dificuldade construir algo além do previsível - páginas lentas e estáticas para todos os usuários. O resultado todos já sabem: **baixa conversão** -- pessoas deixam de comprar na loja porque não viram um conteúdo que lhe agrada ou porquê as páginas demoraram pra carregar em seus celulares.\n\nVamos entender primeiro porque isso acontece.\n\n\n## Por quê seu site performa mal?\n\n### 1. Sua loja demora para construir\n\nO time de tecnologia para ecommerce é pouco produtivo pois trabalha com frameworks e tech stacks complexas de aprender e fazer manutenção - e que vão ficando ainda mais complexas com o tempo, além do talento em tech ser escasso.\n\nPessoas desenvolvedoras gastam horas e horas cada mês com a complexidade acidental das tecnologias usadas: esperando o tempo de deploy, cuidando de milhares de linhas de código, ou lidando com dependências no npm - sobra pouco tempo para codar de verdade.\n\nResultado: o custo de novas funcionalidades é caro e a entrega é demorada, além de ser operacionalmente complexo contratar e treinar devs.\n\n\n### 2. Sua loja demora para carregar\n\nSabe-se que a velocidade de carregamento de uma página afeta drastricamente a taxa de conversão e o SEO. Em um site \"médio\", é esperado que cada 100ms a menos no tempo de carregamento de uma página, aumente em 1% a conversão.\n\nAinda assim, a maior parte das lojas tem storefronts (frentes de loja de ecommerce) com nota abaixo de 50 no [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). E poucos parecem saber resolver.\n\nCom isso, o ecommerce global perde trilhões (!) de dólares em vendas.\n\nParte do problema é a escolha do framework e das tecnologias envolvidas:\n\n- a. SPA (Single Page Application) não é a tecnologia ideal para ecommerce, especialmente para performance e SEO.\n\n- b. A complexidade de criar código com esse paradigma cria bases de código difíceis de manter e adicionar novas funcionalidades.\n\n\n### 3. Sua loja demora para evoluir\n\nNos negócios e na vida, a evolução contínua e o aprendizado diário é o que gera sucesso. Especialmente no varejo, que vive de otimização contínua de margem.\n\nContudo, times de ecommerce dependem de devs para editar, testar, aprender e evoluir suas lojas.\n\nDevs, por sua vez, estão geralmente sobrecarregadas de demandas, e demoram demais para entregar o que foi pedido, ainda que sejam tasks simples.\n\nPara piorar, as ferramentas necessárias para realizar o ciclo completo de CRO (conversion rate optimization) como teste A/B, analytics, personalização e content management system (CMS) estão fragmentadas, o que exige ter que lidar com várias integrações e diversos serviços terceirizados diferentes.\n\nTudo isso aumenta drasticamente a complexidade operacional, especialmente em storefronts de alta escala, onde o ciclo de evolução é lento e ineficaz.\n\n\n## Nossa solução\n\nNosso time ficou mais de 10 anos lidando com estes mesmo problemas. Sabemos que existem tecnologias para criar sites e lojas de alto desempenho, mas a maioria parece não ter a coragem de utilizá-las.\n\nFoi quando decidimos criar a deco.cx.\n\nPara habilitarmos a criação de experiências de alto desempenho foi necessário um novo paradigma, que simplifique a criação de lojas rápidas, sem sacrificar a capacidade de **personalização e de evolução contínua.**\n\nCriamos uma plataforma headless que integra tudo o que uma marca ou agência precisa para gerenciar e otimizar sua experiência digital, tornando fácil tomar decisões em cima de dados reais, e aumentando continuamente as taxas de conversão.\n\n## Como fazemos isso:\n\n### 1. Com deco.cx fica rápido de construir\n\nAceleramos desenvolvimento de lojas, apostando em uma combinação de tecnologias de ponta que oferecem uma experiência de desenvolvimento frontend otimizada e eficiente. A stack inclui:\n\n- [**Deno**](https://deno.land)\n Um runtime seguro para JavaScript e TypeScript, criado para resolver problemas do Node.js, como gerenciamento de dependências e configurações TypeScript.\n\n- [**Fresh**](https://fresh.deno.dev)\nUm framework web minimalista e rápido, que proporciona uma experiência de desenvolvimento mais dinâmica e eficiente, com tempos de compilação rápidos ou inexistentes.\n\n- [**Twind**](https://twind.dev)\nUma biblioteca de CSS-in-JS que permite a criação de estilos dinâmicos, sem sacrificar o desempenho, e oferece compatibilidade com o popular framework Tailwind CSS.\n\n- [**Preact**](https://deno.land)\nUma alternativa leve ao React, que oferece desempenho superior e menor tamanho de pacote para aplicações web modernas.\n\nEssa combinação de tecnologias permite que a deco.cx ofereça uma plataforma de desenvolvimento frontend que melhora a produtividade e reduz o tempo de implementação, além de proporcionar sites de alto desempenho.\n\nOs principais ganhos de produtividade da plataforma e tecnologia deco são:\n\n- O deploy (e rollback) instantâneo na edge oferecido pelo [deno Deploy](https://deno.com/deploy)\n\n- A bibliotecas de componentes universais e extensíveis ([Sections](https://www.deco.cx/docs/en/concepts/section)), além de funções pré-construídas e totalmente customizáveis ([Loaders](https://www.deco.cx/docs/en/concepts/loader)).\n\n- A facilidade de aprendizado. Qualquer desenvolvedor junior que sabe codar em React, Javascript, HTML e CSS consegue aprender rapidamente a nossa stack, que foi desenhada pensando na melhor experiência de desenvolvimento.\n\n\n### 2. Com deco.cx fica ultrarrápido de navegar\n\nAs tecnologias escolhidas pela deco também facilitam drasticamente a criação de lojas ultrarrápidas.\n\nNormalmente os storesfronts são criados com React e Next.Js - frameworks JavaScript que usam a abordagem de Single-Page Applications (SPA) para construir aplicativos web. Ou seja, o site é carregado em uma única página e o conteúdo é transportado dinamicamente com JavaScript.\n\nDeno e Fresh, tecnologias que usamos aqui, são frameworks de JavaScript que trabalham com outro paradigma: o server-side-rendering, ou seja, o processamento dos componentes da página é feito em servidores antes de ser enviado para o navegador, ao invés de ser processado apenas no lado do cliente.\n\nIsso significa que a página já vem pronta para ser exibida quando é carregada no navegador, o que resulta em um carregamento mais rápido e uma melhor experiência do usuário.\n\nAlém disso, essas tecnologias trabalham nativamente com computação na edge, o que significa que a maior parte da lógica é executada em servidores perto do usuário, reduzindo a latência e melhorando a velocidade de resposta. Como o processamento é feito em servidores na edge, ele é capaz de realizar tarefas mais pesadas, como buscar e processar dados de fontes externas, de forma mais eficiente.\n\nAo usar essas ferramentas em conjunto, é possível construir e-commerces de alto desempenho, com tempos de carregamento de página mais rápidos e uma experiência geral melhorada.\n\n\n### 3. Com deco.cx fica fácil de evoluir\n\nA plataforma deco oferece, em um mesmo produto, tudo o que as agências e marcas precisam para rodar o ciclo completo de evolução da loja:\n\n- **Library**: Onde os desenvolvedores criam (ou customizam) [loaders](https://www.deco.cx/docs/en/concepts/loader) que puxam dados de qualquer API externa, e usam os dados coletados para criar componentes de interface totalmente editáveis pelos usuários de negócio ([Sections](https://www.deco.cx/docs/en/concepts/section)).\n\n- **Pages**: Nosso CMS integrado, para que o time de negócio consiga [compor e editar experiências rapidamente](https://www.deco.cx/docs/en/concepts/page), usando as funções e componentes de alto desempenho pré-construidos pelos seus desenvolvedores, sem precisar de uma linha de código.\n\n- **Campanhas**: Nossa ferramenta de personalização que te permite agendar ou customizar a mudança que quiser por data ou audiência. Seja uma landing page para a Black Friday ou uma sessão para um público específico, você decide como e quando seu site se comporta para cada usuário.\n\n- **Experimentos**: Testes A/B ou multivariados em 5 segundos - nossa ferramenta te permite acompanhar, em tempo real, a performance dos seus experimentos e relação à versão de controle.\n\n- **Analytics**: Dados em tempo real sobre toda a jornada de compra e a performance da loja. Aqui você cria relatórios personalizados, que consolidam dados de qualquer API externa.\n\n\n## O que está por vir\n\nEstamos só começando. Nossa primeira linha de código na deco foi em Setembro 2022. De lá pra cá montamos [uma comunidade no Discord](https://deco.cx/discord), que já conta com 1.050+ membros, entre agências, estudantes, marcas e experts.\n\nSe você está atrás de uma forma de criar sites e lojas ultrarrápidos, relevantes para cada audiência, e que evoluem diariamente através de experimentos e dados, [agende uma demo](https://deco.cx)."},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/9cd72d58-1a57-443f-83a3-d263105670ff","date":"03/12/2023","path":"abertura-ii-hackathon-deco.md","descr":"Discurso da abertura da segunda Hackathon deco.cx.","title":"América Latina e o futuro das experiências digitais","author":"Guilherme Rodrigues","content":"Estou extremamente empolgado em dar início à nossa segunda Hackathon deco.cx! Mas antes de começarmos, eu quero dividir algumas palavras com vocês.\n\nNós estamos reunidos aqui hoje para aprender, criar e, se tudo der certo, levar para casa um prêmio de 500 reais. Mas acreditem, esse prêmio não é o melhor que vocês vão levar daqui — longe disso.\n\nA verdadeira recompensa é a oportunidade de adquirir novas habilidades que os diferenciam e os elevam a outro patamar como desenvolvedores e desenvolvedoras. E ainda maior que isso: a oportunidade de protagonizar a próxima geração de desenvolvimento web global.\n\nO estado atual de complexidade acumulada no desenvolvimento web é insustentável. Os anos de desenvolvimento na \"câmara de eco\" dos frameworks JS gerou uma enorme fricção, uma grande barreira de entrada para desenvolver web apps.\n\nCada vez é necessário aprender mais frameworks, padrões e bibliotecas para ser minimamente produtivo. O tempo de build de sites baseados nessas stacks limitam nossa criatividade no dia a dia. Além disso, temos grandes dificuldades de entregar sites performáticos. Não precisa ser assim!\n\nVivemos em um momento único na história do desenvolvimento web. Deno está no início de uma revolução que transformará a maneira como criamos e entregamos experiências digitais. E nós temos a chance de aproveitar essa janela de oportunidade para nos destacarmos no mercado global.\n\nDeno, junto com tecnologias como Fresh e Tailwind, representam a esperança de uma nova direção. Essas tecnologias nos mostraram como é possível ser simples e eficiente. Estamos vendo nascer o próximo Node.js, diante de nossos olhos — e estamos convidados a participar e a co-criá-lo!\n\nPor outro lado, a demanda global por digitalização só acelera. Demanda por projetos, demanda por sites, demanda por pessoas desenvolvedoras. E nós temos muita oferta de talento brasileiro — jovens pessoas desenvolvedoras, muitas vezes com dificuldade de se colocar no mercado de trabalho apesar de seu grande potencial.\n\nNós temos a oportunidade de atender essa demanda, mostrando o incrível potencial dos desenvolvedores brasileiros. Não precisamos apenas seguir as tendências; podemos liderar e nos tornar referência mundial na criação de experiências digitais de alta performance.\n\nMas a nossa responsabilidade não termina com o domínio dessas tecnologias. Para promover uma mudança estrutural, não basta garantirmos o nosso próprio sucesso. Devemos nos esforçar para sermos mentores, treinarmos a próxima geração e multiplicarmos a tecnologia no Brasil, promovendo a inclusão e dando oportunidades a todos aqueles que desejam ingressar nesse mercado em constante crescimento: especialmente aqueles que previsivelmente não teriam acesso a elas.\n\nEntão, enquanto vocês participam desta Hackathon, lembrem-se do potencial que têm em mãos e da responsabilidade compartilhada. Que vocês aproveitem ao máximo essa oportunidade, tanto para o seu crescimento pessoal quanto para o desenvolvimento da nossa comunidade. Estamos construindo algo muito maior do que cada um de nós.\n\nDesejo a todos vocês um ótimo evento, repleto de aprendizado, colaboração e inovação. Que comecem os trabalhos!"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/179d2e1f-8214-46f4-bc85-497f2313145e","date":"03/01/2023","path":"criando-uma-pagina-com-decocx.md","descr":"Recriando a página da deno-land utilizando a plataforma da deco.cx com as tecnologias: Deno, Fresh, Preact e Twind.","title":"Minha experiência com deco.cx","author":"Guilherme Tavano","content":"## Desafio\n\nRecentemente aceitei um desafio e quero compartilhar como foi a minha experiência.\n\nO desafio era reconstruir a Home da [https://deno.land/](https://deno.land/) utilizando a plataforma deco.cx como CMS.\n\n## O que é deco.cx?\n\nÉ uma plataforma criada por um time de pessoas que trabalharam na Vtex, para construir páginas e lojas virtuais performáticas e em um curto período de tempo.\n\nCom o slogan \"Crie, teste e evolua sua loja. Todos os dias.\", a plataforma foca na simplicidade no desenvolvimento, autonomia para edições/testes e foco em performance.\n\n## Primeira etapa - Conhecendo a Stack\n\nAntes de iniciar o desenvolvimento, precisei correr atrás das tecnologias que a deco.cx sugere para utilização.\n\nSão elas:\n\n### Preact\n\nPreact é uma biblioteca JS baseada no React, mas que promete ser mais leve e mais performática.\n\nA adaptação aqui, para quem já tem o React, não tende a ser complicada.\n\n### Deno\n\nDeno é um ambiente de execução de Javascript e Typescript, criado pelo mesmo criador do Node.js.\n\nCom uma boa aceitação entre os devs, a alternativa melhorada do Node.js promete se destacar no futuro.\n\n### Fresh\n\nFresh é um Framework que me deixou bem curioso. Nessa stack, podemos dizer que ele atua como um Next.\n\nApesar de não ter me aprofundado no Framework, não tive problemas aqui, afinal um dos pilares do Fresh é não precisar de configuração, além de não ter etapa de build.\n\n### Twind\n\nTwind é uma alternativa mais leve, rápida e completa do tão conhecido Tailwind.\n\nA adaptação é extremamente fácil para quem já trabalha com Tailwind, mas não era o meu caso.\n\nPequenos gargalos no começo, mas a curva de aprendizagem é curta e nas últimas seções eu já estava sentindo os efeitos (positivos).\n\n## Segunda Etapa - Conhecendo a ferramenta da deco.cx\n\nMeu objetivo aqui, era entender como a ferramenta me ajudaria a recriar a página deno.land, tornando os componentes editáveis pelo painel CMS.\n\n### Criação da Conta\n\nO Login foi bem simples, pode ser feito com Github ou Google.\n\n### Criação do Projeto\n\nNa primeira página, após logado, temos a opção de Criar um Novo Site.\n\nTive que dar um nome ao projeto e escolher o template padrão para ser iniciado.\n\n\n\nAssim que o site é criado, **automaticamente** um repositório é montado no GitHub da [deco-sites](https://github.com/deco-sites) e um link da sua página na internet também.\n\nA partir dai, cada push que você fizer resultará no Deploy da aplicação no servidor e rapidamente será refletido em produção\n\n### Entendendo páginas e seções\n\nDentro do painel, podemos acessar a aba de \"Pages\"\n\n\n\nNessa parte, cada página do seu site estará listada, e assim que você clicar, você pode ver as seções que estão sendo utilizadas.\n\n\n\nDessa forma, fica fácil para uma pessoa não técnica conseguir criar novas páginas e adicionar/editar as seções.\n\nMas para entender como criar um modelo de seção, vamos para a terceira etapa.\n\n## Terceira Etapa - Integração do Código com a deco.cx\n\nComo eu tinha o objetivo de tornar as seções da página editáveis, eu precisei entender como isso deveria ser escrito no código.\n\nE é tão simples, quanto tipagem em Typescript, literalmente.\n\nDentro da estrutura no GitHub, temos uma pasta chamada _sections_, e cada arquivo _.tsx_ lá dentro se tornará uma daquelas seções no painel.\n\n\n\nEm cada arquivo, deve ser exportado uma função default, que retorna um código HTML.\n\nDentro desse HTML, podemos utilizar dados que vem do painel, e para definir quais dados deverão vir de lá, fazemos dessa forma:\n\nexport interface Props {\n image: LiveImage;\n imageMobile: LiveImage;\n altText: string;\n title: string;\n subTitle: string;\n}\n\nEsses são os campos que configurei para a seção _Banner_, e o resultado é esse no painel:\n\n\n\nDepois recebi esses dados como Props, assim:\n\nexport default function Banner({ image, imageMobile, altText, subTitle, title }: Props,) {\n return (\n <>\n //Your HTML code here\n \n );\n}\n\nE o resultado final da seção é:\n\n\n\n### Dev Mode\n\nÉ importante ressaltar, que durante o desenvolvimento, a ferramenta oferece uma função \"Dev Mode\".\n\nIsso faz com que os campos editáveis do painel se baseiem no código feito no localhost e não do repositório no Github.\n\nGarantindo a possibilidade de testes durante a criação.\n\n## Resultado Final + Conclusão\n\nO resultado final, pode ser conferido em: [https://deno-land.deco.site/](https://deno-land.deco.site/)\n\nConsegui atingir nota 97 no Pagespeed Mobile e isso me impressionou bastante.\n\nParticularmente, gostei muito dos pilares que a deco.cx está buscando entregar, em especial a autonomia de edição e o foco na velocidade de carregamento.\n\nA ferramenta é nova e já entrega muita coisa legal. A realização desse desafio foi feita após 3 meses do início do desenvolvimento da plataforma da deco.\n\nMinha recomendação a todos é que entrem na [Comunidade no Discord](https://discord.gg/RZkvt5AE) e acompanhem as novidades para não ficar para trás.\n\nSe possível, criem um site na ferramenta e façam os seus próprios testes.\n\nEm parceria com [TavanoBlog](https://tavanoblog.com.br/)."},{"img":"https://i.insider.com/5e6bb1bd84159f39f736ee32?width=2000&format=jpeg&auto=webp","date":"11/29/2022","path":"pg-vb-pt-br.md","descr":"Por Paul Graham, traduzido por ChatGPT.","title":"A vida é curta","author":"Chat GPT","content":"A vida é curta, como todos sabem. Quando era criança, costumava me perguntar sobre isso. A vida realmente é curta ou estamos realmente nos queixando de sua finitude? Seríamos tão propensos a sentir que a vida é curta se vivêssemos 10 vezes mais tempo?\n\nComo não parecia haver maneira de responder a essa pergunta, parei de me perguntar sobre isso. Depois tive filhos. Isso me deu uma maneira de responder à pergunta e a resposta é que a vida realmente é curta.\n\nTer filhos me mostrou como converter uma quantidade contínua, o tempo, em quantidades discretas. Você só tem 52 fins de semana com seu filho de 2 anos. Se o Natal-como-mágica dure, digamos, dos 3 aos 10 anos, só poderá ver seu filho experimentá-lo 8 vezes. E enquanto é impossível dizer o que é muito ou pouco de uma quantidade contínua como o tempo, 8 não é muito de alguma coisa. Se você tivesse uma punhado de 8 amendoins ou uma prateleira de 8 livros para escolher, a quantidade definitivamente pareceria limitada, independentemente da sua expectativa de vida.\n\nOk, então a vida realmente é curta. Isso faz alguma diferença saber disso?\n\nFez para mim. Isso significa que argumentos do tipo \"A vida é muito curta para x\" têm muita força. Não é apenas uma figura de linguagem dizer que a vida é muito curta para alguma coisa. Não é apenas um sinônimo de chato. Se você achar que a vida é muito curta para alguma coisa, deve tentar eliminá-la se puder.\n\nQuando me pergunto o que descobri que a vida é muito curta, a palavra que me vem à cabeça é \"besteira\". Eu percebo que essa resposta é um pouco tautológica. Quase é a definição de besteira que é a coisa de que a vida é muito curta. E ainda assim a besteira tem um caráter distintivo. Há algo falso nela. É o alimento junk da experiência. [1]\n\nSe você perguntar a si mesmo o que gasta o seu tempo em besteira, provavelmente já sabe a resposta. Reuniões desnecessárias, disputas sem sentido, burocracia, postura, lidar com os erros de outras pessoas, engarrafamentos, passatempos viciantes mas pouco gratificantes.\n\nHá duas maneiras pelas quais esse tipo de coisa entra em sua vida: ou é imposto a você ou o engana. Até certo ponto, você tem que suportar as besteiras impostas por circunstâncias. Você precisa ganhar dinheiro e ganhar dinheiro consiste principalmente em realizar tarefas. De fato, a lei da oferta e da demanda garante isso: quanto mais gratificante é algum tipo de trabalho, mais barato as pessoas o farão. Pode ser que menos tarefas sejam impostas a você do que você pensa, no entanto. Sempre houve uma corrente de pessoas que optam por sair da rotina padrão e vão viver em algum lugar onde as oportunidades são menores no sentido convencional, mas a vida parece mais autêntica. Isso pode se tornar mais comum.\n\nVocê pode reduzir a quantidade de besteira em sua vida sem precisar se mudar. A quantidade de tempo que você precisa gastar com besteiras varia entre empregadores. A maioria das grandes organizações (e muitas pequenas) está imersa nelas. Mas se você priorizar conscientemente a redução de besteiras acima de outros fatores, como dinheiro e prestígio, pode encontrar empregadores que irão desperdiçar menos do seu tempo.\n\nSe você é freelancer ou uma pequena empresa, pode fazer isso no nível de clientes individuais. Se você demitir ou evitar clientes tóxicos, pode diminuir a quantidade de besteira em sua vida mais do que diminui sua renda.\n\nMas, enquanto alguma quantidade de besteira é inevitavelmente imposta a você, a besteira que se infiltra em sua vida enganando-o não é culpa de ninguém, mas sua própria. E ainda assim, a besteira que você escolhe pode ser mais difícil de eliminar do que a besteira que é imposta a você. Coisas que o atraem para desperdiçar seu tempo precisam ser muito boas em enganá-lo. Um exemplo que será familiar para muitas pessoas é discutir online. Quando alguém contradiz você, está, de certa forma, atacando você. Às vezes bastante abertamente. Seu instinto quando é atacado é se defender. Mas, assim como muitos instintos, esse não foi projetado para o mundo em que vivemos agora. Contrariamente ao que parece, é melhor, na maioria das vezes, não se defender. Caso contrário, essas pessoas estão literalmente tomando sua vida. [2]\n\nDiscutir online é apenas incidentalmente viciante. Há coisas mais perigosas do que isso. Como já escrevi antes, um subproduto do progresso técnico é que as coisas que gostamos tendem a se tornar mais viciantes. Isso significa que precisaremos fazer um esforço consciente para evitar vícios, para nos colocarmos fora de nós mesmos e perguntarmos: \"é assim que quero estar gastando meu tempo?\"\n\nAlém de evitar besteiras, devemos procurar ativamente coisas que importam. Mas coisas diferentes importam para pessoas diferentes e a maioria precisa aprender o que importa para elas. Alguns são afortunados e percebem cedo que adoram matemática, cuidar de animais ou escrever e, então, descobrem uma maneira de passar muito tempo fazendo isso. Mas a maioria das pessoas começa com uma vida que é uma mistura de coisas que importam e coisas que não importam e só gradualmente aprende a distinguir entre elas.\n\nPara os jovens, especialmente, muita dessa confusão é induzida pelas situações artificiais em que se encontram. Na escola intermediária e na escola secundária, o que os outros estudantes acham de você parece ser a coisa mais importante do mundo. Mas quando você pergunta aos adultos o que eles fizeram de errado nessa idade, quase todos dizem que se importavam demais com o que os outros estudantes achavam deles.\n\nUma heurística para distinguir coisas que importam é perguntar a si mesmo se você se importará com elas no futuro. A coisa falsa que importa geralmente tem um pico afiado de parecer importar. É assim que o engana. A área sob a curva é pequena, mas sua forma se crava em sua consciência como uma alfinete.\n\nAs coisas que importam nem sempre são aquelas que as pessoas chamariam de \"importantes\". Tomar café com um amigo importa. Você não vai sentir depois que isso foi um desperdício de tempo.\n\nUma coisa ótima em ter crianças pequenas é que elas fazem você gastar tempo em coisas que importam: elas. Elas puxam sua manga enquanto você está olhando para o seu celular e dizem: \"você vai brincar comigo?\". E as chances são de que essa seja, de fato, a opção de minimização de besteira.\n\nSe a vida é curta, devemos esperar que sua brevidade nos surpreenda. E é exatamente isso que costuma acontecer. Você assume as coisas como garantidas e, então, elas desaparecem. Você acha que sempre pode escrever aquele livro, ou subir aquela montanha, ou o que quer que seja, e então percebe que a janela se fechou. As janelas mais tristes fecham quando outras pessoas morrem. Suas vidas também são curtas. Depois que minha mãe morreu, eu desejei ter passado mais tempo com ela. Eu vivi como se ela sempre estivesse lá. E, de maneira típica e discreta, ela incentivou essa ilusão. Mas era uma ilusão. Acho que muitas pessoas cometem o mesmo erro que eu cometi.\n\nA maneira usual de evitar ser surpreendido por algo é estar consciente disso. Quando a vida era mais precária, as pessoas costumavam ser conscientes da morte em um grau que agora pareceria um pouco morboso. Não tenho certeza do porquê, mas não parece ser a resposta certa lembrar constantemente da caveira pairando no ombro de todos. Talvez uma solução melhor seja olhar o problema pelo outro lado. Cultive o hábito de ser impaciente com as coisas que mais quer fazer. Não espere antes de subir aquela montanha ou escrever aquele livro ou visitar sua mãe. Você não precisa se lembrar constantemente por que não deve esperar. Apenas não espere.\n\nPosso pensar em mais duas coisas que alguém faz quando não tem muito de algo: tentar obter mais disso e saborear o que tem. Ambos fazem sentido aqui.\n\nComo você vive afeta por quanto tempo você vive. A maioria das pessoas poderia fazer melhor. Eu entre elas.\n\nMas você provavelmente pode obter ainda mais efeito prestando mais atenção ao tempo que tem. É fácil deixar os dias passarem voando. O \"fluxo\" que as pessoas imaginativas adoram tanto tem um parente mais sombrio que impede você de pausar para saborear a vida no meio da rotina diária de tarefas e alarmes. Uma das coisas mais impressionantes que já li não estava em um livro, mas no título de um: Burning the Days (Queimando os Dias), de James Salter.\n\nÉ possível diminuir um pouco o tempo. Eu melhorei nisso. As crianças ajudam. Quando você tem crianças pequenas, há muitos momentos tão perfeitos que você não consegue deixar de notar.\n\nTambém ajuda sentir que você tirou tudo de alguma experiência. O motivo pelo qual estou triste por minha mãe não é apenas porque sinto falta dela, mas porque penso em tudo o que poderíamos ter feito e não fizemos. Meu filho mais velho vai fazer 7 anos em breve. E, embora sinta falta da versão dele de 3 anos, pelo menos não tenho nenhum arrependimento pelo que poderia ter sido. Tivemos o melhor tempo que um pai e um filho de 3 anos poderiam ter.\n\nCorte implacavelmente as besteiras, não espere para fazer coisas que importam e saboreie o tempo que tem. É isso o que você faz quando a vida é curta. \n\n---\n\nNotas\n\n[1] No começo, eu não gostei que a palavra que me veio à mente tivesse outros significados. Mas então percebi que os outros significados estão bastante relacionados. Besteira no sentido de coisas em que você desperdiça seu tempo é bastante parecida com besteira intelectual.\n\n[2] Escolhi esse exemplo de forma deliberada como uma nota para mim mesmo. Eu sou atacado muito online. As pessoas contam as mentiras mais loucas sobre mim. E até agora eu fiz um trabalho bastante medíocre de suprimir a inclinação natural do ser humano de dizer \"Ei, isso não é verdade!\".\n\nObrigado a Jessica Livingston e Geoff Ralston por ler rascunhos deste."},{"tags":[],"body":{}}]},"__resolveType":"site/loaders/blogPostLoader.ts"}
\ No newline at end of file
+{"list":{"posts":[{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/6815764e-1eca-4089-bce3-6d9e37a9171d","seo":{"image":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/bc28ef76-67cf-44c7-9ef2-3c5c3713d975"},"date":"07/11/2023","path":"nuvemshop-integration","tags":[],"descr":"Nuvemshop is now available on deco.cx","title":"Nuvemshop Integration","author":"Guilherme Tavano","content":"We're thrilled to bring you the latest chapter in our journey to streamline your e-commerce experience. Introducing the new integration of [deco.cx](https://deco.cx/) with Nuvemshop, an e-commerce platform for growing businesses!\n\n## Seamless Integration for Growth\n\nOur goal is simple: to empower your e-commerce store with the robust capabilities of Nuvemshop, making it easier than ever to expand your business.\n\nSimply fill in your Nuvemshop store details on [deco.cx](https://deco.cx/), and you're all set to fetch your products and customize your frontend.\n\n## Available Features\n\n- Product Shelf\n\n
\n\n- Product Listing Pages \n\n- Category and Search\n\n- Product Details Page\n\n- Minicart\n\n- Checkout Proxied\n\nIt's about bringing the functionality of Nuvemshop into [deco.cx](https://deco.cx/), where your e-commerce vision takes on a new life, more customizable and fast.","readTime":"2","authorAvatar":"https://lh3.googleusercontent.com/ogw/AKPQZvxFwHo7yUU95E95OBqFaqXuLRfAGq0mMDuC7cQ7=s64-c-mo"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/8242aca6-5215-4321-8e9d-f876fc1d1d58","seo":{"title":"Black Friday 2023","canonical":"/black-friday-2023"},"date":"06/11/2023","lang":"en","path":"black-friday-2023.md","tags":[],"descr":"Checklist for a smooth shopping season","title":"Black Friday 2023","author":"Tiago Gimenes","content":"Black Friday is just around the corner, and it's an incredible opportunity for online businesses to boost their sales. To help you make the most of this shopping period, we've compiled a list of essential tasks to ensure that your online store is fully prepared for Black Friday 2023.\n\n## Adopt Ahead-of-Time Builds\n\nFresh recently introduced an innovative feature called \"ahead of time builds,\" designed to transform how you create and deliver your website. This approach not only stabilizes your store's JavaScript but also significantly improves server boot times. To fully understand this new approach, you can explore the structured documentation provided by Fresh [here](https://fresh.deno.dev/docs/concepts/ahead-of-time-builds).\n\nAt [Deco.cx](https://deco.cx/), we strongly recommend adopting the ahead-of-time version because it provides scalability to your server, which is essential for handling the demands of events like Black Friday. To migrate to this new version, instruct your developer to perform the update using the following command:\n\n```sh\ndeno run -Ar https://deco.cx/upgrade\n```\n\nAfter> completing the update, make sure that:\n\n1. Your store is functioning correctly, including checking the home, product detail (PDP), and product listing (PLP) pages, as well as verifying the add-to-cart functionality and any other critical flows.\n2. Administrative editing is working smoothly, allowing you to edit your store's sections and publish them.\n\nIf your store is already online, the [Deco.cx](https://deco.cx/) team has already run this command for you. To verify, ask your developer to look for a Pull Request (PR) on GitHub with the title \"Preparations for Black Friday.\" If you encounter any issues during this process, don't hesitate to contact us on [Deco.cx Discord](https://deco.cx/discord).\n\n## Support for Mobile Safari\n\nA few months ago, we shared a blog post detailing the [lessons we've learned](https://www.deco.cx/en/blog/licoes-6-meses.md) from our stores in production. We strongly recommend implementing all the suggestions mentioned in the post before Black Friday. However, one of the most critical steps is to ensure that your store functions seamlessly on Safari versions 12, 13, and 14.\n\nTo achieve this, follow these steps:\n\n1. Verify that your `fresh.config.ts` file includes the Safari12 build target.\n2. Ensure that your website does not use the `
` tag.\n\nEngage your developer to make the necessary adjustments to remove the `` tag and set Safari12 as the build target. We recommend performing this step after migrating to ahead-of-time builds to ensure a smooth transition.\n\nAs we kick off the holiday shopping season, the [Deco.cx](https://deco.cx/) team is dedicated to providing stability and reliability during this critical period. Starting this week, we will be actively working on stability improvements to enhance your experience on Black Friday. It's crucial to stay up-to-date with the latest Deco versions and keep an eye out for more informative posts on how to optimize your online store for success on Black Friday.","readTime":"5","authorAvatar":"https://avatars.githubusercontent.com/u/1753396?v=4"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/c4f791fe-9f43-400d-94a0-c203a6dc3b37","seo":{"image":"https://github.com/deco-sites/std/assets/18706156/ec92362b-9d18-42d8-9c60-bcb5bfef0d71","title":"deco play is released","description":"Use deco.cx's powerful CMS directly from the command line with Preact, Tailwind and Deno"},"date":"31/10/2023","path":"deco-play.md","descr":"Use deco.cx's powerful CMS directly from the command line","title":"deco play","author":"Héricles Emanuel","content":"## deco play\n\nMaking life easier for developers is at deco's core, and today we're proud to announce deco play, a new way to test our stack in record time!\n\nTo start testing deco play, go to [https://play.deco.cx](https://play.deco.cx) and follow the instructions.\n\n\n\nIt's the fastest way to spin up a deco site or app on your local machine and start developing with Preact, Tailwind, Deno and getting all the benefits of our CMS that automatically extracts the schema from your functions (UI components, loaders, actions…), makes them easily editable and composable on a Web UI that saves the data locally.\n\nAnd you don't need to be logged into [deco.cx](https://deco.cx) to use deco play, it's just one click away from the command line!","readTime":"2","authorAvatar":"https://avatars.githubusercontent.com/u/30700596?v=4"},{"img":"https://user-images.githubusercontent.com/121065272/278081341-14f42eff-92aa-46aa-b282-c3ce2823fcd5.png","seo":{"image":"https://github.com/deco-cx/apps/assets/882438/1b3f06d2-1d2d-4ec8-a9cf-2c14008229a6","title":"New Analytics Tool","description":"Analytics with realtime, goals and conversions!"},"date":"24/10/2023","path":"analytics.md","descr":"Analytics with realtime, goals and conversions!","title":"New Analytics Tool","author":"Matheus Gaudencio and Nathan Luiz","content":"## Introduction\n\nFollowing up on [Updated Redirects configuration](https://www.deco.cx/en/blog/redirects.md), **we're releasing today the new analytics tool**. We comprehend the significance of tracking every step of website users, from their first access to the site, to viewing a product, completing a purchase, and more. That's why we have evolved our tool!\n\n## Analytics on deco\n\nWe understand that data collection tools can impact the platform's performance. For this reason, deco uses a tool that seeks to strike a balance between performance and the collection of essential data needed for the analysis of various website usage metrics.\n\nIn addition to a smaller and more efficient data collector, we also have some exciting updates with the new tool!\n\n### Better UI/UX\n\nOur new, user-friendly and visually appealing analytics tool provides metrics such as location, device, operating system, and bounce rate, making it a more enjoyable experience.\n\n\n\n### Realtime Analytics\n\n\n\nSee your current visitors in real-time. No more waiting two days for data.\n\n### Goals and Funnels\n\n\n\nIt's also possible to see at which point in the purchasing journey the user decides to interrupt the process. This can happen during the initial page view, immediately after adding a product to the cart, or even during the checkout!\n\n## Analytics Apps\n\n[You can view the code that powers Deco Analytics](https://github.com/deco-cx/apps/tree/main/analytics), and even make contributions!\n\nTo use this tool, you need to update the **deco-cx/apps** to version 0.17.3 or higher.\n\nIn the coming days, we will commence the roll-out to our production customers. That's it for today. Keep an eye out for our next release!","readTime":"2","authorAvatar":"https://lh3.googleusercontent.com/a/ACg8ocIjb0LttoalDQynwu_U2A43KTAulDjme3BwrvxzAOOBzQ=s96-c"},{"img":"https://user-images.githubusercontent.com/121065272/278021160-f0fa7e72-ad95-4dfd-b201-fdbee639d7a0.png","seo":{"image":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/be8ca70a-6e2f-42ed-965c-6771e1fcda39","title":"Redirects","description":"Create and manage Redirects on deco.cx"},"date":"20/10/2023","path":"redirects.md","descr":"Create and manage Redirects","title":"Redirects","author":"Igor Brasileiro","content":"\nToday, we're excited to introduce a new feature that allows our users to\n**manage redirects on their websites directly** on deco.cx's Admin. Now, users\ncan create, edit and delete redirects without any extra effort.\n\nYou can test this feature right now by accessing the admin panel at\n[https://admin.deco.cx](https://admin.deco.cx/).\n\n\n\n## Types of Redirect\n\nWhen it comes to creating redirects, you have two options: temporary or\npermanent.\n\n- **Temporary**: not indexed, stored or cached by crawlers (e.g: Google) and\n browsers. They provide a short-term solution and are ideal for situations\n where you might want to reroute traffic temporarily.\n\n- **Permanent**: stored by search engines and crawlers. They permanently update\n the path for the current page, and they are hard to undo. If you're unsure\n about which type of redirect to choose, we strongly recommend using temporary\n redirects.\n\n### **Enabling this Feature for Your Site**\n\nFor websites created after the date of this blog post (Oct 23 2023), this\nfeature will be enabled by default.\n\nIf your site was created before this blog post, you can enable this feature by\nupdating your site dependencies to `deco@1.41.11` and `apps@0.15.8`. (Run\n`deno task update`) Next, update your app's **`site`** by adding a new Site Map\nentry named `Redirects`. Once this is done, all managed redirects will function\nseamlessly on your site.\n\n\n\nIf you have any questions, feel free to reach us at\n[deco.cx Discord Server](https://deco.cx/discord).\n\nThat's all for today. Stay tuned for our next release!\n","readTime":"4","authorAvatar":"https://cdn.discordapp.com/avatars/87899733435088896/ae5525772e63fc0f47680e90b0902cd2.webp?size=240"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/b86b6a80-ca1a-478a-ba30-8499105f146b","seo":{"image":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/7188c283-d2d7-4a38-bbbd-b4e3db275df4","title":"New Editor","description":"Easier to use, refreshed UI, and better JSON editing"},"date":"18/10/2023","path":"new-editor.md","descr":"Easier to use, refreshed UI, and better JSON editing ","title":"New Editor","author":"Lucis and the deco.cx team","content":"## New Editor\n\nFollowing up on our [Admin Reloaded](https://www.deco.cx/en/blog/admin-reloaded.md), we're **releasing today the new CMS editor.** This release includes a redesigned layout based on feedback from our users, an emphasis on content segmentation, and a new inline JSON editor.\n\n`\n\nEm versões anteriores de nossos templates, utilizávamos a tag HTML5 ``. Essa tag permitia a criação de modais com suporte à acessibilidade. No entanto, identificamos dois problemas principais relacionados a ela:\n\n1. Exigia JavaScript para funcionar corretamente, o que ia de encontro à nossa filosofia de minimizar o uso de JavaScript na página.\n2. Versões recentes do iPhone (10, 11 e 12) não oferecem suporte a essa tag, o que nos forçava a inserir \"polyfills\". Essa inserção era síncrona e prejudicava significativamente o desempenho dos sites.\n\nDevido a esses dois pontos mencionados, adotamos uma abordagem alternativa usando a tag ``, recomendamos fazer a migração o mais rápido possível para `\n
\n
\n```\n\nNesse exemplo, estamos combinando flexbox (classe `flex`) com unidades percentuais (`width: 100%`). Isso pode funcionar em navegadores mais recentes, mas causa problemas em versões mais antigas do Safari, como o iPhone 10, 11 e 12.\n\nPara solucionar esse problema, recomendamos substituir `w-full` por classes relacionadas ao flexbox:\n\n ```html\n
\n
\n
\n```\n\nIsso garantirá que o layout funcione corretamente em todos os navegadores.\n\n\nEstamos sempre acompanhando os novos projetos, coletando os apresentados e melhorando o template [Storefront](https://github.com/deco-sites/storefront)."},{"img":"https://user-images.githubusercontent.com/121065272/278023987-b7ab4ae9-6669-4e38-94b8-268049fa6569.png","date":"06/10/2023","path":"partials.md","descr":"Revolucionando o Desenvolvimento Web","title":"Partials","author":"Marcos Candeia, Tiago Gimenes","content":"[Fresh](https://fresh.deno.dev/), o framework web utilizado pela Deco, é conhecido por possibilitar a criação de páginas de altíssimo desempenho. Uma das razões pelas quais as páginas criadas na Deco são tão eficientes é devido à arquitetura de ilhas. Essa arquitetura permite que os desenvolvedores removam partes não interativas do pacote final de JavaScript, reduzindo a quantidade total de JavaScript na página e aliviando o navegador para realizar outras tarefas.\n\nNo entanto, uma das limitações dessa arquitetura é que páginas muito complexas, com muita interatividade e, portanto, muitas ilhas, ainda exigem uma grande quantidade de JavaScript. Felizmente, essa limitação agora é coisa do passado, graças à introdução dos Partials.\n\n## Como Funciona?\n\nOs Partials, inspirados no [htmx](https://htmx.org/docs/), operam com um runtime que intercepta as interações do usuário com elementos de botão, âncora e formulário. Essas interações são enviadas para nosso servidor, que calcula o novo estado da página e responde ao navegador. O navegador recebe o novo estado da IU em HTML puro, que é então processado e as diferenças são aplicadas, alterando a página para o seu estado final. Para obter informações mais detalhadas sobre os Partials, consulte a [documentação](https://github.com/denoland/fresh/issues/1609) do Fresh.\n\n## Partials em Ação\n\nEstamos migrando os componentes da loja da Deco para a nova solução de Partials. Até o momento, migramos o seletor de SKU, que pode ser visualizado em ação [aqui](http://storefront-vtex.deco.site/camisa-masculina-xadrez-sun-e-azul/p?skuId=120). Mais mudanças, como `infinite scroll` e melhorias nos filtros, estão por vir.\n\nOutra funcionalidade desbloqueada é a possibilidade de criar dobras na página. As páginas de comércio eletrônico geralmente são longas e contêm muitos elementos. Os navegadores costumam enfrentar problemas quando há muitos elementos no HTML. Para lidar com isso, foi inventada a técnica de dobra.\n\nA ideia básica dessa técnica é dividir o conteúdo da página em duas partes: o conteúdo acima e o conteúdo abaixo da dobra. O conteúdo acima da dobra é carregado na primeira solicitação ao servidor. O conteúdo abaixo da dobra é carregado assim que a primeira solicitação é concluída. Esse tipo de funcionalidade costumava ser difícil de implementar em arquiteturas mais antigas. Felizmente, embutimos essa lógica em uma nova seção chamada `Deferred`. Esta seção aceita uma lista de seções como parâmetro que devem ter seu carregamento adiado para um momento posterior.\n\nPara usar essa nova seção:\n\n1. Acesse o painel de administração da Deco e adicione a seção `Rendering > Deferred` à sua página.\n2. Mova as seções que deseja adiar para a seção `Deferred`.\n3. Salve e publique a página.\n4. Pronto! As seções agora estão adiadas sem a necessidade de alterar o código!\n\nVeja `Deferred` em ação neste [link](https://storefront-vtex.deco.site/home-partial).\n\n> Observe que, para a seção `Deferred` aparecer, você deve estar na versão mais recente do `fresh`, `apps` e deco!\n\nUma pergunta que você pode estar se fazendo agora é: Como escolher as seções que devo incluir no deferred? Para isso, use a aba de desempenho e comece pelas seções mais pesadas que oferecem o maior retorno!\n\nPara mais informações, veja nossas [docs](https://docs.deco.cx/en/developing-capabilities/interactive-sections/partial)"},{"img":"https://user-images.githubusercontent.com/121065272/278021874-91a4ffea-3a22-4631-a4b3-c21bbc056386.png","date":"31/08/2023","path":"case-lojas-torra","descr":"Como a Lojas Torra dobrou sua taxa de conversão após migrar o front do seu ecommerce para a deco.cx","title":"A nova fase da Lojas Torra com a deco.cx.","author":"Por Maria Cecilia Marques"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/5a07de58-ba83-4c6c-92e1-bea033350318","date":"23/01/2023","path":"apps-era.md","descr":"A era dos Apps!","title":"Como utilizar apps para adicionar funcionalidades aos seus sites.","author":"Marcos Candeia, Tiago Gimenes","content":"Nesta última versão, a deco está revolucionando a forma como você adiciona funcionalidades em seus **sites**. Dê as boas-vindas à era dos Apps.\n\n**O que são Apps?**\n\nAs Apps são poderosos conjuntos de capacidades de negócios que podem ser importados e configurados em sites deco. Uma App na deco é essencialmente uma coleção de vários componentes, como **Actions**, **Sections**, **Loaders**, **Workflows**, **Handlers**, ou quaisquer outros tipos de blocks que podem ser usados para estender a funcionalidade dos seus sites.\n\nCom as apps, você tem o poder de definir propriedades necessárias para a funcionalidade como um todo, como chaves de aplicação, nomes de contas entre outros.\n\n**Templates de Loja**\n\nIntroduzimos vários templates de lojas integradas com plataformas como - Vnda., VTEX e Shopify. Agora, você tem a flexibilidade de escolher o template que melhor se adapta às suas necessidades e pode criar facilmente sua loja a partir desses templates.\n\n
\n\n**DecoHub: Seu Hub de Apps**\n\nCom a estreia do DecoHub, você pode descobrir e instalar uma variedade de apps com base em suas necessidades do seu negócio. Se você é um desenvolvedor, pode criar seus próprios apps fora do repositório do [deco-cx/apps](http://github.com/deco-cx/apps) e enviar um PR para adicioná-los ao DecoHub.\n\n**Transição de Deco-Sites/Std para Apps**\n\nMigramos do hub central de integrações do [deco-sites/std](https://github.com/deco-sites/std) para uma abordagem mais modular com o [deco-cx/apps](http://github.com/deco-cx/apps). O STD agora está em modo de manutenção, portanto, certifique-se de migrar sua loja e seguir as etapas de instalação em nossa [documentação](https://docs.deco.cx/en/getting-started/installing-an-app) para aproveitar o novo ecossistema de Apps.\n\n**Comece a Usar os Apps Agora Mesmo!**\n\nDesenvolvedores, mergulhem em nosso [guia](https://docs.deco.cx/en/developing-capabilities/apps/creating-an-app) sobre como criar seu primeiro App no Deco. Para lojas existentes, faça a migração executando `deno run -A -r https://deco.cx/upgrade`.\n\nIsso é apenas o começo. Estamos trabalhando continuamente para aprimorar nosso ecossistema de Apps e explorar novos recursos, como transições de visualização e soluções de estilo.\n\nFiquem ligados e vamos construir juntos o futuro do desenvolvimento web!"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/450efa63-082e-427a-b218-e8b3690823cc","date":"14/04/2023","path":"como-a-deco-faz-sua-loja-converter-mais.md","descr":"Descubra como a nossa plataforma headless ajuda lojas virtuais a converter mais clientes, simplificando a criação e manutenção de lojas rápidas e personalizáveis. ","title":"Como a deco.cx faz sua loja converter mais","author":"Rafael Crespo","content":"Com dezenas de milhões de e-commerces, o varejo digital nunca enfrentou tanta competição. Por outro lado, com o grande aumento do número de consumidores online, nunca houve maior oportunidade pra crescer. Neste contexto, **oferecer experiências distintas é crucial.**\n\nContudo, mesmo as maiores marcas tem dificuldade construir algo além do previsível - páginas lentas e estáticas para todos os usuários. O resultado todos já sabem: **baixa conversão** -- pessoas deixam de comprar na loja porque não viram um conteúdo que lhe agrada ou porquê as páginas demoraram pra carregar em seus celulares.\n\nVamos entender primeiro porque isso acontece.\n\n\n## Por quê seu site performa mal?\n\n### 1. Sua loja demora para construir\n\nO time de tecnologia para ecommerce é pouco produtivo pois trabalha com frameworks e tech stacks complexas de aprender e fazer manutenção - e que vão ficando ainda mais complexas com o tempo, além do talento em tech ser escasso.\n\nPessoas desenvolvedoras gastam horas e horas cada mês com a complexidade acidental das tecnologias usadas: esperando o tempo de deploy, cuidando de milhares de linhas de código, ou lidando com dependências no npm - sobra pouco tempo para codar de verdade.\n\nResultado: o custo de novas funcionalidades é caro e a entrega é demorada, além de ser operacionalmente complexo contratar e treinar devs.\n\n\n### 2. Sua loja demora para carregar\n\nSabe-se que a velocidade de carregamento de uma página afeta drastricamente a taxa de conversão e o SEO. Em um site \"médio\", é esperado que cada 100ms a menos no tempo de carregamento de uma página, aumente em 1% a conversão.\n\nAinda assim, a maior parte das lojas tem storefronts (frentes de loja de ecommerce) com nota abaixo de 50 no [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). E poucos parecem saber resolver.\n\nCom isso, o ecommerce global perde trilhões (!) de dólares em vendas.\n\nParte do problema é a escolha do framework e das tecnologias envolvidas:\n\n- a. SPA (Single Page Application) não é a tecnologia ideal para ecommerce, especialmente para performance e SEO.\n\n- b. A complexidade de criar código com esse paradigma cria bases de código difíceis de manter e adicionar novas funcionalidades.\n\n\n### 3. Sua loja demora para evoluir\n\nNos negócios e na vida, a evolução contínua e o aprendizado diário é o que gera sucesso. Especialmente no varejo, que vive de otimização contínua de margem.\n\nContudo, times de ecommerce dependem de devs para editar, testar, aprender e evoluir suas lojas.\n\nDevs, por sua vez, estão geralmente sobrecarregadas de demandas, e demoram demais para entregar o que foi pedido, ainda que sejam tasks simples.\n\nPara piorar, as ferramentas necessárias para realizar o ciclo completo de CRO (conversion rate optimization) como teste A/B, analytics, personalização e content management system (CMS) estão fragmentadas, o que exige ter que lidar com várias integrações e diversos serviços terceirizados diferentes.\n\nTudo isso aumenta drasticamente a complexidade operacional, especialmente em storefronts de alta escala, onde o ciclo de evolução é lento e ineficaz.\n\n\n## Nossa solução\n\nNosso time ficou mais de 10 anos lidando com estes mesmo problemas. Sabemos que existem tecnologias para criar sites e lojas de alto desempenho, mas a maioria parece não ter a coragem de utilizá-las.\n\nFoi quando decidimos criar a deco.cx.\n\nPara habilitarmos a criação de experiências de alto desempenho foi necessário um novo paradigma, que simplifique a criação de lojas rápidas, sem sacrificar a capacidade de **personalização e de evolução contínua.**\n\nCriamos uma plataforma headless que integra tudo o que uma marca ou agência precisa para gerenciar e otimizar sua experiência digital, tornando fácil tomar decisões em cima de dados reais, e aumentando continuamente as taxas de conversão.\n\n## Como fazemos isso:\n\n### 1. Com deco.cx fica rápido de construir\n\nAceleramos desenvolvimento de lojas, apostando em uma combinação de tecnologias de ponta que oferecem uma experiência de desenvolvimento frontend otimizada e eficiente. A stack inclui:\n\n- [**Deno**](https://deno.land)\n Um runtime seguro para JavaScript e TypeScript, criado para resolver problemas do Node.js, como gerenciamento de dependências e configurações TypeScript.\n\n- [**Fresh**](https://fresh.deno.dev)\nUm framework web minimalista e rápido, que proporciona uma experiência de desenvolvimento mais dinâmica e eficiente, com tempos de compilação rápidos ou inexistentes.\n\n- [**Twind**](https://twind.dev)\nUma biblioteca de CSS-in-JS que permite a criação de estilos dinâmicos, sem sacrificar o desempenho, e oferece compatibilidade com o popular framework Tailwind CSS.\n\n- [**Preact**](https://deno.land)\nUma alternativa leve ao React, que oferece desempenho superior e menor tamanho de pacote para aplicações web modernas.\n\nEssa combinação de tecnologias permite que a deco.cx ofereça uma plataforma de desenvolvimento frontend que melhora a produtividade e reduz o tempo de implementação, além de proporcionar sites de alto desempenho.\n\nOs principais ganhos de produtividade da plataforma e tecnologia deco são:\n\n- O deploy (e rollback) instantâneo na edge oferecido pelo [deno Deploy](https://deno.com/deploy)\n\n- A bibliotecas de componentes universais e extensíveis ([Sections](https://docs.deco.cx/en/concepts/section)), além de funções pré-construídas e totalmente customizáveis ([Loaders](https://docs.deco.cx/en/concepts/loader)).\n\n- A facilidade de aprendizado. Qualquer desenvolvedor junior que sabe codar em React, Javascript, HTML e CSS consegue aprender rapidamente a nossa stack, que foi desenhada pensando na melhor experiência de desenvolvimento.\n\n\n### 2. Com deco.cx fica ultrarrápido de navegar\n\nAs tecnologias escolhidas pela deco também facilitam drasticamente a criação de lojas ultrarrápidas.\n\nNormalmente os storesfronts são criados com React e Next.Js - frameworks JavaScript que usam a abordagem de Single-Page Applications (SPA) para construir aplicativos web. Ou seja, o site é carregado em uma única página e o conteúdo é transportado dinamicamente com JavaScript.\n\nDeno e Fresh, tecnologias que usamos aqui, são frameworks de JavaScript que trabalham com outro paradigma: o server-side-rendering, ou seja, o processamento dos componentes da página é feito em servidores antes de ser enviado para o navegador, ao invés de ser processado apenas no lado do cliente.\n\nIsso significa que a página já vem pronta para ser exibida quando é carregada no navegador, o que resulta em um carregamento mais rápido e uma melhor experiência do usuário.\n\nAlém disso, essas tecnologias trabalham nativamente com computação na edge, o que significa que a maior parte da lógica é executada em servidores perto do usuário, reduzindo a latência e melhorando a velocidade de resposta. Como o processamento é feito em servidores na edge, ele é capaz de realizar tarefas mais pesadas, como buscar e processar dados de fontes externas, de forma mais eficiente.\n\nAo usar essas ferramentas em conjunto, é possível construir e-commerces de alto desempenho, com tempos de carregamento de página mais rápidos e uma experiência geral melhorada.\n\n\n### 3. Com deco.cx fica fácil de evoluir\n\nA plataforma deco oferece, em um mesmo produto, tudo o que as agências e marcas precisam para rodar o ciclo completo de evolução da loja:\n\n- **Library**: Onde os desenvolvedores criam (ou customizam) [loaders](https://docs.deco.cx/en/concepts/loader) que puxam dados de qualquer API externa, e usam os dados coletados para criar componentes de interface totalmente editáveis pelos usuários de negócio ([Sections](https://docs.deco.cx/en/concepts/section)).\n\n- **Pages**: Nosso CMS integrado, para que o time de negócio consiga [compor e editar experiências rapidamente](https://docs.deco.cx/en/concepts/page), usando as funções e componentes de alto desempenho pré-construidos pelos seus desenvolvedores, sem precisar de uma linha de código.\n\n- **Campanhas**: Nossa ferramenta de personalização que te permite agendar ou customizar a mudança que quiser por data ou audiência. Seja uma landing page para a Black Friday ou uma sessão para um público específico, você decide como e quando seu site se comporta para cada usuário.\n\n- **Experimentos**: Testes A/B ou multivariados em 5 segundos - nossa ferramenta te permite acompanhar, em tempo real, a performance dos seus experimentos e relação à versão de controle.\n\n- **Analytics**: Dados em tempo real sobre toda a jornada de compra e a performance da loja. Aqui você cria relatórios personalizados, que consolidam dados de qualquer API externa.\n\n\n## O que está por vir\n\nEstamos só começando. Nossa primeira linha de código na deco foi em Setembro 2022. De lá pra cá montamos [uma comunidade no Discord](https://deco.cx/discord), que já conta com 1.050+ membros, entre agências, estudantes, marcas e experts.\n\nSe você está atrás de uma forma de criar sites e lojas ultrarrápidos, relevantes para cada audiência, e que evoluem diariamente através de experimentos e dados, [agende uma demo](https://deco.cx)."},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/9cd72d58-1a57-443f-83a3-d263105670ff","date":"03/12/2023","path":"abertura-ii-hackathon-deco.md","descr":"Discurso da abertura da segunda Hackathon deco.cx.","title":"América Latina e o futuro das experiências digitais","author":"Guilherme Rodrigues","content":"Estou extremamente empolgado em dar início à nossa segunda Hackathon deco.cx! Mas antes de começarmos, eu quero dividir algumas palavras com vocês.\n\nNós estamos reunidos aqui hoje para aprender, criar e, se tudo der certo, levar para casa um prêmio de 500 reais. Mas acreditem, esse prêmio não é o melhor que vocês vão levar daqui — longe disso.\n\nA verdadeira recompensa é a oportunidade de adquirir novas habilidades que os diferenciam e os elevam a outro patamar como desenvolvedores e desenvolvedoras. E ainda maior que isso: a oportunidade de protagonizar a próxima geração de desenvolvimento web global.\n\nO estado atual de complexidade acumulada no desenvolvimento web é insustentável. Os anos de desenvolvimento na \"câmara de eco\" dos frameworks JS gerou uma enorme fricção, uma grande barreira de entrada para desenvolver web apps.\n\nCada vez é necessário aprender mais frameworks, padrões e bibliotecas para ser minimamente produtivo. O tempo de build de sites baseados nessas stacks limitam nossa criatividade no dia a dia. Além disso, temos grandes dificuldades de entregar sites performáticos. Não precisa ser assim!\n\nVivemos em um momento único na história do desenvolvimento web. Deno está no início de uma revolução que transformará a maneira como criamos e entregamos experiências digitais. E nós temos a chance de aproveitar essa janela de oportunidade para nos destacarmos no mercado global.\n\nDeno, junto com tecnologias como Fresh e Tailwind, representam a esperança de uma nova direção. Essas tecnologias nos mostraram como é possível ser simples e eficiente. Estamos vendo nascer o próximo Node.js, diante de nossos olhos — e estamos convidados a participar e a co-criá-lo!\n\nPor outro lado, a demanda global por digitalização só acelera. Demanda por projetos, demanda por sites, demanda por pessoas desenvolvedoras. E nós temos muita oferta de talento brasileiro — jovens pessoas desenvolvedoras, muitas vezes com dificuldade de se colocar no mercado de trabalho apesar de seu grande potencial.\n\nNós temos a oportunidade de atender essa demanda, mostrando o incrível potencial dos desenvolvedores brasileiros. Não precisamos apenas seguir as tendências; podemos liderar e nos tornar referência mundial na criação de experiências digitais de alta performance.\n\nMas a nossa responsabilidade não termina com o domínio dessas tecnologias. Para promover uma mudança estrutural, não basta garantirmos o nosso próprio sucesso. Devemos nos esforçar para sermos mentores, treinarmos a próxima geração e multiplicarmos a tecnologia no Brasil, promovendo a inclusão e dando oportunidades a todos aqueles que desejam ingressar nesse mercado em constante crescimento: especialmente aqueles que previsivelmente não teriam acesso a elas.\n\nEntão, enquanto vocês participam desta Hackathon, lembrem-se do potencial que têm em mãos e da responsabilidade compartilhada. Que vocês aproveitem ao máximo essa oportunidade, tanto para o seu crescimento pessoal quanto para o desenvolvimento da nossa comunidade. Estamos construindo algo muito maior do que cada um de nós.\n\nDesejo a todos vocês um ótimo evento, repleto de aprendizado, colaboração e inovação. Que comecem os trabalhos!"},{"img":"https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/530/179d2e1f-8214-46f4-bc85-497f2313145e","date":"03/01/2023","path":"criando-uma-pagina-com-decocx.md","descr":"Recriando a página da deno-land utilizando a plataforma da deco.cx com as tecnologias: Deno, Fresh, Preact e Twind.","title":"Minha experiência com deco.cx","author":"Guilherme Tavano","content":"## Desafio\n\nRecentemente aceitei um desafio e quero compartilhar como foi a minha experiência.\n\nO desafio era reconstruir a Home da [https://deno.land/](https://deno.land/) utilizando a plataforma deco.cx como CMS.\n\n## O que é deco.cx?\n\nÉ uma plataforma criada por um time de pessoas que trabalharam na Vtex, para construir páginas e lojas virtuais performáticas e em um curto período de tempo.\n\nCom o slogan \"Crie, teste e evolua sua loja. Todos os dias.\", a plataforma foca na simplicidade no desenvolvimento, autonomia para edições/testes e foco em performance.\n\n## Primeira etapa - Conhecendo a Stack\n\nAntes de iniciar o desenvolvimento, precisei correr atrás das tecnologias que a deco.cx sugere para utilização.\n\nSão elas:\n\n### Preact\n\nPreact é uma biblioteca JS baseada no React, mas que promete ser mais leve e mais performática.\n\nA adaptação aqui, para quem já tem o React, não tende a ser complicada.\n\n### Deno\n\nDeno é um ambiente de execução de Javascript e Typescript, criado pelo mesmo criador do Node.js.\n\nCom uma boa aceitação entre os devs, a alternativa melhorada do Node.js promete se destacar no futuro.\n\n### Fresh\n\nFresh é um Framework que me deixou bem curioso. Nessa stack, podemos dizer que ele atua como um Next.\n\nApesar de não ter me aprofundado no Framework, não tive problemas aqui, afinal um dos pilares do Fresh é não precisar de configuração, além de não ter etapa de build.\n\n### Twind\n\nTwind é uma alternativa mais leve, rápida e completa do tão conhecido Tailwind.\n\nA adaptação é extremamente fácil para quem já trabalha com Tailwind, mas não era o meu caso.\n\nPequenos gargalos no começo, mas a curva de aprendizagem é curta e nas últimas seções eu já estava sentindo os efeitos (positivos).\n\n## Segunda Etapa - Conhecendo a ferramenta da deco.cx\n\nMeu objetivo aqui, era entender como a ferramenta me ajudaria a recriar a página deno.land, tornando os componentes editáveis pelo painel CMS.\n\n### Criação da Conta\n\nO Login foi bem simples, pode ser feito com Github ou Google.\n\n### Criação do Projeto\n\nNa primeira página, após logado, temos a opção de Criar um Novo Site.\n\nTive que dar um nome ao projeto e escolher o template padrão para ser iniciado.\n\n\n\nAssim que o site é criado, **automaticamente** um repositório é montado no GitHub da [deco-sites](https://github.com/deco-sites) e um link da sua página na internet também.\n\nA partir dai, cada push que você fizer resultará no Deploy da aplicação no servidor e rapidamente será refletido em produção\n\n### Entendendo páginas e seções\n\nDentro do painel, podemos acessar a aba de \"Pages\"\n\n\n\nNessa parte, cada página do seu site estará listada, e assim que você clicar, você pode ver as seções que estão sendo utilizadas.\n\n\n\nDessa forma, fica fácil para uma pessoa não técnica conseguir criar novas páginas e adicionar/editar as seções.\n\nMas para entender como criar um modelo de seção, vamos para a terceira etapa.\n\n## Terceira Etapa - Integração do Código com a deco.cx\n\nComo eu tinha o objetivo de tornar as seções da página editáveis, eu precisei entender como isso deveria ser escrito no código.\n\nE é tão simples, quanto tipagem em Typescript, literalmente.\n\nDentro da estrutura no GitHub, temos uma pasta chamada _sections_, e cada arquivo _.tsx_ lá dentro se tornará uma daquelas seções no painel.\n\n\n\nEm cada arquivo, deve ser exportado uma função default, que retorna um código HTML.\n\nDentro desse HTML, podemos utilizar dados que vem do painel, e para definir quais dados deverão vir de lá, fazemos dessa forma:\n\nexport interface Props {\n image: LiveImage;\n imageMobile: LiveImage;\n altText: string;\n title: string;\n subTitle: string;\n}\n\nEsses são os campos que configurei para a seção _Banner_, e o resultado é esse no painel:\n\n\n\nDepois recebi esses dados como Props, assim:\n\nexport default function Banner({ image, imageMobile, altText, subTitle, title }: Props,) {\n return (\n <>\n //Your HTML code here\n \n );\n}\n\nE o resultado final da seção é:\n\n\n\n### Dev Mode\n\nÉ importante ressaltar, que durante o desenvolvimento, a ferramenta oferece uma função \"Dev Mode\".\n\nIsso faz com que os campos editáveis do painel se baseiem no código feito no localhost e não do repositório no Github.\n\nGarantindo a possibilidade de testes durante a criação.\n\n## Resultado Final + Conclusão\n\nO resultado final, pode ser conferido em: [https://deno-land.deco.site/](https://deno-land.deco.site/)\n\nConsegui atingir nota 97 no Pagespeed Mobile e isso me impressionou bastante.\n\nParticularmente, gostei muito dos pilares que a deco.cx está buscando entregar, em especial a autonomia de edição e o foco na velocidade de carregamento.\n\nA ferramenta é nova e já entrega muita coisa legal. A realização desse desafio foi feita após 3 meses do início do desenvolvimento da plataforma da deco.\n\nMinha recomendação a todos é que entrem na [Comunidade no Discord](https://discord.gg/RZkvt5AE) e acompanhem as novidades para não ficar para trás.\n\nSe possível, criem um site na ferramenta e façam os seus próprios testes.\n\nEm parceria com [TavanoBlog](https://tavanoblog.com.br/)."},{"img":"https://i.insider.com/5e6bb1bd84159f39f736ee32?width=2000&format=jpeg&auto=webp","date":"11/29/2022","path":"pg-vb-pt-br.md","descr":"Por Paul Graham, traduzido por ChatGPT.","title":"A vida é curta","author":"Chat GPT","content":"A vida é curta, como todos sabem. Quando era criança, costumava me perguntar sobre isso. A vida realmente é curta ou estamos realmente nos queixando de sua finitude? Seríamos tão propensos a sentir que a vida é curta se vivêssemos 10 vezes mais tempo?\n\nComo não parecia haver maneira de responder a essa pergunta, parei de me perguntar sobre isso. Depois tive filhos. Isso me deu uma maneira de responder à pergunta e a resposta é que a vida realmente é curta.\n\nTer filhos me mostrou como converter uma quantidade contínua, o tempo, em quantidades discretas. Você só tem 52 fins de semana com seu filho de 2 anos. Se o Natal-como-mágica dure, digamos, dos 3 aos 10 anos, só poderá ver seu filho experimentá-lo 8 vezes. E enquanto é impossível dizer o que é muito ou pouco de uma quantidade contínua como o tempo, 8 não é muito de alguma coisa. Se você tivesse uma punhado de 8 amendoins ou uma prateleira de 8 livros para escolher, a quantidade definitivamente pareceria limitada, independentemente da sua expectativa de vida.\n\nOk, então a vida realmente é curta. Isso faz alguma diferença saber disso?\n\nFez para mim. Isso significa que argumentos do tipo \"A vida é muito curta para x\" têm muita força. Não é apenas uma figura de linguagem dizer que a vida é muito curta para alguma coisa. Não é apenas um sinônimo de chato. Se você achar que a vida é muito curta para alguma coisa, deve tentar eliminá-la se puder.\n\nQuando me pergunto o que descobri que a vida é muito curta, a palavra que me vem à cabeça é \"besteira\". Eu percebo que essa resposta é um pouco tautológica. Quase é a definição de besteira que é a coisa de que a vida é muito curta. E ainda assim a besteira tem um caráter distintivo. Há algo falso nela. É o alimento junk da experiência. [1]\n\nSe você perguntar a si mesmo o que gasta o seu tempo em besteira, provavelmente já sabe a resposta. Reuniões desnecessárias, disputas sem sentido, burocracia, postura, lidar com os erros de outras pessoas, engarrafamentos, passatempos viciantes mas pouco gratificantes.\n\nHá duas maneiras pelas quais esse tipo de coisa entra em sua vida: ou é imposto a você ou o engana. Até certo ponto, você tem que suportar as besteiras impostas por circunstâncias. Você precisa ganhar dinheiro e ganhar dinheiro consiste principalmente em realizar tarefas. De fato, a lei da oferta e da demanda garante isso: quanto mais gratificante é algum tipo de trabalho, mais barato as pessoas o farão. Pode ser que menos tarefas sejam impostas a você do que você pensa, no entanto. Sempre houve uma corrente de pessoas que optam por sair da rotina padrão e vão viver em algum lugar onde as oportunidades são menores no sentido convencional, mas a vida parece mais autêntica. Isso pode se tornar mais comum.\n\nVocê pode reduzir a quantidade de besteira em sua vida sem precisar se mudar. A quantidade de tempo que você precisa gastar com besteiras varia entre empregadores. A maioria das grandes organizações (e muitas pequenas) está imersa nelas. Mas se você priorizar conscientemente a redução de besteiras acima de outros fatores, como dinheiro e prestígio, pode encontrar empregadores que irão desperdiçar menos do seu tempo.\n\nSe você é freelancer ou uma pequena empresa, pode fazer isso no nível de clientes individuais. Se você demitir ou evitar clientes tóxicos, pode diminuir a quantidade de besteira em sua vida mais do que diminui sua renda.\n\nMas, enquanto alguma quantidade de besteira é inevitavelmente imposta a você, a besteira que se infiltra em sua vida enganando-o não é culpa de ninguém, mas sua própria. E ainda assim, a besteira que você escolhe pode ser mais difícil de eliminar do que a besteira que é imposta a você. Coisas que o atraem para desperdiçar seu tempo precisam ser muito boas em enganá-lo. Um exemplo que será familiar para muitas pessoas é discutir online. Quando alguém contradiz você, está, de certa forma, atacando você. Às vezes bastante abertamente. Seu instinto quando é atacado é se defender. Mas, assim como muitos instintos, esse não foi projetado para o mundo em que vivemos agora. Contrariamente ao que parece, é melhor, na maioria das vezes, não se defender. Caso contrário, essas pessoas estão literalmente tomando sua vida. [2]\n\nDiscutir online é apenas incidentalmente viciante. Há coisas mais perigosas do que isso. Como já escrevi antes, um subproduto do progresso técnico é que as coisas que gostamos tendem a se tornar mais viciantes. Isso significa que precisaremos fazer um esforço consciente para evitar vícios, para nos colocarmos fora de nós mesmos e perguntarmos: \"é assim que quero estar gastando meu tempo?\"\n\nAlém de evitar besteiras, devemos procurar ativamente coisas que importam. Mas coisas diferentes importam para pessoas diferentes e a maioria precisa aprender o que importa para elas. Alguns são afortunados e percebem cedo que adoram matemática, cuidar de animais ou escrever e, então, descobrem uma maneira de passar muito tempo fazendo isso. Mas a maioria das pessoas começa com uma vida que é uma mistura de coisas que importam e coisas que não importam e só gradualmente aprende a distinguir entre elas.\n\nPara os jovens, especialmente, muita dessa confusão é induzida pelas situações artificiais em que se encontram. Na escola intermediária e na escola secundária, o que os outros estudantes acham de você parece ser a coisa mais importante do mundo. Mas quando você pergunta aos adultos o que eles fizeram de errado nessa idade, quase todos dizem que se importavam demais com o que os outros estudantes achavam deles.\n\nUma heurística para distinguir coisas que importam é perguntar a si mesmo se você se importará com elas no futuro. A coisa falsa que importa geralmente tem um pico afiado de parecer importar. É assim que o engana. A área sob a curva é pequena, mas sua forma se crava em sua consciência como uma alfinete.\n\nAs coisas que importam nem sempre são aquelas que as pessoas chamariam de \"importantes\". Tomar café com um amigo importa. Você não vai sentir depois que isso foi um desperdício de tempo.\n\nUma coisa ótima em ter crianças pequenas é que elas fazem você gastar tempo em coisas que importam: elas. Elas puxam sua manga enquanto você está olhando para o seu celular e dizem: \"você vai brincar comigo?\". E as chances são de que essa seja, de fato, a opção de minimização de besteira.\n\nSe a vida é curta, devemos esperar que sua brevidade nos surpreenda. E é exatamente isso que costuma acontecer. Você assume as coisas como garantidas e, então, elas desaparecem. Você acha que sempre pode escrever aquele livro, ou subir aquela montanha, ou o que quer que seja, e então percebe que a janela se fechou. As janelas mais tristes fecham quando outras pessoas morrem. Suas vidas também são curtas. Depois que minha mãe morreu, eu desejei ter passado mais tempo com ela. Eu vivi como se ela sempre estivesse lá. E, de maneira típica e discreta, ela incentivou essa ilusão. Mas era uma ilusão. Acho que muitas pessoas cometem o mesmo erro que eu cometi.\n\nA maneira usual de evitar ser surpreendido por algo é estar consciente disso. Quando a vida era mais precária, as pessoas costumavam ser conscientes da morte em um grau que agora pareceria um pouco morboso. Não tenho certeza do porquê, mas não parece ser a resposta certa lembrar constantemente da caveira pairando no ombro de todos. Talvez uma solução melhor seja olhar o problema pelo outro lado. Cultive o hábito de ser impaciente com as coisas que mais quer fazer. Não espere antes de subir aquela montanha ou escrever aquele livro ou visitar sua mãe. Você não precisa se lembrar constantemente por que não deve esperar. Apenas não espere.\n\nPosso pensar em mais duas coisas que alguém faz quando não tem muito de algo: tentar obter mais disso e saborear o que tem. Ambos fazem sentido aqui.\n\nComo você vive afeta por quanto tempo você vive. A maioria das pessoas poderia fazer melhor. Eu entre elas.\n\nMas você provavelmente pode obter ainda mais efeito prestando mais atenção ao tempo que tem. É fácil deixar os dias passarem voando. O \"fluxo\" que as pessoas imaginativas adoram tanto tem um parente mais sombrio que impede você de pausar para saborear a vida no meio da rotina diária de tarefas e alarmes. Uma das coisas mais impressionantes que já li não estava em um livro, mas no título de um: Burning the Days (Queimando os Dias), de James Salter.\n\nÉ possível diminuir um pouco o tempo. Eu melhorei nisso. As crianças ajudam. Quando você tem crianças pequenas, há muitos momentos tão perfeitos que você não consegue deixar de notar.\n\nTambém ajuda sentir que você tirou tudo de alguma experiência. O motivo pelo qual estou triste por minha mãe não é apenas porque sinto falta dela, mas porque penso em tudo o que poderíamos ter feito e não fizemos. Meu filho mais velho vai fazer 7 anos em breve. E, embora sinta falta da versão dele de 3 anos, pelo menos não tenho nenhum arrependimento pelo que poderia ter sido. Tivemos o melhor tempo que um pai e um filho de 3 anos poderiam ter.\n\nCorte implacavelmente as besteiras, não espere para fazer coisas que importam e saboreie o tempo que tem. É isso o que você faz quando a vida é curta. \n\n---\n\nNotas\n\n[1] No começo, eu não gostei que a palavra que me veio à mente tivesse outros significados. Mas então percebi que os outros significados estão bastante relacionados. Besteira no sentido de coisas em que você desperdiça seu tempo é bastante parecida com besteira intelectual.\n\n[2] Escolhi esse exemplo de forma deliberada como uma nota para mim mesmo. Eu sou atacado muito online. As pessoas contam as mentiras mais loucas sobre mim. E até agora eu fiz um trabalho bastante medíocre de suprimir a inclinação natural do ser humano de dizer \"Ei, isso não é verdade!\".\n\nObrigado a Jessica Livingston e Geoff Ralston por ler rascunhos deste."},{"tags":[],"body":{}}]},"__resolveType":"site/loaders/blogPostLoader.ts"}
\ No newline at end of file
diff --git a/.env b/.env
index 7b5c60f7..b6a7c28c 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
DECO_SITE_NAME=starting
-DECO_ENV_NAME=deena
\ No newline at end of file
+DECO_ENV_NAME=tavano
\ No newline at end of file
diff --git a/components/decohelp/pages/ui/DocsOverviewContent/DocsOverviewContent.tsx b/components/decohelp/pages/ui/DocsOverviewContent/DocsOverviewContent.tsx
index c166f02c..1dd88182 100644
--- a/components/decohelp/pages/ui/DocsOverviewContent/DocsOverviewContent.tsx
+++ b/components/decohelp/pages/ui/DocsOverviewContent/DocsOverviewContent.tsx
@@ -45,7 +45,7 @@ export default function OverviewContent(
icon: "Book",
label: labels.readTutorials[props.language],
href:
- `https://deco.cx/docs/${props.language}/getting-started/creating-a-site`,
+ `https://docs.deco.cx/${props.language}/getting-started/creating-a-site`,
},
{
icon: "Sparkle",
diff --git a/docs/api-reference/invoke/en.md b/docs/api-reference/invoke/en.md
deleted file mode 100644
index 420361d2..00000000
--- a/docs/api-reference/invoke/en.md
+++ /dev/null
@@ -1,293 +0,0 @@
----
-description: Invoke Client API Reference
----
-
-## Description
-
-The Invoke API is a typed RPC (Remote Procedure Call) client. It makes
-interacting programatically with loaders and actions safer and as easy as
-calling a function, abstracting away the details of the underlying network
-transport.
-
-A single invoke client can be used to interact with actions and loaders from
-your site and from any installed App. The Invoke client have ways to be used
-both from the Client and from the Server, and supports more complex patterns out
-of the box, like calling multiple loaders/actions in a single request (See
-Example 4: Batch Invoke), or sending files via a multipart request.
-
-A Invoke type signature will always be dynamic, and will be inferred based on
-the type of your manifest and the type of the action/loader you are calling:
-
-For example:
-
-```typescript
-import { invoke } from "site/runtime.ts";
-
-const result = await invoke.site.loaders.example(
- props: T, // This will be the type of the props of the action/loader being called
- init?: InvokerRequestInit // This is a fetch request init object extended with some extra options
-);
-
-console.log(result); // This will be the type of the return value of the action/loader
-```
-
-## Importing the API
-
-### Client-side usage
-
-For client-side usage, the Invoke client is exported from the `runtime.ts` file,
-at the root of the project.
-
-Below is an example of a typical `runtime.ts` file, that creates a client for
-interacting with actions and loaders from your site, and from two apps: VTEX and
-Linx Impulse. All Apps can be used in the same way, since they all export a
-`Manifest`.
-
-```typescript
-import { proxy } from "deco/clients/withManifest.ts";
-import type { Manifest } from "./manifest.gen.ts";
-import type { Manifest as ManifestVTEX } from "apps/vtex/manifest.gen.ts";
-import type { Manifest as ManifestLinxImpulse } from "apps/linx-impulse/manifest.gen.ts";
-
-export const invoke = proxy
();
-```
-
-### Server-side usage
-
-For server-side usage, the Invoke client can always be accessed from the
-_Application Context_. This makes it easy to use invoke inside actions and
-loaders.
-
-Below is an example of a loader that uses the Invoke client to call another
-loader from the same application:
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-
-export const async function getUserNotes(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- const user = await ctx.invoke.site.loaders.getUser({ token: req.headers.get("Authorization") });
-
- if (!user) {
- throw new Error("User not found");
- }
-
- return user.notes;
-}
-```
-
-## Usage Examples
-
-### Example 1: Calling an Action or Loader from the Browser
-
-Suppose we have a loader called `getUser`, that returns a user object, based on
-a given user id.
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-
-export interface Props {
- id: string;
-}
-
-export const async function getUser(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- return fetchUser(props.id);
-}
-```
-
-We can now call this loader from the Browser, using the `invoke` client exported
-from the `runtime.ts` file:
-
-```typescript
-import { invoke } from "site/runtime.ts";
-
-const user = await invoke.site.loaders.getUser({ id: "123" });
-```
-
-Since the Invoke client is typed, the return type of the `getUser` function is
-automatically inferred, and the type of the `user` variable is `User`. All of
-the parameter types are also inferred, so we get more confidence for interacting
-with our APIs.
-
-**Important**: This should only be used in the Browser. Trying to import and use
-the Invoke client from the `runtime.ts` file on the server-side will result in
-an error. For calling actions/loaders from the server, refer to the next
-section.
-
-### Example 2: Calling an Action or Loader on the Server
-
-Suppose we are creating an action called `addItem`, that adds an item to a cart.
-
-Suppose we also already have a loader called `cart`, that returns the current
-cart for a given user, based on a session contained in the request cookies:
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-import { getSessionFromRequest } from "site/lib/session.ts";
-import { getCartFromDatabase } from "site/lib/cart.ts";
-
-export interface CartItem {
- productId: string;
- quantity: number;
-}
-
-export interface Cart {
- items: CartItem[];
- id: string;
-}
-
-export const async function cart(
- _props: unknown, req: Request, ctx: AppContext
-): Promise {
- // Get the session from the request cookies
- const session = await getSessionFromRequest(req);
-
- // Get the cart from the database using
- const cart = await getCartFromDatabase(session.cartId);
-
- return cart;
-}
-```
-
-Now, when creating the `addItem` action, we can reuse the `cart` loader to fetch
-the current cart, and then add the item to the cart:
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-import { saveCartToDatabase } from "site/lib/cart.ts";
-
-export interface Props {
- item: CartItem;
-}
-
-export const async function addItem(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- const currentCart = await ctx.invoke.site.loaders.cart();
-
- // Add the item to the cart
- cart.items.push(props.item);
-
- // Save the cart to the database
- await saveCartToDatabase(cart);
-
- return cart;
-}
-```
-
-The Invoke client that comes from the Application Context is also typed, based
-on the `AppContext` type exported by convention from your `site` app.
-
-### Example 3: Uploading a file to the Server
-
-Suppose we have an action called `uploadFile`, that uploads a file to a given
-destination. The action receives a `file` property, which is a file object that
-contains the file data, and a `destination` property, which is a string that
-specifies the destination path for where the file should be uploaded.
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-
-export interface Props {
- file: File;
- destination: string;
-}
-
-export const async function uploadFile(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- // Upload the file to the destination
- await uploadFileToDestination(props.file, props.destination);
-}
-```
-
-We're using the `File` Web API as a prop type here, but this creates a problem:
-
-The `File` object is not serializable via JSON, but the Invoke client uses JSON
-under the hood. This means that trying to pass a `File` object as a prop to an
-action will result in an error when trying to access the `file` property.
-
-To solve this, the Invoke client provides a way to upload files via a multipart
-request, which is a nice way to send files to the server, using the `FormData`
-API and the `multipart/form-data` content type under the hood.
-
-To make use of this, you only need to add a `multipart: true` option to the
-Invoke `InvokerRequestInit` (Which is the second argument to any invoke call),
-and the client will automatically use a custom protocol to send the payload via
-multipart, thus making it possible to send files to the server.
-
-We can now call this action from the Browser, using the `invoke` client exported
-from the `runtime.ts` file:
-
-```tsx
-import { invoke } from "site/runtime.ts";
-
-export function UploadFileInput() {
- const uploadFile = async (file: File) => {
- await invoke.site.actions.uploadFile({
- file: file,
- destination: "/uploads/files",
- }, { multipart: true });
- };
-
- return (
- ();
-```
-
-### Uso no Servidor
-
-Para uso no Servidor, o Invoke pode sempre ser acessado a partir do _Contexto_
-da Aplicação. Isso torna o Invoke mais fácil de usar dentro de actions e
-loaders.
-
-Abaixo está um exemplo de um loader que utiliza o Invoke para chamar outro
-loader da mesma Aplicação:
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-
-export const async function getUserNotes(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- const user = await ctx.invoke.site.loaders.getUser({ token: req.headers.get("Authorization") });
-
- if (!user) {
- throw new Error("Usuário não encontrado");
- }
-
- return user.notes;
-}
-```
-
-## Exemplos de Uso
-
-### Exemplo 1: Chamando uma Action ou Loader a partir do Navegador
-
-Suponha que temos um loader chamado `getUser`, que retorna um objeto de usuário,
-baseado em um `id` de usuário enviado.
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-
-export interface Props {
- id: string;
-}
-
-export const async function getUser(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- return fetchUser(props.id);
-}
-```
-
-Podemos agora chamar esse loader a partir do Navegador, usando o cliente invoke
-exportado do arquivo runtime.ts:
-
-```typescript
-import { invoke } from "site/runtime.ts";
-
-const user = await invoke.site.loaders.getUser({ id: "123" });
-```
-
-Como o cliente Invoke é tipado, o tipo de retorno do `getUser` é automaticamente
-inferido, e o tipo da variável `user` é `User`. Todos os tipos de parâmetros são
-também inferidos, então temos mais confiança para interagir com nossas APIs.
-
-**Importante**: Isso deve ser usado apenas no Navegador. Tentar importar e usar
-o cliente Invoke do arquivo `runtime.ts` no servidor resultará em um erro. Para
-chamar actions/loaders a partir do servidor, veja o próximo exemplo.
-
-### Exemplo 2: Chamando uma Action ou Loader a partir do Servidor
-
-Suponha que estamos criando uma ação chamada `addItem` que adiciona um item a um
-carrinho.
-
-Suponha também que já temos um loader chamado `cart`, que retorna o carrinho
-atual para um usuário, baseado em uma sessão contida nos cookies da requisição:
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-import { getSessionFromRequest } from "site/lib/session.ts";
-import { getCartFromDatabase } from "site/lib/cart.ts";
-
-export interface CartItem {
- productId: string;
- quantity: number;
-}
-
-export interface Cart {
- items: CartItem[];
- id: string;
-}
-
-export const async function cart(
- _props: unknown, req: Request, ctx: AppContext
-): Promise {
- // Pegar a sessão a partir da requisição
- const session = await getSessionFromRequest(req);
-
- // Pegar o carrinho a partir da base de dados usando o ID vindo da sessão
- const cart = await getCartFromDatabase(session.cartId);
-
- return cart;
-}
-```
-
-Agora, quando criamos a ação `addItem`, podemos reutilizar o loader `cart` para
-buscar o carrinho atual e então adicionar o item ao carrinho:
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-import { saveCartToDatabase } from "site/lib/cart.ts";
-
-export interface Props {
- item: CartItem;
-}
-
-export const async function addItem(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- const currentCart = await ctx.invoke.site.loaders.cart();
-
- // Adicionar o item ao carrinho
- cart.items.push(props.item);
-
- // Salvar o carrinho atualizado na base de dados
- await saveCartToDatabase(cart);
-
- return cart;
-}
-```
-
-O cliente Invoke que vem do Contexto da Aplicação é também tipado, baseado no
-tipo `AppContext` exportado por convenção do seu `site` app.
-
-### Exemplo 3: Enviando um arquivo para o Servidor
-
-Suponha que temos uma ação chamada `uploadFile`, que envia um arquivo para um
-destino. A ação recebe uma propriedade `file`, que é um objeto de arquivo que
-contém os dados do arquivo, e uma propriedade `destination`, que é uma string
-que especifica o destino para onde o arquivo deve ser enviado.
-
-```typescript
-import type { AppContext } from "site/apps/site.ts";
-
-export interface Props {
- file: File;
- destination: string;
-}
-
-export const async function uploadFile(
- props: Props, req: Request, ctx: AppContext
-): Promise {
- // Enviar o arquivo para o destino
- await uploadFileToDestination(props.file, props.destination);
-}
-```
-
-Estamos usando a web API `File` como tipo de propriedade aqui, mas isso cria um
-problema:
-
-O objeto `File` não é serializável via JSON, que é o que o Invoke usa
-internamente. Isso significa que tentar passar um objeto File como propriedade
-para uma ação resultará em um erro ao tentar acessar a propriedade file dentro
-da sua action.
-
-Para resolver isso, o cliente Invoke oferece uma maneira de fazer upload de
-arquivos via uma requisição multipart, que é uma maneira prática de enviar
-arquivos para o servidor, usando a API FormData e o tipo de conteúdo
-multipart/form-data.
-
-Para usar isso, você só precisa adicionar uma opção multipart: true ao
-`InvokerRequestInit` do Invoke (que é o segundo argumento para qualquer chamada
-de invoke), e o cliente usará automaticamente um protocolo personalizado para
-enviar o payload via multipart, tornando possível enviar arquivos para o
-servidor.
-
-Podemos agora chamar essa ação a partir do Navegador, usando o cliente invoke
-exportado do arquivo runtime.ts:
-
-```tsx
-import { invoke } from "site/runtime.ts";
-
-export function UploadFileInput() {
- const uploadFile = async (file: File) => {
- await invoke.site.actions.uploadFile({
- file: file,
- destination: "/uploads/files",
- }, { multipart: true });
- };
-
- return (
-
-
Hello, World!
-
-
- );
-}
-
-export default ExampleComponent;
-```
-
-#### Example 2: Inline Script with `hx-on` Attribute
-
-In this example, `useScript` is used to create a minified event handler for an
-`hx-on:click` attribute that changes the text of a button when clicked.
-
-```tsx
-import { useScript } from "deco/hooks/useScript.ts";
-
-const onClick = () => {
- event!.currentTarget.innerText = "Clicked!";
-};
-
-function ExampleButton() {
- return (
-
- Click me
-
- );
-}
-
-export default ExampleButton;
-```
-
-### Notes
-
-- Ensure that the function you pass to `useScript` does not rely on external
- variables or closures that won't be available when the script is executed
- inline.
-- When using with `hx-on:` handlers, make sure the minified function does not
- exceed any attribute length limits that might be imposed by browsers or HTML
- specifications.
diff --git a/docs/api-reference/use-script/pt.md b/docs/api-reference/use-script/pt.md
deleted file mode 100644
index 4e148e79..00000000
--- a/docs/api-reference/use-script/pt.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-description: useScript API reference
----
-
-### Descrição
-
-A função `useScript` foi projetada para ajudar os desenvolvedores a inserir
-scripts diretamente em uma página da web com uma carga mínima. Ela recebe uma
-função e seus argumentos como parâmetros e retorna a versão convertida em string
-e minificada da função. Isso é particularmente útil para inserir manipuladores
-de eventos e outros scripts diretamente no HTML, otimizando o desempenho ao
-reduzir a quantidade de JavaScript enviado pela rede. Ela se integra
-perfeitamente com os manipuladores `hx-on:` do HTMX.
-
-### Importação
-
-```typescript
-import { useScript } from "deco/hooks/useScript.ts";
-```
-
-### Parâmetros
-
-- **fn**: `Function`
- - A função a ser convertida em string e minificada.
-
-- **args**: `...any[]`
- - Os argumentos a serem passados para a função quando ela for chamada.
-
-### Valor de Retorno
-
-- **string**
- - Uma versão convertida em string e minificada da função, pronta para ser
- inserida no HTML.
-
-### Exemplos de Uso
-
-#### Exemplo 1: Script Inline com `dangerouslySetInnerHTML`
-
-Neste exemplo, `useScript` é usado para inserir um script simples que registra
-uma mensagem quando a janela é carregada.
-
-```tsx
-import { useScript } from "deco/hooks/useScript.ts";
-
-const onLoad = () => {
- console.log("Window loaded");
-};
-
-function ExampleComponent() {
- return (
-
-
Hello, World!
-
-
- );
-}
-
-export default ExampleComponent;
-```
-
-#### Exemplo 2: Script Inline com Atributo `hx-on`
-
-Neste exemplo, `useScript` é usado para criar um manipulador de eventos
-minificado para um atributo `hx-on:click` que altera o texto de um botão quando
-clicado.
-
-```tsx
-import { useScript } from "deco/hooks/useScript.ts";
-
-const onClick = () => {
- event!.currentTarget.innerText = "Clicked!";
-};
-
-function ExampleButton() {
- return (
-
- Click me
-
- );
-}
-
-export default ExampleButton;
-```
-
-### Notas
-
-- Certifique-se de que a função passada para `useScript` não dependa de
- variáveis externas ou closures que não estarão disponíveis quando o script for
- executado inline.
-- Ao usar com manipuladores `hx-on:`, certifique-se de que a função minificada
- não exceda os limites de comprimento de atributos que podem ser impostos pelos
- navegadores ou especificações HTML.
diff --git a/docs/api-reference/use-section/en.md b/docs/api-reference/use-section/en.md
deleted file mode 100644
index cae7e083..00000000
--- a/docs/api-reference/use-section/en.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-description: useSection API reference
----
-
-The `useSection` hook in deco.cx is a powerful tool designed to automatically
-generate links for updating and rendering sections. With this hook you can use
-HTMX or Fresh's Partials to render specific section states. Below is a detailed
-explanation of its usage, parameters, and examples.
-
-## Importing the useSection Hook
-
-To use the useSection hook, you need to import it from the
-deco/hooks/useSection.ts file:
-
-```tsx
-import { useSection } from "deco/hooks/useSection.ts";
-```
-
-## Parameters
-
-The useSection hook accepts an options object with the following properties:
-
-1. props: An object containing the section props to override. This allows you to
- specify new values for props that will be used to render the section. Keep in
- mind that props are merged with those from the current section instance.
-2. href: A string representing the new URL to evaluate this section. This URL
- will be used for the `Request` parameter on all loaders/actions this section
- may depend on.
-
-## Return Value
-
-The useSection hook returns a URL string of the section with the props partially
-applied
-
-## Example Usage
-
-Let's build a component that print an integer and allow us to see the next
-integer. Here's a print
-
-
-
-This component can be built with the following code:
-
-```tsx
-import { useSection } from "deco/hooks/useSection.ts";
-
-export default function Section({ count = 0 }: { count: number }) {
- return (
-
- );
-}
-```
-
-Where useSection returns a link for the next integer.
-
-## Warnings
-
-1. URL Size Limits: Be mindful of the URL size limits when passing props to
- useSection. Try to keep payloads small and use lightweight data types like
- booleans and IDs.
-2. Security: Ensure that any sensitive data passed as props is properly secured
- and does not expose vulnerabilities through the URL.
diff --git a/docs/api-reference/use-section/pt.md b/docs/api-reference/use-section/pt.md
deleted file mode 100644
index c9a8d95b..00000000
--- a/docs/api-reference/use-section/pt.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-description: useSection API reference
----
-
-O hook `useSection` no deco.cx é uma ferramenta poderosa projetada para gerar
-automaticamente links para atualização e renderização de seções. Com este hook,
-você pode usar os Partials do HTMX ou Fresh para renderizar estados específicos
-de seções. Abaixo está uma explicação detalhada de seu uso, parâmetros e
-exemplos.
-
-## Importando o Hook useSection
-
-Para usar o hook useSection, você precisa importá-lo do arquivo
-deco/hooks/useSection.ts:
-
-```tsx
-import { useSection } from "deco/hooks/useSection.ts";
-```
-
-## Parâmetros
-
-O hook useSection aceita um objeto de opções com as seguintes propriedades:
-
-1. **props**: Um objeto contendo as propriedades da seção a serem substituídas.
- Isso permite que você especifique novos valores para as propriedades que
- serão usadas para renderizar a seção. Lembre-se de que as propriedades são
- mescladas com aquelas da instância atual da seção.
-2. **href**: Uma string que representa a nova URL para avaliar esta seção. Esta
- URL será usada para o parâmetro `Request` em todos os loaders/actions dos
- quais esta seção pode depender.
-
-## Valor de Retorno
-
-O hook useSection retorna uma string de URL da seção com as propriedades
-aplicadas parcialmente.
-
-## Exemplo de Uso
-
-Vamos construir um componente que imprime um número inteiro e nos permite ver o
-próximo número inteiro. Aqui está uma ilustração:
-
-
-
-Este componente pode ser construído com o seguinte código:
-
-```tsx
-import { useSection } from "deco/hooks/useSection.ts";
-
-export default function Section({ count = 0 }: { count: number }) {
- return (
-
- );
-}
-```
-
-Onde useSection retorna um link para o próximo número inteiro.
-
-## Avisos
-
-1. **Limites de Tamanho de URL**: Esteja atento aos limites de tamanho da URL ao
- passar propriedades para useSection. Tente manter os payloads pequenos e use
- tipos de dados leves, como booleanos e IDs.
-2. **Segurança**: Garanta que quaisquer dados sensíveis passados como
- propriedades estejam devidamente protegidos e não exponham vulnerabilidades
- através da URL.
diff --git a/docs/cms-capabilities/advanced/actions/en.md b/docs/cms-capabilities/advanced/actions/en.md
deleted file mode 100644
index 78415ab8..00000000
--- a/docs/cms-capabilities/advanced/actions/en.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-description: Actions (execution of actions)
-since: 2.0
----
-
-Actions represent functions that are typically invoked by users in the browser.
-For example, signing up for a newsletter, adding an item to a shopping cart, or
-any operation that requires server intervention.
-
-In the platform, you can test such actions, or even have actions that are only
-executed in this administrative interface.
-
-Unlike sections and loaders, it is possible to save pre-configured entities, but
-there is not much usefulness in this. In this sense, by accessing the sidebar
-`Advanced > Actions`, you will have access to the actions library and the
-ability to create, save, edit, and execute existing actions.
-
->.deco.site`.
-2. Go to the developer tools and access the **Network** tab.
-3. Reload the page and make sure the script
- `https://www.googletagmanager.com/gtm.js?id={GTM-ID}` is being loaded.
-
-## Integrating Google Analytics 4
-
-> We recommend using Google Analytics as the GTM tag to avoid interference. If
-> you are using Google Analytics with GTag, add your `GA measurement id` to the
-> `GA measurement ids` property of the analytics section.
-
-If there is already a Google Analytics 4 (GA4) tag in the GTM container
-configured, your deco.cx site will automatically be sending events to the GA4.
-To verify this, go to the **Network** tab again and look for a request with the
-name `collect`. Example:
-
-
-_Example of collect request that sends data to GA4_
-
-> If you don't see this request, make sure there is no adblock configured (ex:
-> uBlock Origin). Some browsers already integrate adblocks by default.
-
-However, if you want to analyze your metrics **according to tests A/B created in
-deco.cx**, it is necessary to make an extra configuration in the container GTM.
-For that, follow the steps:
-
-1. In GTM, enter the **Variables** section.
-2. Under **User Variables**, click **Create New**.
-3. Fill in the variable name with `Flags` (this name will be used posteriorly).
-4. Click the edit button to select the variable type and select **Custom
- Javascript**.
-5. Paste the following code into the text area:
-
-```javascript
-function main() {
- return window.LIVE.flags.map(function (flag) {
- if (flag.value) return flag.name;
- else return null;
- }).filter(Boolean);
-}
-```
-
-5. Click Save.
-
-After the variable has been created, it is still necessary to associate it with
-the Google tag Analytics. For that, follow the steps:
-
-1. From the **Tags** menu, select your GA4 tag. (By default,
- `Google Analytics GA4`).
-2. Under **Tag Configuration**, click the edit button.
-3. In the **User Property** section, click **Add Row**.
-4. Fill the **Property name** with `flags` and the **Value** with `{{Flags}}`,
- this being the same name as the variable created earlier.
-5. That's it, the integration is set up!
-
-
-_Screenshot of `flags` property configuration_
-
-It is now possible to segment your views according to groups of user configured
-in deco.cx.
-
-## Troubleshooting
-
-- **A tag I configured is not working properly**
-
-By using Web Workers technology to include external scripts, there are some
-limitations related to CORS (Cross-origin resource sharing). Depending on the
-tag being included, it is possible that the request for fetch a `.js` script
-fails.
-
-To solve this problem, you need to create a **requests proxy** in your store
-([read more about proxying requests here](https://partytown.builder.io/proxying-requests)).
-Like deco.cx websites are traditional [Fresh](https://fresh.deno.dev/) projects,
-just follow the following steps to create this proxy:
-
-1. In your project, inside the `routes/` folder, create a file called
- `proxy.ts`.
-2. Paste the following code into this file, noting the comments:
-
-```ts
-import { Handlers } from "$fresh/server.ts";
-
-// Add here the scripts you want to proxy
-const ALLOWLIST_URLS = ["https://xxxx.collect.igodigital.com/collect.js"];
-
-export const handler: Handlers = {
- GET: async (req) => {
- const url = (new URL(req.url)).searchParams.get("url");
-
- if (!url || !ALLOWLIST_URLS.includes(url)) {
- return new Response(null, { status: 404 });
- }
-
- const proxyRequest = new Request(
- url,
- {
- headers: req.headers,
- method: req.method,
- body: req.body,
- redirect: "follow",
- },
- );
-
- const response = await fetch(proxyRequest);
- const headers = new Headers(response.headers);
- headers.set("access-control-allow-origin", "*");
-
- return new Response(response.body, {
- status: response.status,
- statusText: response.statusText,
- headers,
- });
- },
-};
-```
-
-4. Push your code changes to the `main` branch.
-5. Replace the URLs of the added scripts in the GTM settings with
- `https://www.yourdecostore.com.br/proxy?url={urlDoScript}`.
-
-For example, if the script you are trying to load is in
-`https://xxxx.collect.igodigital.com/collect.js`, replace this URL with
-`https://www.yourdecostore.com.br/proxy?url=https%3A%2F%2Fxxxx.collect.igodigital.com%2Fcollect.js`.
-Use the `encodeURIComponent` Javascript function if necessary.
diff --git a/docs/composable-apis/gtm/pt.md b/docs/composable-apis/gtm/pt.md
deleted file mode 100644
index dac63fa1..00000000
--- a/docs/composable-apis/gtm/pt.md
+++ /dev/null
@@ -1,185 +0,0 @@
----
-description: Aprenda como integrar o Google Tag Manager com um site deco.cx
----
-
-## O que você aprenderá?
-
-- Integrar o [Google Tag Manager](https://tagmanager.google.com/) com seu site
- deco.cx, permitindo a adição de tags configuradas pela interface do GTM.
-- Integrar o [Google Analytics](https://analytics.google.com/) através do GTM.
-
-## Pré-requisitos
-
-- Um `trackingId` de um container do Google Tag Manager, formatado no estilo:
- `GTM - XXXXXX`.
- ([ajuda](https://support.rocketspark.com/hc/en-us/articles/900002470443-How-do-I-get-my-Google-Tag-Manager-Tracking-ID-or-GTM-Number-))
-
-- _Opcional:_ Tag configurada do Google Analytics 4
- ([ajuda](https://support.google.com/tagmanager/answer/9442095?hl=en))
-
-## Introdução
-
-O **Google Tag Manager (GTM)** é uma ferramenta gratuita oferecida pelo Google
-que permite gerenciar e implementar facilmente tags de rastreamento e códigos de
-terceiros em seu site ou aplicativo. Essas tags podem incluir scripts de análise
-de dados, como o Google Analytics, pixels de conversão de publicidade ou outros
-códigos personalizados.
-
-Entretanto, o uso excessivo de tags no GTM pode **prejudicar a performance de um
-site** comum, uma vez que os scripts podem aumentar o tempo de carregamento das
-páginas e comprometer a experiência do usuário. Por isso, a integração feita
-pela deco.cx utiliza o [Partytown](https://partytown.builder.io/), que permite a
-execução das tags em um service worker e melhora o tempo de carregamento da
-página.
-
-## Integrando o GTM na deco.cx
-
-Se você criou um site na deco.cx baseado no nosso
-[starter de ecommerce](https://fashion.deco.site/), ele **já tem todo o código
-necessário para se integrar com o GTM**. No entanto, é necessário configurar um
-bloco section chamado analytics **Analytics** adicionando a propriedade
-`trackingId` com o ID do
-[container](https://developers.google.com/tag-platform/tag-manager/web#standard_web_page_installation)
-previamente configurado.
-
-Para isso, siga os passos:
-
-1. Abra a página **Blocos** no Admin da deco.cx
-2. Selecione `Sections`.
-3. Busque por `Analytics`.
-4. Edite a Section `Analytics`, adicionando ou editando a propriedade **Tracking
- ID** com o ID do seu container no GTM.
-5. Salve e Publique o bloco.
-
-Todas as páginas que utilizam esta section (`Analytics`) será atualizada
-automaticamente.
-
-É isso! Para testar que está tudo funcionando, faça o seguinte:
-
-1. Acesse seu site deco `https://<>.deco.site`.
-2. Vá até as ferramentas de desenvolvedor e acesse a aba **Network**.
-3. Recarregue a página e certifique-se que o script
- `https://www.googletagmanager.com/gtm.js?id=` está sendo carregado.
-
-## Integrando o Google Analytics 4
-
-> Recomendamos que utilize o Google Analytics como tag do GTM para evitar
-> interferência. Caso utilize Google Analytics pelo GTag, adicione seu
-> `GA measurement id` na propriedade `GA measurement ids` da section analytics.
-
-Se já existe uma tag do Google Analytics 4 (GA4) no container do GTM
-configurado, automaticamente o seu site deco.cx já estará enviando eventos para
-o GA4. Para verificar isso, acesse a aba **Network** novamente e busque por uma
-requisição com o nome `collect`. Exemplo:
-
-
-_Exemplo de requisição collect que envia dados para o GA4_
-
-> Caso não veja esse request, certifique-se que não há nenhum adblock
-> configurado (ex: uBlock Origin). Alguns navegadores já integram adblocks por
-> padrão.
-
-Entretanto, caso você queira analisar suas métricas **de acordo com os testes
-A/B criados na deco.cx**, é necessário fazer uma configuração extra no container
-GTM. Para isso, siga os passos:
-
-1. No GTM, entre na seção **Variáveis**.
-2. Em **Variáveis definidas pelo usuário**, clique em **Criar Nova**.
-3. Preencha o nome da variável com `Flags` (esse nome será utilizado
- posteriormente).
-4. Clique no botão de edição para selecionar o tipo de variável e selecione
- **Javascript personalizado**.
-5. Cole o seguinte código na área de texto:
-
-```javascript
-function main() {
- return window.LIVE.flags.map(function (flag) {
- if (flag.value) return flag.name;
- else return null;
- }).filter(Boolean);
-}
-```
-
-5. Clique em Salvar.
-
-Após a variável ter sido criada, ainda é necessário associá-la à tag do Google
-Analytics. Para isso, siga os passos:
-
-1. No menu **Tags**, selecione a sua tag do GA4. (Por padrão,
- `Google Analytics GA4`).
-2. Em **Configuração da tag**, clique no botão de edição.
-3. Na seção **Propriedade do usuário**, clique em **Adicionar Linha**.
-4. Preencha o **Nome da propriedade** com `flags` e o **Valor** com `{{Flags}}`,
- este sendo o mesmo nome da variável criada anteriormente.
-5. Pronto, a integração está configurada!
-
-
-_Screenshot de configuração da propriedade `flags`_
-
-Agora, é possível segmentar suas visualizações de acordo com os grupos de
-usuário configurados na deco.cx.
-
-## Troubleshooting
-
-- **Uma tag que configurei não está funcionando corretamente**
-
-Por utilizar a tecnologia de Web Workers para incluir os scripts externos,
-existem algumas limitações relacionadas à CORS (Cross-origin resouce sharing).
-Dependendo da tag que está sendo incluída, é possível que a requisição para
-buscar um script `.js` falhe.
-
-Para resolver esse problema, é necessário criar um **proxy de requests** na sua
-loja
-([leia mais sobre proxys de requests aqui](https://partytown.builder.io/proxying-requests)).
-Como os sites deco.cx são projetos [Fresh](https://fresh.deno.dev/)
-tradicionais, basta seguir os seguintes passos para criar este proxy:
-
-1. No seu projeto, dentro da pasta `routes/`, crie um arquivo chamado
- `proxy.ts`.
-2. Cole o seguinte código neste arquivo, observando os comentários:
-
-```ts
-import { Handlers } from "$fresh/server.ts";
-
-// Adicione aqui os scripts que você deseja proxiar
-const ALLOWLIST_URLS = ["https://xxxx.collect.igodigital.com/collect.js"];
-
-export const handler: Handlers = {
- GET: async (req) => {
- const url = (new URL(req.url)).searchParams.get("url");
-
- if (!url || !ALLOWLIST_URLS.includes(url)) {
- return new Response(null, { status: 404 });
- }
-
- const proxyRequest = new Request(
- url,
- {
- headers: req.headers,
- method: req.method,
- body: req.body,
- redirect: "follow",
- },
- );
-
- const response = await fetch(proxyRequest);
- const headers = new Headers(response.headers);
- headers.set("access-control-allow-origin", "*");
-
- return new Response(response.body, {
- status: response.status,
- statusText: response.statusText,
- headers,
- });
- },
-};
-```
-
-4. Suba suas alterações de código para a branch `main`.
-5. Substitua nas configurações do GTM as URLs dos scripts adicionados por
- `https://www.sualojanadeco.com.br/proxy?url={urlDoScript}`.
-
-Por exemplo, se o script que você está tentando carregar está em
-`https://xxxx.collect.igodigital.com/collect.js`, troque essa URL por
-`https://www.sualojanadeco.com.br/proxy?url=https%3A%2F%2Fxxxx.collect.igodigital.com%2Fcollect.js`.
-Utilize a função `encodeURIComponent` do Javascript caso seja necessário.
diff --git a/docs/composable-apis/nuvemshop/en.md b/docs/composable-apis/nuvemshop/en.md
deleted file mode 100644
index b5cac039..00000000
--- a/docs/composable-apis/nuvemshop/en.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-description: Learn how to integrate Deco with the Nuvemshop e-commerce platform.
----
-
-This article guides you through creating and configuring a website on
-[**deco.cx**](https://deco.cx) for an online store using data from the Nuvemshop
-e-commerce platform [Nuvemshop](https://www.nuvemshop.com.br/).
-
-# Table of Contents
-
-1. Prerequisites
-1. Creating the Website
-1. Connecting to Nuvemshop
-
-# Prerequisites
-
-- A website on Deco. Create one for free at
- [Deco Admin](https://admin.deco.cx/).
-- An account on Nuvemshop.
-
-# Creating the Website
-
-If you already have a website on deco.cx, proceed to the next section.
-Otherwise, follow the steps in this
-[guide](/docs/pt-br/getting-started/creating-a-site) to create one.
-
-> Ensure that your site is created based on the **Store Nuvemshop** template
-> below:
-
- => {
- const { vcsDeprecated } = ctx;
- const form = new FormData();
- const {
- email,
- name = "",
- part = "newsletter",
- page = "_",
- campaign = "newsletter:opt-in",
- } = props;
-
- form.append("newsletterClientName", name);
- form.append("newsletterClientEmail", email);
- form.append("newsInternalPage", page);
- form.append("newsInternalPart", part);
- form.append("newsInternalCampaign", campaign);
-
- await vcsDeprecated["POST /no-cache/Newsletter.aspx"]({}, {
- body: form,
- });
-};
-
-export default action;
-```
-
-[Source](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/vtex/actions/newsletter/subscribe.ts#L1C1-L37C23)
-
-## Recommended Reading
-
-- [Fetching data from APIs](/docs/en/developing-guide/fetching-data)
-- [Client-side function invocation](/docs/en/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/concepts/action/pt.md b/docs/concepts/action/pt.md
deleted file mode 100644
index 1c6f5cd6..00000000
--- a/docs/concepts/action/pt.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-description: Uma Action na deco.cx é uma função que modifica dados.
-since: 1.0.0
----
-
-Uma **Action** no deco.cx é uma função em typescript que **modifica** dados
-dentro da aplicação. As **Action** são acionadas por _interações_ específicas do
-**usuário** ou **eventos** e são responsáveis por atualizar o estado da
-aplicação de acordo. Ao contrário dos **Loaders**, que buscam dados de fontes
-externas, as **Action** concentram-se em modificar os dados já presentes na
-aplicação. Elas podem realizar operações como **atualização**, **criação** ou
-**exclusão** de dados com base na lógica especificada. As **Action**
-proporcionam _controle_ preciso e flexibilidade sobre a mutação de dados e
-integram-se perfeitamente a outros blocos, como os **Loaders**, para permitir um
-fluxo contínuo de dados na aplicação.
-
-As **Action**, assim como os **Loaders**, são implementadas como funções em
-typescript e estão localizadas na pasta `/actions/` do seu projeto. Elas podem
-ser invocadas em resposta a interações do usuário, envios de formulários ou
-qualquer outro gatilho definido. Ao encapsular a lógica de mutação de dados nas
-**Action**, os desenvolvedores podem gerenciar e rastrear as alterações feitas
-no estado da aplicação, proporcionando aos usuários experiências dinâmicas e
-interativas.
-
-## Código de exemplo
-
-Esta é a implementação da Action `newsletter/subscribe.ts`:
-
-```tsx
-import { AppContext } from "../../mod.ts";
-
-export interface Props {
- email: string;
- name?: string;
- page?: string;
- part?: string;
- campaign?: string;
-}
-
-const action = async (
- props: Props,
- _req: Request,
- ctx: AppContext,
-): Promise => {
- const { vcsDeprecated } = ctx;
- const form = new FormData();
- const {
- email,
- name = "",
- part = "newsletter",
- page = "_",
- campaign = "newsletter:opt-in",
- } = props;
-
- form.append("newsletterClientName", name);
- form.append("newsletterClientEmail", email);
- form.append("newsInternalPage", page);
- form.append("newsInternalPart", part);
- form.append("newsInternalCampaign", campaign);
-
- await vcsDeprecated["POST /no-cache/Newsletter.aspx"]({}, {
- body: form,
- });
-};
-
-export default action;
-```
-
-[Fonte](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/vtex/actions/newsletter/subscribe.ts#L1C1-L37C23)
-
-## Leitura recomendada
-
-- [Buscando dados de API](/docs/pt/developing-guide/fetching-data)
-- [Invocando funções através da API](/docs/pt/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/concepts/app/en.md b/docs/concepts/app/en.md
deleted file mode 100644
index 2d4f97bc..00000000
--- a/docs/concepts/app/en.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-description: Apps - Business Capabilities for Your deco Sites
-since: 1.24.0
----
-
-Deco Apps are powerful bundles of business capabilities that can be imported and
-configured into deco sites. An App in deco is essentially a **collection** of
-various **components**, such as **actions**, **sections**, **loaders**,
-**workflows**, **handlers**, or any other deco elements that can be used to
-enhance the functionality of your deco projects.
-
-## Overview
-
-In deco, Apps serve as modular building blocks that encapsulate specific
-features or capabilities. They enable developers to package and share
-business-specific functionalities across different projects, making it easier to
-maintain and scale your deco sites.
-
-By running the command `deno run -Ar https://deco.cx/start` in your terminal,
-you can start developing an App from scratch and get it up and running quickly.
-
-## App Configuration
-
-Each App can be configured with specific parameters, making it versatile and
-adaptable to different use cases. Developers can import and configure Apps in
-their deco sites, allowing for seamless integration and customization of
-functionality.
-
-## Monorepo Support
-
-deco Apps can be managed in a monorepo, providing a centralized location to
-store and organize multiple Apps. This approach streamlines the development
-process and allows for efficient version control and maintenance of Apps.
-
-## Getting Started
-
-To create your own deco Apps, follow these steps:
-
-1. Run the command `deno run -Ar https://deco.cx/start` to initialize a new deco
- App.
-2. Define the functionalities or components you want to bundle into the App.
-3. Organize the functions, sections, loaders, or other deco components within
- the App directory.
-4. Configure the App to accept parameters and be customizable within the deco
- Admin.
-5. Export the App for use in other deco projects.
-
-## Importing and Uninstalling Apps
-
-To use a deco App in your deco site, you can run the following commands:
-
-1. To install the App:
-
- ```sh
- deno task install $APP_URL
- ```
-
- Replace `$APP_URL` with the path location or HTTP URL of the App.
-
-2. To uninstall the App:
-
- ```sh
- deno task uninstall $APP_URL
- ```
-
- Replace `$APP_URL` with the path location or HTTP URL of the App.
-
-## Note
-
-Deco Apps provide a powerful mechanism for creating and sharing reusable
-business capabilities across your deco projects. By organizing components into
-modular Apps, you can significantly enhance the maintainability and scalability
-of your deco sites. Feel free to explore existing deco Apps and create your own
-to streamline your development process and build robust deco projects.
-
-## Recommended Reading
-
-- [deco Concepts: Understanding Sections](/docs/en/concepts/section)
-- [Fetching Data from APIs in deco](/docs/en/developing-guide/fetching-data)
-- [Client-Side Function Invocation in deco](/docs/en/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/concepts/app/pt.md b/docs/concepts/app/pt.md
deleted file mode 100644
index 3366df2a..00000000
--- a/docs/concepts/app/pt.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-description: Apps - Capacidades de Negócios para os seus Sites deco
-since: 1.24.0
----
-
-As Apps são poderosos conjuntos de capacidades de negócios que podem ser
-importados e configurados em sites deco. Uma App na deco é essencialmente uma
-**coleção** de vários **componentes**, como **ações**, **seções**,
-**carregadores**, **fluxos de trabalho**, **manipuladores**, ou quaisquer outros
-elementos deco que podem ser usados para aprimorar a funcionalidade dos seus
-projetos deco.
-
-## Visão Geral
-
-Na deco, os Apps funcionam como blocos de construção modulares que encapsulam
-recursos ou capacidades específicas. Eles permitem que os desenvolvedores
-empacotem e compartilhem funcionalidades específicas do negócio em diferentes
-projetos, tornando mais fácil a manutenção e a expansão dos seus sites deco.
-
-Ao executar o comando `deno run -Ar https://deco.cx/start` no terminal, você
-pode começar a desenvolver um App do zero e colocá-lo em funcionamento
-rapidamente.
-
-## Configuração da App
-
-Cada App pode ser configurado com parâmetros específicos, tornando-o versátil e
-adaptável a diferentes casos de uso. Os desenvolvedores podem importar e
-configurar Apps em seus sites deco, permitindo uma integração perfeita e
-personalização da funcionalidade.
-
-## Suporte a Monorepo
-
-Os deco Apps podem ser gerenciados em um monorepo, proporcionando um local
-centralizado para armazenar e organizar vários Apps. Essa abordagem agiliza o
-processo de desenvolvimento e permite um controle de versão e manutenção
-eficiente dos Apps.
-
-## Primeiros Passos
-
-Para criar seus próprios deco Apps, siga estes passos:
-
-1. Execute o comando `deno run -Ar https://deco.cx/start` para inicializar um
- novo deco App.
-2. Defina as funcionalidades ou componentes que você deseja empacotar na app.
-3. Organize as funções, seções, carregadores ou outros componentes deco dentro
- do diretório do App.
-4. Configure o App para aceitar parâmetros e ser personalizável dentro do deco
- Admin.
-5. Exporte o App para ser usado em outros projetos deco.
-
-## Importando e Desinstalando Apps
-
-Para usar um deco App no seu site deco, você pode executar os seguintes
-comandos:
-
-1. Para instalar o App:
-
- ```sh
- deno task install $APP_URL
- ```
-
- Substitua `$APP_URL` pelo local do diretório ou URL HTTP do App.
-
-2. Para desinstalar o App:
-
- ```sh
- deno task uninstall $APP_URL
- ```
-
- Substitua `$APP_URL` pelo local do diretório ou URL HTTP do App.
-
-## Observação
-
-Os deco Apps fornecem um mecanismo poderoso para criar e compartilhar
-capacidades de negócios reutilizáveis em seus projetos deco. Ao organizar
-componentes em Apps modulares, você pode melhorar significativamente a
-manutenção e a escalabilidade dos seus sites deco. Sinta-se à vontade para
-explorar as Apps existentes e criar os seus próprios para agilizar o processo de
-desenvolvimento e construir projetos deco robustos.
-
-## Leitura Recomendada
-
-- [Conceitos da deco: Entendendo Seções](/docs/pt-br/concepts/section)
-- [Buscando Dados de APIs](/docs/pt-br/developing-guide/fetching-data)
-- [Invocação de Funções no Lado do Cliente](/docs/pt-br/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/concepts/block/en.md b/docs/concepts/block/en.md
deleted file mode 100644
index 407153e0..00000000
--- a/docs/concepts/block/en.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-description: Block empowers deco's ecosystem
-since: 1.0.0
----
-
-## Overview
-
-Imagine being able to **serialize** a function and save it in a **database**.
-What if this function could be composed together with multiple options? How
-would that change the way you develop web applications?
-
-In deco, the world revolves around **Blocks**. These Blocks are serialized
-functions that can be seamlessly composed together, allowing for limitless
-possibilities and customization.
-
-With deco, you have the flexibility to use an `Inline Block` where you can
-create and use Blocks on the fly, or you can create a Block with a specific name
-and save it for future use, known as a `Saved Block`.
-
-Using _deco_, developers have the ability to define **Blocks**. These **Blocks**
-are built on top of Deno, providing reusable and configurable _"packaged
-capabilities"_ that can be combined to create and deploy robust web applications
-within minutes. They enable developers to create modular and composable units of
-functionality. With Blocks, you can easily combine and integrate different
-capabilities to build complex and customized applications tailored to your
-specific needs.
-
-## Customizing the Admin UI
-
-The deco Admin UI itself is built using **Blocks**, making it highly
-customizable and extensible. Developers have the freedom to compose their own
-bespoke digital experience admin UIs that perfectly align with the requirements
-of their business users. With deco, you have complete control over your admin
-interface, ensuring that it precisely caters to your unique needs.
-
-## Visual Library: Explore and Customize Blocks
-
-In addition to the powerful **Blocks** framework, deco offers a _comprehensive
-visual library_ that allows you to **navigate through your blocks**. This visual
-library empowers you to explore various options and configurations for your
-site's components and features.
-
-With the Visual Library, you have the flexibility to customize and fine-tune
-Blocks according to your specific requirements. You can easily edit and preview
-Blocks with different configurations, ensuring they align perfectly with your
-desired visual and functional elements.
diff --git a/docs/concepts/block/pt.md b/docs/concepts/block/pt.md
deleted file mode 100644
index abdff00a..00000000
--- a/docs/concepts/block/pt.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-description: O Block empoderam o ecossistema da deco
-since: 1.0.0
----
-
-## Visão Geral
-
-Imagine poder **serializar** uma função e salvá-la em um **banco de dados**. E
-se essa função pudesse ser combinada com várias opções diferentes? Como isso
-mudaria a forma como você desenvolve aplicações web?
-
-No deco, tudo gira em torno dos **Blocks** (blocos). Esses Blocks são funções
-serializadas que podem ser combinadas perfeitamente, permitindo possibilidades e
-personalizações ilimitadas.
-
-Com o deco, você tem a flexibilidade de usar um `Inline Block` (bloco em linha),
-onde você pode criar e usar Blocks instantaneamente, ou criar um Block com um
-nome específico e salvá-lo para uso futuro, conhecido como `Saved Block` (bloco
-salvo).
-
-Usando o _deco_, os desenvolvedores têm a capacidade de definir **Blocks**
-(blocos). Esses **Blocks** são construídos em cima do Deno, fornecendo
-_"capacidades encapsuladas"_ reutilizáveis e configuráveis que podem ser
-combinadas para criar e implantar aplicações web robustas em questão de minutos.
-Eles permitem que os desenvolvedores criem unidades de funcionalidade modulares
-e combináveis. Com os Blocks, você pode facilmente combinar e integrar
-diferentes capacidades para construir aplicações complexas e personalizadas
-adaptadas às suas necessidades específicas.
-
-## Personalizando a Interface do Admin
-
-O próprio Admin UI do deco é construído usando **Blocks**, tornando-o altamente
-personalizável e expansível. Os desenvolvedores têm a liberdade de compor suas
-próprias interfaces personalizadas de administração de experiência digital que
-se adequam perfeitamente aos requisitos de seus usuários de negócios. Com o
-deco, você tem total controle sobre sua interface de administração, garantindo
-que ela atenda precisamente às suas necessidades exclusivas.
-
-## Biblioteca Visual: Explore e Personalize os Blocks
-
-Além do poderoso framework de **Blocks**, o deco oferece uma _abrangente
-biblioteca visual_ que permite que você **navegue por seus blocos**. Essa
-biblioteca visual capacita você a explorar várias opções e configurações para os
-componentes e recursos do seu site.
-
-Com a Biblioteca Visual, você tem a flexibilidade de personalizar e ajustar os
-Blocks de acordo com seus requisitos específicos. Você pode editar e visualizar
-facilmente os Blocks com diferentes configurações, garantindo que eles se
-alinhem perfeitamente com os elementos visuais e funcionais desejados.
diff --git a/docs/concepts/loader/en.md b/docs/concepts/loader/en.md
deleted file mode 100644
index adcbdc30..00000000
--- a/docs/concepts/loader/en.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-description: A Loader in deco.cx is a function that returns data needed for a Site.
-since: 1.0.0
----
-
-A **Loader** in _deco.cx_ is a Typescript function that returns data typically
-needed in a [Section](/docs/en/concepts/section). These functions are executed
-before page renders, and their main purpose is to **fetch data from external
-sources**, transform it if necessary, and **provide it to the site Sections that
-need it.** Loaders can be used to fetch data from APIs, databases, or any other
-external source. They live locally on the `/loaders/` folder of your project,
-but it's also possible to
-[Installing apps](/docs/en/getting-started/installing-an-app) that contain
-loaders.
-
-
-
-In addition to fetching data, Loaders in _deco.cx_ **can also export a
-Typescript Props type,** which allows them to be configured in the
-[Admin](https://deco.cx/admin) just like [Sections](/docs/en/concepts/section).
-This means that business users can configure details about how the Loader will
-operate, such as **setting up filters or passing parameters to APIs.** By making
-Loaders configurable in this way, it becomes easier to manage the data flowing
-into Sections and ensure that the Site is displaying the right information to
-visitors.
-
-One other great benefit of Loaders in _deco.cx_ is that **multiple loaders can
-return the same data type**. This allows [Sections](/docs/en/concepts/section)
-that receive, for example, an array of canonical Product to get data from
-different Loaders, depending on the user's configuration. This means that UIs
-can be reused across [Sites](/docs/en/concepts/site) or across teams, making it
-easier to manage and scale your project.
-
-> All Sections for ecommerce stores created by _deco.cx_ in the
-> [Storefront](https://github.com/deco-sites/storefront) start use a canonical
-> Product type, and also every Loader that connects to ecommerce providers's
-> APIs. This means that you can reuse the same UI to show data from different
-> places, depending on the configuration.
-
- => {
- const { storefront } = ctx;
-
- const count = props.count ?? 12;
- const query = props.query || "";
-
- const data = await storefront.query<
- ListProductsQuery,
- ListProductsQueryVariables
- >({
- variables: { first: count, query },
- ...ListProducts,
- });
-
- // Transform Shopify product format into schema.org's compatible format
- // If a property is missing from the final `products` array you can add
- // it in here
- const products = data?.products.nodes.map((p) =>
- toProduct(p, p.variants.nodes[0], new URL(_req.url))
- );
-
- return products ?? [];
-};
-
-export default loader;
-```
-
-[Source](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/shopify/loaders/ProductList.ts#L1)
-
-## Recommended Reading
-
-- [Fetching data from APIs](/docs/en/developing-guide/fetching-data)
-- [Client-side function invocation](/docs/en/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/concepts/loader/pt.md b/docs/concepts/loader/pt.md
deleted file mode 100644
index 2a795f27..00000000
--- a/docs/concepts/loader/pt.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-description: Um Loader na deco.cx é uma função que retorna os dados necessários para um Site.
-since: 1.0.0
----
-
-Um **Loader** em _deco.cx_ é uma função Typescript que retorna tipicamente os
-dados necessários em uma [Section](/docs/pt/concepts/section). Essas funções são
-executadas antes da renderização de cada página e seu principal objetivo é
-**buscar dados de fontes externas**, transformá-los se necessário e
-**fornecê-los às Seções do site que precisam.** Os Loaders podem ser usados para
-buscar dados de APIs, bancos de dados ou qualquer outra fonte externa. As
-implementações locais de Loaders vivem na pasta `/loaders` do seu projeto, porém
-é possível [Instalar novas apps](/docs/pt/getting-started/installing-an-app) que
-contém outros loaders.
-
-Além de buscar dados, os Loaders na _deco.cx_ **também podem exportar um tipo de
-Props Typescript**, o que permite que sejam configurados no
-[Admin](https://deco.cx/admin) assim como as
-[Sections](/docs/pt/concepts/section). Isso significa que os usuários de negócio
-podem configurar detalhes sobre como o Loader irá operar, como **configurar
-filtros** ou **passar parâmetros para APIs.** Ao tornar os Loaders configuráveis
-dessa maneira, fica mais fácil gerenciar os dados que fluem para as Sections e
-garantir que o Site esteja exibindo as informações corretas para os visitantes.
-
-Outro benefício dos Loaders na _deco.cx_ é que **vários loaders podem retornar o
-mesmo tipo de dados**. Isso permite que as [Sections](/docs/pt/concepts/section)
-que recebem, por exemplo, um _array_ de Produtos canônico obtenham dados de
-diferentes Loaders, dependendo da configuração do usuário. Isso significa que as
-UIs podem ser reutilizadas em [Sites](/docs/pt/concepts/site) ou entre times,
-facilitando o gerenciamento e a escala do seu projeto.
-
-> Todas as Sections para lojas de _ecommerce_ criadas por _deco.cx_ na
-> [Fashion](https://github.com/deco-sites/fashion) usam um tipo de Produt
-> canônico e também cada Loader que se conecta às APIs dos _ecommerce
-> providers_. Isso significa que você pode reutilizar a mesma UI para mostrar
-> dados de diferentes locais, dependendo da configuração.
-
- => {
- const { storefront } = ctx;
-
- const count = props.count ?? 12;
- const query = props.query || "";
-
- const data = await storefront.query<
- ListProductsQuery,
- ListProductsQueryVariables
- >({
- variables: { first: count, query },
- ...ListProducts,
- });
-
- // Transform Shopify product format into schema.org's compatible format
- // If a property is missing from the final `products` array you can add
- // it in here
- const products = data?.products.nodes.map((p) =>
- toProduct(p, p.variants.nodes[0], new URL(_req.url))
- );
-
- return products ?? [];
-};
-
-export default loader;
-```
-
-[Fonte](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/shopify/loaders/ProductList.ts#L1)
-
-## Leitura recomendada
-
-- [Buscando dados de API](/docs/pt/develping/fetching-data)
-- [Invocando um loader através da API](/docs/pt/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/concepts/matcher/en.md b/docs/concepts/matcher/en.md
deleted file mode 100644
index 0e85b0b2..00000000
--- a/docs/concepts/matcher/en.md
+++ /dev/null
@@ -1,165 +0,0 @@
----
-description: A Matcher in deco.cx is a function that returns a boolean.
-since: 1.18.0
----
-
-## Matchers: Empowering Variants
-
-**Matchers** are essential building blocks in deco that play a pivotal role in
-empowering [Variants](/docs/en/getting-started/variants). They allow you to
-evaluate specific conditions and segment your audience based on various
-criteria. By leveraging Matchers, you can create personalized and dynamic
-experiences for your users. When you create a new **Matcher Block** you may call
-it a [Segment](/docs/en/concepts/segment).
-
-### Understanding Matchers
-
-In deco, **Matchers** are created using _functions_ within your site's code.
-They are powerful tools that enable you to define conditions and evaluate
-whether a user belongs to a particular segment. **Matchers** serve as the
-foundation for targeting specific user groups and personalizing content based on
-their characteristics or behaviors.
-
-_Standard Matchers_ are readily available in deco and cover a range of common
-conditions such as user traits, date and time, device type, geographic location,
-and random selection (A/B testing). These predefined Matchers offer
-_flexibility_ and allow you to customize content variations based on these
-conditions.
-
-However, the power of Matchers extends beyond the standard options. deco
-provides the capability to create **custom Matchers** to meet the specific needs
-of your business. With custom Matchers, you can extend deco's functionality to
-integrate external data sources, such as fetching data from a Salesforce ERP
-system, and then use that data to determine the segment to which a user belongs.
-
-### Native Matchers
-
-| Matcher | Common Use Cases | Sticky |
-| -------------- | ------------------------------------------------------------------------------------ | ------- |
-| Random Matcher | A/B test your page with 50% of traffic. | session |
-| Cron Matcher | Change a page every Friday between 10 AM and 11 AM. | none |
-| Date Matcher | Create a Black Friday page / Schedule banners to appear at specific dates and times. | none |
-| Device Matcher | Show a different page based on the user's device. | none |
-
-### Developing a new Matcher
-
-In your repository, matchers are located within the `matchers` folder, similar
-to sections and loaders. Let's create a new matcher called `MyMatcher.ts` to
-illustrate the process.
-
-The signature of our matcher will follow this structure:
-
-```ts
-import { MatchContext } from "deco/blocks/matcher.ts";
-
-export interface Props {
-}
-
-/**
- * @title My Matcher
- */
-export default function MyMatcher(
- props: Props,
- ctx: MatchContext,
-) {
- return true;
-}
-```
-
-In the example above, the `MyMatcher` function accepts `props` as the input,
-allowing you to pass any necessary data to the matcher. Additionally, it
-receives a `ctx` object of type `MatchContext`, which contains the request
-information. You have the flexibility to perform any desired operations within
-the matcher function and return a boolean value based on the evaluation.
-
-Let's take a look at the `MatchDate` example from the deco library:
-
-```ts
-/**
- * @titleBy start
- */
-export interface Props {
- /**
- * @format date-time
- */
- start?: string;
- /**
- * @format date-time
- */
- end?: string;
-}
-
-/**
- * @title Date Matcher
- */
-const MatchDate = (props: Props) => {
- const now = new Date();
- const start = props.start ? now > new Date(props.start) : true;
- const end = props.end ? now < new Date(props.end) : true;
- return start && end;
-};
-
-export default MatchDate;
-```
-
-In this example, the `MatchDate` function serves as a Matcher. It accepts
-`props` as input, which includes `start` and `end` properties. The function
-evaluates whether the current date falls within the specified date range. If no
-`start` or `end` value is provided, it defaults to `true`. The `MatchDate`
-function returns a boolean value based on the evaluation.
-
-Matchers can also have a "sticky" behavior, which is particularly useful for A/B
-testing scenarios. To make a Matcher sticky on the user's session, you can
-export a constant named `sticky` with the value `"session"`, as shown below:
-
-```ts
-export const sticky = "session";
-```
-
-Here is an example of the `MatchRandom` implementation using the sticky session
-feature:
-
-```ts
-/**
- * @title ABTest {{{percentage traffic}}}
- */
-export interface Props {
- traffic: number;
-}
-
-// Once selected, the session will reuse the same value
-export const sticky = "session";
-
-/**
- * @title Random Matcher
- */
-const MatchRandom = ({ traffic }: Props) => {
- return Math.random() < traffic;
-};
-
-export default MatchRandom;
-```
-
-In the `MatchRandom` example, the matcher function `MatchRandom` accepts
-`traffic` as a prop, representing the percentage of traffic that should match
-the condition. By generating a random number between 0 and 1, the function
-determines whether the generated value is less than the specified `traffic`
-percentage. The Matcher returns `true` or `false` based on this evaluation.
-
-Matchers provide great flexibility to customize and extend deco's functionality
-to meet your specific needs. With the ability to create custom Matchers, you can
-integrate external data sources, perform complex calculations, and implement
-intricate logic to determine user segmentation and deliver personalized
-experiences.
-
-### Harnessing the Power of Matchers in Variants
-
-**Matchers** form the backbone of Variants in deco. By _combining Matchers with
-different conditions_, you can create targeted content variations for specific
-user **segments**. **Variants** enable you to modify and personalize content
-dynamically based on the evaluation of **Matchers**.
-
-When configuring **Variants**, you can select the appropriate Matcher for each
-segment and define the conditions that determine whether a user belongs to that
-segment. By utilizing Matchers in Variants, you can fine-tune the user
-experience, optimize content delivery, and deliver personalized interactions.
diff --git a/docs/concepts/matcher/pt.md b/docs/concepts/matcher/pt.md
deleted file mode 100644
index ff01839a..00000000
--- a/docs/concepts/matcher/pt.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-description: Um Matcher na deco é uma função que retorna um booleano
-since: 1.18.0
----
-
-## Matchers: Potencializando as Variants
-
-Os **Matchers** são blocos essenciais no deco que desempenham um papel
-fundamental ao potencializar as [Variants](/docs/pt/getting-started/variants).
-Eles permitem que você avalie condições específicas e segmente seu público com
-base em vários critérios. Ao aproveitar os Matchers, você pode criar
-experiências personalizadas e dinâmicas para seus usuários. Ao criar um novo
-**Matcher Block**, você pode chamá-lo de [Segmento](/docs/pt/concepts/segment).
-
-### Compreendendo os Matchers
-
-No deco, os **Matchers** são criados usando _funções_ dentro do código do seu
-site. Eles são ferramentas poderosas que permitem que você defina condições e
-avalie se um usuário pertence a um determinado segmento. Os Matchers servem como
-base para segmentar grupos específicos de usuários e personalizar o conteúdo com
-base em suas características ou comportamentos.
-
-Os **Matchers padrão** estão prontamente disponíveis no deco e abrangem uma
-variedade de condições comuns, como características do usuário, data e horário,
-tipo de dispositivo, localização geográfica e seleção aleatória (testes A/B).
-Esses Matchers predefinidos oferecem _flexibilidade_ e permitem que você
-personalize as variações de conteúdo com base nessas condições.
-
-No entanto, o poder dos Matchers vai além das opções padrão. O deco oferece a
-capacidade de criar **Matchers personalizados** para atender às necessidades
-específicas do seu negócio. Com Matchers personalizados, você pode estender a
-funcionalidade do deco para integrar fontes de dados externas, como buscar dados
-de um sistema Salesforce ERP, e usar esses dados para determinar o segmento ao
-qual um usuário pertence.
-
-### Matchers Nativos
-
-| Matcher | Casos de Uso Comuns | Sticky |
-| -------------- | ----------------------------------------------------------------------------------------------- | ------- |
-| Random Matcher | Testar A/B na página com 50% do tráfego | session |
-| Cron Matcher | Alterar uma página toda sexta-feira entre 10h e 11h | none |
-| Date Matcher | Criar a página da Black Friday/ Agendar banners para aparecerem em datas e horários específicos | none |
-| Device Matcher | Exibir uma página diferente com base no dispositivo do usuário | none |
-
-### Desenvolvendo um Novo Matcher
-
-Em seu repositório, os Matchers estão localizados na pasta `matchers`, assim
-como as seções e loaders. Vamos criar um novo matcher chamado `MeuMatcher.ts`
-para ilustrar o processo.
-
-A assinatura do nosso matcher seguirá a seguinte estrutura:
-
-```ts
-import { MatchContext } from "deco/blocks/matcher.ts";
-
-export interface Props {
-}
-
-/**
- * @title Meu Matcher
- */
-export default function MeuMatcher(
- props: Props,
- ctx: MatchContext,
-) {
- return true;
-}
-```
-
-No exemplo acima, a função `MeuMatcher` aceita `props` como entrada, permitindo
-que você passe quaisquer dados necessários para o matcher. Além disso, ela
-recebe um objeto `ctx` do tipo `MatchContext`, que contém as informações da
-solicitação. Você tem a flexibilidade de realizar as operações desejadas dentro
-da função do matcher e retornar um valor booleano com base na avaliação.
-
-Vamos dar uma olhada no exemplo `MatchDate` da biblioteca do deco:
-
-```ts
-/**
- * @title Por início
- */
-export interface Props {
- /**
- * @format date-time
- */
- start?: string;
- /**
- * @format date-time
- */
- end?: string;
-}
-
-/**
- * @title Matcher de Data
- */
-const MatchDate = (props: Props) => {
- const now = new Date();
- const start = props.start ? now > new Date(props.start) : true;
- const end = props.end ? now < new Date(props.end) : true;
- return start && end;
-};
-
-export default MatchDate;
-```
-
-Neste exemplo, a função `MatchDate` atua como um Matcher. Ela aceita `props`
-como entrada, que inclui as propriedades `start` e `end`. A função avalia se a
-data atual está dentro do intervalo de datas especificado. Se nenhum valor de
-`start` ou `end` for fornecido, ele será considerado `true`. A função
-`MatchDate` retorna um valor booleano com base na avaliação.
-
-Os
-
-Matchers também podem ter um comportamento "sticky", o que é particularmente
-útil para cenários de testes A/B. Para tornar um Matcher "sticky" na sessão do
-usuário, você pode exportar uma constante chamada `sticky` com o valor
-`"session"`, conforme mostrado abaixo:
-
-```ts
-export const sticky = "session";
-```
-
-Aqui está um exemplo de implementação do `MatchRandom` usando a funcionalidade
-de sessão "sticky":
-
-```ts
-/**
- * @title Teste A/B {{{percentage traffic}}}
- */
-export interface Props {
- traffic: number;
-}
-
-// Uma vez selecionado, a sessão reutilizará o mesmo valor
-export const sticky = "session";
-
-/**
- * @title Matcher Aleatório
- */
-const MatchRandom = ({ traffic }: Props) => {
- return Math.random() < traffic;
-};
-
-export default MatchRandom;
-```
-
-No exemplo `MatchRandom`, a função matcher `MatchRandom` aceita `traffic` como
-prop, representando a porcentagem de tráfego que deve corresponder à condição.
-Ao gerar um número aleatório entre 0 e 1, a função determina se o valor gerado é
-menor que a porcentagem `traffic` especificada. O Matcher retorna `true` ou
-`false` com base nessa avaliação.
-
-Os Matchers oferecem grande flexibilidade para personalizar e estender a
-funcionalidade do deco para atender às suas necessidades específicas. Com a
-capacidade de criar Matchers personalizados, você pode integrar fontes de dados
-externas, realizar cálculos complexos e implementar lógicas intrincadas para
-determinar a segmentação do usuário e fornecer experiências personalizadas.
-
-### Aproveitando o Poder dos Matchers nas Variants
-
-Os **Matchers** são a base das Variants no deco. Ao _combinar Matchers com
-diferentes condições_, você pode criar variações de conteúdo direcionadas para
-segmentos de usuários específicos. As **Variants** permitem que você modifique e
-personalize o conteúdo dinamicamente com base na avaliação dos **Matchers**.
-
-Ao configurar as **Variants**, você pode selecionar o Matcher apropriado para
-cada segmento e definir as condições que determinam se um usuário pertence a
-esse segmento. Ao utilizar Matchers nas Variants, você pode ajustar a
-experiência do usuário, otimizar a entrega de conteúdo e fornecer interações
-personalizadas.
diff --git a/docs/concepts/section/en.md b/docs/concepts/section/en.md
deleted file mode 100644
index 7e9b721b..00000000
--- a/docs/concepts/section/en.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-description: |
- A Section represents a configurable UI element for a deco.cx site.
----
-
-Sections are **UI components built with [Preact](https://preactjs.com/)** that
-can receive props configured by users on _deco.cx_'s Admin. The Section local
-implementations live on the `sections/` folder in the Site's code, but it's also
-possible to [Install Apps](/docs/en/getting-started/installing-an-app).
-
-Some examples of Sections for an ecommerce store would be:
-
-- **ProductShelf.tsx:** displays a product shelf with image, title and price.
-- **Header.tsx:** displays the standard header of the store, containing logo,
- menu categories and links for cart and login.
-- **Banner.tsx:** displays image, text and some _Call to action_ for campaign or
- specific department.
-
-## Interactivity
-
-Note that Sections run on the **server-side only**, so state and lifecycle such
-as `useState`, `useEffect` and callbacks such as `onClick`, `onInput` will not
-work. In order for those to work, you'll need to use
-[interactive Islands](https://fresh.deno.dev/docs/concepts/islands)
-
-In _deco.cx_'s Admin, it's possible to interact with Sections in two places:
-
-- **Library:** Allows developers to configure the properties of Sections and
- automatically see the generated UI. (Works similar to
- [Storybook](https://storybook.js.org/))
-- **Pages:** Allows Section to be added to Page on the site, also being
- configurable.
-
-## Further reading
-
-- [Tutorial: Coding a new Section](/docs/en/developing-guide/hello-world)
-- [Developing: Editable sections](/docs/en/developing-guide/editable-sections)
diff --git a/docs/concepts/section/pt.md b/docs/concepts/section/pt.md
deleted file mode 100644
index c3b349e5..00000000
--- a/docs/concepts/section/pt.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-description: Uma Section representa um elemento de UI configurável para um Site deco.cx.
----
-
-As Sections são **componentes de UI criados com
-[Preact](https://preactjs.com/)** que pode receber `props` configuradas por
-usuários no Admin da _deco.cx_. As implementações locais de Section vivem na
-pasta `sections/` no código do Site, porém é possível
-[Instalar novas apps](/docs/pt/getting-started/installing-an-app).
-
-Alguns exemplos de Section para uma loja de ecomemerce seriam:
-
-- **ProductShelf.tsx:** exibe uma prateleira com imagem, título e preço.
-- **Header.tsx:** exibe o cabeçalho padrão da loja, contendo logotipo,
- categorias de menu e links para carrinho e login.
-- **Banner.tsx:** exibe imagem, texto e alguns _Call to action_ para campanha ou
- departamento específico.
-
-## Interatividade
-
-Observe que as seções são executadas **somente no lado do servidor**, portanto,
-gerenciamento de estado e ciclo de vida como `useState`, `useEffect` e callbacks
-como `onClick`, `onInput` não irão funcionar. Para que funcionem, você precisará
-usar [Islands](https://fresh.deno.dev/docs/concepts/islands).
-
-No Admin da _deco.cx_ é possível interagir com as Sections em dois locais:
-
-- **Library:** permite que desenvolvedores configurem as propriedades das
- Section e visualizaem automaticamente a UI renderizada. (Funciona semelhante
- ao [Storybook](https://storybook.js.org/))
-- **Pages:** Permite que a Section seja adicionada à Pages no Site, sendo também
- configuráveis por lá.
-
-## Leitura adicional
-
-- [Tutorial: Codificando uma nova seção](/docs/en/developing-guide/hello-world)
-- [Desenvolvendo: Seções personalizáveis](/docs/en/developing-guide/editable-sections)
diff --git a/docs/concepts/segment/en.md b/docs/concepts/segment/en.md
deleted file mode 100644
index 25895095..00000000
--- a/docs/concepts/segment/en.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-description: A deco Segment is a configured Matcher used together with a Variation
-since: 1.18.0
----
-
-## Segment: Targeting Specific User Groups
-
-In deco, a **Segment** refers to a specific group or subset of users that meet
-certain conditions or criteria. Segments are a powerful tool that allow you to
-target and personalize content for specific user groups, providing tailored
-experiences and optimizing content delivery.
-
-### Understanding Segments
-
-Segments are defined by [Matchers](/docs/en/concepts/matchers), which evaluate
-conditions and determine whether a user belongs to a particular segment.
-Matchers can consider various factors such as user traits, date and time, device
-type, geographic location, and more. By leveraging Matchers, you can create
-dynamic and customized content variations based on these conditions.
-
-### Utilizing Segments
-
-Segments play a crucial role in various areas of deco, particularly in the
-context of [Variants](/docs/en/getting-started/variants). Variants enable you to
-create content variations and personalize the user experience based on different
-segments. By combining Matchers with different conditions, you can target
-specific user groups and deliver tailored content to enhance engagement and
-satisfaction.
-
-Segments offer great flexibility and enable you to define different targeting
-strategies based on your specific goals and audience characteristics. Whether
-it's conducting A/B tests, displaying different content based on user traits, or
-customizing experiences based on location or device type, Segments empower you
-to optimize your website's performance and deliver a personalized user journey.
-
-With the ability to define and utilize Segments in deco, you can create a highly
-targeted and engaging user experience, improving user satisfaction and achieving
-your business objectives.
-
-Remember, Segments are defined by Matchers, so understanding how Matchers work
-and creating customized Matchers that suit your specific requirements will allow
-you to effectively leverage the power of Segments in deco.
diff --git a/docs/concepts/segment/pt.md b/docs/concepts/segment/pt.md
deleted file mode 100644
index bf855359..00000000
--- a/docs/concepts/segment/pt.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-description: Um Segment na deco é um Matcher configurado juntamente com uma Variant
-since: 1.18.0
----
-
-## Segmento: Direcionando Grupos Específicos de Usuários
-
-No Deco, um **Segmento** se refere a um grupo específico ou subset de usuários
-que atendem a certas condições ou critérios. Segmentos são uma ferramenta
-poderosa que permite direcionar e personalizar o conteúdo para grupos de
-usuários específicos, proporcionando experiências sob medida e otimizando a
-entrega de conteúdo.
-
-### Compreendendo os Segmentos
-
-Segmentos são definidos por [Matchers](/docs/pt/concepts/matchers), que avaliam
-condições e determinam se um usuário pertence a um segmento específico. Matchers
-podem considerar vários fatores, como características do usuário, data e
-horário, tipo de dispositivo, localização geográfica e muito mais. Ao aproveitar
-os Matchers, você pode criar variações de conteúdo dinâmicas e personalizadas
-com base nessas condições.
-
-### Utilizando os Segmentos
-
-Segmentos desempenham um papel crucial em várias áreas do Deco, especialmente no
-contexto de [Variants](/docs/pt/getting-started/variants). Variantes permitem
-criar variações de conteúdo e personalizar a experiência do usuário com base em
-diferentes segmentos. Ao combinar Matchers com diferentes condições, você pode
-direcionar grupos específicos de usuários e fornecer conteúdo personalizado para
-melhorar o envolvimento e a satisfação.
-
-Segmentos oferecem grande flexibilidade e permitem definir diferentes
-estratégias de direcionamento com base em seus objetivos específicos e
-características do público. Seja conduzindo testes A/B, exibindo conteúdo
-diferente com base nas características do usuário ou personalizando experiências
-com base em localização ou tipo de dispositivo, Segmentos capacitam você a
-otimizar o desempenho do seu site e fornecer uma jornada personalizada ao
-usuário.
-
-Com a capacidade de definir e utilizar Segmentos no Deco, você pode criar uma
-experiência do usuário altamente direcionada e envolvente, melhorando a
-satisfação do usuário e alcançando seus objetivos de negócios.
-
-Lembre-se de que Segmentos são definidos por Matchers, portanto, compreender
-como os Matchers funcionam e criar Matchers personalizados que atendam aos seus
-requisitos específicos permitirá que você aproveite efetivamente o poder dos
-Segmentos no Deco.
diff --git a/docs/decopilot/assistant/en.md b/docs/decopilot/assistant/en.md
deleted file mode 100644
index c6761715..00000000
--- a/docs/decopilot/assistant/en.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-description: Decopilot as your code assistant
----
-
-## Decopilot: your code assistant
-
-As your assistant, Decopilot can help to improve and develop your website.
-Below, you can see different examples of using it, but feel free to explore the
-power of AI. For code generation, Decopilot supports both text with the desired
-request and the insertion of local images. In both cases, you can choose to
-**accept the changes**, **discard** them, or **recreate** the provided code.
-
-### Creating blocks
-
-Blocks are one of the most important concepts on deco.cx, so Decopilot is ready
-to be called to create any of this components. Just ask! From loaders and
-actions to sections, Decopilot will ask if it can proceed with the process of
-creation or not. Heres a exemple how it work with sections:
-
-> Prompt: Create a section saying Hello World!
-
-
-
-### Creating and Editing code
-
-You can explore code generation and edition based on your current code and the
-creation of new components with Decopilot. For example, when using the prompt:
-
-> Prompt: Create a Hero saying Hello World in green tones.
-
-After generating the code, Decopilot replaces your used code, and you can see
-the result in the preview.
-
-
-
-### Creating and Editing Based on an Image
-
-If you wish to use an image as inspiration, Decopilot can reproduce it when
-receiving a local image in one of the supported formats (JPEG, PNG, GIF, and
-WebP) along with the request of what to do. Here is an example of prompt:
-
-> Prompt: Reproduce this component to me.
-
-
-
-### Explain and Fix Errors
-
-To further assist the development process, Decopilot can help explain something
-to you or even fixing errors on your code. Example of prompt:
-
-> Prompt: What does this code do?
-
-
-
-### Analyze Performance
-
-Your code assistant can be useful to consult your website's performance and give
-feedback on how to improve it. Here is an example of prompt:
-
-> Prompt: How's my website performance?
-
-## Conclusion
-
-Based on the features presented, Decopilot's potential to simplify and speed up
-code development is evident. [Try it out](https://admin.deco.cx/) now and
-discover how it can transform your programming experience, making it more
-efficient and productive!
diff --git a/docs/decopilot/assistant/pt.md b/docs/decopilot/assistant/pt.md
deleted file mode 100644
index e17f5eed..00000000
--- a/docs/decopilot/assistant/pt.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-description: Decopilot como seu assistente de código
----
-
-## Decopilot: Seu Assistente de Código
-
-Como seu assistente, o Decopilot pode ajudar a melhorar e desenvolver seu site.
-Abaixo, você pode ver diferentes exemplos de uso, mas sinta-se à vontade para
-explorar o poder da IA. Para a geração de código, o Decopilot suporta tanto
-texto com a solicitação desejada quanto a inserção de imagens locais. Em ambos
-os casos, você pode escolher **aceitar as alterações**, **descartar** ou
-**recriar o código fornecido.**
-
-### Criando Blocos
-
-Blocos são um dos conceitos mais importantes na deco.cx, então o Decopilot está
-pronto para ser chamado para criar qualquer um desses componentes. É só pedir!
-Desde loaders e actions até sections, o Decopilot perguntará se pode prosseguir
-com o processo de criação ou não. Aqui está um exemplo de como funciona com
-sections:
-
-> Prompt: Crie uma section dizendo Olá Mundo!
-
-
-
-### Criando e Editando Código
-
-Você pode explorar a geração e edição de código com base no seu código atual e
-na criação de novos componentes com o Decopilot. Por exemplo, ao usar o prompt:
-
-> Prompt: Crie um Hero dizendo Hello World em tons de verde.
-
-Após gerar o código, o Decopilot substitui o código usado, e você pode ver o
-resultado na pré-visualização.
-
-
-
-### Criando e Editando com Base em uma Imagem
-
-Se você deseja usar uma imagem como inspiração, o Decopilot pode reproduzi-la ao
-receber uma imagem local em um dos formatos suportados (JPEG, PNG, GIF e WebP)
-junto com a solicitação do que fazer. Aqui está um exemplo de prompt:
-
-> Prompt: Reproduza este componente para mim.
-
-
-
-### Explicar e Corrigir Erros
-
-Para ajudar ainda mais no processo de desenvolvimento, o Decopilot pode ajudar a
-explicar algo para você ou até mesmo corrigir erros no seu código. Exemplo de
-prompt:
-
-> Prompt: O que este código faz?
-
-
-
-### Analisar Desempenho
-
-Seu assistente de código pode ser útil para consultar o desempenho do seu site e
-fornecer feedback sobre como melhorá-lo. Aqui está um exemplo de prompt:
-
-> Prompt: Como está o desempenho do meu site?
-
-## Conclusão
-
-Com base nas funcionalidades apresentadas, o potencial do Decopilot para
-simplificar e acelerar o desenvolvimento de código é evidente.
-[Experimente agora](https://admin.deco.cx/) e descubra como ele pode transformar
-sua experiência de programação, tornando-a mais eficiente e produtiva!
diff --git a/docs/decopilot/how-to-access/en.md b/docs/decopilot/how-to-access/en.md
deleted file mode 100644
index 5ca0f3ec..00000000
--- a/docs/decopilot/how-to-access/en.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-description: How to access the Decopilot
----
-
-## Introduction
-
-The Decopilot is a code generation tool designed to further streamline the
-website creation process. Seeking to combine the convenience of using artificial
-intelligence with the agility provided by [Deco Admin](https://admin.deco.cx/)
-for web application development, Decopilot provides the freedom to develop a
-website and its content within minutes while assisting you in identifying and
-fixing any potential errors during development.
-
-## How to access
-
-After
-[creating your site](https://deco.cx/docs/en/getting-started/creating-a-site),
-open a code file in any section of your site. You can do this through the search
-bar of our CMS or by clicking the code icon as shown below:
-
-
-On the right sidebar, you can access the Decopilot as shown in the image:
-
-
-There you go! Now you can explore the functionalities of our Decopilot. To do
-so, it's worth accessing the
-[Assistant](https://deco.cx/docs/en/decopilot/assistant).
diff --git a/docs/decopilot/how-to-access/pt.md b/docs/decopilot/how-to-access/pt.md
deleted file mode 100644
index e696da11..00000000
--- a/docs/decopilot/how-to-access/pt.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-description: Como acessar o decopilot
----
-
-## Introdução
-
-O Decopilot é uma ferramenta de geração de código projetada para acelerar ainda
-mais o processo de criação de sites. Buscando combinar a praticidade do uso de
-inteligência artificial com a agilidade proporcionada pelo
-[Admin da Deco](https://admin.deco.cx/) para o desenvolvimento de aplicações
-web, o Decopilot oferece a liberdade para criar um site e seu conteúdo em
-questão de minutos, enquanto auxilia você na identificação e correção de
-eventuais erros durante o desenvolvimento.
-
-## Como acessar
-
-Após [criar seu site](https://deco.cx/docs/pt/getting-started/creating-a-site),
-abra um arquivo de código em qualquer section do seu site. Você pode fazer isso
-através da barra de pesquisa do nosso CMS ou clicando no ícone de código como
-mostrado abaixo:
-
-
-Na barra lateral direita você poderá acessar o decopilot conforme a imagem:
-
-
-Pronto! Agora você pode experimentar as funcionalidades do nosso decopilot. Para
-isso, vale a pena acessar o
-[Assistant](https://deco.cx/docs/pt/decopilot/assistant).
diff --git a/docs/developing-capabilities/apps/ab-test/en.md b/docs/developing-capabilities/apps/ab-test/en.md
deleted file mode 100644
index 9c3adc38..00000000
--- a/docs/developing-capabilities/apps/ab-test/en.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-description: How to create and track an A/B test?
----
-
-# How to Create and Track an A/B Test?
-
-A/B tests for websites involve splitting the audience and directing them to two
-different versions of the site to see which one generates more engagement.
-
-Let's explore each step:
-
-- Creating an experiment
-- Traffic segmentation
-- Editing your variant
-- Creating events and collecting data
-- Funnel and results
-- GA4 Setup for A/B Testing
-
-## Creating an Experiment
-
-In the sidebar, click on "Experiments"
-
-
-
-This screen lists your experiments. Click on "Create new Experiment"
-
-Some information will be required:
-
-- Name
-- Description
-- Traffic (percentage that will go to the new version)
-
-## Traffic Segmentation
-
-You have just chosen the traffic percentage for your test, but you can customize
-this even further.
-
-The creation of the Experiment has generated a new Segment, which can be checked
-in the sidebar, under "Segments":
-
-
-
-Thus, you can also combine segments to conduct tests for specific audiences:
-
-Select the created test and make the desired changes.
-
-Examples of segmentation:
-
-- **50%** of **Mobile** traffic
-- **30%** of **Facebook Campaign** traffic
-- **10%** of traffic from **Rio de Janeiro**
-
-## Editing Your Variant
-
-Now with the segment created, you can choose whether to test a complete page or
-a specific section.
-
-Create a variant:
-
-
-Select the segment:
-
-
-Make the desired changes:
-
-
-## Creating Events and Collecting Data
-
-Templates start with some events, but you can create new ones.
-
-See how to create them through code or through the panel:
-
-Example in code:
-
-```javascript
-import { sendEvent } from "./sdk/analytics.tsx";
-
- sendEvent({ name: "add_to_cart" }, params)}
->
- Add to Cart
- ;
-```
-
-## Funnel and Results
-
-Additionally, it is possible to check the results of the A/B Test
-
-On the screen that lists the Experiments, select the desired Test.
-
-Check out the features:
-
-### Sample Size
-
-Indication of the minimum sample size for the test to be considered
-statistically significant.
-
-### Probability
-
-See the probability of your variation being the winner relative to the other.
-
-### Goal Setting
-
-Select the goals you want to compare, there is no limit.
-
-### Filter by Period
-
-Filter by period to understand if there were any outliers during the test.
-
-### Funnel
-
-See the conversion rate of each of your metrics to understand where you are
-losing your user.
-
-### Real-Time
-
-Data is transferred in real-time, no more waiting a day or two to analyze them.
-
-
-
-
-
-## GA4 Setup for A/B Testing
-
-To ensure data consistency while navigating an A/B test on deco.cx, we use a
-cookie called deco_segment.
-
-This cookie lasts for 30 days by default and can be used to determine which
-version the user is in.
-
-All data sent to the deco.cx Analytics is already segmented by version.
-
-However, for this to also occur in GA4, it is necessary to check this cookie and
-segment the events based on that information.
-
-- Example of cookie:
-
-```
-deco_segment=TdCJTIyYWN0aXZlJTIyJTNBJTVCJTVEJTJDJTIyaW5hY3RpdmVEcmF3biUyMiUzQSU1QiUyMlRlc3RlJTIwVGF2YW5vJTIyJTVEJTdE
-```
-
-- To extract readable data from this hash, use the following function:
-
-```javascript
-getData(myCookie) {
- return JSON.parse(decodeURIComponent(atob(myCookie)))
-}
-```
-
-- This will return an object like:
-
-```json
-{
- "active": [],
- "inactiveDrawn": ["Teste Tavano"]
-}
-```
-
-This way, in GTM, you can identify whether the user is participating in Test X,
-allowing for the segmented and accurate dispatch of events.
diff --git a/docs/developing-capabilities/apps/ab-test/pt.md b/docs/developing-capabilities/apps/ab-test/pt.md
deleted file mode 100644
index 2b30dccb..00000000
--- a/docs/developing-capabilities/apps/ab-test/pt.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-description: Como criar um Teste A/B e acompanhar os resultados?
----
-
-
-VIDEO
-
-
-# Como criar um Teste A/B e acompanhar os resultados?
-
-Os testes A/B para websites consistem em dividir e direcionar o publico para
-duas versões diferentes do site e ver em qual delas o engajamento é maior.
-
-Vamos conhecer cada uma das etapas:
-
-- Criando um experimento
-- Segmentação do tráfego
-- Editando sua variante
-- Criação de eventos e coleta de dados
-- Funil e resultado
-
-## Criando um experimento
-
-No menu lateral, clique em Experiments
-
-
-
-Essa tela lista os seus experimentos, clique em "Create new Experiment"
-
-Alguns dados serão necessários:
-
-- Name
-- Description
-- Traffic (porcentagem que irá para versão nova)
-
-## Segmentação do tráfego
-
-Você acabou escolher a porcentagem do tráfego para o seu teste, mas pode
-personalizar isso ainda mais.
-
-A criação do Experimento, gerou um novo Segmento, que pode ser conferido na aba
-lateral, em Segments:
-
-
-
-Assim, você também pode combinar segmentos para fazer Testes para públicos
-específicos:
-
-Selecione o Teste criado e faça as alterações que deseja.
-
-Exemplos de segmentação:
-
-- **50%** do tráfego **Mobile**
-- **30%** do tráfego da **Campanha do Facebook**
-- **10%** do tráfego do **Rio de Janeiro**
-
-## Editando sua variante
-
-Agora com o segmento criado, você pode escolher se deseja fazer o teste para uma
-página completa ou uma section específica.
-
-Crie uma variante:
-
-
-Selecione o segmento:
-
-
-Faça as alterações que deseja:
-
-
-## Criação de eventos e coleta de dados
-
-Os templates já iniciam com alguns eventos, mas você pode criar novos eventos.
-
-Veja como criar pelo código ou pelo painel:
-
-Exemplo no código:
-
-```javascript
-import { sendEvent } from "./sdk/analytics.tsx";
-
- sendEvent({ name: "add_to_cart" }, params)}
->
- Adicionar ao Carrinho
- ;
-```
-
-## Funil e resultado
-
-Além disso, é possível conferir os resultados do Teste A/B
-
-Na tela que lista os Experimentos, selecione o Teste desejado.
-
-Confira os recursos:
-
-### Tamanho da amostra
-
-Indicação de tamanho mínimo da amostra para que o teste seja considerado
-estatisticamente relevante.
-
-### Probabilidade
-
-Veja a probabilidade da sua variação ser a vencedora em relação a outra.
-
-### Configuração de metas
-
-Selecione as metas que deseja comparar, não existe nenhum limite.
-
-### Filtro por período
-
-Filtre por período para entender se houve pontos fora da curva durante o teste.
-
-### Funil
-
-Veja a taxa de conversão de cada uma das suas métricas para entender onde está
-perdendo o seu usuário.
-
-### Tempo real
-
-Os dados são transferidos em tempo real, chega de esperar um ou dois dias para
-analisá-los.
-
-
-
-
-
-## Setup do GA4 para Teste A/B
-
-Para assegurar a consistência dos dados fornecidos fornecidos ao navegar em um
-Teste A/B na deco.cx, utilizamos um cookie, chamado _deco_segment_.
-
-Esse cookie dura por padrão 30 dias e pode ser utilizado para entender em qual
-versão o usuário está.
-
-Todos os dados que vão para o Analytics da deco.cx, já são separados por
-segmento.
-
-Porém, para que isso também aconteça no GA4, é necessário verificar esse cookie
-e segmentar os eventos com base nessa informação.
-
-- Exemplo de cookie
-
-```
-deco_segment=TdCJTIyYWN0aXZlJTIyJTNBJTVCJTVEJTJDJTIyaW5hY3RpdmVEcmF3biUyMiUzQSU1QiUyMlRlc3RlJTIwVGF2YW5vJTIyJTVEJTdE
-```
-
-- Para extrair o dado legível deste hash, utilize a função:
-
-```javascript
-getData(myCookie) {
- return JSON.parse(decodeURIComponent(atob(myCookie)))
-}
-```
-
-- Isso irá devolver um objeto como:
-
-```json
-{
- "active": [],
- "inactiveDrawn": ["Teste Tavano"]
-}
-```
-
-Dessa forma, no GTM, você consegue identificar se o usuário está participando do
-Teste X, permitindo o envio de eventos de forma segmentada e precisa.
diff --git a/docs/developing-capabilities/apps/creating-an-app/en.md b/docs/developing-capabilities/apps/creating-an-app/en.md
deleted file mode 100644
index 8786bb6d..00000000
--- a/docs/developing-capabilities/apps/creating-an-app/en.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-description: Developing an App
-since: 1.24.0
----
-
-# Prerequisites
-
-Before you begin, make sure you have the following installed on your system:
-
-- [Deno](https://deno.land/)
-
-## Step 1: Initializing the deco App
-
-To kickstart your deco App development, run the following command in your
-terminal:
-
-```bash
-deno run -A -r https://deco.cx/start
-```
-
-This command will initialize a new deco App project in your current directory.
-Choose a meaningful name for your app when prompted.
-
-## Step 2: Navigate to Your deco App Directory
-
-After the initialization is complete, navigate to your deco App directory using
-the following command:
-
-```bash
-cd $YOUR_APP_NAME
-```
-
-Replace `$YOUR_APP_NAME` with the name you chose for your deco App during
-initialization.
-
-## Step 3: Understanding the `mod.ts` File
-
-Now, let's take a look at the `mod.ts` file in your deco App:
-
-```ts
-import manifest from "./manifest.gen.ts";
-import type { Manifest } from "./manifest.gen.ts";
-import type { App, AppContext as AC } from "deco/mod.ts";
-
-export interface State {
- url: string;
-}
-export type MyApp = App;
-export default function App(
- state: State,
-): MyApp {
- return {
- manifest,
- state,
- };
-}
-
-export type AppContext = AC;
-```
-
-The `mod.ts` file is the heart of your deco App and is written by the developer.
-In this file, you import the automatically generated `manifest` and define the
-`State` interface, which represents the properties of your app. This is useful,
-for instance, to get API Keys for an specific services or to allow the user to
-manage global settings for the app.
-
-The `App` function is exported and takes the `state` object as an argument,
-representing the state of your app. It then returns an object containing the
-`manifest` and the defined `state`. This function is crucial for your app to
-work correctly.
-
-Lastly, the `AppContext` type is exported, representing the context of your app
-and allowing access to the properties defined in `mod.ts`.
-
-## Step 4: Developing Your deco App
-
-Now that you understand the basic structure of your deco App, you can start
-developing it. Feel free to add more components, such as sections, actions,
-workflows, or handlers, to enhance the functionality of your app.
-
-## Step 5: Building Your deco App
-
-To see your deco App in action, run the following command:
-
-```bash
-deno task start
-```
-
-;
-export default function App(
- state: State,
-): MyApp {
- return {
- manifest,
- state,
- };
-}
-
-export type AppContext = AC;
-```
-
-O arquivo `mod.ts` é o coração do seu App deco e é escrito pelo desenvolvedor.
-Neste arquivo, você importa o `manifest` gerado automaticamente e define a
-interface `State`, que representa as propriedades do seu app. Pode ser usado
-para configurar API keys para uma chamada a alguma dada API.
-
-A função `App` é exportada e recebe o objeto `state` como argumento,
-representando o estado do seu app. Em seguida, ela retorna um objeto contendo o
-`manifest` e o `state` definidos. Essa função é fundamental para que o seu app
-funcione corretamente.
-
-Por fim, é exportado o tipo `AppContext`, que representa o contexto do seu app e
-permite acessar as propriedades definidas no `mod.ts`.
-
-## Passo 4: Desenvolvendo o seu App deco
-
-Agora que você entende a estrutura básica do seu App deco, você pode começar a
-desenvolvê-lo. Sinta-se à vontade para adicionar mais componentes, como seções,
-ações, fluxos de trabalho ou manipuladores, para aprimorar a funcionalidade do
-seu app.
-
-## Passo 5: Construindo o seu App deco
-
-Para ver o seu App deco em ação, execute o seguinte comando:
-
-```bash
-deno task start
-```
-
-
-
- {list &&
{list || defaultList}
}
-
-
-
-
- Color:
-
-
- { selectedSku.value = skus[0] }}>Red
-
-
- { selectedSku.value = skus[1] }}>Blue
-
-
- { selectedSku.value = skus[2] }}>Green
-
-
-
-
-
-
- Color:
-
-
- Red
-
-
- Blue
-
-
- Green
-
-
-
- ({
- props: { activeIndex: 0 },
- })}
- >
- Tab 1
-
- ({
- props: { activeIndex: 1 },
- })}
- >
- Tab 2
-
- ({
- props: { activeIndex: 2 },
- })}
- >
- Tab 3
-
-
- );
-};
-```
-
-In this example, the `activeIndex` prop is overridden with each
-`usePartialSection` call, simplifying the use of Partials and eliminating the
-need to manage URLs and search parameters within our sections.
diff --git a/docs/developing-capabilities/interactive-sections/partial/pt.md b/docs/developing-capabilities/interactive-sections/partial/pt.md
deleted file mode 100644
index 2177d510..00000000
--- a/docs/developing-capabilities/interactive-sections/partial/pt.md
+++ /dev/null
@@ -1,215 +0,0 @@
----
-description: Defira computação do navegador para o servidor
-since: 1.0.0
----
-
-# Fresh Partials: Revolucionando o Desenvolvimento Web com Deno
-
-Partials capacita os desenvolvedores a otimizar as interações na web,
-descarregando determinadas tarefas do dispositivo do usuário para os Servidores
-Edge da Deco. Essa abordagem inovadora reduz significativamente a quantidade de
-JavaScript necessária para executar websites, resultando em tempos de
-carregamento de página mais rápidos e melhores taxas de conversão.
-
-## Introdução aos Partials
-
-Partials, inspirados em [htmx](https://htmx.org/docs/), operam interceptando
-interações do usuário em elementos de botão, âncora e formulário. Essas
-interações são automaticamente transferidas para nosso servidor, onde geram um
-novo estado da Interface do Usuário (UI). Esse novo estado fresco é transmitido
-como HTML puro de volta para o navegador do usuário. Nosso tempo de execução
-substitui e hidrata o novo estado da UI, criando a ilusão de interatividade do
-lado do cliente. Na realidade, todo o processo de computação ocorre em
-milissegundos em nossos Servidores Edge. Para obter informações mais detalhadas
-sobre Partials, consulte a
-[documentação](https://github.com/denoland/fresh/issues/1609) do Fresh.
-
-## Simplificando o Desenvolvimento
-
-Embora os Fresh Partials introduzam um novo domínio de otimização de desempenho,
-também trazem complexidade adicional ao ciclo de desenvolvimento. Agora, os
-desenvolvedores precisam considerar vários modos de renderização, seu impacto
-nos tamanhos de pacote e HTML, latências de interação e como navegar
-corretamente em páginas parcialmente renderizadas. Para simplificar esse
-processo, a Deco integrou os Partials em uma camada de abstração mais alta do
-nosso framework, eliminando a necessidade de os desenvolvedores lidarem com
-essas complexidades.
-
-## Usando Partials nas Section
-
-Na Deco, todas as [Sections](/docs/en/concepts/section) são tratadas como
-parciais. Isso significa que você pode incorporar facilmente interatividade do
-lado do cliente em qualquer Section sem comprometer os tamanhos de pacote ou os
-carregamentos iniciais da página. Isso é especialmente benéfico para a criação
-de componentes de IU comuns, como seletores de SKU, recursos de rolagem infinita
-e abas. Nas Sections a seguir, vamos aprofundar como aproveitar todo o potencial
-dos Partials criando um seletor de SKU super-rápido.
-
-## Exemplo: Seletor de SKU
-
-Os seletores de SKU permitem que os compradores explorem diferentes variações de
-um produto, cada um com seu conjunto único de preços, imagens e disponibilidade.
-Considere o exemplo a seguir:
-
-
-Como demonstrado, a alteração do SKU selecionado pode resultar em alterações
-significativas na página. Uma abordagem direta é criar um sinal para armazenar o
-SKU atualmente selecionado e atualizá-lo a cada clique:
-
-```tsx
-// sections/ProductDetails.tsx
-export default function DetalhesDoProduto ({ skus }) {
- const skuSelecionado = useSignal(skus[0]);
-
- return (
-
-
-
-
- Cor:
-
-
- { skuSelecionado.value = skus[0] }}>Vermelho
-
-
- { skuSelecionado.value = skus[1] }}>Azul
-
-
- { skuSelecionado.value = skus[2] }}>Verde
-
-
-
-
-
-
- Cor:
-
-
- Vermelho
-
-
- Azul
-
-
- Verde
-
-
-
- ({
- props: { activeIndex: 0 },
- })}
- >
- Aba 1
-
- ({
- props: { activeIndex: 1 },
- })}
- >
- Aba 2
-
- ({
- props: { activeIndex: 2 },
- })}
- >
- Aba 3
-
-
- );
-};
-```
-
-Neste exemplo, a prop `activeIndex` é substituída a cada chamada de
-`usePartialSection`, simplificando o uso de Partials e eliminando a necessidade
-de gerenciar URLs e parâmetros de pesquisa em nossas Sections.
diff --git a/docs/developing-capabilities/islands/actions/en.md b/docs/developing-capabilities/islands/actions/en.md
deleted file mode 100644
index b918a8ab..00000000
--- a/docs/developing-capabilities/islands/actions/en.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-description: An Action in deco.cx is a function that mutates data.
-since: 1.0.0
----
-
-An **Action** in deco.cx is a typescript function that mutates data within the
-application. Actions are triggered by specific user interactions or events and
-are responsible for updating the application's state accordingly. Unlike
-Loaders, which fetch data from external sources, Actions focus on modifying the
-data already present in the application. They can perform operations such as
-**updating**, **creating**, or **deleting** data based on the specified logic.
-Actions provide precise control and flexibility over data mutation and
-seamlessly integrate with other blocks like Loaders to enable a seamless flow of
-data within the application.
-
-Actions, like **Loaders**, are implemented as typescript functions and reside
-locally in the `/actions/` folder of your project. They can be invoked in
-response to user interactions, form submissions, or any other defined triggers.
-By encapsulating data mutation logic within Actions, developers can manage and
-track changes made to the application's state, providing users with dynamic and
-interactive experiences.
-
-> Note: While Loaders focus on fetching data from external sources, Actions
-> concentrate on mutating data within the application. By leveraging both
-> Loaders and Actions in deco.cx, developers can create powerful applications
-> that fetch and manipulate data seamlessly.
-
-One of the great benefits of **Actions** is their ability to work in conjunction
-with **Loaders** and other blocks. While **Loaders** focus on fetching data,
-**Actions** focus on mutating data. This means that multiple **Actions** can be
-invoked from the same interface, allowing users to modify data from different
-sources or perform a series of related operations. By leveraging both
-**Loaders** and **Actions**, developers can create flexible and powerful
-applications that seamlessly integrate data fetching and mutation.
-
-In addition to mutating data, **Actions** in _deco.cx_ **can also export a
-typescript props type,** which allows them to be configured in the
-[Admin](https://deco.cx/admin) just like [Sections](/docs/en/concepts/section).
-
-## Example Code
-
-This is the implementation of the `newsletter/subscribe.ts` Action:
-
-```tsx
-import { AppContext } from "../../mod.ts";
-
-export interface Props {
- email: string;
- name?: string;
- page?: string;
- part?: string;
- campaign?: string;
-}
-
-const action = async (
- props: Props,
- _req: Request,
- ctx: AppContext,
-): Promise => {
- const { vcsDeprecated } = ctx;
- const form = new FormData();
- const {
- email,
- name = "",
- part = "newsletter",
- page = "_",
- campaign = "newsletter:opt-in",
- } = props;
-
- form.append("newsletterClientName", name);
- form.append("newsletterClientEmail", email);
- form.append("newsInternalPage", page);
- form.append("newsInternalPart", part);
- form.append("newsInternalCampaign", campaign);
-
- await vcsDeprecated["POST /no-cache/Newsletter.aspx"]({}, {
- body: form,
- });
-};
-
-export default action;
-```
-
-[Source](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/vtex/actions/newsletter/subscribe.ts#L1C1-L37C23)
-
-## Recommended Reading
-
-- [Fetching data from APIs](/docs/en/developing-guide/fetching-data)
-- [Client-side function invocation](/docs/en/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/developing-capabilities/islands/actions/pt.md b/docs/developing-capabilities/islands/actions/pt.md
deleted file mode 100644
index 1c6f5cd6..00000000
--- a/docs/developing-capabilities/islands/actions/pt.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-description: Uma Action na deco.cx é uma função que modifica dados.
-since: 1.0.0
----
-
-Uma **Action** no deco.cx é uma função em typescript que **modifica** dados
-dentro da aplicação. As **Action** são acionadas por _interações_ específicas do
-**usuário** ou **eventos** e são responsáveis por atualizar o estado da
-aplicação de acordo. Ao contrário dos **Loaders**, que buscam dados de fontes
-externas, as **Action** concentram-se em modificar os dados já presentes na
-aplicação. Elas podem realizar operações como **atualização**, **criação** ou
-**exclusão** de dados com base na lógica especificada. As **Action**
-proporcionam _controle_ preciso e flexibilidade sobre a mutação de dados e
-integram-se perfeitamente a outros blocos, como os **Loaders**, para permitir um
-fluxo contínuo de dados na aplicação.
-
-As **Action**, assim como os **Loaders**, são implementadas como funções em
-typescript e estão localizadas na pasta `/actions/` do seu projeto. Elas podem
-ser invocadas em resposta a interações do usuário, envios de formulários ou
-qualquer outro gatilho definido. Ao encapsular a lógica de mutação de dados nas
-**Action**, os desenvolvedores podem gerenciar e rastrear as alterações feitas
-no estado da aplicação, proporcionando aos usuários experiências dinâmicas e
-interativas.
-
-## Código de exemplo
-
-Esta é a implementação da Action `newsletter/subscribe.ts`:
-
-```tsx
-import { AppContext } from "../../mod.ts";
-
-export interface Props {
- email: string;
- name?: string;
- page?: string;
- part?: string;
- campaign?: string;
-}
-
-const action = async (
- props: Props,
- _req: Request,
- ctx: AppContext,
-): Promise => {
- const { vcsDeprecated } = ctx;
- const form = new FormData();
- const {
- email,
- name = "",
- part = "newsletter",
- page = "_",
- campaign = "newsletter:opt-in",
- } = props;
-
- form.append("newsletterClientName", name);
- form.append("newsletterClientEmail", email);
- form.append("newsInternalPage", page);
- form.append("newsInternalPart", part);
- form.append("newsInternalCampaign", campaign);
-
- await vcsDeprecated["POST /no-cache/Newsletter.aspx"]({}, {
- body: form,
- });
-};
-
-export default action;
-```
-
-[Fonte](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/vtex/actions/newsletter/subscribe.ts#L1C1-L37C23)
-
-## Leitura recomendada
-
-- [Buscando dados de API](/docs/pt/developing-guide/fetching-data)
-- [Invocando funções através da API](/docs/pt/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/developing-capabilities/islands/en.md b/docs/developing-capabilities/islands/en.md
deleted file mode 100644
index 0d49f447..00000000
--- a/docs/developing-capabilities/islands/en.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-description: Client-side Interactivity.
-since: 1.0.0
----
-
-One of the reasons deco is fast is our edge first approach to creating websites.
-This means that all code you write runs on our servers instead of running on
-slow, inconsitent user devices (browser). However, sometimes we need to provide
-extra interactivity to our websites, like adding `onClick`, `useState` or
-`useEffect` event handlers. In this guide you will learn how to create
-components that run on the browser. Make sure to read our performance tips
-before creating any JavaScript on the browser to avoid common pitfails with
-client-side JavaScript
-
-## Summary
-
-1. Making components interactive
-2. Islands usage limitations
-3. Sharing state among islands.
-4. Considerations and tips
-
-## Making components interactive
-
-Suppose you have the following component. A counter that allows the user to
-add/subtract to the displayed value.
-
-
- setCount(count - 1)}>
- -
-
- {count}
- setCount(count + 1)}>
- +
-
-
- );
-}
-```
-
-Creating a file called `Counter.tsx` and placing it into the `islands` folder
-gives us the following result on the screen:
-
-
-
-This is called an `island`!
-
-Although adding islands to your project seems tempting, keep in mind that
-islands slow down websites and harm [TBT metric](https://web.dev/tbt/), so
-before moving any component to the `island` folder, make sure that your final
-interactivity:
-
-- Isn't achieved through page navigation with links or form submissions...
-- Isn't an interaction built purely with CSS...
-- Requires manipulation of elements or the current page's state (e.g., using
- onClick, onChange, useEffect, another hook, or an event listener)
-
-## Islands usage limitations
-
-Islands are Preact components. This means they accept `props`. However, these
-values must be one of:
-
-- Primitive types `string`, `boolean`, `bigint`, and `null`
-- Simple objects with `string` keys and serializable values
-- Arrays of serializable values
-- `Uint8Array`
-- JSX Elements (ONLY as props.children)
-- Preact Signals (if the signal value is serializable)
-- Most numbers (`Infinity`, `-Infinity`, and `NaN` are converted to `null`)
-
-Complex objects such as Date, functions, and custom classes are not accepted as
-islands props.
-
-## Using Signals Instead of State
-
-`useState` requires working with a separate function for value updates. Preact
-also uses [`Signals`](https://preactjs.com/guide/v10/signals/) for handling
-state. A `signal` has a reference that holds a value, but it also has a `.value`
-attribute that allows updating this value.
-
-Within a component, if the state is only used locally, you can use the
-`useSignal` hook to create these elements that can be used in the function body
-or in the JSX returned, as in the example below.
-
-```tsx
-import { useSignal } from "@preact/signals";
-
-export default function Counter() {
- const count = useSignal(0);
-
- return (
-
- count.value--}>
- -
-
- {count}
- count.value++}>
- +
-
-
- );
-}
-```
-
-## Sharing state among islands.
-
-In normal Preact development, sharing state between components is usually done
-via the [Context](https://preactjs.com/guide/v10/context/) API. This works fine
-for a full client-side application. However, since we are using islands
-architecture, sharing state among islands require a new approach.
-
-Signals are also a great way of sharing state between islands, since one can
-publish and subscribe for change events in a concise API.
-
-To use signals,
-
-```tsx
-import { signal } from "@preact/signals";
-```
-
-Now, use the global scope to create, mutate and subscribe to a signal:
-
-```tsx
-import { signal } from "@preact/signals";
-
-const count = signal(0);
-
-// Read a signal’s value by accessing .value:
-console.log(count.value); // 0
-
-// Update a signal’s value:
-count.value += 1;
-
-// The signal's value has changed:
-console.log(count.value); // 1
-```
-
-To define side-effects over signal changes, use the `effect`, `batch`,
-`computed`, or `useComputed` operations. Refer to the
-[signals documentation](https://preactjs.com/guide/v10/signals/) for more
-details. Also, take a look at
-[sharing state between islands](https://fresh.deno.dev/docs/examples/sharing-state-between-islands).
-
-> Note that sharing state via the `Context` API will NOT work, since the context
-> will be outside the islands, and thus, only available on the server.
-
-## Considerations and tips
-
-Making a component an island will at least double its size in bytes. The server
-renders the HTML for this element and sends it to the browser, but it also sends
-essentially the same HTML plus the JS to be injected on the client side.
-Therefore, try to create only the necessary islands, as they make the rendering
-process more resource-intensive.
-
-Futher read:
-
-- [Introduction to the Islands architecture - EN](https://deno.com/blog/intro-to-islands)
diff --git a/docs/developing-capabilities/islands/fetching-data-client/en.md b/docs/developing-capabilities/islands/fetching-data-client/en.md
deleted file mode 100644
index 063471d0..00000000
--- a/docs/developing-capabilities/islands/fetching-data-client/en.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-description: Learn how to invoke a function through API.
-since: 1.0.0
----
-
-## Suggested reading
-
-- [Core Concepts: Loaders](/docs/en/concepts/loader)
-- [Core Concepts: Actions](/docs/en/concepts/action)
-
-Client-side function invocation is a powerful feature of live.ts that allows you
-to fetch data or mutate directly from your functions without sending JavaScript
-to the browser. This feature ensures that your data fetching or mutation is
-unique across your repository and helps reduce latency on the client-side.
-
-To get started with client-side function invocation, follow these steps:
-
-1. Import `invoke` from `runtime.ts`
-
-2. Now you can issue invocations using the `invoke` function. For example, to
- fetch data from a function, you would use the following code:
-
-> Can't find this file?
-> [Try this one](https://github.com/deco-sites/storefront/blob/main/runtime.ts)
-
-```ts
-import { invoke } from "../runtime.ts";
-import { useCallback } from "preact/hooks";
-
-export default function MyIsland() {
-
- const fetchData = useCallback(() => {
- const data = await invoke["deco-sites/my-store"].loaders.myLoader({/* your function input props */});
- }, [])
-
- return
- {...}
- Load
-
-}
-```
-
-Here, the `invoke` function takes an object with a `key` property that specifies
-the path to your function and a props property that contains your function input
-props. When you call `invoke`, live.ts will invoke your function as it does for
-rendering sections and return it to you as a JavaScript object. It is also
-possible to call functions defined in an App installed in the project. For
-example,
-
-```ts
-const dataAppVtex = await invoke.vtex.loaders.vtexLoader({
- /* your function input props */
-});
-```
-
-You can also batch requests by passing an object with multiple keys, each
-representing a desired invocation. For example:
-
-```ts
-const { data1, data2 } = await invoke({
- data1: invoke.path1({/* your function input props */}),
- data2: invoke.path2({/* your function input props */}),
-});
-```
-
-With these steps, you can now start using client-side functions invocation in
-your Live.ts application, happy coding!
diff --git a/docs/developing-capabilities/islands/fetching-data-client/pt.md b/docs/developing-capabilities/islands/fetching-data-client/pt.md
deleted file mode 100644
index 90bfa947..00000000
--- a/docs/developing-capabilities/islands/fetching-data-client/pt.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-description: Aprenda a invocar funções através da API.
-since: 1.0.0
----
-
-## Leitura sugerida
-
-- [Conceitos básicos: Loader](/docs/pt/concepts/loader)
-- [Conceitos básicos: Action](/docs/pt/concepts/action)
-
-A Invocação de funções client-side é um recurso poderoso do live.ts que permite
-que você obtenha dados diretamente dos seus funções sem enviar JavaScript para o
-navegador. Esse recurso garante que sua obtenção de dados seja única em todo o
-seu repositório e ajuda a reduzir a latência do lado do cliente.
-
-Para começar a usar a Invocação de funções client-side, siga estes passos:
-
-1. Importe o objeto `invoke` do arquivo `runtime.ts`
-
-2. Agora você pode emitir invocações usando a função `invoke`. Por exemplo, para
- buscar dados de uma função, você usaria o seguinte código:
-
-> Não conseguiu achar esse arquivo?
-> [Tente este](https://github.com/deco-sites/fashion/blob/main/runtime.ts)
-
-```ts
-import { invoke } from "../runtime.ts";
-import { useCallback } from "preact/hooks";
-
-export default function MyIsland() {
-
- const fetchData = useCallback(() => {
- const data = await invoke["deco-sites/minha-loja"].loaders.myLoader({/* your function input props */});
- }, [])
-
- return
- {...}
- Load
-
-}
-```
-
-Aqui, a função `invoke` recebe um objeto com uma propriedade `key` que
-especifica o caminho para sua função e uma propriedade `props` que contém suas
-props de entrada da função. Quando você chama `invoke`, o live.ts irá invocar
-sua função como faz para renderizar seções e retorná-lo para você como um objeto
-JavaScript. É possível também chamar funções definidas em um App instalado no
-projeto. Por exemplo,
-
-```ts
-const dataAppVtex = await invoke.vtex.loaders.vtexLoader({
- /* your function input props */
-});
-```
-
-Você também pode agrupar solicitações passando um objeto com várias chaves, cada
-uma representando uma invocação desejada. Por exemplo:
-
-```ts
-const { data1, data2 } = await invoke({
- data1: invoke.path1({/* your function input props */}),
- data2: invoke.path2({/* your function input props */}),
-});
-```
-
-Com esses passos, agora você pode começar a usar a Invocação de funções
-client-side em sua aplicação Live.ts, happy coding!
diff --git a/docs/developing-capabilities/islands/pt.md b/docs/developing-capabilities/islands/pt.md
deleted file mode 100644
index f3dcf303..00000000
--- a/docs/developing-capabilities/islands/pt.md
+++ /dev/null
@@ -1,174 +0,0 @@
----
-description: Adicionando interatividade à página.
-since: 1.0.0
----
-
-Uma das razões pelas quais o Deco é rápido é a nossa abordagem centrada no
-servidor para criar sites. Isso significa que todo o código que você escreve é
-executado em nossos servidores, em vez de ser executado em dispositivos de
-usuário lentos e inconsistentes (navegador). No entanto, às vezes precisamos
-fornecer interatividade extra aos nossos sites, como adicionar manipuladores de
-eventos `onClick`, `useState` ou `useEffect`. Neste guia, você aprenderá como
-criar componentes que são executados no navegador. Certifique-se de ler nossas
-dicas de desempenho antes de criar qualquer JavaScript no navegador, para evitar
-problemas comuns com o JavaScript do lado do cliente.
-
-## Sumário
-
-1. Tornando os componentes interativos
-2. Limitações de uso das islands
-3. Compartilhando estado entre as islands
-4. Considerações e dicas
-
-## Tornando os componentes interativos
-
-Suponha que você tenha o seguinte componente. Um contador que permite ao usuário
-adicionar/subtrair o valor exibido.
-
-
- setCount(count - 1)}>
- -
-
- {count}
- setCount(count + 1)}>
- +
-
-
- );
-}
-```
-
-Ao criar um arquivo chamado `Counter.tsx` e colocá-lo na pasta `islands`,
-obtemos o seguinte resultado na tela:
-
-
-
-Agora isso é chamado de `island`!
-
-Embora adicionar islands ao seu projeto pareça tentador, tenha em mente que as
-islands tornam os sites mais lentos e prejudicam a métrica TBT
-([Total Blocking Time](https://web.dev/tbt/)). Portanto, antes de mover qualquer
-componente para a pasta `island`, verifique se sua interatividade final:
-
-- Não é alcançada por meio de navegação de página com links ou envio de
- formulários...
-- Não é uma interação construída puramente com CSS...
-- Requer manipulação de elementos ou estado da página atual (por exemplo, usando
- onClick, onChange, useEffect, outro hook ou um ouvinte de eventos)
-
-## Limitações de uso das islands
-
-As islands são componentes do Preact. Isso significa que elas aceitam `props`.
-No entanto, esses valores devem ser um dos seguintes:
-
-- Tipos primitivos `string`, `boolean`, `bigint` e `null`
-- Objetos simples com chaves `string` e valores serializáveis
-- Arrays de valores serializáveis
-- `Uint8Array`
-- Elementos JSX (SOMENTE como props.children)
-- Sinais do Preact (se o valor do sinal for serializável)
-- A maioria dos números (`Infinity`, `-Infinity` e `NaN` são convertidos para
- `null`)
-
-Objetos complexos como `Date`, funções e classes personalizadas não são aceitos
-como props de islands.
-
-## Utilizando signals no lugar de state
-
-O `useState` exige que se trabalhe com uma função a parte para a atualização de
-valor. Preact, e outros sistemas, oferecem
-[`Signals`](https://preactjs.com/guide/v10/signals/) para tratamento de estado
-até do `useState`. Um `signal` tem uma referência que tem valor mas que também
-tem um atributo `.value` que permite atualizar esse valor.
-
-Dentro de um componente, caso o estado seja só usado localmente, é possível
-fazer uso do hook `useSignal` para criar esses elementos que podem ser utilizado
-no corpo da função ou no próprio JSX retornado, como no exemplo abaixo.
-
-```tsx
-import { useSignal } from "@preact/signals";
-
-export default function Counter() {
- const count = useSignal(0);
-
- return (
-
- count.value--}>
- -
-
- {count}
- count.value++}>
- +
-
-
- );
-}
-```
-
-## Compartilhando estado entre as islands
-
-No desenvolvimento normal do Preact, o compartilhamento de estado entre
-componentes geralmente é feito por meio da API
-[Context](https://preactjs.com/guide/v10/context/). Isso funciona bem para um
-aplicativo de lado do cliente completo. No entanto, como estamos usando a
-arquitetura de islands, compartilhar estado entre as islands requer uma nova
-abordagem.
-
-Os signals são uma ótima maneira de compartilhar estado entre as islands, pois é
-possível publicar e se inscrever em eventos de alteração em uma API concisa.
-
-Para usar signals, importe:
-
-```tsx
-import { signal } from "@preact/signals";
-```
-
-Agora, use o escopo global para criar, modificar e se inscrever em um signal:
-
-```tsx
-import { signal } from "@preact/signals";
-
-const count = signal(0);
-
-// Leia o valor de um signal acessando .value:
-console.log(count.value); // 0
-
-// Atualize o valor de um signal:
-count.value += 1;
-
-// O valor do signal foi alterado:
-console.log(count.value); // 1
-```
-
-Para definir efeitos colaterais em mudanças de signal, use as operações
-`effect`, `batch`, `computed` ou `useComputed`. Consulte a
-[documentação dos signals](https://preactjs.com/guide/v10/signals/) para obter
-mais detalhes. Além disso, dê uma olhada em
-[compartilhando estado entre islands](https://fresh.deno.dev/docs/examples/sharing-state-between-islands).
-
-> Observe que o compartilhamento de estado por meio da API `Context` NÃO
-> funcionará, pois o contexto estará fora das islands e, portanto, só estará
-> disponível no servidor.
-
-## Considerações e dicas
-
-Ao transformar um componente em uma island, pelo menos o tamanho dele em bytes
-será duplicado. O servidor renderiza o HTML para esse elemento e o envia para o
-navegador, mas também envia basicamente o mesmo HTML mais o JS a ser injetado no
-lado do cliente. Portanto, tente criar apenas as islands necessárias, pois elas
-tornam o processo de renderização mais intensivo em
-
-Leitura complementar:
-
-- [Introduction to the Islands architecture - EN](https://deno.com/blog/intro-to-islands)
diff --git a/docs/developing-capabilities/loaders/en.md b/docs/developing-capabilities/loaders/en.md
deleted file mode 100644
index adcbdc30..00000000
--- a/docs/developing-capabilities/loaders/en.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-description: A Loader in deco.cx is a function that returns data needed for a Site.
-since: 1.0.0
----
-
-A **Loader** in _deco.cx_ is a Typescript function that returns data typically
-needed in a [Section](/docs/en/concepts/section). These functions are executed
-before page renders, and their main purpose is to **fetch data from external
-sources**, transform it if necessary, and **provide it to the site Sections that
-need it.** Loaders can be used to fetch data from APIs, databases, or any other
-external source. They live locally on the `/loaders/` folder of your project,
-but it's also possible to
-[Installing apps](/docs/en/getting-started/installing-an-app) that contain
-loaders.
-
-
-
-In addition to fetching data, Loaders in _deco.cx_ **can also export a
-Typescript Props type,** which allows them to be configured in the
-[Admin](https://deco.cx/admin) just like [Sections](/docs/en/concepts/section).
-This means that business users can configure details about how the Loader will
-operate, such as **setting up filters or passing parameters to APIs.** By making
-Loaders configurable in this way, it becomes easier to manage the data flowing
-into Sections and ensure that the Site is displaying the right information to
-visitors.
-
-One other great benefit of Loaders in _deco.cx_ is that **multiple loaders can
-return the same data type**. This allows [Sections](/docs/en/concepts/section)
-that receive, for example, an array of canonical Product to get data from
-different Loaders, depending on the user's configuration. This means that UIs
-can be reused across [Sites](/docs/en/concepts/site) or across teams, making it
-easier to manage and scale your project.
-
-> All Sections for ecommerce stores created by _deco.cx_ in the
-> [Storefront](https://github.com/deco-sites/storefront) start use a canonical
-> Product type, and also every Loader that connects to ecommerce providers's
-> APIs. This means that you can reuse the same UI to show data from different
-> places, depending on the configuration.
-
- => {
- const { storefront } = ctx;
-
- const count = props.count ?? 12;
- const query = props.query || "";
-
- const data = await storefront.query<
- ListProductsQuery,
- ListProductsQueryVariables
- >({
- variables: { first: count, query },
- ...ListProducts,
- });
-
- // Transform Shopify product format into schema.org's compatible format
- // If a property is missing from the final `products` array you can add
- // it in here
- const products = data?.products.nodes.map((p) =>
- toProduct(p, p.variants.nodes[0], new URL(_req.url))
- );
-
- return products ?? [];
-};
-
-export default loader;
-```
-
-[Source](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/shopify/loaders/ProductList.ts#L1)
-
-## Recommended Reading
-
-- [Fetching data from APIs](/docs/en/developing-guide/fetching-data)
-- [Client-side function invocation](/docs/en/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/developing-capabilities/loaders/pt.md b/docs/developing-capabilities/loaders/pt.md
deleted file mode 100644
index 2a795f27..00000000
--- a/docs/developing-capabilities/loaders/pt.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-description: Um Loader na deco.cx é uma função que retorna os dados necessários para um Site.
-since: 1.0.0
----
-
-Um **Loader** em _deco.cx_ é uma função Typescript que retorna tipicamente os
-dados necessários em uma [Section](/docs/pt/concepts/section). Essas funções são
-executadas antes da renderização de cada página e seu principal objetivo é
-**buscar dados de fontes externas**, transformá-los se necessário e
-**fornecê-los às Seções do site que precisam.** Os Loaders podem ser usados para
-buscar dados de APIs, bancos de dados ou qualquer outra fonte externa. As
-implementações locais de Loaders vivem na pasta `/loaders` do seu projeto, porém
-é possível [Instalar novas apps](/docs/pt/getting-started/installing-an-app) que
-contém outros loaders.
-
-Além de buscar dados, os Loaders na _deco.cx_ **também podem exportar um tipo de
-Props Typescript**, o que permite que sejam configurados no
-[Admin](https://deco.cx/admin) assim como as
-[Sections](/docs/pt/concepts/section). Isso significa que os usuários de negócio
-podem configurar detalhes sobre como o Loader irá operar, como **configurar
-filtros** ou **passar parâmetros para APIs.** Ao tornar os Loaders configuráveis
-dessa maneira, fica mais fácil gerenciar os dados que fluem para as Sections e
-garantir que o Site esteja exibindo as informações corretas para os visitantes.
-
-Outro benefício dos Loaders na _deco.cx_ é que **vários loaders podem retornar o
-mesmo tipo de dados**. Isso permite que as [Sections](/docs/pt/concepts/section)
-que recebem, por exemplo, um _array_ de Produtos canônico obtenham dados de
-diferentes Loaders, dependendo da configuração do usuário. Isso significa que as
-UIs podem ser reutilizadas em [Sites](/docs/pt/concepts/site) ou entre times,
-facilitando o gerenciamento e a escala do seu projeto.
-
-> Todas as Sections para lojas de _ecommerce_ criadas por _deco.cx_ na
-> [Fashion](https://github.com/deco-sites/fashion) usam um tipo de Produt
-> canônico e também cada Loader que se conecta às APIs dos _ecommerce
-> providers_. Isso significa que você pode reutilizar a mesma UI para mostrar
-> dados de diferentes locais, dependendo da configuração.
-
- => {
- const { storefront } = ctx;
-
- const count = props.count ?? 12;
- const query = props.query || "";
-
- const data = await storefront.query<
- ListProductsQuery,
- ListProductsQueryVariables
- >({
- variables: { first: count, query },
- ...ListProducts,
- });
-
- // Transform Shopify product format into schema.org's compatible format
- // If a property is missing from the final `products` array you can add
- // it in here
- const products = data?.products.nodes.map((p) =>
- toProduct(p, p.variants.nodes[0], new URL(_req.url))
- );
-
- return products ?? [];
-};
-
-export default loader;
-```
-
-[Fonte](https://github.com/deco-cx/apps/blob/3e337b6b2996d7ecd72db34174896638c92f8811/shopify/loaders/ProductList.ts#L1)
-
-## Leitura recomendada
-
-- [Buscando dados de API](/docs/pt/develping/fetching-data)
-- [Invocando um loader através da API](/docs/pt/developing-capabilities/islands/fetching-data-client)
diff --git a/docs/developing-capabilities/manage-block-access/en.md b/docs/developing-capabilities/manage-block-access/en.md
deleted file mode 100644
index b44b1ccc..00000000
--- a/docs/developing-capabilities/manage-block-access/en.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-since: 1.109.0
----
-
-# Managing Loader/Action Access
-
-By default, all loaders and actions in deco.cx are publicly accessible. However, you may need to restrict access to certain loaders/actions that handle sensitive operations or private APIs. This guide explains how to control loader/action visibility.
-
-## Visibility Options
-
-There are two visibility levels available:
-
-- `private`: Can only be invoked server-side through `ctx.invoke`
-- `public`: Can be called from both server and client through:
- - Runtime `invoke` calls
- - Direct path access via `/live/invoke/{path/to/block.ts}`
-
-## Setting Default Visibility
-
-To set the visibility level for a loader/action, export a `defaultVisibility` variable:
-
-```typescript
-// Make the loader publicly accessible
-export const defaultVisibility = 'public'
-
-// Make the loader private (server-side only)
-export const defaultVisibility = 'private'
-```
-
-## Overriding Visibility
-
-You can override the default visibility settings in your `fresh.config.ts` file using the `visibilityOverrides` option:
-
-```typescript
-import { defineConfig } from "$fresh/server.ts";
-import { plugins } from "deco/plugins/deco.ts";
-import manifest from "./manifest.gen.ts";
-
-export default defineConfig({
- plugins: plugins({
- manifest,
- htmx: true,
- visibilityOverrides: {
- "site/loaders/minicart.ts": "public",
- "vtex/loaders/cart.ts": "private"
- },
- }),
-});
-```
-
-## Security Best Practices
-
-When deciding visibility levels:
-
-### Use `private` for
-
-- Accessing private/internal APIs
-- Operations involving credentials or secrets
-- Processing sensitive user/business data
-- Backend integrations requiring authentication
-
-### Use `public` for
-
-- Reading public product data
-- Fetching public content
-- Client-side data loading
-- User-facing operations that don't expose sensitive data
-
-## Related Documentation
-
-- [Fetching Data](/docs/en/developing-guide/fetching-data)
-- [Client-side Data Loading](/docs/en/developing-capabilities/islands/fetching-data-client)
-- [Core Concepts: Loaders](/docs/en/concepts/loader)
diff --git a/docs/developing-capabilities/manage-block-access/pt.md b/docs/developing-capabilities/manage-block-access/pt.md
deleted file mode 100644
index 62b108ef..00000000
--- a/docs/developing-capabilities/manage-block-access/pt.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-since: 1.109.0
----
-
-# Gerenciando Acesso de Loaders/Actions
-
-Por padrão, todos os loaders e actions no deco.cx são publicamente acessíveis. No entanto, você pode precisar restringir o acesso a certos loaders/actions que lidam com operações sensíveis ou APIs privadas. Este guia explica como controlar a visibilidade de loaders/actions.
-
-## Opções de Visibilidade
-
-Existem dois níveis de visibilidade disponíveis:
-
-- `private`: Pode ser invocado apenas no lado do servidor através do `ctx.invoke`
-- `public`: Pode ser chamado tanto do servidor quanto do cliente através de:
- - Chamadas `invoke` em tempo de execução
- - Acesso direto via path `/live/invoke/{path/to/block.ts}`
-
-## Definindo Visibilidade Padrão
-
-Para definir o nível de visibilidade de um loader/action, exporte uma variável `defaultVisibility`:
-
-```typescript
-// Torna o loader publicamente acessível
-export const defaultVisibility = 'public'
-
-// Torna o loader privado (apenas lado do servidor)
-export const defaultVisibility = 'private'
-```
-
-## Sobrescrevendo Visibilidade
-
-Você pode sobrescrever as configurações de visibilidade padrão no seu arquivo `fresh.config.ts` usando a opção `visibilityOverrides`:
-
-```typescript
-import { defineConfig } from "$fresh/server.ts";
-import { plugins } from "deco/plugins/deco.ts";
-import manifest from "./manifest.gen.ts";
-
-export default defineConfig({
- plugins: plugins({
- manifest,
- htmx: true,
- visibilityOverrides: {
- "site/loaders/minicart.ts": "public",
- "vtex/loaders/cart.ts": "private"
- },
- }),
-});
-```
-
-## Boas Práticas de Segurança
-
-Ao decidir os níveis de visibilidade:
-
-### Use `private` para
-
-- Acessar APIs privadas/internas
-- Operações envolvendo credenciais ou segredos
-- Processamento de dados sensíveis de usuários/negócios
-- Integrações backend que requerem autenticação
-
-### Use `public` para
-
-- Leitura de dados públicos de produtos
-- Busca de conteúdo público
-- Carregamento de dados no lado do cliente
-- Operações voltadas ao usuário que não expõem dados sensíveis
-
-## Documentação Relacionada
-
-- [Buscando Dados](/docs/pt/developing-guide/fetching-data)
-- [Carregamento de Dados no Cliente](/docs/pt/developing-capabilities/islands/fetching-data-client)
-- [Conceitos Principais: Loaders](/docs/pt/concepts/loader)
diff --git a/docs/developing-capabilities/modifying-status/en.md b/docs/developing-capabilities/modifying-status/en.md
deleted file mode 100644
index bb9338d7..00000000
--- a/docs/developing-capabilities/modifying-status/en.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-description: Modifying the return status of a page
-since: 1.0.0
----
-
-## Overview
-
-Modifying the return status allows you to correctly inform the browser of the
-return being sent on the page based on any desired criteria. This ensures better
-indexing by search engines since, for example, a page not found with the correct
-status will not be indexed by them.
-
-## Implementation
-
-To modify the return status of a page from a section, follow these simple steps:
-
-1. Create an inline loader within your section component.
-
-```tsx
-export default function MyComponent(props: Props) {
- // Your component logic goes here
- // ...
-}
-
-export const loader = (props: Props, req: Request, ctx: AppContext) => {
- // Your condition for status modification here
- if (YOUR_CONDITION_TO_MODIFY_STATUS) {
- ctx.response.status = DESIRED_STATUS;
- }
-
- // Return the component props
- return props;
-};
-```
-
-2. Within the `loader` function, define the condition that determines whether
- the status should be modified. If the condition is met, assign the desired
- status to the response contained in the context.
-
-## Example
-
-Let’s say you want your page to return `404 (Not Found)` if your search returns
-no elements:
-
-```tsx
-export default function MyComponent(props: Props) {
- // Your component logic goes here
- // ...
-}
-
-export const loader = (props: Props, req: Request, ctx: AppContext) => {
- // Check if there are no elements
- if (!props.items || !props.items.length) {
- ctx.response.status = 404;
- }
-
- // Return the component props
- return props;
-};
-```
-
-In this example, if the `items` property does not exist or does not contain any
-elements, the section will modify the return status of the entire page to `404`.
-
-## Remember
-
-- The section will modify the status of every page it is on if its condition is
- satisfied.
-- Use correct status codes for each situation so that your SEO is not negatively
- affected.
diff --git a/docs/developing-capabilities/modifying-status/pt.md b/docs/developing-capabilities/modifying-status/pt.md
deleted file mode 100644
index 7e6daefd..00000000
--- a/docs/developing-capabilities/modifying-status/pt.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-description: Modificando o status de retorno de uma pagina
-since: 1.0.0
----
-
-## Visão Geral
-
-A modificação do status de retorno permite que você informe ao navegador de
-forma correta qual o retorno que esta sendo enviado na pagina com base em
-qualquer criterio desejado. Isso garante uma melhor indexação por mecanismos de
-pesquisa uma vez que, por exemplo, uma pagina não encontrada com status correto
-não será indexada por eles.
-
-## Implementação
-
-Para modificar o status de retorno de uma pagina a partir de uma seção, siga
-estes passos simples:
-
-1. Crie um carregador inline dentro do componente da sua seção.
-
-```tsx
-export default function MyComponent(props: Props) {
- // Sua lógica de componente vai aqui
- // ...
-}
-
-export const loader = (props: Props, req: Request, ctx: AppContext) => {
- // Sua condição para a modificação de status
- if (SUA_CONDICAO_PARA_MODIFICAR_O_STATUS) {
- ctx.response.status = STATUS_DESEJADO;
- }
-
- // Retorne as props do componente
- return props;
-};
-```
-
-2. Dentro da função `loader`, defina a condição que determina se o status deve
- ser modificado. Se a condição for atendida, atribua o status desejado a
- resposta contida no contexto.
-
-## Exemplo
-
-Digamos que você deseje que se sua busca não retornou nenhum elemento o retorno
-da pagina seja `404 (Not Found)`:
-
-```tsx
-export default function MyComponent(props: Props) {
- // Sua lógica de componente vai aqui
- // ...
-}
-
-export const loader = (props: Props, req: Request, ctx: AppContext) => {
- // Verifique se não há nenhum elemento
- if (!props.items || !props.items.length) {
- ctx.response.status = 404;
- }
-
- // Retorne as props do componente
- return props;
-};
-```
-
-Neste exemplo, se a propriedade `items` não existir ou não conter nenhum
-elemento a seção modificará o status de retorno de toda a pagina para `404`
-
-## Lembre-se
-
-- A seção modificará o status de toda pagina em que estiver sendo chamada e que
- a condição for satisfeita.
-- Use os codigos de status correto para cada situação para seu SEO não ser
- afetado negativamente.
diff --git a/docs/developing-capabilities/section-properties/annotations/en.md b/docs/developing-capabilities/section-properties/annotations/en.md
deleted file mode 100644
index 26c68a99..00000000
--- a/docs/developing-capabilities/section-properties/annotations/en.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-description: Customize the behavior of the Deco Admin form with annotations on its properties.
----
-
-Customize the behavior of the [Deco Admin](https://admin.deco.cx) form with
-annotations on its properties.
-
-When using native types (number, string, etc.), the editor will use the property
-name as the default form label. However, it's possible to customize this by
-using [JSDoc](https://jsdoc.app/) tags.
-
-- Example:
-
-```ts
-export interface Props {
- /** @title Number of products */
- /** @description Total number of products to display in the storefront */
- count: number;
-}
-```
-
-- Editor:
-
-`, etc..
-
-_Example:_
-
-- Section configuration in a _deco.cx_'s Site.
-
-```tsx
-interface Props {
- title: string;
-}
-
-export default function LatestPosts({ title }: Props) {
- return (
-
-
{title}
-
This is an example section
-
`, etc.
-
-_Exemplo:_
-
-- Configuração de Section em um site _deco.cx_.
-
-```tsx
-interface Props {
- título: string;
-}
-
-export default function LatestPosts({ title }: Props) {
- return (
-
-
{title}
-
Esta é uma Section de exemplo
-
- `;
-```
-
-`mystore/loaders/icons.ts`
-
-```ts
-import { allowCorsFor, FnContext } from "deco/mod.ts";
-// Import icons in string format
-import { AlignCenter, AlignLeft, AlignRight } from "../static/adminIcons.ts";
-
-// Define icons with their labels and corresponding props as defined on your Props interface
-const icons = [
- { component: AlignLeft, label: "Left", prop: "textAlignment" },
- { component: AlignCenter, label: "Center", prop: "textAlignment" },
- { component: AlignRight, label: "Right", prop: "textAlignment" },
-];
-
-// Loader function to map icons to the format expected by the Button Group widget
-export default function IconsLoader(
- _props: unknown,
- req: Request,
- ctx: FnContext,
-) {
- Object.entries(allowCorsFor(req)).map(([name, value]) => {
- ctx.response.headers.set(name, value);
- });
-
- const iconsMap = icons.map((icon) => ({
- value: icon.component,
- label: icon.label,
- prop: icon.prop,
- }));
-
- return iconsMap;
-}
-```
-
-## Icon Select
-
-The Icon Select widget enables you to create a select input for icons, where
-each option consists of both an icon and its label. This allows users to preview
-and choose the right icon easily. All icons rendered in the widget must be
-defined explicitly as SVG strings.
-
-
- `;
-```
-
-`mystore/loaders/icons.ts`
-
-```ts
-import { allowCorsFor, FnContext } from "deco/mod.ts";
-// Importe ícones em formato de string
-import { AlignCenter, AlignLeft, AlignRight } from "../static/adminIcons.ts";
-
-// Defina ícones com seus labels e props correspondentes conforme definido na sua interface Props
-const icons = [
- { component: AlignLeft, label: "Left", prop: "textAlignment" },
- { component: AlignCenter, label: "Center", prop: "textAlignment" },
- { component: AlignRight, label: "Right", prop: "textAlignment" },
-];
-
-// Loader para mapear ícones para o formato esperado pelo widget Button Group
-export default function IconsLoader(
- _props: unknown,
- req: Request,
- ctx: FnContext,
-) {
- Object.entries(allowCorsFor(req)).map(([name, value]) => {
- ctx.response.headers.set(name, value);
- });
-
- const iconsMap = icons.map((icon) => ({
- value: icon.component,
- label: icon.label,
- prop: icon.prop,
- }));
-
- return iconsMap;
-}
-```
-
-## Icon Select
-
-O widget Icon Select permite criar um seletor de entrada para ícones, onde cada
-opção consiste em um ícone e sua etiqueta. Isso permite aos usuários visualizar
-e escolher facilmente o ícone certo. Todos os ícones renderizados no widget
-devem ser definidos explicitamente como strings SVG.
-
-
-
- );
-}
-```
-
-3. Inside your section component, access the `Component` and `props` properties
- from the `myProp` prop. The `Component` property represents the component
- function of the section passed as a parameter, and the `props` property
- contains the props of that section.
-
-## Example
-
-Let's say you have a section called `ProductCardSection` that renders a product
-card based on certain props:
-
-```tsx
-// ProductCardSection.tsx
-
-export interface Props {
- title: string;
- price: number;
- imageUrl: string;
-}
-
-export default function ProductCardSection({ title, price, imageUrl }: Props) {
- return (
-
-
-
{title}
-
{price}
-
-
- );
-}
-```
-
-With this setup, you can now use `ProductContainerSection` to wrap any other
-section, including the `ProductCardSection`, and add a container around it.
-
-Now, let's say you want restrict your section to `ProductCard` because you have
-a lot of sections in your site but only that one should fit in that place, you
-can do the following:
-
-```tsx
-// ProductCardSection.tsx
-
-import { JSX } from "preact";
-
-// Define a named type, for example, "ProductCard," pointing to `JSX.Element`
-export type ProductCard = JSX.Element;
-
-// Define the props interface
-export interface Props {
- title: string;
- price: number;
- imageUrl: string;
-}
-
-// Implement the section and specify the return type as "ProductCard"
-export default function ProductCardSection(
- { title, price, imageUrl }: Props,
-): ProductCard {
- return (
-
-
-
{title}
-
{price}
-
`
-export interface Props {
- myProp: Section;
-}
-
-// Implement the section
-export default function ProductContainerSection(
- { myProp: { Component, props } }: Props,
-) {
- return (
-
-
- );
-}
-```
-
-This ensures consistency and reinforces the concept of a named type, making it
-easier for developers to and business users constrain their sections as they
-wish!
-
-## Note
-
-With the ability to accept other sections as parameters, you can create highly
-modular and customizable sections that adapt to different use cases and make
-your Live.ts applications even more powerful and flexible. Happy coding! 🧩🚀
diff --git a/docs/developing-capabilities/sections/accept-a-section/pt.md b/docs/developing-capabilities/sections/accept-a-section/pt.md
deleted file mode 100644
index 8b1f110d..00000000
--- a/docs/developing-capabilities/sections/accept-a-section/pt.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-description: Aceitando Outras Seções como Parâmetros em Sua Seção
-since: 1.0.0
----
-
-# Aceitando Outras Seções como Parâmetros em Sua Seção
-
-No deco, você pode criar [Seções](/docs/pt-br/concepts/section) poderosas e
-flexíveis ao aceitar outras seções como parâmetros. Isso permite que você
-construa componentes modulares e componíveis que podem ser facilmente
-personalizados e reutilizados em diferentes contextos.
-
-## Visão Geral
-
-Ao criar uma Seção que aceita outras seções como parâmetros, você define uma
-interface para as props do seu componente de Seção. Essa interface inclui uma
-propriedade com o nome da sua escolha, que é do tipo `Section`. O tipo `Section`
-é um tipo genérico que representa qualquer outra seção no deco.
-
-## Implementação
-
-Para criar uma Seção que aceita outras Seções como parâmetros, siga estas
-etapas:
-
-1. Importe o tipo `Section` de `deco/blocks/section.ts`.
-
-2. Defina uma interface para as props do seu componente de seção. Inclua uma
- propriedade com nome de sua escolha, que é do tipo `Section`.
-
-```tsx
-// MySection.tsx
-
-import { Section } from "deco/blocks/section.ts";
-
-export interface Props {
- myProp: Section;
-}
-
-export default function MySection({ myProp: { Component, props } }: Props) {
- return (
-
-
- );
-}
-```
-
-3. Dentro do seu componente de seção, acesse as propriedades `Component` e
- `props` da prop `myProp`. A propriedade `Component` representa a função do
- componente da seção passada como parâmetro, e a propriedade `props` contém as
- props dessa seção.
-
-## Exemplo
-
-Digamos que você tenha uma seção chamada `ProductCardSection` que renderiza um
-cartão de produto com base em algumas props:
-
-```tsx
-// ProductCardSection.tsx
-
-export interface Props {
- title: string;
- price: number;
- imageUrl: string;
-}
-
-export default function ProductCardSection({ title, price, imageUrl }: Props) {
- return (
-
-
-
{title}
-
{price}
-
-
- );
-}
-```
-
-Com essa configuração, agora você pode usar `ProductContainerSection` para
-envolver qualquer outra seção, incluindo `ProductCardSection`, e adicionar um
-contêiner ao redor dela.
-
-Agora, suponha que você queira restringir sua seção a `ProductCard` porque tem
-muitas seções em seu site, mas apenas essa deve se encaixar nesse local, você
-pode fazer o seguinte:
-
-```tsx
-// ProductCardSection.tsx
-
-import { JSX } from "preact";
-
-// Defina um tipo nomeado, por exemplo, "ProductCard," apontando para `JSX.Element`
-export type ProductCard = JSX.Element;
-
-// Defina a interface de props
-export interface Props {
- title: string;
- price: number;
- imageUrl: string;
-}
-
-// Implemente a seção e especifique o tipo de retorno como "ProductCard"
-export default function ProductCardSection(
- { title, price, imageUrl }: Props,
-): ProductCard {
- return (
-
-
-
{title}
-
{price}
-
`
-export interface Props {
- myProp: Section;
-}
-
-// Implemente a seção
-export default function ProductContainerSection(
- { myProp: { Component, props } }: Props,
-) {
- return (
-
-
- );
-}
-```
-
-Isso garante consistência e reforça o conceito de um tipo nomeado, tornando mais
-fácil para os desenvolvedores e usuários de negócios restringirem suas seções
-conforme desejado!
-
-## Nota
-
-Com a capacidade de aceitar outras seções como parâmetros, você pode criar
-seções altamente modulares e personalizáveis que se adaptam a diferentes casos
-de uso e tornam suas aplicações deco ainda mais poderosas e flexíveis. Boa
-codificação! 🧩🚀
diff --git a/docs/developing-capabilities/sections/en.md b/docs/developing-capabilities/sections/en.md
deleted file mode 100644
index 7e9b721b..00000000
--- a/docs/developing-capabilities/sections/en.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-description: |
- A Section represents a configurable UI element for a deco.cx site.
----
-
-Sections are **UI components built with [Preact](https://preactjs.com/)** that
-can receive props configured by users on _deco.cx_'s Admin. The Section local
-implementations live on the `sections/` folder in the Site's code, but it's also
-possible to [Install Apps](/docs/en/getting-started/installing-an-app).
-
-Some examples of Sections for an ecommerce store would be:
-
-- **ProductShelf.tsx:** displays a product shelf with image, title and price.
-- **Header.tsx:** displays the standard header of the store, containing logo,
- menu categories and links for cart and login.
-- **Banner.tsx:** displays image, text and some _Call to action_ for campaign or
- specific department.
-
-## Interactivity
-
-Note that Sections run on the **server-side only**, so state and lifecycle such
-as `useState`, `useEffect` and callbacks such as `onClick`, `onInput` will not
-work. In order for those to work, you'll need to use
-[interactive Islands](https://fresh.deno.dev/docs/concepts/islands)
-
-In _deco.cx_'s Admin, it's possible to interact with Sections in two places:
-
-- **Library:** Allows developers to configure the properties of Sections and
- automatically see the generated UI. (Works similar to
- [Storybook](https://storybook.js.org/))
-- **Pages:** Allows Section to be added to Page on the site, also being
- configurable.
-
-## Further reading
-
-- [Tutorial: Coding a new Section](/docs/en/developing-guide/hello-world)
-- [Developing: Editable sections](/docs/en/developing-guide/editable-sections)
diff --git a/docs/developing-capabilities/sections/error-fallback/en.md b/docs/developing-capabilities/sections/error-fallback/en.md
deleted file mode 100644
index 599f548b..00000000
--- a/docs/developing-capabilities/sections/error-fallback/en.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-description: Adding error fallback for sections
-since: 1.54.0
----
-
-# Error Fallback
-
-## Overview
-
-Error fallbacks are a powerful concept available to be used since 1.54.0
-version, to handle errors that occur during the rendering of components. They
-allow you to gracefully handle errors and prevent the entire application from
-crashing due to an unhandled error.
-
-In deco, creating an error fallback is as simple as exporting a component
-function named `ErrorFallback` that takes an object with the `error` property.
-The `error` property holds the error object that was thrown by the component.
-
-The pre-requisites to make your component work is having the following
-dependencies in versions higher or equal than below:
-
-```json
-{
- "imports": {
- "deco/": "https://denopkg.com/deco-cx/deco@1.54.0/",
- "$fresh/": "https://denopkg.com/deco-cx/fresh@1.3.2/",
- "preact": "https://esm.sh/preact@10.16.0",
- "preact/": "https://esm.sh/preact@10.16.0/",
- "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.0",
- "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
- "@preact/signals-core": "https://esm.sh/@preact/signals-core@1.3.0"
- }
-}
-```
-
-## Example: Creating an Error Fallback
-
-To create an error fallback, you can follow these steps:
-
-- Pick your selected Section (e.g `ProductShelf.tsx`)
-- Export a function named `ErrorFallback`, the function should accept an object
- with the `error` property.
-
-```tsx
-// ProductShelf.tsx
-export interface Props {
- myProp: string;
-}
-
-export function ErrorFallback({ error }: { error?: Error }) {
- // Your error handling logic goes here
- // You can display an error message, log the error, or render a fallback UI
- return (
-
-
Oops! Something went wrong.
-
{error.message}
-
-
Oops! Algo deu errado.
-
{error.message}
-
-
loading...
-
- );
-}
-
-export default function ProductShelf(props: Props) {
- ...
-}
-```
-
-If `ProductShelf` uses a data coming from a slow third party API, the
-`LoadingFallback` component will be rendered instead. If no loading fallback is
-set, a default fallback will be rendered instead
diff --git a/docs/developing-capabilities/sections/loading-fallback/pt.md b/docs/developing-capabilities/sections/loading-fallback/pt.md
deleted file mode 100644
index 20455025..00000000
--- a/docs/developing-capabilities/sections/loading-fallback/pt.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-description: Adição de fallback de carregamento para seções
-since: 1.54.0
----
-
-# Fallback de Carregamento
-
-## Visão Geral
-
-Os fallbacks de carregamento são um conceito poderoso disponível para uso desde
-a versão 1.54.0, para lidar com o estado de carregamento de seções usando dados
-de APIs de terceiros. Eles permitem que você lide graciosamente com estados de
-carregamento e evite que toda a aplicação pare devido a alguma API de terceiros.
-
-No deco, criar um fallback de carregamento é tão simples quanto exportar uma
-função de componente chamada `LoadingFallback`.
-
-Os pré-requisitos para fazer com que seu componente funcione são ter as
-seguintes dependências em versões iguais ou superiores às listadas abaixo:
-
-```json
-{
- "imports": {
- "deco/": "https://denopkg.com/deco-cx/deco@1.54.0/",
- "$fresh/": "https://denopkg.com/deco-cx/fresh@1.3.2/",
- "preact": "https://esm.sh/preact@10.16.0",
- "preact/": "https://esm.sh/preact@10.16.0/",
- "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.0",
- "@preact/signals": "https://esm.sh/*@preact/signals@1.1.3",
- "@preact/signals-core": "https://esm.sh/@preact/signals-core@1.3.0"
- }
-}
-```
-
-## Exemplo: Criando um Fallback de Carregamento
-
-Para criar um fallback de carregamento, você pode seguir estes passos:
-
-- Escolha sua Seção selecionada (por exemplo, `ProductShelf.tsx`)
-- Exporte uma função chamada `LoadingFallback`.
-
-```tsx
-// ProductShelf.tsx
-export interface Props {
- myProp: string;
-}
-
-export function LoadingFallback() {
- // Renderize spinners, esqueletos e outros espaços reservados
- return (
-
-
carregando...
-
- );
-}
-
-export default function ProductShelf(props: Props) {
- ...
-}
-```
-
-Se `ProductShelf` usar dados provenientes de uma API de terceiros lenta, o
-componente `LoadingFallback` será renderizado em seu lugar. Se nenhum fallback
-de carregamento for definido, um fallback padrão será renderizado em seu lugar.
diff --git a/docs/developing-capabilities/sections/pt.md b/docs/developing-capabilities/sections/pt.md
deleted file mode 100644
index c3b349e5..00000000
--- a/docs/developing-capabilities/sections/pt.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-description: Uma Section representa um elemento de UI configurável para um Site deco.cx.
----
-
-As Sections são **componentes de UI criados com
-[Preact](https://preactjs.com/)** que pode receber `props` configuradas por
-usuários no Admin da _deco.cx_. As implementações locais de Section vivem na
-pasta `sections/` no código do Site, porém é possível
-[Instalar novas apps](/docs/pt/getting-started/installing-an-app).
-
-Alguns exemplos de Section para uma loja de ecomemerce seriam:
-
-- **ProductShelf.tsx:** exibe uma prateleira com imagem, título e preço.
-- **Header.tsx:** exibe o cabeçalho padrão da loja, contendo logotipo,
- categorias de menu e links para carrinho e login.
-- **Banner.tsx:** exibe imagem, texto e alguns _Call to action_ para campanha ou
- departamento específico.
-
-## Interatividade
-
-Observe que as seções são executadas **somente no lado do servidor**, portanto,
-gerenciamento de estado e ciclo de vida como `useState`, `useEffect` e callbacks
-como `onClick`, `onInput` não irão funcionar. Para que funcionem, você precisará
-usar [Islands](https://fresh.deno.dev/docs/concepts/islands).
-
-No Admin da _deco.cx_ é possível interagir com as Sections em dois locais:
-
-- **Library:** permite que desenvolvedores configurem as propriedades das
- Section e visualizaem automaticamente a UI renderizada. (Funciona semelhante
- ao [Storybook](https://storybook.js.org/))
-- **Pages:** Permite que a Section seja adicionada à Pages no Site, sendo também
- configuráveis por lá.
-
-## Leitura adicional
-
-- [Tutorial: Codificando uma nova seção](/docs/en/developing-guide/hello-world)
-- [Desenvolvendo: Seções personalizáveis](/docs/en/developing-guide/editable-sections)
diff --git a/docs/developing-capabilities/sections/redirecting-users/en.md b/docs/developing-capabilities/sections/redirecting-users/en.md
deleted file mode 100644
index d662eb5f..00000000
--- a/docs/developing-capabilities/sections/redirecting-users/en.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-description: Accepting Other Sections as Parameters in Your Section
-since: 1.0.0
----
-
-# Making Redirects in Sections
-
-Redirects in sections allow you to efficiently direct users to different pages
-based on certain conditions, providing a smooth and seamless navigation
-experience. With Live.ts, you can easily implement redirects using inline
-loaders and the `redirect` function from the `deco/mod.ts` module.
-
-## Overview
-
-Redirects enable you to short-circuit the entire rendering phase, bypassing the
-need for unnecessary content generation when a redirection is necessary. They
-are especially useful when you want to guide users to specific pages based on
-certain criteria, such as user authentication, geolocation, or any other custom
-condition.
-
-## Implementation
-
-To create a redirect in a section, follow these simple steps:
-
-1. Create an inline loader within your section component, and import the
- `redirect` function from the `deco/mod.ts` module.
-
-```tsx
-import { redirect } from "deco/mod.ts";
-
-export default function MyComponent(props: Props) {
- // Your component logic goes here
- // ...
-}
-
-export const loader = (props: Props, req: Request) => {
- // Your redirect condition here
- if (YOUR_CONDITION_TO_REDIRECT_USER) {
- const url = new URL(req.url);
- url.pathname = "/your_path_to_redirect"; // Update this with your desired redirect path
- redirect(url.toString()); // You can also use the full URL from anywhere
- }
-
- // Return the component props
- return props;
-};
-```
-
-2. Inside the `loader` function, define the condition that determines whether
- the redirect should be triggered. If the condition is met, construct the new
- URL using the `URL` class, and specify the path you want to redirect to.
-
-3. Finally, call the `redirect` function with the newly constructed URL. This
- will instantly direct the user to the specified page without further
- rendering.
-
-Please note that you need to return something (in this case, the `props`) in the
-`loader` function, even if you are using a redirect. This is to ensure that the
-function behaves as expected and satisfies the TypeScript compiler requirements.
-
-## Example
-
-Let's say you want to redirect users to a login page if they are not
-authenticated:
-
-```tsx
-import { redirect } from "deco/mod.ts";
-
-export default function MyComponent(props: Props) {
- // Your component logic goes here
- // ...
-}
-
-export const loader = (props: Props, req: Request) => {
- // Check if the user is not authenticated
- if (!props.isAuthenticated) {
- const url = new URL(req.url);
- url.pathname = "/login"; // Redirect to the login page
- redirect(url.toString());
- }
-
- // Return the component props
- return props;
-};
-```
-
-In this example, if the user is not authenticated, they will be redirected to
-the login page. Otherwise, the component will proceed to render as usual.
-
-## Remember
-
-- Use redirects judiciously and only when necessary to ensure a smooth user
- experience.
-- Always test your redirects thoroughly to ensure they behave as expected.
-- Keep your redirects organized and maintainable to avoid any unintended
- behaviors.
-
-With redirects in sections, you have the power to guide users seamlessly through
-your applications based on specific conditions. Happy redirecting! 🚀🔀
diff --git a/docs/developing-capabilities/sections/redirecting-users/pt.md b/docs/developing-capabilities/sections/redirecting-users/pt.md
deleted file mode 100644
index b5731640..00000000
--- a/docs/developing-capabilities/sections/redirecting-users/pt.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-description: Redirecionando usuários a partir de uma Seção
-since: 1.0.0
----
-
-# Realizando Redirecionamentos em Seções
-
-Os redirecionamentos em seções permitem que você direcione eficientemente os
-usuários para diferentes páginas com base em determinadas condições,
-proporcionando uma experiência de navegação suave e contínua. Com o Live.ts,
-você pode implementar facilmente redirecionamentos usando carregadores inline e
-a função `redirect` do módulo `deco/mod.ts`.
-
-## Visão Geral
-
-Os redirecionamentos permitem que você evite a fase inteira de renderização,
-contornando a necessidade de geração desnecessária de conteúdo quando um
-redirecionamento é necessário. Eles são especialmente úteis quando você deseja
-guiar os usuários para páginas específicas com base em determinados critérios,
-como autenticação do usuário, geolocalização ou qualquer outra condição
-personalizada.
-
-## Implementação
-
-Para criar um redirecionamento em uma seção, siga estes passos simples:
-
-1. Crie um carregador inline dentro do componente da sua seção e importe a
- função `redirect` do módulo `deco/mod.ts`.
-
-```tsx
-import { redirect } from "deco/mod.ts";
-
-export default function MyComponent(props: Props) {
- // Sua lógica de componente vai aqui
- // ...
-}
-
-export const loader = (props: Props, req: Request) => {
- // Sua condição de redirecionamento aqui
- if (SUA_CONDICAO_PARA_REDIRECIONAR_USUARIO) {
- const url = new URL(req.url);
- url.pathname = "/seu_caminho_de_redirecionamento"; // Atualize isso com o caminho de redirecionamento desejado
- redirect(url.toString()); // Você também pode usar a URL completa de qualquer lugar
- }
-
- // Retorne as props do componente
- return props;
-};
-```
-
-2. Dentro da função `loader`, defina a condição que determina se o
- redirecionamento deve ser acionado. Se a condição for atendida, construa a
- nova URL usando a classe `URL` e especifique o caminho para o qual você
- deseja redirecionar.
-
-3. Por fim, chame a função `redirect` com a URL recém-criada. Isso direcionará
- instantaneamente o usuário para a página especificada sem a necessidade de
- renderização adicional.
-
-Observe que você precisa retornar algo (neste caso, as `props`) na função
-`loader`, mesmo se estiver usando um redirecionamento. Isso é para garantir que
-a função se comporte conforme o esperado e atenda aos requisitos do compilador
-TypeScript.
-
-## Exemplo
-
-Digamos que você deseje redirecionar os usuários para uma página de login caso
-eles não estejam autenticados:
-
-```tsx
-import { redirect } from "deco/mod.ts";
-
-export default function MyComponent(props: Props) {
- // Sua lógica de componente vai aqui
- // ...
-}
-
-export const loader = (props: Props, req: Request) => {
- // Verifique se o usuário não está autenticado
- if (!props.isAuthenticated) {
- const url = new URL(req.url);
- url.pathname = "/login"; // Redirecionar para a página de login
- redirect(url.toString());
- }
-
- // Retorne as props do componente
- return props;
-};
-```
-
-Neste exemplo, se o usuário não estiver autenticado, ele será redirecionado para
-a página de login. Caso contrário, o componente continuará sendo renderizado
-normalmente.
-
-## Lembre-se
-
-- Use redirecionamentos com cuidado e apenas quando necessário para garantir uma
- experiência de usuário suave.
-- Sempre teste seus redirecionamentos cuidadosamente para garantir que eles se
- comportem conforme o esperado.
-- Mantenha seus redirecionamentos organizados e fáceis de manter para evitar
- comportamentos indesejados.
-
-Com redirecionamentos em seções, você tem o poder de guiar os usuários de forma
-perfeita em suas aplicações Live.ts com base em condições específicas. Boa
-navegação! 🚀🔀
diff --git a/docs/developing-guide/creating-loaders/en.md b/docs/developing-guide/creating-loaders/en.md
deleted file mode 100644
index d3e00e06..00000000
--- a/docs/developing-guide/creating-loaders/en.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-description: Creating loaders
----
-
-Now that you have learned more about loaders and how they can be used along with
-a section, let's create a loader that can be used from different sections.
-
-## 1. Creating a Loader
-
-To do this, we will create a loader separate from the section, in the `loaders/`
-folder of your project.
-
-Create the file `DogFactsLoader.ts` in the `loaders/` folder of your project. It
-will have the same logic as the loader we have created in the previous tutorial,
-but we have to remember to define the Props interface and export the loader as
-default.
-
-```tsx
-export type DogFacts = string[];
-
-export interface Props {
- numberOfFacts?: number;
-}
-
-async function loader(
- { numberOfFacts = 1 }: Props,
- _req: Request,
-): Promise {
- const { facts } = await fetch(
- `https://dogapi.dog/api/facts?number=${numberOfFacts ?? 1}`,
- ).then((r) => r.json());
-
- return facts;
-}
-
-export default loader;
-```
-
-## 2. Using the Loader in a Section
-
-Now that we have created the loader, we can use it in a section. The important
-thing to note here is that one of the props of the section should match the
-return type of the loader.
-
-Modify the `DogFacts.tsx` file in the `sections/` folder of your project.
-
-```tsx
-import type { DogFacts } from "../loaders/dogFacts.ts";
-
-// Props type that will be configured in deco.cx's Admin
-export interface Props {
- title: string;
- dogFacts?: DogFacts;
-}
-
-export default function DogFactsSection(
- { title, dogFacts }: Props,
-) {
- return (
-
-
{title}
-
- {dogFacts?.map((fact) => {fact} )}
-
-
{
- const { facts } = await fetch(
- `https://dogapi.dog/api/facts?number=${numberOfFacts ?? 1}`,
- ).then((r) => r.json());
-
- return facts;
-}
-
-export default loader;
-```
-
-## 2. Usando o Loader em uma Seção
-
-Agora que criamos o loader, podemos usá-lo em uma seção. O importante aqui é que
-uma das props da seção deve corresponder ao tipo de retorno do loader.
-
-Modifique o arquivo `DogFacts.tsx` na pasta `sections/` do seu projeto.
-
-```tsx
-import type { DogFacts } from "../loaders/DogFactsLoader.ts";
-
-// Tipo de Props que será configurado no Admin do deco.cx
-export interface Props {
- title: string;
- dogFacts?: DogFacts;
-}
-
-export default function DogFactsSection(
- { title, dogFacts }: Props,
-) {
- return (
-
-
{title}
-
- {dogFacts?.map((fact) => {fact} )}
-
-
{
-
- const form = await req.formData(); // Gets the data from the database
- const email = `${form.get("email") ?? ""}`;
-
- if (!email) {
- console.log("Email is empty");
- return { ...props, submissionResponse: { email: "" } };
- }
-
- const drizzle = await ctx.invoke("records/loaders/drizzle.ts"); // Loads drizzle to interact with the database
-
- try {
- const recs = await drizzle // Checks if the email is already registered in the database
- .select({ email: newsletter.email })
- .from(newsletter)
- .where(eq(newsletter.email, email));
-
- if (recs.length) {
- return {
- ...props,
- submissionResponse: { error: "Email already exists.", email },
- };
- }
-
- const confirmationKey = crypto.randomUUID(); // Generates a unique confirmation key for verification
-
- await drizzle.insert(newsletter).values({ // Inserts the new newsletter record into the database
- email,
- confirmed_at: null,
- confirmation_Key: confirmationKey,
- });
-
-
- await ctx.invoke("resend/actions/emails/send.ts", {
- subject: `Personal Blog - Confirm your subscription`,
- from: no-reply@blog.owner
- html: `Thanks for subscribing! here to confirm your subscription.`,
- to: email,
- });
-
- return { ...props, submissionResponse: { email: "" } };
- } catch (e) {
- console.log(e);
- ctx.monitoring?.logger?.error(e);
- return {
- ...props, submissionResponse: { error: "System error", email },
- };
- }
- }
-
- export function loader(props: Props) {
- return props;
- }
- ```
-
- And in the form, it contains the use of HTMX to make the request
- asynchronously and update only the necessary section.
-
- ```tsx
- ;
- ```
-
-2. `newsletterConfirmation.tsx`: Section to be included on the `/confirm` page
- of the site so that users can confirm the subscription and receive positive
- feedback. The main use of this section was the use of the loader to process
- the data:
-
- ```tsx
- export const loader = async (
- props: Props,
- req: Request,
- ctx: AppContext & RecordsApp,
- ) => {
- const url = new URL(req.url);
-
- const reallyQs = url.searchParams.get("really");
-
- if (!reallyQs) {
- return props;
- }
-
- const confirmationKey = url.searchParams.get("key");
-
- if (!confirmationKey) {
- return { ...props, error: "No confirmation key." };
- }
-
- const drizzle = await ctx.invoke("records/loaders/drizzle.ts");
-
- await drizzle
- .update(newsletter)
- .set({
- confirmed_at: new Date().toISOString(),
- confirmation_key: null,
- })
- .where(eq(newsletter.confirmation_key, confirmationKey ?? ""));
-
- return { ...props, really: true };
- };
- ```
-
-## Conclusion
-
-This tutorial demonstrates how to implement a newsletter subscription system
-using deco.cx tools, Deco Records, and Resend. The presented solution offers a
-complete flow, from capturing the user's email to confirming the subscription,
-ensuring data integrity and user experience. The use of modern technologies such
-as HTMX and Drizzle ORM provides an efficient and easy-to-maintain
-implementation. This system can be easily adapted and expanded to meet the
-specific needs of different web projects.
diff --git a/docs/developing-guide/examples/pt.md b/docs/developing-guide/examples/pt.md
deleted file mode 100644
index 48ec6d01..00000000
--- a/docs/developing-guide/examples/pt.md
+++ /dev/null
@@ -1,173 +0,0 @@
----
-
-description: Newsletter com HTMX e Deco Records\
-since: 1.0.0
-
----
-
-## Principais ferramentas
-
-- Deco.cx como hospedagem e CMS.
-- Deco Records como banco de dados SQLite, utilizando o
- [Drizzle ORM](https://orm.drizzle.team/)
-- App da Resend para envio de e-mails de confirmação. API de envio de e-mails
- que oferece um plano gratuito de 3.000 e-mails por mês.
-
-## Configurações necessárias
-
-1. Criar um site na [deco.cx](https://deco.cx/new)
-2. Configurar o [Deco Records](https://deco.cx/docs/en/reference/deco-records)
-
-> Para esse tutorial, criamos uma tabela "newsletter" com as colunas `id`,
-> `email`, `confirmed_at`, `confirmation_key`.
-
-3. Instalar a app da Resend no menu "Apps", configurando a API Key. Ao instalar
- a app Resend na deco, você encontrará instruções de como fazer isso.
-
-## Criando as sections utilizadas
-
-Duas sections foram utilizadas nesse tutorial:
-
-1. `newsletterSubsbribe.tsx`: Formulário de inscrição na Newsletter (campo de
- e-mail) + [action](https://deco.cx/docs/pt/concepts/action) inline que
- realiza o processo de inclusão do e-mail no banco de dados e envio do e-mail
- usando a app da Resend. Principais componentes da section:
-
- ```tsx
- export async function action(
- props: Props,
- req: Request,
- ctx: AppContext & RecordsApp & ResendApp,
- ): Promise {
-
- const form = await req.formData(); // Obtém os dados do banco de dados
- const email = `${form.get("email") ?? ""}`;
-
- if (!email) {
- console.log("Email is empty");
- return { ...props, submissionResponse: { email: "" } };
- }
-
- const drizzle = await ctx.invoke("records/loaders/drizzle.ts"); // Carrega o drizzle para interagir com o banco de dados
-
- try {
- const recs = await drizzle // Verifica se o email já está registrado no banco de dados
- .select({ email: newsletter.email })
- .from(newsletter)
- .where(eq(newsletter.email, email));
-
- if (recs.length) {
- return {
- ...props,
- submissionResponse: { error: "Email already exists.", email },
- };
- }
-
- const confirmationKey = crypto.randomUUID(); // Gera uma chave de confirmação única para a verificação
-
- await drizzle.insert(newsletter).values({ // Insere o novo registro de newsletter no banco de dados
- email,
- confirmed_at: null,
- confirmation_Key: confirmationKey,
- });
-
-
- await ctx.invoke("resend/actions/emails/send.ts", {
- subject: `Personal Blog - Confirm your subscription`,
- from: no-reply@blog.owner
- html: `Thanks for subscribing! here to confirm your subscription.`,
- to: email,
- });
-
- return { ...props, submissionResponse: { email: "" } };
-
- } catch (e) {
- console.log(e);
- ctx.monitoring?.logger?.error(e);
- return {
- ...props, submissionResponse: { error: "System error", email },
- };
- }
- }
-
- export function loader(props: Props) {
- return props;
- }
- ```
-
- E no formulário contém a utilização do HTMX para realizar a requisição de
- forma assíncrona e atualizar apenas a seção necessária.
-
- ```tsx
- ;
- ```
-
-2. `newsletterConfirmation.tsx`: Section a ser incluída na página `/confirm` do
- site para que os usuários possam confirmar a inscrição e receber um feedback
- positivo. O principal uso dessa section foi a utilização do loader para
- processar os dados:
-
- ```tsx
- export const loader = async (
- props: Props,
- req: Request,
- ctx: AppContext & RecordsApp,
- ) => {
- const url = new URL(req.url);
-
- const reallyQs = url.searchParams.get("really");
-
- if (!reallyQs) {
- return props;
- }
-
- const confirmationKey = url.searchParams.get("key");
-
- if (!confirmationKey) {
- return { ...props, error: "No confirmation key." };
- }
-
- const drizzle = await ctx.invoke("records/loaders/drizzle.ts");
-
- await drizzle
- .update(newsletter)
- .set({
- confirmed_at: new Date().toISOString(),
- confirmation_key: null,
- })
- .where(eq(newsletter.confirmation_key, confirmationKey ?? ""));
-
- return { ...props, really: true };
- };
- ```
-
-## Conclusão
-
-Este tutorial demonstra como implementar um sistema de inscrição em newsletter
-utilizando as ferramentas deco.cx, Deco Records e Resend. A solução apresentada
-oferece um fluxo completo, desde a captura do e-mail do usuário até a
-confirmação da inscrição, garantindo a integridade dos dados e a experiência do
-usuário. A utilização de tecnologias modernas como HTMX e Drizzle ORM
-proporciona uma implementação eficiente e de fácil manutenção. Este sistema pode
-ser facilmente adaptado e expandido para atender às necessidades específicas de
-diferentes projetos web.
diff --git a/docs/developing-guide/fetching-data/en.md b/docs/developing-guide/fetching-data/en.md
deleted file mode 100644
index 021b7cf5..00000000
--- a/docs/developing-guide/fetching-data/en.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-description: Learn how to load data with deco.cx using Loaders and Sections, allowing business users to customize data fetching.
-since: 1.0.0
----
-
-Fetching data is a common requirement when building websites or applications.
-_deco.cx_ provides a data-fetching solution that loads data **on the
-server-side** and is flexible enough to allow business users to customize how
-data is fetched, just how they can configure Section's `props`.
-
-In this tutorial you'll learn how to fetch data from an external API and feed
-that into a Section using [Loaders](/docs/en/concepts/loader).
-
-## What we'll build
-
-The example use-case we'll follow is simple, but it has a lot of complexities we
-have on data fetching:
-
-- Fetch dog facts data from the [Dog API](https://dogapi.dog/) **allowing the
- user to configure how many facts are being fetched** on _deco.cx_'s Admin.
-- Render those facts in a Section.
-
-
-
{title}
-
- {dogFacts.map((fact) => {fact} )}
-
-
,
-) {
- return (
-
-
{title}
-
- {dogFacts.map((fact) => {fact} )}
-
-
-
{title}
-
- {dogFacts.map((fact) => {fact} )}
-
-
,
-) {
- return (
-
-
{title}
-
- {dogFacts.map((fact) => {fact} )}
-
-
-
{title}
-
This is an example section
-
- {photo && (
-
- )}
-
{title}
-
Published at: {datetime}
-
This is an example section
-
{post}
-
- {photo && (
-
- )}
-
{title}
-
Published at: {datetime}
-
This is an example section
-
{post}
-
-
{title}
-
This is an example section
-
- {photo && (
-
- )}
-
{title}
-
Published at: {datetime}
-
This is an example section
-
{post}
-
- {photo && (
-
- )}
-
{title}
-
Published at: {datetime}
-
This is an example section
-
{post}
-
- setCount(count - 1)}
- >
- -
-
- {count}
- setCount(count + 1)}
- >
- +
-
-
- );
-}
-```
-
-Here, we are using Preact's `useState` hook to manage the counter state and the
-`onClick` event to update the counter when the buttons are clicked.
-
-## Step 3: Making the HTMX version of the Counter
-
-In the HTMX version, we will no longer use the `useState` hook or the `onClick`
-event. When using HTMX, we need to have one route for each UI state of the site,
-so we will make a request to the server to update the counter state.
-
-That's when the [`useSection` hook](/docs/en/api-reference/use-section) comes in
-handy. This hook automatically creates routes for rendering your UI states
-without requiring developers to handle routing manually.
-
-Let's see what changes in the HTMX version:
-
-```tsx
-import { useSection } from "deco/hooks/useSection.ts";
-
-export default function Section({ count = 0 }: { count: number }) {
- return (
-
-
- -
-
- {count}
-
- +
-
-
- );
-}
-```
-
-To update the state as mentioned before, we are using the hx-get attribute with
-the useSection hook. The hx-get attribute makes a GET request to the URL
-returned by the useSection hook. The response is new HTML with the updated UI
-state of the counter. The hx-target attribute defines the target element where
-the response will be inserted, in this case, the closest section element to the
-button. The hx-swap attribute defines how the response will be inserted, in this
-case, replacing the entire section element with the response.
-
-To illustrate the difference between the Preact and HTMX versions, let's use
-them both and see how they behave in the network tab of the browser's developer
-tools.
-
-While the Preact version updates the counter state locally, the HTMX version
-makes a request to the server to update the counter state.
-
-
-
-
-
-## Conclusion
-
-HTMX is a powerful tool that can simplify the process of adding interactivity to
-your web applications. By using HTMX, you can reduce the amount of JavaScript
-you need to write and maintain, making your codebase cleaner and more
-manageable.
-
-For more information, check out the [HTMX documentation](https://htmx.org/docs/)
-and [deco.cx documentation](https://deco.cx/docs/).
diff --git a/docs/developing-guide/htmx/pt.md b/docs/developing-guide/htmx/pt.md
deleted file mode 100644
index 45bb1805..00000000
--- a/docs/developing-guide/htmx/pt.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-description: Interatividade com HTMX
-since: 1.0.0
----
-
-Este tutorial vai te guiar na integração do HTMX ao seu projeto deco, permitindo
-maior interatividade com o mínimo de JavaScript. Vamos criar um contador como
-exemplo para ver como deco.cx integra com HTMX.
-
-## O que é o HTMX?
-
-HTMX permite acessar recursos modernos do navegador diretamente do HTML,
-facilitando a construção de aplicações web interativas com menos JavaScript.
-
-## Passo 1: Adicionando HTMX ao Seu Projeto
-
-Primeiro, você precisa incluir a biblioteca HTMX no seu projeto. Você pode fazer
-isso adicionando a seguinte tag de script ao seu HTML:
-
-```html
-
-```
-
-## Passo 2: Criando a Versão Preact do Contador
-
-Vamos criar um componente Preact para o contador e ver a diferença para a versão
-com HTMX:
-
-```tsx
-import { useState } from "preact/hooks";
-
-export default function Section() {
- const [count, setCount] = useState(0);
-
- return (
-
- setCount(count - 1)}
- >
- -
-
- {count}
- setCount(count + 1)}
- >
- +
-
-
- );
-}
-```
-
-Aqui, estamos usando o hook `useState` do Preact para gerenciar o estado do
-contador e o evento `onClick` para atualizar o contador quando os botões são
-clicados.
-
-## Passo 3: Criando a Versão HTMX do Contador
-
-Na versão HTMX, não usaremos mais o hook `useState` nem o evento `onClick`. Ao
-usar HTMX, precisamos de uma rota para cada estado da UI, então faremos uma
-solicitação ao servidor para atualizar o estado do contador.
-
-É aí que o [hook `useSection`](/docs/pt/api-reference/use-section) é útil. Este
-hook cria automaticamente rotas para renderizar seus estados de UI sem exigir
-que os desenvolvedores lidem manualmente com o roteamento.
-
-Vamos ver o que muda na versão HTMX:
-
-```tsx
-import { useSection } from "deco/hooks/useSection.ts";
-
-export default function Section({ count = 0 }: { count: number }) {
- return (
-
-
- -
-
- {count}
-
- +
-
-
- );
-}
-```
-
-Para atualizar o estado, como mencionado antes, estamos usando `hx-get` com o
-hook `useSection`. O atributo `hx-get` faz uma solicitação GET para a URL
-retornada pelo hook `useSection`. A resposta é um novo HTML com o novo estado da
-UI do contador. O atributo `hx-target` define o elemento alvo onde a resposta
-será inserida, neste caso, a seção mais próxima do botão. O atributo `hx-swap`
-define como a resposta será inserida, neste caso, substituindo todo o elemento
-da seção pela resposta.
-
-Para ilustrar a diferença entre as versões Preact e HTMX, vamos usá-las e ver
-como se comportam na aba de Network das ferramentas de desenvolvedor do
-navegador.
-
-Enquanto a versão Preact atualiza o estado do contador localmente, a versão HTMX
-faz uma requisição ao servidor para atualizar o estado do contador.
-
-
-
-
-
-## Conclusão
-
-HTMX é uma ferramenta poderosa que pode simplificar o processo de adicionar
-interatividade às suas aplicações web. Usando HTMX, você pode reduzir a
-quantidade de JavaScript que precisa escrever e manter, tornando seu código mais
-limpo e gerenciável.
-
-Para mais informações, confira a [documentação do HTMX](https://htmx.org/docs/)
-e a [documentação do deco.cx](https://deco.cx/docs/).
diff --git a/docs/developing-guide/setup/en.md b/docs/developing-guide/setup/en.md
deleted file mode 100644
index 7d212efb..00000000
--- a/docs/developing-guide/setup/en.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-description: Environment setup.
-since: 1.0.0
----
-
-- Read the guide in **Getting Started** to understand the basic concepts and the
- deco admin tool.
-
-- **Important**, you can access [our Discord](https://deco.cx/discord) to ask
- questions or report issues with _deco.cx_. Join our community too!
-
-## Summary
-
-1. Technology stack
-2. Start developing
-3. Developing with deco
-
-## Technology stack
-
-When creating a website or online store with _deco.cx_, users have the
-flexibility to create [Sections](/docs/en/concepts/section) and
-[Loaders](/docs/en/concepts/loader) that meet their unique needs. To help you
-easily and quickly create these components, we rely on a set of powerful and
-efficient technologies.
-
-Our technology stack is focused on **simplicity and performance**, making it
-accessible to developers with previous experience in HTML, CSS, JavaScript, and
-React. These are the main tools we use to power deco.cx sites:
-
-### [Preact](https://preactjs.com/)
-
-**Preact** is a fast and lightweight alternative to
-[React.js](https://reactjs.org/), used for rendering UI components on the server
-and client. It uses _JSX_ to create web components and is generally
-straightforward to learn.
-
-### [Tailwind](https://tailwindcss.com)
-
-**Tailwind** is a CSS styling solution based on utility classes, making it ideal
-for beginners. Tailwind is also optimized for performance.
-
-### [Deno](https://deno.com/deploy)
-
-**Deno** is a JavaScript and TypeScript runtime environment. It is used to build
-deco sites written in TypeScript and executed by a server. Deno is similar to
-Node.js (_fun fact_: they were
-[created by the same person](https://www.youtube.com/watch?v=M3BM9TB-8yA)).
-
-### [Fresh](https://fresh.deno.dev)
-
-**Fresh** is a full-stack web framework for JavaScript and TypeScript
-developers. It is designed to make it easy to create high-quality,
-high-performance, and highly customizable web applications.
-
-## Start developing
-
-### Required Tools
-
-The only setup required to code _deco.cx_ sites is to **install Deno** on your
-machine. To install Deno, follow the
-[instructions on the deno.land page](https://deno.land/manual/getting_started/installation).
-
-> Make sure to keep Deno up-to-date! If you already have Deno installed, run
-> `deno upgrade` to update it.
-
-We highly recommend using
-[Visual Studio Code](https://code.visualstudio.com/download) as the IDE and
-[Git](https://github.com/git-guides/install-git) as the version control tool.
-
-### 1. Create a Deco Site
-
-Follow the steps in the
-[Creating a Site tutorial](/docs/en/getting-started/creating-a-site).
-
-### 2. Clone Your Site Repository
-
-Accept the invitation to join the repository created for your site. This
-invitation is sent to the email address associated with your GitHub profile.
-
-If you haven't used a GitHub account to log into the admin panel or haven't
-received an invitation, you can add a GitHub account as a collaborator to the
-site in the Settings tab.
-
-
-
-Use the `git clone` command to download the site code to your machine. We
-recommend using SSH. Open the terminal and execute the following command:
-
-```bash
-git clone git@github.com:deco-sites/{site-name}.git
-```
-
-**Remember to replace `site-name` with the name of your site.**
-
-Alternatively, you can clone the repository using other methods, such as _git
-https_, the _GitHub_ tool, or an IDE. The repository page on _GitHub_ provides
-details about different ways to clone.
-
-### 3. Run Local Server
-
-To run your site locally, edit, and see the changes in the Admin, you need to
-have a local environment (an environment with `localhost` as the host). To do
-this, you can use the default `localhost` environment or create a new one.
-
-#### 3.1 Create new environment
-
-Open the Releases tab in the Admin and click on the New environment button.
-
-
-
-#### 3.2 Set a name and a host to your environment
-
-Choose a name for your environment and set your host as localhost.
-
-
-
-#### 3.3 Run your site locally
-
-Copy the command shown after you create your environment and paste it into your
-terminal in the site folder.
-
-
-
-
-
-Wait for the project to initialize. On the first run, Deno will download and
-cache the project dependencies, and Deco will prepare the site details.
-
-The site will be accessible at
-`https://{environment-name}--{site-name}.deco.site`.
-
-
-
-If the code of any section used on the site's homepage is modified, it will be
-reflected at the above address.
-
-#### 3.4 Publishing Changes
-
-Considering that you chose the Deco Hosting to deploy your site, the development
-deployment process is very simple: do a git push of the changes to the main
-branch.
-
-Alternativaly, publish your local environment in the Admin by clicking on the
-Publish now button in your environment page.
-
-
-
-## Start Creating Sites Your Way! :)
-
-Keep exploring Deco to understand its potential and learn how to create or
-modify sections, loaders, and other elements to build increasingly personalized
-sites and experiences.
-
-Be sure to join our [Discord community](https://deco.cx/discord). Stay updated
-with the latest news and keep evolving with us!
diff --git a/docs/developing-guide/setup/pt.md b/docs/developing-guide/setup/pt.md
deleted file mode 100644
index 6d2fce33..00000000
--- a/docs/developing-guide/setup/pt.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-description: Configuração do ambiente.
-since: 1.0.0
----
-
-- Leia o guia em **Comece agora** para entender os conceitos base e a ferramenta
- de admin da deco
-
-- **Importante**, é possível acessar [nosso Discord](https://deco.cx/discord)
- para reportar dúvidas ou problemas com a _deco.cx_. Participe também da nossa
- comunidade!
-
-## Tópicos
-
-1. Tecnologias utilizadas na deco
-2. Comece a desenvolver com a deco
-3. Desenvolvendo com a deco
-
-## Tecnologias utilizadas na deco
-
-Ao criar um site ou loja online com a _deco.cx_, o usuário tem a flexibilidade
-de criar [Sections](/docs/pt/concepts/section) e
-[Loaders](/docs/pt/concepts/loader) que atendem às suas necessidades exclusivas.
-Para ajudá-la a criar esses componentes com facilidade e rapidez, contamos com
-um conjunto de tecnologias poderosas e eficientes.
-
-Nossa pilha de tecnologia é focada em **simplicidade e desempenho**, tornando-a
-acessível a desenvolvedores com experiência anterior em HTML, CSS, JavaScript e
-React. Estas são as principais ferramentas que usamos para alimentar os sites
-deco.cx:
-
-### [Preact](https://preactjs.com/)
-
-**Preact** é uma alternativa rápida e leve ao [React.js](https://reactjs.org/),
-usado para renderizar componentes de UI no servidor e no cliente. Ele usa _JSX_
-para criar componentes da web e geralmente é bem simples de aprender.
-
-### [Tailwind](https://tailwindcss.com)
-
-**Tailwind** é uma solução de estilos CSS baseada em classes utilitárias, o que
-o torna ideal para iniciantes. O Tailwind também é otimizado para performance.
-
-### [Deno](https://deno.com/deploy)
-
-O **Deno** é um ambiente de execução JavaScript e TypeScript. É usado para fazer
-Sites na deco, escritos em Typescript, executados por um servidor. Deno é
-semelhante a Node.js (_curiosidade_: eles foram
-[criados pela mesma pessoa](https://www.youtube.com/watch?v=M3BM9TB-8yA)).
-
-### [Fresh](https://fresh.deno.dev)
-
-O **Fresh** é um framework web fullstack (backend e frontend) para
-desenvolvedores JavaScript e TypeScript. Foi projetado para tornar fácil a
-criação de aplicações web de alta qualidade, alta performance e altamente
-personalizáveis.
-
-## Comece a desenvolver com a deco
-
-### Ferramentas necessárias
-
-A única configuração necessária para codificar sites _deco.cx_ é **instalar o
-Deno** em sua máquina. Para instalar o Deno, siga as
-[instruções na página deno.land](https://deno.land/manual/getting_started/installation).
-
-> Certifique-se de manter o deno atualizado! Caso já tenha o deno instalado,
-> rode o `deno upgrade` para atualizá-lo.
-
-Recomendamos fortemente o uso do
-[Visual Studio Code](https://code.visualstudio.com/download) como IDE e do
-[Git](https://github.com/git-guides/install-git) para controle de versão.
-
-
-
-### 1. Crie um site deco.cx
-
-Siga o tutorial de
-[Criar um Site Deco](/docs/pt/getting-started/creating-a-site).
-
-### 2. Clone o repositório do seu site
-
-Aceite o convite para se juntar ao repositório criado para o seu Site. Esse
-convite é enviado para o endereço de e-mail do seu perfil do Github.
-
-Caso não tenha utilizado uma conta do github para entrar no admin ou caso não
-tenha recebido um convite, é possível adicionar uma conta do github como
-colaborador do Site na aba Configurações do site no Admin.
-
-
-
-
-
-Use o comando `git clone` para baixar o código do site para o seu máquina.
-Recomendamos o uso de SSH. Abra o terminal e execute o comando:
-
-```bash
-git clone git@github.com:deco-sites/site-name.git
-```
-
-**Lembre-se de alterar `site-name` para o nome do seu site.**
-
-Se preferir, é possível clonar o repositório usando outros métodos, como _git
-https_, por meio da ferramenta _Github_ ou através de uma IDE. Na página do
-repositório no _Github_ há detalhes sobre algumas diferentes maneiras para fazer
-o clone.
-
-### 3. Executar servidor local
-
-Para rodar seu site localmente, editar e ver as mudanças no Admin, você precisa
-ter um ambiente local (um ambiente com `localhost` como host). Para isso, você
-pode usar o ambiente `localhost` criado por padrão ou criar um novo.
-
-#### 3.1 Crie um novo ambiente
-
-Abra a aba de Releases e clique no botão Novo ambiente no Admin.
-
-
-
-#### 3.2 Defina o nome e o host do seu ambiente
-
-Escolha um nome para o seu ambiente e defina seu host como localhost.
-
-
-
-#### 3.3 Execute seu site localmente
-
-Copie o comando mostrado depois da criação do ambiente e cole-o no seu terminal
-na pasta do site.
-
-
-
-
-
-Aguarde a inicialização do projeto. Na primeira execução, o deno irá baixar e
-realizar um cache das dependências do projeto, e a deco irá preparar detalhes do
-site.
-
-O site estará acessível em https://{nome-do-ambiente}--{nome-do-site}.deco.site.
-
-
-
-Caso o código de alguma seção em uso na página inicial do site seja alterado,
-isto será refletido no endereço acima.
-
-#### 3.4 Publicando alterações
-
-Considerando que você escolheu o Deco Hosting para o deploy de seu site, o
-processo de _deploy_ em development é muito simples: apenas fazer um _git push_
-das alterações na _branch_ _**main**_.
-
-Você também pode publicar seu ambiente no próprio Admin clicando no botão de
-Publicar agora, na página do seu ambiente.
-
-
-
-## Agora você pode começar a criar sites cada vez mais do seu jeito! :)
-
-Continue estando a deco para entender o potencial e como criar ou alterar
-sections, loaders e outros elementos da deco para criar sites e experiências
-cada vez ,mais personalizadas.
-
-Certifique-se de se juntar ao nosso
-[comunidade no Discord](https://deco.cx/discord). Acompanhe as novidades e
-continue evoluindo junto com a gente!
diff --git a/docs/getting-started/adding-an-app/en.md b/docs/getting-started/adding-an-app/en.md
deleted file mode 100644
index 3884833b..00000000
--- a/docs/getting-started/adding-an-app/en.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-description: Adding an App
-since: 1.33.2
----
-
-In this documentation, we will guide you through adding an `App` to your site.
-An `App` allows you to easily integrate new functionalities, sections, and
-features into your site.
-
-## 1. Access the Apps Page
-
-To add an app to your site, click on the Apps tab. You will see a list of all
-available apps. In this case, we will add the Weather App.
-
-## 2. Install the App
-
-Click on the switch button to install the app on your site.
-
-
-
-The Weather App provides a section that displays a message with the current
-temperature. Besides the section, this app also includes a loader, a TypeScript
-function that returns data typically needed in a Section. This specific loader
-retrieves the temperature of a given location (or the current location if no
-location is specified). Let's use both and see how they can be integrated.
-
-## 3. Use the App's Functionalities
-
-### 3.1 Go to the WhatsTheTemperature Section
-
-Navigate to the Sections Page and click on the WhatsTheTemperature Section. You
-can filter the list by the app.
-
-
-
-Open the section properties. The only property this section has is a
-temperature, which is a number representing the temperature in Celsius.
-
-### 3.2 Configure the Section to Use the App's Loader
-
-Click on the Temperature field to choose how you will provide the temperature
-information.
-
-
-
-You have three options:
-
-1. **Manual Entry**: Provide an arbitrary number for the temperature.
-
- 
-
-2. **Default Value**: Leave the temperature field blank. The section accepts a
- null value, and a default fixed temperature will be displayed.
-
- 
-
-3. **Use the Loader**: Utilize the loader made available by the Weather App.
-
- 
-
- If you do not provide latitude and longitude, the loader will fetch the
- temperature of your current location. Alternatively, providing the latitude
- and longitude of a specific place will return the current temperature for
- that location:
-
- 
-
- > Looks like it’s a bit cold in Greenland.
-
-## 4. Use the Section in Your Pages
-
-Now you can use the configured section in your site pages just like you did in
-[a previous tutorial](/docs/en/getting-started/creating-a-new-page). That's it!
-Enjoy exploring this and other apps on deco.cx!
diff --git a/docs/getting-started/adding-an-app/pt.md b/docs/getting-started/adding-an-app/pt.md
deleted file mode 100644
index 3c4a0698..00000000
--- a/docs/getting-started/adding-an-app/pt.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-description: Adicionando um App
----
-
-Nesta documentação, vamos te guiar na adição de um `App` ao seu site. Um `App`
-permite que você integre facilmente novas funcionalidades, seções e recursos ao
-seu site.
-
-## 1. Acessar a Página de Apps
-
-Para adicionar um app ao seu site, clique na aba Apps. Você verá uma lista de
-todos os apps disponíveis. Neste caso, vamos adicionar o Weather App.
-
-## 2. Instalar o App
-
-Clique no botão de switch para instalar o app no seu site.
-
-
-
-O Weather App fornece uma seção que exibe uma mensagem com a temperatura atual.
-Além da seção, este app também inclui um loader, uma função TypeScript que
-retorna dados tipicamente utilizados em Sections. Este loader específico obtém a
-temperatura de um local determinado (ou da localização atual se nenhum local for
-especificado). Vamos usar ambos e ver como podem ser integrados.
-
-## 3. Usar as Funcionalidades do App
-
-### 3.1 Vá para a Seção WhatsTheTemperature
-
-Navegue até a Página de Seções e clique na Seção WhatsTheTemperature. Você pode
-filtrar a lista pelo app.
-
-
-
-Abra as propriedades da seção. A única propriedade que esta seção possui é a
-temperatura, que é um número representando a temperatura em Celsius.
-
-### 3.2 Configure a Seção para Usar o Loader do App
-
-Clique no campo Temperatura para escolher como você vai fornecer a informação de
-temperatura.
-
-
-
-Você tem três opções:
-
-1. **Entrada Manual**: Forneça um número arbitrário para a temperatura.
-
- 
-
-2. **Valor Padrão**: Deixe o campo de temperatura em branco. A seção aceita um
- valor nulo, e uma temperatura fixa padrão será exibida.
-
- 
-
-3. **Usar o Loader**: Utilize o loader disponibilizado pelo Weather App.
-
- 
-
- Se você não fornecer latitude e longitude, o loader buscará a temperatura da
- sua localização atual. Alternativamente, fornecendo a latitude e a longitude
- de um local específico, será retornada a temperatura atual desse local:
-
- 
-
- > Parece que está um pouco frio na Groenlândia.
-
-## 4. Usar a Seção em Suas Páginas
-
-Agora você pode usar a seção configurada nas páginas do seu site, assim como fez
-em [um tutorial anterior](/docs/pt/getting-started/creating-a-new-page). É isso!
-Aproveite para explorar este e outros apps no deco.cx!
diff --git a/docs/getting-started/changes-and-publishing/en.md b/docs/getting-started/changes-and-publishing/en.md
deleted file mode 100644
index 91fe5b03..00000000
--- a/docs/getting-started/changes-and-publishing/en.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-description: Learn how to restore previous versions of your website
-since: 1.0.0
----
-
-It's very important to have control and autonomy to manage your pages and blocks
-and to have the ability to make and undo changes easily if needed. With that in
-mind, _deco.cx_ allows you to create and manage **environments**.
-
-## See Changes and Publish
-
-Let's take a look at the changes we made in this environment. Click the dropdown
-menu and then select the staging option. You will see this page, showing what
-was changed compared to the site in production. In our case, we added a new page
-with a few sections on it. This difference is displayed via JSON, which
-represents the site's state in a structured way.
-
-
-
-From here, you can publish our changes to production by clicking the "Publish
-now" button or the "Publish" button next to the environment dropdown.
-
-### Rebasing Your Changes
-
-When publishing with multiple environments, you may need to merge your changes
-with those made in other environments. For example, if you are editing your site
-in your new environment, `maria`, while a teammate is editing in the `staging`
-environment, and your teammate publishes their changes, you will need to rebase
-your environment to incorporate the new changes now in production.
-
-In this scenario, instead of seeing the "Publish now" button on the Releases
-page, you will see a "Rebase" button, as shown below.
-
-
-
-Click this button to incorporate the production changes into your environment.
-After rebasing, you can publish your changes by clicking the "Publish now"
-button.
diff --git a/docs/getting-started/changes-and-publishing/pt.md b/docs/getting-started/changes-and-publishing/pt.md
deleted file mode 100644
index c43c0b4f..00000000
--- a/docs/getting-started/changes-and-publishing/pt.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-description: Aprenda como restaurar versões anteriores do seu site
-since: 1.0.0
----
-
-É muito importante ter controle e autonomia para gerenciar suas páginas e blocos
-e ter a capacidade de fazer e desfazer alterações facilmente, se necessário. Com
-isso em mente, o _deco.cx_ permite que você crie e gerencie **ambientes**.
-
-## Ver Alterações e Publicar
-
-Vamos dar uma olhada nas mudanças que fizemos neste ambiente. Clique no dropdown
-e selecione a opção staging. Você verá esta página, mostrando o que foi alterado
-em comparação com o site em produção. No nosso caso, adicionamos uma nova página
-com algumas seções. Essa diferença é exibida via JSON, que representa o estado
-do site de forma estruturada.
-
-
-
-A partir daqui, você pode publicar nossas mudanças para a produção clicando no
-botão "Publicar agora" ou no botão "Publicar" ao lado do dropdown do ambiente.
-
-### Rebaseando suas Alterações
-
-Ao publicar com múltiplos ambientes, pode ser necessário mesclar suas alterações
-com as feitas em outros ambientes. Por exemplo, se você estiver editando seu
-site no seu novo ambiente, `maria`, enquanto um colega estiver editando no
-ambiente `staging`, e seu colega publicar suas mudanças, você precisará rebasear
-seu ambiente para incorporar as novas mudanças que agora estão em produção.
-
-Nesse cenário, em vez de ver o botão "Publicar agora" na página de Lançamentos,
-você verá um botão "Rebase", como mostrado abaixo.
-
-
-
-Clique neste botão para incorporar as mudanças de produção no seu ambiente.
-Depois de rebasear, você pode publicar suas alterações clicando no botão
-"Publicar agora".
diff --git a/docs/getting-started/creating-a-new-page/en.md b/docs/getting-started/creating-a-new-page/en.md
deleted file mode 100644
index c40624d5..00000000
--- a/docs/getting-started/creating-a-new-page/en.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-description: Create pages on deco.cx with no need to code
----
-
-Now we will create a new page to your site. The process is very simple:
-
-## 1. Access the Pages tab
-
-**Pages** have a dedicated space in deco.cx's Admin and you can access it via
-the side bar.
-
-
-
-On this page, you can see all the pages published on the site, along with the
-paths through which they are accessible to your users.
-
-Here you can click on the "Create new page" button to create a page.
-
-> Alternatively, you can click on the "Create page" button at the Site Home or
-> type `/new page` on the command bar located on the top center of the Admin
-> page.
-
-## 2. Give the page a name and a path
-
-Fill out the form with the following information:
-
-- **Name:** meaningful name to understand what that page represents. Doesn't
- impact page's UI or metadata.
-- **Path:** represents the URL which that page will be accesible to your users.
- It can be static (e.g: `/posts`) or dynamic (e.g: `/posts/:slug`,
- `/search/*`), following [URLPattern](http://mdn.io/urlpattern) schema.
-- **Template** (optional): copy a structure from a page that already exists.
-
-Here we will create a blank page.
-
-
-
-## 3. Edit the page content
-
-Now you can edit and add new components available on your site and set up the
-page just as you want it.
-
-To add a new component to the page, click on the Add Sections button in the
-editor and explore all the available options. Sections are UI components (small
-parts of the site) that can receive props and can be edited through a form in
-the Admin.
-
-
-
-> If you want to develop/code a new Section, check our
-> [Developing Guide](/docs/en/developing-guide/setup).
-
-Here, we will select the Hero section.
-
-
-
-After the selection, we can see the form where we can edit its properties. These
-properties are obtained from the TypeScript props of that section.
-
-
-
-> Note: The example you see above is of a reusable block, which is a global
-> resource that can be used by other pages. This is why you cannot edit this
-> section unless you detach it to change only on that page or edit it in a new
-> space (which will affect all pages that use it).
-
-Let's detach the section to edit its properties for that page. We will change
-the Title in the Title property. As you make changes, the preview will update in
-real-time to show you how the section will look with the new property values.
-
-
-
-Each component may have different properties that can be customized. These
-properties are defined in the code of the section and can be accessed through
-the props object.
diff --git a/docs/getting-started/creating-a-new-page/pt.md b/docs/getting-started/creating-a-new-page/pt.md
deleted file mode 100644
index 32798e24..00000000
--- a/docs/getting-started/creating-a-new-page/pt.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-description: Aprenda como criar páginas na deco.cx sem precisar de código
----
-
-Agora vamos criar uma nova página para o seu site. O processo é muito simples:
-
-## 1. Acesse a aba de Páginas
-
-Páginas têm um space dedicado no Admin do Deco.cx, acessível pela barra lateral.
-
-
-
-Nesta página, você pode ver todas as páginas publicadas no site, junto com os
-caminhos pelos quais elas são acessíveis aos seus usuários.
-
-Aqui você pode clicar no botão "Criar nova página" para criar uma página.
-
-> Alternativamente, você pode clicar no botão "Criar página" na Página Inicial
-> do Site ou digitar `/new page` na barra de comando localizada no topo central
-> da página do Admin.
-
-## 2. Dê um nome e um caminho à página
-
-Preencha o formulário de criação de página com as seguintes informações:
-
-- **Nome:** nome significativo para entender o que essa página representa. Não
- afeta a interface do usuário ou os metadados da página.
-- **Path:** representa a URL que aquela página estará acessível para seus
- usuários. Pode ser estático (por exemplo: `/posts`) ou dinâmico (por exemplo:
- `/posts/:slug`, `/search/*`), seguindo o esquema
- [URLPattern](http://mdn.io/urlpattern).
-- **Template** (opcional): selecione uma página já existente e comece a partir
- dela.
-
-Aqui, vamos criar uma página em branco.
-
-
-
-## 3. Edite o conteúdo da página
-
-Agora é possível editar e adicionar novas Sections disponíveis em seu site e
-configurar a página do jeito que você quiser.
-
-Para adicionar um novo componente à página, clique no botão "Adicionar Seções"
-no editor e explore todas as opções disponíveis. Seções são componentes de UI
-(pequenas partes do site) que podem receber propriedades e serem editadas
-através de um formulário no Admin.
-
-
-
-> Se você deseja desenvolver/codar uma nova seção, consulte nosso
-> [Guia de desenvolvimento](/docs/pt/developing-guide/setup).
-
-Vamos selecionar a seção Hero.
-
-
-
-Após a seleção, podemos ver o formulário onde podemos editar suas propriedades.
-Essas propriedades são obtidas a partir das props do TypeScript dessa seção.
-
-
-
-> Nota: O exemplo que você vê acima é de um bloco reutilizável, que é um recurso
-> global que pode ser usado por outras páginas. Por isso, você não pode editar
-> essa seção a menos que a desanexe para alterar apenas nessa página ou a edite
-> em um novo espaço (o que afetará todas as páginas que a utilizam).
-
-Vamos desanexar a seção para editar suas propriedades para essa página. Vamos
-mudar o Título na propriedade Title. À medida que você faz alterações, a
-pré-visualização será atualizada em tempo real para mostrar como a seção ficará
-com os novos valores de propriedade.
-
-
-
-Cada componente pode ter diferentes propriedades que podem ser personalizadas.
-Essas propriedades são definidas no código da seção e podem ser acessadas
-através do objeto props.
diff --git a/docs/getting-started/creating-a-site/en.md b/docs/getting-started/creating-a-site/en.md
deleted file mode 100644
index 072d6bc0..00000000
--- a/docs/getting-started/creating-a-site/en.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-description: |
- Step-by-step guide on how to create a site on Deco.cx.
----
-
-This documentation will guide you through the process of creating and setting up
-your first site using Deco.cx. A Deco site is the primary asset for Deco users,
-serving as the hub for creating, editing, and managing their own space on the
-web.
-
-## 1. Select a Template
-
-Go to the [Deco Admin](https://admin.deco.cx/spaces/new) and select a template
-to start. In this example, we will choose the landing template, which has the
-structure and components common to landing pages.
-
-
-
-## 2. Explore the Template
-
-After selecting a template, you can explore its components in a shared view-only
-mode. This allows you to explore the admin settings and features of the template
-without making any changes.
-
-
-
-## 3. Save Your Site
-
-To officially create your site from the template, click on the "Use this
-template" button in the top right corner of the admin page to claim ownership of
-the site.
-
-
-
-### 3.1. Log into the Platform
-
-### 3.2. Name Your Site and Choose a Team
-
-You will be prompted to choose a name for your site and a team to save it to:
-
-
-
-If you do not have a team yet, one will be created with a name of your choice:
-
-
-
-Deco will configure your site according to the template you chose.
-
-## 4. Finish Site Setup
-
-You will be redirected to the site home page:
-
-
-
-From here, you have two options:
-
-1. Run your site locally using your local development environment.
- - This gives you the power to modify your site by changing its code as well
- as using the Deco Admin.
-2. Create a new environment to edit your site through only the Deco Admin.
- - Here you can make changes to your site without needing access to the site
- code.
-
-### Option 1: Run Your Site Locally
-
-To run your site locally, you need to:
-
-1. Install Deno on your machine. You can follow the instructions on the
- [Deno website](https://deno.land/).
-2. Clone the site repository:
- ```bash
- git clone git@github.com:deco-sites/maria-landing.git
- ```
-3. Enter the repository folder and start the server:
- ```bash
- cd maria-landing
- DECO_ENV_NAME=localhost deno task start
- ```
-
-Now, you can modify the code and see the changes in the Admin and vice-versa.
-
-### Option 2: Create a New Environment
-
-Environments are isolated workspaces where you can make changes to your site
-without affecting the live site. To create a new environment:
-
-1. Click on the "New" button in the environment dropdown in the Admin.
- 
-2. Choose a name and a host for your environment. Since we are not going to run
- the site locally, select the Web option for the host.
- 
-
-You now have your own environment and isolated workspace to make changes to your
-site without needing to run its code.
-
-## (Optional) 5. Deploy Your Site
-
-If you want to deploy your site to a live environment using the Deco Hosting,
-you can do so by clicking the "Add Deco Hosting" button on the site home page or
-the "Go live" button in the environment dropdown.
-
-the current state of web development is broken :
-
-
-
-🧩 The complexity to build and deploy a web application has grown
-steadily, discouraging junior developers from building the web.
-
-😓 Developers and content creators often struggle to collaborate because
-the Headless CMS becomes a silo, requiring a lot of time to integrate and
-evolve;
-
-🐢 Client-side-first apps have terrible performance for high-volume ,
-content-driven websites like ecommerce storefronts, shipping ever-growing
-amounts of JavaScript code.
-
-
-
-We wanted a simpler way for web developers to build and collaborate with their
-marketing peers, using modern web technologies, and without having to configure
-so much stuff. "No-code" is not enough, and often removes power from developers.
-We wanted to have one environment from code to content to data. We wanted to
-build the other side of code, a collaborative experience builder for developers
-and content creators to work together in.
-
-VIDEO
-
-## Making webdev straightforward for teams of all sizes
-
-That's why we created deco.cx: a complete webdev platform for developers and
-content teams to build collaborative experiences together. Developers write
-components and functions using Deno, JSX, HTMX, TypeScript, and Tailwind . We
-automatically generate a beautiful, visual admin UI from the TypeScript code!
-
-Forget the costly and complex setup of a Headless CMS, or the inflexible
-structure of a no-code prison. deco.cx offers a seamless solution, making webdev
-straightforward for teams of all sizes:
-
-
-
-🔧 Localhost or web-based code editor with real-time visual content previews
-
-📝 Automatic conversion from TypeScript code to Content Schemas
-
-👥 Realtime collaboration and Git-based release history with easy rollback
-
-🤖 Decopilot, our AI assistant for code and content creation
-
-🌍 Global and page-specific SEO editor
-
-🎨 Customizable Theme editor using Tailwind and DaisyUI (import with AI!)
-
-🏢 Enterprise-grade features, including full control over release cycles,
-role-based permissions, real-time web analytics with Plausible, and error
-monitoring with HyperDX.
-
-
-
-## Why choose deco.cx
-
-### From code to collaborative content — build your own bespoke no-code solution
-
-Dealing with ”content type” editors is a PITA. With deco.cx, you just write
-React (JSX) components with TypeScript and we automatically generate a
-no-code editor that matches your Props.
-
-check error logs, tracing and
-metrics for total control .
-
-seamless and efficient communication between the client and server .
-
-o estado atual do desenvolvimento web está
-quebrado :
-
-
-
-🧩 A complexidade para construir e implantar um aplicativo web tem
-aumentado constantemente, desencorajando desenvolvedores juniores a
-construir para a web.
-
-😓 Desenvolvedores e criadores de conteúdo frequentemente têm dificuldade em
-colaborar porque o CMS Headless se torna um silo, exigindo muito tempo para
-integrar e evoluir;
-
-🐢 Aplicativos orientados para o cliente têm um desempenho terrível para
-sites de alto volume , impulsionados por conteúdo, como lojas de comércio
-eletrônico, que enviam quantidades cada vez maiores de código JavaScript.
-
-
-
-Queríamos uma maneira mais simples para os desenvolvedores web construírem e
-colaborarem com seus colegas de marketing, usando tecnologias web modernas e sem
-precisar configurar tantas coisas. "No-code" não é suficiente e muitas vezes
-retira poder dos desenvolvedores. Queríamos ter um ambiente único, desde o
-código até o conteúdo e os dados. Queríamos construir o outro lado do código, um
-construtor de experiências colaborativo para desenvolvedores e criadores de
-conteúdo trabalharem juntos.
-
-VIDEO
-
-## Tornando o desenvolvimento web simples para equipes de todos os tamanhos
-
-É por isso que criamos deco.cx: uma plataforma completa de desenvolvimento web
-para desenvolvedores e equipes de conteúdo construírem experiências
-colaborativas juntos. Os desenvolvedores escrevem componentes e funções
-usando Deno, JSX, HTMX, TypeScript e Tailwind . Nós geramos automaticamente
-uma bela interface de administração visual a partir do código TypeScript!
-
-Esqueça a configuração cara e complexa de um CMS Headless, ou a estrutura
-inflexível de uma prisão no-code. deco.cx oferece uma solução perfeita, tornando
-o desenvolvimento web simples para equipes de todos os tamanhos:
-
-
-
-🔧 Editor de código local ou baseado na web com visualização de conteúdo em
-tempo real
-
-📝 Conversão automática de código TypeScript para Esquemas de Conteúdo
-
-👥 Colaboração em tempo real e histórico de lançamento baseado em Git com
-rollback fácil
-
-🤖 Decopilot, nosso assistente de IA para criação de código e conteúdo
-
-🌍 Editor de SEO global e específico da página
-
-🎨 Editor de Temas personalizável usando Tailwind e DaisyUI (importação com IA!)
-
-🏢 Recursos de nível empresarial, incluindo controle total sobre ciclos de
-lançamento, permissões baseadas em funções, análise web em tempo real com
-Plausible e monitoramento de erros com HyperDX.
-
-
-
-## Por que escolher deco.cx
-
-### Do código ao conteúdo colaborativo - crie sua própria solução no-code personalizada
-
-Lidar com editores de "tipo de conteúdo" é uma dor de cabeça. Com deco.cx, você
-apenas escreve componentes React (JSX) com TypeScript e nós geramos
-automaticamente um editor no-code que corresponde às suas Props.
-
-verificar logs de
-erros, rastreamento e métricas para ter controle total .
-
-comunicação perfeita e eficiente entre o cliente e o servidor .
-
-` and ``, and
-> configure them correctly, including width and height.
-
-### 📈 Images (SVG)
-
-**When to act**...
-
-- Page size is large and the pages contain embedded and repeated SVGs
-- Issues with Speed Index
-
-**Guide**: [Optimizing SVGs](/docs/performance/medias/svg-sprites)
-
-### 🖹 Fonts
-
-**When to act**...
-
-- Text appears to "change size" suddenly
-- Font file takes a long time to load
-- High FCP value (indicating the font as the problem)
-
-**Guide**: [Optimizing fonts](/docs/performance/medias/fonts)
-
-> **Tip**: Use standard fonts offered by Google. If necessary, use smaller fonts
-> (preferably woff/woff2).
-
-### 📜 Third-party scripts
-
-**When to act**...
-
-- The system takes a long time to load (high TBT)
-- The screen "jumps" due to a component inserted by a third-party script (high
- CLS)
-- A third-party script has a large size
-
-**Guide**: [Optimizing scripts](/docs/performance/lazy-3rd-party-scripts)
-
-> **Tip**: Try to only use what is strictly necessary or replace third-party
-> scripts with lighter versions. If not possible, postpone the execution of the
-> script until after the page has already loaded and the user is interacting
-> with it.
-
-### 🔄 Data loading efficiency (loaders)
-
-**When to act**...
-
-- The system indicates high latency for a loader
-- The page takes a long time to load initially
-- The size of props in islands is large
-
-**Guide**: [Optimizing loaders](/docs/performance/loaders)
-
-> **Tips**:
->
-> - Use `inline loaders` to transform data to be sent to a section and/or island
-> - Consider deferring the display (`Deferred`) of sections with expensive
-> loaders
-> - Change the loader's props to reduce the amount of data loaded in the loaders
-> - Save loaders that are reused on different pages/sections
-
-### 🏝️ Islands
-
-**When to act**...
-
-- The system indicates a large number of islands
-- The page takes a long time to load initially
-- The size of props in islands is large
-
-**Guide**: [Optimizing islands](/docs/performance/islands)
-
-> **Tips**: Prefer pure CSS to avoid islands. Use `children` to pass JSX into an
-> island. Reduce the scope of the island as much as possible (e.g., prefer a
-> button as an island rather than an entire `form`).
-
-## Relevant sources
-
-- [web.dev - Core Web Vitals](https://web.dev/explore/learn-core-web-vitals)
-
-- [MDN - Web Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance)
diff --git a/docs/performance/guide/pt.md b/docs/performance/guide/pt.md
deleted file mode 100644
index 5364917e..00000000
--- a/docs/performance/guide/pt.md
+++ /dev/null
@@ -1,253 +0,0 @@
----
-description: O guia deco para performance
-since: 1.0.0
----
-
-## Três regras para o alto desempenho
-
-### Entenda o framework e arquitetura do sistema
-
-Usar uma ferramenta de forma eficiente implica em entender seus componentes e
-capacidades. Isso permite ter uma base de código saudável desde o começo.
-
-> **Exemplo**: a deco oferece componentes como `Image` que ajudam a acelerar a
-> entrega de imagens de forma eficiente, mas nada impede que o usuário continue
-> usando o elemento `img`.
-
-### Aprenda a analisar o desempenho
-
-Aprenda a analisar o desempenho das suas páginas. Navegar em uma página não deve
-ser algo lento, nem mesmo para você. **Se está lento para o desenvolvedor,
-estará para o usuário**. Entenda as ferramentas disponíveis e como elas
-funcionam.
-
-### Acompanhar o desempenho é uma tarefa contínua
-
-Uma vez que o sistema para de performar, é comum deixar de se importar com este
-aspecto até que se torne bem mais difícil fazer correções. A detecção de
-problemas de desempenho é uma tarefa contínua, mas não deve ser um fim por si
-só.
-
-> **Importante**: o mais importante (a regra de ouro) é a experiência do
-> usuário. Por vezes, o sistema pode não entregar o melhor desempenho, desde que
-> isso seja uma decisão consciente para entregar a melhor experiência ao
-> usuário.
-
-## Analisando o desempenho de uma página
-
-Testar o desempenho passa por entender uma série de ferramentas e possíveis
-métricas que buscadm entender o que deve ser melhorado (e como). Existem
-ferramentas que ajudam neste processo. Entenda como e quando utilizá-las.
-
-### Testando localmente
-
-
-
-**Sempre teste localmente a sua página, section, loader ou action. Por vezes,
-não precisa ser um teste estruturado**. Se já estiver lento para você, já estará
-para o usuário.
-
-Execute as versões de teste deployadas. Em seguida, use as ferramentas
-disponíveis no próprio browser para depurar problemas de desmpenho. Com elas é
-possível acompanhar o desempenho da página em detalhes, e simular condições
-adversas (como uma rede ou cpu de menor qualidade). Mais informações no guia
-abaixo:
-
-### Teste de pagespeed
-
-
-
-O [pagespeed](https://pagespeed.web.dev/) é uma ferramenta de teste desenvolvida
-pela google para avaliar principais aspectos de desempenho de uma página.
-Explora métricas como quanto tempo até que seja exibido algum conteúdo, quanto
-tempo o sistema passa a ser interagível, etc.
-
-As principais métricas são descritas abaixo:
-
-| Métrica | Significado | exemplo de bom valor |
-| ----------- | ---------------------------------------------------------- | -------------------- |
-| FCP | Tempo até a primeira exibição de conteúdo | até 1,8s |
-| LCP | Tempo até a maior exibição de conteúdo | até 2,5s |
-| TBT | Tempo crítico bloqueante até que o usuário possa interagir | 200ms |
-| Speed Index | Índice do desempenho da página em popular conteúdo | até 3,4 |
-| CLS | Índice da quantidade de mudanças de layout cumulativa | até 0,1 |
-
-> [fonte (adaptado)](https://web.dev/articles/fcp?hl=pt-br)
-
-A google agrega essas métricas em um índice entre 0 e 100, gerando a nota do
-pagespeed.
-
-Como é um teste executável em um ambiente em produção, ele é sujeito a
-variações, no entanto, uma queda abrupta no valor do pagespeed implica em olhar
-para o desempenho da página o quanto antes.
-
-### Teste de métricas deco
-
-
-
-Por padrão a deco oferece um conjunto de métricas que são avaliadas em uma
-página. Estas métricas são especializadas especialmente para sistemas como a
-deco (SSR com hidratação e com muito carregamento de dados externos).
-
-| Métrica | Significado |
-| ----------------- | --------------------------------------------------------- |
-| Config LCP | Configurações de carregamento do maior conteúdo da página |
-| Page HTML | Tamanho da página em bytes |
-| Page Islands | Número de ilhas na páginas |
-| Islands Props | Tamanho em bytes das propriedades das ilhas |
-| Loaders latencies | Tempo de resposta dos loaders da página |
-
-Cada métrica é decomposta nas partes que a compõe, permitindo identificar melhor
-uma possível fonte de perda de performance. Não existe um valor ideal para cada
-métrica, mas é importante entender que uma HTML grande impacta no tempo de
-resposta para o usuário e em métricas como pagespeed.
-
-Um usuário que baixa a `100 kb/s` levará `5s` para baixar uma página de
-`500 kb`. Isto é especialmente impactante para usuários de dispositivos móveis
-operando em redes ou situações de baixa capacidade de banda.
-
-### Teste do Core Web Vitals
-
-
-
-Até agora, exploramos apenas testes sintéticos, ou seja, testes que são
-realizados de maneira artificial e que são apenas uma aproximação do mundo real.
-São testes relevantes pois uma queda de desempenho em um teste sintético,
-costuma ser refletido como uam queda de desempenho no mundo real.
-
-O Core Web Vitals representa uma coleção de métricas extraídas a partir da
-experiência real de usuários. Ela inclui métricas do pagespeed bem como outras
-métricas específicas da interação real de usuários.
-
-> Acesse através do site
-> [CrUX da google](https://developer.chrome.com/docs/crux/dashboard) ou
-> diretamente da App CrUX no seu site deco.
-
-Por ser uma métrica coletada, ela só tem significado agregado. A google
-categoriza os valores tipicamente mês-a-mês, por isso é mais uma métrica de
-acompanhamento para diagnosticar eventuais problemas de comportamento que
-passaram desapercebidos ao longo do tempo, ou que refletem a mudança de público
-da página.
-
-### Depurando problemas de performance
-
-Se, no entanto, nenhuma das ferramentas auxiliar no processo de identificação de
-um problema de desempenho, execute alguns testes manuais que podem identificar a
-causa do problema:
-
-- Se você não souber que mudança causou uma perda de performance:
- - Teste versões antigas do sistema para verificar qual versão impactou no
- desempenho
-
-- Caso não esteja claro, dentro de uma versão, o que a torna lenta, elimine
- parte do sistema até identificar a causa.
- - Para uma página lenta, elimine algumas `sections`, até que a página volte a
- ter um bom desempenho. A `section` mais recentemente apagada (ou seus
- `loaders` ou `ilhas`) pode ser a causa do problema.
- - Elimine dependências que tenha adicionado. Verifique se o sistema melhora
- com isso.
-
-- Atualize as suas dependências.
- - Melhorias de desempenho são constantemente adicionadas ao sistema e podem
- corrigir problemas que levam a lentidão.
-
-## Melhorias de desempenhos
-
-Após identificar um problema, seja por uma experiência negativa ou por alguns
-dos testes indicarem alguma métrica com valor inadequado, é preciso atuar.
-
-Cada teste acima indica, para cada métrica, possíveis culpados e aonde olhar.
-Caso tenha identificado o culpado, siga um dos guias abaixo para implementar
-melhorias relacionadas.
-
-Observe que as situações em que você deve atuar são só exemplos de alguns casos.
-
-### 🖼️ Imagens (jpg, png, gifs, ...)
-
-**Quando atuar**...
-
-- Valor alto de LCP (maior imagem demora a ser baixada / vista)
-- Páginas "sambando" na tela
-- Grande tamanho das imagens baixadas
-
-**Guia**: [Otimizando imagens](/docs/performance/medias/images)
-
-> **Dica**: use os componentes deco de imagens, como `` e ``, e
-> os configure corretamente, incluindo largura e altura.
-
-### 📈 Imagens (SVG)
-
-**Quando atuar**...
-
-- Tamanho das páginas é grande e as páginas contem SVGs embutidos e repetidos
-- Problemas no Speedindex
-
-**Guia**: [Otimizando SVGs](/docs/performance/medias/svg-sprites)
-
-### 🖹 Fontes
-
-**Quando atuar**...
-
-- O texto parece "mudar de tamanho" repentinamente
-- O arquivo de fonte demora a ser carregado
-- Valor alto de FCP (apontando a fonte como problema)
-
-**Guia**: [Otimizando fontes](/docs/performance/medias/fonts)
-
-> **Dica**: Use fontes padrão oferecidas pela google. Se preciso use fontes de
-> pouco tamanho (dando preferência a woff/woff2).
-
-### 📜 Scripts de terceiros
-
-**Quando atuar**...
-
-- O sistema demora a carregar (TBT alto)
-- A tela "samba" por causa de um componente inserido por um script terceiro (CLS
- alto)
-- Um script de terceiro é tem um tamanho grande
-
-**Guia**: [Otimizando scripts](/docs/performance/lazy-3rd-party-scripts)
-
-> **Dica**: Tente só usar o que for extritamente necessário ou substituir
-> scripts de terceiros por versões mais leves. Se não for possível, postergue a
-> execução do script para depois que a página já estiver carregado e o usuário
-> estiver interagindo com ela.
-
-### 🔄 Eficiência no carregamento de dados (loaders)
-
-**Quando atuar**...
-
-- O sistema indica alta latência de um loader
-- A página demora a carregar inicialmente
-- O tamanho das props em ilhas é grande
-
-**Guia**: [Otimizando loaders](/docs/performance/loaders)
-
-> **Dicas**:
->
-> - Use `inline loaders` para transformar dados a serem enviados a uma section
-> e/ou ilha
-> - Considere postergar a exibição (`Deferred`) de sections com loaders custosos
-> - Altere as props do loader para diminuir a quantidade de dados carregados nos
-> loaders
-> - Salve os loaders que são reutilizados em diferentes páginas/sections
-
-### 🏝️ Ilhas
-
-**Quando atuar**...
-
-- O sistema indica um grande número de ilhas
-- A página demora a carregar inicialmente
-- O tamanho das props em ilhas é grande
-
-**Guia**: [Otimizando ilhas](/docs/performance/islands)
-
-> **Dicas**: Prefira CSS puro para evitar ilhas. Utilize `children` para passar
-> um JSX para dentro de uma ilha. Reduza o máximo possível o escopo da ilha
-> (ex.: prefira um botão como ilha, do que todo um `form`).
-
-## Fontes relevantes
-
-- [web.dev - Core Web Vitals](https://web.dev/explore/learn-core-web-vitals?hl=pt-br)
-
-- [MDN - Web Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance)
diff --git a/docs/performance/islands/en.md b/docs/performance/islands/en.md
deleted file mode 100644
index 6bb02920..00000000
--- a/docs/performance/islands/en.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-description: Optimizing the use of islands
-since: 1.0.0
----
-
-## Summary
-
-> An island is a component that is interactive and will be hydrated on the
-> client side. The server sends all the data from the island's `props` for
-> hydration, and the browser needs time to process and render these islands.
->
-> Therefore, it is important to take some precautions when using islands:
->
-> 1. Minimize the amount of props to be sent/used for an island
-> 2. Make an island only what is necessary, remembering to use `children` for
-> internal elements that do not need hydration.
-
-## Reducing the size of the props JSON sent to islands
-
-When loading data from external APIs using [Loaders](/docs/en/concepts/loader)
-and sending them to the [Section](/docs/en/concepts/section), it is possible
-that the size of the payload negatively impacts the performance of the site. The
-impact occurs both in the initial loading time and in the
-[hydration](https://blog.saeloun.com/2021/12/16/hydration/), where the page is
-"initialized" in the browser to make it interactive (using `useEffect`,
-`useSignal`, etc...). You can view the size of the final JSON through the
-**Performance** tab of one of your site pages in the Deco CMS.
-
-
-
- );
-}
-```
-
-In it, you want to include an
-[Island](https://fresh.deno.dev/docs/concepts/islands) to create the buy button.
-
-```tsx
-import BuyButton from "$store/components/ui";
-import Image from "apps/website/components/Image.tsx";
-
-export default function ProductCard({ product }: Props) {
- return (
-
-
- );
-}
-```
-
-It is possible that this BuyButton needs some product information in order to
-add it to the cart.
-
-This is where we need to be careful about the amount of data sent to the Island.
-For example, it is very likely that the buy button does not need to receive
-image data.
-
-The ideal approach is to send only the necessary data.
-
-> ❌ Inappropriate approach
-
-```tsx
-import BuyButton from "$store/components/ui";
-import Image from "apps/website/components/Image.tsx";
-
-export default function ProductCard({ product }: Props) {
- return (
-
-
- );
-}
-```
-
-> ✅ Correct approach
-
-```tsx
-import BuyButton from "$store/components/ui";
-import Image from "apps/website/components/Image.tsx";
-
-export default function ProductCard({ product }: Props) {
- return (
-
-
- );
-}
-```
-
-The correct approach sends only the ID and Seller data, which in the example are
-the only ones needed in the Island.
-
-Thus, during hydration, the JSON that the Island will load will not be as large.
-
-### Reducing the scope of an island
-
-An island and its components will all be hydrated on the client side in order to
-operate. This means that for all defined elements of the island, they will be
-recursively hydrated.
-
-It is possible to reduce the scope of the island by passing any internal
-elements as `children` of the island.
-
-> ❌ Inappropriate approach
-
-In the example below, we create an island that interacts with `localStorage` to
-set a title for a gallery of items. In the example below, both the gallery props
-will be passed to hydrate the `TitleContainer` and will also be passed to
-hydrate the `Gallery`.
-
-```tsx
-import { computed } from "@preact/signals";
-import { IS_BROWSER } from "$fresh/runtime.ts";
-import type { GalleryProps } from "../components/Gallery.tsx";
-import { Gallery } from "../components/Gallery.tsx";
-
-export default function TitleContainer(
- { galleryProps }: { galleryProps: GalleryProps },
-) {
- const title = computed(() => {
- IS_BROWSER ? localStorage.getItem("title") : "Loading...";
- });
-
- return (
-
-
{title}
-
-
{title}
- {children}
-
- );
-}
-```
-
-Uso do title container (em uma section, por exemplo):
-
-```tsx
-//...
-
-
-
-//...
-```
diff --git a/docs/performance/islands/pt.md b/docs/performance/islands/pt.md
deleted file mode 100644
index 441906ba..00000000
--- a/docs/performance/islands/pt.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-description: Enviando apenas dados necessários ao cliente
-since: 1.0.0
----
-
-## Resumo
-
-> Uma ilha determina um componente interativo e que será hidratado no lado do
-> cliente. O servidor manda todos os dados das `props` de ilhas para fazer a
-> hidratação, bem como o browser precisa de tempo para processar e renderizar
-> essas ilhas.
->
-> Por isso, é importante tomar alguns cuidados no uso de ilhas:
->
-> 1. Reduza ao máximo a quantidade de props a ser enviada / utilizada para uma
-> ilha
-> 2. Torne uma ilha apenas o que for necessário, lembrando de usar o `children`
-> para elementos internos que não precisam de hidratação.
-
-## Reduzindo o tamanho do JSON de props enviado para as ilhas
-
-Ao carregar dados de APIs externas usando [Loaders](/docs/pt/concepts/loader) e
-enviá-los para a [Section](/docs/pt/concepts/section), é possível que o tamanho
-do _payload_ impacte negativamente a performance do site. O impacto ocorre tanto
-no tempo inicial de carregamento como também na
-[hidratação](https://blog.saeloun.com/2021/12/16/hydration/), onde a página é
-"inicializada" no browser para que possa ser interativa (usar `useEffect`,
-`useSignal`, etc...). É possível visualizar no tamanho do JSON final através da
-aba **Performance** de uma das páginas do seu site no CMS deco.
-
-
-
- );
-}
-```
-
-Nele, você deseja incluir uma
-[Island](https://fresh.deno.dev/docs/concepts/islands) para criar o botão de
-comprar.
-
-```tsx
-import BuyButton from "$store/components/ui";
-import Image from "apps/website/components/Image.tsx";
-
-export default function ProductCard({ product }: Props) {
- return (
-
-
- );
-}
-```
-
-É possível que esse BuyButton, precise de algumas informações do produto para
-poder adicionar ao carrinho.
-
-Aqui que devemos tomar cuidado a quantidade de dados enviados para a Island. Por
-exemplo, é bem possível que o botão de comprar não precise receber dados de
-imagem.
-
-O ideal é enviar apenas os dados necessários
-
-> ❌ Abordagem inadequada
-
-```tsx
-import BuyButton from "$store/components/ui";
-import Image from "apps/website/components/Image.tsx";
-
-export default function ProductCard({ product }: Props) {
- return (
-
-
- );
-}
-```
-
-> ✅ Abordagem correta
-
-```tsx
-import BuyButton from "$store/components/ui";
-import Image from "apps/website/components/Image.tsx";
-
-export default function ProductCard({ product }: Props) {
- return (
-
-
- );
-}
-```
-
-A abordagem correta envia apenas os dados de ID e Seller, que no exemplo, são os
-únicos necessários na Island.
-
-Assim, no momento de hidratação, o JSON que a Island irá carregar não será tão
-grande.
-
-### Reduzindo o escopo de uma ilha
-
-Uma ilha e seus componentes serão todos hidratados do lado do cliente para
-poderem operar. Isto significa que, para todos os elementos definidos da ilha,
-eles serão recursivamente hidratados.
-
-É possível reduzir o escopo da ilha, fazendo com que, qualquer elemento interno,
-seja passado como `children` da ilha.
-
-> ❌ Abordagem inadequada
-
-No exemplo abaixo, criamos uma ilha que interage com o `localStorage` para
-definir um título para uma galeria de itens. No exemplo abaixo, tanto os props
-de gallery serão inseridos para hidratar o `TitleContainer`, como serão também
-inseridos para poder hidratar o `Gallery`.
-
-```tsx
-import { computed } from "@preact/signals";
-import { IS_BROWSER } from "$fresh/runtime.ts";
-import type { GalleryProps } from "../components/Gallery.tsx";
-import { Gallery } from "../components/Gallery.tsx";
-
-export default function TitleContainer(
- { galleryProps }: { galleryProps: GalleryProps },
-) {
- const title = computed(() => {
- IS_BROWSER ? localStorage.getItem("title") : "Loading...";
- });
-
- return (
-
-
{title}
-
-
{title}
- {children}
-
- );
-}
-```
-
-Uso do title container (em uma section, por exemplo):
-
-```tsx
-//...
-
-
-
-//...
-```
diff --git a/docs/performance/lazy-3rd-party-scripts/en.md b/docs/performance/lazy-3rd-party-scripts/en.md
deleted file mode 100644
index d270a1f3..00000000
--- a/docs/performance/lazy-3rd-party-scripts/en.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-description: Learn how to use third-party scripts on your website without sacrificing performance.
----
-
-## Summary
-
-> The use of third-party scripts can have a significant impact on website
-> performance. These scripts often operate in a blocking manner and can hinder
-> page loading times.
->
-> To reduce the time spent on these scripts, it is recommended to:
->
-> 1. Avoid using third-party scripts whenever possible
-> 2. Delay the loading of scripts until after user interaction
-> 3. Use async or defer attributes for scripts
-> 4. Preload connection to the script's origin
-
-## Delaying the loading of scripts.
-
-If the script in question is not a priority, meaning it can wait for user
-interaction or does not represent a vital functionality for the website, a
-recommendation is to delay its loading until the user interacts with the site.
-
-Each script may require a different strategy to delay its execution. Below is an
-example of a common strategy
-([source](https://metabox.io/delay-javascript-execution-boost-page-speed/)) to
-delay the script so that it is only executed after user interaction followed by
-a delay:
-
-```tsx
-
-```
-
-Another alternative is to use the Intersection API, so that the code is executed
-only when a certain element is in view (useful for things that should only be
-executed after the user scrolls on a page).
-
-```jsx
-const elem = document.getElementById(id);
-const observer = new IntersectionObserver((items) => {
- // YOUR SCRIPT CONTENT
- observer.unobserve(elem);
-});
-
-observer.observe(elem);
-```
-
-## Async and Defer in Scripts
-
-The presence of a `
-```
-
-Outra alternativa é fazer uso da intersection API, de forma que o código seja
-executado apenas quando um determinado elemento esteja em tela (útil para aquilo
-que deve ser executado só após o usuário der scroll em uma tela).
-
-```jsx
-const elem = document.getElementById(id);
-const observer = new IntersectionObserver((items) => {
- // YOUR SCRIPT CONTENT
- observer.unobserve(elem);
-});
-
-observer.observe(elem);
-```
-
-## Async e Defer nos script
-
-A presença de uma tag `
-```
-
-## Next Steps
-
-Features that are not yet available, but we are already working to release:
-
-- Traffic Configuration
-
-In A/B testing for deco.cx sites, it is already possible to define the amount of
-traffic; we are working to implement this in the SDK as well.
-
-- Parallel Tests
-
-In A/B testing for deco.cx sites, it is already possible to run more than one
-test at the same time; we are working to implement this in the SDK as well.
-
-- A/B/C/... Tests
-
-We are working to implement the possibility of tests with more than two
-versions.
diff --git a/docs/sdk/ab-test/pt.md b/docs/sdk/ab-test/pt.md
deleted file mode 100644
index 30935782..00000000
--- a/docs/sdk/ab-test/pt.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-description: Criando Teste A/B Headless
----
-
-## Para quem é esse conteúdo?
-
-Esse conteúdo é para quem ainda não tem o site na deco.cx e deseja utilizar a
-Feature de Teste A/B de forma headless, sem migrar de tecnologia.
-
-Se você já tem o site na deco.cx, a criação de Teste A/B está explicada nessa
-outra [documentação](/docs/pt/developing-capabilities/apps/ab-test).
-
-## Como começar?
-
-1 - Criando um projeto deco.cx
-
-2 - Entendendo o Teste A/B
-
-3 - Configuração de eventos
-
-4 - Acompanhando resultados
-
-5 - Go Live
-
-## Criando um projeto deco.cx
-
-Acesse o link de [criação de sites](https://admin.deco.cx/spaces/new).
-
-Escolha o template **SDK**.
-
-
-
-Após a criação, o projeto ainda não está em nenhum time, você pode associar a
-algum time no botão `Save site to your team`.
-
-## Entendendo o Teste A/B
-
-Com o site criado e associado a um time, procure na barra de busca por `abTest`.
-
-Selecione a opção mostrada na imagem:
-
-
-
-Você deve ver um bloco como esse:
-
-
-
-Defina então um nome para o seu teste e depois configure as variantes.
-
-### Variantes
-
-As variantes são versões de código que vão executar aleatoriamente para uma
-parcela do seu público.
-
-Aqui você tem a possibilidade de adicionar `Javascript` e/ou `CSS` para
-customizar a experiência do seu usuário.
-
-Exemplos:
-
-JavaScript to run
-
-```js
-document.querySelector("#my-button").textContent = "Buy!";
-```
-
-CSS to run
-
-```css
-#my-button {
- color: red !important;
-}
-```
-
-## Configuração de Eventos
-
-A configuração de eventos é essencial para Testes A/B, agora você vai ver como
-criar um evento específico para o seu teste.
-
-Na mesma tela de configuração das Variantes, encontre o campo `Tracked Elements`
-e clique para adicionar um.
-
-Você deve ver algo como:
-
-
-
-Agora, basta encontrar o `seletor CSS` do elemento que deseja criar um evento e
-escolher o nome do evento.
-
-## Acompanhando resultados
-
-Você pode acompanhar o resultado do seu teste, com as métricas que criou
-diretamente pelo painel da deco.cx.
-
-> Importante: Para acompanhar os resultados do Teste pode ser necessário um
-> upgrade no plano do seu time, confira em
-> [Pricing](https://deco.cx/en/pricing).
-
-1 - Clique na aba `Experiments`.
-
-2 - Clique em `Create New Experiment`
-
-3 - Crie um experimento com o mesmo nome que colocou no seu Teste.
-
-4 - Acompanhe os resultados.
-
-Para entender mais sobre a tela de resultados, olhe essa
-[documentação](/docs/pt/developing-capabilities/apps/ab-test#funil-e-resultado).
-
-## Go-Live
-
-Antes de colocar o código em produção, preenche um campo chamado
-`plausibleDomain` com o mesmo domínio registrado na aba `Analytics` do seu
-painel deco.cx
-
-Agora, para que tudo isso seja aplicado no seu site:
-
-- Clique em Publish
-- Insira esse script no `` do seu site:
-
-```html
-
-```
-
-## Próximos passos
-
-Features que ainda não estão disponíveis, mas já estamos trabalhando para
-lançar:
-
-- Configuração de tráfego
-
-No Teste a/b para sites deco.cx já é possível definir a quantidade de tráfego,
-estamos trabalhando para implementar na SDK também.
-
-- Testes em paralelo
-
-No Teste a/b para sites deco.cx já é possível rodar mais de um teste ao mesmo
-tempo, estamos trabalhando para implementar na SDK também.
-
-- Testes A/B/C/...
-
-Estamos trabalhando para implementar a possibilidade de testes com mais de duas
-versões.
diff --git a/docs/sdk/feature-flags/en.md b/docs/sdk/feature-flags/en.md
deleted file mode 100644
index ae8ee0ea..00000000
--- a/docs/sdk/feature-flags/en.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-description: Feature Flags
----
-
-## What are Feature Flags?
-
-It is a software development technique that allows enabling or disabling
-specific features of an application without changing the code or performing a
-new deploy.
-
-Check out the technologies already supported and their respective documentation:
-
-## React
-
-[deco-sdk npm](https://www.npmjs.com/package/deco-sdk)
diff --git a/docs/sdk/feature-flags/pt.md b/docs/sdk/feature-flags/pt.md
deleted file mode 100644
index c3ff7f4e..00000000
--- a/docs/sdk/feature-flags/pt.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-description: Feature Flags
----
-
-## O que são Feature Flags?
-
-É uma técnica de desenvolvimento de software que permite ativar ou desativar
-funcionalidades específicas de um aplicativo sem alterar o código ou fazer um
-novo deploy.
-
-Confira as tecnologias já suportadas e suas respectivas documentações:
-
-## React
-
-[deco-sdk npm](https://www.npmjs.com/package/deco-sdk)
diff --git a/docs/self-host/architecture/en.md b/docs/self-host/architecture/en.md
deleted file mode 100644
index 253a948e..00000000
--- a/docs/self-host/architecture/en.md
+++ /dev/null
@@ -1,153 +0,0 @@
----
-description: Self-host Architecture
-since: 2.0
----
-
-## Site Architecture on deco.cx
-
- => {
- const docFiles = await Deno.readDir(dir);
- const notUsedDirs = [] as string[];
- for await (const file of docFiles) {
- if (file.isFile) {
- const slug = dir.slice(prefix.length);
- if (!slugs.includes(slug) && !notUsedDirs.includes(dir)) {
- notUsedDirs.push(dir);
- }
- } else {
- notUsedDirs.push(...await processDir(dir + "/" + file.name, prefix));
- }
- }
- return notUsedDirs;
- };
- const processAllFiles = (dir: string) => processDir(dir, dir + "/");
- console.log(await processAllFiles("./docs"));
-};
-
-const generateCSVFromTOC = () => {
- const process = (entity: TopLevelEntry[]) => {
- const data = [] as string[];
- for (let i = 0; i < entity.length; i++) {
- const children = entity[i].children;
- if (children) {
- data.push(...process(children));
- }
- if (entity[i].slug) {
- data.push(
- [
- "https://www.deco.cx/docs/pt/" + entity[i].slug,
- entity[i].title["pt"],
- "https://www.deco.cx/docs/en/" + entity[i].slug,
- entity[i].title["en"],
- ].join(";"),
- );
- }
- }
- return data;
- };
-
- // generate a CSV with url;title;url_en;title_en
- console.log("url;title;url_en;title_en");
- process(tableOfContents).toSorted().map((item) => console.log(item));
-
- // check if there is any file not used
-};
-
-if (import.meta.main) {
- const arg = Deno.args[0];
-
- if (arg === "generateCSV") {
- generateCSVFromTOC();
- } else if (arg === "createFiles") {
- mainCreateFilesFromToc();
- } else if (arg === "checkFiles") {
- checkUnsuedDocFile();
- } else {
- console.log(
- "Invalid argument. Please specify 'generateCSV' or 'createFiles'.",
- );
- }
-}
diff --git a/docs/toc.ts b/docs/toc.ts
deleted file mode 100644
index f79938e2..00000000
--- a/docs/toc.ts
+++ /dev/null
@@ -1,745 +0,0 @@
-type LocalizedTitle = { pt?: string; en?: string };
-type Entry = { title: LocalizedTitle; slug?: string };
-export type TopLevelEntry = Entry & { children?: Array };
-
-type TableOfContents = Array;
-
-const tableOfContents: TableOfContents = [
- {
- title: { pt: "O que é deco.cx", en: "What is deco.cx" },
- slug: "overview",
- },
- {
- title: { pt: "Comece agora", en: "Getting Started" },
- children: [
- {
- title: { pt: "Criando um Site", en: "Creating a Site" },
- slug: "getting-started/creating-a-site",
- },
- {
- title: { pt: "Criando uma nova Página", en: "Creating a new Page" },
- slug: "getting-started/creating-a-new-page",
- },
- {
- title: {
- pt: "Gerenciando mudanças e publicando",
- en: "Managing changes and publishing",
- },
- slug: "getting-started/changes-and-publishing",
- },
- {
- title: {
- pt: "Adicionando um app ao seu site",
- en: "Adding an app to your site",
- },
- slug: "getting-started/adding-an-app",
- },
- {
- title: {
- pt: "Adicionando domínios próprios",
- en: "Adding custom domains",
- },
- slug: "getting-started/custom-domains",
- children: [
- {
- title: {
- pt: "Como redirecionar domínio sem wwww",
- en: "How to redirect domain without www",
- },
- slug: "getting-started/custom-domains/apex-domains",
- },
- ],
- },
- ],
- },
- {
- title: { pt: "Funcionalidades do CMS", en: "CMS capabilities" },
- children: [
- { title: { pt: "Home", en: "Home" }, slug: "cms-capabilities/home" },
- {
- title: { pt: "Content", en: "Content" },
- slug: "cms-capabilities/content",
- children: [
- {
- title: { pt: "Pages", en: "Pages" },
- slug: "cms-capabilities/content/pages",
- },
- {
- title: { pt: "Sections", en: "Sections" },
- slug: "cms-capabilities/content/sections",
- },
- {
- title: { pt: "Blog", en: "Blog" },
- slug: "cms-capabilities/content/blog",
- },
- {
- title: { pt: "Releases", en: "Releases" },
- slug: "cms-capabilities/content/releases",
- },
- {
- title: { pt: "Assets", en: "Assets" },
- slug: "cms-capabilities/content/assets",
- },
- {
- title: { pt: "Records", en: "Records" },
- slug: "cms-capabilities/content/records",
- },
- ],
- },
- {
- title: { pt: "Advanced", en: "Advanced" },
- slug: "cms-capabilities/advanced",
- children: [
- {
- title: { pt: "SEO (e robots)", en: "SEO (and robots)" },
- slug: "cms-capabilities/advanced/seo",
- },
- {
- title: {
- pt: "Redirects (e Proxies)",
- en: "Redirects (and Proxies)",
- },
- slug: "cms-capabilities/advanced/redirects",
- },
- {
- title: {
- pt: "Loaders",
- en: "Loaders",
- },
- slug: "cms-capabilities/advanced/loaders",
- },
- {
- title: {
- pt: "Actions",
- en: "Actions",
- },
- slug: "cms-capabilities/advanced/actions",
- },
- {
- title: {
- pt: "Segments",
- en: "Segments",
- },
- slug: "cms-capabilities/advanced/segments",
- },
- {
- title: {
- pt: "Apps",
- en: "Apps",
- },
- slug: "cms-capabilities/advanced/apps",
- },
- {
- title: {
- pt: "Experiments",
- en: "Experiments",
- },
- slug: "cms-capabilities/advanced/experiments",
- },
- {
- title: {
- pt: "Teste A/B",
- en: "Creating an A/B Test",
- },
- slug: "developing-capabilities/apps/ab-test",
- },
- ],
- },
- {
- title: { pt: "Management", en: "Management" },
- slug: "cms-capabilities/management",
- children: [
- {
- title: { pt: "Settings (domínios)", en: "Settings (domains)" },
- slug: "cms-capabilities/management/custom-domains",
- },
- {
- title: {
- pt: "Settings (domínios APEX)",
- en: "Settings (APEX domains)",
- },
- slug: "cms-capabilities/management/apex-domains",
- },
- ],
- },
- ],
- },
- {
- title: {
- pt: "Guia de Desenvolvimento",
- en: "Developing guide",
- },
- children: [
- {
- title: { pt: "Configuração do ambiente", en: "Environment setup" },
- slug: "developing-guide/setup",
- },
- {
- title: {
- pt: "Editando uma section",
- en: "Editing a Section",
- },
- slug: "developing-guide/editable-sections",
- },
- {
- title: { pt: "Criando uma Section", en: "Creating a Section" },
- slug: "developing-guide/hello-world",
- },
- {
- title: {
- pt: "Interatividade com HTMX",
- en: "Interactivity with HTMX",
- },
- slug: "developing-guide/htmx",
- },
- {
- title: {
- pt: "Carregando dados de uma API",
- en: "Fetching data from APIs",
- },
- slug: "developing-guide/fetching-data",
- },
- {
- title: {
- pt: "Criando um loader",
- en: "Creating a loader",
- },
- slug: "developing-guide/creating-loaders",
- },
- {
- title: {
- pt: "Newsletter com HTMX e Deco Records",
- en: "Newsletter with HTMX and Deco Records",
- },
- slug: "developing-guide/examples",
- },
- {
- title: {
- pt: "Go Live com Teste A/B",
- en: "Go Live with A/B Testing",
- },
- slug: "developing-guide/go-live-ab-testing",
- },
- ],
- },
- {
- title: {
- pt: "Conceitos",
- en: "Concepts",
- },
- children: [
- {
- title: {
- pt: "Block",
- en: "Block",
- },
- slug: "concepts/block",
- },
- {
- title: {
- pt: "Section",
- en: "Section",
- },
- slug: "concepts/section",
- },
- {
- title: {
- pt: "Loader",
- en: "Loader",
- },
- slug: "concepts/loader",
- },
- {
- title: {
- pt: "Action",
- en: "Action",
- },
- slug: "concepts/action",
- },
- {
- title: {
- pt: "Matcher",
- en: "Matcher",
- },
- slug: "concepts/matcher",
- },
- {
- title: {
- pt: "Segment",
- en: "Segment",
- },
- slug: "concepts/segment",
- },
- {
- title: {
- pt: "App",
- en: "App",
- },
- slug: "concepts/app",
- },
- ],
- },
- {
- title: {
- pt: "Funcionalidades de Desenvolvimento",
- en: "Development capabilities",
- },
- children: [
- {
- title: { pt: "Blocos", en: "Blocks" },
- slug: "developing-capabilities/blocks",
- children: [
- {
- title: {
- pt: "Exportando Propriedades Padrões em um Bloco",
- en: "Exporting Default Props in a Block",
- },
- slug: "developing-capabilities/blocks/exporting-default-props",
- },
- ],
- },
- {
- title: { pt: "Seções", en: "Sections" },
- slug: "developing-capabilities/sections",
- children: [
- {
- title: {
- pt: "Capturando exceções nas Seções",
- en: "Section error fallback",
- },
- slug: "developing-capabilities/sections/error-fallback",
- },
- {
- title: {
- pt: "Estados de carregamento nas Seções",
- en: "Section loading fallback",
- },
- slug: "developing-capabilities/sections/loading-fallback",
- },
- {
- title: {
- pt: "Redirecionando usuários a partir de Seções",
- en: "Redirecting users from Sections",
- },
- slug: "developing-capabilities/sections/redirecting-users",
- },
- {
- title: {
- pt: "Aceitando uma Seção como parâmetro da minha Seção",
- en: "Accepting Other Sections as Parameters in Your Section",
- },
- slug: "developing-capabilities/sections/accept-a-section",
- },
- ],
- },
- {
- title: { pt: "Propriedades de Sections", en: "Section Properties" },
- slug: "developing-capabilities/section-properties/utility-types",
- children: [
- {
- title: { pt: "Tipos utilitários", en: "Utility types" },
- slug: "developing-capabilities/section-properties/utility-types",
- },
- {
- title: {
- pt: "Dados padronizados",
- en: "Standard data types",
- },
- slug: "developing-capabilities/section-properties/standard-data-types",
- },
- {
- title: {
- pt: "Utilização de Segredos e Senhas",
- en: "Using Secrets",
- },
- slug: "developing-capabilities/section-properties/using-secrets",
- },
- {
- title: {
- pt: "Annotations",
- en: "Annotations",
- },
- slug: "developing-capabilities/section-properties/annotations",
- },
- {
- title: {
- pt: "Widgets",
- en: "Widgets",
- },
- slug: "developing-capabilities/section-properties/widgets",
- },
- ],
- },
- {
- title: { pt: "Sections Interativas", en: "Interactive Sections" },
- slug: "developing-capabilities/interactive-sections/partial",
- children: [
- {
- title: {
- pt: "Partial",
- en: "Partial",
- },
- slug: "developing-capabilities/interactive-sections/partial",
- },
- ],
- },
- {
- title: { pt: "Loaders", en: "Loaders" },
- slug: "developing-capabilities/loaders",
-
- },
- {
- title: { pt: "Islands", en: "Islands" },
- slug: "developing-capabilities/islands",
- children: [
- {
- title: {
- pt: "Actions",
- en: "Actions",
- },
- slug: "developing-capabilities/islands/actions",
- },
- {
- title: {
- pt: "Carregando dados de uma API a partir do browser",
- en: "Client-side Invocation",
- },
- slug: "developing-capabilities/islands/fetching-data-client",
- },
- ],
- },
- {
- title: { pt: "Apps", en: "Apps" },
- slug: "developing-capabilities/apps",
- children: [
- {
- title: {
- pt: "Desenvolvendo Apps",
- en: "Developing Apps",
- },
- slug: "developing-capabilities/apps/creating-an-app",
- },
- {
- title: {
- pt: "Instalando Apps",
- en: "Installing Apps",
- },
- slug: "developing-capabilities/apps/making-an-app-installable",
- },
- ],
- },
- {
- title: {
- pt: "Deco Records",
- en: "Deco Records",
- },
- slug: "reference/deco-records",
- },
- {
- title: {
- pt: "Modificando o status de retorno de uma pagina",
- en: "Modifying the return status of a page",
- },
- slug: "developing-capabilities/modifying-status",
- },
- {
- title: {
- pt: "Gerenciando o Acesso de um Bloco",
- en: "Managing Block Access",
- },
- slug: "developing-capabilities/manage-block-access",
- },
- {
- title: {
- pt: "E-commerce Analytics",
- en: "E-commerce Analytics",
- },
- slug: "reference/analytics",
- },
- {
- title: { pt: "Problemas comuns", en: "Troubleshooting" },
- slug: "reference/troubleshooting",
- },
- ],
- },
- {
- title: {
- pt: "Decopilot",
- en: "Decopilot",
- },
- children: [
- {
- title: {
- pt: "Como acessar",
- en: "How to access",
- },
- slug: "decopilot/how-to-access",
- },
- {
- title: {
- pt: "Assistente",
- en: "Assistant",
- },
- slug: "decopilot/assistant",
- },
- ],
- },
- {
- title: {
- pt: "Performance",
- en: "Performance",
- },
- children: [
- {
- title: {
- pt: "Porque performance importa",
- en: "Why web performance matters",
- },
- slug: "performance/why",
- },
- {
- title: {
- pt: "O guia deco para performance",
- en: "Deco performance guide",
- },
- slug: "performance/guide",
- },
- {
- title: {
- pt: "Otimizando CSS",
- en: "Optimizing CSS",
- },
- slug: "performance/medias/css",
- },
- {
- title: {
- pt: "Otimizando imagens",
- en: "Optimizing images",
- },
- slug: "performance/medias/images",
- },
- {
- title: {
- pt: "Otimizando SVG através de sprites",
- en: "Optimizing SVG via sprites",
- },
- slug: "performance/medias/svg-sprites",
- },
- {
- title: {
- pt: "Otimizando fontes",
- en: "Optimizing fonts",
- },
- slug: "performance/medias/fonts",
- },
- {
- title: {
- pt: "Otimizando loaders",
- en: "Optimizing loaders",
- },
- slug: "performance/loaders",
- },
- {
- title: {
- pt: "Otimizando scripts de terceiros",
- en: "Optimizing 3rd party scripts",
- },
- slug: "performance/lazy-3rd-party-scripts",
- },
- {
- title: {
- pt: "Otimizando Ilhas",
- en: "Optimizing Islands",
- },
- slug: "performance/islands",
- },
- {
- title: {
- pt: "Renderização assíncrona",
- en: "Async rendering",
- },
- slug: "performance/edge-async-render",
- },
- ],
- },
- {
- title: {
- pt: "Funcionalidades da Plataforma",
- en: "Platform capabilities",
- },
- children: [
- {
- title: {
- pt: "Teste A/B headless",
- en: "Headless A/B Test",
- },
- slug: "sdk/ab-test",
- },
- {
- title: {
- pt: "Feature Flags",
- en: "Feature Flags",
- },
- slug: "sdk/feature-flags",
- },
- {
- title: {
- pt: "CMS Headless",
- en: "Headless CMS",
- },
- slug: "headless-cms",
- },
- {
- title: {
- pt: "Integração GTM",
- en: "GTM Integration",
- },
- slug: "gtm",
- },
- ],
- },
- {
- title: {
- pt: "Referência da API",
- en: "API Reference",
- },
- children: [
- {
- title: {
- pt: "Invoke",
- en: "Invoke",
- },
- slug: "api-reference/invoke",
- },
- {
- title: {
- pt: "useSection",
- en: "useSection",
- },
- slug: "api-reference/use-section",
- },
- {
- title: {
- pt: "useScript",
- en: "useScript",
- },
- slug: "api-reference/use-script",
- },
- ],
- },
- {
- title: {
- pt: "Self-host your site",
- en: "Self-host your site",
- },
- children: [
- {
- title: {
- pt: "Arquitetura Self-host",
- en: "Self-host architecture",
- },
- slug: "self-host/architecture",
- },
- {
- title: {
- pt: "Self-host seu site deco",
- en: "Self-host your site deco",
- },
- slug: "self-host/site",
- },
- {
- title: {
- pt: "Self-host seus envs",
- en: "Self-host your envs",
- },
- slug: "self-host/envs",
- },
- ],
- },
-];
-
-const tableOfContentsBySlug = tableOfContents.reduce((acc, cur) => {
- return addEntriesToAccumulator(acc, cur);
-}, {} as Record);
-
-function addEntriesToAccumulator(
- acc: Record,
- entry: TopLevelEntry
-) {
- if (entry.slug) {
- acc[entry.slug] = entry;
- }
- if (entry.children) {
- entry.children.forEach((child: TopLevelEntry) =>
- addEntriesToAccumulator(acc, child)
- );
- }
- return acc;
-}
-
-export const getMenuDataForLanguage = (language: "en" | "pt") =>
- tableOfContents.map(({ title, slug, children }) => ({
- title: title[language],
- href: children
- ? `/docs/${language}/${children[0].slug}`
- : `/docs/${language}/${slug}`,
- children: children?.map(({ title, slug }) => ({
- title: title[language],
- href: `/docs/${language}/${slug}`,
- })),
- }));
-
-export type SupportedLanguages = "en" | "pt";
-
-export const getTitleForPost = (language: SupportedLanguages, slug: string) => {
- return tableOfContentsBySlug[slug]?.title[language];
-};
-
-type NextOrPrevious = { title?: string; category?: string; href?: string };
-
-const getNextPreviousForEntry = (
- language: SupportedLanguages,
- entry: TopLevelEntry
-): NextOrPrevious => ({
- href: `/docs/${language}/${entry.slug}`,
- title: entry.title?.[language],
-});
-
-export const getNextAndPreviousPost = (
- language: SupportedLanguages,
- slug: string
-) => {
- const tableOfContentsEntries = tableOfContents.reduce((entries, cur) => {
- return entries.concat(
- [cur, ...(cur.children || [])].filter(({ slug }) => slug)
- );
- }, [] as TopLevelEntry[]);
-
- const currentIndex = tableOfContentsEntries.findLastIndex(
- ({ slug: currentSlug }) => currentSlug && slug.includes(currentSlug)
- );
-
- const previous =
- currentIndex === 0
- ? undefined
- : getNextPreviousForEntry(
- language,
- tableOfContentsEntries[currentIndex - 1]
- );
-
- const next =
- currentIndex === tableOfContentsEntries.length - 1
- ? undefined
- : getNextPreviousForEntry(
- language,
- tableOfContentsEntries[currentIndex + 1]
- );
-
- return {
- previous,
- next,
- };
-};
-export type MenuData = ReturnType;
-
-export default tableOfContents;
diff --git a/docs/treinamento-comercial/agencias-parceiras/pt.md b/docs/treinamento-comercial/agencias-parceiras/pt.md
deleted file mode 100644
index ce07e88f..00000000
--- a/docs/treinamento-comercial/agencias-parceiras/pt.md
+++ /dev/null
@@ -1,330 +0,0 @@
----
-description: Treinamento Comercial - Agências Parceiras
-since: 1.0.0
----
-
-VIDEO
-
-Fala pessoal, tudo bem?
-
-A gente chegou finalmente na última parte desse nosso treinamento. E aqui a
-gente vai explorar juntos como que vocês vão crescer junto com a deco.cx.cx, né?
-Como que vocês vão ganhar dinheiro com a gente. A gente vai falar de como vocês
-vão prospectar os seus primeiros clientes, construir os seus primeiros cases e,
-além disso, abrir a sua carteira de clientes vendendo performance e vendendo
-capacidade de personalização.
-
-Então vamos começar.
-
-O primeiro passo para você se beneficiar da deco.cx é você se tornar uma agência
-parceira. Se vocês estão aqui, vocês provavelmente já são. Se não são, peça o
-contrato de parceria e eu vou explicar aqui um pouquinho dos benefícios que a
-gente oferece, quando você se torna de fato um parceiro oficial da deco.cx.
-
-Vale dizer que o nosso contrato de parceria é super flexível e a gente está
-aprendendo com isso. Lembrem, a gente tem só menos de um ano de vida. Então a
-gente tá aprendendo junto com vocês. Todos os termos do contrato, os benefícios,
-se vocês tiverem alguma outra ideia de como vocês querem construir essa
-parceria, a gente está super aberto a desenhar, termos a quatro mãos. Enfim, são
-só sugestões iniciais para a gente começar com uma proposta na mesa.Mas estamos
-loucos pra ouvir o que vocês têm a dizer sobre essas nossas vantagens.
-
-## Então, por que vender deco.cx? Por que você deveria se juntar a gente?
-
-Antes de falar dos benefícios exclusivos de você ser um parceiro oficial da
-deco.cx, eu quero articular com vocês aqui o que vocês ganham em surfar essa
-onda junto com a gente. Que tipo de benefícios vocês têm em vender deco.cx e
-incluir a deco.cx no portfólio de soluções da agência de vocês.
-
-> **Como vocês sabem, a deco.cx é uma solução Headless, e pra gente não faz a
-> menor diferença em qual plataforma que o seu cliente tá.**
-
-Hoje em dia, a maior parte das agências está casada com uma plataforma de
-comércio específica. Então, se você é uma agência da VNDA ou se você é uma
-agência da deco.cx, ou se você é uma agência da Shopify, você só trabalha com
-essa agência, no máximo com uma ou duas agências. Seu time comercial está
-treinado em vender essa plataforma, seu time técnico só sabe implementar essa
-plataforma. E aí você tem um mercado muito restrito.
-
-O que a gente está possibilitando pra sua agência agora com a deco.cx, é que
-você possa vender projetos independente da plataforma de comércio que a gente se
-encontra. E com isso você ganha uma expansão de mercado muito grande.
-
-Pensa, por exemplo, fora do Brasil, se você for uma agência, digamos, Nuvemshop,
-Loja Integrada, ou que tem clientes fora do Brasil, ainda é muito pequeno o
-mercado fora da América Latina dessas plataformas. Se você for uma agência
-grande, mirando no mercado internacional, você vai encontrar muita dificuldade
-de prospectar clientes em plataformas específicas que são de origem brasileira
-ou de origem latino americana.
-
-Com a deco.cx, você passa a ter muito mais facilidade de abordar e de prospectar
-clientes fora do Brasil. Porque independente da plataforma, você faz um projeto
-de migração do front na deco.cx ou migra primeiro a digital experience, e aí se
-o cliente está na plataforma X ou Y, isso pra gente não faz a menor diferença.
-Então a sua agência está ganhando mais mercado.
-
-> **Outro ponto que é muito relevante é redução do churn que a gente
-> proporciona.**
-
-Porque hoje, por que você escolheu ter uma plataforma de e-commerce específica —
-para treinar o seu time para o seu time implementar —, se o seu cliente sair
-dessa plataforma, então o cliente está na VTEX e decide ir para Magento, se você
-não opera com Magento, é bem provável que você vá perder esse cliente. Ele vai
-procurar uma agência especializada em Magento.
-
-Agora não acontece mais isso. Independente de para onde seu cliente vai, ele
-continua com a deco.cx, ele continua com você.
-
-> **Outro ponto para vocês considerarem é a redução do custo de mão de obra.**
-
-Então, hoje cada plataforma tem a sua própria solução de frontend. A VTEX tem o
-VTEX IO, tem a FastStore, o Shopify tem o Liquid, a Salesforce tem o Composable
-Storefront. O que isso significa? Que você precisa treinar, encontrar mão de
-obra especializada ou treinar o seu time naquela tecnologia proprietária.
-
-Isso é muito custoso. É difícil você encontrar gente experiente e é caro você
-treinar.
-
-O que a gente está proporcionando aqui é uma stack de tecnologia que qualquer
-desenvolvedor júnior sabe codar. É baseada em JavaScript, é baseada em React, é
-baseada em TypeScript. Qualquer desenvolvedor júnior — que acabou de sair de um
-bootcamp — ele passa a ser muito produtivo pra você e muito pouco tempo.
-
-Então acabou esse mundo de _"Ah, eu quero montar um time de Shopify, eu preciso
-encontrar especialistas em Shopify, eu preciso treinar pessoas no Shopify."_
-Agora você tem um time só de front para todas as plataformas, que trabalha em
-cima de uma mesma tecnologia. E não é uma tecnologia proprietária nossa. É uma
-tecnologia de mercado que qualquer pessoa conhece. Isso acaba se barateando seu
-custo de mão de obra e deixando o seu time muito mais produtivo. Mesmo os
-desenvolvedores mais juniores que têm menos experiência.
-
-> **Hoje em dia, muitas agências ficam enxugando gelo para o cliente.**
-
-O que significa? Elas vendem um serviço de evolução que não mexe o ponteiro, que
-não aumenta as vendas e que não geram um resultado significativo para os
-varejistas, para as lojas.
-
-O que a gente tá proporcionando com a deco.cx agora é um conjunto de ferramentas
-que vai fazer com que o seu serviço valha muito mais para o cliente, o que
-significa que você pode cobrar mais por ele.
-
-Então, ok, por um lado, o seu cliente não vai te pagar para você trocar banner
-ou para você trocar a cor de um componente, ou para você trocar a posição do
-componente, porque com a deco.cx o cliente passa a ter muito mais autonomia de
-como que ele quer evoluir e mexer na própria loja dele. A gente tá dando um
-editor visual que o próprio time de negócio do cliente consegue mexer.
-
-Por outro lado, a gente está trazendo várias ferramentas que permitem que o seu
-time seja muito mais assertivo. Então, uma delas, por exemplo, a ferramenta de
-teste AB, é uma ferramenta de personalização por audiência. Agora o seu cliente
-não tem mais um site. Ele pode ter um site de manhã, um site de tarde, um site
-de noite. O seu time pode recomendar para o seu cliente que ele recorte uma
-audiência específica para quem já gastou R$500,00 na loja no mês passado, ou
-para quem aniversariante do mês criar uma promoção exclusiva.
-
-Então, por mais que você esteja abrindo mão de um serviço que é barato e simples
-de você fazer na sua evolução, você está compondo no seu no seu portfólio
-serviços mais sofisticados que não vai te exigir uma mão de obra mais cara ou
-muito mais especializada, mas que vai agregar muito mais valor pro seu cliente e
-com isso vai valorizar sua marca.
-
-E a gente vai falar mais pra frente também dos nossos next step, do que vem por
-aí, do nosso roadmap, de como que nosso produto vai evoluir, como que você pode
-se alavancar disso. Mas antecipando, aqui nesse momento tem dois pontos que você
-pode surfar junto com a nossa onda:
-
-> **Um deles é o nosso Whitelabel**
-
-Agora você deixa de ser uma agência e você passa a ter o seu próprio produto
-digital. Você passa a se tornar uma empresa de Software as a Service (SaaS),
-você passa a ter sua própria plataforma. Isso digitaliza o seu negócio. Ao invés
-de você vender só serviços, você vende serviços, você vende o seu próprio admin,
-o seu próprio produto. Isso é uma possibilidade.
-
-> **A outra possibilidade está no nosso [deco.hub](https://www.deco.cx/pt/hub),
-> que é o nosso marketplace de blocos.**
-
-Como vocês podem ver mais pra frente. Você pode vender template, você pode
-vender componentes de interface, você pode vender novas integrações, você pode
-vender os seus próprios serviços dentro desse nosso marketplace. Com isso a
-gente tá te dando um novo canal de venda.
-
-Você cria um template, você comercializa o seu template para toda a nossa base
-de clientes, para toda a nossa comunidade. Qualquer pessoa entra lá, escolhe o
-template da sua agência, escolhe um serviço de implementação e você agora
-consegue crescer em vendas de forma escalável, sem aumentar seu custo comercial.
-
----
-
-E aí, agora sim, queria passar pelos benefícios de você se tornar um parceiro
-oficial.
-
-1. O primeiro benefício é o Revenue Share.
-
-A gente trabalha com um modelo que já é conhecido no mercado, que se a gente
-atingir com o cliente, você comissiona em cima daquele projeto que o cliente
-fecha com você. Se você nos indicar um cliente, a gente comissiona você um par
-com a receita que a gente tem desse nosso cliente.
-
-Os valores de comissionamento eles variam de cliente pra cliente.
-
-Se você trouxer uma big enterprise para deco.cx, obviamente que a gente vai
-considerar um comissionamento maior do que se você trouxer uma empresa muito
-pequenininha.
-
-E também de acordo com o nível de envolvimento nessa indicação. Se você faz uma
-indicação fria. _"Tem um amigo meu que trabalha na marca e tal, você quer falar
-com ele?"_, e você indica e não faz uma introdução, o comissionamento que a
-gente paga é menor. Porque se você fizer todo o trabalho de venda, obviamente,
-você liderar essa venda para o cliente apresentar deco.cx, fazer uma reunião
-presencial, apresentar o nosso pitch deck, apresentar os termos do contrato e o
-cliente chegar para a gente só pra assinar o contrato. É claro que a gente pesa
-isso na hora de comissionar.
-
-E tudo isso você pode ver nos termos de contrato de parceria. E de novo, tudo
-isso é negociável. A gente pode discutir caso a caso. Só estou dando uma visão
-geral para vocês de como funciona o nosso nosso modelo padrão.
-
-Vale dizer que hoje eu estou em julho de 2023. Hoje é dia 21, que a gente tá
-gravando, e a gente está mudando bastante esse contrato de parceria. Então isso
-evolui sempre. Mas um ponto importante a destacar é: nós estamos recebendo
-muitos leads das agências parceiras. Mais lead do que a gente dá conta de
-implementar. Então é bem provável que nos primeiros meses da parceria a gente
-não te leve muitos leads, porque nós não estamos batendo na porta das marcas de
-forma geral e vendendo a deco.cx diretamente. Boa parte das nossas vendas — eu
-diria que 80,90% das nossas vendas — tem vindo através de indicações de
-agências.
-
-Então não se frustre se nos primeiros meses dessa parceria a gente tiver te
-indicando pouco cliente e você estiver trazendo mais cliente pra deco.cx. A
-gente realmente não está dando conta do volume de interesse que a gente tá
-recebendo de vocês.
-
-As maiores oportunidades comerciais que a gente conversa diretamente com os
-clientes são os eventos. Então, no VTEX Day, no VTEX Connect LatAm, no Fórum do
-E-commerce Brasil, na NRF. Esses são os grandes momentos em que a gente tem um
-stand em que a gente tem uma conversa organizada com várias marcas e aí a gente
-consegue gerar um monte de lead para depois distribuir pras agências. No último
-VTEX Day foram 200 e tantos leads gerados. Esse é o momento que a gente abre o
-funil, mas via de regra, no dia a dia, mês a mês, a gente não está abordando as
-marcas diretamente, a gente tá aguardando vocês abordarem.
-
-2. Um outro benefício de você ser parceiro é o nosso suporte dedicado.
-
-Quem já é parceiro, sabe o que a gente tem um canal no Discord, uma comunidade
-no Discord, e a gente é bem próximo das nossas agências. Então a gente tem um
-canal no WhatsApp com quem gosta de ter um canal WhatsApp. A gente tem um canal
-fechado no Discord com cada agência. A gente faz um canal para cada projeto. Os
-nossos engenheiros estão 100% disponíveis para vocês, então vocês podem falar
-diretamente com o nosso time de desenvolvimento. Eles falam diretamente com os
-fundadores da empresa, comigo, com Lucis, com o Gui. Então o suporte para as
-agências parceiras é muito próximo.
-
-Se você não for uma agência parceira, você continua tendo suporte, mas nos
-canais abertos, no e-mail. Você passa a ter um suporte não priorizado, digamos
-assim. Se você for no Discord, você vai usar o canal público de parceiros. A
-gente não vai ter um grupo fechadinho com você para dar suporte para o seu time.
-
-3. Um outro ponto são os nossos treinamentos e a nossa certificação.
-
-Vocês já devem saber. A gente conduz treinamentos comerciais e técnicos de
-tempos em tempos, geralmente todo mês ou até mais de uma vez por mês, e o seu
-time vai ter acesso prioritário aos treinamentos, sincronamente.
-
-Os treinamentos vão ficar disponíveis assincronamente, como esse daqui, mas o
-treinamento síncrono é legal para o seu time poder tirar dúvida, para você
-perguntar alguma coisa diretamente pro time. Enfim, pra gente tem uma
-proximidade maior. Para você praticar alguns exercícios. Então, o treinamento
-síncrono ele fica disponível para os parceiros e o treinamento assíncrono fica
-disponível basicamente para todo mundo.
-
-Então é legal vocês valorizarem isso, porque é muito mais fácil certificar o seu
-time com um treinamento síncrono, que ele já sai certificado do que com
-treinamento assíncrono.
-
-4. Outro ponto legal de falar também é o acesso antecipado que a gente oferece
- para os parceiros nas nossas novas features.
-
-Então, toda sexta feira, a gente tem o Community Call, a gente divulga como que
-nosso produto está evoluindo e os primeiros usuários que a gente convida para
-testar essas novidades do nosso produto, são as nossas agências parceiras. O
-Whitelabel, o [deco.hub](https://www.deco.cx/pt/hub), o nosso sistema de
-workflows. Quem vai testar primeiro essas features novas vão ser as agências que
-têm contrato de parceria conosco. Depois a gente vai expandindo para as outras
-agências
-
-5. Os nossos parceiros oficiais também tem acesso ao sistema de bounties
- premium.
-
-A gente não tem um nome definitivo para isso. Talvez mude para qualquer outra
-coisa. Mas significa que, além do nosso marketplace, você poder fazer
-outsourcing para a nossa comunidade, contratar um dev freelancer e coisas do
-gênero, você agora tem acesso aos top devs da nossa comunidade. A gente dá uma
-lista de quem são os mais ativos, quem é mais experiente e agora você consegue
-selecionar quem que pode compor o seu time de desenvolvimento. Quem que você
-contrata por um projeto específico. Você tem acesso prioritário as bounties dos
-desenvolvedores líderes do nosso ranking da comunidade
-
-6. E tudo isso sem falar da exposição de marca.
-
-Sua logo vai pro nosso site, você é listado no
-[deco.hub](https://www.deco.cx/pt/hub), o seu cliente pode comprar serviços
-diretamente dentro da nossa plataforma. A gente divulga você no nosso material,
-nos nossos eventos, da nossa campanha de co-marketing, enfim, a gente consegue
-atacar o mercado juntos, o que facilita bastante as coisas.
-
----
-
-E em contrapartida, por esses benefícios, a gente pede um valor anual que varia
-de acordo com cada caso e a gente pode negociar.
-
-Eles gira em média em torno de R$5.000,00 por ano. E que de novo, podemos
-conversar. E a gente pode transformar esse valor em ações de co-marketing, a
-gente pode transformar em ações de mídia para eventos específicos, patrocínio
-para o nosso hackathon, a gente conversa.
-
-O importante é a gente formalizar essa relação para você ter acesso a esses
-benefícios, a gente começar a divulgar sua agência como agência oficial,
-homologada, certificada da deco.cx, os nossos clientes costumam perguntar. E a
-gente seguir junto.
-
-Vale dizer mais uma vez que você não precisa ser uma agência homologada,
-certificada, para você poder se beneficiar da deco.cx, você pode surfar essa
-onda revendendo, implementando os primeiros projetos, se aproximando da gente,
-mantendo relacionamento. Aí depois, quando for a hora que funcionar melhor pro
-seu negócio, você assina nosso contrato e enfim, vira um parceiro oficial. Tá
-tudo bem!
-
-— Oh, Baby! Deixa eu te falar uma coisinha?!
-
-Uma coisa que eu tenho falado para os parceiros é um pouco diferente. Eu tenho
-falado: _"Olha, você pode ser agência amiga ou agência parceira."_ Pro amigo, eu
-vou te dar tudo que você precisa pra vender deco.cx. Você vai aprender a nossa
-pitch comercial, vai saber dos nossos cases, você vai aprender nossa técnica e
-como desenvolver sites muito rápidos. E maravilha, você pode vender deco.cx. E o
-parceiro, aí o parceiro é diferente. Parceiro é um cara que anda junto com a
-gente. Ele vai estar nos eventos, a gente vai divulgar ele no site, vai passar
-lead, vai trocar comissão.
-
-Então é uma relação de futuro muito mais próxima e, obviamente, com mais
-possibilidade.
-
-— Leandro, senhoras e senhores!
-
-Independente de você ter homologado sua agência ou não, de você ter participado
-do treinamento ou não, de você ter se certificado ou assinado o contrato ou não.
-De tempos em tempos a gente vai rodar um ranking de agência, que é parecido com
-o quadrante da VTEX.
-
-A gente vai classificar as agências líderes, as agências que estão mais próximas
-e as que têm mais clientes. São uma série de critérios do tipo NPS dos seus
-clientes, número de lojas online, se você tem atendido aos prazos e às
-expectativas ou não. A gente vai compor ainda esse índice, o índice não está
-100% fechado, mas saibam que a gente vai passar uma lista de critérios e vocês
-serão avaliados de tempos em tempos.
-
-O que a gente quer garantir é que os parceiros que estão mais comprometidos com
-o futuro da marca, então com alinhamento de interesses, estão apostando, estão
-prospectando, estão fazendo contribuições para o nosso open-source, estão
-trazendo blocos, estão vendendo templates, que esses parceiros sejam
-favorecidos, que eles cresçam junto com a gente.
diff --git a/docs/treinamento-comercial/agenda/pt.md b/docs/treinamento-comercial/agenda/pt.md
deleted file mode 100644
index 91753a20..00000000
--- a/docs/treinamento-comercial/agenda/pt.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-description: Agenda - Treinamento Comercial deco.cx
-since: 1.0.0
----
-
-VIDEO
-
-Bom, vamos dar uma olhada na nossa agenda. Nossa agenda se divide em três
-partes.
-
-Na Parte 1 a gente vai dar um overview sobre a deco.cx. O que nós fazemos, no
-nosso deck de vendas, nosso produto, funcionalidades específicas que a gente não
-consegue apresentar em todas as apresentações. A gente vai passar por
-absolutamente tudo com vocês aí, no finalzinho, alguns cases de clientes e de
-agências para vocês também se apropriarem disso na hora de vocês venderem para
-os seus clientes.
-
-Na Parte 2 a gente vai te dar um pouquinho mais de contexto do mercado. Como
-funciona a arquitetura Headless, Composable, métricas de web performance. A
-ideia é que você saia com bastante contexto para levar para seus clientes
-durante seu discurso de vendas.
-
-E na Parte 3 é a parte que todo mundo tá interessado, que é como que a sua
-agência ganha dinheiro com isso? Como que você cresce junto com a gente? A gente
-vai falar de quais serviços você pode prestar junto com a deco.cx. Como que você
-prospecta seus primeiros clientes. Como que você vai alavancar suas vendas,
-aumentar a retenção dos clientes atuais.
-
-A gente vai falar também do futuro do nosso produto e quais são os nossos
-próximos passos. Como que você pode se antecipar e sair na frente. Depois dessa
-terceira parte, você vai encontrar uma pastinha de assets em que você tem tudo o
-que você precisa para você criar uma campanha. Tem boilerplate de PR, tem artes
-de social media tem banner de LinkedIn, tem cold message pra você poder fazer
-abordagem fria, template de e-mail marketing, tem artigo pra você poder ler,
-e-books. Você tem tudo o que você precisa para você se aprofundar e para você
-começar a criar uma campanha de marketing junto com a gente. Você não precisa
-assistir tudo se você não quiser. A gente gravou isso em vídeos pequenos
-justamente para você poder se apropriar, você poder assistir na hora que
-funciona melhor para você.
-
-Esse conteúdo também está transcrito, então você pode ler se você for de ler. Só
-um disclaimer importante é que ao longo do treinamento, você vai encontrar
-alguns exercícios. A gente vai fazer perguntas & respostas, vai passar alguns
-desafios. Vai ter alguns quizzes E aí, se você não participar, você não tira a
-certificação no final. Então só quem completar todas as respostas, todos
-desafios, todos os exercícios enviar pra gente.
-
-Vai ser um formulariozinho super super rápido de responder. Só essas pessoas vão
-ter acesso a certificação final. Mas fique a vontade, você não precisa dessa
-certificação para você ter acesso a todo esse conteúdo, mas eu garanto que se
-você preencher, você vai ter uma experiência muito mais rica e muito mais
-prazerosa e você vai conseguir se aprofundar muito mais no conteúdo.
diff --git a/docs/treinamento-comercial/diagnostico-inicial/pt.md b/docs/treinamento-comercial/diagnostico-inicial/pt.md
deleted file mode 100644
index 0e17503a..00000000
--- a/docs/treinamento-comercial/diagnostico-inicial/pt.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-description: Treinamento Comercial deco.cx - Diagnóstico inicial.
-since: 1.0.0
----
-
-VIDEO
-
-Então pessoal, vamos para o primeiro exercício. Nessa tela vai aparecer um
-[link](https://forms.gle/pze9zpHrZTJEt42d9) onde você abre um formulário e você
-responde rapidinho quatro perguntas. A principal vantagem de você participar
-desse exercício é que depois que você responde, você tem acesso as respostas de
-todas as outras agências. E tudo isso é anônimo. Então você pode ficar muito
-tranquilo que não vai aparecer quem respondeu não vai aparecer agência que
-respondeu mas você vai ter uma ferramenta de benchmarking. Você vai conseguir
-analisar como os seus concorrentes estão pensando, onde eles estão posicionados,
-sem oferecer nenhuma informação sigilosa pra ninguém.
-
-A primeira pergunta é: **O que você espera desse treinamento?** O que você
-espera conquistar no final desse treinamento?
-
-A segunda pergunta é: **Quais são as queixas dos seus clientes atuais?** Do que
-os seus clientes estão reclamando? O que estão te pedindo?
-
-A terceira pergunta é: **O que você tem feito enquanto agência para resolver
-essas dores dos seus clientes?**
-
-E a última pergunta é: **Como que você espera que a deco.cx ajude a sua agência
-a resolver suas próprias dores e ajude os seus clientes a resolverem as dores
-deles?**
diff --git a/docs/treinamento-comercial/headless-composable/pt.md b/docs/treinamento-comercial/headless-composable/pt.md
deleted file mode 100644
index b42c9d60..00000000
--- a/docs/treinamento-comercial/headless-composable/pt.md
+++ /dev/null
@@ -1,241 +0,0 @@
----
-description: Treinamento Comercial - Headless e Composable Commerce
-since: 1.0.0
----
-
-VIDEO
-
-Oi pessoal, tudo bom? Aqui é o Leandro, eu estou de volta! Quem já viu a
-primeira parte aqui no curso já me conhece, mas pra quem não viu ainda, eu vou
-me apresentar. Eu estou aqui liderando a parte comercial e de vendas. E nessa
-seção eu vou mostrar pra vocês como a deco.cx se engloba, se encaixa no
-movimento muito maior do mercado.
-
-Na nossa visão, a deco.cx é mais uma expressão de uma grande mudança que está
-acontecendo na indústria de comércio, na indústria de experiências digitais. Na
-nossa visão, o que estamos fazendo na deco.cx é parte de um movimento muito
-maior. É a expressão de uma mudança na arquitetura das plataformas de comércio e
-na maneira que a gente constrói experiências digitais.
-
-As palavras-chaves aqui são: **Headless & Composable**. E que vamos falar mais a
-frente nesse curso.
-
-Pensem que existe uma grande onda vindo que vai alterar definitivamente como a
-gente cria experiências digitais. E a deco.cx é justamente a prancha que vai te
-ajudar a surfá-la. Arquitetura desenvolvimento Web vem avançando nos últimos 15
-anos com as novas possibilidades de tecnologia e os novos recursos que todo
-mundo vem criando. A gente pode resumir esse grande movimento num começo, lá
-atrás, onde as aplicações eram chamadas de monolito, que eu vou explicar; uma
-evolução para o Healdess; e ainda mais agora, uma outra evolução para o
-Composable.
-
-Dando um pouco mais de contexto. Se a gente entrar na máquina do tempo há 15
-anos atrás, para você subir uma loja, você tinha que fazer tudo do zero. Você
-tinha que achar uma maneira de fazer a gestão de pedidos. Você tinha que fazer
-uma maneira de ter um catálogo, você tinha que arrumar uma maneira de ter um
-CMS. Tudo isso dava muito trabalho. Por isso que a gente tinha muito poucas
-lojas no ar, o que era custoso e difícil de executar. Então foi nesse contexto
-que surgiram as primeiras plataformas de comércio.
-
-Elas botaram todas essas soluções que você precisava para subir uma loja numa
-mesma oferta. Isso fez com que a aceleração digital, que a transição digital do
-mundo, ganhasse muita velocidade. E essas plataformas elas tinham como uma
-ideia, uma arquitetura de desenvolvimento, que todos os recursos eram feitos no
-mesmo lugar, eram grudados.
-
-Então na mesma tecnologia, no mesmo stack, você tinha o checkout, você tinha
-OMS, você tinha o catálogo, tudo no mesmo lugar, como se fosse uma grande pedra
-única, com todos os recursos e por isso que se chamava de monolito. E como é que
-era isso no início, né? Então, quando você não tinha nada, qualquer coisa era
-muito bom.
-
-Mas você com o tempo, isso e eu digo os varejistas, começaram a ficar presos a
-essa estrutura, porque se você não gostava do checkout, não tinha jeito, você
-tinha que ficar checkout. Se você não gostava, como era a maneira da busca, você
-não tinha jeito, tinha que ficar preso naquela plataforma. E a única solução era
-fazer a replataforma, uma migração pra uma outra oferta que estava te dizendo
-que ela tinha mais recursos.
-
-No fundo, era uma grande corrida para quem tinha mais recurso, a quantidade que
-era importante. Então, se você tinha agora um sistema de afiliado, o outro não
-tinha. Eu tenho agora um esquema de B2B, outro não tem. Eu tenho o marketplace,
-o outro não tem. Mas nada era preocupado na qualidade do produto, era mais na
-quantidade: ganha quem tem mais. E isso veio mudando.
-
-Bom, os anos foram passando, as marcas foram pressionando cada vez mais as
-plataformas de comércio em busca de recursos cada vez melhores. Quanto mais
-empresas levaram suas operações pro mundo digital, mais concorrido ele ficou,
-mais competitivo ele ficou. E não adiantava mais você simplesmente estar online.
-O diferencial agora é quem consegue realmente entregar algo diferente e que seja
-agradável ao cliente, que traga para ele uma satisfação de estar vivendo aquela
-relação com a marca. Essa experiência excepcional, ela pode ser entendida como
-ter algo muito distinto, muito único e que seja personalizado para o cliente. E
-esse tipo de solução as plataformas de comércio que começaram na estrutura do
-monolito não conseguiam mais entregar em todas as frentes que elas competiam.
-
-Os monolitos, como a imagem já diz, são estruturas pesadas, lenta de mexer,
-muito devagar para a velocidade a competição crescente do mercado. E a
-manutenção dessas estruturas ao longo do tempo se mostrou muito cara e muito
-difícil de ser feita com qualidade. As pressões por novas mudanças, por
-velocidade, por integrações foi tornando essa estrutura do monolito impossível e
-inviável de ser mantida. Principalmente no front as marcas queriam liberdade e a
-solução foi o Headless.
-
-Headless infelizmente não tem uma boa tradução. Se eu fosse te falar, é “corte a
-cabeça”, mas não é exatamente isso. O que a gente tá falando aqui é da
-possibilidade de você desacoplar a tecnologia, a estrutura do seu front, da
-tecnologia, a estrutura do back. Isso dá para as marcas mais liberdade e também
-tira da plataforma de comércio o peso de ter que resolver esse ponto tão
-importante para os negócios. E o objetivo disso tudo foi dar mais autonomia para
-os times de tecnologia, para os times de negócio das marcas criarem, agora sim,
-a experiência única e customizável da sua marca, sem ter que depender da solução
-da plataforma de comércio. Agora eles podem escolher os melhores serviços que
-lhes atendem.
-
-Um elemento que permitiu você desenhar essa nova arquitetura foram surgimentos
-das APIs, que são protocolos que criam uma nova camada entre o back e o front e,
-aí sim, libertam as duas partes da sua plataforma. Na prática, isso é uma
-maneira de controlar os dados que vem do front para o back e vice versa, de uma
-maneira segura e escalável. Com isso, agora as marcas têm a liberdade de criar o
-front que elas quiserem. Elas podem criar, por exemplo, um front para um
-aplicativo de uma outra tecnologia, com uma outra linguagem, mas consumindo os
-dados da API da plataforma de comércio. Elas podem criar um outro aplicativo que
-seja para um celular, também conectando com a API da plataforma de comércio.
-
-Então ela pode ter na verdade, vários pontos de contato com o cliente em
-diferentes linguagens, em diferentes tecnologias, mas tudo consumindo numa mesma
-base de dados unificada de catálogo, de pedido e outros serviços que também os
-varejistas comumente usam. Arquitetura Headless já é uma realidade nos mercados
-internacionais. Para você ter uma ideia, 25% das marcas já utilizam arquitetura
-Headless, e daquelas que não utilizam, 80% responderam numa pesquisa que
-pretendem implementar a arquitetura Headless nos próximos dois anos. Essa
-pesquisa foi feita em 2022, ou seja, isso está acontecendo esse ano e o ano que
-vem é um movimento super forte que a gente está aproveitando aqui na deco.cx.
-
-Praticamente todas as plataformas de comércio que a gente conhece já estão
-oferecendo arquitetura Headless. Isso quer dizer, elas já se deram o trabalho de
-preparar as APIs, de preparar toda sua infraestrutura para que você monte, caso
-você queira, um frontend em cima da arquitetura de backend deles. Então, se você
-entrar agora no site da VTEX, do Shopify, do Big Commerce, da Magento, todos
-eles vão ter uma landing page específica dizendo: “Olha só, agora você pode
-montar a sua estrutura Headless comigo”. Ou seja, é uma resposta clara do
-mercado à pressão e é uma oportunidade que a gente está perseguindo aqui na
-deco.cx também.
-
-Agora você dá a mão, eles querem o braço. As marcas quando entenderam a
-possibilidade da arquitetura Headless, e viram a liberdade que isso deu para
-elas, as possibilidades de ganho, de conversão, de ganho, de autonomia começaram
-a questionar por que isso também não pode estar em outras áreas do meu negócio,
-por exemplo: "Porque eu não posso também escolher meu checkout? Ou escolher a
-minha busca? Ou um outro serviço de integração?" Isso foi a semente de criar o
-movimento do Composable.
-
-A ideia do Composable é que você, na verdade, compõe a melhor solução possível
-para sua necessidade. Você vai escolher os melhores serviços disponíveis para
-cada uma das experiências que você quer dar para seu cliente e compor assim uma
-experiência digital com o que você quiser. E é nesse momento que a gente está
-entrando agora. Contudo, com o passar dos anos, mais demandas mais sofisticadas
-foram surgindo e essa tendência do Composable já está sendo validada pelas
-maiores empresas. Existe até um relatório da
-[Gartner](https://www.gartner.com/smarterwithgartner/gartner-keynote-the-future-of-business-is-composable),
-que você vai ter o link aqui no curso, e nesse relatório vem mostrando como essa
-é uma tendência sem volta para as arquiteturas das aplicações de comércio
-digital.
-
-Outro termo associado ao que a gente está falando aqui é o MACH que é:
-Microservices; API-first; Cloud-native SaaS; Headless. Basicamente é toda essa
-arquitetura que tem a ver com Headless, e tem a ver com Composable. Como vimos,
-a modularidade advinda da estrutura do Headless, e do Composable, permitiu às
-marcas escolherem os melhores serviços para suas demandas.
-
-Mas nem tudo são flores.
-
-Sim, por um lado, como eu já falei, isso tudo trouxe uma nova liberdade, uma
-nova autonomia, várias possibilidades de crescimento que antes não eram
-possíveis, porque você estava preso à própria evolução da plataforma de comércio
-da sua escolha. Mas, por outro lado, isso traz também, para quem está
-desenvolvendo uma solução Headless própria, uma grande complexidade e um
-potencial aumento de custos de operação.
-
-1. Um primeiro ponto: agora a sua decisão é muito mais complexa. Antes você
- decidia entre a plataforma A, B ou C. Agora, para cada um dos pequenos
- processos da sua aplicação, da sua experiência de comércio, você tem várias
- opções. E aí você tem que treinar o seu time diferente ferramentas, em
- diferentes tecnologias. Tem que aprender como é que eles funcionam. Tem mais
- canais de suporte diferentes espalhados entre diferentes fornecedores. Por
- exemplo, agora você vai ter que escolher entre dez fornecedores de checkout
- diferentes, dez fornecedores de search diferentes. E por aí vai. As opções
- estão ficando cada vez maiores, melhores também, mas que dá um trabalho de
- você escolher e conhecer o que é o melhor pro seu negócio.
-
-2. Agora você tem muito mais integrações com serviços feitos em tecnologias
- diferentes e de maneira diferente. Se isso não for bem feito e a manutenção
- não estiver em dia, você está construindo um Frankstein que pode obviamente
- ter muito mais instabilidade e bugs do que seria se você mantivesse na sua
- plataforma monolítica de comércio. Por fim, quanto mais serviços integrados
- você tem, obviamente mais demorado é o tempo de implementação, mais custoso é
- isso tudo. Então o Headless, se não for bem feito, pode sim aumentar o seu
- custo operação
-
-3. Então o Headless, se não for bem feito, pode sim aumentar o seu custo
- operação. Uma outra coisa que pode acontecer é que plugando muitos pequenos
- serviços na sua aplicação, você pode ficar com os dados fragmentados e
- inconsistentes, ou seja, começa a ficar difícil saber aonde está a fonte da
- verdade. E a gente sabe que é muito complicado tomar decisões de negócio se
- você nem ao menos sabe o que está acontecendo.
-
----
-
-A deco.cx se classifica como uma Composable DXP, ou seja, a gente permite que
-você crie experiências digitais, compondo também com os melhores serviços e
-produtos que vão te ajudar a entregar essas experiências totalmente
-personalizáveis em cima de qualquer plataforma de comércio. No final do dia, o
-nosso esforço aqui é permitir que as marcas consigam aproveitar a arquitetura
-moderna do Headless e do Composable, mas sem a dor de cabeça de ter que
-construir isso tudo por conta própria.
-
-A grande mudança de paradigma que a deco.cx está propondo para o mercado é que
-você comece a compor a sua experiência digital e as suas soluções de comércio
-pela deco.cx, ou seja, pelo frontend que é onde os clientes realmente têm
-contato com a sua marca e que eles entendem a sua oferta de valor. O nosso
-entendimento é que não adianta nada você ter um backend bem resolvido se você
-não está vendendo, se você não tem uma experiência de compra, se a sua conversão
-não está nos níveis que a sua marca poderia alcançar.
-
-Então a nossa sugestão é o seguinte você começa pela deco.cx você monta o seu
-frontend, ele fica altamente performático, rápido e evoluindo sempre. Depois,
-tendo a deco.cx e a conversão como referência, você vai escolhendo os outros
-serviços que vão compor essa solução com o melhor de cada categoria que você
-está buscando. A gente consegue entregar isso porque a deco.cx empacotou várias
-soluções, vários pequenos produtos e recursos que permitem você, na verdade, ter
-a melhor solução hoje de mercado para o seu front.
-
-Ele primeiro é muito rápido. Ele está numa infra estrutura global na edge, e ele
-tem ferramentas para você fazer teste AB, para criar jornadas por audiência, e
-aí sim, evoluir sem limites e sem depender de nenhuma plataforma de comércio.
-Livre para levar o seu código para onde você quiser. Com os nossos loaders que a
-gente já apresentou na Parte 1, em breve o nosso sistema de workflow, você não
-só vai poder consumir dados da plataforma de comércio e de outros players de
-mercado que sejam do seu interesse, como também você vai poder integrar dados
-com fornecedores que você quiser, como você quiser.
-
-Além disso, a nossa estratégia de empacotar essas soluções, ou seja, criar um
-bundle onde você tem uma camada de criação de experiências digitais com uma
-infraestrutura de alto desempenho, e workflows que integram com outros serviços,
-é permitir que você aproveite a solução e você aproveite a arquitetura headless
-sem aumentar o seu custo e sem ser um risco para a sua operação que você não
-consegue gerenciar. De novo, a gente está fazendo o Headless sem a dor de
-cabeça.
-
----
-
-Então chegou a hora da revisão. Você vai ter aqui na tela um
-[link](https://forms.gle/KUspvtoXnA2ss6QQA) para responder algumas perguntas
-sobre o que a gente falou. Agora lembrando que quem participar vai conseguir o
-certificado ao final do curso. Então as perguntas são:
-
-1. **O que é Headless?**
-2. **Quais são as principais vantagens da arquitetura Headless?**
-3. **Quais são os maiores riscos de implementar o Headless?**
-4. **Quantos % da sua base de clientes estaria dentro do perfil para aproveitar
- a arquitetura Headless nos próximos dois anos?**
diff --git a/docs/treinamento-comercial/introducao/pt.md b/docs/treinamento-comercial/introducao/pt.md
deleted file mode 100644
index b71c6144..00000000
--- a/docs/treinamento-comercial/introducao/pt.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-description: Introdução - Treinamento comercial deco.cx - Sites ecommerce de alta performance
-since: 1.0.0
----
-
-VIDEO
-
-**E aí, pessoal, tudo bem?**
-
-Sejam bem vindos ao primeiro treinamento comercial da deco.cx para as nossas
-agências parceiras. Sou Rafael! Se você não me conhece, pode me chamar de Baby.
-Todo mundo me conhece como Baby. Eu sou co-fundador da deco.cx, junto com Lucis
-e com o Gui, e vai ser um prazer participar dessa jornada aqui junto com vocês.
-A gente montou esse conteúdo para que você tenha em um só lugar tudo o que você
-precisa para você prospectar novos clientes, ou para você entender quais são
-exatamente os principais benefícios da deco.cx.
-
-A ideia é que você ganhe muito dinheiro com a gente. Que você cresça seu
-portfólio, que você deixe seus clientes mais felizes. E a gente vai mostrar tim
-tim por tim tim como que você vai fazer isso. A gente pensou tudo com muito
-carinho. Mas é claro que isso aqui é só uma primeira versão. Então, se você
-tiver qualquer tipo de feedback a contribuir, você vai vir aqui em algum lugar
-dessa tela, um QR Code, um link.
-
-Por favor, contribua, mande feedbacks. A gente vai interagir continuamente. A
-ideia é que esse conteúdo evolua e a gente lance novas versões desse material de
-tempos em tempos. Tudo pronto? Pega o caderninho, pega uma caneta, pega um copo
-d'água ou uma cerveja e vamos começar.
diff --git a/docs/treinamento-comercial/nichos-de-clientes/pt.md b/docs/treinamento-comercial/nichos-de-clientes/pt.md
deleted file mode 100644
index d1de87f3..00000000
--- a/docs/treinamento-comercial/nichos-de-clientes/pt.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-description: Treinamento Comercial - Nichos de Clientes
-since: 1.0.0
----
-
-VIDEO
-
-Legal! Agora você sabe dos benefícios da deco.cx, conhece o nosso produto,
-conhece o nosso discurso de vendas. Você já sabe tudo o que você precisa para
-começar a prospectar. Então vamos falar de como você vai conseguir seus
-primeiros clientes. Vamos lá!
-
-## O primeiro passo é você saber quais nichos de clientes tem convertido melhor aqui na deco.cx
-
-> **O cliente mais óbvio é aquele cliente que está no VTEX Legado, no CMS. Ele
-> está interessado ou cogitando migrar por IO.**
-
-Boa parte das marcas, eu diria que 50% (não é um dado oficial, mas é um faro),
-50% das marcas não migraram para o IO ainda, então tem um mercado grande ali
-dentro dos clientes da VTEX. Se você for uma agência VTEX, você vai saber do que
-a gente está falando.
-
-E esses clientes já projetaram um budget para fazer essa migração, seja em 2023,
-seja em 2024, todo mundo está esperando que a VTEX pare em algum momento de dar
-suporte para o VTEX CMS, e fique dando suporte apenas para o VTEX IO. Então os
-varejistas, as marcas, já estão considerando fazer essa migração.
-
-A grande vantagem aqui é que a deco.cx é muito superior à performance que o IO
-entrega. Você não vai encontrar uma loja no IO performando melhor do que uma
-loja na deco.cx. Isso significa que os clientes da deco.cx, eles aumentam muito
-mais a taxa de conversão do que os clientes que estão no VTEX IO. Isso sem falar
-de todos os benefícios de teste AB, de personalização por audiência, de CMS drag
-and drop, de componentes da biblioteca, de ser open source, de não precisar se
-preocupar com infraestrutura, e por aí vai. Então a deco.cx oferece uma solução
-superior ao que o cliente teria no VTEX IO.
-
-Esse é o cliente mais fácil de migrar, mais fácil de convencer. Nós substituímos
-o CMS, nós substituímos o IO. Não faz diferença pra gente se o cliente está no
-CMS, está no IO, está em qualquer outra solução de frontend. Então esse cliente,
-especificamente ele é muito fácil de trazer.
-
-Se você tiver dúvida de como conduzir essa conversa, chama pra uma reunião
-comercial. A gente conduz o pitch junto com você, você pega quais são os
-principais pontos, aí você segue.
-
-> **Outro nicho de cliente muito fácil de converter é aquele que já está
-> ativamente reclamando de performance.**
-
-Então vamos dizer que tem aqueles clientes que não sabem do impacto de
-performance, não sabem o quanto que uma loja rápida afeta ou pode afetar nas
-suas vendas, mas tem aqueles clientes que já sabem que performance é um
-requisito fundamental para aumentar a taxa de conversão. Eles estão já
-incomodados com a nota do PageSpeed Score, ou com não estar passando no Core Web
-Vitals.
-
-Aí esse cliente é moleza. Se você rodar um ranking hoje de lojas, nós temos isso
-disponível nos nossos assets. Você vai ver que a loja mais rápida do Brasil,
-para aqueles clientes que tem um pouco de tráfego, é a Lojas Torra.
-
-Então é só você dizer que a deco.cx está construindo os e-commerces mais
-rápidos, você mostrar um case real, você rodar o PageSpeed da nossa loja tema,
-você rodar o PageSpeed dos nossos clientes, comparar com o que ele já tem hoje,
-comparar com aquilo que ele já encontrou no mercado. E aí rapidamente ele vai
-entender que se ele quiser a performance, a melhor solução para isso é a
-deco.cx.
-
-> **Um outro nicho interessante, aquele cliente que está considerando no futuro
-> migrar de plataforma.**
-
-Acontece muito isso. A gente fala assim _"Ah, nós somos uma solução integrada à
-VTEX integrada à Shopify."_ Aí o cliente fala _"Mas eu estou considerando sair
-dessa plataforma, ir para uma plataforma no ano que vem ou no final desse ano,
-ou daqui a dois anos. Então eu não quero uma solução que dependa da
-plataforma."_ A gente fala _"Cara, nesse momento, a melhor decisão que você tem
-é vir para deco.cx"_.
-
-Porque já que a deco.cx é integrada a qualquer plataforma de comércio do
-mercado, no futuro, quando você for migrar de plataforma, seu site já está
-pronto. É só você trocar os conectores, é só você trocar os loaders. Seu site já
-vai estar rápido, performático, no seu design, com seus componentes de
-interface, tudo onbrand, com as suas cores, com a sua tipografia, e com todas as
-ferramentas de CRO que você precisa. Agora é só você trocar o seu catálogo,
-trocar o seu OMS, as suas integrações na camada de lógica e de negócios, que o
-seu site vai continuar funcionando facilmente.
-
-A gente demonstra isso abrindo uma prateleira de produtos numa interface, num
-cliente nosso, por exemplo, e trocando da VTEX para Shopify, trocando loader e
-mostrando como é que é fácil usar o mesmo site implementado na deco.cx e levar
-ele de uma plataforma para outra. Bem simples. Você já deve ter visto essa demo
-nossa, se você já acompanhou algum pitch comercial que a gente já fez.
-
-Legal em alguns clientes maiores, tipo enterprises ou grupos de marcas, tem
-aqueles que:
-
-> **Já tentaram ir pro Headless, seja com a VTEX FastStore, seja com uma solução
-> própria de frontend. Enfim, tem aquelas empresas que já experimentaram
-> Headless e traumatizaram.**
-
-Porque ir para o Headless nem sempre é fácil. Você precisa selecionar um monte
-de serviço, orquestrar uma infraestrutura, cuidar da consistência dos dados,
-garantir que os dados estão correspondendo a todos os data sources. Isso não é
-uma tarefa trivial. Então muita gente tenta ir pro Headless, fica um ano, um ano
-e meio, dois anos tentando implementar Headless, não consegue, o site fica
-lento, começa a aparecer um monte de bugs e aí o cliente acaba desistindo dessa
-arquitetura.
-
-O que a gente está oferecendo na deco.cx são todos os benefícios que ele teria
-no Headless, ou seja, ele vai ter performance, ele vai ter total capacidade de
-customização, ele vai ter extensibilidade para criar novas features no admin que
-ele queira, por exemplo, ele vai ter acesso total ao código. Então ele vai ser
-dono do frontend dele ou da camada de digital experience.
-
-Isso significa que a deco.cx é um jeito fácil, barato e muito mais rápido de
-você implementar uma arquitetura Headless. Então o cliente tem todos os
-benefícios sem ter os custos.
-
-Agora indo para outro espectro, falando dos clientes menores:
-
-> **As lojas de SMB que não tem tanto tráfego e aí a capacidade de aumentar
-> performance não afeta tanto nas vendas**.
-
-Porque não tem tráfego fica mais difícil de fazer teste AB, tem pouco volume pra
-poder ser conclusivo nos experimentos.
-
-Nesse caso, qual é a maior vantagem da deco.cx?
-
-A maior vantagem da deco.cx é a autonomia que a gente gera pra esse pequeno
-cliente evoluir sozinho, sem depender de horas de desenvolvedores. Ele pode
-entrar no nosso CMS, ele pode editar, montar, criar uma landing page, ele tem
-template no nosso [deco.hub](https://www.deco.cx/pt/hub), ele tem blocks na
-nossa library, então ele consegue evoluir o site muito rápido.
-
-É muito importante para um cliente pequeno a capacidade dele iterar, dele
-experimentar, dele testar algo novo. E é exatamente isso que a deco.cx
-proporciona
-
-> **Tem um caso específico de cliente que tem operações multiplataformas.**
-
-Por exemplo, a ZeeDog. A ZeeDog é cliente nosso. Nos Estados Unidos eles tem uma
-operação em Shopify. No Brasil eles tem uma operação de e-commerce em VTEX. É o
-mesmo site, só que nos Estados Unidos puxa catálogos da Shopify, e no Brasil
-puxa catálogos da VTEX. Hoje eles tem duas agências, uma agência pra cada
-operação. Eles tem um catálogo diferente. Eles tem que fazer duas manutenções de
-site.
-
-O que a gente tá proporcionando pra eles, é eles poderem unificar a experiência
-na deco.cx. Então eles constroem um site na deco.cx e fazem manutenção no mesmo
-site, evoluem uma versão do site. Só que nos Estados Unidos esse site está
-conectado à Shopify e no Brasil está conectado à VTEX. Fica muito mais barata a
-operação desse cliente. É uma vantagem maravilhosa.
-
-Isso acontece também, por exemplo, em grupos de marca. Por exemplo, o Grupo
-Dass. Eles tinham a Salesforce na New Balance, eles tinham Oracle na Osklen,
-eles tinham VTEX na Umbro e na Fila. Para esse caso, a deco.cx é maravilhosa.
-Eles jogam toda a experiência pra deco.cx, e administram em um lugar só todos os
-sites, independente de qual plataforma cada um tá.
diff --git a/docs/treinamento-comercial/objecoes/pt.md b/docs/treinamento-comercial/objecoes/pt.md
deleted file mode 100644
index b2f05175..00000000
--- a/docs/treinamento-comercial/objecoes/pt.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-description: Treinamento Comercial - Objeções
-since: 1.0.0
----
-
-VIDEO
-
-Nem tudo é maravilhoso. Às vezes a gente recebe algumas objeções dos clientes.
-Apesar da gente fazer um pitch maravilhoso, um deck lindo. Mostre o produto,
-mostre case, o cliente geralmente traz algumas objeções. Essas objeções, se eu
-for selecionar, são sempre as mesmas.
-
-Então vamos passar por elas. Eu queria que vocês soubessem também como responder
-as principais objeções que a gente recebe.
-
-1. A primeira objeção é: _"Ah, mas a deco.cx.cx é só uma startup. Vocês acabaram
- de começar. É muito arriscado eu migrar pra vocês."_*
-
-O que a gente responde para esse cliente?
-
-A gente responde que: apesar da deco.cx.cx ser uma empresa que tem menos de um
-ano de existência, o nosso time está trabalhando com esse mesmo problema de
-digital experience há quase dez anos, há mais de dez anos.
-
-O Gui, por exemplo, meu sócio, foi a pessoa que cuidou dessa frente dentro da
-VTEX, quase toda a carreira dele. O Gimenes, que o nosso Staff Engineer
-trabalhou liderando a FastStore que era um problema muito similar ao problema
-que a gente está atacando aqui.
-
-Enfim, por todo o time da deco.cx.cx você vai encontrar pessoas que estão há
-anos pensando nesse problema e são engenheiros de nível mundial. Trabalharam na
-Microsoft, como o Candeia, trabalharam na Amazon, como a Muri. Vieram de
-Stanford, estudaram na École Polytechnique. A gente tem um time que é o que tem
-de mais sofisticado em termos de engenharia, design, time de produto no mercado,
-eu diria.
-
-Isso traz muita experiência pra dentro. Então, apesar de a gente ser uma
-startup, a gente tem muita experiência nesse problema que a gente tá atacando.
-
-O segundo ponto é que em qualquer momento, se você, se o cliente quiser desistir
-da deco.cx.cx, ou se porventura a deco.cx.cx parar de existir, o código do
-cliente continua funcionando em outra infraestrutura.
-
-Significa que o cliente pode pegar o código dele, cancelar a deco.cx.cx e a
-gente não tem nada que impede ele de cancelar de um mês para o outro. Ele faz um
-cancelamento, pega o código, leva para uma infraestrutura, deploya em outro
-lugar e a loja vai continuar funcionando de forma performática. Talvez não tão
-performática quanto na deco.cx.cx, mas vai estar funcionando integrado. à
-plataforma de comércio, obviamente vai perder o teste AB, vai perder o CMS, vai
-perder todas as nossas features, mas o código da loja é do cliente, e ele leva
-para onde ele quiser. Isso reduz bastante a objeção.
-
-2. Outra objeção que aparece com bastante frequência é: _"Mas por que eu vou
- pagar deco.cx.cx se eu já tenho uma solução de frontend na plataforma que
- está inclusa no preço? Por que é que eu vou pagar um valor extra?"_
-
-A melhor resposta pra essa objeção é quando que você está deixando de ganhar não
-vindo para deco.cx.cx.
-
-O custo de oportunidade, custo capital é muito alto. Porque se a gente está
-falando de um cliente que tem performance 20, a gente tem a possibilidade de
-levar ele para a performance 90, a gente está falando de um potencial de
-aumentar 50%, 100%. Tem cliente que aumentou 175% da taxa de conversão. Isso é
-um ganho de venda muito grande para deixar na mesa.
-
-Então, o primeiro primeiro passo é fazer o cliente refletir o quanto que ele
-deixa ao ele não vir para deco.cx.cx, tá? Não é que ele não vai ter nenhum ganho
-dentro da plataforma de comércio, mas é que o teto da plataforma de comércio com
-tecnologia proprietária é muito baixo. Ele não consegue chegar no teto que a
-deco.cx.cx entrega e não consegue chegar no potencial dele.
-
-A deco.cx.cx vai colocar ele no limite do que é possível chegar em termos de
-taxa de conversão por performance. E além disso tudo, aí a gente vai entregar
-features que a plataforma de comércio não entrega, e que se ele fosse contratar
-um Optimizely da vida para fazer teste AB, ele já vai pagar um plano inicial de
-pelo menos U$3.000,00 por mês.
-
-Então a gente está gerando acessibilidade, trazendo o que tem de mais
-sofisticado em termos de web development, de operação de negócios digitais,
-operação de e-commerce. Funcionalidades que só as grandes enterprises, grandes
-grupos, conseguem trazer para os seus negócios. A gente está trazendo isso para
-qualquer tamanho de cliente poder fazer teste AB, poder recortar audiência,
-poder analisar dados, poder compor experiências com blocos reutilizáveis. Tudo
-isso é algo sofisticado que até então, fora do Brasil, grandes empresas são os
-únicos que conseguem operar do jeito que funciona melhor.
-
-3. Uma objeção clássica é: _"Eu estou sem bug para poder implementar deco.cx.cx
- esse ano. Eu estou sem dinheiro para pagar o custo de implementação. Essa
- mensalidade eu não estava considerando dentro do meu budget."_
-
-Isso parece com bastante frequência.
-
-Duas coisas para pensar sobre isso.
-
-Primeiro, o quanto que a sua empresa está deixando de vender porque você tem um
-site lento, que você não consegue evoluir na velocidade que você poderia. É o
-primeiro ponto.
-
-O segundo é _"você já pensou em implementar um template da deco.cx.cx?"_ A gente
-tem vários templates pré construídos no nosso
-[deco.cx.hub](https://www.deco.cx.cx/pt/hub), você pode simplesmente trocar
-logo, trocar as cores, trocar o espaçamento, fazer com que o seu site funcione
-muito rapidamente. Isso vai reduzir bastante o custo de implementação, o custo
-de migração. Talvez não fique pixel perfect, bespoke como você gostaria o seu
-site, mas é o suficiente para você começar a deixar a sua loja rápida, evoluir
-continuamente e deixar suas vendas com a taxa de conversão no talo.
-
-Tem uma terceira opção que é você oferecer para esse cliente uma implementação
-no risco.
-
-A objeção dele geralmente não é a mensalidade da deco.cx.cx, mas é o custo de
-implementação da agência. Se você estiver confiante — espero que você esteja até
-aqui — oferece para ele o seguinte:_"Eu vou implementar sua loja, vou demorar
-dois meses para implementar. Você vai me pagar R$X.000,00"_ — acorda um valor
-prévio — se der certo, se ele gostar, se a venda aumentar, deixa um mês a loja
-ligada pode fazer um teste AB com 50% do tráfego, dando tudo certo, ele quer
-seguir com a deco.cx.cx, ele vai ver que a taxa de conversão dele vai aumentar
-bastante. Aí ele paga retroativamente o valor da implementação, ou seja, ele só
-paga se der certo.
-
-Isso ajuda bastante a gente, que não só a mensalidade da deco.cx.cx ele vai
-pagar depois de go live, mas a própria serviço de implementação ele vai pagar e
-depois do go live. Isso reduz muito a objeção.
-
-4. Aí vem uma pergunta que é: _"Vocês colocam garantia de performance em
- contrato?"_ ou _"Eu só fecho com vocês se vocês colocarem garantias de
- performance em contrato. Estão falando de PageSpeed acima de 90. Se bater o
- 88 eu não pago. Pode ser assim?"_
-
-A gente a priori não faz isso. A gente tem que explicar pro cliente por que a
-gente não faz.
-
-A gente não faz, porque, no final das contas, a decisão de deixar o site
-performático ou não é do próprio cliente. No caso da ZeeDog, por exemplo, a
-ZeeDog priorizam muito mais a capacidade de customização do que de performance.
-
-E a nota do PageSpeed Insights nem é necessariamente o dado mais relevante para
-afetar a conversão. Por vezes, a nota mais relevante é a do Core Web Vitals, que
-são os dados reais de navegação. O PageSpeed Score — como vocês viram no módulo
-que o Leandro apresentou — ele apresenta simplesmente um teste de laboratório
-com um dispositivo simulado. Às vezes aquela nota final, ela nem é tão relevante
-para impactar a performance.
-
-Um site pode ter PageSpeed 38, 40, 45, mas tá passando no Core Web Vitals. Ou
-seja, a experiência de navegação do cliente final pode estar sendo maravilhosa,
-mesmo com uma nota baixa.
-
-Ou seja, se o cliente colocar um vídeo de 4K, um streaming da Netflix no banner,
-vai ser muito difícil a gente garantir a performance. Isso é uma decisão do
-cliente. A gente não pode garantir.
-
-O que a gente pode colocar em contrato é que a gente sempre vai oferecer
-orientação para o time implementador. Então a gente orienta as melhores práticas
-de performance, seja na nossa documentação, seja no suporte, quando o engenheiro
-que está implementando a loja pede ajuda, os nossos engenheiros ajudam a dar
-dicas de como que pode otimizar loja. E outra coisa que a gente coloca em
-contrato também é que a gente pode oferecer um benchmarking. Ou seja, a Lojas
-Torra está com performance no talo, está voando. Se a Lojas Torra conseguiu,
-você também consegue.
-
-A nossa loja template, a nossa loja tema, ela está carregando em menos de um
-segundo. Se a gente conseguir com a nossa loja tema, você também consegue com a
-sua. Isso garante tranquilidade para o cliente de que pelo menos um benchmark
-ele vai ter. É muito fácil vender performance sem demonstrar que vai conseguir
-implementar uma loja super rápida. Não é o nosso caso.
-
-5. Uma última pergunta que aparece com muita frequência é: _"Poxa, mas eu vou
- ter que treinar todo o meu time numa nova tecnlogia?"_
-
-Quando o perfil do cliente não é muito early adopter, ele não é tão aberto à
-inovação, ele geralmente fica mais resistente a ter que mudar todo o time,
-gerenciar um novo produto.
-
-Nessas horas é só tranquilizar o cliente. Como vocês sabem, nosso admin é super
-fácil de mexer, super fácil de aprender. A gente tem uma documentação
-assíncrona, tem vídeos do produto que a gente pode mandar.
-
-Mas sim, se o cliente quiser, a gente vai até ele, a gente marca uma call, a
-gente treina um time de negócio, o time de marketing, para eles saberem extrair
-o melhor do nosso produto. Podemos fazer isso com a agência de vocês também.
-
-E o time técnico, caso ele tenha um dos jogadores internos ou caso ele queira
-fazer a própria implementação, e vocês vão cuidar da evolution. Ou o contrário,
-ele faz o evolution, mas vocês vão fazer implementação. Seja qual for o caso,
-convida o cliente, convida o time técnico do cliente a participar do nosso
-hackathon ou participar do nosso deco.camp, ou participar das nossas iniciativas
-de treinamento, porque ele vai ver o quão fácil é.
-
-A gente nunca viu um desenvolvedor — mesmo de faculdade — júnior, estagiário,
-que está começando a aprender a programar, que saiu de um bootcamp, a gente
-nunca viu ninguém falar _"Nossa, como é complicado não conseguir entender
-nada."_ Muito pelo contrário, pessoas que participam de treinamento de 3 horas,
-de 6 horas, que acabaram de começar a aprender a codar na deco.cx, saem falando
-como é fácil. _"Em pouco tempo eu dominei. Estou conseguindo fazer um projeto
-completo com essa tecnologia."_ É muito simples de aprender.
-
-Então tranquiliza o cliente, fala que a gente faz treinamentos recorrentes. Todo
-mês, tem. Tem documentação assíncrona. E sim, se ele quiser a gente pode até ele
-fazer algo super personalizado pro time dele, para ele se tranquilizar, e fechar
-o contrato com vocês.
diff --git a/docs/treinamento-comercial/produto/pt.md b/docs/treinamento-comercial/produto/pt.md
deleted file mode 100644
index 0b722973..00000000
--- a/docs/treinamento-comercial/produto/pt.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-description: Treinamento Comercial - Conheça o produto da deco.cx
-since: 1.0.0
----
-
-VIDEO
-
-Transcrição em breve
-
-Tarefa: **Grave um Loom de até 5 minutos fazendo uma demo do produto do seu
-jeito.** Comece criando um site para sua demo. Mande o link nesse
-[formulário](https://forms.gle/WksPs5Lxp6tSWcRZ6). Esse exercício é privado,
-outros alunos **não** terão acesso ao seu vídeo.
diff --git a/docs/treinamento-comercial/proximos-passos/pt.md b/docs/treinamento-comercial/proximos-passos/pt.md
deleted file mode 100644
index 7a8bbcd6..00000000
--- a/docs/treinamento-comercial/proximos-passos/pt.md
+++ /dev/null
@@ -1,142 +0,0 @@
----
-description: Treinamento Comercial - Próximos Passos
-since: 1.0.0
----
-
-VIDEO
-
-Pessoal, infelizmente estamos chegando ao fim.
-
-Se você chegou até aqui, obrigado. Não foi curto, mas espero que vocês tenham
-gostado. Antes da gente finalizar, eu queria terminar falando dos nossos
-próximos passos e como que vocês podem se preparar para você alavancar o futuro
-do nosso produto.
-
----
-
-1. A primeira coisa que eu queria falar é que a gente está lançando a versão
- Whitelabel da deco.cx.
-
-O que significa isso? Significa que você vai poder pegar o nosso produto, pegar
-a nossa plataforma, trocar logo, trocar as cores, tematizar o nosso admin e
-vender como se fosse seu. Então você não precisa mais vender deco.cx, a
-plataforma.
-
-Você pode vender para os seus clientes um produto como se fosse seu, um produto
-seu que é o nome da sua agência PageBuilder ou a sua agência criador de site de
-dentista ou pedido de restaurante. Você cria o serviço que você quiser em cima
-da infraestrutura, e da plataforma CMS, de teste AB da deco.cx.
-
-Aí agora o céu é o limite, porque não só você pode tematizar a nossa interface,
-colocar a sua logo, vender com a sua identidade, mas você também pode adicionar
-novas funcionalidades. O que eu tô querendo dizer, é que com a deco.cx
-Whitelabel você vai poder ter uma plataforma Software as a Service (SaaS) que
-seja da sua agência, da sua empresa. Não necessariamente, você é uma agência
-assistindo esse conteúdo.
-
-Então, se você sempre quis ter um modelo escalável, um produto digital para você
-poder comercializar com os seus clientes, ter receita recorrente, essa é a sua
-hora montar uma landing page divulgando o seu produto. Você pode começar
-vendendo só o CMS, só o Page Builder, só um Site Builder, só um Frontend as a
-Service, uma DXP. Você escolhe como você quer vender, você empacota do seu jeito
-e agora você tem um produto da deco.cx para comercializar com o seu próprio
-ecossistema e você faz o pricing que você quiser.
-
-Muito em breve a gente vai trazer uma tabela de preços que é bem convidativa
-para você começar. Aproveita, pega o Whitelabel, tematiza, começa a oferecer
-pros seus clientes, porque você vai se surpreender, beleza?
-
-2. Segundo ponto a gente está lançando um sistema próprio de workflows.
-
-O que significa que você vai poder criar qualquer tipo de middleware. Você pode
-criar loaders. Você pode criar funções que conectam serviços diferentes e você
-pode conectar o ERP à plataforma de comércio, usando a deco.cx. Você vai poder
-conectar o CRM diretamente ao nosso frontend. Você pode conectar uma CDP a um
-CRM.
-
-Você vai poder fazer assim muito parecido com o que você tem numa Wavo, com o
-que você tem no Zapier. Você vai poder usar um nosso próprio sistema de criação
-de integrações, nosso próprio sistema de workflow e você vai voar com isso,
-porque você não depende mais agora de sistema de terceiros.
-
-Qualquer customização, qualquer integração você vai fazer dentro da deco.cx, com
-uma infraestrutura global escalável, super rápida, cacheada, com o que tem de
-mais sofisticado para você oferecer aos seus clientes estabilidade entre
-arquitetura, entre serviços que ele escolheu.
-
-Fique ligado já já a gente lança o nosso sisteminha de workflows.
-
-3. O terceiro ponto: a gente tá lançando o
- [deco.hub](https://www.deco.cx/pt/hub)
-
-O [deco.hub](https://www.deco.cx/pt/hub) vai ser um marketplace da deco.cx que
-já está quase indo pro ar, acho que na semana que vem. Se bobear, quando você
-está assistindo esse vídeo já está publicado, já tá live.
-
-Mas o [deco.hub](https://www.deco.cx/pt/hub) vai ser um marketplace de blocos,
-ou seja, você vai poder comercializar, vender subscription, assinatura de
-template de loja, templates de site, landing pages, integrações, serviço. Você
-vai poder ter a página da sua própria agência, listar todos os seus serviços no
-nosso marketplace e comercializar para toda sua rede de contatos, para todo o
-nosso ecossistema, para toda a nossa comunidade, para todos os nossos clientes.
-
-Agora a deco.cx está se tornando um novo canal de vendas para a sua agência.
-Para você não se preocupar em prospectar, a gente vai estar trazendo leads para
-você. Basta você criar o que você quiser dentro do nosso marketplace e
-next-next-finish as pessoas vão instalar, vão trazer para as próprias lojas, vão
-pagar uma assinatura ou um modelo de "pague uma vez e use para sempre". Você
-decide como você quer comercializar.
-
-Isso vai estar disponível para todos os clientes da deco.cx já já, e para todas
-as agências parceiras. [deco.hub](https://www.deco.cx/pt/hub)
-
-4. Assim como todo o mundo, nós não somos diferentes. Estamos trazendo features
- de otimização por inteligência artificial para dentro da deco.cx.
-
-Você vai começar super simples, como conecte a OpenAI, o ChatGPT, para você
-poder criar conteúdos, traduzir páginas, otimizar alguma página para alguma
-audiência específica e vai até te ajudar no serviço de implementação.
-
-Então você vai poder criar landing page do zero para recortar audiências por
-inteligência artificial, vai encontrar oportunidades de otimização para seus
-clientes usando a nossa AI.
-
-Fica ligado que já já não só você vai poder criar páginas, criar conteúdos,
-otimizar conteúdos usando a sua força de trabalho, mas você encontra os seus
-funcionários quando o seu time estiver dormindo, vai ter um robozinho de
-inteligência artificial, otimizando o site dos seus clientes, otimizando a sua
-conversão e fazendo com que os seus clientes vendam muito mais.
-
-Fique ligado!
-
-5. E por fim, quinto ponto: já já a gente vai lançar features integrados na
- nossa plataforma de multi-língua e de multi-currency, ou seja, multi-moeda.
-
-Você vai ter soluções nativas na deco.cx para você oferecer para os seus
-clientes, que são muito úteis, especialmente no mercado europeu. Se você pensa
-em prospectar marcas na Itália, em Portugal, na Espanha, no Reino Unido, na
-França, são lugares que demandam e-commerces que tem um suporte multi-língua e
-multi-currency, e agora esse suporte vai estar nativo na deco.cx.
-
-A gente está botando a nossa primeira loja no ar, que eu não posso divulgar qual
-é, infelizmente, mas já já vocês vão ver case com o suporte nativo a isso. E a
-partir de então você vai estar disponível para todos os nossos parceiros, para
-todos nossos clientes.
-
-Várias plataformas de comércio sofrem com isso. Com esse suporte. O catálogo é
-super difícil de atualizar, super difícil de traduzir, super difícil de lidar
-com localization, e você vai encontrar todas as ferramentas dentro da deco.cx.
-Vai ajudar bastante você trazer novos clientes para o seu negócio.
-
----
-
-Beleza pessoal? Por enquanto é só. Obrigado pela atenção! Obrigado por terem
-chegado até aqui.
-
-Conto com o feedback, respondam os formulários, façam exercícios, revejam esse
-conteúdo quantas vezes vocês quiserem, mande para os amigos, para o novo time,
-coloque no onboarding, faça como você achar melhor. Qualquer dúvida, estamos à
-disposição no Discord, no Whatsapp, no telefone, por cartas, por um sinal de
-fumaça, como você achar melhor.
-
-Muito obrigado na próxima. Valeu!
diff --git a/docs/treinamento-comercial/qa-comercial/pt.md b/docs/treinamento-comercial/qa-comercial/pt.md
deleted file mode 100644
index e3ee5dd8..00000000
--- a/docs/treinamento-comercial/qa-comercial/pt.md
+++ /dev/null
@@ -1,320 +0,0 @@
----
-description: Q&A comercial - deco.cx
-since: 1.0.0
----
-
-VIDEO
-
-Bom, legal A gente não é ator, mas acho que foi suficiente. Estou aqui com o
-Leandro ainda e queria discutir com vocês o tipo de conversa que aparece quando
-a gente encerra essa apresentação comercial.
-
-Tem algumas dúvidas que são muito recorrentes, que a gente sempre tem que
-responder. Eu queria passar por elas com vocês. Vocês podem checar na nossa
-documentação uma lista de um monte de perguntas com respostas que a gente tá
-sempre adicionando novas perguntas. Então, se tiver alguma coisa que você quer
-saber específica, manda pra gente que a gente vai aumentando essa base de dados.
-
-E aí, Leandro? Qual é a primeira pergunta que a gente mais responde?
-
----
-
-**Eu estou no CMS Legado. Eu estou pensando em ir para o IO, de deco.cx funciona
-no Legado tanto quanto no IO?**
-
-R: Então essa pergunta é clássica. Geralmente a pessoa demora para entender que
-nós substituímos a solução por completo do frontend da plataforma de comércio.
-Então a resposta é na linha de a gente está substituindo o VTEX IO, a gente tá
-substituindo a FastStore, está substituindo o VTEX CMS. Então pra gente não faz
-a menor diferença se o cliente está no Liquid, se o que a gente tá no frontend
-da VNDA, se ele está no frontend do IO, do Legado, que a gente vai substituir
-toda essa solução pela deco.cx.
-
----
-
-**Então estamos vendo que no dia a dia eu vou subir os banners na deco.cx e eu
-vou continuar gerenciando os produtos ainda no admin da VTEX. É isso mesmo? Eu
-entendi certo? Eu consigo fazer agendamento nesses banners?**
-
-R: É isso mesmo? Eu entendi certo? Eu consigo fazer agendamento nesses banners,
-não é isso mesmo. Na plataforma de comércio você vai criar essas novas coleções,
-você vai criar produtos, vai trocar foto de produto, descrição, preço, vai ver
-os pedidos. Mas toda a experiência de navegação vai ficar no seu site, vai ser
-feita dentro da deco.cx. Então você vai criar uma landing page, um banner, vai
-estilizar isso. E sim, você consegue agendar e trocar banner com muita
-facilidade. Eu vou mostrar isso na demo de produto já já.
-
----
-
-**Como ficaria dentro da decoc.x o checkout, o my account? Eu consigo
-personalizar de algum jeito?**
-
-R: A gente não tem hoje uma solução de chec out e de my account, então tudo o
-que vem depois do carrinho é cuidado pela própria plataforma de comércio. A
-gente usa a solução da plataforma de comércio e para isso a gente tem um proxy
-transparente, ou seja para o usuário final, ele não vê essa mudança. A URL
-continua sendo a URL do domínio da loja e toda a personalização do checkout, do
-my account, ela é feita dentro da própria plataforma. Mas como eu falei durante
-a apresentação, a gente tem parceiros de checkout que a gente pode recomendar e
-que são integrados a deco.cx e são integrados à plataforma de comércio e que
-funcionam muito bem. A gente tem recebido bons pushback nos nossos clientes.
-
----
-
-**Uma coisa que eu não entendi é por que eu não vou diretamente para a FastStore
-da VTEX,que é de graça, e eu iria para deco.cx. O que é que vocês tem de
-diferente?**
-
-R: A gente vai falar sobre isso com mais detalhes no módulo deco.cx vs.
-FastStore. De forma geral, a nossa performance é muito superior que a da
-FastStore. O nosso tempo de implementação também é muito menor, porque a gente é
-muito mais simples de implementar. A gente tá demorando menos de dois meses e
-tem projeto em FastStore que demora, às vezes, um ano e meio, dois anos. A gente
-também é agnóstico de plataforma, então quando você vem pra deco.cx você não
-entrega o seu frontend para a plataforma de comércio. Você é dono do seu
-frontend, você leva o seu frontend pra onde você quiser. Isso dá muito mais
-liberdade e te dá um leverage na hora de negociar com a sua plataforma de
-comércio.
-
-Para além de performance, ma deco.cx você tem todas as ferramentas, todas as
-funcionalidades que você precisa para você poder otimizar a sua loja. Então a
-gente não entrega só o site, a gente entrega o CMS, a gente entrega o teste AB,
-a gente entrega a personalização por audiência, a gente entrega tudo o que você
-precisa para o seu site ficar performático ao longo do tempo. Eu já fiz algumas
-tentativas de deixar meu site mais rápido e eu sei que a otimização de imagem é
-importante se você lidar com os escritos.
-
----
-
-**Eu já fiz algumas tentativas de deixar meu site mais rápido e eu sei que a
-otimização de imagem é importante se você lidar com os scripts é importante
-também, e o GTM atrapalha muito. Como é que a deco.cx resolve essas coisas que
-eu já sei que são muito difíceis?**
-
-R: Perfeito! Essa quantidade de assets que a gente chama First Party ou Third
-Party, que é tamanho de imagem, tamanho de vídeo, script de terceiro. Tudo isso
-vai influenciar performance, tá? Mas tem algumas coisas que a gente oferece que
-facilitam a sua tomada de decisão.
-
-Primeiro, que as nossas lojas em produção, elas tem suas equipes de terceiros.
-Elas tem imagem e uma quantidade grande de imagens, e isso não está prejudicando
-performance. Porque nós temos um otimizador de imagem no nosso admin, porque a
-gente proxyeia as imagens de jeito diferente. A gente usa uma CDN para fazer
-caching, então a gente usa o que tem de mais valioso para poder fazer a
-otimização desses assets.
-
-Para GTM, essas tags de terceiros que você mencionou, a gente tem algumas
-opções, você pode usar server-side tagging, a gente pode usar Partytown, um
-serviço que a gente usa para otimizar esse processamento desses, desses pixels,
-desses scripts. Mas enfim, o que você precisa saber é que temos loja em produção
-com tudo isso e elas estão funcionando e no nosso admin você consegue em todas
-as páginas, vou mostrar pra vocês, verificar em tempo real o que cada alteração
-tá afetando na sua performance, no seu tempo de carregamento. Toda mudança que
-você faz de conteúdo de imagem, de tamanho de componente, tudo isso você vê em
-tempo real, o quanto o que está afetando a performance da sua loja, o que te
-ajuda muito a tomar a decisão que você quiser.
-
----
-
-**Vocês tem alguma solução de search? A que eu estou usando agora não me
-interessa, eu acho muito ruim.**
-
-R: A gente não tem uma solução de search hoje. A gente usa API de search que
-você escolher, mas você não precisa usar a API de search da plataforma de
-comércio. Você pode usar, por exemplo, uma Algolia da vida ou um Linx Impulse.
-Você pode escolher qualquer API de pesquisa. A gente só não tem uma API própria
-por enquanto.
-
----
-
-**A minha loja está hoje no VTEX IO e eu já uso algumas customizações da App
-Store, como a Wishlist e o Cashback. Como é que fica isso quando eu vou para
-deco.cx? E as minhas outras integrações como Intellipost, Algolia, isso também
-vai funcionar?**
-
-R: É importante a gente entender exatamente quais serviços, quais customizações
-você está falando. Muitos a gente já tem pronto, outros a gente teria que criar,
-ou que integrar. Via de regra, todas as principais customizações que a gente tem
-na App Store da VTEX, no VTEX IO, como Wishlist ou Cashback, tudo isso já tem na
-deco.cx, já tem isso pronto na nossa biblioteca padrão e é super fácil de
-integrar uma solução nova. Eu nunca encontrei assim um serviço super diferente
-do que aqueles que a gente já tem. Os que a gente sabe que a gente não tem, já
-está mapeado, mas seria legal a gente mergulhar, chamar um engenheiro, chamar
-seu time técnico, entender sua arquitetura pra gente poder ser bem preciso nessa
-resposta. Isso ao longo do processo a gente vai conversar no detalhe.
-
-Tem uma outra coisa: tudo que não tem integração, a sua agência ou o seu
-provedor que você contratou, eles conseguem integrar. A gente tem uma biblioteca
-de loaders, de integradores que é aberta, open source, então você pode
-simplesmente tá faltando alguma integração. Você simplesmente pede pra agência e
-ela cria. Normalmente a gente cria, mas se for uma coisa muito específica pro
-seu caso de uso, por exemplo, você criou um sistema próprio, um backend próprio,
-dá pra integrar com a deco.cx, só precisa criar um integrador personalizado.
-
----
-
-**Eu já trabalho com uma ferramenta de personalização que é Insider. Eu também
-uso outra ferramenta para teste AB, que é o Optimizely, a deco.cx substitui
-essas ferramentas? Não ficou muito claro pra mim.**
-
-R: Pra essa resposta eu preciso entender com especificidade que funcionalidades
-você usa, tipo o Optimizely, ele é uma ferramenta grande, ele tem um monte de
-funcionalidade, a maior parte delas as marcas nem usam. Por exemplo, a Insider.
-A Insider tem uma funcionalidade que nós não temos, que é a CDP, a Customer Data
-Platform, isso a gente não substituiria, mas a Insider funcionaria muito bem
-integrada a deco.cx, porque a gente pode usar os dados do da Insider pra usar
-ferramenta de personalização da deco.cx. A Insider também tem uma ferramenta de
-personalização que seria substituída pela deco.cx, mas a deco.cx não
-substituiria a CDP da Insider. Então depende muito de quais funcionalidades você
-está usando em cada plataforma. De novo, é uma conversa que a gente tem que ter
-com o time técnico. Desenhar arquitetura para poder checar o que você precisaria
-ter na deco.cx funcionando para você conseguir migrar.
-
----
-
-**Em questão de segurança, com normas de privacidade, LGPD. Como é que a deco.cx
-lida com os dados sensíveis do cliente que passa por vocês?**
-
-R: A gente não tem checkout, os dados sensíveis de cartão de crédito, senha,
-eles não passam pela gente. Eles ficam dentro da solução que você escolheu.
-Então os nossos dados, eles vêm de APIs abertas, não tem muitos dados sensível
-que passa pela deco.cx.
-
----
-
-**Eu entendi que vocês são uma startup nova ainda no mercado. O que acontece com
-meus sites se vocês falirem?**
-
-R: Então a gente recebe essa pergunta com alguma frequência. Eu super entendo
-que tem esse risco de lidar com uma startup, mas apesar de ser startup, a gente
-tem um time super senior. O time está fazendo essa tecnologia pela terceira e
-quarta vez, honestamente. Agente já está trabalhando com isso há bastante tempo.
-É por isso que em nove meses de empresa a gente conseguiu evoluir tão rápido e
-ter um produto tão maduro. É porque o time basicamente sabe o que está fazendo.
-Nós não somos marinheiros de primeira viagem, já estávamos nisso há muito tempo.
-
-O segundo ponto é que é legal você saber que a gente está super saudável
-financeiramente. A gente tem investidor, a gente acabou de receber um aporte.
-Então, nesse sentido, o risco nenhum.
-
-E por fim, na nossa tecnologia, apesar de a gente tá rodando a nossa própria
-infra, isso é uma opção. Você pode a qualquer momento cancelar. A gente não tem
-nenhum termo no contrato que te impede de fazer o cancelamento. Você cancela a
-qualquer momento e você pode levar o seu código da loja para deployar ou seja,
-para qualquer outra infraestrutura que você queira. Então nós não estamos
-segurando na deco.cx. E independente de quebrar ou não, se você não quiser mais
-usar deco.cx, você leva o seu site para onde você quiser. E a gente não é uma
-caixa preta que te impede de mexer, ele vai continuar funcionando. Claro que
-você vai perder algumas funcionalidades, você vai perder o nosso CMS, vai perder
-teste AB, você vai perder o nosso analytics, você vai ter que compor outras
-ferramentas para fazer isso e provavelmente vai ser muito mais caro. Mas a
-decisão no final das contas, é sua.
-
----
-
-**Você já tem algum case que você possa me mostrar em produção com loja ativa
-vendendo? Além disso, vocês também conseguem trabalhar com B2B ou marketplace?
-Vocês tem alguma coisa pra me mostrar?**
-
-R: Então a gente tem sim. A gente tem a lojastorra.com.br, a gente tem a
-zeedog.com.br.
-
-Vale dizer que a Zee Dog não é um case especificamente de performance. Ele é um
-case de personalização, é uma decisão do próprio cliente. Eles estavam mais
-interessados em criar uma experiência de design incrível do que em deixar o site
-ultra rápido. A Lojas Torra provavelmente é o site mais rápido do mundo ou o
-ecommerce mais rápido do Brasil, como a gente diz. Eu tenho dito isso por aí.
-Peço pra me mandarem um link de ecommerce mais rápido. Ninguém nunca me mandou.
-Talvez exista. Agora a gente tem mais ou menos uns 30 clientes, implementação em
-três plataformas diferentes. A gente não tem um case, na verdade, B2B, não tem
-nenhum case de marketplace. A gente tá doido pra ter, então se estiver
-interessado na deco.cx, traga e a gente conversa.
-
----
-
-**Como é que funciona o suporte de vocês se precisar de alguma ajuda? Quais são
-os canais que eu posso entrar em contato e qual é tempo de resposta que vocês
-vão me dar?**
-
-R: Então, normalmente a gente tem um canal na nossa comunidade no Discord, é um
-canal pra agência, um canal pro cliente, um canal pra cada projeto em
-implementação. Então a gente cria canais dedicados para aquele projeto.
-Obviamente você tem um suporte@deco.cx. Você pode mandar qualquer solicitação
-por e-mail e nessa altura a gente está muito, muito próximo dos primeiros
-clientes. Então a gente disponibiliza WhatsApp, você pode me ligar? Enfim, a
-gente está super aberto a qualquer canal que funcione para você, basicamente.
-
----
-
-**Pelo que eu tô entendendo, vocês tem uma infraestrutura própria, não é mesmo?
-Então o que está me dizendo é que além de eu ter o risco da plataforma de
-comércio poder cair, a deco.cx também pode ter instabilidades eventualmente
-caindo. É isso?**
-
-R: Sim, a gente tem uma infraestrutura própria e isso pode apresentar alguma
-instabilidade. Isso pode cair, mas a chance de acontecer bem baixa. Nosso
-contrato garante um SLA de uptime, depende do tamanho do seu contrato, mas a
-gente pode conversar especificamente sobre essa cláusula, dado o tamanho do seu
-site, a nossa infraestrutura é a mesmo infraestrutura que é usada atualmente
-pelo Slack, pelo Supabase, pelo Netlify, que são gigantes, que tem bilhões de
-requests por mês, então assim, está servindo a empresas globais gigantescas. Não
-vão ser os nossos ecommerce aqui que vão dar problema. Os nossos clientes
-atuais. Eles já estão operando com alguns milhões de pageviews por mês, então
-não são lojas pequenas, são lojas para grandes e a nossa infraestrutura não
-apresenta nenhum problema, nenhum risco considerável para esse cliente. Eu acho
-que vocês podem puxar eles pra conversar e entender como está a experiência
-deles dentro da nossa infra.
-
-Estar na edge já traz uma redundância pra gente, porque como eu falei, a gente
-tem 35 servidores espalhados no mundo. Então você já tem uma redundância
-natural. Se o servidor de São Paulo traz alguma instabilidade, a gente consegue
-jogar o tráfego para o servidor do Chile, por exemplo. Se por acaso acontecer um
-desastre e o deno deploy, nossa infra cair, a gente é uma redundância para o
-Fly.io. Então a gente tá fazendo o que tem de mais sofisticado em termos de
-infraestrutura e pra não dar problema, inclusive, a gente cacheia por um tempo
-as APIs da plataforma de comércio. Então a gente pode até, inclusive, reduzir
-sua instabilidade da plataforma de comércio hoje em dia. Mas o risco existe. E
-sim, a infraestrutura tá com a gente.
-
----
-
-**Vocês por acaso garantem a performance que vocês estão me prometendo em
-contrato?**
-
-R: A gente não garante performance em contrato no sentido de nos
-responsabilizamos por você ter um site nota 90 no PageSpeed, simplesmente porque
-isso é uma decisão do cliente. No caso da Zee Dog, por exemplo, eles não
-implementaram o site buscando performance acima de 90 a qualquer custo. Eles
-fazem experimentos, eles testam se um vídeo vale a pena, se vale a pena uma
-imagem um pouco mais pesada, se eles criam alguma customização ou adicionam um
-serviço que pode abrir mão de performance por um tempo, mas que vai dar um pouco
-mais de conversão pelo ganho na experiência navegação, então a escolha é sempre
-do cliente. O que a gente oferece em contrato é uma cláusula que nos
-responsabiliza por orientar o implementador, por entregar um site performático.
-Então a gente dá um guia de boas práticas pras agências. Então a gente se
-responsabiliza também por uma referência. Por exemplo, a nossa loja tema, a
-Fashion, ela é uma loja com performance altíssima, funcional, Lojas Torra é uma
-loja que está em produção com performance super alta, então a gente sempre vai
-ter uma referência para você poder fazer um benchmark e você ter acesso às
-melhores práticas.
-
----
-
-Então chegamos a mais um quizz, mais um exercício, você já sabe o que fazer.
-Você vai receber [esse link](https://forms.gle/grvT3LHYPoxa5qd67) aqui na tela,
-você vai acessar e vai responder as perguntas do formulário. Eu vou ler aqui com
-vocês, só pra vocês ficarem curiosas, se estiverem com preguiça de clicar no
-link.
-
-A primeira pergunta é: **E aí, o que é a deco.cx, nas suas próprias palavras?**
-
-A segunda pergunta é: **Como que a deco.cx promove performance?**
-
-A terceira pergunta: **Como que a DECO se diferencia de um CMS Headless?** Essa
-é um pouquinho tricky.
-
-A quarta: **O que a deco.cx oferece para além de performance?** É só
-performance?
-
-E a última pergunta: **Como que é a nossa precificação? Como que a gente dá o
-preço pro cliente final?**
diff --git a/docs/treinamento-comercial/sales-deck/pt.md b/docs/treinamento-comercial/sales-deck/pt.md
deleted file mode 100644
index 07af3ccd..00000000
--- a/docs/treinamento-comercial/sales-deck/pt.md
+++ /dev/null
@@ -1,450 +0,0 @@
----
-description: Sales Deck - deco.cx
-since: 1.0.0
----
-
-VIDEO
-
-Pronto pessoal, se você não conhece a deco.cx e não sabe o que a gente faz,
-chegou a sua hora. Agora a gente vai passar pelo nosso deck comercial com vocês
-e eu vou fazer exatamente como a gente faz com o prospect nosso. Normalmente o
-nosso deck comercial, ele tem uma apresentação, ele tem uma demonstração do
-nosso produto. A gente para normalmente a apresentação no meio para mostrar o
-produto.
-
-No nosso caso aqui eu vou fazer toda a apresentação comercial e depois eu vou
-fazer a apresentação de produto, só pra ficar uns dois bloquinhos de conteúdo
-organizados. Mas você pode pular, pode ir no produto voltar pra cá, faz como
-você achar melhor. Esse deck não é uma versão física, você tem acesso a
-[versão editável](https://docs.google.com/presentation/d/1aZ9-D_Te7Zjs2wVYooYA4IBxjwwJky5I9w8kfjyC9Ak/edit#slide=id.g1e598c3317c_0_22),
-você pode trocar a ordem dos slides, trocar o texto, trocar o conteúdo.
-
-Faz como funcionar melhor pra você. Algumas das partes podem não funcionar para
-sua agência, por exemplo, tem uma parte que a gente fala sobre “nós temos um
-monte de parceiros disponíveis para você implementar a sua loja.” Talvez você
-não queira divulgar que nós temos muitos parceiros disponíveis, porque você está
-vendendo um serviço da sua agência a parte você tira.
-
-Então adapte o deck porque funciona melhor para sua agência. E um detalhe
-importante dependendo de quando você está assistindo essa apresentação, o deck
-pode estar desatualizado, então sempre cheque nesse link aqui se você está com o
-deck novo ou se você está com a versão antiga.
-
-Eu vou conduzir esse deck como se eu estivesse falando com o cliente real,
-exatamente como acontece no nosso dia a dia. E aí para representar o cliente eu
-chamei o Leandro aqui como se ele estivesse vindo da loja X, e ele tivesse
-ouvido sobre a deco.cx pela primeira vez.
-
----
-
-— E aí, Leandro, tudo bem?
-
-— Oi, Baby, tudo bem? como você está?
-
-— Tudo ótimo. Obrigado pelo seu tempo e obrigado pelo seu interesse na deco.cx.
-Será que você podia me falar um pouquinho mais sobre a sua loja? Eu vi que vocês
-são um ecommerce do interior de São Paulo, que tem algumas lojas físicas, vi que
-vocês estão com a loja um pouco lenta. Como é que você acha que a deco.cx pode
-ajudar vocês?
-
-— Isso exatamente. A gente já existe há 30 anos no mercado. A gente tem 70 lojas
-físicas pelo interior de São Paulo inteiro, mas o nosso site agora não está
-performando como a gente gostaria. Eu estou bem incomodado com a lentidão, com a
-dificuldade de mexer, de atualizar. E hoje eu estou no VTEX Legado, no portal da
-VTEX. E eu sei que eu tenho que migrar pro IO, só que eu tô inseguro com isso.
-Eu estou num grupo com outro gestor e os outros amigos meus que tem marcas
-também e operações online. E eles me sugeriram conversar com a deco.cx, e
-entender melhor a solução de vocês.
-
-— Perfeito! Vocês trabalham hoje com um time interno? Vocês tem alguma agência?
-Como é que está isso?
-
-— A gente tem uma agência sim, agência Y, mas cá entre nós, eu não estou lá
-muito satisfeito com o trabalho deles. Eu peço suporte, eles demoram a me
-responder. Às vezes uma mudança simples demora duas semanas pra acontecer e eu
-estou até avaliando a opção de talvez outras agências ou até montar uma equipe
-interna e queria também discutir isso aqui com vocês.
-
-— Maravilhoso! A gente vai falar disso também. A gente tem vários parceiros, eu
-posso recomendar um parceiro, então, só pra organizar o tempo, a gente tem hoje
-25 minutos com vocês sobrando. Eu queria passar pelo nosso deck, mostrar nosso
-produto, vai gastar mais ou menos uns 15 minutos e aí a gente fica com uns 10 a
-15 minutos finais, conversando, trocando ideia, respondendo perguntas e
-respostas. Funciona pra você?
-
-— Claro! Funciona sim. Vamos lá, me mostre o produto, por favor.
-
----
-
-Ótimo Leandro! Então, mudando um pouquinho aqui o cenário. É um prazer estar
-falando com você.
-
-Bom, o mundo mudou, né? A gente vivia um mundo aí, todo mundo tinha dinheiro,
-passou por uma pandemia, digitalizou muito rápido o planeta e o ecommerce acabou
-crescendo bastante. E a gente tinha verba para fazer um monte de coisas. E agora
-esse mundo mudou, o cenário macroeconômico mudou. A gente tá vivendo um mundo
-com juros muito alto e a gente entrou no que a gente chama da **Era da
-Lucratividade**. Ou seja, todo mundo ficou sem gasolina e a gente agora voltou a
-pedalar. Tá todo mundo agora com a sua bicicletinha. Eu tô com a minha aqui
-pedalando pra subir essa montanha que é escalar o seu negócio.
-
-Com isso, as marcas estão precisando reduzir custo. Elas estão precisando
-reduzir especificamente os custos de tecnologia, **o TCO, o Total Cost of
-Ownership**. E, junto com isso, elas precisam evoluir muito mais rápido, sem
-tanta bala na agulha. Como que você alcança resultado se todos os sites do mundo
-enfrentam o mesmo problema que é: **os sites são muito lentos.**
-
-Eu não estou falando que os sites são lentos pra navegar apenas. Os sites são
-lentos para implementar, uma implementação média demora nove meses, seis meses.
-Canso de ver projetos um pouco mais enterprise, demorando mais de um ano, às
-vezes. As lojas são muito lentas para navegar. Se você roda o PageSpeed nos 50
-maiores, 50 não, nos 500 maiores ecommerces do planeta em qualquer região, o
-PageSpeed médio é 28. Os sites demoram muito para customizar, então você quer
-criar uma landing page, você quer trocar um banner, você quer fazer uma
-alteração simples ainda hoje, 2023, com inteligência artificial, ainda é muito
-difícil para a maior parte das marcas. E os sites são muito lentos para
-segmentar. É muito raro você encontrar uma marca que está conseguindo fazer
-segmentação por audiência, que parece algo ainda de outro mundo que só as
-grandes Enterprises fora do Brasil conseguem fazer. Basicamente, todo mundo vê o
-mesmo site quando acessa a sua URL.
-
-Basicamente, todo mundo vê o mesmo site quando acessa a sua URL. O que o deco.cx
-está fazendo? A deco.cx está fazendo o que fez com as Lojas Torra. A Lojas Torra
-se tornou a loja mais rápida do Brasil em poucas semanas, menos de dois meses.
-Ela tinha uma expectativa, dado mercado, de que uma implementação demoraria
-meses. A implementação demorou algumas semanas. Ela saiu de um de um paradigma
-de mercado em que as mudanças acontecem a cada duas semanas e hoje eles mexem em
-média 15 vezes por dia no site. Eles saíram de um paradigma de mercado ou do
-próprio site deles que o PageSpeed era 27, ou seja, demorava 11 segundos para
-carregar o site no celular e agora a gente entregou para eles um PageSpeed acima
-de 94. Ou seja, eles se tornaram a loja mais rápida do Brasil, junto com a
-deco.cx, sem mexer em layout, sem mexer checkout, sem mexer em preço. E isso eu
-não posso dizer exatamente quanto que foi, mas isso gerou um aumento acima de
-100% na taxa de conversão. Foi um negócio absurdo que a gente viveu.
-
-O que a deco.cx faz? A deco.cx é essa plataforma que compõe a sua experiência
-digital e que está impulsionando os sites que mais crescem no mundo. Mesmo nesse
-mundo de escassez que a gente está vivendo. Escassez de recurso. A gente
-consegue fazer com que os sites aumentem muito a sua performance, não só na
-velocidade de carregamento da página, mas aumente muito a sua performance no
-sentido da sua capacidade de evoluir.
-
-Então a gente está dando tchau para os quatro cavaleiros do apocalipse da
-lucratividade, aqueles que estão impedindo o seu site de chegar no ápice da sua
-taxa de conversão. Um cavaleiro do Apocalipse que faz com que o seu site demore
-muito para implementar qualquer migração é um parto, um cavaleiro do Apocalipse
-que faz com que o seu site fique com Page Speed lá embaixo. O cavaleiro do
-Apocalipse, que faz com que você tenha um site para todas as audiências. Apesar
-de você poder ter um site para cada perfil. E o cavaleiro do Apocalipse que faz
-com que você demore duas, três semanas para fazer uma alteração muito simples,
-como trocar um banner.
-
-Que tal a gente resolver tudo isso?
-
-Bom, aqui na deco.cx a gente está oferecendo esse mundo que está todo mundo
-andando a cavalo, a gente tá oferecendo um carro de corrida. O que a gente está
-fazendo aqui, é que a gente está fazendo a internet crescer 10x mais rápido.
-Chegou um carro esportivo no mundo de carroça. Agora com a deco.cx, a gente
-implementa o seu site em semana e não mês, semanas, não meses. A gente faz um
-site, se possível de navegar em 2 segundos, 3 segundos, 1 segundo e não 20,
-15, 11. A gente faz com que você consiga customizar em tempo real e
-instantaneamente. Com código e sem código. Você decide se quer usar código ou
-não. E a gente está permitindo com que você consiga segmentar o seu site em
-alguns segundos, o mais rápido possível, quase instantaneamente, algo que
-demoraria dias e exigiria de você alguns serviços super complexos de serem
-implementados.
-
-O que a gente tá querendo aqui? A gente quer que você consiga construir a
-experiência digital que você sempre sonhou, que o site seja de fato seu. Que
-você seja dono, dona do seu frontend. Que você possa fazer o que você quiser, se
-quiser criar customização que você quiser, sem perder performance. Cocê possa
-alterar, fazer teste, evoluir sem dor de cabeça.
-
----
-
-— Tá fazendo sentido para você?
-
-— Faz sim! Eu achei super interessante. Se você entregar isso tudo vai ser uma
-mágica.
-
-— Legal, legal! Então vamos avançar que ainda tem muito mais coisas para te
-mostrar. Quero te mostrar como que a gente faz isso.
-
----
-
-Então vamos lá! **Como que a gente consegue fazer com que o seu site seja
-implementado em algumas semanas e não em meses?**
-
-Primeiro, nós trabalhamos com uma solução que é agnóstica de plataforma, então
-não importa aonde você esteja, qual seja sua fonte de dados, se você está na
-VTEX, se você está no Shopify, se você está na VNDA, não importa onde você
-esteja, a gente consegue implementar o seu site onde quer que você esteja agora.
-Na plataforma que você escolheu.
-
-Segundo ponto o que a gente está oferecendo aqui é algo que é bem fácil de
-codar. No seu time talvez você não tenha desenvolvedores, mas a sua agência
-provavelmente tem, o que significa que a agência consegue agora treinar um time
-muito mais fácil do que ela demorou para treinar um time de FastStore, de VTEX
-IO, de Liquid, porque a nossa stack de tecnologia é uma stack muito simples de
-se aprender. É baseada em Preact, em React, em TypeScript. É algo que qualquer
-desenvolvedor já sabe.
-
-O terceiro ponto é que a gente tem hoje dezenas de parceiros e milhares de
-desenvolvedores numa comunidade no Discord que já tem mais de 1800 membros. Ou
-seja, tem gente por trás da deco.cx que presta serviço e que faz as coisas
-acontecerem. Essa comunidade está crescendo absurdamente. Começamos a
-desenvolver ela em janeiro, agora em agosto a gente já está com mais de 1800
-membros.
-
-Quarto ponto a gente tem um assistente de inteligência artificial, que ainda não
-foi lançado, mas que está saindo do forno, em que você consegue editar e evoluir
-o seu site e implementar o seu site, toda a parte de conteúdo com assistente de
-AI muito parecido com que você teria com um chat GPT. É basicamente um chat GPT
-integrado. Com isso, você consegue criar uma landing page, por exemplo, com
-muita facilidade.
-
-E por fim, a gente tem um hub de integrações que faz com que você consiga
-conectar o seu site, parecido com o que você tem numa App Store. Você consegue
-expandir seu site, estender o seu site como você quiser, com alguns cliques.
-
-Segundo ponto **como que a gente faz com que o seu site seja navegado em
-segundos, em 2 segundos e não em 20?**
-
-A gente tem uma infraestrutura distribuída. O que significa isso? Normalmente,
-quando você tem um site, o seu site, ele está hospedado na AWS lá na Virgínia,
-tem um servidor que hospeda o seu site. O que a gente fez aqui, a gente fez com
-que no seu site ele esteja hospedado ao mesmo tempo em 30 regiões do planeta,
-mais de 30, que são 35, se eu não me engano, e sempre tem um servidor muito
-próximo do seu usuário. O que a gente faz? A gente encontra um servidor muito
-próximo. Esse servidor monta a página para você toda a nossa tecnologia é
-server-side, ela monta o seu site no servidor e a gente entrega a página
-praticamente pronta pro cliente, para o navegador e com uma latência de
-requisição muito baixa. É um papo meio técnico, o que você precisa saber que a
-nossa infraestrutura muito robusta, escalável, global, e que você consegue
-acelerar demais o tempo de requisição entre o browser e o servidor.
-
-Além disso, essas stack de tecnologia que a gente escolheu, ela joga muito
-pouco, basicamente ela joga nenhum, JavaScript quase para o navegador do cliente
-por padrão. Para quem não sabe a quantidade de CSS e JavaScript, imagem e script
-de terceiros são ativos que pesam muito o seu site. E a gente conseguiu tomar
-uma decisão de tecnologia que reduz drasticamente a quantidade de JavaScript, de
-CSS, e de imagens que você tem no seu site.
-
-O terceiro ponto é que quando você vai implementar um site na deco.cx, você não
-começa do zero. A gente já oferece para sua agência parceira uma série de blocos
-pré construídos: carrossel, footer, barra de navegação, prateleira de produto. A
-agência, o desenvolvedor consegue estilizar esse componente com muita facilidade
-e esses componentes eles foram construídos de forma muito otimizada. A gente
-tirou o máximo que a gente podia de tamanho de arquivo, eu posso dizer assim, a
-gente tirou o JavaScript, a gente tirou o CSS. Só o que sobrou foi o
-extremamente necessário para aquele componente performático. Então você já
-começa com componentes reutilizáveis numa biblioteca aberta opensource, que você
-pode estender e tematizar como você quiser, para ficar exatamente com a cara da
-sua marca.
-
-E o quarto ponto é que a gente oferece métricas em tempo real, ou seja, tudo o
-que você mexe na deco.cx você vê em tempo real se está afetando performance ou
-não. E eu vou mostrar pra vocês depois, na demonstração do nosso produto.
-
-O terceiro ponto **como que a gente habilita a customização?**
-
-Eu falei que você pode customizar com ou sem código, no code ou full code. A
-gente entende que hoje no mercado tem essa dicotomia, né? Ou você vai pegar uma
-solução no code, tipo um Wix da vida, um Squarespace, WebFlow, que são soluções
-muito boas para o usuário de negócio, pro time de marketing, para o designer,
-mas o desenvolvedor detesta. E aí porque o desenvolvedor não coda, porque ele
-não tem acesso ao código ali, você não consegue customizar como você gostaria.
-Você fica limitado ao que você consegue fazer na interface. A interface fica tão
-complexa que você não sabe fazer algumas integrações, algumas customizações que
-você deseja ou que o seu negócio depende. Então, o que a gente fez aqui?
-
-A gente te dá acesso total ao código. Então agora tudo o que dá para codar, dá
-para você botar no seu site. Oh! De novo: Own your frontend. Seja dono do seu
-frontend. O site é seu, você coloca o código que você quiser, não tem nenhuma
-limitação no que você consegue customizar. Você tem liberdade total para criar
-sua experiência ideal.
-
-Agora que você criou o código, que o desenvolvedor criou o código,
-instantaneamente, automaticamente, a gente cria uma interface para o usuário de
-negócio editar. Olha que eu estou dizendo: todo código que é criado na deco.cx,
-ele automaticamente vira uma interface 100% editável, ele vira um no code. Então
-a gente não tirou o código, a gente deixou o código. Mas quando você escreve o
-código, o código vira um monte de botãozinho de interface, de formulário, que o
-usuário de negócio pode editar sem precisar usar nenhum tipo de código. É o
-melhor dos dois mundos. Melhor para desenvolvedor, com uma stack de tecnologia
-muito fácil de aprender a codar, e o melhor para o usuário de negócio que tem
-agora uma interface para ele alterar, editar, estender como ele quiser.
-
-Por fim, **como que a gente consegue fazer com que você segmente em alguns
-segundos e não em alguns dias?**
-
-A gente tem uma solução de teste AB de fábrica. Pronto! Vou repetir temos uma
-solução de teste AB, e não é AB não, é ABCD, e quantos teste você quiser de
-fábrica. A gente te entrega um matcher, um matcher me diz qual audiência você
-deseja criar essa experiência e eu vou dar um match entre a sua página e essa
-audiência.
-
-Então, se você botou um site todo azul para um público específico, só o público
-que gosta de azul vai receber. Se você colocou um site todo vermelho para um
-outro público, aquelas pessoas que você definiu que gosta de vermelho vão
-receber. Se o seu banner, ele está desenhado para pessoas de uma cidade, só
-aquela cidade vai receber se você quiser que o seu site se comporte de um jeito
-de manhã, de outro jeito, de tarde, de outro jeito de noite, numa data
-específica, num agendamento específico. Se você quiser criar uma customização de
-audiência. Ou seja, você quer dizer que todo mundo que já gastou R$500,00 no seu
-site agora pode ver uma promoção específica, um produto específico ou quem já
-comprou uma pulseira, agora você quer exibir o vestido que você cria, a
-experiência que você quiser, com total liberdade, segmentado por audiências.
-Isso tudo é integrado com nosso analytics. Você pode ver os resultados em tempo
-real e também integrado com o seu Google Analytics. E aí você pode agora o
-dentro do seus dashboards ter acesso aos resultados
-
-Legal! É assim que a gente consegue entregar tudo isso. E agora, indo um
-pouquinho mais além, queria falar um pouquinho da nossa arquitetura. Como que a
-gente faz isso, tecnicamente? A gente basicamente desacopla toda camada de
-experiência digital, ou seja, todo o seu frontend, da sua plataforma de
-comércio. E a gente constrói tudo por fora, usando a nossa infra estrutura. Ou
-seja, a gente não usa mais a infraestrutura da plataforma de comércio que você
-está hoje. A gente usa a infraestrutura da deco.cx. Isso é o que a gente chama
-de arquitetura Headless e eu não tô inventando isso. Arquitetura Headless é uma
-arquitetura muito conhecida fora do Brasil que não chegou ainda com força no
-Brasil, mas que nos Estados Unidos, na Europa é bastante comum. Muita gente tem
-um site rodando em Headless fora do Brasil.
-
-Só que o Headless ficou muito complicado. E o que a gente está fazendo aqui é
-simplificando o Headless tornando ele acessível para o nosso público, para o
-público que está sem dinheiro, que não tem muita verba, mas que quer aumentar a
-taxa de conversão, que deixa o site mais rápido. Então está pegando os
-benefícios de uma arquitetura Headless, que é basicamente você fazer o seu site
-por fora da plataforma de comércio.
-
-Esses benefícios te dão a performance, a capacidade de editar, a capacidade de
-customizar, sem a dor de cabeça de você ter que compor uma série de
-infraestrutura complexa.
-
-Tá fazendo sentido? Na prática, isso significa que a gente substitui o VTEX IO,
-substitui o VTEX Legado, substitui o Shopify Liquify, o Composable Storefront,
-eu acho que é o da SalesForce, o que quer que você use hoje como solução de
-frontend da plataforma, você não vai mais usar. Você vai usar a solução deco.cx.
-Seja qual for a sua tecnologia de frontend, você continua usando a plataforma de
-comércio para você trocar pedido, para você ver produto, para você subir um
-produto novo, para você trocar preço, para você criar uma promoção para o seu
-checkout, para o seu carrinho. Mas toda a experiência de navegação ela fica com
-a gente. Por exemplo, troca de banner, fica com a gente, criação de uma landing
-page, criação de uma página institucional. Toda experiência que vai até o
-carrinho fica com a deco.
-
----
-
-— Calma! Então você está me dizendo que nem o checkout, nem o myaccount eu
-consigo fazer com a deco.cx?
-
-— Ainda não, mas a gente pode te recomendar alguns parceiros que fazem checkout
-Headless e assim como a gente tira o front da plataforma, eles tiram um checkout
-da plataforma e você pode fazer tudo por fora e alguns deles oferecem inclusive
-uma boa capacidade de customização. E isso inclusive pode ter um ganho bem
-expressivo na sua taxa de conversão.
-
-— Legal, legal, entendi. Mas e se eu quiser mudar de plataforma? Eu vou ter que
-refazer tudo? O que acontece com as minhas integrações?
-
-— Não, então, essa é que é a vantagem. Você tinha falado lá no início dessa
-conversa que você tava considerando mudar de plataforma, não é isso? Para gente,
-a plataforma de comércio é só uma API, ou seja, ela é só uma fonte de dados.
-Você pode construir a sua experiência digital usando os dados de qualquer API
-que você quiser, ou seja, você pode trocar de plataforma, ficar na plataforma se
-você está numa plataforma ou vai para outra, para a gente não faz a menor
-diferença. A gente é agnóstico. Você passa com a deco.cx a ter mobilidade. Uma
-vez que seu site está na deco.cx, desacoplado, você troca de plataforma agora
-com muita facilidade. E é por isso que os clientes chamam a gente de seguro de
-vida. Porque se der qualquer problema na plataforma de começo que tá embaixo
-agora, seu site está seguro. Seu site está construído na deco.cx.
-
-— Super interessante! Mas hoje, quais as plataformas que vocês já se conectam,
-eu conseguiria começar a usar?
-
-— A gente tem hoje conexão com a VTEX, a gente tem com a VNDA, com a VNDA, que é
-da Olist. A gente tem com a Shopify, com a Nuvemshop, com a Wake, e tem uma
-série de outras integrações que estão por vir. A gente está deixando bem público
-já já qual o nosso roadmap de desenvolvimento de integração, mas basicamente a
-gente conecta com qualquer solução que seja Headless, ou seja, qualquer solução
-que tem uma API para a gente puxar dados. Mmesmo que ela não tenha ainda pronta,
-fala com a gente, que a gente coloca aqui na nossa fila de demandas e desenvolve
-dura algumas semanas, é bem rapidinho.
-
-— Ah, entendi. Muito bom saber. Obrigado.
-
-— E aí, antes de falar de quanto custa isso tudo, eu queria checar com você
-quanto você acha que seria justo você pagar para você aumentar de 20 a 100% das
-suas vendas?
-
-— Levando em conta que a gente vem de mais ou menos 500.000 por mês, hoje você
-está me dizendo que a deco.cx pode aumentar em até 100.000 as minhas vendas. Eu
-acho que seria justo pagar R$ 5.000 a R$ 6.000,00 por mês para ter esse serviço.
-
----
-
-Legal! O nosso preço varia de acordo com o seu tráfego, de acordo com o seu
-número de pageviews. Ou seja, seu número de visualizações de página, você pode
-checar isso no seu Google Analytics. A gente cobra hoje muito barato R$ 40,00
-Para cada 10.000 visualizações de página, você tem 100.000 visualizações de
-página por mês você paga R$ 400,00 por mês, beleza?
-
-Só que tem um detalhe aqui, se você é uma loja um pouquinho maior e você vende
-mais de R$ 5 milhões por ano, seu GMV anual é acima de 5 milhões, quando você
-bate 5 milhões de vendas nos últimos 12 meses, a gente começa a pegar 0,5% de
-take rate das suas vendas. Isso é para a gente não onerar os pequenos. E a gente
-tem um pequeno ganho quando uma loja vende um pouquinho mais. É bem
-pequenininho, 0,5%, nada para ferir o seu TCO Mas é algo que dá um upside pra
-gente. A gente ganha com o ganho dos nossos clientes, porque isso gera,
-inclusive um incentivo correto da gente querer trabalhar para o cliente vender
-cada vez mais.
-
----
-
-— Eu vi aqui no [Similarweb](https://www.similarweb.com/), que é uma ferramenta
-que a gente usa para estimar, porque você tem hoje mais ou menos 400.000 page
-views por mês. É isso mesmo?
-
-— Eu posso te passar direitinho depois os meus page views, mas eu acho que é por
-aí mesmo. Não está muito errado não.
-
----
-
-Bom, então nesse caso você paga para deco.cx em torno deR$ 1.600,00 por mês por
-esses 400.000 pageviews. Passados R$ 5 milhões em vendas, aí você vai começar a
-pagar 0,5% do seu GMV, além dos R$ 1600,00. Ou seja, você vendeu R$ 6 milhões, a
-gente vai te cobrar 0,5% em cima do 1 milhão, ou seja, do que é excedente dos 5
-milhões. Você paga R$ 1.600,00 por mês e mais R$ 5.000,00, que é o 0,5% desse 1
-milhão excedente.
-
-Você pode fazer toda essa simulação de quanto que custa nessa nossa
-[calculadora](https://docs.google.com/spreadsheets/d/1D20B2ssnqiMQwBir2VrRR2uSoFn2bRGATDfDv6Ag8lg/edit#gid=3210609)
-aqui.
-
-O que é importante de falar do nosso preço é que a gente só cobra depois do go
-live. Então você faz uma implementação que dura às vezes dois meses, 30 dias. Eu
-não sei o tempo que vai levar, depende da complexidade do seu site. Seu site vai
-para o ar, você testa por 30 dias, e a gente só começa a cobrar você depois que
-você está feliz e satisfeito. E se você quiser cancela, não deu certo, não
-funcionou, não aumentou mais vendas você cancela e você não deve absolutamente
-nada pra gente.
-
----
-
-— E você sabe me dizer assim, só pra ter uma ideia quanto tempo demora e quanto
-custa uma implementação da deco.cx?
-
-— Bom, a implementação varia bastante, depende da maturidade do seu site, do
-tamanho do parceiro que você escolheu, da complexidade que vem envolvida, se vai
-ter mudança de layout, se não vai ter mudança. E o preço mais barato que eu já
-vi até hoje foi tipo R$ 30.000,00 para um caso muito simples de implementação de
-um template. E eu já vi até R$ 200.000,00 para um site mais complexo, mas
-enterprise para um cliente grande. Eu diria que na média de agências elas tem
-cobrado por volta de R$ 60.000,00 a R$ 70.000,00 por uma migração de um site
-para deco.cx. Considerando que você permanecer no mesmo layout que você tem hoje
-e elas pedem em torno de 60 a 90 dias.
-
-— Ótimo! Muito obrigado pelo seu tempo e parabéns pelo produto.
-
-— Show de bola! É isso, finalizamos. Muito obrigado!
diff --git a/docs/treinamento-comercial/seu-primeiro-case/pt.md b/docs/treinamento-comercial/seu-primeiro-case/pt.md
deleted file mode 100644
index 43800976..00000000
--- a/docs/treinamento-comercial/seu-primeiro-case/pt.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-description: Treinamento Comercial - Seu primeiro case
-since: 1.0.0
----
-
-VIDEO
-
-Vamos falar de como você vai conseguir seu primeiro case.
-
-A verdade é que depois que você tem uma loja no ar com performance acima de 90,
-todo mundo passa a querer fechar contigo. Fica bem mais fácil de prospectar.
-
-A gente recomenda que nesse primeiro cliente, você não se preocupe tanto em
-ganhar rios de dinheiro. Faz uma oferta pra ele entrar. Depois que ele entrar,
-você vai ver que os outros vão vir com muito mais facilidade.
-
-Olha pra sua carteira e procura aquele cliente que você já tem algum
-relacionamento próximo, que você tem alguma intimidade, que já tem um perfil
-mais de early adopter, ou seja, que está disposto a inovar, que está disposto a
-experimentar algo novo e oferece uma implementação do risco, por exemplo. Fala
-pra ele que ele só vai pagar se der certo. Reduz o valor que você cobra
-normalmente, oferece um desconto, tenta fazer um case o mais rápido possível.
-
-O ideal é você encontrar um cliente na sua carteira que você já tem um
-relacionamento, que confia em você e que tenha tráfego. Se você pegar um cliente
-muito pequenininho pra reduzir risco, que não tenha tráfego, ele vai ter
-dificuldade de fazer teste AB, não vai ter volume pra teste AB, ele vai ter
-dificuldade de ver o aumento de conversão em cima de performance.
-
-Pensa que o mais óbvio é pegar um cliente lento, que está num VTEX CMS, por
-exemplo, ou que está numa tecnologia super devagar, que está demorando muito pra
-carregar, que já está insatisfeito com a tecnologia de frontend que ele tem
-atualmente, e convencer esse cliente de fazer uma migração no risco. Ou seja, de
-ele confiar em você, que você vai levar a loja dele para um outro patamar de
-vendas.
-
----
-
-Um bom jeito de você começar a conversa é você fazer um diagnóstico inicial, ou
-seja, pega a loja atual, roda a home no PageSpeed Insights, anota como tá o Core
-Web Vitals, anota como está o PageSpeed Score, no mobile e no desktop. Faz a
-mesma coisa na página de produto, na PDP. Faz a mesma coisa no Product Listing
-Page, na PLP.
-
-E aí com essas três páginas, compara o resultado que ele tem hoje com algum
-outro resultado de um case da deco.cx, por exemplo, da Lojas Torra, o da ZeeDog,
-o da Aviator. Eu não sei em quando que você está assistindo esse vídeo, mas
-certamente a gente tem no nosso site vários cases divulgados, se não nos nosso
-assets aqui você vai encontrar cases documentados de aumento de desempenho em
-todas essas páginas.
-
-Pois bem, chega com esse diagnóstico e fala:
-
-_"Olha, eu estou vendo que o seu site está lento, está com performance 4/100. A
-gente consegue fazer ele chegar em performance 90. Isso pode representar, no seu
-caso, um aumento de 50, 60, 70, 100%. Nós já vemos aqui na deco.cx com aumento
-de 175% da conversão, só falando de performance, fora o ganho que o cliente tem
-ao longo do tempo em todas as ferramentas de otimização."_
-
-Isso geralmente já é o suficiente para o cliente abrir o olho e falar _"Nossa,
-interessante!"_, e começar a considerar começar a evoluir a conversa.
-
----
-
-Se você não tiver nenhum cliente na sua carteira para abordar nos nossos assets
-aqui, a gente tem também uma target list para você poder utilizar.
-
-Como é que a gente montou essa target list?
-
-Pegamos a lista de e-commerce do Brasil — usando o
-[Built With](https://builtwith.com) ou [Similarweb](https://www.similarweb.com/)
-—, a gente checou quanto tráfego, ou seja, quantos page views cada uma dessas
-lojas tem. O Similarweb dá esse diagnóstico para você. Em seguida, a gente rodou
-API do Google PageSpeed, que entrega tantos dados do Core Web Vitals, quanto
-dados do PageSpeed Score, e aí a gente montou um ranking. Esse ranking você
-consegue saber quais são as lojas que tem mais tráfego e as lojas que estão mais
-rápidas, lojas que estão mais lentas.
-
-Você com alguns recortes consegue fazer uma short list para sua agência para
-você começar a prospectar. Vai no LinkedIn, descobre quem é o responsável por
-aquela marca, quem que é o tomador de decisão. Agenda uma reunião, mandam um
-link de um case da deco.cx. Fala _"Olha, essa marca aqui foi para deco.cx e
-aumentou tantos porcento das vendas. Essa marca aqui foi para deco.cx e aumentos
-tantos porcento de performance."_ Vai testando um copy. De novo, na nossa
-biblioteca de assets você vai encontrar um monte de exemplo que você pode se
-alavancar para começar a essa prospecção fria. Se você não tiver uma carteira de
-clientes inicial.
-
-De novo, o ideal é você começar com aquele cliente que já te conhece, que você
-já sabe que é mais aberto, que você sabe que tem algum budget pra poder investir
-nisso. Se você não tiver, vai para uma abordagem fria. E aí você vai encontrar
-na nossa biblioteca vários exemplos de como começar.
-
----
-
-Se você quiser, você pode chamar o nosso time para te ajudar nessas primeiras
-prospecções. Então agendou, conseguiu um papo com cliente, seja um cliente seu
-antigo, seja um cliente novo, me chama, chama o Leandro, chama o Gui, o Lucis,
-chamo o nosso time para a gente entrar com você e te ajudar a fazer a
-prospecção.
-
-A gente vai fazer as primeiras, duas, três, quatro, cinco, quantas vezes você
-precisar. Até que você vai pegar o jeito. Vai entender como que a gente faz o
-pitch, como é que a gente contorna as objeções. Vai ganhar um pouco mais de
-segurança e aí você vai começar a seguir sozinho.
-
-Se você estiver inseguro sobre a implementação, que é _"Poxa, o meu time não
-sabe implementar uma loja"_, você pode usar a nossa
-[comunidade](www.deco.cx/discord). Como você já deve saber, a gente tem uma
-comunidade de bounties lá no Discord que é destinada pras agências, pros os
-parceiros, que você pode abrir lá um post falando _"Olha, alguém me ajuda fazer
-uma POC ou me ajuda a fazer uma implementação completa?"_
-
-Você pode fazer o outsourcing dessa primeira implementação usando um freelancer
-da nossa comunidade. A gente escolhe alguém que já tem alguma experiência na
-deco.cx pra reduzir o seu risco. Ele senta junto com seu time, vocês marcam uma
-weekly, ou duas, três vezes por semana, vocês fazem um acompanhamento, o seu
-time vai aprendendo a implementar deco.cx, enquanto você tem alguém um pouco
-mais experiente para fazer essa implementação junto com você. Depois que você
-termina a primeira implementação é mais fácil, o time está mais treinado, você
-está um pouco mais seguro para conduzir as próximas.
-
----
-
-E por fim, tem algumas agências que ficam inseguras de venderem deco.cx depois
-de passar um longo período convencendo os clientes da carteira de migrarem para
-uma por uma outra solução, como por exemplo, o VTEX IO.
-
-Elas falam _"Poxa, eu passei os últimos dois anos convencendo a minha carteira
-de clientes para ir pro VTEX IO, e agora eu chego e fala que o VTEX IO não é
-mais a melhor opção, e a deco.cx é?"_
-
-Justamente! O que você vai argumentar com esses clientes é:
-
-> _"O VTEX IO era de fato a melhor opção, só que apareceu a deco.cx nos últimos
-> 12 meses. É uma solução super nova que o mercado ainda está se adaptando. Só
-> que começaram sair os primeiros cases, eles estão mostrando o resultado
-> consistente. Então eu queria convidá-lo a experimentar. A gente tem ouvido
-> falar muito bem do suporte, a gente tá ouvindo falar muito bem na tecnologia.
-> Eles tem um apoio de várias lideranças do ecossistema, então eu acho que vale
-> a pena investir nesse caminho."_
-
-Aí ele deixa o cliente decidir. De novo, nesse primeiro caso, você não quer um
-cliente resistente, você não quer um cliente muito desconfiado. Você quer um
-cliente que naturalmente já tem um pouco mais de abertura a experimentar algo
-novo, que você tenha um relacionamento de confiança.
-
-Ótimo! Agora você tem um case no ar. Sua loja está funcionando. Você tem
-performance alta. O primeiro passo que você vai fazer pra expandir é divulgar o
-seu case.
-
-Então atualiza suas redes sociais, faz um post dizendo que você agora é parceiro
-deco.cx e que você tem uma loja em produção com performance acima de 90. Manda
-um mailing para sua base de clientes avisando que agora sua agência ela está
-implementando uma nova tecnologia que promete performance e capacidade de
-personalização e que está conquistando resultados incríveis de aumento de venda.
-
-Começa a divulgar no mercado tudo aquilo que você tem feito. Coleta um
-depoimento com seu cliente. Você vai encontrar ideia de campanha, ideias de
-blogpost, assets de social media, Landing Page divulgando que você agora é
-parceiro da deco.cx e convidando as pessoas a se inscreverem e solicitarem
-orçamento. Você vai encontrar todo tipo de asset que você precisa para você
-divulgar na sua presença online e divulgar nos seus canais que você agora é
-parceiro da deco.cx.
-
-Isso é um ponto. Começa a divulgar por aí que você é um parceiro implementando
-uma tecnologia nova para os seus clientes e para ecossistema.
-
-Segundo ponto é você cuidar para que esse case que você fez, essa loja que você
-acabou de subir, com performance alta, com aumento de venda, que esteja muito
-bem documentado. A primeira pergunta que os clientes nos trazem é _"Como que eu
-vou medir o impacto da performance nas vendas?"_
-
-E a gente está disponibilizando aqui nos assets um passo a passo de como montar
-o seu primeiro case. Então, que métricas que você puxa no Analytics, que dados
-que você vê na VTEX, ou na plataforma de comércio da escolha do cliente. Que
-campanha que você vai criar. Como que você vai divulgar esse case. Como que você
-faz um release da imprensa falando que o site que você implementou está rápido e
-está aumentando as vendas. Enfim, tudo o que você precisa para que o seu caso
-seja muito bem documentado.
-
-No fim de tudo, uma ideia que é muito prática e rápida, se você não quiser
-investir em gravação, se você não quiser investir em uma documentação muito
-extensa, é muito simples: marca com o seu cliente e com a deco.cx um webinar.
-Marca um webinar ou marca um evento presencial, um café, um jantar, um almoço ou
-qualquer coisa que você precise. Nos convide, convide o cliente, grave isso e
-distribui para sua base. Isso vai ajudar bastante a todo mundo saber que você
-agora é uma agência parceira e que você está implementando uma solução que
-promete aumentar a venda dos seus clientes.
diff --git a/docs/treinamento-comercial/web-performance/pt.md b/docs/treinamento-comercial/web-performance/pt.md
deleted file mode 100644
index a13a3551..00000000
--- a/docs/treinamento-comercial/web-performance/pt.md
+++ /dev/null
@@ -1,324 +0,0 @@
----
-description: Treinamento Comercial - Web Performance para Ecommerce
-since: 1.0.0
----
-
-VIDEO
-
-Parte importante do nosso produto e do nosso discurso comercial está intimamente
-relacionado à web performance. Nesse contexto que a gente está trazendo, web
-performance é a possibilidade, é a maneira que você mede, tanto qualitativamente
-quanto quantitativamente, a velocidade do seu site e o tipo de experiência que
-ele está entregando para o seu cliente
-
-Quando a gente está falando de web performance, normalmente a gente tem as
-seguintes análises:) =>
diff --git a/loaders/denoLoader.ts b/loaders/denoLoader.ts
deleted file mode 100644
index e8e663ba..00000000
--- a/loaders/denoLoader.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { MDFileContent } from "site/components/ui/Types.tsx";
-import type { LoaderContext } from "deco/types.ts";
-import { getTitleForPost } from "site/docs/toc.ts";
-import type { SupportedLanguages } from "site/docs/toc.ts";
-import { badRequest, redirect } from "@deco/deco";
-/** @title {{{path}}} */
-export interface Doc {
- path: string;
- /**
- * @format textarea
- */
- content: string;
- title?: string;
-}
-const GH_USER_CONTENT_URL = "https://raw.githubusercontent.com";
-const OWNER = "deco-cx";
-const REPO = "apps";
-export const cache = "stale-while-revalidate";
-export const cacheKey = (_props: unknown, req: Request, _ctx: LoaderContext) =>
- new URL(req.url).href;
-const loader = async (
- props: {
- urlPattern: string;
- group: number;
- docs?: Doc[];
- docsPath?: string;
- },
- _req: Request,
- _ctx: LoaderContext,
-): Promise => {
- const match = (new URL(_req.url)).pathname.match(props.urlPattern);
- const slug = (match && match[props.group]) ?? "/404";
- const [languageOrig, ...rest] = slug.split("/");
- const language = languageOrig as SupportedLanguages;
- const documentSlug = rest.join("/");
- const path = props.docsPath ?? "docs";
- if (documentSlug === "") {
- const returnUrl = new URL(_req.url);
- returnUrl.pathname = `/${path}/${language}/overview`;
- return redirect(returnUrl.href, 307) as unknown as ReturnType<
- typeof loader
- >; // redirect, component won't be resolved, so don't need the data;
- }
- if (documentSlug.includes("decohub")) {
- const appName = documentSlug.split("/")[1];
- const url =
- `${GH_USER_CONTENT_URL}/${OWNER}/${REPO}/master/${appName}/README.md`;
- const response = await fetch(url);
- const content = await response.text();
- const contentWithDescription =
- `---\ndescription: This is the README of the ${appName} app\n---\n${content}`;
- return { content: contentWithDescription, title: appName };
- }
- const url = new URL(
- `../${path}/${documentSlug}/${language}.md`,
- import.meta.url,
- );
- const doc = props.docs?.find((doc) => doc.path === slug);
- if (doc) {
- return { content: doc.content, title: doc.title };
- }
- try {
- const fileContent = await Deno.readTextFile(url);
- return {
- content: fileContent,
- title: getTitleForPost(language == "en" ? "en" : "pt", documentSlug),
- };
- } catch {
- badRequest({ message: "File not found" });
- return { content: "" };
- }
-};
-export default loader;
diff --git a/loaders/denoTopicsLoader.ts b/loaders/denoTopicsLoader.ts
deleted file mode 100644
index 31062239..00000000
--- a/loaders/denoTopicsLoader.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import type { LoaderContext } from "deco/types.ts";
-import type {
- ChildTopic,
- SubTopic,
- Topic,
-} from "site/components/decohelp/pages/ui/Sidebar/Sidebar.tsx";
-import tableOfContents from "site/docs/toc.ts";
-
-const GITHUB_API_URL = "https://api.github.com";
-const GH_USER_CONTENT_URL = "https://raw.githubusercontent.com";
-const OWNER = "deco-cx";
-const REPO = "apps";
-
-export const cache = "stale-while-revalidate";
-
-export const cacheKey = (
- _props: unknown,
- _req: Request,
- _ctx: LoaderContext,
-) => {
- return "http://localhost:3000/docs/en/overview";
-};
-
-const isValidItem = (
- item: PromiseSettledResult<
- {
- data: Response;
- path: string;
- } | undefined
- >,
-): item is PromiseFulfilledResult<{
- data: Response;
- path: string;
-}> => {
- return item.status === "fulfilled" && item.value?.data.status === 200;
-};
-
-async function fetchAppsReposWithReadme() {
- const url = `${GITHUB_API_URL}/repos/${OWNER}/${REPO}/contents`;
- const response = await fetch(url);
- const data = await response.json();
-
- const dirsWithReadme: string[] = [];
-
- if (!Array.isArray(data)) {
- return dirsWithReadme;
- }
-
- const promiseSettled = await Promise.allSettled(
- data.map(async ({ path, type }) => {
- if (type === "dir" && !!path) {
- const data = await fetch(
- `${GH_USER_CONTENT_URL}/${OWNER}/${REPO}/master/${path}/README.md`,
- );
- return { data, path };
- }
- }),
- );
-
- return promiseSettled.filter(isValidItem).map((promise) =>
- promise.value.path
- );
-}
-
-const loader = async (
- props: { urlPattern: string; group: number; basePath?: string },
- _req: Request,
- _ctx: LoaderContext,
-): Promise => {
- const match = (new URL(_req.url)).pathname.match(props.urlPattern);
- const slug = (match && match[props.group]) ?? "/404";
- const [language, ..._rest] = slug.split("/");
- const languageTyped = language as ("en" | "pt");
- const base = props.basePath ? (props.basePath + language + "/") : "";
-
- const topics = tableOfContents.map((topic) => {
- return ({
- label: topic.title[languageTyped] ?? topic.slug,
- LinkTopic: topic.slug && base + topic.slug,
- SubTopics: topic.children?.filter((subTopic) =>
- subTopic.title[languageTyped] && subTopic.slug
- ).map((subTopic) => {
- return {
- label: subTopic.title[languageTyped]!,
- SidebarLink: base + subTopic.slug!,
- NestedTopics: subTopic.children?.filter((childTopic) =>
- childTopic.title[languageTyped] && childTopic.slug
- ).map((childTopic) => {
- return {
- label: childTopic.title[languageTyped]!,
- SidebarLink: base + childTopic.slug!,
- };
- }) ?? ([] as ChildTopic[]),
- };
- }) ?? ([] as SubTopic[]),
- });
- });
-
- const appsRepos = await fetchAppsReposWithReadme();
-
- if (!appsRepos.length) {
- return topics;
- }
-
- const decoHub = {
- label: "Deco Hub",
- LinkTopic: undefined,
- SubTopics: appsRepos.map((repo) => {
- return {
- label: repo,
- SidebarLink: `/docs/${languageTyped}/decohub/${repo}`,
- NestedTopics: [],
- };
- }),
- };
-
- topics.push(decoHub);
-
- return topics;
-};
-
-export default loader;
diff --git a/manifest.gen.ts b/manifest.gen.ts
index 99e7ce47..4518379a 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -20,9 +20,7 @@ import * as $$$$1 from "./handlers/sitemap.ts";
import * as $$$0 from "./loaders/blogPostDetailsLoader.ts";
import * as $$$1 from "./loaders/blogPostLoader.ts";
import * as $$$2 from "./loaders/blogPostMarkdownLoader.ts";
-import * as $$$3 from "./loaders/denoLoader.ts";
-import * as $$$4 from "./loaders/denoTopicsLoader.ts";
-import * as $$$5 from "./loaders/featuredPosts.ts";
+import * as $$$3 from "./loaders/featuredPosts.ts";
import * as $$$$$$$0 from "./matchers/MatchPath.ts";
import * as $$$$$$0 from "./sections/About.tsx";
import * as $$$$$$1 from "./sections/Benefits.tsx";
@@ -211,9 +209,7 @@ const manifest = {
"site/loaders/blogPostDetailsLoader.ts": $$$0,
"site/loaders/blogPostLoader.ts": $$$1,
"site/loaders/blogPostMarkdownLoader.ts": $$$2,
- "site/loaders/denoLoader.ts": $$$3,
- "site/loaders/denoTopicsLoader.ts": $$$4,
- "site/loaders/featuredPosts.ts": $$$5,
+ "site/loaders/featuredPosts.ts": $$$3,
},
"handlers": {
"site/handlers/feed.ts": $$$$0,
diff --git a/routes/docs/[...catchall].tsx b/routes/docs/[...catchall].tsx
new file mode 100644
index 00000000..0b65cdbf
--- /dev/null
+++ b/routes/docs/[...catchall].tsx
@@ -0,0 +1,10 @@
+import type { Handlers } from "$fresh/server.ts";
+
+export const handler: Handlers = {
+ GET(req) {
+ const url = new URL(req.url);
+ const urlToRedirect = `https://docs.deco.cx/${url.pathname.replace("docs/", "")}${url.search}`;
+
+ return Response.redirect(urlToRedirect, 301);
+ },
+};