fix head tags and add page props to body in document file

This commit is contained in:
Triston Armstrong 2024-01-07 15:39:53 -06:00
parent 7819ee0572
commit 3e84d77d6a
5 changed files with 39 additions and 36 deletions

View File

@ -1,6 +1,10 @@
import { Html, Head, Main, NextScript } from 'next/document' import { Html, Head, Main, NextScript, type DocumentProps } from 'next/document'
interface DocProps extends DocumentProps { }
export default function Document(props: DocProps) {
const pageProps = props?.__NEXT_DATA__?.props?.['pageProps']
export default function Document() {
return ( return (
<Html> <Html>
<Head> <Head>
@ -8,7 +12,7 @@ export default function Document() {
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
</Head> </Head>
<body className='bg-gradient'> <body className={`bg-gradient ${pageProps.body_class_name}`}>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>

View File

@ -15,7 +15,6 @@ interface LandingProps {
export default function Landing({ jobs, skills, projects }: LandingProps) { export default function Landing({ jobs, skills, projects }: LandingProps) {
return ( return (
<div> <div>
<img src='https://i.giphy.com/TBCVggEb9DzSHTUI19.webp' width={220} height={220} alt="peng" style={{ position: 'fixed', bottom: 0, left: 0 }} /> <img src='https://i.giphy.com/TBCVggEb9DzSHTUI19.webp' width={220} height={220} alt="peng" style={{ position: 'fixed', bottom: 0, left: 0 }} />
<article className='flex-row align-baseline'> <article className='flex-row align-baseline'>

View File

@ -18,12 +18,9 @@ interface HomeProps {
export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes }: HomeProps) { export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes }: HomeProps) {
return ( return (
<Layout> <Layout>
{/*
<Head> <Head>
{note.title && <meta name="title" content={note.title} />} {note.title && <meta name="title" content={note.title} />}
<body style={{ margin: 0, padding: 0 }} />
</Head> </Head>
*/}
<div className='flex gap-1 w-full'> <div className='flex gap-1 w-full'>
<nav className=""> <nav className="">
<FolderTree tree={tree} flattenNodes={flattenNodes} /> <FolderTree tree={tree} flattenNodes={flattenNodes} />
@ -61,7 +58,8 @@ export const getStaticProps: GetStaticProps = (context) => {
note, note,
tree, tree,
flattenNodes, flattenNodes,
backLinks: backLinks.filter((link) => (link as { slug: string }).slug !== id) backLinks: backLinks.filter((link) => (link as { slug: string }).slug !== id),
body_class_name: 'm-0 p-0'
} }
} }
} }

View File

@ -2,7 +2,6 @@ import Layout from 'components/Layout'
import Util from 'lib/utils' import Util from 'lib/utils'
import FolderTree from 'components/FolderTree' import FolderTree from 'components/FolderTree'
import MDContent, { type LinkType } from 'components/MDContent' import MDContent, { type LinkType } from 'components/MDContent'
import Head from 'next/head'
export interface HomeProps { export interface HomeProps {
content: string content: string
@ -14,11 +13,6 @@ export interface HomeProps {
export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) { export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
return ( return (
<Layout> <Layout>
{/*
<Head>
<body style={{ margin: 0, padding: 0 }} />
</Head>
*/}
<div className='flex gap-1 w-full'> <div className='flex gap-1 w-full'>
<nav className=""> <nav className="">
<FolderTree tree={tree} flattenNodes={flattenNodes} /> <FolderTree tree={tree} flattenNodes={flattenNodes} />
@ -52,7 +46,9 @@ export function getStaticProps() {
content: contentData.data, content: contentData.data,
tree, tree,
flattenNodes, flattenNodes,
backLinks backLinks,
body_class_name: 'm-0 p-0'
} }
} }
} }

View File

@ -2,30 +2,36 @@ import Head from 'next/head'
export default function Home() { export default function Home() {
return ( return (
<div> <>
<Head> <Head>
<body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " /> <title>🛝 Playground</title>
</Head> </Head>
<div className="parent min-h-screen grid grid-cols-23 grid-rows-22 gap-5 p-10 scale-75">
<div className="shadow-xl rounded-lg [grid-area:1_/_1_/_14_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent "> </div>
<div className="shadow-xl rounded-lg [grid-area:14_/_1_/_17_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:1_/_6_/_8_/_12] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:1_/_12_/_8_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:17_/_1_/_21_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:21_/_1_/_23_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:17_/_18_/_23_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:12_/_18_/_17_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:7_/_18_/_12_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:1_/_18_/_7_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:8_/_6_/_17_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:17_/_10_/_23_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
</div>
<div className="p-10 flex gap-4 bg-white"> <div>
<div className="bg-sky-50 transition-all duration-500 hover:w-36 hover:bg-sky-500 w-20 h-20 shadow-lg hover:shadow-sky-300 rounded-full" /> <Head>
<div className="bg-red-50 transition-all duration-500 hover:w-36 hover:bg-red-500 w-20 h-20 shadow-lg hover:shadow-red-300 rounded-full" /> <body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " />
<div className="bg-purple-50 transition-all duration-500 hover:w-36 hover:bg-purple-500 w-20 h-20 shadow-lg hover:shadow-purple-300 rounded-full" /> </Head>
<div className="parent min-h-screen grid grid-cols-23 grid-rows-22 gap-5 p-10 scale-75">
<div className="shadow-xl rounded-lg [grid-area:1_/_1_/_14_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent "> </div>
<div className="shadow-xl rounded-lg [grid-area:14_/_1_/_17_/_6] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:1_/_6_/_8_/_12] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:1_/_12_/_8_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:17_/_1_/_21_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:21_/_1_/_23_/_10] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:17_/_18_/_23_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:12_/_18_/_17_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:7_/_18_/_12_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:1_/_18_/_7_/_24] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:8_/_6_/_17_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
<div className="shadow-xl rounded-lg [grid-area:17_/_10_/_23_/_18] bg-white bg-opacity-5 border border-t-gray-400 border-r-gray-500 border-l-transparent border-b-transparent"> </div>
</div>
<div className="p-10 flex gap-4 bg-white">
<div className="bg-sky-50 transition-all duration-500 hover:w-36 hover:bg-sky-500 w-20 h-20 shadow-lg hover:shadow-sky-300 rounded-full" />
<div className="bg-red-50 transition-all duration-500 hover:w-36 hover:bg-red-500 w-20 h-20 shadow-lg hover:shadow-red-300 rounded-full" />
<div className="bg-purple-50 transition-all duration-500 hover:w-36 hover:bg-purple-500 w-20 h-20 shadow-lg hover:shadow-purple-300 rounded-full" />
</div>
</div> </div>
</div> </>
) )
} }