Merge pull request #3 from MPUSP/dev

feat: updates to style, added README

Author: m-jahn

README.md

@@ -1,22 +1,49 @@
-# Website
+# mpusp.github.io
 
+[![Deploy to GitHub Pages](https://github.com/MPUSP/mpusp.github.io/actions/workflows/deploy.yml/badge.svg)](https://github.com/MPUSP/mpusp.github.io/actions/workflows/deploy.yml)
+[![GitHub last commit](https://img.shields.io/github/last-commit/MPUSP/mpusp-github-io)](https://github.com/MPUSP/mpusp.github.io/actions/workflows/deploy.yml)
+
+A homepage for the bioionformatic platform of the Max-Planck-Unit for the Science of Pathogens ([MPUSP](mpusp.mpg.de)).
 This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+All data to render the less-static parts of the website (repo and user stats) are retrieved from Github using API requests.
+The website is automatically updated and built once per week, and on pull requests to the `main` branch.
+
+### Structure
+
+- The website is build using the Github action `.github/workflows/deploy.yml`.
+- The website building is tested for each PR to main with `.github/workflows/test-deploy.yml`
+- The Github action will retrieve public data from the Github API using two scripts
+  - `src/scripts/generate_page.py`: collects all relevant data and stores it in `static/data/*.json`
+  - `src/scripts/generate_workflow_md.py`: collects relevant workflow data and renders an info page in markdown format, exported to `docs/workflows/all_workflows/*.md`
+- static page data is located in the `docs/` dir, where also new `.md` docs can be added
+- all custom website elements and styles (cards, bar charts, etc) are located in `src/components`
+- global color and style definitions are located in `src/css/custom.css`
+- global header, footer, and metadata definition is located in `docusaurus.config.js`
+
+### Dependencies
+
+To develop the page locally, create a conda environment with the required packages:
+
+```bash
+conda create -n docusaurus -c conda-forge python pygithub jinja2 nodejs
+conda activate docusaurus
+```
 
-### Installation
+To create a test page, run:
 
 ```bash
 npm create-docusaurus@latest docusaurus-test classic
 ```
 
 ### Local Development
 
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
 ```bash
 npm start
 ```
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
+To build the website locally, run:
 
 ```bash
 npm run build

docusaurus.config.js

@@ -80,6 +80,11 @@ const config = {
             label: "Workflows",
           },
           { to: "/blog", label: "News", position: "left" },
+          {
+            href: "https://mpusp.mpg.de",
+            label: "MPUSP",
+            position: "right",
+          },
           {
             href: "https://github.com/MPUSP",
             label: "MPUSP GitHub",
@@ -138,7 +143,7 @@ const config = {
         darkTheme: prismThemes.dracula,
       },
       colorMode: {
-        defaultMode: "dark",
+        defaultMode: "light",
         disableSwitch: false,
         respectPrefersColorScheme: false,
       },

src/components/About/index.jsx

@@ -47,16 +47,15 @@ export default function Stats() {
             <div className={styles.about_description}>
                 <h1>Our Github Projects</h1>
                 <p>
-                    More than 30 open-source{" "}
-                    <Link to="https://github.com/MPUSP/repositories">MPUSP repositories</Link>{" "}
-                    are available on Github, representing a diverse range of projects.
+                    We work on a diverse range of projects and aim to make as many as possible{" "}
+                    <Link to="https://github.com/orgs/MPUSP/repositories">publicly available on Github</Link>{" "}.
                 </p>
             </div>
             <div className={styles.stats_container}>
                 <div className={styles.stats1_card}>
                     {stats.map(({ number, content }, index) => (
                         <Link key={index}
-                            to="https://github.com/MPUSP/repositories">
+                            to="https://github.com/orgs/MPUSP/repositories">
                             <div className={styles.card}>
                                 <h1 className="gradient_text">{number}</h1>
                                 <h3>{content}</h3>
@@ -67,7 +66,7 @@ export default function Stats() {
                 <div className={styles.stats2_card}>
                     {stats2.map(({ number, content }, index) => (
                         <Link key={index}
-                            to="https://github.com/MPUSP/repositories">
+                            to="https://github.com/orgs/MPUSP/repositories">
                             <div className={styles.card}>
                                 <h1 className="gradient_text">{number}</h1>
                                 <h3>{content}</h3>

src/components/About/styles.module.css

@@ -65,7 +65,7 @@
 }
 
 .card:hover {
-  transform: scale(0.9);
+  transform: scale(0.95);
 }
 
 .card h1,

src/components/Activity/styles.module.css

@@ -67,7 +67,6 @@
 .activity_footer {
   text-align: center;
   font-size: 0.9rem;
-  color: rgba(0, 0, 0, 0.65);
   margin-top: 0.5rem;
 }
 

src/components/Header/index.jsx

@@ -17,21 +17,24 @@ export default function Header() {
             </div>
             <div className={styles.header_content}>
                 <h1>
-                    The MPUSP Bioinformatics Platform:
-                    Workflows for Reproducible Science.
+                    The MPUSP Bioinformatics Platform
                 </h1>
+                <h2>
+                    Workflows for Computational Biology at the 
+                    Max-Planck-Unit for the Science of Pathogens.
+                </h2>
                 <div className={styles.header_content_input}>
                     <Link to="/docs/projects/intro"
-                        className="button button--secondary button--lg">
-                        Projects
+                        className="button">
+                        <span>Projects</span>
                     </Link>
                     <Link to="/docs/workflows/workflow_overview"
-                        className="button button--secondary button--lg">
-                        Explore workflows
+                        className="button">
+                        <span>Explore workflows</span>
                     </Link>
                     <Link to="/blog"
-                        className="button button--secondary button--lg">
-                        News
+                        className="button">
+                        <span>News</span>
                     </Link>
                 </div>
             </div>

src/components/Header/styles.module.css

@@ -42,14 +42,43 @@
 
 .header_content_input a {
   margin-right: 5px;
-  text-decoration: none;
   width: 250px;
+  background: var(--theme-card);
+  color: var(--ifm-font-color-base);
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 10px 15px 10px 15px;
+  margin: 5px;
+  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+  font-weight: 700;
+  font-size: 20px;
 }
 
 .header_content_input a:focus {
   background: none;
 }
 
+.header_content_input a:hover {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  transform: scale(0.95);
+}
+
+.header_content_input a span {
+  background-image: linear-gradient(
+    90deg,
+    var(--ifm-color-primary-dark),
+    var(--ifm-color-primary-lightest)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 @media screen and (max-width: 1050px) {
   .header {
     flex-direction: column;

src/css/custom.css

@@ -6,14 +6,14 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-color-secondary: #ebedf0;
+  --ifm-color-primary: #428e81;
+  --ifm-color-primary-dark: #347b6f;
+  --ifm-color-primary-darker: #246b5f;
+  --ifm-color-primary-darkest: #19594f;
+  --ifm-color-primary-light: #46a293;
+  --ifm-color-primary-lighter: #5eb1a3;
+  --ifm-color-primary-lightest: #76c0b3;
+  --ifm-color-secondary: #e1e1e1;
   --ifm-color-success: #388e3c;
   --ifm-color-info: #1976d2;
   --ifm-color-warning: #ef6c00;
@@ -31,14 +31,14 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #10b981;
-  --ifm-color-primary-dark: #059669;
-  --ifm-color-primary-darker: #06865e;
-  --ifm-color-primary-darkest: #056d4c;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --ifm-color-secondary: #ebedf0;
+  --ifm-color-primary: #46a293;
+  --ifm-color-primary-dark: #428e81;
+  --ifm-color-primary-darker: #347b6f;
+  --ifm-color-primary-darkest: #246b5f;
+  --ifm-color-primary-light: #5eb1a3;
+  --ifm-color-primary-lighter: #76c0b3;
+  --ifm-color-primary-lightest: #8ccbbf;
+  --ifm-color-secondary: #515151;
   --ifm-color-success: #388e3c;
   --ifm-color-info: #1976d2;
   --ifm-color-warning: #ef6c00;