diff --git a/scrape/main.ts b/scrape/main.ts new file mode 100644 index 0000000..f2c2c63 --- /dev/null +++ b/scrape/main.ts @@ -0,0 +1,65 @@ +import { DOMParser } from "jsr:@b-fuze/deno-dom"; +import { wrapFetch } from "jsr:@jd1378/another-cookiejar@^5.0.7"; +import * as cli from "jsr:@std/cli"; + +const flags = cli.parseArgs(Deno.args, { + string: ["email", "password", "search"], +}); +const fetch = wrapFetch(); + +const email = flags.email || Deno.env.get("CBTW_EMAIL") || + prompt("Please enter your email:") || ""; +const password = flags.password || Deno.env.get("CBTW_PASSWORD") || + cli.promptSecret("Please enter your password:") || ""; + +export async function mitarbeiterangebote() { + await fetch( + "https://cbtw.mitarbeiterangebote.de/login", + { + method: "POST", + body: new URLSearchParams({ + "loginData[email]": email, + "loginData[password]": password, + }), + }, + ); + await fetch("https://cbtw.mitarbeiterangebote.de/", { + method: "POST", + body: new URLSearchParams({ + "platformData[disclaimerNewsletter]": "0", + "disclaimerAccept": "1", + }), + }); + + const res = await fetch("https://cbtw.mitarbeiterangebote.de/overview/23"); + const html = await res.text(); + const document = new DOMParser().parseFromString(html, "text/html"); + + return Array.from(document.querySelectorAll(".cbg3-offer-list-item--content")) + .map( + (element) => { + const title = element.querySelector("a[title]") + ?.getAttribute("title")?.replace("Zum Angebot: ", "") || ""; + const description = element.querySelector( + "p.cbg3-list-item--copy", + )?.textContent?.trim().substring(0, 50) + "..." || ""; + const discount = element.querySelector( + "div.cbg3-list-item--discount p", + )?.textContent?.trim() || ""; + + return { title, description, discount }; + }, + ).filter((offer, index, self) => + index === self.findIndex((o) => o.title === offer.title) + ).sort((a, b) => a.title.localeCompare(b.title)); +} + +const offers = await mitarbeiterangebote(); +if (flags.search) { + const filtered = offers.filter((offer) => + offer.title.toLowerCase().includes(flags.search!.toLowerCase()) + ); + console.table(filtered); +} else { + console.table(offers); +} diff --git a/slidev/deno.lock b/slidev/deno.lock index eeacdac..30c25cd 100644 --- a/slidev/deno.lock +++ b/slidev/deno.lock @@ -1,9 +1,10 @@ { "version": "5", "specifiers": { - "npm:@slidev/cli@^52.1.0": "52.1.0_typescript@5.9.2_vite@7.0.6__jiti@2.5.1__yaml@2.8.0__picomatch@4.0.3_vue@3.5.18__typescript@5.9.2_markdown-it@14.1.0_shiki@3.9.1_jiti@2.5.1_yaml@2.8.0", + "npm:@slidev/cli@^52.1.0": "52.1.0_typescript@5.9.2_vite@7.0.6__jiti@2.5.1__yaml@2.8.0__picomatch@4.0.3_vue@3.5.18__typescript@5.9.2_markdown-it@14.1.0_shiki@3.9.1_jiti@2.5.1_yaml@2.8.0_playwright-chromium@1.54.2", "npm:@slidev/theme-default@latest": "0.25.0", "npm:@slidev/theme-seriph@latest": "0.25.0", + "npm:playwright-chromium@^1.54.2": "1.54.2", "npm:vue@^3.5.18": "3.5.18_typescript@5.9.2" }, "npm": { @@ -831,6 +832,86 @@ ], "bin": true }, + "@slidev/cli@52.1.0_typescript@5.9.2_vite@7.0.6__jiti@2.5.1__yaml@2.8.0__picomatch@4.0.3_vue@3.5.18__typescript@5.9.2_markdown-it@14.1.0_shiki@3.9.1_jiti@2.5.1_yaml@2.8.0_playwright-chromium@1.54.2": { + "integrity": "sha512-aN15gXhUWc9UC6CBXUbaWIeOYE0mvU4DuOjp0EuBroqD8jpSDKjQKquv0kIEs0JsIymgOpfbOP9Ha1xuZN0Eew==", + "dependencies": [ + "@antfu/ni", + "@antfu/utils@9.2.0", + "@iconify-json/carbon", + "@iconify-json/ph", + "@iconify-json/svg-spinners", + "@lillallol/outline-pdf", + "@shikijs/markdown-it", + "@shikijs/twoslash", + "@shikijs/vitepress-twoslash", + "@slidev/client", + "@slidev/parser", + "@slidev/types@52.1.0_vite@7.0.6__jiti@2.5.1__yaml@2.8.0__picomatch@4.0.3_vue@3.5.18__typescript@5.9.2_typescript@5.9.2_jiti@2.5.1_yaml@2.8.0", + "@unocss/extractor-mdc", + "@unocss/reset", + "@vitejs/plugin-vue", + "@vitejs/plugin-vue-jsx", + "ansis", + "chokidar@4.0.3", + "cli-progress", + "connect", + "debug@4.4.1", + "fast-deep-equal", + "fast-glob", + "get-port-please", + "global-directory", + "htmlparser2", + "is-installed-globally", + "jiti", + "katex", + "local-pkg", + "lz-string", + "magic-string", + "magic-string-stack", + "markdown-it", + "markdown-it-footnote", + "markdown-it-mdc", + "mlly", + "monaco-editor", + "open", + "pdf-lib", + "picomatch@4.0.3", + "plantuml-encoder", + "playwright-chromium", + "postcss-nested", + "pptxgenjs", + "prompts", + "public-ip", + "resolve-from", + "resolve-global", + "semver@7.7.2", + "shiki", + "shiki-magic-move", + "sirv", + "source-map-js", + "typescript", + "unhead", + "unocss", + "unplugin-icons", + "unplugin-vue-components", + "unplugin-vue-markdown", + "untun", + "uqr", + "vite", + "vite-plugin-inspect", + "vite-plugin-remote-assets", + "vite-plugin-static-copy", + "vite-plugin-vue-server-ref", + "vitefu", + "vue", + "yaml", + "yargs" + ], + "optionalPeers": [ + "playwright-chromium" + ], + "bin": true + }, "@slidev/client@52.1.0_typescript@5.9.2_vue@3.5.18__typescript@5.9.2_shiki@3.9.1_vite@7.0.6__jiti@2.5.1__yaml@2.8.0__picomatch@4.0.3_jiti@2.5.1_yaml@2.8.0": { "integrity": "sha512-L2NLU4U4v+DTNSeqCY2uOmdokof0g4bcClTWlUjTiTuGl5uYetuIx2Wx+ZQyUnw+x1q1llfcBIbb3a5y+6IhHA==", "dependencies": [ @@ -3284,6 +3365,18 @@ "plantuml-encoder@1.4.0": { "integrity": "sha512-sxMwpDw/ySY1WB2CE3+IdMuEcWibJ72DDOsXLkSmEaSzwEUaYBT6DWgOfBiHGCux4q433X6+OEFWjlVqp7gL6g==" }, + "playwright-chromium@1.54.2": { + "integrity": "sha512-8ytI6xNjB//5zWSZUvOvn+N9xkXw6GXiDuBePOejcDiyUmzl5R5rvAU7MTl6h633sS3JVmlCS10EhYCt4Crzsg==", + "dependencies": [ + "playwright-core" + ], + "scripts": true, + "bin": true + }, + "playwright-core@1.54.2": { + "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==", + "bin": true + }, "points-on-curve@0.2.0": { "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==" }, @@ -4138,6 +4231,7 @@ "npm:@slidev/cli@^52.1.0", "npm:@slidev/theme-default@latest", "npm:@slidev/theme-seriph@latest", + "npm:playwright-chromium@^1.54.2", "npm:vue@^3.5.18" ] } diff --git a/slidev/layouts/2x2-grid-header.vue b/slidev/layouts/2x2-grid-header.vue new file mode 100644 index 0000000..0f3df45 --- /dev/null +++ b/slidev/layouts/2x2-grid-header.vue @@ -0,0 +1,37 @@ + + + diff --git a/slidev/package.json b/slidev/package.json index 06bcf5f..6f66874 100644 --- a/slidev/package.json +++ b/slidev/package.json @@ -12,5 +12,8 @@ "@slidev/theme-default": "latest", "@slidev/theme-seriph": "latest", "vue": "^3.5.18" + }, + "devDependencies": { + "playwright-chromium": "^1.54.2" } } \ No newline at end of file diff --git a/slidev/slides.md b/slidev/slides.md index 2925be3..3624b00 100644 --- a/slidev/slides.md +++ b/slidev/slides.md @@ -5,12 +5,14 @@ theme: seriph # like them? see https://unsplash.com/collections/94734566/slidev background: https://cover.sli.dev # some information about your slides (markdown enabled) -title: Welcome to Slidev +title: Deno info: | - ## Slidev Starter Template - Presentation slides for developers. + ## Deno + Deno is the open-source JavaScript runtime for the modern web. - Learn more at [Sli.dev](https://sli.dev) + Built on web standards with zero-config TypeScript, unmatched security, and a complete built-in toolchain. + + Learn more at [Deno](https://deno.com) # apply unocss classes to the current slide class: text-center # https://sli.dev/features/drawing @@ -28,19 +30,15 @@ seoMeta: # ogImage: https://cover.sli.dev --- -# Welcome to Slidev +# Deno -Presentation slides for developers - -
- Press Space for next page -
+Uncomplicate JavaScript
- +
@@ -50,592 +48,120 @@ The last comment block of each slide will be treated as slide notes. It will be --> --- -transition: fade-out +layout: center +class: "text-center" --- - -# What is Slidev? - -Slidev is a slides maker and presenter designed for developers, consist of the following features - -- ๐Ÿ“ **Text-based** - focus on the content with Markdown, and then style them later -- ๐ŸŽจ **Themable** - themes can be shared and re-used as npm packages -- ๐Ÿง‘โ€๐Ÿ’ป **Developer Friendly** - code highlighting, live coding with autocompletion -- ๐Ÿคน **Interactive** - embed Vue components to enhance your expressions -- ๐ŸŽฅ **Recording** - built-in recording and camera view -- ๐Ÿ“ค **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA -- ๐Ÿ›  **Hackable** - virtually anything that's possible on a webpage is possible in Slidev -
-
- -Read more about [Why Slidev?](https://sli.dev/guide/why) - - - - - - - ---- -transition: slide-up -level: 2 ---- - -# Navigation - -Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/ui#navigation-bar) - -## Keyboard Shortcuts - -| | | -| --------------------------------------------------- | --------------------------- | -| right / space | next animation or slide | -| left / shiftspace | previous animation or slide | -| up | previous slide | -| down | next slide | - - - -

Here!

- ---- -layout: two-cols -layoutClass: gap-16 ---- - -# Table of contents - -You can use the `Toc` component to generate a table of contents for your slides: - -```html - -``` - -The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter. - -::right:: - - - ---- -layout: image-right -image: https://cover.sli.dev ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover! - -```ts [filename-example.ts] {all|4|6|6-7|9|all} twoslash -// TwoSlash enables TypeScript hover information -// and errors in markdown code blocks -// More at https://shiki.style/packages/twoslash -import { computed, ref } from 'vue' - -const count = ref(0) -const doubled = computed(() => count.value * 2) - -doubled.value = 2 -``` - - - - -<<< @/snippets/external.ts#snippet - - - -[Learn more](https://sli.dev/features/line-highlighting) - - - - - - ---- -level: 2 ---- - -# Shiki Magic Move - -Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets. - -Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. For example: - -````md magic-move {lines: true} -```ts {*|2|*} -// step 1 -const author = reactive({ - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] -}) -``` - -```ts {*|1-2|3-4|3-4,8} -// step 2 -export default { - data() { - return { - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - } - } -} -``` - -```ts -// step 3 -export default { - data: () => ({ - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - }) -} -``` - -Non-code blocks are ignored. - -```vue - - -``` -```` - ---- - -# Components - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. - -```html - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - -``` - - - -
-
- - - ---- -class: px-20 ---- - -# Themes - -Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and -check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery). - ---- - -# Clicks Animations - -You can add `v-click` to elements to add a click animation. - -
- -This shows up when you click the slide: - -```html -
This shows up when you click the slide.
-``` - -
- -
+# What is Deno? - -The v-mark directive -also allows you to add -inline marks -, powered by [Rough Notation](https://roughnotation.com/): - -```html -inline markers -``` - +Deno is the open-source JavaScript runtime for the modern web. +Built on web standards with zero-config TypeScript, unmatched security, and a complete built-in toolchain. -
- -[Learn more](https://sli.dev/guide/animations#click-animation) - -
- +--- +layout: 2x2-grid-header --- -# Motions +# Features -Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive. +::topleft:: +**TypeScript** - native support for ts, tsx, jsx -```html -
- Slidev -
-``` +::topright:: +- **web standards** - Deno prioritizes web standard APIs, maximizing code reuse between browser and server -
-
- - - -
- -
- Slidev -
-
- - - - -
- -[Learn more](https://sli.dev/guide/animations.html#motion) - -
- ---- - -# LaTeX - -LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/). - -
- -Inline $\sqrt{3x-1}+(1+x)^2$ - -Block -$$ {1|3|all} -\begin{aligned} -\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ -\nabla \cdot \vec{B} &= 0 \\ -\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\ -\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t} -\end{aligned} -$$ - -[Learn more](https://sli.dev/features/latex) - ---- - -# Diagrams - -You can create diagrams / graphs from textual descriptions, directly in your Markdown. - -
- -```mermaid {scale: 0.5, alt: 'A simple sequence diagram'} -sequenceDiagram - Alice->John: Hello John, how are you? - Note over Alice,John: A typical interaction -``` - -```mermaid {theme: 'neutral', scale: 0.8} -graph TD -B[Text] --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] -``` - -```mermaid -mindmap - root((mindmap)) - Origins - Long history - ::icon(fa fa-book) - Popularisation - British popular psychology author Tony Buzan - Research - On effectiveness
and features - On Automatic creation - Uses - Creative techniques - Strategic planning - Argument mapping - Tools - Pen and paper - Mermaid -``` - -```plantuml {scale: 0.7} -@startuml - -package "Some Group" { - HTTP - [First Component] - [Another Component] -} - -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} - -cloud { - [Example 1] -} - -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} - -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] - -@enduml -``` - -
- -Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml) - ---- -foo: bar -dragPos: - square: 691,32,167,_,-16 ---- - -# Draggable Elements - -Double-click on the draggable elements to edit their positions. +::bottomleft:: +- **Code linter** - build in code linter +::bottomright:: +- **Code formatter** - based on dprint. Beautifies JS, TS, JSON, and Markdown +- **Test runner** - test runner and assertion libraries as a part of the runtime and standard library +- **Standalone executables** - create standalone executables. It even supports cross-compiling +- **Secure by default** - Deno has no file, network, or environment access unless explicitly enabled +

-###### Directive Usage - -```md - -``` - -
- -###### Component Usage - -```md - -
- Use the `v-drag` component to have a draggable container! - -``` - - -
- Double-click me! -
- - - - -###### Draggable Arrow - -```md - -``` - - - ---- -src: ./pages/imported-slides.md -hide: false ---- +Read more about [Deno](https://docs.deno.com/runtime/) --- -# Monaco Editor +# Install Deno -Slidev provides built-in Monaco Editor support. +## macOS / Linux -Add `{monaco}` to the code block to turn it into an editor: - -```ts {monaco} -import { ref } from 'vue' -import { emptyArray } from './external' - -const arr = ref(emptyArray(10)) +```bash +curl -fsSL https://deno.land/install.sh | sh ``` -Use `{monaco-run}` to create an editor that can execute the code directly in the slide: +## Windows -```ts {monaco-run} -import { version } from 'vue' -import { emptyArray, sayHello } from './external' - -sayHello() -console.log(`vue ${version}`) -console.log(emptyArray(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1])) +```bash +irm https://deno.land/install.ps1 | iex ``` +--- + +# Docker + +| Base | Docker Tag | +|--------------|--------------------------------| +| Alpine Linux | denoland/deno:alpine | +| Debian | denoland/deno:debian (default) | +| Distroless | denoland/deno:distroless | +| Ubuntu | denoland/deno:ubuntu | +| Binary only | denoland/deno:bin | --- layout: center -class: text-center +class: "text-center" --- -# Learn More +# Deno Toolchain -[Documentation](https://sli.dev) ยท [GitHub](https://github.com/slidevjs/slidev) ยท [Showcases](https://sli.dev/resources/showcases) +--- + +Creating an empty project similiar to `npm init` + +```bash +deno init my-deno-project +``` + +Creates three default files + +```md {0|1|2|3} +main.ts +main_test.ts +deno.json +``` + + + +--- + +## Running a project + +`deno run main.ts` + +## Using npm modules + +```ts +import express from "npm:express"; + +const app = express(); + +app.get("/", function (req, res) { + res.send("Hello World"); +}); + +app.listen(3000); +``` + +--- -