diff --git a/README.md b/README.md index bea6349..b012a8b 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,94 @@ -# Welcome to [Astro](https://astro.build) +# Astroship Starter Template 🛸 -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) +Astroship is a starter template for startups, marketing websites & landing pages. Built with Astro, TailwindCSS & Alpine.js -> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! +[Image] -![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) +## Installation +If you are reading this on github, you can click on the "Use this template" button above to create a new repository from astroship to your account. Then you can do a `git clone` to clone it to your local system. -## 🚀 Project Structure +Alternatively, you can clone the project directly from this repo to your local system. + +### 1. Clone the repo + +```bash +git clone https://github.com/surjithctly/astroship.git myProjectName +# or +git clone https://github.com/surjithctly/astroship.git . +``` + +The `.` will clone it to the current directory so make sure you are inside your project folder first. + +### 2. Install Dependencies + +```bash +npm install +# or +yarn install +# or (recommended) +pnpm install +``` + +### 3. Start development Server + +```bash +npm run dev +# or +yarn dev +# or (recommended) +pnpm dev +``` + +### Preview & Build + +```bash +npm run preview +npm run build +# or +yarn preview +yarn build +# or (recommended) +pnpm preview +pnpm build +``` + +We recommend using [pnpm](https://pnpm.io/) so save disk space on your computer. + +### Other Commands + +```bash +pnpm astro ... +pnpm astro add +pnpm astro --help +``` + +## Project Structure Inside of your Astro project, you'll see the following folders and files: ``` / ├── 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 +## TailwindCSS & Alpine.js -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:3000` | -| `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 preview` | -| `npm run astro --help` | Get help using the Astro CLI | +TailwindCSS & Alpine.js are already configured in this repo, so you can start using them without any installation. ## 👀 Want to learn more? -Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). +Feel free to check out [Astro Documentation](https://docs.astro.build) or jump into our [Discord Chat](https://web3templates.com/discord). diff --git a/astro.config.mjs b/astro.config.mjs index 3c1bbe1..eae6f38 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,7 +6,10 @@ import tailwind from "@astrojs/tailwind"; // https://astro.build/config import alpinejs from "@astrojs/alpinejs"; +// https://astro.build/config +import image from "@astrojs/image"; + // https://astro.build/config export default defineConfig({ - integrations: [tailwind(), alpinejs()] + integrations: [tailwind(), alpinejs(), image()] }); \ No newline at end of file diff --git a/package.json b/package.json index 3e6e8b7..79b5001 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ }, "dependencies": { "@astrojs/alpinejs": "^0.1.2", + "@astrojs/image": "^0.11.0", "@astrojs/tailwind": "^2.1.1", + "@fontsource/inter": "^4.5.14", "@types/alpinejs": "^3.0.0", "alpinejs": "^3.0.0", "astro": "^1.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d7bdead..0277d7e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,7 +2,9 @@ lockfileVersion: 5.4 specifiers: '@astrojs/alpinejs': ^0.1.2 + '@astrojs/image': ^0.11.0 '@astrojs/tailwind': ^2.1.1 + '@fontsource/inter': ^4.5.14 '@types/alpinejs': ^3.0.0 alpinejs: ^3.0.0 astro: ^1.6.0 @@ -10,7 +12,9 @@ specifiers: dependencies: '@astrojs/alpinejs': 0.1.2_epas4sveda2fzipjieohqzpxgq + '@astrojs/image': 0.11.0 '@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1 + '@fontsource/inter': 4.5.14 '@types/alpinejs': 3.7.1 alpinejs: 3.10.5 astro: 1.6.2 @@ -18,6 +22,10 @@ dependencies: packages: + /@altano/tiny-async-pool/1.0.2: + resolution: {integrity: sha512-qQzaI0TBUPdpjZ3qo5b2ziQY9MSNpbziH2ZrE5lvtUZL+kn9GwVuVJwoOubaoNkeDB+rqEefnpu1k+oMpOCYiw==} + dev: false + /@ampproject/remapping/2.2.0: resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==} engines: {node: '>=6.0.0'} @@ -44,6 +52,23 @@ packages: resolution: {integrity: sha512-D4qKnSQcOF32LgskeGnzq35N30yrITgrSaQrt/EIPU6ItcgcUr/K1BG07JCZdc+4mbfWF6RFQc7yPP9pS8Sg8w==} dev: false + /@astrojs/image/0.11.0: + resolution: {integrity: sha512-cWmqig0t4ndb+4v4YwuKJObpU9zWOVsNdEmvoEPPJUgtrrJzaxJYSRBe+pbvjP0xe+cQIk6fOKAq5lchK8VBzQ==} + peerDependencies: + sharp: '>=0.31.0' + peerDependenciesMeta: + sharp: + optional: true + dependencies: + '@altano/tiny-async-pool': 1.0.2 + http-cache-semantics: 4.1.0 + image-size: 1.0.2 + kleur: 4.1.5 + magic-string: 0.25.9 + mime: 3.0.0 + slash: 4.0.0 + dev: false + /@astrojs/language-server/0.26.2: resolution: {integrity: sha512-9nkfdd6CMXLDIJojnwbYu5XrYfOI+g63JlktOlpFCwFjFNpm1u0e/+pXXmj6Zs+PkSTo0kV1UM77dRKRS5OC1Q==} hasBin: true @@ -420,6 +445,10 @@ packages: dev: false optional: true + /@fontsource/inter/4.5.14: + resolution: {integrity: sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==} + dev: false + /@jridgewell/gen-mapping/0.1.1: resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==} engines: {node: '>=6.0.0'} @@ -1980,6 +2009,10 @@ packages: resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==} dev: false + /http-cache-semantics/4.1.0: + resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==} + dev: false + /human-signals/3.0.1: resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==} engines: {node: '>=12.20.0'} @@ -1989,6 +2022,14 @@ packages: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: false + /image-size/1.0.2: + resolution: {integrity: sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + queue: 6.0.2 + dev: false + /import-meta-resolve/2.1.0: resolution: {integrity: sha512-yG9pxkWJVTy4cmRsNWE3ztFdtFuYIV8G4N+cbCkO8b+qngkLyIUhxQFuZ0qJm67+0nUOxjMPT7nfksPKza1v2g==} dev: false @@ -3040,6 +3081,12 @@ packages: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: false + /queue/6.0.2: + resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==} + dependencies: + inherits: 2.0.4 + dev: false + /quick-lru/5.1.1: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} diff --git a/src/assets/hero.avif b/src/assets/hero.avif new file mode 100644 index 0000000..634d3fd Binary files /dev/null and b/src/assets/hero.avif differ diff --git a/src/components/hero.astro b/src/components/hero.astro new file mode 100644 index 0000000..48b755f --- /dev/null +++ b/src/components/hero.astro @@ -0,0 +1,30 @@ +--- +import { Image } from "@astrojs/image/components"; +import heroImage from "assets/hero.avif"; +import Link from "@components/ui/link.astro"; +--- + +
+
+

+ Marketing website done with Astro +

+

+ Astroship is a starter template for startups, marketing websites & landing + pages. Built with Astro.build, TailwindCSS & Alpine.js. You can quickly + create any website with this starter. +

+
+ Get Started + View Repo +
+
+
+ +
+
diff --git a/src/components/navbar/dropdown.astro b/src/components/navbar/dropdown.astro index a90ee86..0a75a3e 100644 --- a/src/components/navbar/dropdown.astro +++ b/src/components/navbar/dropdown.astro @@ -1,32 +1,42 @@ --- -const { title, children } = Astro.props; +const { title, lastItem, children } = Astro.props; --- -
-
-
- {children.map((item) =>
{item.title}
)} + class:list={[ + "lg:absolute w-full lg:w-48", + lastItem ? "lg:right-0 origin-top-right" : "lg:left-0 origin-top-left", + ]}> +
+ { + children.map((item) => ( + + {item.title} + + )) + }
-
+ diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro index dd51c33..182c131 100644 --- a/src/components/navbar/navbar.astro +++ b/src/components/navbar/navbar.astro @@ -1,5 +1,6 @@ --- import Container from "@components/container.astro"; +import Link from "@components/ui/link.astro"; import Dropdown from "./dropdown.astro"; const menuitems = [ @@ -25,41 +26,23 @@ const menuitems = [ path: "/blog", }, { - title: "Resources", - path: "#", - children: [ - { title: "Action", path: "#" }, - { title: "Another action", path: "#" }, - { title: "Dropdown Submenu", path: "#" }, - ], + title: "Contact", + path: "/contact", }, ]; ---
-
Astroship
- -
+
+ Astroship +
-
login +
+
+ +
+
diff --git a/src/components/ui/button.astro b/src/components/ui/button.astro new file mode 100644 index 0000000..07c0252 --- /dev/null +++ b/src/components/ui/button.astro @@ -0,0 +1,9 @@ +--- +const { ...rest } = Astro.props; +--- + + diff --git a/src/components/ui/link.astro b/src/components/ui/link.astro new file mode 100644 index 0000000..dedc99d --- /dev/null +++ b/src/components/ui/link.astro @@ -0,0 +1,31 @@ +--- +const { + href, + size = "lg", + style = "primary", + class: className, + ...rest +} = Astro.props; + +const sizes = { + lg: "px-5 py-2.5", +}; + +const styles = { + outline: "border-2 border-black hover:bg-black text-black hover:text-white", + primary: + "bg-black text-white hover:bg-slate-900 border-2 border-transparent", +}; +--- + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 604e89c..2416e34 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,8 @@ --- import Navbar from "@components/navbar/navbar.astro"; +import "@fontsource/inter/variable.css"; + export interface Props { title: string; } @@ -21,11 +23,15 @@ const { title } = Astro.props; diff --git a/src/pages/index.astro b/src/pages/index.astro index 719b2a2..ba18eab 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,82 +1,12 @@ --- import Card from "@components/Card.astro"; +import Container from "@components/container.astro"; +import Hero from "@components/hero.astro"; import Layout from "@layouts/Layout.astro"; --- -
-

Welcome to Astro

-

- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above. -

-
    - - - - -
-
+ + + - - diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f5368a7..da168f7 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,8 +1,13 @@ /** @type {import('tailwindcss').Config} */ +const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: {}, - }, - plugins: [], -} + content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], + theme: { + extend: { + fontFamily: { + sans: ["Inter", ...defaultTheme.fontFamily.sans], + }, + }, + }, + plugins: [], +};