docs: setup new docs (2)

Author: nartc

apps/astro-docs/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "docs",
+	"name": "astro-docs",
 	"type": "module",
 	"version": "0.0.1",
 	"scripts": {

apps/docs/astro.config.mjs

@@ -1,16 +1,94 @@
-// @ts-check
-import { defineConfig } from 'astro/config';
+import analogjsangular from '@analogjs/astro-angular';
 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();
+
+	return [
+		{
+			name: 'pre-include-content',
+			enforce: 'pre',
+			transform(_, id) {
+				if (!id.includes('?includeContent') || id.includes('astro-entry')) return;
+
+				const [filePath] = id.split('?');
+				const fileContent = readFileSync(filePath, 'utf-8');
+
+				if (map.has(filePath)) return;
+				map.set(filePath, fileContent.replace(/\t/g, '  '));
+			},
+		},
+		{
+			name: 'post-include-content',
+			enforce: 'post',
+			transform(code, id) {
+				if (!id.includes('?includeContent') || id.includes('astro-entry')) return;
+				const [filePath] = id.split('?');
+				const fileContent = map.get(filePath);
+
+				return {
+					code: `
+            ${code}
+            export const content = ${JSON.stringify(fileContent)};
+          `,
+				};
+			},
+		},
+	];
+}
 
 // https://astro.build/config
 export default defineConfig({
+	vite: {
+		ssr: {
+			noExternal: [
+				'angular-three',
+				'angular-three/**',
+				'angular-three-soba/**',
+				'angular-three-cannon',
+				'angular-three-cannon/**',
+				'angular-three-rapier',
+				'angular-three-postprocessing',
+				'angular-three-postprocessing/**',
+				'@angular/common',
+				'@angular/core',
+				'@angular/core/rxjs-interop',
+				'ngxtension/**',
+				'@pmndrs/vanilla',
+				'@pmndrs/cannon-worker-api',
+				'three-custom-shader-material',
+			],
+		},
+		esbuild: {
+			jsxDev: true,
+		},
+		plugins: [includeContentPlugin()],
+	},
 	integrations: [
+		analogjsangular(),
 		starlight({
-			title: 'Docs with Tailwind',
-			social: {
-				github: 'https://github.com/withastro/starlight',
-			},
+			title: 'Angular Three',
+			plugins: [
+				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,
+			customCss: ['./src/tailwind.css'],
 			sidebar: [
 				{
 					label: 'Guides',
@@ -24,7 +102,6 @@ export default defineConfig({
 					autogenerate: { directory: 'reference' },
 				},
 			],
-			customCss: ['./src/tailwind.css'],
 		}),
 		tailwind({ applyBaseStyles: false }),
 	],

apps/docs/ec.config.mjs

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

apps/docs/package.json

@@ -1,20 +1,24 @@
 {
-  "name": "docs",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/starlight": "^0.31.1",
-    "@astrojs/starlight-tailwind": "^3.0.0",
-    "@astrojs/tailwind": "^5.1.4",
-    "astro": "^5.1.5",
-    "sharp": "^0.32.5",
-    "tailwindcss": "^3.4.4"
-  }
-}
+	"name": "docs",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"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",
+		"sharp": "^0.33.5",
+		"tailwindcss": "^3.4.17"
+	},
+	"devDependencies": {
+		"@expressive-code/plugin-line-numbers": "^0.40.1"
+	}
+}

apps/docs/src/assets/angular-three-dark.svg

@@ -1,7 +1,10 @@
 import { defineCollection } from 'astro:content';
+
 import { docsLoader } from '@astrojs/starlight/loaders';
 import { docsSchema } from '@astrojs/starlight/schema';
+import { blogSchema } from 'starlight-blog/schema';
 
 export const collections = {
-	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+	// @ts-expect-error - not sure why this is an error
+	docs: defineCollection({ loader: docsLoader(), schema: docsSchema({ extend: (context) => blogSchema(context) }) }),
 };

apps/docs/src/assets/angular-three.svg

@@ -0,0 +1,9 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+
+declare module '*?includeContent' {
+	import type { Type } from '@angular/core';
+	const component: Type<any>;
+	export const content: string;
+	export default component;
+}

apps/docs/src/content.config.ts

@@ -1,17 +1,24 @@
-import colors from 'tailwindcss/colors';
 import starlightPlugin from '@astrojs/starlight-tailwind';
 
+// Generated color palettes - oxide
+const accent = { 200: '#feb3a6', 600: '#a60a00', 900: '#640300', 950: '#460b05' };
+const gray = {
+	100: '#f9f5f5',
+	200: '#f3ecea',
+	300: '#c8c0be',
+	400: '#978784',
+	500: '#635451',
+	700: '#423432',
+	800: '#302321',
+	900: '#1d1715',
+};
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {
-			colors: {
-				// Your preferred accent color. Indigo is closest to Starlight’s defaults.
-				accent: colors.indigo,
-				// Your preferred gray scale. Zinc is closest to Starlight’s defaults.
-				gray: colors.zinc,
-			},
+			colors: { accent, gray },
 		},
 	},
 	plugins: [starlightPlugin()],

apps/docs/src/env.d.ts

@@ -0,0 +1,34 @@
+{
+	"extends": "./tsconfig.json",
+	"compileOnSave": false,
+	"compilerOptions": {
+		"baseUrl": "./",
+		"outDir": "./dist/out-tsc",
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"sourceMap": true,
+		"declaration": false,
+		"downlevelIteration": true,
+		"experimentalDecorators": true,
+		"moduleResolution": "node",
+		"importHelpers": true,
+		"noEmit": false,
+		"target": "es2020",
+		"module": "es2020",
+		"lib": ["es2020", "dom"],
+		"skipLibCheck": true
+	},
+	"angularCompilerOptions": {
+		"enableI18nLegacyMessageIdFormat": false,
+		"strictInjectionParameters": true,
+		"strictInputAccessModifiers": true,
+		"strictTemplates": true,
+		"allowJs": false
+	},
+	"files": [],
+	"include": ["src/**/*.ts"]
+}

apps/docs/tailwind.config.mjs

@@ -107,6 +107,8 @@ export class NestedBox {
 				<ngt-mesh-toon-material [color]="color()" (attached)="onAttach($event)" />
 			</ngt-mesh>
 
+			<ngt-primitive *args="[mesh]" [parameters]="{ position: [2, 0, 0] }" />
+
 			<!--			<app-nested-box [position]="[-3, 0, 0]" />-->
 
 			<!--			&lt;!&ndash; three element under condition &ndash;&gt;-->
@@ -172,16 +174,16 @@ export class NestedBox {
 		</ngt-group>
 
 		<!-- portal -->
-		<ngt-portal [container]="virtualScene">
-			<ngt-group *portalContent>
-				<!-- component inside portal -->
-				<app-box context="in portal" />
-
-				@if (show()) {
-					<app-box context="in portal in condition" />
-				}
-			</ngt-group>
-		</ngt-portal>
+		<!--		<ngt-portal [container]="virtualScene">-->
+		<!--			<ngt-group *portalContent>-->
+		<!--				&lt;!&ndash; component inside portal &ndash;&gt;-->
+		<!--				<app-box context="in portal" />-->
+
+		<!--				@if (show()) {-->
+		<!--					<app-box context="in portal in condition" />-->
+		<!--				}-->
+		<!--			</ngt-group>-->
+		<!--		</ngt-portal>-->
 	`,
 	imports: [NgtArgs, Box, ConditionBox, NgtPortalDeclarations, NestedBox],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -201,6 +203,8 @@ export class Scene {
 
 	private groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
 
+	protected mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(), new THREE.MeshNormalMaterial());
+
 	constructor() {
 		setInterval(() => {
 			this.show.update((v) => !v);

apps/docs/tsconfig.app.json

@@ -202,11 +202,34 @@ export class NgtRenderer2 implements Renderer2 {
 			return createRendererNode('portal', platformElement, this.document);
 		}
 
+		if (name === 'ngt-value') {
+			return createRendererNode('three', prepare(platformElement, 'ngt-value'), this.document);
+		}
+
 		const [injectedArgs, injectedParent] = [
 			this.getNgtDirective(NgtArgs, this.argsInjectors)?.value || [],
 			this.getNgtDirective(NgtParent, this.parentInjectors)?.value,
 		];
 
+		if (name === 'ngt-primitive') {
+			if (!injectedArgs[0]) throw new Error(`[NGT] ngt-primitive without args is invalid`);
+			const object = injectedArgs[0];
+			let instanceState = getInstanceState(object);
+			if (!instanceState || instanceState.type === 'ngt-primitive') {
+				// if an object isn't already "prepared", we'll prepare it
+				prepare(object, 'ngt-primitive', instanceState);
+				instanceState = getInstanceState(object);
+			}
+
+			const primitiveRendererNode = createRendererNode('three', object, this.document);
+			if (injectedParent) {
+				primitiveRendererNode.__ngt_renderer__[NgtRendererClassId.parent] =
+					injectedParent as unknown as NgtRendererNode<'three'>;
+			}
+
+			return primitiveRendererNode;
+		}
+
 		const threeName = kebabToPascal(name.startsWith('ngt-') ? name.slice(4) : name);
 		const threeTarget = this.catalogue[threeName];
 		//
@@ -725,7 +748,11 @@ export class NgtRenderer2 implements Renderer2 {
 			// [rawValue]
 			if (instanceState?.type === 'ngt-value' && name === 'rawValue') {
 				rS[NgtRendererClassId.rawValue] = value;
-				if (parent) this.appendChild(parent, el);
+				if (parent) {
+					// untrack this attach because this is during setProperty which is a reactive context
+					// attaching potentially updates signals which is not allowed
+					untracked(() => attachThreeNodes(parent, el as unknown as NgtInstanceNode));
+				}
 				return;
 			}
 

apps/kitchen-sink-new/src/app/misc/basic/scene.ts

@@ -109,23 +109,24 @@ export function attachThreeNodes(parent: NgtInstanceNode, child: NgtInstanceNode
 				parent['material'] = [];
 			}
 
-			// attach
-			// save prev value
-			cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
-
 			if (cIS.type === 'ngt-value') {
 				if (cIS.hierarchyStore.snapshot.parent !== parent) {
 					cIS.setParent(parent);
 				}
 				// at this point we don't have rawValue yet, so we bail and wait until the Renderer recalls attach
 				if ((child as unknown as NgtRendererNode).__ngt_renderer__[NgtRendererClassId.rawValue] === undefined) return;
+
+				// save prev value
+				cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
 				attach(
 					parent,
 					(child as unknown as NgtRendererNode).__ngt_renderer__[NgtRendererClassId.rawValue],
 					attachProp,
 					true,
 				);
 			} else {
+				// save prev value
+				cIS.previousAttach = attachProp.reduce((value, key) => value[key], parent);
 				attach(parent, child, attachProp);
 			}
 		}