lurruery/peditor
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
<!DOCTYPE html>
<html>
<head>
<title>Peditor Documentation</title>
<style type="text/css">
body {
font-size: 14px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
margin-bottom: 60%;
padding: 10px;
}
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
pre { color: #832BAC; }
.em { color: #E21010; } /* emphasis */
.al { color: #C4259D; } /* alert */
.pt { color: #2BAC45; } /* point */
.large { font-size: 18px; }
.grey { color: #777; }
.code { font-family: monospace, Courier; }
.center { text-align: center; }
img {
box-shadow: 0 1px 5px #aaa;
max-width: 800px;
}
table {
margin: 10px 0;
}
td {
padding: 3px 10px;
border: 1px dashed #ccc;
}
hr {
border-bottom: 1px solid #fff;
border-top: 1px solid #ccc;
}
li, .section {
padding: 3px 10px;
-webkit-transition: all 0.2s ease-out;
}
li:hover, .section:hover {
background: rgba(255, 255, 255, 0.5);
box-shadow: 1px 1px 3px #777;
}
</style>
</head>
<body>
<div class="section">
<div>
<img src="client/img/peditor.png" alt="">
</div>
<h1>Peditor Overview</h1>
<p>
A highly extendable application to abstract and visualize the edit procedure of common web pages.
Combine the two words Page and Editor, we get the project's name
<b>Peditor</b> <em>| 'peditə |</em>.
Another goal of Peditor is make it easier to create plugin(widget) for it.
</p>
<p>
Project home: <a href="https://github.com/ysmood/peditor" target="_blank">Github</a>
</p>
<h3>Roadmap</h3>
<p>
Following development will focus on:
</p>
<ul>
<li>
Write some more userful widgets for demo.
</li>
<li>
Make the widget system api richer and more robust.
</li>
<li>
A multi-user backend system to support the management of pdoc.
</li>
<li>
Make the whole system easier to plug into a CMS, which means more api to interact with the backend system.
</li>
</ul>
</div>
<hr />
<div class="section">
<h1>Build & Control</h1>
<ul>
<li>
<h3>Requirement</h3>
<ul>
<li>Unix-like system.</li>
<li>ZSH v4.0+ installed.</li>
<li>CouchDB 1.3.0+ installed</li>
<li>Node.js v0.10.0+ installed.</li>
</ul>
</li>
<li>
<h3>Configuration</h3>
The global options in the <span class="al">config.json</span> file.
<table>
<tr>
<td>port</td>
<td>The server port.</td>
</tr>
<tr>
<td>debug_port</td>
<td>Debuger listener port</td>
</tr>
<tr>
<td>db_port</td>
<td>Database port</td>
</tr>
<tr>
<td>mode</td>
<td>The default mode is <b>development</b> mode.</td>
</tr>
</table>
</li>
<li>
<h3>Build</h3>
<ol>
<li>
Install node dependencies: <pre>npm install --production</pre>
</li>
<li>
Init the database: <pre>npm run-script db</pre>
</li>
<li>
Install client app dependencies: <pre>npm run-script client</pre>
</li>
</ol>
</li>
<li>
<h3>Control</h3>
<ul>
<li>
Start server: <pre>npm start</pre>
</li>
<li>
Restart server: <pre>npm restart</pre>
</li>
<li>
Stop server: <pre>npm stop</pre>
</li>
<li>
Launch server in background: <pre>npm run-script launch</pre>
</li>
</ul>
</li>
</ul>
</div>
<hr />
<div class="section">
<h1>Test & Debug</h1>
<ul>
<li>
Make it easier to access the tools in the 'node_modules'.
<pre>source kit/shell_evn.sh</pre>
</li>
<li>
Install dev dependencies: <pre>npm install</pre>
</li>
<li>
Watch and auto compile files: <pre>npm run-script watch</pre>
</li>
<li>
Auto test: <pre>npm test</pre>
</li>
</ul>
</div>
<hr />
<div class="section">
<h1>Tech</h1>
<p>
The knowledge required to develop this project.
</p>
<table class="code">
<tr>
<td>Frameworks</td>
<td>Linux, CouchDB, Node</td>
</tr>
<tr>
<td>Libraries</td>
<td>Express.js, Underscore.js, jQuery, Bootstrap</td>
</tr>
<tr>
<td>Manager</td>
<td>npm, bower, grunt</td>
</tr>
<tr>
<td>Languages</td>
<td>Coffeescript, Javascript, html, stylus, css</td>
</tr>
</table>
<p>
The knowledge required to create widget.
</p>
<table class="code">
<tr>
<td>Libraries</td>
<td>jQuery</td>
</tr>
<tr>
<td>Languages</td>
<td>Coffeescript, html, css</td>
</tr>
</table>
</div>
<hr />
<div class="section">
<h1>MSV Architecture</h1>
<p>
Here I introduce a new web app architecture that I created, MSV. For more information about the MSV,
<a target="_blank" href="http://blog.ysmood.org/2012/12/msv-application-architecture/">read this article</a>.
</p>
<p>
Compared with the famous MVC, there is no controller component, instead the service component will take the charge.
</p>
<p>
The biggest disadvantage of this architecture is that it heavily depends on js and ajax. But it brings back better
response performance and smoother user experience.
</p>
</div>
<hr />
<div class="section">
<h1>Client App</h1>
<ol>
<li>
<h3>Peditor Layout Mode</h3>
<p>
There are two types of layout mode, Outlone and Preview.
</p>
<h4>Outline Mode</h4>
<p>
To make it easy to see the relationship between containers.
</p>
<img src="docs/img/peditor_outline_mode.png" alt="peditor_outline_mode">
</li>
<li>
<h3>Flexible Height Grid System</h3>
<p>
All containers are created by 'drag and drop'.
Now there're four types of containers:
<ul>
<li><b>root</b></li>
<li>
<b style="color: #6D63FF">row</b>
</li>
<li>
<b style="color: #00BEFF">column</b>
</li>
<li>
<b style="color: #FF73FF">widget</b>
</li>
</ul>
</p>
<img src="docs/img/peditor_grid_system.png" alt="height_responsive_design" />
<ul>
<li>The root can't directly hold a column.</li>
<li>
A row and a column can't become sibling nodes.
</li>
<li>
All containers except the widget can has height constraint.
</li>
<li>
Only column can contain widget.
A column can remain empty, or has several widgets inside, which behaves like a Stack List.
</li>
<li>
A row's width can be an absolute value,
but a column's width is always a relate value of its parent node.
</li>
</ul>
</li>
<li>
<h3>Widget Scaffolding</h3>
<p>
You can visit
<span class="al">http://localhost:<b>port</b>/widgets/<b>your_widget_name</b></span>
to debug your created widget.
</p>
</li>
<li>
<h3>Property Editor</h3>
<p>
Here's the properties that editable for each container.
</p>
<table>
<tr>
<td>Root</td>
<td>background image, width</td>
</tr>
<tr>
<td>Row</td>
<td>background image</td>
</tr>
<tr>
<td>Column</td>
<td>background image</td>
</tr>
<tr>
<td>Widget</td>
<td>Implemented by widget itself.</td>
</tr>
</table>
</li>
<li>
<h3>Save & Load Manager.</h3>
This will create a unique link of current pdoc.
</li>
<li>
<h3>History control</h3>
<p>Works the same as a common editor.</p>
</li>
</ol>
</div>
<hr />
<div class="section">
<h1>Protocol</h1>
<ul>
<li>
<h3>Widget API</h3>
<p>Here a simple overview of the widget api.</p>
<ul>
<li>
Every widget should be placed into the <span class="al">client/widgets/</span>
folder.
</li>
<li>
All assets of a widget should be placed into a folder,
and the folder's name should be the widget's name.
</li>
<li>
The entrance file of a widget should be <span class="al">index.html</span>,
and it should be directly under the widget's root folder.
</li>
<li>
All widget's js and css should be declared under the namespace of <span class="code al">PDT</span>,
the abbrev of peditor.
</li>
<li>
There's a <span class="al">/client/widgets/template/index.html</span> you should read for
more details information about the api.
</li>
<li>
There's a <span class="al">/client/widgets/title/</span>. It is a basic example of how to use the api.
</li>
</ul>
</li>
<li>
<h3>Page Document</h3>
<p>
A file for saving the edit's states. I call the format <b>Page Document</b>,
file extension '.pdoc'. It saves the edit commands and page resources.
The pdoc is based on json, and utf-8 encoded. Here's the overview of its fields.
</p>
<table>
<tr>
<td>_id</td>
<td>A unique id of the pdoc.</td>
</tr>
<tr>
<td>_rev</td>
<td>The unique revision id of the pdoc.</td>
</tr>
<tr>
<td>mime</td>
<td>The file's MIME information. Default value is <span class="code pt">'text/pdoc+json'</span>.</td>
</tr>
<tr>
<td>doc</td>
<td>The html that represents the current page state.</td>
</tr>
<tr>
<td>scripts</td>
<td>The js and css that the page requirs.</td>
</tr>
</table>
</li>
</ul>
</div>
<hr />
<div class="section">
<h1>Server App</h1>
<p>The CouchDB is good enough, it has already covered most the requirements with its build-in functions.</p>
<ol>
<li>Page documents manager, CRUD.</li>
</ol>
</div>
<div class="section">
<h1>Lisense</h1>
<h3>BSD-2-Clause</h3>
<p>Sep 2013 <a href="http://ysmood.org" target="_blank">ys</a></p>
</div>
</body>
</html>