refactor: Generate reference documentation from TS Doc (#121)

Author: Danielku15

.gitignore

@@ -19,4 +19,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-src/alphatabdoc/
+src/alphatabdoc/
+docs/reference/types/

docs/getting-started/configuration-web.mdx

@@ -108,28 +108,6 @@ api.scoreLoaded.on( (score) => {
 });
 ```
 
-</TabItem>
-<TabItem value="html">
-
-DOM events are namespaced with a `alphaTab.` prefix and can be subscribed either via `addEventListener(eventName, handler)` or via jQuerys `.on(eventName, handler)`.
-To access potential parameters that are passed along the event, you will need to access the event details. 
-
-For raw DOM events, the info object will be contained in the [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property of the DOM event. 
-
-```js
-element.addEventListener('alphaTab.scoreLoaded', (e) => {
-    console.log('Score was loaded!', e.detail);
-});
-```
-
-For jQuery events the object related to the event will be the second parameter: 
-
-```js
-$(element).on('alphaTab.scoreLoaded', (e, score) => {
-    console.log('Score was loaded!', score);
-});
-```
-
 </TabItem>
 </Tabs>
 

docs/guides/coloring.mdx

@@ -9,21 +9,6 @@ import { SinceBadge } from '@site/src/components/SinceBadge';
 
 <SinceBadge since="1.5.0" />
 
-
-import * as alphaTab from '@coderline/alphatab';
-import { getDescriptionText } from '@site/src/alphatabdoc';
-
-export function EnumMemberList({ doc }) {
-    return (
-        <>
-            <code>{doc.name}</code>
-            <ul>
-                {doc.members.map(n => (<li key={n.name}><code>{n.name}</code> - {getDescriptionText(n.tsdoc)}</li>))}
-            </ul>
-        </>
-    )
-}
-
 alphaTab supports individual styling of music notation elements via a special `style` container which is available on
 most levels of the [Data Model](../reference/score.mdx). This means you can customize the colors of individual notes being rendered 
 base on custom logic. 
@@ -57,47 +42,46 @@ alphaTab tries to give fine grained access to coloring music notation elements.
 
 On Score level initialize the `score.style = new alphaTab.model.ScoreStyle()` and then select the element to color via `alphaTab.model.ScoreSubElement`.
 
-import scoreSubElementDoc from '@site/src/alphatabdoc/model/ScoreSubElement';
+import ScoreSubElementDoc from '@site/docs/reference/types/model/scoresubelement/index.mdx';
 
-<EnumMemberList doc={scoreSubElementDoc} />
+<ScoreSubElementDoc inlined={true} />
 
 ### Track level
 
 On Track level initialize the `track.style = new alphaTab.model.TrackStyle()` and then select the element to color via `alphaTab.model.TrackSubElement`.
 
-import trackSubElementDoc from '@site/src/alphatabdoc/model/TrackSubElement';
+import TrackSubElementDoc from '@site/docs/reference/types/model/tracksubelement/index.mdx';
 
-<EnumMemberList doc={trackSubElementDoc} />
+<TrackSubElementDoc inlined={true} />
 
 ### Bar level
 
 On Bar level initialize the `bar.style = new alphaTab.model.BarStyle()` and then select the element to color via `alphaTab.model.BarSubElement`.
 
-import barSubElementDoc from '@site/src/alphatabdoc/model/BarSubElement';
-
-<EnumMemberList doc={barSubElementDoc} />
+import BarSubElementDoc from '@site/docs/reference/types/model/barsubelement/index.mdx';
 
+<BarSubElementDoc inlined={true} />
 
 ### Voice level
 
 On Bar level initialize the `voice.style = new alphaTab.model.VoiceStyle()` and then select the element to color via `alphaTab.model.VoiceSubElement`.
 
-import voiceSubElementDoc from '@site/src/alphatabdoc/model/VoiceSubElement';
+import VoiceSubElementDoc from '@site/docs/reference/types/model/voicesubelement/index.mdx';
 
-<EnumMemberList doc={voiceSubElementDoc} />
+<VoiceSubElementDoc inlined={true} />
 
 ### Beat level
 
 On Beat level initialize the `beat.style = new alphaTab.model.BeatStyle()` and then select the element to color via `alphaTab.model.BeatSubElement`.
 
-import beatSubElementDoc from '@site/src/alphatabdoc/model/BeatSubElement';
+import BeatSubElementDoc from '@site/docs/reference/types/model/beatsubelement/index.mdx';
 
-<EnumMemberList doc={beatSubElementDoc} />
+<BeatSubElementDoc inlined={true} />
 
 ### Note level
 
 On Note level initialize the `note.style = new alphaTab.model.NoteStyle()` and then select the element to color via `alphaTab.model.NoteSubElement`.
 
-import noteSubElementDoc from '@site/src/alphatabdoc/model/NoteSubElement';
+import NoteSubElementDoc from '@site/docs/reference/types/model/notesubelement/index.mdx';
 
-<EnumMemberList doc={noteSubElementDoc} />
+<NoteSubElementDoc inlined={true} />

docs/guides/data-attributes.mdx

@@ -0,0 +1,5 @@
+--- 
+title: Data Attributes
+---
+
+TODO: Document deprecation of Data Attributes integration and move reference doc here.

docs/guides/dom-events.mdx

@@ -0,0 +1,5 @@
+--- 
+title: Data Events
+---
+
+TODO: DOM Events deprecation of Data Attributes integration and move reference doc here.

docs/guides/jquery.mdx

@@ -0,0 +1,5 @@
+--- 
+title: jQuery
+---
+
+TODO: Document deprecation of jQuery integration and move reference doc here.

docs/guides/nodejs.mdx

@@ -6,6 +6,8 @@ import { SinceBadge } from '@site/src/components/SinceBadge';
 
 <SinceBadge since="1.2.3" />
 
+export const SourceLinks = 'linkAlphaTabApi="/docs/reference/types/AlphaTabApi" linkScore="/docs/reference/types/model/Score"'
+
 The JavaScript version of alphaTab is primarily optimized for usage in Browsers. At least the top level `AlphaTabApi`
 which is a UI focused interface to alphaTab. But alphaTab can also be used in other
 JavaScript environments like Node.js or headless JavaScript engines. The core of alphaTab is platform independent
@@ -412,4 +414,4 @@ finalImageCanvas[Symbol.dispose]();
 await fs.promises.writeFile(outputFilePath, new Uint8Array(png));
 ```
 
-<img src="/img/guides/nodejs/png.png" />
+<img src="/img/guides/nodejs/png.png" />