[l] Fixing markdown descriptions (#64)

Author: gavram

public/stylesheets/app.css

@@ -28,3 +28,6 @@
 
 /* code highlighting */
 @import "codehilite.css";
+
+/* oddk */
+@import "oddk";

src/css/app.css

@@ -0,0 +1,38 @@
+.markdown-content{
+  & h1 {
+  @apply text-3xl font-semibold text-gray-900;
+  }
+  & h2 {
+      @apply text-2xl font-semibold text-gray-900;
+  }
+
+  & h3 {
+      @apply text-xl font-semibold text-gray-900;
+  }
+
+  & h4 {
+      @apply text-lg font-semibold text-gray-900;
+  }
+  & p {
+    @apply text-lg mb-2;
+  }
+  & strong {
+    font-weight: 600;
+  }
+  & ol {
+    @apply mt-1 ml-5 list-decimal;
+  }
+  & ul{
+    @apply mt-1 ml-5 list-disc;
+  }
+  & code{
+      font-family: "Nunito Sans",sans-serif;
+      @apply font-semibold text-gray-900 text-base;
+  }
+  & a{
+      @apply underline text-gray-900;
+  }
+  & em{
+      font-style: italic;
+  }
+}

src/css/oddk.css

@@ -18,13 +18,15 @@
           {{ package.readmeHtml|safe }}
         </p>
         {% elif package.description %}
-        <p>
-          {% if package.description|length > 200 %}
-            {{ package.notes_translated[locale]|truncate(200) or package.description|truncate(200) }}
-          {% else %}
-            {{ package.notes_translated[locale] or package.description }}
-          {% endif %}
-        </p>
+          <div class="markdown-content leading-relaxed">
+            <p class="block">
+              {% if package.description|length > 200 %}
+                {{ package.notes_translated[locale]|truncate(200) | processMarkdown | safe or package.description|truncate(200) | processMarkdown | safe}}
+              {% else %}
+                {{ package.notes_translated[locale] | processMarkdown | safe or package.description | processMarkdown | safe }}
+              {% endif %}
+            </p>
+        </div>
         {% endif %}
       </div>
     </div>

views/partials/data-search-results.njk

@@ -38,7 +38,7 @@ <h1 class="text-4xl font-semibold mb-3">
         {% if dataset.readmeHtml %}
           <div class="leading-relaxed">{{ dataset.readmeHtml | safe }}</div>
           {% elif dataset.description %}
-          <div class="leading-relaxed whitespace-pre-wrap">{{ dataset.notes_translated[locale] or dataset.description | processMarkdown | safe }}</div>
+          <div class="markdown-content leading-relaxed">{{ dataset.notes_translated[locale] | processMarkdown | safe or dataset.description | processMarkdown | safe }}</div>
         {% endif %}
         <!-- end of full readme -->
 
@@ -79,9 +79,9 @@ <h3 class="text-xl font-semibold">
                         class="bg-gray-600 rounded text-sm text-gray-100 px-2 py-1">{{ resource.size }}</span>
                 {% endif %}
               </div>
-              <p class="mt-2">
+              <div class="markdown-content mt-2">
                 {{ resource.descriptionHtml | safe }}
-              </p>
+              </div>
               <nav aria-label="{{__('Download')}} {{__('or')}} {{__('Preview')}} {{resource.name}} {{ resource.format }}">
                 <a class="data-file-type mr-1" href="{{ resource.path }}" aria-label="{{__('Download')}} {{ resource.name }}.{{ resource.format }}">
                   <dl class="data-file-type_inner">