feat(blog): add file-based blog with dynamic slugs, MDX content and layout shell

- Introduced blog routing using Next.js App Router
- Implemented dynamic [slug] pages for blog posts
- Added MDX-based content loading via lib/posts
- Integrated shared TopBar layout with navigation
- Established clear content, lib and component separation

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/hydration-error-state.d.ts

@@ -0,0 +1,4 @@
+import type { HydrationErrorState } from '../../shared/hydration-error';
+export declare function getSquashedHydrationErrorDetails(error: Error): HydrationErrorState | null;
+export declare function attachHydrationErrorState(error: Error): void;
+export declare function storeHydrationErrorStateFromConsoleArgs(...args: any[]): void;

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/hydration-error-state.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    attachHydrationErrorState: null,
+    getSquashedHydrationErrorDetails: null,
+    storeHydrationErrorStateFromConsoleArgs: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    attachHydrationErrorState: function() {
+        return attachHydrationErrorState;
+    },
+    getSquashedHydrationErrorDetails: function() {
+        return getSquashedHydrationErrorDetails;
+    },
+    storeHydrationErrorStateFromConsoleArgs: function() {
+        return storeHydrationErrorStateFromConsoleArgs;
+    }
+});
+const _react18hydrationerror = require("../../shared/react-18-hydration-error");
+const _react19hydrationerror = require("../../shared/react-19-hydration-error");
+// We only need this for React 18 or hydration console errors in React 19.
+// Once we surface console.error in the dev overlay in pages router, we should only
+// use this for React 18.
+let hydrationErrorState = {};
+const squashedHydrationErrorDetails = new WeakMap();
+function getSquashedHydrationErrorDetails(error) {
+    return squashedHydrationErrorDetails.has(error) ? squashedHydrationErrorDetails.get(error) : null;
+}
+function attachHydrationErrorState(error) {
+    if (!(0, _react18hydrationerror.isHydrationError)(error) && !(0, _react19hydrationerror.isHydrationError)(error)) {
+        return;
+    }
+    let parsedHydrationErrorState = {};
+    // If there's any extra information in the error message to display,
+    // append it to the error message details property
+    if (hydrationErrorState.warning) {
+        // The patched console.error found hydration errors logged by React
+        // Append the logged warning to the error message
+        parsedHydrationErrorState = {
+            // It contains the warning, component stack, server and client tag names
+            ...hydrationErrorState
+        };
+        // Consume the cached hydration diff.
+        // This is only required for now when we still squashed the hydration diff log into hydration error.
+        // Once the all error is logged to dev overlay in order, this will go away.
+        if (hydrationErrorState.reactOutputComponentDiff) {
+            parsedHydrationErrorState.reactOutputComponentDiff = hydrationErrorState.reactOutputComponentDiff;
+        }
+        squashedHydrationErrorDetails.set(error, parsedHydrationErrorState);
+    }
+}
+function storeHydrationErrorStateFromConsoleArgs(...args) {
+    let [message, firstContent, secondContent, ...rest] = args;
+    if ((0, _react18hydrationerror.isHydrationWarning)(message)) {
+        // Some hydration warnings has 4 arguments, some has 3, fallback to the last argument
+        // when the 3rd argument is not the component stack but an empty string
+        // For some warnings, there's only 1 argument for template.
+        // The second argument is the diff or component stack.
+        if (args.length === 3) {
+            secondContent = '';
+        }
+        const warning = message.replace(/Warning: /, '').replace('%s', firstContent).replace('%s', secondContent)// remove the last %s from the message
+        .replace(/%s/g, '');
+        const lastArg = (rest[rest.length - 1] || '').trim();
+        hydrationErrorState.reactOutputComponentDiff = generateHydrationDiffReact18(message, firstContent, secondContent, lastArg);
+        hydrationErrorState.warning = warning;
+    } else if ((0, _react19hydrationerror.isErrorMessageWithComponentStackDiff)(message)) {
+        // Some hydration warnings has 4 arguments, some has 3, fallback to the last argument
+        // when the 3rd argument is not the component stack but an empty string
+        // For some warnings, there's only 1 argument for template.
+        // The second argument is the diff or component stack.
+        if (args.length === 3) {
+            secondContent = '';
+        }
+        const warning = message.replace('%s', firstContent).replace('%s', secondContent)// remove the last %s from the message
+        .replace(/%s/g, '');
+        const lastArg = (args[args.length - 1] || '').trim();
+        hydrationErrorState.reactOutputComponentDiff = lastArg;
+        hydrationErrorState.warning = warning;
+    }
+}
+/*
+ * Some hydration errors in React 18 does not have the diff in the error message.
+ * Instead it has the error stack trace which is component stack that we can leverage.
+ * Will parse the diff from the error stack trace
+ *  e.g.
+ *  Warning: Expected server HTML to contain a matching <div> in <p>.
+ *    at div
+ *    at p
+ *    at div
+ *    at div
+ *    at Page
+ *  output:
+ *    <Page>
+ *      <div>
+ *        <p>
+ *  >       <div>
+ *
+ */ function generateHydrationDiffReact18(message, firstContent, secondContent, lastArg) {
+    const componentStack = lastArg;
+    let firstIndex = -1;
+    let secondIndex = -1;
+    const hydrationWarningType = (0, _react18hydrationerror.getHydrationWarningType)(message);
+    // at div\n at Foo\n at Bar (....)\n -> [div, Foo]
+    const components = componentStack.split('\n')// .reverse()
+    .map((line, index)=>{
+        // `<space>at <component> (<location>)` -> `at <component> (<location>)`
+        line = line.trim();
+        // extract `<space>at <component>` to `<<component>>`
+        // e.g. `  at Foo` -> `<Foo>`
+        const [, component, location] = /at (\w+)( \((.*)\))?/.exec(line) || [];
+        // If there's no location then it's user-land stack frame
+        if (!location) {
+            if (component === firstContent && firstIndex === -1) {
+                firstIndex = index;
+            } else if (component === secondContent && secondIndex === -1) {
+                secondIndex = index;
+            }
+        }
+        return location ? '' : component;
+    }).filter(Boolean).reverse();
+    let diff = '';
+    for(let i = 0; i < components.length; i++){
+        const component = components[i];
+        const matchFirstContent = hydrationWarningType === 'tag' && i === components.length - firstIndex - 1;
+        const matchSecondContent = hydrationWarningType === 'tag' && i === components.length - secondIndex - 1;
+        if (matchFirstContent || matchSecondContent) {
+            const spaces = ' '.repeat(Math.max(i * 2 - 2, 0) + 2);
+            diff += `> ${spaces}<${component}>\n`;
+        } else {
+            const spaces = ' '.repeat(i * 2 + 2);
+            diff += `${spaces}<${component}>\n`;
+        }
+    }
+    if (hydrationWarningType === 'text') {
+        const spaces = ' '.repeat(components.length * 2);
+        diff += `+ ${spaces}"${firstContent}"\n`;
+        diff += `- ${spaces}"${secondContent}"\n`;
+    } else if (hydrationWarningType === 'text-in-tag') {
+        const spaces = ' '.repeat(components.length * 2);
+        diff += `> ${spaces}<${secondContent}>\n`;
+        diff += `>   ${spaces}"${firstContent}"\n`;
+    }
+    return diff;
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=hydration-error-state.js.map

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type PagesDevOverlayErrorBoundaryProps = {
+    children?: React.ReactNode;
+};
+type PagesDevOverlayErrorBoundaryState = {
+    error: Error | null;
+};
+export declare class PagesDevOverlayErrorBoundary extends React.PureComponent<PagesDevOverlayErrorBoundaryProps, PagesDevOverlayErrorBoundaryState> {
+    state: {
+        error: null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    render(): React.ReactNode;
+}
+export {};

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PagesDevOverlayErrorBoundary", {
+    enumerable: true,
+    get: function() {
+        return PagesDevOverlayErrorBoundary;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+class PagesDevOverlayErrorBoundary extends _react.default.PureComponent {
+    static getDerivedStateFromError(error) {
+        return {
+            error
+        };
+    }
+    // Explicit type is needed to avoid the generated `.d.ts` having a wide return type that could be specific to the `@types/react` version.
+    render() {
+        // The component has to be unmounted or else it would continue to error
+        return this.state.error ? null : this.props.children;
+    }
+    constructor(...args){
+        super(...args), this.state = {
+            error: null
+        };
+    }
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=pages-dev-overlay-error-boundary.js.map

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/next-devtools/userspace/pages/pages-dev-overlay-error-boundary.tsx"],"sourcesContent":["import React from 'react'\n\ntype PagesDevOverlayErrorBoundaryProps = {\n  children?: React.ReactNode\n}\ntype PagesDevOverlayErrorBoundaryState = { error: Error | null }\n\nexport class PagesDevOverlayErrorBoundary extends React.PureComponent<\n  PagesDevOverlayErrorBoundaryProps,\n  PagesDevOverlayErrorBoundaryState\n> {\n  state = { error: null }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n\n  // Explicit type is needed to avoid the generated `.d.ts` having a wide return type that could be specific to the `@types/react` version.\n  render(): React.ReactNode {\n    // The component has to be unmounted or else it would continue to error\n    return this.state.error ? null : this.props.children\n  }\n}\n"],"names":["PagesDevOverlayErrorBoundary","React","PureComponent","getDerivedStateFromError","error","render","state","props","children"],"mappings":";;;;+BAOaA;;;eAAAA;;;;gEAPK;AAOX,MAAMA,qCAAqCC,cAAK,CAACC,aAAa;IAMnE,OAAOC,yBAAyBC,KAAY,EAAE;QAC5C,OAAO;YAAEA;QAAM;IACjB;IAEA,yIAAyI;IACzIC,SAA0B;QACxB,uEAAuE;QACvE,OAAO,IAAI,CAACC,KAAK,CAACF,KAAK,GAAG,OAAO,IAAI,CAACG,KAAK,CAACC,QAAQ;IACtD;;QAdK,qBAILF,QAAQ;YAAEF,OAAO;QAAK;;AAWxB","ignoreList":[0]}

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-setup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type PagesDevOverlayBridgeType = typeof PagesDevOverlayBridge;
+interface PagesDevOverlayBridgeProps {
+    children?: React.ReactNode;
+}
+export declare function PagesDevOverlayBridge({ children, }: PagesDevOverlayBridgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function register(): void;
+export {};

apps/public-web/node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-setup.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    PagesDevOverlayBridge: null,
+    register: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PagesDevOverlayBridge: function() {
+        return PagesDevOverlayBridge;
+    },
+    register: function() {
+        return register;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+const _nextdevtools = require("next/dist/compiled/next-devtools");
+const _hydrationerrorstate = require("./hydration-error-state");
+const _router = require("../../../client/router");
+const _stitchederror = require("../app/errors/stitched-error");
+const _onrecoverableerror = require("../../../client/react-client-callbacks/on-recoverable-error");
+const _pagesdevoverlayerrorboundary = require("./pages-dev-overlay-error-boundary");
+const _forwardlogs = require("../app/forward-logs");
+const usePagesDevOverlayBridge = ()=>{
+    _react.default.useInsertionEffect(()=>{
+        // NDT uses a different React instance so it's not technically a state update
+        // scheduled from useInsertionEffect.
+        (0, _nextdevtools.renderPagesDevOverlay)(_stitchederror.getOwnerStack, _hydrationerrorstate.getSquashedHydrationErrorDetails, _onrecoverableerror.isRecoverableError);
+    }, []);
+    _react.default.useEffect(()=>{
+        const { handleStaticIndicator } = require('../../../client/dev/hot-reloader/pages/hot-reloader-pages');
+        _router.Router.events.on('routeChangeComplete', handleStaticIndicator);
+        return function() {
+            _router.Router.events.off('routeChangeComplete', handleStaticIndicator);
+        };
+    }, []);
+};
+function PagesDevOverlayBridge({ children }) {
+    usePagesDevOverlayBridge();
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pagesdevoverlayerrorboundary.PagesDevOverlayErrorBoundary, {
+        children: children
+    });
+}
+let isRegistered = false;
+function handleError(error) {
+    if (!error || !(error instanceof Error) || typeof error.stack !== 'string') {
+        // A non-error was thrown, we don't have anything to show. :-(
+        return;
+    }
+    (0, _hydrationerrorstate.attachHydrationErrorState)(error);
+    // Skip ModuleBuildError and ModuleNotFoundError, as it will be sent through onBuildError callback.
+    // This is to avoid same error as different type showing up on client to cause flashing.
+    if (error.name !== 'ModuleBuildError' && error.name !== 'ModuleNotFoundError') {
+        _nextdevtools.dispatcher.onUnhandledError(error);
+    }
+}
+let origConsoleError = console.error;
+function nextJsHandleConsoleError(...args) {
+    // See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
+    const maybeError = process.env.NODE_ENV !== 'production' ? args[1] : args[0];
+    (0, _hydrationerrorstate.storeHydrationErrorStateFromConsoleArgs)(...args);
+    // TODO: Surfaces non-errors logged via `console.error`.
+    handleError(maybeError);
+    (0, _forwardlogs.forwardErrorLog)(args);
+    origConsoleError.apply(window.console, args);
+}
+function onUnhandledError(event) {
+    const error = event?.error;
+    handleError(error);
+    if (error) {
+        (0, _forwardlogs.forwardUnhandledError)(error);
+    }
+}
+function onUnhandledRejection(ev) {
+    const reason = ev?.reason;
+    if (!reason || !(reason instanceof Error) || typeof reason.stack !== 'string') {
+        // A non-error was thrown, we don't have anything to show. :-(
+        return;
+    }
+    _nextdevtools.dispatcher.onUnhandledRejection(reason);
+    (0, _forwardlogs.logUnhandledRejection)(reason);
+}
+function register() {
+    if (isRegistered) {
+        return;
+    }
+    isRegistered = true;
+    try {
+        Error.stackTraceLimit = 50;
+    } catch  {}
+    (0, _forwardlogs.initializeDebugLogForwarding)('pages');
+    window.addEventListener('error', onUnhandledError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+    window.console.error = nextJsHandleConsoleError;
+}
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=pages-dev-overlay-setup.js.map