0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
This commit is contained in:
github-actions[bot] 2024-12-16 19:52:21 +00:00
commit ac343ba8a9
7 changed files with 122 additions and 0 deletions

1
.codesandbox/Dockerfile Normal file
View file

@ -0,0 +1 @@
FROM node:18-bullseye

21
.gitignore vendored Normal file
View file

@ -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/

40
README.md Normal file
View file

@ -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).

20
package.json Normal file
View file

@ -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"
}
}

16
src/app.ts Normal file
View file

@ -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);
},
});

17
src/integration.ts Normal file
View file

@ -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;

7
tsconfig.json Normal file
View file

@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
}
}