Merge branch 'master' into focus-report-field

nyaa/forms.py

@@ -168,7 +168,7 @@ class EditForm(FlaskForm):
     information = StringField('Information', [
         Length(max=255, message='Information must be at most %(max)d characters long.')
     ])
-    description = TextAreaField('Description (markdown supported)', [
+    description = TextAreaField('Description', [
         Length(max=10 * 1024, message='Description must be at most %(max)d characters long.')
     ])
 
@@ -222,7 +222,7 @@ class UploadForm(FlaskForm):
     information = StringField('Information', [
         Length(max=255, message='Information must be at most %(max)d characters long.')
     ])
-    description = TextAreaField('Description (markdown supported)', [
+    description = TextAreaField('Description', [
         Length(max=10 * 1024, message='Description must be at most %(max)d characters long.')
     ])
 

nyaa/static/css/main.css

@@ -349,3 +349,19 @@ a.text-purple:hover, a.text-purple:active, a.text-purple:focus { color: #a760e0;
 .torrent-file-list .file-size {
 	font-weight: bold;
 }
+
+.header-anchor {
+	padding-left: 0.5em;
+	visibility: hidden;
+	display: none;
+}
+
+h1:hover .header-anchor,
+h2:hover .header-anchor,
+h3:hover .header-anchor,
+h4:hover .header-anchor,
+h5:hover .header-anchor,
+h6:hover .header-anchor {
+	visibility: visible;
+	display: inline-block;
+}

nyaa/static/js/main.js

@@ -145,6 +145,17 @@ document.addEventListener("DOMContentLoaded", function(event) {
 	}
 });
 
+var markdownOptions = {
+	html : false,
+	breaks : true,
+	typographer:  true
+}
+var markdown = window.markdownit(markdownOptions);
+markdown.renderer.rules.table_open = function (tokens, idx) {
+	// Format tables nicer (bootstrap). Force auto-width (default is 100%)
+	return '<table class="table table-striped table-bordered" style="width: auto;">';
+}
+
 // Initialise markdown editors on page
 document.addEventListener("DOMContentLoaded", function() {
 	var markdownEditors = Array.prototype.slice.call(document.querySelectorAll('.markdown-editor'));
@@ -159,16 +170,23 @@ document.addEventListener("DOMContentLoaded", function() {
 		var previewTabEl = markdownEditor.querySelector(previewTabSelector);
 		var targetEl = markdownEditor.querySelector(targetSelector);
 
-    var reader = new commonmark.Parser({safe: true});
-    var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
-
 		previewTabEl.addEventListener('click', function () {
-      var parsed = reader.parse(sourceSelector.value.trim());
-      targetEl.innerHTML = writer.render(parsed);
+			var rendered = markdown.render(sourceSelector.value.trim());
+			targetEl.innerHTML = rendered;
 		});
 	});
 });
 
+// Render markdown from elements with "markdown-text" attribute
+document.addEventListener("DOMContentLoaded", function() {
+
+	var markdownTargets = document.querySelectorAll('[markdown-text]');
+	for (var target of markdownTargets) {
+		var rendered = markdown.render(target.innerHTML);
+		target.innerHTML = rendered;
+	}
+});
+
 //
 // This is the unminified version of the theme changer script in the layout.html @ line: 21
 // ===========================================================

nyaa/templates/_formhelpers.html

@@ -35,6 +35,7 @@
 {% endif %}
 	<div class="markdown-editor" id="{{ field_name }}-markdown-editor" data-field-name="{{ field_name }}">
 		{{ field.label(class='control-label') }}
+		<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" class="small">Markdown supported</a>
 		<ul class="nav nav-tabs" role="tablist">
 			<li role="presentation" class="active">
 				<a href="#{{ field_name }}-tab" role="tab" data-toggle="tab">
@@ -49,7 +50,25 @@
 		</ul>
 		<div class="tab-content">
 			<div role="tabpanel" class="tab-pane active" id="{{ field_name }}-tab" data-markdown-target="#{{ field_name }}-markdown-target">
-				{{ render_field(field, False, class_='form-control markdown-source') }}
+				{# Render this field manually, because we need to escape the inner text #}
+				<textarea class="form-control markdown-source" id="{{ field.id }}" name="{{ field.name }}">
+				{{- (field.data or "") | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) -}}
+				</textarea>
+				{% if field.errors %}
+					<div class="help-block">
+						{% if field.errors|length < 2 %}
+							{% for error in field.errors %}
+								{{ error }}
+							{% endfor %}
+						{% else %}
+							<ul>
+								{% for error in field.errors %}
+									<li>{{ error }}</li>
+								{% endfor %}
+							</ul>
+						{% endif %}
+					</div>
+				{% endif %}
 			</div>
 			<div role="tabpanel" class="tab-pane" id="{{ field_name }}-preview">
 				<div class="well" id="{{ field_name }}-markdown-target"></div>

nyaa/templates/edit.html

@@ -89,7 +89,7 @@
 
 	<div class="row">
 		<div class="form-group col-md-6">
-			<input type="submit" value="Edit" class="btn btn-primary">
+			<input type="submit" value="Save Changes" class="btn btn-primary">
 		</div>
 	</div>
 </form>

nyaa/templates/help.html

@@ -2,7 +2,64 @@
 {% block title %}Help :: {{ config.SITE_NAME }}{% endblock %}
 {% block body %}
 
-<h1>Coming soon (tm)</h1>
+{% macro linkable_header(heading, label) %}
+	<h3 id="{{ label }}">{{ heading }}<a class="header-anchor" href="#{{ label }}"><i class="fa fa-link" aria-hidden="true"></i></a></h3>
+{% endmacro %}
+
+<h1>Help</h1>
+
+<h2>Using the Site</h2>
+
+{{ linkable_header("How to Download", "how-to-dl") }}
+<p>
+	This site only offers torrent files and magnet links. To download the content of
+	the torrents, you will have to use a BitTorrent client such as qBitTorrent,
+	µTorrent, Transmission or Deluge.
+</p>
+
+{{ linkable_header("Using the Search Function", "using-search") }}
+<p>
+	You can combine search terms with the <kbd>|</kbd> operator, such as
+	<kbd>horrible|cartel</kbd>.
+</p>
+<p>
+	To exclude results matching a certain word, prefix them with <kbd>-</kbd>,
+	e.g. <kbd>FFF -memesubs</kbd>, which will return torrents with <em>FFF</em> in the
+	name, but not those which have <em>memesubs</em> in the name as well.
+</p>
+<p>
+	If you want to search for a several-word expression in its entirety, you can
+	surround searches with <kbd>"</kbd> (double quotes), such as
+	<kbd>"foo bar"</kbd>, which would match torrents named <em>foo bar</em> but not
+	those named <em>bar foo</em>.
+</p>
+
+{{ linkable_header("Reporting Torrents", "reporting") }}
+<p>
+	If you find a torrent that breaks the rules, click the
+	<button type="button" class="btn btn-danger">Report</button> button to the right
+	of the torrent's information page. Then, enter a reason for your report in the
+	dialog that opens, and hit the <button type="button" class="btn btn-danger">
+	Report</button> button to confirm.
+</p>
+
+{{ linkable_header("Styling Descriptions and Comments", "styling") }}
+<p>
+	You can style your comments and your torrent's description using
+	<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown
+	</a>. This includes adding images or linking to external websites.
+</p>
+<p>
+	To link to an external site, use <kbd>[label of link](https://example.com)</kbd>
+	where the text in the <kbd>[]</kbd> square brackets is the shown text of your
+	link, and the URL in the <kbd>()</kbd> parentheses is the URL your link will
+	point to.
+</p>
+<p>
+	Embedding an image is similar. Use <kbd>![alt text](https://example.com/image.jpg)</kbd>
+	to have an image embedded in your comment or description. Note the <kbd>!</kbd>
+	exclamation mark at the beginning, denoting that this link is an image.
+</p>
 {# <div class="content">
 	<h1>Help</h1>
 	<p><b>The search engine</b> is located at the top right, and it allows users to search through the torrent titles available on the site. Results matching either word A or B can be included by typing a vertical bar between them (|). Results matching a certain word can be excluded by prefixing that word with a hyphen-minus (-). Phrases can be matched by surrounding them with double-quotes (). Search results can be filtered by category, remake, trusted, and/or A+ status, and then narrowed down further by age and size ranges as well as excluding specific users. Sorting can be done in ascending or descending order by date, amount of seeders/leechers/downloads, size, or name. The search engine adapts to the current view and makes it possible to search for specific torrents in a specific subcategory from a specific user.</p>

nyaa/templates/layout.html

@@ -43,7 +43,7 @@
 		<!-- Core JavaScript -->
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.27.0/commonmark.min.js" integrity="sha256-10JreQhQG80GtKuzsioj0K46DlaB/CK/EG+NuG0q97E=" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.3.1/markdown-it.min.js" integrity="sha256-3WZyZQOe+ql3pLo90lrkRtALrlniGdnf//gRpW0UQks=" crossorigin="anonymous"></script>
 		<!-- Modified to not apply border-radius to selectpickers and stuff so our navbar looks cool -->
 		<script src="{{ static_cachebuster('js/bootstrap-select.js') }}"></script>
 		<script src="{{ static_cachebuster('js/main.js') }}"></script>

nyaa/templates/view.html

@@ -81,13 +81,13 @@
 </div>
 
 <div class="panel panel-default">
-	<div class="panel-body" id="torrent-description">
-		{% if torrent.description %}
+	<div markdown-text class="panel-body" id="torrent-description">
+		{%- if torrent.description -%}
 		{# Escape newlines into html entities because CF strips blank newlines #}
-		{{ torrent.description | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) }}
-		{% else %}
+		{{- torrent.description | escape | replace('\r\n', '\n') | replace('\n', '&#10;'|safe) -}}
+		{%- else -%}
 		#### No description.
-		{% endif%}
+		{%- endif -%}
 	</div>
 </div>
 
@@ -161,19 +161,12 @@
 				</div>
 				<div class="row">
 					{# Escape newlines into html entities because CF strips blank newlines #}
-					<div class="comment-content" id="torrent-comment{{ comment.id }}">{{ comment.text }}</div>
+					<div markdown-text class="comment-content" id="torrent-comment{{ comment.id }}">{{ comment.text }}</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<script type="text/javascript">
-		var target = document.getElementById('torrent-comment{{ comment.id }}');
-		var text = target.innerHTML;
-		var reader = new commonmark.Parser({safe: true});
-		var writer = new commonmark.HtmlRenderer({safe: true, softbreak: '<br />'});
-		var parsed = reader.parse(text.trim());
-		target.innerHTML = writer.render(parsed);
-	</script>
+
 	{% endfor %}
 	{% if comment_form %}
 	<form class="comment-box" method="POST">
@@ -207,7 +200,7 @@
 		</div>
 	</div>
 
-<script>
+<script type="text/javascript">
 	var target = document.getElementById('torrent-description');
 	var text = target.innerHTML;
 	var reader = new commonmark.Parser({safe: true});