From f2aab8fa4da397ead0d30306582db0df369612fa Mon Sep 17 00:00:00 2001 From: thallesyam Date: Tue, 23 May 2023 13:52:45 -0300 Subject: [PATCH 01/41] feat: update header --- .vscode/settings.json | 2 +- components/ui/ImpactCalculator.tsx | 4 +- docs/concepts/action/en.md | 36 ++- docs/concepts/action/pt.md | 19 +- docs/tutorials/client-side-invocation/en.md | 23 +- docs/tutorials/client-side-invocation/pt.md | 12 +- import_map.json | 6 +- islands/Header.tsx | 256 ++++++++++---------- live.gen.ts | 202 +++++++-------- routes/docs/[...slug].tsx | 2 +- schemas.gen.json | 117 ++++++++- sections/Header.tsx | 4 +- sections/StripePricing.tsx | 2 +- static/tailwind.css | 2 +- 14 files changed, 413 insertions(+), 274 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0bb82d14..1a7da267 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -14,4 +14,4 @@ "[css]": { "editor.defaultFormatter": "vscode.css-language-features" } -} \ No newline at end of file +} diff --git a/components/ui/ImpactCalculator.tsx b/components/ui/ImpactCalculator.tsx index f5753935..acb1aa68 100644 --- a/components/ui/ImpactCalculator.tsx +++ b/components/ui/ImpactCalculator.tsx @@ -257,9 +257,9 @@ export default function ImpactCalculator(

{result.howWeCalculateTitle}

{result.howWeCalculateText1}{" "} - {parseFloat(mobileLCP.value / 1000).toFixed(1)}s{" "} + {parseFloat(String(mobileLCP.value / 1000)).toFixed(1)}s{" "} {result.howWeCalculateText2}{" "} - {parseFloat(desktopLCP.value / 1000).toFixed(1)}s{" "} + {parseFloat(String(desktopLCP.value / 1000)).toFixed(1)}s{" "} {result.howWeCalculateText3}
diff --git a/docs/concepts/action/en.md b/docs/concepts/action/en.md index 6ef3df27..a4c558fc 100644 --- a/docs/concepts/action/en.md +++ b/docs/concepts/action/en.md @@ -3,13 +3,35 @@ 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. +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 data, **Actions** in _deco.cx_ **can also export a typescript props type,** which allows them to be configured in the diff --git a/docs/concepts/action/pt.md b/docs/concepts/action/pt.md index 90b916af..6be65d82 100644 --- a/docs/concepts/action/pt.md +++ b/docs/concepts/action/pt.md @@ -3,9 +3,24 @@ 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. +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. +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 diff --git a/docs/tutorials/client-side-invocation/en.md b/docs/tutorials/client-side-invocation/en.md index 1063c59b..fee63d41 100644 --- a/docs/tutorials/client-side-invocation/en.md +++ b/docs/tutorials/client-side-invocation/en.md @@ -9,17 +9,16 @@ since: 1.0.0 - [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 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 `Runtime` from `runtime.ts` 2. Now you can issue invocations using the `Runtime.invoke` function. For - example, to fetch data from a function, you would use the following - code: + 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/fashion/blob/main/runtime.ts) @@ -45,9 +44,9 @@ export default function MyIsland() { ``` 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 `Runtime.invoke`, live.ts will invoke your function as -it does for rendering sections and return it to you as a JavaScript object. +the path to your function and a props property that contains your function input +props. When you call `Runtime.invoke`, live.ts will invoke your function as it +does for rendering sections and return it to you as a JavaScript object. You can also batch requests by passing an object with multiple keys, each representing a desired invocation. For example: @@ -77,8 +76,8 @@ const data = await Runtime.invoke({ }); ``` -This code will fetch (or mutate) the data from your function and return only the `prop1` and -`prop2.subprop` properties. +This code will fetch (or mutate) the data from your function and return only the +`prop1` and `prop2.subprop` properties. -With these steps, you can now start using client-side functions invocation in your -Live.ts application, happy coding! +With these steps, you can now start using client-side functions invocation in +your Live.ts application, happy coding! diff --git a/docs/tutorials/client-side-invocation/pt.md b/docs/tutorials/client-side-invocation/pt.md index 105bb36d..523b66cd 100644 --- a/docs/tutorials/client-side-invocation/pt.md +++ b/docs/tutorials/client-side-invocation/pt.md @@ -8,7 +8,6 @@ since: 1.0.0 - [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 @@ -19,8 +18,7 @@ Para começar a usar a Invocação de funções client-side, siga estes passos: 1. Importe o objeto `Runtime` do arquivo `runtime.ts` 2. Agora você pode emitir invocações usando a função `Runtime.invoke`. Por - exemplo, para buscar dados de uma função, você usaria o seguinte - código: + 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) @@ -46,10 +44,10 @@ export default function MyIsland() { ``` 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 `Runtime.invoke`, o live.ts -irá invocar sua função como faz para renderizar seções e retorná-lo para você -como um objeto JavaScript. +especifica o caminho para sua função e uma propriedade `props` que contém suas +props de entrada da função. Quando você chama `Runtime.invoke`, o live.ts irá +invocar sua função como faz para renderizar seções e retorná-lo para você como +um objeto JavaScript. Você também pode agrupar solicitações passando um objeto com várias chaves, cada uma representando uma invocação desejada. Por exemplo: diff --git a/import_map.json b/import_map.json index dd97c309..243972c3 100644 --- a/import_map.json +++ b/import_map.json @@ -1,8 +1,8 @@ { "imports": { "deco-sites/starting/": "./", - "deco-sites/std/": "https://denopkg.com/deco-sites/std@1.8.2/", - "$live/": "https://denopkg.com/deco-cx/live@1.5.0/", + "deco-sites/std/": "https://denopkg.com/deco-sites/std@1.9.2/", + "$live/": "https://denopkg.com/deco-cx/live@1.6.1/", "partytown/": "https://deno.land/x/partytown@0.2.1/", "$fresh/": "https://deno.land/x/fresh@1.1.5/", "preact": "https://esm.sh/preact@10.13.2", @@ -13,4 +13,4 @@ "std/": "https://deno.land/std@0.162.0/", "prefetch": "https://deno.land/x/prefetch@0.0.6/mod.ts" } -} \ No newline at end of file +} diff --git a/islands/Header.tsx b/islands/Header.tsx index 68d604d2..18aefdfa 100644 --- a/islands/Header.tsx +++ b/islands/Header.tsx @@ -4,13 +4,13 @@ import { useState } from "preact/hooks"; export interface Props { menuLinks: Array<{ label: string; href: string; targetBlank?: boolean }>; - idiom: string; + idiom?: { label: string; canShowIdiom?: boolean }; pt: { label: string; url: string; selected?: boolean }; eng: { label: string; url: string; selected?: boolean }; pageInitial: string; mkt?: { label: string; url: string; selected?: boolean }; dev?: { label: string; url: string; selected?: boolean }; - login: { label: string; url: string }; + login?: { label: string; url: string; canShowLogin?: boolean }; sign: { label: string; url: string }; linkedinUrl: string; gitUrl: string; @@ -310,22 +310,26 @@ export default function Header(props: Props) { })} -