Web overhaul

Priority: Prerequisites

• Boilerplate for the project
• Astro Framework Setup
• Working example of the Astro Framework

Priority: High

• Finalize the main page
• Create a membership page
• Create project page
• Mobile friendly design
• Create a dockerfile for the project
• Think through the SQL database structure - IN PROGRESS

Priority: Medium

• Create a project builder - IN PROGRESS
• Finalize the look and color and shape of the website

Priority: Low

• Create a web and hardware linker solution

Project page builder

---
import Layout from "./Layout.astro";
import CommentBlock from '../../src/components/CommentBlock.astro';
import '../styles/MarkdownLayout.css';

const { frontmatter } = Astro.props;
import '../styles/global.css';
import { fade, slide } from "astro:transitions";
import { getCollection } from "astro:content";

import { db } from "../components/utils/db";
import { eq } from 'drizzle-orm';
import { projectPageTable } from "../components/models/schema";
import { v4 as uuidv4 } from 'uuid';

// Check if the project page already exists
const existingProject = await db.query.projectPageTable.findFirst({
    where: eq(projectPageTable.title, frontmatter.title)
});

if (!existingProject) {
    // Generate a new UUID for the project
    const projectId = uuidv4();

    // Insert the new project page
    await db.insert(projectPageTable).values({
        project_id: projectId,
        title: frontmatter.title,
        pub_date: frontmatter.pubDate.toString(),
        description: frontmatter.description,
        team_lead: frontmatter.team_lead.join(', ')
    });

    console.log("Inserted new project page with ID:", projectId);
} else {
    console.log("Project page already exists with ID:", existingProject.project_id);
}
---

<Layout title={frontmatter.title}>
    <!-- Add some padding between the title and the nav bar -->
    <div style="padding-top: 1em;"></div>

    <!-- Dark mode title box, check if dark mode and pick either -->
    <div class="title-box fade-element" >
        <h1>{frontmatter.title}</h1>
    </div>
    <p class="date-view fade-element" >
        {frontmatter.pubDate.toString().slice(0, 10)}
    </p>

    <div class="tags fade-element" >
        <h3>Tags:</h3>
        <h4 class="tag_boxes">{frontmatter.tags.map((tag: any) => (
                <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
        ))}</h4>
    </div>

    <div class="team_lead fade-element">
        <h3>{frontmatter.team_lead.map((individual: any) => (
                <p class="individual">Team Lead:  <a href={`/people/${individual.replace(/\s+/g, '-')}`}>{individual}</a></p>
        ))}</h3>
    </div>

    <div class="desc fade-element">
        <h2><em>{frontmatter.description}</em></h2>
    </div>
    <div class="box fade-element">
        <slot />
    </div>

    <CommentBlock slug={frontmatter.title} />
</Layout>

SQL Database Structure

import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const commentsTable = sqliteTable("comments", {
    id: int().primaryKey({ autoIncrement: true }),
    name: text({ length: 128 }).notNull(),
    content: text({ length: 1024 }).notNull(),
    project_id: text().notNull(),
});

// Todo - primary key should be UUID instead of student ID

export const membersTable = sqliteTable("members", {
    student_id: text({length: 10}).primaryKey().notNull(),
    name: text({ length: 512 }).notNull(),
    university_email: text({ length: 512 }).notNull(),
    personal_email: text({ length: 512 }).notNull(),
    pronouns: text({ length: 512 }),
    gender: text({ length: 512 }),
    phone: text({ length: 512 }),
    paid_membership: int().notNull(),
});

export const peopleProjectAssignmentTable = sqliteTable("people_project_assignment", {
    student_id: text().notNull(),
    project_id: text().notNull(),
    role: text({ length: 512 }).notNull(),
});

// TODO - Make a portfolio table page for both the builder and linking the membership of the database.

export const projectTagsTable = sqliteTable("project_tags", {
    project_id: int().notNull(),
    tag: text({ length: 512 }).notNull(),
});

export const projectPageTable = sqliteTable("project_page", {
    project_id: text().primaryKey(),
    title: text({ length: 512 }).notNull(),
    pub_date: text().notNull(),
    description: text({ length: 512 }).notNull(),
    team_lead: text({ length: 512 }).notNull(),
});

export const eventPageTable = sqliteTable("event_page", {
    event_id: text().primaryKey(),
    title: text({ length: 512 }).notNull(),
    pub_date: text().notNull(),
    description: text({ length: 512 }).notNull(),
    link: text({ length: 512 }).notNull(),
});