|
📎
|
Change netliby config with netlify.toml
|
|
❗
|
I’m an English leanear. Issues with README fixes are also welcome. |
|
💡
|
Derivative list
|
- 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
./deployDirectory
- Description
- How to use
- How to deploy by Circle-CI in Medium.com
- Configuration
- i18n
- Features
- LICENSE
Create articles using asciidoc file. The files are transformed with @hitsji_no_shippo/gatsby-transformer-asciidoc.
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 |
| Before (Markdown) | After (Asciidoc) |
|---|---|
fontmatter.date |
revision.date |
fontmatter.title |
document.title |
frontmatter.description |
document.description |
frontmatter.tags |
pageAttributes.tags |
frontmatter.disqus |
pageAttributes.disqus |
@hitsji_no_shippo/gatsby-transformer-asciidoc doesn’t support expect.
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. |
| Name | Alternative |
|---|---|
gatsby-remark-copy-linked-files |
None |
gatsby-remark-images |
Display Images
|
gatsby-remark-autolink-headers |
| Name | Alternative |
|---|---|
gatsby-remark-external-links |
Macro examples
link:{url}[display text, window=_blank] // (1)
link:{url}[display text^] // (2)
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 |
| 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. |
gatsby-plugin-i18n doesn’t support asciidoc. Therefore,it was changed to @hitsuji_no_shippo/gatsby-plugin-i18n that supports Asciidoc.
The ignore option in
gatsby-source-filesystem is used so that the next files are not generated.
-
In
_includesdirectory -
README.adoc -
CHANGELOG.adoc
Details
| Value | Attribute |
|---|---|
Empty |
|
Not set |
|
| Attribute | Value |
|---|---|
article |
|
Not set |
The attributes of the page have priority.
| Attribute | Value |
|---|---|
auto |
|
2 |
| Attribute | Value |
|---|---|
Empty |
|
- |
| Attribute | Value |
|---|---|
Not set |
|
3 |
| Attribute | Value |
|---|---|
Empty |
|
Attribute |
Value |
font |
|
full |
|
Emptye |
Use this git repository.
There are two ways to articles management.
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.
| GIT_HOST |
unset (i.e. |
| ARTICLES_REPOSITORY |
Place the articles directory as content/blog. You do not need to set
environment variables.
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.
-
${GIT_HOST}/${ARTICLES_REPOSITORY}is doesn’t containedgithub.com. -
articles.filePathdoesn’t exist. -
The field of
articles.filePathdoesn’t exist. -
Match with
articles.ignoreoption.
|
URL to articles directory |
Common |
set |
|
|
unset |
|
|
🔥
|
Submodules are not supported. |
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.
|
📎
|
|
No link is added to the article with the path(field value of filePath) that
glob matches at least one articles.ignore.
articles: {
dir: 'hitsuji-no-shippo/sample-articles-for-asciidoctor',
ignore: ['asciidoc-examples/**/*.adoc'],
}-
From icon to text.
-
Add rss(
/rss.xml). -
Config From
siteMetadatatolinksInBioinconfig/index.js.Example{ twitter: 'https://twitter.com/hns_equal_st', // <1> GitHub: 'https://github.com/hitsuji-no-shippo', // <1> }
-
key (
twitter) is dispaly text, value (https…) is url.
-
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 |
Not use |
No |
||
url |
Not use |
page-author-url |
No |
social.twitter |
page-author-twitter |
No |
|
shouldDisplay |
Not use |
Not use |
No |
|
📎
|
Page attributes take precedence because |
Use gatsby-plugin-catch-links to replace local link behavior in articles with gatsby-link and navigation to improve performance.
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.
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.
If the author.url exist, will be a link.
If the page-author-url or page-author-twitter of asciidoc attributes exists,
will be a link.
url |
href |
|
N |
N |
Not link |
Y |
N |
|
N |
Y |
page-author-url |
Y |
Y |
Date display is determined by dateDisplay in config/index.js.
dateDisplayconst dateDisplay = {
format: "LL", // (1)
diff: {
patternWithNotConvert: /month|year/, // (2)
newPost: {
boundary: 7, // (3)
emoji: '🎉', // (4)
},
},
}-
String using token. In the case of
LL, the date dispaly is as follows:English January 22, 2020
日本語 2020年1月21日
-
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, 2020January 20, 2020 2 days ago
December 2, 2019 December 2, 2019
January 20, 2019 January 20, 2019
-
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.
-
Emoji to be added to the beginning of new post date.
By default, dispaly disqus in article pages. If the value of asciidoc attribute
page-disqus is false, non dispaly.
Displayed next to read to time. Click to go to embedded disqus of the article.
Add link to tag list next to count posts in index.
Add Scroll Up at bottom right.
Add home link between relative posts in article page.
Change position in index to under the line starting from update date.
Add description of article in tag page.
Update Made of to Built with.
Used repository in config/index.js
Doesn’t displays link, if url is undefined or displaysLink is false.
| url |
https://github.com/hitsuji-no-shippo/gatsby-simple-blog-with-asciidoctor |
| name |
gatsby-simple-blog-with-asciidoctor |
| displaysLink |
true |
Change to
article.
-
Add
twitter:site. The value (twitter id) used issiteMetadata.social.twitter -
Add
og:url. The value used issiteMetadata.siteUrl+node.fields.slug -
The value used in
twitter: creatorhas been changed topage-author-twitterasciidoc attribute.📎Cases wheretwitter: creatoris not created.-
The
page-author-twitterasciidoc attribute isn’t exist. -
The
authorattribute is different from thesiteMetadata.authorand thepage-author-twitterattribute value is the same assiteMetadata.social.twitter.
-
Add a workflow to Netlify to deploy. The workflow trigger is commit pushed.
| NETLIFY_AUTH_TOKEN | |
| NETLIFY_SITE_ID |
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.
A gatsbyjs starter forked from gatsby-starter-blog and applied overreacted lookings, with tags and breadcrumbs, eslint, relative posts, disqus, i18n, eslint supported.
-
Install the Gatsby CLI.
npm install -g gatsby-cli
-
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 -
Clone articles repository.
Read Articles Management for details.declare -x ARTICLES_REPOSITORY=hitsuji-no-shippo/sample-posts-with-asciidoc npm run clone-articles -
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
-
Start the site in
developmode.gatsby develop
-
Open the source code and start editing!
Your site is now running at http://localhost:8000.
Open thegatsby-simple-blog-with-asciidoctordirectory in your code editor of choice and editcontent/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.
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>-
The following three commands are run.
-
yarn run clone-articles -
yarn run submodule(Clone CSS) -
gatsby develop
-
All configurable values are here: ./config/index.js
-
Add [lang].js to config/locales folder
-
Modify supportedLanguages in config/index.js
-
Set site.lang in config/index.js as default language
-
add [filename].[lang].md to content/blog and enjoy!
-
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
This project is licensed under the terms of the MIT license.
| Material | LICENSE | path |
|---|---|---|
|
||
|
||
Resized from 24x24 to 16x16. |
||
|
||
|