Logan Speck

Case Studies /

import path from 'path'; import ReactMarkdown from 'react-markdown'; import matter from 'gray-matter'; import fs from 'fs'; import Head from 'next/head'; import Navbar from '../../components/navbar'; import Footer from '../../components/footer'; import React, { useState } from 'react'; import Link from 'next/link';

export async function getStaticProps() { const fileNames = fs.readdirSync(path.join(process.cwd(), 'pages', 'casestudies')); const markdownFiles = await Promise.all( fileNames.map(async (fileName) => { if (fileName !== '[slug].js' && fileName !== '.DS_Store' && fileName !== 'index.js') { const filePath = path.join(process.cwd(), 'pages', 'casestudies', fileName); const fileContent = await fs.promises.readFile(filePath, 'utf-8'); const { data, content } = matter(fileContent); return { data: data || {}, content, slug: fileName.replace('.mdx', '') }; } }) );

return { props: { markdownFiles: markdownFiles.filter(Boolean), // Remove any null values }, }; }

function StudiesPage({ markdownFiles }) { const [selectedFile, setSelectedFile] = useState(null);

const handleClick = (index) => { if (selectedFile === index) { setSelectedFile(null); } else { setSelectedFile(index); } };

return ( <div> <Head> <title>Logan Speck</title> <meta name="description" content="Digital marketing and web development" /> <link rel="icon" href="/favicon.ico" /> </Head> <Navbar /> <div className="max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 mx-auto min-h-screen"> <div className="max-w-xl"> <h2 className="text-3xl font-bold sm:text-4xl">Case Studies</h2> <p className="mt-4 mb-4">Just the highlights.</p> </div> <div className="grid grid-cols-3 gap-4 rounded-md"> {markdownFiles .filter((file) => file) // Remove any null values .map((file, index) => ( <div key={index} className="p-4 border"> <Link href={/casestudies/${encodeURIComponent(file.slug)}}> <a> <h2>{file.data.title}</h2> </a> </Link> {file.data.tags && Array.isArray(file.data.tags) && ( <ul> {file.data.tags.map((tag, tagIndex) => ( <li class="mr-1 mb-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10" key={tagIndex}>{tag}</li>

                ))}
              </ul>
            )}
          </div>
        ))}
    </div>
  </div>
  <Footer />
</div>

); }

export default StudiesPage;