gatsby-simple-blog-with-asciidoctor

Demo

• Home

• Asciidoctor Examples.

📎	Change netliby config with netlify.toml build command yarn build environment variable Add $ARTICLES_REPOSITORY. The value is hitsuji-no-shippo/sample-posts-with-asciidoc.

❗	I’m an English leanear. Issues with README fixes are also welcome.

💡	Derivative list hitsuji-no-shipo/gatsby-blog-with-asciidoctor Add pages support. hitsuji-no-shipo/gatsby-blog-for-hns Display revision number and remark. hitsuji-no-shipo/blog-with-gatsby Maek config link to another repository.

Table of Contents

• Diffrences from thundermiracle/gatsby-simple-blog 2019-09-14
  • Change to create article from markdown to asciidoc
  • Asciidoctor Support to CSS
  • Articles Management
  • Link that Edit / View history in GitHub
  • Links in Bio
  • Author Config
  • Replace Local Link behavior in Articles
  • Profile Picture Link
  • Article Author Display
  • Date Display
  • Disqus
  • Tags Link
  • Scroll Up
  • HOME Link
  • Tag List position
  • Tag Page
  • Footer
  • Change element of blog entry
  • SEO
  • Add GitHub Actions
  • Delete ./deploy Directory
• Description
• How to use
  • Use gatsby new
  • Use git clone
• How to deploy by Circle-CI in Medium.com
• Configuration
• i18n
• Features
• LICENSE
  • This project
  • Materials used

Diffrences from thundermiracle/gatsby-simple-blog 2019-09-14

Change to create article from markdown to asciidoc

Create articles using asciidoc file. The files are transformed with @hitsji_no_shippo/gatsby-transformer-asciidoc.

Convert value from frontmatter to attributes

Example

Before (Markdown) --- title: Show Disqus date: "2019-06-10T22:40:32.169Z" tags: ['2019'] disqus: true ---

After (Asciidoc) = Show Disqus :revdate: 2019-12-15T16:52:25+0900 :page-tags: ["2019"] :page-disqus: true

Change fields

Before (Markdown)	After (Asciidoc)
fontmatter.date	revision.date
fontmatter.title	document.title
frontmatter.description	document.description
frontmatter.tags	pageAttributes.tags
frontmatter.disqus	pageAttributes.disqus

expect field delete

@hitsji_no_shippo/gatsby-transformer-asciidoc doesn’t support expect.

Plugins

The following 7 remark plugins have been deleted.

⚠️	I’m sorry for those who read this README on GitHub because it is difficult to read.

Deleted Plugins

Link to Material

Local Material

Name	Alternative
gatsby-remark-copy-linked-files	None
gatsby-remark-images	Display Images Images Setting the Location of Images Set imagesdir: @hitsuji_no_shippo/gatsby-transformer-asciidoc Before (Markdown)  After (Asciidoc) Image file is not automatically copied to public directory. THerefore, it is necessary to move to public directory. Move image to public/images mkdir public/images mv content/blog/hello-world/salty_egg.jpg public/images Asciidoc image:{imagesdir}/salty_egg.jpg[Chinese Salty Egg, link={imagesdir}/salty_egg.jpg] // (1) imagesdir attribute values is /images of default value. Size Images link Example image:{url}[alt text, link={link-url}]
gatsby-remark-autolink-headers	Sections Attributes Summary sectids attribute idprefix attribute idseparator attribute sectanchors attribute sectanchors attributes

External Material

Name	Alternative
gatsby-remark-external-links	window attribute in link macro. Macro examples link:{url}[display text, window=_blank] // (1) link:{url}[display text^] // (2) specify target window Shorthand Example Before (Markdown) [salted duck eggs](http://en.wikipedia.org/wiki/Salted_duck_egg). After (Asciidoc) link:http://en.wikipedia.org/wiki/Salted_duck_egg[salted duck eggs, window=_blank]
gatsby-remark-responsive-iframe	Youtube and vive can be embedded.

Display Text

Name	Alternative
gatsby-remark-prismjs	None. I want it too. #180
gatsby-remark-smartypants	None.

⚠️	I don’t know much about the plugins above. Therefore, the alternative may be wrong.

Change plugin

Change gatsby-plugin-i18n

gatsby-plugin-i18n doesn’t support asciidoc. Therefore,it was changed to @hitsuji_no_shippo/gatsby-plugin-i18n that supports Asciidoc.

Ignore _includes directory and README, CHANGELOG

The ignore option in gatsby-source-filesystem is used so that the next files are not generated.

Ignore ascidoc files

• In _includes directory

• README.adoc

• CHANGELOG.adoc

Set Attributes

Details

Empty and Not set

Value	Attribute
Empty	showtitle
Not set	!showtitle

Can not overwirte

Attribute	Value
doctype	article
showtitle	Not set

Can be overwirtten

The attributes of the page have priority.

TOC

Attribute	Value
toc	auto
toclevels	2

ID

Attribute	Value
sectids	Empty
sectlinks
sectanchors
idprfix
idseparator	-

Section

Attribute	Value
sectnums	Not set
sectnumlevels	3

Caption

Attribute	Value
example-caption	Empty
figure-caption
table-caption
listing-caption

The Others

Attribute	Value
icons	font
xrefstyle	full
experimental	Emptye

Asciidoctor Support to CSS

Use this git repository.

Articles Management

There are two ways to articles management.

Another Repository (Default)

If there is not content/blog, clone articles with setup/clone-articles.sh. If there is content/blog directory, do not clone.

The clone repository is ${GIT_HOST}/${ARTICLES_REPOSITORY} with environment variables. When using another repository as an articles, be sure to set $ARTICLES_REPOSITORY. $GIT_HOST is not required. If unset, it will be https://github.com.

For demo

GIT_HOST	unset (i.e. https://github.com)
ARTICLES_REPOSITORY	hitsuji-no-shippo/sample-posts-with-asciidoc

Same Repository

Place the articles directory as content/blog. You do not need to set environment variables.

Link that Edit / View history in GitHub

You can add GitHub link into article footer. To add a link, you need to set repository and articles in config/index.js. The link is not displayed in the following cases.

Cases

• ${GIT_HOST}/${ARTICLES_REPOSITORY} is doesn’t contained github.com.

• articles.filePath doesn’t exist.

• The field of articles.filePath doesn’t exist.

• Match with articles.ignore option.

How to make url

$ARTICLES_REPOSITORY	URL to articles directory	Common
set	${GIT_HOST}/${ARTICLES_REPOSITORY}	/${articles.dir}/{edit | commits}/master/${node[filePath]}
unset	${repository.url}/content/blog

🔥	Submodules are not supported.

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.

📎	node.paths.from.source is maked gatsby-transformer-asciidoc.

ignore

No link is added to the article with the path(field value of filePath) that glob matches at least one articles.ignore.

example

articles: {
  dir: 'hitsuji-no-shippo/sample-articles-for-asciidoctor',
  ignore: ['asciidoc-examples/**/*.adoc'],
}

Links in Bio

Change points

• From icon to text.

• Add rss(/rss.xml).

• Config From siteMetadata to linksInBio in config/index.js.

  Example

  {
    twitter: 'https://twitter.com/hns_equal_st',     // <1>
    GitHub: 'https://github.com/hitsuji-no-shippo',  // <1>
  }

  1. key (twitter) is dispaly text, value (https…​) is url.

Author Config

Change value of the author name from site.author to author.name in config/index.js. The authro values are used as the default attributes in Asciidoc.

Key	siteMetadata	Asciidoc Attribute	Required
name	author	author	Yes
email	Not use	email	No
url	Not use	page-author-url	No
twitter	social.twitter	page-author-twitter	No
shouldDisplay	Not use	Not use	No

📎	Page attributes take precedence Page attributes take precedence because @ is added to the end of the default asciidco attributes.

Replace Local Link behavior in Articles

Use gatsby-plugin-catch-links to replace local link behavior in articles with gatsby-link and navigation to improve performance.

Profile Picture Link

Add link to the profile picture in Bio. Used value of url is author.url in config/index.js. If you do not want to add a link, set author.url to null.

Article Author Display

Dispaly article author under article title. By default, if the article author name is the same as author.name in config/index.js, it will not be displayed. If you want to display it, set author.shouldDisplay in config/index.js to true.

Link

The article author is the blog author.

If the author.url exist, will be a link.

The article author is not the blog author.

If the page-author-url or page-author-twitter of asciidoc attributes exists, will be a link.

How to make href (Y: exist N: not exist)

twitter	url	href
N	N	Not link
Y	N	https://twitter.com/{page-author-twitter}
N	Y	page-author-url
Y	Y

Date Display

Date display is determined by dateDisplay in config/index.js.

dateDisplay

const dateDisplay = {
  format: "LL",  // (1)
  diff: {
    patternWithNotConvert: /month|year/,  // (2)
    newPost: {
      boundary: 7,  // (3)
      emoji: '🎉',  // (4)
    },
  },
}

1. String using token. In the case of LL, the date dispaly is as follows:

   English	January 22, 2020
   日本語	2020年1月21日

2. Pattern not converted to date difference (e.g a day ago, 1日前 ). In the case of /month|year/, date dispaly is converted as follows:

   Now is January 22, 2020

   January 20, 2020	2 days ago
   December 2, 2019	December 2, 2019
   January 20, 2019	January 20, 2019

3. Boundary days to determine if it is a new post. In the case of 7, it is determined as follows.

   Difficult	New
   an hour ago	Yes
   a day ago
   2 days ago
   7 days ago
   8 days ago	No

   🔥	Possible values are 1 to 25.

4. Emoji to be added to the beginning of new post date.

Disqus

Change default from non dispaly to dispaly

By default, dispaly disqus in article pages. If the value of asciidoc attribute page-disqus is false, non dispaly.

Add comment count link

Displayed next to read to time. Click to go to embedded disqus of the article.

Tags Link

Add link to tag list next to count posts in index.

Scroll Up

Add Scroll Up at bottom right.

HOME Link

Add home link between relative posts in article page.

Tag List position

Change position in index to under the line starting from update date.

Tag Page

Add description of article in tag page.

Footer

Text

Update Made of to Built with.

Repository Link

Used repository in config/index.js Doesn’t displays link, if url is undefined or displaysLink is false.

Default values

url	https://github.com/hitsuji-no-shippo/gatsby-simple-blog-with-asciidoctor
name	gatsby-simple-blog-with-asciidoctor
displaysLink	true

Change element of blog entry

Change to article.

SEO

• Add twitter:site. The value (twitter id) used is siteMetadata.social.twitter

• Add og:url. The value used is siteMetadata.siteUrl + node.fields.slug

• The value used in twitter: creator has been changed to page-author-twitter asciidoc attribute.

  📎	Cases where twitter: creator is not created. The page-author-twitter asciidoc attribute isn’t exist. The author attribute is different from the siteMetadata.author and the page-author-twitter attribute value is the same as siteMetadata.social.twitter.

Add GitHub Actions

Add a workflow to Netlify to deploy. The workflow trigger is commit pushed.

Secrets

Must set secrets

NETLIFY_AUTH_TOKEN	How to obtain a token.
NETLIFY_SITE_ID	site id in Site information.

How to creating encrypted secrets.

Deploy Message

Netlify deploy message is commit message that triggerd. If the commit message cant’t be fetched, the message is commit sha is ${commit SHA}.

Delete ./deploy Directory

Delete ./deploy.

Description

A gatsbyjs starter forked from gatsby-starter-blog and applied overreacted lookings, with tags and breadcrumbs, eslint, relative posts, disqus, i18n, eslint supported.

How to use

Use gatsby new

1. Install the Gatsby CLI.

   npm install -g gatsby-cli

2. Create a Gatsby site.

   gatsby new gatsby-simple-blog-with-asciidoctor https://github.com/hitsuji-no-shippo/gatsby-simple-blog-with-asciidoctor
   cd gatsby-simple-blog-with-asciidoctor

3. Clone articles repository.
   Read Articles Management for details.

   declare -x ARTICLES_REPOSITORY=hitsuji-no-shippo/sample-posts-with-asciidoc
   npm run clone-articles

4. Add CSS to git submodules.
   Read Asciidoctor Support to CSS for details.

   rm -rf src/components/Article/LightweightMarkup/scss
   git submodule add https://github.com/hitsuji-no-shippo/article-css-for-asciidoc.git src/components/Article/LightweightMarkup/scss
   git commit --amend --no-edit

5. Start the site in develop mode.

   gatsby develop

6. Open the source code and start editing!
   Your site is now running at http://localhost:8000.
   Open the gatsby-simple-blog-with-asciidoctor directory in your code editor of choice and edit content/blog/hello-world/index.adoc. Save your changes, and the browser will update in real time!

   📎	You’ll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Use git clone

git clone https://github.com/hitsuji-no-shippo/gatsby-simple-blog-with-asciidoctor gatsby-simple-blog-with-asciidoctor
cd gatsby-simple-blog-with-asciidoctor
yarn
declare -x ARTICLES_REPOSITORY=hitsuji-no-shippo/sample-posts-with-asciidoc
yarn dev  // <1>

1. The following three commands are run.

   1. yarn run clone-articles

   2. yarn run submodule (Clone CSS)

   3. gatsby develop

How to deploy by Circle-CI in Medium.com

Medium.com — Deploy Static Sites to Netlify by Circle-CI

Configuration

All configurable values are here: ./config/index.js

i18n

1. Add [lang].js to config/locales folder

2. Modify supportedLanguages in config/index.js

3. Set site.lang in config/index.js as default language

4. add [filename].[lang].md to content/blog and enjoy!

Features

• i18n

  Display multiple language. (Only be shown when supportedLanguages > 1)

  Display language link in every post. (You can disable it in config/index.js by displayTranslations: false)

• overreacted design
  overreacted.io lookings

• Tags
  Display articles in same tag.

• Breadcrumbs
  Display breadcrumbs in header part.

• Relative posts
  Display previous and next posts in same tag in footer part.

• Disqus
  Use disqus.com to enable comment.

• eslint
  Enable eslint for better coding experience.

• module resolver
  Enable babel-module-resolver to prevent relative path hell

LICENSE

This project

This project is licensed under the terms of the MIT license.

Materials used

Material	LICENSE	path
Profile picture	CC0 1.0	content/assets/profile-pic.jpg
Language icon	CC0 1.0	src/components/LangButton/IconLanguage.js
Theme icons	CC0 1.0	src/components/Layout/ReadModeToggle/IconSun.js src/components/Layout/ReadModeToggle/IconMoon.js Resized from 24x24 to 16x16.
Scroll up icon	CC0 1.0	src/components/Layout/ScrollUp.js
Admonition icons	CC BY 4.0 License	FortAwesome/Font-Awesome
Moon La	SOUND LICENSE	static/audios/moon_la.mp3