Merge pull request #51 from hacksu:hackathon-guide

Hackathon Guide

package.json

@@ -2,7 +2,7 @@
   "name": "khe-revengeance",
   "type": "module",
   "version": "0.0.5",
-  "description": "Kent Hack Enough is a hackathon happening in October 2024.",
+  "description": "Kent Hack Enough is a hackathon happening in April 2024.",
   "main": "server/index.ts",
   "scripts": {
     "dev": "cross-env NODE_ENV=development tsx watch --ignore staff-frontend --ignore public-frontend ./server/index.ts",

public-frontend/src/components/faq.vue

@@ -45,7 +45,7 @@ export default {
           id: 1,
           question: "Can I participate?",
           answer:
-            `If you're a high school student or a college student of any kind, then yes! 
+            `If you're a college student of any kind, then yes! 
             KHE is attended by people of all skill levels and backgrounds. 
             You'll fit right in and hopefully, learn something!`
         },

public-frontend/src/components/project.vue

@@ -0,0 +1,60 @@
+<template>
+<div class="project-container" style="text-align: center">
+    <div style="border: 1px solid white; border-radius: 10px; padding: 10px">
+
+        <img :src="image" v-if="image" @click="imageModalOpen=true" class="headerImage" />
+
+        <a :href="link">
+            <h3 style="margin-bottom: 0; font-size: 110%">{{ title }}</h3>
+        </a>
+
+        <div class="project-content"><slot></slot></div>
+
+        <Dialog appendTo="#app-container" v-model:visible="imageModalOpen"
+                modal dismissableMask :blockScroll="false"
+        >
+            <img :src="image" class="modalImage"/>
+        </Dialog>
+    </div>
+</div>
+</template>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import { ref } from "vue";
+
+defineProps({
+    title: String,
+    link: String,
+    image: String,
+    content: String
+});
+
+const imageModalOpen = ref(false);
+</script>
+
+<style scoped lang="scss">
+    .project-container {
+        box-sizing: border-box;
+        background: black;
+        width: 100%;
+        padding: 15px;
+    }
+    .headerImage {
+        max-height: 200px;
+        max-width: 100%;
+        cursor: pointer;
+    }
+    .modalImage {
+        max-height: 80vh;
+        max-width: 80vw;
+        @media (max-width: 700px) {
+            max-height: 95vh;
+            max-width: 95vw;
+        }
+    }
+    .project-content :deep(p) { 
+        margin: 15px 0;
+        line-height: 1.3;
+    }
+</style>

public-frontend/src/components/projectCarousel.vue

@@ -0,0 +1,49 @@
+<template>
+    <Carousel :value="children">
+        <template #item="inputValue">
+            <RenderNode :nodeToRender="inputValue.data" />
+        </template>
+    </Carousel>
+</template>
+
+<script>
+// this component creates a carousel in which each of its child elements is an
+// item.
+
+// in contrast to the vanilla PrimeVue Carousel component, which expects to
+// receive an array of objects via its "value" prop that all get mapped into DOM
+// elements the same way, this wrapper component will use each of its child
+// elements as the items in the carousel. this means that each item in the
+// carousel can easily have different HTML in it.
+
+// to accomplish this, the children of this component are retrieved using
+// this.$slots.default(). each of those children will take the form of an object
+// of type VNode. these VNodes are passed to the <Carousel> as the objects that
+// need to be mapped into DOM elements. then, a very simple utility component
+// called <RenderNode> is used to trivially "map" the VNodes into Vue's virtual
+// DOM using a render function.
+
+// (you can apparently use <Component> with :is="..." to do the same thing that
+// <RenderNode> is doing here, but that's undocumented/possibly unintended
+// functionality)
+
+import Carousel from "primevue/carousel";
+export default {
+    name: "ProjectCarousel",
+    components: {
+        Carousel,
+        // this technically constitutes a complete component definition:
+        RenderNode: {
+            props: ["nodeToRender"],
+            render: (instance) => instance.nodeToRender
+        }
+    },
+    computed: {
+        children(){
+            return this.$slots.default()
+                // remove HTML comment nodes
+                .filter(n => typeof n.children !== "string");
+        }
+    }
+}
+</script>

public-frontend/src/components/technologyGuide.vue

@@ -0,0 +1,36 @@
+<template>
+    <Accordion style="margin-top: 30px">
+        <AccordionTab>
+            <template #header>
+                <div style="margin-right: 10px">
+                    <h2 style="margin: 0 0 10px 0">{{ title }}</h2>
+                    <slot name="description"></slot>
+                </div>
+            </template>
+            <slot></slot>
+        </AccordionTab>
+    </Accordion>
+</template>
+
+<script setup>
+import Accordion from 'primevue/accordion';
+import AccordionTab from 'primevue/accordiontab';
+defineProps({
+    title: {
+        type: String,
+        required: true
+    }
+});
+</script>
+
+<style scoped lang="scss">
+:deep(.p-accordion-header-link) {
+    background: #1e1e1e!important;
+    &:hover {
+        background: #222!important;
+    }
+}
+:deep(.p-accordion-toggle-icon) {
+    flex-shrink: 0;
+}
+</style>

public-frontend/src/router.js

@@ -3,6 +3,7 @@ import Sponsor from "./views/Sponsor.vue";
 import Contact from "./views/Contact.vue";
 import Login from "./views/Login.vue";
 import Profile from "./views/Profile.vue";
+import Guide from "./views/Guide.vue";
 //import localLogin from "./views/localLogin.vue";
 
 export const routerConfig = {
@@ -42,6 +43,11 @@ export const routerConfig = {
       name: "profile",
       component: Profile,
     },
+    {
+      path: "/guide",
+      name: "guide", 
+      component: Guide
+    }
     // {
     //   path: '/schedule',
     //   name: 'schedule',