From c98e1d6244f952a7b11818091c5a38440933c7f8 Mon Sep 17 00:00:00 2001
From: Andres Rios Tascon <ariostas@gmail.com>
Date: Mon, 6 May 2024 12:13:57 -0400
Subject: [PATCH] Added contribute page (#89)

---
 src/components/layout.js   |  7 ++-
 src/pages/about.js         | 15 -------
 src/pages/contribute.js    | 90 ++++++++++++++++++++++++++++++++++++++
 src/styles/globalStyle.css |  7 +++
 src/styles/layout.css      |  5 ++-
 5 files changed, 106 insertions(+), 18 deletions(-)
 delete mode 100644 src/pages/about.js
 create mode 100644 src/pages/contribute.js

diff --git a/src/components/layout.js b/src/components/layout.js
index 2d9617f..8e2f8a5 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -48,9 +48,14 @@ const Layout = ({ pageTitle, children }) => {
                 Home
               </Link>
             </li>
+            <li className="navLinkItem">
+              <Link to="/contribute" title="Contribute" className="navLinkText">
+                Contribute
+              </Link>
+            </li>
             <li className="navLinkItem">
               <a
-                href="https://hepsoftwarefoundation.org/"
+                href="https://hepsoftwarefoundation.org/workinggroups/training.html"
                 target="_blank"
                 rel="noopener noreferrer"
                 title="About"
diff --git a/src/pages/about.js b/src/pages/about.js
deleted file mode 100644
index eaa9552..0000000
--- a/src/pages/about.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from "react";
-import Layout from "../components/layout";
-import Seo from "../components/seo";
-
-// markup
-const AboutPage = () => {
-  return (
-    <Layout pageTitle="About Me">
-      <p>About will be about to done as I'm about to done with first task.</p>
-    </Layout>
-  );
-};
-
-export const Head = () => <Seo title="About Me" />;
-export default AboutPage;
diff --git a/src/pages/contribute.js b/src/pages/contribute.js
new file mode 100644
index 0000000..af0a165
--- /dev/null
+++ b/src/pages/contribute.js
@@ -0,0 +1,90 @@
+import * as React from "react";
+import Layout from "../components/layout";
+import Seo from "../components/seo";
+
+// markup
+const ContributePage = () => {
+  return (
+    <Layout pageTitle="Contribute">
+      <br />
+      <br />
+      Training in software and computing are essential ingredients for the
+      success of any HEP experiment. As most experiments have similar basic
+      prerequisites (Unix shell, Python, C++, etc.) we have joined efforts and
+      created this introductory software training curriculum that teaches HEP
+      newcomers the software skills they need as they enter the field, and in
+      parallel, instills best practices for writing software.
+      <br />
+      <br />
+      The curriculum is composed of a set of <it>modules</it> (developed by HSF,
+      Software Carpentries, and other organizations), so that learners/students
+      can focus on what is most relevant to them.
+      <br />
+      <br />
+      Contributions of any kind are very welcome! There are various ways you can
+      get involved:
+      <br />
+      <br />
+      <ul>
+        <li>
+          Join our <b>meetings</b> to give feedback and discuss with us (details
+          at our{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/workinggroups/training.html"
+            className="a-no-style"
+          >
+            main page
+          </a>
+          ).
+        </li>
+        <li>
+          <b>Bugs reports or feature requests</b>: Directly open an issue on{" "}
+          <a href="https://github.com/hsf-training" className="a-no-style">
+            GitHub
+          </a>{" "}
+          or (even better) submit a pull request to fix things.
+        </li>
+        <li>
+          Want to <b>contribute your own module</b>? We compiled a small list of
+          recommendations{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/training/module-guidelines.html"
+            className="a-no-style"
+          >
+            here
+          </a>
+          . Of course we always encourage you to talk to us early for a better
+          coordination. There is also more technical information for{" "}
+          <a
+            href="https://github.com/hsf-training/carpentry-cookiecutter"
+            className="a-no-style"
+          >
+            creating a new module
+          </a>
+          .
+        </li>
+        <li>
+          Want to <b>help out at a workshop?</b>{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/training/educators.html"
+            className="a-no-style"
+          >
+            More information on the different roles in our training events
+          </a>
+        </li>
+        <li>
+          Want to <b>organize your own workshop</b>?{" "}
+          <a
+            href="https://hepsoftwarefoundation.org/training/howto-event.html"
+            className="a-no-style"
+          >
+            We got you covered
+          </a>
+        </li>
+      </ul>
+    </Layout>
+  );
+};
+
+export const Head = () => <Seo title="Contribute" />;
+export default ContributePage;
diff --git a/src/styles/globalStyle.css b/src/styles/globalStyle.css
index 9040b6f..63060b6 100644
--- a/src/styles/globalStyle.css
+++ b/src/styles/globalStyle.css
@@ -20,6 +20,13 @@ a {
   transition: all 0.2s ease-in-out;
 }
 
+.a-no-style {
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+  text-decoration: underline !important;
+  color: blue !important;
+}
+
 input {
   font-family: jetbrainsmono, sans-serif !important;
   outline: none;
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 66c4d56..791ae8e 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -16,7 +16,7 @@ nav .container {
 }
 
 nav ul {
-  width: 7rem;
+  width: 12rem;
   list-style: none;
   display: flex;
   justify-content: space-between;
@@ -26,6 +26,7 @@ nav ul li a {
   color: #fff;
   font-size: 1rem;
   text-decoration: none;
+  margin-right: 0.7rem;
 }
 
 nav ul li a:hover {
@@ -84,7 +85,7 @@ footer .container {
     margin: auto 1rem;
   }
   nav ul {
-    width: 5rem;
+    width: 12rem;
   }
   nav ul li a {
     font-size: 0.8rem;