Update section edit to new admin.

deco-sites · Nov 8, 2023 · 4b8ca04 · 4b8ca04
1 parent 95033fc
commit 4b8ca04
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 58 deletions.
diff --git a/docs/developing/editable-sections/en.md b/docs/developing/editable-sections/en.md
@@ -101,7 +101,7 @@ export interface Props {
 ```
 _Section and its properties types_
 
-![Editing properties of the Intro Section](https://github.com/deco-cx/apps/assets/882438/b57f6fae-da58-4cc4-a5cc-aa99985cd442)
+![Editing properties of the Hero Section](https://github.com/deco-cx/apps/assets/882438/b57f6fae-da58-4cc4-a5cc-aa99985cd442)
 
 A deco project uses the type of a component's properties to automatically generate the block editing form in the Admin. In the following figure, you can see how the Admin knows the information to be placed in the form. To do this, the Admin contacts the live Site to retrieve the property data of the Sections in that project. On the other hand, the code on a Site comes from GitHub, the same one the developer uses.
 

diff --git a/docs/developing/editable-sections/pt.md b/docs/developing/editable-sections/pt.md
@@ -102,69 +102,57 @@ export interface Props {
 ```
 _Tipos no arquivo de uma Section_
 
-![Edição de propriedades da Section Intro](https://github.com/deco-sites/start/assets/882438/ad261083-b924-4737-917f-f01548385a0c)
+![Edição de propriedades da Section Hero](https://github.com/deco-cx/apps/assets/882438/b57f6fae-da58-4cc4-a5cc-aa99985cd442)
 
 Um projeto deco faz uso do tipo das propriedades de um componente para gerar automáticamente o formulário de preenchimento de bloco no Admin. Na figura a seguir é possível visualizar como o Admin conhece as informações a serem colocadas no formulário. Para isto, o Admin entra em contato com o Site em produção para pegar os dados das propriedades das Sections daquele projeto. Por sua vez, o código em um Site é oriundo do GitHub, o mesmo que o desenvolvedor utiliza.
 
-![Estrutura de acesso aos dados do Site](https://github.com/deco-cx/apps/assets/882438/b57f6fae-da58-4cc4-a5cc-aa99985cd442)
+![Estrutura de acesso aos dados do Site](https://github.com/deco-sites/starting/assets/882438/dcc4d63a-bbb2-4f81-909a-054eef048a53)
 
 # Primeira alteração e seleção de ambiente
 
 Execute o projeto localmente (`deno task start`) e altere o código da `Hero` para receber uma nova propriedade opcional, o `hightlight` de um link. Para isso, altere o tipo `Link` e o código JSX do componente, lembrando de salvar o arquivo após a alteração.
 
 ```tsx
 import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
 
-/** @title {{{title}}} - {{{href}}} */
-export interface Link {
-  title: string;
-  href: string;
-  hightlight?: boolean;
-}
 
 export interface Props {
-  logo?: ImageWidget;
-  title?: string;
-  /** @format textarea */
-  headline?: string;
-  links?: Array<Link>;
+   /**
+    * @title Post image.
+    */
+   photo?: ImageWidget;
+   /**
+   * @title Post body.
+   */
+   post: string;
+   /**
+   * @title Publish date.
+   * @format datetime
+   */
+   datetime: string;
+   /**
+   * @title Post title.
+   */
+   title: string;
 }
 
-export default function Hero({
-  title = "deco.cx",
-  logo = "/logo.svg",
-  headline =
-    "The digital experience platform that combines performance and personalization for the ultimate sales results.",
-  links = [
-    { title: "Official website", "href": "https://deco.cx/" },
-    { title: "Linkedin", "href": "https://www.linkedin.com/company/deco-cx/" },
-    { title: "Discord", "href": "https://deco.cx/discord" },
-  ],
-}: Props) {
-  return (
-    <header class="lg:container mx-8 md:mx-16 lg:mx-auto mt-8 md:mt-12 mb-28 text-xl md:text-base">
-      <div class="mb-10 md:mb-20">
-        <img
-          class="object-cover w-20"
-          src={logo}
-          alt={title}
-        />
+export default function LatestPosts({ title, photo }: Props) {
+   return (
+      <div>
+      {photo && <Image
+         src={photo}
+         alt={`${title} image`}
+         height={500}
+         width={500}
+         class="rounded"
+      />}
+      <h1 class="font-bold">{title}</h1>
+      <p>This is an example section</p>
       </div>
-      <div class="font-bold text-2xl lg:text-6xl leading-tight lg:leading-none xl:w-5/6">
-        {headline}
-      </div>
-      {!!links?.length && (
-        <ul class="mt-8 flex flex-col md:flex-row gap-2 md:gap-4">
-            {links.map(({ href, title, hightlight }) => (
-              <a href={href} aria-label={title}>
-                <li class={`${hightlight ? "font-black" : ""}`}>{title}</li>
-              </a>
-            ))}
-        </ul>
-      )}
-    </header>
-  );
+   );
 }
+
 ```
 _Alterando o tipo Link e o JSX com a nova propriedade `hightlight`_
 

diff --git a/docs/developing/hello-world/en.md b/docs/developing/hello-world/en.md
@@ -38,7 +38,7 @@ Open your site's folder in an IDE and perform the following actions:
 
 **Done!** The Section has been created locally in your project.
 
-If the project is running locally (`deno task start`) and if the environment selector is pointing to `localhost:8000`, it will be possible to see the new Section in the block library (**Library**).
+If the project is running locally (`deno task start`) and if the environment selector is pointing to `localhost:8000`, it will be possible to see the new Section in the section library (**Sections**).
 
 # Properties of a Section
 
@@ -47,23 +47,24 @@ A Section can have any property that is serializable and accept as a property in
 - `strings` and `numbers`
 - Simple types of serializable objects
 - Generated types from union, extends, `Pick`, or `Omit`
-- `Sections` (`import { Section } from "$live/blocks/section.ts"`)
-- `Image` (`import { Image } from "deco-sites/std/components/types.ts"`) and other components from the deco standard library
+- `Sections` (`import { Section } from "deco/blocks/section.ts"`)
+- `ImageWidget` (`import type { ImageWidget } from "apps/admin/widgets.ts";`) and other components from the admin widgets
 - Arrays of the types indicated above
 
 In addition to those types, it is possible to annotate some properties so that the admin form changes the input mechanism or to determine certain aspects of the property's behavior.
 
 As an example, let's add three new properties to our `LatestPosts` component, one for an image (`photo`), another for the post body (`post`), and one for the post time.
 
 ```tsx
-import type { Image as DecoImage } from "deco-sites/std/components/types.ts";
-import Image from "deco-sites/std/components/Image.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+
 
 export interface Props {
    /**
     * @title Post image.
     */
-   photo?: DecoImage;
+   photo?: ImageWidget;
    /**
    * @title Post body.
    */
@@ -176,4 +177,4 @@ export default function LatestPosts({ title, photo }: Props) {
 
 The source code of Theme.tsx demonstrates different uses of the tokens. Now, if a Theme component is on the same page as LatestPosts, the latter can be styled from the theme component.
 
-![Styling with the theme component](https://github.com/deco-sites/starting/assets/882438/58860548-d4e4-46f8-a198-75461cf8ab86)
+![Styling with the theme component](https://github.com/deco-cx/apps/assets/882438/10e8d567-6eab-498b-ac8e-44e3362b3131)
diff --git a/docs/developing/hello-world/pt.md b/docs/developing/hello-world/pt.md
@@ -42,7 +42,7 @@ Abra a pasta do seu site em uma IDE e execute as seguintes ações:
 
 **Pronto!** A Section foi criada localmente no seu projeto.
 
-Caso o projeto esteja rodando localmente (`deno task start`) e caso o seletor de ambientes esteja apontando para `localhost:8000`, será possível visualizar a nova Section na biblioteca de blocos (**Library**).
+Caso o projeto esteja rodando localmente (`deno task start`) e caso o seletor de ambientes esteja apontando para `localhost:8000`, será possível visualizar a nova Section na biblioteca de sections (**Sections**).
 
 # Propriedades de uma Section
 
@@ -51,8 +51,8 @@ Uma Section pode ter como propriedade qualquer elemento que seja serializável,
 - `strings` e `numbers`
 - Tipos simples de objetos serializáveis
 - Tipos gerados de união, extensão, `Pick` ou `Omit`
-- `Sections` ( `import { Section } from "$live/blocks/section.ts"` )
-- `Image` (`import { Image } from "deco-sites/std/components/types.ts"`) e outros componentes da biblioteca padrão deco
+- `Sections` ( `import { Section } from "deco/blocks/section.ts"` )
+- `ImageWidget` (`import type { ImageWidget } from "apps/admin/widgets.ts";`) e outros components do admin
 - Arrays dos tipos indicados acima
 
 Além dos tipos acima, é possível anotar algumas propriedades para que o formulário do admin altere o mecanismo de inserção ou para determinar alguns aspectos do comportamento da propriedade.
@@ -180,4 +180,4 @@ export default function LatestPosts({ title, photo }: Props) {
 
 O cõdigo fonte do `Theme.tsx` apresenta diferentes usos dos tokens. Agora, caso um componente de `Theme` esteja na mesma página do `LatestPosts`, este último podera ser estilizado a partir do componente de tema.
 
-![Estilização com o componente de tema](https://github.com/deco-sites/starting/assets/882438/58860548-d4e4-46f8-a198-75461cf8ab86)
+![Estilização com o componente de tema](https://github.com/deco-cx/apps/assets/882438/10e8d567-6eab-498b-ac8e-44e3362b3131)