From 81ececda1a99784abb6753a8f600f1fd25949f8c Mon Sep 17 00:00:00 2001 From: Aaron Yarborough Date: Tue, 12 Mar 2024 19:51:15 +0000 Subject: [PATCH] Fun page --- content/fun/javascript-html5-tile-editor.md | 8 ++++ content/pages/cv.yml | 5 +++ package-lock.json | 1 + package.json | 1 + public/admin/config.yml | 10 +++++ src/components/CV/CV.jsx | 6 +-- src/components/CV/CV.module.css | 10 ----- src/components/Footer/Footer.module.css | 6 ++- src/components/Header/Header.jsx | 1 + src/lib/content.js | 23 +++++++++++ src/lib/helpers.js | 3 ++ src/pages/fun/[slug].js | 45 +++++++++++++++++++++ src/pages/fun/index.js | 41 +++++++++++++++++++ src/pages/index.js | 28 +++++++++++-- src/styles/globals.css | 10 +++++ 15 files changed, 181 insertions(+), 17 deletions(-) create mode 100644 content/fun/javascript-html5-tile-editor.md create mode 100644 src/lib/content.js create mode 100644 src/lib/helpers.js create mode 100644 src/pages/fun/[slug].js create mode 100644 src/pages/fun/index.js diff --git a/content/fun/javascript-html5-tile-editor.md b/content/fun/javascript-html5-tile-editor.md new file mode 100644 index 0000000..952298b --- /dev/null +++ b/content/fun/javascript-html5-tile-editor.md @@ -0,0 +1,8 @@ +--- +title: JavaScript/HTML5 tile editor +desc: A rough tile editor for a top-down, 2D, tile-based browser game project. +--- +I built this 2D tile editor using an HTML 5 canvas and vanilla JS in a few days, as I wanted to create a bespoke editor for my tile game rather than relying on the open-source variants. The reason for this was that I was using my own file format for level files. + +[![YouTube thumbnail](https://i3.ytimg.com/vi/7w3fTHYEGbE/maxresdefault.jpg)](https://www.youtube.com/watch?v=7w3fTHYEGbE) +[Watch YouTube video](https://www.youtube.com/watch?v=7w3fTHYEGbE) diff --git a/content/pages/cv.yml b/content/pages/cv.yml index 7a26a26..e287f90 100644 --- a/content/pages/cv.yml +++ b/content/pages/cv.yml @@ -22,6 +22,11 @@ languages: - name: Arabic (Levantine) proficiency: Elementary experience: + - position: Lead Consultant + employer: Hippo + start: Feb. 2024 + end: Present + desc: "-" - position: Software Development Tutor employer: Yarbz Digital Ltd start: Sep. 2023 diff --git a/package-lock.json b/package-lock.json index 13ea653..7b8866f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@babel/preset-react": "^7.23.3", "eslint": "^8", "eslint-config-next": "14.1.1", + "front-matter": "^4.0.2", "frontmatter-markdown-loader": "^3.7.0", "husky": "^9.0.11", "js-yaml": "^4.1.0", diff --git a/package.json b/package.json index 477230e..11b8c11 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@babel/preset-react": "^7.23.3", "eslint": "^8", "eslint-config-next": "14.1.1", + "front-matter": "^4.0.2", "frontmatter-markdown-loader": "^3.7.0", "husky": "^9.0.11", "js-yaml": "^4.1.0", diff --git a/public/admin/config.yml b/public/admin/config.yml index efb3795..feac5d2 100644 --- a/public/admin/config.yml +++ b/public/admin/config.yml @@ -15,6 +15,16 @@ collections: - {label: Image, name: image, widget: image, required: false} - {label: "You Will Need", name: "you-will-need", widget: "markdown" } - {label: "Recipe", name: "body", widget: "markdown" } + + - name: fun + label: Fun + folder: content/fun + create: true + fields: + - {label: Title, name: title, widget: string} + - {label: Description, name: desc, widget: text} + - {label: Body, name: body, widget: markdown } + - name: "pages" label: "Pages" files: diff --git a/src/components/CV/CV.jsx b/src/components/CV/CV.jsx index 192c5d9..df4a4a4 100644 --- a/src/components/CV/CV.jsx +++ b/src/components/CV/CV.jsx @@ -46,9 +46,9 @@ function CVWorkExperience ({ position, employer, start, end, children }) {
{employer} -
- - -
+ + - +
diff --git a/src/components/CV/CV.module.css b/src/components/CV/CV.module.css index 2d4618a..aa23271 100644 --- a/src/components/CV/CV.module.css +++ b/src/components/CV/CV.module.css @@ -18,16 +18,6 @@ justify-content: space-between; } -.cv ul { - margin-left: 0; - list-style: inside; - list-style-type: circle; -} - -.cv ul li:not(:last-child) { - margin-bottom: 10px; -} - @media (max-width: 768px) { .cv { flex-direction: column; diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css index e13a4a0..6afd290 100644 --- a/src/components/Footer/Footer.module.css +++ b/src/components/Footer/Footer.module.css @@ -1,3 +1,7 @@ .footer nav:first-child a { text-transform: lowercase; -} \ No newline at end of file +} + +.footer nav li { + margin-bottom: 0; +} diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index cbfcbe7..148c08a 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -10,6 +10,7 @@ function Header () { Home {/* Writing */} CV + Fun ) diff --git a/src/lib/content.js b/src/lib/content.js new file mode 100644 index 0000000..e13870a --- /dev/null +++ b/src/lib/content.js @@ -0,0 +1,23 @@ +import fs from 'fs' +import fm from 'front-matter' +import showdown from 'showdown' +import { toSlug } from './helpers' + +export function getMarkdownEntry (path) { + const fileContents = fs.readFileSync(path, { + encoding: 'utf-8' + }) + + const { attributes, body } = fm(fileContents) + + const converter = new showdown.Converter() + const html = converter.makeHtml(body) + + const slug = toSlug(path.substring(path.lastIndexOf('/'))) + + return { + attributes, + html, + slug + } +} diff --git a/src/lib/helpers.js b/src/lib/helpers.js new file mode 100644 index 0000000..211d8c0 --- /dev/null +++ b/src/lib/helpers.js @@ -0,0 +1,3 @@ +export function toSlug (input) { + return input.substring(0, input.indexOf('.')).trim() +} diff --git a/src/pages/fun/[slug].js b/src/pages/fun/[slug].js new file mode 100644 index 0000000..d124ebb --- /dev/null +++ b/src/pages/fun/[slug].js @@ -0,0 +1,45 @@ +import { toSlug } from '@/lib/helpers' +import React from 'react' +import fs from 'fs' +import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout' +import { getMarkdownEntry } from '@/lib/content' + +function FunSingle ({ attributes, html, slug }) { + return ( + +
+
+

{attributes.title}

+

{attributes.desc}

+
+
+
+
+ + ) +} + +export function getStaticPaths () { + const fun = fs.readdirSync('./content/fun', { withFileTypes: true }) + + const paths = fun.map((dirent) => ({ + params: { + slug: toSlug(dirent.name) + } + })) + + console.log(paths) + + return { + fallback: false, + paths + } +} + +export function getStaticProps ({ params }) { + const path = `./content/fun/${params.slug}.md` + const entry = getMarkdownEntry(path) + return { props: { ...entry } } +} + +export default FunSingle diff --git a/src/pages/fun/index.js b/src/pages/fun/index.js new file mode 100644 index 0000000..f2870e2 --- /dev/null +++ b/src/pages/fun/index.js @@ -0,0 +1,41 @@ +import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout' +import React from 'react' +import fs from 'fs' +import Grid from '@/components/Grid/Grid' +import Link from 'next/link' +import { getMarkdownEntry } from '@/lib/content' + +function Fun ({ entries }) { + return ( + +
+

Fun

+

Hobby projects, helpful scripts, and other fun bits and bobs!

+
+ +
+ + {entries.map((e) => ( +
+

{e.attributes.title}

+

{e.attributes.desc}

+ Read more +
+ ))} + +
+ + ) +} + +export function getStaticProps () { + const fun = fs.readdirSync('./content/fun', { withFileTypes: true }) + + const entries = fun.map((dirent) => + getMarkdownEntry(`${dirent.path}/${dirent.name}`) + ) + + return { props: { entries } } +} + +export default Fun diff --git a/src/pages/index.js b/src/pages/index.js index 03a9231..0424df0 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -21,12 +21,34 @@ export default function Home () { This is my little corner of the web! I've always had a habit of 'lurking' online; I barely interact with the content I consume, and you'll rarely if ever catch me posting or commenting - on something. That said, this little site endeavours to pull me by my - ankles out of the weeds in the great digital park we find ourselves, - and encourage me to share a bit more about myself online. + on something. That said, this little site endeavours to encourage me + to share a bit more about myself online.

+
+

Tech I like

+ +
+

Where to find me

diff --git a/src/styles/globals.css b/src/styles/globals.css index 0f788c3..c0a6fa6 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -6,3 +6,13 @@ html, body { h1, h2, h3 { font-weight: 600; } + +ul { + margin-left: 0; + list-style: inside; + list-style-type: circle; +} + +ul li:not(:last-child) { + margin-bottom: 10px; +} \ No newline at end of file