From 85f8a43850f076dc996a704044f51e3c99b3a606 Mon Sep 17 00:00:00 2001 From: Joangie Marquez <59121896+practicatto@users.noreply.github.com> Date: Wed, 18 Oct 2023 10:39:20 -0400 Subject: [PATCH] wip (#36) --- src/app.html | 2 +- src/app.postcss | 2 +- src/lib/assets/icons/chevron-down.svg | 1 + src/lib/assets/icons/projects.svg | 1 + src/lib/assets/logos/kokoa.svg | 2 +- src/lib/components/ui/Icon.svelte | 24 +++++++++ src/lib/components/ui/SectionCard.svelte | 20 ++++++++ .../components/ui/navigation/Footer.svelte | 51 +++++++++++++++++++ .../components/ui/navigation/Header.svelte | 18 +++++++ .../components/ui/navigation/NavBar.svelte | 21 ++++++++ .../components/ui/sections/H1Section.svelte | 0 src/lib/config/site.ts | 38 ++++++++++++++ src/routes/+layout.svelte | 21 +++++++- src/routes/+page.svelte | 29 ++++------- svelte.config.js | 6 +++ 15 files changed, 213 insertions(+), 23 deletions(-) create mode 100644 src/lib/assets/icons/chevron-down.svg create mode 100644 src/lib/assets/icons/projects.svg create mode 100644 src/lib/components/ui/Icon.svelte create mode 100644 src/lib/components/ui/SectionCard.svelte create mode 100644 src/lib/components/ui/navigation/Footer.svelte create mode 100644 src/lib/components/ui/navigation/Header.svelte create mode 100644 src/lib/components/ui/navigation/NavBar.svelte create mode 100644 src/lib/components/ui/sections/H1Section.svelte create mode 100644 src/lib/config/site.ts diff --git a/src/app.html b/src/app.html index ecf3724..11383a6 100644 --- a/src/app.html +++ b/src/app.html @@ -13,6 +13,6 @@ %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/app.postcss b/src/app.postcss index 70244bb..c53cae3 100644 --- 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 new file mode 100644 index 0000000..b260525 --- /dev/null +++ b/src/lib/assets/icons/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/icons/projects.svg b/src/lib/assets/icons/projects.svg new file mode 100644 index 0000000..3cfd729 --- /dev/null +++ b/src/lib/assets/icons/projects.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/lib/assets/logos/kokoa.svg b/src/lib/assets/logos/kokoa.svg index c357c81..a78fc4d 100644 --- a/src/lib/assets/logos/kokoa.svg +++ b/src/lib/assets/logos/kokoa.svg @@ -68,7 +68,7 @@ diff --git a/src/lib/components/ui/Icon.svelte b/src/lib/components/ui/Icon.svelte new file mode 100644 index 0000000..26025c3 --- /dev/null +++ b/src/lib/components/ui/Icon.svelte @@ -0,0 +1,24 @@ + + + + {@html elements} + diff --git a/src/lib/components/ui/SectionCard.svelte b/src/lib/components/ui/SectionCard.svelte new file mode 100644 index 0000000..9b4cd46 --- /dev/null +++ b/src/lib/components/ui/SectionCard.svelte @@ -0,0 +1,20 @@ + + +
+

+
+ +
+ {section} +

+

This section is about projects

+ +
diff --git a/src/lib/components/ui/navigation/Footer.svelte b/src/lib/components/ui/navigation/Footer.svelte new file mode 100644 index 0000000..69aa3e4 --- /dev/null +++ b/src/lib/components/ui/navigation/Footer.svelte @@ -0,0 +1,51 @@ + + +
+ + © 2023 Kokoa. All rights reserved. + +
haksdja
+
diff --git a/src/lib/components/ui/navigation/Header.svelte b/src/lib/components/ui/navigation/Header.svelte new file mode 100644 index 0000000..99213b7 --- /dev/null +++ b/src/lib/components/ui/navigation/Header.svelte @@ -0,0 +1,18 @@ + + +
+ logo de kokoa +

+ KOKOA + - Vive el Software libre +

+

+ Club estudiantil politécnico promotor del uso, modificación, distribución y aprendizaje de + software libre. +

+
diff --git a/src/lib/components/ui/navigation/NavBar.svelte b/src/lib/components/ui/navigation/NavBar.svelte new file mode 100644 index 0000000..5304eaa --- /dev/null +++ b/src/lib/components/ui/navigation/NavBar.svelte @@ -0,0 +1,21 @@ + + + diff --git a/src/lib/components/ui/sections/H1Section.svelte b/src/lib/components/ui/sections/H1Section.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/config/site.ts b/src/lib/config/site.ts new file mode 100644 index 0000000..d9a5bd8 --- /dev/null +++ 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 index 04674e5..8ac8e4d 100644 --- 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"; - + + + + +
+ + + + + +
+ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1cf6cfc..b074629 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,21 +1,12 @@ - + -
-
-

Kokoa

-

Start by exploring:

-
    -
  • - /src/routes/+layout.svelte - barebones layout, the CSS import order - is critical! -
    • -
  • - /src/app.postcss - minimal css to make the page full screen, may not - be relevant for your project -
    • -
  • - /src/routes/+page.svelte - this page, you can replace the contents -
    • -
-
+
+ + + + +
diff --git a/svelte.config.js b/svelte.config.js index 48c04e4..c4f6d53 100644 --- 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: "",