Work without JS

mwmbl/templates/index.html

@@ -8,34 +8,38 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <!-- Page title -->
-  <title>MWMBL - Search</title>
+    {% if query %}
+  <title>Mwmbl - {{ query }}</title>
+    {% else %}
+  <title>Mwmbl - Search</title>
+    {% endif %}
   <meta name="description" content="The free, open-source and non-profit search engine.">
 
   <!-- Favicons -->
-  <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="/static/images/favicon.svg" type="image/svg+xml">
 
   <!-- Fonts import -->
-  <link rel="preload" href="/fonts/inter/inter.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="/static/fonts/inter/inter.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript>
-    <link rel="stylesheet" href="/fonts/inter/inter.css">
+    <link rel="stylesheet" href="/static/fonts/inter/inter.css">
   </noscript>
 
   <!-- CSS Stylesheets (this is critical CSS) -->
-  <link rel="stylesheet" type="text/css" href="/css/reset.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
-  <link rel="stylesheet" type="text/css" href="/css/theme.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/theme.css">
-  <link rel="stylesheet" type="text/css" href="/css/global.css">
+  <link rel="stylesheet" type="text/css" href="/static/css/global.css">
 
   <!-- Phosphor Icons (https://github.com/phosphor-icons/phosphor-home) -->
-  <link rel="preload" href="/fonts/phosphor/icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="/static/fonts/phosphor/icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript>
-    <link rel="stylesheet" href="/fonts/phosphor/icons.css">
+    <link rel="stylesheet" href="/static/fonts/phosphor/icons.css">
   </noscript>
 
   <!-- Custom Element Polyfill for Safari -->
   <script src="https://unpkg.com/@ungap/custom-elements" type="module"></script>
 
   <!-- OpenSearch -->
-  <link rel="search" type="application/opensearchdescription+xml" href="../assets/opensearch.xml" title="MWMBL Search">
+  <link rel="search" type="application/opensearchdescription+xml" href="/static/assets/opensearch.xml" title="Mwmbl Search">
 
   <!-- POC temporary use of jQueryUI! -->
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@@ -47,30 +51,11 @@
 <!--  <mwmbl-login></mwmbl-login>-->
 <!--  <mwmbl-register></mwmbl-register>-->
   <mwmbl-app></mwmbl-app>
-  <noscript>
-    <!-- https://stackoverflow.com/a/431554 -->
-    <style> .jsonly { display: none } </style>
-    <main class="noscript">
-      <img class="brand-icon" src="/static/images/logo.svg" width="40" height="40" alt="mwmbl logo">
-      <h1>
-        Welcome to Mwmbl, the free, open-source and non-profit search engine.
-      </h1>
-      <p>This website requires you to support/enable scripts.</p>
-      <p>
-        More information on
-        <a href="https://github.com/mwmbl/mwmbl" target="__blank">
-          Github
-        </a>
-        .
-      </p>
-    </main>
-  </noscript>
 
   <!-- Javasript entrypoint -->
   <script src="https://unpkg.com/htmx.org@1.9.6"></script>
-  <script src="./index.js" type="module"></script>
+  <script src="../../front-end/src/index.js" type="module"></script>
 
-  <main class="jsonly">
     <header class="search-menu">
 <!--      <ul>
         <li is="${save}"></li>
@@ -84,7 +69,7 @@
         <i class="ph-magnifying-glass-bold"></i>
         <input
           type='search'
-          name='query'
+          name='q'
           class='search-bar-input'
           placeholder='Search on mwmbl...'
           title='Use "CTRL+K" or "/" to focus.'
@@ -98,13 +83,16 @@
     <main>
       <mwmbl-results>
         <ul class='results'>
-          <li is='${home}'></li>
+            {%  if results %}
+                {%  include "results.html" %}
+            {% else %}
+                <li is='${home}'></li>
+            {% endif %}
         </ul>
       </mwmbl-results>
     </main>
     <div is="mwmbl-add-result"></div>
     <footer is="mwmbl-footer"></footer>
-  </main>
 </body>
 
 </html>

mwmbl/urls.py

@@ -18,15 +18,16 @@ from django.contrib import admin
 from django.urls import path, include
 
 from mwmbl.api import api_original as api, api_v1
-from mwmbl.views import profile, search_results, fetch_url
+from mwmbl.views import profile, search_results, fetch_url, home
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('', api.urls),
+    # path('', api.urls),
     path('api/v1/', api_v1.urls),
     path('accounts/', include('allauth.urls')),
 
-    path('accounts/profile/', profile, name='profile'),
+    path('', home, name="home"),
+    path('accounts/profile/', profile, name="profile"),
     path('app/search/', search_results, name="search_results"),
     path('app/fetch/', fetch_url, name="fetch_url")
 ]

mwmbl/views.py

@@ -46,8 +46,14 @@ def profile(request):
     return render(request, 'profile.html')
 
 
+def home(request):
+    query = request.GET.get("q")
+    results = ranker.search(query) if query else None
+    return render(request, "index.html", {"results": results, "query": query})
+
+
 def search_results(request):
-    query = request.GET["query"]
+    query = request.GET["q"]
     results = ranker.search(query)
     response = render(request, "results.html", {"results": results, "query": query})
     current_url = request.htmx.current_url