improved pwa

markokroselj · Dec 7, 2023 · 2112d69 · 2112d69
1 parent 670703c
commit 2112d69
Show file tree

Hide file tree

Showing 14 changed files with 46 additions and 18 deletions.
diff --git a/public/images/logo-144.png b/public/images/logo-144.png
diff --git a/public/images/logo-192.png b/public/images/logo-192.png
diff --git a/public/images/logo-512.png b/public/images/logo-512.png
diff --git a/public/images/maskable_icon.png b/public/images/maskable_icon.png
diff --git a/public/images/maskable_icon_x512.png b/public/images/maskable_icon_x512.png
diff --git a/public/images/screenshots/desktop-daily.png b/public/images/screenshots/desktop-daily.png
diff --git a/public/images/screenshots/desktop.png b/public/images/screenshots/desktop.png
diff --git a/public/images/screenshots/mobile-daily.jpg b/public/images/screenshots/mobile-daily.jpg
diff --git a/public/images/screenshots/mobile.jpg b/public/images/screenshots/mobile.jpg
diff --git a/public/images/site.webmanifest b/public/images/site.webmanifest
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,37 @@
+{
+    "name": "Fri menza jedilnik",
+    "short_name": "Fri menza jedilnik",
+    "start_url": "/",
+    "lang": "sl",
+    "theme_color": "#ef4444",
+    "background_color": "#ef4444",
+    "display": "standalone",
+    "orientation": "portrait",
+    "description": "Dnevni in tedenski jedilnik FRI menze.",
+    "icons": [
+        {
+            "src": "/images/android-chrome-96x96.png",
+            "sizes": "96x96",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/images/logo-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "/images/maskable_icon_x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "/images/logo-144.png",
+            "sizes": "144x144",
+            "type": "image/png",
+            "purpose": "any"
+        }
+    ]
+}
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -7,7 +7,7 @@
     <p>
         Made with ♥ by <a href="https://github.com/markokroselj" class="hover:underline" target="_blank"
             >Marko Krošelj</a
-        > using Astro.js 🚀 <a href="https://astro.build"
+        > <span class="pwa:hidden">using Astro.js 🚀 <a href="https://astro.build"
             ><img
                 src="https://astro.badg.es/v2/built-with-astro/tiny.svg"
                 alt="Built with Astro"
@@ -16,5 +16,6 @@
                 class="inline-block"
             /></a
         >
+    </span>
     </p>
 </footer>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -20,7 +20,7 @@ const { title = "Fri menza", description = "Jedilnik FRI menze" } = Astro.props;
         <link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
-        <link rel="manifest" href="/images/site.webmanifest">
+        <link rel="manifest" href="/site.webmanifest">
         <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#ef4444">
         <link rel="shortcut icon" href="/images/favicon.ico">
         <meta name="msapplication-TileColor" content="#ef4444">
@@ -31,7 +31,7 @@ const { title = "Fri menza", description = "Jedilnik FRI menze" } = Astro.props;
     </head>
     <body class="flex flex-col min-h-[100dvh] bg-pattern bg-cover">
         <Header />
-        <main class="p-3 flex-grow">
+        <main class="p-3 flex-grow" transition:animate="slide">
             <slot />
         </main>
         <Footer />

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,7 +2,11 @@
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
-		extend: {},
+		extend: {
+			screens: {
+				pwa: { raw: '(display-mode: standalone)' },
+			  },
+		},
 	},
 	plugins: [],
 }