diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..dfe07704 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/assets/1.png b/assets/1.png new file mode 100644 index 00000000..2432508b Binary files /dev/null and b/assets/1.png differ diff --git a/assets/2_2.png b/assets/2_2.png new file mode 100644 index 00000000..435a0777 Binary files /dev/null and b/assets/2_2.png differ diff --git a/assets/2_3.png b/assets/2_3.png new file mode 100644 index 00000000..3edfd424 Binary files /dev/null and b/assets/2_3.png differ diff --git a/assets/2_welcome intent.png b/assets/2_welcome intent.png new file mode 100644 index 00000000..32725fc9 Binary files /dev/null and b/assets/2_welcome intent.png differ diff --git a/assets/3_2.png b/assets/3_2.png new file mode 100644 index 00000000..4c268e08 Binary files /dev/null and b/assets/3_2.png differ diff --git a/assets/3_3.png b/assets/3_3.png new file mode 100644 index 00000000..5c7d9f6c Binary files /dev/null and b/assets/3_3.png differ diff --git a/assets/3_4.png b/assets/3_4.png new file mode 100644 index 00000000..11c96c18 Binary files /dev/null and b/assets/3_4.png differ diff --git a/assets/3_5.png b/assets/3_5.png new file mode 100644 index 00000000..88b8fc19 Binary files /dev/null and b/assets/3_5.png differ diff --git a/assets/3_Entity.png b/assets/3_Entity.png new file mode 100644 index 00000000..bfaf5578 Binary files /dev/null and b/assets/3_Entity.png differ diff --git a/assets/4-webhook.png b/assets/4-webhook.png new file mode 100644 index 00000000..c57f9b3c Binary files /dev/null and b/assets/4-webhook.png differ diff --git a/assets/4_2.png b/assets/4_2.png new file mode 100644 index 00000000..af30efdc Binary files /dev/null and b/assets/4_2.png differ diff --git a/assets/4_3.png b/assets/4_3.png new file mode 100644 index 00000000..a4e7ed12 Binary files /dev/null and b/assets/4_3.png differ diff --git a/assets/4_4.png b/assets/4_4.png new file mode 100644 index 00000000..2b7e1da6 Binary files /dev/null and b/assets/4_4.png differ diff --git a/assets/5_2.png b/assets/5_2.png new file mode 100644 index 00000000..e7866c93 Binary files /dev/null and b/assets/5_2.png differ diff --git a/assets/5_add context.png b/assets/5_add context.png new file mode 100644 index 00000000..67ef598d Binary files /dev/null and b/assets/5_add context.png differ diff --git a/assets/6_2.png b/assets/6_2.png new file mode 100644 index 00000000..e3b15641 Binary files /dev/null and b/assets/6_2.png differ diff --git a/assets/6_Integrations.png b/assets/6_Integrations.png new file mode 100644 index 00000000..c072e425 Binary files /dev/null and b/assets/6_Integrations.png differ diff --git a/assets/codesandbox.jpg b/assets/codesandbox.jpg new file mode 100644 index 00000000..1cf7a849 Binary files /dev/null and b/assets/codesandbox.jpg differ diff --git a/assets/graphql.jpg b/assets/graphql.jpg new file mode 100644 index 00000000..0015ba7b Binary files /dev/null and b/assets/graphql.jpg differ diff --git a/decks/food.mdx b/decks/food.mdx index aa8461bb..691e2998 100644 --- a/decks/food.mdx +++ b/decks/food.mdx @@ -9,76 +9,97 @@ export const theme = customTheme; -# Concurrent Mode +# Designing a ChatBot using DiagFlow +## By Shayan _____ and Ruby _____ --- - - - - - -```jsx file=./src/greeting.1.1.js -``` +## What is a ChatBot? - +--- + - - - +## ChatBot -```jsx 7 file=./src/greeting.1.1.js -``` +### A computer program that simulates and processes human conversation, allowing humans to interact with digital devices as if they were communicating with a real person. - - - - - + -```jsx file=./src/greeting.class.1.1.js -``` +--- - +## Why we need a ChatBot? - +--- - +## Never miss a chance to engage with your friends or users -```jsx file=./src/greeting.class.1.2.js -``` +--- + +## How to start? - +--- + - +## Google DialogFlow + +### "Dialogflow (formerly Api.ai, Speaktoit) is a Google-owned developer of human–computer interaction technologies based on natural language conversations." + + + +- There are so many tools, why DiagFlow ? + + + + + +--- - + -```jsx 10:12,15:17,25 file=./src/greeting.class.1.3.js -``` +- Built-in natural-language processing (NLP) +- Machine learning +- On any platform +- Offers cross-device support +- supports 20+ languages - +## DialogFlow - + +- Use machine learning to understand what users are saying +- Build Actions, Skills, bots, and apps for the Google Assistant, Alexa, Cortana, Facebook Messenger and other platforms your users are on. +- wearables, phones, cars, speakers and other smart devices +- Give users new ways to interact with your product by building engaging voice and text-based conversational interfaces, + such as voice apps and chatbots, powered by AI. + Connect with users on your website, mobile app, the Google Assistant, Amazon Alexa, Facebook Messenger, and other popular platforms and devices. - + -```jsx 1:31 file=./src/greeting.class.1.3.js -``` + - +--- - +# Let’s get started --- - - + + +## Agent + +### The face of your bot. + +#### Connects to your backend and provides it with business logic. -## Disclaimer +#### Is made up of intents -### Information in this talk may not be accurate or may change in the future + + +- DialogFlow allows you to make NLU modules, called agents (basically the face of your bot). +This agent connects to your backend and provides it with business logic. +-An agent is made up of intents. what is intents? + + @@ -86,294 +107,428 @@ export const theme = customTheme; -## Time Slicing +## Intent + +### Intents are simply actions that a user can perform on your agent. It maps what a user says to what action should be taken. + +#### “What’s the weather like in Davis today?” -### "Chunking slow rendering on subtree into little blocks of work by interrupting the work loop." + + +- They’re entry points into a conversation. +- In short, a user may request the same thing in many ways, re-structuring their sentences. But in the end, they should all resolve to a single intent. +- Examples of intents can be: “What’s the weather like in Davis today?” or “What is the recipe for an omelet?” +- You can create as many intents as your business logic desires, and even co-relate them, using contexts. An intent decides what API to call, with what parameters, and how to respond back, to a user’s request. + + --- -import DanDemoBlocking from '../assets/dan-demo-blocking.png'; + - +## Entity ---- +### The values to extract from a given user’s input (keywords) -import DanDemoConcurrent from '../assets/dan-demo-concurrent.png'; +#### Dates, events, distance - + ---- + - +- An agent wouldn’t know what values to extract from a given user’s input. + This is where entities come into play. + Any information in a sentence, critical to your business logic, will be an entity. + This includes stuff like dates, distance, currency, etc. + There are system entities, provided by DialogFlow for simple things like numbers and dates. + And then there are developer defined entities. + For example, “category”, for a bot about Pokemon! We’ll dive into how to make a custom developer entity further in the post. + + -### "Wait a minute... I already know about this! What is this talk really about?" --- - + -# Concurrent Mode +## Context -## A chain of unfortunate consequences +### A context-aware bot can remember things, and hold conversations + + - +- Final concept before we can get started with coding is “Context”. + This is what makes the bot truly conversational. + A context-aware bot can remember things, and hold a conversation like humans do. + Consider the following conversation: + + + + --- -### How does React "delay" rendering? +“Hey, are you coming for piano practice tonight?” + +“Sorry, I’ve got dinner plans.” + +“Okay, what about tomorrow night then?” + +“That works!” + + + +- Did you notice what just happened? The first question is straightforward to parse: The time is “tonight”, and the event, “piano practice”. + However, the second question, “Okay, what about tomorrow night then?” doesn’t specify anything about the actual event. + It’s implied that we’re talking about “piano practice”. + This sort of understanding comes naturally to us humans, but bots have to be explicitly programmed so that they understand the context across these sentences. + + --- -## Sources of Slowdown +## Let’s get started! -- Slow component render functions -- Slow state setter or reducer updater functions -- Slow effect functions +### Make a Reddit bot that tells a joke or an interesting fact from the day’s top threads on specific subreddits --- -import DeferredSetState from '../assets/deferred-setstate.svg'; + + + - +## 1. Creating an Agent +- Log in to the DialogFlow dashboard using your Google account. +- Click on “Create Agent” +- Enter the name of the agent, and hit “Create”. -## Deferred setState. + -### Any state setter or dispatch can be delayed. +--- - +import chatbot1 from '../assets/1.png'; - + --- -import InterruptRendering from '../assets/interrupt-rendering.svg'; + + - +## 2. Setting up a “Welcome” Intent +- Go ahead and click on the “Default Welcome Intent”. -## Interrupt Rendering. + + +--- -### Any rendering can be interrupted and can be completed later before committing. +import chatbot21 from '../assets/2_welcome intent.png'; - + - --- - +- Fill in user says as below -## Oops #1 +import chatbot22 from '../assets/2_2.png'; -### Delaying rendering is only safe when no effects are pending on a subtree. + - --- -import HooksAPI from '../assets/hooks-api.svg'; - - - -## The Hooks API. +- Scroll down to the “Responses” tab +- Delete the welcome messages +- Fill in "Responses" as below +- Click "Save" -### This restriction is reflected in the hooks API with encapsulation of effects. +import chatbot23 from '../assets/2_3.png'; - + - --- -import HooksAPITiming from '../assets/hooks-api-timing.svg'; - -## Hooks Timings. +## 3. Creating a Custom Entity -### With each hook we observe a part of the lifecycle and can react. +### Entities are what we extract from user’s input to process further - + --- -import ComponentLifecycle from '../assets/component-lifecycle.svg'; +- Click on the “Entities” tab on left-sidebar and click “Create Entity” +- Name our Entity “content” +- Fill in the following details - +import chatbot31 from '../assets/3_Entity.png'; -## The Lifecycle. + -### The lifecycle we observe has three phases repeating. - - - - --- -import ObservingLifecycleEvents from '../assets/observing-lifecycle-events.svg'; - -## Observing the Lifecycle. - -### Overlapping the lifecycle with hooks, we see a phase that we can't observe... +## 4. Attaching our new Entity to the Intent +### Create a new Intent called “say-content” - + --- -import InterruptedLifecycle from '../assets/interrupted-lifecycle.svg'; +- Add the phrase “Let’s hear a joke” in the “User Says” section - +import chatbot32 from '../assets/3_2.png'; -## Interrupting the Lifecycle. + -### Unfortunately this phase becomes very relevant in Strict and Concurrent Mode. - +--- +- Let’s add a few more inputs + +import chatbot33 from '../assets/3_3.png'; + + - --- +- Let’s add a placeholder text response to see it work +- scroll to the bottom section “Response”, and fill it like so - +import chatbot34 from '../assets/3_4.png'; -## Oops #2 + -### It's not possible to have a subscription or effect track the component lifecycle. - +--- +- Click on “Try It Now” to test your work + +import chatbot35 from '../assets/3_5.png'; + + + --- - + -## Workaround +# 5. A Webhook to process requests +- Write a JS app that fulfills the request by querying the Reddit’s website and returning the appropriate content. -### Resort to useSubscription + - +--- +# code +--- + + + +​```js +'use strict'; +const http = require('https'); +exports.appWebhook = (req, res) => { + let content = req.body.result.parameters['content']; + getContent(content).then((output) => { + res.setHeader('Content-Type', 'application/json'); + res.send(JSON.stringify({ 'speech': output, 'displayText': output })); + }).catch((error) => { + // If there is an error let the user know + res.setHeader('Content-Type', 'application/json'); + res.send(JSON.stringify({ 'speech': error, 'displayText': error })); + }); +}; +function getSubreddit (content) { + if (content == "funny" || content == "joke" || content == "laugh") + return {sub: "jokes", displayText: "joke"}; + else { + return {sub: "todayILearned", displayText: "fact"}; + } +} +function getContent (content) { + let subReddit = getSubreddit(content); + return new Promise((resolve, reject) => { + console.log('API Request: to Reddit'); + http.get(`https://www.reddit.com/r/${subReddit["sub"]}/top.json?sort=top&t=day`, (resp) => { + let data = ''; + resp.on('data', (chunk) => { + data += chunk; + }); + resp.on('end', () => { + let response = JSON.parse(data); + let thread = response["data"]["children"][(Math.floor((Math.random() * 24) + 1))]["data"]; + let output = `Here's a ${subReddit["displayText"]}: ${thread["title"]}`; + if (subReddit['sub'] == "jokes") { + output += " " + thread["selftext"]; + } + output += "\nWhat do you want to hear next, a joke or a fact?" + console.log(output); + resolve(output); + }); + }).on("error", (err) => { + console.log("Error: " + err.message); + reject(error); + }); + }); +} +​``` + --- -import SchedulerPriorities from '../assets/scheduler-priorities.svg'; + - +## Steps -## Scheduler Priorities. +- Follow the 5 steps on "Using the gcloud Command-Line Tool" +- Deploy our function using gcloud: +$ gcloud beta functions deploy appWebHook — stage-bucket BUCKET_NAME — trigger-http +- Go to your Google project’s console and click on Cloud Storage under the Resources section to find the BUCKET_NAME +- After you run the command, make note of the httpsTrigger URL mentioned. -### In Concurrent Mode the time budgets are switched on for time slicing. + - +--- +- On the Dialoglow platform, find the “Fulfilment” tab on the sidebar +- Enable webhooks and paste in the URL - +import chatbot41 from '../assets/4-webhook.png'; + + --- +- Visit the “say_content” Intent page +- Make the “content” parameter mandatory. - +import chatbot42 from '../assets/4_2.png'; -## Oops #3 + -### Seems like React isn't all that predictable anymore. +--- +- Enable the “Use webhook” checkbox in “Fulfilment” +- Click "save" and test it out - +import chatbot43 from '../assets/4_3.png'; + + --- - + -## Workaround +## 6. Adding Context to our Bot -### Synchronous Subscriber and scheduled teardown +- “More” +- “More please” +- “Give me another one” - + +- Even though this works perfectly fine, there’s one more thing I’d like to add quickly. We want the user to be able to say, “More” or “Give me another one” and the bot to be able to understand what this means. + This is done by emitting and absorbing contexts between intents. + -https://github.com/facebook/react/issues/15317#issuecomment-573337558 + --- - + -### "We didn't yet get to what happens when an effect is slow, right?" +## Steps +- scroll up on the “say-content” Intent’s page and find the “Contexts” section +- Set output the “context” for a count of 5 ---- + - +--- -## Tearing +- Create new content -### "When a subtree's renderered state falls behind while another subtree has committed updates already." +import chatbot51 from '../assets/5_add context.png'; - + --- -import Tearing1 from '../assets/bvaughn-tearing-1.png'; -import Tearing2 from '../assets/bvaughn-tearing-2.png'; +import chatbot52 from '../assets/5_2.png'; - - - - + --- + - +## 7. Integrations. -## React's solution? +### Using the Web Demo. +- Go to “Integrations” tab from the sidebar and enable “Web Demo” settings -- When an effect slows down, React can't safely interrupt or delay updates. -- Instead it batches all updates and switches back to blocking mode -- This is called a _deopt_. + +- Dialogflow provides integrations with probably every messaging service in Silicon Valley, and more. + But we’ll use the Web Demo. Go to “Integrations” tab from the sidebar and enable “Web Demo” settings. + Your bot should work like this + - + --- - +import chatbot61 from '../assets/6_Integrations.png'; -## Oops #4 + -### React Concurrent's deopt can be slower than Blocking was before. + +- And that’s it! Your bot is ready to face a real person! Now, you can easily keep adding more subreddits, like news, sports, bodypainting, dankmemes or whatever your hobbies in life are! +Or make it understand a few more parameters.For example, “A joke about Donald Trump”. + - +--- + +## That’s it! Your bot is ready to face a real person! --- - + -## However +## Debugging and Tips -- This may still cause _tearing_ when another update is scheduled during this blocking batch. +- Go to your Google Project and check the Errors and Reporting tab +- Enabled billing - + --- -## Oops #5 +## Review -### A new `useMutableSource` hook is necessary to fix this tearing-during-deopt issue. +- Agent +- Intent +- Entity +- Context +- Connect them --- - +## Any Questions? + +--- -# Concurrent Mode: Oops +## Thank you! - diff --git a/decks/graphql.mdx b/decks/graphql.mdx new file mode 100644 index 00000000..435d97a6 --- /dev/null +++ b/decks/graphql.mdx @@ -0,0 +1,233 @@ +import { CodeSurfer as Surfer } from "code-surfer"; +import { CodeSurferColumns, Step } from "code-surfer"; +import { Appear, Background } from "gatsby-theme-mdx-deck"; +import * as L from "../src/layout"; +import customTheme from "../src/theme"; +import GreetingLoader from "./src/greeting-loader"; + +export const theme = customTheme; + + + +# GraphQL +## by Jeff and Louman + + + +--- + + + +### We will be using CodeSandbox, an in-browser IDE +### 1. Please go to https://codesandbox.io/s/github/namuol5/attendee-repo2 +### 2. Click File -> Fork Sandbox (Will require Github login) + +import codesandbox from '../assets/codesandbox.jpg'; + + + + + + + +If everyone can go to code.sandbox and make this PREMADE template, it should automatically start a development server and you should see a website to the left. + +The website has a bunch of preloaded data for you so what we will do is practice running queries. After I will show you how to make a GraphQL API + + +--- + +# What are API's and why are they important? + + +SN: An API is essentially an endpoint in which we can make a request to retrieve data. + +If you are familiar with API's, I'm sure you've used fetch and axios to retrieve data from API's, The syntax looks something like this and its a lot to type out. + +You get a bunch of data and now its up to you to parse through it. + +But what if there was an easier way? + +What I want to introduce everyone to is GraphQL, a a query language for API's. In essence, graphQL allows us to format our data exactly how we want it, query for specific data, and then get an easy return value. + + +--- + + + +# What is GraphQL? +### GraphQL is a data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. + + + + +In this workshop, we will be showing you how to query data from that API, use mutations, and make use of the information. We'll also be practicing these items through interactive activities. + + +--- + +# Why GraphQL? + +- Allows the client to specify exactly what data to retrieve +- Single endpoint from multiple sources +- Describes data using a type system + +import graphql from '../assets/graphql.jpg'; + + + + +display data dynamically + + +--- + +# GraphQL Demo + + +***switch to screen share*** + +3-5 minutes demoing use of GraphQL +Demo GraphiQL and explorer, querying, mutations + + +--- + + + +# Using GraphiQL +### GraphiQL is the GraphQL IDE. We can access it when the site's dev server is running usually at http://localhost:8000/___graphql (3 underscores) + + + + +Go to your development server and add /__graphql to the end and we should get something like so pop up. + +use GraphiQL to explore and see all the data you have access to +you can interactively construct full queries by clicking through +available fields and inputs +after you construct your query, you simply can copy and paste + + +--- + +# Basic Query + + +*** switch to screen share to demo GraphQL *** + +At its simplest, GraphQL is about asking for specific fields on +objects. Let's start by looking at a very simple query and +the result we get when we run it +query has exactly the same shape as the result. +This is essential to GraphQL, because you always get back what +you expect, and the server knows exactly what fields the client +is asking for. + +In the website, there is a preloaded dataset for you that you can simply query from. The database is called recipe, and in the database there is a collection called movie. We can query through the list of movies and look for title and id. + +And as I told you, the result comes back in a very clean and crisp manner like so. + +However, our database has more than just one movie in it. In fact, if I change the query to... + +We get a bunch of movies! + +Now that we understand a query, a question you might have is, "How do I know what to search for". In fact, when designing graphql, we can choose to format our data exactly the way we want to but that will be covered when talking about making a graphQL api. + +For now, let's take the opportunity to explore the graphQL docs! + +Click the docs arrow right over here! + +We get a bunch of databases like so! These were preloaded into the website built for you, but the collection we really care about is + +If we click on it, we will see all the collections that fall under recipe + +In other words, we can search through all these minicollections. As you can see, there is an s following each type of database and this is just to signify that we want multiple entries, not just one. Let's examine further and click on movies. + +Well, we get to examine all the type entries. Notice the yellow text to teach type entry. This signifies the type of data that will be returned. If we take a look at title, we see the returned datatype is a string. This means it requires no parameters and when querying we can simply stop at title. + +However, if we look at something like imdb + +The returned datatype is Recipe_MovieImdb, which is not a primary datatype. In fact, if we click on it and expand it further + +We see id, rating, votes, and we can stop our query from here. + +Now that you understand how queries ask, you might ask, what if we are looking for something specific in a database? Sure we can search for all the movies, but its kinda a pain to scroll right? Well, no worries. We can query for exactly what we want! + +If we take a look at our movies, it shows us the exact parameters we can look for. + +And now we can look exactly for what we want. Well everyone loves John Wick right so lets try querying by title. + +Here is the returned data. Exactly what we are looking for. We can also use limit and sort as well. + +What will be returned is 5 movies + +Now, let's look and wonder, what if the movie we awnt isn't on there? + +We see GraphQL doesn't return anything + +So how can we write a query? + + + +--- + +# Interactive Activity #1 +# GraphiQL and Queries + + + +now that we've learned to use GraphiQL and how to query, let's practice them + +in the repo we have provided, we have a crossword puzzle + +you will be using the provided clues and GraphiQL to solve the puzzle + + + +--- + +# Mutations + + + +*** screen share to demo mutations *** + +We used queries to fetch data so now we will be using mutations to modify server-side data + +To start, let's go back to GraphiQL + +just like when we were building the query using the explorer, we can use the explorer find the fields +we want to modify and then input values + +fields that can receive values will be in purple + +as we put values into the field, the expression is automatically built + +now we run the mutation + +and we can query the fields to see that the data was modified + + +--- + +# Activity #2 +# Mutations + + + +pending 2nd activity completion + + + +--- + + + +# Conclusion and Recap +- GraphQL is a data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. +- GraphiQL +- Query +- Mutations + + \ No newline at end of file diff --git a/decks/index.mdx b/decks/index.mdx index 01bffa14..607646da 100644 --- a/decks/index.mdx +++ b/decks/index.mdx @@ -1,6 +1,9 @@ + # Hello --- This is built with gatsby-theme-mdx-deck + + diff --git a/mdx-doc.md b/mdx-doc.md new file mode 100644 index 00000000..6918f7e5 --- /dev/null +++ b/mdx-doc.md @@ -0,0 +1,423 @@ +# Creating a Basic Slide Deck + +You only need one mdx file per presentation. Each slide will be separated by a `---` like so: + +```markdown +# Hello + +--- + +This is some text + +--- + +# Goodbye! +``` +mdx-deck supports all standard markdown elements. + +## A Word about Images + +Due to the way mdx-deck is currently set up, you can't use local images the same way you would +in a regular md file. Instead you have to use a JavaScript import. An example: + +```javascript +import i from '../images/image.jpg'; + +``` + +As you can see, we import the image from a folder called `images`, and then used it like a JS +variable in markdown. + +### SVG Images +SVG images in turn are used a little differently from other images. They are treated like components. +For example: + +```javascript +import image from '/path/to/image/image.svg'; + + +``` +As you can see, SVGs are used as empty tags. + +# Imports and Themes +Since mdx files have JavaScript functionality, you can import modules and components in the same +way as vanilla JS: + +```javascript +import {component} from '\path\to\component' + +# Using component + Some cool stuff! +``` +This is also the same way that you would import a theme. The only difference is that you would +`export` the theme at the very start of the document: + +```javascript +export const theme = importedTheme +``` + +There are multiple built-in themes, but you will primarily be using custom themes. Here's an +example of a custom theme file: + +```javascript +// Example theme.js +export default { + fonts: { + body: 'Roboto, sans-serif', + monospace: '"Roboto Mono", monospace', + }, + colors: { + text: 'white', + background: 'black', + primary: 'blue', + }, +} +``` +Check mdx-deck's [Theming Docs](https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md "Theming") for more info about themes! + +# Layouts + +You can create custom layouts to format your content in interesting ways. For example, here is a layout for displaying a title in a column format: + +```javascript +export const Column = ({ sx, children }) => ( +
+ {children} +
+); +``` +Layouts are written in JSX, which you could treat as a templating language with the full power of JavaScript. +As you can see, the above code is very similar to CSS. + +If you wanted to use Column, you would do it like so: + +```javascript +import Column as column from "/path/to/layout/file"; + + + +# A Title + + +``` +Sometimes you want to change the variables of a layout for a particular slide. This can be done by passing in +the appropriate value for a parameter. In the case of `Column` above, that could look something like this: + +```javascript + + +Some text. + + +``` +Here, we changed the default minimum height of the text. + +# Components +As stated before, you can import all sorts of Components into your mdx deck. There a quite a few +built-in ones you might find useful. These do not need to be imported. Some include: + +## Head + +Allows you to put in metadata information for the document. For example, if you wanted to put in info +about a Twitter slide card: + +```jsx + + My Presentation + + + + + + +``` + +## Notes + +These allow you to have speaker notes within your presentation. They can be used as follows: + +```jsx + + +- Only visible in presenter mode +- Markdown syntax can be used with empty lines around the content + + +``` + +## Header/Footer + +For when you want a persistent header/footer in your presentation. An example of a header: + +```jsx +
+ +Put a logo, handle, or something else here... + +
+``` +It is the exact same syntax for a Footer. + +## Steps +This is useful when you have multiple concepts/topics you wnat to go through step-by-step +in one slide. This is a generic tool, and so doesn't have to be used just for explaining code. +An example is shown below: + +```jsx + + +- One +- Two +- Three +- Four + + +``` +Press the arrow keys to step through each element. + +# Code Surfer +While Code Surfer is technically a component, it deserves its own section simply because of how rich its +features are. It is an addon that allows you to present code snippets in a slick, fashionable way. In order +to use it, you first need to be install it as part of the dependencies for your slide deck. Then, you would +import it as you would any other component. Here are some of its features: + +## Adding Code +To just display code using Code Surfer, just use its tags around the code you want to display. For example: + + +```js + + +​```js +console.log(1); +console.log(2); +console.log(3); +​``` + +``` +The empty lines between the tags and the code content are required. Additionally, make sure you declare +what language the code is in, like above. This will ensure proper syntax highlighting. Code Surfer supports every language supported by PrismJS, so feel free to import prism as a dependency if you need syntax highlighting for a language not already provided. + +## Focus +This allows you to highlight or emphasize certain lines of code. All you have to do is specify the code lines you want emphasized and Code Surfer will take care of the rest. This includes fading out other code, transitions, animations, and the like. Below is an example for Focus: +```js + + +​```js 1:2,3[8:10] +console.log(1); +console.log(2); +console.log(3); +​``` + +``` +The new syntax is shown immediately after the language declaration in the code. In plain English, the code says this: "Code Surfer, I want you to highlight the all of lines 1 and 2, as well as columns 8 to 10 of line 3." The first part is pretty simple, all of line 1 and line 2 will be highlighted. But what are columns? Columns are just another way of stating characters in Code Surfer syntax. In other words, the above code will highlight the 8-10th characters in line 3. This is useful for when you want to emphasize specific words in a line of code, but not the entire line itself. + +## Steps +This is the equivalent of the Steps feature in base MDX Deck. By placing multiple code blocks, you can step through multiple code snippets in a single slide. Note that you can freely change the focus parameters in each code block. Like mentioned before, Code Surfer handles all of the transitions, animations, and other effects automatically. Here is an example of using steps: + +```js + + +​```js +console.log(1); +console.log(2); +console.log(3); +​``` +​```js 1 +console.log(1); +console.log(2); +console.log(3); +​``` +​```js +console.log(1); +console.log(2); +console.log(3); +console.log(4); +console.log(5); +​``` + + +``` + +## Title and Subtitle +Self-explanatory. This allows you put a title and subtitle for each slide. An example: + +```js + + +​```js 1 title="Title" subtitle="Look at the first line" +console.log(1); +console.log(2); +console.log(3); +​``` +​```js 2 title="Title" subtitle="and now the second" +console.log(1); +console.log(2); +console.log(3); +​``` + +``` +You can also have titles and subtitles for Steps, and they can each be different! + +## Themes +Themes work the exact same way as they do in base MDX Deck, with one exception. You can have separate themes for each slide if you would like. An example would be like so: + +```js +import { CodeSurfer } from "code-surfer" +import { nightOwl } from "@code-surfer/themes" + + + +​```js +console.log(1); +console.log(2); +console.log(3); +​``` + + +``` +Also just like base MDX Deck, you can write your own custom themes! + +## Columns +This is when you want to display more than one code snippet at a time. An example: + +```js +import { CodeSurferColumns, Step } from "code-surfer" + + + + + +​```js +console.log(1); +console.log(2); +​``` + +​```js +console.log("a"); +console.log("b"); +​``` + + + + + +​```js 2 +console.log(1); +console.log(2); +​``` + +​```js 2 +console.log("a"); +console.log("b"); +​``` + + + +``` +Side note: Just like with code blocks, you can have a theme for each column: + +```js +. +``` +Additionally, the columns don't all have to be the same size. For example: + +```js +. +``` +Here, the second column is 3 times the size of the first. + +One last thing about columns. You don't have to use them exclusively for displaying code, you can also just place regular markdown or even other components between them! + +## Importing Code +You don't have to manually type out code you want to display. If you have it in a file somewhere, you could simply link that file like so: + +```js +import { CodeSurfer } from "code-surfer" + + + +​```js 5:10 file=./my-code.js +​``` + +​```js file=./my-other-code.js +​``` + + +``` +Here, we linked to two files in the same directory as our deck. Make sure to put the proper pathname for your files when importing code. + +## Line Numbers +If you want to show the line numbers for code to display, you can simply insert the `showNumbers` flag in your code snippet. An example: + +```js +import { CodeSurfer } from "code-surfer" + + + +​```js showNumbers +console.log(1); +console.log(2); +console.log(3); +​``` + +​```js +console.log(1); +console.log(2); +console.log(4); +​``` + + +``` + +## Diffs +Sometimes, you could be presenting the same code across multiple slides. In this case, it would be annoying to copy and past the same code blocks in every slide, but you don't have to! By using `diff`, you specify that you want the same code to be displayed but with some slight differences to the presentation, like focusing on different lines, or new titles and subtitles. Here is an example of `diff` being used: + +```js +import { CodeSurfer } from "code-surfer" + + + +​```js +console.log(1); +console.log(2); +console.log(3); +​``` + +​```diff 1 subtitle="log 1" +​``` + +​```diff 2 subtitle="log 2" +​``` + +​```diff 3 subtitle="log 3" +​``` + + +``` +Here, we display the same code in all the code blocks, but each `diff` specifies a particular line to highlight and subtitle to display. + +## A Full Example +To see an example that uses all of these features, see this [slide deck](https://codesurfer.pomb.us/full/ "Code Surfer"), as well as it's [source code](https://codesurfer.pomb.us/full/ "Code Surfer Deck"). + +# Deploying a Presentation + +To run mdx-deck, add a run script to your package.json file like this : + +``` +"scripts": { + "start": "mdx-deck deck.mdx" +} +``` + +Then run `npm start` in your command terminal. \ No newline at end of file diff --git a/misc/graphql-readme.md b/misc/graphql-readme.md new file mode 100644 index 00000000..c7c31fbc --- /dev/null +++ b/misc/graphql-readme.md @@ -0,0 +1,25 @@ +# github_id + +1 + +# name + +GraphQL Workshop + +# description + +Learn to use GraphQL to query and manipulate data and APIs. + +# summary + +Students will learn to use GraphQL to query and manipulate data and APIs through this presentation and accompanying files. + +# difficulty + +Easy + +# image + + + +# folder_path diff --git a/src/chatbotcode.js b/src/chatbotcode.js new file mode 100644 index 00000000..e73ec81f --- /dev/null +++ b/src/chatbotcode.js @@ -0,0 +1,46 @@ +'use strict'; +const http = require('https'); +exports.appWebhook = (req, res) => { + let content = req.body.result.parameters['content']; + getContent(content).then((output) => { + res.setHeader('Content-Type', 'application/json'); + res.send(JSON.stringify({ 'speech': output, 'displayText': output })); + }).catch((error) => { + // If there is an error let the user know + res.setHeader('Content-Type', 'application/json'); + res.send(JSON.stringify({ 'speech': error, 'displayText': error })); + }); +}; +function getSubreddit (content) { + if (content == "funny" || content == "joke" || content == "laugh") + return {sub: "jokes", displayText: "joke"}; + else { + return {sub: "todayILearned", displayText: "fact"}; + } +} +function getContent (content) { + let subReddit = getSubreddit(content); + return new Promise((resolve, reject) => { + console.log('API Request: to Reddit'); + http.get(`https://www.reddit.com/r/${subReddit["sub"]}/top.json?sort=top&t=day`, (resp) => { + let data = ''; + resp.on('data', (chunk) => { + data += chunk; + }); + resp.on('end', () => { + let response = JSON.parse(data); + let thread = response["data"]["children"][(Math.floor((Math.random() * 24) + 1))]["data"]; + let output = `Here's a ${subReddit["displayText"]}: ${thread["title"]}`; + if (subReddit['sub'] == "jokes") { + output += " " + thread["selftext"]; + } + output += "\nWhat do you want to hear next, a joke or a fact?" + console.log(output); + resolve(output); + }); + }).on("error", (err) => { + console.log("Error: " + err.message); + reject(error); + }); + }); +} \ No newline at end of file