Adding cookie consent (#19635)

### Description Adding cookie consent for google analytics (Adobe WIP), daisyui4 changes and updates, updates to events page, and added MD blog support (for upcoming blogs). Staged at: https://maanavd.github.io/onnxruntime/ --------- Co-authored-by: MaanavD <maanavdalal@microsoft.com>
2026-07-30 20:18:08 +00:00 · 2024-02-26 11:15:05 -08:00 · 2024-02-26 11:15:05 -08:00 · 19afa7641b
commit 19afa7641b
parent cfdb434a08
20 changed files with 1301 additions and 52 deletions
--- a/docs/api/js/index.html
+++ b/docs/api/js/index.html
@ -25,7 +25,7 @@
 </ul>
 <p>See also:</p>
 <ul>
-<li><a href="https://onnxruntime.ai/docs/get-started/with-javascript.html">Get Started</a></li>
+<li><a href="https://onnxruntime.ai/docs/get-started/with-javascript">Get Started</a></li>
 <li><a href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js">Inference examples</a></li>
 </ul>
 </div></section>
--- a/docs/performance/tune-performance/logging_tracing.md
+++ b/docs/performance/tune-performance/logging_tracing.md
@ -68,7 +68,7 @@ This will dynamically trace with high-performance the previously mentioned LOGS(

 Provider Name: ONNXRuntimeTraceLoggingProvider  
 Provider GUID: 929DD115-1ECB-4CB5-B060-EBD4983C421D  
-Keyword: Logs (0x2) keyword per [logging.h](https://github.com/ivberg/onnxruntime/blob/user/ivberg/ETWRundown/include/onnxruntime/core/common/logging/logging.h#L83)  
+Keyword: Logs (0x2) keyword per [logging.h](https://github.com/ivberg/onnxruntime/blob/9cb97ee507b9b45d4a896f663590083e7e7568ac/include/onnxruntime/core/common/logging/logging.h#L83)  
 Level: 1 (CRITICAL ) through 5 (VERBOSE) per [TraceLoggingLevel](https://learn.microsoft.com/en-us/windows/win32/api/traceloggingprovider/nf-traceloggingprovider-tracelogginglevel#remarks)  

 ### Microsoft.ML.ONNXRuntime
@ -77,7 +77,7 @@ The [Microsoft.ML.ONNXRuntime](https://github.com/microsoft/onnxruntime/blob/mai

 Provider Name: Microsoft.ML.ONNXRuntime  
 Provider GUID: 3a26b1ff-7484-7484-7484-15261f42614d  
-Keywords: Multiple per [logging.h](https://github.com/ivberg/onnxruntime/blob/user/ivberg/ETWRundown/include/onnxruntime/core/common/logging/logging.h#L81)  
+Keywords: Multiple per [logging.h](https://github.com/ivberg/onnxruntime/blob/9cb97ee507b9b45d4a896f663590083e7e7568ac/include/onnxruntime/core/common/logging/logging.h#L81)  
 Level: 1 (CRITICAL ) through 5 (VERBOSE) per [TraceLoggingLevel](https://learn.microsoft.com/en-us/windows/win32/api/traceloggingprovider/nf-traceloggingprovider-tracelogginglevel#remarks)  
 Note: This provider supports ETW [CaptureState](https://learn.microsoft.com/en-us/windows-hardware/test/wpt/capturestateonsave) (Rundown) for logging state for example when a trace is saved

--- a/docs/performance/tune-performance/profiling-tools.md
+++ b/docs/performance/tune-performance/profiling-tools.md
@ -58,7 +58,7 @@ As covered in [logging](logging_tracing.md) ONNX supports dynamic enablement of

 - Provider Name: Microsoft.ML.ONNXRuntime  
 - Provider GUID: 3a26b1ff-7484-7484-7484-15261f42614d  
- Keywords: Profiling = 0x100  per [logging.h](https://github.com/ivberg/onnxruntime/blob/user/ivberg/ETWRundown/include/onnxruntime/core/common/logging/logging.h#L81)  
+- Keywords: Profiling = 0x100  per [logging.h](https://github.com/ivberg/onnxruntime/blob/9cb97ee507b9b45d4a896f663590083e7e7568ac/include/onnxruntime/core/common/logging/logging.h#L81)  
 - Level: 
  - 5 (VERBOSE) = profiling_level=basic (good details without perf loss)
  - greater than 5 = profiling_level=detailed (individual ops are logged with inference perf hit)  
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
 		"postbuild": "npx svelte-sitemap --domain https://onnxruntime.ai"
 	},
 	"devDependencies": {
+		"@beyonk/gdpr-cookie-consent-banner": "^12.1.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.20.4",
@ -23,12 +24,13 @@
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"autoprefixer": "^10.4.14",
-		"daisyui": "^3.6.3",
+		"daisyui": "^4.7.2",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
 		"gh-pages": "^5.0.0",
 		"jquery": "^3.7.1",
+		"mdsvex": "^0.11.0",
 		"postcss": "^8.4.26",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -11,6 +11,7 @@

 <svelte:head>
 	{@html oneLight}
+	
 	<title
 		>ONNX Runtime | {data.pathname == '/'
 			? 'Home'
@ -42,7 +43,7 @@
 	<meta property="og:type" content="website" />
 </svelte:head>
 <Analytics />
-<div class="selection:bg-primary">
+<div class="selection:bg-info">
 	{#if !$page.url.pathname.startsWith('/blogs/')}
 		<Header />
 	{/if}
--- a/src/routes/blogs/github-markdown-light.css
+++ b/src/routes/blogs/github-markdown-light.css
--- a/src/routes/blogs/post.svelte
+++ b/src/routes/blogs/post.svelte
@ -0,0 +1,89 @@
+<script>
+	import Header from '../components/header.svelte';
+	import Footer from '../components/footer.svelte';
+	import './github-markdown-light.css'
+	/**
+	 * @type {any}
+	 */
+	 export let title;
+	/**
+	 * @type {any}
+	 */
+	 export let description;
+	/**
+	 * @type {any}
+	 */
+	 export let keywords;
+	/**
+	 * @type {any[]}
+	 */
+	 export let authors;
+	/**
+	 * @type {string[]}
+	 */
+	 export let authorsLink;
+	/**
+	 * @type {string}
+	 */
+	 export let date;
+	/**
+	 * @type {undefined}
+	 */
+	 export let updated;
+	/**
+	 * @type {any}
+	 */
+	 export let image;
+	/**
+	 * @type {any}
+	 */
+	 export let url;
+	/**
+	 * @type {any}
+	 */
+	 export let robots;
+</script>
+
+<svelte:head>
+	<meta name="title" content={title} />
+	<meta name="description" content={description} />
+	<meta name="keywords" content={keywords} />
+	<meta name="author" content={authors.join(', ')} />
+	<meta name="date" content={date} />
+	<meta name="image" content={image} />
+	<meta name="og:title" content={title} />
+	<meta name="og:description" content={description} />
+	<meta name="og:type" content="article" />
+	<meta name="og:url" content={url} />
+	<meta name="og:image" content={image} />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={description} />
+	<meta name="twitter:card" content={image} />
+	<meta name="twitter:image" content={image} />
+
+	<meta name="robots" content={robots} />
+</svelte:head>
+<Header pathvar="" />
+<div class="container mx-auto px-4 md:px-8 lg:px-48 pt-8">
+	<article class="">
+		<h1 class="text-5xl pb-2">{title}</h1>
+		<p class="text-neutral">
+            By: 
+			{#each authors as author, i}
+            <a href={authorsLink[i]} class="text-blue-500"
+            >{author}</a
+        >{i + 1 === authors.length ? '' : ', '}
+            {/each}
+		</p>
+		<p class="text-neutral">
+			{date.toLocaleUpperCase()}
+			{#if updated != undefined}
+				<span class="italic text-stone-500">(Updated {updated})</span>
+			{/if}
+		</p>
+        <div class="py-4 markdown-body">
+            <slot />
+        </div>
+	</article>
+</div>
+<Footer pathvar="" />
--- a/src/routes/components/analytics.svelte
+++ b/src/routes/components/analytics.svelte
@ -1,19 +1,48 @@
+<script>
+	import '@beyonk/gdpr-cookie-consent-banner/banner.css'; // optional, you can also define your own styles
+	import GdprBanner from '@beyonk/gdpr-cookie-consent-banner';
+	let choices = {
+		marketing: false,
+		tracking: false,
+		analytics: {
+			label: 'Analytics',
+			description: 'We use analytics cookies to track visits, helping create a better experience for you!',
+			value: true
+		}, 
+		necessary: {
+			label: 'Necessary',
+			description: 'Used for cookie control.',
+			value: true
+		}
+	}
+	function initAnalytics() {
+		// Google Analytics
+		gtag('consent', 'update', {
+			ad_storage: 'granted',
+			analytics_storage: 'granted'
+		});
+		// Adobe Analytics
+	}
+</script>
+
+<GdprBanner heading="Your Cookie Settings" cookieName="analytics" description="Your cookies are your choice! At ONNX Runtime, we use analytics cookies solely to track visits, helping create a better experience for you!" on:analytics={initAnalytics} showEditIcon={false} choices={choices}/>
+
 <svelte:head>
+	<!-- Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156955408-1"></script>
 	<script>
 		window.dataLayer = window.dataLayer || [];
 		function gtag() {
 			dataLayer.push(arguments);
 		}
+		gtag('consent', 'default', {
+			ad_storage: 'denied',
+			analytics_storage: 'denied'
+		});
 		gtag('js', new Date());
 		gtag('config', 'UA-156955408-1');
 	</script>
-	<script
-		type="text/javascript"
-		src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-3.min.js"
-	>
-	</script>
-
+	<!-- Adobe Analytics -->
 	<script type="text/javascript">
 		const analytics = new oneDS.ApplicationInsights();
 		var config = {
@ -44,4 +73,12 @@
 		//Initialize SDK
 		analytics.initialize(config, []);
 	</script>
+	<!-- MS Analytics -->
+	<script
+		type="text/javascript"
+		src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-3.min.js"
+	>
+	</script>
+
+	
 </svelte:head>
--- a/src/routes/components/code-blocks.svelte
+++ b/src/routes/components/code-blocks.svelte
@ -69,40 +69,40 @@
 			</div>
 		</div>
 		<div class="hidden lg:block col-span-2 mx-auto min-w-[675px] min-h-[400px]">
-			<div class="tabs">
+			<div class="tabs tabs-bordered">
 				<p
 					on:mouseenter={handleClick}
-					class="tab tab-lg tab-bordered {activeTab === 'Python' ? 'tab-active' : ''}"
+					class="tab tab-lg {activeTab === 'Python' ? 'tab-active' : ''}"
 				>
 					Python
 				</p>
 				<p
 					on:mouseenter={handleClick}
-					class="tab tab-lg tab-bordered {activeTab === 'C#' ? 'tab-active' : ''}"
+					class="tab tab-lg {activeTab === 'C#' ? 'tab-active' : ''}"
 				>
 					C#
 				</p>
 				<p
 					on:mouseenter={handleClick}
-					class="tab tab-lg tab-bordered {activeTab === 'JavaScript' ? 'tab-active' : ''}"
+					class="tab tab-lg {activeTab === 'JavaScript' ? 'tab-active' : ''}"
 				>
 					JavaScript
 				</p>
 				<p
 					on:mouseenter={handleClick}
-					class="tab tab-lg tab-bordered {activeTab === 'Java' ? 'tab-active' : ''}"
+					class="tab tab-lg {activeTab === 'Java' ? 'tab-active' : ''}"
 				>
 					Java
 				</p>
 				<p
 					on:mouseenter={handleClick}
-					class="tab tab-lg tab-bordered {activeTab === 'C++' ? 'tab-active' : ''}"
+					class="tab tab-lg {activeTab === 'C++' ? 'tab-active' : ''}"
 				>
 					C++
 				</p>
 				<button
 					on:click={handleClick}
-					class="tab tab-lg tab-bordered {activeTab === 'More..' ? 'tab-active' : ''}"
+					class="tab tab-lg {activeTab === 'More..' ? 'tab-active' : ''}"
 					>More..</button
 				>
 			</div>
--- a/src/routes/components/header.svelte
+++ b/src/routes/components/header.svelte
@ -110,13 +110,41 @@
 		</ul>
 	</div>
 	<div class="navbar-end">
-		<input
-			aria-label="toggle color theme"
-			data-toggle-theme="lightmode, darkmode"
-			type="checkbox"
-			class="toggle"
-			checked
-			id="colortoggle"
-		/>
+		<label class="cursor-pointer grid place-items-center mr-4">
+			<input
+				aria-label="toggle color theme"
+				data-toggle-theme="lightmode, darkmode"
+				type="checkbox"
+				class="toggle row-start-1 col-start-1 col-span-2 bg-base-content rounded-md"
+				checked
+				id="colortoggle"
+			/><svg
+				class="col-start-1 row-start-1 stroke-base-100 fill-base-100"
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				><circle cx="12" cy="12" r="5" /><path
+					d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+				/></svg
+			>
+			<svg
+				class="col-start-2 row-start-1 stroke-base-100 fill-base-100"
+				xmlns="http://www.w3.org/2000/svg"
+				width="14"
+				height="14"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /></svg
+			>
+		</label>
 	</div>
 </div>
--- a/src/routes/components/training-and-inference.svelte
+++ b/src/routes/components/training-and-inference.svelte
@ -13,7 +13,7 @@
 		ONNX Runtime powers AI in Microsoft products including Windows, Office, Azure Cognitive Services, and Bing,
 		as well as in thousands of other projects across the world. ONNX Runtime is cross-platform, supporting cloud, edge, web, and mobile experiences. 
 	</p>
-	 <a href="./inference" class="btn btn-primary">Learn more about ONNX Runtime Inferencing →</a>
+	 <a href="./inference" class="btn btn-primary rounded-sm">Learn more about ONNX Runtime Inferencing →</a>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10">
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid xl:grid-cols-4 place-items-center">
@ -49,7 +49,7 @@
 	<p class="text-xl pb-4">
 		ONNX Runtime reduces costs for large model training and enables on-device training.
 	</p>
-	<a href="./training" class="btn btn-primary">Learn more about ONNX Runtime Training →</a>
+	<a href="./training" class="btn btn-primary rounded-sm">Learn more about ONNX Runtime Training →</a>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10">
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid xl:grid-cols-4 place-items-center">
--- a/src/routes/components/videogallery.svelte
+++ b/src/routes/components/videogallery.svelte
@ -30,7 +30,7 @@
 		{/each}
 	</div>
    {#if title == true}
-	<a href="https://www.youtube.com/@ONNXRuntime" class="btn btn-primary mr-4">
+	<a href="https://www.youtube.com/@ONNXRuntime" class="btn rounded-sm btn-primary mr-4">
 		ONNX Runtime YouTube channel →
 	</a>
    {/if}
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@ -15,7 +15,7 @@
 			linkarr: [
 				{ name: 'Event Page', link: 'https://developer.microsoft.com/en-us/reactor/events/21648/' },
 				{
-					name: 'Recording Playlist',
+					name: 'Event Videos',
 					link: 'https://www.youtube.com/playlist?list=PLqPV7GJuaUV8qw9Zj5zXvzUZdSxx_sn7U'
 				}
 			],
--- a/src/routes/events/event-post.svelte
+++ b/src/routes/events/event-post.svelte
@ -38,7 +38,7 @@
 				</p>
 				<div class="card-actions">
 					{#each linkarr as item}
-						<a class="btn btn-secondary" href={item.link} target="_blank">{item.name}</a>
+						<a class="btn btn-secondary rounded-sm" href={item.link} target="_blank">{item.name}</a>
 					{/each}
 				</div>
 			</div>
--- a/src/routes/getting-started/+page.svelte
+++ b/src/routes/getting-started/+page.svelte
@ -36,7 +36,7 @@
 			<a href="https://github.com/microsoft/onnxruntime/issues" class="text-blue-500">issues</a> you encounter. You can also contribute to the project by reporting bugs, suggesting features,
 			or submitting pull requests.
 			<div class="py-4">
-				<a href="https://github.com/microsoft/onnxruntime" class="btn btn-primary mr-4"
+				<a href="https://github.com/microsoft/onnxruntime" class="btn btn-primary rounded-sm mr-4"
 					>ONNX Runtime GitHub →</a
 				>
 			</div>
@ -53,7 +53,7 @@
 				Learn more about ONNX Runtime with tutorials from our documentation.
 			</h1>

-			<a href="./docs/tutorials/" rel="external" class="btn btn-primary mr-4"
+			<a href="./docs/tutorials/" rel="external" class="btn btn-primary rounded-sm mr-4"
 				>ONNX Runtime Tutorials →</a
 			>
 		</div>
--- a/src/routes/getting-started/table.svelte
+++ b/src/routes/getting-started/table.svelte
@ -1821,10 +1821,10 @@
 		Select the configuration you want to use and run the corresponding installation script.
 	</p>
 	<div>
-		<div class="tabs">
+		<div class="tabs tabs-bordered ">
 			{#each tabs as tab, index}
 				<li
-					class="nav-item tab tab-bordered tab-lg"
+					class="nav-item tab tab-lg"
 					class:tab-active={activeTab == index}
 					on:click={() => (activeTab = index)}
 					on:keypress={() => (activeTab = index)}
--- a/src/routes/huggingface/+page.svelte
+++ b/src/routes/huggingface/+page.svelte
@ -30,7 +30,7 @@
 			<br />
 			<a
 				href="https://cloudblogs.microsoft.com/opensource/2023/10/04/accelerating-over-130000-hugging-face-models-with-onnx-runtime/"
-				class="btn btn-primary mr-0 mb-4 md:mr-4">Recent blog with Hugging Face →</a
+				class="btn btn-primary rounded-sm mr-0 mb-4 md:mr-4">Recent blog with Hugging Face →</a
 			>
 		</div>
 		<div class="m-auto">
@ -47,10 +47,10 @@
 				Hugging Face provides many options for exporting models to ONNX, including an ONNX Export
 				Space for PyTorch models from the Hugging Face Model Hub.
 			</p>
-			<a href="https://huggingface.co/spaces/onnx/export" class="btn btn-primary"
+			<a href="https://huggingface.co/spaces/onnx/export" class="btn btn-primary rounded-sm"
 				>Export PyTorch models to ONNX →</a
 			>
-			<a href="https://huggingface.co/docs/transformers/serialization" class="btn btn-primary"
+			<a href="https://huggingface.co/docs/transformers/serialization" class="btn btn-primary rounded-sm"
 				>Other ONNX export options →</a
 			>
 		</div>
--- a/src/routes/pytorch/+page.svelte
+++ b/src/routes/pytorch/+page.svelte
@ -69,7 +69,7 @@
 						exporter APIs to ensure a high level of compatibility with PyTorch models.
 					</p>
 					<div class="card-actions">
-						<a href="https://onnxruntime.ai/docs/api/" class="btn btn-primary"
+						<a href="https://onnxruntime.ai/docs/api/" class="btn btn-primary rounded-sm"
 							><span class="hidden md:grid">Get your PyTorch Models ready for</span> optimized deployment
 							→</a
 						>
@ -91,7 +91,7 @@
 					<div class="card-actions">
 						<a
 							href="https://techcommunity.microsoft.com/t5/ai-machine-learning-blog/azure-container-for-pytorch-is-now-generally-available-in-azure/ba-p/3774616"
-							class="btn btn-primary">Learn about ACPT →</a
+							class="btn btn-primary rounded-sm">Learn about ACPT →</a
 						>
 					</div>
 				</div>
@ -119,12 +119,12 @@
 					</p>
 					<div class="card-actions">
 						<a
-							class="btn btn-primary hidden md:grid"
+							class="btn btn-primary hidden md:grid rounded-sm"
 							href="https://cloudblogs.microsoft.com/opensource/tag/onnx"
 							>Check the latest on performance enhancements →</a
 						>
 						<a
-							class="btn btn-primary md:hidden"
+							class="btn btn-primary md:hidden rounded-sm"
 							href="https://cloudblogs.microsoft.com/opensource/tag/onnx"
 							>Performance enhancements →</a
 						>
@ -145,10 +145,10 @@
 						days.
 					</p>
 					<div class="card-actions">
-						<a href="./testimonials" class="btn btn-primary hidden md:grid"
+						<a href="./testimonials" class="btn btn-primary hidden md:grid rounded-sm"
 							>See what ONNX Runtime users are saying →</a
 						>
-						<a href="./testimonials" class="btn btn-primary md:hidden">Testimonials →</a>
+						<a href="./testimonials" class="btn btn-primary md:hidden rounded-sm">Testimonials →</a>
 					</div>
 				</div>
 				<figure class="md:col-span-1 col-span-2 order-first sm:order-last pr-5">
--- a/src/routes/windows/+page.svelte
+++ b/src/routes/windows/+page.svelte
@ -26,7 +26,7 @@
 			<br />
 			<a
 				href="https://onnxruntime.ai/docs/get-started/with-windows.html#windows-os-integration"
-				class="btn btn-primary">Get started with ONNX Runtime for Windows →</a
+				class="btn btn-primary rounded-sm">Get started with ONNX Runtime for Windows →</a
 			>
 		</div>
 		<div class="m-auto">
@ -62,12 +62,12 @@
 		recent blogs:
 	</p>
 	<a
-		class="btn btn-primary mb-4 md:mb:0"
+		class="btn btn-primary rounded-sm mb-4 md:mb:0"
 		href="https://blogs.windows.com/windowsdeveloper/2023/05/23/unlocking-the-end-to-end-windows-ai-developer-experience-using-onnx-runtime-and-olive/"
 		>Unlocking the end-to-end Windows AI developer experience using ONNX Runtime and Olive →</a
 	>
 	<a
-		class="btn btn-primary"
+		class="btn btn-primary rounded-sm"
 		href="https://blogs.windows.com/windowsdeveloper/2023/05/23/bringing-the-power-of-ai-to-windows-11-unlocking-a-new-era-of-productivity-for-customers-and-developers-with-windows-copilot-and-dev-home/"
 		>Bringing the power of AI to Windows 11 →</a
 	>
@ -98,11 +98,11 @@
 				<div class="card-actions">
 					<a
 						href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery"
-						class="btn btn-primary hidden md:grid">Check out the Windows ML Sample Gallery →</a
+						class="btn btn-primary hidden md:grid rounded-sm">Check out the Windows ML Sample Gallery →</a
 					>
 					<a
 						href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery"
-						class="btn btn-primary md:hidden">Windows ML Sample Gallery →</a
+						class="btn btn-primary md:hidden rounded-sm">Windows ML Sample Gallery →</a
 					>
 				</div>
 			</div>
@ -117,7 +117,7 @@
 				<div class="card-actions">
 					<a
 						href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery"
-						class="btn btn-primary">Check out SqueezeNet →</a
+						class="btn btn-primary rounded-sm">Check out SqueezeNet →</a
 					>
 				</div>
 			</div>
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,11 +1,21 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex } from 'mdsvex';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: [vitePreprocess()],
+	extensions: ['.svelte', '.md', '.svx'],
+	preprocess: [
+		vitePreprocess(),
+		mdsvex({
+			extensions: ['.md', '.svx'],
+			layout: {
+				blogs: 'src/routes/blogs/post.svelte'
+			}
+		})
+	],

 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.