display github issues in a table

notebook-renderer-sample/src/client/render.ts

@@ -7,9 +7,14 @@ import type { RendererContext } from 'vscode-notebook-renderer';
 interface IRenderInfo {
   container: HTMLElement;
   mime: string;
-  value: any;
+  value: GitHubIssuesValue[];
   context: RendererContext<unknown>;
 }
+interface GitHubIssuesValue {
+	title: string;
+	url: string;
+  body: string;
+}
 
 // This function is called to render your contents.
 export function render({ container, mime, value }: IRenderInfo) {
@@ -17,9 +22,39 @@ export function render({ container, mime, value }: IRenderInfo) {
   // Replace this with your custom code!
   const pre = document.createElement('pre');
   pre.classList.add(style.json);
-  const code = document.createElement('code');
-  code.textContent = `mime type: ${mime}\n\n${JSON.stringify(value, null, 2)}`;
-  pre.appendChild(code);
+
+  // Create a simple table with issue titles and links
+  const table = document.createElement('table');
+  table.className = 'issues-list';
+  const headerRow = document.createElement('tr');
+  const tableHeaders = ['Issue', 'Description'];
+
+  tableHeaders.forEach(label => {
+    const header = document.createElement('th');
+    header.textContent = label;
+    headerRow.appendChild(header);
+  });
+
+  table.appendChild(headerRow);
+
+  value.forEach(item => {
+    const row = document.createElement('tr');
+
+    const title = document.createElement('td');
+    const link = document.createElement('a');
+    link.href = item.url;
+    link.textContent = item.title;
+    title.appendChild(link);
+    row.appendChild(title);
+
+    const body = document.createElement('td');
+    body.textContent = item.body;
+    row.appendChild(body);
+
+    table.appendChild(row);
+  });
+
+  pre.appendChild(table);
   container.appendChild(pre);
 }
 

notebook-renderer-sample/src/client/style.css

@@ -1,5 +1,3 @@
-.json code {
-  font-family: monospace;
-  font-size: 12px;
-  color: lightblue;
+.issues-list {
+  width: 100px;
 }