chore: cleanup, Docs update and few other minor fixes

theevilhead · theevilhead · commit dd2c82a18291 · 2021-02-23T16:23:42.000+05:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,8 +2,4 @@
   "eslint.format.enable": true,
   "eslint.debug": true,
   "eslint.packageManager": "yarn",
-  "cSpell.words": [
-    "Giphy",
-    "fastimage"
-  ]
 }
diff --git a/README.md b/README.md
@@ -1,17 +1,34 @@
 # Webembeds (⚠️ Not to be used in production yet)
 Built and supported by [Hashnode](https://hashnode.com)
 
-- Checkout demo here https://webembeds.com
+- Checkout demo here https://webembeds.com/demo
 
-This project started to replace Hashnode's embedding logic and rely on something more flexible.
+This project is in its very infant stage. There is high scope of improvement here and we have some plans for improvements and stability. We would appreciate any kind of contribution to this project.
 
-## Current status
+## Development
+- Run `yarn` within the repo
+- Run `core:watch` to start the website in development mode
+- Run `website:dev` to start the website in development mode (Make sure to rerun when you change @webembeds/core files)
+
+## Host it anywhere  
+- Clone the repo  
+- Run `yarn` within the repo
+- `yarn build-all && yarn website:start`
+- Visit http://localhost:3000
 
 ## Contributing
 - We will be working mainly on `development` branch and the `master` branch remains untouched.
 - Create feature branches checked out from `development` branch and raise PR against `development` once done.
 - Continuous deployment is setup for `development` branch to be deployed to https://staging.webembeds.com and the master branch to https://webembeds.com
 
+Clone the repo and run  
+
+`yarn` and checkout package.json for all available scripts.  
+
+## Bugs, Future plans and Improvements
+
+Please visit [issue section](https://github.com/Hashnode/webembeds/issues) of this repo.
+
 ### Commit style
-We follow conventional commits specs (https://www.conventionalcommits.org/en/v1.0.0/) and suggest you to install https://github.com/commitizen/cz-cli.  
-Once done you can run `git cz` to commit your changes.
+We follow conventional commits specs (https://www.conventionalcommits.org/en/v1.0.0/).   
+Once done you can run `git cz` or `yarn commit` to commit your changes.
diff --git a/packages/webembeds-core/README.md b/packages/webembeds-core/README.md
@@ -14,7 +14,6 @@ The build file can be imported elsewhere and used directly
 const webembed = require("../build/bundle");
 (async function () {
   try {
-    const url = links.expo;
     const output = await webembed.default("https://www.youtube.com/watch?v=32I0Qso4sDg");
     console.log("Embed output", output);
   } catch (error) {
@@ -29,6 +28,5 @@ const webembed = require("../build/bundle");
 ## Future plans
 [-] Ship `@webembeds/core` as a separate npm package.
 
-
 ## Contributing
 Please check this README.md on instructions to contributing. https://github.com/Hashnode/webembeds/blob/master/README.md
diff --git a/packages/webembeds-website/README.md b/packages/webembeds-website/README.md
@@ -1,7 +1,7 @@
 # webembeds-website
 Built and supported by [Hashnode](https://hashnode.com)
 
-- Checkout demo here https://webembeds.com
+- Checkout demo here https://webembeds.com/demo
 
 This package deals with the website. Right now website only hosts a demo of webembeds.  
 
diff --git a/packages/webembeds-website/pages/_document.tsx b/packages/webembeds-website/pages/_document.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class CustomDocument extends Document {
+	render() {
+		return (
+			<Html>
+				<Head />
+				<body>
+					<Main />
+					<NextScript />
+          <script async defer src="/js/buttons.js"></script>
+				</body>
+			</Html>
+		);
+	}
+}
+
+export default CustomDocument;
diff --git a/packages/webembeds-website/pages/demo.tsx b/packages/webembeds-website/pages/demo.tsx
@@ -3,35 +3,35 @@ import React, { useState, useEffect, useRef } from "react";
 import Loader from "../components/Loader";
 
 const links: any = {
-	spotify: "https://open.spotify.com/track/3G8o2zm7LaF6eeVuvLlrkJ?si=Sx1sCnhDT6GXqSLIwSLOeQ",
+	// spotify: "https://open.spotify.com/track/3G8o2zm7LaF6eeVuvLlrkJ?si=Sx1sCnhDT6GXqSLIwSLOeQ",
 	// gist: "https://gist.github.com/theevilhead/7ac2fbc3cda897ebd87dbe9aeac130d6",
+	// canva1: "https://www.canva.com/design/DAEWSa9kfIs/view",
+	// canva2: "https://www.canva.com/design/DAEWRhUKdvg/view",
+	// twitter: "https://twitter.com/hashnode/status/1352525138659430400",
+	// expo: "https://snack.expo.io/@girishhashnode/unnamed-snack",
+	// runkit: "https://runkit.com/runkit/welcome",
 	canva: "https://www.canva.com/design/DAET1m0_11c/jFBlYrKc8CQCb2boU9KC-A/view",
-	canva1: "https://www.canva.com/design/DAEWSa9kfIs/view",
-	canva2: "https://www.canva.com/design/DAEWRhUKdvg/view",
 	codepen: "https://codepen.io/bsehovac/pen/EMyWVv",
 	youtube: "https://www.youtube.com/watch?v=32I0Qso4sDg",
-	twitter: "https://twitter.com/hashnode/status/1352525138659430400",
 	glitch: "https://glitch.com/edit/#!/remote-hands",
-	expo: "https://snack.expo.io/@girishhashnode/unnamed-snack",
 	twitch: "https://www.twitch.tv/fresh",
 	giphy: "https://giphy.com/gifs/cbsnews-inauguration-2021-XEMbxm9vl9JIIMcE7M",
 	metascraper: "https://metascraper.js.org/",
-	runkit: "https://runkit.com/runkit/welcome",
 	repl: "https://repl.it/@GirishPatil4/AdvancedRespectfulGigahertz",
 	soundcloud: "https://soundcloud.com/hit-jatt/jatt-disde-arjan-dhillon",
 	anchor: "https://anchor.fm/startapodcast/episodes/Whats-your-podcast-about-e17krq/a-a2q3ft",
 	loom: "https://www.loom.com/share/0281766fa2d04bb788eaf19e65135184",
-	vimeo: "https://vimeo.com/336812660",
-	fallback: "https://hashnode.com",
+	vimeo: "https://vimeo.com/485593347",
+	fallback: "https://github.com",
 };
 
 function Demo() {
 	const urlRef = useRef<HTMLInputElement>(null);
-	const [result, setResult] = useState<{ output: { html?: string }; error: boolean }>();
+	const [result, setResult] = useState<{ output?: { html?: string }; error: boolean } | null>();
 	const [isLoading, setLoading] = useState<boolean>(false);
 
 	useEffect(() => {
-		handleURL(links.anchor);
+		handleURL(links.vimeo);
 	}, []);
 
 	const handleURL = async (incomingURL?: string) => {
@@ -49,6 +49,7 @@ function Demo() {
 		}
 
 		setLoading(true);
+		setResult(null);
 
 		const requestURL = `/api/embed?url=${encodeURIComponent(url)}`;
 		const response = await fetch(requestURL, {
@@ -67,8 +68,13 @@ function Demo() {
 
 	return (
 		<div className="w-full mx-auto max-w-4xl">
-			<div className="max-w-3xl mx-auto">
-				<h1 className="text-xl font-semibold py-6 px-3">Webembeds</h1>
+			<div className="max-w-3xl mx-auto flex flex-wrap items-center justify-between">
+				<a href="/" className="text-xl font-semibold py-6 px-3">Webembeds</a>
+				<div>
+					{/* <a className="github-button" href="https://github.com/hashnode" data-size="large" aria-label="Follow @hashnode on GitHub">Follow @hashnode</a>
+					&nbsp; */}
+					<a className="github-button" href="https://github.com/hashnode/webembeds" data-color-scheme="no-preference: light; light: dark; dark: dark;" data-icon="octicon-star" data-size="large" aria-label="Star hashnode/webembeds on GitHub">Star us on Github</a>
+				</div>
 			</div>
 
 			<div className="flex flex-col">
@@ -79,7 +85,7 @@ function Demo() {
 				{result && !result.error && !isLoading ? (
 					<div
 						className="shadow-2xl p-2 bg-white rounded-sm border border-gray-200"
-						dangerouslySetInnerHTML={{ __html: result.output.html || "" }}
+						dangerouslySetInnerHTML={{ __html: (result.output && result.output.html) ? result.output.html : "" }}
 					/>
 				) : null}
 				{result && result.error ? "Something went wrong" : ""}
diff --git a/packages/webembeds-website/public/js/buttons.js b/packages/webembeds-website/public/js/buttons.js

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,4 @@`
`2`	`2`	`"eslint.format.enable": true,`
`3`	`3`	`"eslint.debug": true,`
`4`	`4`	`"eslint.packageManager": "yarn",`
`5`		`- "cSpell.words": [`
`6`		`- "Giphy",`
`7`		`- "fastimage"`
`8`		`- ]`
`9`	`5`	`}`