Merge pull request #39 from hacksu/ibm-fall-fest

IBM Fall Fest!

db/entities.js

@@ -158,3 +158,47 @@ describeClass(
         notesHTML: Fields.string()
     }
 );
+
+export class Information {
+    /** @type {string} */
+    id;
+    /** @type {string} */
+    title;
+    /** @type {string} */
+    link;
+    /** @type {string} */
+    descriptionMD;
+    /** @type {string} */
+    descriptionHTML;
+    /** @type {string | undefined} */
+    photo;
+};
+
+let md_information;
+
+describeClass(
+    Information,
+    Entity(
+        "informations",
+        {
+            allowApiRead: true,
+            allowApiCrud: r=> r.user && r.user.isLeader,
+            saving: async information => {
+                if (isBackend()){
+                    if (!md_information) {
+                        md_information = (await import("markdown-it")).default();
+                    }
+                    information.descriptionHTML = md_information.render(information.descriptionMD || "");
+                }
+            }
+        },
+    ),
+    {
+        id: Fields.uuid(),
+        title: Fields.string(),
+        link: Fields.string(),
+        descriptionMD: Fields.string(),
+        descriptionHTML: Fields.string(),
+        photo: Fields.string()
+    }
+);

server/index.js

@@ -12,7 +12,7 @@ import { remultExpress } from "remult/remult-express"
 import setUpAuth from "./auth.js";
 import setUpUpload from "./upload.js";
 import setUpLogging from "./log.js";
-import { Redirect, StaffMember, Event, Note } from '../db/entities.js';
+import { Redirect, StaffMember, Event, Note, Information } from '../db/entities.js';
 
 let app = express();
 
@@ -21,7 +21,7 @@ setUpUpload(app);
 setUpLogging(app);
 
 // set up db:
-const db = remultExpress({ entities: [Redirect, StaffMember, Event, Note] });
+const db = remultExpress({ entities: [Redirect, StaffMember, Event, Note, Information] });
 app.use(db);
 
 // set up redirects:

server/upload.js

@@ -35,6 +35,17 @@ export default function setUpUpload(app){
         res.send(`/${staffFolderName}/`+req.file.filename);
     });
 
+    const infoFolderName = "information-photos";
+    app.use("/information-photo-upload", makePhotoReceiver(infoFolderName), async (req, res) =>{
+        const buffer = await sharp(req.file.path)
+            .resize(800, 800, {
+                fit: sharp.fit.inside,
+                withoutEnlargement: true,
+            }).toBuffer();
+        await sharp(buffer).toFile(req.file.path);
+        res.send(`/${infoFolderName}/`+req.file.filename);
+    });
+
     const eventFolderName = "event-photos";
     const maxEventPhotoWidth = 1000;
     const eventPhotoAR = 2.5;

src/components/InformationCard.vue

@@ -0,0 +1,106 @@
+<template>
+	<div class="information-container">
+        <div class="information-photo" v-if="information.photo">
+            <img class="information-image" :src="information.photo" alt="">
+        </div>
+        <div class="information">
+            <component class="information-title" :is="information.link ? 'a' : 'span'" :href="information.link" target="_blank" style="color:white">
+                <img class="external-link" v-if="information.link.startsWith('https://github.com')"
+                    style="height: 30px" src="@/assets/images/github-white.svg" />
+                <img v-else-if="information.link" style="height: 26px;margin-right:10px" src="@/assets/external-link.svg" />
+                <h2>{{ information.title }}</h2>
+            </component>
+            <div class="event-text" v-if="information.descriptionHTML" v-html="information.descriptionHTML"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+defineProps(["information"]);
+</script>
+
+<style scoped lang="scss">
+.information-container {
+    background: linear-gradient(90deg, rgb(155, 76, 187) 0%, rgb(157, 77, 185) 24%, rgb(161, 78, 194) 32%, rgb(171, 82, 203) 100%); 
+    opacity: 0.975;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: left;
+    margin: 0 auto 40px auto;
+    &:first-of-type {
+        margin-top: 50px;
+    }
+    max-width: 1000px;
+    box-shadow: 4px 6px 4px rgba(0, 0, 0, 0.15);
+    padding-bottom: 0px;
+    overflow: hidden;
+    text-align: left;
+
+    // allow this item to shrink to less than its natural height when necessary;
+    // the .event-text element inside the .event element will then shrink and
+    // become scrollable due to tose elements' css
+    min-height: 0;
+    flex-shrink: 1;
+}
+.information {
+    &>* {
+        padding: 0 24px;
+    }
+    display: flex;
+    flex-direction: column;
+
+    // allow this item to shrink to less than its natural height when necessary;
+    // the .event-text element will shrink and become scrollable due to its css
+    min-height: 0;
+    flex-shrink: 1;
+
+    min-width: 60%;
+    font-size: 1rem;
+    &:deep(a:visited), &:deep(a) {
+        color: white;
+    }
+    h2 {
+        display: inline;
+        font-size: 1.5rem;
+        margin: 0;
+    }
+}
+.information-photo {
+    max-width: 40%;
+    height: auto;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.information-image{
+    width: 100%; /* Set the width to 35% of the container */
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    object-fit: cover;
+}
+
+.information-title {
+    margin: 12px 0 8px;
+    // text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+.information-text {
+    scrollbar-width: thin;
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    // allow this element to shrink when necessary, causing the text inside it
+    // to scroll
+    min-height: 0;
+    flex-shrink: 1;
+}
+.external-link {
+    margin-right: 10px;
+}
+strong {
+    font-weight: 600;
+}
+</style>

src/components/Navigation.vue

@@ -31,6 +31,7 @@ export default {
           ['Meetings', '/meetings'],
           ['Leadership', '/leadership'],
           ['Contact', '/contact'],
+          ['IBM Fall Fest!','/ibm']
         ];
         if (loggedIn.value){  
             buttons.push(

src/router/index.js

@@ -9,7 +9,9 @@ import Admin from "../views/Admin.vue";
 import EditStaff from "../views/EditStaff.vue";
 import EditEvents from "../views/EditEvents.vue";
 import EditNotes from "../views/EditNotes.vue";
-import AdminMeetings from "../views/AdminMeetings.vue"
+import AdminMeetings from "../views/AdminMeetings.vue";
+import FallFest from "../views/FallFest.vue";
+import AdminInformation from "../views/AdminInformation.vue";
 
 export const routes = [
   {
@@ -66,6 +68,15 @@ export const routes = [
     },
     component: Meetings,
   },
+  { 
+    path: '/ibm',
+    name: "IBM Fall Fest",
+    meta: {
+      title: "IBM Fall Fest!",
+      description: "Infomration about our collaboration with IBM, Case Western Reserve University, and Cleveland State University."
+    },
+    component: FallFest,
+  },
   { 
     path: "/admin",
     name: "Admin Stuff",
@@ -113,5 +124,13 @@ export const routes = [
     meta: {
       admin: true
     }
-  }
+  },
+  {
+    path: "/admin/informations",
+    name: "Information Editor",
+    component: AdminInformation,
+    meta: {
+      admin: true
+    }
+  },
 ];

src/views/Admin.vue

@@ -5,6 +5,7 @@
             <li><router-link to="/admin/redirects">Redirect Links</router-link></li>
             <li><router-link to="/admin/staff">Staff Page Editor</router-link></li>
             <li><router-link to="/admin/events">Events Editor</router-link></li>
+            <li><router-link to="/admin/informations">Information Cards Editor</router-link></li>
             <li><router-link to="/admin/notes">Meeting Notes (edit)</router-link></li>
             <li><router-link to="/admin/meetings">Meeting Notes (view)</router-link></li>
             <li><a href="/audit-log">DB Edit Log</a></li>