Skip to content

Commit 0ca4f30

Browse files
gvzqgvzq
committed
feat: Add SVG icon and update layout for improved branding and navigation
- Introduced a new SVG icon file for branding purposes. - Updated `layout.tsx` to include the new icon in metadata for better visual representation. - Refactored `navbar.jsx` to utilize a new `NavbarClient` component for cleaner code and dynamic ghost page links. - Enhanced `slug` layout with a new component for better structure and styling. - Updated image source in `imageCard.jsx` to use a local image for consistency.
1 parent d6b3e22 commit 0ca4f30

9 files changed

Lines changed: 92 additions & 54 deletions

File tree

‎app/[slug]/layout.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ReactNode } from "react";
2+
// import "../../globals.css";
3+
4+
export default function SlugLayout({ children }: { children: ReactNode }) {
5+
return (
6+
<div className="gh-article post">
7+
<div className="gh-canvas">{children}</div>
8+
</div>
9+
);
10+
}

‎app/[slug]/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export default async function GhostPage({ params }: PageProps) {
146146
);
147147

148148
return (
149-
<article className="gh-article post">
149+
<>
150150
{page.feature_image && (
151151
<div className="gh-article-image">
152152
<Image
@@ -159,15 +159,15 @@ export default async function GhostPage({ params }: PageProps) {
159159
</div>
160160
)}
161161

162-
<header className="gh-article-header gh-canvas">
162+
<header className="gh-article-header">
163163
<h1 className="gh-article-title">{page.title || "Untitled"}</h1>
164164
</header>
165165

166-
<div className="gh-content gh-canvas">
166+
<div className="gh-content">
167167
<div dangerouslySetInnerHTML={{ __html: page.html || "" }} />
168168
<NewsletterSignup />
169169
</div>
170-
</article>
170+
</>
171171
);
172172
} catch (error) {
173173
log.error({ slug, error }, "❌ Error rendering Ghost page");

‎app/icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/layout.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Metadata } from "next";
22
import { Inter, JetBrains_Mono } from "next/font/google";
3-
// import "./globals.css";
3+
import "./globals.css";
44
import "tailwindcss/tailwind.css";
55
import Script from "next/script";
66
import React from "react";
@@ -23,6 +23,10 @@ export const metadata: Metadata = {
2323
"Technical Consulting",
2424
"Austin, Texas",
2525
],
26+
icons: {
27+
icon: '/icon.svg',
28+
apple: '/icon.svg',
29+
},
2630
openGraph: {
2731
title: "Gerardo Vazquez - Fractional CTO & Product Expert",
2832
description:
@@ -64,7 +68,7 @@ export default function RootLayout({
6468
<nav>
6569
<Nav />
6670
</nav>
67-
<main className="flex-grow">{children}</main>
71+
<main className="flex-grow pt-20">{children}</main>
6872
<footer>
6973
<Footer />
7074
</footer>

‎components/imageCard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function ImageCard({ enableName = false }) {
1111
<div className="max-w-sm max-w-1/16 center">
1212
<Image
1313
className="object-cover rounded-full antialiased"
14-
src="https://media.licdn.com/dms/image/v2/D5603AQE5RlcowPwsvA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1729197145263?e=1756339200&v=beta&t=hTcexddfazYDlnM0aemv2eqmRaH1AFP_chKjpXosnzk"
14+
src="/gerardo.jpg"
1515
alt="Gerardo Vazquez"
1616
width={400}
1717
height={400}

‎components/navbar-client.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { Navbar, Button } from "flowbite-react";
5+
import { BsTelephone } from "react-icons/bs";
6+
import { usePathname } from "next/navigation";
7+
import BrandLogo from "./brand-logo";
8+
9+
export default function NavbarClient({ ghostPages }) {
10+
const path = usePathname();
11+
12+
return (
13+
<Navbar
14+
fluid
15+
rounded
16+
className="p-3 bg-slate rounded border-gray-200 dark:bg-gray-800 dark:border-gray-700"
17+
>
18+
<Navbar.Brand href="/">
19+
<BrandLogo />
20+
</Navbar.Brand>
21+
<div className="flex flex-1 justify-end md:order-2 px-3">
22+
<Button href="tel:+1(512)200-3641">
23+
<BsTelephone className="mr-2" />
24+
(512) 200-3641
25+
</Button>
26+
</div>
27+
<Navbar.Toggle />
28+
<Navbar.Collapse>
29+
<Navbar.Link href="/" active={path === "/" ? "active" : ""}>
30+
Home
31+
</Navbar.Link>
32+
<Navbar.Link
33+
href="/about"
34+
active={path.startsWith("/about") ? "active" : ""}
35+
>
36+
About
37+
</Navbar.Link>
38+
<Navbar.Link href="/consulting">Consulting</Navbar.Link>
39+
<Navbar.Link
40+
href="/blog"
41+
active={path.startsWith("/blog") ? "active" : ""}
42+
>
43+
Blog
44+
</Navbar.Link>
45+
{/* Dynamic Ghost Pages */}
46+
{ghostPages.map((page) => (
47+
<Navbar.Link
48+
key={page.id}
49+
href={`/${page.slug}`}
50+
active={path === `/${page.slug}` ? "active" : ""}
51+
>
52+
{page.title}
53+
</Navbar.Link>
54+
))}
55+
{/* <Navbar.Link href="#book-time">
56+
Projects
57+
</Navbar.Link>
58+
<Navbar.Link href="#contact">
59+
Contact
60+
</Navbar.Link> */}
61+
</Navbar.Collapse>
62+
</Navbar>
63+
);
64+
}

‎components/navbar.jsx‎

Lines changed: 6 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,13 @@
1-
"use client";
2-
31
import React from "react";
42
import { Navbar, Button } from "flowbite-react";
53
import { BsTelephone } from "react-icons/bs";
6-
import { usePathname } from "next/navigation";
74
import BrandLogo from "./brand-logo";
5+
import { getNonConflictingPages } from "@/lib/ghost";
6+
import NavbarClient from "./navbar-client";
87

9-
export default function Nav() {
10-
const path = usePathname();
8+
export default async function Nav() {
9+
// Fetch Ghost pages at build time/server-side
10+
const ghostPages = await getNonConflictingPages();
1111

12-
return (
13-
<Navbar
14-
fluid
15-
rounded
16-
className="p-3 bg-slate rounded border-gray-200 dark:bg-gray-800 dark:border-gray-700"
17-
>
18-
<Navbar.Brand href="/">
19-
<BrandLogo />
20-
</Navbar.Brand>
21-
<div className="flex flex-1 justify-end md:order-2 px-3">
22-
<Button href="tel:+1(512)200-3641">
23-
<BsTelephone className="mr-2" />
24-
(512) 200-3641
25-
</Button>
26-
</div>
27-
<Navbar.Toggle />
28-
<Navbar.Collapse>
29-
<Navbar.Link href="/" active={path === "/" ? "active" : ""}>
30-
Home
31-
</Navbar.Link>
32-
<Navbar.Link
33-
href="/about"
34-
active={path.startsWith("/about") ? "active" : ""}
35-
>
36-
About
37-
</Navbar.Link>
38-
<Navbar.Link href="/consulting">Consulting</Navbar.Link>
39-
<Navbar.Link
40-
href="/blog"
41-
active={path.startsWith("/blog") ? "active" : ""}
42-
>
43-
Blog
44-
</Navbar.Link>
45-
{/* <Navbar.Link href="#book-time">
46-
Projects
47-
</Navbar.Link>
48-
<Navbar.Link href="#contact">
49-
Contact
50-
</Navbar.Link> */}
51-
</Navbar.Collapse>
52-
</Navbar>
53-
);
12+
return <NavbarClient ghostPages={ghostPages} />;
5413
}

‎public/gerardo.jpg‎

752 KB
Loading

‎public/logo.png‎

1.08 MB
Loading

0 commit comments

Comments
 (0)