Init next.js port

pages/404.tsx

@@ -0,0 +1,18 @@
+import Layout from "../components/layout";
+
+function NotFoundPage() {
+
+    return (
+        <Layout name="... ??? / 404: Not Found">
+            <div className="block">
+                <h1>Error 404: Not Found</h1>
+                <p>
+                    <strong>Uh oh! The page you are looking for does not exist...</strong><br />
+                    <strong><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">[Wikipedia] Learn more about HTTP status codes.</a></strong>
+                </p>
+            </div>
+        </Layout>
+    );
+}
+
+export default NotFoundPage;

pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import '../styles/global.css';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+    return <Component {... pageProps} />
+}

pages/about.tsx

@@ -0,0 +1,25 @@
+import ReactMarkdown from 'react-markdown';
+
+// @ts-ignore
+import ReadmeMd from '../README.md';
+import Layout from '../components/layout';
+
+function AboutPage() {
+    return (
+        <Layout name='About' title='About this website'>
+            <section className='block'>
+                This is a personal website written by <a href='https://github.com/LambdaPaul'>@LambdaPaul</a>.<br /><br />
+                Why did I write this?
+                I do not really know, at least the content I put here. I guess I wanted a place on the web where I wanted to put everything I think is worth looking at some point in the future.
+                <br />
+                <br />
+                It seems wise to have things up here even though they may embarrass me at some point in the future, as many of the things I have done in the past have. Especially the web sites I made in high school. I will never forget those.
+            </section>
+            <section className='block'>
+                <ReactMarkdown>{ReadmeMd}</ReactMarkdown>
+            </section>
+        </Layout>
+    )
+}
+
+export default AboutPage;

pages/grade-calc/index.tsx

@@ -0,0 +1,86 @@
+import React, { ReactElement, useState } from 'react';
+import Layout from '../../components/layout';
+import Link from 'next/link';
+import GradeCalc from '../../components/_gc';
+
+function GradeCalcPage() {
+    const [calculator, setCalculator] = useState<any>();
+    let [jsonInput, setJsonInput] = useState('[]');
+
+    function loadConfig(filename: string): void {
+        const client = new XMLHttpRequest();
+        client.open('GET', filename);
+        client.onreadystatechange = () => {
+            setJsonInput(client.responseText);
+        }
+        client.send();
+    }
+
+    function generate() {
+        setCalculator('');
+        let conf = null;
+        try {
+            conf = JSON.parse(jsonInput);
+        }
+        catch (e) {
+            console.log(e);
+            return;
+        }
+        let cb = (out: ReactElement[]) => {
+            setCalculator([... calculator, out]);
+        }
+        const gc = new GradeCalc(conf, cb);
+        if (calculator)
+            setCalculator([... calculator, React.createElement('div', {className: 'asf'}, gc.elemTotal)]);
+    }
+
+    return (
+        <Layout name="Grade Calc" title='Grade Calculator'>
+            <div className='block'>
+                <div className='about-container'>
+                    <h2>About</h2>
+                    Check out the <Link href='/grade-calc/readme'><a >README.md</a></Link> file
+                    to learn more about the configuration structure.
+                    <h3>Usage</h3>
+                    <ol>
+                        <li>Either configure the calculator using the text box below or load one from the existing JSON files to
+                            generate one.</li>
+                        <li>Click <code>Generate</code>.</li>
+                        <li>Enter the input values.</li>
+                    </ol>
+                </div>
+                <div className='json-textarea'>
+                    <h2>Configuration</h2>
+                    <hr />
+                    <h3>Load config from file</h3>
+                    <ul>
+                        <li><a onClick={() => loadConfig('/grade-calc/config/map2302.json')}>MAP2302 - ODE I Fall 2019 (map2302.json)</a></li>
+                        <li><a onClick={() => loadConfig('/grade-calc/config/eee3307c.json')}>EEE3307C - Electronics I Spring 2021 (eee3307c.json)</a></li>
+                        <li><a onClick={() => loadConfig('/grade-calc/config/eel4742c.json')}>EEL4742C - Embedded Systems Spring 2021 (eel4742c.json)</a></li>
+                        <li><a onClick={() => loadConfig('/grade-calc/config/eel4781.json')}>EEL4781 - Computer Comm. Networks Spring 2021 (eel4781.json)</a></li>
+                    </ul>
+                    <div className='button-container'>
+                        <button className='button' onClick={generate}>Generate &#8594;</button>
+                    </div>
+                    <textarea id='json' rows={30} value={jsonInput} onChange={(t) => {setJsonInput(t.currentTarget.value)}}></textarea>
+
+                </div>
+                <div className='calculator-container'>
+                    {calculator}
+                </div>
+                <span className='clear'></span>
+            </div>
+        </Layout>
+    )
+}
+
+// export default GradeCalcPage;
+
+export default function WIP() {
+    return (
+    <Layout name='Grade Calc' title='[WIP] Grade Calculator'>
+        <section className='block' style={{textAlign: 'center'}}>
+            Check back later as the port of this page is a Work in Progress.
+        </section>
+    </Layout>);
+}

pages/grade-calc/readme.tsx

@@ -0,0 +1,16 @@
+import ReactMarkdown from 'react-markdown';
+import Layout from '../../components/layout';
+
+// @ts-ignore
+import ReadmeMd from '../../public/grade-calc/README.md';
+
+
+function GCReadme() {
+    return (<Layout name="Read Me" ancestors={[{name:'Grade Calc', path: 'grade-calc'}]}>
+        <section className='block'>
+        <ReactMarkdown>{ReadmeMd}</ReactMarkdown>
+        </section>
+        </Layout>);
+}
+
+export default GCReadme;

pages/index.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+import React from 'react';
+import Layout from '../components/layout';
+import Pages from '../public/pages.json';
+
+// import { GetStaticProps } from 'next';
+
+function HomePage() {
+    return (
+        <Layout name='' title='PaulW.XYZ'>
+            <section className='block' style={{ textAlign: 'center' }}>
+                <div className='h2'>Welcome to my website!</div>                {
+                    Pages.map(obj => {
+                        return <div key='' className='h3'>
+                            <Link href={obj.link}>
+                                <a>{obj.title}</a>
+                            </Link>
+                        </div>
+                    })
+                }
+            </section>
+        </Layout>
+    )
+}
+
+export default HomePage;
+
+// export async function getStaticProps(context): GetStaticProps {
+
+// }

pages/playlists.tsx

@@ -0,0 +1,66 @@
+import React, { ReactElement } from 'react';
+import Layout from '../components/layout';
+
+type listItem = {
+    children?: listItem[];
+    url?: string;
+    title: string;
+};
+
+const list: listItem[] = [{
+    title: 'Classical by Composer',
+    children: [
+        {
+            title: '[Youtube] Baroque Red Metal Priest / Antonio Lucio Vivaldi',
+            url: 'https://youtube.com/playlist?list=PLSU6wJEYct5HslkoJWHQFCttB-lhSwVr2'
+        },
+        {
+            title: '[Youtube] Papa Bach / Johann Sebastian Bach',
+            url: 'https://youtube.com/playlist?list=PLSU6wJEYct5HftuY6UunC6zE_QMXOGmhm'
+        },
+        {
+            title: '[Youtube] Luigi Bee the Oven / Ludwig van Beethoven',
+            url: 'https://youtube.com/playlist?list=PLSU6wJEYct5Etx0WAXUQ7YXe84Fp5E142'
+        },
+        {
+            title: '[Youtube] Leck Mozart im Arsch / Wolfgang Amadeus Mozart',
+            url: 'https://youtube.com/playlist?list=PLSU6wJEYct5EJsE-9Zh-jWckBuZAmIt8Q'
+        }
+    ]
+}];
+
+function mapChild(obj: listItem, level: number) {
+    if (obj.url)
+        return <li key=''><a href={obj.url}>{obj.title}</a></li>
+
+    if (!obj.children)
+        return <></> // ignore playlists without links
+
+    let title: ReactElement;
+    if (level >= 0 && level <= 3)
+        title = React.createElement(`h${level+3}`, {}, obj.title);
+    else
+        title = React.createElement('strong', {}, obj.title);
+
+    return (
+        <>
+            {title}
+            <ul>
+                {obj.children.map(l => mapChild(l, level + 1))}
+            </ul>
+        </>
+    );
+}
+
+function Playlists() {
+    return (
+        <Layout name='Playlists'>
+            <section className='block'>
+                <h2>Music</h2>
+                {list.map(l => mapChild(l, 0))}
+            </section>
+        </Layout>
+    );
+}
+
+export default Playlists;

pages/recommended.tsx

@@ -0,0 +1,175 @@
+import React, { ReactElement } from 'react';
+import Layout from '../components/layout';
+import style from '../styles/lists.module.css';
+
+type listItem = {
+    children?: listItem[] | string[];
+    url?: string;
+    title: string;
+    description?: string
+};
+
+const list: listItem[] = [
+    {
+        title: 'Books',
+        children: [
+            {
+                title: 'Technology',
+                children: [
+                    {
+                        title: 'C programming',
+                        children: [
+                            {
+                                title: 'The C Programming Language [K&R]',
+                                url: 'https://en.wikipedia.org/wiki/The_C_Programming_Language'
+                            },
+                            {
+                                title: 'Expert C Programming by Peter van der Linden'
+                            },
+                            {
+                                title: 'Practical C Programming by Steve Oualline (kind of outdated but still good)'
+                            }
+                        ]
+                    },
+                    {
+                        title: 'Operating Systems',
+                        children: [
+                            {
+                                title: 'Advanced Programming in the Unix Environment by W. Richard Stevens'
+                            },
+                            {
+                                title: 'Operating Systems: Design and Implementation by Andrew S. Tanenbaum (I have not had a chance to read his other books on OS. I am not a fan of his networking book though.)'
+                            }
+                        ]
+                    },
+                    // {
+                    //     title: 'Networking'
+                    // },
+                    // {
+                    //     title: 'Electronics'
+                    // },
+                    {
+                        title: 'Computer Engineering',
+                        children: [
+                            {
+                                title: 'Making Embedded Systems: Design Patterns for Great Software by Elecia White'
+                            }
+                            // Computer Organization and Design: the Hardware/Software Interface [Patterson Hennessy]
+                            // Computer Architecture: A Quantitative Approach [Hennessy Patterson]
+                        ]
+                    },
+                    {
+                        title: 'Compilers',
+                        children: [
+                            {
+                                title: 'Compilers: Principles, Techniques, and Tools [Dragon Book] (discusses theory in detail so it is kind of hard to read)'
+                            }
+                        ]
+                    },
+                    {
+                        title: 'Other',
+                        children: [
+                            {
+                                title: 'Definitive Guide to sed: Tutorial and Reference'
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                title: 'Classics',
+                description: 'Only the English ones for now.',
+                children: [
+                    'A Tale of Two Cities',
+                    'The Mayor of Casterbridge',
+                    'The Citadel',
+                    'Oliver Twist',
+                    'Macbeth',
+                    'Othello',
+                    'Adventures of Huckleberry Finn'
+                ]
+            },
+            {
+                title: 'Language Learning',
+                children: ['Lingua Latina per se Illustrata (Both parts)']
+            }
+        ]
+    },
+    {
+        title: 'Movies',
+        children: [
+            'Blade Runner 2049',
+            'The Hateful Eight',
+            'Goodfellas',
+            'Inception',
+            'Memento',
+            'The Grand Budapest Hotel'
+        ]
+    },
+    {
+        title: 'Music',
+        children: [
+            'Große Fuge Op. 133',
+            'KV 387',
+            'KV 448',
+            'BWV 1048',
+            'Prelude in G Minor (Op. 23 No. 5)',
+            'String Quartet, Op. 20 No. 2 (Haydn)'
+        ]
+    },
+    {
+        title: 'Video Games',
+        children: [
+            'The Legend of Zelda: Breath of the Wild',
+            'Portal 2'
+        ]
+    }
+];
+
+function mapChild(obj: listItem | string, level: number) {
+    if (typeof obj === 'string') {
+        if (obj === '')
+            return <></>
+        return <span className={style.listItem}>{obj}</span>
+    }
+
+    if (obj.title === '')
+        return <></>
+
+    if (obj.url)
+        return <span className={style.listItem}><a href={obj.url}>{obj.title}</a></span>
+
+    if (!obj.children)
+        return <span className={style.listItem}>{obj.title}</span>
+
+    let title: ReactElement;
+
+    if (level >= 0 && level <= 4)
+        title = React.createElement(`h${level + 2}`, {}, obj.title);
+    else
+        title = React.createElement('strong', {}, obj.title);
+
+    return (
+        <>
+            {title}
+            {obj.description ? <p>{obj.description}</p> : <></>}
+            <div>
+                {obj.children.map(l => mapChild(l, level + 1))}
+            </div>
+        </>
+    );
+}
+
+function Recommended() {
+    return (
+        <Layout name='Recommended' title='My Recommendations'>
+            <section className='block'>
+                <p>This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions.</p>
+                <p>If the one you are looking for is not on this list, it is most likely I have not had the chance to read it yet or I may have put it on the Resources page, if it is freely available.</p>
+                {list.map(l => mapChild(l, 0))}
+            </section>
+        </Layout>
+    );
+}
+
+export default Recommended;

pages/resources.tsx

@@ -0,0 +1,129 @@
+import React, { ReactElement } from 'react';
+import Layout from '../components/layout';
+
+type listItem = {
+    children?: listItem[] | string[];
+    url?: string;
+    title: string;
+    description?: string
+};
+
+const list = [{
+    title: 'Programming',
+    children: [
+        {
+            url: 'http://aggregate.org/MAGIC/',
+            title: 'The Aggregate Magic Algorithms'
+        },
+        {
+            url: 'https://3fx.ch/typing-is-hard.html',
+            title: 'Typing is Hard'
+        },
+        {
+            url: 'https://www.atlassian.com/git/',
+            title: 'Atlassian's Git Guide'
+        },
+        {
+            url: 'https://learnopengl.com/',
+            title: 'LearnOpenGL.com'
+        },
+        {
+            url: 'http://ctan.math.utah.edu/ctan/tex-archive/info/symbols/comprehensive/symbols-letter.pdf',
+            title: '[PDF] LaTeX Symbols'
+        },
+        {
+            url: 'https://tobi.oetiker.ch/lshort/lshort.pdf',
+            title: '[PDF] The Not So Short Introduction to LATEX 2ε'
+
+        },
+        {
+            url: 'https://writing.kemitchell.com/2016/09/21/MIT-License-Line-by-Line.html',
+            title: 'The MIT License, Line by Line by Kyle E. Mitchell'
+        },
+        {
+            title: 'Posts',
+            children: [
+                {
+                    title: 'How to Make Your Code Reviewer Fall in Love with You by Michael Lynch',
+                    url: 'https://mtlynch.io/code-review-love/'
+                },
+                {
+                    title: 'What's in the box? by @fasterthanlime',
+                    url: 'https://fasterthanli.me/articles/whats-in-the-box'
+                }
+            ]
+        },
+        {
+            title: 'Talks',
+            children: [
+                {
+                    title: 'Concurrency is not Parallelism by Rob Pike',
+                    url: 'https://talks.golang.org/2012/waza.slide'
+                }
+            ]
+        }
+    ]
+},
+{
+    title: 'Electrical',
+    children: [
+        {
+            title: 'Common Wire-To-Board, Wire-To-Wire Connectors, And Crimp Tools',
+            url: 'http://www.mattmillman.com/info/crimpconnectors/'
+        }
+    ]
+},
+{
+    title: 'Other Topics',
+    children: [
+        {
+            title: 'Sight Reading Trainer',
+            url: 'https://sightreading.training/'
+        }
+    ]
+}];
+
+function mapChild(obj: listItem | string, level: number) {
+    if (typeof obj === 'string') {
+        if (obj === '')
+            return <></>
+        return <li>{obj}</li>
+    }
+
+    if (obj.title === '')
+        return <></>
+
+    if (obj.url)
+        return <li key=''><a href={obj.url}>{obj.title}</a></li>
+
+    if (!obj.children)
+        return <li>{obj.title}</li>
+
+    let title: ReactElement;
+
+    if (level >= 0 && level <= 4)
+        title = React.createElement(`h${level + 2}`, {}, obj.title);
+    else
+        title = React.createElement('strong', {}, obj.title);
+
+    return (
+        <>
+            {title}
+            {obj.description ? <p>{obj.description}</p> : <></>}
+            <ul>
+                {obj.children.map(l => mapChild(l, level + 1))}
+            </ul>
+        </>
+    );
+}
+
+function Resources() {
+    return (
+        <Layout name='Resources' title='Some Useful Resources'>
+            <section className='block'>
+
+            </section>
+        </Layout>);
+}
+
+export default Resources;

pages/site.md

@@ -0,0 +1,44 @@
+# Site.json File Specification
+
+This is a very basic site structure specification used to generate some of the navigations pages and components of the website.
+
+## Definitions
+
+### Member
+
+### Website
+
+## Attributes
+
+These are the keys to the object definition used to define the website. Not all of the attributes will be read by the application as they are dependent on the type of member. However, if they are, they must conform to this document.
+
+### `name`
+
+Name is one of the two required attributes for each member, along with type.
+
+### `type`
+
+
+### `children`
+
+Children is used to define sub-members of the current member.
+
+### `text`
+
+Text is used tto override the string that the capitalization of the name results in. If a change is not required, this may be omitted.
+
+### `url`
+
+### `domain`
+
+## Types
+
+The types are the different kinds of members that the page can have. They are defined with the `type` attribute. The current list is tentative.
+
+### `root`
+
+### `directory`
+
+### `html`
+
+### `external`