update wiki for 1.7.4

Author: Aylur

src/content/docs/config/app.md

@@ -30,9 +30,6 @@ This is the main `Gtk.Application` instance that is running.
 ## Window toggled signal
 
 ```js
-import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import App from 'resource:///com/github/Aylur/ags/app.js';
-
 // this is only signaled for windows exported in config.js
 // or added with App.addWindow
 const label = Widget.Label()
@@ -47,8 +44,6 @@ const label = Widget.Label()
 If you want to change the style sheet on runtime
 
 ```js
-import App from 'resource:///com/github/Aylur/ags/app.js';
-
 // if you apply multiple, they are all going to apply on top of each other
 App.applyCss('path-to-file');
 

src/content/docs/config/cli.md

@@ -1,8 +1,9 @@
 ---
 title: CLI
+description: Command Line Interface and running files
 ---
 
-```bash
+```sh
 $ ags --help
 
 USAGE:
@@ -18,7 +19,8 @@ OPTIONS:
     -t, --toggle-window     Show or hide a window
     -r, --run-js            Execute string as an async function
     -f, --run-file          Execute file as an async function
-    --clear-cache           Remove $HOME/.cache/ags
+    -I, --init              Initialize the configuration directory
+    -C, --clear-cache       Remove $HOME/.cache/ags
 
 ```
 
@@ -69,8 +71,7 @@ With `--run-js` it is possible to execute code when `ags` is already running.
 It is useful for: calling Service methods, updating Variable values,
 debugging or anything else.
 `--run-js` expects a string which will be the body of an *async function*
-executed relative to `app.ts`. This is important because of how you
-can import modules inside this function.
+executed relative to `app.ts`.
 
 If there is no `;` character in the string, `return` keyword will be inserted automatically
 
@@ -104,36 +105,26 @@ return 'hello from a file'
 ```
 
 :::info
-Since `--run-js` is the body of a function, you can't use top level imports
+Since `--run-js` is the body of a function, you can't use top level static imports
 :::
 
-This will throw an error
-
-```js
-#!/usr/bin/env -S ags --run-file
-import App from 'resource:///com/Aylur/github/ags/app.js'
-```
+:::important
+The function gets executed relative to `app.ts`, which means
+importing a module from your config needs a full path.
+:::
 
-You can use `import` as a method however
+this throws
 
 ```js
 #!/usr/bin/env -S ags --run-file
-const App = (await import(
-    'resource:///com/Aylur/github/ags/app.js',
-)).default;
+import Module from 'file:///path/to/file.js' // throws
 ```
 
-:::tip
-The function gets executed relative to `app.ts`,
-meaning `resource:///com/Aylur/github/ags` can be substituted as `.`
-This also means importing a module from your config needs a full path.
-:::
+You can use `import` as an **async** method
 
 ```js
 #!/usr/bin/env -S ags --run-file
-const App = (await import('./app.js')).default;
-
-const File = await import(`file:///path/to/file.js`);
+const Module = (await import('file:///path/to/file.js')).default;
 ```
 
 ## Examples

src/content/docs/config/common-issues.md

@@ -1,6 +1,6 @@
 ---
 title: Common Issues
-description: Common Issues and Tips & Trick
+description: Common Issues and Tips & Tricks
 ---
 
 ## Window doesn't show up
@@ -24,9 +24,10 @@ Widget.Window({
 ## Custom svg symbolic icons
 
 Put svgs in a directory, named `<icon-name>-symbolic.svg`
-and use `Gtk.IconTheme.append_search_path` 
+and use `Gtk.IconTheme.append_search_path` or `icons` option in exported object
 
 ```js
+// config.js
 import Gtk from 'gi://Gtk?version=3.0';
 
 Gtk.IconTheme.get_default().append_search_path(`${App.configDir}/assets`);
@@ -35,4 +36,8 @@ Widget.Icon({
     icon: 'custom-symbolic', // custom-symbolic.svg
     css: 'color: green;', // can be colored, like other named icons
 });
+
+export default {
+    icons: `${App.configDir}/assets`,
+}
 ```

src/content/docs/config/config-object.md

@@ -1,5 +1,6 @@
 ---
 title: Config Object
+description: Exported configuration object
 ---
 
 When you start `ags`, it will try to `import` the `default` `export`
@@ -10,36 +11,30 @@ the config **will not be reloaded**.
 ```js
 // config.js
 export default {
+    style: './style.css',
+    icons: './assests',
+    windows: [
+        // Array<Gtk.Window>
+    ],
     closeWindowDelay: {
         'window-name': 500, // milliseconds
     },
-    notificationPopupTimeout: 5000, // milliseconds
-    notificationForceTimeout: false,
-    cacheNotificationActions: false,
-    maxStreamVolume: 1.5, // float
-    cacheCoverArt: true,
-
     onConfigParsed: function() {
         // code that runs after this object is loaded
-    }
-
-    style: App.configDir + '/style.css',
-    windows: [
-        // Array<Gtk.Window>
-    ],
+    },
+    onWindowToggled: function (windowName, visible) {
+        print(`${windowName} is ${visible}`)
+    },
 };
 ```
 
 ## The exported config object
 
 | Field | Type | Description |
 |-------|------|-------------|
-| `closeWindowDelay` | `Record<string, number>` | Delays the closing of a window, this is useful for making animations with a revealer
-| `notificationPopupTimeout` | `number` | How long should a notification be flagged for popup
-| `notificationForceTimeout` | `boolean` | Force `notificationPopupTimeout` and ignore timeout set by notifications
-| `cacheNotificationActions` | `boolean` | Whether to cache notification actions, so that they can be reloaded
-| `maxStreamVolume` | `number` | Maximum possible volume on an Audio Stream
-| `cacheCoverArt` | `boolean` | Whether to cache mpris cover arts. `true` by default
-| `onConfigParsed` | `(app: App) => void` | Callback to execute after all user modules were resolved.
 | `style` | `string` | Path to a css file.
+| `icons` | `string` | Icon directory to append to Gtk.IconTheme.
 | `windows` | `Array<Gtk.Window>` | List of [Windows](./widgets#window).
+| `closeWindowDelay` | `Record<string, number>` | Delays the closing of a window, this is useful for making animations with a revealer
+| `onConfigParsed` | `(app: App) => void` | Callback to execute after all user modules were resolved.
+| `onWindowToggled` | `(windowName: string, visible: boolean) => void` | Callback to execute when a window is toggled.

src/content/docs/config/custom-service.md

@@ -1,15 +1,19 @@
 ---
 title: Custom Service
+description: Writing Custom Services
 ---
 
+Writing a custom Service is as simple as
+
+- declaring a class
+- defining its signals and properties
+- declaring get/set for properties
+
 This is an example Service for backlight using `brightnessctl`
 to set the brightness and `Utils.monitorFile` to watch for changes.
 
 ```js
 // brightness.js
-import Service from 'resource:///com/github/Aylur/ags/service.js';
-import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
-
 class BrightnessService extends Service {
     // every subclass of GObject.Object has to register itself
     static {
@@ -105,17 +109,16 @@ For `bind` to work, the property has to be defined in `Service.register`
 Using it with widgets is as simple as using the builtin ones.
 
 ```js
-import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import Brightness from './brightness.js';
+import brightness from './brightness.js';
 
 const slider = Widget.Slider({
-    on_change: self => Brightness.screen_value = self.value,
-    value: Brightness.bind('screen-value'),
+    on_change: self => brightness.screen_value = self.value,
+    value: brightness.bind('screen-value'),
 });
 
 const label = Label({
-    label: Brightness.bind('screen-value').transform(v => `${v}`),
-    setup: self => self.hook(Brightness, (self, screenValue) => {
+    label: brightness.bind('screen-value').transform(v => `${v}`),
+    setup: self => self.hook(brightness, (self, screenValue) => {
         // screenValue is the passed parameter from the 'screen-changed' signal
         self.label = screenValue ?? 0;
 
@@ -124,9 +127,9 @@ const label = Label({
         // the passed screenValue will be undefined the first time
 
         // all three are valid
-        self.label = `${Brightness.screenValue}`;
-        self.label = `${Brightness.screen_value}`;
-        self.label = `${Brightness['screen-value']}`;
+        self.label = `${brightness.screenValue}`;
+        self.label = `${brightness.screen_value}`;
+        self.label = `${brightness['screen-value']}`;
 
     }, 'screen-changed'),
 });