docs: setup new docs (3)

Author: nartc

apps/docs/astro.config.mjs

@@ -3,7 +3,6 @@ import starlight from '@astrojs/starlight';
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
 import { readFileSync } from 'node:fs';
-import starlightBlog from 'starlight-blog';
 
 function includeContentPlugin() {
 	const map = new Map();
@@ -47,11 +46,11 @@ export default defineConfig({
 		ssr: {
 			noExternal: [
 				'angular-three',
-				'angular-three/**',
 				'angular-three-soba/**',
 				'angular-three-cannon',
 				'angular-three-cannon/**',
 				'angular-three-rapier',
+				'angular-three-rapier/**',
 				'angular-three-postprocessing',
 				'angular-three-postprocessing/**',
 				'@angular/common',
@@ -73,21 +72,28 @@ export default defineConfig({
 		starlight({
 			title: 'Angular Three',
 			plugins: [
-				starlightBlog({
-					authors: {
-						chau: {
-							name: 'Chau Tran',
-							url: 'https://nartc.me',
-							picture: 'https://avatars.githubusercontent.com/u/25516557?v=4',
-						},
-					},
-				}),
+				// starlightBlog({
+				// 	authors: {
+				// 		chau: {
+				// 			name: 'Chau Tran',
+				// 			url: 'https://nartc.me',
+				// 			picture: 'https://avatars.githubusercontent.com/u/25516557?v=4',
+				// 		},
+				// 	},
+				// }),
 			],
 			favicon: './src/assets/angular-three-dark.svg',
-			tableOfContents: { minHeadingLevel: 2, maxHeadingLevel: 4 },
-			logo: { light: './src/assets/angular-three.svg', dark: './src/assets/angular-three-dark.svg' },
-			social: { github: 'https://github.com/angular-threejs/angular-three' },
-			credits: true,
+			tableOfContents: {
+				minHeadingLevel: 2,
+				maxHeadingLevel: 4,
+			},
+			logo: {
+				light: './src/assets/angular-three.svg',
+				dark: './src/assets/angular-three-dark.svg',
+			},
+			social: {
+				github: 'https://github.com/angular-threejs/angular-three',
+			},
 			customCss: ['./src/tailwind.css'],
 			sidebar: [
 				{

apps/docs/ec.config.mjs

@@ -1,6 +1,5 @@
 import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
 
 export default {
-	themes: ['dark-plus', 'light-plus'],
 	plugins: [pluginLineNumbers()],
 };

apps/docs/package.json

@@ -12,13 +12,28 @@
 	"dependencies": {
 		"@astrojs/starlight": "^0.31.1",
 		"@astrojs/starlight-tailwind": "^3.0.0",
-		"@astrojs/tailwind": "^5.1.5",
-		"astro": "^5.1.8",
-		"starlight-blog": "^0.16.1",
+		"@astrojs/tailwind": "^5.1.4",
+		"angular-three": "file:../../dist/libs/core",
+		"astro": "^5.1.5",
 		"sharp": "^0.33.5",
-		"tailwindcss": "^3.4.17"
+		"starlight-blog": "^0.16.1",
+		"tailwindcss": "^3.4.4"
 	},
 	"devDependencies": {
 		"@expressive-code/plugin-line-numbers": "^0.40.1"
+	},
+	"nx": {
+		"targets": {
+			"dev": {
+				"dependsOn": [
+					{
+						"projects": [
+							"core"
+						],
+						"target": "build"
+					}
+				]
+			}
+		}
 	}
 }

apps/docs/src/components/scenes/simple-scene/scene-graph.ts

@@ -0,0 +1,37 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	ElementRef,
+	signal,
+	viewChild,
+} from '@angular/core';
+import { extend, injectBeforeRender } from 'angular-three';
+import { BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
+
+@Component({
+	selector: 'app-scene-graph',
+	template: `
+		<ngt-mesh #mesh [scale]="scale()" (pointerover)="scale.set(1.5)" (pointerout)="scale.set(1)">
+			<ngt-box-geometry />
+			<ngt-mesh-normal-material />
+		</ngt-mesh>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SceneGraph {
+	private meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
+
+	protected scale = signal(1);
+
+	constructor() {
+		extend({ Mesh, MeshNormalMaterial, BoxGeometry });
+
+		injectBeforeRender(() => {
+			const mesh = this.meshRef().nativeElement;
+			mesh.rotation.x += 0.01;
+			mesh.rotation.y += 0.01;
+		});
+	}
+}

apps/docs/src/components/scenes/simple-scene/simple-scene.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NgtCanvasDeclarations, provideNgtRenderer } from 'angular-three/dom';
+import { SceneGraph } from './scene-graph';
+
+@Component({
+	template: `
+		<ngt-canvas [camera]="{ position: [0, 0, 2] }">
+			<app-scene-graph *canvasContent />
+		</ngt-canvas>
+	`,
+	imports: [NgtCanvasDeclarations, SceneGraph],
+})
+export default class SimpleScene {
+	static clientProviders = [provideNgtRenderer()];
+}

apps/docs/src/components/ui/floating-code-block.astro

@@ -0,0 +1,55 @@
+---
+import {  Tabs, TabItem } from '@astrojs/starlight/components';
+import { getEntry, render } from 'astro:content';
+
+interface Props {
+  class?: string;
+  snippets: {
+    name: string;
+    title?: string;
+  }[]
+}
+
+const { snippets, class: className = '' } = Astro.props;
+
+const settledResults = await Promise.allSettled(
+  snippets.map(async (snippet) => {
+    const entryPromise = getEntry('snippets', snippet.name);
+    if (!entryPromise) {
+      return Promise.reject(new Error(`Snippet ${snippet.name} not found`));
+    }
+
+    const entry = await entryPromise;
+    return ({ entry, tabTitle: snippet.title });
+  })
+);
+
+const results = [];
+
+for (const settledResult of settledResults) {
+  if (settledResult.status === 'rejected') {
+    throw settledResult.reason;
+  }
+
+  results.push(settledResult.value);
+}
+
+
+
+const rendered = await Promise.all(
+  results.map(async resultEntry => {
+    const {Content} = await render(resultEntry.entry);
+    return {Content, tabTitle: resultEntry.tabTitle}
+  })
+);
+---
+
+<div class:list={["p-4 rounded border border-dashed border-accent-600 dark:border-accent-200 shadow-2xl h-fit", className]}>
+  <Tabs>
+    {rendered.map(({Content, tabTitle}) => (
+      <TabItem label={tabTitle || ''}>
+        <Content />
+      </TabItem>
+    ))}
+  </Tabs>
+</div>

apps/docs/src/content.config.ts

@@ -1,10 +1,19 @@
-import { defineCollection } from 'astro:content';
-
 import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
+import { glob } from 'astro/loaders';
+import { defineCollection, z } from 'astro:content';
 import { blogSchema } from 'starlight-blog/schema';
 
 export const collections = {
-	// @ts-expect-error - not sure why this is an error
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema({ extend: (context) => blogSchema(context) }) }),
+	docs: defineCollection({
+		loader: docsLoader(),
+		schema: docsSchema({
+			// @ts-expect-error
+			extend: (context) => blogSchema(context),
+		}),
+	}),
+	snippets: defineCollection({
+		loader: glob({ pattern: '**/*.md', base: './src/content/snippets' }),
+		schema: z.object({}),
+	}),
 };

apps/docs/src/content/docs/index.mdx

@@ -1,46 +1,52 @@
 ---
-title: Welcome to Starlight
-description: Get started building your docs site with Starlight.
+title: Welcome to Angular Three
+description: Get started building your 3D scene graphs with Angular Three
 template: splash
 hero:
   title: |
-    Welcome to Starlight with
-    <span
-      class="font-black text-transparent
-        bg-clip-text bg-gradient-to-b
-        from-accent-700 to-accent-400
-        dark:from-accent-500 dark:to-accent-200"
-    >
-      Tailwind
-    </span>
-  tagline: Congrats on setting up a new Starlight project!
+    Declarative 3D experiences with
+    <code class="text-accent-600 dark:text-accent-200">Angular</code>
   image:
-    file: ../../assets/houston.webp
+    dark: ../../assets/angular-three-dark.svg
+    light: ../../assets/angular-three.svg
   actions:
-    - text: Example Guide
+    - text: Getting started
       link: /guides/example/
       icon: right-arrow
-    - text: Read the Starlight docs
-      link: https://starlight.astro.build
+    - text: Check out the demo
+      link: https://demo.angularthree.org
       icon: external
       variant: minimal
 ---
 
-import { Card, CardGrid } from '@astrojs/starlight/components';
+import FloatingCodeBlock from '../../components/ui/floating-code-block.astro';
+import SimpleScene from '../../components/scenes/simple-scene/simple-scene';
 
-## Next steps
+<section class="min-h-screen w-full flex justify-center items-center">
+ <div class="relative h-full w-full grid grid-cols-8 gap-4">
+  <div class="col-span-3">
+    <h1>
+      Declarative <span class="text-accent-600 dark:text-accent-200">scene graphs</span>
+    </h1>
 
-<CardGrid stagger>
-	<Card title="Update content" icon="pencil">
-		Edit `src/content/docs/index.mdx` to see this page change.
-	</Card>
-	<Card title="Add new content" icon="add-document">
-		Add Markdown or MDX files to `src/content/docs` to create new pages.
-	</Card>
-	<Card title="Configure your site" icon="setting">
-		Edit your `sidebar` and other config in `astro.config.mjs`.
-	</Card>
-	<Card title="Read the docs" icon="open-book">
-		Learn more in [the Starlight Docs](https://starlight.astro.build/).
-	</Card>
-</CardGrid>
+    <p>
+      Angular Three allows the users to declaratively build a scene graph using the familiar Angular template syntax. This
+      approach enables Angular developers to leverage familiar skills and tools of Angular template to build 3D scenes.
+    </p>
+
+    <div class="h-[200px] w-full">
+      <SimpleScene client:only />
+    </div>
+
+  </div>
+  <FloatingCodeBlock
+    class="col-span-5"
+    snippets={[
+      { title: 'scene-graph.ts', name: 'simple-scene' },
+      { title: 'canvas.ts', name: 'simple-scene-canvas' },
+    ]}
+  />
+
+ </div>
+
+</section>

apps/docs/src/content/snippets/simple-scene-canvas.md

@@ -0,0 +1,14 @@
+```angular-ts
+import { NgtCanvasDeclarations } from 'angular-three/dom';
+import { SceneGraph } from './scene-graph';
+
+@Component({
+  template: `
+    <ngt-canvas>
+      <app-scene-graph *canvasContent />
+    </ngt-canvas>
+  `,
+  imports: [NgtCanvasDeclarations, SceneGraph]
+})
+export class SimpleScene {}
+```

apps/docs/src/content/snippets/simple-scene.md

@@ -0,0 +1,34 @@
+```angular-ts
+import { extend, injectBeforeRender } from 'angular-three';
+import { Mesh, BoxGeometry, MeshNormalMaterial } from 'three';
+
+@Component({
+  selector: 'app-scene-graph',
+  template: `
+    <ngt-mesh #mesh
+      [scale]="scale()"
+      (pointerover)="scale.set(1.5)"
+      (pointerout)="scale.set(1)"
+    >
+      <ngt-box-geometry />
+      <ngt-mesh-normal-material />
+    </ngt-mesh>
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class SceneGraph {
+  private meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
+
+  protected scale = signal(1);
+
+  constructor() {
+    extend({ Mesh, BoxGeometry, MeshNormalMaterial });
+
+    injectBeforeRender(() => {
+      const mesh = this.meshRef().nativeElement;
+      mesh.rotation.x += 0.01;
+      mesh.rotation.y += 0.01;
+    });
+  }
+}
+```