live/demo.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Blog with KasperJs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="../dist/kasper.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          fontFamily: {
            mono: [
              "Share Tech Mono",
              "Consolas",
              "Liberation Mono",
              "Courier New",
            ],
          },
        },
      };
    </script>
  </head>
  <body>
    <kasper-app></kasper-app>
    <template id="kasper-app">
      <div class="w-dvw h-dvh flex text-gray-50">
        <div class="w-96 flex-none bg-gray-900 p-6 h-full overflow-y-scroll">
          <div class="flex flex-col gap-4">
            <div
              @each="const post of posts.value"
              class="py-2 rounded border border-gray-100"
            >
              <button
                class="flex flex-col text-left gap-2"
                @on:click="onOpenPost(post)"
              >
                <div class="text-lg px-2 leading-tight">{{post.title}}</div>
                <div class="text-xs px-2">{{post.body}}</div>
              </button>
            </div>
          </div>
        </div>
        <div class="flex-grow bg-gray-700 p-6">
          <div @if="post.value && user.value">
            <void @let="u = user.value">
              <div class="text-lg">Author</div>
              <div class="flex flex-col pb-4">
                <div class="text-lg font-bold">{{u.name}}</div>
                <div class="text-sm text-gray-400">{{u.email}}</div>
              </div>
            </void>
            <void @let="p = post.value">
              <div class="text-2xl font-bold">{{p.title}}</div>
              <div class="text-sm text-gray-400">{{p.body}}</div>
            </void>
          </div>
        </div>
      </div>
    </template>
    <script>
      async function fetchPosts() {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts"
        );
        return (await response.json()).slice(0, 7);
      }

      async function fetchPostById(id) {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/posts/${id}`
        );
        return await response.json();
      }

      async function fetchUserById(id) {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/users/${id}`
        );
        return await response.json();
      }

      class TodoApp extends Component {
        posts = $state([]);
        user = $state(null);
        post = $state(null);

        $onInit = async () => {
          const posts = await fetchPosts();
          this.posts.set(posts);
          console.log(this.posts);
        };

        onOpenPost = async (post) => {
          const user = await fetchUserById(post.userId);
          this.post.set(post);
          this.user.set(user);
        };
      }

      Kasper(TodoApp);
    </script>
  </body>
</html>