-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
23 additions
and
41 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 |
---|---|---|
@@ -1,54 +1,36 @@ | ||
# Astro Starter Kit: Basics | ||
# Frontend Mentor - Designo agency website solution | ||
|
||
```sh | ||
npm create astro@latest -- --template basics | ||
``` | ||
 | ||
 | ||
|
||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) | ||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) | ||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) | ||
## Developed with | ||
|
||
> π§βπ **Seasoned astronaut?** Delete this file. Have fun! | ||
- Built with: | ||
- [Astro]([https://reactjs.org/](https://astro.build/)) - Web framework | ||
- [Styled Components](https://styled-components.com/) - For improved HTML | ||
- [Resend](https://resend.com/) - for sending email | ||
|
||
 | ||
## The challenge | ||
|
||
## π Project Structure | ||
Users should be able to: | ||
|
||
Inside of your Astro project, you'll see the following folders and files: | ||
- Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section | ||
- Receive an error message when the contact form is submitted if: | ||
- The Name, Email Address or Message fields are empty should show "This field is required" | ||
- The Email Address is not formatted correctly should show "Please use a valid email address" | ||
- View the optimal layout for the interface depending on their device's screen size | ||
- See hover and focus states for all interactive elements on the page | ||
|
||
```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. | ||
## Implementation | ||
The application uses standard html and css along with astro islands to enchance development of the ui. HTMX helped to reduce | ||
the amount of JavaScript that would had to be used otherwise for some transitions and http requests, such as the contact form. | ||
|
||
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. | ||
## Future Development | ||
|
||
## π§ Commands | ||
Potential future developments for the application include: | ||
|
||
All commands are run from the root of the project, from a terminal: | ||
- Possibly added pages for various content | ||
- More interactivity on pages such as the project page | ||
|
||
| 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). |