Skip to content

Commit

Permalink
Merge pull request #16 from wajeshubham/dev
Browse files Browse the repository at this point in the history
Configure manifest.json file for PWA support
- Add pwa icons
- configure next-pwa
- Add _offline.tsx
  • Loading branch information
wajeshubham authored Feb 3, 2023
2 parents 9ffdc3d + 4b5d564 commit 9fab189
Show file tree
Hide file tree
Showing 12 changed files with 1,693 additions and 58 deletions.
11 changes: 11 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,14 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts

# PWA files

**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js.map
**/public/fallback-*.js
13 changes: 1 addition & 12 deletions layout/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {

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

<meta
property="og:image"
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
/>

<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://snippng.wajeshubham.in" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta
name="twitter:image"
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
/>
</Head>
<Header />
<div
Expand Down
15 changes: 10 additions & 5 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
const withPWA = require("next-pwa")({
dest: "public",
register: true,
disable: process.env.NODE_ENV !== "production",
skipWaiting: true,
});

module.exports = withPWA({
// nextConfig
reactStrictMode: true,
output: "standalone",
};

module.exports = nextConfig;
});
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"firebase": "^9.16.0",
"html-to-image": "^1.11.4",
"next": "13.1.5",
"next-pwa": "^5.6.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.9.4"
Expand Down
23 changes: 16 additions & 7 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,24 @@ import { SnippngContextProvider } from "@/context/SnippngEditorContext";
import { ToastProvider } from "@/context/ToastContext";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";

export default function App({ Component, pageProps }: AppProps) {
return (
<ToastProvider>
<AuthProvider>
<SnippngContextProvider>
<Component {...pageProps} />
</SnippngContextProvider>
</AuthProvider>
</ToastProvider>
<>
<Head>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
/>
</Head>
<ToastProvider>
<AuthProvider>
<SnippngContextProvider>
<Component {...pageProps} />
</SnippngContextProvider>
</AuthProvider>
</ToastProvider>
</>
);
}
32 changes: 32 additions & 0 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,19 @@ export default function Document() {
return (
<Html lang="en">
<Head>
<meta
property="og:image"
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
/>
<meta property="og:url" content="https://snippng.wajeshubham.in/" />
<meta property="og:type" content="website" />

<meta
name="twitter:image"
content="https://wajeshubham-portfolio.s3.ap-south-1.amazonaws.com/snippng-cover.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://snippng.wajeshubham.in" />
<link
rel="icon"
id="dark-scheme-icon"
Expand All @@ -78,6 +89,27 @@ export default function Document() {
href="/logo.svg"
type="image/svg+xml"
/>
<meta name="application-name" content="Snippng" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Snippng" />
<meta
name="description"
content="Create and share beautiful images of your source code."
/>
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="theme-color" content="#000000" />

<link rel="apple-touch-icon" href="/logo-512x512.svg" />
<link rel="apple-touch-icon" sizes="192x192" href="/logo-196x196.png" />
<link rel="apple-touch-icon" sizes="256x256" href="/logo-256x256.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/logo-512x512.png" />

<link rel="manifest" href="/manifest.json" />

<script dangerouslySetInnerHTML={{ __html: modeScript }} />
<script dangerouslySetInnerHTML={{ __html: faviconScript }} />
{/* TODO: Configure adsense */}
Expand Down
28 changes: 28 additions & 0 deletions pages/_offline.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { ErrorText } from "@/components";
import Layout from "@/layout/Layout";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { useRouter } from "next/router";
import React from "react";

const OfflinePage = () => {
const router = useRouter();
return (
<Layout>
<div className="w-full py-32">
<ErrorText
errorTitle="Looks like you are offline! :-("
ErrorIcon={ExclamationTriangleIcon}
errorSubTitle="Check your network connection and try again!"
errorActionProps={{
children: "Try again",
onClick: () => {
router.push("/");
},
}}
/>
</div>
</Layout>
);
};

export default OfflinePage;
Binary file added public/logo-192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/logo-256x256.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/logo-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "Snippng",
"short_name": "Snippng",
"description": "Create and share beautiful images of your source code.",
"icons": [
{
"src": "/logo-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/logo-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/logo-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#121212",
"background_color": "#121212",
"scope": "/",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
Loading

1 comment on commit 9fab189

@vercel
Copy link

@vercel vercel bot commented on 9fab189 Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.