feat(blog): implement date-based sorting and minimal post preview (truncated text, date, read more link) (webpack#7890) (webpack#7911)

Author: Katari-8055

src/components/Page/Page.jsx

@@ -44,6 +44,7 @@ export default function Page(props) {
   }, [props.content]);
 
   const { hash, pathname } = useLocation();
+  const isBlogIndex = pathname === "/blog/";
 
   useEffect(() => {
     let observer;
@@ -104,6 +105,9 @@ export default function Page(props) {
     <main id="main-content" className="page">
       <Markdown>
         <h1>{title}</h1>
+        {rest.date && pathname.startsWith("/blog/") && !isBlogIndex && (
+          <div className="blog-post-date">{rest.date}</div>
+        )}
 
         {rest.thirdParty ? (
           <div className="italic my-[20px]">
@@ -116,6 +120,27 @@ export default function Page(props) {
 
         <div id="md-content">{contentRender}</div>
 
+        {rest.url === "/blog/" && (
+          <div className="blog-list">
+            {(props.pages || [])
+              .filter((post) => post.url !== "/blog/")
+              .map((post) => (
+                <div key={post.url} className="blog-post-item">
+                  <h2>
+                    <Link to={post.url}>{post.title}</Link>
+                  </h2>
+                  {post.date && (
+                    <div className="blog-post-date">{post.date}</div>
+                  )}
+                  <p>{post.teaser}</p>
+                  <Link to={post.url} className="read-more">
+                    Read More &rarr;
+                  </Link>
+                </div>
+              ))}
+          </div>
+        )}
+
         {loadRelated && (
           <div className="print:hidden">
             <h2>Further Reading</h2>
@@ -131,7 +156,7 @@ export default function Page(props) {
 
         <PageLinks page={rest} />
 
-        {(previous || next) && (
+        {!isBlogIndex && (previous || next) && (
           <AdjacentPages previous={previous} next={next} />
         )}
 
@@ -155,6 +180,7 @@ Page.propTypes = {
   related: PropTypes.array,
   previous: PropTypes.object,
   next: PropTypes.object,
+  pages: PropTypes.array,
   content: PropTypes.oneOfType([
     PropTypes.shape({
       // eslint-disable-next-line unicorn/no-thenable

src/components/Page/Page.scss

@@ -12,3 +12,87 @@
     padding: 1.5em;
   }
 }
+
+.blog-list {
+  margin-top: 2rem;
+
+  .blog-post-item {
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid #f2f2f2;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    h2 {
+      margin-top: 0;
+      margin-bottom: 0.5rem;
+      font-size: 1.8rem;
+      font-weight: 700;
+      line-height: 1.2;
+
+      a {
+        color: #2b3a42;
+        text-decoration: none;
+
+        &:hover {
+          color: #1d78c1;
+        }
+      }
+    }
+
+    .blog-post-date {
+      color: #666;
+      font-size: 1.2rem;
+      font-weight: 600;
+      margin-top: 0.25rem;
+      margin-bottom: 1rem;
+      font-style: italic;
+    }
+
+    p {
+      color: #535353;
+      line-height: 1.4;
+      margin-bottom: 1rem;
+    }
+
+    .read-more {
+      color: #1d78c1;
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+[data-theme="dark"] {
+  .blog-list {
+    .blog-post-item {
+      border-bottom-color: #222;
+
+      h2 a {
+        color: #9ab3c0 !important;
+
+        &:hover {
+          color: #8dd6f9 !important;
+        }
+      }
+
+      .blog-post-date {
+        color: #bbb;
+      }
+
+      p {
+        color: #dedede;
+      }
+
+      .read-more {
+        color: #8dd6f9;
+      }
+    }
+  }
+}

src/components/Site/Site.jsx

@@ -76,15 +76,29 @@ function Site(props) {
     }
 
     return array
-      .map(({ title, name, url, group, sort, anchors, children }) => ({
-        title: title || name,
-        content: title || name,
-        url,
-        group,
-        sort,
-        anchors,
-        children: children ? _strip(children) : [],
-      }))
+      .map(
+        ({
+          title,
+          name,
+          url,
+          group,
+          sort,
+          anchors,
+          children,
+          date,
+          teaser,
+        }) => ({
+          title: title || name,
+          content: title || name,
+          url,
+          group,
+          sort,
+          anchors,
+          date,
+          teaser,
+          children: children ? _strip(children) : [],
+        }),
+      )
       .filter(
         (page) =>
           page.title !== "printable.mdx" && !page.content.includes("Printable"),
@@ -316,14 +330,21 @@ function PageElement(props) {
         currentPage={currentPage}
         pages={sidebarPages}
       />
-      <Page {...page} content={content} previous={previous} next={next} />
+      <Page
+        {...page}
+        content={content}
+        previous={previous}
+        next={next}
+        pages={sidebarPages}
+      />
     </Fragment>
   );
 }
 
 PageElement.propTypes = {
   currentPage: PropTypes.string,
   sidebarPages: PropTypes.array,
+  pages: PropTypes.array,
   previous: PropTypes.object,
   next: PropTypes.object,
   page: PropTypes.object,

src/content/blog/2020-10-10-webpack-5-release.mdx

@@ -1,6 +1,6 @@
 ---
-title: Webpack 5 release (2020-10-10)
-sort: -202010100
+title: Webpack 5 release
+sort: 20201010
 contributors:
   - sokra
   - chenxsan

src/content/blog/2020-12-08-roadmap-2021.mdx

@@ -1,6 +1,6 @@
 ---
-title: Roadmap 2021 (2020-12-08)
-sort: -202012080
+title: Roadmap 2021
+sort: 20201208
 contributors:
   - sokra
 ---

src/content/blog/webpack-5-105.mdx …ontent/blog/2026-02-03-webpack-5-105.mdxsrc/content/blog/webpack-5-105.mdx renamed to src/content/blog/2026-02-03-webpack-5-105.mdx src/content/blog/webpack-5-105.mdx renamed to src/content/blog/2026-02-03-webpack-5-105.mdx

@@ -1,5 +1,6 @@
 ---
-title: Webpack 5.105 (2026-02-03)
+title: Webpack 5.105
+sort: 20260203
 contributors:
   - bjohansebas
 ---

…content/blog/2026-04-02-roadmap-2026.mdx …content/blog/2026-02-04-roadmap-2026.mdxsrc/content/blog/2026-04-02-roadmap-2026.mdx renamed to src/content/blog/2026-02-04-roadmap-2026.mdx src/content/blog/2026-04-02-roadmap-2026.mdx renamed to src/content/blog/2026-02-04-roadmap-2026.mdx

@@ -1,6 +1,6 @@
 ---
-title: Roadmap 2026 (2026-02-04)
-sort: 9
+title: Roadmap 2026
+sort: 20260204
 contributors:
   - evenstensberg
   - bjohansebas
@@ -37,7 +37,7 @@ You can also join the discussion about [universal target](https://github.com/web
 
 ### Support for building TypeScript without loaders
 
-Recently, in version [5.105](/blog/webpack-5-105/) we included support for **resolving the paths defined in the TypeScript configuration**, eliminating the need to use a plugin ([tsconfig-paths-webpack-plugin](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin)). Now we want to further expand TypeScript support by **removing the need to use a loader** (the most common one being _ts-loader_) to transpile TypeScript directly in webpack, which would also **reduce your project’s dependencies**.
+Recently, in version [5.105](/blog/2026-02-03-webpack-5-105/) we included support for **resolving the paths defined in the TypeScript configuration**, eliminating the need to use a plugin ([tsconfig-paths-webpack-plugin](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin)). Now we want to further expand TypeScript support by **removing the need to use a loader** (the most common one being _ts-loader_) to transpile TypeScript directly in webpack, which would also **reduce your project’s dependencies**.
 
 ### [webpack#536](https://github.com/webpack/webpack/issues/536) - Import HTML files and use them as entry points without the need for plugins
 

src/content/blog/index.mdx

@@ -8,7 +8,3 @@ contributors:
 Read here for announcements.
 
 See recent blog posts in the side bar.
-
-## Popular posts
-
-- [Webpack 5 release (2020-10-10)](/blog/2020-10-10-webpack-5-release/)

src/utilities/content-tree-enhancers.mjs

@@ -11,16 +11,19 @@ import slug from "../../src/remark-plugins/remark-slug/index.mjs";
 import remarkRemoveHeadingId from "../remark-plugins/remark-remove-heading-id/index.mjs";
 
 export const enhance = (tree, options) => {
-  // delete `./` root directory on node
-  const dir = path.normalize(options.dir).replaceAll(/^(\.\/)/gm, "");
+  // Normalize everything to forward slashes for cross-platform consistency
+  const dir = path
+    .normalize(options.dir)
+    .replaceAll("\\", "/")
+    .replace(/^\.\//, "");
+
+  const normalizedPath = tree.path.replaceAll("\\", "/");
 
-  tree.url = tree.path
+  tree.url = normalizedPath
     // delete `.mdx` extensions
     .replace(tree.extension, "")
     // delete source content directory
     .replace(dir, "")
-    // Normalize url for Windows
-    .replaceAll("\\", "/")
     // remove `index` for root urls
     .replace(/\/index$/, "")
     // replace empty strings with `/`
@@ -33,7 +36,7 @@ export const enhance = (tree, options) => {
   if (tree.type === "file") {
     const anchors = [];
     const content = fs.readFileSync(tree.path, "utf8");
-    const { attributes } = frontMatter(content);
+    const { attributes, body } = frontMatter(content);
 
     // remove underscore from fetched files
     if (tree.name[0] === "_") {
@@ -57,10 +60,33 @@ export const enhance = (tree, options) => {
 
     tree.anchors = anchors;
 
+    const dateRegex = /\((\d{4}-\d{2}-\d{2})\)/;
+    const match = attributes.title ? attributes.title.match(dateRegex) : null;
+    if (match) {
+      [, tree.date] = match;
+    } else {
+      const fileMatch = tree.name.match(/^(\d{4}-\d{2}-\d{2})/);
+      if (fileMatch) {
+        [, tree.date] = fileMatch;
+      }
+    }
+
+    const isBlogItem = normalizedPath.includes("/blog/");
+    if (isBlogItem) {
+      const teaser = (body || "")
+        .split("\n")
+        .filter((line) => line.trim() && !line.trim().startsWith("#"))
+        .slice(0, 3)
+        .join(" ")
+        .replaceAll(/\[([^\]]+)\]\([^)]+\)/g, "$1") // Strip markdown links but keep text
+        .slice(0, 240);
+      tree.teaser = `${teaser}...`;
+    }
+
     Object.assign(
       tree,
       {
-        path: tree.path.replaceAll("\\", "/"),
+        path: normalizedPath,
       },
       attributes,
     );
@@ -70,12 +96,39 @@ export const enhance = (tree, options) => {
 export const filter = () => true;
 
 export const sort = (a, b) => {
+  const aPath = (a.path || "").toLowerCase();
+  const bPath = (b.path || "").toLowerCase();
+
+  // Blog specific sorting: Index at top, then newest first
+  if (aPath.includes("/blog/") && bPath.includes("/blog/")) {
+    if (a.name === "index.mdx" || a.url === "/blog/") return -1;
+    if (b.name === "index.mdx" || b.url === "/blog/") return 1;
+
+    // Blog specific sorting: Index at top, then newest first by date
+    if (a.date && b.date) {
+      if (a.date > b.date) return -1;
+      if (a.date < b.date) return 1;
+    }
+
+    // Backup: Use manual sort property
+    if (a.sort !== undefined && b.sort !== undefined) {
+      return b.sort - a.sort;
+    }
+  }
+
   const group1 = (a.group || "").toLowerCase();
   const group2 = (b.group || "").toLowerCase();
 
   if (group1 < group2) return -1;
   if (group1 > group2) return 1;
-  if (a.sort && b.sort) return a.sort - b.sort;
+
+  if (a.sort !== undefined && b.sort !== undefined) {
+    return a.sort - b.sort;
+  } else if (a.sort !== undefined) {
+    return -1;
+  } else if (b.sort !== undefined) {
+    return 1;
+  }
 
   const aTitle = (a.title || "").toLowerCase();
   const bTitle = (b.title || "").toLowerCase();