Upgrade homepage

.github/workflows/alex.yaml

@@ -6,6 +6,8 @@ on:
 jobs:
   alex:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
     steps:
       - uses: actions/checkout@v3
       - uses: reviewdog/action-alex@8ffbae4a38ecf138503f7b9ea5cd2765ddde022f

_components/Benefits.jsx

@@ -0,0 +1,162 @@
+const features = [
+  {
+    name: "Collaborative",
+    description:
+      "Let's learn each other's best practices.",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="tw-w-6 tw-h-6 tw-stroke-sky-600 tw-mr-1"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: "Responsive",
+    description:
+      "Things changed? This resource does too with your help.",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="tw-w-6 tw-h-6 tw-stroke-sky-600 tw-mr-1"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: "Open source",
+    description:
+      "Share and copy without permission. Join the discussions.",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="tw-w-6 tw-h-6 tw-stroke-sky-600 tw-mr-1"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: "Quality control",
+    description:
+      "All content is reviewed periodically by specialists.",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="tw-w-6 tw-h-6 tw-stroke-sky-600 tw-mr-1"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: "Local",
+    description:
+      "This is for VU, by VU. Join in, meet colleagues.",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="tw-w-6 tw-h-6 tw-stroke-sky-600 tw-mr-1"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m20.893 13.393-1.135-1.135a2.252 2.252 0 0 1-.421-.585l-1.08-2.16a.414.414 0 0 0-.663-.107.827.827 0 0 1-.812.21l-1.273-.363a.89.89 0 0 0-.738 1.595l.587.39c.59.395.674 1.23.172 1.732l-.2.2c-.212.212-.33.498-.33.796v.41c0 .409-.11.809-.32 1.158l-1.315 2.191a2.11 2.11 0 0 1-1.81 1.025 1.055 1.055 0 0 1-1.055-1.055v-1.172c0-.92-.56-1.747-1.414-2.089l-.655-.261a2.25 2.25 0 0 1-1.383-2.46l.007-.042a2.25 2.25 0 0 1 .29-.787l.09-.15a2.25 2.25 0 0 1 2.37-1.048l1.178.236a1.125 1.125 0 0 0 1.302-.795l.208-.73a1.125 1.125 0 0 0-.578-1.315l-.665-.332-.091.091a2.25 2.25 0 0 1-1.591.659h-.18c-.249 0-.487.1-.662.274a.931.931 0 0 1-1.458-1.137l1.411-2.353a2.25 2.25 0 0 0 .286-.76m11.928 9.869A9 9 0 0 0 8.965 3.525m11.928 9.868A9 9 0 1 1 8.965 3.525"
+        />
+      </svg>
+    ),
+  },
+  {
+    name: "Flexible",
+    description:
+      "Shape the content to your needs. Find topics or pathways.",
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        className="tw-w-6 tw-h-6 tw-stroke-sky-600 tw-mr-1"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z"
+        />
+      </svg>
+    ),
+  },
+];
+
+function Features() {
+  return (
+    <>
+      <div className="tw-bg-white tw-py-12 sm:tw-py-16">
+        <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
+          <div className="tw-mx-auto tw-max-w-2xl sm:tw-text-center">
+            {/* <h2 className="tw-text-base tw-font-semibold tw-leading-7 tw-text-sky-600">
+              Everything you need
+            </h2> */}
+            <h2 className="tw-mt-2 tw-text-3xl tw-font-bold tw-tracking-tight tw-text-sky-900 sm:tw-text-4xl">
+              Benefits
+            </h2>
+            <p className="tw-mt-6 tw-text-lg tw-leading-8 tw-text-gray-600">
+              VU has plenty of resources already. Why use this one?
+            </p>
+          </div>
+        </div>
+        <div className="tw-mx-auto tw-mt-16 tw-max-w-7xl tw-px-6 sm:tw-mt-20 md:tw-mt-24 lg:tw-px-8">
+          <dl className="tw-mx-auto tw-grid tw-max-w-2xl tw-grid-cols-1 tw-gap-x-6 tw-gap-y-10 tw-text-base tw-leading-7 tw-text-gray-600 sm:tw-grid-cols-2 lg:tw-mx-0 lg:tw-max-w-none lg:tw-grid-cols-3 lg:tw-gap-x-8 lg:tw-gap-y-16">
+            {features.map((feature) => {
+              const Component = feature.icon;
+              return (
+                <div key={feature.name} className="tw-flex tw-flex-col">
+                  <dt className="tw-inline tw-font-semibold tw-text-gray-900">
+                    <Component
+                      aria-hidden="true"
+                      />
+                    {feature.name}
+                  </dt>{" "}
+                  <dd className="tw-inline">{feature.description}</dd>
+                </div>
+              );
+            })}
+          </dl>
+        </div>
+      </div>
+    </>
+  );
+}

_components/Cta.jsx

@@ -0,0 +1,32 @@
+function Cta() {
+  return (
+    <>
+      <div className="tw-bg-sky-700 tw-rounded-xl">
+      <div className="tw-px-6 tw-py-24 sm:tw-px-6 sm:tw-py-32 lg:tw-px-8">
+        <div className="tw-mx-auto tw-max-w-2xl tw-text-center">
+          <h2 className="tw-text-3xl tw-font-bold tw-tracking-tight tw-text-white sm:tw-text-4xl">
+            Learn practices.
+            <br />
+            Share practices.
+          </h2>
+          <p className="tw-mx-auto tw-mt-6 tw-max-w-xl tw-text-lg tw-leading-8 tw-text-sky-200">
+            Contribute by exploring. The rest will follow. 
+          </p>
+          <div className="tw-mt-10 tw-flex tw-items-center tw-justify-center tw-gap-x-6">
+            <a
+              href="./topics.html"
+              className="tw-rounded-md tw-bg-white tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-sky-600 tw-shadow-sm hover:tw-bg-sky-50 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-white"
+            >
+              View topics
+            </a>
+            <a href="./pathways.html" className="tw-text-sm tw-font-semibold tw-leading-6 tw-text-white">
+              View pathways <span aria-hidden="true">→</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    </>
+
+  );
+}

_components/Hero.jsx

@@ -0,0 +1,61 @@
+function Hero() {
+  return (
+    <div className="tw-relative tw-isolate tw-pt-14">
+        <div
+          className="tw-absolute tw-inset-x-0 -tw-top-40 -tw-z-10 tw-transform-gpu tw-overflow-hidden tw-blur-3xl sm:-tw-top-80"
+          aria-hidden="true"
+        >
+          <div
+            className="tw-relative tw-left-[calc(50%-11rem)] tw-aspect-[1155/678] tw-w-[36.125rem] -tw-translate-x-1/2 tw-rotate-[30deg] tw-bg-gradient-to-tr tw-from-[#1063A0] tw-to-[#deff00] tw-opacity-20 sm:tw-w-left-[calc(50%-30rem)] sm:tw-w-[72.1875rem]"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <div className="tw-py-24 sm:tw-py-32 lg:tw-pb-40">
+          <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
+            <div className="tw-mx-auto tw-max-w-2xl tw-text-center">
+              <h1 className="tw-text-4xl tw-font-bold tw-tracking-tight tw-text-white sm:tw-text-6xl">
+                Developer tools for handling the next epidemic
+                {/* A universe of epidemiological tools */}
+              </h1>
+              <p className="tw-mt-6 tw-text-lg tw-leading-8 tw-text-gray-300">
+                Epiverse is a universe of epidemiological tools to respond to an outbreak. From reading and cleaning your data through to estimating the final size of an outbreak, Epiverse provides robust procedures so you can focus on the results.
+              </p>
+              <div className="tw-mt-10 tw-flex tw-items-center tw-justify-center tw-gap-x-6">
+                <a
+                  href="#"
+                  className="tw-rounded-md tw-bg-lime-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-black tw-shadow-sm hover:tw-bg-lime-400 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-lime-400"
+                >
+                  Get started
+                </a>
+                <a href="#" className="tw-text-sm tw-font-semibold tw-leading-6 tw-text-white">
+                  Learn more <span aria-hidden="true">→</span>
+                </a>
+              </div>
+            </div>
+            <img
+              src="../public/render1717079674378.gif"
+              alt="App screenshot"
+              width={2432}
+              height={1442}
+              className="tw-mt-16 tw-rounded-md tw-bg-white/5 tw-shadow-w-2xl tw-ring-1 tw-ring-white/10 sm:tw-mt-24"
+            />
+          </div>
+        </div>
+        <div
+          className="tw-w-absolute tw-w-inset-x-0 tw-w-top-[calc(100%-13rem)] -tw-w-z-10 tw-w-transform-gpu tw-w-overflow-hidden tw-w-blur-3xl sm:tw-w-top-[calc(100%-30rem)]"
+          aria-hidden="true"
+        >
+          <div
+            className="tw-w-relative tw-w-left-[calc(50%+3rem)] tw-w-aspect-[1155/678] tw-w-[36.125rem] -tw-translate-x-1/2 tw-bg-gradient-to-tr tw-from-[#ff80b5] tw-to-[#9089fc] tw-opacity-20 sm:tw-w-left-[calc(50%+36rem)] sm:tw-w-[72.1875rem]"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+      </div>
+  );
+}

_components/LogoCloud.jsx

@@ -0,0 +1,76 @@
+function LogoCloud() {
+  return (
+    <div className="tw-py-24 sm:tw-py-32">
+      <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8">
+        <h2 className="tw-text-white/80 tw-text-center tw-w-full tw-font-bold tw-text-xl">
+          Partners
+        </h2>
+        <div className="-tw-mx-6 tw-grid tw-grid-cols-2 tw-gap-0.5 tw-overflow-hidden sm:tw-mx-0 sm:tw-rounded-2xl md:tw-grid-cols-4">
+          <div className="tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-12 tw-w-full tw-object-contain tw-invert"
+              src="../public/LogoDataDotOrg.png"
+              alt="Statamic"
+              width={158}
+              height={48}
+            />
+          </div>
+          <div className="tw-bg-white/5 tw-p-8 sm:tw-p-10">
+            <img
+              className="tw-max-h-12 tw-w-full tw-object-contain tw-invert"
+              src="https://data.org/wp-content/uploads/2021/10/lshtm-logo-975x468.png"
+              alt="Transistor"
+              width={158}
+              height={48}
+            />
+          </div>
+          <div className="tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-12 tw-w-full tw-object-contain tw-invert"
+              src="https://data.org/wp-content/uploads/2022/02/Universidad-de-los-Andes-975x377.png"
+              alt="Laravel"
+              width={158}
+              height={48}
+            />
+          </div>
+          <div className="tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-12 tw-w-full tw-object-contain tw-invert"
+              src="https://data.org/wp-content/uploads/2022/02/javeriana-logo-1-907x975.png"
+              alt="SavvyCal"
+              width={158}
+              height={48}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="tw-mx-auto tw-max-w-7xl tw-px-6 lg:tw-px-8 tw-pt-16">
+        <h2 className="tw-text-white/80 tw-text-center tw-w-full tw-font-bold tw-text-xl">
+          Funders
+        </h2>
+        <div className="-tw-mx-6 tw-grid tw-grid-cols-2 tw-gap-0.5 tw-overflow-hidden sm:tw-mx-0 sm:tw-rounded-2xl md:tw-grid-cols-2">
+          <div className="tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <img
+              className="tw-max-h-12 tw-w-full tw-object-contain tw-invert"
+              src="https://data.org/wp-content/uploads/2024/01/Wellcome_logo_Black-01.svg"
+              alt="Reform"
+              width={200}
+              height={61}
+            />
+          </div>
+          <div className="tw-bg-white/5 tw-p-6 sm:tw-p-10">
+            <a href="https://data.org/organizations/lshtm/">
+              <img
+                className="tw-max-h-12 tw-w-full tw-object-contain tw-invert"
+                src="https://data.org/wp-content/uploads/2022/08/RF_logo_screen_green-e1661182764242-975x365.png"
+                alt="Tuple"
+                width={158}
+                height={48}
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

_extensions/clearmatics/qreacto/README.md

@@ -0,0 +1,28 @@
+# qreacto.lua 
+This is the main script that runs when the shortcode is encountered.
+
+## Script overview
+
+It defines various helper functions, they are documented in the script.
+
+These functions handle the process of reading files, injecting scripts, ensuring dependencies, and more.
+
+The main entry point of the filter is executed when the filter encounters a react shortcode in the Markdown file.
+
+The react function first checks if the output format is HTML with JavaScript (html:js), which indicates that it should include React components in the document. If the format is not HTML with JavaScript, it returns pandoc.Null() to exclude the react shortcode from the output.
+
+If the output format is HTML with JavaScript, it proceeds with the following steps, It:
+
+1. Ensures the necessary React, ReactDOM, and Babel dependencies are included in the document.
+
+2. Scans the components folder for supporting files (JavaScript and CSS) and injects their content into the document using the raw_add_script function.
+
+3. Reads the content of the specified React component file and modifies it to handle local imports recursively using the `modify_with_imports` function.
+
+4. Generates a unique componentId to identify the div element where the React component will be rendered.
+
+5. Adds the React component to the document by using ReactDOM.render, injecting the component into the div element with the generated componentId.
+
+6. It creates a div element with the generated componentId to be included in the document as a placeholder for the React component.
+
+The modified content with the React components and supporting resources is then included in the final output.

_extensions/clearmatics/qreacto/_extension.yml

@@ -0,0 +1,7 @@
+title: Qreacto
+author: Jay Martin
+version: 0.0.6
+quarto-required: ">=1.2.280"
+contributes:
+  shortcodes:    
+    - qreacto.lua

_extensions/clearmatics/qreacto/babel-presets.js

@@ -0,0 +1,4 @@
+// Define a preset
+Babel.registerPreset("env-plus", {
+    presets: [[Babel.availablePresets["env"], { modules: false }]],  
+  });