Merge pull request #202 from gdude2002/django+200/wiki

[#200] Django Wiki

6 files changed, 543 insertions, 0 deletions

diff --git a/pydis_site/templates/wiki/plugins/images/index.html b/pydis_site/templates/wiki/plugins/images/index.html
new file mode 100644
index 00000000..a76703aa
--- /dev/null
+++ b/pydis_site/templates/wiki/plugins/images/index.html
@@ -0,0 +1,171 @@
+{% extends "wiki/article.html" %}
+{% load humanize %}
+{% load wiki_tags %}
+{% load wiki_thumbnails %}
+
+{# TODO: This page needs re-styling, but it's functional for now so we're not touching it until after wiki completion #}
+
+{% block wiki_pagetitle %}Images: {{ article.current_revision.title }}{% endblock %}
+
+{% block wiki_contents_tab %}
+  <p>The following images are available for this article. Copy the markdown tag to directly refer to an image from the article text.</p>
+
+  <p>
+    <a href="{% url 'wiki:edit' path=urlpath.path article_id=article.id %}" class="button is-white">
+      <span class="icon">
+        <i class="fas fa-arrow-left"></i>
+      </span>
+      <span>Back to edit page</span>
+    </a>
+  </p>
+
+  {% include "wiki/includes/pagination.html" %}
+
+  <table class="table is-fullwidth">
+    {% for image in images %}
+      {% with image.current_revision.imagerevision as revision %}
+        <thead>
+          <tr>
+            <th>{{ revision.get_filename|default:_("No filename") }}</th>
+            <th>Tag</th>
+            <th colspan="3">Updated</th>
+            <th>Size</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr>
+            <td rowspan="3">
+              <figure class="image is-128x128">
+                {% thumbnail revision.image "128x128" as thumb %}
+                  <a href="{{ revision.image.url }}">
+                    <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" title="{{ revision.get_filename }}" />
+                  </a>
+                {% endthumbnail %}
+              </figure>
+
+              {% if image|can_write:user %}
+                {% if revision.deleted %}
+                  <a class="button is-success" title="Upload and publish new image" href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-upload"></i>
+                    </span>
+                    <span>Upload</span>
+                  </a>
+                  <a class="button is-primary" title="Restore deleted image" href="{% url 'wiki:images_restore' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-sync"></i>
+                    </span>
+                    <span>Restore</span>
+                  </a>
+                {% else %}
+                  <a class="button is-success" title="Upload replacement image" href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-upload"></i>
+                    </span>
+                    <span>Upload</span>
+                  </a>
+                  <a class="button is-warning" title="Remove image" href="{% url 'wiki:images_delete' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-times"></i>
+                    </span>
+                    <span>Remove</span>
+                  </a>
+                {% endif %}
+                {% if article|can_moderate:user %}
+                  <a class="button is-danger" href="{% url 'wiki:images_purge' path=urlpath.path article_id=article.id image_id=image.id %}">
+                    <span class="icon">
+                      <i class="fas fa-trash"></i>
+                    </span>
+                    <span>Delete</span>
+                  </a>
+                {% endif %}
+              {% endif %}
+            </td>
+
+            <td>
+              <code>[image:{{ image.id }}]</code>
+            </td>
+
+            <td colspan="3">
+              {% include "wiki/includes/revision_info.html" %}
+            </td>
+
+            <td>
+              {{ revision.get_size|filesizeformat }}<br />{{ revision.width }}x{{ revision.height }} pixels
+            </td>
+          </tr>
+
+          <tr>
+            <th colspan="5">
+              History
+            </th>
+          </tr>
+
+          <tr>
+            <td class="is-paddingless" colspan="5">
+              <table class="table is-striped">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>Updated</th>
+                    <th>Size</th>
+                    <th>Dimensions</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {% for old_revision in image.revision_set.all %}
+                    <tr {% if forloop.first %}class="is-selected"{% endif %}>
+                      <td>
+                        <figure class="image">
+                          {% thumbnail old_revision.imagerevision.image "50x50" crop="center" as thumb %}
+                            <a href="{{ old_revision.imagerevision.image.url }}">
+                              <img src="{{ thumb.url }}" alt="{{ revision.imagerevision.get_filename }}" />
+                            </a>
+                          {% endthumbnail %}
+                        </figure>
+                      </td>
+
+                      <td>
+                        {% include "wiki/includes/revision_info.html" with current_revision=image.current_revision revision=old_revision %}
+                      </td>
+
+                      <td>
+                        {{ old_revision.imagerevision.get_size|filesizeformat }}
+                      </td>
+
+                      <td>
+                        {{ old_revision.imagerevision.width }}x{{ old_revision.imagerevision.height }} pixels
+                      </td>
+
+                      <td>
+                        {% if image|can_write:user and old_revision != image.current_revision %}
+                          <a class="button is-primary" href="{% url 'wiki:images_set_revision' path=urlpath.path article_id=article.id image_id=image.id rev_id=old_revision.id %}">
+                            <span class="icon">
+                              <i class="fas fa-sync"></i>
+                            </span>
+                            <span>Restore</span>
+                          </a>
+                        {% else %}
+                          <a class="button is-static has-text-grey">
+                            <span class="icon">
+                              <i class="fas fa-times"></i>
+                            </span>
+                            <span>Current</span>
+                          </a>
+                        {% endif %}
+                      </td>
+                    </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      {% endwith %}
+    {% endfor %}
+  </table>
+
+  {% include "wiki/includes/pagination.html" %}
+{% endblock %}
diff --git a/pydis_site/templates/wiki/plugins/images/purge.html b/pydis_site/templates/wiki/plugins/images/purge.html
new file mode 100644
index 00000000..3b514e4c
--- /dev/null
+++ b/pydis_site/templates/wiki/plugins/images/purge.html
@@ -0,0 +1,42 @@
+{% extends "wiki/article.html" %}
+{% load wiki_tags %}
+{% load wiki_thumbnails %}
+
+{% block wiki_pagetitle %}Purge image: {{ image }}{% endblock %}
+
+{% block wiki_contents_tab %}
+  <div class="columns">
+    <div class="column is-two-thirds">
+      <p>
+        Purge image: Completely remove image file and all revisions
+      </p>
+      <form method="POST" class="form-horizontal" enctype="multipart/form-data">
+        {% wiki_form form %}
+
+        <a href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}" class="button is-white">
+          <span class="icon">
+            <i class="fas fa-arrow-left"></i>
+          </span>
+          <span>Go Back</span>
+        </a>
+
+        <button class="button is-danger" type="submit">
+          <span class="icon">
+            <i class="fas fa-trash"></i>
+          </span>
+          <span>Permanently remove</span>
+        </button>
+      </form>
+    </div>
+
+    <div class="column is-one-third">
+      {% thumbnail image.current_revision.imagerevision.image "250x250" as thumb %}
+        <figure class="image">
+          <a href="{{ image.current_revision.imagerevision.image.url }}">
+            <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" title="{{ revision.get_filename }}" />
+          </a>
+        </figure>
+      {% endthumbnail %}
+    </div>
+  </div>
+{% endblock %}
diff --git a/pydis_site/templates/wiki/plugins/images/render.html b/pydis_site/templates/wiki/plugins/images/render.html
new file mode 100644
index 00000000..d14b3de4
--- /dev/null
+++ b/pydis_site/templates/wiki/plugins/images/render.html
@@ -0,0 +1,25 @@
+{% load wiki_thumbnails %}{% comment %}
+  This template is used for the markdown extension that renders images and captions.
+
+  NB! Watch out for line breaks, markdown might add <br />s and <p>s.
+{% endcomment %}{% with image.current_revision.imagerevision as revision %}{% spaceless %}
+<figure
+    class="image{% if align %} is-pulled-{{ align }}{% endif %}"
+    {% if width %}style="width: {{ width }}px;" {% endif %}
+>
+  <a href="{{ revision.image.url }}">
+    {% if size %}
+      {% thumbnail revision.image size upscale=False as thumb %}
+        <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" />
+      {% empty %}
+        <figcaption>
+          <em>Image not found</em>
+        </figcaption>
+      {% endthumbnail %}
+    {% else %}
+      <img src="{{ revision.image.url }}" alt="{{ revision.get_filename }}" />
+    {% endif %}
+  </a>
+  <figcaption>{{ caption|safe }}</figcaption>
+</figure>
+{% endspaceless %}{% endwith %}
diff --git a/pydis_site/templates/wiki/plugins/images/revision_add.html b/pydis_site/templates/wiki/plugins/images/revision_add.html
new file mode 100644
index 00000000..eb872eab
--- /dev/null
+++ b/pydis_site/templates/wiki/plugins/images/revision_add.html
@@ -0,0 +1,43 @@
+{% extends "wiki/article.html" %}
+{% load wiki_tags %}
+{% load wiki_thumbnails %}
+
+{% block wiki_pagetitle %}Replace Image: {{ image }}{% endblock %}
+
+{% block wiki_contents_tab %}
+  <div class="columns">
+    <div class="column is-two-thirds">
+      <p>
+        Upload an image to replace the current one.
+      </p>
+
+      <form method="POST" class="form-horizontal" enctype="multipart/form-data">
+        {% wiki_form form %}
+
+        <a href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}" class="button is-white">
+          <span class="icon">
+            <i class="fas fa-arrow-left"></i>
+          </span>
+          <span>Go Back</span>
+        </a>
+
+        <button class="button is-primary" type="submit">
+          <span class="icon">
+            <i class="fas fa-upload"></i>
+          </span>
+          <span>Upload</span>
+        </button>
+      </form>
+    </div>
+
+    <div class="column is-one-third">
+      {% thumbnail image.current_revision.imagerevision.image "250x250" as thumb %}
+        <figure class="image">
+          <a href="{{ image.current_revision.imagerevision.image.url }}">
+            <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" title="{{ revision.get_filename }}" />
+          </a>
+        </figure>
+      {% endthumbnail %}
+    </div>
+  </div>
+{% endblock %}
diff --git a/pydis_site/templates/wiki/plugins/images/sidebar.html b/pydis_site/templates/wiki/plugins/images/sidebar.html
new file mode 100644
index 00000000..b29ef240
--- /dev/null
+++ b/pydis_site/templates/wiki/plugins/images/sidebar.html
@@ -0,0 +1,206 @@
+{% load static %}
+{% load wiki_images_tags %}
+{% load wiki_tags %}
+{% load wiki_thumbnails %}
+
+{% with article|images_for_article as images %}
+  {% if article|images_can_add:user %}
+    {% include "wiki/includes/formerrors.html" %}
+
+    {# Include the hidden fields #}
+    {% for hidden in form.hidden_fields %}
+      {{ hidden }}
+    {% endfor %}
+
+    {% for field in form.visible_fields %}
+      {% include "wiki/includes/formfield.html" with render_labels=False %}
+    {% endfor %}
+
+    <button type="button" onClick="add_image(this.form)" name="{{ plugin.slug }}_save" value="1" class="button is-primary is-fullwidth">
+      <span class="icon">
+        <i class="fas fa-upload"></i>
+      </span>
+      <span>Upload</span>
+    </button>
+
+    <br />
+  {% endif %}
+
+  {% for image in images %}
+    {% with image.current_revision.imagerevision as revision %}
+      {% thumbnail revision.image "100x100" crop="center" as thumb %}
+        <div class="columns">
+          <div class="column is-half">
+            <img src="{{ thumb.url }}" alt="{{ revision.get_filename }}" title="{{ revision.get_filename }}" />
+          </div>
+          <div class="column is-half has-text-right">
+            <div class="tags is-right">
+              <span class="tag is-dark is-medium">Image ID: {{ image.id }}</span>
+            </div>
+
+            <p>
+              <a class="button is-primary" title="Insert image" href="javascript:void(insert_image({{ image.id }}))">
+                <span class="icon">
+                  <i class="fa fa-paste"></i>
+                </span>
+              </a>
+
+              {% if image|can_write:user %}
+                <a class="button is-primary" title="Replace" href="{% url 'wiki:images_add_revision' path=urlpath.path article_id=article.id image_id=image.id %}">
+                  <span class="icon">
+                    <i class="fas fa-upload"></i>
+                  </span>
+                </a>
+              {% endif %}
+            </p>
+          </div>
+        </div>
+      {% endthumbnail %}
+    {% endwith %}
+
+  {% empty %}
+    <div class="has-text-centered">
+      No images found for this article.
+    </div>
+    <br />
+  {% endfor %}
+
+  <p>
+    <a class="button is-primary is-fullwidth" href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}">
+      <span>Manage Images</span>
+      <span class="icon">
+        <i class="fas fa-arrow-right"></i>
+      </span>
+    </a>
+  </p>
+
+  <h4 class="title is-4">How to use images</h4>
+
+  <p>
+    Images are local to the article, and may only be used in the article they are
+    uploaded to. Images may be replaced by clicking the upload button next to it
+    above, but note that image revisions are kept and can be found on the
+    <a href="{% url 'wiki:images_index' path=urlpath.path article_id=article.id %}">Manage Images page</a>.
+  </p>
+
+  <p>
+    To make use of images in an article, use the <code>image</code> wiki tag in
+    your Markdown. These tags take some arguments for customisation, and you can
+    also include a caption on the next line, indented by four spaces. Note that
+    the <code>align</code> and <code>size</code> options are optional.
+  </p>
+    <p>
+    Syntax: <code>[image:ID align:x size:y]</code>
+    </p>
+  <p>
+    The ID to use is the image ID shown next to the image in the list above.
+    You can click on the insert button if you'd like to insert an image into the
+    editor without manually typing the tag.
+  </p>
+
+  <h5 class="title is-5">Example tag</h5>
+
+  <pre>
+  [image:1 align:left size:orig]
+      Python Discord logo
+  </pre>
+
+  <h5 class="title is-5">Options for align</h5>
+
+  <div class="tags">
+    <span class="tag is-primary">left</span>
+    <span class="tag is-primary">right</span>
+  </div>
+
+  <h5 class="title is-5">Options for size</h5>
+
+  <div class="tags">
+    <span class="tag is-primary">small</span>
+    <span class="tag is-primary">medium</span>
+    <span class="tag is-primary">large</span>
+    <span class="tag is-primary">orig</span>
+    <span class="tag is-primary">default</span>
+  </div>
+{% endwith %}
+
+<div class="modal" id="imgModal">
+  <div class="modal-background"></div>
+  <div class="modal-card" style="height: 80%; width: 80%;">
+    <div class="modal-card-head">
+      <p class="modal-card-title">Insert Image</p>
+    </div>
+    <div class="modal-card-body" style="padding: 0; overflow: hidden;">
+      <section class="section">
+        <input type="hidden" value="0" id="img_id" />
+        <div class="field is-horizontal">
+          <div class="field-label">
+            <label for="img_align">Image alignment</label>
+          </div>
+          <div class="field-body">
+            <div class="control has-icons-left is-fullwidth">
+              <div class="select is-fullwidth">
+                <select id="img_align">
+                  <option selected value="">Default</option>
+                  <option value="left">Left</option>
+                  <option value="right">Right</option>
+                </select>
+              </div>
+
+              <span class="icon is-left">
+                <i class="fas fa-align-center"></i>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="field is-horizontal">
+          <div class="field-label">
+            <label for="img_size">Image size</label>
+          </div>
+          <div class="field-body">
+            <div class="control has-icons-left is-fullwidth">
+              <div class="select is-fullwidth">
+                <select id="img_size">
+                  <option selected value="">Default</option>
+                  <option value="orig">Original</option>
+
+                  <option value="small">Small</option>
+                  <option value="medium">Medium</option>
+                  <option value="large">Large</option>
+                </select>
+              </div>
+              <span class="icon is-left">
+                <i class="fas fa-expand-arrows"></i>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="field is-horizontal">
+          <div class="field-label">
+            <label for="img_caption">Image caption</label>
+          </div>
+          <div class="field-body">
+            <input class="input" type="text" placeholder="Enter Caption" id="img_caption" />
+          </div>
+        </div>
+      </section>
+    </div>
+    <div class="modal-card-foot">
+      <button class="button is-light" aria-label="close">
+        <span class="icon">
+          <i class="fas fa-arrow-left"></i>
+        </span>
+        <span>Back</span>
+      </button>
+      <button class="button is-primary" id="id_image_insert">
+        <span class="icon">
+          <i class="fas fa-paste"></i>
+        </span>
+        <span>Insert</span>
+      </button>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript" src="{% static "js/wiki/image_sidebar.js" %}"></script>
diff --git a/pydis_site/templates/wiki/plugins/links/sidebar.html b/pydis_site/templates/wiki/plugins/links/sidebar.html
new file mode 100644
index 00000000..4fdbac72
--- /dev/null
+++ b/pydis_site/templates/wiki/plugins/links/sidebar.html
@@ -0,0 +1,56 @@
+{% load sekizai_tags %}
+{% load static %}
+
+<h4 class="title is-4">Link to another wiki page</h4>
+
+<p>
+  Type in something from another wiki page's title and auto-complete will help you create a tag for your wiki link. Tags for links look like this:<br />
+</p>
+
+<pre>[Title of link](wiki:ArticleSlug)</pre>
+
+{# We do this to prevent accidental form submission - this isn't _really_ a form #}
+<input type="submit" disabled style="display: none" aria-hidden="true" />
+
+<div class="field">
+  <div class="control has-icons-left">
+    <div class="dropdown">
+      <div class="dropdown-trigger">
+        <input class="input" type="text" id="page_title_input" value="" placeholder="Search: 3+ chars" aria-haspopup="true" aria-controls="page_title_menu">
+      </div>
+      <div class="dropdown-menu" id="page_title_menu" role="menu"></div>
+    </div>
+
+    <span class="icon is-small is-left">
+      <i class="fas fa-search"></i>
+    </span>
+  </div>
+</div>
+
+<div class="is-divider"></div>
+
+<h4 class="title is-4">An external link</h4>
+
+<p>
+  You can link to another website simply by inserting an address example.com or http://example.com or by using the markdown syntax:<br />
+</p>
+
+<pre>[Clickable text](http://example.com)</pre>
+
+{% addtoblock "js" %}
+  {% comment %}
+    So, for whatever reason, bulmahead doesn't have a LICENSE file. There is one in
+    the package.json, but that isn't a standard most projects adhere to - so I've
+    declined to include it within the project directly.
+
+    The package.json states MIT - but there is no prose or license
+    text available for the project itself.
+  {% endcomment %}
+
+  <script src="https://cdn.rawgit.com/mattmezza/bulmahead/master/dist/bulmahead.bundle.js"></script>
+  <script src="{% static "js/wiki/links_sidebar.js" %}"></script>
+
+  <script type="text/javascript">
+    setFetchURL("{% url 'wiki:links_query_urlpath' path=urlpath.path article_id=article.id %}");
+  </script>
+{% endaddtoblock %}