Address #70, add template variable pocket-url (#89)

* Address #70, add template variable pocket-url * Add links next to title
nybbles · Apr 1, 2022 · 423ad7b · 423ad7b
1 parent 621d5a8
commit 423ad7b
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,7 @@ following variables are supported:
 | `{{excerpt}}`      | The excerpt extracted by Pocket for the Pocket item     |
 | `{{tags-no-hash}}` | The Pocket tags for the Pocket item                     |
 | `{{tags}}`         | The Pocket tags for the Pocket item, with "#" prepended |
+| `{{pocket-url}}`   | The URL to open the Pocket item in Pocket               |
 
 Here's an example template that will put this metadata into the [YAML
 frontmatter](https://help.obsidian.md/Advanced+topics/YAML+front+matter) of the

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "obsidian-pocket",
   "name": "Pocket",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "minAppVersion": "0.12.11",
   "description": "Access your Pocket reading list entries and create notes for them easily",
   "author": "Nimalan Mahendran",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "obsidian-pocket-plugin",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "This is a plugin for Obsidian (https://obsidian.md) that allows for easy access to your Pocket (https://getpocket.com) list.",
   "main": "main.js",
   "scripts": {

diff --git a/src/ItemNote.ts b/src/ItemNote.ts
@@ -22,7 +22,7 @@ import {
   MultiWordTagConversion,
   TagNormalizationFn,
 } from "./Tags";
-import { ensureFolderExists } from "./utils";
+import { ensureFolderExists, getPocketItemPocketURL } from "./utils";
 
 const getItemNotesFolder = (settingsManager: SettingsManager) =>
   settingsManager.getSetting("item-notes-folder") ?? "/";
@@ -204,6 +204,7 @@ const generateInitialItemNoteContents = (
     ["excerpt", (item) => item.excerpt ?? "Empty excerpt"],
     ["tags", (item) => hashtagSubstitutor(true)(item.tags)],
     ["tags-no-hash", (item) => hashtagSubstitutor(false)(item.tags)],
+    ["pocket-url", (item) => getPocketItemPocketURL(item)],
   ]);
 
   return Array.from(substitutions.entries()).reduce((acc, currentValue) => {

diff --git a/src/Utils.ts b/src/Utils.ts
@@ -1,4 +1,5 @@
 import { Platform, Vault } from "obsidian";
+import { PocketItem } from "./pocket_api/PocketAPITypes";
 import { SupportedDesktopPlatform, SupportedPlatform } from "./Types";
 
 export const openBrowserWindow = (url: string) => window.location.assign(url);
@@ -41,3 +42,7 @@ export const getPlatform = (): SupportedPlatform =>
     : Platform.isIosApp
     ? "ios"
     : "android";
+
+export const getPocketItemPocketURL = (item: PocketItem): string => {
+  return `https://getpocket.com/read/${item.item_id}`;
+};
diff --git a/src/ui/components/PocketItem.tsx b/src/ui/components/PocketItem.tsx
@@ -1,5 +1,4 @@
 import { stylesheet } from "astroturf";
-import log from "loglevel";
 import { Platform } from "obsidian";
 import React, { MouseEvent, useEffect, useState } from "react";
 import { URLToPocketItemNoteIndex } from "src/data/URLToPocketItemNoteIndex";
@@ -10,7 +9,11 @@ import {
 } from "src/ItemNote";
 import { OpenSearchForTagFn, TagNormalizationFn } from "src/Tags";
 import { PocketItemTagList } from "src/ui/components/PocketItemTagList";
-import { getPlatform, openBrowserWindow } from "src/utils";
+import {
+  getPlatform,
+  getPocketItemPocketURL,
+  openBrowserWindow,
+} from "src/utils";
 import {
   PocketTag,
   pocketTagsToPocketTagList,
@@ -25,14 +28,29 @@ const styles = stylesheet`
 
     padding: 4px 8px;
   }
+
   .item > span {
     display: block;
   }
 
-  .itemTitle {
-    font-weight: 600;
+  .header {
     flex-grow: 1;
+    display: flex;
+    justify-content: flex-start;
     width: 100%;
+
+    /* emulating the not-well-supported behavior of flexbox gap */
+    --gap: 8px;
+    margin: 0 calc(-1 * var(--gap)) 0 0;
+    width: calc(100% + var(--gap));
+  }
+
+  .header > * {
+    margin: 0 var(--gap) 0 0;
+  }
+
+  .itemTitle {
+    font-weight: 600;
   }
 
   .itemExcerpt {
@@ -42,6 +60,10 @@ const styles = stylesheet`
     width: 100%;
     color: var(--text-normal);
   }
+
+  .externalLink {
+    display: inline-block;
+  }
 `;
 
 type NoteLinkProps = {
@@ -61,6 +83,21 @@ const PocketItemNoteLink = ({ title, noteExists, onClick }: NoteLinkProps) => {
   );
 };
 
+type ExternalLinkProps = {
+  title: string;
+  url: string;
+};
+
+const PocketItemExternalLink = ({ title, url }: ExternalLinkProps) => {
+  return (
+    <div className={styles.externalLink}>
+      <a onClick={() => openBrowserWindow(url)} href={url}>
+        {title}
+      </a>
+    </div>
+  );
+};
+
 export type PocketItemProps = {
   item: SavedPocketItem;
   itemNoteExistsInitial: boolean;
@@ -108,7 +145,7 @@ export const PocketItem = ({
 
   const title = linkpathForSavedPocketItem(item);
 
-  const navigateToPocketURL = () => {
+  const navigateToItemURL = () => {
     openBrowserWindow(item.resolved_url);
   };
 
@@ -137,25 +174,34 @@ export const PocketItem = ({
 
   return (
     <div className={styles.item}>
-      <span className={styles.itemTitle}>
-        <PocketItemNoteLink
-          title={title}
-          noteExists={itemNoteExists}
-          onClick={async (event) => {
-            const clickAction = getPocketItemClickAction(event);
-            switch (clickAction) {
-              case PocketItemClickAction.NavigateToPocketURL:
-                navigateToPocketURL();
-                break;
-              case PocketItemClickAction.CreateOrOpenItemNote:
-                await createOrOpenItemNote(item);
-                break;
-              case PocketItemClickAction.Noop:
-                break;
-              default:
-                throw new Error(`Unknown PocketItemClickAction ${clickAction}`);
-            }
-          }}
+      <span className={styles.header}>
+        <span className={styles.itemTitle}>
+          <PocketItemNoteLink
+            title={title}
+            noteExists={itemNoteExists}
+            onClick={async (event) => {
+              const clickAction = getPocketItemClickAction(event);
+              switch (clickAction) {
+                case PocketItemClickAction.NavigateToPocketURL:
+                  navigateToItemURL();
+                  break;
+                case PocketItemClickAction.CreateOrOpenItemNote:
+                  await createOrOpenItemNote(item);
+                  break;
+                case PocketItemClickAction.Noop:
+                  break;
+                default:
+                  throw new Error(
+                    `Unknown PocketItemClickAction ${clickAction}`
+                  );
+              }
+            }}
+          />
+        </span>
+        <PocketItemExternalLink title="Open" url={item.resolved_url} />
+        <PocketItemExternalLink
+          title="Open in Pocket"
+          url={getPocketItemPocketURL(item)}
         />
       </span>
       {item.excerpt && (

diff --git a/versions.json b/versions.json
@@ -1,4 +1,5 @@
 {
   "0.2.0": "0.9.12",
-  "0.6.1": "0.12.11"
+  "0.6.1": "0.12.11",
+  "0.7.1": "0.12.11"
 }