diff --git a/.deco/blocks/analytics%40v0.json b/.deco/blocks/analytics%40v0.json deleted file mode 100644 index 27f5a9a0..00000000 --- a/.deco/blocks/analytics%40v0.json +++ /dev/null @@ -1 +0,0 @@ -{"__resolveType":"decohub/apps/analytics.ts"} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 77b60219..f8e1b726 100644 --- a/.gitignore +++ b/.gitignore @@ -77,4 +77,5 @@ deno.*.tmp # deco .metadata .metadata/ -.deco/metadata/* \ No newline at end of file +.deco/metadata/* +static/tailwind.css \ No newline at end of file diff --git a/apps/decohub.ts b/apps/decohub.ts deleted file mode 100644 index 9ed80446..00000000 --- a/apps/decohub.ts +++ /dev/null @@ -1 +0,0 @@ -export { default, Preview } from "apps/decohub/mod.ts"; diff --git a/apps/site.ts b/apps/site.ts index 6ce71b92..5849914d 100644 --- 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; export type AppContext = AC; 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 index 45f62148..b26c9bf7 100644 --- 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 (<> {/* PostHog Script -> We are testing */} - - - - ); + ); } diff --git a/components/camp/GraphAndEmojis/GraphAndEmojis.tsx b/components/camp/GraphAndEmojis/GraphAndEmojis.tsx index e88b0daf..9d751ec8 100644 --- 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: - "

Unlock advanced audience insights and comprehensive 
system observability for optimal perfomance

", - graph: { - title: "Community members", - buttonLabel: "Join", - buttonhref: "#", - }, - posts: { - title: "Latest Posts", - buttonLabel: "Join our discord server", - buttonHref: "#", - }, + title: "Growing community", + subTitle: "

Unlock advanced audience insights and comprehensive 
system observability for optimal perfomance

", + 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 = []; - 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 = 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 = []; + 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 = 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, -) { - const { - title, - subTitle, - graph, - sortedMembersByMonth, - emojiCommunity, - } = { - ...BASE_PROPS, - ...props, - }; - - return ( -
+export default function PrimarySection({ ...props }: SectionProps) { + const { title, subTitle, graph, sortedMembersByMonth, emojiCommunity, } = { + ...BASE_PROPS, + ...props, + }; + return (

{title}

- +
- +

{graph.title}

- +
- +
-
- ); +
); } diff --git a/components/camp/sdk/useSuggestions.ts b/components/camp/sdk/useSuggestions.ts index b3f9a9d0..52fea3ae 100644 --- a/components/camp/sdk/useSuggestions.ts +++ b/components/camp/sdk/useSuggestions.ts @@ -1,57 +1,45 @@ import { signal } from "@preact/signals"; import type { Suggestion } from "apps/commerce/types.ts"; -import type { Resolved } from "deco/engine/core/resolver.ts"; import { useCallback } from "preact/compat"; import { invoke } from "../runtime.ts"; - +import { type Resolved } from "@deco/deco"; const payload = signal(null); const loading = signal(false); - let queue = Promise.resolve(); let latestQuery = ""; - const NULLABLE: Resolved = { - __resolveType: "resolved", - data: null, + __resolveType: "resolved", + data: null, }; - -const doFetch = async ( - query: string, - { __resolveType, ...extraProps }: Resolved = NULLABLE, -) => { - // Debounce query to API speed - if (latestQuery !== query) return; - - try { - // Figure out a better way to type this loader - // deno-lint-ignore no-explicit-any - const invokePayload: any = { - key: __resolveType, - props: { query, ...extraProps }, - }; - payload.value = await invoke(invokePayload) as Suggestion | null; - } catch (error) { - console.error( - "Something went wrong while fetching suggestions \n", - error, - ); - } finally { - loading.value = false; - } +const doFetch = async (query: string, { __resolveType, ...extraProps }: Resolved = NULLABLE) => { + // Debounce query to API speed + if (latestQuery !== query) + return; + try { + // Figure out a better way to type this loader + // deno-lint-ignore no-explicit-any + const invokePayload: any = { + key: __resolveType, + props: { query, ...extraProps }, + }; + payload.value = await invoke(invokePayload) as Suggestion | null; + } + catch (error) { + console.error("Something went wrong while fetching suggestions \n", error); + } + finally { + loading.value = false; + } }; - -export const useSuggestions = ( - loader: Resolved, -) => { - const setQuery = useCallback((query: string) => { - loading.value = true; - latestQuery = query; - queue = queue.then(() => doFetch(query, loader)); - }, [loader]); - - return { - loading, - payload, - setQuery, - }; +export const useSuggestions = (loader: Resolved) => { + const setQuery = useCallback((query: string) => { + loading.value = true; + latestQuery = query; + queue = queue.then(() => doFetch(query, loader)); + }, [loader]); + return { + loading, + payload, + setQuery, + }; }; diff --git a/components/decohelp/pages/interfaces.ts b/components/decohelp/pages/interfaces.ts index da02bce4..3c33b108 100644 --- a/components/decohelp/pages/interfaces.ts +++ b/components/decohelp/pages/interfaces.ts @@ -1,84 +1,73 @@ import type { HTML } from "deco-sites/std/components/HTMLRenderer.tsx"; import { Image as LiveImage } from "deco-sites/std/components/types.ts"; import Image from "deco-sites/std/components/Image.tsx"; -import { Section } from "deco/blocks/section.ts"; - +import { type Section } from "@deco/deco/blocks"; export interface Props { - Title?: string; - Version?: string; - /** @description Breadcrumb label for the home link */ - homeLabel: string; - /** @description Breadcrumb path for the home link */ - homePath: string; - /** @description Main content structure of the page */ - PageContent: Content[]; + Title?: string; + Version?: string; + /** @description Breadcrumb label for the home link */ + homeLabel: string; + /** @description Breadcrumb path for the home link */ + homePath: string; + /** @description Main content structure of the page */ + PageContent: Content[]; } - export interface Topic { - /** @description Label for the topic */ - label?: string; - /** @description Icon displayed beside the topic label */ - Image?: LiveImage; - /** @description Alternate text for the topic icon */ - AltImage?: string; - /** @description Link associated with the topic */ - LinkTopic?: string; - SubTopics: Array; + /** @description Label for the topic */ + label?: string; + /** @description Icon displayed beside the topic label */ + Image?: LiveImage; + /** @description Alternate text for the topic icon */ + AltImage?: string; + /** @description Link associated with the topic */ + LinkTopic?: string; + SubTopics: Array; } - export interface SubTopic { - label: string; - SidebarLink: string; - NestedTopics?: Array; + label: string; + SidebarLink: string; + NestedTopics?: Array; } - export interface NestedTopic { - label: string; - SidebarLink: string; + label: string; + SidebarLink: string; } - export interface Content { - Type: ContentType[]; + Type: ContentType[]; } - export type ContentType = Text | Code | Image | Youtube | SectionBlock; - export interface SectionBlock { - section: Section; - Underline?: boolean; + section: Section; + Underline?: boolean; } - export interface Text { - Text: HTML; - /** @description aria-label for the text block */ - label: string; - Underline?: boolean; + Text: HTML; + /** @description aria-label for the text block */ + label: string; + Underline?: boolean; } - export interface Code { - Code: HTML; - /** @description aria-label for the code block */ - label: string; - Underline?: boolean; + Code: HTML; + /** @description aria-label for the code block */ + label: string; + Underline?: boolean; } - export interface Image { - Image: LiveImage; - width: number; - height?: number; - /** @description Alternate text for the image */ - label: string; - Underline?: boolean; + Image: LiveImage; + width: number; + height?: number; + /** @description Alternate text for the image */ + label: string; + Underline?: boolean; } - export interface Youtube { - /** @description https://www.youtube.com/embed/embedId */ - embedId: string; - /** @description title for the youtube video */ - label: string; - /** @description custom width youtube video */ - width?: string; - /** @description custom height youtube video */ - height?: string; - Underline?: boolean; + /** @description https://www.youtube.com/embed/embedId */ + embedId: string; + /** @description title for the youtube video */ + label: string; + /** @description custom width youtube video */ + width?: string; + /** @description custom height youtube video */ + height?: string; + Underline?: boolean; } diff --git a/components/decohelp/pages/ui/Sidebar/Sidebar.tsx b/components/decohelp/pages/ui/Sidebar/Sidebar.tsx index b81defe0..9efef89c 100644 --- a/components/decohelp/pages/ui/Sidebar/Sidebar.tsx +++ b/components/decohelp/pages/ui/Sidebar/Sidebar.tsx @@ -5,436 +5,237 @@ import SearchButton from "./SearchButton.tsx"; import { JSX } from "preact"; import Drawer from "site/components/ui/Drawer.tsx"; import Breadcrumb from "site/components/decohelp/pages/ui/BreadCrumb/Breadcrumb.tsx"; -import { SectionProps } from "deco/mod.ts"; - +import { type SectionProps } from "@deco/deco"; const DOCS_DRAWER_ID = "deco-docs-drawer"; - export interface SidebarContent { - /** @description Icon for closing the mobile menu */ - iconMenuClose: LiveImage; - /** @description Icon for opening the mobile menu */ - iconMenuOpen: LiveImage; - /** @description Alternate text for the mobile menu icon */ - AltIconMenu: string; - SidebarTitle?: string; - /** @description Icon displayed beside the sidebar title */ - SidebarIcon?: LiveImage; - /** @description Alternate text for the sidebar icon */ - AltIcon?: string; - Subtitle?: string; - LinkSubtitle?: string; - Topics?: Array; + /** @description Icon for closing the mobile menu */ + iconMenuClose: LiveImage; + /** @description Icon for opening the mobile menu */ + iconMenuOpen: LiveImage; + /** @description Alternate text for the mobile menu icon */ + AltIconMenu: string; + SidebarTitle?: string; + /** @description Icon displayed beside the sidebar title */ + SidebarIcon?: LiveImage; + /** @description Alternate text for the sidebar icon */ + AltIcon?: string; + Subtitle?: string; + LinkSubtitle?: string; + Topics?: Array; } - export interface Topic { - label?: string; - Image?: LiveImage; - AltImage?: string; - LinkTopic?: string; - SubTopics: Array; + label?: string; + Image?: LiveImage; + AltImage?: string; + LinkTopic?: string; + SubTopics: Array; } - export interface SubTopic { - label: string; - fontWeight?: - | "100" - | "200" - | "300" - | "400" - | "500" - | "600" - | "700" - | "800" - | "900" - | "bold" - | "bolder" - | "inherit" - | "initial" - | "lighter" - | "normal" - | "revert" - | "unset"; - SidebarLink: string; - NestedTopics?: Array; + label: string; + fontWeight?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold" | "bolder" | "inherit" | "initial" | "lighter" | "normal" | "revert" | "unset"; + SidebarLink: string; + NestedTopics?: Array; } - export interface ChildTopic { - label: string; - fontWeight?: - | "100" - | "200" - | "300" - | "400" - | "500" - | "600" - | "700" - | "800" - | "900" - | "bold" - | "bolder" - | "inherit" - | "initial" - | "lighter" - | "normal" - | "revert" - | "unset"; - SidebarLink: string; + label: string; + fontWeight?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold" | "bolder" | "inherit" | "initial" | "lighter" | "normal" | "revert" | "unset"; + SidebarLink: string; } - -const isTopicActive = ( - openTopicIndex: number, - index: number, -): boolean => { - const isOpen = openTopicIndex === index; - - return isOpen; +const isTopicActive = (openTopicIndex: number, index: number): boolean => { + const isOpen = openTopicIndex === index; + return isOpen; }; - -const isSubTopicActive = ( - currentSlug: string | null, - subTopic: SubTopic, -): boolean => { - const subTopicSlug = subTopic.SidebarLink?.toLowerCase(); - const isActiveSubTopic = currentSlug === subTopicSlug; - return isActiveSubTopic; +const isSubTopicActive = (currentSlug: string | null, subTopic: SubTopic): boolean => { + const subTopicSlug = subTopic.SidebarLink?.toLowerCase(); + const isActiveSubTopic = currentSlug === subTopicSlug; + return isActiveSubTopic; }; - function SidebarItem(props: JSX.IntrinsicElements["a"]) { - return ( - - ); + cursor-pointer aria-selected:text-decorative-one-900 text-[#E7E5E4] ${props.class}`}/>); } - -function AsideLinks({ - topics, - subtitle, - linkSubtitle, -}: { - topics: Topic[]; - subtitle: string; - linkSubtitle: string; +function AsideLinks({ topics, subtitle, linkSubtitle, }: { + topics: Topic[]; + subtitle: string; + linkSubtitle: string; }) { - const [currentSlug, setCurrentSlug] = useState(null); - const [openTopicIndex, setOpenTopicIndex] = useState(null); - const [openSubTopicIndex, setOpenSubTopicIndex] = useState( - null, - ); - - const toggleTopicMenu = (index: number) => { - if (openTopicIndex === index) { - setOpenTopicIndex(null); - } else { - setOpenTopicIndex(index); - } - }; - - useEffect(() => { - const currentPath = window.location.pathname; - - topics.forEach((topic, index) => { - const isActive = topic.SubTopics.some( - (subTopic, subTopicIndex) => { - if ( - currentPath.endsWith(subTopic.SidebarLink?.toLowerCase()) - ) { - const hasNestedTopics = subTopic.NestedTopics - ? subTopic.NestedTopics?.length > 0 - : false; - if (hasNestedTopics) setOpenSubTopicIndex(subTopicIndex); - setCurrentSlug(subTopic.SidebarLink?.toLowerCase()); - return true; - } - - const nestedTopicOpened = subTopic.NestedTopics?.some(( - childTopic, - ) => { - if (currentPath.endsWith(childTopic.SidebarLink?.toLowerCase())) { - setCurrentSlug(childTopic.SidebarLink?.toLowerCase()); - return true; + const [currentSlug, setCurrentSlug] = useState(null); + const [openTopicIndex, setOpenTopicIndex] = useState(null); + const [openSubTopicIndex, setOpenSubTopicIndex] = useState(null); + const toggleTopicMenu = (index: number) => { + if (openTopicIndex === index) { + setOpenTopicIndex(null); + } + else { + setOpenTopicIndex(index); + } + }; + useEffect(() => { + const currentPath = window.location.pathname; + topics.forEach((topic, index) => { + const isActive = topic.SubTopics.some((subTopic, subTopicIndex) => { + if (currentPath.endsWith(subTopic.SidebarLink?.toLowerCase())) { + const hasNestedTopics = subTopic.NestedTopics + ? subTopic.NestedTopics?.length > 0 + : false; + if (hasNestedTopics) + setOpenSubTopicIndex(subTopicIndex); + setCurrentSlug(subTopic.SidebarLink?.toLowerCase()); + return true; + } + const nestedTopicOpened = subTopic.NestedTopics?.some((childTopic) => { + if (currentPath.endsWith(childTopic.SidebarLink?.toLowerCase())) { + setCurrentSlug(childTopic.SidebarLink?.toLowerCase()); + return true; + } + return false; + }); + if (nestedTopicOpened) { + setOpenSubTopicIndex(subTopicIndex); + return true; + } + return false; + }); + if (isActive) { + setOpenTopicIndex(index); } - return false; - }); - - if (nestedTopicOpened) { - setOpenSubTopicIndex(subTopicIndex); - return true; - } - return false; - }, - ); - if (isActive) { - setOpenTopicIndex(index); - } - }); - }, []); - - const subtitleSlug = linkSubtitle?.toLowerCase(); - - const firstTopic = topics[0]; - const firstSubTopic = firstTopic?.SubTopics?.[0]; - const firstNestedTopic = firstSubTopic?.NestedTopics?.[0]; - - const fontWeightSubtopic = { - fontWeight: firstSubTopic?.fontWeight || "normal", - }; - - const fontWeightChildtopic = { - fontWeight: firstNestedTopic?.fontWeight || "normal", - }; - - function getFontWeightStyle(fontWeightValue: string) { - return { - fontWeight: fontWeightValue, + }); + }, []); + const subtitleSlug = linkSubtitle?.toLowerCase(); + const firstTopic = topics[0]; + const firstSubTopic = firstTopic?.SubTopics?.[0]; + const firstNestedTopic = firstSubTopic?.NestedTopics?.[0]; + const fontWeightSubtopic = { + fontWeight: firstSubTopic?.fontWeight || "normal", }; - } - - return ( - <> + const fontWeightChildtopic = { + fontWeight: firstNestedTopic?.fontWeight || "normal", + }; + function getFontWeightStyle(fontWeightValue: string) { + return { + fontWeight: fontWeightValue, + }; + } + return (<> -