many many many Varia's websites, work in progress: https://many.vvvvvvaria.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

162 lines
5.0 KiB

{% macro comments_styles() %}
{% if PELICAN_COMMENT_SYSTEM %}
{# NOTE:
# Instead of using this macro copy these styles in your main css file
# This marco is only here to allow a quickstart with nice styles
#}
<style>
#pcs-comment-form input,
#pcs-comment-form textarea {
width: 100%;
}
#pcs-comment-form-display-replyto {
border: solid 1px black;
padding: 2px;
}
#pcs-comment-form-display-replyto p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#pcs-comments ul {
list-style: none;
}
#pcs-comments .comment-left {
display: table-cell;
padding-right: 10px;
}
#pcs-comments .comment-body {
display: table-cell;
vertical-align: top;
width: 100%;
}
</style>
{% endif %}
{% endmacro %}
{% macro comments_form() %}
{% if PELICAN_COMMENT_SYSTEM %}
<section>
<form id="pcs-comment-form" action="#">
<legend>Add a Comment</legend>
<input type="hidden" id="pcs-comment-form-input-replyto">
<fieldset>
<label for="pcs-comment-form-input-name">Name</label>
<input id="pcs-comment-form-input-name" type="text" placeholder="Enter your name or nickname" />
</fieldset>
<fieldset>
<label for="pcs-comment-form-input-website">Website</label>
<input id="pcs-comment-form-input-website" type="text" placeholder="Enter your website (optional)" />
</fieldset>
<fieldset>
<label for="pcs-comment-form-input-textarea">Your Comment</label>
<textarea id="pcs-comment-form-input-textarea" rows="5" style="resize:vertical;" placeholder="Your comment"></textarea>
<p>You can use the <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a> syntax to format your comment.</p>
<div style="display: none; " id="pcs-comment-form-display-replyto"></div>
</fieldset>
<button type="submit"
id="pcs-comment-form-button-submit"
{# Piwik Track click on comment button
onclick="javascript:_paq.push(['trackEvent', 'comment', '{{ article.title }}', document.getElementById('pcs-comment-form-input-textarea').value]);" #}
>Post via email</button>
{% if PELICAN_COMMENT_SYSTEM_FEED and article %}
<a href="{{ SITEURL }}/{{ PELICAN_COMMENT_SYSTEM_FEED|format(article.slug) }}">
Comment Atom Feed
</a>
{% endif %}
</form>
</section>
{% endif %}
{% endmacro %}
{% macro comments_with_form() %}
{% if PELICAN_COMMENT_SYSTEM %}
<section id="pcs-comments">
<header>
<h2>Comments</h2>
<hr/>
</header>
{% if article.comments %}
<ul>
{% for comment in article.comments recursive %}
<li id="comment-{{comment.slug}}">
<div class="comment-left">
<img src="{{ SITEURL }}/{{ comment.avatar }}"
alt="Avatar"
height="{{ PELICAN_COMMENT_SYSTEM_IDENTICON_SIZE }}"
width="{{ PELICAN_COMMENT_SYSTEM_IDENTICON_SIZE }}">
</div>
<div class="comment-body">
<div style="float:right;">
<a role="button" href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.slug}}" rel="bookmark" title="Permalink to this comment">Permalink</a>
<button onclick="CommentSystem.setReply('{{comment.slug | urlencode}}', '{{comment.author | urlencode}}');">Reply</button>
</div>
<h4>
{% if comment.metadata['website'] %}
<a href="{{comment.metadata['website']}}">{{ comment.author }}</a>
{% else %}
{{ comment.author }}
{% endif %}
</h4>
<p>
Posted on
<time datetime="{{ comment.date.isoformat() }}" title="{{ comment.date.isoformat() }}">{{ comment.locale_date }}</time>
</p>
<div class="pcs-comment-content" {# class used as id in comments.js#}>
{{ comment.content }}
</div>
{% if comment.replies %}
<hr>
<ul>
{{ loop(comment.replies) }}
</ul>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
{% else %}
<p>There are no comments yet.</p>
{% endif %}
{{ comments_form() }}
</section>
{% endif %}
{% endmacro %}
{% macro comments_js(user, domain, includeJquery=True) %}
{% if PELICAN_COMMENT_SYSTEM %}
{% if includeJquery %}
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
{% endif %}
<script type="text/javascript" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/comments.js"></script>
<script type="text/javascript">
$(document).ready(function() {
CommentSystem.email_user = "{{ user }}";
CommentSystem.email_domain = "{{ domain }}";
CommentSystem.display_replyto_html = function(comment_content, article_slug, author) {
return ''
+ '<button style="float:right;" onclick="CommentSystem.cancelReply(); return false;" title="Cancel the reply">'
+ '×'
+ '</button>'
+ '<p>This comment will be posted as a reply to \'<a title="'+comment_content+'" href="#comment-'+article_slug+'">'+author+'</a>\'</p>';
};
$('#pcs-comment-form').on("submit",
function( event )
{
event.preventDefault();
$(location).attr('href', CommentSystem.getMailtoLink("{{ article.slug }}"));
}
);
});
</script>
{% endif %}
{% endmacro %}
{% macro comments_quickstart(user, domain) %}
{{ comments_styles() }}
{{ comments_with_form() }}
{{ comments_js(user, domain) }}
{% endmacro %}