Initial commit

sbatial · Dec 5, 2022 · 38043d1 · 38043d1
commit 38043d1
Show file tree

Hide file tree

Showing 37 changed files with 2,164 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,123 @@
+# Reveal.js + Svelte + Vite + TailwindCSS
+
+![Svelte Slides logo](public/svelte-slides.jpg)
+
+This template should help get you started creating awesome slide decks using [Reveal.js](https://revealjs.com) with Svelte in Vite.
+You can also use [TailwindCSS](https://tailwindcss.com) utility classes to style your slide contents.
+
+## How does it work?
+- Your slides are both Svelte components and Reveal.js slides.
+- You can have one or more slides (using `<section/>`) within a single Svelte component.
+- Create new slides as Svelte components under `src/slides`
+- Just import and include your components inside the `src/Presentation.svelte` component
+- That's it, you are good to go.
+
+## Configuring Reveal.js
+You can customize the `Reveal.js` setup in `src/config.js`.
+
+
+## Sample slide
+### src/Title.svelte
+You can insert code blocks using template literals inside `<pre>` and `<code>` elements.
+```html
+<section>
+<h1>This is a sample slide</h1>
+<ul>
+<li>Apples</li>
+<li>Oranges</li>
+<li>Grapes</li>
+</ul>
+
+<h2>Sample code</h2>
+
+    <pre>
+    <code data-line-numbers data-trim data-no-escape>
+    {`
+      const name = "hello world";
+      if(name === 'hello') {
+        console.log('world');
+      }
+    `}
+    </code>
+    </pre>
+</section>
+```
+
+### src/Presentation.svelte
+The slide order is the order in which you layout your Svelte components.
+
+```html
+<script>
+    import Title          from './slides/Title.svelte';
+    import Love           from './slides/Love.svelte';
+    import GettingStarted from './slides/GettingStarted.svelte';
+
+    const partner = ['Svelte', 'Reveal.js'];
+</script>
+
+<Title/>
+<Love {partner}/>
+<GettingStarted/>
+
+```
+
+## Built-in Components
+### Slide
+A component for slide with all the options supported 
+```html
+<Slide bgColor="red">
+<h1>This is a sample slide</h1>
+<ul>
+<li>Apples</li>
+<li>Oranges</li>
+<li>Grapes</li>
+</ul>
+</Slide>
+```
+
+Please refer to [src/lib/Slide.svelte](src/lib/Slide.svelte) for more information about the props.
+
+
+### Code
+A component to render code blocks
+```html
+<Code trim={true} lineNumbers="1|2-4" >
+    {`
+      const name = "hello world";
+      if(name === 'hello') {
+        console.log('world');
+      }
+    `}
+</Code>
+```
+
+Please refer to [/src/lib/Code.svelte](/src/lib/Code.svelte) for more information about the props.
+
+### Notes
+A component for speaker notes
+```html
+<Notes>
+Hello Everyone, I am using svelte-slides for this presentation
+</Notes>
+```
+
+### Youtube
+A component embedding YouTube videos
+```
+<Youtube url="https://www.youtube.com/watch?v=1lcPGnRL4Qo"/>
+```
+
+Please refer to [/src/lib/Youtube.svelte](/src/lib/Youtube.svelte) for more information about the props.
+
+## Inspiration
+This project is inspired by [svelte-reveal-boilerplate](https://github.com/micschwarz/svelte-reveal-boilerplate/) 
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## References
+- [Svelte](https://svelte.dev)
+- [Vite.js](https://vitejs.dev)
+- [Reveal.js](https://revealjs.com)
+
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + Reveal.js Boilerplate</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "svelte-reveal",
+  "private": true,
+  "version": "2.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.19",
+    "svelte": "^3.49.0",
+    "tailwindcss": "^3.2.4",
+    "vite": "^3.0.0"
+  },
+  "dependencies": {
+    "reveal.js": "^4.3.1"
+  }
+}