suyono/blog-ts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated font reference and clean up

Browse Source
This commit is contained in:
Suyono 2023-09-28 20:53:41 +10:00
parent fca3d8bcec
commit 08db8ef124
11 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/about/page.tsx
View File

@ -1,11 +1,7 @@
import BlogHeader from "@/components/blogHeader";
import BlogFooter from "@/components/blogFooter";
export default function About() { export default function About() {
return( return(
<div> <div className={`flex flex-col`}>
<BlogHeader /> <p>About</p>
<BlogFooter />
</div> </div>
) )
} }

8
app/blog/page.tsx
View File

@ -1,11 +1,7 @@
import BlogHeader from "@/components/blogHeader";
import BlogFooter from "@/components/blogFooter";
export default function Blog() { export default function Blog() {
return( return(
<div> <div className={`flex flex-col`}>
<BlogHeader /> <p>Blog Post List</p>
<BlogFooter />
</div> </div>
) )
} }

17
app/fonts.ts Normal file
View File

@ -0,0 +1,17 @@
import { Raleway, Syne, Questrial } from "next/font/google";
export const raleway = Raleway({
subsets: ['latin'],
display: "swap",
})
export const syne = Syne({
subsets: ['latin'],
display: "swap",
})
export const questrial = Questrial({
subsets: ['latin'],
display: "swap",
weight: ['400'],
})

1
app/globals.css
View File

@ -1,4 +1,3 @@
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

29
app/layout.tsx
View File

@ -1,22 +1,31 @@
import './globals.css' import "./globals.css";
import type { Metadata } from 'next' import type { Metadata } from "next";
import { Inter } from 'next/font/google' import { Inter } from "next/font/google";
import BlogHeader from "@/components/blogHeader";
import BlogFooter from "@/components/blogFooter";
import React from "react";
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Create Next App', title: "Create Next App",
description: 'Generated by create next app', description: "Generated by create next app",
} };
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}>{children}</body> <body className={inter.className}>
<div className={`flex flex-col bg-white`}>
<BlogHeader />
{children}
<BlogFooter />
</div>
</body>
</html> </html>
) );
} }

41
app/page.tsx
View File

@ -1,29 +1,27 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import BlogHeader from "../components/blogHeader"; import { raleway, syne, questrial } from "@/app/fonts";
import BlogFooter from "@/components/blogFooter";
export default function Home() { export default function Home() {
return ( return (
<div className="flex flex-col bg-white"> <div className={`flex flex-col`}>
<BlogHeader /> <div className={`bg-cover bg-center flex flex-col-reverse bg-blog-cover`}>
<div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover"> <div className={`bg-neutral-100 bg-opacity-30 flex flex-col py-10`}>
<div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10"> <p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
<p className="text-white text-center text-7xl font-thin font-blog mb-6">
SUYONO SUYONO
</p> </p>
<p className="text-white text-center font-blog font-thin text-xl mb-10"> <p className={`${raleway.className} text-white text-center font-thin text-xl mb-10`}>
A Tech Archive A Tech Archive
</p> </p>
</div> </div>
<div className="h-64"></div> {/* spacer */} <div className={`h-64`}></div> {/* spacer */}
<div className="h-64"></div> {/* spacer */} <div className={`h-64`}></div> {/* spacer */}
</div> </div>
<div className="flex flex-row justify-center my-8"> <div className={`flex flex-row justify-center my-8`}>
<div className="border border-slate-100 flex flex-col"> <div className={`border border-slate-100 flex flex-col`}>
<Link <Link
href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site" href="/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site"
className="flex flex-row max-w-4xl items-center" className={`flex flex-row max-w-4xl items-center`}
> >
<Image <Image
src="/assets/pthumb.webp" src="/assets/pthumb.webp"
@ -31,12 +29,12 @@ export default function Home() {
width={454} width={454}
height={341} height={341}
/> />
<div className="flex flex-col mx-10"> <div className={`flex flex-col mx-10`}>
<p className="font-blog text-2xl"> <p className={`${syne.className} text-2xl`}>
Nginx + SSL Client Certificate Verification: Manage Access to a Nginx + SSL Client Certificate Verification: Manage Access to a
site site
</p> </p>
<p className="font-blog line-clamp-3 mt-4"> <p className={`${questrial.className} line-clamp-3 mt-4`}>
Access control is a fundamental part of security. Most entities Access control is a fundamental part of security. Most entities
rely on the combination of username and password, sometimes with rely on the combination of username and password, sometimes with
additional multi-factor authentication to improve security. Some additional multi-factor authentication to improve security. Some
@ -51,13 +49,13 @@ export default function Home() {
</Link> </Link>
</div> </div>
</div> </div>
<div className="flex flex-row bg-teal-50 justify-center"> <div className={`flex flex-row bg-teal-50 justify-center`}>
<div className="max-w-4xl py-28 px-10"> <div className={`max-w-4xl py-28 px-10`}>
<p className="text-3xl font-blog">Hi There</p> <p className={`text-3xl ${raleway.className}`}>Hi There</p>
<p className="text-base font-blog my-4"> <p className={`text-base ${raleway.className} my-4`}>
a new take on experience is the best teacher a new take on experience is the best teacher
</p> </p>
<p className="font-blog text-sm"> <p className={`${raleway.className} text-sm`}>
I started this blog as an archive of my experiences and knowledge. I started this blog as an archive of my experiences and knowledge.
By writing them out, I hope it will help me unlearn and relearn the By writing them out, I hope it will help me unlearn and relearn the
various knowledge and skills I&apos;ve accumulated. I hope the various knowledge and skills I&apos;ve accumulated. I hope the
@ -66,7 +64,6 @@ export default function Home() {
</p> </p>
</div> </div>
</div> </div>
<BlogFooter />
</div> </div>
); );
} }

3
app/post/[slug]/page.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Post({ params }: { params: { slug: string } }) {
return <div>My Post: {params.slug}</div>;
}

11
app/post/nginx-ssl-client-certificate-verification-manage-access-to-a-site/page.tsx
View File

@ -1,11 +0,0 @@
import BlogHeader from "@/components/blogHeader";
import BlogFooter from "@/components/blogFooter";
export default function Post1() {
return(
<div>
<BlogHeader />
<BlogFooter />
</div>
)
}

10
components/blogFooter.tsx
View File

@ -1,11 +1,13 @@
import {raleway} from "@/app/fonts";
export default function BlogFooter() { export default function BlogFooter() {
return ( return (
<div> <div>
<p className="text-center font-blog text-xl my-10">Suyono</p> <p className={`${raleway.className} text-center text-xl my-10`}>Suyono</p>
<p className="text-center font-blog">suyono3484@gmail.com</p> <p className={`${raleway.className} text-center`}>suyono3484@gmail.com</p>
<p className="text-center font-blog mt-20 mb-10"> <p className={`${raleway.className} text-center mt-20 mb-10`}>
&copy;2023 by Suyono. Built using Next.js &copy;2023 by Suyono. Built using Next.js
</p> </p>
</div> </div>
) );
} }

9
components/blogHeader.tsx
View File

@ -1,20 +1,21 @@
import Link from "next/link"; import Link from "next/link";
import { raleway }from "@/app/fonts";
export default function BlogHeader() { export default function BlogHeader() {
return( return(
<div> <div>
<div className="ml-20 py-8"> <div className="ml-20 py-8">
<p className="font-blog text-2xl font-thin">SUYONO</p> <p className={`${raleway.className} text-2xl font-thin`}>SUYONO</p>
</div> </div>
<div className="bg-gray-100"> <div className="bg-gray-100">
<div className="flex flex-row ml-20"> <div className="flex flex-row ml-20">
<Link href="/" className="m-2 font-thin text-sm font-blog"> <Link href="/" className={`${raleway.className} m-2 font-thin text-sm`}>
Home Home
</Link> </Link>
<Link href="/about" className="m-2 font-thin text-sm font-blog"> <Link href="/about" className={`${raleway.className} m-2 font-thin text-sm`}>
About About
</Link> </Link>
<Link href="/blog" className="m-2 font-thin text-sm font-blog"> <Link href="/blog" className={`${raleway.className} m-2 font-thin text-sm`}>
Blog Blog
</Link> </Link>
</div> </div>

5
tailwind.config.ts
View File

@ -1,7 +1,5 @@
import type { Config } from 'tailwindcss' import type { Config } from 'tailwindcss'
import { fontFamily } from 'tailwindcss/defaultTheme'
const config: Config = { const config: Config = {
content: [ content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}',
@ -16,9 +14,6 @@ const config: Config = {
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'blog-cover': "url('/assets/placeholder.webp')" 'blog-cover': "url('/assets/placeholder.webp')"
}, },
fontFamily: {
'blog': ['Raleway', ...fontFamily.sans],
},
}, },
}, },
plugins: [], plugins: [],