Add styling components

wesenbergg · Nov 21, 2023 · 07a56ac · 07a56ac
1 parent 78aaf3b
commit 07a56ac
Show file tree

Hide file tree

Showing 18 changed files with 155 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "cssnano": "^6.0.1",
     "svelte": "^4.2.2",
     "tailwindcss": "^3.3.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",

diff --git a/src/components/ArticleNavigation.astro b/src/components/ArticleNavigation.astro
@@ -1,4 +1,5 @@
 ---
+import Link from "./common/Link.astro";
 interface Props {
   title: string;
   chapters: {
@@ -19,19 +20,23 @@ let currentChapterIndex = chapters.findIndex((c) => path.includes(c.slug));
     currentChapterIndex > 0 && (
       <div>
         <p>previous</p>
-        <a href={`/kurssit/${title}/${chapters[currentChapterIndex - 1].slug}`}>
+        <Link
+          href={`/kurssit/${title}/${chapters[currentChapterIndex - 1].slug}`}
+        >
           {chapters[currentChapterIndex - 1].data.title}
-        </a>
+        </Link>
       </div>
     )
   }
   {
     currentChapterIndex < chapters.length - 1 && (
       <div>
         <p>next</p>
-        <a href={`/kurssit/${title}/${chapters[currentChapterIndex + 1].slug}`}>
+        <Link
+          href={`/kurssit/${title}/${chapters[currentChapterIndex + 1].slug}`}
+        >
           {chapters[currentChapterIndex + 1].data.title}
-        </a>
+        </Link>
       </div>
     )
   }

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -1,51 +1,47 @@
 ---
 import NavigationTogglable from "./client/NavigationTogglable.svelte";
+import TopNavItem from "./client/TopNavItem.svelte";
+const path = Astro.url.pathname;
+const params = path.split("/");
+
+const navItems = [
+  {
+    href: "",
+    label: "KOTI",
+  },
+  {
+    href: "kurssit",
+    label: "KURSSIT",
+  },
+  {
+    href: "blogi",
+    label: "BLOGI",
+  },
+  {
+    href: "meista",
+    label: "MEISTÄ",
+  },
+];
 ---
 
 <nav class="fixed shadow top-0 w-full bg-white border-gray-200 z-50">
   <div
     class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
   >
-    <a
-      href="https://flowbite.com/"
-      class="flex flex-1 items-center space-x-3 rtl:space-x-reverse"
-    >
+    <a href="/" class="flex flex-1 items-center space-x-3 rtl:space-x-reverse">
       <span class="self-center text-2xl font-semibold whitespace-nowrap"
-        >HÖTÖPÖllÖ</span
+        >koodi.</span
       >
     </a>
     <NavigationTogglable client:load>
       <ul
         class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white md"
       >
-        <li>
-          <a
-            href="/"
-            class="block py-2 px-3 md:p-0 text-white bg-purple-700 rounded md:bg-transparent md:text-purple-700"
-            aria-current="page">KOTI</a
-          >
-        </li>
-        <li>
-          <a
-            href="/kurssit"
-            class="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-purple-700"
-            >KURSSIT</a
-          >
-        </li>
-        <li>
-          <a
-            href="/blogi"
-            class="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-purple-700"
-            >BLOGI</a
-          >
-        </li>
-        <li>
-          <a
-            href="/meista"
-            class="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-purple-700"
-            >MEISTÄ</a
-          >
-        </li>
+        {
+          navItems.map(({ href, label }) => (
+            <TopNavItem {href} {label} current={params[1] === href} />
+          ))
+        }
       </ul>
     </NavigationTogglable>
   </div>

diff --git a/src/components/client/TopNavItem.svelte b/src/components/client/TopNavItem.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let label;
+  export let href;
+  export let current = false;
+</script>
+
+{#if current}
+  <li>
+    <a
+      href={`/${href}`}
+      class="block py-2 px-3 md:p-0 text-white bg-purple-600 rounded md:bg-transparent md:text-purple-700"
+      aria-current="page">{label}</a
+    >
+  </li>
+{:else}
+  <li>
+    <a
+      href={`/${href}`}
+      class="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-purple-700"
+      >{label}</a
+    >
+  </li>
+{/if}
diff --git a/src/components/common/Button.astro b/src/components/common/Button.astro
@@ -0,0 +1,3 @@
+<button>
+  <slot />
+</button>
diff --git a/src/components/common/Link.astro b/src/components/common/Link.astro
@@ -0,0 +1,13 @@
+---
+export type Props = {
+  href: string;
+};
+const { href } = Astro.props;
+---
+
+<a
+  {href}
+  class="text-purple-600 hover:underline pl-2 border-purple-500 hover:border-l-2"
+>
+  <slot /></a
+>
diff --git a/src/components/headings/Heading1.astro b/src/components/headings/Heading1.astro
@@ -0,0 +1,3 @@
+<h1 class="font-bold text-4xl py-8">
+  <slot />
+</h1>
diff --git a/src/components/headings/Heading2.astro b/src/components/headings/Heading2.astro
@@ -0,0 +1,3 @@
+<h2 class="font-bold text-2xl py-8">
+  <slot />
+</h2>
diff --git a/src/layouts/CourseChapterLayout.astro b/src/layouts/CourseChapterLayout.astro
@@ -33,7 +33,9 @@ let chapters = await getCourseNav();
 <Layout {title} {description}>
   <CourseContents {chapters} />
   <TableOfContents client:idle {toc} />
-  <article class="md:ml-64 max-md:pl-8 lg:mr-64 max-lg:pr-8 pb-8">
+  <article
+    class="max-w-screen-xl md:ml-64 max-md:pl-8 lg:mr-64 max-lg:pr-8 pb-8"
+  >
     <ArticleNavigation {title} {chapters}>
       <slot />
     </ArticleNavigation>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -7,7 +7,7 @@ export interface Props {
   description?: string;
 }
 
-const { title = "HÖTÖPÖLLÖ", description = "Ei pöllömpi kurssi" } = Astro.props;
+const { title = "koodi", description = "Ei pöllömpi kurssi" } = Astro.props;
 ---
 
 <!doctype html>
@@ -17,9 +17,12 @@ const { title = "HÖTÖPÖLLÖ", description = "Ei pöllömpi kurssi" } = Astro.
   </head>
   <body>
     <Navigation />
-    <slot />
+    <main class={"max-w-screen-xl mx-auto min-h-screen"}>
+      <slot />
+    </main>
+
     <footer class="w-full bottom-0 p-4 bg-slate-900 text-slate-100 text-center">
-      <p>&copy; 2023 HÖTÖPÖLLÖ. Tehty ❤️:lla.</p>
+      <p>&copy; 2023 koodi. Tehty ❤️:lla.</p>
     </footer>
   </body>
 </html>
diff --git a/src/pages/blogi/index.astro b/src/pages/blogi/index.astro
@@ -1,8 +1,8 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Heading1 from "@components/headings/Heading1.astro";
+import Layout from "@layouts/Layout.astro";
 ---
 
 <Layout>
-  <h1>Blogi</h1>
+  <Heading1>Blogi</Heading1>
 </Layout>
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,9 +1,10 @@
 ---
+import Heading1 from "@components/headings/Heading1.astro";
 import Layout from "../layouts/Layout.astro";
+import Link from "@components/common/Link.astro";
 ---
 
 <Layout title="Welcome to Astro.">
-  <main>
-    <a href={`/blogi`}>first post</a>
-  </main>
+  <Heading1>Home</Heading1>
+  <Link href={`/kurssit`}>Katso kurssit</Link>
 </Layout>
diff --git a/src/pages/kurssit/101-git/index.astro b/src/pages/kurssit/101-git/index.astro
@@ -1,21 +1,21 @@
 ---
-import Layout from "../../../layouts/Layout.astro";
+import Heading1 from "@components/headings/Heading1.astro";
+import Layout from "@layouts/Layout.astro";
 import { getCollection } from "astro:content";
+import Link from "@components/common/Link.astro";
 
 const posts = await getCollection("101-git");
 ---
 
 <Layout title="Tervetuloa 101 Git kurssille!">
-  <main>
-    <h1>Git Perusteet</h1>
-    <ul>
-      {
-        posts.map((p) => (
-          <li>
-            <a href={`${p.slug}`}>{p.data.title}</a>
-          </li>
-        ))
-      }
-    </ul>
-  </main>
+  <Heading1>Git Perusteet</Heading1>
+  <ul>
+    {
+      posts.map((p) => (
+        <li>
+          <Link href={`${p.slug}`}>{p.data.title}</Link>
+        </li>
+      ))
+    }
+  </ul>
 </Layout>
diff --git a/src/pages/kurssit/101-web/index.astro b/src/pages/kurssit/101-web/index.astro
@@ -1,21 +1,21 @@
 ---
-import Layout from "../../../layouts/Layout.astro";
+import Layout from "@layouts/Layout.astro";
+import Heading1 from "@components/headings/Heading1.astro";
 import { getCollection } from "astro:content";
+import Link from "@components/common/Link.astro";
 
 const posts = await getCollection("101-web");
 ---
 
 <Layout title="Tervetuloa 101 Web kurssille!">
-  <main>
-    <h1>Web Perusteet</h1>
-    <ul>
-      {
-        posts.map((p) => (
-          <li>
-            <a href={`${p.slug}`}>{p.data.title}</a>
-          </li>
-        ))
-      }
-    </ul>
-  </main>
+  <Heading1>Web Perusteet</Heading1>
+  <ul>
+    {
+      posts.map((p) => (
+        <li>
+          <Link href={`/kurssit/101-web/${p.slug}`}>{p.data.title}</Link>
+        </li>
+      ))
+    }
+  </ul>
 </Layout>
diff --git a/src/pages/kurssit/index.astro b/src/pages/kurssit/index.astro
@@ -1,20 +1,23 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Heading2 from "@components/headings/Heading2.astro";
+import Heading1 from "@components/headings/Heading1.astro";
+import Layout from "@layouts/Layout.astro";
+import Link from "@components/common/Link.astro";
 ---
 
 <Layout title="Kurssit">
-  <h1>Kurssit</h1>
+  <Heading1>Kurssit</Heading1>
   <p>
     Niinku eräs koodari aikoinaan sanoi *Keep it stupid simple*. Loput oli
     historiaa. Tämän sanoman innoittamana kurssin kontentti pyritään pitämään
     mahdollisimman yksinkertaisena.
   </p>
-  <h2>Aloittelijaystävälliset kurssit</h2>
+  <Heading2>Aloittelijaystävälliset kurssit</Heading2>
   <ul>
-    <li><a href="/kurssit/101-web">Web ohjelmointi 101</a></li>
-    <li><a href="/kurssit/101-git">Git-versiohallinta</a></li>
+    <li><Link href="/kurssit/101-web">Web ohjelmointi 101</Link></li>
+    <li><Link href="/kurssit/101-git">Git-versiohallinta</Link></li>
   </ul>
-  <h2>Haluatko lisää haastetta</h2>
+  <Heading2>Haluatko lisää haastetta</Heading2>
   <p>
     Odota vähän. Ehkä sitä joku päivä jaksaa kirjoittaa vähän haastavempaa
     materiaalia.

diff --git a/src/pages/meista/index.astro b/src/pages/meista/index.astro
@@ -1,7 +1,8 @@
 ---
-import Layout from "../../layouts/Layout.astro";
+import Heading1 from "@components/headings/Heading1.astro";
+import Layout from "@layouts/Layout.astro";
 ---
 
 <Layout title="Meistä">
-  <h1>Hötöpöllön tarina</h1>
+  <Heading1>koodin tarina</Heading1>
 </Layout>
diff --git a/tsconfig.json b/tsconfig.json
@@ -11,6 +11,16 @@
     "subfolder/dist",
     "subfolder/node_modules",
     "**/dist/*",
-    "**/node_modules/*",
-  ]
-}
+    "**/node_modules/*"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@content/*": ["src/content/*"],
+      "@layouts/*": ["src/layouts/*"],
+      "@pages/*": ["src/pages/*"],
+      "@utils/*": ["src/utils/*"]
+    }
+  }
+}