feat: add no todos block

preview/blocks/empty.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Typography from '~/elements/typography.svelte'
+  import Container from '~/elements/container.svelte'
+</script>
+
+<div class="wrapper">
+  <Container>
+    <div class="info">
+      <Typography size="xl" tag="h2" mbe="l">No Todos Found</Typography>
+      <Typography size="m" mbe="s">
+        Great job! It looks like there are currently no TODO comments in your
+        project.
+      </Typography>
+      <Typography size="m">
+        This could mean your code is clean and well-maintained, or perhaps it’s
+        time to plan out the next steps and improvements.
+      </Typography>
+    </div>
+  </Container>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .info {
+    max-inline-size: 460px;
+  }
+</style>

preview/blocks/footer.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import Typography from '~/elements/typography.svelte'
   import Container from '~/elements/container.svelte'
+
+  let currentYear = new Date().getFullYear()
 </script>
 
 <footer class="footer">
   <Container>
     <div class="wrapper">
       <div>
         <Typography size="m">Released under the MIT License</Typography>
-        <Typography size="m">Copyright © 2024 Azat S.</Typography>
+        <Typography size="m">Copyright © {currentYear} Azat S.</Typography>
       </div>
       <a href="https://github.com/azat-io/todoctor" target="_blank">
         <Typography size="m">Source code on GitHub</Typography>

preview/blocks/info.svelte

@@ -180,7 +180,7 @@
     flex-wrap: wrap;
     gap: var(--space-xl);
     justify-content: center;
-    max-inline-size: 800px;
+    max-inline-size: 900px;
     margin-block-start: var(--space-xl);
     margin-inline: auto;
   }

preview/elements/container.svelte

@@ -9,6 +9,7 @@
 <style>
   .container {
     container-type: inline-size;
+    inline-size: 100%;
     max-inline-size: 1680px;
     padding: 0 var(--space-m);
     margin-inline: auto;

preview/stores/data.ts

@@ -1,16 +1,20 @@
-import { readable } from 'svelte/store'
+import { readable, writable } from 'svelte/store'
 
 import type { Data } from '~/typings/index.d'
 
+export let loading = writable(true)
+
 export let data = readable<Partial<Data>>({}, set => {
   let fetchData = async () => {
     if (import.meta.env.MODE === 'production') {
       // @ts-ignore
       set(window.data)
+      loading.set(false)
     } else {
       let dataResponse = await fetch('/data.json')
       let dataJson = await dataResponse.json()
       set(dataJson)
+      loading.set(false)
     }
   }
 

preview/styles/base.css

@@ -71,3 +71,9 @@ p {
     widows: 2;
   }
 }
+
+#root {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-block-size: 100dvb;
+}

preview/view/app.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
+  import { loading, data } from '~/stores/data'
   import Header from '~/blocks/header.svelte'
   import Footer from '~/blocks/footer.svelte'
   import Graph from '~/blocks/graph.svelte'
+  import Empty from '~/blocks/empty.svelte'
   import Info from '~/blocks/info.svelte'
   import List from '~/blocks/list.svelte'
-  import { data } from '~/stores/data'
 
   $: if ($data.name) {
     document.title = `${$data.name} | Todoctor`
   }
 </script>
 
 <Header />
-<Graph />
-<Info />
-<List />
+<main>
+  {#if !$loading}
+    {#if $data.data?.length}
+      <Graph />
+      <Info />
+      <List />
+    {:else}
+      <Empty />
+    {/if}
+  {/if}
+</main>
 <Footer />