feat(attributes): add link to edit article into article footer (close #…

…92)

CHANGELOG.adoc

@@ -3,9 +3,9 @@
 :!author-email:
 :author: {author-name}
 :!email: {author-email}
-:revnumber: v1.41.0
-:revdate: 2020-01-08T11:48:54+0900
-:revremark: Add log that add `header` element into `article` element.
+:revnumber: v1.42.0
+:revdate: 2020-01-08T11:54:34+0900
+:revremark: Add log that add link to edit article on GitHub into article footer
 :doctype: article
 :description: gatsby-simple-blog-with-asciidoctor Change Log
 :title:
@@ -77,6 +77,8 @@ ifndef::env-github[:icons: font]
 * Add default values to `siteMetadata.repository`. (close link:{issues-url}/97[#97])
 * Switching of for repositroy link display. (close link:{issues-url}/98[#98])
 * `header` element into `article` element. (close link:{issues-url}/91[#91])
+* Link to edit article on GitHub into artticle footer.
+  (close link:{issues-url}/92[#92])
 
 ==== Update
 

README.adoc

@@ -3,9 +3,9 @@
 :!author-email:
 :author: {author-name}
 :!email: {author-email}
-:revnumber: v1.24.0
-:revdate: 2020-01-08T15:40:28+0900
-:revremark: Update link for article-css-for-asciidoc
+:revnumber: v1.25.0
+:revdate: 2020-01-08T15:41:13+0900
+:revremark: Add section that add link to edit article on GitHub
 :doctype: article
 :description: gatsby-simple-blog-with-asciidoctor README
 :title:
@@ -290,6 +290,103 @@ directory is not generated.
 Use this link:https://github.com/hitsuji-no-shippo/article-css-for-asciidoc/tree/30575534810dc487b6df82ba755943863340a271[
 git repository^].
 
+=== Add link to edit article on GitHub
+
+You can add link to edit on GitHub into article footer. To add a link,
+you need to set `repository` and `articles` in `siteMetadata`.
+If `siteMetadata.articles.url` is `''` (default), don't add a link.
+
+.`siteMetadata.articles`
+[cols="2", options="headers, autowidth"]
+|===========================================================
+|Keys                |Default values
+m|url               m|''
+m|isOtherRepositroy m|true
+m|filePath          m|{ Asciidoc: 'paths.from.source.full' }
+m|ignore            m|['']
+|===========================================================
+
+[WARNING]
+====
+Using `null` will cause an link:{repository-url}/issues/103[
+error].
+====
+
+==== How to make url
+
+.Articles is other repository (submodule)
+[source, JavaScript]
+----
+articles: {
+  dir: 'hitsuji-no-shippo/sample-articles-for-asciidoctor',  // <1>
+  isOtherRepositroy: true
+  filePath: { Asciidoc: 'paths.from.source.full' },
+}
+----
+<1> Repositroy name in GitHub.
+
+[CAUTION]
+====
+Nested submodules are not supported.
+====
+
+
+.Articles is same repository
+[source, JavaScript]
+----
+articles: {
+  dir: 'content/blog',  // <1>
+  isOtherRepositroy: false
+  filePath: { Asciidoc: 'paths.from.source.full' },
+}
+----
+<1> Articles directory path from gatsby project root.
+
+.url
+[cols="m,2*d", options="headers, autowidth]
+|===
+|isOtherRepositroy
+|URL to articles directory
+|Mutual
+
+|true
+|https://github.com
+
+.2+|/${articles.dir}/edit/master/${node[filePath]}
+
+|false
+|${repository.url}
+|===
+
+==== `filePath`
+
+After the `master/`, the field value of `filePath` in node follows.
+The Key is `node.internal.type` value, value is field of file path.
+For `Asciidoc: 'paths.from.source.full'`, Asciidoc node uses the value of
+`node.paths.from.source.full`.
+If field of `filePath` doesn't exist, not add link and no error occurs.
+
+[NOTE]
+====
+`node.paths.from.source` is maked link:{gatsby-transformer-asciidoc-url}#how-to-query[
+gatsby-transformer-asciidoc^].
+====
+
+==== `ignore`
+
+No link is added to the article with the path(field value of `filePath`) that
+glob matches at least one `siteMetadata.articles.ignore`.
+
+.example
+[source, JavaScript]
+----
+articles: {
+  dir: 'hitsuji-no-shippo/sample-articles-for-asciidoctor',
+  ignore: ['asciidoc-examples/**/*.adoc'],
+}
+----
+
+
 === Change links to SNS profile
 
 From icon to text

config/index.js

@@ -4,6 +4,10 @@ const site = {
   author: 'hitsji no shippo',
   description: 'A starter blog with asciidoctor.',
   siteUrl: 'https://gatsby-starter-blog-demo.netlify.com/',
+  articles: {
+    dir: 'hitsuji-no-shippo/sample-articles-for-asciidoctor',
+    ignore: ['asciidoc-examples/**/*.adoc'],
+  },
   twitter: 'hns_equal_st',
   github: 'hitsuji-no-shippo',
   medium: 'thundermiracle',

gatsby-config.js

@@ -6,6 +6,7 @@ const {
   description,
   siteUrl,
   repository,
+  articles,
   twitter = '',
   github = '',
   medium = '',
@@ -31,6 +32,15 @@ module.exports = {
       },
       ...repository
     },
+    articles: {
+      ...{
+        dir: '',
+        isOtherRepositroy: true,
+        filePath: { Asciidoc: 'paths.from.source.full' },
+        ignore: [''],
+      },
+      ...articles,
+    },
     social: {
       twitter,
       github,

package.json

@@ -22,6 +22,7 @@
     "gatsby-plugin-typography": "^2.3.7",
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-transformer-sharp": "^2.2.14",
+    "minimatch": "^3.0.4",
     "node-sass": "^4.13.0",
     "prop-types": "^15.7.2",
     "ptz-i18n": "^1.0.0",

src/components/Article/Footer.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { graphql, useStaticQuery } from 'gatsby';
+
+import minimatch from 'minimatch';
+
+const Footer = ({post}) => {
+  const {
+    site: {
+      siteMetadata: { repository, articles },
+    },
+  } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            repository {
+              url
+            }
+            articles {
+              dir
+              filePath {
+                Asciidoc
+              }
+              isOtherRepositroy
+              ignore
+            }
+          }
+        }
+      }
+    `,
+  );
+
+  // Can't use `null` in siteMetadata. #103
+  if (articles.dir === '' || articles.filePath === '') {
+    return null;
+  }
+
+  const filePath = (() => {
+    let value = post;
+
+    articles.filePath[post.internal.type].split('.').some(path => {
+      value = Object.prototype.hasOwnProperty.call(value, path)
+        ? value[path]
+        : null;
+
+      return Object.prototype.toString.call(value) !== `[object Object]`;
+    });
+
+    return typeof value === 'string' ? value : null;
+  })();
+
+  if (!filePath || articles.ignore.some(pattern => minimatch(filePath, pattern))) {
+    return null;
+  }
+
+  const articlesDir = `${articles.isOtherRepositroy ? 'https://github.com' : repository.url
+    }/${articles.dir}`;
+
+  return (
+    <p>
+      <a href={`${articlesDir}/edit/master/${filePath}`}
+        target="_blank"
+        rel="noopener noreferrer">
+        Edit on GitHub
+      </a>
+    </p>
+  );
+}
+
+Footer.propTypes = {
+  post: PropTypes.object.isRequired,
+};
+
+export default Footer;

src/components/Article/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Header from './Header'
 import LightWeightMarkup from './LightweightMarkup'
+import Footer from './Footer'
 
 const Article = ({post, translationsLink, languageContexts}) => {
   return (
@@ -13,6 +14,7 @@ const Article = ({post, translationsLink, languageContexts}) => {
        languageContexts={languageContexts}
       />
       <LightWeightMarkup html={post.html}/>
+      <Footer post={post}/>
     </article>
   );
 }

src/templates/blog-post.js

@@ -96,6 +96,9 @@ export const pageQuery = graphql`
       id
       html
       timeToRead
+      internal {
+        type
+      }
       document {
         title
         description
@@ -107,6 +110,13 @@ export const pageQuery = graphql`
         tags
         disqus
       }
+      paths {
+        from {
+          source {
+            full
+          }
+        }
+      }
       fields {
         langKey
       }