default.init() — astro Function Reference

Architecture documentation for the default.init() function in settings.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient

Entity Profile

DevToolbar→ ToolbarClient→ default.init() — astro Function Reference

Dependency Diagram

graph TD
  34b4e9af_feb1_c472_0b65_153c7d3bd53d["default.init()"]
  95a9c0e4_71a0_d1e2_1096_f5f3741dbee9["settings.ts"]
  34b4e9af_feb1_c472_0b65_153c7d3bd53d -->|defined in| 95a9c0e4_71a0_d1e2_1096_f5f3741dbee9
  style 34b4e9af_feb1_c472_0b65_153c7d3bd53d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts lines 73–221

	init(canvas, eventTarget) {
		createSettingsWindow();

		document.addEventListener('astro:after-swap', createSettingsWindow);

		closeOnOutsideClick(eventTarget);
		synchronizePlacementOnUpdate(eventTarget, canvas);

		function createSettingsWindow() {
			const windowElement = createWindowElement(
				`<style>
					:host astro-dev-toolbar-window {
						height: 480px;
						overflow-y: auto;
						color-scheme: dark;

						--color-purple: rgba(224, 204, 250, 1);
					}
					header {
						display: flex;
					}

					h2, h3 {
						margin-top: 0;
					}

					.setting-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					h3 {
						font-size: 16px;
						font-weight: 400;
						color: white;
						margin-bottom: 4px;
					}

					label {
						font-size: 14px;
						line-height: 1.5rem;
					}

					h1 {
						display: flex;
						align-items: center;
						gap: 8px;
						font-weight: 600;
						color: #fff;
						margin: 0;
						font-size: 22px;
					}

					astro-dev-toolbar-icon {
						width: 1em;
   					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;
					}

					label > section {
						max-width: 67%;
					}
					label > section.full-width {
						max-width: 100%;
					}
					p {
						line-height: 1.5em;
					}
					a, a:visited {
						color: var(--color-purple);