how to redirect domain without www (#232)

* format * fix title
deco-sites · Jan 11, 2024 · e46e3bf · e46e3bf
1 parent 5a7ca6a
commit e46e3bf
Show file tree

Hide file tree

Showing 35 changed files with 332 additions and 136 deletions.
diff --git a/actions/startAlgoliaCrawler.ts b/actions/startAlgoliaCrawler.ts
@@ -17,10 +17,12 @@ export interface Props {
 const action = async (
   { crawlerUserId, crawlerApiKey, crawlerId }: Props,
 ): Promise<void> => {
-  const url = `https://crawler.algolia.com/api/1/crawlers/${crawlerId.get()}/reindex`;
+  const url =
+    `https://crawler.algolia.com/api/1/crawlers/${crawlerId.get()}/reindex`;
   const headers = {
     "Content-Type": "application/json",
-    "Authorization": "Basic " + btoa(`${crawlerUserId.get()}:${crawlerApiKey.get()}`),
+    "Authorization": "Basic " +
+      btoa(`${crawlerUserId.get()}:${crawlerApiKey.get()}`),
   };
 
   await fetch(url, {

diff --git a/animations/assets/Cursors.tsx b/animations/assets/Cursors.tsx
@@ -352,8 +352,14 @@ export const DesignSystemCursor = () => (
       </filter>
     </defs>
   </svg>
-)
+);
 
 export const DesignSystemCursorPath = () => (
-  <path id="design-system-cursor-path" d="M-121 201C-118.051 280.547 -50.6393 437.441 195.363 428.96C195.573 428.953 195.774 429.078 195.852 429.273L241.885 543.741C241.928 543.846 241.933 543.963 241.9 544.072L211.459 644.509C211.279 645.102 212.125 645.428 212.39 644.868L359 334.624" stroke="#FDE047" stroke-linecap="round" stroke-linejoin="round"/>
-)
+  <path
+    id="design-system-cursor-path"
+    d="M-121 201C-118.051 280.547 -50.6393 437.441 195.363 428.96C195.573 428.953 195.774 429.078 195.852 429.273L241.885 543.741C241.928 543.846 241.933 543.963 241.9 544.072L211.459 644.509C211.279 645.102 212.125 645.428 212.39 644.868L359 334.624"
+    stroke="#FDE047"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+);
diff --git a/apps/decohub.ts b/apps/decohub.ts
@@ -1 +1 @@
-export { default, Preview } from "apps/decohub/mod.ts";
+export { default, Preview } from "apps/decohub/mod.ts";
diff --git a/components/decohelp/pages/ui/Sidebar/SearchButton.tsx b/components/decohelp/pages/ui/Sidebar/SearchButton.tsx
@@ -1,4 +1,4 @@
-import { Head, asset } from "$fresh/runtime.ts";
+import { asset, Head } from "$fresh/runtime.ts";
 import { useEffect, useRef } from "preact/hooks";
 import docsearch from "https://esm.sh/@docsearch/[email protected]?target=es2020";
 

diff --git a/components/decohelp/pages/ui/Sidebar/Sidebar.tsx b/components/decohelp/pages/ui/Sidebar/Sidebar.tsx
@@ -123,8 +123,30 @@ export default function Sidebar({
     if (Topics) {
       Topics.forEach((topic, index) => {
         const isActive = topic.SubTopics.some(
-          (subTopic) =>
-            subTopic.SidebarLink?.split("/").pop()?.toLowerCase() === slug,
+          (subTopic, subTopicIndex) => {
+            if (
+              subTopic.SidebarLink?.split("/").pop()?.toLowerCase() === slug
+            ) {
+              const hasNestedTopics = subTopic.NestedTopics
+                ? subTopic.NestedTopics?.length > 0
+                : false;
+              if (hasNestedTopics) setOpenSubTopicIndex(subTopicIndex);
+
+              return true;
+            }
+
+            const nestedTopicOpened = subTopic.NestedTopics?.some((
+              childTopic,
+            ) =>
+              childTopic.SidebarLink?.split("/").pop()?.toLowerCase() === slug
+            );
+
+            if (nestedTopicOpened) {
+              setOpenSubTopicIndex(subTopicIndex);
+              return true;
+            }
+            return false;
+          },
         );
         if (isActive) {
           setOpenTopicIndex(index);
@@ -327,6 +349,17 @@ export default function Sidebar({
                                   width={16}
                                   height={16}
                                   strokeWidth={"3"}
+                                  onClick={(event) => {
+                                    event.stopPropagation();
+                                    event.preventDefault();
+                                    if (
+                                      openSubTopicIndex === subTopicIndex
+                                    ) {
+                                      setOpenSubTopicIndex(null);
+                                    } else {
+                                      setOpenSubTopicIndex(subTopicIndex);
+                                    }
+                                  }}
                                 />
                               )}
                               <span>{subTopic.label}</span>
@@ -336,23 +369,34 @@ export default function Sidebar({
                               openSubTopicIndex === subTopicIndex && (
                               <ol class="ml-9 flex flex-col">
                                 {subTopic.NestedTopics.map(
-                                  (ChildTopic, subSubIndex) => (
-                                    <li>
-                                      <a
-                                        class={`flex items-center pl-[32px] pr-2 py-2 text-zinc-900 text-[15px] leading-tight cursor-pointer hover:bg-[#F8F9F5]`}
-                                        href={ChildTopic.SidebarLink}
-                                        key={subSubIndex}
-                                        style={getFontWeightStyle(
-                                          fontWeightChildtopic.fontWeight ||
-                                            "normal",
-                                        )}
-                                      >
-                                        <span>
-                                          {ChildTopic.label}
-                                        </span>
-                                      </a>
-                                    </li>
-                                  ),
+                                  (ChildTopic, subSubIndex) => {
+                                    const isNestedTopicActive =
+                                      isSubTopicActive(
+                                        currentSlug,
+                                        ChildTopic,
+                                      );
+                                    return (
+                                      <li>
+                                        <a
+                                          class={`flex items-center pl-[32px] pr-2 py-2 text-[15px] leading-tight cursor-pointer hover:bg-[#F8F9F5] ${
+                                            isNestedTopicActive
+                                              ? "text-[#2E6ED9]"
+                                              : "text-zinc-900 relative w-min-content"
+                                          }`}
+                                          href={ChildTopic.SidebarLink}
+                                          key={subSubIndex}
+                                          style={getFontWeightStyle(
+                                            fontWeightChildtopic.fontWeight ||
+                                              "normal",
+                                          )}
+                                        >
+                                          <span>
+                                            {ChildTopic.label}
+                                          </span>
+                                        </a>
+                                      </li>
+                                    );
+                                  },
                                 )}
                               </ol>
                             )}

diff --git a/components/nrf/editor/RealtimeEditor.tsx b/components/nrf/editor/RealtimeEditor.tsx
@@ -135,7 +135,8 @@ export const RealtimeEditor = (props: AnimatedSvgProps) => {
                               that will make your customer want to buy it{" "}
                             </tspan>
                             <tspan x="557" y="275.195">
-                              right now &#x2014; no lorem ipsum needed, just{" "}
+                              right now &#x2014; no lorem ipsum needed,
+                              just{" "}
                             </tspan>
                             <tspan x="557" y="302.195">
                               pure delightment!

diff --git a/components/nrf/editor/Segmentation.tsx b/components/nrf/editor/Segmentation.tsx
@@ -235,7 +235,8 @@ export const Segmentation = (props: AnimatedSvgProps) => {
                                       letter-spacing="0em"
                                     >
                                       <tspan x="289.861" y="207.582">
-                                        The perfect description for your product{" "}
+                                        The perfect description for your
+                                        product{" "}
                                       </tspan>
                                       <tspan x="289.861" y="221.582">
                                         that will make your customer want to buy
@@ -676,7 +677,8 @@ export const Segmentation = (props: AnimatedSvgProps) => {
                                     letter-spacing="0em"
                                   >
                                     <tspan x="586.27" y="188.663">
-                                      The perfect description for your product{" "}
+                                      The perfect description for your
+                                      product{" "}
                                     </tspan>
                                     <tspan x="586.27" y="202.663">
                                       that will make your customer want to buy
@@ -1696,7 +1698,8 @@ export const Segmentation = (props: AnimatedSvgProps) => {
                                       letter-spacing="0em"
                                     >
                                       <tspan x="586.27" y="500.436">
-                                        The perfect description for your product{" "}
+                                        The perfect description for your
+                                        product{" "}
                                       </tspan>
                                       <tspan x="586.27" y="514.436">
                                         that will make your customer want to buy

diff --git a/components/nrf/hero/Monitoring.tsx b/components/nrf/hero/Monitoring.tsx
@@ -242,7 +242,10 @@ export const Monitoring = () => {
                 fill="url(#monitoring-p0)"
                 fill-opacity="0.25"
               />
-              <g id="monitoring-hyperdx-right" filter="url(#filter0_dd_1270_15145)">
+              <g
+                id="monitoring-hyperdx-right"
+                filter="url(#filter0_dd_1270_15145)"
+              >
                 <g clip-path="url(#clip2_1270_15145)">
                   <g id="Assets/Panel header">
                     <rect
@@ -525,7 +528,10 @@ export const Monitoring = () => {
                   stroke-width="0.7853"
                 />
               </g>
-              <g id="monitoring-hyperdx-left" filter="url(#filter1_dd_1270_15145)">
+              <g
+                id="monitoring-hyperdx-left"
+                filter="url(#filter1_dd_1270_15145)"
+              >
                 <g clip-path="url(#clip3_1270_15145)">
                   <g id="Assets/Panel header_2">
                     <rect

diff --git a/components/nrf/hero/NoCodeEditor.tsx b/components/nrf/hero/NoCodeEditor.tsx
@@ -16,7 +16,7 @@ export const NoCodeEditor = () => {
             rx="18.8588"
             fill="black"
           />
-          
+
           <g id="Top navigation">
             <rect
               width="1181.82"

diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
@@ -75,8 +75,6 @@ export type AvailableIcons =
   | "Plugs"
   | "FileSvg";
 
-
-
 interface Props extends JSX.SVGAttributes<SVGSVGElement> {
   /**
    * Symbol id from element to render. Take a look at `/static/icons.svg`.

diff --git a/components/ui/ImpactCalculator.tsx b/components/ui/ImpactCalculator.tsx
@@ -77,7 +77,6 @@ export default function ImpactCalculator({
       .catch((error) => {
         loading.value = false;
         alert("Request to PageSpeed has failed. Please try again.");
-        console.log("errorrrr", error);
       });
     const promiseDesktop = fetch(
       `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${website.value}&strategy=desktop`,
@@ -86,7 +85,6 @@ export default function ImpactCalculator({
       .catch((error) => {
         loading.value = false;
         alert("Request to PageSpeed has failed. Please try again.");
-        console.log("errorrrr", error);
       });
 
     const formData = new FormData();

diff --git a/docs/concepts/app/en.md b/docs/concepts/app/en.md
@@ -38,8 +38,8 @@ process and allows for efficient version control and maintenance of Apps.
 
 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.
+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.

diff --git a/docs/developing/islands/en.md b/docs/developing/islands/en.md
@@ -113,13 +113,18 @@ export default function Counter() {
 
 # 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.
+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. 
+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';
+To use signals,
+
+```tsx
+import { signal } from "@preact/signals";
 ```
 
 Now, use the global scope to create, mutate and subscribe to a signal:

diff --git a/docs/getting-started/custom-domains/apex-domains/en.md b/docs/getting-started/custom-domains/apex-domains/en.md
@@ -0,0 +1,48 @@
+---
+description: How to Redirect a Non-www Domain
+since: 1.1.0
+---
+
+## What is an Apex Domain?
+
+An apex domain is the term used for a root domain, without a subdomain.
+
+Example:
+
+- `www.example.com.br` -> Subdomain
+- `loja.example.com.br` -> Subdomain
+- `example.com.br` - Apex Domain
+
+## Can I point a deco.cx site to the apex domain?
+
+No, it is not yet possible to point a deco.cx site to your apex domain.
+
+Therefore, we have created an easy redirection solution so that access to the
+Apex domain is not lost.
+
+## How to Redirect an Apex Domain in deco.cx?
+
+1 - In the control panel of your site on deco.cx, go to the Settings page.
+
+2 - Click on "Add existing domain"
+
+3 - Enter your apex domain (without subdomain):
+
+![Domain step](https://github.com/deco-cx/apps/assets/76620866/85b1bcd5-5dec-4a61-bb0b-635e0b8a3d3a)
+
+4 - Define which subdomain to redirect to:
+
+![Sudomain step](https://github.com/deco-cx/apps/assets/76620866/ab92d6cb-ef08-4f98-a0e5-b241f932722d)
+
+5 - Now, you will see the settings that must be made in your domain hosting
+platform:
+
+![DNS Setup](https://github.com/deco-cx/apps/assets/76620866/ff13f321-58b2-4cc7-9015-5738dd31b849)
+
+6 - After making the configurations, click on Validate Domain.
+
+The validation step is essential for functionality and depends on the DNS
+propagation set up in the hosting service.
+
+Generally, propagation occurs within a few hours, but it can take up to 48 hours
+in some cases.
diff --git a/docs/getting-started/custom-domains/apex-domains/pt.md b/docs/getting-started/custom-domains/apex-domains/pt.md
@@ -0,0 +1,48 @@
+---
+description: Como redirecionar domínio sem www
+since: 1.1.0
+---
+
+## O que é domínio apex?
+
+Domínio apex é o termo utilizado para domínio raiz, sem subdomínio.
+
+Exemplo:
+
+- `www.example.com.br` -> Subdomínio
+- `loja.example.com.br` -> Subdomínio
+- `example.com.br` - Domínio Apex
+
+## Posso apontar um site deco.cx para o domínio apex?
+
+Não, ainda não é possível apontar um site deco.cx para o seu domínio apex.
+
+Por isso, criamos uma solução fácil de redirecionamento, para que os acessos ao
+domínio Apex não sejam perdidos.
+
+## Como redirecionar um domínio apex na deco.cx?
+
+1 - No painel do seu site na deco.cx, acesse a página de Configurações.
+
+2 - Clique em "Adicionar domínio existente"
+
+3 - Insira o seu domínio apex (sem subdomínio):
+
+![Domain step](https://github.com/deco-cx/apps/assets/76620866/85b1bcd5-5dec-4a61-bb0b-635e0b8a3d3a)
+
+4 - Defina para qual subdomínio redirecionar:
+
+![Sudomain step](https://github.com/deco-cx/apps/assets/76620866/ab92d6cb-ef08-4f98-a0e5-b241f932722d)
+
+5 - Agora, você verá os apontamentos que devem ser feitos na sua plataforma de
+hospedagem de domínio:
+
+![DNS Setup](https://github.com/deco-cx/apps/assets/76620866/ff13f321-58b2-4cc7-9015-5738dd31b849)
+
+6 - Após realizar as configurações, clique em Validar Domínio.
+
+A etapa de validação é essencial para o funcionamento e ela depende da
+propagação do DNS configurado no serviço de hospedagem.
+
+No geral, a propagação ocorre dentro algumas horas, mas pode levar até 48 horas
+em alguns casos.
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default, Preview } from "apps/decohub/mod.ts";
		export { default, Preview } from "apps/decohub/mod.ts";