-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy patheditor.html
133 lines (118 loc) · 5.7 KB
/
editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Inevitable Oxford Comma</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/atelier-cave-light.min.css">
<link rel="stylesheet" type="text/css" href="/css/layout.css">
<link rel="stylesheet" type="text/css" href="/css/module.css">
<link rel="stylesheet" type="text/css" href="/css/state.css">
<link rel="stylesheet" type="text/css" href="/css/theme.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<!-- jQuery fallback -->
<script type="text/javascript">if (!window.jQuery) { document.write('<script src="/vendor/js/jquery-2.1.4.min.js"><\/script>'); }</script>
<!-- Handlebars fallback -->
<script type="text/javascript">if (!window.jQuery) { document.write('<script src="/vendor/js/handlebars-v4.0.5.js"><\/script>'); }</script>
<!-- Bootstrap fallback -->
<script>
$(function() {
if($('body').css('color') != 'rgb(51, 51, 51)') {
$("head").prepend('<link rel="stylesheet" href="/vendor/css/bootstrap.min.css">'); }});
</script>
</head>
<body>
<main class="container">
<header id="site-header" class="jumbotron">
<h3 id="ham-menu">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</h3>
<h1>The Inevitable Oxford Comma</h1>
</header>
<nav class="first-row">
<button id="back-home-button" class="btn btn-default">Back to home</button>
</nav>
<div class="row row-editor">
<!-- left module -->
<section id="form-area" class="col-md-5">
<div class="well">
<h2 class="text-center">
<span class="glyphicon glyphicon-pencil"></span> Edit post
</h2>
<form>
<div class="form-group">
<label for="article-title">Article Title</label>
<input type="text" id="article-title" class="form-control" placeholder="Title" required>
</div>
<div class="form-group">
<label for="article-author">Author Name</label>
<input type="text" id="article-author" class="form-control" placeholder="Author" required>
</div>
<div class="form-group">
<label for="article-author-url">Author Link</label>
<input type="text" id="article-author-url" class="form-control" placeholder="URL" required>
</div>
<div class="form-group">
<label for="article-markdown">Content</label>
<textarea id="article-markdown" class="form-control" rows="15"></textarea>
<p class="help-block">Markdown styling is supported.</p>
</div>
<div class="form-group">
<label for="article-category">Blog category</label>
<input type="text" id="article-category" class="form-control" placeholder="Category" required>
</div>
<div class="checkbox form-inline" id="article-date">
<label>
<input type="checkbox" id="article-published" checked="true"> Use original publish date:
</label>
<input type="date" id="article-sch-date" class="form-control" disabled>
</div>
<button id="save-button" class="btn btn-success">Save changes</button>
<button id="delete-button" class="btn btn-danger pull-right">Delete article</button>
</form>
</div>
</section>
<section id="json-area" class="col-md-5 non-default">
<div class="well">
<h2 class="text-center">
<span class="glyphicon glyphicon-bullhorn"></span> Update your JSON
</h2>
<p id="json-msg"></p>
<p>To update your raw data file, copy the following code and paste it into your JSON file.</p>
<button id="return-button" class="btn btn-default">
<span class="glyphicon glyphicon-triangle-left"></span> Back to editor
</button>
<pre id="article-json" class="pre-scrollable"></pre>
</div>
</section>
<!-- end left module -->
<!-- right module -->
<section id="preview-area" class="col-md-7">
<h2 class="text-center">
<span class="glyphicon glyphicon-eye-open"></span> Live preview
</h2>
<div id="preview"></div>
</section>
<!-- end right module -->
</div>
</main>
<footer class="footer">
<div class="container">
<p class="text-muted footer-text">Made for Code Fellow 301</p>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script type="text/javascript" src="/vendor/js/html5sql.js"></script>
<script type="text/javascript" src="/js/webdb.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/article.js"></script>
<script type="text/javascript" src="/js/articleView.js"></script>
<script type="text/javascript" src="/js/articleController.js"></script>
<script type="text/javascript" src="/js/editor.js"></script>
</body>
</html>