Add devToolbar.placement configuration option#15015
Add devToolbar.placement configuration option#15015Princesseuh merged 9 commits intowithastro:mainfrom
devToolbar.placement configuration option#15015Conversation
🦋 Changeset detectedLatest commit: f412cfd The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
devToolbar.placement configuration option
bc17e05 to
8e300bb
Compare
8e300bb to
88b0cb2
Compare
88b0cb2 to
c6821fa
Compare
|
@withastro Dev toolbar placement is tied to a site’s layout rather than an individual user preference, so defining it in config makes the default explicit and consistent across environments (e.g. dev machines, browser instances), while still preserving local overrides. Assuming the case is sound, is this the right approach for introducing the config option? Are there any other boxes I should be ticking? |
|
Hello! Apologies for the delay, with the upcoming Astro 6 and the holidays, some things fell through the cracks. I'll be reviewing this shortly! |
Princesseuh
left a comment
There was a problem hiding this comment.
Good with me, awesome work!
sarah11918
left a comment
There was a problem hiding this comment.
Thanks for providing this new feature! Left a note on the kind of changeset message we'd typically like to have with an example you can use as a model. And the docs look good! Just tiny updates!
a78725a to
923d8c4
Compare
|
@Princesseuh @sarah11918 Thank you - Rebased! Let me know if this works! |
cef52b4 to
6b3689b
Compare
sarah11918
left a comment
There was a problem hiding this comment.
Approving for docs! Thanks for making the dev toolbar even more usable! 🥳
|
@sarah11918 Thank you! |
bd8c445 to
b189236
Compare
b189236 to
740a662
Compare
Add exported type for toolbar placement options and extend DevToolbarMetadata to include optional placement property.
Add optional `placement` property to devToolbar config schema and interface with JSDoc documentation.
Pass the devToolbar.placement config value to the client via __astro_dev_toolbar__ metadata injection.
Implement the settings priority chain: 1. defaultSettings (hardcoded 'bottom-center') 2. Config placement (from astro.config.mjs) 3. localStorage (user's persisted choice) This allows project-level default placement while still respecting user's UI-driven placement preferences.
Test that: - Valid placement values are accepted - Placement is optional (can be omitted) - Invalid placement values are rejected
Minor version bump per Astro convention for new config options.
Include @Version added and tweak comment copy Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
- Add js syntax highlighting to code block - Fix spacing in comment - Fix "overriden" → "overridden" typo
740a662 to
f412cfd
Compare
This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [astro](https://astro.build) ([source](https://github.com/withastro/astro/tree/HEAD/packages/astro)) | [`5.16.15` → `5.17.1`](https://renovatebot.com/diffs/npm/astro/5.16.15/5.17.1) |  |  | --- ### Release Notes <details> <summary>withastro/astro (astro)</summary> ### [`v5.17.1`](https://github.com/withastro/astro/blob/HEAD/packages/astro/CHANGELOG.md#5171) [Compare Source](https://github.com/withastro/astro/compare/[email protected]@5.17.1) ##### Patch Changes - [#​15334](withastro/astro#15334) [`d715f1f`](withastro/astro@d715f1f) Thanks [@​florian-lefebvre](https://github.com/florian-lefebvre)! - **BREAKING CHANGE to the experimental Fonts API only** Removes the `getFontBuffer()` helper function exported from `astro:assets` when using the experimental Fonts API This experimental feature introduced in v15.6.13 ended up causing significant memory usage during build. This feature has been removed and will be reintroduced after further exploration and testing. If you were relying on this function, you can replicate the previous behavior manually: - On prerendered routes, read the file using `node:fs` - On server rendered routes, fetch files using URLs from `fontData` and `context.url` ### [`v5.17.0`](https://github.com/withastro/astro/blob/HEAD/packages/astro/CHANGELOG.md#5170) [Compare Source](https://github.com/withastro/astro/compare/[email protected]@5.17.0) ##### Minor Changes - [#​14932](withastro/astro#14932) [`b19d816`](withastro/astro@b19d816) Thanks [@​patrickarlt](https://github.com/patrickarlt)! - Adds support for returning a Promise from the `parser()` option of the `file()` loader This enables you to run asynchronous code such as fetching remote data or using async parsers when loading files with the Content Layer API. For example: ```js import { defineCollection } from 'astro:content'; import { file } from 'astro/loaders'; const blog = defineCollection({ loader: file('src/data/blog.json', { parser: async (text) => { const data = JSON.parse(text); // Perform async operations like fetching additional data const enrichedData = await fetch(`https://api.example.com/enrich`, { method: 'POST', body: JSON.stringify(data), }).then((res) => res.json()); return enrichedData; }, }), }); export const collections = { blog }; ``` See [the `parser()` reference documentation](https://docs.astro.build/en/reference/content-loader-reference/#parser) for more information. - [#​15171](withastro/astro#15171) [`f220726`](withastro/astro@f220726) Thanks [@​mark-ignacio](https://github.com/mark-ignacio)! - Adds a new, optional `kernel` configuration option to select a resize algorithm in the Sharp image service By default, Sharp resizes images with the `lanczos3` kernel. This new config option allows you to set the default resizing algorithm to any resizing option supported by [Sharp](https://sharp.pixelplumbing.com/api-resize/#resize) (e.g. `linear`, `mks2021`). Kernel selection can produce quite noticeable differences depending on various characteristics of the source image - especially drawn art - so changing the kernel gives you more control over the appearance of images on your site: ```js export default defineConfig({ image: { service: { entrypoint: 'astro/assets/services/sharp', config: { kernel: "mks2021" } } }) ``` This selection will apply to all images on your site, and is not yet configurable on a per-image basis. For more information, see [Sharps documentation on resizing images](https://sharp.pixelplumbing.com/api-resize/#resize). - [#​15063](withastro/astro#15063) [`08e0fd7`](withastro/astro@08e0fd7) Thanks [@​jmortlock](https://github.com/jmortlock)! - Adds a new `partitioned` option when setting a cookie to allow creating partitioned cookies. [Partitioned cookies](https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Privacy_sandbox/Partitioned_cookies) can only be read within the context of the top-level site on which they were set. This allows cross-site tracking to be blocked, while still enabling legitimate uses of third-party cookies. You can create a partitioned cookie by passing `partitioned: true` when setting a cookie. Note that partitioned cookies must also be set with `secure: true`: ```js Astro.cookies.set('my-cookie', 'value', { partitioned: true, secure: true, }); ``` For more information, see the [`AstroCookieSetOptions` API reference](https://docs.astro.build/en/reference/api-reference/#astrocookiesetoptions). - [#​15022](withastro/astro#15022) [`f1fce0e`](withastro/astro@f1fce0e) Thanks [@​ascorbic](https://github.com/ascorbic)! - Adds a new `retainBody` option to the `glob()` loader to allow reducing the size of the data store. Currently, the `glob()` loader stores the raw body of each content file in the entry, in addition to the rendered HTML. The `retainBody` option defaults to `true`, but you can set it to `false` to prevent the raw body of content files from being stored in the data store. This significantly reduces the deployed size of the data store and helps avoid hitting size limits for sites with very large collections. The rendered body will still be available in the `entry.rendered.html` property for markdown files, and the `entry.filePath` property will still point to the original file. ```js import { defineCollection } from 'astro:content'; import { glob } from 'astro/loaders'; const blog = defineCollection({ loader: glob({ pattern: '**/*.md', base: './src/content/blog', retainBody: false, }), }); ``` When `retainBody` is `false`, `entry.body` will be `undefined` instead of containing the raw file contents. - [#​15153](withastro/astro#15153) [`928529f`](withastro/astro@928529f) Thanks [@​jcayzac](https://github.com/jcayzac)! - Adds a new `background` property to the `<Image />` component. This optional property lets you pass a background color to flatten the image with. By default, Sharp uses a black background when flattening an image that is being converted to a format that does not support transparency (e.g. `jpeg`). Providing a value for `background` on an `<Image />` component, or passing it to the `getImage()` helper, will flatten images using that color instead. This is especially useful when the requested output format doesn't support an alpha channel (e.g. `jpeg`) and can't support transparent backgrounds. ```astro --- import { Image } from 'astro:assets'; --- <Image src="/transparent.png" alt="A JPEG with a white background!" format="jpeg" background="#ffffff" /> ``` See more about this new property in [the image reference docs](https://docs.astro.build/en/reference/modules/astro-assets/#background) - [#​15015](withastro/astro#15015) [`54f6006`](withastro/astro@54f6006) Thanks [@​tony](https://github.com/tony)! - Adds optional `placement` config option for the dev toolbar. You can now configure the default toolbar position (`'bottom-left'`, `'bottom-center'`, or `'bottom-right'`) via `devToolbar.placement` in your Astro config. This option is helpful for sites with UI elements (chat widgets, cookie banners) that are consistently obscured by the toolbar in the dev environment. You can set a project default that is consistent across environments (e.g. dev machines, browser instances, team members): ```js // astro.config.mjs export default defineConfig({ devToolbar: { placement: 'bottom-left', }, }); ``` User preferences from the toolbar UI (stored in `localStorage`) still take priority, so this setting can be overridden in individual situations as necessary. ### [`v5.16.16`](https://github.com/withastro/astro/blob/HEAD/packages/astro/CHANGELOG.md#51616) [Compare Source](https://github.com/withastro/astro/compare/[email protected]@5.16.16) ##### Patch Changes - [#​15281](withastro/astro#15281) [`a1b80c6`](withastro/astro@a1b80c6) Thanks [@​matthewp](https://github.com/matthewp)! - Ensures server island requests carry an encrypted component export identifier so they do not accidentally resolve to the wrong component. - [#​15304](withastro/astro#15304) [`02ee3c7`](withastro/astro@02ee3c7) Thanks [@​cameronapak](https://github.com/cameronapak)! - Fix: Remove await from getActionResult example - [#​15324](withastro/astro#15324) [`ab41c3e`](withastro/astro@ab41c3e) Thanks [@​Princesseuh](https://github.com/Princesseuh)! - Fixes an issue where certain unauthorized links could be rendered as clickable in the error overlay </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0Mi45Mi4xMiIsInVwZGF0ZWRJblZlciI6IjQyLjkyLjEyIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> Co-authored-by: Renovate Bot <[email protected]> Co-committed-by: Renovate Bot <[email protected]>
RFC / Context: Dev Toolbar: allow configuring default position roadmap#1277
DX / Quality of life tweak for dev toolbar placement.
Changes
Adds optional
devToolbar.placementconfiguration option.New config property:
devToolbar.placementaccepts'bottom-left','bottom-center', or'bottom-right'Priority:
defaultSettings→config→localStorage(user's UI choice still wins)Use case: Sites with bottom-center UI elements (chat widgets, cookie banners) can set a project-wide default that persists across team members and localStorage clears
Example:
Before this PR, it would require manually setting the
placementevery timelocalStorageis cleared. Doesn't persist as a project default.Exampe usage,
astro.config.mjs:Files changed
types/public/toolbar.tsDevToolbarPlacementtypetypes/public/config.tsplacementto interface with JSDoccore/config/schemas/base.tsvite-plugin-astro-server/pipeline.tsruntime/client/dev-toolbar/settings.tstest/units/config/config-validate.test.jsTesting
Testing only
test/units/config/config-validate.test.js:pnpm:
npm:
Docs
@withastro/maintainers-docs for feedback, Documentation needed for:
devToolbar.placementoption'bottom-center'