[WIP]

deco-sites · Oct 21, 2024 · ac63b33 · ac63b33
1 parent 1a8ef99
commit ac63b33
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 36 deletions.
diff --git 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
@@ -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/[email protected]/",
-    "preact": "https://esm.sh/preact@10.22.0",
+    "preact": "npm:preact@10.23.1",
     "preact-render-to-string": "npm:[email protected]",
     "simple-git": "npm:simple-git@^3.25.0",
     "std/": "https://deno.land/[email protected]/",
@@ -40,8 +40,7 @@
     "https://esm.sh/*[email protected]": "npm:[email protected]",
     "@deco/deco": "jsr:@deco/[email protected]",
     "@deco/dev": "jsr:@deco/[email protected]",
-    "@deco/deno-ast-wasm": "jsr:@deco/deno-ast-wasm@^0.5.4",
-    "preact/": "https://esm.sh/[email protected]/"
+    "@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,16 +50,18 @@
     "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",
     "preview": "deno run -A main.ts",
     "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
@@ -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<string[]>([]);
 
   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 (
     <div class="lg:container text-sm px-5 p-16 mb-40">
@@ -46,7 +54,7 @@ export default function AllNewsIsland(
             {title}
           </h2>
           <div class="grid grid-cols-1 md:grid-cols-3 gap-8 justify-items-center">
-            {allNews?.map((news, index) => (
+            {/* {allNews?.map((news, index) => (
               <div
                 class="relative w-full h-full col-span-1 flex justify-center"
                 key={index}
@@ -82,7 +90,7 @@ export default function AllNewsIsland(
                   </div>
                 </div>
               </div>
-            ))}
+            ))} */}
 
             <div class="hidden w-full col-span-1 md:row-start-2 md:row-span-2 md:col-start-3 
               md:flex flex-col items-start justify-start h-full">
@@ -114,6 +122,22 @@ export default function AllNewsIsland(
           </div>
 
           <div class="mt-10 flex justify-center">
+          {/* {allNews && to < allNews.length && (
+          <div class="flex justify-center w-full" id={postList}>
+            <button
+              hx-get={fetchMoreLink}
+              hx-swap="outerHTML"
+              hx-target={`#${postList}`}
+              aria-label="Texto"
+              class="btn btn-primary"
+            >
+              <span class="inline [.htmx-request_&]:hidden">
+                Texto
+              </span>
+              <span class="loading loading-spinner hidden [.htmx-request_&]:block" />
+            </button>
+          </div>
+        )} */}
             <button class="px-4 py-2 bg-pink-500 text-white rounded-full hover:bg-pink-600">
               Carregar mais
             </button>

diff --git 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<string[]>([]);
-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)
           </div>
         </div>
       </div>
-      <AllNewsIsland title={title} info={info} allNews={filteredNews} />
+      <AllNewsIsland title={title} info={info} allNews={allNews} />
     </>
   );
 }
diff --git 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;
+}