create a website for embodi (#182)

Author: CordlessWool

.github/workflows/main.yml

@@ -42,6 +42,9 @@ jobs:
       - name: Unit Test
         run: pnpm run test:ci
       - name: Build && publint
+        env:
+          #TODO: Change this later
+          VITE_FORMURL: http://localhost:3011/f/random
         run: pnpm run prepublishOnly
       - name: Publish Dry Run
         run: pnpm -r publish --dry-run --no-git-checks

.github/workflows/playwright.yml

@@ -26,6 +26,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Build Embodi
+        env:
+          #TODO: Change this later
+          VITE_FORMURL: http://localhost:3011/f/random
         run: pnpm run build
       - name: Install Playwright Browsers
         run: pnpm run test:e2e:init

.gitignore

@@ -6,3 +6,5 @@ node_modules/
 packages/e2e/playwright-report/
 
 packages/e2e/test-results/
+
+.env*

packages/site/.embodi.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "embodi";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  publicDir: "./public",
+  layoutDir: "./__layout",
+  source: "/content",
+  plugins: [tailwindcss()],
+});

packages/site/README.md

@@ -0,0 +1,8 @@
+---
+---
+
+# Embodi skeleton project
+
+This project was created with `embodi` a static site generator.
+
+Run `npm run dev` to start developing and `npm run build`to build a production ready version.

packages/site/__layout/Home.svelte

@@ -0,0 +1,50 @@
+<script>
+    import Header from './comp/Header.svelte';
+    import Footer from './comp/Footer.svelte';
+    import InputFrame from './comp/InputFrame.svelte';
+    import Input from './comp/Input.svelte';
+    import Button from './comp/Button.svelte';
+    import { Send, Mail } from 'lucide-svelte';
+    import "../app.css";
+
+    let { data, children } = $props();
+</script>
+
+<Header showName={false}>
+</Header>
+<main>
+    <div class="markdown">
+    {@render children?.()}
+    </div>
+    <form method="POST" action={import.meta.env.VITE_FORMURL}>
+        <InputFrame>
+            <Mail />
+            <Input name="email" placeholder="Your mail address" />
+            <Button type="sumbit"><Send size={16} /></Button>
+        </InputFrame>
+    </form>
+
+</main>
+<Footer>
+</Footer>
+
+<style>
+    @reference "tailwindcss/theme";
+
+    main {
+        @apply max-w-3xl mx-auto p-4  min-h-full;
+        @apply flex flex-col gap-4 items-center justify-center;
+    }
+
+    .markdown {
+        @apply text-center;
+    }
+
+    :global(h1) {
+        @apply text-5xl font-bold mb-4;
+    }
+
+    :global(h2) {
+        @apply text-3xl font-bold mb-4;
+    }
+</style>

packages/site/__layout/comp/Button.css

@@ -0,0 +1,61 @@
+@reference "tailwindcss/theme";
+
+button {
+	@apply flex flex-row items-center justify-center gap-2 text-nowrap;
+	@apply cursor-pointer p-3;
+	@apply rounded-lg focus:ring-2 focus:ring-teal-600 focus:outline-none;
+}
+
+button:enabled {
+	@apply transform transition-all duration-300 ease-in-out hover:scale-105;
+}
+
+button:not(.transparent) {
+	@apply bg-teal-400 shadow-md;
+
+	&.error {
+		@apply bg-red-400;
+	}
+
+	&:enabled {
+		@apply hover:bg-teal-500;
+	}
+}
+
+button.transparent {
+	@apply bg-transparent text-teal-700;
+
+	&.error {
+		@apply text-red-700;
+	}
+
+	&:enabled {
+		@apply hover:text-teal-800;
+	}
+}
+
+:global(.dark) {
+	button:not(.transparent) {
+		@apply bg-teal-800 hover:bg-teal-700;
+
+		&.error {
+			@apply hover:bg-red-700;
+		}
+
+		&:enabled {
+			@apply hover:bg-teal-700;
+		}
+	}
+
+	button.transparent {
+		@apply text-teal-600;
+
+		&.error {
+			@apply text-red-400;
+		}
+
+		&:enabled {
+			@apply hover:text-teal-500;
+		}
+	}
+}

packages/site/__layout/comp/Button.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	const { children, transparent = false, error = false, disabled = false, ...props } = $props();
+</script>
+
+<button disabled={error === true || disabled === true} class:error class:transparent {...props}>
+	{@render children()}
+</button>
+
+<style>
+	@import './Button.css';
+</style>

packages/site/__layout/comp/Footer.svelte

@@ -0,0 +1,36 @@
+<script>
+	import { Github } from 'lucide-svelte';
+</script>
+
+<footer>
+
+	<a
+		title="Link to source code on github"
+		href="https://github.com/embodijs/generator"
+		target="_blank"
+		rel="noopener noreferrer"><Github /></a
+	>
+	<span>This site is build with embodi by <a href="https://dropanote.de">CordlessWool</a></span>
+</footer>
+
+<style>
+	@reference "tailwindcss/theme";
+	footer {
+		@apply my-3 flex flex-wrap items-center justify-center gap-y-5 text-zinc-600;
+		@apply divide-x-2 divide-zinc-600;
+	}
+
+	footer > * {
+		@apply px-5;
+	}
+
+	:global(.dark) {
+		footer {
+			@apply text-zinc-400;
+		}
+	}
+	a {
+		@apply underline-offset-4 hover:font-bold hover:underline;
+		@apply transform transition-all duration-300 ease-in-out hover:scale-105;
+	}
+</style>

packages/site/__layout/comp/Header.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ToggleTheme from './ToggleTheme.svelte';
+
+	type Props = {
+		children?: Snippet;
+		showName?: boolean;
+	};
+
+	const { children, showName = true }: Props = $props();
+</script>
+
+<header class:name={showName}>
+	{#if showName}
+		<a href="/" class="name">embodi</a>
+	{/if}
+	<nav>
+		<ToggleTheme />
+		{@render children?.()}
+	</nav>
+</header>
+
+<style>
+	@reference "tailwindcss/theme";
+	header {
+		@apply flex items-center justify-end gap-3 p-3;
+	}
+
+	header.name {
+		@apply justify-between;
+	}
+
+	header > .name {
+		@apply justify-self-start text-2xl font-bold;
+	}
+
+	nav {
+		@apply flex items-center gap-3;
+	}
+	nav :global(button),
+	nav :global(a) {
+		@apply cursor-pointer underline-offset-4 hover:font-bold hover:underline;
+		@apply transform transition-all duration-300 ease-in-out hover:scale-105;
+	}
+</style>