PlaceNL2022 · NoahvdAa · Apr 6, 2022 · Apr 6, 2022 · Apr 6, 2022 · Apr 6, 2022
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,22 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+ij_any_block_comment_at_first_column = false
+ij_any_line_comment_at_first_column = false
+ij_any_block_comment_add_space = true
+ij_typescript_use_double_quotes = false
+ij_javascript_use_double_quotes = false
+ij_sass_use_double_quotes = false
+ij_html_quote_style = double
+
+[*.yml]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "placenl.nl",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "dompurify": "^2.3.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-lazy-load-image-component": "^1.5.4",
+    "react-router-dom": "6",
+    "react-scripts": "5.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#FFA800" />
+    <meta name="description" content="De officiële website voor de Nederlandse ondernemingen op het canvas van /r/place. | The official website for the Dutch ventures on the canvas of /r/place." />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Place NL</title>
+</head>
+
+<body class="bg-gray-800">
+    <noscript>
+        Je moet JavaScript inschakelen om deze website te bekijken. Excuses voor het ongemak!
+        <br />
+        You need to enable JavaScript to view this website. Sorry for the inconvenience!
+    </noscript>
+    <div id="root"></div>
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+    "short_name": "Place NL",
+    "name": "Place NL",
+    "icons": [
+        {
+            "src": "favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        },
+        {
+            "src": "logo192.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        },
+        {
+            "src": "logo512.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#FFA800",
+    "background_color": "#FFA800"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,24 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import HomePage from './pages/HomePage';
+import OrderHistoryPage from './pages/orderhistory/OrderHistoryPage';
+import TimelinePage from './pages/timeline/TimelinePage';
+
+import Footer from './layout/Footer';
+import Navbar from './layout/Navbar';
+
+export default () => (
+    <div className='min-h-screen bg-gray-900 text-white relative'>
+        <BrowserRouter>
+            <Navbar />
+            <div className='p-5 pb-20'>
+                <Routes>
+                    <Route path='/orderhistory' element={<OrderHistoryPage />} />
+                    <Route path='/timeline' element={<TimelinePage />} />
+                    <Route path='/' element={<HomePage />} />
+                </Routes>
+            </div>
+            <Footer />
+        </BrowserRouter>
+    </div>
+);
diff --git a/src/design/Spinner.js b/src/design/Spinner.js
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,8 @@
+import './index.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/src/layout/Footer.js b/src/layout/Footer.js
@@ -0,0 +1,14 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDiscord, faGithub, faReddit } from '@fortawesome/free-brands-svg-icons';
+
+export default () => <div className='bg-gray-800 p-5 sm:flex gap-2 absolute bottom-0 w-full'>
+    <div className='flex-auto'>
+        <span>&copy; 2022 PlaceNL </span>
+        <span className='text-gray-400'><br className='sm:hidden' />Design door <a href='https://github.com/NoahvdAa' target='_blank' rel='noreferrer'>Noah van der Aa</a></span>
+    </div>
+    <div className='flex-auto text-center sm:text-right text-xl'>
+        <a href='https://github.com/PlaceNL' target='_blank' rel='noreferrer' className='pr-2'><FontAwesomeIcon icon={faGithub} /></a>
+        <a href='https://discord.gg/rbGsJzNQvs' target='_blank' rel='noreferrer' className='pr-2'><FontAwesomeIcon icon={faDiscord} /></a>
+        <a href='https://reddit.com/r/PlaceNL' target='_blank' rel='noreferrer'><FontAwesomeIcon icon={faReddit} /></a>
+    </div>
+</div>;
diff --git a/src/layout/Navbar.js b/src/layout/Navbar.js
@@ -0,0 +1,17 @@
+import { Link, NavLink } from 'react-router-dom';
+
+export default () => <div className='bg-gray-800 p-2 sm:flex gap-2 w-full'>
+    <div className='flex-auto'>
+        <Link to='/' className='hover:bg-gray-700 p-2 flex w-max'>
+            <img src='/logo512.png' width={28} height={28} alt='' />&nbsp;Place NL
+        </Link>
+    </div>
+    <div className='flex-auto flex justify-end gap-2'>
+        {navLink('/timeline', 'Tijdlijn')}
+        {navLink('/orderhistory', 'Templates')}
+    </div>
+</div>;
+
+function navLink(link, content) {
+    return <NavLink to={link} className={({ isActive }) => `${(isActive ? 'bg-gray-600' : 'hover:bg-gray-700')} p-2 flex w-max`}>{content}</NavLink>;
+}
diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css
@@ -0,0 +1,11 @@
+.homepage-hero {
+    background-image: url(https://media.discordapp.net/banners/958464581699768380/a_a0f6f9a67350267d4888a87ee31ad992.gif?size=512);
+    background-size: cover;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    min-height: 85vh;
+}
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
@@ -0,0 +1,24 @@
+import './HomePage.css';
+
+import React from 'react';
+
+import { Link } from 'react-router-dom';
+
+export default class HomePage extends React.Component {
+    componentDidMount() {
+        document.title = 'Place NL';
+    }
+
+    render() {
+        return <div className='homepage-hero bg-gray-900 text-white relative text-center flex items-stretch'>
+            <div className='bg-gray-500 bg-opacity-50 w-full flex justify-center items-center'>
+                <div className='m-10'>
+                    <h1 className='pt-2 text-6xl'>Place NL</h1>
+                    <h3 className='text-3xl mb-5'>De officiële website voor de Nederlandse ondernemingen op het canvas van /r/place</h3>
+                    <Link to='/timeline' className='m-5 text-xl border-2 border-blue-500 bg-blue-500 bg-opacity-50 p-2 rounded font-mono'>Tijdlijn</Link>
+                    <Link to='/orderhistory' className='m-2 text-xl border-2 border-blue-500 bg-blue-500 bg-opacity-50 p-2 rounded font-mono'>Templates</Link>
+                </div>
+            </div>
+        </div>;
+    }
+}
diff --git a/src/pages/orderhistory/OrderHistoryPage.js b/src/pages/orderhistory/OrderHistoryPage.js
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import Spinner from '../../design/Spinner';
+
+export default class OrderHistoryPage extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    componentDidMount() {
+        document.title = 'Ordergeschiedenis - Place NL';
+
+        fetch('https://2022-order-history.placenl.nl/data.min.json').then(async (res) => {
+            const data = await res.json();
+
+            //data.mapHistory.reverse();
+
+            this.setState({
+                data
+            });
+        }).catch((reason) => {
+            this.setState({
+                error: `Er is een fout opgetreden. Probeert het later opnieuw. Foutmelding: ${reason}.`
+            });
+        })
+    }
+
+    getMapHistoryContents() {
+        var i = 0;
+        return this.state.data.mapHistory.map((entry) => {
+            // Skip first empty canvas.
+            if (i++ === 0) return;
+            return <div className='md:flex gap-2 mb-5 mt-5' id={entry.file}>
+                <LazyLoadImage alt={entry.reason} placeholder={<Spinner />} src={`https://2022-order-history.placenl.nl/maps/${entry.file}`} width={512} height={entry.date >= 1648918955127 && entry.date <= 1649011535759 ? 256 : 512} className='max-w-full border-2 border-white rounded' />
+                <div>
+                    <h5 className='text-gray-400'>{new Date(entry.date).toLocaleString()}</h5>
+                    <h3 className='text-2xl'>{entry.reason}</h3>
+                    <p>
+                        <a href={`https://2022-order-history.placenl.nl/maps/${entry.file}`} download={entry.file} className='text-blue-400'><FontAwesomeIcon icon={faDownload} /> Template downloaden</a>
+                        <br />
+                        <a href={`https://2022-order-history.placenl.nl/maps/${entry.file}`} rel='noreferrer' target='_blank' className='text-blue-400'><FontAwesomeIcon icon={faArrowUpRightFromSquare} /> Template openen (in nieuw tablad)</a>
+                    </p>
+                </div>
+            </div>
+        });
+    }
+
+    render() {
+        if (this.state.error) {
+            return <div className='m-auto w-5/6 md:w-3/4'>
+                <div className='p-3 rounded border-2 border-red-500'>
+                    {this.state.error}
+                </div>
+            </div>;
+        }
+
+        if (!this.state.data) {
+            return <div className='m-auto w-5/6 md:w-3/4'>
+                <div class="flex justify-center items-center">
+                    <Spinner />
+                </div>
+            </div>;
+        }
+
+        return <div className='m-auto w-5/6 md:w-3/4'>
+            <h1 className='text-2xl'>Ordergeschiedenis</h1>
+            <p>
+                Op deze pagina kan je alle templates zien die naar de scripts van r/placeNL zijn gepushed, hoe laat ze zijn gepushed en waarom.
+                Deze orders / templates werden door zowel scripters als niet-scripters bekeken en gebruikt.
+            </p>
+            {this.getMapHistoryContents()}
+        </div>;
+    }
+}
diff --git a/src/pages/timeline/TimelinePage.css b/src/pages/timeline/TimelinePage.css
@@ -0,0 +1,25 @@
+.timeline-icon::after {
+    content: "";
+    background-color: #63738a;
+    display: block;
+    width: 2px;
+    height: 100%;
+    margin: auto;
+}
+
+.timeline-link {
+    color: #5198ef;
+    text-decoration: underline;
+}
+
+.timeline-link:hover {
+    color: #4785d2;
+}
+
+.timeline-link:active {
+    color: #3a6fae;
+}
+
+.timeline-image {
+    border-radius: 5px;
+}