Restructure html so that we show each language in a separate detail

The code that we show is only related to code snippet that is relevant
so that we reduce the amount of noise that is presented to the user.

core/templates/_add_sources.html

@@ -1,7 +1,11 @@
 {% load pygmentize %}
-{% for file in files %}
+{% for filetype, filenames in files.items %}
     <details>
-            <summary>{{file.name}}</summary>
-    {{file.src|pygmentize:file.type}}
+      <summary>{{ filetype }}</summary>
+      {% for file in filenames %}
+        <br>
+        {{ file.filename }}  (LOC {{ file.loc }})
+        {{ file.src|pygmentize:file.pygment_type }}
+      {% endfor %}
     </details>
 {% endfor %}

core/templates/_book_search_demo.html

@@ -0,0 +1,40 @@
+{% load humanize %}
+<form data-controller="book-search" data-reflex-root="#morph">
+  <input type="text" placeholder="search for a book ..." data-target="book-search.query"
+    data-action="debounced:input->book-search#perform" />
+  <div id="morph">
+    <div>
+
+      <span data-target="book-search.activity" class="" hidden>
+        <i class="fas fa-spinner fa-spin"></i>
+        Searching for books...
+      </span>
+      <span data-target="book-search.count" class="">
+        <strong>{{count|default:0|intcomma}}</strong> books found
+      </span>
+    </div>
+
+    <table data-target="book-search.list" {% if  not books %} hidden {% endif %}>
+      <thead>
+        <tr>
+          <th scope="col">Subject</th>
+          <th scope="col">Title</th>
+          <th scope="col">Author</th>
+          <th scope="col">Publish Date</th>
+          <th scope="col">ISBN</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for book in books|slice:'0:5'  %}
+        <tr>
+          <td>{{book.subject|join:', '|truncatechars:10}} </td>
+          <td>{{book.title|truncatechars:30}}</td>
+          <td>{{book.author_name|join:', '|truncatechars:30}}</td>
+          <td>{{book.publish_year.0 }}</td>
+          <td>{{book.isbn.0|truncatechars:5}}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</form>

core/templates/_example_demo.html

@@ -0,0 +1,10 @@
+<section>
+  <a
+    href="#"
+    data-controller="example"
+    data-action="click->example#increment"
+    data-count="{{ count }}"
+  >
+    Increment {{ count }}
+  </a>
+</section>

core/templates/demo.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+{% load humanize %}
+{% block subtitle %}{{ subtitle }}{% endblock subtitle %}
+{% block main %}
+<div>
+  {% include demo_template %}
+  {% include "_add_sources.html" %}
+</div>
+{% endblock  %}

core/views/book_search.py

@@ -3,12 +3,13 @@
 
 
 class BookSearch(MixinBase, TemplateView):
-    template_name="book_search.html"
+    demo_template = "_book_search_demo.html"
+    subtitle = 'Search Book'
     files = (
-        ('core/reflexes/book_search_reflex.py', 'python3'),
-        ('core/views/book_search.py', 'python3'),
-        ('core/javascript/controllers/book_search_controller.js', 'typescript'),
-        ('core/templates/book_search.html', 'htmldjango'),
+        ('core/reflexes/book_search_reflex.py', 'python', 'python3'),
+        ('core/views/book_search.py', 'python', 'python3'),
+        ('core/javascript/controllers/book_search_controller.js', 'javascript', 'javascript'),
+        ('core/templates/_book_search_demo.html', 'html', 'htmldjango'),
     )
 
 book_search = BookSearch.as_view()

core/views/example.py

@@ -2,13 +2,13 @@
 from .mixins import MixinBase
 
 class ExampleView(MixinBase, TemplateView):
-
-    template_name = 'example.html'
+    demo_template = '_example_demo.html'
+    subtitle = 'Increment'
     files = (
-        ('core/views/example.py', 'python3'),
-        ('core/reflexes/example_reflex.py', 'python3'),
-        ('core/javascript/controllers/example_controller.js', 'typescript'),
-        ('core/templates/example.html', 'htmldjango'),
+        ('core/views/example.py', 'python', 'python3'),
+        ('core/reflexes/example_reflex.py', 'python', 'python3'),
+        ('core/javascript/controllers/example_controller.js', 'javascript', 'javascript'),
+        ('core/templates/_example_demo.html', 'html', 'htmldjango'),
     )
 
     def get_context_data(self, *args, **kwargs):

core/views/mixins.py

@@ -1,16 +1,32 @@
+from collections import defaultdict
 from django.conf import settings
 import os
 
 BASE_PATH = settings.BASE_DIR
 
 
 class MixinBase:
+    template_name="demo.html"
+    demo_template = None
+    subtitle = None
+
     def get_files(self):
+        files = defaultdict(list)
         path_ = lambda x: open(os.path.join(BASE_PATH, x)).read()
-        return [dict(src=path_(i[0]), type=i[1], name=i[0]) for i in self.files]
+        for filename, filetype, pygment_type  in self.files:
+            filesrc = path_(filename)
+            files[filetype].append({
+                'src': filesrc,
+                'pygment_type': pygment_type,
+                'filename': filename,
+                'loc': len(filesrc.split('\n'))
+            })
+        return dict(files)
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['files'] = self.get_files()
+        context['demo_template'] = self.demo_template
+        context['subtitle'] = self.subtitle
         return context