Composables

useNotifications

You can use this composable to check if the user has granted access for sending push notifications and asking permission otherwise.

Example

<script setup>
import { useNotifications } from '../../../lib'
const NotificationManager = useNotifications()
</script>

<div v-if="NotificationManager.enabled.value">
<VPButton
    text="Enable notifications"
    v-if="!NotificationManager.permissions.granted.value"
    @click="NotificationManager.permissions.request()"
/>
<VPButton
    text="Send test notification"
    theme="alt"
    v-else
    @click="NotificationManager.worker.value.showNotification('Notification', {
        body: 'Your notifications are working'
    })"
/>
</div>

This also has methods related to theme notifications.

Subscriptions

To have permission for sending notifications at any time, use the Push API with the useNotificationSubscription composable.

interface UserSettings {
    events: boolean
    pages: 'all' | string[]
}

const subscriptionHandler = await useNotificationSubscription<UserSettings>({
    subscribeUrl: '<your server route>'
    publicKey: '<your service public key>',
})

The server route is expected to have the following methods implemented:

• POST with body of type PostSubscriptionBody
• GET ?id=<device_id>
• PATCH ?id=<device_id> with body of type PatchSubscriptionBody
• DELETE ?id=<device_id>

interface PostSubscriptionBody {
    deviceId: string
    subscription: PushSubscriptionJSON
    data: UserSettings
}

type PatchSubscriptionBody = Partial<UserSettings>

Iterate pages

To have a setting that lists pages, use the following steps to create an listing interface.

In the config expose the pages to the frontmatter:

---
exposePages: true
---

This will work if the theme configuration is applied. Otherwise use the transformPageData hook to expose the pages.

And then on the page itself escape the file extension and format the route:

<script setup>
import { useWatchedPages } from '@rocketleaguemapmaking/theme-rlmm'
const watched = useWatchedPages('rlmm-page-')
</script>

<PreferenceSetting
    :storeKey="watched.toKey(page)"
    v-for="page in $frontmatter.pages"
    :key="page"
    type="switch"
>
{{ watched.toDisplay(page) }}
</PreferenceSetting>

useSettings

Utility to interact with the local storage

import { useSettings } from '@rocketleaguemapmaking/theme-rlmm'

const settings = useSettings()
const enabled = ref(false)

onMounted(() => {
    enabled.value = settings.getBoolean('rlmm-key-enabled', true)
})

You can customize the local storage keys, colors and page classes with the theme options

Theme options

export type StorageData<Type> = Record<string,
    | string
    | { key: string, defaultValue?: Type }
>

export interface StorageOptions {
    /**
     * The local storage keys that is used by components and the theme
     * 
     * @default 
     * { 
     *     hideHomeSteamMaps: 'rlmm-home-hidesteam',
     *     hideNotificationInbox: 'rlmm-hide-navinbox',
     *     hideSidebarAction: 'rlmm-hide-action',
     *     notificationInboxLastOpened: 'rlmm-navinbox-lastopened',
     *     useSteamProtocolUrl: 'rlmm-urls-steam',
     *     watchAllPages: 'rlmm-push-all'
     * }
     */
    keys?: Partial<
        Record<
            | 'useSteamProtocolUrl'
            | 'hideHomeSteamMaps'
            | 'hideNotificationInbox'
            | 'hideSidebarAction'
            | 'notificationInboxLastOpened'
            | 'watchAllPages'
            , string
        >
    >

    // TODO: allow difference between themes
    /**
     * A set of CSS colors to apply on loading the page
     * @example { '--vp-c-bg': 'localstore-key' }
     */
    colorKeys?: StorageData<string>

    /**
     * Apply classes to the page based on local storage items
     * @example { 'green-bg': 'use-green-bg-setting' }
     */
    pageClasses?: StorageData<boolean>
}