docs(en): merging all conflicts

Author: docschina-bot

.vitepress/config.ts

@@ -2,7 +2,7 @@ import type { DefaultTheme } from 'vitepress'
 import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
-const CURRENT_VERSION = '0.48.0-beta.2'
+const CURRENT_VERSION = '0.48.0-beta.22'
 
 const Guide: DefaultTheme.NavItemWithLink[] = [
   {

.vitepress/theme/components/LandingPage.vue

@@ -9,8 +9,13 @@
         Presentation Slides for Developers
       </h2>
       <div flex="~ gap-3 justify-center" p4 mt-5>
+<<<<<<< HEAD
         <a href="/guide/" class="bg-$vp-c-brand-3 text-white px5 py3 text-xl font-bold rounded-xl hover:bg-$vp-c-brand-1">Ξεκινήστε</a>
         <a href="/guide/why" class="bg-$vp-c-gray-1 text-white px5 py3 text-xl font-bold rounded-2xl hover:bg-$vp-c-brand-1">Γιατί</a>
+=======
+        <a href="/guide/" class="bg-$vp-c-brand-3 text-white! no-underline! px5 py3 text-xl font-bold rounded-xl hover:bg-$vp-c-brand-1">Get Started</a>
+        <a href="/guide/why" class="bg-$vp-c-gray-1 text-white! no-underline! px5 py3 text-xl font-bold rounded-2xl hover:bg-$vp-c-brand-1">Why</a>
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
       </div>
     </div>
     <div flex>

custom/config-monaco.md

@@ -19,7 +19,7 @@ export default defineMonacoSetup(async (monaco) => {
 Για να χρησιμοποιήσετε το Monaco στις διαφάνειές σας, απλά προσθέστε `{monaco}` στα αποσπάσματα του κώδικά σας:
 
 ~~~md
-```js
+```js {monaco} // [!code ++]
 const count = ref(1)
 const plusOne = computed(() => count.value + 1)
 
@@ -29,6 +29,7 @@ plusOne.value++ // error
 ```
 ~~~
 
+<<<<<<< HEAD
 Σε
 
 ~~~md
@@ -53,6 +54,9 @@ monaco: true # προεπιλεγμένο "dev"
 ```
 
 ## Αυτόματη Εγκατάσταση Τύπων
+=======
+## TypeScript Types
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 
 Όταν χρησιμοποιείτε TypeScript με το Monaco, οι τύποι εξαρτήσεων θα εγκατασταθούν αυτόματα στο client-side.
 
@@ -65,10 +69,39 @@ const counter = ref(0)
 ```
 ~~~
 
+<<<<<<< HEAD
 Στο παραπάνω παράδειγμα, βεβαιωθείτε ότι τα `vue` και `@vueuse/core` είναι εγκατεστημένα τοπικά ως dependencies / devDependencies, το Slidev θα αναλάβει τα υπόλοιπα, ώστε οι τύποι να λειτουργούν αυτόματα για τον συντάκτη!
+=======
+In the example above, make sure `vue` and `@vueuse/core` are installed locally as dependencies / devDependencies, Slidev will handle the rest to get the types working for the editor automatically. When deploy as SPA, those types will also be bundled for static hosting.
+
+### Additional Types
+
+Slidev will scan all the monaco codeblocks in your slides and import the types for those used libraries for you. In case it missed some, you can explicitly specify extra packages to import the types for:
+
+```md
+---
+monacoTypesAdditionalPackages:
+  - lodash-es
+  - foo
+---
+```
+
+### Auto Type Acquisition
+
+You can optionally switch to load types from CDN by setting the following headmatter:
+
+```md
+---
+monacoTypesSource: ata
+---
+```
+
+This feature is powered by [`@typescript/ata`](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata) and runs completely on the client-side.
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 
 ## Ρύθμιση Θεμάτων
 
+<<<<<<< HEAD
 Το θέμα ελέγχεται από το Slidev με βάση το φωτεινό/σκοτεινό θέμα. Αν θέλετε να το προσαρμόσετε, μπορείτε να περάσετε το id του θέματος στη συνάρτηση setup:
 
 ```ts
@@ -108,6 +141,9 @@ export default defineMonacoSetup((monaco) => {
 ```
 
 > Εάν δημιουργείτε ένα θέμα για το Slidev, χρησιμοποιήστε δυναμικά `import()` μέσα στη συνάρτηση setup για να έχετε καλύτερα αποτελέσματα σε tree-shaking και code-splitting.
+=======
+Since v0.48.0, Monaco will reuse the Shiki theme you configured in [Shiki's setup file](/custom/highlighters#configure-shiki), powered by [`@shikijs/monaco`](https://shiki.style/packages/monaco). You don't need to worry about it anymore and it will have a consistent style with the rest of your code blocks.
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 
 ## Ρύθμιση του Συντάκτη
 
@@ -135,3 +171,13 @@ export default defineMonacoSetup(() => {
   }
 })
 ```
+
+## Disabling
+
+Since v0.48.0, Monaco editor is enabled by default and only be bundled when you use it. If you want to disable it, you can set `monaco` to `false` in the frontmatter of your slide:
+
+```yaml
+---
+monaco: false # can also be `dev` or `build` tp conditionally enable it
+---
+```

guide/animations.md

@@ -239,7 +239,7 @@ clicks: 10
 Για παράδειγμα, μπορείτε να επιτύχετε τις μεταβάσεις κλιμάκωσης προς τα πάνω με:
 
 ```css
-// styles.css
+/* styles.css */
 
 .slidev-vclick-target {
   transition: all 500ms ease;
@@ -267,7 +267,47 @@ clicks: 10
 
 Μάθετε περισσότερα για την [προσαρμογή των styles](/custom/directory-structure#style).
 
+<<<<<<< HEAD
 ## Κίνηση
+=======
+## Rough Markers
+
+> Available since v0.48.0
+
+Slidev integrates [Rough Notation](https://github.com/linkstrifer/react-rough-notation) to allow marking or highlighting elements in your slides.
+
+### `v-mark`
+
+Rough Notation integrates comes with the `v-mark` directive.
+
+#### Type
+
+`v-mark.underline` for Underline mark, `v-mark.circle` for Circle mark, etc. Default to `underline`
+
+#### Color
+
+`v-mark.red` make the notation `red`. Supported builtin color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`
+
+#### Clicks
+
+`v-mark` works like `v-click` and will trigger after a click. Same as `v-click`, it allows you to pass a custom click value, like `v-mark="5"` or `v-mark="'+1'"`.
+
+#### Options
+
+Optionally you can pass an object to `v-mark` to specify the options, for example:
+
+```vue
+<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
+Important text
+</span>
+```
+
+#### Preview
+
+<video src="https://github.com/slidevjs/slidev/assets/11247099/c840340c-0aa1-4cde-b228-e6c67e5f6879" rounded-lg shadow controls></video>
+
+## Motion
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 
 Το Slidev έχει ενσωματωμένο το [@vueuse/motion](https://motion.vueuse.org/). Μπορείτε να χρησιμοποιήσετε την οδηγία `v-motion` σε οποιαδήποτε στοιχεία για να εφαρμόσετε κίνηση σε αυτά. Για παράδειγμα
 

guide/syntax.md

@@ -124,10 +124,14 @@ function add(
 ```
 ~~~
 
+<<<<<<< HEAD
 Μπορείτε να ενεργοποιήσετε τον αριθμό γραμμής σε όλες τις διαφάνειες θέτοντας τη ρύθμιση `lineNumbers: true` στο config ή να το ενεργοποιήσετε σε κάθε μπλοκ κώδικα ξεχωριστά θέτοντας τη ρύθμιση `lines:true`. Μπορείτε επίσης να ορίσετε τη γραμμή έναρξης για κάθε code block και να επισημάνετε τις γραμμές ανάλογα, με προεπιλογή 1:
+=======
+You can enable line number to all slides by setting `lineNumbers: true` on the config or enable each code block individually by setting `lines: true`. You can also set the starting line for each code block and highlight the lines accordingly, defaults to 1:
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 
 ~~~md
-```ts {6,7}{lines:true, startLine:5}
+```ts {6,7}{lines:true,startLine:5}
 function add(
   a: Ref<number> | number,
   b: Ref<number> | number
@@ -219,12 +223,17 @@ const count = ref(0)
 
 > Διαθέσιμο από v0.48
 
+<<<<<<< HEAD
 Το Shiki Magic Move σας επιτρέπει να έχετε λεπτομερή μετάβαση μεταξύ των αλλαγών κώδικα όπως το Magic Move του Keynote. Μπορείτε να παρακολουθήσετε [αυτό το demo](https://shiki-magic-move.netlify.app/) για να δείτε πώς λειτουργεί.
+=======
+[Shiki Magic Move](https://github.com/shikijs/shiki-magic-move) enables you to have granular transition between code changes, similar to Keynote's Magic Move. You can check [the playground](https://shiki-magic-move.netlify.app/) to see how it works.
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 
 Στο Slidev, το συνδέουμε με το [σύστημα clicks](/guide/animations#κινησεις-click). Η σύνταξη είναι να τυλίξετε πολλαπλά μπλοκ κώδικα που αντιπροσωπεύουν κάθε βήμα με <code>````md magic-move</code> (προσέξτε ότι είναι **4** backticks), αυτό θα μετατραπεί σε ένα μπλοκ κώδικα, που μεταμορφώνεται σε κάθε βήμα καθώς κάνετε click.
 
 ~~~~md
 ````md magic-move
+<<<<<<< HEAD
 ```ts
 console.log(`Βήμα ${1}`)
 ```
@@ -233,6 +242,36 @@ console.log(`Βήμα ${1 + 1}`)
 ```
 ```ts
 console.log(`Βήμα ${3}`)
+=======
+```js
+console.log(`Step ${1}`)
+```
+```js
+console.log(`Step ${1 + 1}`)
+```
+```ts
+console.log(`Step ${3}` as string)
+```
+````
+~~~~
+
+It's also possible mix Magic Move with [line highlighting](#line-highlighting), for example:
+
+~~~~md
+````md magic-move {at:4} // [!code hl]
+```js {*|1|2-5} // [!code hl]
+let count = 1
+function add() {
+  count++
+}
+```
+
+Non-code blocks in between as ignored, you can put some comments.
+
+```js
+let count = 1
+const add = () => count += 1
+>>>>>>> 4ee072e055e04965fad621e5941c6905ef2a2be0
 ```
 ````
 ~~~~

index.md

@@ -1,5 +1,6 @@
 ---
 layout: home
+markdownStyles: false
 ---
 
 <LandingPage />