add documentation site with markdown rendering (M12)

2026-01-18 22:07:35 +01:00
parent 94a573f218
commit 8cb3cf769d
14 changed files with 4847 additions and 0 deletions
--- a/portal/internal/web/docs/getting-started.md
+++ b/portal/internal/web/docs/getting-started.md
@@ -0,0 +1,190 @@
+# Getting Started
+
+This guide walks you through creating your first Mosis app in under 10 minutes.
+
+## Prerequisites
+
+- A Mosis developer account ([sign up here](/register))
+- Text editor (VS Code recommended)
+- Desktop Designer for testing (download from portal)
+
+## Step 1: Create a New App
+
+1. Log in to the [Developer Portal](/dashboard)
+2. Click **Create New App**
+3. Fill in the details:
+   - **Package ID**: `com.yourname.myapp` (unique identifier)
+   - **App Name**: My First App
+   - **Description**: A simple hello world app
+4. Click **Create**
+
+## Step 2: Set Up Your Project
+
+Create a project folder with this structure:
+
+```
+myapp/
+├── manifest.json
+├── icon.png
+└── assets/
+    ├── main.rml
+    └── styles.rcss
+```
+
+### manifest.json
+
+```json
+{
+  "id": "com.yourname.myapp",
+  "name": "My First App",
+  "version": "1.0.0",
+  "version_code": 1,
+  "entry": "assets/main.rml",
+  "permissions": [],
+  "min_mosis_version": "1.0.0",
+  "author": {
+    "name": "Your Name",
+    "email": "you@example.com"
+  },
+  "icons": {
+    "32": "icon.png",
+    "64": "icon.png",
+    "128": "icon.png"
+  }
+}
+```
+
+### assets/main.rml
+
+```xml
+<rml>
+<head>
+    <title>My First App</title>
+    <link type="text/rcss" href="styles.rcss"/>
+</head>
+<body>
+    <div class="container">
+        <h1>Hello, Mosis!</h1>
+        <p>This is my first app.</p>
+        <button id="click-me" onclick="handleClick()">Click Me</button>
+        <p id="counter">Clicks: 0</p>
+    </div>
+
+    <script>
+        local clicks = 0
+
+        function handleClick()
+            clicks = clicks + 1
+            document:GetElementById("counter").inner_rml = "Clicks: " .. clicks
+        end
+    </script>
+</body>
+</rml>
+```
+
+### assets/styles.rcss
+
+```css
+body {
+    font-family: LatoLatin;
+    background-color: #1a1a2e;
+    color: #ffffff;
+}
+
+.container {
+    padding: 20dp;
+    text-align: center;
+}
+
+h1 {
+    font-size: 24dp;
+    margin-bottom: 10dp;
+    color: #00d4ff;
+}
+
+p {
+    font-size: 16dp;
+    margin-bottom: 20dp;
+}
+
+button {
+    background-color: #00d4ff;
+    color: #1a1a2e;
+    padding: 12dp 24dp;
+    border-radius: 8dp;
+    font-size: 16dp;
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: #00b8e6;
+}
+
+button:active {
+    background-color: #0099cc;
+}
+
+#counter {
+    font-size: 18dp;
+    margin-top: 20dp;
+}
+```
+
+### icon.png
+
+Create a 128x128 PNG icon for your app. Use any image editor or find a placeholder icon.
+
+## Step 3: Test Locally
+
+1. Download and install the Desktop Designer from your dashboard
+2. Open a terminal in your project folder
+3. Run:
+
+```bash
+mosis-designer.exe assets/main.rml
+```
+
+The designer window opens showing your app. Changes to RML, RCSS, or Lua files automatically reload.
+
+## Step 4: Build Your Package
+
+From your project folder:
+
+```bash
+mosis build
+```
+
+This creates `myapp.mosis` - your packaged app ready for submission.
+
+## Step 5: Submit for Review
+
+1. Go to your app in the Developer Portal
+2. Click **Create New Version**
+3. Upload your `.mosis` package
+4. Add release notes
+5. Click **Submit for Review**
+
+Your app will be reviewed automatically. If it passes all checks, you can publish it to the store.
+
+## Next Steps
+
+- [UI Design Guide](guides/ui-design.md) - Learn RML/RCSS in depth
+- [Lua Scripting Guide](guides/lua-scripting.md) - Add complex interactivity
+- [Permissions Guide](guides/permissions.md) - Request device capabilities
+- [Publishing Guide](guides/publishing.md) - Tips for successful submissions
+
+## Example Apps
+
+Check out these example apps to learn from:
+
+| App | Description | Source |
+|-----|-------------|--------|
+| Calculator | Basic calculator | [View](examples/calculator.md) |
+| Notes | Simple note-taking | [View](examples/notes.md) |
+| Timer | Countdown timer | [View](examples/timer.md) |
+
+## Getting Help
+
+- Join our [Discord community](#)
+- Check the [FAQ](faq.md)
+- Search the [Troubleshooting guide](troubleshooting.md)