Enhance roadmap

* Enhance roadmap --------- Co-authored-by: Simon Lund <[email protected]>
edutap-eu · Nov 20, 2023 · 1b015f1 · 1b015f1
1 parent 6d518fb
commit 1b015f1
Show file tree

Hide file tree

Showing 13 changed files with 351 additions and 85 deletions.
diff --git a/.todo b/.todo
@@ -1,3 +1,8 @@
+- [ ] rework texts
 - [ ] change font
+- [ ] make font large on main page for no mobile users
+
+- [ ] prevent ugly loading of images
 - [ ] prevent layout from unmounting when switching between pages (https://www.gatsbyjs.com/docs/how-to/routing/layout-components/)
-- [ ] todo create data directory for all data lists (team, faq, links, roadmap)
+- [ ] faq with real data
+- [ ] format
diff --git a/README.md b/README.md
@@ -3,42 +3,78 @@
     <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
   </a>
 </p>
-<h1 align="center">
-  eduTAP Website based on Gatby
-</h1>
+
+# eduTAP Website based on Gatby
+
+## Updating Data
+
+You can update data in three different locations in the repository:
+
+- `/static/presentations`
+- `/src/images`
+- `/src/data`
+
+### Presentations
+
+Here you can add presentations (.pdf).
+These can be linked in the roadmap.json file in `src/data/roadmap.json`.
+You don't have to specify the path, but only the filename.
+
+### Images
+
+This folder contains all images used in the website.
+You will most likely only need to add images in the `team` sub-folder.
+Here you can add/edit images for team members. They can be either `.png` or `.jpg`.
+In the `src/data/team.json` file you can link the images to the team members by specifying the relative path to the
+image.
+(e.g. `../images/team/your-image.png`)
+
+### Data
+
+The data folder contains the following files:
+
+- `nav.json`
+- `presentations.json`
+- `roadmap.json`
+- `team.json`
+
+You will most likely only need to edit the last three files.
+In the `presentations.json` file you can add presentations to the presentations page.
+In the `roadmap.json` file you can add milestones to the roadmap.
+(s. Presentation section on how to add presentations to milestones). 
+In the `team.json` file you can add team members.
+(s. Image section on how to add images for team members).
+
 
 ## 🚀 Quick start
 
-1.  **Start developing.**
+1. **Start developing.**
 
 Make sure to have npm installed.
 If in doubt use nvm and install the stable version.
 
 In the repositories root directory:
 
-First run ``npm install`` one time.
+First run `npm install` one time.
 
 Then start the development server `npm run develop`.
 
 Your site is now running at http://localhost:8000!
 
 Edit and save a file in `src/pages/` to see your site update in real-time!
 
-3.  **Deployment to GH Pages**
+User `npm run clean` to delete the cache and public folder. This is useful if you have problems with the development
+server.
 
-Run `npm run deploy`.
+3. **Deployment to GH Pages**
 
-4.  **Learn more**
+Push to the master branch and the site will be deployed automatically.
+
+4. **Learn more**
 
 - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
 - [Tutorials](https://www.gatsbyjs.com/docs/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
 - [Guides](https://www.gatsbyjs.com/docs/how-to/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
 - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
 - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
 - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-## 🚀 Quick start (Netlify)
-
-Deploy this starter with one click on [Netlify](https://app.netlify.com/signup):
-
-[<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-minimal)
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -6,6 +6,7 @@ module.exports = {
     pathPrefix: "/",
     siteMetadata: {
         title: "eduTAP",
+        description: "eduTAP is your educational ID and a collection of service passes in the digital wallet.",
         siteUrl: "https://edutap.eu"
     },
     plugins: ["gatsby-plugin-postcss", "gatsby-plugin-image", "gatsby-plugin-sitemap", {

diff --git a/src/components/milestone.js b/src/components/milestone.js
@@ -1,8 +1,21 @@
 import * as React from "react";
 import {VerticalTimelineElement} from "react-vertical-timeline-component";
+import clsx from "clsx";
 
 const Milestone = ({milestone}) => {
-    const {title, description, date, status} = milestone;
+    const {
+        milestone_type = null,
+        date,
+        location = null,
+        event_name = null,
+        title,
+        description,
+        status,
+        event_link = null,
+        presentation_file = null,
+        video_link = null
+    } = milestone;
+    console.log(milestone)
     const [color, setColor] = React.useState(status);
 
     // TODO: make colors depend on ui theme
@@ -22,14 +35,45 @@ const Milestone = ({milestone}) => {
         }
     }, [status, title]);
 
-    return (
-        <VerticalTimelineElement iconStyle={{background: color}} date={date}
-                                 contentStyle={{border: `2px solid ${color}`}}
-                                 contentArrowStyle={{borderRight: `7px solid ${color}`}}>
-            <h2>{title}</h2>
-            <p>{description}</p>
-        </VerticalTimelineElement>
-    );
+    return (<VerticalTimelineElement
+        iconStyle={{background: color, display: 'flex', alignItems: 'center', justifyContent: 'center'}}
+        icon={status === "reached" && <span className={'text-4xl text-white'}>✓</span>}
+        date={date}
+        contentStyle={{border: `2px solid ${color}`}}
+        contentArrowStyle={{borderRight: `7px solid ${color}`}}
+    >
+        <div>
+            {milestone_type !== null && <span className={'text-base-content/70'}>{milestone_type}</span>}
+            <h2 className={'!mb-4 md:!text-3xl'}>{title}</h2>
+            {description && <p className={'!text-xl !font-light'}>{description}</p>}
+
+            {/*Show if "description is set" AND ("at least one of the links is set" OR "location is set")*/}
+            {([event_link, presentation_file, video_link].some(Boolean) || location || event_name) &&
+                <div className={'border-t mt-4 mb-3'}/>}
+            {/*Show if at least one of the links is set*/}
+            {[event_link, presentation_file, video_link].some(Boolean) &&
+                <div className={'py-3 [&>*]:mb-2 [&>*]:btn [&>*]:btn-sm [&>*]:mr-2'}>
+                    {event_link && <a role="button" target="_blank" rel="noreferrer"
+                                      href={event_link}>Event-Website</a>
+
+                    }
+                    {presentation_file && <a role="button" target="_blank" rel="noreferrer"
+                                             href={`/presentations/${presentation_file}`}>Slides</a>}
+                    {video_link && <a role="button" target="_blank" rel="noreferrer"
+                                      href={video_link}>YouTube-Video</a>}
+                </div>}
+            {
+                (event_name || location) &&
+                <div className={'flex'}>
+                    <div className={'mr-2'}>📍</div>
+                    <div>
+                        {event_name && <span className={'block'}>{event_name}</span>}
+                        {location && <span className={'block'}>{location}</span>}
+                    </div>
+                </div>
+            }
+        </div>
+    </VerticalTimelineElement>);
 }
 
 export default Milestone;
diff --git a/src/components/presentation.js b/src/components/presentation.js
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+const Presentation = ({presentation}) => {
+    const {
+        title,
+        file,
+        description
+    } = presentation;
+
+    return (
+        <div className={'card border-2 border-primary shadow-xl'}>
+            <div className={'card-body'}>
+                <h2 className={'card-title !mb-4'}>{title}</h2>
+                {description && <p className={'text-2xl font-light'}>{description}</p>}
+                <div className={'card-actions justify-end'}>
+                    <a href={`/presentations/${file}`} className={'btn'} role="button" target="_blank"
+                       rel="noreferrer">Open</a>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+
+export default Presentation;
diff --git a/src/data/nav.json b/src/data/nav.json
@@ -1,18 +1,22 @@
 [
   {
-    "to":"/",
-    "text":"Start"
+    "to": "/",
+    "text": "Start"
   },
   {
-    "to":"/roadmap",
-    "text":"Roadmap"
+    "to": "/roadmap",
+    "text": "Roadmap"
   },
   {
-    "to":"/showcases",
-    "text":"Showcases"
+    "to": "/showcases",
+    "text": "Showcases"
   },
   {
-    "to":"/about",
-    "text":"About"
+    "to": "/presentations",
+    "text": "Presentations"
+  },
+  {
+    "to": "/about",
+    "text": "About"
   }
 ]
diff --git a/src/data/presentations.json b/src/data/presentations.json
@@ -0,0 +1,7 @@
+[
+  {
+    "title": "Lightning Talk: eduTAP",
+    "file":"Lightning_Talk_eduTAP.pdf",
+    "description": "Short presentation on eduTAP"
+  }
+]