From bcf52da60cfa26008a7abbeab2e12e8db9b3179c Mon Sep 17 00:00:00 2001 From: Maximilian Rapp <53191688+rappm@users.noreply.github.com> Date: Sun, 9 Feb 2025 18:32:31 +0100 Subject: [PATCH] Fill about page with content (#104) * add carousel * Add About page with content and sanitize HTML * remove use client * update about page * Implement upcoming carousel Co-authored-by: Mathilde Hagl * cleanup imports * adding some design suggestions * Enhance AboutPage content and update contributor roles for clarity * Update contributor contribution description for clarity * update about page text * add highlighted add custom course phases * update icons * small design refinements * add @rappm as contributor * fix linter to use prettier * remove carousel * implement changes requested by @niclasheun * @niclasheun fixes 2.0 * update contributor mapping * update AboutPage dynamically loaded course phases layout and heading spacing --------- Co-authored-by: Mathilde Hagl Co-authored-by: Stefan Niclas Heun --- clients/core/public/env.js | 5 +- .../src/publicPages/legalPages/AboutPage.tsx | 238 ++++++++++++++++-- .../legalPages/components/ContributorList.tsx | 80 ++++++ .../components/ContributorMapping.tsx | 25 ++ .../legalPages/interfaces/Contributor.ts | 13 + clients/shared_library/env.ts | 3 + 6 files changed, 345 insertions(+), 19 deletions(-) create mode 100644 clients/core/src/publicPages/legalPages/components/ContributorList.tsx create mode 100644 clients/core/src/publicPages/legalPages/components/ContributorMapping.tsx create mode 100644 clients/core/src/publicPages/legalPages/interfaces/Contributor.ts diff --git a/clients/core/public/env.js b/clients/core/public/env.js index 2dbcf5af..ff580519 100644 --- a/clients/core/public/env.js +++ b/clients/core/public/env.js @@ -4,5 +4,8 @@ window.env = { KEYCLOAK_HOST: 'http://localhost:8081', KEYCLOAK_REALM_NAME: 'prompt', CHAIR_NAME_LONG: 'TUM Research Group for Applied Education Technologies', - CHAIR_NAME_SHORT: 'Applied Education Technologies' + CHAIR_NAME_SHORT: 'Applied Education Technologies', + GITHUB_SHA: 'GITHUB_SHA - Will be here in Production', + GITHUB_REF: '$GITHUB_REF - Will be here in Production', + SERVER_IMAGE_TAG: '$SERVER_IMAGE_TAG - Image Tag', } diff --git a/clients/core/src/publicPages/legalPages/AboutPage.tsx b/clients/core/src/publicPages/legalPages/AboutPage.tsx index a205b103..68f00e23 100644 --- a/clients/core/src/publicPages/legalPages/AboutPage.tsx +++ b/clients/core/src/publicPages/legalPages/AboutPage.tsx @@ -1,36 +1,238 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' -import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' -import { ArrowLeft, AlertTriangle } from 'lucide-react' -import { useNavigate } from 'react-router-dom' +import { + ArrowLeft, + Bug, + GitPullRequest, + Mail, + FileText, + FileUser, + UserCheck, + Users, + Mic, + Upload, + Plus, + Layers, +} from 'lucide-react' +import { Link, useNavigate } from 'react-router-dom' +import { ContributorList } from './components/ContributorList' +import { env } from '@/env' +import { Separator } from '@/components/ui/separator' export default function AboutPage() { const navigate = useNavigate() + const coreFeatures = [ + { + icon: Layers, + title: 'Course Configuration', + description: + 'Build a course by assembling various course phases to suit your specific teaching needs.', + }, + { + icon: FileUser, + title: 'Application Phase', + description: + 'Streamline the application process for courses, making it easier for students to apply and for instructors to manage applications.', + }, + { + icon: UserCheck, + title: 'Student Management', + description: 'Efficiently manage student information and course participation.', + }, + ] + + const dynamicPhases = [ + { + icon: Mic, + title: 'Interview Phase', + description: + 'Manage and schedule interviews with applicants as part of the selection process.', + }, + { + icon: Upload, + title: 'TUM Matching Export', + description: 'Export data in a format compatible with TUM Matching for seamless integration.', + }, + { + icon: Users, + title: 'Team Phase', + description: + 'Assign students to teams and projects, and manage project work throughout the course.', + }, + ] + return ( -
- - +
+ + - About PROMPT - Learn more about our PROMPT + About PROMPT + + Learn more about our robust course management platform + - - - - Under Construction - - This page is still being built. More information will be available soon. - - + +
+

What is PROMPT?

+

+ PROMPT (Project-Oriented Modular Platform for Teaching) is a course management tool + specifically designed for project-based university courses. By supporting a wide range + of organizational processes, it reduces the administrative burden typically associated + with such courses and aims to streamline the daily activities of both students and + instructors, enhancing the overall learning experience. +

+

+ Originally developed for the iPraktikum at the Technical University of Munich, PROMPT + has been reimagined with a flexible, modular architecture. Each course is built from + independent, reusable components that can be easily extended, giving instructors the + freedom to tailor functionality and structure to their exact teaching needs. +

+
+ +
+

Get in Touch

+
+ {[ + { + icon: Bug, + text: 'Report a bug', + link: 'https://github.com/ls1intum/prompt2/issues', + }, + { + icon: GitPullRequest, + text: 'Request a feature', + link: 'https://github.com/ls1intum/prompt2/issues', + }, + { icon: Mail, text: 'Contact us', link: 'https://ase.cit.tum.de/impressum/' }, + { + icon: FileText, + text: 'Release notes', + link: 'https://github.com/ls1intum/prompt2/releases', + }, + ].map((item, index) => ( + + + {item.text} + + ))} +
+
+ + + +
+

Main Features

+

+ The core features are built-in functionalities essential for course management, while + dynamically loaded phases are additional, customizable components that can be added as + needed. +

+ +

Core Features

+

+ The Core offers a range of essential features designed to enhance the efficiency and + effectiveness of course management. +

+
+ {coreFeatures.map((feature, index) => ( + + + + + {feature.title} + + + +

{feature.description}

+ + + ))} +
+ +

Dynamically Loaded Course Phases

+

+ PROMPT allows instructors to create and manage own independent course phases, + fostering a collaborative and easily extensible platform for project-based learning. +

+ +
+ {dynamicPhases.map((phase, index) => ( + + + + + {phase.title} + + + +

{phase.description}

+ + + ))} + + + + + Custom Course Phase + + + +

+ Easily extend PROMPT with custom phases tailored to your course needs. +

+
+ +
+ + +
+
+ + + +
+

Contributors

+ +
+ + + +
+

Release Info

+
    +
  • + Github SHA: {env.GITHUB_SHA} +
    • +
  • + Github Ref: {env.GITHUB_REF} +
    • +
  • + Image Tag: {env.SERVER_IMAGE_TAG} +
    • +
  • + License: MIT +
    • +
+
diff --git a/clients/core/src/publicPages/legalPages/components/ContributorList.tsx b/clients/core/src/publicPages/legalPages/components/ContributorList.tsx new file mode 100644 index 00000000..671918dc --- /dev/null +++ b/clients/core/src/publicPages/legalPages/components/ContributorList.tsx @@ -0,0 +1,80 @@ +import { useEffect, useState } from 'react' +import { Card, CardContent } from '@/components/ui/card' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { Contributor, ContributorWithInfo } from '../interfaces/Contributor' +import { contributorMapping } from './ContributorMapping' + +export const ContributorList = () => { + const [contributors, setContributors] = useState([]) + const [vali, setVali] = useState() + + useEffect(() => { + fetch('https://api.github.com/repos/ls1intum/prompt2/contributors') + .then((response) => response.json()) + .then((data) => setContributors(data)) + .catch((error) => console.error('Error fetching contributors:', error)) + }, []) + + useEffect(() => { + fetch('https://api.github.com/users/airelawaleria') + .then((response) => response.json()) + .then((data) => { + if (data) { + setVali({ + login: data.login, + avatar_url: data.avatar_url, + html_url: data.html_url, + contributions: 0, // Contributions are not available from this endpoint + type: data.type, + }) + } + }) + .catch((error) => console.error('Error fetching user:', error)) + }, []) + + const mappedContributors: ContributorWithInfo[] = [...contributors, vali] + .filter( + (contributor) => + contributor !== undefined && + contributorMapping[contributor.login] && + contributor.type === 'User', + ) + .map((contributor) => { + if (contributor === undefined) { + return + } + return { + ...contributor, + ...contributorMapping[contributor?.login], + } + }) + .filter((contributor): contributor is ContributorWithInfo => contributor !== undefined) + + return ( +
+ {mappedContributors + .sort((a, b) => a.position - b.position) + .map((contributor, index) => ( + + + + + {contributor.login.slice(0, 2).toUpperCase()} + +
+ + {contributor.name} + +

{contributor.contribution}

+
+ + + ))} +
+ ) +} diff --git a/clients/core/src/publicPages/legalPages/components/ContributorMapping.tsx b/clients/core/src/publicPages/legalPages/components/ContributorMapping.tsx new file mode 100644 index 00000000..adb4145f --- /dev/null +++ b/clients/core/src/publicPages/legalPages/components/ContributorMapping.tsx @@ -0,0 +1,25 @@ +export const contributorMapping: { + [username: string]: { + name: string + contribution: string + position: number + } +} = { + niclasheun: { + name: 'Niclas Heun', + contribution: 'Lead Developer & Architect of PROMPT 2.0', + position: 2, + }, + Mtze: { name: 'Matthias Linhuber', contribution: 'Project Manager', position: 1 }, + mathildeshagl: { + name: 'Mathilde Hagl', + contribution: 'Templating and Task Management', + position: 4, + }, + airelawaleria: { + name: 'Valeryia Andraichuk', + contribution: 'Creator of PROMPT - the concept on which PROMPT 2.0 is based', + position: 3, + }, + rappm: { name: 'Maximilian Rapp', contribution: 'Grading', position: 5 }, +} diff --git a/clients/core/src/publicPages/legalPages/interfaces/Contributor.ts b/clients/core/src/publicPages/legalPages/interfaces/Contributor.ts new file mode 100644 index 00000000..685092fc --- /dev/null +++ b/clients/core/src/publicPages/legalPages/interfaces/Contributor.ts @@ -0,0 +1,13 @@ +export interface Contributor { + login: string + avatar_url: string + html_url: string + contributions: number + type: string +} + +export interface ContributorWithInfo extends Contributor { + name: string + contribution: string + position: number +} diff --git a/clients/shared_library/env.ts b/clients/shared_library/env.ts index 9e493771..eb40fdde 100644 --- a/clients/shared_library/env.ts +++ b/clients/shared_library/env.ts @@ -10,5 +10,8 @@ type EnvType = { KEYCLOAK_REALM_NAME: string CHAIR_NAME_LONG: string CHAIR_NAME_SHORT: string + GITHUB_SHA: string + GITHUB_REF: string + SERVER_IMAGE_TAG: string } export const env: EnvType = { ...window.env }