Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-27 22:19:04 -05:00
Code Issues Activity

Add instructions on how to hide the dev overlay (#9255)

Browse source 
* Add instructions on how to hide the dev overlay

* Add missing link
This commit is contained in:
Matthew Phillips 2023-11-30 16:40:32 -05:00 • committed by GitHub
parent 0bd0c578f5
commit 9ea3e0b94f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tasty-parents-own.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Adds instructions on how to hide the dev overlay

30
packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
View file

@ -49,6 +49,8 @@ export default {
`<style>
:host astro-dev-overlay-window {
height: 480px;
--color-purple: rgba(224, 204, 250, 1);
}
header {
display: flex;
@ -91,6 +93,24 @@ export default {
height: 1em;
display: block;
}
code {
color: var(--color-purple);
border-color: #343841;
border-style: solid;
border-width: 1px;
border-radius: .4em;
background-color: #24262D;
padding: .3em;
}
p {
line-height: 2em;
}
a, a:visited {
color: var(--color-purple);
}
</style>
<header>
<h1><astro-dev-overlay-icon icon="gear"></astro-dev-overlay-icon> Settings</h1>
@ -98,12 +118,16 @@ export default {
<hr />
<h2>General</h2>
<h2 id="general">General</h2>
<hr />
<h3>Hide overlay</h3>
<p>Run <code>astro preferences disable devOverlay</code> in your terminal to disable this dev overlay in this project. <a href="https://docs.astro.build/en/reference/cli-reference/#astro-preferences">Learn more</a>.</p>
`
);
const general = windowElement.querySelector('#general')!;
for (const settingsRow of settingsRows) {
windowElement.append(getElementForSettingAsString(settingsRow));
windowElement.append(document.createElement('hr'));
general.after(getElementForSettingAsString(settingsRow));
general.after(document.createElement('hr'));
}
canvas.append(windowElement);