54 |
55 |
56 |
57 |
58 |
59 |
96 | ;
97 | };
98 |
99 | React.setDisplayName(make, "BlogPostTemplate");
100 |
101 | let default = make;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Gatsby Starter Reason Blog
2 |
3 | A starter that uses ReasonML with Gatsby. We're using the [latest v3 Reason JSX syntax](https://reasonml.github.io/reason-react/docs/en/jsx), there are also a [couple](https://github.com/ReasonVienna/reason-conf) of [other](https://github.com/jtberglund/gatsby-starter-reason) Gatsby sites using the old syntax. I would recommend you stick with the cleaner v3 syntax.
4 |
5 | Happy coding! I've written a [blog post explaining this repo in more depth](https://mukulrathi.netlify.app/gatsby-reasonml-tutorial/).
6 |
7 | Feel free to submit issues if you feel this can be improved!
8 |
9 | ## Getting started
10 |
11 | This is a Gatsby starter repo so install it using the Gatsby CLI by running
12 |
13 | `gatsby new your-gatsby-blog https://github.com/mukul-rathi/gatsby-starter-reason-blog/`
14 | Then to set up the repo:
15 |
16 | ```bash
17 | cd your-gatsby-blog
18 | npm install
19 | gatsby develop
20 | ```
21 |
22 | Your site is now running at `https://localhost:8000/`! Start making changes to the source code and see the site update live!
23 |
24 | To learn more about Gatsby head to the [Gatsby website](https://www.gatsbyjs.org/).
25 |
26 | The structure of this repository is based off the [Gatsby starter blog](https://github.com/gatsbyjs/gatsby-starter-blog) - check that README out if you want more information about the top level structure of a typical Gatsby project.
27 |
28 | To build a production build of the website, run `npm run build`. This first compiles your Reason files by running `bsb -make-world`, and then creates your production build by running `gatsby build`. (You can see the `npm run build` script in the `package.json` file).
29 |
30 | ## Tips
31 |
32 | JS interop with Reason can be a little messy at times. [This article](https://reasonml.github.io/docs/en/converting-from-js) helps you convert from JS. If `localhost:8000` displays uncaught TypeError messages when running `gatsby develop` but your Reason code compiles, check your JS-Reason bindings (imports/exports). :)
33 |
34 | `src/utils/gatsby.re` contains type wrappers for some Gatsby React components like `` and ``.
35 |
36 | ## GraphQL workarounds for Reason Files
37 |
38 | Gatsby's GraphQL parser only works with JS files. So if you have a StaticQuery in your component, you need to write raw JS (graphql templated string), and wrap it in `[%bs.raw]`.
39 |
40 | ```reason
41 | useStaticQuery([%bs.raw] {|
42 | graphql`
43 | ...
44 | `
45 | |}]);
46 | ```
47 |
48 | Gatsby also preprocesses GraphQL queries **before** BuckleScript compilation, and ignores queries in Reason files. To get around this, we pre-compile Reason files (see `yarn build` in the `package.json`) and then to use the component in a JS React component, import the BuckleScript compiled file (a hack, I know).
49 |
50 | ```diff
51 | - import Foo from "./foo.re"
52 | + import Foo from "./foo.bs"
53 | ```
54 |
55 | This also means we can't use page queries, so the only workaround is to wrap the ReasonReact component in a JS React Component. E.g. see `src/templates/blog-post.js`:
56 |
57 | ```js
58 | import { graphql } from "gatsby"
59 | import BlogPost from "./blogPost.bs"
60 |
61 | export default BlogPost
62 |
63 | export const pageQuery = graphql`
64 | ...
65 | `
66 | ```
67 |
68 | And yes, another quirk of the Gatsby GraphQL parser means you can't just write `export {default} from "./blogPost.bs"` you need to import the component and then export it again.
69 |
--------------------------------------------------------------------------------
/content/blog/new-beginnings/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: New Beginnings
3 | date: "2015-05-28T22:40:32.169Z"
4 | description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
5 | ---
6 |
7 | Far far away, behind the word mountains, far from the countries Vokalia and
8 | Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
9 | right at the coast of the Semantics, a large language ocean. A small river named
10 | Duden flows by their place and supplies it with the necessary regelialia.
11 |
12 | ## On deer horse aboard tritely yikes and much
13 |
14 | The Big Oxmox advised her not to do so, because there were thousands of bad
15 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
16 | didn’t listen. She packed her seven versalia, put her initial into the belt and
17 | made herself on the way.
18 |
19 | - This however showed weasel
20 | - Well uncritical so misled
21 | - this is very interesting
22 | - Goodness much until that fluid owl
23 |
24 | When she reached the first hills of the **Italic Mountains**, she had a last
25 | view back on the skyline of her hometown _Bookmarksgrove_, the headline of
26 | [Alphabet Village](http://google.com) and the subline of her own road, the Line
27 | Lane. Pityful a rhetoric question ran over her cheek, then she continued her
28 | way. On her way she met a copy.
29 |
30 | ### Overlaid the jeepers uselessly much excluding
31 |
32 | But nothing the copy said could convince her and so it didn’t take long until a
33 | few insidious Copy Writers ambushed her, made her drunk with
34 | [Longe and Parole](http://google.com) and dragged her into their agency, where
35 | they abused her for their projects again and again. And if she hasn’t been
36 | rewritten, then they are still using her.
37 |
38 | > Far far away, behind the word mountains, far from the countries Vokalia and
39 | > Consonantia, there live the blind texts. Separated they live in Bookmarksgrove
40 | > right at the coast of the Semantics, a large language ocean.
41 |
42 | It is a paradisematic country, in which roasted parts of sentences fly into your
43 | mouth. Even the all-powerful Pointing has no control about the blind texts it is
44 | an almost unorthographic life One day however a small line of blind text by the
45 | name of Lorem Ipsum decided to leave for the far World of Grammar.
46 |
47 | ### According a funnily until pre-set or arrogant well cheerful
48 |
49 | The Big Oxmox advised her not to do so, because there were thousands of bad
50 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
51 | didn’t listen. She packed her seven versalia, put her initial into the belt and
52 | made herself on the way.
53 |
54 | 1. So baboon this
55 | 2. Mounted militant weasel gregariously admonishingly straightly hey
56 | 3. Dear foresaw hungry and much some overhung
57 | 4. Rash opossum less because less some amid besides yikes jeepers frenetic
58 | impassive fruitlessly shut
59 |
60 | When she reached the first hills of the Italic Mountains, she had a last view
61 | back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet
62 | Village and the subline of her own road, the Line Lane. Pityful a rhetoric
63 | question ran over her cheek, then she continued her way. On her way she met a
64 | copy.
65 |
66 | > The copy warned the Little Blind Text, that where it came from it would have
67 | > been rewritten a thousand times and everything that was left from its origin
68 | > would be the word "and" and the Little Blind Text should turn around and
69 | > return to its own, safe country.
70 |
71 | But nothing the copy said could convince her and so it didn’t take long until a
72 | few insidious Copy Writers ambushed her, made her drunk with Longe and Parole
73 | and dragged her into their agency, where they abused her for their projects
74 | again and again. And if she hasn’t been rewritten, then they are still using
75 | her. Far far away, behind the word mountains, far from the countries Vokalia and
76 | Consonantia, there live the blind texts.
77 |
78 | #### Silent delightfully including because before one up barring chameleon
79 |
80 | Separated they live in Bookmarksgrove right at the coast of the Semantics, a
81 | large language ocean. A small river named Duden flows by their place and
82 | supplies it with the necessary regelialia. It is a paradisematic country, in
83 | which roasted parts of sentences fly into your mouth.
84 |
85 | Even the all-powerful Pointing has no control about the blind texts it is an
86 | almost unorthographic life One day however a small line of blind text by the
87 | name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox
88 | advised her not to do so, because there were thousands of bad Commas, wild
89 | Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
90 |
91 | ##### Wherever far wow thus a squirrel raccoon jeez jaguar this from along
92 |
93 | She packed her seven versalia, put her initial into the belt and made herself on
94 | the way. When she reached the first hills of the Italic Mountains, she had a
95 | last view back on the skyline of her hometown Bookmarksgrove, the headline of
96 | Alphabet Village and the subline of her own road, the Line Lane. Pityful a
97 | rhetoric question ran over her cheek, then she continued her way. On her way she
98 | met a copy.
99 |
100 | ###### Slapped cozy a that lightheartedly and far
101 |
102 | The copy warned the Little Blind Text, that where it came from it would have
103 | been rewritten a thousand times and everything that was left from its origin
104 | would be the word "and" and the Little Blind Text should turn around and return
105 | to its own, safe country. But nothing the copy said could convince her and so it
106 | didn’t take long until a few insidious Copy Writers ambushed her, made her drunk
107 | with Longe and Parole and dragged her into their agency, where they abused her
108 | for their projects again and again.
109 |
--------------------------------------------------------------------------------