Add link to Github source

Update metadata
rafistrauss · May 19, 2021 · 8207277 · 8207277
1 parent c85fa30
commit 8207277
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsdoc-type-generator",
-  "version": "1.0.0-beta",
+  "version": "1.0.0-gamma",
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@fontsource/fira-mono": "^4.2.2",
     "@lukeed/uuid": "^2.0.0",
-    "cookie": "^0.4.1"
+    "cookie": "^0.4.1",
+    "simple-icons": "^4.24.0"
   }
 }
diff --git a/src/lib/Header/index.svelte b/src/lib/Header/index.svelte
@@ -1,5 +1,7 @@
 <script>
 	import logo from './svelte-logo.svg';
+	import github from 'simple-icons/icons/github.js';
+	import IconLink from '$lib/IconLink/index.svelte';
 </script>
 
 <header>
@@ -12,7 +14,7 @@
 
 
 	<div class="corner">
-		<!-- TODO put something else here? github link? -->
+		<IconLink link="https://github.com/rafistrauss/jsdoc-generator" svg={github.svg} label={"Link to source code on Github"} color="#388bfd" />
 	</div>
 </header>
 

diff --git a/src/lib/IconLink/index.svelte b/src/lib/IconLink/index.svelte
@@ -0,0 +1,23 @@
+<script>
+    export let svg;
+    export let link;
+    export let label = 'none';
+    export let color = 'orange';
+</script>
+
+<style>
+    
+    .iconLink {
+        width: 32px;
+        transition: fill 0.3s ease;
+        display: inline-flex;
+    }
+
+    .iconLink:hover {
+        fill: var(--hover-color);
+    }
+</style>
+
+<a href={link} target="_blank" class="iconLink" aria-label={label} style="--hover-color: {color}">
+    {@html svg}
+</a>
diff --git a/jsdoc-gen.jpg → src/lib/images/jsdoc-gen.jpg b/jsdoc-gen.jpg → src/lib/images/jsdoc-gen.jpg
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -3,7 +3,15 @@
 </script>
 
 <script>
+	import { version } from '../../package.json';
+	import ogImageUrl from '$lib/images/jsdoc-gen.jpg';
 	import { generateJSDocOrError } from '$lib/util';
+
+	const pageTitle = `JSDoc Type Generator v${version}`;
+	const pageUrl = 'https://rafistrauss.github.io/jsdoc-generator/';
+	const pageDescription =
+		'Automatically generate JSDoc Types from arbitrary JSON objects; infers the shape of JSON to generate JSDoc Types and lets you copy them easily';
+
 	let inputValue = `{
     "sampleString": "some string",
     "sampleNumber": 1,
@@ -18,37 +26,72 @@
 </script>
 
 <svelte:head>
-	<title>JSDoc Type Generator</title>
-	<meta name="description" content="Automatically generate JSDoc Types from arbitrary JSON objects; infers the shape of JSON to generate JSDoc Types and lets you copy them easily">
-	<meta name="author" content="Rafi Strauss">
-	<meta property="og:image" content="jsdoc-gen.jpg" />
+	<title>{pageTitle}</title>
+	<link rel="canonical" href={pageUrl} />
+	<meta name="description" content={pageDescription} />
+	<meta name="author" content="Rafi Strauss" />
+	<meta property="og:url" content={pageUrl} />
+	<meta property="og:title" content={pageTitle} />
+	<meta property="og:image" content={ogImageUrl} />
+	<meta property="og:image:secure_url" content={ogImageUrl} />
+	<meta property="og:image:type" content={'image/jpg'} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="627" />
+	<meta property="og:type" content="website" />
+
+	<meta name="twitter:image:src" content={ogImageUrl} />
+	<meta name="twitter:image" content={ogImageUrl} />
+	<meta name="twitter:title" content={pageTitle} />
+	<meta name="twitter:description" content={pageDescription} />
+	<meta name="twitter:card" content="summary_large_image" />
+
+	<meta name="thumbnail" content={ogImageUrl} />
+
+	<script type="application/ld+json">
+		{
+			"@context": "http://schema.org",
+			"@type": "WebApplication",
+			"name": "JSDoc Type Generator",
+			"url": "https://rafistrauss.github.io/jsdoc-generator/",
+			"description": "Automatically generate JSDoc Types from arbitrary JSON objects; infers the shape of JSON to generate JSDoc Types and lets you copy them easily",
+			"applicationCategory": "UtilitiesApplication",
+			"genre": "software",
+			"about": {
+				"@type": "Thing",
+				"description": "jsdoc"
+			},
+			"browserRequirements": "Requires JavaScript. Requires HTML5.",
+			"softwareVersion": "1.0.0",
+			"operatingSystem": "All"
+		}
+	</script>
 </svelte:head>
 
-<h1 class="welcome">
-		JSDoc Type Generator
-</h1>
+<h1 class="welcome">JSDoc Type Generator</h1>
 <h2 style="font-size: larger; text-align: center;">
 	This tool will generate JSDoc types for valid JSON inserted into the textarea.
 </h2>
 <section>
-
 	<label for="jsonInput">Enter/Paste JSON here:</label>
 	<textarea bind:value={inputValue} name="jsonInput" id="jsonInput" cols="50" rows="10" />
 	{#if jsdoc === -1}
 		<p>Invalid JSON input</p>
 	{:else if jsdoc === null}
-
-	<!-- else content here -->
+		<!-- else content here -->
 	{:else}
 		<div style="position: relative; margin-top: 1em;">
-			<button on:click={async () => {
-
-				await navigator.clipboard.writeText(jsdoc);
-				copyText = 'Copied';
-				setTimeout(() => {
-					copyText = 'Copy';
-				}, 1500)
-			}} style="position: absolute; right: 0; top: 0">{copyText}</button>
+			<button
+				on:click={async () => {
+					await navigator.clipboard.writeText(jsdoc);
+					copyText = 'Copied';
+					setTimeout(() => {
+						copyText = 'Copy';
+					}, 1500);
+				}}
+				style="position: absolute; right: 0; top: 0"
+			>
+				{copyText}
+			</button>
 			<pre style="margin: 0;;">
 				<code>
 					{jsdoc}
@@ -76,5 +119,4 @@
 		width: 100%;
 		margin-top: 0;
 	}
-
 </style>