1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-10 16:46:28 +02:00

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

This commit is contained in:
Kushagra Gour
2022-03-08 12:37:56 +05:30
13 changed files with 130 additions and 46 deletions

4
.github/FUNDING.yml vendored Normal file
View File

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

1
.gitignore vendored
View File

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

1
.npmrc Normal file
View File

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

View File

@ -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 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) ![Screenshot](/packages/website/images/ss1.png)
### Features ## Features
- Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript) - Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
- Works offline - 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. 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) [![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). 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 MIT Licensed
Copyright (c) 2016-2019 Kushagra Gour, [webmakerapp.com](https://webmakerapp.com) Copyright (c) 2016-2022 Kushagra Gour, [webmaker.app](https://webmaker.app)

13
RELEASE.md Normal file
View File

@ -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

View File

@ -231,6 +231,7 @@ exports.release = series(
} else { } else {
console.log('RELEASE FINISHED SUCCESSFULLY'); console.log('RELEASE FINISHED SUCCESSFULLY');
} }
callback(error); callback(error);
} }
); );
@ -242,6 +243,33 @@ exports.devRelease = gulp.series(
'useRef', 'useRef',
// 'concatSwRegistration', // 'concatSwRegistration',
// 'generate-service-worker', // '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);
// }
// );
// });

View File

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

View File

@ -131,7 +131,7 @@
.hero { .hero {
text-align: center; text-align: center;
background: #2b273c; background: linear-gradient(45deg, #000001, #65487d);
color: #a7a1bd; color: #a7a1bd;
padding: 2em 1em; padding: 2em 1em;
margin-bottom: 2em; margin-bottom: 2em;
@ -186,6 +186,9 @@
.screenshot { .screenshot {
box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6); 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 { .site-header {
@ -427,17 +430,15 @@
<svg class="logo" width="160" height="84"> <svg class="logo" width="160" height="84">
<use xlink:href="#logo"></use> <use xlink:href="#logo"></use>
</svg> </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 A blazing fast & offline web playground in your browser
</h2> </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/"> <a class="btn download-btn web-app-btn" href="/app/">
<span>Open Web App</span> <span>Open Web App</span>
</a> </a>
<p style="margin-top:3px;"> <p style="margin-top: 3px">
Recommended: Works Offline! More features. More fun! Recommended: Works Offline! More features. More fun!
</p> </p>
<a <a
@ -475,7 +476,7 @@
> >
</div> </div>
</header> </header>
<div style="margin-top:30px;"> <div style="margin-top: 30px; perspective: 400px">
<img <img
class="screenshot" class="screenshot"
src="images/ss1.png?v4" src="images/ss1.png?v4"
@ -487,7 +488,7 @@
{% else %} {% else %}
<header class="site-header"> <header class="site-header">
<div> <div>
<h2 style="display: inline;"> <h2 style="display: inline">
<a href="/"> <a href="/">
<svg class="site-header__logo"> <svg class="site-header__logo">
<use xlink:href="#logo"></use> <use xlink:href="#logo"></use>
@ -516,9 +517,7 @@
</header> </header>
{% endif %} {% endif %}
<main class="main-content"> <main class="main-content">{{ content }}</main>
{{ content }}
</main>
<div id="info" class="info"> <div id="info" class="info">
<p> <p>
@ -547,7 +546,7 @@
or you can set up a filter in Adblock Plus or similar ad blocker tools or you can set up a filter in Adblock Plus or similar ad blocker tools
like AdBlock, uBlock or Adblock Pro. like AdBlock, uBlock or Adblock Pro.
</p> </p>
<div style="text-align: center;"> <div style="text-align: center">
<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a> <a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
</div> </div>
</div> </div>
@ -569,7 +568,7 @@
{% include footer.html %} {% include footer.html %}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="logo" viewBox="-145 -2 372 175"> <symbol id="logo" viewBox="-145 -2 372 175">
<g <g
stroke="none" stroke="none"
@ -622,7 +621,7 @@
<script type="text/javascript"> <script type="text/javascript">
window.$crisp = []; window.$crisp = [];
window.CRISP_WEBSITE_ID = 'c00b07b9-42da-45dd-87b0-e614bf7fb240'; window.CRISP_WEBSITE_ID = 'c00b07b9-42da-45dd-87b0-e614bf7fb240';
(function() { (function () {
d = document; d = document;
s = d.createElement('script'); s = d.createElement('script');
s.src = 'https://client.crisp.chat/l.js'; s.src = 'https://client.crisp.chat/l.js';

View File

@ -18,7 +18,7 @@
<a href="https://twitter.com/webmakerApp" rel="external"> <a href="https://twitter.com/webmakerApp" rel="external">
<svg <svg
viewBox="0 0 16 16" 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 <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 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"> <a href="https://github.com/chinchang/web-maker" rel="external">
<svg <svg
viewBox="0 0 16 16" 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 <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" 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>
</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> </p>
</footer> </footer>

View File

@ -129,7 +129,7 @@ export default class AddLibrary extends Component {
https://cdnjs.cloudflare.com, https://unpkg.com, https://cdnjs.cloudflare.com, https://unpkg.com,
https://maxcdn.com, https://cdn77.com, https://maxcdn.com, https://cdn77.com,
https://maxcdn.bootstrapcdn.com, https://cdn.jsdelivr.net/, 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> </p>
<textarea <textarea

View File

@ -36,7 +36,7 @@ function Notification({ version, isLatest, ...props }) {
<p> <p>
<strong>🎉 New Product!</strong> If you like Web Maker, you'll <strong>🎉 New Product!</strong> If you like Web Maker, you'll
probably also like a new product I launched. It's the first ever 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"> <a href="https://cssbattle.dev" target="_blank">
CSSBattle CSSBattle
</a> </a>
@ -114,8 +114,14 @@ export function Notifications(props) {
return ( return (
<div> <div>
<h1>Whats new?</h1> <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. Broken syntax highlighting in non-default Preprocessors.
</NotificationItem> </NotificationItem>
</Notification> </Notification>
@ -517,7 +523,7 @@ export function Notifications(props) {
<li> <li>
Web Maker is no more just a Chrome extension, it is also available 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 as web app that runs offline just like the extension! Checkout it
out -> out -&gt;
<a <a
href="https://webmaker.app/app/" href="https://webmaker.app/app/"
target="_blank" target="_blank"

View File

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

View File

@ -1,12 +1,12 @@
{ {
"name": "Web Maker", "name": "Web Maker",
"version": "4.0.3", "version": "4.2.0",
"manifest_version": 2, "manifest_version": 2,
"description": "Blazing fast & offline playground for your web experiments", "description": "Blazing fast & offline playground for your web experiments",
"homepage_url": "https://webmaker.app", "homepage_url": "https://webmaker.app",
"permissions": ["storage", "tabs", "<all_urls>"], "permissions": ["storage", "tabs", "<all_urls>"],
"optional_permissions": ["downloads"], "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": { "options_ui": {
"page": "options.html", "page": "options.html",
"chrome_style": true "chrome_style": true