[ { "path": ".gitignore", "content": ".vscode\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Typescript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# dotenv environment variables file\n.env\n\n# gatsby files\n.cache/\npublic\n\n# Mac files\n.DS_Store\n\n# Yarn\nyarn-error.log\n.pnp/\n.pnp.js\n# Yarn Integrity file\n.yarn-integrity\n" }, { "path": ".prettierrc", "content": "{\n \"semi\": false,\n \"singleQuote\": true,\n \"trailingComma\": \"es5\",\n \"tabWidth\": 4,\n \"printWidth\": 100,\n \"overrides\": [\n {\n \"files\": \"*.sass\",\n \"options\": {\n \"printWidth\": 999\n }\n },\n {\n \"files\": \"*.md\",\n \"options\": {\n \"tabWidth\": 2,\n \"printWidth\": 80,\n \"proseWrap\": \"always\",\n \"htmlWhitespaceSensitivity\": \"strict\"\n }\n }\n ]\n}\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (C) 2019 Ines Montani\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "README.md", "content": "# Online course starter: R\n\nThis is a starter repo based on the\n[course framework](https://github.com/ines/spacy-course) I developed for my\n[spaCy course](https://course.spacy.io). The front-end is powered by\n[Gatsby](http://gatsbyjs.org/) and [Reveal.js](https://revealjs.com) and the\nback-end code execution uses [Binder](https://mybinder.org) 💖\n\n_This repo could use some better code examples. Also, if you have experience\nwith R, feel free to suggest improvements to the\n[test logic and template](#adding-tests). It all works as expected, but there\nmight be ways to make it more elegant._\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ines/courser-starter-r)\n\n[![](https://user-images.githubusercontent.com/13643239/56341448-68fe9380-61b5-11e9-816f-5c71ae71b94f.png)](https://course-starter-r.netlify.com)\n\n## ✅ Quickstart\n\n1. [Import](https://github.com/new/import) this repo, install it and make sure\n the app is running locally.\n2. Customize the [`meta.json`](meta.json) and\n [`binder/install.R`](binder/install.R).\n3. Build a [Binder](https://mybinder.org) from the `binder` branch of this repo.\n4. Add content (chapters, exercises and slides) and optionally add separate\n content license.\n5. Customize the UI theme in [`theme.sass`](theme.sass) and update images in\n [`static`](static) as needed.\n6. Deploy the app, e.g. to [Netlify](https://netlify.com).\n\n### Running the app\n\nTo start the local development server, install [Gatsby](https://gatsbyjs.org)\nand then all other dependencies. This should serve up the app on\n`localhost:8000`.\n\n```bash\nnpm install -g gatsby-cli # Install Gatsby globally\nnpm install # Install dependencies\nnpm run dev # Run the development server\n```\n\n## 💡Introduction\n\n> This section was contributed by [@laderast](https://github.com/laderast).\n> Thanks! ✨\n\n### How does this repo work?\n\nThe course repository works with two components: Gatsby (front-end), and Binder\n(back-end). We'll go over both of these to understand how it works as a whole.\n\n### What is Gatsby?\n\n[Gatsby](https://www.gatsbyjs.org/) is a JavaScript/react.js based web page\nbuilding framework, like Hugo, or Jekyll. The nice thing about it being\nJavaScript is that JavaScript widgets that you build are tightly integrated.\n\nYou can think of Gatsby as being the client side of the lesson framework. All\ncode, solutions, tests, and chapter.md files are handled by Gatsby.\n\n### What is Binder?\n\n[Binder](https://gke.mybinder.org/) is a way of building Docker containers from\nrepositories that can be launched on a remote server/cluster (such as\nmybinder.org). This Docker container can be based on a Dockerfile, or R image.\nThe thing about Binder is that the containers are ephemeral - if they're not\nused, they're deleted off the Binder servers. The main applications of Binder\nare:\n\n1. Reproducible Research (shareable notebooks) and\n2. Education (shareable notebooks)\n\nYou can think of Binder as being the server side of the lesson framework. It\nneeds the instructions on how to build the docker container (which is in the\n`binder/` folder), and the data you want to use for the lessons (in the `data/`\nfolder).\n\nThe only thing you need to get started with R and Binder is a repo that has a\n`runtime.txt` file, or a Dockerfile. The rest, such as datafiles, are optional,\nbut are usually contained in a Binder repository.\n\n### How does Gatsby work with Binder?\n\n![code-execution](https://user-images.githubusercontent.com/3315629/60834090-b49d5980-a174-11e9-9d69-966084ba97b9.png)\n\nInes was super clever and designed a JavaScript plugin for Gatsby called\n[Juniper](https://github.com/ines/juniper) to handle communication to and from\nthe Binder container using Jupyter kernels. That's how code gets executed on the\nBinder container, and how code output (such as terminal messages, images, etc)\nare received from the Binder container.\n\n## Branches of this repo\n\n![Course-repo](https://user-images.githubusercontent.com/3315629/60834054-a18a8980-a174-11e9-930d-c61df5faba7b.png)\n\nThere are two branches of this repo, which are used for different tasks:\n\n- **master** - this is what the course is served out of via netlify:\n http://r-bootcamp.netlify.com - any changes to exercises in this branch will\n show up on the netlify page. The netlify page uses a JavaScript framework\n called Gatsby to build the pages. Gatsby submits code to binder and receives\n the output. It also handles the code checking. The parts of the repo that are\n handled by Gatsby include:\n\n1. exercises/solutions/tests\n2. chapter.md files\n3. slides (using reveal.js)\n\n- **binder** - this is what the Binder image is built from. The reason they're\n different is that binder forces a Docker container rebuild when a branch is\n updated. So, if we served our container out of master, it would rebuild\n everytime we modified a `chapter.md` or an exercise. If you need to add\n packages, you will add them to the `binder/install.R` for this branch, and if\n you need to add datasets, you can add them to the `data/` folder. The parts of\n the repo handled by Binder include:\n\n1. datasets in data/ folder (the container needs access to these to load data\n from submitted code)\n2. installation instructions in the binder/ folder for installing dependencies\n\nI would say that the easiest thing to do is to occasionally merge `master` into\n`binder` when you need to update the data:\n\nNote that rebuilding the binder container can take a little bit of time (usually\non the order of 5 or 10 minutes or so), since it is installing/compiling\n`tidyverse` for the container. You can always check the build status of the\ncontainer by clicking the badge below and looking at the log.\n\nYou can view the binder container here:\n[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/ines/course-starter-r/binder)\nor at: https://mybinder.org/v2/gh/ines/course-starter-r/binder\n\n- you can launch an Rstudio instance to test the container by using the \"new\"\n tab in the top right corner, and selecting 'Rstudio'. This is super helpful if\n you want to test if code will work in the binder container.\n\n### Adding Packages\n\nIf you need to add packages, add the appropriate `install.packages()` statement\ninto `binder/install.R`. When you do, check that the container was built\nproperly by clicking the binder link above.\n\nCurrently, `tidyverse` is installed in the binder container.\n\n### `data/` folder\n\nIf you want to access datasets in the data folder, you can always refer to this\nfolder as `data/`. For example, to use `data/pets.csv`:\n\n```\npets <- read.csv(\"data/pets.csv\")\n```\n\nRemember, if you need to add a dataset to the repo, it needs to be done in the\n`binder` branch into the `data/` folder.\n\n### Using `decampr` to transfer your DataCamp repository\n\nIf you would like to transfer your courses from DataCamp, there is a package\nmade for that: [`decampr`](http://github.com/laderast/decampr). It will scan\nyour repository and attempt to extract exercise instructions, quizzes, exercise\ncode, and solutions and write them to the appropriate directory for your\nproject. For more info, please check out the `decampr` repo:\nhttp://github.com/laderast/decampr\n\n## 🎨 Customization\n\nThe app separates its source and content – so you usually shouldn't have to dig\ninto the JavaScript source to change things. The following points of\ncustomization are available:\n\n| Location | Description |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| `meta.json` | General config settings, title, description etc. |\n| `theme.sass` | Color theme. |\n| `binder/install.R` | Packages to install. |\n| `binder/runtime.txt` | YYYY-MM-DD snapshot at MRAN that will be used for installing libraries. [See here](https://github.com/binder-examples/r) for details. |\n| `chapters` | The chapters, one Markdown file per chapter. |\n| `slides` | The slides, one Markdown file per slide deck. |\n| `static` | Static assets like images, will be copied to the root. |\n\n### `meta.json`\n\nThe following meta settings are available. **Note that you have to re-start\nGatsby to see the changes if you're editing it while the server is running.**\n\n| Setting | Description |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| `courseId` | Unique ID of the course. Will be used when saving completed exercises to the browser's local storage. |\n| `title` | The title of the course. |\n| `slogan` | Course slogan, displayed in the page title on the front page. |\n| `description` | Course description. Used for site meta and in footer. |\n| `bio` | Author bio. Used in the footer. |\n| `siteUrl` | URL of the deployed site (without trailing slash). |\n| `twitter` | Author twitter handle, used in Twitter cards meta. |\n| `fonts` | [Google Fonts](https://fonts.google.com) to load. Should be the font part of the URL in the embed string, e.g. `Lato:400,400i,700,700i`. |\n| `testTemplate` | Template used to validate the answers. `${solution}` will be replaced with the user code and `${test}` with the contents of the test file. |\n| `juniper.repo` | Repo to build on Binder in `user/repo` format. Usually the same as this repo. |\n| `juniper.branch` | Branch to build. Ideally not `master`, so the image is not rebuilt every time you push. |\n| `juniper.lang` | Code language for syntax highlighting. |\n| `juniper.kernelType` | The name of the kernel to use. |\n| `juniper.debug` | Logs additional debugging info to the console. |\n| `showProfileImage` | Whether to show the profile image in the footer. If `true`, a file `static/profile.jpg` needs to be available. |\n| `footerLinks` | List of objects with `\"text\"` and `\"url\"` to display as links in the footer. |\n| `theme` | Currently only used for the progressive web app, e.g. as the theme color on mobile. For the UI theme, edit `theme.sass`. |\n\n### Static assets\n\nAll files added to `/static` will become available at the root of the deployed\nsite. So `/static/image.jpg` can be referenced in your course as `/image.jpg`.\nThe following assets need to be available and can be customized:\n\n| File | Description |\n| ----------------- | -------------------------------------------------------- |\n| `icon.png` | Custom [favicon](https://en.wikipedia.org/wiki/Favicon). |\n| `logo.svg` | The course logo. |\n| `profile.jpg` | Photo or profile image. |\n| `social.jpg` | Social image, displayed in Twitter and Facebook cards. |\n| `icon_check.svg` | \"Check\" icon displayed on \"Mark as completed\" button. |\n| `icon_slides.svg` | Icon displayed in the corner of a slides exercise. |\n\n## ✏️ Content\n\n### File formats\n\n#### Chapters\n\nChapters are placed in [`/chapters`](/chapters) and are Markdown files\nconsisting of `` components. They'll be turned into pages, e.g.\n`/chapter1`. In their frontmatter block at the top of the file, they need to\nspecify `type: chapter`, as well as the following meta:\n\n```yaml\n---\ntitle: The chapter title\ndescription: The chapter description\nprev: /chapter1 # exact path to previous chapter or null to not show a link\nnext: /chapter3 # exact path to next chapter or null to not show a link\nid: 2 # unique identifier for chapter\ntype: chapter # important: this creates a standalone page from the chapter\n---\n\n```\n\n#### Slides\n\nSlides are placed in [`/slides`](/slides) and are markdown files consisting of\nslide content, separated by `---`. They need to specify the following\nfrontmatter block at the top of the file:\n\n```yaml\n---\ntype: slides\n---\n\n```\n\nThe **first and last slide** use a special layout and will display the headline\nin the center of the slide. **Speaker notes** (in this case, the script) can be\nadded at the end of a slide, prefixed by `Notes:`. They'll then be shown on the\nright next to the slides. Here's an example slides file:\n\n```markdown\n---\ntype: slides\n---\n\n# Processing pipelines\n\nNotes: This is a slide deck about processing pipelines.\n\n---\n\n# Next slide\n\n- Some bullet points here\n- And another bullet point\n\n\"An\n```\n\n### Custom Elements\n\nWhen using custom elements, make sure to place a newline between the\nopening/closing tags and the children. Otherwise, Markdown content may not\nrender correctly.\n\n#### ``\n\nContainer of a single exercise.\n\n| Argument | Type | Description |\n| ------------ | --------------- | -------------------------------------------------------------- |\n| `id` | number / string | Unique exercise ID within chapter. |\n| `title` | string | Exercise title. |\n| `type` | string | Optional type. `\"slides\"` makes container wider and adds icon. |\n| **children** | - | The contents of the exercise. |\n\n```markdown\n\n\nContent goes here...\n\n\n```\n\n#### ``\n\n| Argument | Type | Description |\n| ------------ | --------------- | -------------------------------------------------------------------------------------------- |\n| `id` | number / string | Unique identifier of the code exercise. |\n| `source` | string | Name of the source file (without file extension). Defaults to `exc_${id}` if not set. |\n| `solution` | string | Name of the solution file (without file extension). Defaults to `solution_${id}` if not set. |\n| `test` | string | Name of the test file (without file extension). Defaults to `test_${id}` if not set. |\n| **children** | string | Optional hints displayed when the user clicks \"Show hints\". |\n\n```markdown\n\n\nThis is a hint!\n\n\n```\n\n#### ``\n\nContainer to display slides interactively using Reveal.js and a Markdown file.\n\n| Argument | Type | Description |\n| -------- | ------ | --------------------------------------------- |\n| `source` | string | Name of slides file (without file extension). |\n\n```markdown\n\n\n```\n\n#### ``\n\nContainer for multiple-choice question.\n\n| Argument | Type | Description |\n| ------------ | --------------- | -------------------------------------------------------------------------------------------- |\n| `id` | string / number | Optional unique ID. Can be used if more than one choice question is present in one exercise. |\n| **children** | nodes | Only `` components for the options. |\n\n```markdown\n\n\nYou have selected option one! This is not good.\nYay! \n\n\n```\n\n#### ``\n\nA multiple-choice option.\n\n| Argument | Type | Description |\n| ------------ | ------ | ---------------------------------------------------------------------------------------------- |\n| `text` | string | The option text to be displayed. Supports inline HTML. |\n| `correct` | string | `\"true\"` if the option is the correct answer. |\n| **children** | string | The text to be displayed if the option is selected (explaining why it's correct or incorrect). |\n\n### Setting up Binder\n\nThe [`install.R`](binder/install.R) in the repository defines the packages that\nare installed when building it with Binder. You can specify the binder settings\nlike repo, branch and kernel type in the `\"juniper\"` section of the `meta.json`.\nI'd recommend running the very first build via the interface on the\n[Binder website](https://mybinder.org), as this gives you a detailed build log\nand feedback on whether everything worked as expected. Enter your repository\nURL, click \"launch\" and wait for it to install the dependencies and build the\nimage.\n\n![Binder](https://user-images.githubusercontent.com/13643239/39412757-a518d416-4c21-11e8-9dad-8b4cc14737bc.png)\n\n### Adding tests\n\nTo validate the code when the user hits \"Submit\", we're currently using a\nslightly hacky trick. Since the R code is sent back to the kernel as a string,\nwe can manipulate it and add tests – for example, exercise `exc_01_02_01.R` will\nbe validated using `test_01_02_01.R` (if available). The user code and test are\ncombined using a string template. At the moment, the `testTemplate` in the\n`meta.json` looks like this:\n\n```r\nsuccess <- function(text) {\n cat(paste(\"\\033[32m\", text, \"\\033[0m\", sep = \"\"))\n}\n\n.solution <- \"${solutionEscaped}\"\n\n${solution}\n\n${test}\ntryCatch({\n test()\n}, error = function(e) {\n cat(paste(\"\\033[31m\", e[1], \"\\033[0m\", sep = \"\"))\n})\n```\n\nIf present, `${solution}` will be replaced with the string value of the\nsubmitted user code, and `${solutionEscaped}` with the code but with all `\"`\nreplaced by `\\\"`, so we can assign it to a variable as a string and check\nwhether the submission includes something. We also insert the regular solution,\nso we can actually run it and check the objects it creates. `${test}` is\nreplaced by the contents of the test file. The template also defines a `success`\nfunction, which prints a formatted green message and can be used in the tests.\nFinally, the `tryCatch` expression checks if the test function raises a `stop`\nand if so, it outputs the formatted error message. This also hides the full\nerror traceback (which can easily leak the correct answers).\n\nA test file could then look like this:\n\n```r\ntest <- function() {\n if (some_var != length(mtcars)) {\n stop(\"Are you getting the correct length?\")\n }\n if (!grepl(\"print(mtcars$gear)\", .solution, fixed = TRUE)) {\n stop(\"Are you printing the correct variable?\")\n }\n success(\"Well done!\")\n}\n```\n\nThe string answer is available as `.solution`, and the test also has access to\nthe solution code.\n\n---\n\nFor more details on how it all works behind the scenes, see\n[the original course repo](https://github.com/ines/spacy-course).\n" }, { "path": "binder/install.R", "content": "install.packages(\"tidyverse\")\ninstall.packages(\"rjson\")\n" }, { "path": "binder/runtime.txt", "content": "r-2019-04-10\n" }, { "path": "chapters/chapter1.md", "content": "---\ntitle: 'Chapter 1: Getting started'\ndescription:\n 'This chapter will teach you about many cool things and introduce you to the\n most important concepts of the course.'\nprev: null\nnext: /chapter2\ntype: chapter\nid: 1\n---\n\n\n\n\n\n\n\n\n\n\nLet's ask some questions about the slides. Whats the correct answer?\n\n\n\n\nThis is not the correct answer.\n\n\n\n\n\nGood job!\n\n\n\n\n\nThis is not correct either.\n\n\n\n\n\n\n\n\nThis is a code exercise. The content can be formatted in simple Markdown – so\nyou can have **bold text**, `code` or [links](https://spacy.io) or lists, like\nthe one for the instructions below.\n\n- These are instructions and they can have bullet points.\n- The code block below will look for the files `exc_01_03`, `solution_01_03` and\n `test_01_03` in `/exercises`.\n\n\n\nThis is a hint.\n\n\n\n\n" }, { "path": "chapters/chapter2.md", "content": "---\ntitle: 'Chapter 2: More stuff'\ndescription:\n 'This chapter will teach you even more stuff and help you learn some new\n concepts.'\nprev: /chapter1\nnext: null\ntype: chapter\nid: 2\n---\n" }, { "path": "exercises/exc_01_03.R", "content": "library(ggplot2)\n\nmtcars$gear <- factor(mtcars$gear,levels=c(3,4,5),\n \tlabels=c(\"3gears\",\"4gears\",\"5gears\"))\nmtcars$am <- factor(mtcars$am,levels=c(0,1),\n \tlabels=c(\"Automatic\",\"Manual\"))\nmtcars$cyl <- factor(mtcars$cyl,levels=c(4,6,8),\n labels=c(\"4cyl\",\"6cyl\",\"8cyl\"))\n\n# Print the gear variable of mtcars\nprint(____)\n\n# Assign the length of mtcars to some_var\nsome_var <- ____\n\n# Uncomment this to see the plot\n# print(qplot(mpg, data=mtcars, geom=\"density\", fill=gear, alpha=I(.5)))\n" }, { "path": "exercises/solution_01_03.R", "content": "library(ggplot2)\n\nmtcars$gear <- factor(mtcars$gear,levels=c(3,4,5),\n \tlabels=c(\"3gears\",\"4gears\",\"5gears\"))\nmtcars$am <- factor(mtcars$am,levels=c(0,1),\n \tlabels=c(\"Automatic\",\"Manual\"))\nmtcars$cyl <- factor(mtcars$cyl,levels=c(4,6,8),\n labels=c(\"4cyl\",\"6cyl\",\"8cyl\"))\n\n# Print the gear variable of mtcars\nprint(mtcars$gear)\n\n# Assign the length of mtcars to some_var\nsome_var <- length(mtcars)\n\n# Uncomment this to see the plot\n# print(qplot(mpg, data=mtcars, geom=\"density\", fill=gear, alpha=I(.5)))\n" }, { "path": "exercises/test_01_03.R", "content": "test <- function() {\n # Here we can either check objects created in the solution code, or the\n # string value of the solution, available as .solution. See the testTemplate\n # in the meta.json for details.\n if (some_var != length(mtcars)) {\n stop(\"Are you getting the correct length?\")\n }\n if (!grepl(\"print(mtcars$gear)\", .solution, fixed = TRUE)) {\n stop(\"Are you printing the correct variable?\")\n }\n\n # This function is defined in the testTemplate\n success(\"Well done!\")\n}\n" }, { "path": "gatsby-browser.js", "content": "import python from 'codemirror/mode/r/r' // eslint-disable-line no-unused-vars\n\n// This doesn't have to be here – but if we do import Juniper here, it's already\n// preloaded and cached when we dynamically import it in code.js.\nimport Juniper from './src/components/juniper' // eslint-disable-line no-unused-vars\n" }, { "path": "gatsby-config.js", "content": "const meta = require('./meta.json')\nconst autoprefixer = require('autoprefixer')\n\nmodule.exports = {\n siteMetadata: meta,\n plugins: [\n {\n resolve: `gatsby-plugin-sass`,\n options: {\n indentedSyntax: true,\n postCssPlugins: [autoprefixer()],\n cssLoaderOptions: {\n localIdentName:\n process.env.NODE_ENV == 'development'\n ? '[name]-[local]-[hash:8]'\n : '[hash:8]',\n },\n },\n },\n `gatsby-plugin-react-helmet`,\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `chapters`,\n path: `${__dirname}/chapters`,\n },\n },\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `slides`,\n path: `${__dirname}/slides`,\n },\n },\n {\n resolve: `gatsby-source-filesystem`,\n options: {\n name: `exercises`,\n path: `${__dirname}/exercises`,\n },\n },\n {\n resolve: 'gatsby-plugin-react-svg',\n options: {\n rule: {\n include: /static/,\n },\n },\n },\n {\n resolve: `gatsby-transformer-remark`,\n options: {\n plugins: [\n `gatsby-remark-copy-linked-files`,\n {\n resolve: `gatsby-remark-prismjs`,\n options: {\n noInlineHighlight: true,\n },\n },\n {\n resolve: `gatsby-remark-smartypants`,\n options: {\n dashes: 'oldschool',\n },\n },\n {\n resolve: `gatsby-remark-images`,\n options: {\n maxWidth: 790,\n linkImagesToOriginal: true,\n sizeByPixelDensity: false,\n showCaptions: true,\n quality: 80,\n withWebp: { quality: 80 },\n },\n },\n `gatsby-remark-unwrap-images`,\n ],\n },\n },\n `gatsby-transformer-sharp`,\n `gatsby-plugin-sharp`,\n `gatsby-plugin-sitemap`,\n {\n resolve: `gatsby-plugin-manifest`,\n options: {\n name: meta.title,\n short_name: meta.title,\n start_url: `/`,\n background_color: meta.theme,\n theme_color: meta.theme,\n display: `minimal-ui`,\n icon: `static/icon.png`,\n },\n },\n `gatsby-plugin-offline`,\n ],\n}\n" }, { "path": "gatsby-node.js", "content": "const path = require('path')\nconst { createFilePath } = require('gatsby-source-filesystem')\n\nconst chapterTemplate = path.resolve('src/templates/chapter.js')\n\nfunction replacePath(pagePath) {\n return pagePath === `/` ? pagePath : pagePath.replace(/\\/$/, ``)\n}\n\nasync function onCreateNode({\n node,\n actions,\n getNode,\n loadNodeContent,\n createNodeId,\n createContentDigest,\n}) {\n const { createNodeField, createNode, createParentChildLink } = actions\n if (node.internal.type === 'MarkdownRemark') {\n const slug = createFilePath({ node, getNode, basePath: 'chapters', trailingSlash: false })\n createNodeField({ name: 'slug', node, value: slug })\n } else if (node.extension === 'r') {\n // Load the contents of the Python file and make it available via GraphQL\n // https://www.gatsbyjs.org/docs/creating-a-transformer-plugin/\n const content = await loadNodeContent(node)\n const contentDigest = createContentDigest(content)\n const id = createNodeId(`${node.id}-code`)\n const internal = { type: 'Code', contentDigest }\n const codeNode = {\n id,\n parent: node.id,\n children: [],\n code: content,\n name: node.name,\n internal,\n }\n createNode(codeNode)\n createParentChildLink({ parent: node, child: codeNode })\n }\n}\n\nexports.onCreateNode = onCreateNode\n\nexports.createPages = ({ actions, graphql }) => {\n const { createPage } = actions\n return graphql(`\n {\n allMarkdownRemark {\n edges {\n node {\n frontmatter {\n title\n type\n }\n fields {\n slug\n }\n }\n }\n }\n }\n `).then(result => {\n if (result.errors) {\n return Promise.reject(result.errors)\n }\n const posts = result.data.allMarkdownRemark.edges.filter(\n ({ node }) => node.frontmatter.type == 'chapter'\n )\n posts.forEach(({ node }) => {\n createPage({\n path: replacePath(node.fields.slug),\n component: chapterTemplate,\n context: { slug: node.fields.slug },\n })\n })\n })\n}\n" }, { "path": "meta.json", "content": "{\n \"courseId\": \"course-starter-r\",\n \"title\": \"My cool online course\",\n \"slogan\": \"A free online course\",\n \"description\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique libero at est congue, sed vestibulum tortor laoreet. Aenean egestas massa non commodo consequat. Curabitur faucibus, sapien vitae euismod imperdiet, arcu erat semper urna, in accumsan sapien dui ac mi. Pellentesque felis lorem, semper nec velit nec, consectetur placerat enim.\",\n \"bio\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique libero at est congue, sed vestibulum tortor laoreet. Aenean egestas massa non commodo consequat. Curabitur faucibus, sapien vitae euismod imperdiet, arcu erat semper urna.\",\n \"siteUrl\": \"https://course-starter-r.netlify.com\",\n \"twitter\": \"spacy_io\",\n \"fonts\": \"IBM+Plex+Mono:500|IBM+Plex+Sans:700|Lato:400,400i,700,700i\",\n \"testTemplate\": \"success <- function(text) {\\n cat(paste(\\\"\\\\033[32m\\\", text, \\\"\\\\033[0m\\\", sep = \\\"\\\"))\\n}\\n\\n.solution <- \\\"${solutionEscaped}\\\"\\n\\n${solution}\\n\\n${test}\\ntryCatch({\\n test()\\n}, error = function(e) {\\n cat(paste(\\\"\\\\033[31m\\\", e[1], \\\"\\\\033[0m\\\", sep = \\\"\\\"))\\n})\",\n \"juniper\": {\n \"repo\": \"ines/course-starter-r\",\n \"branch\": \"binder\",\n \"lang\": \"r\",\n \"kernelType\": \"ir\",\n \"debug\": false\n },\n \"showProfileImage\": true,\n \"footerLinks\": [\n { \"text\": \"Website\", \"url\": \"https://spacy.io\" },\n { \"text\": \"Source\", \"url\": \"https://github.com/ines/course-starter-r\" },\n { \"text\": \"Built with ♥\", \"url\": \"https://github.com/ines/course-starter-r\" }\n ],\n \"theme\": \"#de7878\"\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"course-starter-r\",\n \"private\": true,\n \"description\": \"Starter package to build interactive R courses\",\n \"version\": \"0.0.1\",\n \"author\": \"Ines Montani \",\n \"dependencies\": {\n \"@illinois/react-use-local-storage\": \"^1.1.0\",\n \"@jupyterlab/outputarea\": \"^0.19.1\",\n \"@jupyterlab/rendermime\": \"^0.19.1\",\n \"@phosphor/widgets\": \"^1.6.0\",\n \"autoprefixer\": \"^9.4.7\",\n \"classnames\": \"^2.2.6\",\n \"codemirror\": \"^5.43.0\",\n \"gatsby\": \"^2.1.4\",\n \"gatsby-image\": \"^2.0.29\",\n \"gatsby-plugin-manifest\": \"^2.0.17\",\n \"gatsby-plugin-offline\": \"^2.0.23\",\n \"gatsby-plugin-react-helmet\": \"^3.0.6\",\n \"gatsby-plugin-react-svg\": \"^2.1.1\",\n \"gatsby-plugin-sass\": \"^2.0.10\",\n \"gatsby-plugin-sharp\": \"^2.0.29\",\n \"gatsby-plugin-sitemap\": \"^2.0.5\",\n \"gatsby-remark-copy-linked-files\": \"^2.0.9\",\n \"gatsby-remark-images\": \"^3.0.4\",\n \"gatsby-remark-prismjs\": \"^3.2.4\",\n \"gatsby-remark-smartypants\": \"^2.0.8\",\n \"gatsby-remark-unwrap-images\": \"^1.0.1\",\n \"gatsby-source-filesystem\": \"^2.0.20\",\n \"gatsby-transformer-remark\": \"^2.2.5\",\n \"gatsby-transformer-sharp\": \"^2.1.17\",\n \"juniper-js\": \"^0.1.0\",\n \"node-sass\": \"^4.11.0\",\n \"prismjs\": \"^1.15.0\",\n \"react\": \"^16.8.2\",\n \"react-dom\": \"^16.8.2\",\n \"react-helmet\": \"^5.2.0\",\n \"rehype-react\": \"^3.1.0\",\n \"remark-react\": \"^5.0.1\",\n \"reveal.js\": \"^3.8.0\"\n },\n \"scripts\": {\n \"build\": \"gatsby build\",\n \"dev\": \"gatsby develop\",\n \"lint\": \"eslint **\",\n \"clear\": \"rm -rf .cache\",\n \"test\": \"echo \\\"Write tests! -> https://gatsby.app/unit-testing\\\"\"\n },\n \"devDependencies\": {\n \"browser-monads\": \"^1.0.0\",\n \"prettier\": \"^1.16.4\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ines/course-starter-python\"\n }\n}\n" }, { "path": "slides/chapter1_01_introduction.md", "content": "---\ntype: slides\n---\n\n# Introduction\n\nNotes: Text at the end of a slide prefixed like this will be displayed as\nspeaker notes on the side. Slides can be separated with a divider: ---.\n\n---\n\n# This is a slide\n\n```r\n# Print something\nprint(\"Hello world\", quote = FALSE)\n```\n\n```out\nHello world\n```\n\n- Slides can have code, bullet points, tables and pretty much all other Markdown\n elements.\n- This is another bullet point.\n\n\"This\n\nNotes: Some more notes go here\n\n---\n\n# Let's practice!\n\nNotes: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique\nlibero at est congue, sed vestibulum tortor laoreet. Aenean egestas massa non\ncommodo consequat. Curabitur faucibus, sapien vitae euismod imperdiet, arcu erat\nsemper urna, in accumsan sapien dui ac mi. Pellentesque felis lorem, semper nec\nvelit nec, consectetur placerat enim.\n" }, { "path": "src/components/button.js", "content": "import React from 'react'\nimport classNames from 'classnames'\n\nimport IconCheck from '../../static/icon_check.svg'\nimport classes from '../styles/button.module.sass'\n\nexport const Button = ({ Component = 'button', children, onClick, variant, small, className }) => {\n const buttonClassNames = classNames(classes.root, className, {\n [classes.primary]: variant === 'primary',\n [classes.secondary]: variant === 'secondary',\n [classes.small]: !!small,\n })\n return (\n \n {children}\n \n )\n}\n\nexport const CompleteButton = ({ completed, toggleComplete, small = true }) => {\n const buttonClassNames = classNames({\n [classes.completeInactive]: !completed,\n [classes.completeActive]: completed,\n })\n return (\n \n )\n}\n" }, { "path": "src/components/choice.js", "content": "import React, { useState, useCallback } from 'react'\nimport classNames from 'classnames'\n\nimport { Button } from './button'\nimport classes from '../styles/choice.module.sass'\n\nconst Choice = ({ id = '0', children = [] }) => {\n const [selected, setSelected] = useState(null)\n const [answer, setAnswer] = useState(null)\n const handleAnswer = useCallback(() => setAnswer(selected), [selected])\n const options = children.filter(child => child !== '\\n')\n return (\n <>\n {options.map(({ key, props }, i) => (\n

\n setSelected(i)}\n />\n ${props.text}` }}\n />\n

\n ))}\n \n {options.map(({ key, props }, i) => {\n const isCorrect = !!props.correct\n return answer === i ? (\n \n \n {isCorrect ? \"That's correct! \" : 'Incorrect. '}\n \n {props.children}\n \n ) : null\n })}\n \n )\n}\n\nexport const Option = ({ children }) => {\n return children\n}\n\nexport default Choice\n" }, { "path": "src/components/code.js", "content": "import React from 'react'\nimport { StaticQuery, graphql } from 'gatsby'\n\nimport { Hint } from './hint'\nimport { Button } from './button'\n\nimport classes from '../styles/code.module.sass'\n\nfunction getFiles({ allCode }) {\n return Object.assign(\n {},\n ...allCode.edges.map(({ node }) => ({\n [node.name]: node.code,\n }))\n )\n}\n\nfunction makeTest(template, testFile, solution) {\n // Escape quotation marks in the solution code, for cases where we\n // can only place the solution in regular quotes.\n const solutionEscaped = solution.replace(/\"/g, '\\\\\"')\n return template\n .replace(/\\${solutionEscaped}/g, solutionEscaped)\n .replace(/\\${solution}/g, solution)\n .replace(/\\${test}/g, testFile)\n}\n\nclass CodeBlock extends React.Component {\n state = { Juniper: null, showSolution: false, key: 0 }\n\n handleShowSolution() {\n this.setState({ showSolution: true })\n }\n\n handleReset() {\n // Using the key as a hack to force component to rerender\n this.setState({ showSolution: false, key: this.state.key + 1 })\n }\n\n updateJuniper() {\n // This type of stuff only really works in class components. I'm not\n // sure why, but I've tried with function components and hooks lots of\n // times and couldn't get it to work. So class component it is.\n if (!this.state.Juniper) {\n // We need a dynamic import here for SSR. Juniper's dependencies\n // include references to the global window object and I haven't\n // managed to fix this using webpack yet. If we imported Juniper\n // at the top level, Gatsby won't build.\n import('./juniper').then(Juniper => {\n this.setState({ Juniper: Juniper.default })\n })\n }\n }\n\n componentDidMount() {\n this.updateJuniper()\n }\n\n componentDidUpdate() {\n this.updateJuniper()\n }\n\n render() {\n const { Juniper, showSolution } = this.state\n const { id, source, solution, test, children } = this.props\n const sourceId = source || `exc_${id}`\n const solutionId = solution || `solution_${id}`\n const testId = test || `test_${id}`\n const juniperClassNames = {\n cell: classes.cell,\n input: classes.input,\n button: classes.button,\n output: classes.output,\n }\n const hintActions = [\n { text: 'Show solution', onClick: () => this.handleShowSolution() },\n { text: 'Reset', onClick: () => this.handleReset() },\n ]\n\n return (\n {\n const { testTemplate } = data.site.siteMetadata\n const { repo, branch, kernelType, debug, lang } = data.site.siteMetadata.juniper\n const files = getFiles(data)\n const sourceFile = files[sourceId]\n const solutionFile = files[solutionId]\n const testFile = files[testId]\n return (\n
\n {Juniper && (\n (\n <>\n \n {testFile && (\n \n runCode(value =>\n makeTest(testTemplate, testFile, value)\n )\n }\n >\n Submit\n \n )}\n \n )}\n >\n {showSolution ? solutionFile : sourceFile}\n \n )}\n {children}\n
\n )\n }}\n />\n )\n }\n}\n\nexport default CodeBlock\n" }, { "path": "src/components/exercise.js", "content": "import React, { useRef, useCallback, useContext, useEffect } from 'react'\nimport classNames from 'classnames'\n\nimport { Button, CompleteButton } from './button'\nimport { ChapterContext } from '../context'\nimport IconSlides from '../../static/icon_slides.svg'\nimport classes from '../styles/exercise.module.sass'\n\nconst Exercise = ({ id, title, type, children }) => {\n const excRef = useRef()\n const excId = parseInt(id)\n const { activeExc, setActiveExc, completed, setCompleted } = useContext(ChapterContext)\n const isExpanded = activeExc === excId\n const isCompleted = completed.includes(excId)\n useEffect(() => {\n if (isExpanded && excRef.current) {\n excRef.current.scrollIntoView()\n }\n }, [isExpanded])\n const handleExpand = useCallback(() => setActiveExc(isExpanded ? null : excId), [\n isExpanded,\n excId,\n ])\n const handleNext = useCallback(() => setActiveExc(excId + 1))\n const handleSetCompleted = useCallback(() => {\n const newCompleted = isCompleted\n ? completed.filter(v => v !== excId)\n : [...completed, excId]\n setCompleted(newCompleted)\n }, [isCompleted, completed, excId])\n const rootClassNames = classNames(classes.root, {\n [classes.expanded]: isExpanded,\n [classes.wide]: isExpanded && type === 'slides',\n [classes.completed]: !isExpanded && isCompleted,\n })\n const titleClassNames = classNames(classes.title, {\n [classes.titleExpanded]: isExpanded,\n })\n return (\n
\n

\n \n \n {excId}\n \n {title}\n \n {type === 'slides' && }\n

\n {isExpanded && (\n
\n {children}\n
\n \n \n
\n
\n )}\n
\n )\n}\n\nexport default Exercise\n" }, { "path": "src/components/hint.js", "content": "import React, { useState, useCallback } from 'react'\n\nimport classes from '../styles/hint.module.sass'\n\nexport const Hint = ({ expanded = false, actions = [], children }) => {\n const [isExpanded, setIsExpanded] = useState(expanded)\n const handleExpand = useCallback(() => setIsExpanded(!isExpanded), [isExpanded])\n return (\n \n )\n}\n" }, { "path": "src/components/juniper.js", "content": "import React from 'react'\nimport PropTypes from 'prop-types'\nimport CodeMirror from 'codemirror'\nimport { Widget } from '@phosphor/widgets'\nimport { Kernel, ServerConnection } from '@jupyterlab/services'\nimport { OutputArea, OutputAreaModel } from '@jupyterlab/outputarea'\nimport { RenderMimeRegistry, standardRendererFactories } from '@jupyterlab/rendermime'\nimport { window } from 'browser-monads'\n\nclass Juniper extends React.Component {\n outputRef = null\n inputRef = null\n state = { content: null, cm: null, kernel: null, renderers: null, fromStorage: null }\n\n static defaultProps = {\n children: '',\n branch: 'master',\n url: 'https://mybinder.org',\n serverSettings: {},\n kernelType: 'python3',\n lang: 'python',\n theme: 'default',\n isolateCells: true,\n useBinder: true,\n storageKey: 'juniper',\n useStorage: true,\n storageExpire: 60,\n debug: true,\n msgButton: 'run',\n msgLoading: 'Loading...',\n msgError: 'Connecting failed. Please reload and try again.',\n classNames: {\n cell: 'juniper-cell',\n input: 'juniper-input',\n button: 'juniper-button',\n output: 'juniper-output',\n },\n }\n\n static propTypes = {\n children: PropTypes.string,\n repo: PropTypes.string.isRequired,\n branch: PropTypes.string,\n url: PropTypes.string,\n serverSettings: PropTypes.object,\n kernelType: PropTypes.string,\n lang: PropTypes.string,\n theme: PropTypes.string,\n isolateCells: PropTypes.bool,\n useBinder: PropTypes.bool,\n useStorage: PropTypes.bool,\n storageExpire: PropTypes.number,\n msgButton: PropTypes.string,\n msgLoading: PropTypes.string,\n msgError: PropTypes.string,\n classNames: PropTypes.shape({\n cell: PropTypes.string,\n input: PropTypes.string,\n button: PropTypes.string,\n output: PropTypes.string,\n }),\n actions: PropTypes.func,\n }\n\n componentDidMount() {\n this.setState({ content: this.props.children })\n const renderers = standardRendererFactories.filter(factory =>\n factory.mimeTypes.includes('text/latex') ? window.MathJax : true\n )\n\n const outputArea = new OutputArea({\n model: new OutputAreaModel({ trusted: true }),\n rendermime: new RenderMimeRegistry({ initialFactories: renderers }),\n })\n\n const cm = new CodeMirror(this.inputRef, {\n value: this.props.children.trim(),\n mode: this.props.lang,\n theme: this.props.theme,\n })\n this.setState({ cm })\n\n const runCode = wrapper => {\n const value = cm.getValue()\n this.execute(outputArea, wrapper ? wrapper(value) : value)\n }\n const setValue = value => cm.setValue(value)\n cm.setOption('extraKeys', { 'Shift-Enter': runCode })\n Widget.attach(outputArea, this.outputRef)\n this.setState({ runCode, setValue })\n }\n\n log(logFunction) {\n if (this.props.debug) {\n logFunction()\n }\n }\n\n componentWillReceiveProps({ children }) {\n if (children !== this.state.content && this.state.cm) {\n this.state.cm.setValue(children.trim())\n }\n }\n\n /**\n * Request a binder, e.g. from mybinder.org\n * @param {string} repo - Repository name in the format 'user/repo'.\n * @param {string} branch - The repository branch, e.g. 'master'.\n * @param {string} url - The binder reployment URL, including 'http(s)'.\n * @returns {Promise} - Resolved with Binder settings, rejected with Error.\n */\n requestBinder(repo, branch, url) {\n const binderUrl = `${url}/build/gh/${repo}/${branch}`\n this.log(() => console.info('building', { binderUrl }))\n return new Promise((resolve, reject) => {\n const es = new EventSource(binderUrl)\n es.onerror = err => {\n es.close()\n this.log(() => console.error('failed'))\n reject(new Error(err))\n }\n let phase = null\n es.onmessage = ({ data }) => {\n const msg = JSON.parse(data)\n if (msg.phase && msg.phase !== phase) {\n phase = msg.phase.toLowerCase()\n this.log(() => console.info(phase === 'ready' ? 'server-ready' : phase))\n }\n if (msg.phase === 'failed') {\n es.close()\n reject(new Error(msg))\n } else if (msg.phase === 'ready') {\n es.close()\n const settings = {\n baseUrl: msg.url,\n wsUrl: `ws${msg.url.slice(4)}`,\n token: msg.token,\n }\n resolve(settings)\n }\n }\n })\n }\n\n /**\n * Request kernel and estabish a server connection via the JupyerLab service\n * @param {object} settings - The server settings.\n * @returns {Promise} - A promise that's resolved with the kernel.\n */\n requestKernel(settings) {\n if (this.props.useStorage) {\n const timestamp = new Date().getTime() + this.props.storageExpire * 60 * 1000\n const json = JSON.stringify({ settings, timestamp })\n window.localStorage.setItem(this.props.storageKey, json)\n }\n const serverSettings = ServerConnection.makeSettings(settings)\n return Kernel.startNew({\n type: this.props.kernelType,\n name: this.props.kernelType,\n serverSettings,\n }).then(kernel => {\n this.log(() => console.info('ready'))\n return kernel\n })\n }\n\n /**\n * Get a kernel by requesting a binder or from localStorage / user settings\n * @returns {Promise}\n */\n getKernel() {\n if (this.props.useStorage) {\n const stored = window.localStorage.getItem(this.props.storageKey)\n if (stored) {\n this.setState({ fromStorage: true })\n const { settings, timestamp } = JSON.parse(stored)\n if (timestamp && new Date().getTime() < timestamp) {\n return this.requestKernel(settings)\n }\n window.localStorage.removeItem(this.props.storageKey)\n }\n }\n if (this.props.useBinder) {\n return this.requestBinder(this.props.repo, this.props.branch, this.props.url).then(\n settings => this.requestKernel(settings)\n )\n }\n return this.requestKernel(this.props.serverSettings)\n }\n\n /**\n * Render the kernel response in a JupyterLab output area\n * @param {OutputArea} outputArea - The cell's output area.\n * @param {string} code - The code to execute.\n */\n renderResponse(outputArea, code) {\n outputArea.future = this.state.kernel.requestExecute({ code })\n outputArea.model.add({\n output_type: 'stream',\n name: 'loading',\n text: this.props.msgLoading,\n })\n outputArea.model.clear(true)\n }\n\n /**\n * Process request to execute the code\n * @param {OutputArea} - outputArea - The cell's output area.\n * @param {string} code - The code to execute.\n */\n execute(outputArea, code) {\n this.log(() => console.info('executing'))\n if (this.state.kernel) {\n if (this.props.isolateCells) {\n this.state.kernel\n .restart()\n .then(() => this.renderResponse(outputArea, code))\n .catch(() => {\n this.log(() => console.error('failed'))\n this.setState({ kernel: null })\n outputArea.model.clear()\n outputArea.model.add({\n output_type: 'stream',\n name: 'failure',\n text: this.props.msgError,\n })\n })\n return\n }\n this.renderResponse(outputArea, code)\n return\n }\n this.log(() => console.info('requesting kernel'))\n const url = this.props.url.split('//')[1]\n const action = !this.state.fromStorage ? 'Launching' : 'Reconnecting to'\n outputArea.model.clear()\n outputArea.model.add({\n output_type: 'stream',\n name: 'stdout',\n text: `${action} Docker container on ${url}...`,\n })\n new Promise((resolve, reject) =>\n this.getKernel()\n .then(resolve)\n .catch(reject)\n )\n .then(kernel => {\n this.setState({ kernel })\n this.renderResponse(outputArea, code)\n })\n .catch(() => {\n this.log(() => console.error('failed'))\n this.setState({ kernel: null })\n if (this.props.useStorage) {\n this.setState({ fromStorage: false })\n window.localStorage.removeItem(this.props.storageKey)\n }\n outputArea.model.clear()\n outputArea.model.add({\n output_type: 'stream',\n name: 'failure',\n text: this.props.msgError,\n })\n })\n }\n\n render() {\n return (\n
\n {\n this.inputRef = x\n }}\n />\n {this.props.msgButton && (\n \n )}\n {this.props.actions && this.props.actions(this.state)}\n {\n this.outputRef = x\n }}\n className={this.props.classNames.output}\n />\n
\n )\n }\n}\n\nexport default Juniper\n" }, { "path": "src/components/layout.js", "content": "import React from 'react'\nimport { StaticQuery, graphql } from 'gatsby'\n\nimport SEO from './seo'\nimport { Link } from './link'\nimport { H3 } from './typography'\nimport Logo from '../../static/logo.svg'\n\nimport '../styles/index.sass'\nimport classes from '../styles/layout.module.sass'\n\nconst Layout = ({ isHome, title, description, children }) => {\n return (\n {\n const meta = data.site.siteMetadata\n return (\n <>\n \n
\n {!isHome && (\n

\n \n \n \n

\n )}\n
\n {(title || description) && (\n
\n {title &&

{title}

}\n {description && (\n

{description}

\n )}\n
\n )}\n {children}\n
\n\n
\n
\n
\n

About this course

\n

{meta.description}

\n
\n\n
\n

About me

\n {meta.showProfileImage && (\n \n )}\n

{meta.bio}

\n
\n\n {meta.footerLinks && (\n
    \n {meta.footerLinks.map(({ text, url }, i) => (\n
  • \n \n {text}\n \n
    • \n ))}\n
\n )}\n
\n
\n
\n \n )\n }}\n />\n )\n}\n\nexport default Layout\n" }, { "path": "src/components/link.js", "content": "import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Link as GatsbyLink } from 'gatsby'\nimport classNames from 'classnames'\n\nimport classes from '../styles/link.module.sass'\n\nexport const Link = ({ children, to, href, onClick, variant, hidden, className, ...other }) => {\n const dest = to || href\n const external = /(http(s?)):\\/\\//gi.test(dest)\n const linkClassNames = classNames(classes.root, className, {\n [classes.hidden]: hidden,\n [classes.secondary]: variant === 'secondary',\n })\n\n if (!external) {\n if ((dest && /^#/.test(dest)) || onClick) {\n return (\n \n {children}\n \n )\n }\n return (\n \n {children}\n \n )\n }\n return (\n \n {children}\n \n )\n}\n\nLink.propTypes = {\n children: PropTypes.node.isRequired,\n to: PropTypes.string,\n href: PropTypes.string,\n onClick: PropTypes.func,\n variant: PropTypes.oneOf(['secondary', null]),\n hidden: PropTypes.bool,\n className: PropTypes.string,\n}\n" }, { "path": "src/components/seo.js", "content": "import React from 'react'\nimport Helmet from 'react-helmet'\nimport { StaticQuery, graphql } from 'gatsby'\n\nconst SEO = ({ title, description }) => (\n {\n const lang = 'en'\n const siteMetadata = data.site.siteMetadata\n const pageTitle = title\n ? `${title} · ${siteMetadata.title}`\n : `${siteMetadata.title} · ${siteMetadata.slogan}`\n const pageDesc = description || siteMetadata.description\n const image = `${siteMetadata.siteUrl}/social.jpg`\n const meta = [\n {\n name: 'description',\n content: pageDesc,\n },\n {\n property: 'og:title',\n content: pageTitle,\n },\n {\n property: 'og:description',\n content: pageDesc,\n },\n {\n property: 'og:type',\n content: `website`,\n },\n {\n property: 'og:site_name',\n content: siteMetadata.title,\n },\n {\n property: 'og:image',\n content: image,\n },\n {\n name: 'twitter:card',\n content: 'summary_large_image',\n },\n {\n name: 'twitter:image',\n content: image,\n },\n {\n name: 'twitter:creator',\n content: `@${siteMetadata.twitter}`,\n },\n {\n name: 'twitter:site',\n content: `@${siteMetadata.twitter}`,\n },\n {\n name: 'twitter:title',\n content: pageTitle,\n },\n {\n name: 'twitter:description',\n content: pageDesc,\n },\n ]\n\n return (\n \n {siteMetadata.fonts && (\n \n )}\n \n )\n }}\n />\n)\n\nexport default SEO\n\nconst query = graphql`\n query DefaultSEOQuery {\n site {\n siteMetadata {\n title\n description\n slogan\n siteUrl\n twitter\n fonts\n }\n }\n }\n`\n" }, { "path": "src/components/slides.js", "content": "import React from 'react'\nimport { StaticQuery, graphql } from 'gatsby'\nimport Marked from 'reveal.js/plugin/markdown/marked.js'\nimport classNames from 'classnames'\n\nimport '../styles/reveal.css'\nimport classes from '../styles/slides.module.sass'\n\nfunction getFiles({ allMarkdownRemark }) {\n return Object.assign(\n {},\n ...allMarkdownRemark.edges.map(({ node }) => ({\n [node.fields.slug.replace('/', '')]: node.rawMarkdownBody,\n }))\n )\n}\n\nfunction getSlideContent(data, source) {\n const files = getFiles(data)\n const file = files[source] || ''\n return file.split('\\n---\\n').map(f => f.trim())\n}\n\nclass Slides extends React.Component {\n componentDidMount() {\n import('reveal.js').then(({ default: Reveal }) => {\n window.Reveal = Reveal\n window.marked = Marked\n import('reveal.js/plugin/markdown/markdown.js').then(({ RevealMarkdown }) => {\n RevealMarkdown.init()\n Reveal.initialize({\n center: false,\n progress: false,\n showNotes: true,\n controls: true,\n width: '100%',\n height: 600,\n minScale: 0.75,\n maxScale: 1,\n })\n })\n })\n }\n\n componentWillUnmount() {\n // Work around default reveal.js behaviour that doesn't allow\n // re-initialization and clashes with React\n delete window.Reveal\n delete window.marked\n delete require.cache[require.resolve('reveal.js')]\n delete require.cache[require.resolve('reveal.js/plugin/markdown/markdown.js')]\n }\n\n render() {\n const { source } = this.props\n const revealClassNames = classNames('reveal', 'show-notes', classes.reveal)\n const slideClassNames = classNames('slides', classes.slides)\n\n return (\n
\n
\n {\n const content = getSlideContent(data, source)\n return (\n
\n {content.map((markdown, i) => (\n \n