Switch from Moonwave to Docusaurus

flipbook-labs · Mar 21, 2024 · 1540831 · 1540831
1 parent cc6e6b7
commit 1540831
Show file tree

Hide file tree

Showing 31 changed files with 15,202 additions and 220 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,9 +13,5 @@ sourcemap.json
 /Packages
 /wally.lock
 
-# Moonwave
-/node_modules
-build
-
 # Other
 /*.log
diff --git a/docs/.gitignore b/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*
diff --git a/docs/README.md b/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.
diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};
diff --git a/docs/contributing.md → docs/docs/contributing.md b/docs/contributing.md → docs/docs/contributing.md
@@ -67,7 +67,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.
 

diff --git a/docs/intro.md → docs/docs/intro.md b/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
 

diff --git a/docs/migrating.md → docs/docs/migrating.md b/docs/migrating.md → docs/docs/migrating.md
diff --git a/docs/story-format.md → docs/docs/story-format.md b/docs/story-format.md → docs/docs/story-format.md
diff --git a/docs/writing-stories.md → docs/docs/writing-stories.md b/docs/writing-stories.md → docs/docs/writing-stories.md
@@ -10,15 +10,13 @@ flipbook uses the concept of "storybooks" and "stories." A storybook is used to
 
 Every project needs a storybook, so to get started you will create a new `ProjectName.storybook.lua` file at the root of your project with the following contents:
 
-```lua
--- src/ProjectName.storybook.lua
-
--- Make sure to adjust the path to Roact if needed 
+```lua title="src/ProjectName.storybook.lua"
+-- Make sure to adjust the path to Roact if needed
 local Roact = require(path.to.Roact)
 
 return {
     roact = Roact,
-    storyRoots = { 
+    storyRoots = {
         script.Parent.Components
     }
 }
@@ -32,55 +30,51 @@ Right now you should see a single entry in flipbook's sidebar for this storybook
 
 A story and its associated component should be in two separate files. Both files should share the same name, however the story will end with `.story`. To get started, let's create `Button.lua` and `Button.story.lua`:
 
-```lua
--- src/Components/Button.lua
-
+```lua title="src/Components/Button.lua"
 local Roact = require(path.to.Roact)
 
 type Props = {
-	text: string,
-	onActivated: (() -> ())?,
+    text: string,
+    onActivated: (() -> ())?,
 }
 
 local function Button(props)
-	return Roact.createElement("TextButton", {
-		Text = props.text,
-		TextSize = 16,
-		Font = Enum.Font.GothamBold,
-		TextColor3 = Color3.fromRGB(255, 255, 255),
-		BackgroundColor3 = Color3.fromRGB(239, 31, 90),
-		BorderSizePixel = 0,
-		AutomaticSize = Enum.AutomaticSize.XY,
-		[Roact.Event.Activated] = props.onActivated,
-	}, {
-		Padding = Roact.createElement("UIPadding", {
-			PaddingTop = UDim.new(0, 8),
-			PaddingRight = UDim.new(0, 8),
-			PaddingBottom = UDim.new(0, 8),
-			PaddingLeft = UDim.new(0, 8),
-		}),
-	})
+    return Roact.createElement("TextButton", {
+        Text = props.text,
+        TextSize = 16,
+        Font = Enum.Font.GothamBold,
+        TextColor3 = Color3.fromRGB(255, 255, 255),
+        BackgroundColor3 = Color3.fromRGB(239, 31, 90),
+        BorderSizePixel = 0,
+        AutomaticSize = Enum.AutomaticSize.XY,
+        [Roact.Event.Activated] = props.onActivated,
+    }, {
+        Padding = Roact.createElement("UIPadding", {
+            PaddingTop = UDim.new(0, 8),
+            PaddingRight = UDim.new(0, 8),
+            PaddingBottom = UDim.new(0, 8),
+            PaddingLeft = UDim.new(0, 8),
+        }),
+    })
 end
 
 return Button
 ```
 
 And now let's write the story to mount the Button component:
 
-```lua
--- src/Components/Button.story.lua
-
+```lua title="src/Components/Button.story.lua"
 local Roact = require(path.to.Roact)
 local Button = require(script.Parent.Button)
 
 return {
-	summary = "A generic button component that can be used anywhere",
-	story = Roact.createElement(Button, {
-		text = "Click me",
-		onActivated = function()
-			print("click")
-		end,
-	}),
+    summary = "A generic button component that can be used anywhere",
+    story = Roact.createElement(Button, {
+        text = "Click me",
+        onActivated = function()
+            print("click")
+        end,
+    }),
 }
 ```
 
@@ -98,33 +92,33 @@ We will continue with our Button component and give it a "disabled" state for wh
 
 ```diff
 type Props = {
-	text: string,
+    text: string,
 +   isDisabled: boolean?,
-	onActivated: (() -> ())?,
+    onActivated: (() -> ())?,
 }
 
 local function Button(props)
-+ 	local color = if props.isDisabled then Color3.fromRGB(82, 82, 82) else Color3.fromRGB(239, 31, 90)
++   local color = if props.isDisabled then Color3.fromRGB(82, 82, 82) else Color3.fromRGB(239, 31, 90)
 
-	return Roact.createElement("TextButton", {
-		Text = props.text,
-		TextSize = 16,
-		Font = Enum.Font.GothamBold,
-		TextColor3 = Color3.fromRGB(255, 255, 255),
+    return Roact.createElement("TextButton", {
+        Text = props.text,
+        TextSize = 16,
+        Font = Enum.Font.GothamBold,
+        TextColor3 = Color3.fromRGB(255, 255, 255),
 -       BackgroundColor3 = Color3.fromRGB(239, 31, 90),
-+		BackgroundColor3 = color,
-		BorderSizePixel = 0,
-		AutomaticSize = Enum.AutomaticSize.XY,
--		[Roact.Event.Activated] = props.onActivated,
-+		[Roact.Event.Activated] = if props.isDisabled then nil else props.onActivated,
-	}, {
-		Padding = Roact.createElement("UIPadding", {
-			PaddingTop = UDim.new(0, 8),
-			PaddingRight = UDim.new(0, 8),
-			PaddingBottom = UDim.new(0, 8),
-			PaddingLeft = UDim.new(0, 8),
-		}),
-	})
++       BackgroundColor3 = color,
+        BorderSizePixel = 0,
+        AutomaticSize = Enum.AutomaticSize.XY,
+-       [Roact.Event.Activated] = props.onActivated,
++       [Roact.Event.Activated] = if props.isDisabled then nil else props.onActivated,
+    }, {
+        Padding = Roact.createElement("UIPadding", {
+            PaddingTop = UDim.new(0, 8),
+            PaddingRight = UDim.new(0, 8),
+            PaddingBottom = UDim.new(0, 8),
+            PaddingLeft = UDim.new(0, 8),
+        }),
+    })
 end
 
 return Button
@@ -137,14 +131,14 @@ local Roact = require(path.to.Roact)
 local Button = require(script.Parent.Button)
 
 return {
-	summary = "A generic button component that can be used anywhere",
-	story = Roact.createElement(Button, {
-		text = "Click me",
+    summary = "A generic button component that can be used anywhere",
+    story = Roact.createElement(Button, {
+        text = "Click me",
 +       isDisabled = true,
-		onActivated = function()
-			print("click")
-		end,
-	}),
+        onActivated = function()
+            print("click")
+        end,
+    }),
 }
 ```
 
@@ -159,21 +153,21 @@ local Roact = require(path.to.Roact)
 local Button = require(script.Parent.Button)
 
 return {
-	summary = "A generic button component that can be used anywhere",
-+	controls = {
-+		isDisabled = false,
-+	},
--	story = Roact.createElement(Button, {
-+	story = function(props)
-+		return Roact.createElement(Button, {
-			text = "Click me",
--			isDisabled = true,
-+			isDisabled = props.controls.isDisabled,
-			onActivated = function()
-				print("click")
-			end,
-		})
-+	end,
+    summary = "A generic button component that can be used anywhere",
++   controls = {
++       isDisabled = false,
++   },
+-   story = Roact.createElement(Button, {
++   story = function(props)
++       return Roact.createElement(Button, {
+            text = "Click me",
+-           isDisabled = true,
++           isDisabled = props.controls.isDisabled,
+            onActivated = function()
+                print("click")
+            end,
+        })
++   end,
 }
 ```
 
@@ -185,4 +179,4 @@ With this change, a new "Controls" panel will appear where you can toggle the `i
 
 You have just been given an example of how to create a storybook and a story for a Button component that makes use of flipbook's controls feature. This document outlines the biggest features of flipbook, but there are other options you can play around with.
 
-Check out [Story Format](story-format.md) next to learn about all the options you have available.
+Check out [Story Format](story-format.md) next to learn about all the options you have available.
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -0,0 +1,78 @@
+import { themes as prismThemes } from 'prism-react-renderer';
+import type { Config } from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+
+const ORGANIZATION_NAME = 'flipbook-labs'
+const PROJECT_NAME = 'flipbook'
+const REPO_URL = `https://github.com/${ORGANIZATION_NAME}/${PROJECT_NAME}`
+const SITE_URL = `https://${ORGANIZATION_NAME}.github.io`
+
+const config: Config = {
+	title: PROJECT_NAME,
+	tagline: 'A storybook plugin for Roblox',
+	favicon: 'img/favicon.ico',
+
+	url: SITE_URL,
+	baseUrl: `/${PROJECT_NAME}/`,
+
+	organizationName: ORGANIZATION_NAME,
+	projectName: PROJECT_NAME,
+
+	onBrokenLinks: 'throw',
+	onBrokenMarkdownLinks: 'warn',
+
+	i18n: {
+		defaultLocale: 'en',
+		locales: ['en'],
+	},
+
+	presets: [
+		[
+			'classic',
+			{
+				docs: {
+					sidebarPath: './sidebars.ts',
+					editUrl: `${REPO_URL}/tree/main/docs/docs/`,
+				},
+				theme: {
+					customCss: './src/css/custom.css',
+				},
+			} satisfies Preset.Options,
+		],
+	],
+
+	themeConfig: {
+		image: 'img/social-card.png',
+		navbar: {
+			title: PROJECT_NAME,
+			logo: {
+				alt: `${PROJECT_NAME} Logo`,
+				src: 'img/logo.svg',
+			},
+			items: [
+				{
+					type: 'docSidebar',
+					sidebarId: 'docs',
+					position: 'left',
+					label: 'Docs',
+				},
+				{
+					href: REPO_URL,
+					label: 'GitHub',
+					position: 'right',
+				},
+			],
+		},
+		footer: {
+			style: 'dark',
+			copyright: `Copyright © ${new Date().getFullYear()} flipbook-labs. Built with Docusaurus.`,
+		},
+		prism: {
+			theme: prismThemes.github,
+			darkTheme: prismThemes.dracula,
+			additionalLanguages: ['lua', 'bash', 'diff']
+		},
+	} satisfies Preset.ThemeConfig,
+};
+
+export default config;