show description on addon view

mlopezFC · Dec 16, 2021 · aecf8ab · aecf8ab
1 parent 22bdf5f
commit aecf8ab
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 11 deletions.
diff --git a/frontend/themes/directory/styles.css b/frontend/themes/directory/styles.css
@@ -4,3 +4,7 @@
 * {
   box-sizing: border-box;
 }
+
+pre {
+  padding: var(--lumo-space-m);
+}
diff --git a/frontend/views/addon/addon-view.ts b/frontend/views/addon/addon-view.ts
@@ -8,12 +8,34 @@ import { View } from '../view';
 import { getAddon } from 'Frontend/generated/AddonEndpoint';
 import { BeforeEnterObserver, RouterLocation } from '@vaadin/router';
 import Addon from 'Frontend/generated/org/vaadin/directory/endpoint/addon/Addon';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import DomPurify from 'dompurify';
+import { marked } from 'marked';
+import { highlight, languages } from 'prismjs';
+import 'prismjs/themes/prism.css';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-css';
 
 @customElement('addon-view')
 export class AddonView extends View implements BeforeEnterObserver {
   @state()
   private addon?: Addon;
 
+  constructor() {
+    super();
+    marked.setOptions({
+      highlight: (code, lang) => {
+        if (languages[lang]) {
+          return highlight(code, languages[lang], lang);
+        } else {
+          return code;
+        }
+      },
+    });
+  }
+
   render() {
     if (!this.addon) {
       return html`Loading...`;
@@ -24,6 +46,7 @@ export class AddonView extends View implements BeforeEnterObserver {
         <h1>${this.addon.name}</h1>
         <div>${this.addon.author}</div>
         <p>${this.addon.summary}</p>
+        ${unsafeHTML(DomPurify.sanitize(marked.parse(this.addon.description)))}
       </div>
     `;
   }

diff --git a/frontend/views/search/search-store.ts b/frontend/views/search/search-store.ts
@@ -32,9 +32,10 @@ class SearchStore {
     this.setLoading(true);
     this.setAddons(
       this.addons.concat(
-        await SearchEndpoint.search(this.query, this.page++, this.pageSize)
+        await SearchEndpoint.search(this.query, this.page, this.pageSize)
       )
     );
+    this.setPage(this.page + 1);
     this.setLoading(false);
   }
 
@@ -47,6 +48,10 @@ class SearchStore {
     this.addons = addons;
   }
 
+  setPage(page: number) {
+    this.page = page;
+  }
+
   setQuery(query: string) {
     this.query = query;
     this.page = 0;

diff --git a/package.json b/package.json
@@ -107,10 +107,16 @@
     "@vaadin/virtual-list": "22.0.1",
     "construct-style-sheets-polyfill": "3.0.4",
     "date-fns": "2.23.0",
+    "dompurify": "^2.3.4",
     "lit": "2.0.0",
-    "mobx": "^6.3.8"
+    "marked": "^4.0.7",
+    "mobx": "^6.3.8",
+    "prismjs": "^1.25.0"
   },
   "devDependencies": {
+    "@types/dompurify": "^2.3.2",
+    "@types/marked": "^4.0.1",
+    "@types/prismjs": "^1.16.6",
     "@vaadin/application-theme-plugin": "./target/plugins/application-theme-plugin",
     "@vaadin/build-status-plugin": "./target/plugins/build-status-plugin",
     "@vaadin/theme-live-reload-plugin": "./target/plugins/theme-live-reload-plugin",
@@ -243,6 +249,6 @@
       "workbox-core": "6.2.0",
       "workbox-precaching": "6.2.0"
     },
-    "hash": "df3a621afb73c55dff4e073a2586474168d7a1d0975e6c30473eb90447308241"
+    "hash": "8b6edd9f12731c5acbdcd3ad04ea586f58cc901e860ad419660bcd64d7e7846e"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
@@ -18,17 +18,12 @@
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
     "baseUrl": "frontend",
     "paths": {
-      "Frontend/*": [
-        "*"
-      ]
+      "Frontend/*": ["*"]
     }
   },
-  "include": [
-    "frontend/**/*.ts",
-    "frontend/index.js",
-    "types.d.ts"
-  ],
+  "include": ["frontend/**/*.ts", "frontend/index.js", "types.d.ts"],
   "exclude": []
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,7 @@ @@
     * {
       box-sizing: border-box;
     }
+    pre {
+      padding: var(--lumo-space-m);
+    }