---

import '@fontsource/nunito'
import '@fontsource/libre-baskerville'	
import '../styles/markdown.css'

import { format } from 'date-fns'
import { toZonedTime } from 'date-fns-tz'
import { timeZone } from "../lib/utils";

import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import MDXImage from '../components/mdx/MDXImage.astro'

import HR from '../components/HR.astro'

const fm = Astro.props.frontmatter
const headings = await Astro.props.headings

const title = fm.title ?? 'blog post'

const ogImageUrl = "https://eleboog.com/blog/blogbanner.png"

const numberToWord = (num: number) => {
    switch(num) {
        case 1: return "one";
        case 2: return "two";
        case 3: return "three";
        case 4: return "four";
    }
 }

---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link href="/moffsoft_light_64.png" rel="icon" type="image/png" media="(prefers-color-scheme: light)"/>
        <link href="/moffsoft_dark_64.png" rel="icon" type="image/png" media="(prefers-color-scheme: dark)"/>
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{title ? title + ' - eleboog.com' : 'eleboog.com'}</title>

		{/* open graph babeeeee */}
		<meta property="og:title" content={title ? title + ' - eleboog.com' : 'eleboog.com'} />
		<meta property="og:site_name" content="eleboog.com" />
		<meta property="og:description" content={fm.summary ?? "My personal website, containing blog posts, a mini journal, and other projects. The dark side of the sauce."} />
		<meta property="og:type" content="article" />
		<meta property="og:article:published_time" content={fm.date.replace(' ', 'T')} />
		<meta property="og:article:modified_time" content={fm.updated ? fm.updated.replace(' ', 'T') : fm.date.replace(' ', 'T')} />
		<meta property="og:image" content={ fm.cover ? 'https://eleboog.com' + fm.cover : ogImageUrl } />
		<meta property="og:image:secure_url" content={ fm.cover ? 'https://eleboog.com' + fm.cover : ogImageUrl  } />
		<meta property="og:image:width" content="1280" />
		<meta property="og:image:height" content="720" />
		<meta property="twitter:title" content={title ? title + ' - eleboog.com' : 'eleboog.com'} />
		<meta property="twitter:card" content="summary_large_image" />
		<meta property="twitter:image" content={ fm.cover ? 'https://eleboog.com' + fm.cover : ogImageUrl  } />
	</head>
	<body class="main-spacing">
		<Header current='blog post'/>
		<main>
			{ ( fm.cover && fm.cover_alt ) ? (
	          <div class="mb-4">
	            <MDXImage src={fm.cover} alt={fm.cover_alt}/>
	          </div>
	        ) : '' }
	       
	        <h1 class="text-4xl font-serif font-bold text-title">{fm.title}</h1>
	        <h2 class="font-mono">&mdash; {format(toZonedTime(fm.date, timeZone), 'LLLL d, yyyy')}
	          {(fm.updated) ? (
	            <span>, <span class="text-subtitle">updated {format(toZonedTime(fm.updated, timeZone), 'LLLL d, yyyy')}</span></span>
	          ) : ''}
	        </h2>
	        <h2 class="text-sm italic mb-4 mt-2 text-subtitle">{fm.summary}</h2>

	        <!-- shelving this feature for now
	        {(fm.narration) ? (<>
	            <h3 class="text-xl font-serif mb-2">listen to this article</h3>
	            <audio class="mb-2 w-full" controls src={fm.narration}/>
	            <p class="text-sm italic text-subtitle">
	              {(fm.narration_date) ? (`audio published ${format(parseISO(fm.narration_date), 'LLLL d, yyyy')}`) : ''}
	            </p>
	            <p class="text-sm mb-4 ">alternatively, subscribe to the <a href="/feeds" class="text-subtitle hover:underline font-serif">podcast feed</a> on your podcast player of choice</p>
	        </>) :''} 
	        -->

	        {(fm.toc) ? ( <>
	            <h3 class="font-mono text-xl text-title">table of contents</h3>
	            <div id="toc" class="mb-4 ml-2 pl-2 border-l border-neutral-400 ">
	                {headings.map((heading: {depth: number, slug: string, text: string}) => {
	                return (
	                    <div>
	                    <a class="font-serif text-sm text-subtitle hover:underline data-[level=two]:pl-3 data-[level=three]:pl-6" data-level={numberToWord(heading.depth)} href={'#' + heading.slug}>
	                        {(heading.depth > 1) ? '> ' : ''}
	                        {heading.text}
	                    </a>
	                    </div>
	                )
	                })}
	            </div>
	        </>):''}

	        <HR/>

			<article>
				<slot/>
			</article>
		</main>
		<Footer/>
	</body>
</html>