Update docs

docs/ModConf/README.md

@@ -4,7 +4,7 @@
 
 ## Available libaries
 
-See [`libs.ts`](https://github.com/DerGoogler/MMRL/blob/master/Website/src/components/ConfigureView/libs.ts) to see all usable modules
+See [`libs.ts`](https://github.com/DerGoogler/MMRL/blob/master/Website/src/components/ModConfView/libs.ts) to see all usable modules
 
 ## Diff. between `require` and `import`
 

docs/ModConf/components/Image.md

@@ -11,14 +11,36 @@ import { Image } from "@mmrl/ui";
 ## Usage
 
 ```js
+import React from "react"
+import { useActivity } from "@mmrl/hooks"
+import { Image, Page, Toolbar } from "@mmrl/ui";
+
+function RenderToolbar() {
+    const { context, extra } = useActivity()
+    const { title = "Default" } = extra
+    return (
+        <Toolbar modifier="noshadow">
+            <Toolbar.Left>
+                <Toolbar.BackButton onClick={context.popPage} />
+            </Toolbar.Left>
+            <Toolbar.Center>{title}</Toolbar.Center>
+        </Toolbar>
+    )
+}
+
 function App() {
-  // type is actually not required
-  return (
-    <Page>
-      <Image src="/sdcard/image.png" type="image/png" />
-    </Page>
-  );
+    return (
+        <Page renderToolbar={RenderToolbar}>
+            <Image src="/sdcard/image.png" type="image/png" />
+            <br />
+            <Image src="https://picsum.photos/536/354" />
+            <h1>Disable opening</h1>
+            <Image src="https://picsum.photos/536/354" noOpen />
+        </Page>
+    );
 }
+
+export default App
 ```
 
 ## API

docs/ModConf/components/Markdown.md

@@ -0,0 +1,51 @@
+# Image API
+
+Component to display markdown code
+
+## Setup
+
+```js
+import { Markdown } from "@mmrl/ui";
+```
+
+## Usage
+
+```js
+import React from "react"
+import { useActivity } from "@mmrl/hooks"
+import { Markdown, Page, Toolbar } from "@mmrl/ui";
+
+function RenderToolbar() {
+    const { context, extra } = useActivity()
+    const { title = "Default" } = extra
+    return (
+        <Toolbar modifier="noshadow">
+            <Toolbar.Left>
+                <Toolbar.BackButton onClick={context.popPage} />
+            </Toolbar.Left>
+            <Toolbar.Center>{title}</Toolbar.Center>
+        </Toolbar>
+    )
+}
+
+function App() {
+    return (
+        <Page sx={{ p: 1 }} renderToolbar={RenderToolbar}>
+            <Markdown>{`
+# Heading 1
+
+Hello, world!
+    `}</Markdown>
+        </Page>
+    );
+}
+
+export default App
+```
+
+## API
+
+| Attr          | Required | Type              |
+| ------------- | -------- | ----------------- |
+| `children`    | Yes      | `React.ReactNode` |
+| `fetch`       | No       | `url\|string`     |

docs/SuFile.md → docs/ModConf/functions/SuFile.md

@@ -97,3 +97,10 @@ hello.create(SuFile.NEW_FOLDER)
 // create folder with parent folders
 hello.create(SuFile.NEW_FOLDERS) 
 ```
+
+## Access native methods
+
+```js
+const native = new SuFile.create("/sdcard/hello.txt")
+native.interface
+```

docs/ModConf/hooks/useActivity.md

@@ -17,58 +17,58 @@ import { Page, Toolbar } from "@mmrl/ui";
 import { Button } from "@mui/material";
 
 function RenderToolbar() {
-  const { context, extra } = useActivity()
-  const { title = "Default" } = extra
-  return (
-    <Toolbar modifier="noshadow">
-      <Toolbar.Left>
-        <Toolbar.BackButton onClick={context.popPage} />
-      </Toolbar.Left>
-      <Toolbar.Center>{title}</Toolbar.Center>
-    </Toolbar>
-  )
+    const { context, extra } = useActivity()
+    const { title = "Default" } = extra
+    return (
+        <Toolbar modifier="noshadow">
+            <Toolbar.Left>
+                <Toolbar.BackButton onClick={context.popPage} />
+            </Toolbar.Left>
+            <Toolbar.Center>{title}</Toolbar.Center>
+        </Toolbar>
+    )
 }
 
 function App() {
-  const { context } = useActivity();
+    const { context } = useActivity();
 
-  const handleOpen = () => {
-    context.pushPage({
-      component: NewPage,
-      // don't forget this!
-      key: "MyNewPage",
-      // if your page has props
-      props: {},
-      // push any object here
-      extra: {
-        title: "Hello",
-      },
-    });
-  };
+    const handleOpen = () => {
+        context.pushPage({
+            component: NewPage,
+            // don't forget this!
+            key: "MyNewPage",
+            // if your page has props
+            props: {},
+            // push any object here
+            extra: {
+                title: "Hello",
+            },
+        });
+    };
 
-  return (
-    <Page renderToolbar={RenderToolbar}>
-      <Button variant="contained" onClick={handleOpen}>Push</Button>
-    </Page>
-  );
+    return (
+        <Page renderToolbar={RenderToolbar}>
+            <Button variant="contained" onClick={handleOpen}>Push</Button>
+        </Page>
+    );
 }
 
 const allowBack = false;
 
 function NewPage() {
-  return (
-    <Page
-      // if you want override the back event
-      onDeviceBackButton={(e) => {
-        if (allowBack) {
-          e.callParentHandler();
-        }
-      }}
-      renderToolbar={RenderToolbar}
-    >
-      Try to use your back button
-    </Page>
-  );
+    return (
+        <Page
+            // if you want override the back event
+            onDeviceBackButton={(e) => {
+                if (allowBack) {
+                    e.callParentHandler();
+                }
+            }}
+            renderToolbar={RenderToolbar}
+        >
+            Try to use your back button
+        </Page>
+    );
 }
 
 export default App

docs/ModConf/hooks/useStrings.md

@@ -0,0 +1,52 @@
+# Config Localization
+
+## Setup
+
+```js
+import { useStrings } from "@mmrl/hooks"
+import { StringsProvider } from "@mmrl/providers"
+```
+
+## Usage
+
+```jsx
+import React from "react";
+import { Page, Toolbar } from "@mmrl/ui";
+import { useStrings, useActivity } from "@mmrl/hooks"
+import { StringsProvider } from "@mmrl/providers"
+
+
+function RenderToolbar() {
+    const { context, extra } = useActivity()
+    const { title = "Default" } = extra
+    return (
+        <Toolbar modifier="noshadow">
+            <Toolbar.Left>
+                <Toolbar.BackButton onClick={context.popPage} />
+            </Toolbar.Left>
+            <Toolbar.Center>{title}</Toolbar.Center>
+        </Toolbar>
+    )
+}
+
+function App() {
+    const { strings } = useStrings()
+
+    return (
+        <Page renderToolbar={RenderToolbar}>
+            {strings("hello")}
+        </Page>
+    );
+}
+
+export default () => {
+    return (
+        <StringsProvider data={{
+            en: { hello: "Hello" },
+            de: { hello: "Hallo" }
+        }}>
+            <App />
+        </StringsProvider>
+    )
+}
+```