docs: Document File Format Features and Compatibility (#108)

Author: Danielku15

docs/alphatex/lyrics.mdx

@@ -0,0 +1,48 @@
+---
+title: Lyrics
+---
+
+The lyrics system of alphaTab is borrowed from Guitar Pro. For every track multiple "lines" of lyrics can be defined which can either start at the beginning or at a later bar. 
+The syllables of the procided lyrics are spread automatically across the beats of the track. Syllables are separated with spaces. 
+If multiple words/syllables should stay on the same beat the space can be replaced with a `+`. 
+Comments which should not be displayed can be put `[into brackets]`.
+
+To add lyrics to a track use the `\lyrics "Text"` or `\lyrics StartBar "Text"` metadata tag on track/staff level.
+
+Here some samples:
+
+import { AlphaTexSample } from '@site/src/components/AlphaTexSample';
+
+<AlphaTexSample>{`
+\\title "With Lyrics"
+\\instrument piano
+.
+\\lyrics "Do Re Mi Fa So La Ti"
+C4 D4 E4 F4 | G4 A4 B4 r 
+`}</AlphaTexSample>
+
+<AlphaTexSample>{`
+\\title "Combine Syllables (and empty beats)"
+\\instrument piano
+.
+\\lyrics "Do+Do  Mi+Mi"
+C4 C4 E4 E4
+`}</AlphaTexSample>
+
+<AlphaTexSample>{`
+\\title "Start Later"
+\\instrument piano
+.
+\\lyrics 2 "Do Re Mi Fa So La Ti"
+r r r r | r r r r |
+C4 D4 E4 F4 | G4 A4 B4 r 
+`}</AlphaTexSample>
+
+<AlphaTexSample>{`
+\\title "Comment"
+\\subtitle "Useful when loading lyrics from a different source"
+\\instrument piano
+.
+\\lyrics "[This is a comment]Do Re Mi Fa"
+C4 D4 E4 F4
+`}</AlphaTexSample>

docs/formats/capella.mdx

@@ -29,6 +29,7 @@
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-tooltip": "^5.28.0",
     "webpack": "^5.94.0"
   },
   "devDependencies": {

docs/formats/guitar-pro-3-5.mdx

@@ -1,4 +1,4 @@
-import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
+import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
 
 const sidebars: SidebarsConfig = {
   docs: {
@@ -144,20 +144,47 @@ const sidebars: SidebarsConfig = {
       "alphatex/beat-effects",
       "alphatex/note-effects",
       "alphatex/percussion",
+      "alphatex/lyrics",
     ],
   },
-  showcase: {
-    Showcase: [
-      "showcase/introduction",
-      "showcase/general",
-      "showcase/layouts",
-      "showcase/music-notation",
-      "showcase/guitar-tabs",
-      "showcase/special-tracks",
-      "showcase/special-notes",
-      "showcase/effects",
-    ],
-  },
+  showcase: [
+    {
+      type: "category",
+      label: "Showcase",
+      link: {
+        type: "doc",
+        id: "showcase/introduction"
+      },
+      items: [
+        "showcase/introduction",
+        "showcase/general",
+        "showcase/layouts",
+        "showcase/music-notation",
+        "showcase/guitar-tabs",
+        "showcase/special-tracks",
+        "showcase/special-notes",
+        "showcase/effects",
+      ],
+    },
+    {
+      type: "category",
+      label: "Formats",
+      link: {
+        type: "generated-index",
+        title: "Introduction",
+        description:
+          "These pages provide an insight on what the input file formats alphaTab supports and the compatibility for rendering and expressing the same in alphaTex.",
+      },
+      items: [
+        "formats/guitar-pro-8",
+        "formats/guitar-pro-7",
+        "formats/guitar-pro-6",
+        "formats/guitar-pro-3-5",
+        "formats/musicxml",
+        "formats/capella",
+      ],
+    },
+  ],
 };
 
 module.exports = sidebars;