Merge remote-tracking branch 'origin/master' into v5

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+patreon: kushagra
+custom: https://paypal.me/kushagragour

.gitignore

@@ -18,3 +18,4 @@ node_modules/
 extension/
 yarn-error.log
 src/locales/_build
+extension-*.zip

.npmrc

@@ -0,0 +1 @@
+ engine-strict=true

README.md

@@ -1,18 +1,18 @@
-# Web-Maker ![Build](https://travis-ci.org/chinchang/web-maker.svg?branch=master) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/web-maker)
+# Web-Maker 🕸🛠
 
 ---
 
-**Web-Maker** is an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and offline supported because it runs completely on your system.
+**Web-Maker** is an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and works offline because it runs completely on your system.
 
-### [Open Web App](https://webmaker.app/app/) (Recommended: More features. More fun!)
+## [Open Web App](https://webmaker.app/app/) (Recommended: More features. More fun!)
 
 or
 
-### [Install Chrome extension](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
+## [Install Chrome extension](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
 
 ![Screenshot](/packages/website/images/ss1.png)
 
-### Features
+## Features
 
 - Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
 - Works offline
@@ -33,19 +33,27 @@ or
 
 Follow [@webmakerApp](https://twitter.com/intent/follow?screen_name=webmakerApp) for updates or tweet out feature requests and suggestions.
 
-### Support Web Maker
+## Support Web Maker
 
-Hi! I am Kushagra Gour. Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free [side projects](https://kushagragour.in/lab/), I have launched a [Patreon campaign](https://patreon.com/kushagra). Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward making Web Maker more awesome🔥.
+Hi! I am Kushagra Gour. Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free [side projects](https://kushagra.dev/lab), I have launched a [Patreon campaign](https://patreon.com/kushagra). Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward making Web Maker more awesome🔥.
 
 [![Become a patron](/src/assets/patreon.png)](https://patreon.com/kushagra)
 
+Support with $ETH - 0x39989c0E53cfdcF6792e09d7573c65E911e774bA
+
 If not that, you can support by simply sharing about how much you love 💖 [@webmakerapp](https://twitter.com/webmakerApp).
 
-Web Maker stays stable as rock with every release, thanks to the sponsored testing on the awesome <a href="http://browserstack.com/">BrowserStack</a>!
+## Sponsors
-<a href="http://browserstack.com/"><img alt="Browserstack logo" src="https://p14.zdusercontent.com/attachment/1015988/l8WVB4MN3qYX5Vfa2GYq9OhWc?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMTI4Q0JDLUhTMjU2In0..LkuIkSrr7JH57LIX8ndSRQ.vNbwvs4ANfS_axE84eEYNrqx79qup9c1w0gK7z7lw9nq2YV05HLKdKb1GbXDAb-oYFqeyWo3D8RSaXtcq0kK6hmM20D95sS0IiSdqLo8o86QEPvrMkxjhg0Nu0yViwlFnDVhjrMoeKlFSMyDexFf-v_ejBJdNrr_rr_8Nc_D1BLa82BgUPaahkIHsJFXmNmS51AbhN4BbxEnAcYNf11xqCTLbN1XwZk6FmSgWjWDIscxF3TpGHTGYLOq4qcdRGXT_08C8rm6SKqEV9FVN7AxnyW3-pzhGZ_QpgzEYg_d-IY.9_wfbVeTNES4ZpwgzPg66A" height="100"></a>
 
-### License
+[![](https://user-images.githubusercontent.com/379918/134402085-15cf29bc-2266-4b2d-9354-1830adc4a240.png)](https://cssbattle.dev)
+
+Web Maker stays stable as rock with every release, thanks to the sponsored testing on the awesome
+<a href="http://browserstack.com/"><img alt="Browserstack logo" src="https://user-images.githubusercontent.com/379918/134403020-50167453-223a-4841-8ef6-312219bcb2e6.png" height="60"></a>
+
+Deployed on the superfast [Netlify](https://www.netlify.com/) platform.
+
+## License
 
 MIT Licensed
 
-Copyright (c) 2016-2019 Kushagra Gour, [webmakerapp.com](https://webmakerapp.com)
+Copyright (c) 2016-2022 Kushagra Gour, [webmaker.app](https://webmaker.app)

RELEASE.md

@@ -0,0 +1,13 @@
+## Release steps for Chrome extension
+
+- Checkout master
+- Update changelog and commit
+- Change version in following places:
+  - app.jsx
+  - options.html
+  - package.json
+  - manifest.json
+- commit and tag (`git tag {version}`)
+- Run `gulp build-extension`
+- Test out extension-{version}.zip
+- If everything is good, push to master

gulpfile.js

@@ -231,6 +231,7 @@ exports.release = series(
 		} else {
 			console.log('RELEASE FINISHED SUCCESSFULLY');
 		}
+
 		callback(error);
 	}
 );
@@ -242,6 +243,33 @@ exports.devRelease = gulp.series(
 	'useRef',
 	// 'concatSwRegistration',
 	// 'generate-service-worker',
-	'buildDistFolder'
+	'buildDistFolder',
-	// 'cleanup'
+	'cleanup',
+	function (error) {
+		if (error) {
+			console.log(error.message);
+		} else {
+			console.log('DEV-RELEASE FINISHED SUCCESSFULLY');
+		}
+
+		callback(error);
+	}
 );
+
+// gulp.task('build-extension', function (callback) {
+// 	runSequence(
+// 		'runWebpack',
+// 		'copyFiles',
+// 		'fixIndex',
+// 		'useRef',
+// 		'packageExtension',
+// 		function (error) {
+// 			if (error) {
+// 				console.log(error.message);
+// 			} else {
+// 				console.log('DEV RELEASE FINISHED SUCCESSFULLY');
+// 			}
+// 			callback(error);
+// 		}
+// 	);
+// });

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web-maker",
-	"version": "4.0.3",
+	"version": "4.2.0",
 	"description": "A blazing fast & offline web playground",
 	"scripts": {
 		"start": "npm run -s dev",
@@ -81,6 +81,9 @@
 		"react-inspector": "^2.3.0",
 		"split.js": "^1.5.11"
 	},
+	"engines": {
+		"node": "10"
+	},
 	"jest": {
 		"verbose": true,
 		"setupFiles": [

packages/website/_includes/default.html

@@ -131,7 +131,7 @@
 
 			.hero {
 				text-align: center;
-				background: #2b273c;
+				background: linear-gradient(45deg, #000001, #65487d);
 				color: #a7a1bd;
 				padding: 2em 1em;
 				margin-bottom: 2em;
@@ -186,6 +186,9 @@
 
 			.screenshot {
 				box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6);
+				transform: rotateX(4deg) rotateY(-2deg);
+				border: 1px solid black;
+				border-radius: 10px;
 			}
 
 			.site-header {
@@ -427,17 +430,15 @@
 				<svg class="logo" width="160" height="84">
 					<use xlink:href="#logo"></use>
 				</svg>
-				<h1 class="homepage-title">
+				<h1 class="homepage-title">Web Maker</h1>
-					Web Maker
+				<h2 style="margin-bottom: 0.4em">
-				</h1>
-				<h2 style="margin-bottom:0.4em;">
 					A blazing fast & offline web playground in your browser
 				</h2>
-				<div style="margin-top: 30px;" id="cta" class="mb-2">
+				<div style="margin-top: 30px" id="cta" class="mb-2">
 					<a class="btn download-btn web-app-btn" href="/app/">
 						<span>Open Web App</span>
 					</a>
-					<p style="margin-top:3px;">
+					<p style="margin-top: 3px">
 						Recommended: Works Offline! More features. More fun!
 					</p>
 					<a
@@ -475,7 +476,7 @@
 					>
 				</div>
 			</header>
-			<div style="margin-top:30px;">
+			<div style="margin-top: 30px; perspective: 400px">
 				<img
 					class="screenshot"
 					src="images/ss1.png?v4"
@@ -487,7 +488,7 @@
 		{% else %}
 		<header class="site-header">
 			<div>
-				<h2 style="display: inline;">
+				<h2 style="display: inline">
 					<a href="/">
 						<svg class="site-header__logo">
 							<use xlink:href="#logo"></use>
@@ -516,9 +517,7 @@
 		</header>
 		{% endif %}
 
-		<main class="main-content">
+		<main class="main-content">{{ content }}</main>
-			{{ content }}
-		</main>
 
 		<div id="info" class="info">
 			<p>
@@ -547,7 +546,7 @@
 				or you can set up a filter in Adblock Plus or similar ad blocker tools
 				like AdBlock, uBlock or Adblock Pro.
 			</p>
-			<div style="text-align: center;">
+			<div style="text-align: center">
 				<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
 			</div>
 		</div>

packages/website/_includes/footer.html

@@ -18,7 +18,7 @@
 					<a href="https://twitter.com/webmakerApp" rel="external">
 						<svg
 							viewBox="0 0 16 16"
-							style="width:1em;height:1em;margin-right:8px;fill:#55ACEE;"
+							style="width: 1em; height: 1em; margin-right: 8px; fill: #55acee"
 						>
 							<path
 								d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
@@ -31,7 +31,7 @@
 					<a href="https://github.com/chinchang/web-maker" rel="external">
 						<svg
 							viewBox="0 0 16 16"
-							style="width:1em;height:1em;margin-right:8px;fill:#666;"
+							style="width: 1em; height: 1em; margin-right: 8px; fill: #666"
 						>
 							<path
 								d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"
@@ -46,8 +46,30 @@
 		</div>
 	</div>
 
-	<p class="ta-c">
+	<p class="ta-c" style="position: relative">
-		Made by
+		<img
-		<a href="https://twitter.com/chinchang457" rel="external">Kushagra Gour</a>
+			src="https://cssbattle.dev/images/avatar-chang.png"
+			style="width: 260px; border-radius: 45px"
+		/>
+		<span
+			style="
+				position: absolute;
+				bottom: 0;
+				background: black;
+				border-radius: 35px;
+				padding: 5px 10px;
+				color: white;
+				display: inline-block;
+				width: 30ch;
+				left: calc(50% - 15ch);
+			"
+			>Made by
+			<a
+				href="https://twitter.com/chinchang457"
+				rel="external"
+				style="color: yellow"
+				>Kushagra Gour</a
+			></span
+		>
 	</p>
 </footer>

src/components/AddLibrary.jsx

@@ -129,7 +129,7 @@ export default class AddLibrary extends Component {
 							https://cdnjs.cloudflare.com, https://unpkg.com,
 							https://maxcdn.com, https://cdn77.com,
 							https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/,
-							https://rawgit.com, https://wzrd.in
+							https://rawgit.com, https://wzrd.in, https://cdn.tailwindcss.com
 						</p>
 
 						<textarea

src/components/Notifications.jsx

@@ -36,7 +36,7 @@ function Notification({ version, isLatest, ...props }) {
 					<p>
 						<strong>🎉 New Product!</strong> If you like Web Maker, you'll
 						probably also like a new product I launched. It's the first ever
-						code-golfing game for CSS ->{' '}
+						code-golfing game for CSS -&gt;{' '}
 						<a href="https://cssbattle.dev" target="_blank">
 							CSSBattle
 						</a>
@@ -114,8 +114,14 @@ export function Notifications(props) {
 	return (
 		<div>
 			<h1>Whats new?</h1>
-			<Notification version="4.0.3" {...props} isLatest={true}>
+			<Notification version="4.2.0" {...props} isLatest={true}>
-				<NotificationItem>
+				<li>
+					Tailwind CSS now added to popular libraries list. Thanks
+					<a href="https://github.com/LoganDark"> @LoganDark</a>
+				</li>
+			</Notification>
+			<Notification version="4.0.3" {...props}>
+				<NotificationItem type="bug">
 					Broken syntax highlighting in non-default Preprocessors.
 				</NotificationItem>
 			</Notification>
@@ -517,7 +523,7 @@ export function Notifications(props) {
 					<li>
 						Web Maker is no more just a Chrome extension, it is also available
 						as web app that runs offline just like the extension! Checkout it
-						out ->
+						out -&gt;
 						<a
 							href="https://webmaker.app/app/"
 							target="_blank"

src/components/app.jsx

@@ -79,7 +79,7 @@ const LocalStorageKeys = {
 	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
 };
 const UNSAVED_WARNING_COUNT = 15;
-const version = '4.0.3';
+const version = '4.2.0';
 
 // Read forced settings as query parameters
 window.forcedSettings = {};
@@ -1806,7 +1806,6 @@ export default class App extends Component {
 
 					<CommandPalette
 						show={this.state.isCommandPaletteOpen}
-						closeHandler={() => this.setState({ isCommandPaletteOpen: false })}
 						files={linearizeFiles(this.state.currentItem.files || [])}
 						isCommandMode={this.state.isCommandPaletteInCommandMode}
 						closeHandler={() => this.setState({ isCommandPaletteOpen: false })}

src/manifest.json

@@ -1,12 +1,12 @@
 {
 	"name": "Web Maker",
-	"version": "4.0.3",
+	"version": "4.2.0",
 	"manifest_version": 2,
 	"description": "Blazing fast & offline playground for your web experiments",
 	"homepage_url": "https://webmaker.app",
 	"permissions": ["storage", "tabs", "<all_urls>"],
 	"optional_permissions": ["downloads"],
-	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://apis.google.com https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com 'unsafe-eval'; object-src 'self'",
+	"content_security_policy": "script-src 'self' filesystem: http://localhost:* https://localhost:* https://apis.google.com https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com https://cdn.tailwindcss.com 'unsafe-eval'; object-src 'self'",
 	"options_ui": {
 		"page": "options.html",
 		"chrome_style": true