Use the README file for page directions

Add marked dependency for parcel so that it can do that for us

package-lock.json

@@ -20,6 +20,7 @@
         "cross-env": "^7.0.2",
         "jest": "^26.5.3",
         "lodash": "^4.17.20",
+        "marked": "^1.2.5",
         "node-forge": ">=0.10.0",
         "node-sass": "^4.14.1",
         "npm-run-all": "^4.1.5",
@@ -12175,6 +12176,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/marked": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz",
+      "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked"
+      },
+      "engines": {
+        "node": ">= 8.16.2"
+      }
+    },
     "node_modules/marky": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.1.tgz",
@@ -30807,6 +30820,12 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-1.2.5.tgz",
+      "integrity": "sha512-2AlqgYnVPOc9WDyWu7S5DJaEZsfk6dNh/neatQ3IHUW4QLutM/VPSH9lG7bif+XjFWc9K9XR3QvR+fXuECmfdA==",
+      "dev": true
+    },
     "marky": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.1.tgz",

package.json

@@ -17,7 +17,6 @@
     ">1%",
     "not ie > 0"
   ],
-  "dependencies": {},
   "devDependencies": {
     "@babel/preset-typescript": "^7.10.4",
     "@types/chrome": "0.0.124",
@@ -30,6 +29,7 @@
     "cross-env": "^7.0.2",
     "jest": "^26.5.3",
     "lodash": "^4.17.20",
+    "marked": "^1.2.5",
     "node-forge": ">=0.10.0",
     "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",

src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+    var _: string;
+    export default _;
+}

src/tools/README.md

@@ -0,0 +1,6 @@
+# Getting your subscription data
+
+1. Go to https://takeout.google.com/settings/takeout
+2. Deselect everything except `YouTube and YouTube Music` and within that only select `subscriptions`
+3. Go through the process and create the export
+4. Once it's exported, open the archive and find `YouTube and YouTube Music/subscriptions/subscriptions.json` and upload it to the extension

src/tools/YTtoLBRY.tsx

@@ -4,6 +4,8 @@ import { useState } from 'preact/hooks';
 import { getSettingsAsync, redirectDomains } from '../common/settings';
 import { getFileContent, ytService } from '../common/yt';
 
+import readme from './README.md';
+
 /**
  * Parses the subscription file and queries the API for lbry channels
  *
@@ -52,6 +54,7 @@ function YTtoLBRY() {
     <div className='ConversionHelp'>
       <iframe width='712px' height='400px' allowFullScreen
         src='https://lbry.tv/$/embed/howtouseconverter/c9827448d6ac7a74ecdb972c5cdf9ddaf648a28e' />
+      <section dangerouslySetInnerHTML={{ __html: readme }} />
     </div>
   </div>
 }