setup docusaurus

.github/workflows/ci.yml

@@ -1,6 +1,6 @@
 name: Continuous Integration
 
 on:
   pull_request:
     types:
       - opened
@@ -63,7 +63,7 @@
           forge init mc-example-project -t metacontract/template
       - name: Run forge test
         run: |
-          cd ./mc-example-project
+          cd /tmp/install-with-template-test/mc-example-project
           forge test
 
   # slither:

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

book/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.

book/babel.config.js

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

book/docusaurus.config.ts

@@ -0,0 +1,142 @@
+import type * as Preset from "@docusaurus/preset-classic";
+import type { Config } from "@docusaurus/types";
+import { themes as prismThemes } from "prism-react-renderer";
+
+const config: Config = {
+	title: "Meta Contract",
+	tagline: "Meta Contract is a smart contract development framework.",
+	favicon: "img/favicon.ico",
+
+	url: "https://mc-book.ecdysis.xyz",
+	baseUrl: "/",
+
+	organizationName: "metacontract",
+	projectName: "mc",
+
+	onBrokenLinks: "warn",
+	onBrokenMarkdownLinks: "warn",
+
+	i18n: {
+		defaultLocale: "en",
+		locales: ["en"],
+	},
+
+	presets: [
+		[
+			"classic",
+			{
+				docs: {
+					path: "../docs",
+					routeBasePath: "/",
+					sidebarPath: require.resolve("./sidebars.ts"),
+					editUrl: "https://github.com/metacontract/mc/tree/main/book",
+				},
+				theme: {
+					customCss: "./src/css/custom.css",
+				},
+			} satisfies Preset.Options,
+		],
+	],
+
+	themeConfig: {
+		image: "img/ecdysis-logo.png",
+		navbar: {
+			title: "Meta Contract",
+			logo: {
+				alt: "Ecdysis Logo",
+				src: "img/ecdysis-logo.png",
+			},
+			items: [
+				{
+					to: "introduction",
+					html: "Introduction",
+					position: "left",
+				},
+				{
+					to: "tutorials",
+					html: "Tutorial",
+					position: "left",
+				},
+				{
+					to: "devops",
+					html: "DevOps",
+					position: "left",
+				},
+				{
+					to: "plugin-functions",
+					html: "Plugin Functions",
+					position: "left",
+				},
+				{
+					to: "resources",
+					html: "Resources",
+					position: "left",
+				},
+				{
+					href: "https://github.com/metacontract/mc",
+					label: "GitHub",
+					position: "right",
+				},
+			],
+		},
+		footer: {
+			style: "dark",
+			links: [
+				{
+					title: "Docs",
+					items: [
+						{
+							label: "Introduction",
+							to: "/introduction",
+						},
+						{
+							label: "Tutorial",
+							to: "/tutorials",
+						},
+						{
+							label: "DevOps",
+							to: "/devops",
+						},
+						{
+							label: "Plugin Functions",
+							to: "/plugin-functions",
+						},
+						{
+							label: "Resources",
+							to: "/resources",
+						},
+					],
+				},
+				{
+					title: "Community",
+					items: [
+						{
+							label: "Stack Overflow",
+							href: "https://stackoverflow.com/questions/tagged/metacontract",
+						},
+						{
+							label: "X",
+							href: "https://x.com/ecdysis_xyz",
+						},
+					],
+				},
+				{
+					title: "More",
+					items: [
+						{
+							label: "GitHub",
+							href: "https://github.com/metacontract/mc",
+						},
+					],
+				},
+			],
+			copyright: `Copyright © ${new Date().getFullYear()} Ecdysis, Inc. Built with Docusaurus.`,
+		},
+		prism: {
+			theme: prismThemes.github,
+			darkTheme: prismThemes.dracula,
+		},
+	} satisfies Preset.ThemeConfig,
+};
+
+export default config;

book/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "mc-book",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "docusaurus start",
+		"build": "docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy",
+		"clear": "docusaurus clear",
+		"serve": "docusaurus serve",
+		"write-translations": "docusaurus write-translations",
+		"write-heading-ids": "docusaurus write-heading-ids",
+		"typecheck": "tsc"
+	},
+	"dependencies": {
+		"@docusaurus/core": "3.5.2",
+		"@docusaurus/preset-classic": "3.5.2",
+		"@mdx-js/react": "^3.0.0",
+		"clsx": "^2.0.0",
+		"prism-react-renderer": "^2.3.0",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"devDependencies": {
+		"@docusaurus/module-type-aliases": "3.5.2",
+		"@docusaurus/tsconfig": "3.5.2",
+		"@docusaurus/types": "3.5.2",
+		"typescript": "~5.5.2"
+	},
+	"browserslist": {
+		"production": [">0.5%", "not dead", "not op_mini all"],
+		"development": [
+			"last 3 chrome version",
+			"last 3 firefox version",
+			"last 5 safari version"
+		]
+	},
+	"engines": {
+		"node": ">=18.0"
+	}
+}

book/sidebars.ts

@@ -0,0 +1,7 @@
+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
+
+const sidebars: SidebarsConfig = {
+	sidebar: [{ type: "autogenerated", dirName: "." }],
+};
+
+export default sidebars;

book/src/css/custom.css

@@ -0,0 +1,30 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}

book/src/pages/index.module.css

@@ -0,0 +1,35 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}