release v1

Ennoriel · Jan 14, 2024 · b64f213 · b64f213 · vercel · Jan 14, 2024
1 parent 0869878
commit b64f213
Show file tree

Hide file tree

Showing 34 changed files with 711 additions and 566 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte-reveal.js
 
+## 1.0.0
+
+### Major Changes
+
+- simplify API
+
 ## 0.2.0
 
 ### Minor Changes

diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Maxime Dupont
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # svelte-reveal.js
 
-> svelte-reveal.js is a [reveal.js](https://revealjs.com/) wrapper for [Svelte](https://svelte.dev/).
+> svelte-reveal.js is a very convinient [reveal.js](https://revealjs.com/) wrapper for [Svelte](https://svelte.dev/).
+
+You can see a demonstration of the [default reveal.js presentation](https://svelte-reveal-js.vercel.app/) using Svelte, SvelteKit and svelte-reveal.js.
 
 If you want to port this library to another framework, I'd be glad to convert this repo to a monorepo to make the maintenance easier.
 
@@ -29,21 +31,14 @@ yarn add --dev svelte-reveal.js reveal.js
 
 ```sv
 <script>
-	import { RevealJsContext, Slide } from 'svelte-reveal.js';
-
-	import 'reveal.js/dist/reset.css';
-	import 'reveal.js/dist/reveal.css';
-	import 'reveal.js/dist/theme/white.css';
+	import { RevealJsContext, Slide, white } from 'svelte-reveal.js';
 </script>
 
-<!-- a container with fixed size is required -->
-<div style:width="100%" style:height="100vh">
-	<RevealJsContext>
-		<Slide>
-			<h1>Hello world!</h1>
-		</Slide>
-	</RevealJsContext>
-</div>
+<RevealJsContext themes={[white]}>
+	<Slide>
+		<h1>Hello world!</h1>
+	</Slide>
+</RevealJsContext>
 ```
 
 ## API Reference
@@ -52,32 +47,21 @@ yarn add --dev svelte-reveal.js reveal.js
 
 The component `<RevealJsContext>` loads reveal.js and initialize a Reveal context.
 
-| Props     | Type             | Description                                                                                                                                                                                                            |
-| :-------- | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `options` | `Reveal.Options` | _optional_ — reveal.js options. See the [official documentation](https://revealjs.com/config/) and the [typescript source code](https://github.com/kwatanwa17/DefinitelyTyped/blob/master/types/reveal.js/index.d.ts). |
-| `reveal`  | `Reveal.Api`     | bindable — reveal.js presentation object.                                                                                                                                                                              |
-| `loaded`  | `boolean`        | bindable — false by default and turns true when the presentation is loaded. Can be used to display a loading screen                                                                                                    |
+| Props     | Type             | Description                                                                                                                                                                                                                                                                                                             |
+| :-------- | :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options` | `Reveal.Options` | _optional_ — reveal.js options. See the [official documentation](https://revealjs.com/config/) and the [typescript source code](https://github.com/kwatanwa17/DefinitelyTyped/blob/master/types/reveal.js/index.d.ts). Do not pass plugins through this props, they would be overriden. Use the `plugins` props instead |
+| `reveal`  | `Reveal.Api`     | bindable — reveal.js presentation object.                                                                                                                                                                                                                                                                               |
+| `loaded`  | `boolean`        | bindable — false by default and turns true when the presentation is loaded. Can be used to display a loading screen                                                                                                                                                                                                     |
 
-If you want a specific route for each slide, do provide the option `{ hash: true }` and make sure that your presentation is wrapped in a `/[...slug]/+page.svelte` folder to unsure the page being redirected to your presentation.
+If you want a specific route for each slide, do provide the option `{ hash: true }` and make sure that your presentation is wrapped in a `/[...slug]/+page.svelte` folder to ensure the page is being redirected to your presentation.
 
-To load specific reveal.js plugins, you need to dynamically import them in an onMount function:
+#### Plugins
+
+To load aspecific reveal.js plugin, import it from the library and pass it in the `plugins` props:
 
 ```sv
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { RevealJsContext } from 'svelte-reveal.js';
-	import type Reveal from 'reveal.js';
-
-	// The highlight plugin requires a stylesheet
-	import 'reveal.js/plugin/highlight/monokai.css';
-
-	let plugins: Reveal.PluginFunction[];
-
-	onMount(async () => {
-		plugins = [
-			await import('reveal.js/plugin/highlight/highlight').then(res => res.default)
-		]
-	})
+	import { RevealJsContext, markdown, white } from 'svelte-reveal.js';
 </script>
 
 {#if plugins}
@@ -87,27 +71,24 @@ To load specific reveal.js plugins, you need to dynamically import them in an on
 			progress: true,
 			center: true,
 			hash: true,
-			plugins
 		}}
+		plugins={[markdown]}
+		themes={[white]}
 	>
 		...
 	</RevealJsContext>
 {/if}
 ```
 
-Some css themes exposed by reveal.js and can be imported with `import 'reveal.js/dist/theme/black.css';`:
+The available plugins are: `highlight` (code blocks), `markdown`, `search`, `notes`, `math` and `zoom`. Learn more [in the official documentation](https://revealjs.com/plugins/#built-in-plugins).
+
+**You need an extra theme for the highlight plugin. Two of which are exported by this library.**
+
+#### Themes
 
-- black.css
-- beige.css
-- blood.css
-- league.css
-- night.css
-- moon.css
-- sky.css
-- simple.css
-- serif.css
-- solarized.css
-- white.css
+To load a built-in theme, import it from the library and pass it in the `themes` props.
+
+The available themes are: `black`, `beige`, `blood`, `league`, `night`, `moon`, `sky`, `simple`, `serif`, `solarized` and `white`
 
 ### Slide
 
@@ -151,6 +132,8 @@ All `data-attributes` used by reveal.js have been exposed as Svelte props:
 
 The component `<Code>` displays a block of code. This component requires the `highlight` plugin. See the [official documentation about Code](https://revealjs.com/code/).
 
+**You need an extra theme for the highlight plugin. Two of which are exported by this library.**
+
 All `data-attributes` used by reveal.js have been exposed as Svelte props:
 
 **fragment props**:

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-reveal.js",
-	"version": "0.2.0",
+	"version": "1.0.0",
 	"description": "Reveal.js Svelte wrapper",
 	"repository": {
 		"type": "git",
@@ -61,4 +61,4 @@
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module"
-}
+}