Add Astro demo (#202)

onlook-dev · Aug 22, 2024 · f46acfd · f46acfd
1 parent 6a4b0a1
commit f46acfd
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 1 deletion.
diff --git a/demos/astro/.gitignore b/demos/astro/.gitignore
@@ -0,0 +1,27 @@
+# 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
+
+# jetbrains setting folder
+.idea/
+
+# vscode setting folder
+.vscode/
diff --git a/demos/astro/README.md b/demos/astro/README.md
@@ -0,0 +1,43 @@
+# Onlook supports Astro + React projects!
+
+This project a template/demo that showcases how you can edit your Astro project with Onlook.
+
+The steps to do this are:
+
+1. install the React integration
+
+```bash
+npx astro add react
+```
+
+2. Install the Onlook babel plugin
+```bash
+npm install --save-dev @onlook/babel-plugin-react
+```
+
+3. Update the `astro.config.mjs` to the following:
+
+```js
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+
+export default defineConfig({
+ server: {
+ port: 3000,
+ },
+ integrations: [
+ // ... your existing integrations
+ react({
+ babel: {
+ plugins: ["@onlook/babel-plugin-react"],
+ },
+ }),
+ ],
+});
+```
+
+Start your dev server and open the onlook application, you can make changes to the react components in your app.
+
+```bash
+npm run dev
+```
diff --git a/demos/astro/astro.config.mjs b/demos/astro/astro.config.mjs
@@ -0,0 +1,16 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+ server: {
+ port: 3000
+ },
+ integrations: [react({
+ babel: {
+ plugins: ["@onlook/babel-plugin-react"]
+ }
+ }), tailwind()]
+});
diff --git a/demos/astro/bun.lockb b/demos/astro/bun.lockb
diff --git a/demos/astro/package.json b/demos/astro/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "astro",
+ "type": "module",
+ "version": "0.0.1",
+ "scripts": {
+ "dev": "astro dev",
+ "start": "astro dev",
+ "build": "astro check && astro build",
+ "preview": "astro preview",
+ "astro": "astro"
+ },
+ "dependencies": {
+ "@astrojs/check": "^0.9.3",
+ "@astrojs/react": "^3.6.2",
+ "@astrojs/tailwind": "^5.1.0",
+ "@types/react": "^18.3.4",
+ "@types/react-dom": "^18.3.0",
+ "astro": "^4.14.4",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "tailwindcss": "^3.4.10",
+ "typescript": "^5.5.4"
+ },
+ "devDependencies": {
+ "@onlook/babel-plugin-react": "^2.1.0"
+ }
+}
diff --git a/demos/astro/public/favicon.svg b/demos/astro/public/favicon.svg
diff --git a/demos/astro/src/components/Example.tsx b/demos/astro/src/components/Example.tsx
@@ -0,0 +1,7 @@
+export default function Example() {
+ return (
+ <div className="w-screen h-screen bg-white flex items-center justify-center">
+ <button className="text-xl font-bold">Hello world!</button>
+ </div>
+ );
+}
diff --git a/demos/astro/src/env.d.ts b/demos/astro/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
diff --git a/demos/astro/src/pages/index.astro b/demos/astro/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import Example from "../components/Example"
+---
+
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <meta name="viewport" content="width=device-width" />
+ <meta name="generator" content={Astro.generator} />
+ <title>Astro</title>
+ </head>
+ <body>
+ <Example />
+ </body>
+</html>
diff --git a/demos/astro/tailwind.config.mjs b/demos/astro/tailwind.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/demos/astro/tsconfig.json b/demos/astro/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "react"
+ }
+}
diff --git a/demos/remix/README.md b/demos/remix/README.md
@@ -5,7 +5,7 @@ This project a template/demo that showcases how you can edit your Remix project
 The steps to do this are
 1. install the Vite plugin for React project and the Onlook Babel transform:
 ```bash
-npm install @vitejs/plugin-react @onlook/babel-plugin-react 
+npm install --save-dev @vitejs/plugin-react @onlook/babel-plugin-react 
 ```
 
 The Onlook Babel transform adds metadata to JSX elements, which makes it possible for Onlook to modify them.