Downloads page, OS auto-detection, and broken link fixes

blog/2019-01-14-podman-machine-and-boot2podman.md

@@ -14,11 +14,11 @@ tags: [boot2podman, podman+machine]
 
 ### Update: September 9, 2021 - Tom Sweeney
 
-This post initially discussed the boot2podman/machine project, which Anders has since deprecated. Starting with Podman v3.3, the `podman machine` command now does that same function and is part of the Podman project. Please see Brent Baude's [update](https://podman.io/blogs/2021/09/06/podman-on-macs.html) or the [podman machine](https://docs.podman.io/en/latest/machine.html) man page on [docs.podman.io](https://docs.podman.io/) for more information on how to run Podman machine. The `podman-machine` command has been deprecated.
+This post initially discussed the boot2podman/machine project, which Anders has since deprecated. Starting with Podman v3.3, the `podman machine` command now does that same function and is part of the Podman project. Please see Brent Baude's [update](/blogs/2021/09/06/podman-on-macs) or the [podman machine](https://docs.podman.io/en/latest/markdown/podman-machine.1.html) man page on [docs.podman.io](https://docs.podman.io/) for more information on how to run Podman machine. The `podman-machine` command has been deprecated.
 
 In addition, the Podman team is investigating the possibility of creating `Podman Desktop`. Please see the issue on [GitHub](https://github.com/containers/podman/issues/11494), and please add your comments or thoughts to that issue.
 
-More updates are coming, and please keep your eye on the [Podman Mailing List](https://podman.io/community/#mailing-list) and [podman.io](https://podman.io) for further information and developments.
+More updates are coming, and please keep your eye on the [Podman Mailing List](/community) and [podman.io](https://podman.io) for further information and developments.
 
 Finally, a very big thank you to Anders for his many contributions to Podman, particularly for his work in getting Podman to work smoothly on macOS.
 

blog/2019-08-14-new.md

@@ -4,4 +4,4 @@ title: Podman v1.5.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 1.5.0!](https://podman.io/releases/2019/08/14/podman-release-v1.5.0.html)
+## [Podman has gone 1.5.0!](/release/2019/08/14/podman-release-v1.5.0)

blog/2020-04-17-new.md

@@ -4,4 +4,4 @@ title: Podman v1.9.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 1.9.0!](https://podman.io/releases/2020/04/17/podman-release-v1.9.0.html)
+## [Podman has gone 1.9.0!](/release/2020/04/17/podman-release-v1.9.0)

blog/2020-08-10-podman-go-bindings.md

@@ -522,15 +522,15 @@ containers and pods in a way which fits very nicely in many production environme
 ## References
 
 - Podman v2 is available for most major distributions along with MacOS and Windows.
-  Installation details are available on the [Podman official website](https://podman.io/getting-started/).
+  Installation details are available on the [Podman official website](/get-started).
 
 - Documentation can be found at the [Podman Docs page](https://docs.podman.io).
   It also includes a section on the [RESTful API](https://docs.podman.io/en/latest/Reference.html).
 
 ## Contribute
 
 - Any issues with the bindings can be [reported upstream](https://github.com/containers/podman/issues/new/choose).
-- Check out the [Podman community page](https://podman.io/community/) for more ways to get in touch with the community.
+- Check out the [Podman community page](/community) for more ways to get in touch with the community.
 
 ## Acknowledgments
 

blog/2020-10-05-new.md

@@ -4,4 +4,4 @@ title: Podman v2.1.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 2.1.0!](https://podman.io/releases/2020/10/05/podman-release-v2.1.0.html)
+## [Podman has gone 2.1.0!](/release/2020/10/05/podman-release-v2.1.0)

blog/2020-12-14-new.md

@@ -4,4 +4,4 @@ title: Podman v2.2.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 2.2.0!](https://podman.io/releases/2020/12/14/podman-release-v2.2.0.html)
+## [Podman has gone 2.2.0!](/release/2020/12/14/podman-release-v2.2.0)

blog/2021-02-08-easy-development-dependency-management-with-podman-and-tent.md

@@ -29,7 +29,7 @@ Tent is heavily inspired from [tighten/takeout](https://github.com/tighten/takeo
 ## Dependencies
 
 - Linux
-- [Podman](https://podman.io/getting-started/installation) Installed
+- [Podman](/get-started) Installed
 - Podman System Service Running
 
 If you have Podman installed, you can start the system service as follows:

blog/2021-03-02-podman-support-for-older-distros.md

@@ -12,7 +12,7 @@ tags: [containers, podman, distro, linux, centos, ubuntu, debian]
 
 ## By Lokesh Mandvekar [GitHub](https://github.com/lsm5)
 
-The Podman Community [builds and supports packages](https://podman.io/getting-started/installation)
+The Podman Community [builds and supports packages](/get-started)
 for a wide variety of Linux distributions and operating systems. These builds are
 provided in the public Open Build Service hosted by openSUSE.
 [These pre-built packages](https://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/)

blog/2021-04-02-new.md

@@ -4,4 +4,4 @@ title: Podman v3.1.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 3.1.0!](https://podman.io/releases/2021/04/02/podman-release-v3.1.0.html)
+## [Podman has gone 3.1.0!](/release/2021/04/02/podman-release-v3.1.0)

blog/2021-10-11-multiarch.md

@@ -188,4 +188,4 @@ is just a matter of practice (or some new bash scripts).
 Please also remember to pay attention to the tooling versions, as several
 bugs and deficiencies are present in earlier editions. On that same note,
 if you do encounter any strange or unexpected behavior, please reach out
-to the [upstream community for assistance](https://podman.io/community/#slack-irc-matrix-and-discord).
+to the [upstream community for assistance](/community).

blog/2022-02-22-new.md

@@ -4,4 +4,4 @@ title: Podman v4.0.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 4.0.0!](https://podman.io/releases/2022/02/22/podman-release-v4.0.0.html)
+## [Podman has gone 4.0.0!](/release/2022/02/22/podman-release-v4.0.0)

blog/2022-05-09-new.md

@@ -4,4 +4,4 @@ title: Podman v4.1.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 4.1.0!](https://podman.io/releases/2022/05/09/podman-release-v4.1.0.html)
+## [Podman has gone 4.1.0!](/release/2022/05/09/podman-release-v4.1.0)

blog/2022-08-17-new.md

@@ -4,4 +4,4 @@ title: Podman v4.2.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 4.2.0!](https://podman.io/releases/2022/08/17/podman-release-v4.2.0.html)
+## [Podman has gone 4.2.0!](/release/2022/08/17/podman-release-v4.2.0)

blog/2022-10-22-new.md

@@ -4,4 +4,4 @@ title: Podman v4.3.0 Released
 categories: [new]
 ---
 
-## [Podman has gone 4.3.0!](https://podman.io/releases/2022/10/22/podman-release-v4.3.0.html)
+## [Podman has gone 4.3.0!](/release/2022/10/22/podman-release-v4.3.0)

docs/index.md

@@ -5,8 +5,6 @@ title: Getting Started with Podman
 
 ![Podman logo](/logos/optimized/podman-logo-orig-884w-293h.webp#gh-light-mode-only)![Podman logo](/logos/optimized/podman-logo-dark-884w-293h.webp#gh-dark-mode-only)
 
-# Getting Started with Podman
-
 Podman is a utility provided as part of the libpod library. It can be used to
 create and maintain containers. The following tutorial will teach you how to set
 up Podman and perform some basic commands.

docusaurus.config.js

@@ -23,6 +23,7 @@ const config = {
   },
   plugins: [
     '@docusaurus/theme-live-codeblock',
+    require.resolve('./src/plugins/meetingNotesPlugin.js'),
     async function tailwindPlugin() {
       return {
         name: 'docusaurus-tailwindcss',
@@ -33,7 +34,8 @@ const config = {
         },
       };
     },
-    ['@docusaurus/plugin-content-blog',
+    [
+      '@docusaurus/plugin-content-blog',
       {
         showReadingTime: true,
         routeBasePath: 'release',
@@ -75,10 +77,15 @@ const config = {
         logo: {
           alt: 'Podman Logo',
           src: 'logos/optimized/podman-3-logo-266w-253h.webp',
+          // Docusaurus's ThemedImage hides the light-only image outright in
+          // dark mode unless a dark variant is also given — same artwork
+          // works fine on both, so just point srcDark at the same file.
+          srcDark: 'logos/optimized/podman-3-logo-266w-253h.webp',
         },
         items: [
           { to: 'features', label: 'Features', position: 'right' },
           { to: 'get-started', label: 'Get Started', position: 'right' },
+          { to: 'downloads', label: 'Downloads', position: 'right' },
           { to: 'community', label: 'Community', position: 'right' },
           {
             to: 'https://blog.podman.io',
@@ -108,16 +115,20 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'Installation Instructions',
-                to: 'docs/installation',
+                label: 'Downloads',
+                to: '/downloads',
+              },
+              {
+                label: 'Installation',
+                to: '/docs/installation',
               },
               {
                 label: 'Documentation',
-                to: 'docs/',
+                to: '/docs/',
               },
 
               {
-                label: 'Podman CLI Commands',
+                label: 'CLI Commands',
                 href: 'https://docs.podman.io/en/latest/Commands.html',
               },
             ],
@@ -151,19 +162,19 @@ const config = {
             title: 'Projects',
             items: [
               {
-                label: 'Podman GitHub',
+                label: 'GitHub',
                 href: 'https://github.com/podman-container-tools/podman',
               },
               {
-                label: 'Podman Desktop GitHub',
+                label: 'Desktop GitHub',
                 href: 'https://github.com/podman-desktop/podman-desktop',
               },
               {
-                label: 'Podman Website GitHub',
+                label: 'Website GitHub',
                 href: 'https://github.com/containers/podman.io',
               },
               {
-                label: 'Podman Desktop Website',
+                label: 'Desktop Website',
                 href: 'https://podman-desktop.io/',
               },
             ],

package.json

@@ -25,6 +25,7 @@
     "@mdx-js/react": "^1.6.22",
     "autoprefixer": "^10.5.4",
     "clsx": "^1.2.1",
+    "gray-matter": "^4.0.3",
     "html-react-parser": "^3.0.16",
     "papaparse": "^5.4.1",
     "postcss": "^8.5.23",
@@ -44,7 +45,7 @@
     "eslint-config-prettier": "^8.6.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
-    "prettier": "2.8.8",
+    "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "tailwind-scrollbar": "^3.0.0",
     "typescript": "^4.9.4"

src/components/content/BasicResourcesBox/data.ts

@@ -1,22 +1,22 @@
 const resources = {
-    title: 'Basic Resources',
-    buttons: [
-      {
-        text: 'Installation Instructions',
-        path: 'docs/installation',
-        icon: 'fa6-solid:book',
-      },
-      {
-        text: 'Documentation',
-        path: 'https://docs.podman.io/en/latest/',
-        icon: 'fa6-solid:book',
-      },
-      {
-        text: 'Podman Troubleshooting Guide',
-        path: 'https://github.com/containers/podman/blob/main/troubleshooting.md',
-        icon: 'fa6-solid:book',
-      },
-    ],
-  };
+  title: 'Basic Resources',
+  buttons: [
+    {
+      text: 'Installation Instructions',
+      path: '/docs/installation',
+      icon: 'fa6-solid:download',
+    },
+    {
+      text: 'Documentation',
+      path: 'https://docs.podman.io/en/latest/',
+      icon: 'fa6-solid:book',
+    },
+    {
+      text: 'Podman Troubleshooting Guide',
+      path: 'https://github.com/containers/podman/blob/main/troubleshooting.md',
+      icon: 'fa6-solid:screwdriver-wrench',
+    },
+  ],
+};
 
-  export { resources };
+export { resources };

src/components/content/BasicResourcesBox/index.tsx

@@ -2,28 +2,28 @@ import React from 'react';
 import { Icon } from '@iconify/react';
 import { resources } from './data';
 
-const BasicResourcesBox = () => {
+const BasicResourcesBox = ({ showHeader = true }: { showHeader?: boolean }) => {
   return (
-    <div className="mt-4 lg:my-0">
-      <header className="container mb-6 text-center xl:mb-8 xl:text-start">
-        <h3 className="font-medium text-blue-700 dark:text-blue-500">{resources.title}</h3>
-      </header>
-      <div>
-        <ul className="mb-10 mt-4 flex flex-col gap-6 lg:mb-16 lg:mt-8 lg:gap-4 xl:flex-col">
-          {resources.buttons.map((button, index) => {
-            return (
-              <li key={index}>
-                <a
-                  href={button.path}
-                  className="no-underline hover:no-underline leading-none mx-auto flex h-32 max-w-lg flex-col items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center text-purple-700 underline-offset-4 transition duration-150 ease-linear hover:bg-purple-700 hover:text-purple-50 hover:shadow-md dark:bg-gray-700 dark:hover:bg-purple-900 dark:hover:text-white lg:h-auto lg:flex-row xl:justify-start">
-                  <span className="text-left">{button.text}</span>
-                  <Icon icon={button.icon} className="order-first hidden lg:block" />
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+    <div className="mx-auto w-full max-w-sm rounded-xl border border-gray-100 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-900 lg:p-8">
+      {showHeader && (
+        <header className="mb-6 text-center">
+          <h3 className="text-2xl font-bold text-blue-700 dark:text-blue-500 lg:text-3xl">{resources.title}</h3>
+        </header>
+      )}
+      <ul className="flex flex-col gap-4">
+        {resources.buttons.map((button, index) => {
+          return (
+            <li key={index}>
+              <a
+                href={button.path}
+                className="mx-auto flex max-w-lg items-center justify-center gap-4 rounded-md bg-gray-100 p-4 text-center leading-none text-purple-700 no-underline underline-offset-4 transition duration-150 ease-linear hover:-translate-y-0.5 hover:bg-purple-700 hover:text-purple-50 hover:no-underline hover:shadow-md dark:bg-gray-700 dark:text-purple-300 dark:hover:bg-purple-900 dark:hover:text-white">
+                <Icon icon={button.icon} className="shrink-0" />
+                <span className="text-left">{button.text}</span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
 };

src/components/content/BlogArticlesList/index.tsx

@@ -8,6 +8,7 @@ interface BlogArticlesListProps {
   displayCount?: number;
   altLayout?: boolean;
   title?: string;
+  description?: string;
   titleColor?: string;
   showFooter?: boolean;
   footerText?: string;
@@ -20,6 +21,7 @@ const BlogArticlesList: React.FC<BlogArticlesListProps> = ({
   displayCount,
   altLayout = false,
   title = 'Latest Articles',
+  description,
   titleColor = 'text-blue-700',
   showFooter = false,
   footerText = '',
@@ -29,16 +31,38 @@ const BlogArticlesList: React.FC<BlogArticlesListProps> = ({
   const { data, loading } = useBlogPosts(limit);
   const actualDisplayCount = displayCount ?? limit;
 
+  const containerClasses =
+    containerLayout === 'vertical' ? 'flex flex-col gap-4' : 'flex flex-wrap justify-center gap-6';
+
   if (loading) {
-    return null;
+    return (
+      <section className={sectionClassName}>
+        <SectionHeader title={title} description={description} textColor={titleColor} />
+        <div className={containerClasses}>
+          {Array.from({ length: actualDisplayCount }).map((_, index) => (
+            <div
+              key={index}
+              className={
+                altLayout
+                  ? 'mx-auto flex w-full max-w-2xl animate-pulse flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm dark:border-white/10 dark:bg-gray-900 sm:grid sm:grid-cols-2'
+                  : 'mx-auto flex w-full max-w-sm animate-pulse flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm dark:border-white/10 dark:bg-gray-900'
+              }>
+              <div className="aspect-[16/10] w-full bg-gray-100 dark:bg-gray-700" />
+              <div className="flex flex-1 flex-col justify-center gap-2 p-5">
+                <div className="h-4 w-3/4 rounded bg-gray-100 dark:bg-gray-700" />
+                <div className="h-4 w-1/2 rounded bg-gray-100 dark:bg-gray-700" />
+                <div className="h-3 w-1/3 rounded bg-gray-100 dark:bg-gray-700" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
   }
 
-  const containerClasses =
-    containerLayout === 'vertical' ? 'flex flex-col gap-4' : 'flex flex-wrap justify-center gap-4';
-
   return (
     <section className={sectionClassName}>
-      <SectionHeader title={title} textColor={titleColor} />
+      <SectionHeader title={title} description={description} textColor={titleColor} />
       <div className={containerClasses}>
         {data.slice(0, actualDisplayCount).map((card, index) => (
           <ArticleCard
@@ -56,7 +80,7 @@ const BlogArticlesList: React.FC<BlogArticlesListProps> = ({
         ))}
       </div>
       {showFooter && footerText && (
-        <p className="ml-2l text-center 2xl:text-start">
+        <p className="mt-6 text-center">
           {footerText}{' '}
           <a
             href="https://blog.podman.io"

src/components/content/ColoringBookSection/data.ts

@@ -11,11 +11,11 @@ export default {
     path: 'https://developers.redhat.com/sites/default/files/Podman%20in%20Action%20e-book%20cover_1.png',
   },
   featureImage: {
-    src: 'images/optimized/comic-cover-224w-288h.webp',
+    src: '/images/optimized/comic-cover-224w-288h.webp',
     alt: 'Container Commandos coloring book cover',
   },
   collageImages: {
-    src: 'images/optimized/coloring-pages-496w-364h.webp',
+    src: '/images/optimized/coloring-pages-496w-364h.webp',
     alt: 'A collection of pages from the Podman coloring book.',
   },
 };