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 (
<Html>
<Head>
@ -8,7 +12,7 @@ export default function Document() {
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css" />
</Head>
<body className='bg-gradient'>
<body className={`bg-gradient ${pageProps.body_class_name}`}>
<Main />
<NextScript />
</body>

View File

@ -15,7 +15,6 @@ interface LandingProps {
export default function Landing({ jobs, skills, projects }: LandingProps) {
return (
<div>
<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'>

View File

@ -18,12 +18,9 @@ interface HomeProps {
export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes }: HomeProps) {
return (
<Layout>
{/*
<Head>
{note.title && <meta name="title" content={note.title} />}
<body style={{ margin: 0, padding: 0 }} />
</Head>
*/}
<div className='flex gap-1 w-full'>
<nav className="">
<FolderTree tree={tree} flattenNodes={flattenNodes} />
@ -61,7 +58,8 @@ export const getStaticProps: GetStaticProps = (context) => {
note,
tree,
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 FolderTree from 'components/FolderTree'
import MDContent, { type LinkType } from 'components/MDContent'
import Head from 'next/head'
export interface HomeProps {
content: string
@ -14,11 +13,6 @@ export interface HomeProps {
export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
return (
<Layout>
{/*
<Head>
<body style={{ margin: 0, padding: 0 }} />
</Head>
*/}
<div className='flex gap-1 w-full'>
<nav className="">
<FolderTree tree={tree} flattenNodes={flattenNodes} />
@ -52,7 +46,9 @@ export function getStaticProps() {
content: contentData.data,
tree,
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() {
return (
<div>
<>
<Head>
<body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " />
<title>🛝 Playground</title>
</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>
<Head>
<body className="bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-600 to-gray-900 " />
</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>
</>
)
}