Move new post form into modal dialog

With a button in the page actions menu for opening the modal dialog.

This means that "footer links" are no longer needed, now there's only
header links. (The footer links weren't working anymore anyway, since I
removed the footer.)

_includes/edit_page_link.html

@@ -1,3 +1 @@
-{% if site.edit_page_link != false %}
-  <a href="{{ site.github.repository_url }}/edit/master/{{ page.path }}" title="Edit this page on GitHub" name="Edit this page on GitHub" target="_blank">Edit</a>
-{% endif %}
+<a href="{{ site.github.repository_url }}/edit/master/{{ page.path }}" title="Edit this page on GitHub" name="Edit this page on GitHub" target="_blank">Edit</a>

_includes/new_post_form.html

@@ -9,7 +9,7 @@
   Type a title and hit <kbd>Enter</kbd>
   to create a new post in <a href="{{ site.github.repository_url }}/tree/master/_posts"><code>{{ site.github.hostname }}/{{ site.github.repository_nwo }}</code></a>:
 </label>
-<input id="new-post" autofocus style="width:100%; padding:.3em; margin-top:1em; font-size:x-large;" class="js-new-post" type="text" spellcheck="true" onchange="doNewPost()" title="Create a new post" placeholder="Title&hellip;">
+<input id="new-post" autofocus style="width:770px; padding: 5px; margin-top:1em; font-size:x-large;" class="js-new-post" type="text" spellcheck="true" onchange="doNewPost()" title="Create a new post" placeholder="Title&hellip;">
 
 <script>
   function doNewPost() {

_includes/new_post_link.html

@@ -0,0 +1 @@
+<a style="cursor: pointer;" id="new_post_link" title="Create a new post" name="Create a new post">New</a>

_includes/new_post_modal.html

@@ -0,0 +1,42 @@
+{% comment %}
+A modal dialog for creating a new post.
+
+Usage
+=====
+
+  {% include new_post_modal.html %}
+
+You also need to include, somewhere in your page, the link for opening the modal:
+
+  {% include new_post_link.html %}
+{% endcomment %}
+{% assign modal_id  = "new_post_modal" %}
+{% assign link_id = "new_post_link" %}
+{% assign close_id  = "new_post_close" %}
+
+<div id="{{ modal_id }}" class="modal">
+  <div class="modal__content content__outer-container">
+    <span id="{{ close_id }}" class="modal__close">&times;</span>
+    {% include new_post_form.html %}
+  </div>
+</div>
+
+<script>
+  const modal = document.getElementById("{{ modal_id }}");
+  const btn = document.getElementById("{{ link_id }}");
+  const close = document.getElementById("{{ close_id }}");
+
+  btn.onclick = function() {
+    modal.style.display = "block";
+    document.querySelector('.js-new-post').focus();
+  }
+
+  close.onclick = function() { modal.style.display = "none"; }
+
+  // When the user clicks anywhere outside of the modal, close it
+  window.onclick = function(event) {
+    if (event.target == modal) {
+      modal.style.display = "none";
+    }
+  }
+</script>

_includes/page_actions_menu.html

@@ -7,13 +7,14 @@
   {% include page_actions_menu.html %}
 {% endcomment %}
 {% capture menu_items %}
-  {% for item in site.data.footer_links %}
-    <a href="{{ item.url | relative_url }}" {%- if item.title %}title="{{ item.title }}"{% endif -%}>{{ item.text }}</a>
-  {% endfor %}
-  {% include view_source_link.html %}
-  {% include edit_page_link.html %}
+  {% if site.new_post_link != false %}{% include new_post_link.html %}{% endif %}
+  {% if site.view_source_link != false %}{% include view_source_link.html %}{% endif %}
+  {% if site.edit_page_link != false %}{% include edit_page_link.html %}{% endif %}
 {% endcapture %}
 
-<div class="page-actions-menu" style="position: fixed; bottom: 0; right: 0;">
-  {% include dropup.html menu_items=menu_items %}
-</div>
+{% assign menu_items = menu_items | strip %}
+{% if menu_items != "" %}
+  <div class="page-actions-menu" style="position: fixed; bottom: 0; right: 0;">
+    {% include dropup.html menu_items=menu_items %}
+  </div>
+{% endif %}

_includes/view_source_link.html

@@ -1,3 +1 @@
-{% if site.view_source_link != false -%}
-  <a href="https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/{{ page.path }}" title="View the source code for this page" name="View the source code for this page">View Source</a>
-{%- endif %}
+<a href="https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/{{ page.path }}" title="View the source code for this page" name="View the source code for this page">View Source</a>

_layouts/default.html

@@ -38,6 +38,7 @@
     {{ content }}
 
     {% include page_actions_menu.html %}
+    {% if site.new_post_link != false %}{% include new_post_modal.html %}{% endif %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.2/anchor.min.js"></script>
     <script>
        anchors.options.placement = "left";

_posts/2019-11-11-edit-page-and-view-source-buttons.md

@@ -1,7 +1,18 @@
 Edit Page and View Source Buttons
 =================================
 
-All pages and posts have a <kbd>View source</kbd> button that links to the raw copy of the page's source code
-(e.g. the Markdown source) for reference and an <kbd>Edit</kbd> button for quickly editing the page on GitHub
-(very handy for correcting typos for example). Both buttons are in the page footer. Look at the footer at the
-bottom of this page for an example.
+If you hover over the small `☰` menu in the bottom-right of every page it opens a
+popup menu with a {% include view_source_link.html %} link to the
+raw copy of the page's source code (e.g. the Markdown source) and
+an {% include edit_page_link.html %} link for quickly editing the page on GitHub
+(very handy for correcting typos for example).
+
+To remove the Edit and View Source links set `view_source_link: false` and
+`edit_page_link: false` in your `_config.yml`:
+
+```yaml
+view_source_link: false
+edit_page_link: false
+```
+
+The same menu also contains a handy link for [easily creating a new post](2019-11-11-new-post-form.md).

_posts/2019-11-11-new-post-form.md

@@ -1,30 +1,21 @@
 New Post Form
 =============
 
-The [`new_post_form.html`]({{ site.github.repository_url }}/blob/master/_includes/new_post_form.html) include renders a form
-for quickly creating a new post on GitHub:
+As well as the [Edit and View Source links](./2019-11-11-edit-page-and-view-source-buttons.md)
+the `☰` menu in the bottom-right of every page also includes a
+<kbd>New</kbd> button that opens a modal dialog with a form
+for quickly creating a new post on GitHub.
 
-{% include new_post_form.html %}
+When submitted the new post form opens GitHub's <samp>New File</samp> page with
+the path, filename and commit message pre-filled based on the title you enter.
+You can type the body of your post and just click GitHub's <kbd>Create new
+file</kbd> button. A new post created in this way is a
+[draft](./2019-12-22-drafts.md) by default so you can save the file to GitHub
+without it appearing on your site yet.  To publish the post just delete the
+pre-filled YAML front matter from the file.
 
-The form opens GitHub's <samp>New File</samp> page with the path, filename and commit message pre-filled based on the title you enter.
-You can type the body of your post and just click GitHub's <kbd>Create new file</kbd> button. A new post created in this way
-is a draft by default so you can save the file to GitHub without it appearing on your site yet.
-To publish the post just delete the pre-filled YAML front matter from the file.
-
-To add a new post form like the one above to your site just call the `new_post_form.html` include like this:
-`{% raw %}{% include new_post_form.html %}{% endraw %}`. You could put this in a `new.md` file and then just visit
-`YOUR_SITE.com/new` whenever you want to create a new post. See
-[`{{ site.github.hostname }}/{{ site.github.repository_nwo }}/new.md`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/new.md)
-for an example.
-
-This demo site also uses [`_data/footer_links.yaml`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/_data/footer_links.yaml)
-to add a link in the site footer to the new post page. `footer_links.yaml` is a
-Jekyll [Data File](https://jekyllrb.com/docs/datafiles/) that contains a list
-of links to go in the site footer. To add a link to your `new.md` file add an
-item like this to `footer_links.yaml`:
+To remove the New Post link `new_post_link: false` in your `_config.yml`:
 
 ```yaml
-- url: new
-  text: New
-  title: Create a New Post
+new_post_link: false
 ```

_posts/2019-11-25-header-links.md

@@ -0,0 +1,8 @@
+Header Links
+============
+
+You can use Jekyll [Data Files](https://jekyllrb.com/docs/datafiles/) to add
+links to the site header.
+Create a `_data/header_links.yaml` file to specify your header links.
+For example see
+[this site's `header_links.yaml`](https://raw.githubusercontent.com/{{ site.github.repository_nwo }}/master/_data/header_links.yaml).

_sass/_modal.scss

@@ -0,0 +1,30 @@
+.modal {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.modal__content {
+  background-color: white;
+  margin: 15% auto;
+  padding: 20px;
+}
+
+.modal__close {
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.modal__close:hover,
+.modal__close:focus {
+  text-decoration: none;
+  cursor: pointer;
+}

_sass/jekyll-theme-seanh.scss

@@ -17,6 +17,7 @@
 @import "lead";
 @import "links";
 @import "lists";
+@import "modal";
 @import "quotes";
 @import "rouge";
 @import "samp";