mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-22 22:41:12 +02:00
add website as monorepo package and migrate to 11ty :)
This commit is contained in:
Kushagra Gour
5
.gitignore
vendored
5
.gitignore
vendored
@@ -1,6 +1,11 @@
|
||||
### OSX ###
|
||||
.DS_Store
|
||||
|
||||
### builds
|
||||
build
|
||||
dist
|
||||
_site
|
||||
|
||||
### PhPStorm / IntellJ IDEA ###
|
||||
.idea/
|
||||
*.iml
|
||||
|
||||
@@ -10,7 +10,7 @@ or
|
||||
|
||||
### [Install Chrome extension](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
|
||||
|
||||
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
|
||||
193
docs/README.md
193
docs/README.md
@@ -1,193 +0,0 @@
|
||||
# Getting started
|
||||
|
||||
## What is Web Maker
|
||||
|
||||
**Web-Maker** is a blazing fast & offline frontend playground for your web experiments. Its available as a Chrome extension and a web app as well. Both are offline usable!
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
* Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
|
||||
* Works offline
|
||||
* Inbuilt Console
|
||||
* Save and load your creations
|
||||
* Auto-save feature
|
||||
* Code auto-completion
|
||||
* Easy addition of popular JS & CSS libraries
|
||||
* Import & Export all creations anytime, anywhere
|
||||
* Multiple editor themes & other configurable settings
|
||||
* Font options + use any system font!
|
||||
* Very easily accessible. Simply open a new tab in Chrome!
|
||||
* Multiple layouts to choose from
|
||||
* Capture preview screenshot
|
||||
* Save as HTML file
|
||||
* Edit in CodePen
|
||||
|
||||
## Installation
|
||||
|
||||
If you haven't already installed Web Maker, you can do so from the Web Maker home page.
|
||||
|
||||
**Web app**
|
||||
|
||||
The web app requires no installation.
|
||||
|
||||
**Chrome extension**
|
||||
|
||||
Here is the link to the Chrome extension 👉 [Chrome Web Store](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
|
||||
|
||||
## Starting Web Maker
|
||||
|
||||
**Web app**
|
||||
|
||||
The web app can be simply opened by visiting [https://webmakerapp.com/app/](https://webmakerapp.com/app/).
|
||||
|
||||
**Chrome extension**
|
||||
|
||||
Once the Chrome extension is installed, you'll see a Web Maker icon in the right-top of your Chrome browser. Click it and Web Maker will open in a new tab.
|
||||
|
||||
## Your first code
|
||||
|
||||
Okay, so now you might be wondering what do I do with Web Maker open in front of me? Wait no more! Simply put, Web Maker lets you write HTML, CSS & JavaScript code and see instant preview. So lets write some code.
|
||||
|
||||
You should be seeing 3 code panes with the headings: **HTML**, **CSS** and _JS_. Each code pane is dedicated place to write code in the respective languages. Go ahead and click inside the **HTML** code pane to focus it and then paste the following HTML code:
|
||||
|
||||
```html
|
||||
<h1>My first HTML</h1>
|
||||
```
|
||||
|
||||
As soon as you paste the code, you should see the preview of your HTML in the white preview area.
|
||||
|
||||
|
||||
|
||||
This is a very simple web page we just made. Going forward, you might need to put CSS and JavaScript too. You can write them in their respective code panes and see instant preview.
|
||||
|
||||
## A look at the user interface
|
||||
|
||||
Web Maker's user interface is made to feel simple and accessible so that you have all the required things at your tips and still doesn't look cluttered for someone using it for first time.
|
||||
|
||||
### Code Panes
|
||||
|
||||
Code panes are the actually sections where you write your code. You get 3 panes, one for HTML, CSS & JavaScript each.
|
||||
|
||||
### Preview
|
||||
|
||||
Alongside the code panes, is a white (by default) area where you see the preview of your code. Its an iframe that is feeded your HTML, CSS & JavaScript as you type to generate realtime preview.
|
||||
|
||||
### Title
|
||||
|
||||
On the top-left side you can see the title of your creation. Click on it to edit it anytime.
|
||||
|
||||
### Create New, Save or Open a creation
|
||||
|
||||
On the top-right side, you have the 3 buttons to create a new creation or save an open one. Also you can access all your saved creations from the _Saved Creations Pane_ by clicking the _Open_ button.
|
||||
|
||||
From the _Saved Creations Pane_ you can also export or import all your creations at once. Exporting generates a JSON file which you can backup in your Google Drive, Dropbox etc.
|
||||
|
||||
### Settings
|
||||
|
||||
On the bottom right-most end you can access the app settings. Lots and lots of useful settings in there. To know in details about settings, [jump right here]().
|
||||
|
||||
### Changelog
|
||||
|
||||
Besides the Settings button, is the Changelog button where you can read all the changes in the app for each release version.
|
||||
|
||||
### Layouts
|
||||
|
||||
Next you have some layout options to choose from. Select whats suits you best. This setting is saved per creation basis, so each of your creation can show in a different layout that you see best for it.
|
||||
|
||||
### Download/Share creation
|
||||
|
||||
Web Maker gives you quite some options to export your current creation to share with the world. You can save it as a single HTML file to upload it on a server, or open it in CodePen or take a screenshot of your preview.
|
||||
|
||||
### Export/Import creations
|
||||
|
||||
[Read blog post about exporting & importing your creations](https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc).
|
||||
|
||||
### Help and Share
|
||||
|
||||
On the bottom-left side are few help options, one of which shows you all th keyboard shortcuts available inside the app. Also there is a tweet button you can use to share Web Maker with everyone :)
|
||||
|
||||
## User account
|
||||
|
||||
> Currently only available in Web app.
|
||||
|
||||
You can login with your favourite social account to create a user account inside Web Maker and save all your creations in the cloud. That way no matter on which computer you are, you can simply open Web Maker, login with your account and get back all your creations to continue work!
|
||||
|
||||
## Code panes
|
||||
|
||||
Coming soon...
|
||||
|
||||
## Pre-processors
|
||||
|
||||
Web Maker supports bunch of pre-processors in for HTML, CSS & JavaScript each. You can switch to any for your current creation by click on each pane's title.
|
||||
|
||||
<video src="./images/switching-preprocessor.mp4" loop autoplay></video>
|
||||
|
||||
## Adding external libraries
|
||||
|
||||
Coming soon...
|
||||
|
||||
## Layouts
|
||||
|
||||
Coming soon...
|
||||
|
||||
## Keyboard shortcuts
|
||||
|
||||
`Ctrl/⌘ + Shift + ?` See keyboard shortcuts
|
||||
|
||||
`Ctrl/⌘ + Shift + 5` Refresh preview
|
||||
|
||||
`Ctrl/⌘ + S` Save current creations
|
||||
|
||||
`Ctrl/⌘ + O` Open list of saved creations
|
||||
|
||||
`Ctrl + L` Clear console (works when console input is focused)
|
||||
|
||||
`Esc` Close saved creations panel & modals
|
||||
|
||||
`Ctrl/⌘ + F` Find
|
||||
|
||||
`Ctrl/⌘ + G` Select next match
|
||||
|
||||
`Ctrl/⌘ + Shift + G` Select previous match
|
||||
|
||||
`Ctrl/⌘ + Opt/Alt + F` Find & replace
|
||||
|
||||
`Shift + Tab` Realign code
|
||||
|
||||
`Ctrl/⌘ + ]` Indent code right
|
||||
|
||||
`Ctrl/⌘ + [` Indent code left
|
||||
|
||||
`Tab` Emmet code completion Read more
|
||||
|
||||
`Ctrl/⌘ + /` Single line comment
|
||||
|
||||
## Settings
|
||||
|
||||
Coming soon...
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
[See on Github](https://github.com/chinchang/web-maker/issues?q=label%3Afaq)
|
||||
|
||||
## From the Developer
|
||||
|
||||
Hi! I am [Kushagra Gour](https://twitter.com/chinchang457), a frontend developer from India. I created Web Maker as a side project from myself because I wanted a frontend playground that was fast and didn't have to rely on network latency to generate realtime preview. Also something which I could use whenever and wherever I wanted, even wihtout Internet! I have written articles about why and how I created Web Maker and how you can benefit from it as a developer.
|
||||
|
||||
* FreeCodeCamp: https://medium.freecodecamp.org/web-maker-how-i-built-a-fast-offline-front-end-playground-9fe3629bc86f
|
||||
* Sitepoint: https://www.sitepoint.com/web-maker-an-offline-browser-based-codepen-alternative/
|
||||
|
||||
Make sure to read them if you like to get more behind the scenes of my journey with Web Maker.
|
||||
|
||||
Oh yes, I am [running a Patreon campaign](https://www.patreon.com/kushagra) to support my free and open-source projects such as Web Maker. Consider pledging if you use and love Web Maker. 🤗
|
||||
|
||||
## Let's Talk
|
||||
|
||||
Want to send in some suggestions, comments, feature requests or just have a question? Here are your options:
|
||||
|
||||
* Twitter — [ @webmakerApp](https://twitter.com/webmakerapp)
|
||||
* [Chat](https://web-maker.slack.com)
|
||||
* [Community forum](https://spectrum.chat/web-maker)
|
||||
* [Github repository](https://github.com/chinchang/web-maker/issues)
|
||||
@@ -1,23 +0,0 @@
|
||||
- Getting started
|
||||
- [Quick start](quickstart.md)
|
||||
- [Writing more pages](more-pages.md)
|
||||
- [Custom navbar](custom-navbar.md)
|
||||
- [Cover page](cover.md)
|
||||
|
||||
- Customization
|
||||
- [Configuration](configuration.md)
|
||||
- [Themes](themes.md)
|
||||
- [List of Plugins](plugins.md)
|
||||
- [Write a Plugin](write-a-plugin.md)
|
||||
- [Markdown configuration](markdown.md)
|
||||
- [Language highlighting](language-highlight.md)
|
||||
|
||||
- Guide
|
||||
- [Deploy](deploy.md)
|
||||
- [Helpers](helpers.md)
|
||||
- [Vue compatibility](vue.md)
|
||||
- [CDN](cdn.md)
|
||||
- [Offline Mode(PWA)](pwa.md)
|
||||
- [Server-client renderer(SSR)](ssr.md)
|
||||
|
||||
- [Changelog](changelog.md)
|
||||
2
docs/docsify.min.js
vendored
2
docs/docsify.min.js
vendored
File diff suppressed because one or more lines are too long
382
docs/guide.md
382
docs/guide.md
@@ -1,382 +0,0 @@
|
||||
# Configuration
|
||||
|
||||
**docsify** supports two different ways of configuration. You can configure the `window.$docsify` or write configuration on the script tag via `data-*` attributes.
|
||||
|
||||
```html
|
||||
<!-- by $docsify -->
|
||||
<script>
|
||||
window.$docsify = {
|
||||
repo: 'QingWei-Li/docsify',
|
||||
maxLevel: 3,
|
||||
coverpage: true
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- or data-* -->
|
||||
<script
|
||||
src="//unpkg.com/docsify"
|
||||
data-repo="QingWei-Li/docsify"
|
||||
data-max-level="3"
|
||||
data-coverpage>
|
||||
</script>
|
||||
```
|
||||
|
||||
Both ways are compatible. However, the first way is recommended. It is clear and can be configured in a separate file.
|
||||
|
||||
!> In `window.$docsfiy`, the options should be written by camelCase.
|
||||
|
||||
## el
|
||||
|
||||
- Type: `String`
|
||||
- Default: `#app`
|
||||
|
||||
The DOM element to be mounted on initialization. It can be a CSS selector string or an actual HTMLElement.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
el: '#app'
|
||||
}
|
||||
```
|
||||
|
||||
## repo
|
||||
|
||||
- Type: `String`
|
||||
- Default: `null`
|
||||
|
||||
Configure the repository url or a string of `username/repo` can add the [GitHub Corner](http://tholman.com/github-corners/) widget in the top right corner of the site.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
repo: 'QingWei-Li/docsify',
|
||||
// or
|
||||
repo: 'https://github.com/QingWei-Li/docsify/'
|
||||
}
|
||||
```
|
||||
|
||||
## max-level
|
||||
|
||||
- Type: `Number`
|
||||
- Default: `6`
|
||||
|
||||
Maximum Table of content level.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
maxLevel: 4
|
||||
}
|
||||
```
|
||||
|
||||
## load-navbar
|
||||
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
Loads navbar from the Markdown file `_navbar.md` if **true**, or else from the path specified.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// load from _navbar.md
|
||||
loadNavbar: true,
|
||||
|
||||
// load from nav.md
|
||||
loadNavbar: 'nav.md'
|
||||
}
|
||||
```
|
||||
|
||||
## load-sidebar
|
||||
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
Loads sidebar from the Markdown file `_sidebar.md` if **true**, or else from the path specified.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// load from _sidebar.md
|
||||
loadSidebar: true,
|
||||
|
||||
// load from summary.md
|
||||
loadSidebar: 'summary.md'
|
||||
}
|
||||
```
|
||||
|
||||
## sub-max-level
|
||||
|
||||
- Type: `Number`
|
||||
- Default: `0`
|
||||
|
||||
Add table of contents (TOC) in custom sidebar.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
subMaxLevel: 2
|
||||
}
|
||||
```
|
||||
|
||||
## auto2top
|
||||
|
||||
- Type: `Boolean`
|
||||
- Default: `false`
|
||||
|
||||
Scrolls to the top of the screen when the route is changed.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
auto2top: true
|
||||
}
|
||||
```
|
||||
|
||||
## homepage
|
||||
|
||||
- Type: `String`
|
||||
- Default: `README.md`
|
||||
|
||||
`README.md` in your docs folder will be treated as homepage for your website, but sometimes you may need to serve another file as your homepage.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// Change to /home.md
|
||||
homepage: 'home.md',
|
||||
|
||||
// Or use the readme in your repo
|
||||
homepage: 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/README.md'
|
||||
}
|
||||
```
|
||||
|
||||
## base-path
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Base path of the website. You can set it to another directory or another domain name.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
basePath: '/path/',
|
||||
|
||||
// Load the files from another site
|
||||
basePath: 'https://docsify.js.org/',
|
||||
|
||||
// Even can load files from other repo
|
||||
basePath: 'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
|
||||
}
|
||||
```
|
||||
|
||||
## coverpage
|
||||
|
||||
- Type: `Boolean|String`
|
||||
- Default: `false`
|
||||
|
||||
Activate the [cover feature](cover.md). If true, it will load from `_coverpage.md`.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
coverpage: true,
|
||||
|
||||
// Custom file name
|
||||
coverpage: 'cover.md'
|
||||
}
|
||||
```
|
||||
|
||||
## name
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Website name as it appears in the sidebar.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
name: 'docsify'
|
||||
}
|
||||
```
|
||||
|
||||
## name-link
|
||||
|
||||
- Type: `String`
|
||||
- Default: `window.location.pathname`
|
||||
|
||||
The name of the link.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
nameLink: '/',
|
||||
|
||||
// For each route
|
||||
nameLink: {
|
||||
'/zh-cn/': '/zh-cn/',
|
||||
'/': '/'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## markdown
|
||||
|
||||
- Type: `Function`
|
||||
|
||||
See [Markdown configuration](markdown.md).
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
// object
|
||||
markdown: {
|
||||
smartypants: true,
|
||||
renderer: {
|
||||
link: function() {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// function
|
||||
markdown: function (marked, renderer) {
|
||||
// ...
|
||||
return marked
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## theme-color
|
||||
|
||||
- Type: `String`
|
||||
|
||||
Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) feature and polyfill in old browser.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
themeColor: '#3F51B5'
|
||||
}
|
||||
```
|
||||
|
||||
## alias
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
Set the route alias. You can freely manage routing rules. Supports RegExp.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
alias: {
|
||||
'/foo/(+*)': '/bar/$1', // supports regexp
|
||||
'/zh-cn/changelog': '/changelog',
|
||||
'/changelog': 'https://raw.githubusercontent.com/QingWei-Li/docsify/master/CHANGELOG'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## auto-header
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.md`, prepend a header to the page before converting it to html. Compare [#78](https://github.com/QingWei-Li/docsify/issues/78).
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
loadSidebar: true,
|
||||
autoHeader: true
|
||||
}
|
||||
```
|
||||
|
||||
## execute-script
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
Execute the script on the page. Only parse the first script tag([demo](themes)). If Vue is present, it is turned on by default.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
executeScript: true
|
||||
}
|
||||
```
|
||||
|
||||
```markdown
|
||||
## This is test
|
||||
|
||||
<script>
|
||||
console.log(2333)
|
||||
</script>
|
||||
```
|
||||
|
||||
Note that if you are running an external script, e.g. an embedded jsfiddle demo, make sure to include the [external-script](plugins.md?id=external-script) plugin.
|
||||
|
||||
## no-emoji
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
Disabled emoji parse.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
noEmoji: true
|
||||
}
|
||||
```
|
||||
|
||||
## merge-navbar
|
||||
|
||||
- type: `Boolean`
|
||||
|
||||
Navbar will be merged with the sidebar on smaller screens.
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
mergeNavbar: true
|
||||
}
|
||||
```
|
||||
|
||||
## format-updated
|
||||
|
||||
- type: `String|Function`
|
||||
|
||||
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
|
||||
See https://github.com/lukeed/tinydate#patterns
|
||||
```js
|
||||
window.$docsify = {
|
||||
formatUpdated: '{MM}/{DD} {HH}:{mm}',
|
||||
|
||||
formatUpdated: function (time) {
|
||||
// ...
|
||||
|
||||
return time
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## external-link-target
|
||||
|
||||
- type: `String`
|
||||
- default: `_self`
|
||||
|
||||
Target to open external links. Default `'_blank'` (new window/tab)
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
externalLinkTarget: '_self' // default: '_blank'
|
||||
}
|
||||
```
|
||||
|
||||
## router-mode
|
||||
|
||||
- type: `String`
|
||||
- default: `history`
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
routerMode: 'history' // default: 'hash'
|
||||
}
|
||||
```
|
||||
|
||||
## noCompileLinks
|
||||
|
||||
- type: `Array`
|
||||
|
||||
|
||||
Sometimes we do not want docsify to handle our links. See [#203](https://github.com/QingWei-Li/docsify/issues/203)
|
||||
|
||||
|
||||
```js
|
||||
window.$docsify = {
|
||||
noCompileLinks: [
|
||||
'/foo',
|
||||
'/bar/.*'
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Documentation - Web Maker</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Every help you need for Web Maker">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="vue.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Web Maker',
|
||||
nameLink: '/',
|
||||
repo: 'https://github.com/chinchang/web-maker',
|
||||
// loadSidebar: true
|
||||
}
|
||||
</script>
|
||||
<script src="docsify.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
1087
index.html
1087
index.html
File diff suppressed because it is too large
Load Diff
37
packages/website/.eleventy.js
Normal file
37
packages/website/.eleventy.js
Normal file
@@ -0,0 +1,37 @@
|
||||
const markdownIt = require('markdown-it');
|
||||
const markdownItAnchor = require('markdown-it-anchor');
|
||||
|
||||
const markdownItConfig = {
|
||||
html: true,
|
||||
breaks: false,
|
||||
linkify: true
|
||||
};
|
||||
const markdownItAnchorConfig = {
|
||||
permalink: true,
|
||||
permalinkClass: 'bookmark',
|
||||
permalinkSymbol: '#'
|
||||
};
|
||||
|
||||
const markdownLib = markdownIt(markdownItConfig).use(
|
||||
markdownItAnchor,
|
||||
markdownItAnchorConfig
|
||||
);
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.setLibrary('md', markdownLib);
|
||||
|
||||
eleventyConfig.addFilter('clean', path => {
|
||||
if (path === '/') return path;
|
||||
if (path === 'https://webmaker.app/') return path;
|
||||
if (path.endsWith('/')) return path.slice(0, -1);
|
||||
return path;
|
||||
});
|
||||
|
||||
eleventyConfig.addPassthroughCopy('css');
|
||||
eleventyConfig.addPassthroughCopy('images');
|
||||
eleventyConfig.addPassthroughCopy('icons');
|
||||
eleventyConfig.addPassthroughCopy('manifest.json');
|
||||
eleventyConfig.addPassthroughCopy('robots.txt');
|
||||
|
||||
return {};
|
||||
};
|
||||
1
packages/website/.eleventyignore
Normal file
1
packages/website/.eleventyignore
Normal file
@@ -0,0 +1 @@
|
||||
functions
|
||||
1
packages/website/README.md
Normal file
1
packages/website/README.md
Normal file
@@ -0,0 +1 @@
|
||||
# Website
|
||||
568
packages/website/_includes/default.html
Normal file
568
packages/website/_includes/default.html
Normal file
@@ -0,0 +1,568 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{% if page.url == '/' %}Web Maker{% else %}{{ title}} - Web Maker{% endif %}</title>
|
||||
<meta property="og:title" content="Web Maker">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="A blazing fast & offline web playground">
|
||||
<meta property="og:description" content="A blazing fast & offline web playground">
|
||||
<meta property="og:image" content="https://webmaker.app/ss1.png">
|
||||
<link rel="image_src" href="/images/ss1.png?v3.0.0" />
|
||||
<meta name="twitter:image" content="https://webmakerapp.com/ss1.png" />
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="icon" href="/images/icon-128.png">
|
||||
|
||||
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/lkfkkhfhhdkiemehlpkgjeojomhpccnh">
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial;
|
||||
background: white;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #3a3a3a;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.ta-c {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.homepage-title {
|
||||
font-size: 3.1em;
|
||||
margin: 0;
|
||||
padding: 0.25em 0 0;
|
||||
text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'Arial', cursive;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0.7em;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
html {
|
||||
/* font-size: 0.9em; */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1A5A7A;
|
||||
}
|
||||
|
||||
.hero a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
background: #2b273c;
|
||||
color: #a7a1bd;
|
||||
padding: 2em 1em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
transition: 0.25s ease;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.btn:not(.disabled):hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
color: white;
|
||||
background-color: #4d7bd6;
|
||||
border: 2px solid #4569b1;
|
||||
line-height: 2.5rem;
|
||||
margin: 1rem 0 0;
|
||||
width: 80%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.download-btn.disabled {
|
||||
filter: grayscale(50);
|
||||
}
|
||||
|
||||
.web-app-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.web-app-btn:hover:after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.web-app-btn:hover:before {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.btn>img {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.site-footer {
|
||||
text-align: center;
|
||||
margin: 2em 0 1em;
|
||||
/* color: rgba(255, 255, 255, 0.7); */
|
||||
}
|
||||
|
||||
a svg {
|
||||
fill: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
a:hover svg {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.social-bar {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
.social-bar>a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.social-bar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0.5em;
|
||||
/* padding: 0.5em 1em; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
border-bottom: 7px solid;
|
||||
padding-bottom: 0.4em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feature svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: #444;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.people-say {
|
||||
margin: 4em 0 4em;
|
||||
/* width: 100vw; */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.people-say-top {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.people-say-bottom {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.say {
|
||||
color: inherit;
|
||||
padding: 10px 20px;
|
||||
margin: 10px 10px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
border-radius: 5px;
|
||||
font-size: 0.95rem;
|
||||
background: #f8f8f8;
|
||||
text-align: left;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.say:hover {
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.say p {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.say__name {
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.say__name img {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.say__handle {
|
||||
opacity: 0.7;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
html {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 3000px) {
|
||||
html {
|
||||
font-size: 2.1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 751px) {
|
||||
.homepage-title {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 2em;
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 8em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
height: 35vh;
|
||||
}
|
||||
|
||||
.web-app-btn:after {
|
||||
right: -50px;
|
||||
}
|
||||
|
||||
.web-app-btn:before {
|
||||
right: -22px;
|
||||
}
|
||||
|
||||
.social-bar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.social-bar>a {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.feature-box {
|
||||
min-width: 400px;
|
||||
/* width: 80vw; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.feature {
|
||||
padding: 0.5em 2em;
|
||||
flex: 1;
|
||||
flex-basis: 16vw;
|
||||
padding: 0.5em 2em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
background: white;
|
||||
box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
|
||||
padding: 2rem;
|
||||
position: fixed;
|
||||
will-change: transform;
|
||||
bottom: 0;
|
||||
transform: translateY(101%);
|
||||
width: 70vw;
|
||||
margin-left: -35vw;
|
||||
left: 50%;
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
transition: 0.4s cubic-bezier(0.77, -0.1, 0.13, 0.9);
|
||||
}
|
||||
|
||||
.info.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.people-say-top,
|
||||
.people-say-bottom {
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.say {
|
||||
width: 18vw;
|
||||
flex-shrink: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.say p {
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% if page.fileSlug == '' %}
|
||||
<div class="hero">
|
||||
<header class="header">
|
||||
<svg class="logo" width="160" height="84">
|
||||
<use xlink:href="#logo"></use>
|
||||
</svg>
|
||||
<h1 class="homepage-title">
|
||||
Web Maker
|
||||
</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">
|
||||
<a class="btn download-btn web-app-btn" href="/app/">
|
||||
<span>Open Web App</span>
|
||||
</a>
|
||||
<p style="margin-top:3px;">Recommended: More features. More fun!</p>
|
||||
<a class="btn download-btn js-chrome-btn" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh">
|
||||
<img src="images/chrome-logo.png" height="40" alt="">
|
||||
<span>Add Chrome extension</span>
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
if (navigator.userAgent.indexOf('Chrome') === -1 || navigator.userAgent.match(/android/i)) {
|
||||
document.querySelector('.js-chrome-btn').classList.add('disabled');
|
||||
document.querySelector('.js-chrome-btn').setAttribute('data-hint', 'Check back on Google Chrome browser')
|
||||
}
|
||||
|
||||
</script>
|
||||
<div>
|
||||
<a href="/docs" class="">Docs</a>
|
||||
<a href="https://medium.com/web-maker/" class="ml-1">Blog</a>
|
||||
<a href="https://github.com/chinchang/web-maker/" class="ml-1">Github</a>
|
||||
<a class="hint--top-right ml-1" data-hint="Share on Twitter" href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp"
|
||||
target="_blank" class="tweet-link">Share</a>
|
||||
</div>
|
||||
</header>
|
||||
<div style="margin-top:30px;">
|
||||
<img class="screenshot" src="images/ss1.png?v3.0.0beta" height="" alt="Web Maker working screen">
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<header class="site-header">
|
||||
<div>
|
||||
<h2 style="display: inline;">
|
||||
<a href="/"><svg width="100" height="40">
|
||||
<use xlink:href="#logo"></use>
|
||||
</svg> Web Maker</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<nav>
|
||||
<a href="/docs" class="">Docs</a>
|
||||
<a href="https://medium.com/web-maker/" class="ml-1">Blog</a>
|
||||
<a href="https://github.com/chinchang/web-maker/" class="ml-1">Github</a>
|
||||
<a class="hint--top-right ml-1" data-hint="Share on Twitter" href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp"
|
||||
target="_blank" class="tweet-link">Share</a>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
{% endif %}
|
||||
|
||||
<main class="main-content">
|
||||
{{content}}
|
||||
</main>
|
||||
|
||||
<div id="info" class="info">
|
||||
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p>
|
||||
|
||||
<p>
|
||||
<strong>Read & change all your data on the websites that you visit</strong> - Worry not. This is just required for
|
||||
the new tab
|
||||
replacement feature where Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is read, stored or
|
||||
changed.
|
||||
</p>
|
||||
|
||||
<h3>Disclaimer</h3>
|
||||
<p>Web Maker
|
||||
<strong>does not track</strong> any user specific data. It uses Google Analytics to track aggregated events to
|
||||
improve user experience
|
||||
based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit
|
||||
<a href="https://tools.google.com/dlpage/gaoptout" target="_blank">https://tools.google.com/dlpage/gaoptout</a> 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;">
|
||||
<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="social-bar">
|
||||
<a class="hint--bottom-left" data-hint="I am on Github" href="https://github.com/chinchang/web-maker/" target="_blank"
|
||||
class="tweet-lin">
|
||||
<svg viewBox="0 0 16 16" style="width:32px;height:32px;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"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="hint--bottom-left" data-hint="Share on Twitter" href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp"
|
||||
target="_blank" class="tweet-link">
|
||||
<svg viewBox="0 0 16 16" style="width:32px;height:32px;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
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z" />
|
||||
</svg>
|
||||
</a>
|
||||
<!--<a class="hint--bottom-left" data-hint="Featured on ProductHunt" href="https://www.producthunt.com/tech/web-maker-2-0" target="_blank">
|
||||
<svg width="32" height="32" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20" fill="#DA552F"></path><path d="M22.667 20H17v-6h5.667c1.656 0 3 1.343 3 3s-1.344 3-3 3m0-10H13v20h4v-6h5.667c3.866 0 7-3.134 7-7s-3.134-7-7-7" fill="#FFF"></path></g></svg>
|
||||
</a>-->
|
||||
</div>
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none">
|
||||
<symbol id="logo" viewBox="-145 -2 372 175">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -1.000000)">
|
||||
<polygon id="Path-1" fill="#FF4600" points="31 0 232 0 132 173.310547"></polygon>
|
||||
<polygon id="Path-1" fill="#FF6C00" points="0 0 201 0 101 173.310547"></polygon>
|
||||
<polygon id="Path-1" fill="#FF6C00" transform="translate(271.500000, 86.500000) scale(1, -1) translate(-271.500000, -86.500000) "
|
||||
points="171 0 372 0 272 173.310547"></polygon>
|
||||
<polygon id="Path-1" fill="#FF4600" transform="translate(241.500000, 86.500000) scale(1, -1) translate(-241.500000, -86.500000) "
|
||||
points="141 0 342 0 242 173.310547"></polygon>
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
<script type="text/javascript">
|
||||
if (location.host.indexOf('localhost') === -1) {
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-87786708-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function () {
|
||||
var ga = document.createElement('script');
|
||||
ga.type = 'text/javascript';
|
||||
ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "c00b07b9-42da-45dd-87b0-e614bf7fb240";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="{{ '/css/hint.css' | url }}">
|
||||
</body>
|
||||
|
||||
</html>
|
||||
22
packages/website/_includes/doc.html
Normal file
22
packages/website/_includes/doc.html
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<a href="/docs"><span aria-hidden="true">⬅️</span> Documentation Index</a>
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h1 class="post-title">{{ title }}</h1>
|
||||
</header>
|
||||
<!-- <time datetime="{{ page.date | htmlDateString }}" class="post-meta">🗓 {{ page.date | date: "%B %d, %Y" }}</time> -->
|
||||
|
||||
<div class="post-content">{{ content | safe }}</div>
|
||||
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<p>
|
||||
<a href="/docs"><span aria-hidden="true">⬅️</span> Documentation Index</a>
|
||||
</p>
|
||||
4
packages/website/_includes/footer.html
Normal file
4
packages/website/_includes/footer.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<footer class="site-footer">
|
||||
Follow
|
||||
<a rel="external" href="https://twitter.com/intent/follow?screen_name=webmakerApp" target="_blank">@webmakerApp</a>
|
||||
for updates. <a href="/privacy-policy/">Privacy Policy</a>.</footer>
|
||||
3
packages/website/docs/docs.json
Normal file
3
packages/website/docs/docs.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"layout": "doc.html"
|
||||
}
|
||||
5
packages/website/docs/external-libraries.md
Normal file
5
packages/website/docs/external-libraries.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: 'Using external libraries'
|
||||
---
|
||||
|
||||
Coming soon...
|
||||
19
packages/website/docs/features.md
Normal file
19
packages/website/docs/features.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: 'Features'
|
||||
---
|
||||
|
||||
- Works offline
|
||||
- Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
|
||||
- Inbuilt Console
|
||||
- Save and load your creations
|
||||
- Auto-save feature
|
||||
- Code auto-completion
|
||||
- Easy addition of popular JS & CSS libraries
|
||||
- Import & Export all creations anytime, anywhere
|
||||
- Multiple editor themes & other configurable settings
|
||||
- Font options + use any system font!
|
||||
- Very easily accessible. Simply open a new tab in Chrome!
|
||||
- Multiple layouts to choose from
|
||||
- Capture preview screenshot
|
||||
- Save as HTML file
|
||||
- Edit in CodePen
|
||||
12
packages/website/docs/from-the-developer.md
Normal file
12
packages/website/docs/from-the-developer.md
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: 'From the developer'
|
||||
---
|
||||
|
||||
Hi! I am [Kushagra Gour](https://twitter.com/chinchang457), a frontend developer from India. I created Web Maker as a side project from myself because I wanted a frontend playground that was fast and didn't have to rely on network latency to generate realtime preview. Also something which I could use whenever and wherever I wanted, even wihtout Internet! I have written articles about why and how I created Web Maker and how you can benefit from it as a developer.
|
||||
|
||||
- FreeCodeCamp: https://medium.freecodecamp.org/web-maker-how-i-built-a-fast-offline-front-end-playground-9fe3629bc86f
|
||||
- Sitepoint: https://www.sitepoint.com/web-maker-an-offline-browser-based-codepen-alternative/
|
||||
|
||||
Make sure to read them if you like to get more behind the scenes of my journey with Web Maker.
|
||||
|
||||
Oh yes, I am [running a Patreon campaign](https://www.patreon.com/kushagra) to support my free and open-source projects such as Web Maker. Consider pledging if you use and love Web Maker. 🤗
|
||||
49
packages/website/docs/getting-started.md
Normal file
49
packages/website/docs/getting-started.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 'Getting started'
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Web Maker is available as a Web app and a Chrome extension. Web app is recommended for use as it has it more features and lesser restrictions due to Chrome extension policies.
|
||||
|
||||
**Web app**
|
||||
|
||||
The web app requires no installation. Just [goto the app url](/app/). Once you open the app, it is available for offline use in future.
|
||||
|
||||
**Chrome extension**
|
||||
|
||||
Here is the link to the Chrome extension 👉 [Chrome Web Store](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)
|
||||
|
||||
> Note: Chrome extension works in Brave and UC Browser also. Though, it hasn't been thoroughly tested on them.
|
||||
|
||||
## Starting Web Maker
|
||||
|
||||
**Web app**
|
||||
|
||||
As mentioned, the Web app can be simply opened by visiting [https://webmaker.app/app/](/app/).
|
||||
|
||||
**Chrome extension**
|
||||
|
||||
Once the Chrome extension is installed, you'll see a Web Maker icon in the right-top of your Chrome browser. Click it and Web Maker will open in a new tab.
|
||||
|
||||
## Your first creation
|
||||
|
||||
Okay, so now you might be wondering what do I do with Web Maker open in front of me? Web Maker lets you write HTML, CSS & JavaScript code and see it's instant preview. So let's write some code.
|
||||
|
||||
You should be seeing 3 code panes with the headings: **HTML**, **CSS** and **JS**. Each code pane is a dedicated place to write code in the respective languages. Go ahead and click inside the **HTML** code pane to focus it and then write the following HTML code:
|
||||
|
||||
```html
|
||||
<h1>My first HTML</h1>
|
||||
```
|
||||
|
||||
As soon as you paste the code, you should see the preview of your HTML in the white preview area.
|
||||
|
||||
|
||||
|
||||
This is a very simple web page we just made. Going forward, you might want to put CSS and JavaScript too. You can write them in their respective code panes and see instant preview.
|
||||
|
||||
## Your first creation - the files way
|
||||
|
||||
You can write the same HTML, CSS and JavaScript in the usual files way as well. Click on **New** button in the top bar. Select the **Files mode** and click **Start blank** button. You'll notice that now you have a sidebar with some files listed and an area for editing any file, instead of 3 code panes for HTML, CSS and JavaScript.
|
||||
|
||||
Go ahead and put the same HTML from above in the `index.html` file. You get the same result. But with files mode you get the same old local-like environment inside Web Maker.
|
||||
30
packages/website/docs/index.md
Normal file
30
packages/website/docs/index.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: 'Documentation'
|
||||
---
|
||||
|
||||
# Documentation
|
||||
|
||||
- [Introduction](/docs/introduction)
|
||||
- [Features](/docs/features)
|
||||
- [Getting started](/docs/getting-started)
|
||||
- [User interface](/docs/user-interface)
|
||||
- [User account](/docs/user-account)
|
||||
- [Using external libraries](/docs/external-libraries)
|
||||
- [Layouts](/docs/layouts)
|
||||
- [Keyboard Shortcuts](/docs/keyboard-shortcuts)
|
||||
- [Settings](/docs/settings)
|
||||
- [From the Developer](/docs/from-the-developer)
|
||||
- [Pre-processors](/docs/preprocessors)
|
||||
|
||||
## Frequently Asked Questions
|
||||
|
||||
[See on Github](https://github.com/chinchang/web-maker/issues?q=label%3Afaq)
|
||||
|
||||
## Let's Talk
|
||||
|
||||
Want to send in some suggestions, comments, feature requests or just have a question? Here are your options:
|
||||
|
||||
- Twitter — [ @webmakerApp](https://twitter.com/webmakerapp)
|
||||
- [Community forum](https://spectrum.chat/web-maker)
|
||||
- [Github repository](https://github.com/chinchang/web-maker/issues)
|
||||
7
packages/website/docs/introduction.md
Normal file
7
packages/website/docs/introduction.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'Introduction'
|
||||
---
|
||||
|
||||
**Web-Maker** is a blazing fast & offline frontend playground for your web experiments. Its available as a Chrome extension and a web app as well. Both are offline usable!
|
||||
|
||||
|
||||
22
packages/website/docs/keyboard-shortcuts.md
Normal file
22
packages/website/docs/keyboard-shortcuts.md
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: 'Keyboard shortcuts'
|
||||
---
|
||||
|
||||
| Action | Shortcut |
|
||||
| --------------------------------------------------- | ---------------------- |
|
||||
| Command palette - Commands | `Ctrl/⌘ + Shift + P` |
|
||||
| Command palette - Switch files | `Ctrl/⌘ + P` |
|
||||
| Refresh preview | `Ctrl/⌘ + Shift + 5` |
|
||||
| Save current creations | `Ctrl/⌘ + S` |
|
||||
| Open list of saved creations | `Ctrl/⌘ + O` |
|
||||
| Clear console (works when console input is focused) | `Ctrl + L` |
|
||||
| Close saved creations panel & modals | `Esc` |
|
||||
| Find | `Ctrl/⌘ + F` |
|
||||
| Select next match | `Ctrl/⌘ + G` |
|
||||
| Select previous match | `Ctrl/⌘ + Shift + G` |
|
||||
| Find & replace | `Ctrl/⌘ + Opt/Alt + F` |
|
||||
| Realign code | `Shift + Tab` |
|
||||
| Indent code right | `Ctrl/⌘ + ]` |
|
||||
| Indent code left | `Ctrl/⌘ + [` |
|
||||
| Emmet code completion [Read more](https://emmet.io) | `Tab` |
|
||||
| Single line comment | `Ctrl/⌘ + /` |
|
||||
5
packages/website/docs/layouts.md
Normal file
5
packages/website/docs/layouts.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: 'Layouts'
|
||||
---
|
||||
|
||||
Coming soon...
|
||||
7
packages/website/docs/preprocessors.md
Normal file
7
packages/website/docs/preprocessors.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'Pre-processors'
|
||||
---
|
||||
|
||||
Web Maker supports bunch of pre-processors in for HTML, CSS & JavaScript each. You can switch to any for your current creation by click on each pane's title.
|
||||
|
||||
<video src="./images/switching-preprocessor.mp4" loop autoplay></video>
|
||||
5
packages/website/docs/settings.md
Normal file
5
packages/website/docs/settings.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: 'Settings'
|
||||
---
|
||||
|
||||
Coming soon...
|
||||
7
packages/website/docs/user-account.md
Normal file
7
packages/website/docs/user-account.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'User account'
|
||||
---
|
||||
|
||||
You can login with your favourite social account to create a user account inside Web Maker and save all your creations in the cloud. That way no matter on which computer you are, you can open Web Maker, login with your account and get back all your creations to continue work on them!
|
||||
|
||||
When you are not logged in, you can still save creations. These get stored in the Local Storage of your browser and are available only on that computer and that browser. Once you login, you don't see your locally saved creations. But worry not, they don't get deleted. You can logout and access them again. You also get an option to import all your local creations to your account once you login - it's highly recommended you do that.
|
||||
47
packages/website/docs/user-interface.md
Normal file
47
packages/website/docs/user-interface.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: 'User interface'
|
||||
---
|
||||
|
||||
Web Maker's user interface is made to feel simple and accessible so that you have all the required things at your tips and still doesn't look cluttered for someone using it for first time.
|
||||
|
||||
## Code Panes
|
||||
|
||||
Code panes are the actually sections where you write your code. You get 3 panes, one for HTML, CSS & JavaScript each.
|
||||
|
||||
## Preview
|
||||
|
||||
Alongside the code panes, is a white (by default) area where you see the preview of your code. Its an iframe that is feeded your HTML, CSS & JavaScript as you type to generate realtime preview.
|
||||
|
||||
## Title
|
||||
|
||||
On the top-left side you can see the title of your creation. Click on it to edit it anytime.
|
||||
|
||||
## Create New, Save or Open a creation
|
||||
|
||||
On the top-right side, you have the 3 buttons to create a new creation or save an open one. Also you can access all your saved creations from the _Saved Creations Pane_ by clicking the _Open_ button.
|
||||
|
||||
From the _Saved Creations Pane_ you can also export or import all your creations at once. Exporting generates a JSON file which you can backup in your Google Drive, Dropbox etc.
|
||||
|
||||
## Settings
|
||||
|
||||
On the bottom right-most end you can access the app settings. Lots and lots of useful settings in there. To know in details about settings, [jump right here]().
|
||||
|
||||
## Changelog
|
||||
|
||||
Besides the Settings button, is the Changelog button where you can read all the changes in the app for each release version.
|
||||
|
||||
## Layouts
|
||||
|
||||
Next you have some layout options to choose from. Select whats suits you best. This setting is saved per creation basis, so each of your creation can show in a different layout that you see best for it.
|
||||
|
||||
## Download/Share creation
|
||||
|
||||
Web Maker gives you quite some options to export your current creation to share with the world. You can save it as a single HTML file to upload it on a server, or open it in CodePen or take a screenshot of your preview.
|
||||
|
||||
## Export/Import creations
|
||||
|
||||
[Read blog post about exporting & importing your creations](https://medium.com/web-maker/importing-exporting-your-creations-d92e7de5c3dc).
|
||||
|
||||
## Help and Share
|
||||
|
||||
On the bottom-left side are few help options, one of which shows you all th keyboard shortcuts available inside the app. Also there is a tweet button you can use to share Web Maker with everyone :)
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 162 KiB |
187
packages/website/index.html
Normal file
187
packages/website/index.html
Normal file
@@ -0,0 +1,187 @@
|
||||
---
|
||||
layout: default.html
|
||||
---
|
||||
|
||||
<h2 style="font-size: 2em; " class="ta-c">What you get</h2>
|
||||
|
||||
<div class="flex feature-box">
|
||||
<div class="feature">
|
||||
<!-- <svg viewBox="0 0 24 24">
|
||||
<path d="M2.28,3L1,4.27L2.47,5.74C2.04,6 1.61,6.29 1.2,6.6L3,9C3.53,8.6 4.08,8.25 4.66,7.93L6.89,10.16C6.15,10.5 5.44,10.91 4.8,11.4L6.6,13.8C7.38,13.22 8.26,12.77 9.2,12.47L11.75,15C10.5,15.07 9.34,15.5 8.4,16.2L12,21L14.46,17.73L17.74,21L19,19.72M12,3C9.85,3 7.8,3.38 5.9,4.07L8.29,6.47C9.5,6.16 10.72,6 12,6C15.38,6 18.5,7.11 21,9L22.8,6.6C19.79,4.34 16.06,3 12,3M12,9C11.62,9 11.25,9 10.88,9.05L14.07,12.25C15.29,12.53 16.43,13.07 17.4,13.8L19.2,11.4C17.2,9.89 14.7,9 12,9Z" />
|
||||
</svg> -->
|
||||
<h3 class="feature__title">Works Offline</h3>
|
||||
<p>Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">Preprocessor Support</h3>
|
||||
<p>Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or TypeScript - you get it all.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">Quick Add Libraries</h3>
|
||||
<p>Drop in any library from the available list or put a URL of any other library you wish to add.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">Multiple Layouts</h3>
|
||||
<p>Get exact same layout in front of you, that you last saved the creation in. Plus, a full screen layout to see
|
||||
your work
|
||||
in actual browser window.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">Files Mode</h3>
|
||||
<p>Get a complete local-like environment where you can code in files instead of 3 separate panes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">Preview screenshot capture</h3>
|
||||
<p>Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful
|
||||
screenshot
|
||||
of
|
||||
your result.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">Open in Codepen</h3>
|
||||
<p>Done with your creation and want to share it with the world? One click and have your work open in CodePen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3 class="feature__title">And much more awesomeness!</h3>
|
||||
<p>It doesn't stop there. There is JavaScript console, integrated Prettier support, command palette and more!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="people-say">
|
||||
<h2 style="font-size: 2em;" class="ta-c" aria-label="Love from all around"><span style="color:red;">♥</span> from all
|
||||
around</h2>
|
||||
<div class="people-say-top">
|
||||
<a target="_blank" href="https://blog.codepen.io/2017/01/19/web-maker/" class="say">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/883049860332609537/IsUISvAq_400x400.jpg" alt="">
|
||||
<div>Chris Coyier</div>
|
||||
</div>
|
||||
<p>If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://twitter.com/Ryan_Random/status/832242636970930177" class="say say--twitter">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/777487197532401665/hsnFGGH2_bigger.jpg" alt="">
|
||||
<div>Ryan Davidson
|
||||
<div class="say__handle">@Ryan_Random</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Really enjoying using Web Maker - super fast offline web playground.</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://twitter.com/NashVail/status/831126444486975489" class="say say--twitter">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/798582099691212800/15i7-mX-_400x400.jpg" alt="">
|
||||
<div>Nishant Verma
|
||||
<div class="say__handle">@NashVail</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Finding awesome pens on @CodePen and recreating them in @webmakerApp is my new hobby</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
|
||||
class="say">
|
||||
<div class="say__name">
|
||||
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
|
||||
alt="">
|
||||
<div>Joacim Nilsson</div>
|
||||
</div>
|
||||
<p>This is something I will be using alot. Thank you! :D</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
|
||||
class="say">
|
||||
<div class="say__name">
|
||||
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
|
||||
alt="">
|
||||
<div>Oksana Borukh</div>
|
||||
</div>
|
||||
<p>It's fantastic! I'm glad I've discovered it! Thanks!
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="people-say-bottom">
|
||||
<a target="_blank" href="https://twitter.com/labnol/status/816576061622235136" class="say say--twitter">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/905692103883104256/J0feWkQe_normal.jpg" alt="">
|
||||
<div>Amit Agarwal
|
||||
<div class="say__handle">@labnol</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>This is like having your own copy of Codepen that also works offline.</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://twitter.com/Armstrong/status/832191260026888197" class="say say--twitter">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/974909553/Screen_shot_2010-06-09_at_19.14.22_bigger.png" alt="">
|
||||
<div>Chris Armstrong
|
||||
<div class="say__handle">@Armstrong</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>@webmakerApp looks like a good offline alternative to @CodePen.</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://twitter.com/sitepointdotcom/status/832987050597085184" class="say say--twitter">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/851318206807420928/etT-R3rp_bigger.jpg" alt="">
|
||||
<div>SitePoint
|
||||
<div class="say__handle">@sitepointdotcom</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Meet Web Maker, an Offline, Browser-based CodePen Alternative.</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://twitter.com/fedorloenko/status/835186942354534400" class="say">
|
||||
<div class="say__name">
|
||||
<img src="https://pbs.twimg.com/profile_images/947822663061393408/zhC3vxBL_bigger.jpg" alt="">
|
||||
<div>Fedor Loenko
|
||||
<div class="say__handle">@fedorloenko</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Great Chrome extension via @chinchang457. I need offline CodePen from time to time.</p>
|
||||
</a>
|
||||
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
|
||||
class="say">
|
||||
<div class="say__name">
|
||||
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
|
||||
alt="">
|
||||
<div>Steve Lack</div>
|
||||
</div>
|
||||
<p>Thanks for creating this. What a great tool for productivity!</p>
|
||||
</a>
|
||||
|
||||
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
|
||||
class="say">
|
||||
<div class="say__name">
|
||||
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
|
||||
alt="">
|
||||
<div>Margaret H</div>
|
||||
</div>
|
||||
<p>Decided to use it to work on my latest project, it's pretty awesome! Thank you for making this!</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="info" class="info">
|
||||
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p>
|
||||
|
||||
<p>
|
||||
<strong>Read & change all your data on the websites that you visit</strong> - Worry not. This is just required for
|
||||
the new tab
|
||||
replacement feature where Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is read, stored or
|
||||
changed.
|
||||
</p>
|
||||
|
||||
<h3>Disclaimer</h3>
|
||||
<p>Web Maker
|
||||
<strong>does not track</strong> any user specific data. It uses Google Analytics to track aggregated events to
|
||||
improve user experience
|
||||
based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit
|
||||
<a href="https://tools.google.com/dlpage/gaoptout" target="_blank">https://tools.google.com/dlpage/gaoptout</a> 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;">
|
||||
<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
18
packages/website/package.json
Normal file
18
packages/website/package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "web-maker-docs",
|
||||
"version": "1.0.0",
|
||||
"description": "## What is Web Maker",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"start": "eleventy --quiet --serve",
|
||||
"build": "eleventy"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^0.7.1",
|
||||
"markdown-it": "^8.4.2",
|
||||
"markdown-it-anchor": "^5.0.2"
|
||||
}
|
||||
}
|
||||
161
packages/website/privacy-policy.html
Normal file
161
packages/website/privacy-policy.html
Normal file
@@ -0,0 +1,161 @@
|
||||
---
|
||||
layout: default.html
|
||||
---
|
||||
|
||||
<h1>Privacy Policy</h1>
|
||||
|
||||
|
||||
<p>Effective date: November 06, 2018</p>
|
||||
<p>Last updated: November 06, 2018</p>
|
||||
|
||||
<p>Web Maker ("us", "we", or "our") operates the https://webmakerapp.com website (the "Service").</p>
|
||||
|
||||
<p>This page informs you of our policies regarding the collection, use, and disclosure of personal data when you use
|
||||
our Service and the choices you have associated with that data.</p>
|
||||
|
||||
<p>By using the Service, you agree to the collection and use of
|
||||
information in accordance with this policy.
|
||||
|
||||
<h2>Information Collection And Use</h2>
|
||||
|
||||
<p>We collect several different types of information for various purposes to provide and improve our Service to you.</p>
|
||||
|
||||
<h3>Types of Data Collected</h3>
|
||||
|
||||
<h4>Personal Data</h4>
|
||||
|
||||
<p>Only when choose to login to our Service, we may ask you to provide us with certain personally identifiable
|
||||
information that can
|
||||
be used to contact or identify you ("Personal Data"). Personally identifiable information may include, but is not
|
||||
limited to:</p>
|
||||
|
||||
<ul>
|
||||
<li>Email address</li>
|
||||
<li>Cookies</li>
|
||||
</ul>
|
||||
|
||||
<h4>Usage Data</h4>
|
||||
|
||||
<p>We may also collect anonymous information (non identifiable) how the Service is accessed and used ("Usage Data").
|
||||
This Usage Data
|
||||
may include
|
||||
information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the
|
||||
pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device
|
||||
identifiers and other diagnostic data.</p>
|
||||
|
||||
<h4>Tracking & Cookies Data</h4>
|
||||
<p>We use cookies and similar tracking technologies to track the activity on our Service and hold certain
|
||||
information.</p>
|
||||
<p>Cookies are files with small amount of data which may include an anonymous unique identifier. Cookies are sent to
|
||||
your browser from a website and stored on your device. Tracking technologies also used are beacons, tags, and
|
||||
scripts to collect and track information and to improve and analyze our Service.</p>
|
||||
<p>You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you
|
||||
do
|
||||
not accept cookies, you may not be able to use some portions of our Service.</p>
|
||||
<p>Examples of Cookies we use:</p>
|
||||
<ul>
|
||||
<li><strong>Session Cookies.</strong> We use Session Cookies to operate our Service.</li>
|
||||
<li><strong>Preference Cookies.</strong> We use Preference Cookies to remember your preferences and various
|
||||
settings.</li>
|
||||
<li><strong>Security Cookies.</strong> We use Security Cookies for security purposes.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Use of Data</h2>
|
||||
|
||||
<p>Web Maker uses the collected data for various purposes:</p>
|
||||
<ul>
|
||||
<li>To provide and maintain the Service</li>
|
||||
<li>To notify you about changes to our Service</li>
|
||||
<li>To allow you to participate in interactive features of our Service when you choose to do so</li>
|
||||
<li>To provide customer care and support</li>
|
||||
<li>To provide analysis or valuable information so that we can improve the Service</li>
|
||||
<li>To monitor the usage of the Service</li>
|
||||
<li>To detect, prevent and address technical issues</li>
|
||||
</ul>
|
||||
|
||||
<h2>Transfer Of Data</h2>
|
||||
<p>Your information, including Personal Data, may be transferred to — and maintained on — computers located outside
|
||||
of
|
||||
your state, province, country or other governmental jurisdiction where the data protection laws may differ than
|
||||
those from your jurisdiction.</p>
|
||||
<p>Your consent to this Privacy Policy followed by your submission of such information represents your agreement to
|
||||
that transfer.</p>
|
||||
<p>Web Maker will take all steps reasonably necessary to ensure that your data is treated securely and in accordance
|
||||
with this Privacy Policy and no transfer of your Personal Data will take place to an organization or a country
|
||||
unless there are adequate controls in place including the security of your data and other personal information.</p>
|
||||
|
||||
<h2>Disclosure Of Data</h2>
|
||||
|
||||
<h3>Legal Requirements</h3>
|
||||
<p>Web Maker may disclose your Personal Data in the good faith belief that such action is necessary to:</p>
|
||||
<ul>
|
||||
<li>To comply with a legal obligation</li>
|
||||
<li>To protect and defend the rights or property of Web Maker</li>
|
||||
<li>To prevent or investigate possible wrongdoing in connection with the Service</li>
|
||||
<li>To protect the personal safety of users of the Service or the public</li>
|
||||
<li>To protect against legal liability</li>
|
||||
</ul>
|
||||
|
||||
<h2>Security Of Data</h2>
|
||||
<p>The security of your data is important to us, but remember that no method of transmission over the Internet, or
|
||||
method of electronic storage is 100% secure. We strive to use commercially acceptable means to protect your
|
||||
Personal Data. The Service works over encrypted Secure Socket Layer (SSL) technology.</p>
|
||||
|
||||
<h2>Service Providers</h2>
|
||||
<p>We may employ third party companies and individuals to facilitate our Service ("Service Providers"), to provide
|
||||
the Service on our behalf, to perform Service-related services or to assist us in analyzing how our Service is
|
||||
used.</p>
|
||||
<p>These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated
|
||||
not to disclose or use it for any other purpose.</p>
|
||||
|
||||
<h3>Analytics</h3>
|
||||
<p>We may use third-party Service Providers to monitor and analyze the use of our Service.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong>Google Analytics</strong></p>
|
||||
<p>Google Analytics is a web analytics service offered by Google that tracks and reports anonymous website
|
||||
traffic.
|
||||
Google uses the data collected to track and monitor the use of our Service. This data is shared with other
|
||||
Google services. Google may use the collected data to contextualize and personalize the ads of its own
|
||||
advertising network.</p>
|
||||
<p>You can opt-out of having made your activity on the Service available to Google Analytics by installing the
|
||||
Google Analytics opt-out browser add-on. The add-on prevents the Google Analytics JavaScript (ga.js,
|
||||
analytics.js, and dc.js) from sharing information with Google Analytics about visits activity.</p>
|
||||
<p>For more information on the privacy practices of Google, please visit the Google Privacy & Terms web page:
|
||||
<a href="https://policies.google.com/privacy?hl=en">https://policies.google.com/privacy?hl=en</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>Links To Other Sites</h2>
|
||||
<p>Our Service may contain links to other sites that are not operated by us. If you click on a third party link, you
|
||||
will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you
|
||||
visit.</p>
|
||||
<p>We have no control over and assume no responsibility for the content, privacy policies or practices of any third
|
||||
party sites or services.</p>
|
||||
|
||||
|
||||
<h2>Children's Privacy</h2>
|
||||
<p>Our Service does not address anyone under the age of 13 ("Children").</p>
|
||||
<p>We do not knowingly collect personally identifiable information from anyone under the age of 13. If you are a
|
||||
parent or guardian and you are aware that your Children has provided us with Personal Data, please contact us. If
|
||||
we
|
||||
become aware that we have collected Personal Data from children without verification of parental consent, we take
|
||||
steps to remove that information from our servers.</p>
|
||||
|
||||
|
||||
<h2>Changes To This Privacy Policy</h2>
|
||||
<p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy
|
||||
Policy on this page.</p>
|
||||
<p>We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective
|
||||
and
|
||||
update the "effective date" at the top of this Privacy Policy.</p>
|
||||
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are
|
||||
effective when they are posted on this page.</p>
|
||||
|
||||
|
||||
<h2>Contact Us</h2>
|
||||
<p>If you have any questions about this Privacy Policy, please contact us:</p>
|
||||
<ul>
|
||||
<li>By email: chinchang457@gmail.com</li>
|
||||
</ul>
|
||||
1
packages/website/robots.txt
Normal file
1
packages/website/robots.txt
Normal file
@@ -0,0 +1 @@
|
||||
User-agent: *
|
||||
27
packages/website/uninstall.html
Normal file
27
packages/website/uninstall.html
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: 'Web Maker uninstall feedback'
|
||||
---
|
||||
|
||||
<style>
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 940px;
|
||||
}
|
||||
|
||||
@media (min-width: 751px) {
|
||||
|
||||
iframe {
|
||||
width: 70vw;
|
||||
height: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdEIhNnhnmw9kHfnkhkVUMTW1S2Nli5JL0ShOrGG6v3WvmR0w/viewform?embedded=true"
|
||||
frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
|
||||
|
||||
|
||||
<div style="margin:2em 0 1em">Tweet out to <a style="color:#1da1f2" href="https://twitter.com/intent/follow?screen_name=webmakerApp"
|
||||
target="_blank">@webmakerApp</a> for any query</div>
|
||||
3437
packages/website/yarn.lock
Normal file
3437
packages/website/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,203 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Privacy Policy - Web Maker - A blazing fast & offline web playground</title>
|
||||
<meta property="og:title" content="Web Maker">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta name="description" content="A blazing fast & offline web playground">
|
||||
<meta property="og:description" content="A blazing fast & offline web playground">
|
||||
<meta property="og:image" content="https://webmakerapp.com/ss1.png">
|
||||
<link rel="image_src" href="ss1.png?v3.0.0" />
|
||||
<meta name="twitter:image" content="https://webmakerapp.com/ss1.png" />
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="icon" href="/icon-128.png">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Arial;
|
||||
background: white;
|
||||
min-height: 100vh;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
|
||||
<h1>Web Maker Privacy Policy</h1>
|
||||
|
||||
<p>Effective date: November 06, 2018</p>
|
||||
<p>Last updated: November 06, 2018</p>
|
||||
|
||||
<p>Web Maker ("us", "we", or "our") operates the https://webmakerapp.com website (the "Service").</p>
|
||||
|
||||
<p>This page informs you of our policies regarding the collection, use, and disclosure of personal data when you use
|
||||
our Service and the choices you have associated with that data.</p>
|
||||
|
||||
<p>By using the Service, you agree to the collection and use of
|
||||
information in accordance with this policy.
|
||||
|
||||
<h2>Information Collection And Use</h2>
|
||||
|
||||
<p>We collect several different types of information for various purposes to provide and improve our Service to you.</p>
|
||||
|
||||
<h3>Types of Data Collected</h3>
|
||||
|
||||
<h4>Personal Data</h4>
|
||||
|
||||
<p>Only when choose to login to our Service, we may ask you to provide us with certain personally identifiable
|
||||
information that can
|
||||
be used to contact or identify you ("Personal Data"). Personally identifiable information may include, but is not
|
||||
limited to:</p>
|
||||
|
||||
<ul>
|
||||
<li>Email address</li>
|
||||
<li>Cookies</li>
|
||||
</ul>
|
||||
|
||||
<h4>Usage Data</h4>
|
||||
|
||||
<p>We may also collect anonymous information (non identifiable) how the Service is accessed and used ("Usage Data").
|
||||
This Usage Data
|
||||
may include
|
||||
information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the
|
||||
pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device
|
||||
identifiers and other diagnostic data.</p>
|
||||
|
||||
<h4>Tracking & Cookies Data</h4>
|
||||
<p>We use cookies and similar tracking technologies to track the activity on our Service and hold certain
|
||||
information.</p>
|
||||
<p>Cookies are files with small amount of data which may include an anonymous unique identifier. Cookies are sent to
|
||||
your browser from a website and stored on your device. Tracking technologies also used are beacons, tags, and
|
||||
scripts to collect and track information and to improve and analyze our Service.</p>
|
||||
<p>You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you
|
||||
do
|
||||
not accept cookies, you may not be able to use some portions of our Service.</p>
|
||||
<p>Examples of Cookies we use:</p>
|
||||
<ul>
|
||||
<li><strong>Session Cookies.</strong> We use Session Cookies to operate our Service.</li>
|
||||
<li><strong>Preference Cookies.</strong> We use Preference Cookies to remember your preferences and various
|
||||
settings.</li>
|
||||
<li><strong>Security Cookies.</strong> We use Security Cookies for security purposes.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Use of Data</h2>
|
||||
|
||||
<p>Web Maker uses the collected data for various purposes:</p>
|
||||
<ul>
|
||||
<li>To provide and maintain the Service</li>
|
||||
<li>To notify you about changes to our Service</li>
|
||||
<li>To allow you to participate in interactive features of our Service when you choose to do so</li>
|
||||
<li>To provide customer care and support</li>
|
||||
<li>To provide analysis or valuable information so that we can improve the Service</li>
|
||||
<li>To monitor the usage of the Service</li>
|
||||
<li>To detect, prevent and address technical issues</li>
|
||||
</ul>
|
||||
|
||||
<h2>Transfer Of Data</h2>
|
||||
<p>Your information, including Personal Data, may be transferred to — and maintained on — computers located outside
|
||||
of
|
||||
your state, province, country or other governmental jurisdiction where the data protection laws may differ than
|
||||
those from your jurisdiction.</p>
|
||||
<p>Your consent to this Privacy Policy followed by your submission of such information represents your agreement to
|
||||
that transfer.</p>
|
||||
<p>Web Maker will take all steps reasonably necessary to ensure that your data is treated securely and in accordance
|
||||
with this Privacy Policy and no transfer of your Personal Data will take place to an organization or a country
|
||||
unless there are adequate controls in place including the security of your data and other personal information.</p>
|
||||
|
||||
<h2>Disclosure Of Data</h2>
|
||||
|
||||
<h3>Legal Requirements</h3>
|
||||
<p>Web Maker may disclose your Personal Data in the good faith belief that such action is necessary to:</p>
|
||||
<ul>
|
||||
<li>To comply with a legal obligation</li>
|
||||
<li>To protect and defend the rights or property of Web Maker</li>
|
||||
<li>To prevent or investigate possible wrongdoing in connection with the Service</li>
|
||||
<li>To protect the personal safety of users of the Service or the public</li>
|
||||
<li>To protect against legal liability</li>
|
||||
</ul>
|
||||
|
||||
<h2>Security Of Data</h2>
|
||||
<p>The security of your data is important to us, but remember that no method of transmission over the Internet, or
|
||||
method of electronic storage is 100% secure. We strive to use commercially acceptable means to protect your
|
||||
Personal Data. The Service works over encrypted Secure Socket Layer (SSL) technology.</p>
|
||||
|
||||
<h2>Service Providers</h2>
|
||||
<p>We may employ third party companies and individuals to facilitate our Service ("Service Providers"), to provide
|
||||
the Service on our behalf, to perform Service-related services or to assist us in analyzing how our Service is
|
||||
used.</p>
|
||||
<p>These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated
|
||||
not to disclose or use it for any other purpose.</p>
|
||||
|
||||
<h3>Analytics</h3>
|
||||
<p>We may use third-party Service Providers to monitor and analyze the use of our Service.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><strong>Google Analytics</strong></p>
|
||||
<p>Google Analytics is a web analytics service offered by Google that tracks and reports anonymous website
|
||||
traffic.
|
||||
Google uses the data collected to track and monitor the use of our Service. This data is shared with other
|
||||
Google services. Google may use the collected data to contextualize and personalize the ads of its own
|
||||
advertising network.</p>
|
||||
<p>You can opt-out of having made your activity on the Service available to Google Analytics by installing the
|
||||
Google Analytics opt-out browser add-on. The add-on prevents the Google Analytics JavaScript (ga.js,
|
||||
analytics.js, and dc.js) from sharing information with Google Analytics about visits activity.</p>
|
||||
<p>For more information on the privacy practices of Google, please visit the Google Privacy & Terms web page:
|
||||
<a href="https://policies.google.com/privacy?hl=en">https://policies.google.com/privacy?hl=en</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>Links To Other Sites</h2>
|
||||
<p>Our Service may contain links to other sites that are not operated by us. If you click on a third party link, you
|
||||
will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you
|
||||
visit.</p>
|
||||
<p>We have no control over and assume no responsibility for the content, privacy policies or practices of any third
|
||||
party sites or services.</p>
|
||||
|
||||
|
||||
<h2>Children's Privacy</h2>
|
||||
<p>Our Service does not address anyone under the age of 13 ("Children").</p>
|
||||
<p>We do not knowingly collect personally identifiable information from anyone under the age of 13. If you are a
|
||||
parent or guardian and you are aware that your Children has provided us with Personal Data, please contact us. If
|
||||
we
|
||||
become aware that we have collected Personal Data from children without verification of parental consent, we take
|
||||
steps to remove that information from our servers.</p>
|
||||
|
||||
|
||||
<h2>Changes To This Privacy Policy</h2>
|
||||
<p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy
|
||||
Policy on this page.</p>
|
||||
<p>We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective
|
||||
and
|
||||
update the "effective date" at the top of this Privacy Policy.</p>
|
||||
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are
|
||||
effective when they are posted on this page.</p>
|
||||
|
||||
|
||||
<h2>Contact Us</h2>
|
||||
<p>If you have any questions about this Privacy Policy, please contact us:</p>
|
||||
<ul>
|
||||
<li>By email: chinchang457@gmail.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,161 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Web Maker - A blazing fast & offline web playground</title>
|
||||
<meta name="description" content="Blazing fast & offline web playground">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="image_src" href="ss1.png"/>
|
||||
<style type="text/css">
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Arial;
|
||||
background: #e8e8e8;
|
||||
min-height: 100vh;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.logo {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
margin: 0;
|
||||
padding: 0.25em 0 0;
|
||||
text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'Arial', cursive;
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h2 {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 90vw;
|
||||
}
|
||||
a {
|
||||
color: #1A5A7A;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.flex { display: flex; }
|
||||
.btn {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
text-transform: uppercase;
|
||||
transition: 0.3s ease;
|
||||
color: rgba(0,0,0,0.7);
|
||||
}
|
||||
.btn:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.download-btn {
|
||||
color: white;
|
||||
background-color: #4d7bd6;
|
||||
}
|
||||
.btn > img {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.footer {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
a svg {
|
||||
fill: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
a:hover svg {
|
||||
fill: white;
|
||||
}
|
||||
.social-bar {
|
||||
margin-top: 2em;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.social-bar > a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.social-bar:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 940px;
|
||||
}
|
||||
|
||||
@media (min-width: 751px) {
|
||||
.social-bar {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.social-bar > a {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
iframe {
|
||||
width: 70vw;
|
||||
height: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><img class="logo" width="128" height="128" src="../icon-128.png" alt="">Web Maker</h1>
|
||||
<!-- <h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2> -->
|
||||
|
||||
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdEIhNnhnmw9kHfnkhkVUMTW1S2Nli5JL0ShOrGG6v3WvmR0w/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
|
||||
|
||||
<div class="social-bar">
|
||||
<a class="hint--bottom-left" data-hint="I am on Github" href="https://github.com/chinchang/web-maker/" target="_blank" class="tweet-lin">
|
||||
<svg viewBox="0 0 16 16" style="width:32px;height:32px;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"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="hint--bottom-left" data-hint="Share on Twitter" href="http://twitter.com/share?url=https://webmakerapp.com&text=Web Maker - Convert your Chrome tabs into a blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp" target="_blank" class="tweet-link">
|
||||
<svg viewBox="0 0 16 16" style="width:32px;height:32px;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
|
||||
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="margin:2em 0 1em">Tweet out to <a style="color:#1da1f2" href="https://twitter.com/intent/follow?screen_name=webmakerApp" target="_blank">@webmakerApp</a> for any query</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
if (location.host.indexOf('localhost') === -1) {
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-87786708-1']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user