add documentation with ci (#15)

* add documentation with ci

* fix ci

* fix tests

* fix ci

.eslintrc.json

@@ -14,7 +14,8 @@
     "@typescript-eslint/restrict-template-expressions": 0,
     "@typescript-eslint/no-unsafe-return": 0,
     "@typescript-eslint/restrict-plus-operands": 0,
-    "react/no-unescaped-entities": 0
+    "react/no-unescaped-entities": 0,
+    "import/no-unresolved": 0
   },
   "settings": {
     "import/resolver": {

.github/workflows/ci.yml

@@ -19,6 +19,17 @@ jobs:
       - name: Test
         run: npm run coverage
       - name: Report coverage
-        uses: codecov/codecov-action@v3.1.1
+        uses: codecov/codecov-action@v3.1.3
         with:
           fail_ci_if_error: true
+      - name: Build docs
+        run: npm --prefix website run build
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+      - name: Deploy docs
+        uses: peaceiris/actions-gh-pages@v3.9.3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./website/build
+          force_orphan: true
+          allow_empty_commit: true
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'

demo/src/test.mdx

@@ -1,6 +1,6 @@
-import { PresentifyProvider } from '../../packages/presentify/src'
+import { PresentifyProvider } from '../../packages/presentify/src';
 
-<PresentifyProvider options={{useFiraCode: true, theme: 'dark'}}>
+<PresentifyProvider options={{useFiraCode: true}}>
 +++
 layout: center,
 className: test
@@ -21,4 +21,6 @@ function Counter({initialCount}) {
   );
 }
 ```
+---
+# test 3
 </PresentifyProvider>

packages/presentify/__tests__/calculateLinesToHighlight.spec.ts

@@ -5,7 +5,7 @@ import { calculateLinesToHighlight } from '../src/lib/calculateLinesToHighlight'
 describe('calculateLinesToHighlight', () => {
   it('should return false when undefined was passed', () => {
     const shouldHighlightLine = calculateLinesToHighlight(undefined);
-    expect(shouldHighlightLine(0)).toBe(false);
+    expect(shouldHighlightLine(0)).toBe(true);
   });
   it('should return false when broken value was passed', () => {
     const shouldHighlightLine = calculateLinesToHighlight('test');

packages/presentify/src/lib/calculateLinesToHighlight.ts

@@ -8,5 +8,8 @@ export const calculateLinesToHighlight = (
     const lineNumbers = rangeParser(strlineNumbers);
     return (index: number) => lineNumbers.includes(index + 1);
   }
+  if (!highlightLines) {
+    return () => true;
+  }
   return () => false;
 };

packages/presentify/src/styles/Code.styled.ts

@@ -9,7 +9,6 @@ export const LineNumber = styled.span<{ lineWidth: number }>`
 export const Line = styled.div<{
   isHighlight: boolean;
   useFiraCode?: boolean;
-  containerWidth: number;
 }>`
   ${({ isHighlight }) => (isHighlight ? '' : 'opacity: 0.3')};
   font-size: calc((100vw - 40px) / 50);

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/docs/api-reference/code-highlighting.md

@@ -0,0 +1,18 @@
+---
+id: 'code-highlighting'
+title: Code Highlighting
+---
+
+You can use a Code Highlighting by wrapping code with three backticks in `.mdx`file. You can also set code options using `mdx` passing prop syntax. The options list is described in the table below.
+
+## Code Higlighting Options
+
+|     Option      |  Type   |      Optional      | Default |            Description             |
+| :-------------: | :-----: | :----------------: | :-----: | :--------------------------------: |
+|    language     | string  | :heavy_check_mark: |  none   | set language to syntax higlighting |
+| showLineNumbers | boolean | :heavy_check_mark: |  false  |         shows line numbers         |
+| highlightLines  | string  | :heavy_check_mark: |  none   |      makes this line focused       |
+
+## Supported Languages
+
+Supports all popular programming languages. List of supported languages [here](https://prismjs.com/#supported-languages).

website/docs/api-reference/presentify-provider.md

@@ -0,0 +1,29 @@
+---
+id: 'presentify-provider'
+title: PresentifyProvider
+---
+
+The `PresentifyProvider` is a parent provider used in the `.mdx` file to wrap and presentify code logic.
+It has the logic to parse `.mdx` files and render slides. In addition, it adds a `searchParams` page,
+allowing you to load any slide from the link, or show a not found page if the slide is not found.
+Moreover, it has keyboard shortcuts for manipulating the presentation. It also accepts prop options, with the options described in the table below.
+
+## PresentifyProviders Options
+
+|      Option       |      Type       |      Optional      | Default |                          Description                          |
+| :---------------: | :-------------: | :----------------: | :-----: | :-----------------------------------------------------------: |
+|      `theme`      |  dark / light   | :heavy_check_mark: |  light  | code syntax highlighter theme (dark = vsDark, light = github) |
+|   `useFiraCode`   |     boolean     | :heavy_check_mark: |  false  |  use firaCode font with ligatures in Code syntax highlighter  |
+|    `className`    |     string      | :heavy_check_mark: |  none   |               set className to slide parent div               |
+| `backgroundColor` |     string      | :heavy_check_mark: |  white  |                 set background color to slide                 |
+|  `backgroundImg`  |     string      | :heavy_check_mark: |  none   |                 set background Image to slide                 |
+|     `layout`      | normal / center | :heavy_check_mark: | center  |                      set layout of slide                      |
+
+## Keyboard Shortcuts
+
+|      Key      |         Description          |
+| :-----------: | :--------------------------: |
+|  `Arrow up`   |   change to the next slide   |
+| `Arrow Down`  | change to the previous slide |
+| `Arrow left`  |   change to the next slide   |
+| `Arrow right` | change to the previous slide |

website/docs/api-reference/slide.md

@@ -0,0 +1,15 @@
+---
+id: 'slide'
+title: Slide
+---
+
+You can create a slide component by adding `<hr />` or `---` in `.mdx` file. You can also set slide options using the frontmatter syntax with `+++` instead of `---`. The options list is described in the table below. Slide options override the global options passed to `PresentifyProvider`
+
+## Slide Options
+
+|      Option       |      Type       |      Optional      | Default |            Description            |
+| :---------------: | :-------------: | :----------------: | :-----: | :-------------------------------: |
+|    `className`    |     string      | :heavy_check_mark: |  none   | set className to slide parent div |
+| `backgroundColor` |     string      | :heavy_check_mark: |  white  |   set background color to slide   |
+|  `backgroundImg`  |     string      | :heavy_check_mark: |  none   |   set background Image to slide   |
+|     `layout`      | normal / center | :heavy_check_mark: | center  |        set layout of slide        |

website/docs/getting-started/installation.md

@@ -0,0 +1,111 @@
+---
+id: 'installation'
+title: Installation
+---
+
+## CLI
+
+You can use cli using one of the two templates(js, ts) created with Vite.
+
+```bash
+npx create-presentify
+```
+
+### Usage
+
+All you have to do is start editing the mdx file
+
+## Existing project installation
+
+Presentify can also be added to an existing project, but this requires react v18.
+
+```bash
+npm install presentify @emotion/styled @emotion/react remark-mdx-code-meta
+```
+
+### Configuration
+
+#### Vite
+
+You need to install 2 additional packages
+
+```bash
+npm install @vitejs/plugin-react @mdx-js/rollup
+```
+
+And edit `vite.config.js` or `vite.config.ts` like that:
+
+```js
+import mdx from '@mdx-js/rollup';
+import react from '@vitejs/plugin-react';
+import remarkMdxCodeMeta from 'remark-mdx-code-meta';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    react({ jsxImportSource: '@emotion/react' }),
+    mdx({
+      jsxImportSource: '@emotion/react',
+      providerImportSource: '@mdx-js/react',
+      remarkPlugins: [remarkMdxCodeMeta],
+    }),
+  ],
+});
+```
+
+#### Webpack
+
+You need to install additional packages
+
+```bash
+npm install @mdx-js/loader
+```
+
+And edit Webpack config like that:
+
+```js
+module.exports = {
+  module: {
+    // …
+    rules: [
+      // …
+      {
+        test: /\.mdx?$/,
+        use: [
+          {
+            loader: '@mdx-js/loader',
+            /** @type {import('@mdx-js/loader').Options} */
+            options: {
+              jsxImportSource: '@emotion/react',
+              providerImportSource: '@mdx-js/react',
+              remarkPlugins: [remarkMdxCodeMeta],
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+If your vite or webpack config is edited you can now create `.mdx` file and import it in your project. When importing you must pass components as a prop.
+
+```js
+import { components } from 'presentify';
+
+import MyPresentation from './MyPresentation.mdx';
+
+export const Presentation = () => <MyPresentation components={components} />;
+```
+
+In `.mdx` file you need to import `PresentifyProvider`
+
+```mdx
+import { PresentifyProvider } from 'presentify';
+
+<PresentifyProvider>...</PresentifyProvider>
+```
+
+### Usage
+
+All you have to do is start editing the mdx file

website/docs/getting-started/roadmap.md

@@ -0,0 +1,12 @@
+---
+id: 'roadmap'
+title: Roadmap
+---
+
+# Plans for V2
+
+- Add animation to slide and code Highlighter
+- Add a new theme to code Highlighter
+- Add Diagrams component using `mermaid`
+- Add Presenter mode
+- Add support to importing files to code highlighter

website/docs/getting-started/why-presentify.md

@@ -0,0 +1,27 @@
+---
+id: 'why-presentify'
+title: Why Presentify?
+---
+
+There are a lot of solutions for presenting in mdx, such as [sli.dev](https://sli.dev/), [next-mdx-deck](https://next-mdx-deck.netlify.app/?mode=slideshow#0), [mdx-deck](https://github.com/jxnblk/mdx-deck) but none of them are in pure react.
+Here are some advantages of this approach:
+
+### MDX based
+
+Presentify utilizes the MDX format to efficiently store and arrange your presentation slides in a single plain text file. This allows you to concentrate on creating your content without worrying about formatting.
+
+### Integration with existing projects
+
+Because Presentify uses pure react, it can be added very quickly to existing projects if we need a presentation in it.
+
+### Themable
+
+Presentify is built with [Emotion](https://emotion.sh/docs/introduction) and which allows you to easily customize the appearance of your presentation. For code highlighting, Presentify uses [Prism](https://prismjs.com/) and you can easily use dark and light theme.
+
+### Developer experience
+
+Presentify is powered by [Vite](https://vitejs.dev/), which provides a lightning-fast dev experience and allows you to use [React Fast Refresh](https://reactnative.dev/docs/fast-refresh) to instantly preview your changes. You can easily build your presentation for production with a single command.
+
+### Hackable
+
+Presentify is built with [MDX](https://mdxjs.com/) and [React](https://reactjs.org/), which means you can use any React component in your presentation.

website/docs/tutorials/components-overriding.md

@@ -0,0 +1,40 @@
+---
+id: 'components-overriding'
+title: Components Overriding/Adding
+---
+
+You can easily override or add components to the default ones provided by the `presentify` and `mdx`.
+
+```tsx
+import React, { ReactElement } from 'react';
+import ReactDOM from 'react-dom/client';
+import { components } from 'presentify';
+
+import Presentify from './Presentify.mdx';
+import FancyH1 from './FancyH1';
+
+const myComponents = {
+  ...components,
+  h1: () => <FancyH1 />,
+};
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <Test components={myComponents} />
+  </React.StrictMode>,
+);
+```
+
+if your components is not a part of mdx syntax you can use it as a regular component in `.mdx` file.
+
+```mdx
+import { PresentifyProvider } from 'presentify';
+import MyFancyComponent from './MyFancyComponent';
+
+<PresentifyProvider options={{useFiraCode: true, theme: 'dark'}}>
+# MyFancyComponent
+
+<MyFancyComponent />
+
+</PresentifyProvider>
+```