Add plugin tutorial

.github/workflows/build.reusable.yaml

@@ -35,6 +35,9 @@ jobs:
       - name: Install dependencies
         run: |
           yarn
+      - name: Build plugins
+        run: |
+          yarn build:plugins
       # Submodules cached per environment to save time
       - name: Cache submodules
         uses: actions/cache@v3

.github/workflows/publish.yaml

@@ -8,14 +8,17 @@ jobs:
   publish:
     strategy:
       matrix:
-        package: [core, cli]
+        package: [core, cli, plugin-tutorial]
         include:
           - package: core
             path: 'package.json'
             workspace: '@iota-wiki/core'
           - package: cli
             path: 'cli/package.json'
             workspace: '@iota-wiki/cli'
+          - package: plugin-tutorial
+            path: 'plugins/tutorial/package.json'
+            workspace: '@iota-wiki/plugin-tutorial'
     uses: ./.github/workflows/publish.reusable.yaml
     with:
       path: ${{ matrix.path }}

.github/workflows/tag.yaml

@@ -8,14 +8,17 @@ jobs:
   tag:
     strategy:
       matrix:
-        package: [core, cli]
+        package: [core, cli, plugin-tutorial]
         include:
           - package: core
             path: 'package.json'
             workspace: '@iota-wiki/core'
           - package: cli
             path: 'cli/package.json'
             workspace: '@iota-wiki/cli'
+          - package: plugin-tutorial
+            path: 'plugins/tutorial/package.json'
+            workspace: '@iota-wiki/plugin-tutorial'
     uses: ./.github/workflows/tag.reusable.yaml
     with:
       path: ${{ matrix.path }}

cli/src/commands/tutorial/configure.tsx

@@ -32,7 +32,7 @@ import {
   stringLiteral,
 } from '@babel/types';
 import generator from '@babel/generator';
-import { UserOptions as TutorialOptions } from '@iota-wiki/plugin-tutorial';
+import { type UserOptions as TutorialOptions } from '@iota-wiki/plugin-tutorial';
 import prettier from 'prettier';
 
 interface InputComponentProps {

package.json

@@ -6,13 +6,14 @@
     "start:shimmer": "(ENVIRONMENT=shimmer; yarn generate:api && yarn start)",
     "start:next": "(ENVIRONMENT=next; yarn generate:api && yarn start)",
     "start:all": "yarn build:all && yarn serve",
+    "build:plugins": "yarn ./plugins/tutorial build",
     "build:iota": "(ENVIRONMENT=iota; yarn generate:api && yarn build --out-dir build)",
     "build:shimmer": "(ENVIRONMENT=shimmer; yarn generate:api && yarn build  --out-dir build/shimmer)",
     "build:next": "(ENVIRONMENT=next; yarn generate:api && yarn build --out-dir build/next)",
-    "build:all": "yarn build:iota && yarn build:shimmer && yarn build:next",
-    "build:production:iota": "(MODE=\"production\" EXTERNAL=\"*,*/*,*/*/*\"; yarn checkout:remote:iota && yarn build:iota)",
-    "build:production:shimmer": "(MODE=\"production\" EXTERNAL=\"*,*/*,*/*/*\"; yarn checkout:remote:shimmer && yarn build:shimmer)",
-    "build:production:next": "(MODE=\"production\" EXTERNAL=\"*,*/*,*/*/*\"; yarn checkout:remote:next && yarn build:next)",
+    "build:all": "yarn build:plugins && yarn build:iota && yarn build:shimmer && yarn build:next",
+    "build:production:iota": "(MODE=\"production\" EXTERNAL=\"*,*/*,*/*/*\"; yarn checkout:remote:iota && yarn build:plugins && yarn build:iota)",
+    "build:production:shimmer": "(MODE=\"production\" EXTERNAL=\"*,*/*,*/*/*\"; yarn checkout:remote:shimmer && yarn build:plugins && yarn build:shimmer)",
+    "build:production:next": "(MODE=\"production\" EXTERNAL=\"*,*/*,*/*/*\"; yarn checkout:remote:next && yarn build:plugins && yarn build:next)",
     "checkout": "git submodule update --init",
     "checkout:iota": "yarn checkout iota/external/*",
     "checkout:shimmer": "yarn checkout shimmer/external/*",
@@ -46,7 +47,7 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/plugin-client-redirects": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
-    "@iota-wiki/plugin-tutorial": "^1.0.6",
+    "@iota-wiki/plugin-tutorial": "workspace:^",
     "@mdx-js/react": "^1.6.21",
     "@popperjs/core": "^2.11.5",
     "@svgr/webpack": "^5.5.0",
@@ -114,6 +115,7 @@
   "packageManager": "yarn@3.2.0",
   "workspaces": [
     "cli",
+    "plugins/**",
     "theme"
   ],
   "files": []

plugins/tutorial/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+/dist
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

plugins/tutorial/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

plugins/tutorial/README.md

@@ -0,0 +1,29 @@
+# Tutorial plugin
+
+This is a small plugin to register tutorials to be listed on the tutorial page plugin.
+
+## Usage
+
+```
+yarn add @iota-wiki/plugin-tutorial
+```
+
+Then register any tutorials to list on the tutorial page by providing information like the titles, routes and metadata of the tutorials:
+
+```js
+  plugins: [
+    [
+      '@iota-wiki/plugin-tutorial',
+      {
+        title: "EVM Tutorial",
+        description:
+          "In this tutorial, you will learn how to use the EVM in IOTA.",
+        route: "evm-tutorial/intro",
+        tags: ["text"],
+        source: "https://github.com/dr-electron/tutorial-template", // Optional
+        preview: "evm-tutorial.png", // Optional
+      },
+    ],
+    ...
+  ...
+```

plugins/tutorial/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@iota-wiki/plugin-tutorial",
+  "version": "1.0.6",
+  "main": "dist/index.js",
+  "types": "src/types.d.ts",
+  "scripts": {
+    "clean": "rm -rf ./lib",
+    "build": "tsc --build",
+    "prepack": "yarn build"
+  },
+  "packageManager": "yarn@3.2.2",
+  "devDependencies": {
+    "@docusaurus/types": "2.2.0",
+    "typescript": "^4.6.3"
+  },
+  "files": [
+    "dist",
+    "src/types.d.ts"
+  ]
+}

plugins/tutorial/src/index.ts

@@ -0,0 +1,32 @@
+import type {
+  OptionValidationContext,
+  LoadContext,
+  Plugin,
+} from '@docusaurus/types';
+
+import type { NormalizedOptions, UserOptions } from './types';
+
+export default async function pluginTutorial(
+  context: LoadContext,
+  options: NormalizedOptions,
+): Promise<Plugin> {
+  return {
+    name: '@iota-wiki/plugin-tutorial',
+    async contentLoaded({ actions }) {
+      actions.setGlobalData(options);
+    },
+  };
+}
+
+export function validateOptions({
+  options: userOptions,
+}: OptionValidationContext<UserOptions, NormalizedOptions>): NormalizedOptions {
+  const id = userOptions.title.normalize().toLowerCase().replace(/\W/, '-');
+
+  const defaultOptions = {
+    id,
+    route: id,
+  };
+
+  return Object.assign(defaultOptions, userOptions);
+}

plugins/tutorial/src/types.d.ts

@@ -0,0 +1,15 @@
+export interface Options {
+  title: string;
+  description: string;
+  tags: string[];
+  source?: string;
+  preview?: string;
+}
+
+export interface DefaultOptions {
+  id: string;
+  route: string;
+}
+
+export type UserOptions = Options & Partial<DefaultOptions>;
+export type NormalizedOptions = Options & DefaultOptions;

plugins/tutorial/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "NodeNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true
+  },
+  "include": ["src"]
+}