mariosant/mariosant.dev
1
0
Fork 0
Code Issues Pull Requests Actions Activity

remove alpinejs in favor of astro-navbar

Browse Source
This commit is contained in:
Surjith S M
2023-01-02 19:40:29 +05:30
parent 49d8294aaf
commit b5941f1a72
5 changed files with 94 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
astro.config.mjs
View File

@@ -1,26 +1,13 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
// https://astro.build/config
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
// https://astro.build/config
import alpinejs from "@astrojs/alpinejs";
// https://astro.build/config
import image from "@astrojs/image"; import image from "@astrojs/image";
// https://astro.build/config
import mdx from "@astrojs/mdx"; import mdx from "@astrojs/mdx";
// https://astro.build/config
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
// https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://astroship.web3templates.com", site: "https://astroship.web3templates.com",
integrations: [ integrations: [
tailwind(), tailwind(),
alpinejs(),
image({ image({
serviceEntryPoint: "@astrojs/image/sharp", serviceEntryPoint: "@astrojs/image/sharp",
}), }),

2
package.json
View File

@@ -18,10 +18,10 @@
"@astrojs/tailwind": "^2.1.1", "@astrojs/tailwind": "^2.1.1",
"@fontsource/inter": "^4.5.14", "@fontsource/inter": "^4.5.14",
"@types/alpinejs": "^3.0.0", "@types/alpinejs": "^3.0.0",
"alpinejs": "^3.0.0",
"astro": "^1.6.0", "astro": "^1.6.0",
"astro-feather-icons": "^1.0.2", "astro-feather-icons": "^1.0.2",
"astro-icon": "^0.8.0", "astro-icon": "^0.8.0",
"astro-navbar": "^1.0.1",
"astro-seo": "^0.6.0", "astro-seo": "^0.6.0",
"tailwindcss": "^3.0.24" "tailwindcss": "^3.0.24"
}, },

29
pnpm-lock.yaml generated
View File

@@ -9,26 +9,26 @@ specifiers:
'@fontsource/inter': ^4.5.14 '@fontsource/inter': ^4.5.14
'@tailwindcss/typography': ^0.5.7 '@tailwindcss/typography': ^0.5.7
'@types/alpinejs': ^3.0.0 '@types/alpinejs': ^3.0.0
alpinejs: ^3.0.0
astro: ^1.6.0 astro: ^1.6.0
astro-feather-icons: ^1.0.2 astro-feather-icons: ^1.0.2
astro-icon: ^0.8.0 astro-icon: ^0.8.0
astro-navbar: ^1.0.1
astro-seo: ^0.6.0 astro-seo: ^0.6.0
sharp: ^0.31.3 sharp: ^0.31.3
tailwindcss: ^3.0.24 tailwindcss: ^3.0.24
dependencies: dependencies:
'@astrojs/alpinejs': 0.1.2_epas4sveda2fzipjieohqzpxgq '@astrojs/alpinejs': 0.1.2_@types+alpinejs@3.7.1
'@astrojs/image': 0.11.0_sharp@0.31.3 '@astrojs/image': 0.11.0_sharp@0.31.3
'@astrojs/mdx': 0.11.5 '@astrojs/mdx': 0.11.5
'@astrojs/sitemap': 1.0.0 '@astrojs/sitemap': 1.0.0
'@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1 '@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1
'@fontsource/inter': 4.5.14 '@fontsource/inter': 4.5.14
'@types/alpinejs': 3.7.1 '@types/alpinejs': 3.7.1
alpinejs: 3.10.5
astro: 1.6.2 astro: 1.6.2
astro-feather-icons: 1.0.2 astro-feather-icons: 1.0.2
astro-icon: 0.8.0 astro-icon: 0.8.0
astro-navbar: 1.0.1
astro-seo: 0.6.0 astro-seo: 0.6.0
tailwindcss: 3.2.1 tailwindcss: 3.2.1
@@ -50,14 +50,13 @@ packages:
'@jridgewell/trace-mapping': 0.3.17 '@jridgewell/trace-mapping': 0.3.17
dev: false dev: false
/@astrojs/alpinejs/0.1.2_epas4sveda2fzipjieohqzpxgq: /@astrojs/alpinejs/0.1.2_@types+alpinejs@3.7.1:
resolution: {integrity: sha512-pcy+r7TTeFMbdZpRUuOYbf5L3ccFp107gH9j0Hdl5z8hmrSw9918pxkK1tiAcbwrQKxifv7nM5V5FJKu7SoJrw==} resolution: {integrity: sha512-pcy+r7TTeFMbdZpRUuOYbf5L3ccFp107gH9j0Hdl5z8hmrSw9918pxkK1tiAcbwrQKxifv7nM5V5FJKu7SoJrw==}
peerDependencies: peerDependencies:
'@types/alpinejs': ^3.0.0 '@types/alpinejs': ^3.0.0
alpinejs: ^3.0.0 alpinejs: ^3.0.0
dependencies: dependencies:
'@types/alpinejs': 3.7.1 '@types/alpinejs': 3.7.1
alpinejs: 3.10.5
dev: false dev: false
/@astrojs/compiler/0.23.5: /@astrojs/compiler/0.23.5:
@@ -786,22 +785,12 @@ packages:
vscode-uri: 2.1.2 vscode-uri: 2.1.2
dev: false 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: /@vue/reactivity/3.2.41:
resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==} resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==}
dependencies: dependencies:
'@vue/shared': 3.2.41 '@vue/shared': 3.2.41
dev: false dev: false
/@vue/shared/3.1.5:
resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
dev: false
/@vue/shared/3.2.41: /@vue/shared/3.2.41:
resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==} resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
dev: false dev: false
@@ -836,12 +825,6 @@ packages:
hasBin: true hasBin: true
dev: false 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: /ansi-align/3.0.1:
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
dependencies: dependencies:
@@ -921,6 +904,10 @@ packages:
svgo: 2.8.0 svgo: 2.8.0
dev: false dev: false
/astro-navbar/1.0.1:
resolution: {integrity: sha512-aDkBiczb1JHRBaysvMFOUvHnoMqU6GmGb6UgMrZ7UBFypTaBjyKsckSTdNEIb45JtjHmYNekKGAnHyoIqacczA==}
dev: false
/astro-seo/0.6.0: /astro-seo/0.6.0:
resolution: {integrity: sha512-nR+dJlAyQhX6s0oAmbBqPq3KCZax/zVAerFsclGiJQ2znOkS/7L+RGjziS4M9Q3OQxm3FMfqIKHp9Ns73Q81ww==} resolution: {integrity: sha512-nR+dJlAyQhX6s0oAmbBqPq3KCZax/zVAerFsclGiJQ2znOkS/7L+RGjziS4M9Q3OQxm3FMfqIKHp9Ns73Q81ww==}
dev: false dev: false

79
src/components/navbar/dropdown.astro
View File

@@ -1,42 +1,47 @@
--- ---
import { Dropdown, DropdownItems } from "astro-navbar";
const { title, lastItem, children } = Astro.props; const { title, lastItem, children } = Astro.props;
--- ---
<li @click.away="open = false" class="relative" x-data="{ open: false }"> <li class="relative">
<button <Dropdown class="group">
@click="open = !open" <button
class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900"> class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
<span>{title}</span> <span>{title}</span>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="3" stroke-width="3"
stroke="currentColor" stroke="currentColor"
class="w-3 h-3 mt-0.5" class="w-3 h-3 mt-0.5 group-open:rotate-180">
:class="{'rotate-180': open, 'rotate-0': !open}"> <path
<path stroke-linecap="round"
stroke-linecap="round" stroke-linejoin="round"
stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path> </svg>
</svg> </button>
</button> <DropdownItems>
<div <div
x-cloak class:list={[
x-show="open" "lg:absolute w-full lg:w-48",
class:list={[ lastItem
"lg:absolute w-full lg:w-48", ? "lg:right-0 origin-top-right"
lastItem ? "lg:right-0 origin-top-right" : "lg:left-0 origin-top-left", : "lg:left-0 origin-top-left",
]}> ]}>
<div <div
class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow lg:border flex flex-col"> class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow lg:border flex flex-col">
{ {
children.map((item) => ( children.map((item) => (
<a href={item.path} class="py-1 text-gray-600 hover:text-gray-900"> <a
{item.title} href={item.path}
</a> class="py-1 text-gray-600 hover:text-gray-900">
)) {item.title}
} </a>
</div> ))
</div> }
</div>
</div>
</DropdownItems>
</Dropdown>
</li> </li>

109
src/components/navbar/navbar.astro
View File

@@ -2,6 +2,7 @@
import Container from "@components/container.astro"; import Container from "@components/container.astro";
import Link from "@components/ui/link.astro"; import Link from "@components/ui/link.astro";
import Dropdown from "./dropdown.astro"; import Dropdown from "./dropdown.astro";
import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
const menuitems = [ const menuitems = [
{ {
@@ -33,74 +34,50 @@ const menuitems = [
--- ---
<Container> <Container>
<header <header class="flex flex-col lg:flex-row justify-between items-center my-5">
class="flex flex-col lg:flex-row justify-between items-center my-5" <Astronav>
x-data="{ open: false }" <div class="flex w-full lg:w-auto items-center justify-between">
x-init="$watch('open', value => console.log(value))"> <a href="/" class="text-lg"
<div class="flex w-full lg:w-auto items-center justify-between"> ><span class="font-bold text-slate-800">Astro</span><span
<a href="/" class="text-lg" class="text-slate-500">ship</span
><span class="font-bold text-slate-800">Astro</span><span >
class="text-slate-500">ship</span </a>
> <div class="block lg:hidden">
</a> <MenuIcon class="w-4 h-4 text-gray-800" />
<div class="block lg:hidden"> </div>
<button @click="open = !open" class="text-gray-800">
<svg
fill="currentColor"
class="w-4 h-4"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path
x-cloak
x-show="open"
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z"
></path>
<path
x-show="!open"
fill-rule="evenodd"
d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"
></path>
</svg>
</button>
</div> </div>
</div> <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
<nav <ul class="flex flex-col lg:flex-row lg:gap-3">
class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0" {
:class="{ 'block': open, 'hidden': !open }" menuitems.map((item, index) => (
x-transition> <>
<ul class="flex flex-col lg:flex-row lg:gap-3"> {item.children && (
{ <Dropdown
menuitems.map((item, index) => ( title={item.title}
<> children={item.children}
{item.children && ( lastItem={index === menuitems.length - 1}
<Dropdown />
title={item.title} )}
children={item.children}
lastItem={index === menuitems.length - 1}
/>
)}
{!item.children && ( {!item.children && (
<li> <li>
<a <a
href={item.path} href={item.path}
class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900"> class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
{item.title} {item.title}
</a> </a>
</li> </li>
)} )}
</> </>
)) ))
} }
</ul> </ul>
<div class="lg:hidden flex items-center mt-3 gap-4"> <div class="lg:hidden flex items-center mt-3 gap-4">
<Link href="#" style="muted" block size="md">Log in</Link> <Link href="#" style="muted" block size="md">Log in</Link>
<Link href="#" size="md" block>Sign up</Link> <Link href="#" size="md" block>Sign up</Link>
</div> </div>
</nav> </MenuItems>
</Astronav>
<div> <div>
<div class="hidden lg:flex items-center gap-4"> <div class="hidden lg:flex items-center gap-4">
<a href="#">Log in</a> <a href="#">Log in</a>