mirror of
https://github.com/withastro/astro.git
synced 2025-03-31 23:31:30 -05:00
feat: implement overlay main screen redesign (#9118)
* feat: implement redesign * fix: make it build * feat: visual tweaks * feat(overlay): update styling, integration endpoint * feat: add fallback icons * Clean up tests (#9183) * Add `@astrojs/upgrade` package for automatic package upgrades (#8525) Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * [ci] format * fix: links with same path but different search params not prefetched (#9189) Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * fix: discord icon * chore: changeset --------- Co-authored-by: Nate Moore <nate@astro.build> Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Spencer Whitehead <35475068+SpencerWhitehead7@users.noreply.github.com> Co-authored-by: Matthew Phillips <matthew@skypack.dev>
This commit is contained in:
Erika
GitHub
parent
415fec54f8
commit
000e8f4654
50 changed files with 3635 additions and 214 deletions
5
.changeset/angry-swans-fry.md
Normal file
5
.changeset/angry-swans-fry.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Redesign Dev Overlay main screen to show more information, such as the coolest integrations, your current Astro version and more.
|
||||
5
.changeset/brown-jars-lick.md
Normal file
5
.changeset/brown-jars-lick.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'astro': patch
|
||||
---
|
||||
|
||||
Fixes an issue where links with the same pathname as the current page, but different search params, were not prefetched.
|
||||
27
.changeset/tasty-dryers-bathe.md
Normal file
27
.changeset/tasty-dryers-bathe.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
'@astrojs/upgrade': minor
|
||||
---
|
||||
|
||||
Initial release!
|
||||
|
||||
`@astrojs/upgrade` is an automated command-line tool for upgrading Astro and your official Astro integrations together.
|
||||
|
||||
Inside of your existing `astro` project, run the following command to install the `latest` version of your integrations.
|
||||
|
||||
**With NPM:**
|
||||
|
||||
```bash
|
||||
npx @astrojs/upgrade
|
||||
```
|
||||
|
||||
**With Yarn:**
|
||||
|
||||
```bash
|
||||
yarn dlx @astrojs/upgrade
|
||||
```
|
||||
|
||||
**With PNPM:**
|
||||
|
||||
```bash
|
||||
pnpm dlx @astrojs/upgrade
|
||||
```
|
||||
|
|
@ -9,6 +9,8 @@
|
|||
<br>
|
||||
<a id="prefetch-false" href="/prefetch-false" data-astro-prefetch="false">false</a>
|
||||
<br>
|
||||
<a id="prefetch-search-param" href="?search-param=true" data-astro-prefetch="hover">search param</a>
|
||||
<br>
|
||||
<a id="prefetch-tap" href="/prefetch-tap" data-astro-prefetch="tap">tap</a>
|
||||
<br>
|
||||
<a id="prefetch-hover" href="/prefetch-hover" data-astro-prefetch="hover">hover</a>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ test.describe('Prefetch (default)', () => {
|
|||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on('request', (req) => {
|
||||
reqUrls.push(new URL(req.url()).pathname);
|
||||
const urlObj = new URL(req.url());
|
||||
reqUrls.push(urlObj.pathname + urlObj.search);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -38,6 +39,16 @@ test.describe('Prefetch (default)', () => {
|
|||
expect(reqUrls).not.toContainEqual('/prefetch-false');
|
||||
});
|
||||
|
||||
test('Link with search param should prefetch', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
expect(reqUrls).not.toContainEqual('/?search-param=true');
|
||||
await Promise.all([
|
||||
page.waitForEvent('request'), // wait prefetch request
|
||||
page.locator('#prefetch-search-param').hover(),
|
||||
]);
|
||||
expect(reqUrls).toContainEqual('/?search-param=true');
|
||||
});
|
||||
|
||||
test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
expect(reqUrls).not.toContainEqual('/prefetch-tap');
|
||||
|
|
@ -102,7 +113,8 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
|
|||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
page.on('request', (req) => {
|
||||
reqUrls.push(new URL(req.url()).pathname);
|
||||
const urlObj = new URL(req.url());
|
||||
reqUrls.push(urlObj.pathname + urlObj.search);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -129,6 +141,16 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
|
|||
expect(reqUrls).not.toContainEqual('/prefetch-false');
|
||||
});
|
||||
|
||||
test('Link with search param should prefetch', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
expect(reqUrls).not.toContainEqual('/?search-param=true');
|
||||
await Promise.all([
|
||||
page.waitForEvent('request'), // wait prefetch request
|
||||
page.locator('#prefetch-search-param').hover(),
|
||||
]);
|
||||
expect(reqUrls).toContainEqual('/?search-param=true');
|
||||
});
|
||||
|
||||
test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
expect(reqUrls).not.toContainEqual('/prefetch-tap');
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ test.describe('React client id generation', () => {
|
|||
const hydratedId1 = await components.nth(2).getAttribute('id');
|
||||
const clientOnlyId0 = await components.nth(3).getAttribute('id');
|
||||
const clientOnlyId1 = await components.nth(4).getAttribute('id');
|
||||
console.log('ho ho', staticId, hydratedId0, hydratedId1, clientOnlyId0, clientOnlyId1);
|
||||
expect(staticId).not.toEqual(hydratedId0);
|
||||
expect(hydratedId0).not.toEqual(hydratedId1);
|
||||
expect(hydratedId1).not.toEqual(clientOnlyId0);
|
||||
|
|
|
|||
|
|
@ -21,11 +21,17 @@ import type { TSConfig } from '../core/config/tsconfig.js';
|
|||
import type { AstroCookies } from '../core/cookies/index.js';
|
||||
import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
|
||||
import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js';
|
||||
import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js';
|
||||
import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js';
|
||||
import type { DevOverlayToggle } from '../runtime/client/dev-overlay/ui-library/toggle.js';
|
||||
import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js';
|
||||
import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js';
|
||||
import type {
|
||||
DevOverlayBadge,
|
||||
DevOverlayButton,
|
||||
DevOverlayCard,
|
||||
DevOverlayHighlight,
|
||||
DevOverlayIcon,
|
||||
DevOverlayToggle,
|
||||
DevOverlayTooltip,
|
||||
DevOverlayWindow,
|
||||
} from '../runtime/client/dev-overlay/ui-library/index.js';
|
||||
import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
|
||||
import type { OmitIndexSignature, Simplify } from '../type-utils.js';
|
||||
import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
|
||||
|
|
@ -2512,6 +2518,8 @@ export type DevOverlayMetadata = Window &
|
|||
typeof globalThis & {
|
||||
__astro_dev_overlay__: {
|
||||
root: string;
|
||||
version: string;
|
||||
debugInfo: string;
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -2523,5 +2531,9 @@ declare global {
|
|||
'astro-dev-overlay-tooltip': DevOverlayTooltip;
|
||||
'astro-dev-overlay-highlight': DevOverlayHighlight;
|
||||
'astro-dev-overlay-toggle': DevOverlayToggle;
|
||||
'astro-dev-overlay-badge': DevOverlayBadge;
|
||||
'astro-dev-overlay-button': DevOverlayButton;
|
||||
'astro-dev-overlay-icon': DevOverlayIcon;
|
||||
'astro-dev-overlay-card': DevOverlayCard;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { execSync } from 'node:child_process';
|
|||
import { arch, platform } from 'node:os';
|
||||
import prompts from 'prompts';
|
||||
import type yargs from 'yargs-parser';
|
||||
import type { AstroConfig, AstroUserConfig } from '../../@types/astro.js';
|
||||
import { resolveConfig } from '../../core/config/index.js';
|
||||
import { ASTRO_VERSION } from '../../core/constants.js';
|
||||
import { flagsToAstroInlineConfig } from '../flags.js';
|
||||
|
|
@ -12,7 +13,13 @@ interface InfoOptions {
|
|||
flags: yargs.Arguments;
|
||||
}
|
||||
|
||||
export async function printInfo({ flags }: InfoOptions) {
|
||||
export async function getInfoOutput({
|
||||
userConfig,
|
||||
print,
|
||||
}: {
|
||||
userConfig: AstroUserConfig | AstroConfig;
|
||||
print: boolean;
|
||||
}): Promise<string> {
|
||||
const rows: Array<[string, string | string[]]> = [
|
||||
['Astro', `v${ASTRO_VERSION}`],
|
||||
['Node', process.version],
|
||||
|
|
@ -20,9 +27,7 @@ export async function printInfo({ flags }: InfoOptions) {
|
|||
['Package Manager', getPackageManager()],
|
||||
];
|
||||
|
||||
const inlineConfig = flagsToAstroInlineConfig(flags);
|
||||
try {
|
||||
const { userConfig } = await resolveConfig(inlineConfig, 'info');
|
||||
rows.push(['Output', userConfig.output ?? 'static']);
|
||||
rows.push(['Adapter', userConfig.adapter?.name ?? 'none']);
|
||||
const integrations = (userConfig?.integrations ?? [])
|
||||
|
|
@ -35,10 +40,17 @@ export async function printInfo({ flags }: InfoOptions) {
|
|||
|
||||
let output = '';
|
||||
for (const [label, value] of rows) {
|
||||
output += printRow(label, value);
|
||||
output += printRow(label, value, print);
|
||||
}
|
||||
|
||||
await copyToClipboard(output.trim());
|
||||
return output.trim();
|
||||
}
|
||||
|
||||
export async function printInfo({ flags }: InfoOptions) {
|
||||
const { userConfig } = await resolveConfig(flagsToAstroInlineConfig(flags), 'info');
|
||||
const output = await getInfoOutput({ userConfig, print: true });
|
||||
|
||||
await copyToClipboard(output);
|
||||
}
|
||||
|
||||
async function copyToClipboard(text: string) {
|
||||
|
|
@ -105,7 +117,7 @@ function getPackageManager() {
|
|||
}
|
||||
|
||||
const MAX_PADDING = 25;
|
||||
function printRow(label: string, value: string | string[]) {
|
||||
function printRow(label: string, value: string | string[], print: boolean) {
|
||||
const padding = MAX_PADDING - label.length;
|
||||
const [first, ...rest] = Array.isArray(value) ? value : [value];
|
||||
let plaintext = `${label}${' '.repeat(padding)}${first}`;
|
||||
|
|
@ -117,6 +129,8 @@ function printRow(label: string, value: string | string[]) {
|
|||
}
|
||||
}
|
||||
plaintext += '\n';
|
||||
console.log(richtext);
|
||||
if (print) {
|
||||
console.log(richtext);
|
||||
}
|
||||
return plaintext;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@ function canPrefetchUrl(url: string, ignoreSlowConnection: boolean) {
|
|||
const urlObj = new URL(url, location.href);
|
||||
return (
|
||||
location.origin === urlObj.origin &&
|
||||
location.pathname !== urlObj.pathname &&
|
||||
(location.pathname !== urlObj.pathname || location.search !== urlObj.search) &&
|
||||
!prefetchedUrls.has(url)
|
||||
);
|
||||
} catch {}
|
||||
|
|
|
|||
|
|
@ -14,11 +14,16 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
{ default: astroXrayPlugin },
|
||||
{ default: astroSettingsPlugin },
|
||||
{ AstroDevOverlay, DevOverlayCanvas },
|
||||
{ DevOverlayCard },
|
||||
{ DevOverlayHighlight },
|
||||
{ DevOverlayTooltip },
|
||||
{ DevOverlayWindow },
|
||||
{ DevOverlayToggle },
|
||||
{
|
||||
DevOverlayCard,
|
||||
DevOverlayHighlight,
|
||||
DevOverlayTooltip,
|
||||
DevOverlayWindow,
|
||||
DevOverlayToggle,
|
||||
DevOverlayButton,
|
||||
DevOverlayBadge,
|
||||
DevOverlayIcon,
|
||||
},
|
||||
{ getIconElement, isDefinedIcon },
|
||||
] = await Promise.all([
|
||||
// @ts-expect-error
|
||||
|
|
@ -28,12 +33,8 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
import('./plugins/xray.js'),
|
||||
import('./plugins/settings.js'),
|
||||
import('./overlay.js'),
|
||||
import('./ui-library/card.js'),
|
||||
import('./ui-library/highlight.js'),
|
||||
import('./ui-library/tooltip.js'),
|
||||
import('./ui-library/window.js'),
|
||||
import('./ui-library/toggle.js'),
|
||||
import('./ui-library/icons.js'),
|
||||
import('./ui-library/index.js'),
|
||||
import('./ui-library/icons.js'),
|
||||
]);
|
||||
|
||||
// Register custom elements
|
||||
|
|
@ -44,6 +45,9 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
|
||||
customElements.define('astro-dev-overlay-card', DevOverlayCard);
|
||||
customElements.define('astro-dev-overlay-toggle', DevOverlayToggle);
|
||||
customElements.define('astro-dev-overlay-button', DevOverlayButton);
|
||||
customElements.define('astro-dev-overlay-badge', DevOverlayBadge);
|
||||
customElements.define('astro-dev-overlay-icon', DevOverlayIcon);
|
||||
|
||||
overlay = document.createElement('astro-dev-overlay');
|
||||
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ export class AstroDevOverlay extends HTMLElement {
|
|||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: auto;
|
||||
border: 0;
|
||||
color: white;
|
||||
color: #13151A;
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,90 @@
|
|||
import type { DevOverlayPlugin } from '../../../../@types/astro.js';
|
||||
import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
|
||||
import { isDefinedIcon, type Icon } from '../ui-library/icons.js';
|
||||
import { colorForIntegration, iconForIntegration } from './utils/icons.js';
|
||||
import { createWindowWithTransition, waitForTransition } from './utils/window.js';
|
||||
|
||||
const astroLogo =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 99 26" width="100"><path fill="#fff" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="url(#paint0_linear_386_2739)" d="M6.70402 22.1453c-1.17459-1.0737-1.51748-3.3297-1.02811-4.9641.84853 1.0304 2.02424 1.3569 3.24204 1.5411 1.88005.2844 3.72635.178 5.47285-.6813.1998-.0984.3844-.2292.6027-.3617.1639.4755.2065.9554.1493 1.4439-.1392 1.1898-.7313 2.1088-1.673 2.8054-.3765.2787-.775.5278-1.1639.7905-1.1948.8075-1.518 1.7544-1.0691 3.1318.0107.0336.0202.0671.0444.149-.6101-.273-1.0557-.6705-1.39518-1.1931-.3586-.5517-.52921-1.1619-.53819-1.8221-.00449-.3213-.00449-.6455-.0477-.9623-.10551-.7722-.46804-1.118-1.15102-1.1379-.70094-.0205-1.2554.4129-1.40244 1.0953-.01122.0523-.02749.1041-.04377.1649l.00112.0006Z"/><path fill="#fff" d="M0 16.909s3.47815-1.6944 6.96603-1.6944l2.62973-8.13858c.09846-.39359.38592-.66106.71044-.66106.3246 0 .612.26747.7105.66106l2.6297 8.13858c4.1309 0 6.966 1.6944 6.966 1.6944S14.7045.814589 14.693.782298C14.5234.306461 14.2371 0 13.8512 0H6.76183c-.38593 0-.66063.306461-.84174.782298C5.90733.81398 0 16.909 0 16.909ZM36.671 11.7318c0 1.4262-1.7739 2.2779-4.2302 2.2779-1.5985 0-2.1638-.3962-2.1638-1.2281 0-.8715.7018-1.2875 2.3003-1.2875 1.4426 0 2.6707.0198 4.0937.1981v.0396Zm.0195-1.7629c-.8772-.19808-2.2028-.31693-3.7818-.31693-4.6006 0-6.7644 1.08943-6.7644 3.62483 0 2.6344 1.4815 3.6446 4.9125 3.6446 2.9046 0 4.8735-.7328 5.5947-2.5354h.117c-.0195.4358-.039.8716-.039 1.2083 0 .931.156 1.0102.9162 1.0102h3.5869c-.1949-.5546-.3119-2.1194-.3119-3.4663 0-1.446.0585-2.5355.0585-4.00123 0-2.99098-1.7934-4.89253-7.4077-4.89253-2.4173 0-5.1074.41596-7.1543 1.03.1949.81213.4679 2.45617.6043 3.5258 1.774-.83193 4.2887-1.18847 6.2381-1.18847 2.6902 0 3.4309.61404 3.4309 1.86193v.4952ZM46.5325 12.5637c-.4874.0594-1.1502.0594-1.8325.0594-.7213 0-1.3841-.0198-1.8324-.0792 0 .1585-.0195.3367-.0195.4952 0 2.476 1.618 3.922 7.3102 3.922 5.3609 0 7.0958-1.4262 7.0958-3.9418 0-2.3769-1.1501-3.5456-6.238-3.8031-3.9573-.17827-4.3082-.61404-4.3082-1.10924 0-.57442.5068-.87154 3.158-.87154 2.7487 0 3.4894.37635 3.4894 1.16866v.17827c.3899-.01981 1.0917-.03961 1.813-.03961.6823 0 1.423.0198 1.8519.05942 0-.17827.0195-.33674.0195-.47539 0-2.91175-2.4172-3.86252-7.0958-3.86252-5.2634 0-7.0373 1.2875-7.0373 3.8031 0 2.25805 1.423 3.66445 6.472 3.88235 3.7233.1188 4.1327.5348 4.1327 1.1092 0 .6141-.6043.8914-3.2165.8914-3.0021 0-3.7623-.416-3.7623-1.2677v-.1189ZM63.6883 2.125c-1.423 1.32712-3.9768 2.65425-5.3998 3.01079.0195.73289.0195 2.07982.0195 2.81271l1.3061.01981c-.0195 1.40635-.039 3.10979-.039 4.23889 0 2.6344 1.3841 4.6152 5.6922 4.6152 1.813 0 3.0216-.1981 4.5226-.515-.1559-.9706-.3314-2.4562-.3898-3.5852-.8968.2971-2.0274.4556-3.275.4556-1.735 0-2.4368-.4754-2.4368-1.8422 0-1.1884 0-2.29767.0195-3.32768 2.2223.01981 4.4446.05943 5.7507.09904-.0195-1.03.0195-2.51559.078-3.50598-1.8909.03961-4.0157.05942-5.7702.05942.0195-.87154.039-1.70347.0585-2.5354h-.1365ZM75.3313 7.35427c.0195-1.03001.039-1.90156.0585-2.75329h-3.9183c.0585 1.70347.0585 3.44656.0585 6.00172 0 2.5553-.0195 4.3182-.0585 6.0018h4.4836c-.078-1.1885-.0975-3.189-.0975-4.8925 0-2.69388 1.0917-3.46638 3.5674-3.46638 1.1502 0 1.9689.13865 2.6902.39615.0195-1.01019.2144-2.97117.3314-3.84271-.7408-.21789-1.5595-.35655-2.5537-.35655-2.1249-.0198-3.6844.85174-4.4056 2.93156l-.156-.0198ZM94.8501 10.5235c0 2.1591-1.5595 3.1693-4.0157 3.1693-2.4368 0-3.9963-.9508-3.9963-3.1693 0-2.21846 1.579-3.05039 3.9963-3.05039 2.4367 0 4.0157.89135 4.0157 3.05039Zm4.0743-.099c0-4.29832-3.353-6.21968-8.09-6.21968-4.7566 0-7.9926 1.92136-7.9926 6.21968 0 4.2785 3.0216 6.5762 7.9731 6.5762 4.9904 0 8.1095-2.2977 8.1095-6.5762Z"/><defs><linearGradient id="paint0_linear_386_2739" x1="5.46011" x2="16.8017" y1="25.9999" y2="20.6412" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>';
|
||||
|
||||
export interface Integration {
|
||||
name: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
categories: string[];
|
||||
repoUrl: string;
|
||||
npmUrl: string;
|
||||
homepageUrl: string;
|
||||
official: boolean;
|
||||
featured: number;
|
||||
downloads: number;
|
||||
}
|
||||
|
||||
interface IntegrationData {
|
||||
data: Integration[];
|
||||
}
|
||||
|
||||
let integrationData: IntegrationData;
|
||||
|
||||
export default {
|
||||
id: 'astro',
|
||||
name: 'Astro',
|
||||
icon: 'astro:logo',
|
||||
init(canvas) {
|
||||
async init(canvas, eventTarget) {
|
||||
createWindow();
|
||||
|
||||
document.addEventListener('astro:after-swap', createWindow);
|
||||
|
||||
eventTarget.addEventListener('plugin-toggled', async (event) => {
|
||||
resetDebugButton();
|
||||
if (!(event instanceof CustomEvent)) return;
|
||||
|
||||
if (event.detail.state === true) {
|
||||
if (!integrationData)
|
||||
fetch('https://astro.build/api/v1/dev-overlay/', {
|
||||
cache: 'no-cache',
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
integrationData = data;
|
||||
integrationData.data = integrationData.data.map((integration) => {
|
||||
return integration;
|
||||
});
|
||||
refreshIntegrationList();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function createWindow() {
|
||||
const window = createWindowWithTransition(
|
||||
'Astro',
|
||||
'astro:logo',
|
||||
const links: { icon: Icon; name: string; link: string }[] = [
|
||||
{
|
||||
icon: 'bug',
|
||||
name: 'Report a bug',
|
||||
link: 'https://github.com/withastro/astro/issues/new/choose',
|
||||
},
|
||||
{
|
||||
icon: 'lightbulb',
|
||||
name: 'Suggestions',
|
||||
link: 'https://github.com/withastro/roadmap/discussions/new/choose',
|
||||
},
|
||||
{
|
||||
icon: 'file-search',
|
||||
name: 'Docs',
|
||||
link: 'https://docs.astro.build',
|
||||
},
|
||||
{
|
||||
icon: 'star',
|
||||
name: 'Star on GitHub',
|
||||
link: 'https://github.com/withastro/astro',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 14"><path fill="currentColor" d="M14.3451 1.9072c-1.0375-.47613-2.1323-.81595-3.257-1.010998-.0102-.001716-.0207-.000234-.03.004243s-.017.011728-.022.020757c-.141.249998-.297.576998-.406.832998-1.2124-.18399-2.44561-.18399-3.658 0-.12159-.28518-.25914-.56328-.412-.832998-.00513-.00893-.01285-.016098-.02213-.02056-.00928-.004462-.0197-.00601-.02987-.00444-1.125.193998-2.22.533998-3.257 1.010998-.00888.00339-.0163.00975-.021.018-2.074 3.099-2.643004 6.122-2.364004 9.107.001.014.01.028.021.037 1.207724.8946 2.558594 1.5777 3.995004 2.02.01014.0032.02103.0031.03111-.0003.01007-.0034.01878-.01.02489-.0187.308-.42.582-.863.818-1.329.00491-.0096.0066-.0205.0048-.0312-.00181-.0106-.007-.0204-.0148-.0278-.00517-.0049-.0113-.0086-.018-.011-.43084-.1656-.84811-.3645-1.248-.595-.01117-.0063-.01948-.0167-.0232-.029-.00373-.0123-.00258-.0255.0032-.037.0034-.0074.00854-.014.015-.019.084-.063.168-.129.248-.195.00706-.0057.01554-.0093.02453-.0106.00898-.0012.01813 0 .02647.0036 2.619 1.196 5.454 1.196 8.041 0 .0086-.0037.0181-.0051.0275-.0038.0093.0012.0181.0049.0255.0108.08.066.164.132.248.195.0068.005.0123.0116.0159.0192.0036.0076.0053.016.0049.0244-.0003.0084-.0028.0166-.0072.0238-.0043.0072-.0104.0133-.0176.0176-.399.2326-.8168.4313-1.249.594-.0069.0025-.0132.0065-.0183.0117-.0052.0051-.0092.0114-.0117.0183-.0023.0067-.0032.0138-.0027.0208.0005.0071.0024.0139.0057.0202.24.465.515.909.817 1.329.0061.0087.0148.0153.0249.0187.0101.0034.021.0035.0311.0003 1.4388-.441 2.7919-1.1241 4.001-2.02.0061-.0042.0111-.0097.0147-.0161.0037-.0064.0058-.0135.0063-.0209.334-3.451-.559-6.449-2.366-9.106-.0018-.00439-.0045-.00834-.008-.01162-.0034-.00327-.0075-.00578-.012-.00738Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/></svg>',
|
||||
name: 'Our Discord',
|
||||
link: 'https://astro.build/chat',
|
||||
},
|
||||
];
|
||||
|
||||
const windowComponent = createWindowWithTransition(
|
||||
`<style>
|
||||
#buttons-container {
|
||||
display: flex;
|
||||
|
|
@ -42,32 +113,323 @@ export default {
|
|||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header section {
|
||||
display: flex;
|
||||
gap: 0.8em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(224, 204, 250, 1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f4ecfd;
|
||||
}
|
||||
|
||||
#integration-list-wrapper {
|
||||
position: relative;
|
||||
--offset: 24px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin-left: calc(var(--offset) * -1);
|
||||
margin-right: calc(var(--offset) * -1);
|
||||
padding-left: var(--offset);
|
||||
padding-right: var(--offset);
|
||||
padding-bottom: 1em;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
/* Pseudo-elements to fade cards as they scroll out of viewport */
|
||||
#integration-list-wrapper::before,
|
||||
#integration-list-wrapper::after {
|
||||
content: '';
|
||||
height: 192px;
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: var(--offset);
|
||||
top: 106px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#integration-list-wrapper::before {
|
||||
left: -1px;
|
||||
border-left: 1px solid rgba(52, 56, 65, 1);
|
||||
background: linear-gradient(to right, rgba(19, 21, 26, 1), rgba(19, 21, 26, 0));
|
||||
}
|
||||
|
||||
#integration-list-wrapper::after {
|
||||
right: -1px;
|
||||
border-right: 1px solid rgba(52, 56, 65, 1);
|
||||
background: linear-gradient(to left, rgba(19, 21, 26, 1), rgba(19, 21, 26, 0));
|
||||
}
|
||||
|
||||
#integration-list-wrapper::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background-color: rgba(255, 255, 255, 0.08); /* or add it to the track */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* This is wild but gives us a gap on either side of the container */
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:start:decrement,
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:end:increment {
|
||||
display: block;
|
||||
width: 24px;
|
||||
background-color: #13151A;
|
||||
}
|
||||
|
||||
/* Removes arrows on both sides */
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:horizontal:start:increment,
|
||||
#integration-list-wrapper::-webkit-scrollbar-button:horizontal:end:decrement {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#integration-list-wrapper::-webkit-scrollbar-track-piece {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#integration-list-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#integration-list {
|
||||
margin-top: 1em;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
#integration-list::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card, .integration-skeleton {
|
||||
min-width: 240px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.integration-skeleton {
|
||||
animation: pulse 2s calc(var(--i, 0) * 250ms) cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
background-color: rgba(35, 38, 45, 1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card .integration-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--integration-image-background, white);
|
||||
border-radius: 9999px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card astro-dev-overlay-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#links {
|
||||
margin: auto 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#links a {
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7em;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#links a:hover {
|
||||
color: rgba(145, 152, 173, 1);
|
||||
}
|
||||
|
||||
#links astro-dev-overlay-icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card h3 {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#integration-list astro-dev-overlay-card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<section>
|
||||
${astroLogo}
|
||||
<astro-dev-overlay-badge badge-style="gray" size="large">Version ${
|
||||
(window as DevOverlayMetadata).__astro_dev_overlay__.version
|
||||
}</astro-dev-overlay-badge>
|
||||
</section>
|
||||
<astro-dev-overlay-button id="copy-debug-button">Get debug info <astro-dev-overlay-icon icon="copy" /></astro-dev-overlay-button>
|
||||
</header>
|
||||
<hr />
|
||||
|
||||
<div id="main-container">
|
||||
<div>
|
||||
<p>Welcome to Astro!</p>
|
||||
<div id="buttons-container">
|
||||
<astro-dev-overlay-card icon="bug" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
|
||||
<astro-dev-overlay-card icon="file-search" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
|
||||
</div>
|
||||
<header><h2>Top integrations</h2><a href="https://astro.build/integrations/">View all</a></header>
|
||||
<div id="integration-list-wrapper">
|
||||
<section id="integration-list">
|
||||
<div class="integration-skeleton" style="--i:0;"></div>
|
||||
<div class="integration-skeleton" style="--i:1;"></div>
|
||||
<div class="integration-skeleton" style="--i:2;"></div>
|
||||
<div class="integration-skeleton" style="--i:3;"></div>
|
||||
<div class="integration-skeleton" style="--i:4;"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://astro.build/chat" target="_blank">Join us on Discord</a>
|
||||
<a href="https://astro.build" target="_blank">Visit the Astro website</a>
|
||||
</footer>
|
||||
<section id="links">
|
||||
${links
|
||||
.map(
|
||||
(link) =>
|
||||
`<a href="${link.link}"><astro-dev-overlay-icon ${
|
||||
isDefinedIcon(link.icon) ? `icon="${link.icon}">` : `>${link.icon}`
|
||||
}</astro-dev-overlay-icon>${link.name}</a>`
|
||||
)
|
||||
.join('')}
|
||||
</section>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
canvas.append(window);
|
||||
const copyDebugButton =
|
||||
windowComponent.querySelector<HTMLButtonElement>('#copy-debug-button');
|
||||
|
||||
copyDebugButton?.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(
|
||||
'```\n' + (window as DevOverlayMetadata).__astro_dev_overlay__.debugInfo + '\n```'
|
||||
);
|
||||
copyDebugButton.textContent = 'Copied to clipboard';
|
||||
});
|
||||
|
||||
canvas.append(windowComponent);
|
||||
}
|
||||
|
||||
function resetDebugButton() {
|
||||
const copyDebugButton = canvas.querySelector<HTMLButtonElement>('#copy-debug-button');
|
||||
if (!copyDebugButton) return;
|
||||
|
||||
copyDebugButton.innerHTML = 'Get debug info <astro-dev-overlay-icon icon="copy" />';
|
||||
}
|
||||
|
||||
function refreshIntegrationList() {
|
||||
const integrationList = canvas.querySelector<HTMLElement>('#integration-list');
|
||||
|
||||
if (!integrationList) return;
|
||||
integrationList.innerHTML = '';
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const integration of integrationData.data) {
|
||||
const integrationComponent = document.createElement('astro-dev-overlay-card');
|
||||
integrationComponent.link = integration.homepageUrl;
|
||||
|
||||
const integrationContainer = document.createElement('div');
|
||||
integrationContainer.className = 'integration-container';
|
||||
|
||||
const integrationImage = document.createElement('div');
|
||||
integrationImage.className = 'integration-image';
|
||||
|
||||
if (integration.image) {
|
||||
const img = document.createElement('img');
|
||||
img.src = integration.image;
|
||||
img.alt = integration.title;
|
||||
integrationImage.append(img);
|
||||
} else {
|
||||
const icon = document.createElement('astro-dev-overlay-icon');
|
||||
icon.icon = iconForIntegration(integration);
|
||||
integrationImage.append(icon);
|
||||
integrationImage.style.setProperty(
|
||||
'--integration-image-background',
|
||||
colorForIntegration()
|
||||
);
|
||||
}
|
||||
|
||||
integrationContainer.append(integrationImage);
|
||||
|
||||
let integrationTitle = document.createElement('h3');
|
||||
integrationTitle.textContent = integration.title;
|
||||
if (integration.official || integration.categories.includes('official')) {
|
||||
integrationTitle.innerHTML +=
|
||||
' <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20"><rect width="19" height="19" x="1.16602" y=".5" fill="url(#paint0_linear_917_1096)" fill-opacity=".33" rx="9.5"/><path fill="#fff" d="M15.139 6.80657c-.062-.06248-.1357-.11208-.217-.14592-.0812-.03385-.1683-.05127-.2563-.05127-.0881 0-.1752.01742-.2564.05127-.0813.03384-.155.08344-.217.14592L9.22566 11.7799 7.13899 9.68657c-.06435-.06216-.14031-.11103-.22355-.14383-.08323-.03281-.17211-.04889-.26157-.04735-.08945.00155-.17773.0207-.25978.05637a.68120694.68120694 0 0 0-.21843.15148c-.06216.06435-.11104.14031-.14384.22355-.0328.08321-.04889.17211-.04734.26161.00154.0894.0207.1777.05636.2597.03566.0821.08714.1563.15148.2185l2.56 2.56c.06198.0625.13571.1121.21695.1459s.16838.0513.25639.0513c.088 0 .17514-.0175.25638-.0513s.15497-.0834.21695-.1459L15.139 7.78657c.0677-.06242.1217-.13819.1586-.22253.0369-.08433.056-.1754.056-.26747 0-.09206-.0191-.18313-.056-.26747-.0369-.08433-.0909-.1601-.1586-.22253Z"/><rect width="19" height="19" x="1.16602" y=".5" stroke="url(#paint1_linear_917_1096)" rx="9.5"/><defs><linearGradient id="paint0_linear_917_1096" x1="20.666" x2="-3.47548" y1=".00000136" y2="10.1345" gradientUnits="userSpaceOnUse"><stop stop-color="#4AF2C8"/><stop offset="1" stop-color="#2F4CB3"/></linearGradient><linearGradient id="paint1_linear_917_1096" x1="20.666" x2="-3.47548" y1=".00000136" y2="10.1345" gradientUnits="userSpaceOnUse"><stop stop-color="#4AF2C8"/><stop offset="1" stop-color="#2F4CB3"/></linearGradient></defs></svg>';
|
||||
}
|
||||
integrationContainer.append(integrationTitle);
|
||||
|
||||
const integrationDescription = document.createElement('p');
|
||||
integrationDescription.textContent =
|
||||
integration.description.length > 90
|
||||
? integration.description.slice(0, 90) + '…'
|
||||
: integration.description;
|
||||
|
||||
integrationContainer.append(integrationDescription);
|
||||
integrationComponent.append(integrationContainer);
|
||||
|
||||
fragment.append(integrationComponent);
|
||||
}
|
||||
|
||||
integrationList.append(fragment);
|
||||
}
|
||||
},
|
||||
async beforeTogglingOff(canvas) {
|
||||
|
|
|
|||
|
|
@ -46,9 +46,11 @@ export default {
|
|||
|
||||
function createSettingsWindow() {
|
||||
const window = createWindowWithTransition(
|
||||
'Settings',
|
||||
'gear',
|
||||
`<style>
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -70,7 +72,29 @@ export default {
|
|||
font-size: 15px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
astro-dev-overlay-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1><astro-dev-overlay-icon icon="gear"></astro-dev-overlay-icon> Settings</h1>
|
||||
</header>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>General</h2>
|
||||
`,
|
||||
settingsRows.flatMap((setting) => [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import type { Integration } from '../astro.js';
|
||||
|
||||
function randomFromArray<T>(list: T[]) {
|
||||
return list[Math.floor(Math.random() * list.length)];
|
||||
}
|
||||
|
||||
const categoryIcons = new Map(
|
||||
Object.entries({
|
||||
frameworks: ['puzzle', 'grid'],
|
||||
adapters: ['puzzle', 'grid', 'compress'],
|
||||
'css+ui': ['compress', 'grid', 'image', 'resizeImage', 'puzzle'],
|
||||
'performance+seo': ['approveUser', 'checkCircle', 'compress', 'robot', 'searchFile', 'sitemap'],
|
||||
analytics: ['checkCircle', 'compress', 'searchFile'],
|
||||
accessibility: ['approveUser', 'checkCircle'],
|
||||
other: ['checkCircle', 'grid', 'puzzle', 'sitemap'],
|
||||
})
|
||||
);
|
||||
|
||||
export function iconForIntegration(integration: Integration) {
|
||||
const icons = integration.categories
|
||||
.filter((category: string) => categoryIcons.has(category))
|
||||
.map((category: string) => categoryIcons.get(category)!)
|
||||
.flat();
|
||||
|
||||
return randomFromArray(icons);
|
||||
}
|
||||
|
||||
const iconColors = [
|
||||
'#BC52EE',
|
||||
'#6D6AF0',
|
||||
'#52EEBD',
|
||||
'#52B7EE',
|
||||
'#52EE55',
|
||||
'#B7EE52',
|
||||
'#EEBD52',
|
||||
'#EE5552',
|
||||
'#EE52B7',
|
||||
'#858B98',
|
||||
];
|
||||
|
||||
export function colorForIntegration() {
|
||||
return randomFromArray(iconColors)
|
||||
}
|
||||
|
|
@ -1,48 +1,34 @@
|
|||
import type { Icon } from '../../ui-library/icons.js';
|
||||
export function createWindowWithTransition(windowContent: string, addedNodes: Node[] = []) {
|
||||
const windowElement = document.createElement('astro-dev-overlay-window');
|
||||
windowElement.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
export function createWindowWithTransition(
|
||||
title: string,
|
||||
icon: Icon,
|
||||
windowContent: string,
|
||||
addedNodes: Node[] = []
|
||||
): DocumentFragment {
|
||||
const fragment = document.createDocumentFragment();
|
||||
:host([data-active]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
:host {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
:host astro-dev-overlay-window {
|
||||
transform: translateY(55px) translate(-50%, -50%);
|
||||
transition: transform 0.15s ease-in-out;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
:host([data-active]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
:host astro-dev-overlay-window {
|
||||
transform: translateY(55px) translate(-50%, -50%);
|
||||
transition: transform 0.15s ease-in-out;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
:host([data-active]) astro-dev-overlay-window {
|
||||
transform: translateY(0) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
:host([data-active]) astro-dev-overlay-window {
|
||||
transform: translateY(0) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
${windowContent}
|
||||
`;
|
||||
fragment.append(style);
|
||||
|
||||
const window = document.createElement('astro-dev-overlay-window');
|
||||
window.windowTitle = title;
|
||||
window.windowIcon = icon;
|
||||
window.innerHTML = windowContent;
|
||||
windowElement.append(...addedNodes);
|
||||
|
||||
window.append(...addedNodes);
|
||||
|
||||
fragment.append(window);
|
||||
|
||||
return fragment;
|
||||
return windowElement;
|
||||
}
|
||||
|
||||
export async function waitForTransition(canvas: ShadowRoot): Promise<boolean> {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
type BadgeSize = 'small' | 'large';
|
||||
type BadgeStyle = 'purple' | 'gray' | 'red' | 'green' | 'yellow';
|
||||
|
||||
export class DevOverlayBadge extends HTMLElement {
|
||||
size: BadgeSize = 'small';
|
||||
badgeStyle: BadgeStyle = 'purple';
|
||||
|
||||
shadowRoot: ShadowRoot;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
|
||||
if (this.hasAttribute('size')) this.size = this.getAttribute('size') as BadgeSize;
|
||||
|
||||
if (this.hasAttribute('badge-style'))
|
||||
this.badgeStyle = this.getAttribute('badge-style') as BadgeStyle;
|
||||
|
||||
const classes = [`badge--${this.size}`, `badge--${this.badgeStyle}`];
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
.badge {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.badge--large {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.badge--gray {
|
||||
color: rgba(233, 234, 238, 1);
|
||||
border-color: rgba(145, 152, 173, 1);
|
||||
}
|
||||
|
||||
.badge--purple {
|
||||
color: rgba(224, 204, 250, 1);
|
||||
border-color: rgba(113, 24, 226, 1);
|
||||
}
|
||||
|
||||
.badge--red {
|
||||
color: rgba(249, 196, 215, 1);
|
||||
border-color: rgba(179, 62, 102, 1);
|
||||
}
|
||||
|
||||
.badge--green {
|
||||
color: rgba(213, 249, 196, 1);
|
||||
border-color: rgba(61, 125, 31, 1);
|
||||
}
|
||||
|
||||
.badge--yellow {
|
||||
color: rgba(249, 233, 196, 1);
|
||||
border-color: rgba(181, 138, 45, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="badge ${classes.join(' ')}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
type ButtonSize = 'small' | 'medium' | 'large';
|
||||
type ButtonStyle = 'ghost' | 'outline' | 'purple' | 'gray' | 'red';
|
||||
|
||||
export class DevOverlayButton extends HTMLElement {
|
||||
size: ButtonSize = 'small';
|
||||
buttonStyle: ButtonStyle = 'purple';
|
||||
|
||||
shadowRoot: ShadowRoot;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
|
||||
if (this.hasAttribute('size')) this.size = this.getAttribute('size') as ButtonSize;
|
||||
|
||||
if (this.hasAttribute('button-style'))
|
||||
this.buttonStyle = this.getAttribute('button-style') as ButtonStyle;
|
||||
|
||||
const classes = [`button--${this.size}`, `button--${this.buttonStyle}`];
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
button {
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button--small {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.button--medium {
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.button--large {
|
||||
font-size: 16px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.button--ghost {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
background: transparent;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.button--purple {
|
||||
background: rgba(113, 24, 226, 1);
|
||||
border-color: rgba(224, 204, 250, 0.33);
|
||||
}
|
||||
|
||||
.button--gray {
|
||||
background: rgba(52, 56, 65, 1);
|
||||
border-color: rgba(71, 78, 94, 1);
|
||||
}
|
||||
|
||||
.button--red {
|
||||
background: rgba(179, 62, 102, 1);
|
||||
border-color: rgba(249, 196, 215, 0.33);
|
||||
}
|
||||
|
||||
::slotted(astro-dev-overlay-icon) {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button class="${classes.join(' ')}">
|
||||
<slot></slot>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { getIconElement, isDefinedIcon, type Icon } from './icons.js';
|
||||
|
||||
export class DevOverlayCard extends HTMLElement {
|
||||
icon?: Icon;
|
||||
link?: string | undefined | null;
|
||||
clickAction?: () => void | (() => Promise<void>);
|
||||
shadowRoot: ShadowRoot;
|
||||
|
||||
constructor() {
|
||||
|
|
@ -10,26 +8,30 @@ export class DevOverlayCard extends HTMLElement {
|
|||
this.shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.link = this.getAttribute('link');
|
||||
this.icon = this.hasAttribute('icon') ? (this.getAttribute('icon') as Icon) : undefined;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const element = this.link ? 'a' : 'button';
|
||||
const element = this.link ? 'a' : this.clickAction ? 'button' : 'div';
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
a, button {
|
||||
:host>a, :host>button, :host>div {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
display: block;
|
||||
padding: 40px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(35, 38, 45, 1);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 19px;
|
||||
color: rgba(191, 193, 201, 1);
|
||||
text-decoration: none;
|
||||
background-color: #13151A;
|
||||
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a:hover, button:hover {
|
||||
|
|
@ -49,26 +51,15 @@ export class DevOverlayCard extends HTMLElement {
|
|||
}
|
||||
</style>
|
||||
|
||||
<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``}>
|
||||
${this.icon ? this.getElementForIcon(this.icon) : ''}
|
||||
<span><slot /></span>
|
||||
<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``} id="astro-overlay-card">
|
||||
<slot />
|
||||
</${element}>
|
||||
`;
|
||||
}
|
||||
|
||||
getElementForIcon(icon: Icon) {
|
||||
let iconElement;
|
||||
if (isDefinedIcon(icon)) {
|
||||
iconElement = getIconElement(icon);
|
||||
} else {
|
||||
iconElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
iconElement.setAttribute('viewBox', '0 0 16 16');
|
||||
iconElement.innerHTML = icon;
|
||||
if (this.clickAction) {
|
||||
this.shadowRoot
|
||||
.getElementById('astro-overlay-card')
|
||||
?.addEventListener('click', this.clickAction);
|
||||
}
|
||||
|
||||
iconElement?.style.setProperty('height', '24px');
|
||||
iconElement?.style.setProperty('width', '24px');
|
||||
|
||||
return iconElement?.outerHTML ?? '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export class DevOverlayHighlight extends HTMLElement {
|
|||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
background: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);
|
||||
border: 1px solid rgba(53, 23, 34, 1);
|
||||
border-radius: 9999px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import { getIconElement, isDefinedIcon, type Icon } from './icons.js';
|
||||
|
||||
export class DevOverlayIcon extends HTMLElement {
|
||||
_icon: Icon | undefined = undefined;
|
||||
shadowRoot: ShadowRoot;
|
||||
|
||||
get icon() {
|
||||
return this._icon;
|
||||
}
|
||||
set icon(name: Icon | undefined) {
|
||||
this._icon = name;
|
||||
this.buildTemplate();
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
|
||||
if (this.hasAttribute('icon')) {
|
||||
this.icon = this.getAttribute('icon') as Icon;
|
||||
} else {
|
||||
this.buildTemplate();
|
||||
}
|
||||
}
|
||||
|
||||
getIconHTML(icon: Icon | undefined) {
|
||||
if (icon && isDefinedIcon(icon)) {
|
||||
return getIconElement(icon)?.outerHTML ?? '';
|
||||
}
|
||||
|
||||
// If the icon that was passed isn't one of the predefined one, assume that they're passing it in as a slot
|
||||
return '<slot />';
|
||||
}
|
||||
|
||||
buildTemplate() {
|
||||
this.shadowRoot.innerHTML = `<style>svg { width: 100%; height: 100%;}</style>\n${this.getIconHTML(
|
||||
this._icon
|
||||
)}`;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,15 +22,32 @@ export function getIconElement(
|
|||
|
||||
const icons = {
|
||||
'astro:logo': `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 85 107"><path fill="#fff" d="M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z"/><path fill="url(#a)" d="M27.6 91.1c-4.8-4.4-6.3-13.7-4.2-20.4 3.5 4.2 8.3 5.6 13.3 6.3 7.7 1.2 15.3.8 22.5-2.8l2.5-1.4c.7 2 .9 3.9.6 5.9-.6 4.9-3 8.7-6.9 11.5-1.5 1.2-3.2 2.2-4.8 3.3-4.9 3.3-6.2 7.2-4.4 12.9l.2.6a13 13 0 0 1-5.7-5 13.8 13.8 0 0 1-2.2-7.4c0-1.3 0-2.7-.2-4-.5-3.1-2-4.6-4.8-4.7a5.5 5.5 0 0 0-5.7 4.6l-.2.6Z"/><path fill="#fff" d="M0 69.6s14.3-7 28.7-7l10.8-33.5c.4-1.6 1.6-2.7 3-2.7 1.2 0 2.4 1.1 2.8 2.7l10.9 33.5c17 0 28.6 7 28.6 7L60.5 3.2c-.7-2-2-3.2-3.5-3.2H27.8c-1.6 0-2.7 1.3-3.4 3.2L0 69.6Z"/><defs><linearGradient id="a" x1="22.5" x2="69.1" y1="107" y2="84.9" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>`,
|
||||
warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z"/></svg>`,
|
||||
warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z"/></svg>`,
|
||||
'arrow-down':
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="#13151A" d="m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z"/></svg>',
|
||||
bug: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#CCCED8" d="M13.7916 8.25006c0-.29667.088-.58668.2528-.83335.1648-.24668.3991-.43893.6732-.55247.2741-.11353.5757-.14323.8667-.08536.2909.05788.5582.20074.768.41052s.3526.47706.4105.76803c.0579.29097.0282.59257-.0854.86666-.1135.27409-.3057.50836-.5524.67318-.2467.16482-.5367.25279-.8334.25279-.3978 0-.7793-.15803-1.0606-.43934-.2813-.2813-.4394-.66283-.4394-1.06066Zm-3.75-1.5c-.29665 0-.58666.08798-.83333.2528-.24667.16482-.43893.39909-.55246.67318-.11354.27409-.14324.57569-.08536.86666.05788.29097.20074.55824.41052.76802.20977.20978.47705.35264.76802.41052.29101.05788.59261.02817.86671-.08536.274-.11353.5083-.30579.6731-.55246.1649-.24668.2528-.53668.2528-.83336 0-.39782-.158-.77935-.4393-1.06066-.2813-.2813-.6628-.43934-1.0607-.43934Zm11.25 6.75004c.0003.6512-.0733 1.3003-.2193 1.935l1.7953.7837c.1354.0592.2578.1445.3603.2511.1024.1065.1829.2322.2368.3698.0539.1377.0801.2846.0772.4323-.0028.1478-.0348.2936-.094.429-.0592.1354-.1446.2579-.2511.3603-.1065.1025-.2322.1829-.3698.2368-.1377.0539-.2846.0802-.4323.0773-.1478-.0029-.2936-.0349-.429-.0941l-1.6875-.7359c-.7348 1.3818-1.8317 2.5377-3.1732 3.3437s-2.8771 1.2319-4.4421 1.2319c-1.5651 0-3.10061-.4259-4.44213-1.2319-1.34151-.806-2.43843-1.9619-3.17321-3.3437l-1.6875.7359c-.13542.0592-.28119.0912-.42896.0941-.14778.0029-.29468-.0234-.43232-.0773-.13763-.0539-.2633-.1343-.36984-.2368-.10653-.1024-.19185-.2249-.25106-.3603-.05922-.1354-.09119-.2812-.09407-.429-.00289-.1477.02336-.2946.07725-.4323.05389-.1376.13436-.2633.23681-.3698.10246-.1066.22489-.1919.36032-.2511l1.79531-.7837c-.14354-.635-.21462-1.2841-.21187-1.935v-.375h-1.875c-.29837 0-.58452-.1186-.7955-.3295-.21098-.211-.3295-.4972-.3295-.7955 0-.2984.11852-.5846.3295-.7955.21098-.211.49713-.3295.7955-.3295h1.875v-.375c-.00029-.65126.0733-1.30041.21937-1.93504l-1.79531-.78375c-.27351-.11959-.4883-.34294-.59713-.6209-.10883-.27797-.10278-.58778.01682-.86128.11959-.27351.34294-.4883.6209-.59713.27797-.10883.58778-.10278.86128.01681l1.6875.73594c.73478-1.38183 1.8317-2.53769 3.17321-3.34373 1.34152-.80604 2.87703-1.23187 4.44213-1.23187 1.565 0 3.1006.42583 4.4421 1.23187 1.3415.80604 2.4384 1.9619 3.1732 3.34373l1.6875-.73594c.1354-.05921.2812-.09118.429-.09406.1477-.00289.2946.02336.4323.07725.1376.05389.2633.13435.3698.23681.1065.10245.1919.22489.2511.36032.0592.13542.0912.28118.094.42896.0029.14778-.0233.29468-.0772.43232-.0539.13763-.1344.2633-.2368.36984-.1025.10653-.2249.19185-.3603.25106l-1.7953.78375c.1435.63492.2146 1.28407.2118 1.93504v.375h1.875c.2984 0 .5845.1185.7955.3295.211.2109.3295.4971.3295.7955 0 .2983-.1185.5845-.3295.7955-.211.2109-.4971.3295-.7955.3295h-1.875v.375Zm-14.99997-2.625H19.0416v-.375c0-1.69079-.6716-3.3123-1.8672-4.50784-1.1955-1.19555-2.817-1.8672-4.5078-1.8672-1.6907 0-3.31224.67165-4.50778 1.8672C6.96328 7.1878 6.29163 8.80931 6.29163 10.5001v.375Zm5.24997 8.8987v-6.6487H6.29163v.375c.00211 1.4949.52876 2.9417 1.48816 4.0882.95939 1.1464 2.29071 1.9199 3.76181 2.1855Zm7.5-6.2737v-.375h-5.25v6.6487c1.4712-.2656 2.8025-1.0391 3.7619-2.1855.9594-1.1465 1.486-2.5933 1.4881-4.0882Z"/></svg>',
|
||||
'file-search':
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#CCCED8" d="m20.6293 7.455-5.25-5.25c-.1045-.10461-.2285-.1876-.3651-.24422-.1366-.05662-.283-.08577-.4308-.08578H5.58337c-.49728 0-.97419.19754-1.32582.54917-.35163.35164-.54918.82855-.54918 1.32583v16.5c0 .4973.19755.9742.54918 1.3258.35163.3517.82854.5492 1.32582.5492H19.0834c.4973 0 .9742-.1975 1.3258-.5492.3516-.3516.5492-.8285.5492-1.3258v-12c0-.29813-.1184-.58407-.3291-.795Zm-3.1397.045h-2.1562V5.34375L17.4896 7.5ZM5.95837 19.875V4.125h7.12503v4.5c0 .29837.1185.58452.3295.7955.211.21097.4971.3295.7955.3295h4.5v10.125H5.95837Zm9.04503-4.5459c.3426-.7185.4202-1.5349.2192-2.3051-.2011-.7702-.6679-1.4445-1.3179-1.9038-.65-.4594-1.4415-.6742-2.2346-.6066-.7931.0677-1.5368.4135-2.0996.9763-.56283.5629-.90863 1.3065-.9763 2.0996-.06766.7931.14716 1.5846.60651 2.2346.45936.6501 1.13369 1.1169 1.90389 1.3179.7701.201 1.5866.1234 2.305-.2192l1.125 1.125c.2114.2114.498.3301.7969.3301.2989 0 .5855-.1187.7969-.3301.2113-.2113.3301-.498.3301-.7969 0-.2988-.1188-.5855-.3301-.7968l-1.125-1.125Zm-4.17-1.4541c0-.2225.066-.44.1896-.625.1236-.185.2993-.3292.5049-.4144.2055-.0851.4317-.1074.65-.064.2182.0434.4186.1506.576.3079.1573.1573.2644.3578.3079.576.0434.2183.0211.4445-.0641.65-.0851.2056-.2293.3813-.4143.5049-.185.1236-.4025.1896-.625.1896-.2984 0-.5845-.1185-.7955-.3295-.211-.211-.3295-.4971-.3295-.7955Z"/></svg>',
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="currentColor" d="m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z"/></svg>',
|
||||
bug: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="M13.7916 8.25006c0-.29667.088-.58668.2528-.83335.1648-.24668.3991-.43893.6732-.55247.2741-.11353.5757-.14323.8667-.08536.2909.05788.5582.20074.768.41052s.3526.47706.4105.76803c.0579.29097.0282.59257-.0854.86666-.1135.27409-.3057.50836-.5524.67318-.2467.16482-.5367.25279-.8334.25279-.3978 0-.7793-.15803-1.0606-.43934-.2813-.2813-.4394-.66283-.4394-1.06066Zm-3.75-1.5c-.29665 0-.58666.08798-.83333.2528-.24667.16482-.43893.39909-.55246.67318-.11354.27409-.14324.57569-.08536.86666.05788.29097.20074.55824.41052.76802.20977.20978.47705.35264.76802.41052.29101.05788.59261.02817.86671-.08536.274-.11353.5083-.30579.6731-.55246.1649-.24668.2528-.53668.2528-.83336 0-.39782-.158-.77935-.4393-1.06066-.2813-.2813-.6628-.43934-1.0607-.43934Zm11.25 6.75004c.0003.6512-.0733 1.3003-.2193 1.935l1.7953.7837c.1354.0592.2578.1445.3603.2511.1024.1065.1829.2322.2368.3698.0539.1377.0801.2846.0772.4323-.0028.1478-.0348.2936-.094.429-.0592.1354-.1446.2579-.2511.3603-.1065.1025-.2322.1829-.3698.2368-.1377.0539-.2846.0802-.4323.0773-.1478-.0029-.2936-.0349-.429-.0941l-1.6875-.7359c-.7348 1.3818-1.8317 2.5377-3.1732 3.3437s-2.8771 1.2319-4.4421 1.2319c-1.5651 0-3.10061-.4259-4.44213-1.2319-1.34151-.806-2.43843-1.9619-3.17321-3.3437l-1.6875.7359c-.13542.0592-.28119.0912-.42896.0941-.14778.0029-.29468-.0234-.43232-.0773-.13763-.0539-.2633-.1343-.36984-.2368-.10653-.1024-.19185-.2249-.25106-.3603-.05922-.1354-.09119-.2812-.09407-.429-.00289-.1477.02336-.2946.07725-.4323.05389-.1376.13436-.2633.23681-.3698.10246-.1066.22489-.1919.36032-.2511l1.79531-.7837c-.14354-.635-.21462-1.2841-.21187-1.935v-.375h-1.875c-.29837 0-.58452-.1186-.7955-.3295-.21098-.211-.3295-.4972-.3295-.7955 0-.2984.11852-.5846.3295-.7955.21098-.211.49713-.3295.7955-.3295h1.875v-.375c-.00029-.65126.0733-1.30041.21937-1.93504l-1.79531-.78375c-.27351-.11959-.4883-.34294-.59713-.6209-.10883-.27797-.10278-.58778.01682-.86128.11959-.27351.34294-.4883.6209-.59713.27797-.10883.58778-.10278.86128.01681l1.6875.73594c.73478-1.38183 1.8317-2.53769 3.17321-3.34373 1.34152-.80604 2.87703-1.23187 4.44213-1.23187 1.565 0 3.1006.42583 4.4421 1.23187 1.3415.80604 2.4384 1.9619 3.1732 3.34373l1.6875-.73594c.1354-.05921.2812-.09118.429-.09406.1477-.00289.2946.02336.4323.07725.1376.05389.2633.13435.3698.23681.1065.10245.1919.22489.2511.36032.0592.13542.0912.28118.094.42896.0029.14778-.0233.29468-.0772.43232-.0539.13763-.1344.2633-.2368.36984-.1025.10653-.2249.19185-.3603.25106l-1.7953.78375c.1435.63492.2146 1.28407.2118 1.93504v.375h1.875c.2984 0 .5845.1185.7955.3295.211.2109.3295.4971.3295.7955 0 .2983-.1185.5845-.3295.7955-.211.2109-.4971.3295-.7955.3295h-1.875v.375Zm-14.99997-2.625H19.0416v-.375c0-1.69079-.6716-3.3123-1.8672-4.50784-1.1955-1.19555-2.817-1.8672-4.5078-1.8672-1.6907 0-3.31224.67165-4.50778 1.8672C6.96328 7.1878 6.29163 8.80931 6.29163 10.5001v.375Zm5.24997 8.8987v-6.6487H6.29163v.375c.00211 1.4949.52876 2.9417 1.48816 4.0882.95939 1.1464 2.29071 1.9199 3.76181 2.1855Zm7.5-6.2737v-.375h-5.25v6.6487c1.4712-.2656 2.8025-1.0391 3.7619-2.1855.9594-1.1465 1.486-2.5933 1.4881-4.0882Z"/></svg>',
|
||||
'': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="m20.6293 7.455-5.25-5.25c-.1045-.10461-.2285-.1876-.3651-.24422-.1366-.05662-.283-.08577-.4308-.08578H5.58337c-.49728 0-.97419.19754-1.32582.54917-.35163.35164-.54918.82855-.54918 1.32583v16.5c0 .4973.19755.9742.54918 1.3258.35163.3517.82854.5492 1.32582.5492H19.0834c.4973 0 .9742-.1975 1.3258-.5492.3516-.3516.5492-.8285.5492-1.3258v-12c0-.29813-.1184-.58407-.3291-.795Zm-3.1397.045h-2.1562V5.34375L17.4896 7.5ZM5.95837 19.875V4.125h7.12503v4.5c0 .29837.1185.58452.3295.7955.211.21097.4971.3295.7955.3295h4.5v10.125H5.95837Zm9.04503-4.5459c.3426-.7185.4202-1.5349.2192-2.3051-.2011-.7702-.6679-1.4445-1.3179-1.9038-.65-.4594-1.4415-.6742-2.2346-.6066-.7931.0677-1.5368.4135-2.0996.9763-.56283.5629-.90863 1.3065-.9763 2.0996-.06766.7931.14716 1.5846.60651 2.2346.45936.6501 1.13369 1.1169 1.90389 1.3179.7701.201 1.5866.1234 2.305-.2192l1.125 1.125c.2114.2114.498.3301.7969.3301.2989 0 .5855-.1187.7969-.3301.2113-.2113.3301-.498.3301-.7969 0-.2988-.1188-.5855-.3301-.7968l-1.125-1.125Zm-4.17-1.4541c0-.2225.066-.44.1896-.625.1236-.185.2993-.3292.5049-.4144.2055-.0851.4317-.1074.65-.064.2182.0434.4186.1506.576.3079.1573.1573.2644.3578.3079.576.0434.2183.0211.4445-.0641.65-.0851.2056-.2293.3813-.4143.5049-.185.1236-.4025.1896-.625.1896-.2984 0-.5845-.1185-.7955-.3295-.211-.211-.3295-.4971-.3295-.7955Z"/></svg>',
|
||||
'check-circle':
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="#fff" d="M10.0306 4.96938c.0699.06967.1254.15247.1633.24363.0378.09116.0573.1889.0573.28762 0 .09871-.0195.19645-.0573.28761-.0379.09116-.0934.17396-.1633.24364L6.53063 9.53187c-.06968.06992-.15247.1254-.24364.16326-.09116.03785-.1889.05734-.28761.05734-.09871 0-.19645-.01949-.28762-.05734-.09116-.03786-.17395-.09334-.24363-.16326l-1.5-1.5c-.06977-.06976-.12511-.15258-.16286-.24373-.03776-.09116-.05719-.18885-.05719-.28752 0-.09866.01943-.19635.05719-.28751.03775-.09115.09309-.17397.16286-.24373.06976-.06977.15259-.12511.24374-.16287.09115-.03775.18885-.05719.28751-.05719s.19636.01944.28751.05719c.09115.03776.17397.0931.24374.16287L6 7.9375l2.96938-2.97c.06978-.06961.15259-.12478.24371-.16237.09111-.03758.18874-.05683.2873-.05666.09856.00018.19612.01978.28711.05768.09098.0379.1736.09337.2431.16323ZM13.75 7c0 1.33502-.3959 2.64007-1.1376 3.7501-.7417 1.11-1.7959 1.9752-3.02928 2.4861-1.23341.5109-2.5906.6446-3.89998.3841-1.30937-.2605-2.5121-.9033-3.45611-1.8473-.944-.944-1.586877-2.14677-1.847328-3.45614-.26045-1.30937-.126777-2.66657.384114-3.89997C1.27471 3.18349 2.13987 2.12928 3.2499 1.38758 4.35994.645881 5.66498.25 7 .25c1.78961.001985 3.5053.713781 4.7708 1.97922C13.0362 3.49466 13.748 5.2104 13.75 7Zm-1.5 0c0-1.03835-.3079-2.05339-.8848-2.91674-.5769-.86336-1.3968-1.53627-2.35611-1.93363-.95931-.39736-2.01491-.50133-3.03331-.29875-1.0184.20257-1.95386.70258-2.68809 1.43681-.73422.73422-1.23424 1.66969-1.43681 2.68809-.20257 1.0184-.0986 2.074.29876 3.03331.39736.95931 1.07026 1.77921 1.93362 2.35611.86336.5769 1.87839.8848 2.91674.8848 1.39193-.0015 2.72643-.5551 3.7107-1.5393C11.6949 9.72642 12.2485 8.39193 12.25 7Z"/></svg>',
|
||||
gear: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22"><path fill="#fff" d="M11 6.12507c-.9642 0-1.90671.28592-2.7084.82159-.80169.53567-1.42653 1.29704-1.79551 2.18783-.36898.89081-.46552 1.87101-.27742 2.81661.18811.9457.6524 1.8143 1.33419 2.4961.68178.6818 1.55042 1.1461 2.49604 1.3342.9457.1881 1.9259.0916 2.8167-.2774s1.6521-.9938 2.1878-1.7955c.5357-.8017.8216-1.7442.8216-2.7084-.0015-1.2925-.5156-2.53161-1.4295-3.44553-.9139-.91392-2.153-1.42801-3.4455-1.4295Zm0 7.50003c-.5192 0-1.02669-.154-1.45837-.4424-.43168-.2885-.76813-.6984-.96681-1.1781-.19868-.4796-.25067-1.0074-.14938-1.5166.10129-.50924.35129-.97697.71841-1.34408.36711-.36712.83484-.61712 1.34405-.71841.5092-.10129 1.037-.0493 1.5166.14938.4797.19868.8897.53513 1.1781.96681.2884.43168.4424.9392.4424 1.4584 0 .6962-.2766 1.3638-.7688 1.8561-.4923.4923-1.16.7689-1.8562.7689Zm8.625-2.551v-.1481l1.3125-1.64155c.1102-.13755.1865-.29905.2228-.4715s.0316-.35102-.0137-.52131c-.2369-.89334-.5909-1.75142-1.0528-2.55188-.089-.15264-.2127-.28218-.3611-.37811-.1484-.09594-.3173-.15557-.493-.17408l-2.0888-.23437-.104-.10406-.2344-2.08969c-.0186-.17556-.0783-.34426-.1743-.49247-.0959-.1482-.2254-.27175-.3779-.36066-.8005-.46341-1.6589-.81869-2.5528-1.056559-.1704-.044683-.349-.048704-.5213-.01174-.1723.036965-.3335.113881-.4706.224549l-1.6415 1.3125h-.1482l-1.64152-1.3125C9.14683.9524 8.98532.87608 8.81288.839767c-.17245-.036314-.35102-.031606-.52132.013744-.89357.238319-1.75165.593909-2.55187 1.057499-.15205.08854-.28121.2115-.37712.35901-.0959.14752-.15586.31547-.17507.49037l-.23437 2.08875-.10407.10406-2.08968.23437c-.17556.01865-.34426.07835-.49247.17428-.14821.09593-.27176.22539-.36066.37791-.46211.80072-.81613 1.65912-1.052812 2.55281-.045195.17016-.049823.34855-.013512.52082.03631.17227.112546.33362.222574.47106L2.375 10.926v.1481l-1.3125 1.6416c-.110173.1375-.186492.299-.222806.4715-.036313.1724-.031605.351.013744.5213.238622.8936.594522 1.7517 1.058442 2.5519.08844.1519.21126.281.3586.3769.14734.0959.3151.1559.48983.1753l2.08875.2325.10407.104.23437 2.0916c.01865.1756.07835.3443.17428.4925.09592.1482.22538.2717.37791.3606.80052.4634 1.65893.8187 2.55281 1.0566.17045.0447.349.0487.52129.0117.17228-.0369.33347-.1139.47059-.2245l1.64152-1.3125h.1482l1.6415 1.3125c.1376.1101.2991.1865.4715.2228.1725.0363.351.0316.5213-.0138.8934-.2368 1.7514-.5908 2.5519-1.0528.1524-.0883.2819-.2112.3782-.3587.0962-.1475.1565-.3156.1759-.4907l.2325-2.0887.104-.1041 2.0897-.239c.1751-.0194.3432-.0797.4907-.1759.1475-.0963.2704-.2258.3587-.3782.4634-.8005.8187-1.6589 1.0566-2.5528.0448-.1699.0493-.3479.013-.5198-.0363-.172-.1124-.333-.2221-.4702l-1.3125-1.6416Zm-2.2612-.4584c.015.256.015.5127 0 .7687-.0168.2784.0704.553.2446.7707l1.2038 1.5047c-.1136.3363-.2492.6648-.406.9834l-1.9153.2128c-.2773.0317-.5329.1654-.7171.375-.1704.1919-.3519.3735-.5438.5438-.2096.1842-.3433.4398-.375.7171l-.2119 1.9144c-.3185.1574-.647.2936-.9834.4078l-1.5047-1.2047c-.1997-.1593-.4477-.2459-.7031-.2456h-.0675c-.2561.015-.5127.015-.7688 0-.2781-.0165-.5525.0703-.7706.2438l-1.50469 1.2047c-.33634-.1137-.66486-.2493-.98343-.406l-.21282-1.9153c-.0317-.2773-.16536-.5329-.375-.7172-.19187-.1703-.37344-.3519-.54375-.5437-.18426-.2097-.43988-.3433-.71718-.375l-1.91438-.2119c-.15734-.3185-.29357-.647-.40781-.9834l1.20375-1.5047c.17424-.2177.26144-.4923.24469-.7707-.01501-.256-.01501-.5127 0-.7687.01675-.2783-.07045-.553-.24469-.77063L3.18781 8.34038c.11364-.33634.24924-.66486.40594-.98343l1.91531-.21281c.27731-.03171.53292-.16537.71719-.375.17031-.19188.35188-.37345.54375-.54375.20964-.18427.3433-.43989.375-.71719l.21188-1.91438c.31852-.15734.64704-.29357.98343-.40781L9.845 4.3907c.2181.17343.4925.26023.7706.24375.2561-.015.5127-.015.7688 0 .2782.01701.5528-.06985.7706-.24375l1.5047-1.20469c.3364.11424.6649.25047.9834.40781l.2128 1.91532c.0317.2773.1654.53292.375.71718.1919.17031.3735.35188.5438.54375.1843.20964.4399.3433.7172.375l1.9143.21188c.1574.31852.2936.64704.4079.98343l-1.2038 1.50469c-.1749.21743-.2628.49203-.2465.77063Z"/></svg>',
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" d="M10.0306 4.96938c.0699.06967.1254.15247.1633.24363.0378.09116.0573.1889.0573.28762 0 .09871-.0195.19645-.0573.28761-.0379.09116-.0934.17396-.1633.24364L6.53063 9.53187c-.06968.06992-.15247.1254-.24364.16326-.09116.03785-.1889.05734-.28761.05734-.09871 0-.19645-.01949-.28762-.05734-.09116-.03786-.17395-.09334-.24363-.16326l-1.5-1.5c-.06977-.06976-.12511-.15258-.16286-.24373-.03776-.09116-.05719-.18885-.05719-.28752 0-.09866.01943-.19635.05719-.28751.03775-.09115.09309-.17397.16286-.24373.06976-.06977.15259-.12511.24374-.16287.09115-.03775.18885-.05719.28751-.05719s.19636.01944.28751.05719c.09115.03776.17397.0931.24374.16287L6 7.9375l2.96938-2.97c.06978-.06961.15259-.12478.24371-.16237.09111-.03758.18874-.05683.2873-.05666.09856.00018.19612.01978.28711.05768.09098.0379.1736.09337.2431.16323ZM13.75 7c0 1.33502-.3959 2.64007-1.1376 3.7501-.7417 1.11-1.7959 1.9752-3.02928 2.4861-1.23341.5109-2.5906.6446-3.89998.3841-1.30937-.2605-2.5121-.9033-3.45611-1.8473-.944-.944-1.586877-2.14677-1.847328-3.45614-.26045-1.30937-.126777-2.66657.384114-3.89997C1.27471 3.18349 2.13987 2.12928 3.2499 1.38758 4.35994.645881 5.66498.25 7 .25c1.78961.001985 3.5053.713781 4.7708 1.97922C13.0362 3.49466 13.748 5.2104 13.75 7Zm-1.5 0c0-1.03835-.3079-2.05339-.8848-2.91674-.5769-.86336-1.3968-1.53627-2.35611-1.93363-.95931-.39736-2.01491-.50133-3.03331-.29875-1.0184.20257-1.95386.70258-2.68809 1.43681-.73422.73422-1.23424 1.66969-1.43681 2.68809-.20257 1.0184-.0986 2.074.29876 3.03331.39736.95931 1.07026 1.77921 1.93362 2.35611.86336.5769 1.87839.8848 2.91674.8848 1.39193-.0015 2.72643-.5551 3.7107-1.5393C11.6949 9.72642 12.2485 8.39193 12.25 7Z"/></svg>',
|
||||
gear: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22"><path fill="currentColor" d="M11 6.12507c-.9642 0-1.90671.28592-2.7084.82159-.80169.53567-1.42653 1.29704-1.79551 2.18783-.36898.89081-.46552 1.87101-.27742 2.81661.18811.9457.6524 1.8143 1.33419 2.4961.68178.6818 1.55042 1.1461 2.49604 1.3342.9457.1881 1.9259.0916 2.8167-.2774s1.6521-.9938 2.1878-1.7955c.5357-.8017.8216-1.7442.8216-2.7084-.0015-1.2925-.5156-2.53161-1.4295-3.44553-.9139-.91392-2.153-1.42801-3.4455-1.4295Zm0 7.50003c-.5192 0-1.02669-.154-1.45837-.4424-.43168-.2885-.76813-.6984-.96681-1.1781-.19868-.4796-.25067-1.0074-.14938-1.5166.10129-.50924.35129-.97697.71841-1.34408.36711-.36712.83484-.61712 1.34405-.71841.5092-.10129 1.037-.0493 1.5166.14938.4797.19868.8897.53513 1.1781.96681.2884.43168.4424.9392.4424 1.4584 0 .6962-.2766 1.3638-.7688 1.8561-.4923.4923-1.16.7689-1.8562.7689Zm8.625-2.551v-.1481l1.3125-1.64155c.1102-.13755.1865-.29905.2228-.4715s.0316-.35102-.0137-.52131c-.2369-.89334-.5909-1.75142-1.0528-2.55188-.089-.15264-.2127-.28218-.3611-.37811-.1484-.09594-.3173-.15557-.493-.17408l-2.0888-.23437-.104-.10406-.2344-2.08969c-.0186-.17556-.0783-.34426-.1743-.49247-.0959-.1482-.2254-.27175-.3779-.36066-.8005-.46341-1.6589-.81869-2.5528-1.056559-.1704-.044683-.349-.048704-.5213-.01174-.1723.036965-.3335.113881-.4706.224549l-1.6415 1.3125h-.1482l-1.64152-1.3125C9.14683.9524 8.98532.87608 8.81288.839767c-.17245-.036314-.35102-.031606-.52132.013744-.89357.238319-1.75165.593909-2.55187 1.057499-.15205.08854-.28121.2115-.37712.35901-.0959.14752-.15586.31547-.17507.49037l-.23437 2.08875-.10407.10406-2.08968.23437c-.17556.01865-.34426.07835-.49247.17428-.14821.09593-.27176.22539-.36066.37791-.46211.80072-.81613 1.65912-1.052812 2.55281-.045195.17016-.049823.34855-.013512.52082.03631.17227.112546.33362.222574.47106L2.375 10.926v.1481l-1.3125 1.6416c-.110173.1375-.186492.299-.222806.4715-.036313.1724-.031605.351.013744.5213.238622.8936.594522 1.7517 1.058442 2.5519.08844.1519.21126.281.3586.3769.14734.0959.3151.1559.48983.1753l2.08875.2325.10407.104.23437 2.0916c.01865.1756.07835.3443.17428.4925.09592.1482.22538.2717.37791.3606.80052.4634 1.65893.8187 2.55281 1.0566.17045.0447.349.0487.52129.0117.17228-.0369.33347-.1139.47059-.2245l1.64152-1.3125h.1482l1.6415 1.3125c.1376.1101.2991.1865.4715.2228.1725.0363.351.0316.5213-.0138.8934-.2368 1.7514-.5908 2.5519-1.0528.1524-.0883.2819-.2112.3782-.3587.0962-.1475.1565-.3156.1759-.4907l.2325-2.0887.104-.1041 2.0897-.239c.1751-.0194.3432-.0797.4907-.1759.1475-.0963.2704-.2258.3587-.3782.4634-.8005.8187-1.6589 1.0566-2.5528.0448-.1699.0493-.3479.013-.5198-.0363-.172-.1124-.333-.2221-.4702l-1.3125-1.6416Zm-2.2612-.4584c.015.256.015.5127 0 .7687-.0168.2784.0704.553.2446.7707l1.2038 1.5047c-.1136.3363-.2492.6648-.406.9834l-1.9153.2128c-.2773.0317-.5329.1654-.7171.375-.1704.1919-.3519.3735-.5438.5438-.2096.1842-.3433.4398-.375.7171l-.2119 1.9144c-.3185.1574-.647.2936-.9834.4078l-1.5047-1.2047c-.1997-.1593-.4477-.2459-.7031-.2456h-.0675c-.2561.015-.5127.015-.7688 0-.2781-.0165-.5525.0703-.7706.2438l-1.50469 1.2047c-.33634-.1137-.66486-.2493-.98343-.406l-.21282-1.9153c-.0317-.2773-.16536-.5329-.375-.7172-.19187-.1703-.37344-.3519-.54375-.5437-.18426-.2097-.43988-.3433-.71718-.375l-1.91438-.2119c-.15734-.3185-.29357-.647-.40781-.9834l1.20375-1.5047c.17424-.2177.26144-.4923.24469-.7707-.01501-.256-.01501-.5127 0-.7687.01675-.2783-.07045-.553-.24469-.77063L3.18781 8.34038c.11364-.33634.24924-.66486.40594-.98343l1.91531-.21281c.27731-.03171.53292-.16537.71719-.375.17031-.19188.35188-.37345.54375-.54375.20964-.18427.3433-.43989.375-.71719l.21188-1.91438c.31852-.15734.64704-.29357.98343-.40781L9.845 4.3907c.2181.17343.4925.26023.7706.24375.2561-.015.5127-.015.7688 0 .2782.01701.5528-.06985.7706-.24375l1.5047-1.20469c.3364.11424.6649.25047.9834.40781l.2128 1.91532c.0317.2773.1654.53292.375.71718.1919.17031.3735.35188.5438.54375.1843.20964.4399.3433.7172.375l1.9143.21188c.1574.31852.2936.64704.4079.98343l-1.2038 1.50469c-.1749.21743-.2628.49203-.2465.77063Z"/></svg>',
|
||||
lightbulb:
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 16"><path fill="currentColor" d="M9.84994 14.5002c0 .1989-.07902.3897-.21967.5303-.14066.1407-.33142.2197-.53033.2197h-5c-.19891 0-.38968-.079-.53033-.2197-.14065-.1406-.21967-.3314-.21967-.5303 0-.1989.07902-.3897.21967-.5303.14065-.1407.33142-.2197.53033-.2197h5c.19891 0 .38967.079.53033.2197.14065.1406.21967.3314.21967.5303Zm2.49996-8.00001c.0023.87138-.1945 1.73175-.5755 2.51544-.381.78368-.9359 1.46997-1.6226 2.00647-.093.0708-.16853.162-.22085.2665-.05233.1046-.08004.2197-.08101.3366v.125c0 .3315-.1317.6495-.36612.8839-.23442.2344-.55236.3661-.88388.3661h-4c-.33152 0-.64947-.1317-.88389-.3661-.23442-.2344-.36611-.5524-.36611-.8839v-.125c-.00014-.115-.0267-.2284-.07763-.3314-.05094-.1031-.12488-.193-.21612-.263-.68477-.5334-1.23925-1.2155-1.62148-1.9948-.38223-.77929-.582201-1.63532-.584772-2.50331C.833063 3.41832 3.34994.825195 6.46181.750195c.76665-.018422 1.52923.116696 2.24287.397405.71365.2807 1.36392.70132 1.91262 1.23711.5486.53578.9846 1.1759 1.2821 1.88268.2976.70678.4508 1.46594.4505 2.2328Zm-1.5 0c.0002-.5669-.113-1.12811-.3331-1.65058-.22-.52247-.54226-.99565-.9479-1.39168-.40563-.39602-.8864-.70689-1.414-.91431-.52759-.20741-1.09135-.30718-1.65809-.29343-2.29937.055-4.15937 1.97188-4.14687 4.27375.00214.64152.15011 1.27416.43271 1.85009.2826.57592.69244 1.08006 1.19854 1.47429.25496.19678.46453.44618.61444.73128.14992.285.23665.599.25431.9206h3.50625c.018-.3222.10486-.6368.25472-.9226.14986-.2859.35924-.5362.61403-.73428.50754-.39672.91776-.90412 1.19936-1.4835.2817-.57938.4272-1.21543.4256-1.85963Zm-1.25434-.3325c-.06636-.56119-.28826-1.09265-.64067-1.53441-.35241-.44175-.82128-.7762-1.3537-.96559-.1861-.0608-.38859-.04643-.56423.04006-.17565.08648-.31051.23821-.37579.42278-.06527.18458-.05579.38736.02642.56504.08222.17767.23065.31616.4136.38587.26755.09379.50353.26056.68124.48146.17771.2209.29008.48712.32438.76854.02188.19776.12142.37872.27673.50308.0769.06157.16517.1074.25978.13486.09461.02747.1937.03602.29162.02519.09791-.01083.19274-.04085.27905-.08833.08632-.04748.16244-.1115.22402-.1884.06158-.07689.1074-.16517.13487-.25978.02746-.09461.03602-.1937.02518-.29162l-.0025.00125Z"/></svg>',
|
||||
'file-search':
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="currentColor" d="M11.5306 3.97 8.03063.47C7.96097.400261 7.87826.344936 7.78721.307186 7.69616.269437 7.59856.250005 7.5.25h-6C1.16848.25.850537.381696.616117.616117.381696.850537.25 1.16848.25 1.5v11c0 .3315.131696.6495.366117.8839.23442.2344.552363.3661.883883.3661h9c.3315 0 .6495-.1317.8839-.3661.2344-.2344.3661-.5524.3661-.8839v-8c0-.19876-.0789-.38938-.2194-.53ZM9.4375 4H8V2.5625L9.4375 4ZM1.75 12.25V1.75H6.5v3c0 .19891.07902.38968.21967.53033.14065.14065.33142.21967.53033.21967h3v6.75h-8.5Zm6.03-3.03063c.2284-.47897.28015-1.02326.14613-1.53671-.13403-.51344-.44521-.96299-.87858-1.26923-.43337-.30623-.96102-.44945-1.48975-.40433-.52872.04511-1.02449.27564-1.39971.65086-.37523.37522-.60576.87099-.65087 1.39972-.04511.52872.0981 1.05638.40434 1.48975.30624.43336.75579.74457 1.26923.87857.51344.134 1.05773.0823 1.53671-.1461l.75.75c.1409.1409.33199.22.53125.22s.39035-.0791.53125-.22c.1409-.1409.22005-.332.22005-.5313 0-.1992-.07915-.3903-.22005-.53123l-.75-.75ZM5 8.25c0-.14834.04399-.29334.1264-.41668.08241-.12333.19954-.21946.33659-.27623.13704-.05676.28784-.07162.43333-.04268.14548.02894.27912.10037.38401.20526.10489.10489.17632.23853.20526.38401.02894.14549.01408.29629-.04268.43333-.05677.13705-.1529.25418-.27623.33659C6.04334 8.95601 5.89834 9 5.75 9c-.19891 0-.38968-.07902-.53033-.21967C5.07902 8.63968 5 8.44891 5 8.25Z"/></svg>',
|
||||
star: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 15 15"><path fill="currentColor" d="M14.5873 6.00333c-.0759-.23292-.2187-.43838-.4105-.59083-.1918-.15245-.4241-.24519-.6682-.26667L9.9461 4.8377 8.55235 1.51645c-.09588-.22586-.25611-.4185-.46072-.553929-.2046-.135425-.44454-.207638-.68991-.207638-.24537 0-.48531.072213-.68991.207638-.20461.135429-.36484.328069-.46071.553929L4.85547 4.8377l-3.5625.30813c-.24538.02032-.479299.11265-.6724.26542-.193101.15276-.336784.35916-.413023.59328-.076238.23412-.081634.48554-.015512.72272s.200817.44954.387185.61045l2.7075 2.3625-.8125 3.515c-.05572.2394-.03965.4898.04619.7201.08585.2303.23767.4301.43648.5746.19881.1444.4358.2271.68132.2376.24553.0105.48871-.0516.69914-.1785l3.0625-1.86 3.06245 1.86c.2105.1267.4536.1886.699.178.2454-.0106.4822-.0933.6809-.2377.1987-.1444.3505-.3442.4363-.5743.0858-.2302.102-.4805.0463-.7198l-.8125-3.515 2.7075-2.3625c.1859-.16149.32-.37429.3853-.61168.0654-.23739.0592-.4888-.0178-.72269Zm-4.1718 2.66375c-.1714.14913-.299.34215-.3689.55831-.0699.21617-.07959.44731-.028.66857l.7119 3.08254-2.68378-1.63c-.1949-.1187-.41869-.1815-.64687-.1815-.22819 0-.45198.0628-.64688.1815l-2.68375 1.63.71188-3.08254c.05158-.22126.04189-.4524-.02803-.66857-.06993-.21616-.19745-.40918-.36885-.55831L2.00359 6.5902l3.13376-.27125c.22692-.01943.44417-.10073.62809-.23507.18393-.13433.32748-.31654.41503-.5268l1.21938-2.90563 1.21937 2.90563c.08755.21026.2311.39247.41503.5268.18392.13434.40117.21564.62809.23507l3.13376.27125-2.3806 2.07688Z"/></svg>',
|
||||
checkmark:
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 8"><path fill="#fff" d="M9.47334.806574C9.41136.744088 9.33763.694492 9.25639.660646S9.08802.609375 9.00001.609375 8.82486.6268 8.74362.660646s-.15497.083442-.21695.145928L3.56001 5.77991 1.47334 3.68657c-.06435-.06216-.14031-.11103-.22354-.14383-.08324-.03281-.17212-.04889-.261578-.04735-.089454.00155-.177727.0207-.259779.05637-.082052.03566-.156277.08713-.218436.15148-.062159.06435-.111035.14031-.143837.22355-.032803.08323-.04889.17212-.047342.26157.001547.08945.020699.17773.056361.25978.035663.08205.087137.15627.151485.21843l2.559996 2.56c.06198.06249.13571.11209.21695.14593.08124.03385.16838.05127.25639.05127s.17514-.01742.25638-.05127c.08124-.03384.15498-.08344.21695-.14593l5.44-5.44c.06767-.06242.12168-.13819.15861-.22253.03694-.08433.05601-.1754.05601-.26747 0-.09206-.01907-.18313-.05601-.26747-.03693-.08433-.09094-.160098-.15861-.222526Z"/></svg>',
|
||||
'dots-three':
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 4"><path fill="#fff" d="M9.5 2c0 .29667-.08797.58668-.2528.83336-.16482.24667-.39908.43893-.67317.55246-.27409.11353-.57569.14324-.86666.08536-.29098-.05788-.55825-.20074-.76803-.41052-.20978-.20978-.35264-.47705-.41052-.76802-.05788-.29098-.02817-.59258.08536-.86666.11353-.27409.30579-.508362.55247-.673184C7.41332.587974 7.70333.5 8 .5c.39783 0 .77936.158036 1.06066.43934C9.34196 1.22064 9.5 1.60218 9.5 2ZM1.625.5c-.29667 0-.58668.087974-.833354.252796-.246674.164822-.438933.399094-.552465.673184-.113531.27408-.1432361.57568-.085358.86666.057878.29097.200739.55824.410518.76802.209778.20978.477049.35264.768029.41052.29097.05788.59257.02817.86666-.08536.27408-.11353.50835-.30579.67318-.55246C3.03703 2.58668 3.125 2.29667 3.125 2c0-.39782-.15803-.77936-.43934-1.06066C2.40436.658036 2.02283.5 1.625.5Zm12.75 0c-.2967 0-.5867.087974-.8334.252796-.2466.164822-.4389.399094-.5524.673184-.1135.27408-.1433.57568-.0854.86666.0579.29097.2008.55824.4105.76802.2098.20978.4771.35264.7681.41052.2909.05788.5925.02817.8666-.08536s.5084-.30579.6732-.55246c.1648-.24668.2528-.53669.2528-.83336 0-.39782-.158-.77936-.4393-1.06066C15.1544.658036 14.7728.5 14.375.5Z"/></svg>',
|
||||
copy: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 11"><path fill="#fff" d="M9.125.8125h-6c-.14918 0-.29226.059263-.39775.164752-.10549.105488-.16475.248568-.16475.397748v1.6875H.875c-.149184 0-.292258.05926-.397748.16475C.371763 3.33274.3125 3.47582.3125 3.625v6c0 .14918.059263.29226.164752.3977.10549.1055.248564.1648.397748.1648h6c.14918 0 .29226-.0593.39775-.1648.10549-.10544.16475-.24852.16475-.3977V7.9375H9.125c.14918 0 .29226-.05926.39775-.16475.10549-.10549.16475-.24857.16475-.39775v-6c0-.14918-.05926-.29226-.16475-.397748C9.41726.871763 9.27418.8125 9.125.8125Zm-2.8125 8.25h-4.875v-4.875h4.875v4.875Zm2.25-2.25h-1.125V3.625c0-.14918-.05926-.29226-.16475-.39775-.10549-.10549-.24857-.16475-.39775-.16475H3.6875v-1.125h4.875v4.875Z"/></svg>',
|
||||
compress: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path fill="currentColor" d="M13.84 17.44c-.16-.07-.33-.1-.5-.1H8A1.33 1.33 0 1 0 8 20h2.12l-7.07 7.05a1.33 1.33 0 0 0 .44 2.19 1.33 1.33 0 0 0 1.46-.3L12 21.89V24a1.33 1.33 0 1 0 2.67 0v-5.33a1.37 1.37 0 0 0-.83-1.23Zm-.5-10.77A1.33 1.33 0 0 0 12 8v2.12L4.95 3.05a1.34 1.34 0 1 0-1.9 1.9L10.12 12H8a1.33 1.33 0 0 0 0 2.67h5.33c.18 0 .35-.04.5-.11a1.33 1.33 0 0 0 .84-1.23V8a1.33 1.33 0 0 0-1.34-1.33Zm4.82 7.89c.16.07.33.1.5.1H24A1.33 1.33 0 0 0 24 12h-2.12l7.07-7.05a1.34 1.34 0 1 0-1.9-1.9L20 10.12V8a1.33 1.33 0 0 0-2.67 0v5.33a1.33 1.33 0 0 0 .83 1.23ZM21.88 20H24a1.33 1.33 0 0 0 0-2.67h-5.33c-.18 0-.35.04-.51.11a1.33 1.33 0 0 0-.83 1.23V24A1.33 1.33 0 0 0 20 24v-2.12l7.05 7.07a1.33 1.33 0 0 0 2.19-.44 1.33 1.33 0 0 0-.3-1.46L21.89 20Z"/></svg>',
|
||||
grid: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path fill="currentColor" d="M13.33 17.33H4a1.33 1.33 0 0 0-1.33 1.34V28A1.33 1.33 0 0 0 4 29.33h9.33A1.33 1.33 0 0 0 14.67 28v-9.33a1.33 1.33 0 0 0-1.34-1.34ZM12 26.67H5.33V20H12v6.67Zm16-24h-9.33A1.33 1.33 0 0 0 17.33 4v9.33a1.33 1.33 0 0 0 1.34 1.34H28a1.33 1.33 0 0 0 1.33-1.34V4A1.33 1.33 0 0 0 28 2.67ZM26.67 12H20V5.33h6.67V12ZM28 17.33h-9.33a1.33 1.33 0 0 0-1.34 1.34V28a1.33 1.33 0 0 0 1.34 1.33H28A1.33 1.33 0 0 0 29.33 28v-9.33A1.33 1.33 0 0 0 28 17.33Zm-1.33 9.34H20V20h6.67v6.67Zm-13.34-24H4A1.33 1.33 0 0 0 2.67 4v9.33A1.33 1.33 0 0 0 4 14.67h9.33a1.33 1.33 0 0 0 1.34-1.34V4a1.33 1.33 0 0 0-1.34-1.33ZM12 12H5.33V5.33H12V12Z"/></svg>',
|
||||
puzzle: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="M23 29.33H7a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4h1.33A5.33 5.33 0 0 1 19 8h4a1.33 1.33 0 0 1 1.33 1.33v4a5.33 5.33 0 0 1 0 10.67v4A1.33 1.33 0 0 1 23 29.33ZM7 10.67A1.33 1.33 0 0 0 5.67 12v13.33A1.33 1.33 0 0 0 7 26.67h14.67v-4.24a1.33 1.33 0 0 1 1.77-1.27 2.36 2.36 0 0 0 2.32-.3A2.67 2.67 0 0 0 27 19.02a2.67 2.67 0 0 0-.64-2.12 2.52 2.52 0 0 0-2.9-.74 1.33 1.33 0 0 1-1.77-1.26v-4.24h-4.26a1.33 1.33 0 0 1-1.34-1.78 2.36 2.36 0 0 0-.3-2.32 2.59 2.59 0 0 0-4-.57A2.67 2.67 0 0 0 11 8c0 .3.06.6.17.9a1.33 1.33 0 0 1-1.26 1.77H7Z"/></svg>',
|
||||
approveUser: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="M18.4 16.3a6.56 6.56 0 0 0 2.27-4.97 6.67 6.67 0 1 0-12.74 2.73c.39.86.96 1.62 1.67 2.23A10.67 10.67 0 0 0 3.33 26 1.33 1.33 0 0 0 6 26a8 8 0 0 1 16 0 1.33 1.33 0 0 0 2.67 0 10.67 10.67 0 0 0-6.27-9.7Zm-4.4-.97a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm15.61-3.16a1.33 1.33 0 0 0-1.9 0l-2.66 2.67-.82-.84a1.33 1.33 0 1 0-1.9 1.88l1.79 1.79a1.33 1.33 0 0 0 1.88 0l3.56-3.56a1.33 1.33 0 0 0 .05-1.94Z"/></svg>',
|
||||
checkCircle: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="m20.3 11.72-5.73 5.73-2.2-2.2a1.33 1.33 0 1 0-1.88 1.88l3.14 3.15a1.33 1.33 0 0 0 1.88 0l6.66-6.67a1.33 1.33 0 1 0-1.88-1.89Zm-3.63-9.05a13.33 13.33 0 1 0 0 26.66 13.33 13.33 0 0 0 0-26.66Zm0 24a10.67 10.67 0 1 1 0-21.34 10.67 10.67 0 0 1 0 21.34Z"/></svg>',
|
||||
resizeImage: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="M17.67 14.67H3A1.33 1.33 0 0 0 1.67 16v12A1.33 1.33 0 0 0 3 29.33h14.67A1.33 1.33 0 0 0 19 28V16a1.33 1.33 0 0 0-1.33-1.33Zm-7.42 12 2.58-2.58a.4.4 0 0 1 .66 0l2.56 2.58h-5.8Zm6.08-3.5-.96-.94a3.21 3.21 0 0 0-4.44 0l-4.45 4.44H4.33v-9.34h12v5.84ZM3 5.48a1.33 1.33 0 0 0 1.15-.65 1.4 1.4 0 0 0-.16-1.8A1.33 1.33 0 0 0 3 2.67 1.33 1.33 0 0 0 1.67 4v.13A1.33 1.33 0 0 0 3 5.48Zm10.55-.15h.25a1.33 1.33 0 0 0 0-2.66h-.25a1.33 1.33 0 0 0 0 2.66ZM3 11.71a1.33 1.33 0 0 0 1.33-1.34v-.29a1.33 1.33 0 0 0-2.66 0v.3A1.33 1.33 0 0 0 3 11.7Zm16.12-9.04h-.25a1.33 1.33 0 0 0 0 2.66h.25a1.33 1.33 0 0 0 0-2.66ZM8.22 5.33h.25a1.33 1.33 0 1 0 0-2.66H8.2a1.33 1.33 0 1 0 0 2.66Zm21.45 3.2a1.33 1.33 0 0 0-1.34 1.34v.28a1.33 1.33 0 0 0 2.67 0v-.28a1.33 1.33 0 0 0-1.33-1.34Zm-6.5 18.14h-.33a1.33 1.33 0 1 0 0 2.66h.32a1.33 1.33 0 0 0 0-2.66Zm6.36-24a1.33 1.33 0 1 0 .36 2.64A1.33 1.33 0 0 0 31 4.15V4a1.45 1.45 0 0 0-1.47-1.33Zm.14 11.86a1.33 1.33 0 0 0-1.34 1.34v.29a1.33 1.33 0 1 0 2.67 0v-.3a1.33 1.33 0 0 0-1.33-1.33ZM24.45 2.67h-.25a1.33 1.33 0 1 0 0 2.66h.25a1.33 1.33 0 1 0 0-2.66Zm5.22 24A1.33 1.33 0 0 0 28.34 28a1.33 1.33 0 0 0 1.33 1.33A1.45 1.45 0 0 0 31 27.87a1.33 1.33 0 0 0-1.33-1.2Zm0-6.08a1.33 1.33 0 0 0-1.34 1.33v.3a1.33 1.33 0 0 0 2.67 0v-.35a1.33 1.33 0 0 0-1.33-1.34v.06Z"/></svg>',
|
||||
searchFile: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path fill="currentColor" d="M16 26.67H6.67a1.33 1.33 0 0 1-1.34-1.34V6.67a1.33 1.33 0 0 1 1.34-1.34h6.66v4a4 4 0 0 0 4 4h4v1.34a1.33 1.33 0 0 0 2.67 0v-2.75a1.75 1.75 0 0 0-.08-.36v-.12a1.43 1.43 0 0 0-.25-.37l-8-8c-.11-.1-.24-.2-.38-.26h-.12a1.17 1.17 0 0 0-.44-.14H6.67a4 4 0 0 0-4 4v18.66a4 4 0 0 0 4 4H16a1.33 1.33 0 0 0 0-2.66ZM16 7.2l3.45 3.46h-2.12A1.33 1.33 0 0 1 16 9.33V7.21Zm-6.67 3.46a1.33 1.33 0 0 0 0 2.66h1.34a1.33 1.33 0 0 0 0-2.66H9.33Zm19.62 16.38-1.56-1.54a4.59 4.59 0 0 0-.72-5.51 4.65 4.65 0 0 0-8 3.32 4.61 4.61 0 0 0 6.84 4.07l1.54 1.56a1.33 1.33 0 0 0 2.19-.44 1.33 1.33 0 0 0-.3-1.46Zm-4.23-2.33a2.05 2.05 0 0 1-2.81 0 2 2 0 0 1 0-2.81 2 2 0 0 1 1.34-.58 1.96 1.96 0 0 1 1.47 3.39ZM17.33 16h-8a1.33 1.33 0 0 0 0 2.67h8a1.33 1.33 0 1 0 0-2.67Zm-2.66 8a1.33 1.33 0 0 0 0-2.67H9.33a1.33 1.33 0 0 0 0 2.67h5.34Z"/></svg>',
|
||||
image: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="M26 2.67H7.33a4 4 0 0 0-4 4v18.66a4 4 0 0 0 4 4H26c.22 0 .44-.02.65-.06l.4-.1h.16l.5-.18.17-.1c.13-.08.28-.14.41-.24.18-.13.35-.27.5-.42l.1-.12c.13-.14.25-.28.36-.43l.12-.17c.1-.15.18-.3.24-.47l.1-.2.16-.5v-.2c.07-.27.12-.54.13-.8V6.66a4 4 0 0 0-4-4Zm-18.67 24A1.33 1.33 0 0 1 6 25.33V19.6l4.39-4.4a1.33 1.33 0 0 1 1.89 0l11.47 11.48H7.33Zm20-1.34c0 .17-.03.33-.1.48a1.33 1.33 0 0 1-.22.35l-7.13-7.13 1.17-1.18a1.33 1.33 0 0 1 1.9 0l4.38 4.4v3.08Zm0-6.85L24.83 16a4.1 4.1 0 0 0-5.66 0L18 17.17l-3.84-3.84a4.1 4.1 0 0 0-5.65 0L6 15.81V6.67a1.33 1.33 0 0 1 1.33-1.34H26a1.33 1.33 0 0 1 1.33 1.34v11.81Z"/></svg>',
|
||||
robot: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="M12.67 20a1.33 1.33 0 1 0 0 2.67 1.33 1.33 0 0 0 0-2.67Zm-9.34-1.33A1.33 1.33 0 0 0 2 20v2.67a1.33 1.33 0 1 0 2.67 0V20a1.33 1.33 0 0 0-1.34-1.33Zm26.67 0A1.33 1.33 0 0 0 28.67 20v2.67a1.33 1.33 0 1 0 2.66 0V20A1.33 1.33 0 0 0 30 18.67Zm-6.67-9.34H18v-1.7a2.67 2.67 0 0 0 .55-4.18 2.67 2.67 0 0 0-4.19 3.2c.24.41.57.74.97.98v1.7H10a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h13.33a4 4 0 0 0 4-4v-12a4 4 0 0 0-4-4ZM18.96 12l-.67 2.67h-3.25L14.37 12h4.59Zm5.7 13.33a1.33 1.33 0 0 1-1.33 1.34H10a1.33 1.33 0 0 1-1.33-1.34v-12A1.33 1.33 0 0 1 10 12h1.63l1.04 4.32A1.33 1.33 0 0 0 14 17.33h5.33a1.33 1.33 0 0 0 1.34-1.01L21.7 12h1.62a1.33 1.33 0 0 1 1.34 1.33v12Zm-4-5.33a1.33 1.33 0 1 0 0 2.67 1.33 1.33 0 0 0 0-2.67Z"/></svg>',
|
||||
sitemap: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path fill="currentColor" d="M29.67 20H27v-4a1.33 1.33 0 0 0-1.33-1.33h-8V12h2.66a1.33 1.33 0 0 0 1.34-1.33v-8a1.33 1.33 0 0 0-1.34-1.34h-8A1.33 1.33 0 0 0 11 2.67v8A1.33 1.33 0 0 0 12.33 12H15v2.67H7A1.33 1.33 0 0 0 5.67 16v4H3a1.33 1.33 0 0 0-1.33 1.33v8A1.33 1.33 0 0 0 3 30.67h8a1.33 1.33 0 0 0 1.33-1.34v-8A1.33 1.33 0 0 0 11 20H8.33v-2.67h16V20h-2.66a1.33 1.33 0 0 0-1.34 1.33v8a1.33 1.33 0 0 0 1.34 1.34h8A1.33 1.33 0 0 0 31 29.33v-8A1.33 1.33 0 0 0 29.67 20Zm-20 2.67V28H4.33v-5.33h5.34Zm4-13.34V4H19v5.33h-5.33ZM28.33 28H23v-5.33h5.33V28Z"/></svg>',
|
||||
} as const;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
export { DevOverlayBadge } from './badge.js';
|
||||
export { DevOverlayButton } from './button.js';
|
||||
export { DevOverlayCard } from './card.js';
|
||||
export { DevOverlayHighlight } from './highlight.js';
|
||||
export { DevOverlayTooltip } from './tooltip.js';
|
||||
export { DevOverlayWindow } from './window.js';
|
||||
export { DevOverlayToggle } from './toggle.js';
|
||||
export { DevOverlayIcon } from './icon.js';
|
||||
|
|
@ -1,18 +1,9 @@
|
|||
import { getIconElement, isDefinedIcon, type Icon } from './icons.js';
|
||||
|
||||
export class DevOverlayWindow extends HTMLElement {
|
||||
windowTitle?: string | undefined | null;
|
||||
windowIcon?: Icon | undefined | null;
|
||||
shadowRoot: ShadowRoot;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.windowTitle = this.getAttribute('window-title');
|
||||
this.windowIcon = this.hasAttribute('window-icon')
|
||||
? (this.getAttribute('window-icon') as Icon)
|
||||
: undefined;
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
|
|
@ -43,15 +34,6 @@ export class DevOverlayWindow extends HTMLElement {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
#window-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
::slotted(h1) {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
|
@ -72,37 +54,13 @@ export class DevOverlayWindow extends HTMLElement {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
#window-title svg {
|
||||
margin-right: 8px;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
hr, ::slotted(hr) {
|
||||
border: 1px solid rgba(27, 30, 36, 1);
|
||||
margin: 1em 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 id="window-title">${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ''}${
|
||||
this.windowTitle ?? ''
|
||||
}</h1>
|
||||
<hr />
|
||||
<slot />
|
||||
`;
|
||||
}
|
||||
|
||||
getElementForIcon(icon: Icon) {
|
||||
if (isDefinedIcon(icon)) {
|
||||
const iconElement = getIconElement(icon);
|
||||
iconElement?.style.setProperty('height', '1em');
|
||||
|
||||
return iconElement?.outerHTML;
|
||||
} else {
|
||||
const iconElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
iconElement.setAttribute('viewBox', '0 0 16 16');
|
||||
iconElement.innerHTML = icon;
|
||||
|
||||
return iconElement.outerHTML;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@ import type http from 'node:http';
|
|||
import { fileURLToPath } from 'node:url';
|
||||
import type {
|
||||
ComponentInstance,
|
||||
DevOverlayMetadata,
|
||||
ManifestData,
|
||||
MiddlewareHandler,
|
||||
RouteData,
|
||||
SSRElement,
|
||||
SSRManifest,
|
||||
} from '../@types/astro.js';
|
||||
import { getInfoOutput } from '../cli/info/index.js';
|
||||
import { ASTRO_VERSION } from '../core/constants.js';
|
||||
import { AstroErrorData, isAstroError } from '../core/errors/index.js';
|
||||
import { sequence } from '../core/middleware/index.js';
|
||||
import { req } from '../core/messages.js';
|
||||
|
|
@ -390,12 +393,18 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
|
|||
children: '',
|
||||
});
|
||||
|
||||
const additionalMetadata: DevOverlayMetadata['__astro_dev_overlay__'] = {
|
||||
root: fileURLToPath(settings.config.root),
|
||||
version: ASTRO_VERSION,
|
||||
debugInfo: await getInfoOutput({ userConfig: settings.config, print: false }),
|
||||
};
|
||||
|
||||
settings.config;
|
||||
|
||||
// Additional data for the dev overlay
|
||||
scripts.add({
|
||||
props: {},
|
||||
children: `window.__astro_dev_overlay__ = {root: ${JSON.stringify(
|
||||
fileURLToPath(settings.config.root)
|
||||
)}}`,
|
||||
children: `window.__astro_dev_overlay__ = ${JSON.stringify(additionalMetadata)}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -701,7 +701,6 @@ describe('[SSG] i18n routing', () => {
|
|||
|
||||
it('should render the en locale', async () => {
|
||||
let html = await fixture.readFile('/index.html');
|
||||
let $ = cheerio.load(html);
|
||||
expect(html).to.include('http-equiv="refresh');
|
||||
expect(html).to.include('Redirecting to: /en');
|
||||
});
|
||||
|
|
@ -953,9 +952,8 @@ describe('[SSR] i18n routing', () => {
|
|||
it('should redirect to the english locale, which is the first fallback', async () => {
|
||||
let request = new Request('http://example.com/new-site/it/start');
|
||||
let response = await app.render(request);
|
||||
console.log(await response.text());
|
||||
// expect(response.status).to.equal(302);
|
||||
// expect(response.headers.get('location')).to.equal('/new-site/start');
|
||||
expect(response.status).to.equal(302);
|
||||
expect(response.headers.get('location')).to.equal('/new-site/start');
|
||||
});
|
||||
|
||||
it("should render a 404 because the route `fr` isn't included in the list of locales of the configuration", async () => {
|
||||
|
|
|
|||
|
|
@ -109,7 +109,6 @@ describe('astro:ssr-manifest, split', () => {
|
|||
const request = new Request('http://example.com/');
|
||||
const response = await app.render(request);
|
||||
const html = await response.text();
|
||||
console.log(html);
|
||||
expect(html.includes('<title>Testing</title>')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -199,7 +199,6 @@ describe('dev container', () => {
|
|||
container.handle(r.req, r.res);
|
||||
await r.done;
|
||||
const doc = await r.text();
|
||||
console.log(doc);
|
||||
expect(doc).to.match(/Regular page/);
|
||||
expect(r.res.statusCode).to.equal(200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -636,6 +636,7 @@ describe('getLocaleAbsoluteUrl', () => {
|
|||
...config.experimental.i18n,
|
||||
trailingSlash: 'never',
|
||||
format: 'directory',
|
||||
site: 'https://example.com',
|
||||
})
|
||||
).to.eq('https://example.com/blog');
|
||||
expect(
|
||||
|
|
@ -645,6 +646,7 @@ describe('getLocaleAbsoluteUrl', () => {
|
|||
...config.experimental.i18n,
|
||||
trailingSlash: 'always',
|
||||
format: 'directory',
|
||||
site: 'https://example.com',
|
||||
})
|
||||
).to.eq('https://example.com/blog/es/');
|
||||
|
||||
|
|
@ -655,6 +657,7 @@ describe('getLocaleAbsoluteUrl', () => {
|
|||
...config.experimental.i18n,
|
||||
trailingSlash: 'ignore',
|
||||
format: 'directory',
|
||||
site: 'https://example.com',
|
||||
})
|
||||
).to.eq('https://example.com/blog/');
|
||||
|
||||
|
|
@ -666,6 +669,7 @@ describe('getLocaleAbsoluteUrl', () => {
|
|||
...config.experimental.i18n,
|
||||
trailingSlash: 'never',
|
||||
format: 'file',
|
||||
site: 'https://example.com',
|
||||
})
|
||||
).to.eq('https://example.com/blog');
|
||||
expect(
|
||||
|
|
@ -675,6 +679,7 @@ describe('getLocaleAbsoluteUrl', () => {
|
|||
...config.experimental.i18n,
|
||||
trailingSlash: 'always',
|
||||
format: 'file',
|
||||
site: 'https://example.com',
|
||||
})
|
||||
).to.eq('https://example.com/blog/es/');
|
||||
|
||||
|
|
@ -686,6 +691,7 @@ describe('getLocaleAbsoluteUrl', () => {
|
|||
...config.experimental.i18n,
|
||||
trailingSlash: 'ignore',
|
||||
format: 'file',
|
||||
site: 'https://example.com',
|
||||
})
|
||||
).to.eq('https://example.com/blog');
|
||||
});
|
||||
|
|
@ -51,6 +51,14 @@ async function install({ packageManager, cwd }: { packageManager: string; cwd: s
|
|||
return shell(packageManager, ['install'], { cwd, timeout: 90_000, stdio: 'ignore' });
|
||||
}
|
||||
|
||||
/**
|
||||
* Yarn Berry (PnP) versions will throw an error if there isn't an existing `yarn.lock` file
|
||||
* If a `yarn.lock` file doesn't exist, this function writes an empty `yarn.lock` one.
|
||||
* Unfortunately this hack is required to run `yarn install`.
|
||||
*
|
||||
* The empty `yarn.lock` file is immediately overwritten by the installation process.
|
||||
* See https://github.com/withastro/astro/pull/8028
|
||||
*/
|
||||
async function ensureYarnLock({ cwd }: { cwd: string }) {
|
||||
const yarnLock = path.join(cwd, 'yarn.lock');
|
||||
if (fs.existsSync(yarnLock)) return;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { fileURLToPath } from 'node:url';
|
|||
|
||||
import { typescript, setupTypeScript } from '../dist/index.js';
|
||||
import { setup, resetFixtures } from './utils.js';
|
||||
import { describe } from 'node:test';
|
||||
|
||||
describe('typescript', () => {
|
||||
const fixture = setup();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { expect } from 'chai';
|
|||
import nodejs from '../dist/index.js';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
describe('API routes', () => {
|
||||
describe('Bad URLs', () => {
|
||||
/** @type {import('./test-utils').Fixture} */
|
||||
let fixture;
|
||||
let devPreview;
|
||||
|
|
|
|||
53
packages/upgrade/README.md
Normal file
53
packages/upgrade/README.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
# @astrojs/upgrade
|
||||
|
||||
A command-line tool for upgrading your Astro integrations and dependencies.
|
||||
|
||||
You can run this command in your terminal to upgrade your official Astro integrations at the same time you upgrade your version of Astro.
|
||||
|
||||
## Usage
|
||||
|
||||
`@astrojs/upgrade` should not be added as a dependency to your project, but run as a temporary executable whenever you want to upgrade using [`npx`](https://docs.npmjs.com/cli/v10/commands/npx) or [`dlx`](https://pnpm.io/cli/dlx).
|
||||
|
||||
**With NPM:**
|
||||
|
||||
```bash
|
||||
npx @astrojs/upgrade
|
||||
```
|
||||
|
||||
**With Yarn:**
|
||||
|
||||
```bash
|
||||
yarn dlx @astrojs/upgrade
|
||||
```
|
||||
|
||||
**With PNPM:**
|
||||
|
||||
```bash
|
||||
pnpm dlx @astrojs/upgrade
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
### tag (optional)
|
||||
|
||||
It is possible to pass a specific `tag` to resolve packages against. If not included, `@astrojs/upgrade` looks for the `latest` tag.
|
||||
|
||||
For example, Astro often releases `beta` versions prior to an upcoming major release. Upgrade an existing Astro project and it's dependencies to the `beta` version using one of the following commands:
|
||||
|
||||
**With NPM:**
|
||||
|
||||
```bash
|
||||
npx @astrojs/upgrade beta
|
||||
```
|
||||
|
||||
**With Yarn:**
|
||||
|
||||
```bash
|
||||
yarn dlx @astrojs/upgrade beta
|
||||
```
|
||||
|
||||
**With PNPM:**
|
||||
|
||||
```bash
|
||||
pnpm dlx @astrojs/upgrade beta
|
||||
```
|
||||
49
packages/upgrade/package.json
Normal file
49
packages/upgrade/package.json
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"name": "@astrojs/upgrade",
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"author": "withastro",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/withastro/astro.git",
|
||||
"directory": "packages/upgrade"
|
||||
},
|
||||
"bugs": "https://github.com/withastro/astro/issues",
|
||||
"homepage": "https://astro.build",
|
||||
"exports": {
|
||||
".": "./upgrade.mjs"
|
||||
},
|
||||
"main": "./upgrade.mjs",
|
||||
"bin": "./upgrade.mjs",
|
||||
"scripts": {
|
||||
"build": "astro-scripts build \"src/index.ts\" --bundle && tsc",
|
||||
"build:ci": "astro-scripts build \"src/index.ts\" --bundle",
|
||||
"dev": "astro-scripts dev \"src/**/*.ts\"",
|
||||
"test": "mocha --exit --timeout 20000 --parallel"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"upgrade.js"
|
||||
],
|
||||
"//a": "MOST PACKAGES SHOULD GO IN DEV_DEPENDENCIES! THEY WILL BE BUNDLED.",
|
||||
"//b": "DEPENDENCIES IS FOR UNBUNDLED PACKAGES",
|
||||
"dependencies": {
|
||||
"@astrojs/cli-kit": "^0.2.3",
|
||||
"semver": "^7.5.4",
|
||||
"which-pm-runs": "^1.1.0",
|
||||
"terminal-link": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/semver": "^7.5.2",
|
||||
"@types/which-pm-runs": "^1.0.0",
|
||||
"arg": "^5.0.2",
|
||||
"astro-scripts": "workspace:*",
|
||||
"chai": "^4.3.7",
|
||||
"mocha": "^10.2.0",
|
||||
"strip-ansi": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.14.1"
|
||||
}
|
||||
}
|
||||
56
packages/upgrade/src/actions/context.ts
Normal file
56
packages/upgrade/src/actions/context.ts
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { prompt } from '@astrojs/cli-kit';
|
||||
import arg from 'arg';
|
||||
import { pathToFileURL } from 'node:url';
|
||||
import detectPackageManager from 'which-pm-runs';
|
||||
|
||||
export interface Context {
|
||||
help: boolean;
|
||||
prompt: typeof prompt;
|
||||
version: string;
|
||||
dryRun?: boolean;
|
||||
cwd: URL;
|
||||
stdin?: typeof process.stdin;
|
||||
stdout?: typeof process.stdout;
|
||||
packageManager: string;
|
||||
packages: PackageInfo[];
|
||||
exit(code: number): never;
|
||||
}
|
||||
|
||||
export interface PackageInfo {
|
||||
name: string;
|
||||
currentVersion: string;
|
||||
targetVersion: string;
|
||||
tag?: string;
|
||||
isDevDependency?: boolean;
|
||||
isMajor?: boolean;
|
||||
changelogURL?: string;
|
||||
changelogTitle?: string;
|
||||
}
|
||||
|
||||
export async function getContext(argv: string[]): Promise<Context> {
|
||||
const flags = arg(
|
||||
{
|
||||
'--dry-run': Boolean,
|
||||
'--help': Boolean,
|
||||
|
||||
'-h': '--help',
|
||||
},
|
||||
{ argv, permissive: true }
|
||||
);
|
||||
|
||||
const packageManager = detectPackageManager()?.name ?? 'npm';
|
||||
const { _: [version = 'latest'] = [], '--help': help = false, '--dry-run': dryRun } = flags;
|
||||
|
||||
return {
|
||||
help,
|
||||
prompt,
|
||||
packageManager,
|
||||
packages: [],
|
||||
cwd: new URL(pathToFileURL(process.cwd()) + '/'),
|
||||
dryRun,
|
||||
version,
|
||||
exit(code) {
|
||||
process.exit(code);
|
||||
},
|
||||
} satisfies Context;
|
||||
}
|
||||
15
packages/upgrade/src/actions/help.ts
Normal file
15
packages/upgrade/src/actions/help.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { printHelp } from '../messages.js';
|
||||
|
||||
export function help() {
|
||||
printHelp({
|
||||
commandName: '@astrojs/upgrade',
|
||||
usage: '[version] [...flags]',
|
||||
headline: 'Upgrade Astro dependencies.',
|
||||
tables: {
|
||||
Flags: [
|
||||
['--help (-h)', 'See all available flags.'],
|
||||
['--dry-run', 'Walk through steps without executing.'],
|
||||
],
|
||||
},
|
||||
});
|
||||
}
|
||||
187
packages/upgrade/src/actions/install.ts
Normal file
187
packages/upgrade/src/actions/install.ts
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
import type { Context, PackageInfo } from './context.js';
|
||||
|
||||
import { color, say } from '@astrojs/cli-kit';
|
||||
import { random, sleep } from '@astrojs/cli-kit/utils';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import {
|
||||
banner,
|
||||
bye,
|
||||
celebrations,
|
||||
changelog,
|
||||
done,
|
||||
error,
|
||||
info,
|
||||
newline,
|
||||
pluralize,
|
||||
spinner,
|
||||
success,
|
||||
title,
|
||||
upgrade,
|
||||
warn,
|
||||
} from '../messages.js';
|
||||
import { shell } from '../shell.js';
|
||||
|
||||
export async function install(
|
||||
ctx: Pick<
|
||||
Context,
|
||||
'version' | 'packages' | 'packageManager' | 'prompt' | 'dryRun' | 'exit' | 'cwd'
|
||||
>
|
||||
) {
|
||||
await banner();
|
||||
newline();
|
||||
const { current, dependencies, devDependencies } = filterPackages(ctx);
|
||||
const toInstall = [...dependencies, ...devDependencies].sort(sortPackages);
|
||||
for (const packageInfo of current.sort(sortPackages)) {
|
||||
const tag = /^\d/.test(packageInfo.targetVersion)
|
||||
? packageInfo.targetVersion
|
||||
: packageInfo.targetVersion.slice(1);
|
||||
await info(`${packageInfo.name}`, `is up to date on`, `v${tag}`);
|
||||
await sleep(random(50, 150));
|
||||
}
|
||||
if (toInstall.length === 0 && !ctx.dryRun) {
|
||||
newline();
|
||||
await success(random(celebrations), random(done));
|
||||
return;
|
||||
}
|
||||
const majors: PackageInfo[] = [];
|
||||
for (const packageInfo of toInstall) {
|
||||
const word = ctx.dryRun ? 'can' : 'will';
|
||||
await upgrade(packageInfo, `${word} be updated to`);
|
||||
if (packageInfo.isMajor) {
|
||||
majors.push(packageInfo);
|
||||
}
|
||||
}
|
||||
if (majors.length > 0) {
|
||||
const { proceed } = await ctx.prompt({
|
||||
name: 'proceed',
|
||||
type: 'confirm',
|
||||
label: title('wait'),
|
||||
message: `${pluralize(
|
||||
['One package has', 'Some packages have'],
|
||||
majors.length
|
||||
)} breaking changes. Continue?`,
|
||||
initial: true,
|
||||
});
|
||||
if (!proceed) {
|
||||
return ctx.exit(0);
|
||||
}
|
||||
|
||||
newline();
|
||||
|
||||
await warn('check', `Be sure to follow the ${pluralize('CHANGELOG', majors.length)}.`);
|
||||
for (const pkg of majors.sort(sortPackages)) {
|
||||
await changelog(pkg.name, pkg.changelogTitle!, pkg.changelogURL!);
|
||||
}
|
||||
}
|
||||
|
||||
newline();
|
||||
if (ctx.dryRun) {
|
||||
await info('--dry-run', `Skipping dependency installation`);
|
||||
} else {
|
||||
await runInstallCommand(ctx, dependencies, devDependencies);
|
||||
}
|
||||
}
|
||||
|
||||
function filterPackages(ctx: Pick<Context, 'packages'>) {
|
||||
const current: PackageInfo[] = [];
|
||||
const dependencies: PackageInfo[] = [];
|
||||
const devDependencies: PackageInfo[] = [];
|
||||
for (const packageInfo of ctx.packages) {
|
||||
const { currentVersion, targetVersion, isDevDependency } = packageInfo;
|
||||
// Remove prefix from `currentVersion` before comparing
|
||||
if (currentVersion.replace(/^\D+/, '') === targetVersion) {
|
||||
current.push(packageInfo);
|
||||
} else {
|
||||
const arr = isDevDependency ? devDependencies : dependencies;
|
||||
arr.push(packageInfo);
|
||||
}
|
||||
}
|
||||
return { current, dependencies, devDependencies };
|
||||
}
|
||||
|
||||
/**
|
||||
* An `Array#sort` comparator function to normalize how packages are displayed.
|
||||
* This only changes how the packages are displayed in the CLI, it is not persisted to `package.json`.
|
||||
*/
|
||||
function sortPackages(a: PackageInfo, b: PackageInfo): number {
|
||||
if (a.isMajor && !b.isMajor) return 1;
|
||||
if (b.isMajor && !a.isMajor) return -1;
|
||||
if (a.name === 'astro') return -1;
|
||||
if (b.name === 'astro') return 1;
|
||||
if (a.name.startsWith('@astrojs') && !b.name.startsWith('@astrojs')) return -1;
|
||||
if (b.name.startsWith('@astrojs') && !a.name.startsWith('@astrojs')) return 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
}
|
||||
|
||||
async function runInstallCommand(
|
||||
ctx: Pick<Context, 'cwd' | 'packageManager' | 'exit'>,
|
||||
dependencies: PackageInfo[],
|
||||
devDependencies: PackageInfo[]
|
||||
) {
|
||||
const cwd = fileURLToPath(ctx.cwd);
|
||||
if (ctx.packageManager === 'yarn') await ensureYarnLock({ cwd });
|
||||
|
||||
await spinner({
|
||||
start: `Installing dependencies with ${ctx.packageManager}...`,
|
||||
end: `Installed dependencies!`,
|
||||
while: async () => {
|
||||
try {
|
||||
if (dependencies.length > 0) {
|
||||
await shell(
|
||||
ctx.packageManager,
|
||||
[
|
||||
'install',
|
||||
...dependencies.map(
|
||||
({ name, targetVersion }) => `${name}@${targetVersion.replace(/^\^/, '')}`
|
||||
),
|
||||
],
|
||||
{ cwd, timeout: 90_000, stdio: 'ignore' }
|
||||
);
|
||||
}
|
||||
if (devDependencies.length > 0) {
|
||||
await shell(
|
||||
ctx.packageManager,
|
||||
[
|
||||
'install',
|
||||
'--save-dev',
|
||||
...devDependencies.map(
|
||||
({ name, targetVersion }) => `${name}@${targetVersion.replace(/^\^/, '')}`
|
||||
),
|
||||
],
|
||||
{ cwd, timeout: 90_000, stdio: 'ignore' }
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
const packages = [...dependencies, ...devDependencies]
|
||||
.map(({ name, targetVersion }) => `${name}@${targetVersion}`)
|
||||
.join(' ');
|
||||
newline();
|
||||
error(
|
||||
'error',
|
||||
`Dependencies failed to install, please run the following command manually:\n${color.bold(
|
||||
`${ctx.packageManager} install ${packages}`
|
||||
)}`
|
||||
);
|
||||
return ctx.exit(1);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
await say([`${random(celebrations)} ${random(done)}`, random(bye)], { clear: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Yarn Berry (PnP) versions will throw an error if there isn't an existing `yarn.lock` file
|
||||
* If a `yarn.lock` file doesn't exist, this function writes an empty `yarn.lock` one.
|
||||
* Unfortunately this hack is required to run `yarn install`.
|
||||
*
|
||||
* The empty `yarn.lock` file is immediately overwritten by the installation process.
|
||||
* See https://github.com/withastro/astro/pull/8028
|
||||
*/
|
||||
async function ensureYarnLock({ cwd }: { cwd: string }) {
|
||||
const yarnLock = path.join(cwd, 'yarn.lock');
|
||||
if (fs.existsSync(yarnLock)) return;
|
||||
return fs.promises.writeFile(yarnLock, '', { encoding: 'utf-8' });
|
||||
}
|
||||
182
packages/upgrade/src/actions/verify.ts
Normal file
182
packages/upgrade/src/actions/verify.ts
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import type { Context, PackageInfo } from './context.js';
|
||||
|
||||
import { color } from '@astrojs/cli-kit';
|
||||
import dns from 'node:dns/promises';
|
||||
import { existsSync } from 'node:fs';
|
||||
import { readFile } from 'node:fs/promises';
|
||||
import semverCoerce from 'semver/functions/coerce.js';
|
||||
import semverDiff from 'semver/functions/diff.js';
|
||||
import semverParse from 'semver/functions/parse.js';
|
||||
import { bannerAbort, error, getRegistry, info, newline } from '../messages.js';
|
||||
|
||||
export async function verify(
|
||||
ctx: Pick<Context, 'version' | 'packages' | 'cwd' | 'dryRun' | 'exit'>
|
||||
) {
|
||||
const registry = await getRegistry();
|
||||
|
||||
if (!ctx.dryRun) {
|
||||
const online = await isOnline(registry);
|
||||
if (!online) {
|
||||
bannerAbort();
|
||||
newline();
|
||||
error('error', `Unable to connect to the internet.`);
|
||||
ctx.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
await verifyAstroProject(ctx);
|
||||
|
||||
const ok = await verifyVersions(ctx, registry);
|
||||
if (!ok) {
|
||||
bannerAbort();
|
||||
newline();
|
||||
error('error', `Version ${color.reset(ctx.version)} ${color.dim('could not be found!')}`);
|
||||
await info('check', 'https://github.com/withastro/astro/releases');
|
||||
ctx.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
function isOnline(registry: string): Promise<boolean> {
|
||||
const { host } = new URL(registry);
|
||||
return dns.lookup(host).then(
|
||||
() => true,
|
||||
() => false
|
||||
);
|
||||
}
|
||||
|
||||
function safeJSONParse(value: string) {
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {}
|
||||
return {};
|
||||
}
|
||||
|
||||
async function verifyAstroProject(ctx: Pick<Context, 'cwd' | 'version' | 'packages'>) {
|
||||
const packageJson = new URL('./package.json', ctx.cwd);
|
||||
if (!existsSync(packageJson)) return false;
|
||||
const contents = await readFile(packageJson, { encoding: 'utf-8' });
|
||||
if (!contents.includes('astro')) return false;
|
||||
|
||||
const { dependencies = {}, devDependencies = {} } = safeJSONParse(contents);
|
||||
if (dependencies['astro'] === undefined && devDependencies['astro'] === undefined) return false;
|
||||
|
||||
// Side-effect! Persist dependency info to the shared context
|
||||
collectPackageInfo(ctx, dependencies, devDependencies);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function isAstroPackage(name: string) {
|
||||
return name === 'astro' || name.startsWith('@astrojs/');
|
||||
}
|
||||
|
||||
function collectPackageInfo(
|
||||
ctx: Pick<Context, 'version' | 'packages'>,
|
||||
dependencies: Record<string, string>,
|
||||
devDependencies: Record<string, string>
|
||||
) {
|
||||
for (const [name, currentVersion] of Object.entries(dependencies)) {
|
||||
if (!isAstroPackage(name)) continue;
|
||||
ctx.packages.push({
|
||||
name,
|
||||
currentVersion,
|
||||
targetVersion: ctx.version,
|
||||
});
|
||||
}
|
||||
for (const [name, currentVersion] of Object.entries(devDependencies)) {
|
||||
if (!isAstroPackage(name)) continue;
|
||||
ctx.packages.push({
|
||||
name,
|
||||
currentVersion,
|
||||
targetVersion: ctx.version,
|
||||
isDevDependency: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function verifyVersions(
|
||||
ctx: Pick<Context, 'version' | 'packages' | 'exit'>,
|
||||
registry: string
|
||||
) {
|
||||
const tasks: Promise<void>[] = [];
|
||||
for (const packageInfo of ctx.packages) {
|
||||
tasks.push(resolveTargetVersion(packageInfo, registry));
|
||||
}
|
||||
try {
|
||||
await Promise.all(tasks);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
for (const packageInfo of ctx.packages) {
|
||||
if (!packageInfo.targetVersion) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function resolveTargetVersion(packageInfo: PackageInfo, registry: string): Promise<void> {
|
||||
const packageMetadata = await fetch(`${registry}/${packageInfo.name}`, {
|
||||
headers: { accept: 'application/vnd.npm.install-v1+json' },
|
||||
});
|
||||
if (packageMetadata.status >= 400) {
|
||||
throw new Error(`Unable to resolve "${packageInfo.name}"`);
|
||||
}
|
||||
const { 'dist-tags': distTags } = await packageMetadata.json();
|
||||
let version = distTags[packageInfo.targetVersion];
|
||||
if (version) {
|
||||
packageInfo.tag = packageInfo.targetVersion;
|
||||
packageInfo.targetVersion = version;
|
||||
} else {
|
||||
packageInfo.targetVersion = 'latest';
|
||||
version = distTags.latest;
|
||||
}
|
||||
if (packageInfo.currentVersion === version) {
|
||||
return;
|
||||
}
|
||||
const prefix = packageInfo.targetVersion === 'latest' ? '^' : '';
|
||||
packageInfo.targetVersion = `${prefix}${version}`;
|
||||
const fromVersion = semverCoerce(packageInfo.currentVersion)!;
|
||||
const toVersion = semverParse(version)!;
|
||||
const bump = semverDiff(fromVersion, toVersion);
|
||||
if ((bump === 'major' && toVersion.prerelease.length === 0) || bump === 'premajor') {
|
||||
packageInfo.isMajor = true;
|
||||
if (packageInfo.name === 'astro') {
|
||||
const upgradeGuide = `https://docs.astro.build/en/guides/upgrade-to/v${toVersion.major}/`;
|
||||
const docsRes = await fetch(upgradeGuide);
|
||||
// OK if this request fails, it's probably a prerelease without a public migration guide.
|
||||
// In that case, we should fallback to the CHANGELOG check below.
|
||||
if (docsRes.status === 200) {
|
||||
packageInfo.changelogURL = upgradeGuide;
|
||||
packageInfo.changelogTitle = `Upgrade to Astro v${toVersion.major}`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
const latestMetadata = await fetch(`${registry}/${packageInfo.name}/latest`);
|
||||
if (latestMetadata.status >= 400) {
|
||||
throw new Error(`Unable to resolve "${packageInfo.name}"`);
|
||||
}
|
||||
const { repository } = await latestMetadata.json();
|
||||
const branch = bump === 'premajor' ? 'next' : 'main';
|
||||
packageInfo.changelogURL = extractChangelogURLFromRepository(repository, version, branch);
|
||||
packageInfo.changelogTitle = 'CHANGELOG';
|
||||
} else {
|
||||
// Dependency updates should not include the specific dist-tag
|
||||
// since they are just for compatability
|
||||
packageInfo.tag = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function extractChangelogURLFromRepository(
|
||||
repository: Record<string, string>,
|
||||
version: string,
|
||||
branch = 'main'
|
||||
) {
|
||||
return (
|
||||
repository.url.replace('git+', '').replace('.git', '') +
|
||||
`/blob/${branch}/` +
|
||||
repository.directory +
|
||||
'/CHANGELOG.md#' +
|
||||
version.replace(/\./g, '')
|
||||
);
|
||||
}
|
||||
32
packages/upgrade/src/index.ts
Normal file
32
packages/upgrade/src/index.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { getContext } from './actions/context.js';
|
||||
|
||||
import { help } from './actions/help.js';
|
||||
import { install } from './actions/install.js';
|
||||
import { verify } from './actions/verify.js';
|
||||
import { setStdout } from './messages.js';
|
||||
|
||||
const exit = () => process.exit(0);
|
||||
process.on('SIGINT', exit);
|
||||
process.on('SIGTERM', exit);
|
||||
|
||||
export async function main() {
|
||||
// NOTE: In the v7.x version of npm, the default behavior of `npm init` was changed
|
||||
// to no longer require `--` to pass args and instead pass `--` directly to us. This
|
||||
// broke our arg parser, since `--` is a special kind of flag. Filtering for `--` here
|
||||
// fixes the issue so that create-astro now works on all npm versions.
|
||||
const cleanArgv = process.argv.slice(2).filter((arg) => arg !== '--');
|
||||
const ctx = await getContext(cleanArgv);
|
||||
if (ctx.help) {
|
||||
help();
|
||||
return;
|
||||
}
|
||||
|
||||
const steps = [verify, install];
|
||||
|
||||
for (const step of steps) {
|
||||
await step(ctx);
|
||||
}
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
export { getContext, install, setStdout, verify };
|
||||
212
packages/upgrade/src/messages.ts
Normal file
212
packages/upgrade/src/messages.ts
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
/* eslint no-console: 'off' */
|
||||
import { color, label, spinner as load } from '@astrojs/cli-kit';
|
||||
import { align } from '@astrojs/cli-kit/utils';
|
||||
import semverParse from 'semver/functions/parse.js';
|
||||
import terminalLink from 'terminal-link';
|
||||
import detectPackageManager from 'which-pm-runs';
|
||||
import type { PackageInfo } from './actions/context.js';
|
||||
import { shell } from './shell.js';
|
||||
|
||||
// Users might lack access to the global npm registry, this function
|
||||
// checks the user's project type and will return the proper npm registry
|
||||
//
|
||||
// A copy of this function also exists in the astro package
|
||||
export async function getRegistry(): Promise<string> {
|
||||
const packageManager = detectPackageManager()?.name || 'npm';
|
||||
try {
|
||||
const { stdout } = await shell(packageManager, ['config', 'get', 'registry']);
|
||||
return stdout?.trim()?.replace(/\/$/, '') || 'https://registry.npmjs.org';
|
||||
} catch (e) {
|
||||
return 'https://registry.npmjs.org';
|
||||
}
|
||||
}
|
||||
|
||||
let stdout = process.stdout;
|
||||
/** @internal Used to mock `process.stdout.write` for testing purposes */
|
||||
export function setStdout(writable: typeof process.stdout) {
|
||||
stdout = writable;
|
||||
}
|
||||
|
||||
export async function spinner(args: {
|
||||
start: string;
|
||||
end: string;
|
||||
while: (...args: any) => Promise<any>;
|
||||
}) {
|
||||
await load(args, { stdout });
|
||||
}
|
||||
|
||||
export function pluralize(word: string | [string, string], n: number) {
|
||||
const [singular, plural] = Array.isArray(word) ? word : [word, word + 's'];
|
||||
if (n === 1) return singular;
|
||||
return plural;
|
||||
}
|
||||
|
||||
export const celebrations = [
|
||||
'Beautiful.',
|
||||
'Excellent!',
|
||||
'Sweet!',
|
||||
'Nice!',
|
||||
'Huzzah!',
|
||||
'Success.',
|
||||
'Nice.',
|
||||
'Wonderful.',
|
||||
'Lovely!',
|
||||
"Lookin' good.",
|
||||
'Awesome.',
|
||||
];
|
||||
|
||||
export const done = [
|
||||
"You're on the latest and greatest.",
|
||||
'Your integrations are up-to-date.',
|
||||
'Everything is current.',
|
||||
'Everything is up to date.',
|
||||
'Integrations are all up to date.',
|
||||
'Everything is on the latest and greatest.',
|
||||
'Integrations are up to date.',
|
||||
];
|
||||
|
||||
export const bye = [
|
||||
'Thanks for using Astro!',
|
||||
'Have fun building!',
|
||||
'Take it easy, astronaut!',
|
||||
"Can't wait to see what you build.",
|
||||
'Good luck out there.',
|
||||
'See you around, astronaut.',
|
||||
];
|
||||
|
||||
export const log = (message: string) => stdout.write(message + '\n');
|
||||
|
||||
export const newline = () => stdout.write('\n');
|
||||
|
||||
export const banner = async () =>
|
||||
log(
|
||||
`\n${label('astro', color.bgGreen, color.black)} ${color.bold(
|
||||
'Integration upgrade in progress.'
|
||||
)}`
|
||||
);
|
||||
|
||||
export const bannerAbort = () =>
|
||||
log(`\n${label('astro', color.bgRed)} ${color.bold('Integration upgrade aborted.')}`);
|
||||
|
||||
export const warn = async (prefix: string, text: string) => {
|
||||
log(`${label(prefix, color.bgCyan, color.black)} ${text}`);
|
||||
};
|
||||
|
||||
export const info = async (prefix: string, text: string, version = '') => {
|
||||
const length = 11 + prefix.length + text.length + version?.length;
|
||||
const symbol = '◼';
|
||||
if (length > stdout.columns) {
|
||||
log(`${' '.repeat(5)} ${color.cyan(symbol)} ${prefix}`);
|
||||
log(`${' '.repeat(9)}${color.dim(text)} ${color.reset(version)}`);
|
||||
} else {
|
||||
log(
|
||||
`${' '.repeat(5)} ${color.cyan(symbol)} ${prefix} ${color.dim(text)} ${color.reset(version)}`
|
||||
);
|
||||
}
|
||||
};
|
||||
export const upgrade = async (packageInfo: PackageInfo, text: string) => {
|
||||
const { name, isMajor = false, targetVersion } = packageInfo;
|
||||
|
||||
const bg = isMajor ? (v: string) => color.bgYellow(color.black(` ${v} `)) : color.green;
|
||||
const style = isMajor ? color.yellow : color.green;
|
||||
const symbol = isMajor ? '▲' : '●';
|
||||
const toVersion = semverParse(targetVersion)!;
|
||||
const version = `v${toVersion.version}`;
|
||||
|
||||
const length = 12 + name.length + text.length + version.length;
|
||||
if (length > stdout.columns) {
|
||||
log(`${' '.repeat(5)} ${style(symbol)} ${name}`);
|
||||
log(`${' '.repeat(9)}${color.dim(text)} ${bg(version)}`);
|
||||
} else {
|
||||
log(`${' '.repeat(5)} ${style(symbol)} ${name} ${color.dim(text)} ${bg(version)}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const title = (text: string) =>
|
||||
align(label(text, color.bgYellow, color.black), 'end', 7) + ' ';
|
||||
|
||||
export const success = async (prefix: string, text: string) => {
|
||||
const length = 10 + prefix.length + text.length;
|
||||
if (length > stdout.columns) {
|
||||
log(`${' '.repeat(5)} ${color.green('✔')} ${prefix}`);
|
||||
log(`${' '.repeat(9)}${color.dim(text)}`);
|
||||
} else {
|
||||
log(`${' '.repeat(5)} ${color.green('✔')} ${prefix} ${color.dim(text)}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const error = async (prefix: string, text: string) => {
|
||||
if (stdout.columns < 80) {
|
||||
log(`${' '.repeat(5)} ${color.red('▲')} ${color.red(prefix)}`);
|
||||
log(`${' '.repeat(9)}${color.dim(text)}`);
|
||||
} else {
|
||||
log(`${' '.repeat(5)} ${color.red('▲')} ${color.red(prefix)} ${color.dim(text)}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const changelog = async (name: string, text: string, url: string) => {
|
||||
const link = terminalLink(text, url, { fallback: () => url });
|
||||
const linkLength = terminalLink.isSupported ? text.length : url.length;
|
||||
const symbol = ' ';
|
||||
|
||||
const length = 12 + name.length + linkLength;
|
||||
if (length > stdout.columns) {
|
||||
log(`${' '.repeat(5)} ${symbol} ${name}`);
|
||||
log(`${' '.repeat(9)}${color.cyan(color.underline(link))}`);
|
||||
} else {
|
||||
log(`${' '.repeat(5)} ${symbol} ${name} ${color.cyan(color.underline(link))}`);
|
||||
}
|
||||
};
|
||||
|
||||
export function printHelp({
|
||||
commandName,
|
||||
usage,
|
||||
tables,
|
||||
description,
|
||||
}: {
|
||||
commandName: string;
|
||||
headline?: string;
|
||||
usage?: string;
|
||||
tables?: Record<string, [command: string, help: string][]>;
|
||||
description?: string;
|
||||
}) {
|
||||
const linebreak = () => '';
|
||||
const table = (rows: [string, string][], { padding }: { padding: number }) => {
|
||||
const split = stdout.columns < 60;
|
||||
let raw = '';
|
||||
|
||||
for (const row of rows) {
|
||||
if (split) {
|
||||
raw += ` ${row[0]}\n `;
|
||||
} else {
|
||||
raw += `${`${row[0]}`.padStart(padding)}`;
|
||||
}
|
||||
raw += ' ' + color.dim(row[1]) + '\n';
|
||||
}
|
||||
|
||||
return raw.slice(0, -1); // remove latest \n
|
||||
};
|
||||
|
||||
let message = [];
|
||||
|
||||
if (usage) {
|
||||
message.push(linebreak(), `${color.green(commandName)} ${color.bold(usage)}`);
|
||||
}
|
||||
|
||||
if (tables) {
|
||||
function calculateTablePadding(rows: [string, string][]) {
|
||||
return rows.reduce((val, [first]) => Math.max(val, first.length), 0);
|
||||
}
|
||||
const tableEntries = Object.entries(tables);
|
||||
const padding = Math.max(...tableEntries.map(([, rows]) => calculateTablePadding(rows)));
|
||||
for (const [, tableRows] of tableEntries) {
|
||||
message.push(linebreak(), table(tableRows, { padding }));
|
||||
}
|
||||
}
|
||||
|
||||
if (description) {
|
||||
message.push(linebreak(), `${description}`);
|
||||
}
|
||||
|
||||
log(message.join('\n') + '\n');
|
||||
}
|
||||
60
packages/upgrade/src/shell.ts
Normal file
60
packages/upgrade/src/shell.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// This is an extremely simplified version of [`execa`](https://github.com/sindresorhus/execa)
|
||||
// intended to keep our dependency size down
|
||||
import type { ChildProcess, StdioOptions } from 'node:child_process';
|
||||
import type { Readable } from 'node:stream';
|
||||
|
||||
import { spawn } from 'node:child_process';
|
||||
import { text as textFromStream } from 'node:stream/consumers';
|
||||
|
||||
export interface ExecaOptions {
|
||||
cwd?: string | URL;
|
||||
stdio?: StdioOptions;
|
||||
timeout?: number;
|
||||
}
|
||||
export interface Output {
|
||||
stdout: string;
|
||||
stderr: string;
|
||||
exitCode: number;
|
||||
}
|
||||
const text = (stream: NodeJS.ReadableStream | Readable | null) =>
|
||||
stream ? textFromStream(stream).then((t) => t.trimEnd()) : '';
|
||||
|
||||
let signal: AbortSignal;
|
||||
export async function shell(
|
||||
command: string,
|
||||
flags: string[],
|
||||
opts: ExecaOptions = {}
|
||||
): Promise<Output> {
|
||||
let child: ChildProcess;
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
if (!signal) {
|
||||
const controller = new AbortController();
|
||||
// Ensure spawned process is cancelled on exit
|
||||
process.once('beforeexit', () => controller.abort());
|
||||
process.once('exit', () => controller.abort());
|
||||
signal = controller.signal;
|
||||
}
|
||||
try {
|
||||
child = spawn(command, flags, {
|
||||
cwd: opts.cwd,
|
||||
shell: true,
|
||||
stdio: opts.stdio,
|
||||
timeout: opts.timeout,
|
||||
signal,
|
||||
});
|
||||
const done = new Promise((resolve) => child.on('close', resolve));
|
||||
[stdout, stderr] = await Promise.all([text(child.stdout), text(child.stderr)]);
|
||||
await done;
|
||||
} catch (e) {
|
||||
throw { stdout, stderr, exitCode: 1 };
|
||||
}
|
||||
const { exitCode } = child;
|
||||
if (exitCode === null) {
|
||||
throw new Error('Timeout');
|
||||
}
|
||||
if (exitCode !== 0) {
|
||||
throw new Error(stderr);
|
||||
}
|
||||
return { stdout, stderr, exitCode };
|
||||
}
|
||||
19
packages/upgrade/test/context.test.js
Normal file
19
packages/upgrade/test/context.test.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { expect } from 'chai';
|
||||
import { getContext } from '../dist/index.js';
|
||||
|
||||
describe('context', () => {
|
||||
it('no arguments', async () => {
|
||||
const ctx = await getContext([]);
|
||||
expect(ctx.version).to.eq('latest');
|
||||
expect(ctx.dryRun).to.be.undefined;
|
||||
});
|
||||
it('tag', async () => {
|
||||
const ctx = await getContext(['beta']);
|
||||
expect(ctx.version).to.eq('beta');
|
||||
expect(ctx.dryRun).to.be.undefined;
|
||||
});
|
||||
it('dry run', async () => {
|
||||
const ctx = await getContext(['--dry-run']);
|
||||
expect(ctx.dryRun).to.eq(true);
|
||||
});
|
||||
});
|
||||
7
packages/upgrade/test/fixtures/basic/package.json
vendored
Normal file
7
packages/upgrade/test/fixtures/basic/package.json
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"name": "@test/astro-upgrade-basic",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "1.0.0"
|
||||
}
|
||||
}
|
||||
211
packages/upgrade/test/install.test.js
Normal file
211
packages/upgrade/test/install.test.js
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
import { expect } from 'chai';
|
||||
import { setup } from './utils.js';
|
||||
import { install } from '../dist/index.js';
|
||||
|
||||
describe('install', () => {
|
||||
const fixture = setup();
|
||||
const ctx = {
|
||||
cwd: '',
|
||||
version: 'latest',
|
||||
packageManager: 'npm',
|
||||
dryRun: true,
|
||||
};
|
||||
|
||||
it('up to date', async () => {
|
||||
const context = {
|
||||
...ctx,
|
||||
packages: [
|
||||
{
|
||||
name: 'astro',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '1.0.0',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('◼ astro is up to date on v1.0.0')).to.be.true;
|
||||
});
|
||||
|
||||
it('patch', async () => {
|
||||
const context = {
|
||||
...ctx,
|
||||
packages: [
|
||||
{
|
||||
name: 'astro',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '1.0.1',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('● astro can be updated to v1.0.1')).to.be.true;
|
||||
});
|
||||
|
||||
it('minor', async () => {
|
||||
const context = {
|
||||
...ctx,
|
||||
packages: [
|
||||
{
|
||||
name: 'astro',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '1.2.0',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('● astro can be updated to v1.2.0')).to.be.true;
|
||||
});
|
||||
|
||||
it('major (reject)', async () => {
|
||||
let prompted = false;
|
||||
let exitCode;
|
||||
const context = {
|
||||
...ctx,
|
||||
prompt: () => {
|
||||
prompted = true;
|
||||
return { proceed: false };
|
||||
},
|
||||
exit: (code) => {
|
||||
exitCode = code;
|
||||
},
|
||||
packages: [
|
||||
{
|
||||
name: 'astro',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '2.0.0',
|
||||
isMajor: true,
|
||||
changelogTitle: 'CHANGELOG',
|
||||
changelogURL: 'https://example.com',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('▲ astro can be updated to v2.0.0')).to.be.true;
|
||||
expect(prompted).to.be.true;
|
||||
expect(exitCode).to.eq(0);
|
||||
expect(fixture.hasMessage('check Be sure to follow the CHANGELOG.')).to.be.false;
|
||||
});
|
||||
|
||||
it('major (accept)', async () => {
|
||||
let prompted = false;
|
||||
let exitCode;
|
||||
const context = {
|
||||
...ctx,
|
||||
prompt: () => {
|
||||
prompted = true;
|
||||
return { proceed: true };
|
||||
},
|
||||
exit: (code) => {
|
||||
exitCode = code;
|
||||
},
|
||||
packages: [
|
||||
{
|
||||
name: 'astro',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '2.0.0',
|
||||
isMajor: true,
|
||||
changelogTitle: 'CHANGELOG',
|
||||
changelogURL: 'https://example.com',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('▲ astro can be updated to v2.0.0')).to.be.true;
|
||||
expect(prompted).to.be.true;
|
||||
expect(exitCode).to.be.undefined;
|
||||
expect(fixture.hasMessage('check Be sure to follow the CHANGELOG.')).to.be.true;
|
||||
});
|
||||
|
||||
it('multiple major', async () => {
|
||||
let prompted = false;
|
||||
let exitCode;
|
||||
const context = {
|
||||
...ctx,
|
||||
prompt: () => {
|
||||
prompted = true;
|
||||
return { proceed: true };
|
||||
},
|
||||
exit: (code) => {
|
||||
exitCode = code;
|
||||
},
|
||||
packages: [
|
||||
{
|
||||
name: 'a',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '2.0.0',
|
||||
isMajor: true,
|
||||
changelogTitle: 'CHANGELOG',
|
||||
changelogURL: 'https://example.com',
|
||||
},
|
||||
{
|
||||
name: 'b',
|
||||
currentVersion: '6.0.0',
|
||||
targetVersion: '7.0.0',
|
||||
isMajor: true,
|
||||
changelogTitle: 'CHANGELOG',
|
||||
changelogURL: 'https://example.com',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('▲ a can be updated to v2.0.0')).to.be.true;
|
||||
expect(fixture.hasMessage('▲ b can be updated to v7.0.0')).to.be.true;
|
||||
expect(prompted).to.be.true;
|
||||
expect(exitCode).to.be.undefined;
|
||||
const [changelog, a, b] = fixture.messages().slice(-5);
|
||||
expect(changelog).to.match(/^check/);
|
||||
expect(a).to.match(/^a/);
|
||||
expect(b).to.match(/^b/);
|
||||
});
|
||||
|
||||
it('current patch minor major', async () => {
|
||||
let prompted = false;
|
||||
let exitCode;
|
||||
const context = {
|
||||
...ctx,
|
||||
prompt: () => {
|
||||
prompted = true;
|
||||
return { proceed: true };
|
||||
},
|
||||
exit: (code) => {
|
||||
exitCode = code;
|
||||
},
|
||||
packages: [
|
||||
{
|
||||
name: 'current',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '1.0.0',
|
||||
},
|
||||
{
|
||||
name: 'patch',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '1.0.1',
|
||||
},
|
||||
{
|
||||
name: 'minor',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '1.2.0',
|
||||
},
|
||||
{
|
||||
name: 'major',
|
||||
currentVersion: '1.0.0',
|
||||
targetVersion: '3.0.0',
|
||||
isMajor: true,
|
||||
changelogTitle: 'CHANGELOG',
|
||||
changelogURL: 'https://example.com',
|
||||
},
|
||||
],
|
||||
};
|
||||
await install(context);
|
||||
expect(fixture.hasMessage('◼ current is up to date on v1.0.0')).to.be.true;
|
||||
expect(fixture.hasMessage('● patch can be updated to v1.0.1')).to.be.true;
|
||||
expect(fixture.hasMessage('● minor can be updated to v1.2.0')).to.be.true;
|
||||
expect(fixture.hasMessage('▲ major can be updated to v3.0.0')).to.be.true;
|
||||
expect(prompted).to.be.true;
|
||||
expect(exitCode).to.be.undefined;
|
||||
expect(fixture.hasMessage('check Be sure to follow the CHANGELOG.')).to.be.true;
|
||||
const [changelog, major] = fixture.messages().slice(-4);
|
||||
expect(changelog).to.match(/^check/);
|
||||
expect(major).to.match(/^major/);
|
||||
});
|
||||
});
|
||||
52
packages/upgrade/test/utils.js
Normal file
52
packages/upgrade/test/utils.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import fs from 'node:fs';
|
||||
import { setStdout } from '../dist/index.js';
|
||||
import stripAnsi from 'strip-ansi';
|
||||
|
||||
export function setup() {
|
||||
const ctx = { messages: [] };
|
||||
before(() => {
|
||||
setStdout(
|
||||
Object.assign({}, process.stdout, {
|
||||
write(buf) {
|
||||
ctx.messages.push(stripAnsi(String(buf)).trim());
|
||||
return true;
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
beforeEach(() => {
|
||||
ctx.messages = [];
|
||||
});
|
||||
|
||||
return {
|
||||
messages() {
|
||||
return ctx.messages;
|
||||
},
|
||||
length() {
|
||||
return ctx.messages.length;
|
||||
},
|
||||
hasMessage(content) {
|
||||
return !!ctx.messages.find((msg) => msg.includes(content));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const resetBasicFixture = async () => {
|
||||
const packagePath = new URL('./fixtures/basic/package.json', import.meta.url);
|
||||
const packageJsonData = JSON.parse(
|
||||
await fs.promises.readFile(packagePath, { encoding: 'utf-8' })
|
||||
);
|
||||
const overriddenPackageJson = Object.assign(packageJsonData, {
|
||||
dependencies: {
|
||||
astro: '1.0.0',
|
||||
},
|
||||
});
|
||||
|
||||
return Promise.all([
|
||||
fs.promises.writeFile(packagePath, JSON.stringify(overriddenPackageJson, null, 2), {
|
||||
encoding: 'utf-8',
|
||||
}),
|
||||
]);
|
||||
};
|
||||
|
||||
export const resetFixtures = () => Promise.allSettled([resetBasicFixture()]);
|
||||
14
packages/upgrade/tsconfig.json
Normal file
14
packages/upgrade/tsconfig.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"include": ["src", "index.d.ts"],
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"emitDeclarationOnly": false,
|
||||
"noEmit": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "Bundler",
|
||||
"outDir": "./dist",
|
||||
"declarationDir": "./dist/types"
|
||||
}
|
||||
}
|
||||
15
packages/upgrade/upgrade.mjs
Executable file
15
packages/upgrade/upgrade.mjs
Executable file
|
|
@ -0,0 +1,15 @@
|
|||
#!/usr/bin/env node
|
||||
/* eslint-disable no-console */
|
||||
'use strict';
|
||||
|
||||
const currentVersion = process.versions.node;
|
||||
const requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);
|
||||
const minimumMajorVersion = 18;
|
||||
|
||||
if (requiredMajorVersion < minimumMajorVersion) {
|
||||
console.error(`Node.js v${currentVersion} is out of date and unsupported!`);
|
||||
console.error(`Please use Node.js v${minimumMajorVersion} or higher.`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
import('./dist/index.js').then(({ main }) => main());
|
||||
1643
pnpm-lock.yaml
generated
1643
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue