Language: books - factor out data (#268)

* book data read from data file
* also: initial js-yaml binding

Author: kanishka-work

bindings/JsYaml.res

@@ -0,0 +1 @@
+@module("js-yaml") external load: (string, ~options: 'a=?, unit) => Js.Json.t = "load"

common/Book.res

@@ -0,0 +1,23 @@
+type t = {
+  id: int,
+  name: string,
+  link: string,
+  image: string,
+}
+
+let readAll = () => {
+  let booksDatabasePath = "data/books.yaml"
+  let fileContents = Fs.readFileSync(booksDatabasePath)
+  let jsonRes = JsYaml.load(fileContents, ())
+  let jsonArr = Js.Option.getExn(Js.Json.decodeArray(jsonRes))
+  Js.Array.map(o => {
+    let dict = Js.Option.getExn(Js.Json.decodeObject(o))
+    let id = Belt.Int.fromFloat(
+      Js.Option.getExn(Js.Json.decodeNumber(Js.Dict.unsafeGet(dict, "id"))),
+    )
+    let name = Js.Option.getExn(Js.Json.decodeString(Js.Dict.unsafeGet(dict, "name")))
+    let link = Js.Option.getExn(Js.Json.decodeString(Js.Dict.unsafeGet(dict, "link")))
+    let image = Js.Option.getExn(Js.Json.decodeString(Js.Dict.unsafeGet(dict, "image")))
+    {id: id, name: name, link: link, image: image}
+  }, jsonArr)
+}

data/books.yaml

@@ -0,0 +1,13 @@
+- id: 1
+  name: "Real World OCaml"
+  link: https://dev.realworldocaml.org/
+  image: real-world-ocaml.jpg
+- id: 2
+  name: "OCaml from the very beginning"
+  link: https://ocaml-book.com/
+  image: oc-beg.png
+- id: 3
+  name: "More OCaml: Algorithms, Methods, and Diversions"
+  link: https://ocaml-book.com/more-ocaml-algorithms-methods-diversions/
+  image: more-oc.png
+

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "bs-platform": "9.0.0",
     "gray-matter": "^4.0.2",
+    "js-yaml": "^4.0.0",
     "next": "^10.0.6",
     "next-mdx-remote": "^2.1.3",
     "next-transpile-modules": "^4.1.0",
@@ -43,9 +44,9 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.4",
+    "esy": "^0.6.8",
     "postcss": "^8.2.5",
-    "tailwindcss": "^2.0.3",
-    "esy": "^0.6.8"
+    "tailwindcss": "^2.0.3"
   },
   "devDependenciesDescription": {},
   "postcss": {

pages/resources/language.js

@@ -1,5 +1,4 @@
-import LanguageRes from "res_pages/resources/ResourcesLanguage";
-
-export default function Language(props) {
-    return <LanguageRes {...props} />
-}
+export {
+    default,
+    getStaticProps,
+} from "res_pages/resources/ResourcesLanguage.js"

res_pages/resources/ResourcesLanguage.res

@@ -17,16 +17,24 @@ module UserLevelIntroduction = {
 }
 
 module Books = {
+  type t = {
+    booksLabel: string,
+    books: array<Book.t>,
+  }
+
   @react.component
-  let make = (~margins) =>
+  let make = (~margins, ~content) =>
     // TODO: define content type; extract content
     <div
       className={"bg-white overflow-hidden shadow rounded-lg mx-10 mx-auto max-w-5xl " ++ margins}>
       <div className="px-4 py-5 sm:px-6 sm:py-9">
-        <h2 className="text-center text-orangedark text-7xl font-bold mb-8"> {s(`BOOKS`)} </h2>
+        <h2 className="text-center text-orangedark text-7xl font-bold mb-8">
+          {s(content.booksLabel)}
+        </h2>
         <div className="grid grid-cols-5 items-center mb-8 px-6">
+          // TODO: define state to track location within books list, activate navigation
           <div className="flex justify-center">
-            // TODO: define state to track location within books list, activate navigation
+            // TODO: make navigation arrows accesssible
             <svg
               className="h-24 center"
               viewBox="0 0 90 159"
@@ -40,30 +48,16 @@ module Books = {
               />
             </svg>
           </div>
-          <div className="flex justify-center">
-            // TODO: visual indicator that link opens new tab
-            <a href="https://dev.realworldocaml.org/" target="_blank">
-              <img
-                className="h-36 w-28" src="/static/real-world-ocaml.jpg" alt="Real World OCaml book"
-              />
-            </a>
-          </div>
-          <div className="flex justify-center">
-            <a href="https://ocaml-book.com/" target="_blank">
-              <img
-                className="h-36 w-28"
-                src="/static/oc-beg.png"
-                alt="OCaml from the very beginning book"
-              />
-            </a>
-          </div>
-          <div className="flex justify-center">
-            <a
-              href="http://ocaml-book.com/more-ocaml-algorithms-methods-diversions/"
-              target="_blank">
-              <img className="h-36 w-28" src="/static/more-oc.png" />
-            </a>
-          </div>
+          {content.books
+          |> Js.Array.mapi((b: Book.t, idx) =>
+            <div className="flex justify-center" key={Js.Int.toString(idx)}>
+              // TODO: visual indicator that link opens new tab
+              <a href=b.link target="_blank">
+                <img className="h-36 w-28" src={"/static/" ++ b.image} alt={b.name ++ " book"} />
+              </a>
+            </div>
+          )
+          |> React.array}
           <div className="flex justify-center">
             <svg
               className="h-24" viewBox="0 0 90 159" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -214,38 +208,16 @@ type t = {
   pageDescription: string,
   beginning: UserLevelIntroduction.t,
   growing: UserLevelIntroduction.t,
+  booksContent: Books.t,
   expanding: UserLevelIntroduction.t,
   diversifying: UserLevelIntroduction.t,
   researching: UserLevelIntroduction.t,
 }
 
-let contentEn = {
-  title: `Language`,
-  pageDescription: `This is the home of learning and tutorials. Whether you're a beginner, a teacher, or a seasoned researcher, this is where you can find the resources you need to accomplish your goals in OCaml.`,
-  beginning: {
-    level: `Beginning`,
-    introduction: `Are you a beginner? Or just someone who wants to brush up on the fundamentals? In either case, the OFronds tutorial system has you covered!`,
-  },
-  growing: {
-    level: `Growing`,
-    introduction: `Familiar with the basics and looking to get a more robust understanding of OCaml? Or just curious? Check out the books available on OCaml:`,
-  },
-  expanding: {
-    level: `Expanding`,
-    introduction: `Have a strong foundation in OCaml? Time to get involved! Prepare by getting familiar with the OCaml Manual:`,
-  },
-  diversifying: {
-    level: `Diversifying`,
-    introduction: `Now that you're familiar with the building blocks of OCaml, you may want to diversify your portfolio and have a look at the many applications that operate using OCaml.`,
-  },
-  researching: {
-    level: `Researching`,
-    introduction: `Aspiring towards greater understanding of the language? Want to push the limits and discover brand new things? Check out papers written by leading OCaml researchers:`,
-  },
-}
+type props = {content: t}
 
 @react.component
-let make = (~content=contentEn) => <>
+let make = (~content) => <>
   <ConstructionBanner
     figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=1085%3A121`
     playgroundLink=`/play/resources/language`
@@ -259,7 +231,7 @@ let make = (~content=contentEn) => <>
   />
   <UserLevelIntroduction content=content.beginning margins=`mb-20` />
   <UserLevelIntroduction content=content.growing margins=`mb-20` />
-  <Books margins=`mb-16` />
+  <Books margins=`mb-16` content=content.booksContent />
   <UserLevelIntroduction content=content.expanding margins=`mb-20` />
   <Manual margins=`mb-20` />
   <UserLevelIntroduction content=content.diversifying margins=`mb-20` />
@@ -268,4 +240,40 @@ let make = (~content=contentEn) => <>
   <Papers margins=`mb-16` />
 </>
 
+let getStaticProps = _ctx => {
+  let books = Book.readAll()
+  // TODO: read book sorting and filtering information and adjust array
+  let props = {
+    content: {
+      title: `Language`,
+      pageDescription: `This is the home of learning and tutorials. Whether you're a beginner, a teacher, or a seasoned researcher, this is where you can find the resources you need to accomplish your goals in OCaml.`,
+      beginning: {
+        level: `Beginning`,
+        introduction: `Are you a beginner? Or just someone who wants to brush up on the fundamentals? In either case, the OFronds tutorial system has you covered!`,
+      },
+      growing: {
+        level: `Growing`,
+        introduction: `Familiar with the basics and looking to get a more robust understanding of OCaml? Or just curious? Check out the books available on OCaml:`,
+      },
+      booksContent: {
+        booksLabel: "Books",
+        books: books,
+      },
+      expanding: {
+        level: `Expanding`,
+        introduction: `Have a strong foundation in OCaml? Time to get involved! Prepare by getting familiar with the OCaml Manual:`,
+      },
+      diversifying: {
+        level: `Diversifying`,
+        introduction: `Now that you're familiar with the building blocks of OCaml, you may want to diversify your portfolio and have a look at the many applications that operate using OCaml.`,
+      },
+      researching: {
+        level: `Researching`,
+        introduction: `Aspiring towards greater understanding of the language? Want to push the limits and discover brand new things? Check out papers written by leading OCaml researchers:`,
+      },
+    },
+  }
+  {"props": props}
+}
+
 let default = make

yarn.lock

@@ -1207,6 +1207,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 array-flatten@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-3.0.0.tgz#6428ca2ee52c7b823192ec600fa3ed2f157cd541"
@@ -2519,6 +2524,13 @@ js-yaml@^3.11.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.0.0.tgz#f426bc0ff4b4051926cd588c71113183409a121f"
+  integrity sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==
+  dependencies:
+    argparse "^2.0.1"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"