PWA added and some other things idk lol

package.json

@@ -2,6 +2,7 @@
   "name": "puffercat-apps",
   "version": "0.0.1",
   "private": true,
+  "description": "An app store for Puffercat's apps",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -19,6 +20,7 @@
     "@ionic/vue-router": "^6.0.0",
     "core-js": "^3.6.5",
     "ionicons": "^6.0.3",
+    "register-service-worker": "^1.7.2",
     "vue": "^3.2.21",
     "vue-router": "^4.0.12"
   },
@@ -30,6 +32,7 @@
     "@vue/cli-plugin-babel": "~5.0.0-rc.1",
     "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
     "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
+    "@vue/cli-plugin-pwa": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0-rc.1",
     "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
     "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
@@ -44,6 +47,5 @@
     "jest": "^27.3.1",
     "ts-jest": "^27.0.7",
     "typescript": "^4.3.5"
-  },
+  }
-  "description": "An Ionic project"
 }

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="228px" height="228px" viewBox="0 0 228 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Profile Photo 2 Copy 16@2x</title>
+    <g id="Profile-Photo-2-Copy-16" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="bag-handle" transform="translate(8.000000, 0.000000)" fill="#000000" fill-rule="nonzero">
+            <path d="M105.999922,0 C137.522613,0 163.076803,25.5197684 163.076803,57 L163.076803,65.1428551 L195.692164,65.1428551 C200.025247,65.1333448 204.181908,66.8560812 207.234944,69.9267835 C210.29752,72.9714416 212.013275,77.1130292 211.999923,81.4285688 L211.999923,191.993297 C211.989773,201.647378 208.027583,210.877585 201.032929,217.541511 C194.154715,224.249246 184.921355,228.003009 175.307564,228 L36.6922808,228 C16.8172953,228 0,211.20535 0,191.357137 L0,81.4285688 C0,72.4342175 7.30119718,65.1428551 16.3076803,65.1428551 L48.923041,65.1428551 L48.923041,57 C48.923041,25.5197684 74.4772311,0 105.999922,0 Z M154.922963,89.5714257 C150.419722,89.5714257 146.769123,93.2171069 146.769123,97.7142826 L146.769123,105.857139 C146.769123,128.343018 128.51613,146.571426 105.999922,146.571426 C83.4837143,146.571426 65.2307213,128.343018 65.2307213,105.857139 L65.2307213,97.7142826 C65.2307213,93.2171069 61.5801228,89.5714257 57.0768812,89.5714257 C52.5736396,89.5714257 48.923041,93.2171069 48.923041,97.7142826 L48.923041,105.857139 C48.923041,137.337369 74.4772311,162.857138 105.999922,162.857138 C137.522613,162.857138 163.076803,137.337369 163.076803,105.857139 L163.076803,97.7142826 C163.076803,93.2171069 159.426205,89.5714257 154.922963,89.5714257 Z M105.999922,16.2857138 C83.4837143,16.2857138 65.2307213,34.5141198 65.2307213,56.9999982 L65.2307213,65.1428551 L146.769123,65.1428551 L146.769123,56.9999982 C146.769123,34.5141198 128.51613,16.2857138 105.999922,16.2857138 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

public/index.html

@@ -18,7 +18,7 @@
 
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-title" content="Puffercat Apps" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   </head>
 

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/registerServiceWorker.ts

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}

src/router/index.ts

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import TabsPage from '../views/TabsPage.vue'
+import Apps from '../views/Apps.vue'
+import PufferIcons from '../views/PufferIcons.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -24,6 +26,11 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/ComingSoon.vue')
       }
     ]
+  },
+  {
+    path: '/details/PufferIcons',
+    name: 'PufferIcons',
+    component: PufferIcons,
   }
 ]
 

src/views/Apps.vue

@@ -85,7 +85,7 @@
       <ion-grid>
   <ion-row class="column-standard">
     <ion-col size="auto">
-      <img src="../assets/Icon_PufferIcons.png" class="icon">
+      <a href="/details/PufferIcons"><img src="../assets/Icon_PufferIcons.png" class="icon"></a>
     </ion-col>
     <ion-col size="auto" class="description-column">
         <ion-row>

src/views/PufferIcons.vue

@@ -0,0 +1,176 @@
+<template>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>PufferIcons</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content :fullscreen="true">
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">PufferIcons</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-grid>
+    <ion-row class="column-standard">
+      <ion-col size="auto">
+        <img src="../assets/Icon_PufferIcons.png" class="icon">
+      </ion-col>
+      <ion-col size="auto" class="description-column">
+          <ion-row>
+            <ion-column><h4 class="size-appname">PufferIcons</h4></ion-column>
+          </ion-row>
+          <ion-row>
+            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
+          </ion-row>
+      </ion-col>
+      <ion-col class="download-column">
+        <ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col size="auto">
+        <img src="../assets/Icon_Puffercat_Apps.png" class="icon">
+      </ion-col>
+      <ion-col size="auto" class="description-column">
+          <ion-row>
+            <ion-column><h4 class="size-appname">Puffercat Apps</h4></ion-column>
+          </ion-row>
+          <ion-row>
+            <ion-column><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column>
+          </ion-row>
+      </ion-col>
+      <ion-col class="download-column">
+        <ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col size="auto">
+        <img src="../assets/Icon_Shapes.png" class="icon">
+      </ion-col>
+      <ion-col size="auto" class="description-column">
+          <ion-row>
+            <ion-column><h4 class="size-appname">Shapes</h4></ion-column>
+          </ion-row>
+          <ion-row>
+            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
+          </ion-row>
+      </ion-col>
+      <ion-col class="download-column">
+        <ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col size="auto">
+        <img src="../assets/Icon_Blurry.png" class="icon">
+      </ion-col>
+      <ion-col size="auto" class="description-column">
+          <ion-row>
+            <ion-column><h4 class="size-appname">Blurry Wallpapers</h4></ion-column>
+          </ion-row>
+          <ion-row>
+            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
+          </ion-row>
+      </ion-col>
+      <ion-col class="download-column">
+        <ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col size="auto">
+        <img src="../assets/Icon_Tipper.png" class="icon">
+      </ion-col>
+      <ion-col size="auto" class="description-column">
+          <ion-row>
+            <ion-column><h4 class="size-appname">Tipper by myCALC</h4></ion-column>
+          </ion-row>
+          <ion-row>
+            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
+          </ion-row>
+      </ion-col>
+      <ion-col class="download-column">
+        <ion-button shape="round"><ion-icon :icon="arrowDown" /></ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+      </ion-content>
+    </ion-page>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent } from 'vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
+      IonModal,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel } from '@ionic/vue';
+  import ExploreContainer from '@/components/ExploreContainer.vue';
+  import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
+  
+  export default  defineComponent({
+    name: 'Tab1Page',
+    components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
+        IonModal,
+        IonItem,
+        IonList },
+    setup() {
+      return {
+        logoAndroid,
+        arrowDown,
+        logoPwa,
+        ellipsisVertical
+      }
+    }
+  });
+  </script>
+  
+  <style scoped>
+    .column-standard {
+      background-color: var(--ion-color-light-shade);
+      color: var(--ion-color-light-contrast);
+      padding: 15px;
+      border-radius: 25px;
+      margin: 5px;
+      margin-top: 15px;
+    } .icon {
+      width: 70px;
+      margin-right: 5px;
+    } ion-button {
+      --box-shadow: 0px;
+    } .download-column {
+      text-align: right;
+      display: flex;
+      justify-content: right;
+      align-items: center;
+    } .description-column {
+      align-items: center;
+    } .size-appname {
+    font-size: 18px;
+  } .size-appname-icon {
+    font-size: 18px;
+  } .logoAbout {
+    width: 125px;
+    margin: 10px;
+    margin-top: 20px;
+  } .modalContent {
+    text-align: center;
+      display: flex;
+      justify-content: center;
+  } .tableLabel {
+    text-align: left;
+  } .vueLogoLight {
+    display: inline;
+  } .vueLogoDark {
+    display: none;
+  } @media (prefers-color-scheme: dark) {
+    .vueLogoLight {
+      display: none;
+    } .vueLogoDark {
+      display: inline;
+    }
+  } .aboutFrameworkLogo {
+    width: 175px;
+  }
+  </style>

vue.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    // ...other vue-cli plugin options...
+    pwa: {
+      name: 'Puffercat Apps',
+      themeColor: '#009473',
+      msTileColor: '#001122',
+      appleMobileWebAppCapable: 'yes',
+      appleMobileWebAppStatusBarStyle: 'default',
+  
+      // configure the workbox plugin
+    /*  workboxPluginMode: 'InjectManifest',
+      workboxOptions: {
+        // swSrc is required in InjectManifest mode.
+        swSrc: 'dev/sw.js',
+        // ...other Workbox options...
+      } */
+    }
+  }