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() {
return(
<div>
<BlogHeader />
<BlogFooter />
<div className={`flex flex-col`}>
<p>About</p>
</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() {
return(
<div>
<BlogHeader />
<BlogFooter />
<div className={`flex flex-col`}>
<p>Blog Post List</p>
</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 components;
@tailwind utilities;

29
app/layout.tsx
View File

@ -1,22 +1,31 @@
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import "./globals.css";
import type { Metadata } from "next";
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 = {
title: 'Create Next App',
description: 'Generated by create next app',
}
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<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>
)
);
}

41
app/page.tsx
View File

@ -1,29 +1,27 @@
import Image from "next/image";
import Link from "next/link";
import BlogHeader from "../components/blogHeader";
import BlogFooter from "@/components/blogFooter";
import { raleway, syne, questrial } from "@/app/fonts";
export default function Home() {
return (
<div className="flex flex-col bg-white">
<BlogHeader />
<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">
<p className="text-white text-center text-7xl font-thin font-blog mb-6">
<div className={`flex flex-col`}>
<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`}>
<p className={`${raleway.className} text-white text-center text-7xl font-thin mb-6`}>
SUYONO
</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
</p>
</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 className="flex flex-row justify-center my-8">
<div className="border border-slate-100 flex flex-col">
<div className={`flex flex-row justify-center my-8`}>
<div className={`border border-slate-100 flex flex-col`}>
<Link
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
src="/assets/pthumb.webp"
@ -31,12 +29,12 @@ export default function Home() {
width={454}
height={341}
/>
<div className="flex flex-col mx-10">
<p className="font-blog text-2xl">
<div className={`flex flex-col mx-10`}>
<p className={`${syne.className} text-2xl`}>
Nginx + SSL Client Certificate Verification: Manage Access to a
site
</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
rely on the combination of username and password, sometimes with
additional multi-factor authentication to improve security. Some
@ -51,13 +49,13 @@ export default function Home() {
</Link>
</div>
</div>
<div className="flex flex-row bg-teal-50 justify-center">
<div className="max-w-4xl py-28 px-10">
<p className="text-3xl font-blog">Hi There</p>
<p className="text-base font-blog my-4">
<div className={`flex flex-row bg-teal-50 justify-center`}>
<div className={`max-w-4xl py-28 px-10`}>
<p className={`text-3xl ${raleway.className}`}>Hi There</p>
<p className={`text-base ${raleway.className} my-4`}>
a new take on experience is the best teacher
</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.
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
@ -66,7 +64,6 @@ export default function Home() {
</p>
</div>
</div>
<BlogFooter />
</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>
)
}

20
components/blogFooter.tsx
View File

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

9
components/blogHeader.tsx
View File

@ -1,20 +1,21 @@
import Link from "next/link";
import { raleway }from "@/app/fonts";
export default function BlogHeader() {
return(
<div>
<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 className="bg-gray-100">
<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
</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
</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
</Link>
</div>

5
tailwind.config.ts
View File

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