From ac63b332ca9d7dbacdadc0665bff4178c8ed1845 Mon Sep 17 00:00:00 2001 From: Gabriel Oliveira Date: Mon, 21 Oct 2024 16:19:21 -0300 Subject: [PATCH] [WIP] --- .deco/blocks/pages-Noticias-464054.json | 7 ++-- deno.json | 22 ++++++++---- islands/all-news.tsx | 46 +++++++++++++++++++------ islands/featured-news.tsx | 27 +++++++-------- static/tailwind.css | 13 +++++++ 5 files changed, 79 insertions(+), 36 deletions(-) diff --git a/.deco/blocks/pages-Noticias-464054.json b/.deco/blocks/pages-Noticias-464054.json index fc6590e..75519b2 100644 --- a/.deco/blocks/pages-Noticias-464054.json +++ b/.deco/blocks/pages-Noticias-464054.json @@ -38,14 +38,13 @@ "image": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/antra/2144ad25-3f33-4076-b964-73d0961788e7/image2.png", "title": "Encontre locais de apoio na sua área" }, + "title": "Todas as notícias", "allNews": { "__resolveType": "blog/loaders/BlogpostList.ts", "sortBy": "date_desc", "slug": "news", - "count": 5, - "page": 1 - }, - "title": "Todas as notícias" + "count": 1 + } }, { "__resolveType": "Footer" diff --git a/deno.json b/deno.json index 3a9a553..8ba3941 100644 --- a/deno.json +++ b/deno.json @@ -27,7 +27,7 @@ "@zaubrik/djwt": "jsr:@zaubrik/djwt@^3.0.2", "fast-json-patch": "npm:fast-json-patch@^3.1.1", "partytown/": "https://deno.land/x/partytown@0.4.8/", - "preact": "https://esm.sh/preact@10.22.0", + "preact": "npm:preact@10.23.1", "preact-render-to-string": "npm:preact-render-to-string@6.4.2", "simple-git": "npm:simple-git@^3.25.0", "std/": "https://deno.land/std@0.190.0/", @@ -40,8 +40,7 @@ "https://esm.sh/*preact-render-to-string@6.3.1": "npm:preact-render-to-string@6.4.2", "@deco/deco": "jsr:@deco/deco@1.106.2", "@deco/dev": "jsr:@deco/dev@1.106.2", - "@deco/deno-ast-wasm": "jsr:@deco/deno-ast-wasm@^0.5.4", - "preact/": "https://esm.sh/preact@10.22.0/" + "@deco/deno-ast-wasm": "jsr:@deco/deno-ast-wasm@^0.5.4" }, "tasks": { "start": "deno run -A --unstable-http --env https://deco.cx/run -- deno task dev", @@ -51,8 +50,8 @@ "release": "deno eval 'import \"deco/scripts/release.ts\"'", "update": "deno run -Ar https://deco.cx/update", "check": "deno fmt && deno lint && deno check dev.ts main.ts", - "install": "deno eval 'import \"deco/scripts/apps/install.ts\"'", - "uninstall": "deno eval 'import \"deco/scripts/apps/uninstall.ts\"'", + "install": "deno eval 'import \"@deco/deco/scripts/apps/install.ts\"'", + "uninstall": "deno eval 'import \"@deco/deco/scripts/apps/uninstall.ts\"'", "bundle": "deno run -A jsr:@deco/deco/scripts/bundle site", "cache_clean": "rm deno.lock; deno cache -r main.ts", "build": "deno run -A dev.ts build", @@ -60,7 +59,9 @@ "dev": "deno run -A --env --unstable-kv --unstable-hmr dev.ts", "reload": "deno cache -r https://deco.cx/run" }, - "githooks": { "pre-commit": "check" }, + "githooks": { + "pre-commit": "check" + }, "exclude": [ "node_modules", "static/", @@ -69,7 +70,14 @@ "**/_fresh/*", ".deco/**" ], - "lint": { "rules": { "tags": ["fresh", "recommended"] } }, + "lint": { + "rules": { + "tags": [ + "fresh", + "recommended" + ] + } + }, "nodeModulesDir": false, "compilerOptions": { "jsx": "react-jsx", diff --git a/islands/all-news.tsx b/islands/all-news.tsx index cf723a7..419e3e2 100644 --- a/islands/all-news.tsx +++ b/islands/all-news.tsx @@ -1,7 +1,8 @@ -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useId, useState } from "preact/hooks"; import type { ImageWidget } from "apps/admin/widgets.ts"; import Image from "apps/website/components/Image.tsx"; -import { BlogPost } from "apps/blog/types.ts"; +import { BlogPost, BlogPostListingPage } from "apps/blog/types.ts"; +import { useSection } from "@deco/deco/hooks"; export interface Info { title: string; @@ -11,7 +12,7 @@ export interface Info { export interface Props { title: string; info: Info; - allNews?: BlogPost[] | null; + allNews?: BlogPostListingPage; pagination?: { page?: number; perPage?: number; @@ -23,6 +24,13 @@ export default function AllNewsIsland( ) { const from = perPage * page; const to = perPage * (page + 1); + const postList = useId(); + const fetchMoreLink = useSection({ + props: { + pagination: { perPage, page: page + 1 }, + }, + }); + console.log(allNews) const [selectedTags, setSelectedTags] = useState([]); useEffect(() => { @@ -31,12 +39,12 @@ export default function AllNewsIsland( setSelectedTags(tagsFromUrl as string[]); }, [window.location.search]); - const filteredNews = allNews?.slice(from, to).filter((news) => - selectedTags.length === 0 || - news?.extraProps?.some((item) => - item.key === "tag" && selectedTags.includes(item.value) - ) - ); + // const filteredNews = allNews?.slice(from, to).filter((news) => + // selectedTags.length === 0 || + // news?.extraProps?.some((item) => + // item.key === "tag" && selectedTags.includes(item.value) + // ) + // ); return (
@@ -46,7 +54,7 @@ export default function AllNewsIsland( {title}
- {allNews?.map((news, index) => ( + {/* {allNews?.map((news, index) => (
- ))} + ))} */}
+ {/* {allNews && to < allNews.length && ( +
+ +
+ )} */} diff --git a/islands/featured-news.tsx b/islands/featured-news.tsx index 35b056d..30db603 100644 --- a/islands/featured-news.tsx +++ b/islands/featured-news.tsx @@ -3,7 +3,7 @@ import Image from "apps/website/components/Image.tsx"; import Icon from "site/components/ui/Icon.tsx"; import { useState } from "preact/hooks"; import AllNewsIsland from "site/islands/all-news.tsx"; -import { BlogPost } from "apps/blog/types.ts"; +import { BlogPost, BlogPostListingPage } from "apps/blog/types.ts"; export interface MainNews { title: string; @@ -28,7 +28,7 @@ export interface Props { news: News[]; title: string; info: Info; - allNews?: BlogPost[] | null; + allNews?: BlogPostListingPage; pagination?: { page?: number; perPage?: number; @@ -41,25 +41,24 @@ export default function FeaturedNewsIsland({ news, title, info, - allNews, - pagination + allNews }: Props) { const [selectedTags, setSelectedTags] = useState([]); -console.log(pagination) + const handleTagClick = (tag: string) => { setSelectedTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag] ); }; - const filteredNews = - selectedTags.length === 0 - ? allNews - : allNews?.filter((newsItem) => - selectedTags.some((tag) => - newsItem?.extraProps?.some((item) => item.value.includes(tag)) - ) - ); + // const filteredNews = + // selectedTags.length === 0 + // ? allNews + // : allNews?.posts?.filter((newsItem) => + // selectedTags.some((tag) => + // newsItem?.posts?.extraProps?.some((item) => item.value.includes(tag)) + // ) + // ); return ( <> @@ -156,7 +155,7 @@ console.log(pagination)
- + ); } diff --git a/static/tailwind.css b/static/tailwind.css index 8ea98a9..a6f73cb 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -1865,6 +1865,10 @@ html { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } +.loading-spinner { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} :where(.menu li:empty) { --tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); @@ -2615,6 +2619,9 @@ html { .block { display: block; } +.inline { + display: inline; +} .flex { display: flex; } @@ -4459,3 +4466,9 @@ html { .\[\&_p\]\:leading-\[150\%\] p { line-height: 150%; } +.htmx-request .\[\.htmx-request_\&\]\:block { + display: block; +} +.htmx-request .\[\.htmx-request_\&\]\:hidden { + display: none; +}