add the patreon modal

src/index.html

@@ -243,6 +243,10 @@
 					</svg>
 				</a>
 
+				<a d-click="openSupportDeveloperModal" data-event-action="supportDeveloperFooterBtnClick" class="footer__link  ml-1  hint--rounded  hint--top-right" aria-label="Support the developer by pledging some amount" target="_blank">
+					Support the developer
+				</a>
+
 			</div>
 		</div>
 
@@ -309,6 +313,10 @@
 			<div class="modal__content" d-html="partials/onboard-modal.html"></div>
 		</div>
 
+		<div class="modal pledge-modal" id="pledgeModal">
+			<div class="modal__content" d-html="partials/pledge-modal.html"></div>
+		</div>
+
 		<div class="modal modal--settings" id="settingsModal">
 			<div class="modal__content">
 				<a d-click="onModalCloseBtnClick" href="" aria-label="Close Settings" title="Close" class="js-modal__close-btn  modal__close-btn">

src/partials/changelog.html

@@ -6,17 +6,31 @@
 
 <h1>Whats new?</h1>
 
+<div class="notification">
+	<span class="notification__version">2.9.8</span>
+	<ul>
+		<li>The wait is over and Web Maker 3.0 is here. You might be wondering, nothing
+			seems changed here. Yes, because Web Maker 3.0 bring you - "The Web Maker web app"!
+			Try out the awesomeness here -> <a href="https://webmakerapp.com/app/">https://webmakerapp.com/app/</a> - Web
+			Maker as a web app, still works offline, with user accounts and more!
+		</li>
+		<li>What about Chrome extension, you ask? Worry not. The Chrome extension will be updated to 3.0
+			too very soon in coming days.
+		</li>
+
+		<br>
+		<li><strong>🚀 Announcement</strong>: Hi! I am Kushagra Gour (creator of Web Maker) and I have launched a <a href="https://patreon.com/kushagra" target="_blank">Patreon campaign</a>. If you love Web Maker, consider pledging to support me and my open-source & free work :)</li>
+		<!-- <li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li> -->
+		<!-- <li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li> -->
+	</ul>
+</div>
+
 <div class="notification">
 	<span class="notification__version">2.9.7</span>
 	<ul>
 		<li><a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> added to popular CSS libraries list. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
 		<li>Popular libraries list updated. Thanks <a href="https://github.com/diomed" target="_blank">diomed</a>.</li>
 		<li><strong>Dev</strong>: Bug fixes and code refactoring to make things simple. Thanks <a href="https://github.com/iamandrewluca" target="_blank">iamandrewluca</a>.</li>
-
-		<br>
-		<li><strong>🚀 Announcement</strong>: Web Maker 3.0 is coming! Tweet out to <a href="https://twitter.com/webmakerapp/">@webmakerApp</a> or message in <a href="https://gitter.im/web-maker-app/Lobby" target="_blank">chat lobby</a> to get a sneak peek.</li>
-		<li><a href="https://github.com/chinchang/web-maker/issues" target="_blank">Suggest features or report bugs.</a></li>
-		<li>Web Maker now has more than 50K weekly active users! Thank you for being a part of this community of awesome developers. If you find Web Maker helpful, <a href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" target="_blank" class="btn">Please rate Web Maker <span class="star"></span></a>			&nbsp; <a href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,editor,chrome,extension" target="_blank" target="_blank" class="btn">Share it</a>&nbsp; <a aria-label="Support the developer" href="https://www.paypal.me/kushagragour" target="_blank" class="btn btn-icon">Support the developer</a></li>
 	</ul>
 </div>
 

src/partials/pledge-modal.html

@@ -0,0 +1,22 @@
+<a d-click="onModalCloseBtnClick" href="" aria-label="Close modal" title="Close" class="js-modal__close-btn  modal__close-btn">
+    <svg>
+        <use xlink:href="#cross-icon"></use>
+    </svg>
+</a>
+
+<div class="tac">
+    <h1>Support the Developer</h1>
+    <p>Hi, <a href="https://kushagragour.in" target="_blank">Kushagra</a> here! Web Maker is a free and open-source project. To keep myself motivated for working on such open-source and free <a href="https://kushagragour.in/lab/" target="_blank">side projects</a>, I am accepting donations. Your pledge, no matter how small, will act as an appreciation towards my work and keep me going forward making Web Maker more awesome🔥. So please consider donating. 🙏🏼  (could be as small as $1/month).
+    </p>
+
+    <div class="flex flex-h-center" id="onboardDontShowInTabOptionBtn" d-click="onDontShowInTabClicked">
+        <a class="onboard-selection" href="https://patreon.com/kushagra" target="_blank" aria-label="Make a monthly pledge on Patreon">
+            <img src="patreon.png" height="60" alt="Become a patron image">
+            <h3 class="onboard-selection-text">Make a monthly pledge on Patreon</h3>
+        </a>
+    </div>
+
+    <a href="https://www.paypal.me/kushagragour" target="_blank" aria-label="Make a one time donation on Paypal">
+        Or, make a one time donation
+    </a>
+</div>

src/script.js

@@ -7,7 +7,8 @@ onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editor
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
 customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
-globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
+globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal,
+pledgeModal
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService) {
@@ -648,6 +649,7 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 		settingsModal.classList.remove('is-modal-visible');
 		cssSettingsModal.classList.remove('is-modal-visible');
 		keyboardShortcutsModal.classList.remove('is-modal-visible');
+		pledgeModal.classList.remove('is-modal-visible');
 		toggleSavedItemsPane(false);
 		document.dispatchEvent(new Event('overlaysClosed'));
 	}
@@ -1990,6 +1992,12 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 		e.preventDefault();
 	};
 
+	scope.openSupportDeveloperModal = function() {
+		closeAllOverlays();
+		trackEvent('ui', 'patreonModalSeenOnUpgrade');
+		scope.toggleModal(pledgeModal);
+	};
+
 	function init() {
 		var lastCode;
 
@@ -2430,6 +2438,15 @@ globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal
 					notificationsBtn.classList.add('has-new');
 					hasSeenNotifications = false;
 				}
+				// If its an upgrade
+				if (
+					result.lastSeenVersion &&
+					utils.semverCompare(result.lastSeenVersion, version) === -1 &&
+					!window.localStorage.pledgeModalSeen
+				) {
+					scope.openSupportDeveloperModal();
+					window.localStorage.pledgeModalSeen = true;
+				}
 			}
 		);
 

src/style.css

@@ -22,6 +22,7 @@ a { text-decoration: none; color: crimson; cursor: pointer; }
 .hide { display: none!important; }
 .flex { display: flex; }
 .flex-grow { flex-grow: 1; }
+.flex-h-center { justify-content: center; }
 .flex-v-center { align-items: center; }
 .fr { float: right; }
 .relative { position: relative; }
@@ -501,6 +502,10 @@ transition: 0.25s ease;
 		/* margin-left: -300px; */
 	}
 }
+.pledge-modal .modal__content {
+	max-width: 800px;
+}
+
 .saved-items-pane {
 	position: fixed;
 	right: 0;