feat(nx-dev): tutorial project

.gitignore

@@ -37,6 +37,9 @@ out
 # Angular Cache
 .angular
 
+# Astro Cache
+.astro
+
 # Local dev files
 .env.local
 .bashrc

.nxignore

@@ -1,2 +1,4 @@
 nx-dev/**/jest.config.js
-.next
+.next
+_files
+_solution

.prettierignore

@@ -46,4 +46,6 @@ CODEOWNERS
 
 .pnpm-store
 
-/.nx/workspace-data
+/.nx/workspace-data
+_files
+_solution

graph/ui-code-block/src/lib/json-code-block.tsx

@@ -2,7 +2,8 @@
 import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
 import { JSX, ReactNode, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
+import * as uiComponents from '@nx/graph/ui-components';
+const { CopyToClipboardButton } = uiComponents;
 
 export function JsonCodeBlockPreTag({
   children,

graph/ui-project-details/src/lib/project-details/project-details.tsx

@@ -5,14 +5,16 @@ import type { ProjectGraphProjectNode } from '@nx/devkit';
 import { GraphError } from 'nx/src/command-line/graph/graph';
 /* eslint-enable @nx/enforce-module-boundaries */
 import { EyeIcon } from '@heroicons/react/24/outline';
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
 import { twMerge } from 'tailwind-merge';
 import { TagList } from '../tag-list/tag-list';
 import { OwnersList } from '../owners-list/owners-list';
 import { TargetConfigurationGroupList } from '../target-configuration-details-group-list/target-configuration-details-group-list';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 import { TargetTechnologies } from '../target-technologies/target-technologies';
 
+const { PropertyInfoTooltip, Tooltip } = uiTooltips;
+
 export interface ProjectDetailsProps {
   project: ProjectGraphProjectNode;
   sourceMap: Record<string, string[]>;

graph/ui-project-details/src/lib/show-all-options/show-options-help.tsx

@@ -1,14 +1,17 @@
 import { Fragment, ReactNode, useMemo, useState } from 'react';
 import { PlayIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Transition } from '@headlessui/react';
-import { getExternalApiService, useEnvironmentConfig } from '@nx/graph/shared';
+import * as graphShared from '@nx/graph/shared';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import type { TargetConfiguration } from '@nx/devkit';
 import { TerminalOutput } from '@nx/nx-dev/ui-fence';
-import { Tooltip } from '@nx/graph/ui-tooltips';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 
+const { getExternalApiService, useEnvironmentConfig } = graphShared;
+const { Tooltip } = uiTooltips;
+
 interface ShowOptionsHelpProps {
   projectName: string;
   targetName: string;

graph/ui-project-details/src/lib/source-info/source-info.tsx

@@ -1,7 +1,8 @@
-import { SourcemapInfoToolTip, Tooltip } from '@nx/graph/ui-tooltips';
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
 import { twMerge } from 'tailwind-merge';
 
+const { SourcemapInfoToolTip, Tooltip } = uiTooltips;
+
 export function SourceInfo(props: {
   data: Array<string>;
   propertyKey: string;

graph/ui-project-details/src/lib/target-configuration-details-header/target-configuration-details-header.tsx

@@ -1,26 +1,25 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
 import type { TargetConfiguration } from '@nx/devkit';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
+import * as uiComponents from '@nx/graph/ui-components';
 import {
   ChevronDownIcon,
   ChevronUpIcon,
   EyeIcon,
   PlayIcon,
 } from '@heroicons/react/24/outline';
 
-import {
-  AtomizerTooltip,
-  PropertyInfoTooltip,
-  Tooltip,
-} from '@nx/graph/ui-tooltips';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
 import { twMerge } from 'tailwind-merge';
 import { Pill } from '../pill';
 import { TargetTechnologies } from '../target-technologies/target-technologies';
 import { SourceInfo } from '../source-info/source-info';
 import { getDisplayHeaderFromTargetConfiguration } from '../utils/get-display-header-from-target-configuration';
 import { TargetExecutor } from '../target-executor/target-executor';
 
+const { CopyToClipboardButton } = uiComponents;
+const { AtomizerTooltip, PropertyInfoTooltip, Tooltip } = uiTooltips;
+
 export interface TargetConfigurationDetailsHeaderProps {
   isCollasped: boolean;
   toggleCollapse?: () => void;

graph/ui-project-details/src/lib/target-configuration-details/target-configuration-details.tsx

@@ -2,9 +2,9 @@
 // nx-ignore-next-line
 import type { TargetConfiguration } from '@nx/devkit';
 import { JsonCodeBlock } from '@nx/graph-internal/ui-code-block';
-import { ExpandedTargetsContext } from '@nx/graph/shared';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
+import * as graphShared from '@nx/graph/shared';
+import * as uiComponents from '@nx/graph/ui-components';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { Pill } from '../pill';
 import { ShowOptionsHelp } from '../show-all-options/show-options-help';
@@ -19,6 +19,10 @@ import { FadingCollapsible } from './fading-collapsible';
 import { TargetConfigurationProperty } from './target-configuration-property';
 import { TooltipTriggerText } from './tooltip-trigger-text';
 
+const { ExpandedTargetsContext } = graphShared;
+const { CopyToClipboardButton } = uiComponents;
+const { PropertyInfoTooltip, Tooltip } = uiTooltips;
+
 interface TargetConfigurationDetailsProps {
   projectName: string;
   targetName: string;

graph/ui-project-details/src/lib/target-configuration-details/target-configuration-property-text.tsx

@@ -1,8 +1,10 @@
-import { Tooltip } from '@nx/graph/ui-tooltips';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
 import { JSX, ReactNode } from 'react';
 import { TooltipTriggerText } from './tooltip-trigger-text';
 import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
 
+const { Tooltip } = uiTooltips;
+
 interface TargetConfigurationPropertyTextProps {
   content: ReactNode;
   disabled?: boolean;

graph/ui-project-details/src/lib/target-executor/target-executor-title.tsx

@@ -1,7 +1,10 @@
-import { PropertyInfoTooltip, Tooltip } from '@nx/graph/ui-tooltips';
-import { CopyToClipboardButton } from '@nx/graph/ui-components';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
+import * as uiComponents from '@nx/graph/ui-components';
 import { TooltipTriggerText } from '../target-configuration-details/tooltip-trigger-text';
 
+const { PropertyInfoTooltip, Tooltip } = uiTooltips;
+const { CopyToClipboardButton } = uiComponents;
+
 export function TargetExecutorTitle({
   commands,
   command,

graph/ui-project-details/src/lib/target-executor/target-executor.tsx

@@ -1,4 +1,6 @@
-import { ExternalLink } from '@nx/graph/ui-tooltips';
+import * as uiTooltips from '@nx/graph/ui-tooltips';
+
+const { ExternalLink } = uiTooltips;
 
 export interface TargetExecutorProps {
   command?: string;

graph/ui-project-details/src/lib/target-technologies/target-technologies.tsx

@@ -1,6 +1,8 @@
-import { TechnologyIcon } from '@nx/graph/ui-icons';
+import * as uiIcons from '@nx/graph/ui-icons';
 import { HTMLProps } from 'react';
 
+const { TechnologyIcon } = uiIcons;
+
 export interface TargetTechnologiesProps extends HTMLProps<HTMLDivElement> {
   technologies?: string[];
   showTooltip?: boolean;

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -1,4 +1,4 @@
-import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
+import * as docsearchReact from '@docsearch/react';
 import {
   InternalDocSearchHit,
   StoredDocSearchHit,
@@ -10,6 +10,8 @@ import { useRouter } from 'next/navigation';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
+const { DocSearchModal, useDocSearchKeyboardEvents } = docsearchReact;
+
 const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control'];
 const ACTION_KEY_APPLE = ['⌘', 'Command'];
 

nx-dev/tutorial/README.md

@@ -0,0 +1,149 @@
+# TutorialKit Starter
+
+👋 Welcome to TutorialKit!
+
+This README includes everything you need to start writing your tutorial content quickly.
+
+## Project Structure
+
+```bash
+.
+├── astro.config.mjs    # TutorialKit uses Astro 🚀 (https://astro.build)
+├── src
+│   ├── ...
+│   ├── content
+│   │   └── tutorial    # Your tutorial content lives here
+│   └── templates       # Your templates (see below for more information)
+├── public
+│   ├── favicon.svg
+│   └── logo.svg        # Default logo used in top left for your tutorial
+├── ...
+├── theme.ts            # Customize the theme of the tutorial
+└── uno.config.ts       # UnoCSS config (https://unocss.dev/)
+```
+
+## Getting Started
+
+Make sure you have all dependencies installed and started the dev server:
+
+```bash
+npm install
+npm run dev
+```
+
+## UI Structure
+
+```markdown
+┌─────────────────────────────────────────────────────┐
+│ ● ● ● │
+├───────────────────────────┬─────────────────────────┤
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ │ Code Editor │
+│ │ │
+│ │ │
+│ │ │
+│ │ │
+│ Content ├─────────────────────────┤
+│ │ │
+│ │ │
+│ │ Preview & Boot Screen │
+│ │ │
+│ │ │
+│ ├─────────────────────────┤
+│ │ │
+│ │ Terminal │
+│ │ │
+└───────────────────────────┴─────────────────────────┘
+```
+
+## Authoring Content
+
+A tutorial consists of parts, chapters, and lessons. For example:
+
+- Part 1: Basics of Vite
+  - Chapter 1: Introduction
+    - Lesson 1: Welcome!
+    - Lesson 2: Why Vite?
+    - …
+  - Chapter 2: Your first Vite project
+- Part 2: CLI
+  - …
+
+Your content is organized into lessons, with chapters and parts providing a structure and defining common metadata for these lessons.
+
+Here’s an example of how it would look like in `src/content/tutorial`:
+
+```bash
+tutorial
+├── 1-basics-of-vite
+│   ├── 1-introduction
+│   │   ├── 1-welcome
+│   │   │   ├── content.md    # The content of your lesson
+│   │   │   ├── _files        # Initial set of files
+│   │   │   │   └── ...
+│   │   │   └── _solution     # Solution of the lesson
+│   │   │       └── ...
+│   │   ├── 2-why-vite
+│   │   │   ├── content.md
+│   │   │   └── _files
+│   │   │       └── ...
+│   │   └── meta.md           # Metadata for the chapter
+│   └── meta.md               # Metadata for the part
+├── 2-advanced
+│   ├── ...
+│   └── meta.md
+└── meta.md                   # Metadata for the tutorial
+```
+
+### Supported Content Formats
+
+Content can be either written as Markdown (`.md`) files or using [MDX](https://mdxjs.com/) (`.mdx`). Files have a Front Matter at the top that contains the metadata and everything that comes after is the content of your lesson.
+
+**Example**
+
+```markdown
+---
+type: lesson
+title: Welcome!
+---
+
+# Welcome to TutorialKit!
+
+In this tutorial we'll walk you through how to setup your environment to
+write your first tutorial 🤩
+```
+
+The metadata file (`meta.md`) of parts, chapters, and lessons do not contain any content. It only contains the Front Matter for configuration.
+
+### Metadata
+
+Here is an overview of the properties that can be used as part of the Front Matter:
+
+| Property        | Required | Type                        | Inherited | Description                                                                                                                                           |
+| --------------- | -------- | --------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type            | ✅       | `part \| chapter \| lesson` | ❌        | The type of the metadata.                                                                                                                             |
+| title           | ✅       | `string`                    | ❌        | The title of the part, chapter, or lesson.                                                                                                            |
+| slug            |          | `string`                    | ❌        | Let’s you customize the URL pathname which is `/:partSlug/:chapterSlug/:lessonSlug`.                                                                  |
+| previews        |          | `Preview[]`                 | ✅        | Configure which ports should be used for the previews. If not specified, the lowest port will be used.                                                |
+| autoReload      |          | `boolean`                   | ✅        | Navigating to a lesson that specifies `autoReload` will always reload the preview. This is typically only needed if your server does not support HMR. |
+| prepareCommands |          | `Command[]`                 | ✅        | List of commands to execute sequentially. They are typically used to install dependencies or to run scripts.                                          |
+| mainCommand     |          | `Command`                   | ✅        | The main command to be executed. This command will run after the `prepareCommands`.                                                                   |
+
+A `Command` has the following shape:
+
+```ts
+string | [command: string, title: string] | { command: string, title: string }
+```
+
+The `title` is used as part of the boot screen (see [UI Structure](#ui-structure)).
+
+A `Preview` has the following shape:
+
+```ts
+string | [port: number, title: string] | { port: number, title: string }
+```
+
+In most cases, metadata is inherited. For example, if you specify a `mainCommand` on a chapter without specifying it on any of its lessons, each lesson will use the `mainCommand` from its respective chapter. This extends to chapter and parts as well.

nx-dev/tutorial/astro.config.ts

@@ -0,0 +1,29 @@
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export const config = defineConfig({
+  devToolbar: {
+    enabled: false,
+  },
+  vite: {
+    plugins: [nxViteTsPaths() as any],
+    ssr: {
+      noExternal: [
+        '@tutorialkit/astro',
+        '@astrojs/mdx',
+        '@astrojs/react',
+        'astro-expressive-code',
+      ],
+    },
+  },
+  integrations: [
+    tutorialkit({
+      components: {
+        TopBar: './src/components/TopBar.astro',
+      },
+    }),
+  ],
+});
+
+export default config;

nx-dev/tutorial/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "tutorial",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "astro": "npx astro",
+    "build": "npx astro check && npx astro build",
+    "dev": "npx astro dev",
+    "preview": "npx astro preview",
+    "start": "npx astro dev"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}