create-audora-next 2.0.1 → 2.0.3

package/README.md

@@ -6,11 +6,11 @@ Create a new Audora Next.js app with one command.
 
 **Base template**
 
-![Audora Next](./assets/audora-next.webp)
+![Audora Next](https://github.com/AudoraLabs/create-audora-next/raw/master/assets/audora-next.webp)
 
 **Blog template**
 
-![Audora Blog](./assets/audora-blog.png)
+![Audora Blog](https://github.com/AudoraLabs/create-audora-next/raw/master/assets/audora-blog.png)
 
 ## Quick Start
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-audora-next",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Create a new Audora Next.js app with one command",
   "keywords": [
     "create",

package/templates/blog/src/blogs/components/mdx.tsx

@@ -84,9 +84,42 @@ function CustomLink(props: CustomLinkProps) {
   );
 }
 
-function RoundedImage(props: React.ComponentProps<typeof Image>) {
-  // eslint-disable-next-line jsx-a11y/alt-text
-  return <Image className="rounded-lg" {...props} />;
+type ImgProps = React.ComponentProps<typeof Image> & {
+  width?: number | string;
+  height?: number | string;
+};
+
+function BlogImage(props: ImgProps) {
+  const { width, height, alt, src, ...rest } = props;
+  const hasDimensions =
+    typeof width === "number" &&
+    typeof height === "number" &&
+    width > 0 &&
+    height > 0;
+
+  if (hasDimensions) {
+    return (
+      <Image
+        className="rounded-lg"
+        width={width}
+        height={height}
+        alt={alt ?? ""}
+        src={src}
+        {...rest}
+      />
+    );
+  }
+
+  const imgSrc = typeof src === "string" ? src : "";
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      className="rounded-lg max-w-full h-auto"
+      src={imgSrc}
+      alt={alt ?? ""}
+      {...rest}
+    />
+  );
 }
 
 type MDXComponents = NonNullable<MDXRemoteProps["components"]>;
@@ -188,7 +221,7 @@ const components: MDXComponents = {
     );
   },
   a: CustomLink,
-  img: RoundedImage,
+  img: BlogImage,
   Table,
 };
 

package/templates/blog/src/blogs/content/hello-world.mdx

@@ -10,7 +10,7 @@ tags:
   - web
 ---
 
-**Axum** is a fast, ergonomic web framework for Rust built on [Tokio](https://tokio.rs/) (async runtime) and [Tower](https://github.com/tower-rs/tower) (middleware). In this post we’ll build a minimal “Hello, World!” server you can run in a few minutes.
+**Axum** is a fast, ergonomic web framework for Rust built on [Tokio](https://tokio.rs/) (async runtime) and [Tower](https://github.com/tower-rs/tower) (middleware). In this post we'll build a minimal "Hello, World!" server you can run in a few minutes.
 
 ## Setup
 
@@ -57,7 +57,9 @@ cargo run
 
 Open [http://localhost:3000](http://localhost:3000) and you should see **Hello, World!**.
 
-## What’s going on
+![Hello World server running in the browser](/images/screenshot-desktop-light.webp)
+
+## What's going on
 
 - **Router** – Defines routes; here we attach a single `GET /` to `handler`.
 - **handler** – An async function that returns a string; Axum sends it as `text/plain` with status 200.