aboutsummaryrefslogtreecommitdiff
path: root/examples/docs/src
diff options
context:
space:
mode:
authorGravatar Dan Jutan <danjutan@gmail.com> 2022-08-31 16:17:15 -0400
committerGravatar GitHub <noreply@github.com> 2022-08-31 16:17:15 -0400
commitd5bd23d5f41fe9618d705d75724092af49dd5bc5 (patch)
tree5672239b2d204d2cabc1863aca20a9ee6f400f7b /examples/docs/src
parentfa48d011098a48c1d609f6b70e6562d44c3217b5 (diff)
downloadastro-d5bd23d5f41fe9618d705d75724092af49dd5bc5.tar.gz
astro-d5bd23d5f41fe9618d705d75724092af49dd5bc5.tar.zst
astro-d5bd23d5f41fe9618d705d75724092af49dd5bc5.zip
Update templates to avoid devDependencies and :global (#4576)
* devDependencies => dependencies * :global -> is:global * update lockfile * remove unneeded markdown dependency * fix remaining merge conflicts * update lockfile
Diffstat (limited to 'examples/docs/src')
-rw-r--r--examples/docs/src/components/Header/Header.astro10
-rw-r--r--examples/docs/src/components/LeftSidebar/LeftSidebar.astro50
-rw-r--r--examples/docs/src/layouts/MainLayout.astro29
3 files changed, 48 insertions, 41 deletions
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>