refactor(docs): removed bright

DuCanhGH · May 5, 2024 · 6c1924c · 6c1924c
1 parent d286e43
commit 6c1924c
Show file tree

Hide file tree

Showing 21 changed files with 1,160 additions and 286 deletions.
diff --git a/docs/content/next-pwa/configuring.mdx b/docs/content/next-pwa/configuring.mdx
@@ -9,10 +9,9 @@ type: Docs
 
 There are options you can use to customize the behavior of this plugin:
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
  // disable: process.env.NODE_ENV === "development",
@@ -29,7 +28,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
@@ -92,10 +90,9 @@ export default withPWA({
 
 `next-pwa` uses `workbox-webpack-plugin` under the hood. As such, its options are also available:
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  // Your other options,
  workboxOptions: {
@@ -109,7 +106,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
@@ -136,10 +132,9 @@ export default withPWA({
 `next-pwa` provides [a list of caching strategies out of the box](https://github.com/DuCanhGH/next-pwa/tree/master/packages/next-pwa/src/cache.ts).
 You can also write your own list like so:
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  // Your other options,
  extendDefaultRuntimeCaching: true,
@@ -156,7 +151,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({

diff --git a/docs/content/next-pwa/custom-worker.mdx b/docs/content/next-pwa/custom-worker.mdx
@@ -16,10 +16,9 @@ The plugin will check if the file exists and bundle the file to `dest/worker-*.j
 You can change the directory in which `next-pwa` looks for a custom worker implementation and change the directory in which `next-pwa` outputs the bundled
 worker:
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  customWorkerSrc: "service-worker",
  customWorkerDest: "somewhere-else", // defaults to `dest`
@@ -33,7 +32,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({

diff --git a/docs/content/next-pwa/getting-started.mdx b/docs/content/next-pwa/getting-started.mdx
@@ -15,20 +15,17 @@ type: Docs
  example](https://github.com/DuCanhGH/next-pwa/tree/master/examples/basic).
 </Callout>
 
-<Tabs>
+<Tabs titles={["npm", "yarn", "pnpm"]}>
 
 ```bash
-# title npm
 npm i @ducanh2912/next-pwa && npm i -D webpack
 ```
 
 ```bash
-# title yarn
 yarn add @ducanh2912/next-pwa && yarn add -D webpack
 ```
 
 ```bash
-# title pnpm
 pnpm add @ducanh2912/next-pwa && pnpm add -D webpack
 ```
 
@@ -40,10 +37,9 @@ pnpm add @ducanh2912/next-pwa && pnpm add -D webpack
 
 Update or create your `next.config.js` with
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
 });
@@ -54,7 +50,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({
@@ -71,10 +66,9 @@ export default withPWA({
 If your deployment platform requires your production image's size to not exceed a certain limit, you can also install `@ducanh2912/next-pwa` as one of your
 `devDependencies` and do this:
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
@@ -97,7 +91,6 @@ module.exports = (phase) => {
 ```
 
 ```js
-// title next.config.mjs
 import {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
@@ -138,8 +131,9 @@ automatically be served statically.
 
 Update `app/manifest.json` (App Router) or `public/manifest.json` (Pages Router) with the following content:
 
+<Tabs titles={["public/manifest.json"]}>
+
 ```json
-// title public/manifest.json
 {
  "name": "My awesome PWA app",
  "short_name": "PWA App",
@@ -169,14 +163,15 @@ Update `app/manifest.json` (App Router) or `public/manifest.json` (Pages Router)
 }
 ```
 
+</Tabs>
+
 ### Step 3: Add metadata to `<head />`
 
 Add the following to your `app/layout.tsx` or `pages/_app.tsx`:
 
-<Tabs>
+<Tabs titles={["app/layout.tsx", "pages/_app.tsx"]}>
 
 ```ts
-// title app/layout.tsx
 import type { Metadata, Viewport } from "next";
 
 const APP_NAME = "PWA App";
@@ -226,7 +221,6 @@ export const viewport: Viewport = {
 ```
 
 ```tsx
-// title pages/_app.tsx
 import type { AppProps } from "next/app";
 import Head from "next/head";
 

diff --git a/docs/content/next-pwa/offline-fallbacks.mdx b/docs/content/next-pwa/offline-fallbacks.mdx
@@ -26,10 +26,9 @@ When the user is offline, all pages that are not cached will fallback to `/_offl
 
 To also add a fallback for other resources, change your `next.config.js` like so:
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  // Your other options,
  fallbacks: {
@@ -54,7 +53,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({

diff --git a/docs/content/next-pwa/precaching.mdx b/docs/content/next-pwa/precaching.mdx
@@ -29,10 +29,9 @@ This is to make sure we don't precache, e.g., the precache manifest file, or oth
 By default, all JS files are precached. However, this behaviour is not desired for larger apps. If your app fits this criterion, it is recommended that you
 manually filter out JS files that are not necessary.
 
-<Tabs>
+<Tabs titles={["next.config.js", "next.config.mjs"]}>
 
 ```js
-// title next.config.js
 const withPWA = require("@ducanh2912/next-pwa").default({
  // Your other options,
  workboxOptions: { exclude: ["/some-js-files.js"] },
@@ -44,7 +43,6 @@ module.exports = withPWA({
 ```
 
 ```js
-// title next.config.mjs
 import withPWAInit from "@ducanh2912/next-pwa";
 
 const withPWA = withPWAInit({

diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts
@@ -1,5 +1,4 @@
 import { defineDocumentType, makeSource } from "contentlayer/source-files";
-
 import { rehypePlugins, remarkPlugins } from "./contentlayer.constants.js";
 import { generateToc } from "./contentlayer.utils.js";
 

diff --git a/docs/contentlayer.constants.ts b/docs/contentlayer.constants.ts
@@ -1,5 +1,20 @@
+import rehypeShiki from "@shikijs/rehype";
+import { githubDark } from "./contentlayer.themes.github-dark.js";
+import { githubLight } from "./contentlayer.themes.github-light.js";
 import rehypeSlug from "./md-plugins/headings/sluggify.js";
 
-export const rehypePlugins: any[] = [rehypeSlug];
+export const rehypePlugins: any[] = [
+ rehypeSlug,
+ [
+ rehypeShiki,
+ {
+ langs: ["bash", "json", "ts", "js", "tsx", "jsx", "svelte", "html", "vue"],
+ themes: {
+ light: githubLight,
+ dark: githubDark,
+ },
+ },
+ ],
+];
 
 export const remarkPlugins: any[] = [];