Merge pull request #4 from albert118/feature/vue-plugin

Feature/vue plugin + demo + Safari Support + Unsupported Platform Check

Author: albert118

README.md

@@ -27,6 +27,7 @@ A Smart App Banner for promoting mobile app installs based on the Safari Apple E
 - Platform specific
   - custom banner for iOS (non-Safari) and Android user agents
   - Safari specific config
+- Option, use Sass variables to configure the banner as needed
 
 > TODO: Examples per platform
 
@@ -84,6 +85,10 @@ The price tagline defaults to FREE with platform specific defaults for both Andr
 }
 ```
 
+### SCSS Variables
+
+> TODO link here to vars file
+
 ### Vue usage (plugin TODO)
 
 > TODO

demo/vue/src/App.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
+import Logger from 'js-logger';
 import HelloWorld from './components/HelloWorld.vue';
 import TheWelcome from './components/TheWelcome.vue';
+import { useSmartAppBanner } from './smartAppBannerPlugin';
+
+const smartAppBanner = useSmartAppBanner();
+
+try {
+    // mount the component
+    smartAppBanner.mount();
+} catch (error) {
+    Logger.error(error);
+}
 </script>
 
 <template>

demo/vue/src/assets/main.css

@@ -7,7 +7,7 @@
   font-weight: normal;
 }
 
-a,
+#app a,
 .green {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
@@ -16,7 +16,7 @@ a,
 }
 
 @media (hover: hover) {
-  a:hover {
+  #app a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }

demo/vue/src/main.ts

@@ -2,5 +2,17 @@ import './assets/main.css';
 
 import { createApp } from 'vue';
 import App from './App.vue';
+import { default as createSmartAppBanner } from './smartAppBannerPlugin';
+import type { SmartBannerOptions } from 'smart-app-banner';
 
-createApp(App).mount('#app');
+createApp(App)
+    .use(createSmartAppBanner, {
+        title: 'Hello world!',
+        author: 'Albert Ferguson',
+        // using the create-vue asset logo
+        icon: '/src/assets/logo.svg',
+        verbose: true,
+        googlePlayStoreUrl: 'https://play-store-application-url',
+        appStoreUrl: 'https://app-store-application-url',
+    } as SmartBannerOptions)
+    .mount('#app');

demo/vue/src/smartAppBannerPlugin.ts

@@ -0,0 +1,49 @@
+import type { App, InjectionKey } from 'vue';
+import { SmartAppBanner, type SmartBannerOptions } from 'smart-app-banner';
+import Logger from 'js-logger';
+
+Logger.useDefaults({
+    // default to warning until we disable it with options
+    defaultLevel: Logger.WARN,
+    formatter: function (messages, context) {
+        messages.unshift('[🛍️ Smart App Banner - Plugin]');
+    },
+});
+
+export const SmartAppBannerInjectionKey = Symbol(
+    'SmartAppBanner',
+) as InjectionKey<SmartAppBanner>;
+
+export function useSmartAppBanner() {
+    const instance = inject(SmartAppBannerInjectionKey);
+
+    if (!instance) {
+        // see more here for in-depth, but usually this is as the error describes
+        // https://antfu.me/posts/async-with-composition-api
+        throw new Error(
+            'No Smart App Banner instance was provided! Double check that the Smart App Banner plugin has been registered and that the service is not called within an async setup',
+        );
+    }
+
+    return instance;
+}
+
+export default {
+    install(app: App, options: SmartBannerOptions) {
+        let instance: SmartAppBanner | undefined = undefined;
+
+        try {
+            instance = new SmartAppBanner(options);
+        } catch (error) {
+            Logger.warn(error);
+        }
+
+        if (instance) {
+            app.config.globalProperties.$smartAppBanner = instance;
+        } else {
+            Logger.warn(
+                'failed to initialise the plugin, check the logs for further details',
+            );
+        }
+    },
+};