mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-29 17:50:09 +02:00
Code Issues Releases Wiki Activity

eslint fixes

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-17 18:14:19 +05:30
parent 178a5f5d1b
commit d185518911
13 changed files with 1207 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc.json
View File

@@ -3,7 +3,7 @@
"browser": true
},
"parser": "babel-eslint",
"extends": "eslint:recommended",
"extends": ["eslint:recommended", "eslint-config-synacor"],
"rules": {
"accessor-pairs": "error",
@@ -26,7 +26,13 @@
"eol-last": "off",
"eqeqeq": "error",
"func-names": "off",
"func-style": ["error", "declaration", { "allowArrowFunctions": true }],
"func-style": [
"error",
"declaration",
{
"allowArrowFunctions": true
}
],
"generator-star-spacing": "error",
"global-require": "off",
"guard-for-in": "error",
@@ -165,7 +171,7 @@
"before": false
}
],
"sort-imports": "error",
"sort-imports": "off",
"sort-vars": "off",
"strict": ["error", "never"],
"template-curly-spacing": "error",
@@ -174,7 +180,11 @@
"vars-on-top": "off",
"wrap-regex": "error",
"yield-star-spacing": "error",
"yoda": ["error", "never"]
"yoda": ["error", "never"],
"brace-style": "off",
"lines-around-comment": "off",
"react/sort-comp": "off",
"react/jsx-no-bind": "off"
},
"globals": {
"ArrayBuffer": true,

2
package.json
View File

@@ -7,7 +7,7 @@
"build": "preact build --template src/index.html --no-prerender",
"serve": "preact build && preact serve",
"dev": "preact watch --template src/index.html --https --no-prerender",
"lint": "eslint src",
"lint": "eslint src/components/*.jsx",
"test": "jest ./tests",
"precommit": "lint-staged"
},

1
src/components/Alerts.jsx
View File

@@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import { log } from '../utils';
export class Alerts extends Component {
shouldComponentUpdate(nextProps, nextState) {

9
src/components/ContentWrap.jsx
View File

@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
import UserCodeMirror from './UserCodeMirror.jsx';
import { computeHtml, computeCss, computeJs } from '../computes';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
import { log, writeFile, loadJS, getCompleteHtml, BASE_PATH } from '../utils';
import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
import { SplitPane } from './SplitPane.jsx';
import { trackEvent } from '../analytics';
import CodeMirror from '../CodeMirror';
@@ -40,8 +40,8 @@ export default class ContentWrap extends Component {
return (
this.state.isConsoleOpen !== nextState.isConsoleOpen ||
this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
this.state.codeSplitSizes != nextState.codeSplitSizes ||
this.state.mainSplitSizes != nextState.mainSplitSizes ||
this.state.codeSplitSizes !== nextState.codeSplitSizes ||
this.state.mainSplitSizes !== nextState.mainSplitSizes ||
this.props.currentLayoutMode !== nextProps.currentLayoutMode ||
this.props.currentItem !== nextProps.currentItem
);
@@ -420,9 +420,8 @@ export default class ContentWrap extends Component {
getCodeSplitSizes() {
if (this.props.currentItem && this.props.currentItem.sizes) {
return this.props.currentItem.sizes;
} else {
return [33.33, 33.33, 33.33];
}
return [33.33, 33.33, 33.33];
}
mainSplitDragEndHandler() {

6
src/components/CssSettingsModal.jsx
View File

@@ -22,7 +22,11 @@ export default class CssSettingsModal extends Component {
<h1>Atomic CSS Settings</h1>
<h3>
Configure Atomizer settings.{' '}
<a href="https://github.com/acss-io/atomizer#api" target="_blank">
<a
href="https://github.com/acss-io/atomizer#api"
target="_blank"
rel="noopener noreferrer"
>
Read more
</a>{' '}
about available settings.

8
src/components/Footer.jsx
View File

@@ -148,7 +148,11 @@ export default class Footer extends Component {
</svg>
</A>
</div>
<a href="https://webmakerapp.com/" target="_blank">
<a
href="https://webmakerapp.com/"
target="_blank"
rel="noopener noreferrer"
>
<div class="logo" />
</a>
&copy;
@@ -189,6 +193,7 @@ export default class Footer extends Component {
aria-label="Tweet about 'Web Maker'"
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,frontend,playground,offline"
target="_blank"
rel="noopener noreferrer"
>
<svg
style={{
@@ -206,6 +211,7 @@ export default class Footer extends Component {
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile"
aria-label="Support the developer by pledging some amount"
target="_blank"
rel="noopener noreferrer"
>
Support the developer
</A>

76
src/components/HelpModal.jsx
View File

@@ -1,10 +1,9 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal.jsx';
export default class Header extends Component {
render() {
export function HelpModal(props) {
return (
<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
<Modal show={props.show} closeHandler={props.closeHandler}>
<h1>
<div class="web-maker-with-tag">Web Maker</div>
<small style="font-size:14px;"> v3.2.0</small>
@@ -15,18 +14,26 @@ export default class Header extends Component {
Made with
<span style="margin-right: 8px;">💖</span> &
<span style="margin-right: 8px;">🙌</span> by
<a href="https://twitter.com/chinchang457" target="_blank">
<a
href="https://twitter.com/chinchang457"
target="_blank"
rel="noopener noreferrer"
>
Kushagra Gour
</a>
</p>
<p>
<a href="/docs" target="_blank">
<a href="/docs" target="_blank" rel="noopener noreferrer">
Read the documentation
</a>.
</p>
<p>
Tweet out your feature requests, comments & suggestions to
<a target="_blank" href="https://twitter.com/webmakerApp">
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/webmakerApp"
>
@webmakerApp
</a>.
</p>
@@ -35,6 +42,7 @@ export default class Header extends Component {
<a
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank"
rel="noopener noreferrer"
>
rate it here
</a>.
@@ -54,6 +62,7 @@ export default class Header extends Component {
aria-label="Rate Web Maker"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<svg>
@@ -64,6 +73,7 @@ export default class Header extends Component {
aria-label="Chat"
href="https://web-maker.slack.com"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<svg>
@@ -74,6 +84,7 @@ export default class Header extends Component {
aria-label="Report a Bug"
href="https://github.com/chinchang/web-maker/issues"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<svg>
@@ -86,12 +97,17 @@ export default class Header extends Component {
<h3>Awesome libraries used</h3>
<ul>
<li>
<a target="_blank" href="https://kushagragour.in/lab/hint/">
<a
target="_blank"
rel="noopener noreferrer"
href="https://kushagragour.in/lab/hint/"
>
Hint.css
</a>{' '}
&
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/chinchang/screenlog.js"
>
Screenlog.js
@@ -101,6 +117,7 @@ export default class Header extends Component {
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://nathancahill.github.io/Split.js/"
>
Split.js
@@ -108,31 +125,51 @@ export default class Header extends Component {
- Nathan Cahill
</li>
<li>
<a target="_blank" href="https://codemirror.net/">
<a
target="_blank"
rel="noopener noreferrer"
href="https://codemirror.net/"
>
Codemirror
</a>{' '}
- Marijn Haverbeke
</li>
<li>
<a target="_blank" href="https://emmet.io/">
<a
target="_blank"
rel="noopener noreferrer"
href="https://emmet.io/"
>
Emmet
</a>{' '}
- Sergey Chikuyonok
</li>
<li>
<a target="_blank" href="http://esprima.org/">
<a
target="_blank"
rel="noopener noreferrer"
href="http://esprima.org/"
>
Esprima
</a>{' '}
- Ariya Hidayat
</li>
<li>
<a target="_blank" href="https://github.com/enjalot/Inlet">
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/enjalot/Inlet"
>
Inlet
</a>{' '}
- Ian Johnson
</li>
<li>
<a target="_blank" href="https://webmakerapp.com/">
<a
target="_blank"
rel="noopener noreferrer"
href="https://webmakerapp.com/"
>
Web Maker!
</a>{' '}
- whhat!
@@ -143,11 +180,19 @@ export default class Header extends Component {
<p>
<h3>License</h3>
"Web Maker" is
<a target="_blank" href="https://github.com/chinchang/web-maker">
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/chinchang/web-maker"
>
open-source
</a>{' '}
under the
<a href="https://opensource.org/licenses/MIT" target="_blank">
<a
href="https://opensource.org/licenses/MIT"
target="_blank"
rel="noopener noreferrer"
>
MIT License
</a>.
</p>
@@ -155,4 +200,3 @@ export default class Header extends Component {
</Modal>
);
}
}

14
src/components/KeyboardShortcutsModal.jsx
View File

@@ -1,10 +1,9 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal';
export default class KeyboardShortcutsModal extends Component {
render() {
export function KeyboardShortcutsModal({ show, closeHandler }) {
return (
<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
<Modal show={show} closeHandler={closeHandler}>
<h1>Keyboard Shortcuts</h1>
<div class="flex">
@@ -75,7 +74,11 @@ export default class KeyboardShortcutsModal extends Component {
<span class="kbd-shortcut__keys">Tab</span>
<span class="kbd-shortcut__details">
Emmet code completion{' '}
<a href="https://emmet.io/" target="_blank">
<a
href="https://emmet.io/"
target="_blank"
rel="noopener noreferrer"
>
Read more
</a>
</span>
@@ -89,4 +92,3 @@ export default class KeyboardShortcutsModal extends Component {
</Modal>
);
}
}

280
src/components/Notifications.jsx
View File

@@ -1,7 +1,6 @@
import { h, Component } from 'preact';
import { h } from 'preact';
export default class Notifications extends Component {
render() {
export function Notifications() {
return (
<div>
<h1>Whats new?</h1>
@@ -20,9 +19,9 @@ export default class Notifications extends Component {
<span class="notification__version">3.1.0</span>
<ul>
<li>
<strong>Mobile Support (app only).</strong>: Make the Web Maker
app usable on mobile. This is only for web app as Chrome
extensions don't run on mobile.
<strong>Mobile Support (app only).</strong>: Make the Web Maker app
usable on mobile. This is only for web app as Chrome extensions
don't run on mobile.
</li>
</ul>
</div>
@@ -35,7 +34,11 @@ export default class Notifications extends Component {
</li>
<li>
Add link to our new
<a href="https://web-maker.slack.com" target="_blank">
<a
href="https://web-maker.slack.com"
target="_blank"
rel="noopener noreferrer"
>
Slack channel
</a>{' '}
🤗.
@@ -47,8 +50,8 @@ export default class Notifications extends Component {
<span class="notification__version">3.0.3</span>
<ul>
<li>
<strong>Bugfix (extension)</strong>: "Save as HTML" file saves
with correct extension.
<strong>Bugfix (extension)</strong>: "Save as HTML" file saves with
correct extension.
</li>
</ul>
</div>
@@ -61,6 +64,7 @@ export default class Notifications extends Component {
<a
href="https://medium.com/web-maker/web-maker-3-0-is-here-f158a40eeaee"
target="_blank"
rel="noopener noreferrer"
>
Read the blog post about it
</a>.
@@ -69,31 +73,35 @@ export default class Notifications extends Component {
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 ->
<a href="https://webmakerapp.com/app/" target="_blank">
<a
href="https://webmakerapp.com/app/"
target="_blank"
rel="noopener noreferrer"
>
https://webmakerapp.com/app/
</a>.
</li>
<li>
Now use Web Maker web app on any modern browser (tested with
Chrome and Firefox).
Now use Web Maker web app on any modern browser (tested with Chrome
and Firefox).
</li>
<li>
<strong>User Accounts</strong> - The much requested user accounts
are here. Now maintain your account and store all your creations
in the cloud and access them anywhere anytime.
are here. Now maintain your account and store all your creations in
the cloud and access them anywhere anytime.
</li>
<li>
<strong>New layout mode</strong> - One more layout mode, that lets
you align all the panes vertically.
</li>
<li>
<strong>No more restriction on scripts (Web app only)</strong> -
If you are using the web app, there is no more a restriction to
load scripts from only specific domains. Load any script!
<strong>No more restriction on scripts (Web app only)</strong> - If
you are using the web app, there is no more a restriction to load
scripts from only specific domains. Load any script!
</li>
<li>
<strong>Inline scripts (Web app only)</strong> - The restriction
of writing JavaScript only in JS pane is also removed.
<strong>Inline scripts (Web app only)</strong> - The restriction of
writing JavaScript only in JS pane is also removed.
</li>
</ul>
</div>
@@ -102,24 +110,40 @@ export default class Notifications extends Component {
<span class="notification__version">2.9.7</span>
<ul>
<li>
<a href="https://tailwindcss.com/" target="_blank">
<a
href="https://tailwindcss.com/"
target="_blank"
rel="noopener noreferrer"
>
Tailwind CSS
</a>{' '}
added to popular CSS libraries list. Thanks
<a href="https://github.com/diomed" target="_blank">
<a
href="https://github.com/diomed"
target="_blank"
rel="noopener noreferrer"
>
diomed
</a>.
</li>
<li>
Popular libraries list updated. Thanks
<a href="https://github.com/diomed" target="_blank">
<a
href="https://github.com/diomed"
target="_blank"
rel="noopener noreferrer"
>
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">
<strong>Dev</strong>: Bug fixes and code refactoring to make things
simple. Thanks
<a
href="https://github.com/iamandrewluca"
target="_blank"
rel="noopener noreferrer"
>
iamandrewluca
</a>.
</li>
@@ -136,7 +160,11 @@ export default class Notifications extends Component {
<li>
<strong>Bugfix</strong>: Fix keyboard shortcut to see keyboard
shortcuts :) Thanks
<a href="https://github.com/ClassicOldSong" target="_blank">
<a
href="https://github.com/ClassicOldSong"
target="_blank"
rel="noopener noreferrer"
>
ClassicOldSong
</a>.
</li>
@@ -150,6 +178,7 @@ export default class Notifications extends Component {
<a
href="https://medium.com/web-maker/release-2-9-5-add-library-search-pane-collapsing-ux-improvements-more-1085216c1301"
target="_blank"
rel="noopener noreferrer"
>
Read blog post about this release.
</a>
@@ -157,12 +186,11 @@ export default class Notifications extends Component {
<li>
<strong>Keyboard shortcuts panel</strong>: Add a list of all
keyboard shotcuts. Access with
<code> Ctrl/⌘ + Shift + ?</code> or click keyboard button in
footer.
<code> Ctrl/⌘ + Shift + ?</code> or click keyboard button in footer.
</li>
<li>
<strong>Add external library</strong>: Better UX for searching
third party libraries.
<strong>Add external library</strong>: Better UX for searching third
party libraries.
</li>
<li>
<strong>Improvement</strong>: Code panes now go fullscreen when
@@ -172,7 +200,11 @@ export default class Notifications extends Component {
<li>
<strong>Improvement</strong>: Add
<code>allowfullscreen</code> attribute on iframes. Thanks
<a href="https://github.com/ClassicOldSong" target="_blank">
<a
href="https://github.com/ClassicOldSong"
target="_blank"
rel="noopener noreferrer"
>
ClassicOldSong
</a>.
</li>
@@ -182,7 +214,11 @@ export default class Notifications extends Component {
</li>
<li>
Popular external libraries list updated. Thanks
<a href="https://github.com/jlapitan" target="_blank">
<a
href="https://github.com/jlapitan"
target="_blank"
rel="noopener noreferrer"
>
jlapitan
</a>.
</li>
@@ -193,14 +229,14 @@ export default class Notifications extends Component {
<span class="notification__version">2.9.4</span>
<ul>
<li>
<strong>Improvement</strong>: Atomic CSS (Atomizer) has been
updated to latest version. Now you can do things like psuedo
elements. Learn More.
<strong>Improvement</strong>: Atomic CSS (Atomizer) has been updated
to latest version. Now you can do things like psuedo elements. Learn
More.
</li>
<li>
<strong>Bugfix</strong> - Logging circular objects is now
possible. It won't show in the Web Maker console, but will show
fine in browser's console.
<strong>Bugfix</strong> - Logging circular objects is now possible.
It won't show in the Web Maker console, but will show fine in
browser's console.
</li>
<li>
<strong>Bugfix</strong> - Console's z-index issue has been fixed.
@@ -219,20 +255,27 @@ export default class Notifications extends Component {
<li>
Checkbox that showed on clicking a boolean value is now removed.
Thanks
<a href="https://github.com/gauravmuk" target="_blank">
<a
href="https://github.com/gauravmuk"
target="_blank"
rel="noopener noreferrer"
>
Gaurav Nanda
</a>.
</li>
<li>
<strong>Bugfix</strong> - Screenshots on retina device are now
correct. Thanks
<a href="https://github.com/AshBardhan" target="_blank">
<a
href="https://github.com/AshBardhan"
target="_blank"
rel="noopener noreferrer"
>
Ashish Bardhan
</a>.
</li>
<li>
<strong>Bugfix</strong> - Double console log in detached mode
fixed.
<strong>Bugfix</strong> - Double console log in detached mode fixed.
</li>
<li>
<strong>Bugfix</strong> - Console.clear now works in detached mode
@@ -243,14 +286,22 @@ export default class Notifications extends Component {
</li>
<li>
<strong>Bugfix</strong> - Typo correction in README. Thanks
<a href="https://github.com/AdilMah" target="_blank">
<a
href="https://github.com/AdilMah"
target="_blank"
rel="noopener noreferrer"
>
Adil Mahmood
</a>.
</li>
<li>gstatic.com is available to load external JavaScripts from.</li>
<li>
Popular libraries list updated. Thanks
<a href="https://github.com/diomed" target="_blank">
<a
href="https://github.com/diomed"
target="_blank"
rel="noopener noreferrer"
>
diomed
</a>.
</li>
@@ -259,6 +310,7 @@ export default class Notifications extends Component {
<a
href="https://github.com/chinchang/web-maker/blob/master/CONTRIBUTING.md"
target="_blank"
rel="noopener noreferrer"
>
contribution guidelines
</a>{' '}
@@ -281,6 +333,7 @@ export default class Notifications extends Component {
<a
href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6"
target="_blank"
rel="noopener noreferrer"
>
Read blog post about last release.
</a>
@@ -299,14 +352,14 @@ export default class Notifications extends Component {
<a
href="https://medium.com/web-maker/v2-9-lots-of-goodies-bd1e939571f6"
target="_blank"
rel="noopener noreferrer"
>
Read blog post about this release.
</a>
</li>
<li>
<strong>Detached Preview</strong> - Yes, you read that correct!
You can now detach your preview and send it to your secondary
monitor.
<strong>Detached Preview</strong> - Yes, you read that correct! You
can now detach your preview and send it to your secondary monitor.
</li>
<li>
<strong>Find & Replace</strong> - Long awaited, now its there.
@@ -315,22 +368,33 @@ export default class Notifications extends Component {
<li>
<strong>Atomic CSS (Atomizer) configurations</strong> - Add custom
config for Atomic CSS.
<a href="https://github.com/acss-io/atomizer#api" target="_blank">
<a
href="https://github.com/acss-io/atomizer#api"
target="_blank"
rel="noopener noreferrer"
>
Read more
</a>.
</li>
<li>
<strong>Light mode</strong> - This new setting makes Web Maker
drop some heavy effects like blur etc to gain more performance.
Thanks
<a href="https://github.com/iamandrewluca" target="_blank">
<strong>Light mode</strong> - This new setting makes Web Maker drop
some heavy effects like blur etc to gain more performance. Thanks
<a
href="https://github.com/iamandrewluca"
target="_blank"
rel="noopener noreferrer"
>
Andrew
</a>.
</li>
<li>
<strong>Preserve logs setting</strong> - Choose whether or not to
preserve logs across preview refreshes. Thanks
<a href="https://github.com/BasitAli" target="_blank">
<a
href="https://github.com/BasitAli"
target="_blank"
rel="noopener noreferrer"
>
Basit
</a>.
</li>
@@ -359,8 +423,7 @@ export default class Notifications extends Component {
list.
</li>
<li>
UTF-8 charset added to preview HTML to support universal
characters.
UTF-8 charset added to preview HTML to support universal characters.
</li>
</ul>
</div>
@@ -372,13 +435,14 @@ export default class Notifications extends Component {
<a
href="https://medium.com/web-maker/release-v2-8-is-out-f44e6ea5d9c4"
target="_blank"
rel="noopener noreferrer"
>
Read blog post about this release.
</a>
</li>
<li>
<strong>Auto Save</strong> - Your creations now auto-save after
your first manual save. This is configurable from settings.
<strong>Auto Save</strong> - Your creations now auto-save after your
first manual save. This is configurable from settings.
</li>
<li>
<strong>Base2Tone-Meadow Editor Theme</strong> - First user
@@ -396,8 +460,8 @@ export default class Notifications extends Component {
Auto-completion suggestion can now be switched off from settings.
</li>
<li>
<strong>Improvement</strong> - Stop white flicker in editor when
the app opens.
<strong>Improvement</strong> - Stop white flicker in editor when the
app opens.
</li>
<li>
<strong>Bugfix</strong> - Add Babel Polyfill to enable use of
@@ -433,7 +497,11 @@ export default class Notifications extends Component {
<li>
<strong>Framer.js support</strong> - You can now load the latest
framer.js library from
<a href="https://builds.framerjs.com/" target="_blank">
<a
href="https://builds.framerjs.com/"
target="_blank"
rel="noopener noreferrer"
>
framer builds page
</a>{' '}
and start coding framer prototypes.
@@ -442,13 +510,13 @@ export default class Notifications extends Component {
<strong>Bugfix</strong>: Edit on CodePen is back in action.
</li>
<li>
<strong>Bugfix</strong>: Autocompletion menu doesn't show on cut
and paste now.
<strong>Bugfix</strong>: Autocompletion menu doesn't show on cut and
paste now.
</li>
<li>
<strong>Bugfix</strong>: Updated & fixed urls of some common
external libraries to latest versions. UIKit3 & Bootstrap 4α are
now in the list.
external libraries to latest versions. UIKit3 & Bootstrap 4α are now
in the list.
</li>
<li>Preprocessor selector are now more accessible.</li>
</ul>
@@ -459,10 +527,11 @@ export default class Notifications extends Component {
<ul>
<li>
<strong>Fork any creation!</strong>: Now you can fork any existing
creation of yours to start a new work based on it. One big use
case of this feature is "Templates"!
creation of yours to start a new work based on it. One big use case
of this feature is "Templates"!
<a
target="_blank"
rel="noopener noreferrer"
href="https://kushagragour.in/blog/2017/05/web-maker-fork-templates/?utm_source=webmakerapp&utm_medium=referral"
>
Read more about it
@@ -475,8 +544,8 @@ export default class Notifications extends Component {
</li>
<li>Updated most used external libraries to latest versions.</li>
<li>
<strong>Bugfix</strong>: Add missing Bootstrap JS file to most
used external libraries list.
<strong>Bugfix</strong>: Add missing Bootstrap JS file to most used
external libraries list.
</li>
<li>
Several other minor bugfixes and improvements to make Web Maker
@@ -494,8 +563,8 @@ export default class Notifications extends Component {
<span class="notification__version">2.6.1</span>
<ul>
<li>
<strong>Bugfix</strong>: Emojis vanishing while exporting to
Codepen has been fixed.
<strong>Bugfix</strong>: Emojis vanishing while exporting to Codepen
has been fixed.
</li>
<li>
<strong>Bugfix</strong>:
@@ -520,6 +589,7 @@ export default class Notifications extends Component {
<a
href="https://kushagragour.in/blog/2017/05/web-maker-console-is-here/?utm_source=webmakerapp&utm_medium=referral"
target="_blank"
rel="noopener noreferrer"
>
blog post about it
</a>.
@@ -538,29 +608,34 @@ export default class Notifications extends Component {
<li>
<strong>Atomic CSS</strong>: Use can now use Atomic CSS(ACSS) in
your work!
<a href="https://acss.io/" target="_blank">
<a
href="https://acss.io/"
target="_blank"
rel="noopener noreferrer"
>
Read more about it here
</a>.
</li>
<li>
<strong>Search your saved creations</strong>: Easily search
through all your saved creations by title.
<strong>Search your saved creations</strong>: Easily search through
all your saved creations by title.
</li>
<li>
<strong>Configurable Auto-preview</strong> - You can turn off the
auto preview in settings if you don't want the preview to update
as you type.
auto preview in settings if you don't want the preview to update as
you type.
</li>
<li>
<strong>Configurable refresh on resize</strong> - You can
configure whether you want the preview to refresh when you resize
the preview panel.
<strong>Configurable refresh on resize</strong> - You can configure
whether you want the preview to refresh when you resize the preview
panel.
</li>
<li>
<strong>Bugfix</strong> - Fix indentation
<a
href="https://github.com/chinchang/web-maker/issues/104"
target="_blank"
rel="noopener noreferrer"
>
issue
</a>{' '}
@@ -609,12 +684,12 @@ export default class Notifications extends Component {
</li>
<li>
<strong>Important</strong>: Due to security policy changes from
Chrome 57 onwards, Web Maker now allows loading external
JavaScript libraries only from certain whitelisted domains
(localhost, 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/)
Chrome 57 onwards, Web Maker now allows loading external JavaScript
libraries only from certain whitelisted domains (localhost,
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/)
</li>
<li>Save button now highlights when you have unsaved changes.</li>
<li>Jade is now called Pug. Just a name change.</li>
@@ -636,8 +711,7 @@ export default class Notifications extends Component {
remembered by the editor.
</li>
<li>
Title of the creation is used for the file name when saving as
HTML.
Title of the creation is used for the file name when saving as HTML.
</li>
</ul>
</div>
@@ -645,9 +719,8 @@ export default class Notifications extends Component {
<span class="notification__version">2.3.0</span>
<ul>
<li>
<strong>Add Library Autocompletion</strong> - Just start typing
the name of library and you'll be shown matching libraries from
cdnjs.
<strong>Add Library Autocompletion</strong> - Just start typing the
name of library and you'll be shown matching libraries from cdnjs.
</li>
<li>
<strong>Preview Screenshot Capture</strong> - Want to grab a nice
@@ -658,8 +731,8 @@ export default class Notifications extends Component {
Shift-Tab to auto-indent it!
</li>
<li>
<strong>Keyboard Navigation in Saved List</strong> - Now select
your creation using arrow keys and hit ENTER to open it.
<strong>Keyboard Navigation in Saved List</strong> - Now select your
creation using arrow keys and hit ENTER to open it.
</li>
<li>Highlight active line in code panes.</li>
<li>
@@ -691,8 +764,7 @@ export default class Notifications extends Component {
without refresh when just CSS is changed.
</li>
<li>
<strong>Bugfix</strong> - Indentation fixed while going on new
line.
<strong>Bugfix</strong> - Indentation fixed while going on new line.
</li>
<li>
<strong>Bugfix</strong> - Works even in Chrome Canary now. Though
@@ -712,8 +784,8 @@ export default class Notifications extends Component {
CSS.
</li>
<li>
<strong>Code Folding</strong> - Collapse large code blocks for
easy editing.
<strong>Code Folding</strong> - Collapse large code blocks for easy
editing.
</li>
<li>
<strong>Bugfix</strong> - Support JSX in JavaScript.
@@ -725,8 +797,8 @@ export default class Notifications extends Component {
<span class="notification__version">2.0.0</span>
<ul>
<li>
<strong>Save and Load</strong> - Long pending and super-useful,
now you can save your creations and resume them anytime later.
<strong>Save and Load</strong> - Long pending and super-useful, now
you can save your creations and resume them anytime later.
</li>
<li>
<strong>Insert JS & CSS</strong> - Load popular JavaScript & CSS
@@ -738,12 +810,12 @@ export default class Notifications extends Component {
every creation!
</li>
<li>
<strong>Quick color & number change</strong> - Click on any color
or number and experiment with quick values using a slider.
<strong>Quick color & number change</strong> - Click on any color or
number and experiment with quick values using a slider.
</li>
<li>
<strong>Linting</strong> - See your code errors right where you
are coding.
<strong>Linting</strong> - See your code errors right where you are
coding.
</li>
<li>No more browser hang due to infinite loops!</li>
</ul>
@@ -763,9 +835,8 @@ export default class Notifications extends Component {
<span class="notification__version">1.6.0</span>
<ul>
<li>
You can now configure Web-Maker to not replace new tab page from
the settings. It is always accessible from the icon in the
top-right.
You can now configure Web-Maker to not replace new tab page from the
settings. It is always accessible from the icon in the top-right.
</li>
<li>
Download current code as HTML file with Ctrl/⌘ + S keyboard
@@ -780,4 +851,3 @@ export default class Notifications extends Component {
</div>
);
}
}

18
src/components/Profile.jsx
View File

@@ -1,33 +1,26 @@
import { h, Component } from 'preact';
import { h } from 'preact';
const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
export default class Profile extends Component {
render() {
export function Profile({ user, logoutBtnHandler }) {
return (
<div class="tac">
<img
height="80"
class="profile-modal__avatar-img"
src={
this.props.user
? this.props.user.photoURL || DEFAULT_PROFILE_IMG
: ''
}
src={user ? user.photoURL || DEFAULT_PROFILE_IMG : ''}
id="profileAvatarImg"
alt="Profile image"
/>
<h3 id="profileUserName" class="mb-2">
{this.props.user && this.props.user.displayName
? this.props.user.displayName
: 'Anonymous Creator'}
{user && user.displayName ? user.displayName : 'Anonymous Creator'}
</h3>
<p>
<button
class="btn"
aria-label="Logout from your account"
onClick={this.props.logoutBtnHandler}
onClick={logoutBtnHandler}
>
Logout
</button>
@@ -35,4 +28,3 @@ export default class Profile extends Component {
</div>
);
}
}

2
src/components/SavedItemPane.jsx
View File

@@ -1,5 +1,5 @@
import { h, Component } from 'preact';
import { getHumanDate } from '../utils';
import { log, getHumanDate } from '../utils';
import { trackEvent } from '../analytics';
import { itemService } from '../itemService';
import { alertsService } from '../notifications';

14
src/components/SupportDeveloperModal.jsx
View File

@@ -13,12 +13,20 @@ export default class SupportDeveloperModal extends Component {
<h1>Support the Developer</h1>
<p>
Hi,{' '}
<a href="https://kushagragour.in" target="_blank">
<a
href="https://kushagragour.in"
target="_blank"
rel="noopener noreferrer"
>
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">
<a
href="https://kushagragour.in/lab/"
target="_blank"
rel="noopener noreferrer"
>
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
@@ -35,6 +43,7 @@ export default class SupportDeveloperModal extends Component {
class="onboard-selection"
href="https://patreon.com/kushagra"
target="_blank"
rel="noopener noreferrer"
aria-label="Make a monthly pledge on Patreon"
>
<img src="patreon.png" height="60" alt="Become a patron image" />
@@ -47,6 +56,7 @@ export default class SupportDeveloperModal extends Component {
<a
href="https://www.paypal.me/kushagragour"
target="_blank"
rel="noopener noreferrer"
aria-label="Make a one time donation on Paypal"
>
Or, make a one time donation

9
src/components/app.jsx
View File

@@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import { Router } from 'preact-router';
import MainHeader from './MainHeader.jsx';
import ContentWrap from './ContentWrap.jsx';
@@ -7,7 +6,6 @@ import Footer from './Footer.jsx';
import SavedItemPane from './SavedItemPane.jsx';
import AddLibrary from './AddLibrary.jsx';
import Modal from './Modal.jsx';
import HelpModal from './HelpModal.jsx';
import Login from './Login.jsx';
import {
log,
@@ -19,7 +17,7 @@ import {
} from '../utils';
import { itemService } from '../itemService';
import '../db';
import Notifications from './Notifications';
import { Notifications } from './Notifications';
import Settings from './Settings.jsx';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
import { trackEvent } from '../analytics';
@@ -27,14 +25,15 @@ import { deferred } from '../deferred';
import { alertsService } from '../notifications';
import firebase from 'firebase/app';
import 'firebase/auth';
import Profile from './Profile';
import { Profile } from './Profile';
import { auth } from '../auth';
import SupportDeveloperModal from './SupportDeveloperModal';
import KeyboardShortcutsModal from './KeyboardShortcutsModal';
import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
import { takeScreenshot } from '../takeScreenshot';
import AskToImportModal from './AskToImportModal';
import { Alerts } from './Alerts';
import Portal from 'preact-portal';
import { HelpModal } from './HelpModal';
if (module.hot) {
require('preact/debug');