From ca2d0728e421a19492dd88aa35c37626c6a2897a Mon Sep 17 00:00:00 2001
From: Dan Jutan <danjutan@gmail.com>
Date: Wed, 31 Aug 2022 15:18:53 -0400
Subject: Update templates to avoid devDependencies and :global (#4544)

* devDependencies => dependencies

* :global -> is:global

* update lockfile

* remove unneeded markdown dependency
---
 examples/docs/src/components/Header/Header.astro   | 10 +++--
 .../src/components/LeftSidebar/LeftSidebar.astro   | 50 ++++++++++++----------
 examples/docs/src/layouts/MainLayout.astro         | 29 +++++++------
 3 files changed, 48 insertions(+), 41 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 bada732a6..58fe46ee9 100644
--- a/examples/docs/src/components/Header/Header.astro
+++ b/examples/docs/src/components/Header/Header.astro
@@ -135,13 +135,15 @@ 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 d0fe8da4e..90aae26e2 100644
--- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -14,25 +14,27 @@ 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>
 
@@ -101,13 +103,15 @@ 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 79a2f81a9..60d43922a 100644
--- a/examples/docs/src/layouts/MainLayout.astro
+++ b/examples/docs/src/layouts/MainLayout.astro
@@ -47,11 +47,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 				overflow-x: hidden;
 			}
 
-			.layout :global(> *) {
-				width: 100%;
-				height: 100%;
-			}
-
 			.grid-sidebar {
 				height: 100vh;
 				position: sticky;
@@ -78,15 +73,6 @@ 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;
@@ -116,6 +102,21 @@ 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