Branch: master
Clone or download
Latest commit 8bff7c4 Feb 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
builder adding clean option Feb 21, 2019
docs clean up Jul 20, 2018
editor work in progress Dec 20, 2018
model work in progress Dec 20, 2018
service work in progress Dec 20, 2018
vendor work in progress Jul 17, 2018
wedit.io work in progress Dec 20, 2018
.gitignore work in progress Nov 20, 2018
Gopkg.lock work in progress Jul 17, 2018
Gopkg.toml using vendor Apr 17, 2018
LICENSE Create LICENSE Nov 27, 2016
build.ps1 using vendor Apr 17, 2018
build.sh work in progress Nov 20, 2018
config.go work in progress Nov 20, 2018
main.go adding clean option Feb 21, 2019
readme.md work in progress Nov 20, 2018
wedit.json

readme.md

Web edit tool (wedit.io)

wedit uses static HTML website as template and allows the content to be changed through WYSIWYG editing using the web browser.

All changes are immediate and align with the intended website design.

How it works

wedit works by:

  • Opening self served HTTP server on the localhost serving a template folder.
  • Starting the OS default browser and point it to the local server in edit mode.
  • Allowing to edit the website in the browser by using CTRL key to highlight and edit any element marked with wedit attributes.
  • Generates resulting static HTML files in the public folder.

Usage

1. Initialize

To start fresh, create a new folder on your machine.

Navigate to the new folder and run:

$ wedit init

This will generate the wedit folder structure:

  • template - folder containing static HTML template.
  • content - folder containing entered content.
  • public - folder containing the resulting static website.
  • wedit.json - wedit configuration file.

2. Static template

Copy a static HTML website to the template folder.

3. Prepare template

Every editable HTML element within template html file can have one of the attributes:

  • wedit="{unique-key}" - marks HTML element as editable.
  • wedit-repeat="{unique-key}" - marks HTML element as repeatable.
  • wedit-include="{path}" - includes target HTML template file as child element (useful for headers and footers).

You can't use wedit, wedit-repeat or wedit-include on the same HTML element.

If {unique-key} start with prefix !, its value will persist throughout all pages with same key (useful for headers and footers)

Text editing

Edit through markdown using paragraphs, links, headers, bullet points, basic text decorations, inline images or even HTML.

<div wedit="text-key-1">...</div>

Repeat sections

Replicated same section multiple times with different content.

<div class="carousel">
<div class="item" wedit-repear="repeat-key-1">
...
<div>
</div>

Site-wide content

Mark content as available for the whole website, so changes are applied to all pages.

<div class="footer">
<span class="mantra" wedit="!footer-mantra">...</span>
</div>

Images

Supports <img> elements.

<img wedit="image-key-1" src="..." srcset="...">

If srcset is used with 'width' descriptor (like srcset="image-s.jpg 320w, image-m.jpg 640w, image-l.jpg 1024w"), the new uploaded image will be automatically resized and different files will be supplied for each descriptor.

Includes

Append entire HTML fragments from separate files to include similar sections in different pages.

<div wedit-include="footer.html"></div>

Variations

wedit follows the template folder structure for the static website. The one exception is the variation folder, which will be mapped to any string while wedit is in edit mode. By default the variation folder name is a single hyphen ().

As an example, the file in template folder blogs/-/index.html will be used as for URLs like /blogs/some-article/index.html and /blogs/some-other-article/index.html.

To create new variations, while in wedit edit more, navigate to the desire URL and wedit will create the variation in the public folder.

4. Start editing

Run wedit tool within the project folder:

$ wedit

wedit opens the default browser with the template site in WYSIWYG edit mode.

Once the page is loaded at http://{localhost}:{port}/ you can press CTRL key to start editing.

Entered content is saved in the content folder and the resulting static website is saved in the public folder.

5. Deployment

The resulting public folder is a static generated website that can be deployed to any hosting service/server.

Config file

Default wedit.json file:

{
    "templateFolder": "template",
    "contentFolder": "content",
    "publicFolder": "public",
    "variationFolderName": "-",
    "rootJsonFile": "root.json",
    "rootKeyPrefix": "!",
    "editAttribute": "wedit",
    "repeatAttribute": "wedit-repeat",
    "includeAttribute": "wedit-include",
    "keepAttributes": false,
    "defaultPage":"index.html",
    "allowedPageExt": [".html"],
    "host": "localhost",
    "port": 5000,
    "openBrowser": true
}

Get wedit

Requires Go to be installed.

$ go get github.com/sofmon/wedit

Build

The build requires setup for Go and Dart environments.

$ ./build.sh # or build.ps1 for windows