{"id":14155788,"url":"https://github.com/orta/playground-slides","last_synced_at":"2025-04-15T05:56:55.087Z","repository":{"id":38461228,"uuid":"237659532","full_name":"orta/playground-slides","owner":"orta","description":"Make presentations in the TypeScript playground","archived":false,"fork":false,"pushed_at":"2023-05-07T22:05:11.000Z","size":879,"stargazers_count":41,"open_issues_count":11,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T05:56:48.097Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.typescriptlang.org/v2/en/play","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-01T18:35:22.000Z","updated_at":"2025-01-03T00:05:39.000Z","dependencies_parsed_at":"2024-08-17T08:16:46.315Z","dependency_job_id":null,"html_url":"https://github.com/orta/playground-slides","commit_stats":{"total_commits":18,"total_committers":4,"mean_commits":4.5,"dds":"0.33333333333333337","last_synced_commit":"6916100ebe227ae3886b550eb20f369396414d6a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orta%2Fplayground-slides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orta%2Fplayground-slides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orta%2Fplayground-slides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orta%2Fplayground-slides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orta","download_url":"https://codeload.github.com/orta/playground-slides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016320,"owners_count":21198832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-17T08:05:00.078Z","updated_at":"2025-04-15T05:56:55.068Z","avatar_url":"https://github.com/orta.png","language":"CSS","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"## TypeScript Playground Present\n\nA way to present your TypeScript talk in style!\n\nThis plugin adds a copy of [Reveal.js](https://github.com/hakimel/reveal.js) above the playground, slides are created\nusing Markdown (via [marked](https://github.com/markedjs/marked)) and have the ability to set the text in the playground.\n\n\u003cimg src=\"./img/config.png\"\u003e\n\n\u003cimg src=\"./img/slides.png\"\u003e\n\n\u003cimg src=\"./img/slides-after.png\"\u003e\n\nWith markdown looking like:\n\n````md\n\u003cimg src=\"https://camo.githubusercontent.com/8a8121d9e0fc2678098851e0ef63a36f5c8b199e/68747470733a2f2f7365637572652e6d65657475707374617469632e636f6d2f70686f746f732f6576656e742f612f312f642f612f3630305f3438303532313433342e6a706567\"\u003e\n\n# TSNYC Jan 2020\n\n---\n\n## What is TypeScript?\n\nTypeScript extends JavaScript by adding types.\n\nTypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.\n\nAny browser, any OS, anywhere JavaScript runs. Entirely Open Source.\n\n---\n\n## `import type`\n\n### Why?\n\n\u003e ### Guaranteed Side-effect free syntax\n\u003e\n\u003e Tools like Babel, which don’t type-check can be certain with 100% accuracy\u2028whether to remove the import.\n\n\u003cPlayground\u003e\n// Look at the JS, this isn't included in the output\nimport {DangerDSLType} from \"danger\"\n\ndeclare const myDSL: DangerDSLType\n\nmyDSL.bitbucket_cloud\n\n// On the other hand, this one is...\nimport {danger} from \"danger\"\ndanger.git\n\n// But why?\n\n// TS keeps track of whether an import is a \"JS\" value\n// or a TypeScript type.\nimport {DangerDSLJSONType, message} from \"danger\"\nmessage\n\n// Babel cannot do this!\n\n// So now Babel knows that it can always skip these\n// 'import type' statements\nimport type {DangerUtilsDSL} from \"danger\"\n\n// Because they can't be used with \"JS\" values:\nimport type {markdown} from \"danger\"\n\u003c/Playground\u003e\n\n---\n````\n\nThis markdown would turn into 2 slides, where the showing the second would change the Playground's code.\n\n## Examples\n\n- [TSNY Jan 2020](./examples/tsnyc-jan-2020.md) - [gist](https://gist.github.com/orta/d7dbd4cdb8d1f99c52871fb15db620bc)\n  \u003cbr\u003e_Note: the `\u003cplayground\u003e` element is not visible, so [view the source](https://gist.githubusercontent.com/orta/d7dbd4cdb8d1f99c52871fb15db620bc/raw/33eff5573a2a592d7be4364a791d6f0e1d557b72/index.md) please._\n\n## Useful info for making slides\n\n1. Get started by making a gist: https://gist.github.com\n2. Make an `index.md` and add some example markdown\n3. Split your slides with `---`\n4. Save your gist, then tell the playground to load that gist\n\n#### Playground support\n\nYou can change the playground support by putting your code inside the `\u003cplayground\u003e` HTML element in the slides. This lets you use\nmarkdown code blocks to show the code in the slides:\n\n````md\n# Network Requests\n\nThere are a few ways to get info from an API\n\n---\n\n# What is `await`?\n\n```ts\nconst response = await fetch(\"mysite.com/api/dogs\")\n```\n\n\u003cplayground\u003e\nimport fetch from \"node-fetch\"\n\nconst start = await () =\u003e {\n   const response = await fetch(\"https://mysite.com/api/dogs)\n   ...\n}\n\u003c/playground\u003e\n\n---\n\n# How do Promises work?\n````\n\n#### Build In Slides\n\nReveal.js supports building out sections in a slide [using fragments]([https://github.com/hakimel/reveal.js#element-attributes](https://revealjs.com/fragments/))\n\n```md\n# Anyone can contribute\n\nIt takes a village to make a big OSS project\n---\n# Extra thanks to\n\n- Orta Therox \u003c!-- .element: class=\"fragment\" data-fragment-index=\"1\" --\u003e\n- Danger McShane \u003c!-- .element: class=\"fragment\" data-fragment-index=\"2\" --\u003e\n\n---\n```\n\n## TODO\n\n- Make it pretty\n- Add a back to slides button\n- Add a down to code button when playground has changed\n- Are there more things we can hook into than just code?\n\n## Contributing\n\nYou can use `yarn start` to set up both a copy of rollup to generate the JS, and serve to host it\n\n```sh\nyarn start\n```\n\nThen set up the TypeScript playground to get a plugin from from `http://localhost:5000/index.js`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forta%2Fplayground-slides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forta%2Fplayground-slides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forta%2Fplayground-slides/lists"}