mirror of
https://github.com/chinchang/web-maker.git
synced 2025-08-17 02:34:09 +02:00
add website as monorepo package and migrate to 11ty :)
This commit is contained in:
Kushagra Gour
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 :)
|
||||
Reference in New Issue
Block a user