-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
getting basic astro-react demo working
- Loading branch information
1 parent
d06800f
commit 389b6c5
Showing
21 changed files
with
4,730 additions
and
2,309 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# 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/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
# Astro + React Example | ||
|
||
```sh | ||
npm create astro@latest -- --template framework-react | ||
``` | ||
|
||
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-react) | ||
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-react) | ||
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-react/devcontainer.json) | ||
|
||
This example showcases Astro working with [React](https://react.dev). | ||
|
||
Write your React components as `.jsx` or `.tsx` files in your project. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { defineConfig } from 'astro/config'; | ||
import react from '@astrojs/react'; | ||
|
||
// https://astro.build/config | ||
export default defineConfig({ | ||
// Enable React to support React JSX components. | ||
integrations: [react()], | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
{ | ||
"name": "astro-react-demo", | ||
"version": "0.0.1", | ||
"type": "module", | ||
"scripts": { | ||
"astro": "astro", | ||
"build": "astro check && astro build", | ||
"dev": "astro dev", | ||
"preview": "astro preview", | ||
"start": "astro dev" | ||
}, | ||
"dependencies": { | ||
"@astrojs/check": "^0.9.3", | ||
"@astrojs/react": "^3.6.2", | ||
"@formspree/react": "*", | ||
"@types/react": "^18.3.5", | ||
"@types/react-dom": "^18.3.0", | ||
"astro": "^4.15.3", | ||
"react": "^18.3.1", | ||
"react-dom": "^18.3.1", | ||
"typescript": "^5.5.4" | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
.contact-form { | ||
max-width: 500px; | ||
margin: 0 auto; | ||
padding: 20px; | ||
background-color: #f8f9fa; | ||
border-radius: 8px; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
} | ||
|
||
.contact-form h2 { | ||
text-align: center; | ||
color: #333; | ||
margin-bottom: 20px; | ||
} | ||
|
||
.contact-form label { | ||
display: block; | ||
margin-bottom: 5px; | ||
color: #555; | ||
} | ||
|
||
.contact-form input, | ||
.contact-form textarea { | ||
width: calc(100% - 20px); | ||
padding: 10px; | ||
margin-bottom: 15px; | ||
border: 1px solid #ddd; | ||
border-radius: 4px; | ||
font-size: 16px; | ||
} | ||
|
||
.contact-form textarea { | ||
height: 150px; | ||
resize: vertical; | ||
} | ||
|
||
.contact-form button { | ||
display: block; | ||
width: 100%; | ||
padding: 12px; | ||
background-color: #007bff; | ||
color: white; | ||
border: none; | ||
border-radius: 4px; | ||
font-size: 16px; | ||
cursor: pointer; | ||
transition: background-color 0.3s ease; | ||
} | ||
|
||
.contact-form button:hover { | ||
background-color: #0056b3; | ||
} | ||
|
||
.contact-form .error { | ||
color: #dc3545; | ||
font-size: 14px; | ||
margin-top: -10px; | ||
margin-bottom: 10px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import React from 'react'; | ||
import './ContactForm.css'; | ||
|
||
import { useForm, ValidationError } from '@formspree/react'; | ||
|
||
function ContactForm() { | ||
const [state, handleSubmit] = useForm("YOUR_FORM_ID"); | ||
|
||
if (state.succeeded) { | ||
return <p className="success-message">Thanks for your submission!</p>; | ||
} | ||
|
||
return ( | ||
<form onSubmit={handleSubmit} className="contact-form"> | ||
<label htmlFor="email" className="form-label"> | ||
Email Address | ||
</label> | ||
<input | ||
id="email" | ||
type="email" | ||
name="email" | ||
className="form-input" | ||
/> | ||
<ValidationError | ||
prefix="Email" | ||
field="email" | ||
errors={state.errors} | ||
className="error-message" | ||
/> | ||
<label htmlFor="message" className="form-label"> | ||
Message | ||
</label> | ||
<textarea | ||
id="message" | ||
name="message" | ||
className="form-textarea" | ||
/> | ||
<ValidationError | ||
prefix="Message" | ||
field="message" | ||
errors={state.errors} | ||
className="error-message" | ||
/> | ||
<button type="submit" disabled={state.submitting} className="submit-button"> | ||
Submit | ||
</button> | ||
</form> | ||
); | ||
} | ||
|
||
export default ContactForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.counter { | ||
display: grid; | ||
font-size: 2em; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
margin-top: 2em; | ||
place-items: center; | ||
} | ||
|
||
.counter-message { | ||
text-align: center; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { useState } from 'react'; | ||
import './Counter.css'; | ||
|
||
export default function Counter({ | ||
children, | ||
count: initialCount, | ||
}: { | ||
children: JSX.Element; | ||
count: number; | ||
}) { | ||
const [count, setCount] = useState(initialCount); | ||
const add = () => setCount((i) => i + 1); | ||
const subtract = () => setCount((i) => i - 1); | ||
|
||
return ( | ||
<> | ||
<div className="counter"> | ||
<button onClick={subtract}>-</button> | ||
<pre>{count}</pre> | ||
<button onClick={add}>+</button> | ||
</div> | ||
<div className="counter-message">{children}</div> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/// <reference path="../.astro/types.d.ts" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
--- | ||
// Component Imports | ||
import ContactForm from '../components/ContactForm'; | ||
// Full Astro Component Syntax: | ||
// https://docs.astro.build/basics/astro-components/ | ||
--- | ||
|
||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width" /> | ||
<meta name="generator" content={Astro.generator} /> | ||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | ||
<style> | ||
html, | ||
body { | ||
font-family: system-ui; | ||
margin: 0; | ||
} | ||
body { | ||
padding: 2rem; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<main> | ||
<ContactForm client:visible /> | ||
</main> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"extends": "astro/tsconfigs/strict", | ||
"compilerOptions": { | ||
"jsx": "react-jsx", | ||
"jsxImportSource": "react" | ||
} | ||
} |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
{ | ||
"name": "formspree-js", | ||
"private": true, | ||
"workspaces": [ | ||
"packages/*", | ||
|
@@ -8,7 +9,9 @@ | |
"build": "turbo run build", | ||
"changeset": "changeset", | ||
"clean": "turbo run clean && rm -rf node_modules", | ||
"dev": "turbo run dev", | ||
"dev": "echo \"dev what? See dev:??? scripts in package.json\"", | ||
"dev:astro-react": "turbo run dev watch --parallel --filter=astro-react-demo --filter=@formspree/react --filter=@formspree/core", | ||
"dev:react": "echo 'dev what? See dev:??? scripts in package.json'", | ||
"format": "prettier --write \"**/*.{ts,tsx,md}\"", | ||
"lint": "turbo run lint", | ||
"prepare": "husky install", | ||
|
@@ -40,5 +43,6 @@ | |
"tsup": "^6.2.2", | ||
"turbo": "latest", | ||
"typescript": "^5.1.3" | ||
} | ||
}, | ||
"packageManager": "[email protected]" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
# `formspree-astro` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"name": "formspree-astro", | ||
"version": "0.0.0", | ||
"private": true, | ||
"scripts": { | ||
"build": "echo 'Add build script here'", | ||
"dev": "echo 'Add dev script here'", | ||
"lint": "echo 'Add lint script here'", | ||
"test": "echo 'Add test script here'" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.