kokoaespol · adriandelgado · Oct 18, 2023 · Oct 18, 2023
diff --git a/src/app.html b/src/app.html
@@ -13,6 +13,6 @@
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover" data-theme="kokoa-extra">
-    <div style="display: contents">%sveltekit.body%</div>
+  <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/app.postcss b/src/app.postcss
@@ -1,5 +1,5 @@
 /*place global styles here */
 html,
 body {
-  @apply h-full;
+  @apply h-full overflow-hidden;
 }
diff --git a/src/lib/assets/icons/chevron-down.svg b/src/lib/assets/icons/chevron-down.svg
diff --git a/src/lib/assets/icons/projects.svg b/src/lib/assets/icons/projects.svg
diff --git a/src/lib/assets/logos/kokoa.svg b/src/lib/assets/logos/kokoa.svg
diff --git a/src/lib/components/ui/Icon.svelte b/src/lib/components/ui/Icon.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let data = "";
+  export let viewBox = extract_viewBox(data);
+
+  export let size = "20px";
+  export let width = size;
+  export let height = size;
+
+  export let stroke: string | null = null;
+  export let fill: string | null = null;
+
+  $: elements = data.replace(/<svg ([^>]*)>/, "").replace("</svg>", "");
+
+  function extract_viewBox(svg: string) {
+    const regex = /viewBox="([\d\- .]+)"/;
+    const res = regex.exec(svg);
+    if (!res) return "0 0 20 20"; // default value
+    return res[1];
+  }
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} {viewBox} {stroke} {fill} {...$$restProps}>
+  {@html elements}
+</svg>
diff --git a/src/lib/components/ui/SectionCard.svelte b/src/lib/components/ui/SectionCard.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+
+  export let icon = "";
+  export let classes = "";
+  export let section = "";
+</script>
+
+<div id={section} class="mx-14 my-8 rounded-2xl p-14 {classes}">
+  <h2 class="flex items-center gap-12 align-middle text-4xl capitalize">
+    <div
+      class="flex h-16 w-16 items-center justify-center rounded-full border-[0.06rem] border-zinc-400"
+    >
+      <Icon data={icon} class="h-10 w-10 fill-none stroke-surface-500 stroke-1 object-cover" />
+    </div>
+    {section}
+  </h2>
+  <p class="description ml-28">This section is about projects</p>
+  <slot />
+</div>
diff --git a/src/lib/components/ui/navigation/Footer.svelte b/src/lib/components/ui/navigation/Footer.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import chevron_down from "$lib/assets/icons/chevron-down.svg?raw";
+  import facebook from "$lib/assets/icons/facebook.svg?raw";
+  import instagram from "$lib/assets/icons/instagram.svg?raw";
+  import twitter from "$lib/assets/icons/twitter.svg?raw";
+  import github from "$lib/assets/icons/github.svg?raw";
+  import chocomascot from "$lib/assets/logos/mascota.svg";
+
+  import Icon from "../Icon.svelte";
+  const navigation = {
+    social: [
+      {
+        name: "Facebook",
+        url: "https://www.facebook.com/kokoaecuador/",
+        icon: facebook,
+      },
+      {
+        name: "Instagram",
+        url: "https://www.instagram.com/kokoa_espol/",
+        icon: instagram,
+      },
+      {
+        name: "Twitter",
+        url: "https://twitter.com/kokoa_espol",
+        icon: twitter,
+      },
+      {
+        name: "GitHub",
+        url: "https://github.com/kokoaespol",
+        icon: github,
+      },
+    ],
+  };
+</script>
+
+<footer
+  aria-labelledby="footer-heading"
+  class="relative flex flex-col items-center border-t-[0.08rem] border-t-zinc-400 p-4 align-middle"
+>
+  <h2 id="footer-heading" class="sr-only">Pié de página</h2>
+  <small class="mt-8 text-base md:order-1 md:mt-0"> &copy; 2023 Kokoa. All rights reserved. </small>
+  <ul class="mt-2 flex space-x-6 md:order-2">
+    {#each navigation.social as item (item.name)}
+      <a href={item.url} rel="external" class="text-zinc-400 hover:text-secondary-400">
+        <span class="sr-only">{item.name}</span>
+        <Icon data={item.icon} fill="currentColor" aria-hidden="true" />
+      </a>
+    {/each}
+  </ul>
+  <address>haksdja</address>
+</footer>
diff --git a/src/lib/components/ui/navigation/Header.svelte b/src/lib/components/ui/navigation/Header.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import kokoa from "$lib/assets/logos/kokoa-nav.svg";
+</script>
+
+<header class="mt-20 flex flex-col items-center gap-4">
+  <img src={kokoa} class="my-4" alt="logo de kokoa" width="20%" height="20%" />
+  <h1 class=" text-6xl font-extrabold">
+    <span
+      class="bg-gradient-to-br from-red-500 to-yellow-600 box-decoration-clone bg-clip-text text-transparent"
+      >KOKOA</span
+    >
+    - Vive el Software libre
+  </h1>
+  <p class="tagline">
+    Club estudiantil politécnico promotor del uso, modificación, distribución y aprendizaje de
+    software libre.
+  </p>
+</header>
diff --git a/src/lib/components/ui/navigation/NavBar.svelte b/src/lib/components/ui/navigation/NavBar.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { siteConfig } from "$lib/config/site";
+  import { page } from "$app/stores";
+</script>
+
+<nav class="mt-10 w-full">
+  <ul class="flex items-center justify-evenly gap-6">
+    {#each siteConfig.mainNav as link}
+      <li class="flex flex-col items-center">
+        <a
+          class="{$page.url.pathname == link.href
+            ? 'text-base text-secondary-700 dark:text-secondary-500'
+            : 'text-base hover:text-secondary-400'} text-lg !font-medium uppercase"
+          href={link.href}
+        >
+          {link.title}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</nav>
diff --git a/src/lib/components/ui/sections/H1Section.svelte b/src/lib/components/ui/sections/H1Section.svelte
diff --git a/src/lib/config/site.ts b/src/lib/config/site.ts
@@ -0,0 +1,38 @@
+export const siteConfig = {
+  name: "kokoa",
+  url: "https://kokoa.pages.dev/",
+  ogImage: "https://kokoa.pages.dev/og.png",
+  description:
+    "Vive el software libre. Club estudiantil politécnico promotor del uso, modificación, distribución y aprendizaje de software libre.",
+  links: {
+    twitter: "https://twitter.com/kokoa_espol",
+    github: "https://github.com/kokoaespol",
+    instagram: "https://instagram.com/kokoa_espol",
+    youtube: "https://youtube.com/kokoa_espol",
+  },
+  keywords: `kokoa,espol,open source,devs`,
+  mainNav: [
+    {
+      title: "inicio",
+      href: "/",
+    },
+    {
+      title: "blog",
+      href: "/blog",
+    },
+    {
+      title: "proyectos",
+      href: "#proyectos",
+    },
+    {
+      title: "miembros",
+      href: "#miembros",
+    },
+    {
+      title: "eventos",
+      href: "#eventos",
+    },
+  ],
+};
+
+export type SiteConfig = typeof siteConfig;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,6 +7,25 @@
   import "@skeletonlabs/skeleton/styles/skeleton.css";
   // Finally, your application's global stylesheet
   import "../app.postcss";
+  import { AppShell } from "@skeletonlabs/skeleton";
+  import { LightSwitch } from "@skeletonlabs/skeleton";
+
+  import Header from "$components/ui/navigation/Header.svelte";
+  import Footer from "$components/ui/navigation/Footer.svelte";
+  import NavBar from "../lib/components/ui/navigation/NavBar.svelte";
 </script>
 
-<slot />
+<AppShell>
+  <!-- (sidebarLeft) -->
+  <!-- (sidebarRight) -->
+  <svelte:fragment slot="pageHeader"
+    ><LightSwitch />
+    <Header /></svelte:fragment
+  >
+  <NavBar></NavBar>
+  <!-- Router Slot -->
+  <slot />
+  <!-- ---- / ---- -->
+  <!-- (pageFooter) -->
+  <Footer></Footer>
+</AppShell>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,21 +1,12 @@
-<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
+<script lang="ts">
+  import projects from "$lib/assets/icons/projects.svg?raw";
+  import SectionCard from "$lib/components/ui/SectionCard.svelte";
+</script>
 
-<div class="container mx-auto flex h-full items-center justify-center">
-  <div class="space-y-5">
-    <h1 class="h1">Kokoa</h1>
-    <p>Start by exploring:</p>
-    <ul>
-      <li>
-        <code class="code">/src/routes/+layout.svelte</code> - barebones layout, the CSS import order
-        is critical!
-      </li>
-      <li>
-        <code class="code">/src/app.postcss</code> - minimal css to make the page full screen, may not
-        be relevant for your project
-      </li>
-      <li>
-        <code class="code">/src/routes/+page.svelte</code> - this page, you can replace the contents
-      </li>
-    </ul>
-  </div>
+<div class="section-container flex flex-col">
+  <SectionCard icon={projects} section="proyectos"></SectionCard>
+
+  <SectionCard section="miembros"></SectionCard>
+
+  <SectionCard section="eventos"></SectionCard>
 </div>
diff --git a/svelte.config.js b/svelte.config.js
@@ -12,6 +12,12 @@ const config = {
   },
   kit: {
     adapter: cloudflare(),
+    alias: {
+      $components: "./src/lib/components",
+      $lib: "./src/lib",
+
+    },
+
     // TODO: add prerender
     // prerender: {
     //   origin: "",