1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-06-11 20:20:50 +02:00

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

This commit is contained in:
Kushagra Gour
2024-05-09 17:26:50 +05:30
26 changed files with 2356 additions and 1536 deletions

View File

@ -224,6 +224,8 @@ gulp.task('buildDistFolder', function (cb) {
child_process.execSync('rm -rf dist');
child_process.execSync('mv packages/website/_site dist');
child_process.execSync(`mv ${APP_FOLDER} dist/`);
child_process.execSync(`mkdir dist/signup`);
child_process.execSync(`cp packages/signup/dist/*.* dist/signup/`);
cb();
});

2390
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "web-maker",
"version": "6.1.0",
"version": "6.2.0",
"description": "A blazing fast & offline web playground",
"scripts": {
"start": "concurrently --kill-others \"gulp start-preview-server\" \"npm run -s dev\"",
@ -75,8 +75,8 @@
"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
"codemirror": "^5.65.16",
"copy-webpack-plugin": "^4.5.1",
"esprima": "^4.0.0",
"firebase": "^10.8.0",
"esprima-next": "^6.0.3",
"jszip": "^3.1.5",
"preact": "^10.17.0",
"preact-portal": "^1.1.3",

View File

@ -0,0 +1,3 @@
command to build
npx parcel build index.html --public-url /signup

1187
packages/signup/dist/index.1903c1b7.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

11
packages/signup/dist/index.html vendored Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<head>
<title>signInWithPopup</title>
</head>
<body>
<h1>signInWithPopup</h1>
<script src="/index.a3cfa626.js" defer=""></script>
</body>
</html>

View File

@ -6,6 +6,6 @@
<body>
<h1>signInWithPopup</h1>
<script type="module" src="signInWithPopup.js"></script>
<script type="module" src="./signInWithPopup.js"></script>
</body>
</html>

View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
@ -558,7 +558,7 @@
<div class="hero-img">
<img
class="screenshot"
src="images/ss1.png?v4"
src="images/ss1.webp"
height=""
alt="Web Maker working screen"
/>

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -121,10 +121,7 @@ layout: default.html
class="say"
>
<div class="say__name">
<img
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
alt=""
/>
<img src="" alt="" />
<div>Joacim Nilsson</div>
</div>
<p>This is something I will be using alot. Thank you! :D</p>
@ -135,10 +132,7 @@ layout: default.html
class="say"
>
<div class="say__name">
<img
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
alt=""
/>
<img src="" alt="" />
<div>Oksana Borukh</div>
</div>
<p>It's fantastic! I'm glad I've discovered it! Thanks!</p>
@ -215,10 +209,7 @@ layout: default.html
class="say"
>
<div class="say__name">
<img
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
alt=""
/>
<img src="" alt="" />
<div>Steve Lack</div>
</div>
<p>Thanks for creating this. What a great tool for productivity!</p>
@ -230,10 +221,7 @@ layout: default.html
class="say"
>
<div class="say__name">
<img
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
alt=""
/>
<img src="" alt="" />
<div>Margaret H</div>
</div>
<p>

View File

@ -15,6 +15,6 @@ window.addEventListener('message', e => {
// Recieving from preview iframe
if (e.data && e.data.logs) {
window.opener.postMessage(e.data, '*');
(window.opener || window.top).postMessage(e.data, '*');
}
});

22
preview/preview.htm Normal file
View File

@ -0,0 +1,22 @@
<style>
body {
margin: 0;
}
#demo-frame {
border: 0;
width: 100%;
background: white;
height: 100%;
}
</style>
<body>
<iframe
src="about://blank"
frameborder="0"
id="demo-frame"
allowfullscreen
></iframe>
<script src="detached-window.js"></script>
</body>

View File

@ -106,7 +106,25 @@ export function Changelog(props) {
return (
<div>
<h1>Whats new?</h1>
<Notification version="6.1.0" {...props} isLatest={true}>
<Notification version="6.2.0" {...props} isLatest={true}>
<li>Preact template updated to latest version with hooks.</li>
<li>Mail option added in help modal.</li>
<li>
JS error checks updated to latest version. No more red errors on
latest syntax.
</li>
<NotificationItem type="bug">
Localstorage/Cookies not being available to creations is now fixed.
</NotificationItem>
<NotificationItem type="bug">
Bugs related to light-weight mode and creation not opening on page
refresh in logged out state are fixed.
</NotificationItem>
<NotificationItem type="bug">
Code auto-format for JS is fixed.
</NotificationItem>
</Notification>
<Notification version="6.1.0" {...props}>
<li>
<strong>🕹 Kaboom game engine</strong>: Kaboom.js is now available in
quick-add library list. Also, a new template to quick-start in Kaboom

View File

@ -21,12 +21,15 @@ const minCodeWrapSize = 33;
/* global htmlCodeEl
*/
const PREVIEW_FRAME_HOST = window.DEBUG
const PREVIEW_FRAME_HOST = window.location.href.includes('localhost')
? 'http://localhost:7888'
: `https://wbmakr.com`;
let cachedSandboxAttribute = '';
// prevents refreshes when iframe is currently being refreshed
let frameRefreshPromise = null;
export default class ContentWrap extends Component {
constructor(props) {
super(props);
@ -167,15 +170,24 @@ export default class ContentWrap extends Component {
// 2. we cache and remove the sandbox attribute and refresh again so that it gets served by SW
// 3. we add back cached sandbox attr & write the contents to the iframe
const refreshAndDo = fn => {
Promise.race([
// Just in case onload promise doesn't resolves
new Promise(resolve => {
setTimeout(resolve, 400);
}),
new Promise(resolve => {
this.frame.onload = resolve;
})
]).then(fn);
frameRefreshPromise =
frameRefreshPromise ||
// Race earlier had a settimeout too as a fallback. It was removed because onload
// was firing 100% times.
// TODO: remove race
Promise.race([
new Promise(resolve => {
this.frame.onload = () => {
resolve('onload');
};
})
]);
frameRefreshPromise.then(resolutionReason => {
frameRefreshPromise = null;
log('resolved with ', resolutionReason);
fn();
});
// Setting to blank string cause frame to reload
// if (window.IS_EXTENSION) {
// this.frame.src = '';
@ -187,9 +199,7 @@ export default class ContentWrap extends Component {
if (!cachedSandboxAttribute && window.DEBUG) {
// alert('sandbox empty');
}
// console.log('setting back sandbox attr', sandbox);
// this.frame.setAttribute('sandbox', cachedSandboxAttribute);
// this.frame.removeAttribute('sweet');
log('sending PM');
// if (window.IS_EXTENSION) {
// this.frame.contentDocument.open();
@ -931,11 +941,11 @@ export default class ContentWrap extends Component {
/>
) : (
<iframe
src={`./indexpm.html`}
src={`${PREVIEW_FRAME_HOST}/preview.htm`}
ref={el => (this.frame = el)}
frameborder="0"
id="demo-frame"
sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"
sandbox="allow-same-origin allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"
allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"
allowpaymentrequest="true"
allowfullscreen="true"

View File

@ -202,10 +202,12 @@ export class CreateNewModal extends Component {
}
})}
</div>
<p>
2 files mode creations available in Free plan. To create unlimited
files mode creations, upgrade to <ProBadge />.
</p>
{!window.user?.isPro && (
<p>
2 files mode creations available in Free plan. To create
unlimited files mode creations, upgrade to <ProBadge />.
</p>
)}
<div class="show-when-extension">
Files modes is currently only available in Web app.{' '}
<a href="https://webmaker.app/create/">Try the Web app now</a>.

View File

@ -1,3 +1,4 @@
import { Icon } from './Icons';
import Modal from './Modal';
import { Stack, VStack } from './Stack';
import { Button } from './common';
@ -68,6 +69,7 @@ export function HelpModal(props) {
rel="noopener noreferrer"
class="btn btn-icon"
>
<Icon name="twitter-icon" />
<Trans>Share Web Maker</Trans>
</a>{' '}
<a
@ -103,6 +105,15 @@ export function HelpModal(props) {
</svg>
<Trans>Report a bug</Trans>
</a>
<a
href="mailto:chinchang457@gmail.com"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<Icon name="email" />
<Trans>Mail me</Trans>
</a>
</p>
<p>

View File

@ -128,6 +128,9 @@ export function Icons() {
<symbol id="check-circle" viewBox="0 0 24 24">
<path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" />
</symbol>
<symbol id="email" viewBox="0 0 24 24">
<path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
</symbol>
<symbol id="fork" viewBox="0 0 24 24">
<path d="M13 14c-3.36 0-4.46 1.35-4.82 2.24C9.25 16.7 10 17.76 10 19a3 3 0 0 1-3 3 3 3 0 0 1-3-3c0-1.31.83-2.42 2-2.83V7.83A2.99 2.99 0 0 1 4 5a3 3 0 0 1 3-3 3 3 0 0 1 3 3c0 1.31-.83 2.42-2 2.83v5.29c.88-.65 2.16-1.12 4-1.12 2.67 0 3.56-1.34 3.85-2.23A3.006 3.006 0 0 1 14 7a3 3 0 0 1 3-3 3 3 0 0 1 3 3c0 1.34-.88 2.5-2.09 2.86C17.65 11.29 16.68 14 13 14m-6 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M7 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m10 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1Z" />
</symbol>

View File

@ -130,12 +130,12 @@ const Card = ({ bg, name, price, subTitle, action, features }) => {
<Text transform="uppercase" weight="600">
{name}
</Text>
<Text size="5" weight="800" appearance="primary">
{/* <Text size="5" weight="800" appearance="primary">
{price}
</Text>
<Text size="1" weight="400">
{subTitle}
</Text>
</Text> */}
</VStack>
{action}
{!action && (

View File

@ -41,7 +41,7 @@ export default class Settings extends Component {
<HelpText>Loads the last open creation when app starts</HelpText>
<Divider />
<CheckboxSetting
label="Fast/light version"
label="Fast/light-weight version"
pref={prefs.lightVersion}
onChange={e => this.updateSetting(e, 'lightVersion')}
/>

View File

@ -84,7 +84,7 @@ if (module.hot) {
}
const UNSAVED_WARNING_COUNT = 15;
const version = '6.1.0';
const version = '6.2.0';
// Read forced settings as query parameters
window.forcedSettings = {};
@ -108,8 +108,16 @@ if (location.search) {
}
function customRoute(path) {
// we don't /create redirections on extension since SPA paths don't work there
// we don't /create redirections on extension since SPA paths don't work there.
if (window.IS_EXTENSION) return;
// And also for logged out users, since it will send them to /create/ID and refreshing
// that will try to find that creation in their database, which doesn't exist. LOgged out
// users anyways can't do anything with the urls.
// Exception is /create. this is needed because a logged out user can visit a /create/ID
// of some other user and then create a new item...at which point they shud come back
// to /create
if (!window.user && path !== '/create') return;
else {
route(path);
}
@ -1544,10 +1552,17 @@ export default class App extends Component {
this.setState({ isCreateNewModalOpen: false });
}
blankFileTemplateSelectHandler() {
const create = () => {
this.createNewItem(true);
this.setState({ isCreateNewModalOpen: false });
};
if (this.state.user?.isPro) {
create();
return;
}
itemService.getCountOfFileModeItems().then(count => {
if (count < 2) {
this.createNewItem(true);
this.setState({ isCreateNewModalOpen: false });
create();
} else {
trackEvent('ui', 'FileModeCreationLimitMessageSeen');
// this.closeAllOverlays();
@ -1560,24 +1575,29 @@ export default class App extends Component {
}
templateSelectHandler(template, isFileMode) {
const create = () => {
fetch(
`templates/template-${isFileMode ? 'files-' : ''}${template.id}.json`
)
.then(res => res.json())
.then(json => {
this.forkItem(json);
});
this.setState({ isCreateNewModalOpen: false });
};
if (isFileMode) {
if (this.state.user?.isPro) {
create();
return;
}
itemService.getCountOfFileModeItems().then(count => {
if (count < 2) {
fetch(
`templates/template-${isFileMode ? 'files-' : ''}${
template.id
}.json`
)
.then(res => res.json())
.then(json => {
this.forkItem(json);
});
this.setState({ isCreateNewModalOpen: false });
create();
} else {
trackEvent('ui', 'FileModeCreationLimitMessageSeen');
return alert(
'"Files mode" is currently in beta and is limited to only 2 creations per user. You have already made 2 creations in Files mode.\n\nNote: You can choose to delete old ones to create new.'
);
this.setState({ isFilesLimitModalOpen: true });
}
});
} else {

View File

@ -2,7 +2,7 @@ import { deferred } from './deferred';
import { addInfiniteLoopProtection } from './utils';
import { HtmlModes, CssModes, JsModes } from './codeModes';
const esprima = require('esprima');
const esprima = require('esprima-next');
// computeHtml, computeCss & computeJs evaluate the final code according
// to whatever mode is selected and resolve the returned promise with the code.
@ -18,20 +18,20 @@ export function computeHtml(userCode, mode) {
window.marked
? {
code: marked(code)
}
}
: {
code
}
}
);
} else if (mode === HtmlModes.JADE) {
d.resolve(
window.jade
? {
code: jade.render(code)
}
}
: {
code
}
}
);
}
@ -198,7 +198,7 @@ export function computeJs(
? code
: addInfiniteLoopProtection(code, {
timeout: infiniteLoopTimeout
});
});
}
d.resolve({
@ -231,7 +231,7 @@ export function computeJs(
? code
: addInfiniteLoopProtection(code, {
timeout: infiniteLoopTimeout
});
});
}
d.resolve({
code,
@ -267,7 +267,7 @@ export function computeJs(
? code
: addInfiniteLoopProtection(code, {
timeout: infiniteLoopTimeout
});
});
}
d.resolve({
code,

View File

@ -13,6 +13,6 @@ window.addEventListener('message', e => {
// Recieving from preview iframe
if (e.data && e.data.logs) {
window.opener.postMessage(e.data, '*');
(window.opener || window.top).postMessage(e.data, '*');
}
});

View File

@ -48,13 +48,7 @@ export const itemService = {
async getAllItems(shouldFetchLocally) {
var t = Date.now();
var d = deferred();
let itemIds = await this.getUserItemIds(shouldFetchLocally);
itemIds = Object.getOwnPropertyNames(itemIds || {});
// log('itemids', itemIds);
if (!itemIds.length) {
d.resolve([]);
}
const items = [];
if (window.user && !shouldFetchLocally) {
@ -76,6 +70,13 @@ export const itemService = {
d.resolve([]);
});
} else {
let itemIds = await this.getUserItemIds(shouldFetchLocally);
itemIds = Object.getOwnPropertyNames(itemIds || {});
if (!itemIds.length) {
d.resolve([]);
}
for (let i = 0; i < itemIds.length; i++) {
/* eslint-disable no-loop-func */
window.db.local.get(itemIds[i], itemResult => {

View File

@ -458,7 +458,8 @@ a > svg {
.btn:hover {
--black-mix: 90%;
text-decoration: none;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
box-shadow:
rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
@ -646,7 +647,9 @@ body:not(.light-version).overlay-visible .main-container {
overflow: hidden;
position: relative;
background: var(--color-bg);
transition: height 0.3s ease, width 0.3s ease;
transition:
height 0.3s ease,
width 0.3s ease;
will-change: height;
}
@ -1063,11 +1066,14 @@ body > #demo-frame {
/* opacity: 0; */
will-change: opacity;
background: var(--color-overlay);
backdrop-filter: blur(5px) grayscale(1);
transition: opacity var(--duration-modal-overlay-show);
will-change: transform;
}
body:not(.light-version) .modal {
backdrop-filter: blur(5px) grayscale(1);
}
.modal--no-overlay {
background: none;
backdrop-filter: none;
@ -1094,11 +1100,14 @@ body > #demo-frame {
transition: 0.25s ease;
}
.modal__content {
--opaque: 68%;
background: var(--color-popup);
/* fix me */
background: linear-gradient(45deg, #2d063cad, #3a2b63);
box-shadow: inset 1px -1px 0 0 #ffffff17, 0 20px 31px 0 #0000008a;
background: linear-gradient(45deg, rgb(45 6 60 / var(--opaque)), #3a2b63);
box-shadow:
inset 1px -1px 0 0 #ffffff17,
0 20px 31px 0 #0000008a;
color: var(--color-text);
position: relative;
@ -1117,6 +1126,9 @@ body > #demo-frame {
forwards;
/* animation-delay: 150ms; */
}
body.light-version .modal__content {
--opaque: 100%;
}
@keyframes anim-modal {
to {
@ -1135,10 +1147,7 @@ body > #demo-frame {
visibility: visible;
}
.is-modal-visible .modal__content {
/* transition-duration: 0.3s; */
/* transform: translateY(0px) scale(1); */
/* opacity: 1; */
body:not(.light-version).is-modal-visible .modal__content {
backdrop-filter: blur(3px);
}
@ -1153,9 +1162,11 @@ body > #demo-frame {
opacity: 0;
will-change: opacity;
/* background: var(--color-overlay); */
backdrop-filter: blur(5px) grayscale(1);
transition: opacity var(--duration-modal-overlay-show);
}
body:not(.light-version) .modal-overlay {
backdrop-filter: blur(5px) grayscale(1);
}
/* Make settings modal smaller */
@ -2359,8 +2370,10 @@ while the theme CSS file is loading */
rgba(var(--rgb-gray-0), 0) 100%
);
box-shadow: 0 0 30px rgba(var(--rgb-brand), 0),
0px 20px 50px rgba(0, 0, 0, 0.1), inset 0px 1px 3px rgba(255, 255, 255, 0.1);
box-shadow:
0 0 30px rgba(var(--rgb-brand), 0),
0px 20px 50px rgba(0, 0, 0, 0.1),
inset 0px 1px 3px rgba(255, 255, 255, 0.1);
}
.skeleton {

View File

@ -4,7 +4,7 @@ import { modes, HtmlModes, CssModes, JsModes } from './codeModes';
import { deferred } from './deferred';
import { getExtensionFromFileName } from './fileUtils';
import confetti from 'canvas-confetti';
const esprima = require('esprima');
const esprima = require('esprima-next');
window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
window.$ = document.querySelector.bind(document);
@ -378,19 +378,21 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
var externalJs = '',
externalCss = '';
if (item.externalLibs) {
externalJs = item.externalLibs.js
.split('\n')
.reduce(function (scripts, url) {
return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
}, '');
externalCss = item.externalLibs.css
.split('\n')
.reduce(function (links, url) {
return (
links +
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
);
}, '');
externalJs = item.externalLibs.js.split('\n').reduce(function (
scripts,
url
) {
return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
}, '');
externalCss = item.externalLibs.css.split('\n').reduce(function (
links,
url
) {
return (
links +
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
);
}, '');
}
var contents =
'<!DOCTYPE html>\n' +
@ -415,7 +417,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
? chrome.runtime.getURL('lib/screenlog.js')
: `${location.origin}${
window.DEBUG ? '' : BASE_PATH
}/lib/screenlog.js`) +
}/lib/screenlog.js`) +
'"></script>';
}