Skip to content

Commit 4b5d564

Browse files
wajeshubhamwajeshubham
authored
Merge pull request #15 from wajeshubham/pwa
PWA setup done with valid manifest.json
2 parents 8a3f892 + 77de99f commit 4b5d564

File tree

12 files changed

+1693
-58
lines changed

12 files changed

+1693
-58
lines changed

‎.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,14 @@ yarn-error.log*
3737
# typescript
3838
*.tsbuildinfo
3939
next-env.d.ts
40+
41+
# PWA files
42+
43+
**/public/sw.js
44+
**/public/workbox-*.js
45+
**/public/worker-*.js
46+
**/public/sw.js.map
47+
**/public/workbox-*.js.map
48+
**/public/worker-*.js.map
49+
**/public/fallback-*.js.map
50+
**/public/fallback-*.js

‎layout/Layout.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
1212

1313
const Layout: React.FC<Props> = ({
1414
title = "Snippng | snippets to png",
15-
description = " Create and share beautiful images of your source code.",
15+
description = "Create and share beautiful images of your source code.",
1616
className,
1717
...props
1818
}) => {
@@ -24,19 +24,8 @@ const Layout: React.FC<Props> = ({
2424
<meta property="og:title" content={title} />
2525
<meta property="og:description" content={description} />
2626

27-
<meta
28-
property="og:image"
29-
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
30-
/>
31-
32-
<meta name="twitter:card" content="summary_large_image" />
33-
<meta property="twitter:url" content="https://snippng.wajeshubham.in" />
3427
<meta name="twitter:title" content={title} />
3528
<meta name="twitter:description" content={description} />
36-
<meta
37-
name="twitter:image"
38-
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
39-
/>
4029
</Head>
4130
<Header />
4231
<div

‎next.config.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
/** @type {import('next').NextConfig} */
2-
const nextConfig = {
1+
const withPWA = require("next-pwa")({
2+
dest: "public",
3+
register: true,
4+
disable: process.env.NODE_ENV !== "production",
5+
skipWaiting: true,
6+
});
7+
8+
module.exports = withPWA({
9+
// nextConfig
310
reactStrictMode: true,
411
output: "standalone",
5-
};
6-
7-
module.exports = nextConfig;
12+
});

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"firebase": "^9.16.0",
2626
"html-to-image": "^1.11.4",
2727
"next": "13.1.5",
28+
"next-pwa": "^5.6.0",
2829
"react": "18.2.0",
2930
"react-dom": "18.2.0",
3031
"typescript": "4.9.4"

‎pages/_app.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,24 @@ import { SnippngContextProvider } from "@/context/SnippngEditorContext";
33
import { ToastProvider } from "@/context/ToastContext";
44
import "@/styles/globals.css";
55
import type { AppProps } from "next/app";
6+
import Head from "next/head";
67

78
export default function App({ Component, pageProps }: AppProps) {
89
return (
9-
<ToastProvider>
10-
<AuthProvider>
11-
<SnippngContextProvider>
12-
<Component {...pageProps} />
13-
</SnippngContextProvider>
14-
</AuthProvider>
15-
</ToastProvider>
10+
<>
11+
<Head>
12+
<meta
13+
name="viewport"
14+
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
15+
/>
16+
</Head>
17+
<ToastProvider>
18+
<AuthProvider>
19+
<SnippngContextProvider>
20+
<Component {...pageProps} />
21+
</SnippngContextProvider>
22+
</AuthProvider>
23+
</ToastProvider>
24+
</>
1625
);
1726
}

‎pages/_document.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,19 @@ export default function Document() {
6464
return (
6565
<Html lang="en">
6666
<Head>
67+
<meta
68+
property="og:image"
69+
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
70+
/>
6771
<meta property="og:url" content="https://snippng.wajeshubham.in/" />
6872
<meta property="og:type" content="website" />
73+
74+
<meta
75+
name="twitter:image"
76+
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
77+
/>
78+
<meta name="twitter:card" content="summary_large_image" />
79+
<meta property="twitter:url" content="https://snippng.wajeshubham.in" />
6980
<link
7081
rel="icon"
7182
id="dark-scheme-icon"
@@ -78,6 +89,27 @@ export default function Document() {
7889
href="/logo.svg"
7990
type="image/svg+xml"
8091
/>
92+
<meta name="application-name" content="Snippng" />
93+
<meta name="apple-mobile-web-app-capable" content="yes" />
94+
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
95+
<meta name="apple-mobile-web-app-title" content="Snippng" />
96+
<meta
97+
name="description"
98+
content="Create and share beautiful images of your source code."
99+
/>
100+
<meta name="format-detection" content="telephone=no" />
101+
<meta name="mobile-web-app-capable" content="yes" />
102+
<meta name="msapplication-TileColor" content="#000000" />
103+
<meta name="msapplication-tap-highlight" content="no" />
104+
<meta name="theme-color" content="#000000" />
105+
106+
<link rel="apple-touch-icon" href="/logo-512x512.svg" />
107+
<link rel="apple-touch-icon" sizes="192x192" href="/logo-196x196.png" />
108+
<link rel="apple-touch-icon" sizes="256x256" href="/logo-256x256.png" />
109+
<link rel="apple-touch-icon" sizes="512x512" href="/logo-512x512.png" />
110+
111+
<link rel="manifest" href="/manifest.json" />
112+
81113
<script dangerouslySetInnerHTML={{ __html: modeScript }} />
82114
<script dangerouslySetInnerHTML={{ __html: faviconScript }} />
83115
{/* TODO: Configure adsense */}

‎pages/_offline.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { ErrorText } from "@/components";
2+
import Layout from "@/layout/Layout";
3+
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
4+
import { useRouter } from "next/router";
5+
import React from "react";
6+
7+
const OfflinePage = () => {
8+
const router = useRouter();
9+
return (
10+
<Layout>
11+
<div className="w-full py-32">
12+
<ErrorText
13+
errorTitle="Looks like you are offline! :-("
14+
ErrorIcon={ExclamationTriangleIcon}
15+
errorSubTitle="Check your network connection and try again!"
16+
errorActionProps={{
17+
children: "Try again",
18+
onClick: () => {
19+
router.push("/");
20+
},
21+
}}
22+
/>
23+
</div>
24+
</Layout>
25+
);
26+
};
27+
28+
export default OfflinePage;

‎public/logo-192x192.png‎

2 KB
Loading

‎public/logo-256x256.png‎

2.76 KB
Loading

‎public/logo-512x512.png‎

5.38 KB
Loading

0 commit comments

Comments
 (0)