commit ac343ba8a9403e78742b654b8143b449613645c4 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon Dec 16 19:52:21 2024 +0000 Sync from a44cfb874a6f066214e851c98a410d89c6866992 diff --git a/.codesandbox/Dockerfile b/.codesandbox/Dockerfile new file mode 100644 index 0000000000..c3b5c81a12 --- /dev/null +++ b/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18-bullseye diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..abe03335e7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# dependencies +node_modules/ + +# production build +dist + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/README.md b/README.md new file mode 100644 index 0000000000..8b879a01e5 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# Astro Starter Kit: Toolbar App + +```sh +npm create astro@latest -- --template toolbar-app +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/toolbar-app) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/toolbar-app) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/toolbar-app/devcontainer.json) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +/ +├── app.ts +├── integration.ts +└── package.json +``` + +The logic of your app is in the appropriately named `app.ts` file. This is where the vast majority of your toolbar app logic will live. + +The `integration.ts` file is a simple Astro integration file that will be used to add your app into the toolbar. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :-------------- | :------------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Watch for changes and build your app automatically | +| `npm run build` | Build your app to `./dist/` | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/package.json b/package.json new file mode 100644 index 0000000000..fc33d2a3ea --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "@example/toolbar-app", + "type": "module", + "version": "0.0.1", + "peerDependencies": { + "astro": "^4.6.1" + }, + "scripts": { + "build": "tsc", + "dev": "tsc --watch", + "prepublish": "npm run build" + }, + "exports": { + ".": "./dist/integration.js", + "./app": "./dist/app.js" + }, + "devDependencies": { + "astro": "^5.0.8" + } +} diff --git a/src/app.ts b/src/app.ts new file mode 100644 index 0000000000..72bd4772d7 --- /dev/null +++ b/src/app.ts @@ -0,0 +1,16 @@ +import { defineToolbarApp } from 'astro/toolbar'; + +// Guide: https://docs.astro.build/en/recipes/making-toolbar-apps/ +// API Reference: https://docs.astro.build/en/reference/dev-toolbar-app-reference/ +export default defineToolbarApp({ + init(canvas) { + const astroWindow = document.createElement('astro-dev-toolbar-window'); + + const text = document.createElement('p'); + text.textContent = 'Hello, Astro!'; + + astroWindow.append(text); + + canvas.append(astroWindow); + }, +}); diff --git a/src/integration.ts b/src/integration.ts new file mode 100644 index 0000000000..81597cf6ee --- /dev/null +++ b/src/integration.ts @@ -0,0 +1,17 @@ +import { fileURLToPath } from 'node:url'; +import type { AstroIntegration } from 'astro'; + +// API Reference: https://docs.astro.build/en/reference/integrations-reference/ +export default { + name: 'my-astro-integration', + hooks: { + 'astro:config:setup': ({ addDevToolbarApp }) => { + addDevToolbarApp({ + id: "my-toolbar-app", + name: "My Toolbar App", + icon: "🚀", + entrypoint: fileURLToPath(new URL('./app.js', import.meta.url)) + }); + }, + }, +} satisfies AstroIntegration; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000000..281fb7f925 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "outDir": "dist", + "rootDir": "src" + } +}