deco-sites · mcandeia · Sep 30, 2024 · Sep 30, 2024
diff --git a/.deco/blocks/analytics%40v0.json b/.deco/blocks/analytics%40v0.json
diff --git a/.gitignore b/.gitignore
@@ -77,4 +77,5 @@ deno.*.tmp
 
 # deco .metadata
 .metadata/
-.deco/metadata/*
+.deco/metadata/*
+static/tailwind.css
diff --git a/apps/decohub.ts b/apps/decohub.ts
diff --git a/apps/site.ts b/apps/site.ts
@@ -1,4 +1,4 @@
-import { App, AppContext as AC } from "$live/mod.ts";
+import { AppContext as AC, App } from "@deco/deco";
 import std, { Props } from "apps/compat/std/mod.ts";
 
 import manifest, { Manifest } from "../manifest.gen.ts";
@@ -22,3 +22,4 @@ export type SiteApp = ReturnType<typeof Site>;
 export type AppContext = AC<SiteApp>;
 export { onBeforeResolveProps } from "apps/compat/$live/mod.ts";
 export { Preview } from "apps/website/mod.ts";
+
diff --git a/components/GlobalTags.tsx b/components/GlobalTags.tsx
@@ -1,33 +1,27 @@
 import { asset, Head } from "$fresh/runtime.ts";
-import { Context } from "deco/deco.ts";
-
+import { Context } from "@deco/deco";
 export const STYLE_PATH = "/styles.css";
 export const FONT_ARGENT = "/fonts/ArgentPixelCF-Regular.woff2";
 export const FONT_ALBERT = "/fonts/font_albert.woff2";
 export const getStyleSrc = async () => {
-  const revision = await Context.active().release?.revision();
-  return asset(`${STYLE_PATH}?revision=${revision}`);
+    const revision = await Context.active().release?.revision();
+    return asset(`${STYLE_PATH}?revision=${revision}`);
 };
-
 export default function GlobalTags() {
-  const fontAlbertHref = asset(FONT_ALBERT);
-  const fontArgentHref = asset(FONT_ARGENT);
-  return (
-    <>
+    const fontAlbertHref = asset(FONT_ALBERT);
+    const fontArgentHref = asset(FONT_ARGENT);
+    return (<>
       <Head>
         {/* PostHog Script -> We are testing */}
-        <script
-          dangerouslySetInnerHTML={{
+        <script dangerouslySetInnerHTML={{
             __html: `
         !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
         posthog.init('phc_29fV7pvGvR8pAeCQNB4mQK1qInVgsVzqILafrwurd39', {api_host: 'https://app.posthog.com'})
       `,
-          }}
-        >
+        }}>
         </script>
 
-        <style
-          dangerouslySetInnerHTML={{
+        <style dangerouslySetInnerHTML={{
             __html: `
                 body {
                     overflow-x: hidden;
@@ -97,10 +91,8 @@ export default function GlobalTags() {
                   z-index: 10 !important;
                 }                
             `,
-          }}
-        >
+        }}>
         </style>
       </Head>
-    </>
-  );
+    </>);
 }
diff --git a/components/camp/GraphAndEmojis/GraphAndEmojis.tsx b/components/camp/GraphAndEmojis/GraphAndEmojis.tsx
@@ -1,187 +1,157 @@
 import Graph from "./Graph/Graph.tsx";
 import Icon from "../ui/Icon.tsx";
-import type { SectionProps } from "deco/mod.ts";
 import EmojisCommunity from "./EmojisCommunity.tsx";
 import type { Props as EmojisCommunityProps } from "./EmojisCommunity.tsx";
 import { Secret } from "apps/website/loaders/secret.ts";
-
+import { type SectionProps } from "@deco/deco";
 export interface Props {
-  title: string;
-  /**
-   * @format html
-   */
-  subTitle: string;
-  graph: {
     title: string;
-    tokenDiscord: Secret;
-    IdGuild: string;
-  };
-  emojiCommunity: EmojisCommunityProps;
+    /**
+     * @format html
+     */
+    subTitle: string;
+    graph: {
+        title: string;
+        tokenDiscord: Secret;
+        IdGuild: string;
+    };
+    emojiCommunity: EmojisCommunityProps;
 }
-
 const BASE_PROPS = {
-  title: "Growing community",
-  subTitle:
-    "<p>Unlock advanced audience insights and comprehensive&nbsp;<br>system observability for optimal perfomance</p>",
-  graph: {
-    title: "Community members",
-    buttonLabel: "Join",
-    buttonhref: "#",
-  },
-  posts: {
-    title: "Latest Posts",
-    buttonLabel: "Join our discord server",
-    buttonHref: "#",
-  },
+    title: "Growing community",
+    subTitle: "<p>Unlock advanced audience insights and comprehensive&nbsp;<br>system observability for optimal perfomance</p>",
+    graph: {
+        title: "Community members",
+        buttonLabel: "Join",
+        buttonhref: "#",
+    },
+    posts: {
+        title: "Latest Posts",
+        buttonLabel: "Join our discord server",
+        buttonHref: "#",
+    },
 };
-
 const discordToken = Deno.env.get("DISCORD_TOKEN");
-export async function loader({ props }: { props: Props }, _req: Request) {
-  const token = props.graph.tokenDiscord.get() ?? discordToken;
-  const server = props.graph.IdGuild;
-
-  interface MemberGuid {
-    user: { id: string };
-    joined_at: string; // Certifique-se de que joined_at seja do tipo string
-    roles?: string[];
-  }
-
-  const apiUrl = `https://discord.com/api/guilds/${server}/members`;
-
-  const allMembers: Array<MemberGuid> = [];
-  let hasMore = true;
-  let after: string | null = null;
-  let totalMembers = 0;
-
-  const membersByMonth: { [month: string]: { count: number; total: number } } =
-    {};
-  let sortedMembersByMonth: {
-    month: string;
-    count: number;
-    total: number;
-  }[] = [];
-
-  try {
-    while (hasMore) {
-      const responseM: Array<MemberGuid> = await fetch(
-        `${apiUrl}?limit=1000${after ? `&after=${after}` : ""}`,
-        {
-          method: "GET",
-          headers: {
-            Authorization: `Bot ${token}`,
-          },
-        },
-      ).then((r) => r.json());
-
-      if (responseM && responseM.length > 0) {
-        responseM.forEach((member: MemberGuid) => {
-          allMembers.push({
-            user: { id: member.user.id },
-            joined_at: member.joined_at,
-          });
-          const joinedDate = new Date(member.joined_at);
-          if (joinedDate.getFullYear() >= 2023) {
-            totalMembers++;
-          }
-        });
-
-        if (responseM.length < 1000) {
-          hasMore = false;
-        } else {
-          after = responseM[responseM.length - 1].user.id;
-        }
-      } else {
-        hasMore = false;
-      }
+export async function loader({ props }: {
+    props: Props;
+}, _req: Request) {
+    const token = props.graph.tokenDiscord.get() ?? discordToken;
+    const server = props.graph.IdGuild;
+    interface MemberGuid {
+        user: {
+            id: string;
+        };
+        joined_at: string; // Certifique-se de que joined_at seja do tipo string
+        roles?: string[];
     }
-
-    // Agrupar membros por mês
-    allMembers.forEach((member) => {
-      const joinedDate = new Date(member.joined_at);
-      const year = joinedDate.getFullYear();
-
-      if (year >= 2023) {
-        const monthKey = `${year}-${joinedDate.getMonth() + 1}`;
-
-        totalMembers--;
-
-        if (membersByMonth[monthKey]) {
-          membersByMonth[monthKey].count++;
-          membersByMonth[monthKey].total = allMembers.length - totalMembers;
-        } else {
-          membersByMonth[monthKey] = {
-            count: 1,
-            total: allMembers.length,
-          };
+    const apiUrl = `https://discord.com/api/guilds/${server}/members`;
+    const allMembers: Array<MemberGuid> = [];
+    let hasMore = true;
+    let after: string | null = null;
+    let totalMembers = 0;
+    const membersByMonth: {
+        [month: string]: {
+            count: number;
+            total: number;
+        };
+    } = {};
+    let sortedMembersByMonth: {
+        month: string;
+        count: number;
+        total: number;
+    }[] = [];
+    try {
+        while (hasMore) {
+            const responseM: Array<MemberGuid> = await fetch(`${apiUrl}?limit=1000${after ? `&after=${after}` : ""}`, {
+                method: "GET",
+                headers: {
+                    Authorization: `Bot ${token}`,
+                },
+            }).then((r) => r.json());
+            if (responseM && responseM.length > 0) {
+                responseM.forEach((member: MemberGuid) => {
+                    allMembers.push({
+                        user: { id: member.user.id },
+                        joined_at: member.joined_at,
+                    });
+                    const joinedDate = new Date(member.joined_at);
+                    if (joinedDate.getFullYear() >= 2023) {
+                        totalMembers++;
+                    }
+                });
+                if (responseM.length < 1000) {
+                    hasMore = false;
+                }
+                else {
+                    after = responseM[responseM.length - 1].user.id;
+                }
+            }
+            else {
+                hasMore = false;
+            }
         }
-      }
-    });
-
-    // Converter o objeto para um array de objetos
-    sortedMembersByMonth = Object.keys(membersByMonth).map((key) => ({
-      month: key,
-      count: membersByMonth[key].count,
-      total: membersByMonth[key].total,
-    }));
-
-    // Ordenar o array por data
-    sortedMembersByMonth.sort((a, b) =>
-      new Date(a.month).getTime() - new Date(b.month).getTime()
-    );
-  } catch (error) {
-    console.error("Erro na requisição:", error);
-  }
-
-  return { sortedMembersByMonth, ...props };
+        // Agrupar membros por mês
+        allMembers.forEach((member) => {
+            const joinedDate = new Date(member.joined_at);
+            const year = joinedDate.getFullYear();
+            if (year >= 2023) {
+                const monthKey = `${year}-${joinedDate.getMonth() + 1}`;
+                totalMembers--;
+                if (membersByMonth[monthKey]) {
+                    membersByMonth[monthKey].count++;
+                    membersByMonth[monthKey].total = allMembers.length - totalMembers;
+                }
+                else {
+                    membersByMonth[monthKey] = {
+                        count: 1,
+                        total: allMembers.length,
+                    };
+                }
+            }
+        });
+        // Converter o objeto para um array de objetos
+        sortedMembersByMonth = Object.keys(membersByMonth).map((key) => ({
+            month: key,
+            count: membersByMonth[key].count,
+            total: membersByMonth[key].total,
+        }));
+        // Ordenar o array por data
+        sortedMembersByMonth.sort((a, b) => new Date(a.month).getTime() - new Date(b.month).getTime());
+    }
+    catch (error) {
+        console.error("Erro na requisição:", error);
+    }
+    return { sortedMembersByMonth, ...props };
 }
-
-export default function PrimarySection(
-  { ...props }: SectionProps<typeof loader>,
-) {
-  const {
-    title,
-    subTitle,
-    graph,
-    sortedMembersByMonth,
-    emojiCommunity,
-  } = {
-    ...BASE_PROPS,
-    ...props,
-  };
-
-  return (
-    <div class="w-full h-full bg-[#000]">
+export default function PrimarySection({ ...props }: SectionProps<typeof loader>) {
+    const { title, subTitle, graph, sortedMembersByMonth, emojiCommunity, } = {
+        ...BASE_PROPS,
+        ...props,
+    };
+    return (<div class="w-full h-full bg-[#000]">
       <div class="container max-w-[1280px] mx-auto flex justify-center flex-col w-full py-8 md:py-10 px-4 lg:py-20">
         <h2 class="text-[32px] md:text-[64px] text-white font-medium text-center mb-4">
           {title}
         </h2>
-        <span
-          class="text-center text-base md:text-xl text-[#A1A1AA] mb-20"
-          dangerouslySetInnerHTML={{ __html: subTitle }}
-        >
+        <span class="text-center text-base md:text-xl text-[#A1A1AA] mb-20" dangerouslySetInnerHTML={{ __html: subTitle }}>
         </span>
         <div class="flex lg:flex-row w-full gap-4 flex-col">
           <div class="flex flex-col w-full lg:w-[60%] bg-[#ffffff0d] rounded-3xl p-4 lg:p-8 gap-4 container">
             <div class="flex flex-row justify-start items-center rounded-2xl gap-4">
-              <Icon id="DecoGreen" size={32} />
+              <Icon id="DecoGreen" size={32}/>
               <h4 class="text-white font-light text-2xl text-start">
                 {graph.title}
               </h4>
             </div>
 
             <div class="flex flex-row w-full justify-between items-center p-3 rounded-3xl bg-[#000]">
-              <Graph props={sortedMembersByMonth} />
+              <Graph props={sortedMembersByMonth}/>
             </div>
           </div>
           <div class=" w-full lg:w-[40%] h-full]">
-            <EmojisCommunity
-              buttons={emojiCommunity.buttons}
-              title={emojiCommunity.title}
-              button={emojiCommunity.button}
-            />
+            <EmojisCommunity buttons={emojiCommunity.buttons} title={emojiCommunity.title} button={emojiCommunity.button}/>
           </div>
         </div>
       </div>
-    </div>
-  );
+    </div>);
 }