Initial commit

Author: ryyppy

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+  ]
+}

.gitignore

@@ -0,0 +1,14 @@
+out
+
+.DS_Store
+*.swp
+*.swo
+
+node_modules/
+.next/
+
+yarn-error.log
+
+.bsb.lock
+.merlin
+lib/

.nowignore

@@ -0,0 +1,2 @@
+.next/
+node_modules/

README.md

@@ -0,0 +1,36 @@
+# Reason NextJS Workshop
+
+This repo will be the starting point for building some Reason app.
+
+## Setup
+
+```
+git clone https://github.com/ryyppy/reason-workshop-nextjs
+cd reason-workshop-nextjs
+yarn 
+
+# Initial build
+yarn bs:build
+
+yarn dev
+
+# Open localhost:3000
+```
+
+In case you want to run BuckleScript in watchmode:
+
+```
+yarn run bs:start
+```
+
+## Useful commands
+
+Build CSS seperately via `postcss` (useful for debugging)
+
+```
+# Devmode
+postcss styles/main.css -o test.css
+
+# Production
+NODE_ENV=production postcss styles/main.css -o test.css
+```

bindings/Next.bs.js

@@ -0,0 +1,20 @@
+
+
+import * as Block from "bs-platform/lib/es6/block.js";
+
+var Link = /* module */Block.localModule([], []);
+
+var Router = /* module */Block.localModule([], []);
+
+var Head = /* module */Block.localModule([], []);
+
+var $$Error = /* module */Block.localModule([], []);
+
+export {
+  Link ,
+  Router ,
+  Head ,
+  $$Error ,
+  
+}
+/* No side effect */

bindings/Next.re

@@ -0,0 +1,41 @@
+type getInitialPropsFn('a) =
+  {
+    .
+    "query": Js.Dict.t(string),
+    "req": Js.Nullable.t(Js.t('a)),
+  } =>
+  Js.Promise.t(Js.t('a));
+
+module Link = {
+  [@bs.module "next/link"] [@react.component]
+  external make:
+    (
+      ~href: string=?,
+      ~_as: string=?,
+      ~prefetch: bool=?,
+      ~replace: option(bool)=?,
+      ~shallow: option(bool)=?,
+      ~passHref: option(bool)=?,
+      ~children: React.element
+    ) =>
+    React.element =
+    "default";
+};
+
+module Router = {
+  type props = {. "router": {. "query": Js.Dict.t(string)}};
+
+  [@bs.module "next/router"]
+  external withRouter: (props => React.element) => React.element = "";
+};
+
+module Head = {
+  [@bs.module "next/head"] [@react.component]
+  external make: (~children: React.element) => React.element = "default";
+};
+
+module Error = {
+  [@bs.module "next/head"] [@react.component]
+  external make: (~statusCode: int, ~children: React.element) => React.element =
+    "default";
+};

bsconfig.json

@@ -0,0 +1,26 @@
+{
+  "name": "reason-workshop-nextjs",
+  "namespace": false,
+  "reason": { "react-jsx": 3 },
+  "refmt": 3,
+  "bs-dependencies": ["reason-react", "bs-fetch", "@glennsl/bs-json"],
+  "ppx-flags": ["graphql_ppx/ppx"],
+  "sources": [
+    { "dir": "common" },
+    { "dir": "bindings" },
+    { "dir": "pages", "subdirs": true },
+    { "dir": "components", "subdirs": true },
+    "layouts"
+  ],
+  "package-specs": {
+    "module": "es6",
+    "in-source": true
+  },
+  "suffix": ".bs.js",
+  "bsc-flags": ["-bs-no-version-header", "-bs-super-errors", "-bs-g"],
+  "gentypeconfig": {
+    "language": "typescript",
+    "shims": [],
+    "module": "es6"
+  }
+}

common/Mdx.bs.js

@@ -0,0 +1,31 @@
+
+
+import * as $$Text from "../components/Text.bs.js";
+import * as Block from "bs-platform/lib/es6/block.js";
+
+var $$default = {
+  p: $$Text.Md[/* P */3][/* make */0],
+  li: $$Text.Md[/* Li */7][/* make */3],
+  h1: $$Text.H1[/* make */0],
+  h2: $$Text.H2[/* make */0],
+  h3: $$Text.H3[/* make */0],
+  h4: $$Text.H4[/* make */0],
+  h5: $$Text.H5[/* make */0],
+  ul: $$Text.Md[/* Ul */5][/* make */0],
+  ol: $$Text.Md[/* Ol */6][/* make */0],
+  inlineCode: $$Text.Md[/* InlineCode */2][/* make */0],
+  code: $$Text.Md[/* Code */1][/* make */0],
+  pre: $$Text.Md[/* Pre */0][/* make */0],
+  a: $$Text.Md[/* A */4][/* make */2]
+};
+
+var Components = /* module */Block.localModule(["default"], [$$default]);
+
+var Provider = /* module */Block.localModule([], []);
+
+export {
+  Components ,
+  Provider ,
+  
+}
+/* Text Not a pure module */

common/Mdx.re

@@ -0,0 +1,74 @@
+module Components = {
+  open Text;
+  type props = {. "children": ReasonReact.reactElement};
+
+  [@bs.deriving abstract]
+  type t = {
+    [@bs.optional]
+    p: React.component(props),
+    [@bs.optional]
+    li: React.component(props),
+    [@bs.optional]
+    h1: React.component(props),
+    [@bs.optional]
+    h2: React.component(props),
+    [@bs.optional]
+    h3: React.component(props),
+    [@bs.optional]
+    h4: React.component(props),
+    [@bs.optional]
+    h5: React.component(props),
+    [@bs.optional]
+    ul: React.component(props),
+    [@bs.optional]
+    ol: React.component(props),
+    [@bs.optional]
+    inlineCode: React.component(props),
+    [@bs.optional]
+    code:
+      React.component({
+        .
+        "className": option(string),
+        "metastring": string,
+        "children": array(ReasonReact.reactElement),
+      }),
+    [@bs.optional]
+    pre: React.component(props),
+    [@bs.optional]
+    a:
+      React.component({
+        .
+        "children": ReasonReact.reactElement,
+        "href": string,
+      }),
+  };
+
+  /* Sets our preferred branded styles
+     We most likely will never need a different ~components
+     option on our website. */
+  let default =
+    t(
+      ~p=Md.P.make,
+      ~li=Md.Li.make,
+      ~h1=H1.make,
+      ~h2=H2.make,
+      ~h3=H3.make,
+      ~h4=H4.make,
+      ~h5=H5.make,
+      ~ul=Md.Ul.make,
+      ~ol=Md.Ol.make,
+      ~a=Md.A.make,
+      ~pre=Md.Pre.make,
+      ~inlineCode=Md.InlineCode.make,
+      ~code=Md.Code.make,
+      (),
+    );
+};
+
+module Provider = {
+  [@bs.module "@mdx-js/react"] [@react.component]
+  external make:
+    (~components: Components.t, ~children: ReasonReact.reactElement=?) =>
+    React.element =
+    "MDXProvider";
+};

common/Util.bs.js

@@ -0,0 +1,25 @@
+
+
+import * as Block from "bs-platform/lib/es6/block.js";
+
+function s(prim) {
+  return prim;
+}
+
+function ate(prim) {
+  return prim;
+}
+
+var ReactStuff = /* module */Block.localModule([
+    "s",
+    "ate"
+  ], [
+    s,
+    ate
+  ]);
+
+export {
+  ReactStuff ,
+  
+}
+/* No side effect */

common/Util.re

@@ -0,0 +1,4 @@
+module ReactStuff = {
+  let s = ReasonReact.string;
+  let ate = ReasonReact.array;
+};

common/highlight.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+export const jsExample = `
+const a = "test";
+
+function foo(a){
+  console.log("hello world: " + a);
+}
+
+foo(a)
+}
+`;
+
+export const reasonExample = `let foo = 1;
+
+let add = (a, b) => a + b;
+
+let add1 = add(foo);`;
+
+export default ({code, language}) => {
+  return (
+    <Highlight {...defaultProps} code={code} language={language}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className + " py-4 px-4"} style={style}>
+          {tokens.map((line, i) => (
+            <div {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};