Gist (#68)

- Add link to gist.
- Fix copy to clipboard line endings.

src/components/DrawerGists.tsx

@@ -5,7 +5,7 @@ import { DrawerBody, DrawerHeader, DrawerHeaderTitle, OverlayDrawer, Button } fr
 import { Dismiss24Regular, ArrowSyncRegular } from "@fluentui/react-icons";
 import { TooltipButton } from "./TooltipButton";
 import { saveSnip } from "../core/database";
-import { SampleListCard } from "./SampleListCard";
+import { GistListCard } from "./SampleListCard";
 import { SnipMetadata, SnipWithSource, completeSnip } from "../core/Snip";
 import { sourceSnipGitHub } from "../core/source/sourceSnipGitHubGists";
 
@@ -103,11 +103,12 @@ export function DrawerGists({
                 <DrawerBody>
                     <TooltipButton tip="Refresh Gists" icon={<ArrowSyncRegular />} onClick={reloadSamples} />
                     {samples.map(({ id, name }) => (
-                        <SampleListCard
+                        <GistListCard
                             key={id}
                             id={id}
                             title={name}
-                            description={""}
+                            description={id}
+                            link={`https://gist.github.com/${id}`}
                             onClick={() => {
                                 clickCard(id);
                             }}

src/components/SampleListCard.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Caption1, Text, makeStyles, tokens } from "@fluentui/react-components";
+import { Caption1, Link, Text, makeStyles, tokens } from "@fluentui/react-components";
 import { Card, CardHeader } from "@fluentui/react-components";
 
 const useStyles = makeStyles({
@@ -15,6 +15,7 @@ const useStyles = makeStyles({
 });
 
 export function SampleListCard({
+    id,
     title,
     description,
     onClick,
@@ -27,11 +28,42 @@ export function SampleListCard({
     const styles = useStyles();
 
     return (
-        <Card className={styles.card} orientation="vertical" onClick={onClick}>
+        <Card id={id} className={styles.card} orientation="vertical" onClick={onClick}>
             <CardHeader
                 header={<Text weight="semibold">{title}</Text>}
                 description={<Caption1 className={styles.caption}>{description}</Caption1>}
             />
         </Card>
     );
 }
+
+export function GistListCard({
+    id,
+    title,
+    description,
+    link,
+    onClick,
+}: {
+    id: string;
+    title: string;
+    description: string;
+    link: string;
+    onClick: () => void;
+}) {
+    const styles = useStyles();
+
+    return (
+        <Card id={id} className={styles.card} orientation="vertical" onClick={onClick}>
+            <CardHeader
+                header={<Text weight="semibold">{title}</Text>}
+                description={
+                    <Caption1 className={styles.caption}>
+                        <Link href={link} target="_blank">
+                            {description}
+                        </Link>
+                    </Caption1>
+                }
+            />
+        </Card>
+    );
+}

src/core/copyTextToClipboard.ts

@@ -15,7 +15,7 @@ export async function copyTextToClipboard(text: string) {
  */
 function copyTextToClipboardWithCommand(text: string) {
     log(LogTag.CopyToClipboard, "copyTextToClipboardWithCommand");
-    const element = document.createElement("input");
+    const element = document.createElement("textarea");
 
     // Hide temp element
     //element.hidden = true;

src/core/source/github/github.ts

@@ -84,3 +84,21 @@ export async function createGist(
 
     return (await response.json()) as GitHubGist;
 }
+
+/**
+ * For Fine Grained Permissions:
+ * Can use 'Profile' Read and Write.
+ * No current fine grain permissions for read-only access.
+ * https://docs.github.com/en/rest/authentication/permissions-required-for-fine-grained-personal-access-tokens?apiVersion=2022-11-28#user-permissions-for-profile
+ */
+export async function getUser(personalAccessToken: string) {
+    const url = "https://api.github.com/user";
+    const headers = getHeaders(personalAccessToken);
+
+    const response = await fetch(url, {
+        method: "POST",
+        headers,
+    });
+
+    return (await response.json()) as GitHubGist;
+}