More content
This commit is contained in:
parent
750c4cbc63
commit
7465ba6175
Binary file not shown.
@ -32,6 +32,7 @@
|
||||
"navbarLinks": {
|
||||
"Player": "/player",
|
||||
"Server": "/player",
|
||||
"Mojang": "/mojang"
|
||||
"Mojang": "/mojang",
|
||||
"Docs": "/docs"
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,13 +27,14 @@
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.1"
|
||||
"eslint-config-next": "14.2.1",
|
||||
"postcss": "^8",
|
||||
"sleep-promise": "^9.1.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import Navbar from "@/components/navbar";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import config from "@/config";
|
||||
import { notoSans } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import ThemeProvider from "@/provider/theme-provider";
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import PlausibleProvider from "next-plausible";
|
||||
import { Noto_Sans } from "next/font/google";
|
||||
import "../globals.css";
|
||||
|
||||
/**
|
||||
@ -14,11 +14,6 @@ import "../globals.css";
|
||||
export const metadata: Metadata = config.metadata;
|
||||
export const viewport: Viewport = config.viewport;
|
||||
|
||||
/**
|
||||
* The default Minecraft font to use.
|
||||
*/
|
||||
const notoSans = Noto_Sans({ subsets: ["latin"] });
|
||||
|
||||
/**
|
||||
* The root layout for this site.
|
||||
*
|
||||
|
||||
28
Frontend/src/app/components/github-star-count.tsx
Normal file
28
Frontend/src/app/components/github-star-count.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* The github star count component.
|
||||
*
|
||||
* @returns the star count jsx
|
||||
*/
|
||||
const GitHubStarCount = async (): Promise<JSX.Element> => {
|
||||
const stars: number = await getStarCount(); // Get the repo star count
|
||||
return (
|
||||
<code className="px-1 rounded-md bg-minecraft-green-3/80">{stars}</code>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the amount of stars
|
||||
* the repository has.
|
||||
*
|
||||
* @returns the star count
|
||||
*/
|
||||
const getStarCount = async (): Promise<number> => {
|
||||
const response: Response = await fetch(
|
||||
"https://api.github.com/repos/Rainnny7/RESTfulMC",
|
||||
{ next: { revalidate: 300 } } // Revalidate every 5 minutes
|
||||
);
|
||||
const json: any = await response.json(); // Get the JSON response
|
||||
return json.stargazers_count; // Return the stars
|
||||
};
|
||||
|
||||
export default GitHubStarCount;
|
||||
@ -3,30 +3,12 @@ import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
|
||||
const FeaturedContent = (): JSX.Element => (
|
||||
<div className="-translate-y-40 flex justify-center items-center">
|
||||
<div className="-translate-y-14 flex justify-center items-center">
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<FeaturedItem
|
||||
name="Player Lookup"
|
||||
description="Id dolore elit mollit adipisicing adipisicing."
|
||||
image="/media/test.avif"
|
||||
href="/player"
|
||||
/>
|
||||
<FeaturedItem
|
||||
name="Player Lookup"
|
||||
description="Id dolore elit mollit adipisicing adipisicing."
|
||||
image="/media/test.avif"
|
||||
href="/player"
|
||||
/>
|
||||
<FeaturedItem
|
||||
name="Player Lookup"
|
||||
description="Id dolore elit mollit adipisicing adipisicing."
|
||||
image="/media/test.avif"
|
||||
href="/player"
|
||||
/>
|
||||
<FeaturedItem
|
||||
name="Player Lookup"
|
||||
description="Id dolore elit mollit adipisicing adipisicing."
|
||||
image="/media/test.avif"
|
||||
image="/media/featured/server.png"
|
||||
href="/player"
|
||||
/>
|
||||
</div>
|
||||
@ -46,7 +28,7 @@ const FeaturedItem = ({
|
||||
}): JSX.Element => (
|
||||
<Link
|
||||
className={
|
||||
"w-[19rem] h-80 flex flex-col justify-center items-center bg-[url('/media/featured/server.png')] bg-cover rounded-3xl text-center backdrop-blur-md hover:scale-[.99] transition-all transform-gpu"
|
||||
"w-[19rem] h-80 flex flex-col justify-center items-center bg-[url('/media/featured/server.png')] bg-cover rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu"
|
||||
}
|
||||
href={href}
|
||||
>
|
||||
|
||||
@ -1,18 +1,34 @@
|
||||
import MinecraftButton from "@/components/minecraft-button";
|
||||
import config from "@/config";
|
||||
import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* The hero content.
|
||||
*
|
||||
* @returns the hero jsx
|
||||
*/
|
||||
const Hero = (): JSX.Element => (
|
||||
<div className="h-[85vh] flex flex-col gap-4 justify-center items-center pointer-events-none">
|
||||
{/* Title */}
|
||||
<h1
|
||||
className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
|
||||
>
|
||||
{config.siteName}
|
||||
</h1>
|
||||
<div className="h-[70vh] flex flex-col gap-8 justify-center items-center">
|
||||
<div className="flex flex-col gap-4 items-center">
|
||||
{/* Title */}
|
||||
<h1
|
||||
className={cn("text-5xl text-minecraft-green-3", minecrafter.className)}
|
||||
>
|
||||
{config.siteName}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<h2 className="text-xl">{config.metadata.description}</h2>
|
||||
{/* Subtitle */}
|
||||
<h2 className="text-xl">{config.metadata.description}</h2>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex gap-10">
|
||||
<MinecraftButton className="w-44 h-12">
|
||||
<Link href="/docs">Get Started</Link>
|
||||
</MinecraftButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
export default Hero;
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import GitHubStarCount from "@/components/github-star-count";
|
||||
import MinecraftButton from "@/components/minecraft-button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import config from "@/config";
|
||||
import { minecrafter } from "@/font/fonts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { StarIcon } from "@heroicons/react/24/outline";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { Suspense } from "react";
|
||||
|
||||
/**
|
||||
* The navbar for the site.
|
||||
@ -25,7 +28,7 @@ const Navbar = (): JSX.Element => (
|
||||
>
|
||||
{/* Small Screens */}
|
||||
<Image
|
||||
className="flex md:hidden"
|
||||
className="hidden sm:flex lg:hidden"
|
||||
src="/media/logo.webp"
|
||||
alt="Site Logo"
|
||||
width={42}
|
||||
@ -33,7 +36,7 @@ const Navbar = (): JSX.Element => (
|
||||
/>
|
||||
|
||||
{/* Large Screens */}
|
||||
<span className="hidden md:flex">{config.siteName}</span>
|
||||
<span className="hidden lg:flex">{config.siteName}</span>
|
||||
</Link>
|
||||
|
||||
{/* Links */}
|
||||
@ -51,14 +54,23 @@ const Navbar = (): JSX.Element => (
|
||||
</div>
|
||||
|
||||
{/* Social Buttons */}
|
||||
<div className="hidden sm:flex">
|
||||
<div className="hidden md:flex">
|
||||
{/* Star on Github <3 */}
|
||||
<MinecraftButton>
|
||||
<MinecraftButton className="group/star">
|
||||
<Link
|
||||
className="flex gap-1.5 items-center"
|
||||
href="https://github.com/Rainnny7/RESTfulMC"
|
||||
>
|
||||
<StarIcon width={22} height={22} />
|
||||
{/* Star Count */}
|
||||
<Suspense fallback={<Skeleton className="w-4 h-5 rounded-md" />}>
|
||||
<GitHubStarCount />
|
||||
</Suspense>
|
||||
|
||||
<StarIcon
|
||||
className="group-hover/star:text-orange-400 delay-0 transition-all transform-gpu"
|
||||
width={22}
|
||||
height={22}
|
||||
/>
|
||||
<span>Star on GitHub</span>
|
||||
</Link>
|
||||
</MinecraftButton>
|
||||
|
||||
15
Frontend/src/app/components/ui/skeleton.tsx
Normal file
15
Frontend/src/app/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { cn } from "@/app/lib/utils"
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@ -1,8 +1,15 @@
|
||||
import { NextFont } from "next/dist/compiled/@next/font";
|
||||
import { Noto_Sans } from "next/font/google";
|
||||
import localFont from "next/font/local";
|
||||
|
||||
/**
|
||||
* The title font to use to brand the site.
|
||||
* The default font to use for the site.
|
||||
*/
|
||||
export const minecrafter = localFont({
|
||||
export const notoSans: NextFont = Noto_Sans({ subsets: ["latin"] });
|
||||
|
||||
/**
|
||||
* The Minecraft font to use for the site.
|
||||
*/
|
||||
export const minecrafter: NextFont = localFont({
|
||||
src: "../font/Minecrafter.ttf",
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user