Merge pull request #175 from devHudi/feature/174

feat: add footnotes

contents/posts/writing-guide-kr/index.md

@@ -42,7 +42,7 @@ series: "gatsby-starter-hoodie 로 블로그 시작하기"
 
 ### 1-3. 마크다운 작성하기
 
-만약 Frontmatter 까지 작성했다면, 여러분은 그 아래에 마크다운 문서를 작성하면 됩니다. gatsby-starter-hoodie 는 대부분의 마크다운 문법을 지원합니다. 마크다운 작성 방법을 알고 싶다면, Github 의 [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) 문서를 참고하세요.
+만약 Frontmatter 까지 작성했다면, 여러분은 그 아래에 마크다운 문서를 작성하면 됩니다. gatsby-starter-hoodie 는 대부분의 마크다운 문법을 지원합니다. 마크다운 작성 방법을 알고 싶다면, Github 의 Mastering Markdown[^1] 문서를 참고하세요.
 
 ## 2. 코드 하이라이팅 & Katex
 
@@ -103,3 +103,5 @@ Frontmatter 의 태그를 통해 쉽게 문서를 분류하고 검색할 수 있
 여러분이 연관된 여러개의 문서를 작성할 때 시리즈를 사용할 수 있습니다. Frontmatter 에 작성된 시리즈가 같은 문서끼리 묶여 문서 상단에 리스트로 표시됩니다. 시리즈는 일련의 순서가 있는 문서들을 작성할 때 유용하게 사용할 수 있습니다. 시리즈는 문서의 작성 날짜 순서대로 정렬됩니다.
 
 현재 문서는 `gatsby-starter-hoodie 로 블로그 시작하기` 라는 시리즈로 설정되어 있습니다.
+
+[^1]: https://guides.github.com/features/mastering-markdown/

contents/posts/writing-guide/index.md

@@ -42,7 +42,7 @@ Above is the frontmatter of the document you are currently reading. Among them,
 
 ### 1-3. Writing markdown
 
-If you have written a Frontmatter, you can write your markdown document under it. gatsby-starter-hoodie supports most Markdown syntax. To learn more about Markdown syntax, see the [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) documentation on GitHub.
+If you have written a Frontmatter, you can write your markdown document under it. gatsby-starter-hoodie supports most Markdown syntax. To learn more about Markdown syntax, see the Mastering Markdown[^1] documentation on GitHub.
 
 ## 2. Syntax Highlighting & Katex
 
@@ -103,3 +103,5 @@ You can classify and search documents by tag set in Frontmatter. All tags you se
 You can publish multiple related documents in a series. The series set in Frontmatter is grouped together and shown at the top of the document. This can be useful for serialized documents with an order. Series documents are displayed in ascending order of creation date.
 
 The current document is also set in a series called `Getting started your blog with gatsby-starter-hoodie`.
+
+[^1]: https://guides.github.com/features/mastering-markdown/

gatsby-config.js

@@ -128,6 +128,17 @@ module.exports = {
  {
  resolve: "gatsby-remark-static-images",
  },
+ {
+ resolve: `gatsby-remark-footnotes`,
+ options: {
+ footnoteBackRefPreviousElementDisplay: "inline",
+ footnoteBackRefDisplay: "inline",
+ footnoteBackRefAnchorStyle: `text-decoration: none;`,
+ footnoteBackRefInnerTextStartPosition: "rear",
+ useFootnoteMarkerText: false,
+ useCustomDivider: "",
+ },
+ },
  ],
  },
  },

package.json

@@ -23,6 +23,7 @@
  "gatsby-plugin-sitemap": "^6.11.0",
  "gatsby-plugin-styled-components": "^6.11.0",
  "gatsby-remark-autolink-headers": "^6.13.1",
+ "gatsby-remark-footnotes": "^0.0.8",
  "gatsby-remark-images": "^7.11.0",
  "gatsby-remark-katex": "^3.5.0",
  "gatsby-remark-prismjs": "^7.11.0",

src/components/Article/Body/StyledMarkdown/index.jsx

@@ -238,6 +238,23 @@ const StyledMarkdown = styled.div`
  background-color: ${props => props.theme.colors.text};
  color: ${props => props.theme.colors.hoveredLinkText};
  }
+
+ & sup {
+ margin-left: 2px;
+ font-size: 13px;
+ vertical-align: super;
+ }
+
+ & sup > a {
+ padding: 0 1px;
+ }
+
+ & .footnotes {
+ margin-top: 60px;
+ padding-top: 20px;
+ border-top: 1px solid ${props => props.theme.colors.border};
+ font-size: 14px;
+ }
 `
 
 export default StyledMarkdown

yarn.lock

@@ -5991,6 +5991,15 @@ gatsby-remark-autolink-headers@^6.13.1:
  mdast-util-to-string "^2.0.0"
  unist-util-visit "^2.0.3"
 
+gatsby-remark-footnotes@^0.0.8:
+ version "0.0.8"
+ resolved "https://registry.yarnpkg.com/gatsby-remark-footnotes/-/gatsby-remark-footnotes-0.0.8.tgz#9c44ebaaf7c34ecbd79dfdca13aa77ba1bb6ad86"
+ integrity sha512-yoVH6XvOG10n7F2JZlhC4gkpUSF8dBDMiSwOZC5IxF69qyP89u6c/yjVkZzYo/hllJV+MJ12F2Z68klH49zVOw==
+ dependencies:
+ hast-util-to-html "5.0.0"
+ mdast-util-to-hast "5.0.0"
+ unist-util-visit "1.4.0"
+
 gatsby-remark-images@^7.11.0:
  version "7.11.0"
  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-7.11.0.tgz#1ceb7c689e8851202d07b9984cefa889ffa0a667"
@@ -6742,6 +6751,22 @@ hast-util-raw@^4.0.0:
  xtend "^4.0.1"
  zwitch "^1.0.0"
 
+hast-util-to-html@5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-5.0.0.tgz#8b5c9710adb0689e3603f552f3104de2507aca35"
+ integrity sha512-vYbSEixfYD3CIqd1rN1Q4T0z0Tyodht0jNst940ESz9g7eaFc0FJADMkdVvlHqDsXVok0vji8FukrBfAH91BWQ==
+ dependencies:
+ ccount "^1.0.0"
+ comma-separated-tokens "^1.0.1"
+ hast-util-is-element "^1.0.0"
+ hast-util-whitespace "^1.0.0"
+ html-void-elements "^1.0.0"
+ property-information "^5.0.0"
+ space-separated-tokens "^1.0.0"
+ stringify-entities "^1.0.1"
+ unist-util-is "^2.0.0"
+ xtend "^4.0.1"
+
 hast-util-to-html@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-4.0.1.tgz#3666b05afb62bd69f8f5e6c94db04dea19438e2a"
@@ -7938,6 +7963,23 @@ mdast-util-definitions@^4.0.0:
  dependencies:
  unist-util-visit "^2.0.0"
 
+mdast-util-to-hast@5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-5.0.0.tgz#42ca287ee88fcf0a57123816215d5db507b682a7"
+ integrity sha512-Yxx+/mdvhOaz3u4+UHokVMF038IgMIzgnEexjJcFaG3k47RHDEYCRZZE/YWO8pjwkyqT3UdTjCrX89ljkNoxCg==
+ dependencies:
+ collapse-white-space "^1.0.0"
+ detab "^2.0.0"
+ mdast-util-definitions "^1.2.0"
+ mdurl "^1.0.1"
+ trim "0.0.1"
+ trim-lines "^1.0.0"
+ unist-builder "^1.0.1"
+ unist-util-generated "^1.1.0"
+ unist-util-position "^3.0.0"
+ unist-util-visit "^1.1.0"
+ xtend "^4.0.1"
+
 mdast-util-to-hast@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-3.0.4.tgz#132001b266031192348d3366a6b011f28e54dc40"
@@ -9371,6 +9413,13 @@ property-information@^4.0.0:
  dependencies:
  xtend "^4.0.1"
 
+property-information@^5.0.0:
+ version "5.6.0"
+ resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+ integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+ dependencies:
+ xtend "^4.0.0"
+
 proto-list@~1.2.1:
  version "1.2.4"
  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -11344,6 +11393,13 @@ unist-util-visit-parents@^3.0.0, unist-util-visit-parents@^3.1.1:
  "@types/unist" "^2.0.0"
  unist-util-is "^4.0.0"
 
+unist-util-visit@1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.0.tgz#1cb763647186dc26f5e1df5db6bd1e48b3cc2fb1"
+ integrity sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==
+ dependencies:
+ unist-util-visit-parents "^2.0.0"
+
 unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"