import { useRouter } from "next/router" ; import { useAmp } from 'next/amp' ; import Head from 'next/head' ; import ReactMarkdown from "react-markdown" ; import fs from "fs" ; import path from "path" ; import React from "react" ; import { languages } from '../../i18n.config' ; interface Props { feed : string ; lang : string ; updatedAt : string ; } interface StaticProps { params : { feed : string ; lang : string ; } ; } interface ComponentProps { img : any ; } const Feed = ( { feed , lang , updatedAt } ) => { const isAmp = false ; const router = useRouter ( ) ; function Img ( { alt , src = '' , title } ) { return isAmp ? ( < span className = 'ampImgContainer' > < img className = "contain" src = { require ( `../../public/feeds/${ decodeURI ( src ) } `)} alt={alt}/></span>) : (<img src={require(` . . / . . / public / feeds / $ { decodeURI ( src ) } `)} alt={alt} style={{ width: '100%', maxWidth: '800px', margin: '10px auto', display: 'block' }}/>);
    }
    ;
    const feedInfo = {
        date: (router.query.feed as string).split('-')[0].replace(/_/g, '-'),
        partner: (router.query.feed as string).split('-')[1].replace(/_/g, '-'),
        title: (router.query.feed as string).split('-')[2].replace(/_/g, ' ').replace(/\[/g, '【').replace(/\]/g, '】').replace(/\</g, '(').replace(/\>/g, ')'),
        lang: (router.query.feed as string).split('-')[3],
        authors: (router.query.feed as string).split('-').slice(4).map(author => author.replace(/_/g, ' ').replace(/\</g, '(').replace(/\>/g, ')'))
    };
    return (<React.Fragment>
      <Head>
        <title>{"WasedaTime Feeds: " + feedInfo.title}</title>
        <meta name="description" content={"WasedaTime Feeds: " + router.query.feed + "\n" + feed}/>
        <link rel="icon" href="/favicon.ico"/>
        <style>
          {` . header { position : fixed ; top : 0 ; left : 0 ; width : 100 vw ; height : 65 px ; border - bottom : 2 px solid #eee ; background - color : #fff ; z - index : 100 ; display : flex ; flex - direction : row ; } . header img { margin : 7.5 px 16 px ; } . header . headerLink { flex - grow : 1 ; align - self : center ; font - family : Segoe UI ; text - align : center ; text - decoration : none ; color : # 000 ; } . header . headerLink h2 { font - weight : lighter ; } . title { font - family : Lato ; text - align : center ; } . info { font - family : Lato ; color : # 777 ; margin : 5 px 0 px ; } . markdownWrapper { font - family : $ { feedInfo . lang === 'EN' ? "Segoe UI, Yu Gothic Medium, Lato" : 'Yu Gothic Medium, Lato, Segoe UI' } ! important ; padding : 0 px ; font - weight : lighter ; } . markdownWrapper p { font - size : 1.3 rem ; margin : 0 px 0 px ; padding - bottom : 20 px ; line - height : 2.5 rem ; } . markdownWrapper p em { font - size : 1 rem ; display : block ; text - align : center ; color : # 666 ; line - height : 1.5 rem ; } . markdownWrapper a { font - size : 1.3 rem ; color : # 3366 ff ; } . markdownWrapper ul { list - style : square ; margin - top : 10 px ; font - size : 1.3 rem ; } . markdownWrapper li { padding - bottom : 2 px ; } amp - img . contain img { object - fit : contain ; } . ampImgContainer { position : relative ; display : block ; width : 100 % ; height : 300 px ; } . linksToWasedaTime { display : block ; font - family : Lato ; text - align : center ; text - decoration : none ; color : # 666 ; } . linksToWasedaTime p { margin : 10 px 0 px ; } @ media ( max - width : 768 px ) { . markdownWrapper p { font - size : 1.1 rem ; line - height : 2 rem ; } . markdownWrapper p em { font - size : 0.8 rem ; line - height : 1.2 rem ; } . markdownWrapper a { font - size : 1.1 rem ; } . markdownWrapper ul { font - size : 1.1 rem ; } . ampImgContainer { height : 200 px ; } } `}
        </style>
      </Head>

      {isAmp && <div className='header'>
          <a href="https://wasedatime.com"><img src={require(` . . / . . / public / logo . png `)} alt='WasedaTime logo' width='50' height='50'/></a>
          <a href="https://wasedatime.com/feeds" className='headerLink'><h2>Feeds <span style={{ fontFamily: 'Yu Gothic Medium' }}>記事</span></h2></a>
          <span style={{ width: '50px', margin: '16px' }}></span>
        </div>}

      <div style={{ padding: '0px 5vw', paddingTop: '70px' }}>
        <h1 className='title'>{feedInfo.title}</h1>
        <p className='info'>
          <b>{feedInfo.partner}</b> {feedInfo.authors.map((author, i) => i === 0 ? author : ' & ' + author)}
        </p>
        <p className='info'>{feedInfo.date} (Last updated: {updatedAt})</p>
        <hr />
        <div className='markdownWrapper'>
          <ReactMarkdown components={{ img: Img }} children={feed}/>
        </div>

        {isAmp && <a href="https://wasedatime.com/feeds" className="linksToWasedaTime">
            <img src={require(` . . / . . / public / logo . png `)} alt='WasedaTime logo' width='100' height='100'/>
            <p>Read more? Visit WasedaTime!</p>
            <p>もっと読みたい？早稲田タイムへどうぞ！</p>
          </a>}
      </div>
    </React.Fragment>);
};
export async function getStaticPaths() {
    const POSTS_DIRECTORY = path.join(process.cwd(), "public", "feeds");
    const feedNames = await fs.readdirSync(POSTS_DIRECTORY).filter(file => path.extname(file).toLowerCase() === '.md').map(name => name.replace('.md', ''));
    var paths = [];
    languages.forEach(lang => {
        feedNames.forEach(name => {
            paths.push({ params: { lang: lang, feed: name } });
        });
    });
    return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
    const path = process.cwd() + ` / public / feeds / $ { params . feed } . md `;
    const stats = await fs.statSync(path);
    const feed = await fs.readFileSync(path, 'utf8');
    return {
        props: {
            feed: feed,
            lang: params.lang,
            updatedAt: stats.mtime.getFullYear() + '-' + stats.mtime.getMonth() + '-' + stats.mtime.getDate()
        }
    };
}
export default Feed;
