chore: create project in Emmy.js

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -1,10 +1,24 @@
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-/build
-/.svelte-kit
-/.vercel
-/package
-.env
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "Tobermory.es6-string-html",
+    "zjcompt.es6-string-javascript",
+    "GitHub.copilot",
+    "shd101wyy.markdown-preview-enhanced",
+    "usernamehw.errorlens",
+    "standard.vscode-standard"
+  ]
+}

README.md

@@ -1,7 +1,21 @@
-# create-svelte
+# uottahack.osuc.dev
 
-- User
-- Profile (user_id)
-- Events
-- Teams (event_id, name)
-- Participants (team_id, user_id, is_captain)
+## Stack
+- [Emmy.js](https://emmyjs.github.io/)
+
+## Getting Started
+1. Clona el repositorio
+2. Instala las dependencias
+```bash
+npm install
+```
+3. Corre el servidor
+```bash
+npm run dev
+```
+4. Abre [http://localhost:5173](http://localhost:5173) con tu navegador para ver el resultado.
+
+## Build
+```bash
+npm run build
+```

app/index.js

@@ -0,0 +1,39 @@
+import { load, html } from 'emmy-dom/dist/server.js'
+
+export function app () {
+  this.className = 'flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0'
+
+  this.useEffect(() => {
+    this.querySelector('#cta').addEventListener('click', () => {
+      this.querySelector('#about').scrollIntoView({ behavior: 'smooth' })
+      console.log('clicked')
+    })
+  }, ['didMount'])
+
+  return html`
+    <section class="h-[900px] w-screen bg-cover bg-[url('https://2024.uottahack.ca/images/CompleteBackground.png')]">
+      <article class="h-screen w-full flex flex-col justify-center items-center gap-6 text-white">  
+        <h1 class="text-4xl sm:text-7xl md:text-[6rem] lg:text-[8rem] font-bold font-['Harabara'] drop-shadow-lg">
+          uOttaHack 6 UC
+        </h1>
+        <p class="text-2xl md:text-4xl">
+          1 a 3 de marzo
+        </p>
+        <button id="cta" class="bg-[#384DBF] text-white text-2xl md:text-4xl px-4 py-2 rounded-lg drop-shadow-lg">
+          Ver más
+        </button>
+      </article>
+    </section>
+    <section class="h-screen w-screen flex flex-col justify-center items-center gap-4">
+      <h2 id="about" class="text-4xl font-bold font-['Harabara'] text-[#384DBF]">Acerca del evento</h2>
+      <p class="text-xl lg:text-2xl w-[80%]">
+        uOttaHack UC es una hackatón para estudiantes universitarios, con sede en el campus San Joaquín UC.
+      </p>
+      <p class="text-xl lg:text-2xl w-[80%]">
+        Durante 36 horas, podrás colaborar en proyectos innovadores, asistir a talleres educativos, establecer contactos con empresas y competir en desafíos que invitan a la reflexión.
+      </p>  
+    </section>
+  `
+}
+
+export const App = load(app, 'App')

index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="charset" content="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="theme-color" content="#0F172A">
+    <meta name="author" content="Open Source UC">
+    <meta name="description" content="uOttaHack UC es una hackatón para estudiantes universitarios, con sede en el campus San Joaquín UC. Durante 36 horas, podrás colaborar en proyectos innovadores, asistir a talleres educativos, establecer contactos con empresas y competir en desafíos que invitan a la reflexión.">
+    <link rel="icon" href="https://raw.githubusercontent.com/emmyjs/emmyjs.github.io/main/public/favicon.ico" type="image/x-icon">
+    <link href="https://fonts.cdnfonts.com/css/harabara" rel="stylesheet">
+    <title>uottahack</title>
+    <link rel="stylesheet" href="./styles/index.css">
+  </head>
+  <body class="antialiased min-h-screen w-screen flex flex-col justify-center items-center overflow-x-hidden">
+    <main class="flex flex-col justify-center items-center text-center w-full h-fit">
+      <emmy-app state="{'rerenderCount':0}" class="flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0" emmy-hydratation="true">
+    <section class="h-[900px] w-screen bg-cover bg-[url('https://2024.uottahack.ca/images/CompleteBackground.png')]">
+      <article class="h-screen w-full flex flex-col justify-center items-center gap-6 text-white">  
+        <h1 class="text-4xl sm:text-7xl md:text-[6rem] lg:text-[8rem] font-bold font-['Harabara'] drop-shadow-lg">
+          uOttaHack 6 UC
+        </h1>
+        <p class="text-2xl md:text-4xl">
+          1 a 3 de marzo
+        </p>
+        <button id="cta" class="bg-[#384DBF] text-white text-2xl md:text-4xl px-4 py-2 rounded-lg drop-shadow-lg">
+          Ver más
+        </button>
+      </article>
+    </section>
+    <section class="h-screen w-screen flex flex-col justify-center items-center gap-4">
+      <h2 id="about" class="text-4xl font-bold font-['Harabara'] text-[#384DBF]">Acerca del evento</h2>
+      <p class="text-xl lg:text-2xl w-[80%]">
+        uOttaHack UC es una hackatón para estudiantes universitarios, con sede en el campus San Joaquín UC.
+      </p>
+      <p class="text-xl lg:text-2xl w-[80%]">
+        Durante 36 horas, podrás colaborar en proyectos innovadores, asistir a talleres educativos, establecer contactos con empresas y competir en desafíos que invitan a la reflexión.
+      </p>  
+    </section>
+  </emmy-app>
+    <script type="module">
+      import { load, html } from "emmy-dom";
+
+    function app() {
+  this.className = 'flex flex-col justify-center items-center text-center w-full h-fit text-gray-800 gap-0';
+
+  this.useEffect(() => {
+    this.querySelector('#cta').addEventListener('click', () => {
+      this.querySelector('#about').scrollIntoView({ behavior: 'smooth' });
+      console.log('clicked');
+    });
+  }, ['didMount']);
+
+  return html`
+    <section class="h-[900px] w-screen bg-cover bg-[url('https://2024.uottahack.ca/images/CompleteBackground.png')]">
+      <article class="h-screen w-full flex flex-col justify-center items-center gap-6 text-white">  
+        <h1 class="text-4xl sm:text-7xl md:text-[6rem] lg:text-[8rem] font-bold font-['Harabara'] drop-shadow-lg">
+          uOttaHack 6 UC
+        </h1>
+        <p class="text-2xl md:text-4xl">
+          1 a 3 de marzo
+        </p>
+        <button id="cta" class="bg-[#384DBF] text-white text-2xl md:text-4xl px-4 py-2 rounded-lg drop-shadow-lg">
+          Ver más
+        </button>
+      </article>
+    </section>
+    <section class="h-screen w-screen flex flex-col justify-center items-center gap-4">
+      <h2 id="about" class="text-4xl font-bold font-['Harabara'] text-[#384DBF]">Acerca del evento</h2>
+      <p class="text-xl lg:text-2xl w-[80%]">
+        uOttaHack UC es una hackatón para estudiantes universitarios, con sede en el campus San Joaquín UC.
+      </p>
+      <p class="text-xl lg:text-2xl w-[80%]">
+        Durante 36 horas, podrás colaborar en proyectos innovadores, asistir a talleres educativos, establecer contactos con empresas y competir en desafíos que invitan a la reflexión.
+      </p>  
+    </section>
+  `;
+}
+    load(app, 'App');
+    document.querySelectorAll('emmy-app').forEach((element) => {
+      element.connectedCallback();
+    });
+
+    </script>
+
+    </main>
+    <footer class="px-4 py-2 text-center shrink-0">
+      Evento organizado por la comunidad de <a href="https://osuc.dev" class="text-[#384DBF] underline">Open Source UC</a>
+    </footer>
+  </body>
+</html>