Add 4 new JS guides, fix header font weights, correct typos and code …

…syntax

src/app/gen-thumbnail/page.tsx

@@ -6,8 +6,8 @@ function RenderThumbnail() {
 		<div className="flex h-screen bg-white overflow-hidden">
 			<div className="pl-20 py-20 flex flex-col justify-between h-full w-[70%]">
 				<div>
-					<h1 className="text-9xl">Web Development</h1>
-					<h3 className="text-4xl">Resources</h3>
+					<h1 className="text-9xl">Introduction to JavaScript</h1>
+					<h3 className="text-4xl">JavaScript Guides</h3>
 				</div>
 				<h4>CA Resources</h4>
 			</div>

src/app/guides/[slug]/page.tsx

@@ -80,7 +80,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 	return (
 		<>
 			<section>
-				<PageHeader>{guide.modTitle}</PageHeader>
+				<PageHeader>{guide.title}</PageHeader>
 				<p className="text-muted-foreground text-sm">{guide.readingTime}</p>
 			</section>
 			{MDXContent && (
@@ -90,8 +90,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
 				/>
 			)}
 			<Pagination
-				previous={prev ? { title: prev.title, path: prev._raw.flattenedPath } : null}
-				next={next ? { title: next.title, path: next._raw.flattenedPath } : null}
+				previous={prev ? { title: prev.modTitle, path: prev._raw.flattenedPath } : null}
+				next={next ? { title: next.modTitle, path: next._raw.flattenedPath } : null}
 			/>
 		</>
 	)

src/app/guides/[slug]/slug.css

@@ -164,6 +164,7 @@ h1 code,
 h2 code,
 h3 code,
 h4 code {
+	@apply font-semibold;
 	font-size: inherit;
 }
 

src/components/shared/guides-paths.tsx

@@ -15,8 +15,8 @@ function GuidestPaths({ category }: { category: string }) {
 	return (
 		<>
 			{allGuides
-				.filter((g) => g?.category && g.category.trim() === category.trim()) // Ensure g?.category is defined
-				.sort((a, b) => a.title.localeCompare(b.title))
+				.filter((g) => g?.category && g.category.trim() === category.trim())
+				// .sort((a, b) => a.modTitle.localeCompare(b.modTitle))
 				.map((p, i: number) => {
 					const isActive = pathname === `/guides/${p._raw.flattenedPath}`
 					return (
@@ -29,7 +29,7 @@ function GuidestPaths({ category }: { category: string }) {
 									currentPath(isActive)
 								)}
 							>
-								{p.title}
+								{p.modTitle}
 							</Link>
 						</div>
 					)

src/components/shared/sheet-links.tsx

@@ -18,7 +18,7 @@ const SheetLinks: React.FC<SheetLinksProps & { category?: string }> = ({
 	const guides = category ? allGuides.filter((guide) => guide?.category?.trim() === category) : allGuides 
 
 	const links = isGuide
-		? guides.map((guide) => ({ slug: guide._raw.flattenedPath, title: guide.title }))
+		? guides.map((guide) => ({ slug: guide._raw.flattenedPath, title: guide.modTitle }))
 		: paths
 
 	// * getHref: A function to get the href of the link.
@@ -40,7 +40,7 @@ const SheetLinks: React.FC<SheetLinksProps & { category?: string }> = ({
 			<h4 className="mb-2 text-lg">{header}</h4>
 			{links.length > 0
 				? links
-						.sort((a, b) => getTitle(a).localeCompare(getTitle(b)))
+						// .sort((a, b) => getTitle(a).localeCompare(getTitle(b)))
 						.map((item, i) => {
 							const isActive = pathname === getHref(item)
 

src/guides-pages/audio-and-video.mdx

@@ -1,10 +1,10 @@
 ---
-title: Audio and Video
-modTitle: Integrating Audio and Video
+title: Integrating Audio and Video
+modTitle: Audio and Video
 description: Integrating audio and video in HTML5 allows embedding media files directly into web pages for native playback.
 thumbnail: audio-and-video.jpg
 category: html
-readingTime: 6–7 MIN READ
+readingTime: 6–7 MINS READ
 ---
 
 <section>
@@ -17,21 +17,21 @@ readingTime: 6–7 MIN READ
 1. Making audio files work with older browsers.
 </section>
 <section>
-### HTML div Element
+### HTML `<div></div>` Element
 - The `<div>` tag defines a division or a section in an HTML document.
 - The `<div>` tag is used as a container for HTML elements which is then styled with CSS or manipulated with JavaScript.
 - The `<div>` tag is easily styled by using the class or id attribute.
 - Any sort of content can be put inside the `<div>` tag.
 - By default, browsers always place a line break before and after the `<div>` element.
 </section>
 <section>
-### HTML span Element
+### HTML `<span></span>` Element
 - The `<span>` tag is an inline container used to mark up a part of a text, or a part of a document.
 - The `<span>` tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
 - The `<span>` tag is much like the `<div>` element, but `<div>` is a block-level element and `<span>` is an inline element.
 </section>
 <section>
-### HTML div and span pairs
+### HTML `<div></div>` and `<span></span>` pairs
 ```HTML {17, 19, 31} showLineNumbers
 <head>
   <meta charset="utf-8" />
@@ -93,18 +93,16 @@ readingTime: 6–7 MIN READ
 <section>
 ### Common HTML Video formats
 <DataTable>
-
 |   Format   |   File Extension   |   Description                                                                                        |
 |------------|--------------------|------------------------------------------------------------------------------------------------------|
 | MPEG       | `.mpg`             | Developed by the Moving Pictures Expert Group. The first popular video format on the web.            |
-| OGG        | `.ogg`             | Theora Ogg. Developed by the Xiph.org Foundaion.                                                     |
+| OGG        | `.ogg`             | Theora Ogg. Developed by the Xiph.org Foundation.                                                    |
 | WEBM       | `.webm`            | Developed by Mozilla, Opera, Adobe, and Google.                                                      |
 | MP4        | `.mp4`             | Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube.|
-
 </DataTable>
 </section>
 <section>
-### Autoplay attribute
+### `autoplay` attribute
 - The **autoplay** attribute is used to specify that the video should start playing when a web page is loaded.
 ```HTML {2} showLineNumbers
 <body>
@@ -116,7 +114,7 @@ readingTime: 6–7 MIN READ
 ```
 </section>
 <section>
-### Muted attribute
+### `muted` attribute
 - The **muted** attribute on a media element mutes the audio or video player. With the use of muted attributes, the video can be played, but without a sound.
 ```HTML {2} showLineNumbers
 <body>
@@ -128,9 +126,9 @@ readingTime: 6–7 MIN READ
 ```
 </section>
 <section>
-### Poster attribute
+### `poster` attribute
 - The **poster** attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
-```HTML {2} showLineNUmbers
+```HTML {2} showLineNumbers
 <body>
   <video style="width: 340px; height: 240px;" controls poster="media/cocomelon.jpg">
     <source src="media/cocomelon.mp4" type="video/mp4">
@@ -143,19 +141,17 @@ readingTime: 6–7 MIN READ
 ### HTML Audio tag pairs
 - The HTML `<audio>` and `</audio>` elements are used to play audio on a web page.
 - The text between the `<audio>` and `</audio>` tags will only be displayed in browsers that do not support the `<audio>` element.
-
-```HTML {2, 5} showLineNUmbers
+```HTML {2, 5} showLineNumbers
 <body>
   <audio controls>
     <source src="pasilyo.mp3" type="audio/mp3">
     Pasilyo Intro
   <audio>
 </body>
 ```
-
 </section>
 <section>
-### Loop attribute
+### `loop` attribute
 - The **loop** attribute will make the audio file play over and over again.
 ```HTML {2} showLineNumbers
 <body>
@@ -169,44 +165,38 @@ readingTime: 6–7 MIN READ
 <section>
 ### Common HTML Audio formats
 <DataTable>
-
 |   Format   |   File Extension   |   Description                                                                                                                                                    |
 |------------|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | WAV        | `.wav`             | Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems.                                                                   |
 | OGG        | `.ogg`             | Developed by the Xiph.org Foundaion.                                                                                                                             |
 | MP3        | `.mp3`             | MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality.|
 | MP4        | `.mp4`             | MP4 is a video format, but can also be used for audio.                                                                                                           |
-
 </DataTable>
 </section>
 <section>
 ## Summary Table
 <SummaryTable>
-
 | Elements                          | Definition                                                                                 |
 |-----------------------------------|--------------------------------------------------------------------------------------------|
 | [`<div>`](#html-div-element)      | Defines a block-level division or section in an HTML document.                             |
 | [`<span>`](#html-span-element)    | Defines an inline section of text within an HTML document.                                 |
 | [`<video>`](#html-video)          | element is used to show a video on a web page.                                             |
 | [`<source>`](#html-video)         | An element allows you to specify alternative video files from which the browser may choose.|
 | [`<audio>`](#html-audio-tag-pairs)| Use to play audio on a web page.                                                           |
-
 </SummaryTable>
 </section>
 <section>
 <SummaryTable>
-
 | Attributes                       | Definition                                                                          |
 |----------------------------------|-------------------------------------------------------------------------------------|
 | [`controls`](#html-video)        | Adds video controls like play, pause, and volume.                                   |
 | [`autoplay`](#autoplay-attribute)| Use to specify that the video should start playing when a web page is loaded.       |
 | [`muted`](#muted-attribute)      | Mutes the audio or video by default.                                                |
 | [`poster`](#poster-attribute)    | Displays an image while the video is downloading or until the user hits play button.|
 | [`loop`](#loop-attribute)        | Will make the audio file play over and over again.                                  |
-
 </SummaryTable>
 </section>
 <section>
 ### Credits
 This webpage was created based on lessons provided by **Rose Anne G. Cochanco** as part of Web Development subject.
-</section>
+</section>