Fix Linear icons & add support for integration to define Pages functions (GitbookIO#95)

* Add ability for integration to upload Pages functions

* Add Pages function to generate status svg icon

* Update integration code to use new icons and status icon function

* Remove unessary status assets

Author: spastorelli

.gitignore

@@ -1,7 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Cloudflare pages assets folder
-dist/
+# Cloudflare pages assets & functions folder
+/dist/
+/functions
 
 # dependencies
 node_modules

integrations/linear/public/functions/status/[type].ts

@@ -0,0 +1,45 @@
+const VALID_STATUS_TYPES = ['backlog', 'unstarted', 'started', 'completed', 'canceled'];
+
+export async function onRequestGet({ request, params, env }) {
+    const statusType = params.type;
+
+    if (!VALID_STATUS_TYPES.includes(statusType)) {
+        return new Response(`Invalid status type ${statusType}`, {
+            status: 400,
+        });
+    }
+
+    const origReqURL = new URL(request.url);
+    const query = origReqURL.searchParams;
+
+    const fillColor = query.get('fill');
+    const strokeColor = query.get('stroke');
+
+    const statusAssetURL = origReqURL;
+    statusAssetURL.search = '';
+    statusAssetURL.pathname = `/linear/status-${statusType}.svg`;
+
+    // Fetch the SVG corresponding to the status type
+    let statusAssetResponse: Response;
+    try {
+        statusAssetResponse = await env.ASSETS.fetch(statusAssetURL);
+    } catch (error) {
+        return new Response(`Error while fetching the status asset.`, {
+            status: 500,
+        });
+    }
+
+    return new HTMLRewriter()
+        .on('svg > path', {
+            element(element) {
+                if (fillColor) {
+                    element.setAttribute('fill', `#${fillColor}`);
+                }
+
+                if (strokeColor) {
+                    element.setAttribute('stroke', `#${strokeColor}`);
+                }
+            },
+        })
+        .transform(statusAssetResponse);
+}

integrations/linear/public/functions/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "CommonJS",
+        "lib": ["ES2020"],
+        "types": ["@cloudflare/workers-types"]
+    }
+}

integrations/linear/public/priority-high-dark.svg

@@ -33,16 +33,31 @@ function renderGenericCard(url: string, context: LinearRuntimeContext): ContentK
 }
 
 /**
- *
+ * Get the issue icons based on the issue details.
  */
-function getIssueIconsURLs(context: LinearRuntimeContext, status: string, priority: string) {
-    const statusIcon = `status-${status.toLowerCase().replaceAll(' ', '-')}.png`;
-    const priorityIcon = `priority-${priority.toLocaleLowerCase().replaceAll(' ', '-')}.png`;
+function getIssueIconsURLs(
+    context: LinearRuntimeContext,
+    issueQueryResponse: IssueQuery,
+    theme: string
+) {
+    const { issue } = issueQueryResponse;
+    const { state, priorityLabel: priority } = issue;
+
+    const assetsBaseURL = context.environment.integration.urls.assets;
+    const statusIconURL = new URL(`${assetsBaseURL}/status/${state.type}`);
+    statusIconURL.searchParams.set('fill', state.color.replace('#', ''));
+    statusIconURL.searchParams.set('theme', theme);
+
+    const priorityIcon = `priority-${priority
+        .toLocaleLowerCase()
+        .replaceAll(' ', '-')}-${theme}.svg`;
 
     return {
-        status: `${context.environment.integration.urls.assets}/${statusIcon}`,
-        priority: `${context.environment.integration.urls.assets}/${priorityIcon}`,
-        unassigned: `${context.environment.integration.urls.assets}/unassigned.png`,
+        status: statusIconURL.toString(),
+        priority: `${assetsBaseURL}/${priorityIcon}`,
+        assignee: issue.assignee
+            ? issue.assignee.avatarUrl
+            : `${assetsBaseURL}/unassigned-${theme}.svg`,
     };
 }
 
@@ -96,9 +111,9 @@ const embedBlock = createComponent<{
             return renderGenericCard(element.props.url, context);
         }
 
+        const icons = getIssueIconsURLs(context, response, element.context.theme);
+
         const { issue } = response;
-        const icons = getIssueIconsURLs(context, issue.state.name, issue.priorityLabel);
-        // TODO: add images with Linear icons once we've added build script to publish public assets to Cloudflare
         const hint = [
             <image source={{ url: icons.priority }} aspectRatio={1} />,
             <text>{issueId}</text>,
@@ -203,19 +218,17 @@ const previewModal = createComponent<{
             return renderGenericModal(element.props.url, context);
         }
 
+        const icons = getIssueIconsURLs(context, response, element.context.theme);
         const { issue } = response;
-        const icons = getIssueIconsURLs(context, issue.state.name, issue.priorityLabel);
+
         const subtitle = [
             <image source={{ url: icons.priority }} aspectRatio={1} />,
             <text>{issueId}</text>,
             <text>•</text>,
             <image source={{ url: icons.status }} aspectRatio={1} />,
             <text>{issue.state.name}</text>,
             <text>•</text>,
-            <image
-                source={{ url: issue.assignee ? issue.assignee.avatarUrl : icons.unassigned }}
-                aspectRatio={1}
-            />,
+            <image source={{ url: icons.assignee }} aspectRatio={1} />,
             <text>
                 {issue.assignee ? `Assigned to ${issue.assignee.displayName}` : 'Unassigned'}
             </text>,

integrations/linear/public/priority-high-light.svg

@@ -952,8 +952,10 @@ fragment Issue on Issue {
     }
     # The workflow state that the issue is associated with.
     state {
-        id
+        type
         name
+        color
+        position
     }
 }
 

integrations/linear/public/priority-high.png

@@ -1,3 +1,4 @@
 {
-    "extends": "@gitbook/tsconfig/integration.json"
+    "extends": "@gitbook/tsconfig/integration.json",
+    "exclude": ["public/functions/**/*"]
 }