From 23d4f80145d083a707b570b9a563ec5621060df9 Mon Sep 17 00:00:00 2001
From: Dan Jutan <danjutan@gmail.com>
Date: Wed, 31 Aug 2022 15:27:36 -0400
Subject: Revert "Update templates to avoid devDependencies and :global
 (#4544)" (#4575)

This reverts commit ca2d0728e421a19492dd88aa35c37626c6a2897a.
---
 examples/docs/src/components/Header/Header.astro   | 10 ++---
 .../src/components/LeftSidebar/LeftSidebar.astro   | 50 ++++++++++------------
 examples/docs/src/layouts/MainLayout.astro         | 29 ++++++-------
 3 files changed, 41 insertions(+), 48 deletions(-)

(limited to 'examples/docs/src')

diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro
index 58fe46ee9..bada732a6 100644
--- a/examples/docs/src/components/Header/Header.astro
+++ b/examples/docs/src/components/Header/Header.astro
@@ -135,15 +135,13 @@ const lang = getLanguageFromURL(currentPage);
 		max-width: 200px;
 	}
 
+	:global(.search-item > *) {
+		flex-grow: 1;
+	}
+
 	@media (min-width: 50em) {
 		.search-item {
 			max-width: 400px;
 		}
 	}
 </style>
-
-<style is:global>
-	.search-item > * {
-		flex-grow: 1;
-	}
-</style>
diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
index 90aae26e2..d0fe8da4e 100644
--- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -14,27 +14,25 @@ const sidebar = SIDEBAR[langCode];
 
 <nav aria-labelledby="grid-left">
 	<ul class="nav-groups">
-		{
-			Object.entries(sidebar).map(([header, children]) => (
-				<li>
-					<div class="nav-group">
-						<h2>{header}</h2>
-						<ul>
-							{children.map((child) => {
-								const url = Astro.site?.pathname + child.link;
-								return (
-									<li class="nav-link">
-										<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
-											{child.text}
-										</a>
-									</li>
-								);
-							})}
-						</ul>
-					</div>
-				</li>
-			))
-		}
+		{Object.entries(sidebar).map(([header, children]) => (
+			<li>
+				<div class="nav-group">
+					<h2>{header}</h2>
+					<ul>
+						{children.map((child) => {
+							const url = Astro.site?.pathname + child.link;
+							return (
+								<li class="nav-link">
+									<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
+										{child.text}
+									</a>
+								</li>
+							);
+						})}
+					</ul>
+				</div>
+			</li>
+		))}
 	</ul>
 </nav>
 
@@ -103,15 +101,13 @@ const sidebar = SIDEBAR[langCode];
 		font-weight: 600;
 	}
 
+	:global(:root.theme-dark) .nav-link a[aria-current='page'] {
+		color: hsla(var(--color-base-white), 100%, 1);
+	}
+
 	@media (min-width: 50em) {
 		.nav-groups {
 			padding: 0;
 		}
 	}
 </style>
-
-<style is:global>
-	:root.theme-dark .nav-link a[aria-current='page'] {
-		color: hsla(var(--color-base-white), 100%, 1);
-	}
-</style>
diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro
index 60d43922a..79a2f81a9 100644
--- a/examples/docs/src/layouts/MainLayout.astro
+++ b/examples/docs/src/layouts/MainLayout.astro
@@ -47,6 +47,11 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 				overflow-x: hidden;
 			}
 
+			.layout :global(> *) {
+				width: 100%;
+				height: 100%;
+			}
+
 			.grid-sidebar {
 				height: 100vh;
 				position: sticky;
@@ -73,6 +78,15 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 				display: none;
 			}
 
+			:global(.mobile-sidebar-toggle) {
+				overflow: hidden;
+			}
+
+			:global(.mobile-sidebar-toggle) #grid-left {
+				display: block;
+				top: 2rem;
+			}
+
 			@media (min-width: 50em) {
 				.layout {
 					overflow: initial;
@@ -102,21 +116,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 				}
 			}
 		</style>
-		<style is:global>
-			.layout > * {
-				width: 100%;
-				height: 100%;
-			}
-
-			.mobile-sidebar-toggle {
-				overflow: hidden;
-			}
-
-			.mobile-sidebar-toggle #grid-left {
-				display: block;
-				top: 2rem;
-			}
-		</style>
 	</head>
 
 	<body>
-- 
cgit v1.2.3