Merge remote-tracking branch 'origin/main' into jest

.github/workflows/docs.yml

@@ -4,41 +4,45 @@ on:
   pull_request:
   release:
     types: [published]
-
-env:
-  REPO_URL: github.com/flipbook-labs/flipbook
+  workflow_dispatch:
 
 jobs:
-  build:
+  build-docs:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
-      - uses: Roblox/setup-foreman@v1
+      - uses: actions/setup-node@v4
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - uses: actions/[email protected]
+          node-version: 18
 
-      - name: Install Moonwave
-        run: npm install -g moonwave
+      - uses: Roblox/setup-foreman@v3
+        with:
+          allow-external-github-orgs: true
+          token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Extract
-        run: moonwave-extractor extract src
+      - name: Install dependencies
+        run: npm ci
+        working-directory: docs
 
       - name: Build
-        run: moonwave build
+        run: npm run build
+        working-directory: docs
 
-      - name: Configure Git user
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-      - name: Use GITHUB_TOKEN to allow pushing
-        run: git remote set-url origin https://github-actions[bot]:${{ env.GITHUB_TOKEN }}@${{ env.REPO_URL }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Deploy
-        if: ${{ github.event.release }}
-        run: moonwave build --publish
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/build
+
+  deploy-docs:
+    needs: build-docs
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release' || github.event_name == 'workflow_dispatch'
+    steps:
+      - uses: actions/deploy-pages@v4
+        id: deployment

.gitignore

@@ -11,9 +11,5 @@ sourcemap*.json
 /Packages
 /wally.lock
 
-# Moonwave
-/node_modules
-build
-
 # Other
 /*.log

docs/.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*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

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

docs/contributing.md → docs/docs/contributing.md

@@ -35,7 +35,7 @@ flipbook is made up of Roact components, each of which has a story file. This me
 
 Once you have flipbook built, navigate to the Studio settings and turn on "Plugin Debugging Enabled."
 
-![Screenshot of the Studio settings showing the Plugin Debugging Enabled option](/plugin-debugging-enabled.png)
+![Screenshot of the Studio settings showing the Plugin Debugging Enabled option](/img/plugin-debugging-enabled.png)
 
 Then load a new Baseplate and open the flipbook plugin. Its storybook should now appear in the sidebar.
 

docs/intro.md → docs/docs/intro.md

@@ -8,7 +8,7 @@ flipbook is a storybook plugin that previews UI components in a sandboxed enviro
 
 With native support for popular UI libraries like [Roact](https://github.com/roblox/roact), [Fusion](https://github.com/Elttob/Fusion), and [Roact 17](https://github.com/grilme99/CorePackages#roact17), no matter how you create UI you can write a story for it in flipbook
 
-![Screenshot of flipbook showing off the ButtonWithControls story](/main-screenshot.png)
+![Screenshot of flipbook showing off the ButtonWithControls story](/img/main-screenshot.png)
 
 ## Installation