index.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>notebook</title>
    <script id="React" src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script id="ReactDom" src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script id="Babel" src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
    <link rel="stylesheet" href="./lib/style.css">
</head>

<body>
    <div id="container"></div>
    <script id="globalScript"></script>
    <script type="text/babel" src="./lib/components.js"></script>
    <script type="text/babel">
        function App() {
            return (
                <div className="wrapper">
                    <Header />
                    <Section />
                </div>
            );
        }
        function Header() {
            const { noteHtmlDir } = window;
            const sources = {};
            noteHtmlDir.forEach(noteObj => {
                const { fileDirName, fileNames } = noteObj
                const [year] = fileDirName.split('.');
                if (sources[year]) {
                    sources[year].push(noteObj);
                } else {
                    sources[year] = [noteObj];
                }
            });

            return (
                <header>
                    <div className="header-title">
                        <h1>n3taway</h1>
                        <p>notebook.</p>
                    </div>
                    <div className="header-nav">
                        {[Object.keys(sources)].map((year) => {
                            return <Button key={year}>{year}</Button>
                        })}
                    </div>
                </header>
            );
        }
        function Section() {
            const { noteHtmlDir, location: { href } } = window;
            return (
                <section>
                    {noteHtmlDir.map((item, index) => {
                        return (
                            <div key={index} className="month-wrap">
                                <h1>{item.fileDirName.split('.')[1]}</h1>
                                {item.fileNames.map(fileName => {
                                    return (
                                        <div key={fileName}>
                                            <a target="_blank" href={`${href}${item.fileDirName}/${fileName}`}>{fileName}</a>
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    })}
                </section>
            );
        }
        ReactDOM.render(<App />, document.getElementById('container'));
    </script>


</body></html>