Skip to content

feat: add SEO for home, dashboard, and event pages #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
runzhao3 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: add SEO for home, dashboard, and event pages #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e92a840
feat: add next-seo package
runzhao3 Aug 29, 2023
af15f3d
feat: add SEO for home, dashboard, and event pages
runzhao3 Aug 29, 2023
f64c929
keep updated with the main branch
runzhao3 Sep 17, 2023
38d7cdc
Avoided advertising for WhenToMeet
runzhao3 Sep 17, 2023
ba5c02b
add fav icon and changed og path & name
runzhao3 Sep 18, 2023
2b8757d
changed fav_icon to be github para icon
runzhao3 Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"date-fns-tz": "^2.0.0",
"next": "13.1.6",
"next-auth": "^4.22.1",
"next-seo": "^6.1.0",
"nodemailer": "^6.9.2",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
15 changes: 15 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/fav_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added public/og-image-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 33 additions & 29 deletions src/pages/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { NewEventCard } from "../components/section/NewEventCard";
import { useIsMobile } from "../utils/hooks";
import { ScreenLoading } from "../components/ui/ScreenLoading";
import Footer from "../components/section/Footer";
import { NextSeo } from "next-seo";

const Dashboard: NextPage = () => {
const { data: session, status } = useSession();
Expand All @@ -26,41 +27,44 @@ const Dashboard: NextPage = () => {
}

return (
<div className="flex min-h-screen w-screen flex-col bg-gray-100">
<Navbar />
<div className="flex grow justify-center px-4 py-8 md:px-12">
<div className="flex h-full w-full max-w-[1200px] flex-row gap-8">
<div className="flex h-full flex-grow flex-col">
<div className="mb-4 flex flex-row items-center justify-between">
<div className="text-2xl font-bold">Recent Events</div>
<div
className="primary-button cursor-pointer text-sm md:hidden"
onClick={() => setShowWizard(!showWizard)}
>
New / Join
<>
<NextSeo title="Dashboard | Parachute" />
<div className="flex min-h-screen w-screen flex-col bg-gray-100">
<Navbar />
<div className="flex grow justify-center px-4 py-8 md:px-12">
<div className="flex h-full w-full max-w-[1200px] flex-row gap-8">
<div className="flex h-full flex-grow flex-col">
<div className="mb-4 flex flex-row items-center justify-between">
<div className="text-2xl font-bold">Recent Events</div>
<div
className="primary-button cursor-pointer text-sm md:hidden"
onClick={() => setShowWizard(!showWizard)}
>
New / Join
</div>
</div>
<EventList />
</div>
<EventList />
</div>
{!isMobile ? (
<div className="flex h-full flex-col">
<div className="mb-4 text-2xl font-bold">Add Event</div>
<NewEventCard />
</div>
) : (
showWizard && (
<div
className="fixed left-0 top-0 z-50 flex h-screen w-screen flex-row items-start justify-center bg-black bg-opacity-50 p-4 pt-20"
onClick={() => setShowWizard(false)}
>
{!isMobile ? (
<div className="flex h-full flex-col">
<div className="mb-4 text-2xl font-bold">Add Event</div>
<NewEventCard />
</div>
)
)}
) : (
showWizard && (
<div
className="fixed left-0 top-0 z-50 flex h-screen w-screen flex-row items-start justify-center bg-black bg-opacity-50 p-4 pt-20"
onClick={() => setShowWizard(false)}
>
<NewEventCard />
</div>
)
)}
</div>
</div>
<Footer />
</div>
<Footer />
</div>
</>
);
};

Expand Down
51 changes: 35 additions & 16 deletions src/pages/event/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ import { OperationCard } from "../../components/section/OperationCard";
import Footer from "../../components/section/Footer";
import { ScreenLoading } from "../../components/ui/ScreenLoading";
import { PrismaClient } from "@prisma/client";
import {NextSeo} from "next-seo";

interface EventPageProps {
name: string;
}

export const getStaticPaths: GetStaticPaths = () => {
return {
Expand All @@ -18,26 +23,30 @@ export const getStaticPaths: GetStaticPaths = () => {

const prisma = new PrismaClient();

export const getStaticProps: GetStaticProps = async (ctx) => {
const count = await prisma.event.count({
export const getStaticProps: GetStaticProps<EventPageProps> = async (ctx) => {
const event = await prisma.event.findUnique({
where: {
id: (ctx.params?.id as string) ?? "",
},
});

if (count === 0) {
if (event === null) {
return {
notFound: true,
};
}

return {
props: {},
props: {
name: event.name,
},
revalidate: 10,
};
};

const EventPage: NextPage = () => {
const EventPage: NextPage<EventPageProps> = ({
name,
}) => {
const { data: session, status } = useSession();

if (status === "loading") {
Expand All @@ -46,21 +55,31 @@ const EventPage: NextPage = () => {

if (!session) {
return (
<div className="flex min-h-screen w-screen flex-col">
<Navbar />
<LogInCard />
<Footer />
</div>
<>
<NextSeo
title={`${name} | Parachute`}
/>
<div className="flex min-h-screen w-screen flex-col">
<Navbar />
<LogInCard />
<Footer />
</div>
</>
);
}

return (
<div className="flex min-h-screen w-screen flex-col bg-gray-100">
<Navbar />
<EventInfoHeader />
<OperationCard />
<Footer />
</div>
<>
<NextSeo
title={`${name} | Parachute`}
/>
<div className="flex min-h-screen w-screen flex-col bg-gray-100">
<Navbar />
<EventInfoHeader />
<OperationCard />
<Footer />
</div>
</>
);
};

Expand Down
93 changes: 65 additions & 28 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
import Footer from "../components/section/Footer";
import { getServerSession } from "next-auth";
import { authOptions } from "../server/auth";
import { NextSeo } from "next-seo";
import Head from 'next/head';

export const getServerSideProps: GetServerSideProps = async (ctx) => {
const session = await getServerSession(ctx.req, ctx.res, authOptions);
Expand All @@ -32,39 +34,74 @@ const Home: NextPage = () => {
const { angle, ref } = useElementMouseRelativeAngle();

return (
<div className="flex h-screen w-screen flex-col">
<Navbar />
<div className="flex w-screen grow flex-col items-center justify-center gap-16 p-12 md:flex-row xl:gap-32">
<div className="flex w-full flex-col items-center justify-center gap-4 md:w-[300px] md:items-start">
<div className="text-5xl font-bold">🪂</div>
<div className="text-5xl font-bold">when2meet</div>
<div className="text-orange-elevated mt-[-4px] text-6xl font-bold">
Elevated
</div>
<div className="mt-2 text-gray-500">
Open-source, easy-to-use, free forever
</div>
</div>
<div
ref={ref}
className="bg-colorful drop-shadow-pink h-[250px] w-full rounded-[8px] p-[2px] sm:max-w-[350px]"
style={
<>
<Head>
<link rel="icon" href="/public/fav_icon.png" />
Copy link
Copy Markdown
Member

@louisunlimited louisunlimited Oct 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need /public here as per above 🍡

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
<meta property="twitter:image" content="https://parachute.fyi/public/og-image-icon.png" />
<meta property="twitter:title" content="Parachute" />
<meta property="twitter:description"
content="A multi-user scheduling platform with enhanced features, providing an unparalleled experience compared to traditional web apps." />
</Head>
<NextSeo
Comment thread
runzhao3 marked this conversation as resolved.
title="Parachute"
description="A modern multi-user scheduling web application that is open-source, easy-to-use, and free forever.
Achieved effortless retrieval of all previous activity records, secured login with single sign-on services,
enhanced data privacy, and elevated user experience compared with original when2meet."
canonical = "https://parachute.fyi"
themeColor="#ffa36d"
openGraph={{
url: "https://parachute.fyi",
title: "Parachute",
description:
"A modern multi-user scheduling web application that is open-source, easy-to-use, and free forever.",
images: [
{
"--colorful-bg-degree": `${angle - 90}deg`,
} as React.CSSProperties
}
>
<div className="flex h-full w-full flex-col items-center justify-center gap-4 rounded-[6px] bg-white p-8">
<div className="mb-2 text-sm text-gray-500">
Try Parachute right now
url: "https://parachute.fyi/og-image-1.png",
width: 1200,
height: 630,
alt: "Parachute SEO Image",
},
],
site_name: "Parachute",
type: "website",
locale: "en_US",
}}
Comment thread
louisunlimited marked this conversation as resolved.
/>
<div className="flex h-screen w-screen flex-col">
<Navbar />
<div className="flex w-screen grow flex-col items-center justify-center gap-16 p-12 md:flex-row xl:gap-32">
<div className="flex w-full flex-col items-center justify-center gap-4 md:w-[300px] md:items-start">
<div className="text-5xl font-bold">🪂</div>
<div className="text-5xl font-bold">when2meet</div>
<div className="text-orange-elevated mt-[-4px] text-6xl font-bold">
Elevated
</div>
<div className="mt-2 text-gray-500">
Open-source, easy-to-use, free forever
</div>
</div>
<div
ref={ref}
className="bg-colorful drop-shadow-pink h-[250px] w-full rounded-[8px] p-[2px] sm:max-w-[350px]"
style={
{
"--colorful-bg-degree": `${angle - 90}deg`,
} as React.CSSProperties
}
>
<div className="flex h-full w-full flex-col items-center justify-center gap-4 rounded-[6px] bg-white p-8">
<div className="mb-2 text-sm text-gray-500">
Try Parachute right now
</div>
<GoogleLoginButton />
<Auth0LoginButton />
</div>
<GoogleLoginButton />
<Auth0LoginButton />
</div>
</div>
<Footer />
</div>
<Footer />
</div>
</>
);
};

Expand Down