Skip to content

Commit

Permalink
Modify Home page as SEO Friendly
Browse files Browse the repository at this point in the history
  • Loading branch information
Akash Singh committed Jul 16, 2024
1 parent ac88ba6 commit 6ee69a5
Show file tree
Hide file tree
Showing 13 changed files with 295 additions and 222 deletions.
63 changes: 35 additions & 28 deletions documentation/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,24 @@ import React from "react";

import { CommonLayout } from "../prepverse-theme/common-layout";
import { CommonHeader } from "../prepverse-theme/common-header";
import { LandingExplorePrepVerse } from "../prepverse-theme/landing-explore-prepverse";
import { LandingFooter } from "../prepverse-theme/landing-footer";
import { LandingHero } from "../prepverse-theme/landing-hero";
import { GithubIcon } from "@site/src/prepverse-theme/icons/github";
import { TwitterIcon, LinkedInIcon, InstagramIcon } from "@site/src/prepverse-theme/icons/popover";
import { useColorMode } from "@docusaurus/theme-common";

function Home() {
const title = "PrepVerse";
const title = "PrepVerse | Comprehensive Computer Science Resources";
const metaDescription = "Explore PrepVerse for a wide range of computer science resources. Access study guides, tutorials, and practice tests to enhance your knowledge and skills.";
return (
<>
<Head>
<html data-active-page="index" />
<title>{title}</title>
<meta name="description" content={metaDescription} />
<meta property="og:title" content={title} />
<meta property="og:description" content={metaDescription} />
<link
rel="preload"
href="https://prepverse.github.io"
Expand All @@ -39,6 +43,8 @@ function Home() {
>
<LandingHero />
</div>
<LandingExplorePrepVerse />
<div className="h-[48px] landing-lg:h-[80px]" />
<About />
<div className="h-[96px] landing-lg:h-[160px]" />
<LandingFooter />
Expand All @@ -52,17 +58,18 @@ const About: React.FC = () => {
const { colorMode } = useColorMode();
return (
<div>
<div
<h2
className={clsx(
"max-w-[344px] sm:max-w-[620px] lg:max-w-[944px] mx-auto",
"text-start lg:text-center",
"text-[32px] leading-[40px] font-bold",
// "text-gray-0 dark:text-gray-300",
"text-gray-700 dark:text-gray-300",
"dark:text-refine-cyan-alt dark:drop-shadow-[0_0_30px_rgba(71,235,235,0.25)]",
"text-refine-blue drop-shadow-[0_0_30px_rgba(0,128,255,0.3)]",
)}
>
My Social Network Profiles
</div>
</h2>
<div className={clsx(
"no-prose",
"flex flex-wrap gap-4 justify-center items-center",
Expand All @@ -73,7 +80,7 @@ const About: React.FC = () => {
href="https://github.com/AkashSingh3031"
className={clsx(
"flex h-max flex-row justify-start gap-3",
"dark:bg-gray-900",
"dark:bg-gray-900 bg-gray-100",
"border border-gray-200 dark:border-gray-700",
"rounded-xl p-4",
"no-underline hover:no-underline",
Expand All @@ -89,13 +96,13 @@ const About: React.FC = () => {
/>
</div>
<div className="text-xs md:text-base">
<div className="mb-0 text-gray-500 dark:text-gray-400">
<h3 className="mb-0 text-gray-500 dark:text-gray-400">
Visit our
</div>
<div className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <div className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
</h3>
<h3 className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <h3 className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
GitHub Profile
</div>
</h3>
</div>
</a>
<a
Expand All @@ -104,7 +111,7 @@ const About: React.FC = () => {
rel="noreferrer"
className={clsx(
"flex h-max flex-row justify-start gap-3",
"dark:bg-gray-900",
"dark:bg-gray-900 bg-gray-100",
"border border-gray-200 dark:border-gray-700",
"p-4 rounded-xl",
"no-underline hover:no-underline",
Expand All @@ -118,13 +125,13 @@ const About: React.FC = () => {
/>
</div>
<div className="text-xs md:text-base">
<div className="mb-0 text-gray-500 dark:text-gray-400">
<h3 className="mb-0 text-gray-500 dark:text-gray-400">
Follow me on
</div>
<div className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <div className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
</h3>
<h3 className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <h3 className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
LinkedIn
</div>
</h3>
</div>
</a>
<a
Expand All @@ -133,7 +140,7 @@ const About: React.FC = () => {
rel="noreferrer"
className={clsx(
"flex h-max flex-row justify-start gap-3",
"dark:bg-gray-900",
"dark:bg-gray-900 bg-gray-100",
"border border-gray-200 dark:border-gray-700",
"p-4 rounded-xl",
"no-underline hover:no-underline",
Expand All @@ -147,13 +154,13 @@ const About: React.FC = () => {
/>
</div>
<div className="text-xs md:text-base">
<div className="mb-0 text-gray-500 dark:text-gray-400">
<h3 className="mb-0 text-gray-500 dark:text-gray-400">
Follow me on
</div>
<div className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <div className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
</h3>
<h3 className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <h3 className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
Instagram
</div>
</h3>
</div>
</a>
<a
Expand All @@ -162,7 +169,7 @@ const About: React.FC = () => {
rel="noreferrer"
className={clsx(
"flex h-max flex-row justify-start gap-3",
"dark:bg-gray-900",
"dark:bg-gray-900 bg-gray-100",
"border border-gray-200 dark:border-gray-700",
"p-4 rounded-xl",
"no-underline hover:no-underline",
Expand All @@ -176,13 +183,13 @@ const About: React.FC = () => {
/>
</div>
<div className="text-xs md:text-base">
<div className="mb-0 text-gray-500 dark:text-gray-400">
<h3 className="mb-0 text-gray-500 dark:text-gray-400">
Follow me on
</div>
<div className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <div className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
</h3>
<h3 className="font-semibold text-gray-900 dark:text-gray-0 no-underline hover:no-underline">
{/* <h3 className="font-semibold text-gray-0 dark:text-gray-0 no-underline hover:no-underline"> */}
Twitter
</div>
</h3>
</div>
</a>
</div>
Expand Down
49 changes: 25 additions & 24 deletions documentation/src/pages/showcase/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, {useState, useMemo, useEffect} from 'react';
import React, { useState, useMemo, useEffect } from 'react';
import clsx from 'clsx';
import { BlogFooter } from "@site/src/prepverse-theme/blog-footer";
import { CommonHeader } from "@site/src/prepverse-theme/common-header";
import { CommonLayout } from "@site/src/prepverse-theme/common-layout";
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import Translate, {translate} from '@docusaurus/Translate';
import {useHistory, useLocation} from '@docusaurus/router';
import {usePluralForm} from '@docusaurus/theme-common';
import Translate, { translate } from '@docusaurus/Translate';
import { useHistory, useLocation } from '@docusaurus/router';
import { usePluralForm } from '@docusaurus/theme-common';
import Link from '@docusaurus/Link';
import BackToTopButton from '@theme/BackToTopButton';
import Layout from '@theme/Layout';
Expand All @@ -32,7 +32,7 @@ import styles from './styles.module.css';
import CodeBlock from '@theme/CodeBlock'
import { motion } from 'framer-motion';

const TITLE = translate({message: 'Open Source Projects Showcase'});
const TITLE = translate({ message: 'Open Source Projects Showcase' });
const DESCRIPTION = translate({
message: 'List of Open Source projects in web-devlopments, app-devlopments, machine-learning, data-science',
});
Expand All @@ -52,13 +52,13 @@ type UserState = {
};

function restoreUserState(userState: UserState | null) {
const {scrollTopPosition, focusedElementId} = userState ?? {
const { scrollTopPosition, focusedElementId } = userState ?? {
scrollTopPosition: 0,
focusedElementId: undefined,
};
// @ts-expect-error: if focusedElementId is undefined it returns null
document.getElementById(focusedElementId)?.focus();
window.scrollTo({top: scrollTopPosition});
window.scrollTo({ top: scrollTopPosition });
}

export function prepareUserState(): UserState | undefined {
Expand Down Expand Up @@ -140,7 +140,7 @@ function ShowcaseHeader() {
}

function useSiteCountPlural() {
const {selectMessage} = usePluralForm();
const { selectMessage } = usePluralForm();
return (sitesCount: number) =>
selectMessage(
sitesCount,
Expand All @@ -151,7 +151,7 @@ function useSiteCountPlural() {
'Pluralized label for the number of sites found on the showcase. Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
message: '1 site|{sitesCount} sites',
},
{sitesCount},
{ sitesCount },
),
);
}
Expand All @@ -172,7 +172,7 @@ function ShowcaseFilters() {
</div>
<ul className={clsx('clean-list', styles.checkboxList)}>
{TagList.map((tag, i) => {
const {label, description, color} = Tags[tag];
const { label, description, color } = Tags[tag];
const id = `showcase_checkbox_id_${tag}`;

return (
Expand Down Expand Up @@ -302,6 +302,7 @@ function ShowcaseCardsInfo() {
</motion.div>
);
}

function ShowcaseCards() {
const filteredUsers = useFilteredUsers();

Expand Down Expand Up @@ -348,7 +349,7 @@ function ShowcaseCards() {
</div>
</div>
<div className="container margin-top--lg">
<h2 className={clsx('text-xl', 'font-bold')}>
<h2 className={clsx('text-xl', 'font-bold')}>
<Translate id="showcase.usersList.allUsers">All Projects</Translate>
</h2>
<ul className={clsx('clean-list', styles.showcaseList)}>
Expand Down Expand Up @@ -380,21 +381,21 @@ export default function Showcase(): JSX.Element {
<CommonLayout>
<CommonHeader /><div
className={clsx(
"w-full",
"mx-auto",
"landing-lg:max-w-[1300px]",
"w-full",
"mx-auto",
"landing-lg:max-w-[1300px]",
)}
>
<ShowcaseHeader />
<ShowcaseFilters />
<div
style={{display: 'flex', marginLeft: 'auto'}}
className="container"
>
<SearchBar />
</div>
<ShowcaseCards />
{/* <ShowcaseCardsInfo /> */}
<ShowcaseHeader />
<ShowcaseFilters />
<div
style={{ display: 'flex', marginLeft: 'auto' }}
className="container"
>
<SearchBar />
</div>
<ShowcaseCards />
{/* <ShowcaseCardsInfo /> */}
</div>
<BlogFooter />
<BackToTopButton />
Expand Down
5 changes: 4 additions & 1 deletion documentation/src/prepverse-theme/common-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,10 @@ export const CommonHeader = ({
"landing-lg:w-[200px]",
)}
>
<Link to="/" onContextMenu={openFigma}>
<Link
to="/"
// onContextMenu={openFigma}
>
<PrepVerseLogoIcon className="text-gray-900 dark:text-gray-0" />
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion documentation/src/prepverse-theme/common-header/mobile-menu-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const Modal: FC<PropsWithChildren<MobileMenuModalProps>> = ({
>
<PrepVerseLogoIcon
className="dark:text-gray-0 text-gray-900"
onContextMenu={openFigma}
// onContextMenu={openFigma}
/>
<button
type="button"
Expand Down
2 changes: 1 addition & 1 deletion documentation/src/prepverse-theme/common-prepverse-logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const PrepVerseLogo = ({ title, className }: Props) => {
"gap-3",
"no-underline",
)}
onContextMenu={openFigma}
// onContextMenu={openFigma}
>
<PrepVerseLogoIcon
className={clsx(
Expand Down
2 changes: 1 addition & 1 deletion documentation/src/prepverse-theme/doc-prepverse-logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const DocPrepVerseLogo = ({ className }: Props) => {
<Link
to="/"
className={clsx("no-underline", "flex items-center gap-2")}
onContextMenu={openFigma}
// onContextMenu={openFigma}
>
<span
className={clsx(
Expand Down
22 changes: 22 additions & 0 deletions documentation/src/prepverse-theme/icons/gh-sposor-badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";

export const GHBadgeIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={200}
height={30}
viewBox="0 0 200 30"
fill="none"
{...props}
>
<rect width="75%" height="100%" rx="10" ry="10" fill="currentColor" />
<path
fill="#f500af"
d="m12 20.703.343.667a.748.748 0 0 1-.686 0l-.003-.002-.007-.003-.025-.013a31.138 31.138 0 0 1-5.233-3.576C3.8 15.573 1 12.332 1 8.514v-.001C1 5.053 3.829 2.5 6.736 2.5 9.03 2.5 10.881 3.726 12 5.605 13.12 3.726 14.97 2.5 17.264 2.5 20.17 2.5 23 5.052 23 8.514c0 3.818-2.801 7.06-5.389 9.262a31.148 31.148 0 0 1-5.233 3.576l-.025.013-.007.003-.002.001ZM6.736 4C4.657 4 2.5 5.88 2.5 8.514c0 3.107 2.324 5.96 4.861 8.12a29.655 29.655 0 0 0 4.566 3.175l.073.041.073-.04c.271-.153.661-.38 1.13-.674.94-.588 2.19-1.441 3.436-2.502 2.537-2.16 4.861-5.013 4.861-8.12C21.5 5.88 19.343 4 17.264 4c-2.106 0-3.801 1.389-4.553 3.643a.751.751 0 0 1-1.422 0C10.537 5.389 8.841 4 6.736 4Z"
/>
<text x="36%" y="30%" text-anchor="middle" font-family="Arial" font-size="11" fill="#fa00af">GitHub Sponsor</text>
<text x="36%" y="30%" text-anchor="middle" font-family="Arial" font-size="11" fill="#fa00af">GitHub Sponsor</text>
<text x="45%" y="80%" text-anchor="middle" font-family="Arial" font-size="15" fill="#DE7818">AkashSingh3031</text>
<text x="45%" y="80%" text-anchor="middle" font-family="Arial" font-size="15" fill="#DE7818">AkashSingh3031</text>
</svg>
);
Loading

0 comments on commit 6ee69a5

Please sign in to comment.