diff --git a/docs/content/next-pwa/configuring.mdx b/docs/content/next-pwa/configuring.mdx index 435d6840..e5a71f95 100644 --- 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: - + ```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: - + ```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: - + ```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 index b40da4c2..3a1ff81e 100644 --- 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: - + ```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 index 5eaf3f3b..9dd0437c 100644 --- 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). - + ```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 - + ```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: - + ```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: + + ```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) } ``` + + ### Step 3: Add metadata to `` Add the following to your `app/layout.tsx` or `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 index 99493ad8..e1f9549a 100644 --- 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: - + ```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 index 668cc290..bbc6db07 100644 --- 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. - + ```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 index 21eaaa7d..e6ecc3da 100644 --- 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 index 9449f670..bfdbe6b8 100644 --- 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[] = []; diff --git a/docs/contentlayer.themes.github-dark.ts b/docs/contentlayer.themes.github-dark.ts new file mode 100644 index 00000000..c4102a8c --- /dev/null +++ b/docs/contentlayer.themes.github-dark.ts @@ -0,0 +1,499 @@ +import type { ThemeRegistrationRaw } from "shiki"; + +// Modified GitHub Dark theme. +// Source: https://github.com/shikijs/textmate-grammars-themes/blob/5633a2aa755b20ce1b10ca0e268f5b5828058564/packages/tm-themes/themes/github-dark.json +// License: MIT +export const githubDark: ThemeRegistrationRaw = Object.freeze({ + type: "dark", + displayName: "GitHub Dark", + name: "github-dark", + semanticHighlighting: true, + colors: { + "activityBar.activeBorder": "#f9826c", + "activityBar.background": "#0a0a0a", + "activityBar.border": "#1b1f23", + "activityBar.foreground": "#e1e4e8", + "activityBar.inactiveForeground": "#6a737d", + "activityBarBadge.background": "#0366d6", + "activityBarBadge.foreground": "#fff", + "badge.background": "#044289", + "badge.foreground": "#c8e1ff", + "breadcrumb.activeSelectionForeground": "#d1d5da", + "breadcrumb.focusForeground": "#e1e4e8", + "breadcrumb.foreground": "#959da5", + "breadcrumbPicker.background": "#2b3036", + "button.background": "#176f2c", + "button.foreground": "#dcffe4", + "button.hoverBackground": "#22863a", + "button.secondaryBackground": "#444d56", + "button.secondaryForeground": "#fff", + "button.secondaryHoverBackground": "#586069", + "checkbox.background": "#444d56", + "checkbox.border": "#1b1f23", + "debugToolBar.background": "#2b3036", + descriptionForeground: "#959da5", + "diffEditor.insertedTextBackground": "#28a74530", + "diffEditor.removedTextBackground": "#d73a4930", + "dropdown.background": "#2f363d", + "dropdown.border": "#1b1f23", + "dropdown.foreground": "#e1e4e8", + "dropdown.listBackground": "#0a0a0a", + "editor.background": "#0a0a0a", + "editor.findMatchBackground": "#ffd33d44", + "editor.findMatchHighlightBackground": "#ffd33d22", + "editor.focusedStackFrameHighlightBackground": "#2b6a3033", + "editor.foldBackground": "#58606915", + "editor.foreground": "#e1e4e8", + "editor.inactiveSelectionBackground": "#3392FF22", + "editor.lineHighlightBackground": "#2b3036", + "editor.linkedEditingBackground": "#3392FF22", + "editor.selectionBackground": "#3392FF44", + "editor.selectionHighlightBackground": "#17E5E633", + "editor.selectionHighlightBorder": "#17E5E600", + "editor.stackFrameHighlightBackground": "#C6902625", + "editor.wordHighlightBackground": "#17E5E600", + "editor.wordHighlightBorder": "#17E5E699", + "editor.wordHighlightStrongBackground": "#17E5E600", + "editor.wordHighlightStrongBorder": "#17E5E666", + "editorBracketHighlight.foreground1": "#79b8ff", + "editorBracketHighlight.foreground2": "#ffab70", + "editorBracketHighlight.foreground3": "#b392f0", + "editorBracketHighlight.foreground4": "#79b8ff", + "editorBracketHighlight.foreground5": "#ffab70", + "editorBracketHighlight.foreground6": "#b392f0", + "editorBracketMatch.background": "#17E5E650", + "editorBracketMatch.border": "#17E5E600", + "editorCursor.foreground": "#c8e1ff", + "editorError.foreground": "#f97583", + "editorGroup.border": "#1b1f23", + "editorGroupHeader.tabsBackground": "#1f2428", + "editorGroupHeader.tabsBorder": "#1b1f23", + "editorGutter.addedBackground": "#28a745", + "editorGutter.deletedBackground": "#ea4a5a", + "editorGutter.modifiedBackground": "#2188ff", + "editorIndentGuide.activeBackground": "#444d56", + "editorIndentGuide.background": "#2f363d", + "editorLineNumber.activeForeground": "#e1e4e8", + "editorLineNumber.foreground": "#444d56", + "editorOverviewRuler.border": "#1b1f23", + "editorWarning.foreground": "#ffea7f", + "editorWhitespace.foreground": "#444d56", + "editorWidget.background": "#1f2428", + errorForeground: "#f97583", + focusBorder: "#005cc5", + foreground: "#d1d5da", + "gitDecoration.addedResourceForeground": "#34d058", + "gitDecoration.conflictingResourceForeground": "#ffab70", + "gitDecoration.deletedResourceForeground": "#ea4a5a", + "gitDecoration.ignoredResourceForeground": "#6a737d", + "gitDecoration.modifiedResourceForeground": "#79b8ff", + "gitDecoration.submoduleResourceForeground": "#6a737d", + "gitDecoration.untrackedResourceForeground": "#34d058", + "input.background": "#2f363d", + "input.border": "#1b1f23", + "input.foreground": "#e1e4e8", + "input.placeholderForeground": "#959da5", + "list.activeSelectionBackground": "#39414a", + "list.activeSelectionForeground": "#e1e4e8", + "list.focusBackground": "#044289", + "list.hoverBackground": "#282e34", + "list.hoverForeground": "#e1e4e8", + "list.inactiveFocusBackground": "#1d2d3e", + "list.inactiveSelectionBackground": "#282e34", + "list.inactiveSelectionForeground": "#e1e4e8", + "notificationCenterHeader.background": "#0a0a0a", + "notificationCenterHeader.foreground": "#959da5", + "notifications.background": "#2f363d", + "notifications.border": "#1b1f23", + "notifications.foreground": "#e1e4e8", + "notificationsErrorIcon.foreground": "#ea4a5a", + "notificationsInfoIcon.foreground": "#79b8ff", + "notificationsWarningIcon.foreground": "#ffab70", + "panel.background": "#1f2428", + "panel.border": "#1b1f23", + "panelInput.border": "#2f363d", + "panelTitle.activeBorder": "#f9826c", + "panelTitle.activeForeground": "#e1e4e8", + "panelTitle.inactiveForeground": "#959da5", + "peekViewEditor.background": "#1f242888", + "peekViewEditor.matchHighlightBackground": "#ffd33d33", + "peekViewResult.background": "#1f2428", + "peekViewResult.matchHighlightBackground": "#ffd33d33", + "pickerGroup.border": "#444d56", + "pickerGroup.foreground": "#e1e4e8", + "progressBar.background": "#0366d6", + "quickInput.background": "#0a0a0a", + "quickInput.foreground": "#e1e4e8", + "scrollbar.shadow": "#0008", + "scrollbarSlider.activeBackground": "#6a737d88", + "scrollbarSlider.background": "#6a737d33", + "scrollbarSlider.hoverBackground": "#6a737d44", + "settings.headerForeground": "#e1e4e8", + "settings.modifiedItemIndicator": "#0366d6", + "sideBar.background": "#1f2428", + "sideBar.border": "#1b1f23", + "sideBar.foreground": "#d1d5da", + "sideBarSectionHeader.background": "#1f2428", + "sideBarSectionHeader.border": "#1b1f23", + "sideBarSectionHeader.foreground": "#e1e4e8", + "sideBarTitle.foreground": "#e1e4e8", + "statusBar.background": "#0a0a0a", + "statusBar.border": "#1b1f23", + "statusBar.debuggingBackground": "#931c06", + "statusBar.debuggingForeground": "#fff", + "statusBar.foreground": "#d1d5da", + "statusBar.noFolderBackground": "#0a0a0a", + "statusBarItem.prominentBackground": "#282e34", + "statusBarItem.remoteBackground": "#0a0a0a", + "statusBarItem.remoteForeground": "#d1d5da", + "tab.activeBackground": "#0a0a0a", + "tab.activeBorder": "#0a0a0a", + "tab.activeBorderTop": "#f9826c", + "tab.activeForeground": "#e1e4e8", + "tab.border": "#1b1f23", + "tab.hoverBackground": "#0a0a0a", + "tab.inactiveBackground": "#1f2428", + "tab.inactiveForeground": "#959da5", + "tab.unfocusedActiveBorder": "#0a0a0a", + "tab.unfocusedActiveBorderTop": "#1b1f23", + "tab.unfocusedHoverBackground": "#0a0a0a", + "terminal.ansiBlack": "#586069", + "terminal.ansiBlue": "#2188ff", + "terminal.ansiBrightBlack": "#959da5", + "terminal.ansiBrightBlue": "#79b8ff", + "terminal.ansiBrightCyan": "#56d4dd", + "terminal.ansiBrightGreen": "#85e89d", + "terminal.ansiBrightMagenta": "#b392f0", + "terminal.ansiBrightRed": "#f97583", + "terminal.ansiBrightWhite": "#fafbfc", + "terminal.ansiBrightYellow": "#ffea7f", + "terminal.ansiCyan": "#39c5cf", + "terminal.ansiGreen": "#34d058", + "terminal.ansiMagenta": "#b392f0", + "terminal.ansiRed": "#ea4a5a", + "terminal.ansiWhite": "#d1d5da", + "terminal.ansiYellow": "#ffea7f", + "terminal.foreground": "#d1d5da", + "terminal.tab.activeBorder": "#f9826c", + "terminalCursor.background": "#586069", + "terminalCursor.foreground": "#79b8ff", + "textBlockQuote.background": "#0a0a0a", + "textBlockQuote.border": "#444d56", + "textCodeBlock.background": "#2f363d", + "textLink.activeForeground": "#c8e1ff", + "textLink.foreground": "#79b8ff", + "textPreformat.foreground": "#d1d5da", + "textSeparator.foreground": "#586069", + "titleBar.activeBackground": "#0a0a0a", + "titleBar.activeForeground": "#e1e4e8", + "titleBar.border": "#1b1f23", + "titleBar.inactiveBackground": "#1f2428", + "titleBar.inactiveForeground": "#959da5", + "tree.indentGuidesStroke": "#2f363d", + "welcomePage.buttonBackground": "#2f363d", + "welcomePage.buttonHoverBackground": "#444d56", + }, + + settings: [ + { + scope: ["comment", "punctuation.definition.comment", "string.comment"], + settings: { + foreground: "#a3a3a3", + }, + }, + { + scope: ["constant", "entity.name.constant", "variable.other.constant", "variable.other.enummember", "variable.language"], + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: ["entity", "entity.name"], + settings: { + foreground: "#b392f0", + }, + }, + { + scope: "variable.parameter.function", + settings: { + foreground: "#e1e4e8", + }, + }, + { + scope: "entity.name.tag", + settings: { + foreground: "#85e89d", + }, + }, + { + scope: "keyword", + settings: { + foreground: "#f97583", + }, + }, + { + scope: ["storage", "storage.type"], + settings: { + foreground: "#f97583", + }, + }, + { + scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"], + settings: { + foreground: "#e1e4e8", + }, + }, + { + scope: ["string", "punctuation.definition.string", "string punctuation.section.embedded source"], + settings: { + foreground: "#9ecbff", + }, + }, + { + scope: "support", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: "meta.property-name", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: "variable", + settings: { + foreground: "#ffab70", + }, + }, + { + scope: "variable.other", + settings: { + foreground: "#e1e4e8", + }, + }, + { + scope: "invalid.broken", + settings: { + fontStyle: "italic", + foreground: "#fdaeb7", + }, + }, + { + scope: "invalid.deprecated", + settings: { + fontStyle: "italic", + foreground: "#fdaeb7", + }, + }, + { + scope: "invalid.illegal", + settings: { + fontStyle: "italic", + foreground: "#fdaeb7", + }, + }, + { + scope: "invalid.unimplemented", + settings: { + fontStyle: "italic", + foreground: "#fdaeb7", + }, + }, + { + scope: "carriage-return", + settings: { + background: "#f97583", + content: "^M", + fontStyle: "italic underline", + foreground: "#0a0a0a", + }, + }, + { + scope: "message.error", + settings: { + foreground: "#fdaeb7", + }, + }, + { + scope: "string variable", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: ["source.regexp", "string.regexp"], + settings: { + foreground: "#dbedff", + }, + }, + { + scope: [ + "string.regexp.character-class", + "string.regexp constant.character.escape", + "string.regexp source.ruby.embedded", + "string.regexp string.regexp.arbitrary-repitition", + ], + settings: { + foreground: "#dbedff", + }, + }, + { + scope: "string.regexp constant.character.escape", + settings: { + fontStyle: "bold", + foreground: "#85e89d", + }, + }, + { + scope: "support.constant", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: "support.variable", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: "meta.module-reference", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: "punctuation.definition.list.begin.markdown", + settings: { + foreground: "#ffab70", + }, + }, + { + scope: ["markup.heading", "markup.heading entity.name"], + settings: { + fontStyle: "bold", + foreground: "#79b8ff", + }, + }, + { + scope: "markup.quote", + settings: { + foreground: "#85e89d", + }, + }, + { + scope: "markup.italic", + settings: { + fontStyle: "italic", + foreground: "#e1e4e8", + }, + }, + { + scope: "markup.bold", + settings: { + fontStyle: "bold", + foreground: "#e1e4e8", + }, + }, + { + scope: ["markup.underline"], + settings: { + fontStyle: "underline", + }, + }, + { + scope: ["markup.strikethrough"], + settings: { + fontStyle: "strikethrough", + }, + }, + { + scope: "markup.inline.raw", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"], + settings: { + background: "#86181d", + foreground: "#fdaeb7", + }, + }, + { + scope: ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"], + settings: { + background: "#144620", + foreground: "#85e89d", + }, + }, + { + scope: ["markup.changed", "punctuation.definition.changed"], + settings: { + background: "#c24e00", + foreground: "#ffab70", + }, + }, + { + scope: ["markup.ignored", "markup.untracked"], + settings: { + background: "#79b8ff", + foreground: "#2f363d", + }, + }, + { + scope: "meta.diff.range", + settings: { + fontStyle: "bold", + foreground: "#b392f0", + }, + }, + { + scope: "meta.diff.header", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: "meta.separator", + settings: { + fontStyle: "bold", + foreground: "#79b8ff", + }, + }, + { + scope: "meta.output", + settings: { + foreground: "#79b8ff", + }, + }, + { + scope: [ + "brackethighlighter.tag", + "brackethighlighter.curly", + "brackethighlighter.round", + "brackethighlighter.square", + "brackethighlighter.angle", + "brackethighlighter.quote", + ], + settings: { + foreground: "#d1d5da", + }, + }, + { + scope: "brackethighlighter.unmatched", + settings: { + foreground: "#fdaeb7", + }, + }, + { + scope: ["constant.other.reference.link", "string.other.link"], + settings: { + fontStyle: "underline", + foreground: "#dbedff", + }, + }, + ], +}); diff --git a/docs/contentlayer.themes.github-light.ts b/docs/contentlayer.themes.github-light.ts new file mode 100644 index 00000000..8c583d69 --- /dev/null +++ b/docs/contentlayer.themes.github-light.ts @@ -0,0 +1,494 @@ +import type { ThemeRegistrationRaw } from "shiki"; + +// Modified GitHub Light theme. +// Source: https://github.com/shikijs/textmate-grammars-themes/blob/5633a2aa755b20ce1b10ca0e268f5b5828058564/packages/tm-themes/themes/github-light.json +// License: MIT +export const githubLight: ThemeRegistrationRaw = Object.freeze({ + type: "light", + displayName: "GitHub Light", + name: "github-light", + semanticHighlighting: true, + colors: { + "activityBar.activeBorder": "#f9826c", + "activityBar.background": "#fff", + "activityBar.border": "#e1e4e8", + "activityBar.foreground": "#2f363d", + "activityBar.inactiveForeground": "#959da5", + "activityBarBadge.background": "#2188ff", + "activityBarBadge.foreground": "#fff", + "badge.background": "#dbedff", + "badge.foreground": "#0053b3", + "breadcrumb.activeSelectionForeground": "#586069", + "breadcrumb.focusForeground": "#2f363d", + "breadcrumb.foreground": "#6a737d", + "breadcrumbPicker.background": "#fafbfc", + "button.background": "#159739", + "button.foreground": "#fff", + "button.hoverBackground": "#138934", + "button.secondaryBackground": "#e1e4e8", + "button.secondaryForeground": "#1b1f23", + "button.secondaryHoverBackground": "#d1d5da", + "checkbox.background": "#fafbfc", + "checkbox.border": "#d1d5da", + "debugToolBar.background": "#fff", + descriptionForeground: "#6a737d", + "diffEditor.insertedTextBackground": "#34d05822", + "diffEditor.removedTextBackground": "#d73a4922", + "dropdown.background": "#fafbfc", + "dropdown.border": "#e1e4e8", + "dropdown.foreground": "#2f363d", + "dropdown.listBackground": "#fff", + "editor.background": "#fff", + "editor.findMatchBackground": "#ffdf5d", + "editor.findMatchHighlightBackground": "#ffdf5d66", + "editor.focusedStackFrameHighlightBackground": "#28a74525", + "editor.foldBackground": "#d1d5da11", + "editor.foreground": "#24292e", + "editor.inactiveSelectionBackground": "#0366d611", + "editor.lineHighlightBackground": "#f6f8fa", + "editor.linkedEditingBackground": "#0366d611", + "editor.selectionBackground": "#0366d625", + "editor.selectionHighlightBackground": "#34d05840", + "editor.selectionHighlightBorder": "#34d05800", + "editor.stackFrameHighlightBackground": "#ffd33d33", + "editor.wordHighlightBackground": "#34d05800", + "editor.wordHighlightBorder": "#24943e99", + "editor.wordHighlightStrongBackground": "#34d05800", + "editor.wordHighlightStrongBorder": "#24943e50", + "editorBracketHighlight.foreground1": "#0053b3", + "editorBracketHighlight.foreground2": "#8d3c07", + "editorBracketHighlight.foreground3": "#5a32a3", + "editorBracketHighlight.foreground4": "#0053b3", + "editorBracketHighlight.foreground5": "#8d3c07", + "editorBracketHighlight.foreground6": "#5a32a3", + "editorBracketMatch.background": "#34d05840", + "editorBracketMatch.border": "#34d05800", + "editorCursor.foreground": "#044289", + "editorError.foreground": "#cb2431", + "editorGroup.border": "#e1e4e8", + "editorGroupHeader.tabsBackground": "#f6f8fa", + "editorGroupHeader.tabsBorder": "#e1e4e8", + "editorGutter.addedBackground": "#28a745", + "editorGutter.deletedBackground": "#ad1a1a", + "editorGutter.modifiedBackground": "#2188ff", + "editorIndentGuide.activeBackground": "#d7dbe0", + "editorIndentGuide.background": "#eff2f6", + "editorLineNumber.activeForeground": "#24292e", + "editorLineNumber.foreground": "#1b1f234d", + "editorOverviewRuler.border": "#fff", + "editorWarning.foreground": "#f9c513", + "editorWhitespace.foreground": "#d1d5da", + "editorWidget.background": "#f6f8fa", + errorForeground: "#cb2431", + focusBorder: "#2188ff", + foreground: "#444d56", + "gitDecoration.addedResourceForeground": "#28a745", + "gitDecoration.conflictingResourceForeground": "#8d3c07", + "gitDecoration.deletedResourceForeground": "#ad1a1a", + "gitDecoration.ignoredResourceForeground": "#959da5", + "gitDecoration.modifiedResourceForeground": "#0053b3", + "gitDecoration.submoduleResourceForeground": "#959da5", + "gitDecoration.untrackedResourceForeground": "#28a745", + "input.background": "#fafbfc", + "input.border": "#e1e4e8", + "input.foreground": "#2f363d", + "input.placeholderForeground": "#959da5", + "list.activeSelectionBackground": "#e2e5e9", + "list.activeSelectionForeground": "#2f363d", + "list.focusBackground": "#cce5ff", + "list.hoverBackground": "#ebf0f4", + "list.hoverForeground": "#2f363d", + "list.inactiveFocusBackground": "#dbedff", + "list.inactiveSelectionBackground": "#e8eaed", + "list.inactiveSelectionForeground": "#2f363d", + "notificationCenterHeader.background": "#e1e4e8", + "notificationCenterHeader.foreground": "#6a737d", + "notifications.background": "#fafbfc", + "notifications.border": "#e1e4e8", + "notifications.foreground": "#2f363d", + "notificationsErrorIcon.foreground": "#ad1a1a", + "notificationsInfoIcon.foreground": "#0053b3", + "notificationsWarningIcon.foreground": "#8d3c07", + "panel.background": "#f6f8fa", + "panel.border": "#e1e4e8", + "panelInput.border": "#e1e4e8", + "panelTitle.activeBorder": "#f9826c", + "panelTitle.activeForeground": "#2f363d", + "panelTitle.inactiveForeground": "#6a737d", + "pickerGroup.border": "#e1e4e8", + "pickerGroup.foreground": "#2f363d", + "progressBar.background": "#2188ff", + "quickInput.background": "#fafbfc", + "quickInput.foreground": "#2f363d", + "scrollbar.shadow": "#6a737d33", + "scrollbarSlider.activeBackground": "#959da588", + "scrollbarSlider.background": "#959da533", + "scrollbarSlider.hoverBackground": "#959da544", + "settings.headerForeground": "#2f363d", + "settings.modifiedItemIndicator": "#2188ff", + "sideBar.background": "#f6f8fa", + "sideBar.border": "#e1e4e8", + "sideBar.foreground": "#586069", + "sideBarSectionHeader.background": "#f6f8fa", + "sideBarSectionHeader.border": "#e1e4e8", + "sideBarSectionHeader.foreground": "#2f363d", + "sideBarTitle.foreground": "#2f363d", + "statusBar.background": "#fff", + "statusBar.border": "#e1e4e8", + "statusBar.debuggingBackground": "#f9826c", + "statusBar.debuggingForeground": "#fff", + "statusBar.foreground": "#586069", + "statusBar.noFolderBackground": "#fff", + "statusBarItem.prominentBackground": "#e8eaed", + "statusBarItem.remoteBackground": "#fff", + "statusBarItem.remoteForeground": "#586069", + "tab.activeBackground": "#fff", + "tab.activeBorder": "#fff", + "tab.activeBorderTop": "#f9826c", + "tab.activeForeground": "#2f363d", + "tab.border": "#e1e4e8", + "tab.hoverBackground": "#fff", + "tab.inactiveBackground": "#f6f8fa", + "tab.inactiveForeground": "#6a737d", + "tab.unfocusedActiveBorder": "#fff", + "tab.unfocusedActiveBorderTop": "#e1e4e8", + "tab.unfocusedHoverBackground": "#fff", + "terminal.ansiBlack": "#24292e", + "terminal.ansiBlue": "#0366d6", + "terminal.ansiBrightBlack": "#959da5", + "terminal.ansiBrightBlue": "#0053b3", + "terminal.ansiBrightCyan": "#3192aa", + "terminal.ansiBrightGreen": "#1a652a", + "terminal.ansiBrightMagenta": "#5a32a3", + "terminal.ansiBrightRed": "#cb2431", + "terminal.ansiBrightWhite": "#d1d5da", + "terminal.ansiBrightYellow": "#b08800", + "terminal.ansiCyan": "#1b7c83", + "terminal.ansiGreen": "#28a745", + "terminal.ansiMagenta": "#5a32a3", + "terminal.ansiRed": "#ad1a1a", + "terminal.ansiWhite": "#6a737d", + "terminal.ansiYellow": "#dbab09", + "terminal.foreground": "#586069", + "terminal.tab.activeBorder": "#f9826c", + "terminalCursor.background": "#d1d5da", + "terminalCursor.foreground": "#0053b3", + "textBlockQuote.background": "#fafbfc", + "textBlockQuote.border": "#e1e4e8", + "textCodeBlock.background": "#f6f8fa", + "textLink.activeForeground": "#0053b3", + "textLink.foreground": "#0366d6", + "textPreformat.foreground": "#586069", + "textSeparator.foreground": "#d1d5da", + "titleBar.activeBackground": "#fff", + "titleBar.activeForeground": "#2f363d", + "titleBar.border": "#e1e4e8", + "titleBar.inactiveBackground": "#f6f8fa", + "titleBar.inactiveForeground": "#6a737d", + "tree.indentGuidesStroke": "#e1e4e8", + "welcomePage.buttonBackground": "#f6f8fa", + "welcomePage.buttonHoverBackground": "#e1e4e8", + }, + settings: [ + { + scope: ["comment", "punctuation.definition.comment", "string.comment"], + settings: { + foreground: "#525252", + }, + }, + { + scope: ["constant", "entity.name.constant", "variable.other.constant", "variable.other.enummember", "variable.language"], + settings: { + foreground: "#0053b3", + }, + }, + { + scope: ["entity", "entity.name"], + settings: { + foreground: "#683cb9", + }, + }, + { + scope: "variable.parameter.function", + settings: { + foreground: "#24292e", + }, + }, + { + scope: "entity.name.tag", + settings: { + foreground: "#1a652a", + }, + }, + { + scope: "keyword", + settings: { + foreground: "#ad1a1a", + }, + }, + { + scope: ["storage", "storage.type"], + settings: { + foreground: "#ad1a1a", + }, + }, + { + scope: ["storage.modifier.package", "storage.modifier.import", "storage.type.java"], + settings: { + foreground: "#24292e", + }, + }, + { + scope: ["string", "punctuation.definition.string", "string punctuation.section.embedded source"], + settings: { + foreground: "#032f62", + }, + }, + { + scope: "support", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: "meta.property-name", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: "variable", + settings: { + foreground: "#8d3c07", + }, + }, + { + scope: "variable.other", + settings: { + foreground: "#24292e", + }, + }, + { + scope: "invalid.broken", + settings: { + fontStyle: "italic", + foreground: "#b31d28", + }, + }, + { + scope: "invalid.deprecated", + settings: { + fontStyle: "italic", + foreground: "#b31d28", + }, + }, + { + scope: "invalid.illegal", + settings: { + fontStyle: "italic", + foreground: "#b31d28", + }, + }, + { + scope: "invalid.unimplemented", + settings: { + fontStyle: "italic", + foreground: "#b31d28", + }, + }, + { + scope: "carriage-return", + settings: { + background: "#ad1a1a", + content: "^M", + fontStyle: "italic underline", + foreground: "#fafbfc", + }, + }, + { + scope: "message.error", + settings: { + foreground: "#b31d28", + }, + }, + { + scope: "string variable", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: ["source.regexp", "string.regexp"], + settings: { + foreground: "#032f62", + }, + }, + { + scope: [ + "string.regexp.character-class", + "string.regexp constant.character.escape", + "string.regexp source.ruby.embedded", + "string.regexp string.regexp.arbitrary-repitition", + ], + settings: { + foreground: "#032f62", + }, + }, + { + scope: "string.regexp constant.character.escape", + settings: { + fontStyle: "bold", + foreground: "#1a652a", + }, + }, + { + scope: "support.constant", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: "support.variable", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: "meta.module-reference", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: "punctuation.definition.list.begin.markdown", + settings: { + foreground: "#8d3c07", + }, + }, + { + scope: ["markup.heading", "markup.heading entity.name"], + settings: { + fontStyle: "bold", + foreground: "#0053b3", + }, + }, + { + scope: "markup.quote", + settings: { + foreground: "#1a652a", + }, + }, + { + scope: "markup.italic", + settings: { + fontStyle: "italic", + foreground: "#24292e", + }, + }, + { + scope: "markup.bold", + settings: { + fontStyle: "bold", + foreground: "#24292e", + }, + }, + { + scope: ["markup.underline"], + settings: { + fontStyle: "underline", + }, + }, + { + scope: ["markup.strikethrough"], + settings: { + fontStyle: "strikethrough", + }, + }, + { + scope: "markup.inline.raw", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"], + settings: { + background: "#ffeef0", + foreground: "#b31d28", + }, + }, + { + scope: ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"], + settings: { + background: "#f0fff4", + foreground: "#1a652a", + }, + }, + { + scope: ["markup.changed", "punctuation.definition.changed"], + settings: { + background: "#ffebda", + foreground: "#8d3c07", + }, + }, + { + scope: ["markup.ignored", "markup.untracked"], + settings: { + background: "#0053b3", + foreground: "#f6f8fa", + }, + }, + { + scope: "meta.diff.range", + settings: { + fontStyle: "bold", + foreground: "#683cb9", + }, + }, + { + scope: "meta.diff.header", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: "meta.separator", + settings: { + fontStyle: "bold", + foreground: "#0053b3", + }, + }, + { + scope: "meta.output", + settings: { + foreground: "#0053b3", + }, + }, + { + scope: [ + "brackethighlighter.tag", + "brackethighlighter.curly", + "brackethighlighter.round", + "brackethighlighter.square", + "brackethighlighter.angle", + "brackethighlighter.quote", + ], + settings: { + foreground: "#586069", + }, + }, + { + scope: "brackethighlighter.unmatched", + settings: { + foreground: "#b31d28", + }, + }, + { + scope: ["constant.other.reference.link", "string.other.link"], + settings: { + fontStyle: "underline", + foreground: "#032f62", + }, + }, + ], +}); diff --git a/docs/package.json b/docs/package.json index 3a83f0b5..e98afd36 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,6 @@ "@ducanh2912/next-pwa": "workspace:*", "@mantine/hooks": "7.9.0", "@tabler/icons-react": "3.3.0", - "bright": "0.8.5", "client-only": "0.0.1", "contentlayer": "0.3.4", "highlight.js": "11.9.0", @@ -25,6 +24,7 @@ "zustand": "4.5.2" }, "devDependencies": { + "@shikijs/rehype": "1.4.0", "@types/extend": "3.0.4", "@types/hast": "3.0.4", "@types/mdast": "4.0.3", @@ -46,6 +46,7 @@ "postcss": "8.4.38", "rehype-highlight": "7.0.0", "rehype-sanitize": "6.0.0", + "shiki": "1.4.0", "tailwindcss": "3.4.3", "typescript": "5.5.0-dev.20240504", "unified": "10.1.2", diff --git a/docs/src/app/(home)/code-showcase.mdx b/docs/src/app/(home)/code-showcase.mdx index e9917239..ec589105 100644 --- a/docs/src/app/(home)/code-showcase.mdx +++ b/docs/src/app/(home)/code-showcase.mdx @@ -1,7 +1,8 @@ + + ```js -// title next.config.js const withPWA = require("@ducanh2912/next-pwa").default({ dest: "public", }); @@ -11,6 +12,8 @@ module.exports = withPWA({ }); ``` + + ## Easy to setup Just wrap your Next config with `withPWA` and you are ready to go! You do not need to configure much, but there are many options to customize `next-pwa` to your @@ -20,8 +23,9 @@ liking. + + ```js -// title next.config.js // @ts-check const withPWA = require("@ducanh2912/next-pwa").default({ // You will get hints as you type here. You can also hover over these options @@ -35,6 +39,8 @@ module.exports = withPWA({ }); ``` + + ## TypeScript support `next-pwa` is built with TypeScript. As you configure `next-pwa`, you will get type hints and detailed description of its options. If you directly wrap your @@ -44,8 +50,9 @@ Next config with `withPWA`, it will automatically be typed with `NextConfig`! + + ```js -// title next.config.js const withPWA = require("@ducanh2912/next-pwa").default({ dest: "public", // disable: process.env.NODE_ENV === "development", @@ -68,6 +75,8 @@ module.exports = withPWA({ }); ``` + + ## Configurable There are just [so many options](/docs/next-pwa/configuring) thanks to Workbox's extensive API 🤯 You can disable the plugin, change how it caches stuff diff --git a/docs/src/app/docs/[[...slug]]/page.tsx b/docs/src/app/docs/[[...slug]]/page.tsx index 43e12794..ffcc306c 100644 --- a/docs/src/app/docs/[[...slug]]/page.tsx +++ b/docs/src/app/docs/[[...slug]]/page.tsx @@ -3,7 +3,7 @@ import { getMDXComponent } from "next-contentlayer/hooks"; import { notFound } from "next/navigation"; import { GITHUB_REPO_URL } from "@/shared/constants.js"; -import { mdxComponents, tocHeadingMdxComponents, tocMdxComponents } from "@/shared/mdxComponents.js"; +import { tocHeadingMdxComponents, tocMdxComponents } from "@/shared/mdxComponents.js"; import type { GenerateMetadata, PageComponent } from "@/shared/types.js"; import { clsx } from "@/utils/clsx.js"; import { TocProvider } from "@/shared/TocContext"; diff --git a/docs/src/app/globals.css b/docs/src/app/globals.css index ec349248..5a46efb8 100644 --- a/docs/src/app/globals.css +++ b/docs/src/app/globals.css @@ -2,6 +2,16 @@ @tailwind components; @tailwind utilities; +html[data-theme="dark"] .shiki, +html[data-theme="dark"] .shiki span:not([class^="twoslash-"]) { + color: var(--shiki-dark) !important; + background-color: var(--shiki-dark-bg) !important; + /* Optional, if you also want font styles */ + font-style: var(--shiki-dark-font-style) !important; + font-weight: var(--shiki-dark-font-weight) !important; + text-decoration: var(--shiki-dark-text-decoration) !important; +} + @layer base { :root { --navbar-height: 4rem; diff --git a/docs/src/components/Code.tsx b/docs/src/components/Code.tsx deleted file mode 100644 index dda1398f..00000000 --- a/docs/src/components/Code.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Code } from "bright"; -import type { CSSProperties } from "react"; - -import { title } from "./bright-extensions.js"; - -Code.theme = { - dark: "github-dark", - light: "github-light", - lightSelector: "html[data-theme='light']", -}; -Code.extensions = [title]; -Code.className = - "!rounded-lg !border !border-neutral-300 dark:!border-neutral-800"; -Code.style = { - "--tab-top-border": "transparent", -} as unknown as CSSProperties; - -export { Code }; diff --git a/docs/src/components/Tabs.tsx b/docs/src/components/Tabs.tsx new file mode 100644 index 00000000..c05e136b --- /dev/null +++ b/docs/src/components/Tabs.tsx @@ -0,0 +1,63 @@ +"use client"; +import { clsx } from "@/utils/clsx"; +import { useState, type ReactElement, useId } from "react"; + +export const Tabs = ({ titles, children }: { titles: string[]; children: ReactElement | ReactElement[] }) => { + const [currentIndex, setCurrentIndex] = useState(0); + const id = useId(); + const codes = Array.isArray(children) ? children : [children]; + if (titles.length !== codes.length) { + return <>; + } + return ( +
+
+
+ {titles.map((t, idx) => { + const isActive = idx === currentIndex; + return ( + + ); + })} +
+ +
+ {codes.map((e, idx) => { + const isActive = idx === currentIndex; + return ( +
+ {isActive && e} +
+ ); + })} +
+
+ ); +}; diff --git a/docs/src/components/Tabs/bright-extensions.tsx b/docs/src/components/Tabs/bright-extensions.tsx deleted file mode 100644 index c6069247..00000000 --- a/docs/src/components/Tabs/bright-extensions.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { BrightProps, Extension } from "bright"; -import { Code } from "bright"; - -import { TabsContent, TabsList, TabsRoot } from "./components.js"; - -const TitleBarComponent: BrightProps["TitleBarContent"] = (brightProps) => { - const { subProps, title, Tab } = brightProps; - const titles = subProps?.length - ? subProps.map((subProp) => subProp.title) - : [title]; - const childProps = subProps?.length ? subProps : [brightProps]; - return ( - - {titles.map((title, i) => ( - - ))} - - ); -}; - -const Root: BrightProps["Root"] = (brightProps) => { - const { subProps, title, ...rest } = brightProps; - - const titles = subProps?.length - ? subProps.map((subProp) => subProp.title) - : [title]; - - return ( - -