Init (#1)

CU-DBMI · Dec 19, 2023 · 8013411 · 8013411
1 parent 106c039
commit 8013411
Show file tree

Hide file tree

Showing 13 changed files with 1,192 additions and 1 deletion.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,4 @@
+Submission/review checklist:
+
+- [] I have followed the submission guidelines in the `README.md`.
+- [] I have looked at the preview link to verify that my changes appear correctly.
diff --git a/.nojekyll b/.nojekyll
diff --git a/README.md b/README.md
@@ -1 +1,41 @@
-# software-registry
+# CU DBMI Wall of Software
+
+The [Department of Biomedical Informatics (DBMI) at the University of Colorado](https://medschool.cuanschutz.edu/dbmi) investigates complex problems in medicine and biology using integrated computational technology.
+This repository and website contains a non-comprehensive list of tools, packages, workflows, resources, and other software that have been developed by our diverse group researchers, scientists, developers, and collaborators in support of [our mission](https://medschool.cuanschutz.edu/dbmi/about-us).
+
+[⭐️⭐️ View the List ⭐️⭐️](https://CU-DBMI.github.io/wall-of-software)
+
+## Submit Your Software
+
+If you work for or with the department, you are eligible to submit your software here.
+To start, [open a pull request in this repo](https://github.com/CU-DBMI/wall-of-software/pulls) with the following changes:
+
+- Add an _entry_ to **the top** of `list.json`.
+  - A short ~3-20 char name.
+  - A short ~20-60 char description.
+  - A link to a website or repo.
+- Add a _web-friendly_ image to `/images`.
+  - Filename **must** be lowercase, kebab-case version of entry name, e.g. _Word Lapse_ → `word-lapse`.
+  - **Must** have extension `.jpg`.
+  - Roughly square.
+  - Enough margins for main content to fit nicely inside hexagon.
+  - Larger than ~400px × 400px , smaller than ~1000px × 1000px 
+  - Better than ~80% jpeg compression level, smaller than ~50 kB.
+
+Shortly after opening a PR, a link should appear to a preview of the site with your changes.
+
+Entries are shuffled randomly on each page visit to not give preferential treatment!
+
+### Printed
+
+If you'd also like your image to be printed out and posted on the wall of the DBMI office (6th floor Anschutz Health Sciences Building), **also** include these changes:
+
+- Add a _printable_ image to `/images`.
+  - Filename should be lowercase, kebab-case version of entry name.
+  - Should have extension `.png`.
+  - Enough margins for main content to fit nicely inside hexagon.
+  - Conforms to the [4" × 4" hexagon template here](https://www.stickermule.com/uses/hexagon-stickers).
+
+### Help
+
+If you need help submitting software, you may [contact the Software Engineering Team](https://cu-dbmi.github.io/set-website/about/) for help.
diff --git a/images/manubot.jpg b/images/manubot.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <!-- ---------- BASIC ---------- -->
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+    <!-- ---------- META ---------- -->
+
+    <title>Wall of Software | CU DBMI</title>
+    <meta name="title" content="Wall of Software | CU DBMI" />
+    <meta
+      name="description"
+      content="The many software produced by the CU Department of Biomedical Informatics."
+    />
+    <meta property="og:title" content="Wall of Software | CU DBMI" />
+    <meta property="og:type" content="website" />
+    <meta
+      property="og:description"
+      content="The many software produced by the CU Department of Biomedical Informatics."
+    />
+    <meta property="og:image" content="src/share.jpg" />
+
+    <!-- ---------- FAVICON ---------- -->
+
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://medschool.cuanschutz.edu/CU_favicon_96x96.png"
+      sizes="96x96"
+    />
+
+    <!-- ---------- FONTS ---------- -->
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- ---------- INCLUDES ---------- -->
+
+    <link rel="stylesheet" href="src/styles.css" />
+    <link rel="stylesheet" href="src/util.css" />
+    <link rel="stylesheet" href="src/header.css" />
+    <link rel="stylesheet" href="src/grid.css" />
+
+    <script src="https://unpkg.com/[email protected]" defer crossorigin></script>
+    <script type="importmap" defer crossorigin>
+      {
+        "imports": {
+          "three": "https://unpkg.com/[email protected]/build/three.module.js",
+          "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+        }
+      }
+    </script>
+    <script type="module" src="src/viz.js" defer></script>
+    <script src="src/alpine.js"></script>
+  </head>
+
+  <body>
+    <!-- ---------- HEADER ---------- -->
+
+    <header>
+      <canvas></canvas>
+
+      <h1>
+        <template x-data x-for="(word, wordIndex) in $store.store.title">
+          <span class="word">
+            <template x-for="{char, index} in word">
+              <span
+                x-text="char"
+                class="char"
+                :style="{ '--delay': index * 75 + 'ms' }"
+              />
+            </template>
+            <template x-if="wordIndex === 2">
+              <span class="cursor">_</span>
+            </template>
+          </span>
+        </template>
+      </h1>
+
+      <h2>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="18 18 217 208"
+          class="icon"
+        >
+          <path
+            d="m39.397 169.55h43.396v34.827l26.321 26.084h86.707l26.392-26.084v-95.493h17.065v-34.895h-52.341v121.62h-69.261v-26.06h26.211l26.008-26.051v-34.615h-34.887v25.863h-17.332v-60.758h-52.192v34.895h17.308v25.863h-34.683v-87.027h86.899v26.269h34.887v-34.754l-26.008-26.075h-104.49l-26.102 26.063v104.28l26.102 26.051"
+          />
+        </svg>
+        Department of Biomedical Informatics
+      </h2>
+    </header>
+
+    <main>
+      <section>
+        <!-- ---------- HERO ---------- -->
+
+        <div class="buttons">
+          <a href="https://github.com/CU-DBMI" target="_blank" class="button">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 496 512"
+              class="icon"
+            >
+              <path
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+              />
+            </svg>
+            GitHub
+          </a>
+          <a
+            href="https://github.com/CU-DBMI/wall-of-software"
+            target="_blank"
+            class="button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+              class="icon"
+            >
+              <path
+                d="M384 32c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H384zM160 144c-13.3 0-24 10.7-24 24s10.7 24 24 24h94.1L119 327c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135V328c0 13.3 10.7 24 24 24s24-10.7 24-24V168c0-13.3-10.7-24-24-24H160z"
+              />
+            </svg>
+            Submit
+          </a>
+        </div>
+
+        <noscript>
+          Sorry, this website doesn't work without JavaScript enabled.
+        </noscript>
+
+        <!-- ---------- SUMMARY ---------- -->
+
+        <p>
+          <b x-data x-text="$store.store.list.length">&ndash;</b> (and counting)
+          <i>tools, packages, workflows, resources, and other software</i>
+          developed at or in collaboration with the
+          <a href="https://medschool.cuanschutz.edu/dbmi" target="_blank"
+            >Department of Biomedical Informatics (DBMI) at the University of
+            Colorado</a
+          >.
+        </p>
+
+        <!-- ---------- LIST ---------- -->
+
+        <div x-data class="grid" :style="{ '--cols': $store.store.cols }">
+          <template x-for="(entry, index) in $store.store.list">
+            <div
+              :style="{
+                '--offset': Math.floor(index / $store.store.cols) % 2 ? -1 : 1, 
+                '--delay': (Math.random() + index / $store.store.cols / 4) + 's'
+              }"
+              class="cell"
+            >
+              <a
+                class="hex"
+                tabindex="0"
+                :href="entry.link"
+                target="_blank"
+                :data-tooltip="
+                  entry.description.length > 60
+                    ? entry.description.slice(0, 60 - 3) + '...'
+                    : entry.description
+                "
+              >
+                <!-- HEXAGON FILL SHAPE -->
+
+                <svg viewBox="-0.866 -1 1.732 2" class="shape">
+                  <path
+                    class="stroke"
+                    pathLength="1"
+                    d="
+                      M 0.866	-0.500
+                      L 0.000	-1.000
+                      L -0.866	-0.500
+                      L -0.866	0.500
+                      L 0.000	1.000
+                      L 0.866	0.500
+                      z
+                    "
+                  />
+                  <path
+                    class="fill"
+                    d="
+                      M 0.866	-0.500
+                      L 0.000	-1.000
+                      L -0.866	-0.500
+                      L -0.866	0.500
+                      L 0.000	1.000
+                      L 0.866	0.500
+                      z
+                    "
+                  />
+                </svg>
+
+                <!-- BACKGROUND IMAGE -->
+
+                <div class="image">
+                  <svg viewBox="-30 -22 60 40" class="img">
+                    <text
+                      x-html="entry.name.toUpperCase().split(/[^A-Z0-9]+/g).map(word => word.charAt(0)).join('')"
+                    ></text>
+                  </svg>
+                  <img
+                    class="img"
+                    :src="`images/${entry.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.jpg`"
+                    loading="lazy"
+                    onerror="this.remove();"
+                    alt=""
+                  />
+                </div>
+
+                <!-- TEXT CONTENT -->
+
+                <template x-if="entry.name">
+                  <div x-text="entry.name" class="text"></div>
+                </template>
+              </a>
+            </div>
+          </template>
+        </div>
+      </section>
+    </main>
+
+    <!-- ---------- FOOTER ---------- -->
+
+    <footer>
+      <a href="https://medschool.cuanschutz.edu/dbmi/research" target="_blank"
+        >Research</a
+      >
+      <a href="https://news.cuanschutz.edu/dbmi" target="_blank">News</a>
+      <a href="https://cu-dbmi.github.io/set-website/" target="_blank"
+        >Software Team</a
+      >
+    </footer>
+  </body>
+</html>
diff --git a/list.json b/list.json
@@ -0,0 +1,102 @@
+[
+  {
+    "name": "Manubot",
+    "description": "Manuscripts, open and automated",
+    "link": "https://manubot.org"
+  },
+  {
+    "name": "Dolor Sit Amit",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  },
+  {
+    "name": "Lorem Ipsum",
+    "description": "Lorem ipsum dolor sit amet",
+    "link": ""
+  }
+]