├── .eslintrc
├── .gitignore
├── .nvmrc
├── .prettierrc
├── .travis.yml
├── .vscode
└── settings.json
├── LICENSE
├── README.md
├── __mocks__
├── file.js
├── gatsby-link.js
└── gatsby.js
├── content
├── draft.md
├── images
│ └── kittens.jpg
├── kittens.md
├── markdown.md
├── mdx.mdx
├── sample01.md
├── sample02.md
├── sample03.md
├── sample04.md
├── sample05.md
├── sample06.md
├── sample07.md
├── sample08.md
├── sample09.md
└── sample10.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── netlify.toml
├── package-lock.json
├── package.json
├── setup-jest.js
├── src
├── components
│ ├── ContentList.tsx
│ ├── Counter.tsx
│ ├── Header.tsx
│ ├── Layout.tsx
│ ├── LunrSearch.tsx
│ └── Pager.tsx
├── context.ts
├── globals.d.ts
├── pages
│ ├── 404.tsx
│ ├── another-page.tsx
│ ├── index.tsx
│ └── tags.tsx
├── templates
│ ├── IndexTemplate.tsx
│ ├── SingleTemplate.tsx
│ └── TagTemplate.tsx
└── typography.ts
├── static
└── favicon
│ ├── 192.png
│ └── 512.png
├── test
├── components
│ ├── ContentList.spec.tsx
│ ├── Header.spec.tsx
│ ├── LunrSearch.spec.tsx
│ └── Pager.spec.tsx
└── pages
│ ├── fixtures
│ └── site.json
│ └── index.spec.tsx
├── tsconfig.json
└── yarn.lock
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["@pacote/eslint-config", "@pacote/eslint-config-react", "@pacote/eslint-config-jest"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Project dependencies
2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
3 | .cache
4 | node_modules/
5 | yarn-error.log
6 |
7 | *.log
8 |
9 | # Build directory
10 | /public/
11 | /coverage/
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v12.8.1
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "semi": false,
4 | "singleQuote": true
5 | }
6 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 'stable'
4 | - '10'
5 | before_script:
6 | - 'yarn'
7 | - 'yarn build'
8 | - 'yarn lint'
9 | cache:
10 | directories:
11 | - ~/.cache
12 | - ~/.npm
13 | - node_modules
14 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.formatOnSave": true,
3 | "workbench.colorCustomizations": {
4 | "activityBar.background": "#7f40bf",
5 | "activityBar.activeBorder": "#c78f58",
6 | "activityBar.foreground": "#e7e7e7",
7 | "activityBar.inactiveForeground": "#e7e7e799",
8 | "activityBarBadge.background": "#c78f58",
9 | "activityBarBadge.foreground": "#15202b",
10 | "titleBar.activeBackground": "#663399",
11 | "titleBar.inactiveBackground": "#66339999",
12 | "titleBar.activeForeground": "#e7e7e7",
13 | "titleBar.inactiveForeground": "#e7e7e799",
14 | "statusBar.background": "#663399",
15 | "statusBarItem.hoverBackground": "#7f40bf",
16 | "statusBar.foreground": "#e7e7e7"
17 | },
18 | "peacock.color": "#663399"
19 | }
20 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 Luís Rodrigues.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # gatsby-starter-typescript
2 |
3 | [](https://travis-ci.org/goblindegook/gatsby-starter-typescript)
4 |
5 | A Gatsby starter using [TypeScript](https://www.typescriptlang.org) and [emotion](https://emotion.sh).
6 |
7 | View the [demo site](https://gatsby-starter-typescript.netlify.com).
8 |
9 | ## Install
10 |
11 | Make sure that you have the Gatsby CLI program installed:
12 |
13 | ```sh
14 | $ npm install --global gatsby-cli
15 | ```
16 |
17 | And run from your CLI:
18 |
19 | ```sh
20 | $ gatsby new gatsby-example-site https://github.com/goblindegook/gatsby-starter-typescript
21 | ```
22 |
23 | Then you can run it by:
24 |
25 | ```sh
26 | $ cd gatsby-example-site
27 | $ npm run develop
28 | ```
29 |
30 | ## Gatsby Plugins
31 |
32 | - gatsby-plugin-catch-links
33 | - gatsby-plugin-emotion
34 | - gatsby-plugin-feed
35 | - gatsby-plugin-lunr
36 | - gatsby-plugin-manifest
37 | - gatsby-plugin-mdx
38 | - gatsby-plugin-netlify
39 | - gatsby-plugin-nprogress
40 | - gatsby-plugin-offline
41 | - gatsby-plugin-react-helmet
42 | - gatsby-plugin-sharp
43 | - gatsby-plugin-sitemap
44 | - gatsby-plugin-typegen
45 | - gatsby-plugin-typescript
46 | - gatsby-plugin-typography
47 | - gatsby-remark-copy-linked-files
48 | - gatsby-remark-images
49 | - gatsby-remark-prismjs
50 | - gatsby-remark-smartypants
51 | - gatsby-source-filesystem
52 | - gatsby-transformer-sharp
53 |
54 | ## Tools
55 |
56 | - Testing: [Jest](https://jestjs.io) and [react-testing-library](https://github.com/testing-library/react-testing-library)
57 | - Linter: [ESLint](https://eslint.org) with support for TypeScript, React, [Standard](https://standardjs.com) and [Prettier](https://prettier.io).
58 |
--------------------------------------------------------------------------------
/__mocks__/file.js:
--------------------------------------------------------------------------------
1 | module.exports = 'test-file-stub'
2 |
--------------------------------------------------------------------------------
/__mocks__/gatsby-link.js:
--------------------------------------------------------------------------------
1 | jest.unmock('gatsby')
2 | module.exports = jest.requireActual('gatsby-link')
3 |
--------------------------------------------------------------------------------
/__mocks__/gatsby.js:
--------------------------------------------------------------------------------
1 | const gatsby = jest.requireActual('gatsby')
2 | module.exports = {
3 | ...gatsby,
4 | graphql: jest.fn(),
5 | }
6 |
--------------------------------------------------------------------------------
/content/draft.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: "/content/draft/"
3 | date: "2017-12-07"
4 | title: "Draft"
5 | draft: true
6 | tags: ["markdown", "draft", "example"]
7 | ---
8 |
9 | This is a draft file, it should not be published.
--------------------------------------------------------------------------------
/content/images/kittens.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goblindegook/gatsby-starter-typescript/11c71951913256809e2db7b9349daa23e0563ba0/content/images/kittens.jpg
--------------------------------------------------------------------------------
/content/kittens.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: '/content/kittens/'
3 | date: '2018-01-07'
4 | title: 'Kittens'
5 | tags: ['markdown', 'kittens', 'example']
6 | ---
7 |
8 | This is an example of how you can build your site around Markdown files.
9 |
10 | Images referenced in Markdown are copied to the generated site, like these kittens:
11 |
12 | 
13 |
14 | Finally, here's some sample code with beautiful syntax highlighting thanks to PrismJS:
15 |
16 | ```typescript
17 | function greeting(name: string): string {
18 | return 'Hello, ' + name + '!'
19 | }
20 |
21 | console.log(greeting('GatsbyJS'))
22 | ```
23 |
24 | Go back to the [content index](/all).
25 |
--------------------------------------------------------------------------------
/content/markdown.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: "/content/markdown-syntax/"
3 | date: "2017-11-07"
4 | title: "Markdown Syntax"
5 | tags: ["markdown", "example"]
6 | ---
7 |
8 | * [Overview](#overview)
9 | * [Philosophy](#philosophy)
10 | * [Inline HTML](#html)
11 | * [Automatic Escaping for Special Characters](#autoescape)
12 | * [Block Elements](#block)
13 | * [Paragraphs and Line Breaks](#p)
14 | * [Headers](#header)
15 | * [Blockquotes](#blockquote)
16 | * [Lists](#list)
17 | * [Code Blocks](#precode)
18 | * [Horizontal Rules](#hr)
19 | * [Span Elements](#span)
20 | * [Links](#link)
21 | * [Emphasis](#em)
22 | * [Code](#code)
23 | * [Images](#img)
24 | * [Miscellaneous](#misc)
25 | * [Backslash Escapes](#backslash)
26 | * [Automatic Links](#autolink)
27 |
28 | * * *
29 |
30 |
Overview
31 |
32 |
Philosophy
33 |
34 | Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
35 |
36 | Readability, however, is emphasized above all else. A Markdown-formatted
37 | document should be publishable as-is, as plain text, without looking
38 | like it's been marked up with tags or formatting instructions. While
39 | Markdown's syntax has been influenced by several existing text-to-HTML
40 | filters -- including [Setext] [1], [atx] [2], [Textile] [3], [reStructuredText] [4],
41 | [Grutatext] [5], and [EtText] [6] -- the single biggest source of
42 | inspiration for Markdown's syntax is the format of plain text email.
43 |
44 | [1]: http://docutils.sourceforge.net/mirror/setext.html
45 | [2]: http://www.aaronsw.com/2002/atx/
46 | [3]: http://textism.com/tools/textile/
47 | [4]: http://docutils.sourceforge.net/rst.html
48 | [5]: http://www.triptico.com/software/grutatxt.html
49 | [6]: http://ettext.taint.org/doc/
50 |
51 | To this end, Markdown's syntax is comprised entirely of punctuation
52 | characters, which punctuation characters have been carefully chosen so
53 | as to look like what they mean. E.g., asterisks around a word actually
54 | look like \*emphasis\*. Markdown lists look like, well, lists. Even
55 | blockquotes look like quoted passages of text, assuming you've ever
56 | used email.
57 |
58 |
59 |
60 |
Inline HTML
61 |
62 | Markdown's syntax is intended for one purpose: to be used as a
63 | format for *writing* for the web.
64 |
65 | Markdown is not a replacement for HTML, or even close to it. Its
66 | syntax is very small, corresponding only to a very small subset of
67 | HTML tags. The idea is *not* to create a syntax that makes it easier
68 | to insert HTML tags. In my opinion, HTML tags are already easy to
69 | insert. The idea for Markdown is to make it easy to read, write, and
70 | edit prose. HTML is a *publishing* format; Markdown is a *writing*
71 | format. Thus, Markdown's formatting syntax only addresses issues that
72 | can be conveyed in plain text.
73 |
74 | For any markup that is not covered by Markdown's syntax, you simply
75 | use HTML itself. There's no need to preface it or delimit it to
76 | indicate that you're switching from Markdown to HTML; you just use
77 | the tags.
78 |
79 | The only restrictions are that block-level HTML elements -- e.g. `
`,
80 | `
`, `
`, `
`, etc. -- must be separated from surrounding
81 | content by blank lines, and the start and end tags of the block should
82 | not be indented with tabs or spaces. Markdown is smart enough not
83 | to add extra (unwanted) `
` tags around HTML block-level tags.
84 |
85 | For example, to add an HTML table to a Markdown article:
86 |
87 | This is a regular paragraph.
88 |
89 |
617 | ```
618 |
619 | If you're referring to a local resource on the same server, you can
620 | use relative paths:
621 |
622 | ```markdown
623 | See my [About](/about/) page for details.
624 | ```
625 |
626 | Reference-style links use a second set of square brackets, inside
627 | which you place a label of your choosing to identify the link:
628 |
629 | ```markdown
630 | This is [an example][id] reference-style link.
631 | ```
632 |
633 | You can optionally use a space to separate the sets of brackets:
634 |
635 | ```markdown
636 | This is [an example] [id] reference-style link.
637 | ```
638 |
639 | Then, anywhere in the document, you define your link label like this,
640 | on a line by itself:
641 |
642 | ```markdown
643 | [id]: http://example.com/ "Optional Title Here"
644 | ```
645 |
646 | That is:
647 |
648 | * Square brackets containing the link identifier (optionally
649 | indented from the left margin using up to three spaces);
650 | * followed by a colon;
651 | * followed by one or more spaces (or tabs);
652 | * followed by the URL for the link;
653 | * optionally followed by a title attribute for the link, enclosed
654 | in double or single quotes, or enclosed in parentheses.
655 |
656 | The following three link definitions are equivalent:
657 |
658 | ```markdown
659 | [foo]: http://example.com/ "Optional Title Here"
660 | [foo]: http://example.com/ 'Optional Title Here'
661 | [foo]: http://example.com/ (Optional Title Here)
662 | ```
663 |
664 | **Note:** There is a known bug in Markdown.pl 1.0.1 which prevents
665 | single quotes from being used to delimit link titles.
666 |
667 | The link URL may, optionally, be surrounded by angle brackets:
668 |
669 | ```markdown
670 | [id]: "Optional Title Here"
671 | ```
672 |
673 | You can put the title attribute on the next line and use extra spaces
674 | or tabs for padding, which tends to look better with longer URLs:
675 |
676 | ```markdown
677 | [id]: http://example.com/longish/path/to/resource/here
678 | "Optional Title Here"
679 | ```
680 |
681 | Link definitions are only used for creating links during Markdown
682 | processing, and are stripped from your document in the HTML output.
683 |
684 | Link definition names may consist of letters, numbers, spaces, and
685 | punctuation -- but they are *not* case sensitive. E.g. these two
686 | links:
687 |
688 | ```markdown
689 | [link text][a]
690 | [link text][A]
691 | ```
692 |
693 | are equivalent.
694 |
695 | The *implicit link name* shortcut allows you to omit the name of the
696 | link, in which case the link text itself is used as the name.
697 | Just use an empty set of square brackets -- e.g., to link the word
698 | "Google" to the google.com web site, you could simply write:
699 |
700 | ```markdown
701 | [Google][]
702 | ```
703 |
704 | And then define the link:
705 |
706 | ```markdown
707 | [Google]: http://google.com/
708 | ```
709 |
710 | Because link names may contain spaces, this shortcut even works for
711 | multiple words in the link text:
712 |
713 | ```markdown
714 | Visit [Daring Fireball][] for more information.
715 | ```
716 |
717 | And then define the link:
718 |
719 | ```markdown
720 | [Daring Fireball]: http://daringfireball.net/
721 | ```
722 |
723 | Link definitions can be placed anywhere in your Markdown document. I
724 | tend to put them immediately after each paragraph in which they're
725 | used, but if you want, you can put them all at the end of your
726 | document, sort of like footnotes.
727 |
728 | Here's an example of reference links in action:
729 |
730 | ```markdown
731 | I get 10 times more traffic from [Google] [1] than from
732 | [Yahoo] [2] or [MSN] [3].
733 |
734 | [1]: http://google.com/ "Google"
735 | [2]: http://search.yahoo.com/ "Yahoo Search"
736 | [3]: http://search.msn.com/ "MSN Search"
737 | ```
738 |
739 | Using the implicit link name shortcut, you could instead write:
740 |
741 | ```markdown
742 | I get 10 times more traffic from [Google][] than from
743 | [Yahoo][] or [MSN][].
744 |
745 | [google]: http://google.com/ "Google"
746 | [yahoo]: http://search.yahoo.com/ "Yahoo Search"
747 | [msn]: http://search.msn.com/ "MSN Search"
748 | ```
749 |
750 | Both of the above examples will produce the following HTML output:
751 |
752 | ```markup
753 |
I get 10 times more traffic from Google than from
755 | Yahoo
756 | or MSN.
757 | ```
758 |
759 | For comparison, here is the same paragraph written using
760 | Markdown's inline link style:
761 |
762 | ```markdown
763 | I get 10 times more traffic from [Google](http://google.com/ "Google")
764 | than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
765 | [MSN](http://search.msn.com/ "MSN Search").
766 | ```
767 |
768 | The point of reference-style links is not that they're easier to
769 | write. The point is that with reference-style links, your document
770 | source is vastly more readable. Compare the above examples: using
771 | reference-style links, the paragraph itself is only 81 characters
772 | long; with inline-style links, it's 176 characters; and as raw HTML,
773 | it's 234 characters. In the raw HTML, there's more markup than there
774 | is text.
775 |
776 | With Markdown's reference-style links, a source document much more
777 | closely resembles the final output, as rendered in a browser. By
778 | allowing you to move the markup-related metadata out of the paragraph,
779 | you can add links without interrupting the narrative flow of your
780 | prose.
781 |
782 |
783 |
Emphasis
784 |
785 | Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
786 | emphasis. Text wrapped with one `*` or `_` will be wrapped with an
787 | HTML `` tag; double `*`'s or `_`'s will be wrapped with an HTML
788 | `` tag. E.g., this input:
789 |
790 | ```markdown
791 | *single asterisks*
792 |
793 | _single underscores_
794 |
795 | **double asterisks**
796 |
797 | __double underscores__
798 | ```
799 |
800 | will produce:
801 |
802 | ```markup
803 | single asterisks
804 |
805 | single underscores
806 |
807 | double asterisks
808 |
809 | double underscores
810 | ```
811 |
812 | You can use whichever style you prefer; the lone restriction is that
813 | the same character must be used to open and close an emphasis span.
814 |
815 | Emphasis can be used in the middle of a word:
816 |
817 | ```markdown
818 | un*frigging*believable
819 | ```
820 |
821 | But if you surround an `*` or `_` with spaces, it'll be treated as a
822 | literal asterisk or underscore.
823 |
824 | To produce a literal asterisk or underscore at a position where it
825 | would otherwise be used as an emphasis delimiter, you can backslash
826 | escape it:
827 |
828 | ```markdown
829 | \*this text is surrounded by literal asterisks\*
830 | ```
831 |
832 |
833 |
Code
834 |
835 | To indicate a span of code, wrap it with backtick quotes (`` ` ``).
836 | Unlike a pre-formatted code block, a code span indicates code within a
837 | normal paragraph. For example:
838 |
839 | ```markdown
840 | Use the `printf()` function.
841 | ```
842 |
843 | will produce:
844 |
845 | ```markup
846 |
Use the printf() function.
847 | ```
848 |
849 | To include a literal backtick character within a code span, you can use
850 | multiple backticks as the opening and closing delimiters:
851 |
852 | ```markdown
853 | ``There is a literal backtick (`) here.``
854 | ```
855 |
856 | which will produce this:
857 |
858 | ```markup
859 |
There is a literal backtick (`) here.
860 | ```
861 |
862 | The backtick delimiters surrounding a code span may include spaces --
863 | one after the opening, one before the closing. This allows you to place
864 | literal backtick characters at the beginning or end of a code span:
865 |
866 | ```markdown
867 | A single backtick in a code span: `` ` ``
868 |
869 | A backtick-delimited string in a code span: `` `foo` ``
870 | ```
871 |
872 | will produce:
873 |
874 | ```markup
875 |
A single backtick in a code span: `
876 |
877 |
A backtick-delimited string in a code span: `foo`
878 | ```
879 |
880 | With a code span, ampersands and angle brackets are encoded as HTML
881 | entities automatically, which makes it easy to include example HTML
882 | tags. Markdown will turn this:
883 |
884 | ```markdown
885 | Please don't use any `