wes
/
KettleBlog
1
0
Fork 0
Code Issues Pull Requests 15 Projects Releases Wiki Activity
Browse Source

add markdown editor

pull/1/head
wes 8 years ago
parent
7fdb1f0f77
commit
ec57a80ad8
11 changed files with 1510 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 4
      src/scripts/editor.js
  3. 74
      src/scripts/editor.tag
  4. 6
      src/scripts/post.tag
  5. 14
      src/scripts/raw.tag
  6. 2
      src/scripts/riotblog.js
  7. 2
      src/styles/riotblog.scss
  8. 2
      src/templates/index.html
  9. 7
      src/templates/write.html
  10. 4
      src/website.py
  11. 1406
      yarn.lock

1
package.json
View File

@ -29,6 +29,7 @@
"whatwg-fetch": "^2.0.2" "whatwg-fetch": "^2.0.2"
}, },
"dependencies": { "dependencies": {
"showdown": "^1.6.4",
"whatwg-fetch": "^2.0.2" "whatwg-fetch": "^2.0.2"
} }
} }

4
src/scripts/editor.js
View File

@ -0,0 +1,4 @@
import riot from 'riot';
import './editor.tag';
riot.mount("editor");

74
src/scripts/editor.tag
View File

@ -0,0 +1,74 @@
<editor>
<div class="centered container">
<div class="columns">
<div class="column col-6">
<textarea onfocus={clearplaceholder}
onblur={checkplaceholder}
oninput={echo}
__disabled={""}
class="form-input editor centered"
ref="textarea"
rows="10"
cols="50"
maxlength={this.maxlength}>
{ placeholder }
</textarea>
<button onclick={submit}
class="btn post-submit centered">
Submit Post
</button>
</div>
<div class="column col-6">
<raw content="{this.converted}"></raw>
</div>
</div>
</div>
<script>
import './raw.tag';
import 'whatwg-fetch';
import { default as showdown } from 'showdown';
import { default as R } from 'ramda';
this.R = R;
this.converter = new showdown.Converter();
this.converted = "<h3>Nothing here yet</h3>";
this.placeholderText = "Write a post!"
this.placeholder = this.placeholderText;
this.focused = false;
clearplaceholder() {
if (!this.focused) {
this.update({
"placeholder" : "",
"focused" : true
})
}
}
checkplaceholder() {
if (this.refs.textarea.value.trim().length == 0) {
this.update({
"placeholder" : this.placeholderText,
"focused" : false
});
}
}
echo(ev) {
this.update({"converted" : this.converter.makeHtml(this.refs.textarea.value)});
console.log("tried updating the raw tag");
}
var self = this;
submit() {
var post = {
"author" : "name",
"text" : this.refs.textarea.value
};
console.log("Submitting the post");
console.log(post);
}
</script>
</editor>

6
src/scripts/post.tag
View File

@ -1,24 +1,20 @@
<post> <post>
<div class="postnav centered"> <div class="postnav centered">
<button class={"btn btn-primary " + (this.pid <= 1 ? "disabled" : " ") + this.prevloading} <button class={"btn btn-primary " + (this.pid <= 1 ? "disabled" : " ") + this.prevloading}
onclick={this.prev} onclick={this.prev}
> >
Last One Last One
</button> </button>
<button class={"btn btn-primary " + (this.nomore ? "disabled" : " ") + this.nextloading} <button class={"btn btn-primary " + (this.nomore ? "disabled" : " ") + this.nextloading}
onclick={this.next} onclick={this.next}
> >
Next One Next One
</button> </button>
</div> </div>
<h4 class="post centered" if={this.nomore}> <h4 class="post centered" if={this.nomore}>
No More Posts! No More Posts!
</h4> </h4>
<div if={!(this.loading || this.nomore)} <div if={!(this.loading || this.nomore)}
class="post centered" class="post centered"
> >
@ -27,7 +23,6 @@
<p class="post-content centered text-break"> <p class="post-content centered text-break">
{ this.content } { this.content }
</p> </p>
<div class="divider"></div> <div class="divider"></div>
<comments pid={this.pid}> <comments pid={this.pid}>
</comments> </comments>
@ -49,7 +44,6 @@ self.prevloading = "";
self.nextloading = ""; self.nextloading = "";
self.nomore = false; self.nomore = false;
self.pid = 1;
self.content = ""; self.content = "";
prev(ev) { prev(ev) {

14
src/scripts/raw.tag
View File

@ -0,0 +1,14 @@
<raw>
<span></span>
<script>
updateContent() {
this.root.innerHTML = opts.content;
}
this.on("update", function() {
this.updateContent();
});
this.updateContent();
</script>
</raw>

2
src/scripts/riotblog.js
View File

@ -4,7 +4,9 @@ import './comment.tag';
import './bbutton.tag'; import './bbutton.tag';
import './post.tag'; import './post.tag';
import './posts.tag'; import './posts.tag';
import './editor.tag';
riot.mount("editor");
riot.mount("post", riot.mount("post",
{ {
"creator" : "author" "creator" : "author"

2
src/styles/riotblog.scss
View File

@ -85,3 +85,5 @@
.footer { .footer {
margin-top: 10%; margin-top: 10%;
} }
.editor {}

2
src/templates/index.html
View File

@ -11,8 +11,6 @@
<posts> <posts>
<post></post> <post></post>
</posts> </posts>
<editor>
</editor>
<footer class="footer"> <footer class="footer">
</footer> </footer>

7
src/templates/write.html
View File

@ -11,8 +11,8 @@
<body> <body>
{% block content %} {% block content %}
<posteditor> <editor>
</posteditor> </editor>
{% endblock %} {% endblock %}
@ -27,8 +27,7 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script type="text/javascript" src="/blog/scripts/tags.min.js"></script> <script type="text/javascript" src="/blog/scripts/riotblog.min.js"></script>
<script type="text/javascript" src="/blog/scripts/blog.min.js"></script>
{% endblock %} {% endblock %}
</body> </body>

4
src/website.py
View File

@ -53,6 +53,10 @@ def NeverWhere(configfile=None):
print("matched index") print("matched index")
return render_template("index.html") return render_template("index.html")
@app.route("/blog/editor/", methods=("GET", "POST"))
def editor():
return render_template("write.html")
@app.route("/blog/scripts/<filename>", methods=("GET", "POST")) @app.route("/blog/scripts/<filename>", methods=("GET", "POST"))
def send_script(filename): def send_script(filename):
print("matched scripts route") print("matched scripts route")

1406
yarn.lock
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save