Adding Book Cover in Tauri Docs

[Ncode-93]

Description

Adding Book Covers for in Learn Section

Included

--> Transferred the book cover image {src => public}
--> Using Inline CSS modified the current layout

Before

After

If there are any issues, please let me know and thank you for your time.

[netlify]

✅ Deploy Preview for tauri-v2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f5f790a
🔍 Latest deploy log	https://app.netlify.com/sites/tauri-v2/deploys/67a4ffb21c14ac0008c143b2
😎 Deploy Preview	https://deploy-preview-3159--tauri-v2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (🟢 up 8 from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vasfvitor]

Ideally we would have done this a "BookPreview.astro" component and have the styles in the component <styles> block, instead of having to inline. But it's ok for now

thanks for your work. You can remove the extra placeholders and leave only 1 book now.

[vasfvitor]

Suggested change

	<div style={{ display: "flex", alignItems: "center", gap: "1.5rem", width: "100%" }}>
	import { Image } from 'astro:assets';
	import RoseRustBookfrom '@assets/learn/community/HTML_CSS_JavaScript_and_Rust_for_Beginners_A_Guide_to_Application_Development_with_Tauri.png';
	<div style={{ display: "flex", alignItems: "center", gap: "1.5rem", width: "100%" }}>

Astro image component, you'd have to move the image file back to /src/assets...

[vasfvitor]

Suggested change

	<img
	src="/assets/learn/community/HTML_CSS_JavaScript_and_Rust_for_Beginners_A_Guide_to_Application_Development_with_Tauri.png"
	alt="HTML, CSS, JavaScript, and Rust for Beginners Book Cover"
	style={{ width: "80px", height: "100%", objectFit: "cover" }}
	/>
	<Image style={{ height: "100%", objectFit: "cover" }}
	/> src={RoseRustBook} alt="HTML, CSS, JavaScript, and Rust for Beginners Book Cover" />

using Astro image component. Removed the width, not sure it's needed.

[vasfvitor]

Suggested change

	<div style={{ display: "flex", flexDirection: "column", flex: "1", gap: "0.20rem" }}>
	<div style={{ margin-top:0, display: "flex", flexDirection: "column", flex: "1", gap: "0.20rem" }}>

there will be still a tiny space that doesnt top align the image and title, but it's ok