From 2c9f9038f3e41619f84558fbbb20a8515a91460d Mon Sep 17 00:00:00 2001
From: jebus <lorsbach@envipath.com>
Date: Wed, 23 Jul 2025 20:59:36 +1200
Subject: [PATCH] Added Community Snippet (#35)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: https://git.envipath.com/enviPath/enviPy/pulls/35
---
 templates/framework.html   |   2 +-
 templates/index/index.html | 110 ++++++++++++++++++++-----------------
 2 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/templates/framework.html b/templates/framework.html
index 880c3a54..0f83ef1b 100644
--- a/templates/framework.html
+++ b/templates/framework.html
@@ -13,6 +13,7 @@
     <link rel="stylesheet"
           href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
+    <script src="https://community.envipath.org/javascripts/embed-topics.js"></script>
     <!-- CDN END -->
     <meta name="csrf-token" content="{{ csrf_token }}">
     <script>
@@ -218,7 +219,6 @@
         </div>
     </div>
 </div>
-
 <div class="row">
     <div class="col-lg-12">
         <ul class="nav nav-pills nav-justified">
diff --git a/templates/index/index.html b/templates/index/index.html
index b60aa690..8a9075d6 100644
--- a/templates/index/index.html
+++ b/templates/index/index.html
@@ -1,7 +1,6 @@
 {% extends "framework.html" %}
 {% load static %}
 {% block content %}
-
     <!-- TODO rename ids as well as remove pathways if modal is closed!-->
     <div class="modal fade" tabindex="-1" id="foundMatching" role="dialog" aria-labelledby="foundModal"
          aria-hidden="true">
@@ -31,57 +30,68 @@
             </div>
         </div>
     </div>
-    <div class="jumbotron">
-        <h1>
-            <img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
-                 src='{% static "/images/logo-long.svg" %}'/>
-        </h1>
-        <p>enviPath is a database and prediction system for the microbial
-            biotransformation of organic environmental contaminants. The
-            database provides the possibility to store and view experimentally
-            observed biotransformation pathways. The pathway prediction system
-            provides different relative reasoning models to predict likely biotransformation
-            pathways and products. You can try it out below.
-        </p>
-        <p>
-            <a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
-               href="https://wiki.envipath.org/index.php/Main_Page">Learn more &gt;&gt;</a>
-        </p>
+    <div class="row">
+        <div class="col-xs-8">
+            <div class="jumbotron">
+                <h1>
+                    <img id="image-logo-long" class="img-responsive" alt="enviPath" width="1000ex"
+                         src='{% static "/images/logo-long.svg" %}'/>
+                </h1>
+                <p>enviPath is a database and prediction system for the microbial
+                    biotransformation of organic environmental contaminants. The
+                    database provides the possibility to store and view experimentally
+                    observed biotransformation pathways. The pathway prediction system
+                    provides different relative reasoning models to predict likely biotransformation
+                    pathways and products. You can try it out below.
+                </p>
+                <p>
+                    <a class="btn" style="background-color:#222222;color:#9d9d9d" role="button" target="_blank"
+                       href="https://wiki.envipath.org/index.php/Main_Page">Learn more &gt;&gt;</a>
+                </p>
+            </div>
+
+        </div>
+        <div id="loading"></div>
+        <div class="col-xs-4">
+            <d-topics-list discourse-url="https://community.envipath.org" per-page="10" category="10"
+                           template="complete"></d-topics-list>
+        </div>
+    </div>
+    <div class="row">
+        <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
+            {% csrf_token %}
+            <div class="input-group" id="index-form-bar">
+                <div class="input-group-btn">
+                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                            aria-expanded="false">
+                        <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu" role="menu">
+                        <li>
+                            <iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
+                                    height="510"></iframe>
+                        </li>
+                    </ul>
+                </div>
+                <input type="text" class="form-control" id='index-form-text-input'
+                       placeholder="Enter a SMILES to predict a Pathway or type something to search">
+                <div class="input-group-btn">
+                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
+                            aria-haspopup="true"
+                            aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
+                    <ul class="dropdown-menu">
+                        <li><a id="dropdown-predict">Predict</a></li>
+                        <li><a id="dropdown-search">Search</a></li>
+                    </ul>
+                    <button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
+                    </button>
+                </div>
+            </div>
+            <input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
+            <input type="hidden" id="index-form-predict" name="predict" value="predict">
+        </form>
     </div>
     <p></p>
-    <form id="index-form" action="{{ meta.current_package.url }}/pathway" method="POST">
-        {% csrf_token %}
-        <div class="input-group" id="index-form-bar">
-            <div class="input-group-btn">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-                        aria-expanded="false">
-                    <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu" role="menu">
-                    <li>
-                        <iframe id="index-form-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
-                                height="510"></iframe>
-                    </li>
-                </ul>
-            </div>
-            <input type="text" class="form-control" id='index-form-text-input'
-                   placeholder="Enter a SMILES to predict a Pathway or type something to search">
-            <div class="input-group-btn">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-                        aria-haspopup="true"
-                        aria-expanded="false" id="action-button">Predict <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                    <li><a id="dropdown-predict">Predict</a></li>
-                    <li><a id="dropdown-search">Search</a></li>
-                </ul>
-                <button class="btn" style="background-color:#222222;color:#9d9d9d" type="button" id="run-button">Go!
-                </button>
-            </div>
-        </div>
-        <input type="hidden" id="index-form-smiles" name="smiles" value="smiles">
-        <input type="hidden" id="index-form-predict" name="predict" value="predict">
-    </form>
-    <div id="loading"></div>
     <script language="javascript">
         var currentPackage = "{{ meta.current_package.url }}";