mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Sync from a44cfb874a
This commit is contained in:
commit
ac343ba8a9
7 changed files with 122 additions and 0 deletions
1
.codesandbox/Dockerfile
Normal file
1
.codesandbox/Dockerfile
Normal file
|
@ -0,0 +1 @@
|
|||
FROM node:18-bullseye
|
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal 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
40
README.md
Normal 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
20
package.json
Normal 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
16
src/app.ts
Normal 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
17
src/integration.ts
Normal 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
7
tsconfig.json
Normal file
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": "src"
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue