From ee30a40c1760dbb31ddf24015696c785accce7ae Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Wed, 2 Nov 2022 22:03:42 +0530 Subject: [PATCH] setting up navbar --- .prettierrc | 5 + astro.config.mjs | 5 +- package.json | 3 + pnpm-lock.yaml | 48 +++++++++ src/components/container.astro | 7 ++ src/components/navbar/dropdown.astro | 32 ++++++ src/components/navbar/navbar.astro | 87 ++++++++++++++++ src/layouts/Layout.astro | 46 ++++----- src/pages/about.astro | 14 ++- src/pages/index.astro | 149 ++++++++++++++------------- tsconfig.json | 19 +++- 11 files changed, 313 insertions(+), 102 deletions(-) create mode 100644 .prettierrc create mode 100644 src/components/container.astro create mode 100644 src/components/navbar/dropdown.astro create mode 100644 src/components/navbar/navbar.astro diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..42f85a1 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "useTabs": false, + "bracketSameLine": true +} \ No newline at end of file diff --git a/astro.config.mjs b/astro.config.mjs index 39d964c..3c1bbe1 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,7 +3,10 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config import tailwind from "@astrojs/tailwind"; +// https://astro.build/config +import alpinejs from "@astrojs/alpinejs"; + // https://astro.build/config export default defineConfig({ - integrations: [tailwind()] + integrations: [tailwind(), alpinejs()] }); \ No newline at end of file diff --git a/package.json b/package.json index fc5075b..3e6e8b7 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,10 @@ "astro": "astro" }, "dependencies": { + "@astrojs/alpinejs": "^0.1.2", "@astrojs/tailwind": "^2.1.1", + "@types/alpinejs": "^3.0.0", + "alpinejs": "^3.0.0", "astro": "^1.6.0", "tailwindcss": "^3.0.24" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2d6b292..d7bdead 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,12 +1,18 @@ lockfileVersion: 5.4 specifiers: + '@astrojs/alpinejs': ^0.1.2 '@astrojs/tailwind': ^2.1.1 + '@types/alpinejs': ^3.0.0 + alpinejs: ^3.0.0 astro: ^1.6.0 tailwindcss: ^3.0.24 dependencies: + '@astrojs/alpinejs': 0.1.2_epas4sveda2fzipjieohqzpxgq '@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1 + '@types/alpinejs': 3.7.1 + alpinejs: 3.10.5 astro: 1.6.2 tailwindcss: 3.2.1 @@ -20,6 +26,16 @@ packages: '@jridgewell/trace-mapping': 0.3.17 dev: false + /@astrojs/alpinejs/0.1.2_epas4sveda2fzipjieohqzpxgq: + resolution: {integrity: sha512-pcy+r7TTeFMbdZpRUuOYbf5L3ccFp107gH9j0Hdl5z8hmrSw9918pxkK1tiAcbwrQKxifv7nM5V5FJKu7SoJrw==} + peerDependencies: + '@types/alpinejs': ^3.0.0 + alpinejs: ^3.0.0 + dependencies: + '@types/alpinejs': 3.7.1 + alpinejs: 3.10.5 + dev: false + /@astrojs/compiler/0.23.5: resolution: {integrity: sha512-vBMPy9ok4iLapSyCCT1qsZ9dK7LkVFl9mObtLEmWiec9myGHS9h2kQY2xzPeFNJiWXUf9O6tSyQpQTy5As/p3g==} dev: false @@ -505,6 +521,12 @@ packages: '@types/estree': 1.0.0 dev: false + /@types/alpinejs/3.7.1: + resolution: {integrity: sha512-gzwyuHXH/meGQQhurMGWlZgMQxe18lMOoSPd7X6CvGoDelHte9EsU7SpTIoRu8yYir0tbHDeaSMdX9LeQz/QtA==} + dependencies: + '@vue/reactivity': 3.2.41 + dev: false + /@types/babel__core/7.1.19: resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==} dependencies: @@ -613,6 +635,26 @@ packages: vscode-uri: 2.1.2 dev: false + /@vue/reactivity/3.1.5: + resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==} + dependencies: + '@vue/shared': 3.1.5 + dev: false + + /@vue/reactivity/3.2.41: + resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==} + dependencies: + '@vue/shared': 3.2.41 + dev: false + + /@vue/shared/3.1.5: + resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==} + dev: false + + /@vue/shared/3.2.41: + resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==} + dev: false + /acorn-jsx/5.3.2_acorn@8.8.1: resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -646,6 +688,12 @@ packages: hasBin: true dev: false + /alpinejs/3.10.5: + resolution: {integrity: sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==} + dependencies: + '@vue/reactivity': 3.1.5 + dev: false + /ansi-align/3.0.1: resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} dependencies: diff --git a/src/components/container.astro b/src/components/container.astro new file mode 100644 index 0000000..b8ce53a --- /dev/null +++ b/src/components/container.astro @@ -0,0 +1,7 @@ +--- +const { class: className } = Astro.props; +--- + +
+ +
diff --git a/src/components/navbar/dropdown.astro b/src/components/navbar/dropdown.astro new file mode 100644 index 0000000..a90ee86 --- /dev/null +++ b/src/components/navbar/dropdown.astro @@ -0,0 +1,32 @@ +--- +const { title, children } = Astro.props; +--- + +
+ +
+
+ {children.map((item) =>
{item.title}
)} +
+
+
diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro new file mode 100644 index 0000000..dd51c33 --- /dev/null +++ b/src/components/navbar/navbar.astro @@ -0,0 +1,87 @@ +--- +import Container from "@components/container.astro"; +import Dropdown from "./dropdown.astro"; + +const menuitems = [ + { + title: "Features", + path: "#", + children: [ + { title: "Action", path: "#" }, + { title: "Another action", path: "#" }, + { title: "Dropdown Submenu", path: "#" }, + ], + }, + { + title: "Pricing", + path: "/pricing", + }, + { + title: "About", + path: "/about", + }, + { + title: "Blog", + path: "/blog", + }, + { + title: "Resources", + path: "#", + children: [ + { title: "Action", path: "#" }, + { title: "Another action", path: "#" }, + { title: "Dropdown Submenu", path: "#" }, + ], + }, +]; +--- + + +
+
Astroship
+ +
+
+ +
login +
+
+ diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f1a62a5..604e89c 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,8 @@ --- +import Navbar from "@components/navbar/navbar.astro"; + export interface Props { - title: string; + title: string; } const { title } = Astro.props; @@ -8,28 +10,22 @@ const { title } = Astro.props; - - - - - - {title} - - - - + + + + + + {title} {title && "|"} Astro Ship + + + + + + - diff --git a/src/pages/about.astro b/src/pages/about.astro index 09e16f3..ff8c71c 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1 +1,13 @@ -about +
about
+ +
+

+ Thank you for being an early customer. We are still working on our + collection of components & templates. It will take some time. + By buying early, you will get 50% discount on the original price + + all future updates for lifetime free! Sweet isn't it? It's a gift + for you. +

+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 412cc4a..719b2a2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,81 +1,82 @@ --- -import Layout from '../layouts/Layout.astro'; -import Card from '../components/Card.astro'; +import Card from "@components/Card.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. -

-
    - - - - -
-
+ +
+

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/tsconfig.json b/tsconfig.json index 1a46b47..e306986 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,3 +1,20 @@ { - "extends": "astro/tsconfigs/base" + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "baseUrl": "src", + "paths": { + "@lib/*": [ + "lib/*" + ], + "@utils/*": [ + "utils/*" + ], + "@components/*": [ + "components/*" + ], + "@layouts/*": [ + "layouts/*" + ], + } + } } \ No newline at end of file