Enable /search by hotlinking to hetmech-frontend

Merges #8

_includes/header.html

@@ -1,6 +1,6 @@
 <header data-deep>
-  <a href=".." class="logo_button">
-    <img src="../logo.svg" />
+  <a href="/" class="logo_button">
+    <img src="/logo.svg" />
   </a>
   {% include nav.html %}
 </header>

_includes/nav.html

@@ -1,38 +1,38 @@
 <nav>
   <a
-    href="{% if page.topLevel != true %}../{% endif %}about"
+    href="/about"
     class="nav_button"
     title="Learn more about the network"
     data-active="{% if page.category == 'about' %}true{% endif %}"
     >About{% if page.icons %}<i class="fas fa-book-open fa-sm" data-right></i>{%
     endif %}</a
   >
   <a
-    href="{% if page.topLevel != true %}../{% endif %}explore"
+    href="/explore"
     class="nav_button"
     title="View, search, and play with the network"
     data-active="{% if page.category == 'explore' %}true{% endif %}"
     >Explore{% if page.icons %}<i class="fas fa-search fa-sm" data-right></i>{%
     endif %}</a
   >
   <a
-    href="{% if page.topLevel != true %}../{% endif %}studies"
+    href="/studies"
     class="nav_button"
     title="Analyses and papers related to the network"
     data-active="{% if page.category == 'studies' %}true{% endif %}"
     >Studies{% if page.icons %}<i class="fas fa-microscope fa-sm" data-right></i
     >{% endif %}</a
   >
   <a
-    href="{% if page.topLevel != true %}../{% endif %}software"
+    href="/software"
     class="nav_button"
     title="Tools used to make the network"
     data-active="{% if page.category == 'software' %}true{% endif %}"
     >Software{% if page.icons %}<i class="fas fa-code fa-sm" data-right></i>{%
     endif %}</a
   >
   <a
-    href="{% if page.topLevel != true %}../{% endif %}media"
+    href="/media"
     class="nav_button"
     title="Publications, articles, and other related media"
     data-active="{% if page.category == 'media' %}true{% endif %}"

about/index.html

@@ -63,11 +63,11 @@ <h3>What is Hetionet?</h3>
     <h3>Why was Hetionet made?</h3>
     <p>
       Hetionet was originally created as part of
-      <a href="../rephetio">Project Rephetio</a>, a study that utilized the
+      <a href="/rephetio">Project Rephetio</a>, a study that utilized the
       benefits of hetnets to predict new uses for existing drugs. Although the
       original resources for the network were selected for drug repurposing,
       Hetionet is now useful in a much broader sense, and
-      <a href="../studies">has been used for a variety of purposes</a>.
+      <a href="/studies">has been used for a variety of purposes</a>.
     </p>
     <p>
       Hetionet was also made to alleviate some of the inaccuracies and

explore/index.html

@@ -14,14 +14,14 @@ <h3>Connectivity Search</h3>
           Connectivity search allows you to find the most important paths
           connecting any two nodes in Hetionet, even when they are different
           types or not known to be related. If you want to investigate how the
-          <a href="../search/?source=28127&target=6602&metapaths=AeGaD"
+          <a href="/search/?source=28127&target=6602&metapaths=AeGaD"
             >eye and breast cancer</a
           >
           may be related, you can. Filter nodes by type, see computed
           significance data about paths, create graph visualizations with
           highlighted paths, and more.
         </p>
-        <a href="https://search.het.io/" class="button"
+        <a href="/search" class="button"
           >Go to the connectivity search<i
             class="fas fa-search"
             data-right

index.html

@@ -4,7 +4,6 @@
 description: Hetionet is an integrative network of biomedical knowledge assembled from 29 different databases of genes, compounds, diseases, and more.
 keywords: heterogeneous, network, hetnet, graph, gene, compound, anatomy, disease, symptom, side effect, biological process, cellular component, molecular function, pathway, pharmacologic class
 icons: true
-topLevel: true
 ---
 
 <div class="section" id="logo">
@@ -15,9 +14,9 @@ <h1>HETIONET</h1>
   <div>
     <p>
       <b>Hetionet</b> is an integrative
-      <a href="about/#what-is-a-hetnet">network</a>
+      <a href="/about/#what-is-a-hetnet">network</a>
       of biomedical knowledge assembled from
-      <a href="about/#whats-in-hetionet">29 different databases</a> of genes,
+      <a href="/about/#whats-in-hetionet">29 different databases</a> of genes,
       compounds, diseases, and more. The network combines over 50 years of
       biomedical information into a single resource, consisting of
       <b>47,031 nodes</b> (11 types) and <b>2,250,197</b> relationships (24

search/index.html

@@ -8,3 +8,10 @@
 <section>
   <div id="root" class="section"></div>
 </section>
+
+<script src="https://greenelab.github.io/hetmech-frontend/static/js/main.js"></script>
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://greenelab.github.io/hetmech-frontend/static/css/main.css"
+/>

software/index.html

@@ -14,7 +14,7 @@ <h3><code>hetio</code></h3>
           <i>Hetio</i> is a Python 3 package for creating, querying, and
           operating on hetnets. This software provides convenient data
           structures for hetnets, as well as algorithms for
-          <a href="../hnep">edge prediction</a>. It is specifically tailored and
+          <a href="/hnep">edge prediction</a>. It is specifically tailored and
           streamlined for hetnets compared to other more generic network
           software.
         </p>

studies/index.html

@@ -15,12 +15,12 @@ <h3>Drug Repurposing (Project Rephetio)</h3>
           treats each of 136 diseases. Browse this study's 209,168 predictions
           and the evidence behind them to explore new uses for existing drugs.
         </p>
-        <a href="../repurpose" class="button"
+        <a href="/repurpose" class="button"
           >Go to the project page<i class="fas fa-arrow-right" data-right></i
         ></a>
       </div>
       <div class="col_image">
-        <img src="../repurpose/rephetio.svg" height="100px" />
+        <img src="/repurpose/rephetio.svg" height="100px" />
       </div>
     </div>
   </div>
@@ -32,17 +32,17 @@ <h3>Prioritizing Disease-Associated Genes</h3>
     <div class="row">
       <div class="col_text">
         <p>
-          Used <a href="../hnep">hetnet edge prediction</a> for
-          disease-associated genes, based on a predecessor network to Hetionet.
-          Browse this study's 55,4364 results to prioritize genome-wide
-          association studies by narrowing down the search.
+          Used <a href="/hnep">hetnet edge prediction</a> for disease-associated
+          genes, based on a predecessor network to Hetionet. Browse this study's
+          55,4364 results to prioritize genome-wide association studies by
+          narrowing down the search.
         </p>
-        <a href="../disease-genes" class="button"
+        <a href="/disease-genes" class="button"
           >Go to the project page<i class="fas fa-arrow-right" data-right></i
         ></a>
       </div>
       <div class="col_image">
-        <img src="../disease-genes/disease-genes.png" height="100px" />
+        <img src="/disease-genes/disease-genes.png" height="100px" />
       </div>
     </div>
   </div>