Merge pull request #83 from slidevjs/sync-4ee072e0

docs(en): merge docs/main into docs-el/main @ 4ee072e

Author: GeopJr

.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,8 @@
         Presentation Slides for Developers
       </h2>
       <div flex="~ gap-3 justify-center" p4 mt-5>
-        <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">Ξεκινήστε</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">Γιατί</a>
       </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,30 +29,7 @@ plusOne.value++ // error
 ```
 ~~~
 
-Σε
-
-~~~md
-```js {monaco}
-const count = ref(1)
-const plusOne = computed(() => count.value + 1)
-
-console.log(plusOne.value) // 2
-
-plusOne.value++ // error
-```
-~~~
-
-## Εξαγωγή
-
-Από προεπιλογή, το Monaco θα λειτουργήσει ΜΟΝΟ σε λειτουργία `dev`. Αν θέλετε να το έχετε διαθέσιμο στο εξαγόμενο SPA, ρυθμίστε το στο frontmatter σας:
-
-```yaml
----
-monaco: true # προεπιλεγμένο "dev"
----
-```
-
-## Αυτόματη Εγκατάσταση Τύπων
+## TypeScript Types
 
 Όταν χρησιμοποιείτε TypeScript με το Monaco, οι τύποι εξαρτήσεων θα εγκατασταθούν αυτόματα στο client-side.
 
@@ -65,49 +42,35 @@ const counter = ref(0)
 ```
 ~~~
 
-Στο παραπάνω παράδειγμα, βεβαιωθείτε ότι τα `vue` και `@vueuse/core` είναι εγκατεστημένα τοπικά ως dependencies / devDependencies, το Slidev θα αναλάβει τα υπόλοιπα, ώστε οι τύποι να λειτουργούν αυτόματα για τον συντάκτη!
+Στο παραπάνω παράδειγμα, βεβαιωθείτε ότι τα `vue` και `@vueuse/core` είναι εγκατεστημένα τοπικά ως dependencies / devDependencies, το Slidev θα αναλάβει τα υπόλοιπα, ώστε οι τύποι να λειτουργούν αυτόματα για τον συντάκτη. Κατά το deploy ως SPA, αυτοί οι τύποι θα είναι επίσης συσκευασμένοι για στατική φιλοξενία.
 
-## Ρύθμιση Θεμάτων
-
-Το θέμα ελέγχεται από το Slidev με βάση το φωτεινό/σκοτεινό θέμα. Αν θέλετε να το προσαρμόσετε, μπορείτε να περάσετε το id του θέματος στη συνάρτηση setup:
+### Επιπλέον Τύποι
 
-```ts
-// ./setup/monaco.ts
-import { defineMonacoSetup } from '@slidev/types'
+Το Slidev θα σαρώσει όλα τα codeblocks του monaco στις διαφάνειές σας και θα κάνει εισαγωγή των τύπων για τις βιβλιοθήκες που χρησιμοποιούνται για εσάς. Σε περίπτωση που του ξέφυγαν κάποιες, μπορείτε να καθορίσετε ρητά επιπλέον πακέτα για την εισαγωγή των τύπων:
 
-export default defineMonacoSetup(() => {
-  return {
-    theme: {
-      dark: 'vs-dark',
-      light: 'vs',
-    },
-  }
-})
+```md
+---
+monacoTypesAdditionalPackages:
+  - lodash-es
+  - foo
+---
 ```
 
-Αν θέλετε να φορτώσετε προσαρμοσμένα θέματα:
+### Αυτόματη Απόκτηση Τύπων
 
-```ts
-import { defineMonacoSetup } from '@slidev/types'
+Μπορείτε προαιρετικά να ενεργοποιήσετε τη δυνατότητα εισαγωγής τύπων από το CDN ρυθμίζοντας το ακόλουθο headmatter:
 
-// αλλάξετε στα θέματά σας
-import dark from 'theme-vitesse/themes/vitesse-dark.json'
-import light from 'theme-vitesse/themes/vitesse-light.json'
+```md
+---
+monacoTypesSource: ata
+---
+```
 
-export default defineMonacoSetup((monaco) => {
-  monaco.editor.defineTheme('vitesse-light', light as any)
-  monaco.editor.defineTheme('vitesse-dark', dark as any)
+Αυτή η λειτουργία υποστηρίζεται από το [`@typescript/ata`](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata) και εκτελείται εξ ολοκλήρου client-side.
 
-  return {
-    theme: {
-      light: 'vitesse-light',
-      dark: 'vitesse-dark',
-    },
-  }
-})
-```
+## Ρύθμιση Θεμάτων
 
-> Εάν δημιουργείτε ένα θέμα για το Slidev, χρησιμοποιήστε δυναμικά `import()` μέσα στη συνάρτηση setup για να έχετε καλύτερα αποτελέσματα σε tree-shaking και code-splitting.
+Από την έκδοση v0.48.0, το Monaco θα επαναχρησιμοποιεί το θέμα Shiki που έχετε ρυθμίσει στο [αρχείο ρυθμίσεων του Shiki](/custom/highlighters#ρυθμιστε-shiki), το οποίο τροφοδοτείται από το [`@shikijs/monaco`](https://shiki.style/packages/monaco). Δεν χρειάζεται να ανησυχείτε πια γι' αυτό και θα έχει ένα συνεπές στυλ με τα υπόλοιπα code blocks σας.
 
 ## Ρύθμιση του Συντάκτη
 
@@ -135,3 +98,13 @@ export default defineMonacoSetup(() => {
   }
 })
 ```
+
+## Απενεργοποίηση
+
+Από την έκδοση v0.48.0, ο συντάκτης Monaco είναι ενεργοποιημένος από προεπιλογή και θα συμπεριλαμβάνεται μόνο όταν τον χρησιμοποιείτε. Αν θέλετε να τον απενεργοποιήσετε, μπορείτε να θέσετε το `monaco` σε `false` στο frontmatter της διαφάνειάς σας:
+
+```yaml
+---
+monaco: false # μπορεί επίσης να είναι `dev` ή `build` για να το ενεργοποιήσει υπό όρους
+---
+```

guide/animations.md

@@ -239,7 +239,7 @@ clicks: 10
 Για παράδειγμα, μπορείτε να επιτύχετε τις μεταβάσεις κλιμάκωσης προς τα πάνω με:
 
 ```css
-// styles.css
+/* styles.css */
 
 .slidev-vclick-target {
   transition: all 500ms ease;
@@ -267,6 +267,42 @@ clicks: 10
 
 Μάθετε περισσότερα για την [προσαρμογή των styles](/custom/directory-structure#style).
 
+## Rough Markers
+
+> Διαθέσιμο από v0.48.0
+
+Το Slidev ενσωματώνει το [Rough Notation](https://github.com/linkstrifer/react-rough-notation) για να επιτρέπει τη σημείωση ή την επισήμανση στοιχείων στις διαφάνειές σας.
+
+### `v-mark`
+
+Το Rough Notation ενσωματώνεται με την οδηγία `v-mark`.
+
+#### Type
+
+`v-mark.underline` για το σημάδι υπογράμμισης, `v-mark.circle` για το σημάδι κύκλου, κ.λπ. Η προεπιλογή είναι `underline`.
+
+#### Color
+
+`v-mark.red` κάνει την σημείωση `red`. Υποστηριζόμενα ενσωματωμένα θέματα χρωμάτων του UnoCSS. Για προσαρμοσμένα χρώματα, χρησιμοποιήστε την object σύνταξη `v-mark="{ color: '#234' }"`.
+
+#### Clicks
+
+Το `v-mark` λειτουργεί όπως το `v-click` και θα ενεργοποιηθεί μετά από ένα click. Όπως και το `v-click`, σας επιτρέπει να περάσετε μια προσαρμοσμένη τιμή click, όπως `v-mark="5"` ή `v-mark="'+1'"`.
+
+#### Ρυθμίσεις
+
+Προαιρετικά μπορείτε να περάσετε ένα object στο `v-mark` για να καθορίσετε τις ρυθμίσεις, για παράδειγμα:
+
+```vue
+<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
+Σημαντικό κείμενο
+</span>
+```
+
+#### Προεπισκόπηση
+
+<video src="https://github.com/slidevjs/slidev/assets/11247099/c840340c-0aa1-4cde-b228-e6c67e5f6879" rounded-lg shadow controls></video>
+
 ## Κίνηση
 
 Το Slidev έχει ενσωματωμένο το [@vueuse/motion](https://motion.vueuse.org/). Μπορείτε να χρησιμοποιήσετε την οδηγία `v-motion` σε οποιαδήποτε στοιχεία για να εφαρμόσετε κίνηση σε αυτά. Για παράδειγμα

guide/syntax.md

@@ -124,10 +124,10 @@ function add(
 ```
 ~~~
 
-Μπορείτε να ενεργοποιήσετε τον αριθμό γραμμής σε όλες τις διαφάνειες θέτοντας τη ρύθμιση `lineNumbers: true` στο config ή να το ενεργοποιήσετε σε κάθε μπλοκ κώδικα ξεχωριστά θέτοντας τη ρύθμιση `lines:true`. Μπορείτε επίσης να ορίσετε τη γραμμή έναρξης για κάθε code block και να επισημάνετε τις γραμμές ανάλογα, με προεπιλογή 1:
+Μπορείτε να ενεργοποιήσετε τον αριθμό γραμμής σε όλες τις διαφάνειες θέτοντας τη ρύθμιση `lineNumbers: true` στο config ή να το ενεργοποιήσετε σε κάθε μπλοκ κώδικα ξεχωριστά θέτοντας τη ρύθμιση `lines: true`. Μπορείτε επίσης να ορίσετε τη γραμμή έναρξης για κάθε code block και να επισημάνετε τις γραμμές ανάλογα, με προεπιλογή 1:
 
 ~~~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,20 +219,40 @@ const count = ref(0)
 
 > Διαθέσιμο από v0.48
 
-Το Shiki Magic Move σας επιτρέπει να έχετε λεπτομερή μετάβαση μεταξύ των αλλαγών κώδικα όπως το Magic Move του Keynote. Μπορείτε να παρακολουθήσετε [αυτό το demo](https://shiki-magic-move.netlify.app/) για να δείτε πώς λειτουργεί.
+Το [Shiki Magic Move](https://github.com/shikijs/shiki-magic-move) σας επιτρέπει να έχετε λεπτομερή μετάβαση μεταξύ των αλλαγών κώδικα, σαν το Magic Move του Keynote. Μπορείτε να παρακολουθήσετε [το demo](https://shiki-magic-move.netlify.app/) για να δείτε πώς λειτουργεί.
 
 Στο Slidev, το συνδέουμε με το [σύστημα clicks](/guide/animations#κινησεις-click). Η σύνταξη είναι να τυλίξετε πολλαπλά μπλοκ κώδικα που αντιπροσωπεύουν κάθε βήμα με <code>````md magic-move</code> (προσέξτε ότι είναι **4** backticks), αυτό θα μετατραπεί σε ένα μπλοκ κώδικα, που μεταμορφώνεται σε κάθε βήμα καθώς κάνετε click.
 
 ~~~~md
 ````md magic-move
-```ts
+```js
 console.log(`Βήμα ${1}`)
 ```
-```ts
+```js
 console.log(`Βήμα ${1 + 1}`)
 ```
 ```ts
-console.log(`Βήμα ${3}`)
+console.log(`Βήμα ${3}` as string)
+```
+````
+~~~~
+
+Είναι επίσης δυνατό να συνδυάσετε το Magic Move με την [επισήμανση γραμμής](#επισημανση-γραμμης), για παράδειγμα:
+
+~~~~md
+````md magic-move {at:4} // [!code hl]
+```js {*|1|2-5} // [!code hl]
+let count = 1
+function add() {
+  count++
+}
+```
+
+Τα μη code μπλοκ στο ενδιάμεσο αγνοούνται, μπορείτε να βάλετε κάποια σχόλια.
+
+```js
+let count = 1
+const add = () => count += 1
 ```
 ````
 ~~~~

index.md

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