Organise components

src/components/Separator.svelte

@@ -0,0 +1,10 @@
+<div />
+
+<style>
+    div {
+        background-color: black;
+        width: 1px;
+        height: 25px;
+        margin: 0 5px;
+    }
+</style>

src/components/ProjectCard.svelte → src/components/card/ProjectCard.svelte

@@ -2,8 +2,7 @@
     import type { TProject } from '$types';
     import type { TLanguageMap } from '$types/language';
     import Card from './Card.svelte';
-    import ChipList from './ChipList.svelte';
-    import LangChip from './LanguageChip.svelte';
+    import { ChipList, LanguageChip } from '$components/chip';
 
     export let info: TProject;
     export let languages: TLanguageMap;
@@ -17,7 +16,7 @@
     <p>{info.description}</p>
     <ChipList>
         {#each info.languages as lang}
-            <LangChip link selected info={languages[lang]} />
+            <LanguageChip link selected info={languages[lang]} />
         {/each}
     </ChipList>
 </Card>

src/components/card/index.ts

@@ -0,0 +1,3 @@
+export { default as Card } from './Card.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export { default as LanguageCard } from './LanguageCard.svelte';

src/components/ChipList.svelte → src/components/chip/ChipList.svelte

@@ -6,5 +6,6 @@
     div {
         display: flex;
         gap: 5px;
+        align-items: center;
     }
 </style>

src/components/chip/index.ts

@@ -0,0 +1,4 @@
+export { default as Chip } from './Chip.svelte';
+export { default as ChipList } from './ChipList.svelte';
+export { default as LanguageChip } from './LanguageChip.svelte';
+export { default as FrameworkChip } from './FrameworkChip.svelte';

src/components/index.ts

@@ -0,0 +1,10 @@
+export { default as Markdown } from './Markdown.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export { default as Separator } from './Separator.svelte';
+// export { default as AsciinemaPlayer } from './AsciinemaPlayer.svelte';
+
+import * as chip from './chip';
+export { chip };
+
+import * as card from './card';
+export { card };

src/routes/+page.svelte

@@ -4,11 +4,9 @@
 
     import { filterProjectsByLanguages } from '$lib/util';
 
-    import ProjectCard from '$components/ProjectCard.svelte';
-    import LangChip from '$components/LanguageChip.svelte';
-    import Navbar from '$components/Navbar.svelte';
-    import Markdown from '$components/Markdown.svelte';
-    import ChipList from '$components/ChipList.svelte';
+    import { Navbar, Markdown } from '$components';
+    import { ProjectCard } from '$components/card';
+    import { ChipList, LanguageChip } from '$components/chip';
 
     export let data: import('./$types').PageData;
 
@@ -47,7 +45,7 @@
 
 <ChipList>
     {#each data.languages as lang (lang.slug)}
-        <LangChip
+        <LanguageChip
             on:click={() => selectLang(lang.slug)}
             selected={selectedLangs.includes(lang.slug)}
             info={lang}

src/routes/languages/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import Navbar from '$components/Navbar.svelte';
-    import LanguageCard from '$components/LanguageCard.svelte';
+    import { Navbar } from '$components';
+    import { LanguageCard } from '$components/card';
 
     export let data: import('./$types').PageData;
 </script>

src/routes/languages/[language]/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import Markdown from '$components/Markdown.svelte';
-    import LangChip from '$components/LanguageChip.svelte';
-    import Navbar from '$components/Navbar.svelte';
+    import { Markdown, Navbar } from '$components';
 
     export let data: import('./$types').PageData;
 </script>

src/routes/projects/[project]/+page.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-    import Markdown from '$components/Markdown.svelte';
-    import LanguageChip from '$components/LanguageChip.svelte';
-    import FrameworkChip from '$components/FrameworkChip.svelte';
-    import Navbar from '$components/Navbar.svelte';
-    import ChipList from '$components/ChipList.svelte';
-    // import AsciinemaPlayer from "$components/AsciinemaPlayer.svelte";
+    import { Navbar, Markdown, Separator } from '$components';
+    import { ChipList, LanguageChip, FrameworkChip } from '$components/chip';
+    // import AsciinemaPlayer from "$components";
 
     export let data: import('./$types').PageData;
 </script>
@@ -22,6 +19,7 @@
                 <LanguageChip info={data.languages[lang]} selected link />
             {/each}
             <!-- Frameworks -->
+            <Separator />
             {#each data.info.frameworks as lang}
                 <FrameworkChip info={data.frameworks[lang]} selected link />
             {/each}