docs: polished docs

.eslintignore

@@ -34,20 +34,17 @@ CHANGELOG.md
 next-env.d.ts
 
 # examples
-/.next/
-/out/
+.next/
+out/
 
-/build
+build/
 
-/coverage
+coverage/
 
 .DS_Store
 *.pem
 
-*.css
-*.json
-
-.vercel
+.vercel/
 
 **/public/workbox**
 **/public/sw**

.prettierignore

@@ -31,13 +31,30 @@ tsconfig.tsbuildinfo
 # examples
 examples/*/.next
 
-# next-pwa
+# next.js
+.next/
+out/
+
+build/
+
+coverage/
+
+.DS_Store
+*.pem
+
+*.css
+*.json
+
+.vercel/
+
 **/public/workbox**
 **/public/sw**
 **/public/worker**
 **/public/fallback**
 **/public/precache**
 
-# others
+# other files
 LICENSE
-CODE_OF_CONDUCT.md
+CODE_OF_CONDUCT.md
+*.css
+*.json

.prettierrc.json

@@ -4,5 +4,6 @@
   "singleQuote": false,
   "semi": true,
   "trailingComma": "es5",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

docs/content/next-pwa/configuring.mdx

@@ -10,6 +10,7 @@ type: Docs
 There are options you can use to customize the behavior of this plugin:
 
 ```js
+// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
   dest: "public",
   // disable: process.env.NODE_ENV === "development",
@@ -28,6 +29,7 @@ module.exports = withPWA({
 or if you prefer ESM:
 
 ```js
+// title next.config.js
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
@@ -94,6 +96,7 @@ for [GenerateSW](https://developer.chrome.com/docs/workbox/modules/workbox-webpa
 To pass these options to `Workbox`, change your `next.config.js` like so:
 
 ```js
+// title next.config.js
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
@@ -115,6 +118,7 @@ export default withPWA({
 If you want to have your own runtime caching rules, change your `next.config.js` like so:
 
 ```js
+// title next.config.js
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({

docs/content/next-pwa/custom-worker.mdx

@@ -16,6 +16,7 @@ For example, to disable `Workbox`'s logging, you can simply add `self.__WB_DISAB
 You can change the directory of your custom worker file by adding `customWorkerDir` (this path is relative to `baseDir`):
 
 ```js
+// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
   customWorkerDir: "serviceworker",
   // ...

docs/content/next-pwa/getting-started.mdx

@@ -15,33 +15,45 @@ type: Docs
   example](https://github.com/DuCanhGH/next-pwa/tree/master/examples/basic).
 </Callout>
 
+<Tabs>
 ```bash
+# title npm
 npm i @ducanh2912/next-pwa
-# or
-# yarn add @ducanh2912/next-pwa
-# or
-# pnpm add @ducanh2912/next-pwa
 ```
 
+```bash
+# title yarn
+yarn add @ducanh2912/next-pwa
+```
+
+```bash
+# title pnpm
+pnpm add @ducanh2912/next-pwa
+```
+
+</Tabs>
+
 ## Basic usage
 
 ### Step 1: Wrap your Next config with `withPWA`
 
 Update or create your `next.config.js` with
 
+<Tabs>
 ```js
+// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
   dest: "public",
 });
 
 module.exports = withPWA({
-  // Next.js config
+// Next.js config
 });
-```
 
-or if you prefer ESM:
+````
 
 ```js
+// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
@@ -51,35 +63,39 @@ const withPWA = withPWAInit({
 export default withPWA({
   // Next.js config
 });
-```
+````
+
+</Tabs>
 
 If your deployment platform requires your production image's size to not exceed a certain limit, you can also do this:
 
+<Tabs>
 ```js
+// title next.config.js
 const {
   PHASE_DEVELOPMENT_SERVER,
   PHASE_PRODUCTION_BUILD,
 } = require("next/constants");
 
-/** @type {import("next").NextConfig} */
+/\*_ @type {import("next").NextConfig} _/
 const nextConfig = {
-  reactStrictMode: true,
+reactStrictMode: true,
 };
 
 module.exports = (phase) => {
-  if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) {
-    const withPWA = require("@ducanh2912/next-pwa").default({
-      dest: "public",
-    });
-    return withPWA(nextConfig);
-  }
-  return nextConfig;
+if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) {
+const withPWA = require("@ducanh2912/next-pwa").default({
+dest: "public",
+});
+return withPWA(nextConfig);
+}
+return nextConfig;
 };
-```
 
-or if you are using ESM:
+````
 
 ```js
+// title next.config.mjs
 import {
   PHASE_DEVELOPMENT_SERVER,
   PHASE_PRODUCTION_BUILD,
@@ -101,7 +117,9 @@ const nextConfigFunction = async (phase) => {
 };
 
 export default nextConfigFunction;
-```
+````
+
+</Tabs>
 
 <Callout>
   **Note**: This plugin is written in Typescript and JSDoc is supported. It is
@@ -136,9 +154,10 @@ in your deployment workflow.
 
 #### Option 2: Using a custom server
 
-Example `server.js`
+Example server:
 
 ```js
+// title server.js
 const { createServer } = require("http");
 const { join } = require("path");
 const { parse } = require("url");
@@ -183,6 +202,7 @@ app.prepare().then(() => {
 Create a `manifest.json` file in your `public` folder:
 
 ```json
+// title manifest.json
 {
   "name": "My awesome PWA app",
   "short_name": "PWA App",
@@ -216,7 +236,8 @@ Create a `manifest.json` file in your `public` folder:
 
 Add the following code to your `_app.tsx`'s `<Head />`:
 
-```jsx
+```tsx
+// title _app.tsx
 <head>
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>My awesome PWA app</title>
@@ -259,6 +280,7 @@ Add the following code to your `_app.tsx`'s `<Head />`:
 and these if you want to add a startup image for Apple devices.
 
 ```tsx
+// title _app.tsx
 <head>
   {/* the above code */}
   <link
@@ -303,6 +325,7 @@ or if you are using the `app` directory, export this from your root `layout.tsx`
 and `apple-icon.png` to `app/`):
 
 ```ts
+// title layout.tsx
 import type { Metadata } from "next";
 
 const APP_NAME = "PWA App";

docs/content/next-pwa/offline-fallbacks.mdx

@@ -8,13 +8,14 @@ type: Docs
 With this feature, when fetching (from both cache and network) fails, a precached resource is served rather than an error.
 
 To get started, simply add a `/_offline.tsx` file to `pages/` or a `/~offline/page.tsx` file to `app/`. You are all set!
-When the user is offline, all pages that are not cached will fallback to `/_offline`/`/~offline`.
+When the user is offline, all pages that are not cached will fallback to `/_offline` (or `/~offline` if you are using App Router).
 
 **[Use this example to see it in action](https://github.com/DuCanhGH/next-pwa/tree/master/examples/offline-fallback-v2)**
 
 To also add a fallback for other resources, change your `next.config.js` like so:
 
 ```js
+// title next.config.js
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({

docs/contentlayer.constants.ts

@@ -1,36 +1,7 @@
-import rehypeHighlight from "rehype-highlight";
-import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import type { PluggableList } from "unified";
 
 import rehypeSlug from "./md-plugins/headings/sluggify.js";
 
-export const rehypePlugins: PluggableList = [
-  [
-    rehypeSanitize,
-    {
-      ...defaultSchema,
-      attributes: {
-        ...defaultSchema.attributes,
-        code: [
-          ...(defaultSchema.attributes?.code || []),
-          // List of all allowed languages:
-          [
-            "className",
-            "language-js",
-            "language-jsx",
-            "language-ts",
-            "language-tsx",
-            "language-css",
-            "language-md",
-            "language-bash",
-            "language-json",
-          ],
-        ],
-      },
-    },
-  ],
-  rehypeHighlight,
-  rehypeSlug,
-];
+export const rehypePlugins: PluggableList = [rehypeSlug];
 
 export const remarkPlugins: PluggableList = [];

docs/package.json

@@ -12,6 +12,7 @@
     "@ducanh2912/next-pwa": "workspace:*",
     "@mantine/hooks": "6.0.15",
     "@tabler/icons-react": "2.23.0",
+    "bright": "0.8.2",
     "client-only": "0.0.1",
     "contentlayer": "0.3.3",
     "highlight.js": "11.8.0",

docs/src/app/docs/Sidebar.tsx

@@ -14,12 +14,12 @@ const SidebarContent = ({ node }: { node: DocsTree }) => {
           <>
             {hasChildTree && (
               <div className="transform-gpu overflow-hidden transition-all ease-in-out motion-reduce:transition-none">
-                <div className="transition-opacity duration-500 ease-in-out opacity-100 ltr:pr-0 rtl:pl-0">
+                <div className="opacity-100 transition-opacity duration-500 ease-in-out ltr:pr-0 rtl:pl-0">
                   <ul
                     className={clsx(
-                      "flex flex-col relative",
+                      "relative flex flex-col",
                       "before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[''] dark:before:bg-neutral-800",
-                      "ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3"
+                      "ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0"
                     )}
                   >
                     {node.children.map((childNode) => (