feat: add astro sample app (#1982)

* feat(apps/astro): init astro apps

* chore: override react

* fix: mv launch.json

* fix: move vscode/extentions.json

* feat: format

.github/labels.yaml

@@ -1,115 +1,92 @@
--
-  name: duplicate
+- name: duplicate
   color: ededed
-  description: 'This issue or Pull Request already exists'
+  description: "This issue or Pull Request already exists"
   aliases: []
--
-  name: 'good first issue'
+- name: "good first issue"
   color: 7057ff
-  description: 'Good for newcomers'
+  description: "Good for newcomers"
   aliases: []
--
-  name: 'help wanted'
+- name: "help wanted"
   color: e99695
-  description: 'Extra attention is needed'
+  description: "Extra attention is needed"
   aliases: []
--
-  name: 'Status: Abandoned'
-  color: '000000'
-  description: 'The issue or Pull Request is wontfix'
+- name: "Status: Abandoned"
+  color: "000000"
+  description: "The issue or Pull Request is wontfix"
   aliases: []
--
-  name: 'Status: Blocked'
+- name: "Status: Blocked"
   color: ee0701
-  description: 'Progress on the issue is Blocked'
+  description: "Progress on the issue is Blocked"
   aliases: []
--
-  name: 'Status: In Progress'
+- name: "Status: In Progress"
   color: cccccc
-  description: 'Work in Progress'
+  description: "Work in Progress"
   aliases: []
--
-  name: 'Status: Need More Info'
+- name: "Status: Need More Info"
   color: F9C90A
-  description: 'Lacks enough info to make progress'
+  description: "Lacks enough info to make progress"
   aliases: []
--
-  name: 'Status: PR Welcome'
-  color: '2E7733'
-  description: 'Welcome to Pull Request'
+- name: "Status: PR Welcome"
+  color: "2E7733"
+  description: "Welcome to Pull Request"
   aliases: []
--
-  name: 'Status: Proposal'
+- name: "Status: Proposal"
   color: d4c5f9
-  description: 'Request for comments'
+  description: "Request for comments"
   aliases: []
--
-  name: 'Status: Review Needed'
+- name: "Status: Review Needed"
   color: fbca04
-  description: 'Request for review comments'
+  description: "Request for review comments"
   aliases: []
--
-  name: 'Type: Breaking Change'
+- name: "Type: Breaking Change"
   color: b60205
-  description: 'Includes breaking changes'
+  description: "Includes breaking changes"
   aliases: []
--
-  name: 'Type: Bug'
+- name: "Type: Bug"
   color: ee0701
-  description: 'Bug or Bug fixes'
+  description: "Bug or Bug fixes"
   aliases: []
--
-  name: 'Type: CI'
+- name: "Type: CI"
   color: ffd412
-  description: 'Changes to CI configuration files and scripts'
+  description: "Changes to CI configuration files and scripts"
   aliases: []
--
-  name: 'Type: Dependencies'
+- name: "Type: Dependencies"
   color: 0366d6
-  description: 'Dependency issues or Changes to dependency files'
+  description: "Dependency issues or Changes to dependency files"
   aliases: []
--
-  name: 'Type: Documentation'
+- name: "Type: Documentation"
   color: 0e8a16
-  description: 'Documentation only changes'
+  description: "Documentation only changes"
   aliases: []
--
-  name: 'Type: Feature'
+- name: "Type: Feature"
   color: 1d76db
-  description: 'New Feature'
+  description: "New Feature"
   aliases: []
--
-  name: 'Type: Maintenance'
+- name: "Type: Maintenance"
   color: abd406
-  description: 'Repository Maintenance'
+  description: "Repository Maintenance"
   aliases: []
--
-  name: 'Type: Meta'
+- name: "Type: Meta"
   color: BFD4F2
-  description: 'Type: Meta - Related to repository itself'
+  description: "Type: Meta - Related to repository itself"
   aliases: []
--
-  name: 'Type: Question'
+- name: "Type: Question"
   color: cc317c
-  description: 'Further information is requested'
+  description: "Further information is requested"
   aliases: []
--
-  name: 'Type: Refactoring'
+- name: "Type: Refactoring"
   color: fbca04
-  description: 'A code change that neither fixes a bug nor adds a feature'
+  description: "A code change that neither fixes a bug nor adds a feature"
   aliases: []
--
-  name: 'Type: Release'
-  color: '5319E7'
-  description: 'Related to release process'
+- name: "Type: Release"
+  color: "5319E7"
+  description: "Related to release process"
   aliases: []
--
-  name: 'Type: Security'
+- name: "Type: Security"
   color: ee0701
-  description: 'Vulnerability disclosure or Fixing security issue'
+  description: "Vulnerability disclosure or Fixing security issue"
   aliases: []
--
-  name: 'Type: Testing'
-  color: '257759'
-  description: 'Adding missing tests or correcting existing tests'
+- name: "Type: Testing"
+  color: "257759"
+  description: "Adding missing tests or correcting existing tests"
   aliases: []

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
--   repo: https://github.com/biomejs/pre-commit
+  - repo: https://github.com/biomejs/pre-commit
     rev: "v0.1.0"
     hooks:
-    -   id: biome-check
+      - id: biome-check
         additional_dependencies: ["@biomejs/[email protected]"]

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+  "recommendations": [
+    "tauri-apps.tauri-vscode",
+    "rust-lang.rust-analyzer",
+    "astro-build.astro-vscode"
+  ],
+  "unwantedRecommendations": []
 }

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/static/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/static/README.md

@@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

apps/static/astro.config.mjs

@@ -0,0 +1,9 @@
+import preact from "@astrojs/preact";
+import { defineConfig } from "astro/config";
+
+/**
+ * @type {import('astro/types').Config}
+ */
+export default defineConfig({
+  integrations: [preact()],
+});

apps/static/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "static",
+  "private": true,
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "test": "tsc -p . --noEmit",
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.4.1",
+    "@astrojs/preact": "^3.1.0",
+    "astro": "^4.2.1",
+    "typescript": "^5.3.3"
+  },
+  "overrides": {
+    "react": "npm:@preact/compat@latest",
+    "react-dom": "npm:@preact/compat@latest"
+  }
+}

apps/static/src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+  title: string;
+  body: string;
+  href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+  <a href={href}>
+    <h2>
+      {title}
+      <span>&rarr;</span>
+    </h2>
+    <p>
+      {body}
+    </p>
+  </a>
+</li>
+<style>
+  .link-card {
+    list-style: none;
+    display: flex;
+    padding: 1px;
+    background-color: #23262d;
+    background-image: none;
+    background-size: 400%;
+    border-radius: 7px;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+  .link-card > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: white;
+    background-color: #23262d;
+    opacity: 0.8;
+  }
+  h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+  .link-card:is(:hover, :focus-within) {
+    background-position: 0;
+    background-image: var(--accent-gradient);
+  }
+  .link-card:is(:hover, :focus-within) h2 {
+    color: rgb(var(--accent-light));
+  }
+</style>

apps/static/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />