#2 Open body in modal

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "jsdocParser": true
+}

src/App.svelte

@@ -5,13 +5,13 @@
   import Communication from "./lib/Communication.svelte";
   import Cli from './lib/Cli.svelte';
   import '@fortawesome/fontawesome-free/css/all.css';
-  import Search from './lib/Search.svelte';
+  import Search from './lib/Search/Search.svelte';
   import ThemeSwitcher from './lib/ThemeSwitcher.svelte';
   import { theme }from './lib/stores';
   import configStore from './lib/ThemeSwitcher.svelte';
-  
 
-  
+
+
 
   const views = [
     {
@@ -26,15 +26,15 @@
       label: "Messages",
       component: Communication,
     },
-    
+
 ];
 
 let selected = views[0];
 let responses = writable([]);
 function select(view) {
     selected = view;
   }
- 
+
 
 
 function onMessage(value) {
@@ -54,11 +54,11 @@ function clear() {
 <svelte:head>
     <meta name="color-scheme" content={$theme == 'spacelab' ? 'lumen darkly' :
     $theme} /> <link rel="stylesheet" href={`/src/assets/bulmaswatch/${$theme}/bulmaswatch.min.css`} />
-    
+
 </svelte:head>
 
 <main>
-  
+
 
 
   <ThemeSwitcher />
@@ -69,7 +69,7 @@ function clear() {
     {#if Array.isArray(configStore)}
       {#each configStore as item}
     <li>{item.name} {item.theme}</li>
-      
+
       {/each}
     {/if}
   </ul>

src/config.ts

@@ -0,0 +1,3 @@
+export const CONFIG = {
+  ServerURL: 'http://127.0.0.1:8000',
+};

src/lib/Search/ArticleModal.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Modal } from 'svelma';
+
+  import type { SearchResult } from './SearchResult';
+
+  export let active: boolean = false;
+  export let item: SearchResult;
+</script>
+
+<Modal bind:active>
+  <div class="box wrapper">
+    <article class="card-content content">
+      <h2>{item.title}</h2>
+      {@html item.body}
+    </article>
+  </div>
+</Modal>
+
+<style lang="scss">
+  h2 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 2rem;
+  }
+  .wrapper {
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+  }
+
+  /* Bulma hard-codes a modals width to 640px with no way to change it so we have to override it */
+  :global(.modal-content) {
+    width: min(100%, 95ch) !important;
+  }
+</style>

src/lib/Search/ResultItem.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { Tag, Taglist } from 'svelma';
+  import { fade } from 'svelte/transition';
+  import ArticleModal from './ArticleModal.svelte';
+  import type { SearchResult } from './SearchResult';
+
+  export let item: SearchResult;
+  let showModal = false;
+
+  const onTitleClick = () => {
+    showModal = true;
+  };
+</script>
+
+<div class="box">
+  <article class="media">
+    <div class="media-content">
+      <div class="content">
+        <div class="level-right">
+          <Taglist>
+            <Tag rounded>{item.pk}</Tag>
+            <Tag>Tag1</Tag>
+            <Tag type="is-info">Tag2</Tag>
+          </Taglist>
+        </div>
+        <div transition:fade>
+          <button on:click={onTitleClick}>
+            <h2 class="title">
+              {item.title}
+            </h2>
+          </button>
+          <small>Description</small>
+          <small />
+          <br />
+        </div>
+      </div>
+      <div class="level-right">
+        <nav class="level is-mobile" transition:fade>
+          <div class="level-right">
+            <a
+              href={item.url}
+              target="_blank"
+              class="level-item"
+              aria-label="URL"
+            >
+              <span class="icon is-medium">
+                <i class="fas fa-link" />
+              </span>
+            </a>
+            <a href="#" class="level-item" aria-label="download/save">
+              <span class="icon is-medium">
+                <i class="fas fa-download" aria-hidden="true" />
+              </span>
+            </a>
+            <a href="#" class="level-item" aria-label="like">
+              <span class="icon is-medium">
+                <i class="fas fa-plus" aria-hidden="true" />
+              </span>
+            </a>
+            <a href="#" class="level-item" aria-label="like">
+              <span class="icon is-medium">
+                <i class="fas fa-bookmark" aria-hidden="true" />
+              </span>
+            </a>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </article>
+</div>
+<ArticleModal bind:active={showModal} {item} />
+
+<style lang="scss">
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+    display: block;
+  }
+  .title {
+    font-size: 1.3em;
+    margin-bottom: 0px;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+</style>