initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

gatsby-browser.js

@@ -0,0 +1,2 @@
+import './src/styles/global.scss';
+import 'prismjs/themes/prism-okaidia.css';

gatsby-config.js

@@ -6,5 +6,93 @@
 
 module.exports = {
   /* Your site config here */
-  plugins: [],
+    plugins: [
+	{
+	    resolve: `gatsby-plugin-sass`,
+	    options: {
+		postCssPlugins: [
+		    require("tailwindcss"),
+		]
+	    }
+	},
+	{
+	    resolve: 'gatsby-source-filesystem',
+	    options: {
+		name: 'markdown-pages',
+		path: `${__dirname}/src/markdown-pages`
+	    }
+	},
+	{
+	    resolve: `gatsby-transformer-remark`,
+	    options: {
+		plugins: [
+		    {
+			resolve: `gatsby-remark-prismjs`,
+			options: {
+			    // Class prefix for <pre> tags containing syntax highlighting;
+			    // defaults to 'language-' (e.g. <pre class="language-js">).
+			    // If your site loads Prism into the browser at runtime,
+			    // (e.g. for use with libraries like react-live),
+			    // you may use this to prevent Prism from re-processing syntax.
+			    // This is an uncommon use-case though;
+			    // If you're unsure, it's best to use the default value.
+			    classPrefix: "language-",
+			    // This is used to allow setting a language for inline code
+			    // (i.e. single backticks) by creating a separator.
+			    // This separator is a string and will do no white-space
+			    // stripping.
+			    // A suggested value for English speakers is the non-ascii
+			    // character '›'.
+			    inlineCodeMarker: null,
+			    // This lets you set up language aliases.  For example,
+			    // setting this to '{ sh: "bash" }' will let you use
+			    // the language "sh" which will highlight using the
+			    // bash highlighter.
+			    aliases: {},
+			    // This toggles the display of line numbers globally alongside the code.
+			    // To use it, add the following line in gatsby-browser.js
+			    // right after importing the prism color scheme:
+			    //  require("prismjs/plugins/line-numbers/prism-line-numbers.css")
+			    // Defaults to false.
+			    // If you wish to only show line numbers on certain code blocks,
+			    // leave false and use the {numberLines: true} syntax below
+			    showLineNumbers: false,
+			    // If setting this to true, the parser won't handle and highlight inline
+			    // code used in markdown i.e. single backtick code like `this`.
+			    noInlineHighlight: false,
+			    // This adds a new language definition to Prism or extend an already
+			    // existing language definition. More details on this option can be
+			    // found under the header "Add new language definition or extend an
+			    // existing language" below.
+			    languageExtensions: [
+				{
+				    language: "superscript",
+				    extend: "javascript",
+				    definition: {
+					superscript_types: /(SuperType)/,
+				    },
+				    insertBefore: {
+					function: {
+					    superscript_keywords: /(superif|superelse)/,
+					},
+				    },
+				},
+			    ],
+			    // Customize the prompt used in shell output
+			    // Values below are default
+			    prompt: {
+				user: "root",
+				host: "localhost",
+				global: false,
+			    },
+			    // By default the HTML entities <>&'" are escaped.
+			    // Add additional HTML escapes by providing a mapping
+			    // of HTML entities and their escape value IE: { '}': '&#123;' }
+			    escapeEntities: {},
+			},
+		    },
+		],
+	    },
+	},
+    ],
 }

gatsby-node.js

@@ -0,0 +1,34 @@
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions
+  const blogPostTemplate = require.resolve(`./src/templates/mdPageTemplate.tsx`)
+  const result = await graphql(`
+    query GenerateMarkdownPages{
+      allMarkdownRemark(
+        limit: 1000
+      ) {
+        edges {
+          node {
+            frontmatter {
+              slug
+            }
+          }
+        }
+      }
+    }
+  `)
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
+  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    createPage({
+      path: 'blog/' + node.frontmatter.slug,
+      component: blogPostTemplate,
+      context: {
+        // additional data can be passed via context
+        slug: node.frontmatter.slug,
+      },
+    })
+  })
+}

package.json

@@ -14,9 +14,21 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.4.0",
+    "autoprefixer": "^10.2.5",
     "gatsby": "^3.2.1",
+    "gatsby-plugin-graphql-codegen": "^2.7.1",
+    "gatsby-plugin-postcss": "^4.3.0",
+    "gatsby-plugin-sass": "^4.3.0",
+    "gatsby-remark-prismjs": "^5.0.0",
+    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-transformer-remark": "^4.0.0",
+    "postcss": "^8.2.10",
+    "prismjs": "^1.23.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "sass": "^1.32.10",
+    "tailwindcss": "^2.1.1"
   },
   "devDependencies": {
     "prettier": "2.2.1"

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = () => ({
+  plugins: [require("tailwindcss")],
+})

src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import NavHeader from './NavHeader';
+
+const Layout: React.FC<{}> = (props) =>  {
+    return (
+	<div className="bg-gray-900 text-gray-200 min-h-screen min-w-screen font-main">
+	    <div className="mx-auto max-w-screen-lg container pt-1.5 p-0 sm:p-2">
+		<NavHeader/>
+		<main>
+		{props.children}
+		</main>
+	    </div>
+	</div>	
+    )
+};
+
+export default Layout;

src/components/NavHeader.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import logo from '../../static/RB-w.png';
+import {Link} from 'gatsby';
+
+const NavHeader: React.FC<{}> = (props) =>  {
+  const navItems: {title: string, url: string}[][] = [
+    [
+      {title: "Home", url: "/"},
+      {title: "Blog", url: "/blog"},
+      {title: "Contact", url: "/contact"}
+    ],
+    [
+      {title: "Twitter", url: "https://twitter.com/rikksolo"},
+      {title: "GitLab", url: "https://gitlab.riksolo.com/riksolo"}
+    ],
+    [
+      {title: "RBLicht", url: "https://rblicht.nl"},
+      {title: "RBSolutions", url: "https://rbsolutions.cc"}
+    ]
+  ]
+
+  const rendered = navItems.map((item, index)=>{
+    const renderedChild = item.map((child, index)=>{
+      return (
+        <>
+          {child.url.startsWith('http') ? (
+            <a
+              href={child.url}
+            >
+              {child.title}
+            </a>
+          ): (
+            <Link
+              activeClassName="text-blue-300"
+              partiallyActive={child.url !== "/"}
+              to={child.url}
+            >
+            {child.title}
+            </Link>
+          )}
+          {index < item.length - 1 ? <span className="mx-1.5 align-middle">-</span> :null}
+        </>
+      );
+    })
+    return (
+      <>
+        {renderedChild}
+        <br className="md:hidden" />
+        {index < navItems.length - 1 ? <span className="mx-2 hidden md:inline">|</span> : null}
+      </>
+    );
+  });
+
+  return (
+    <>
+      <a href="/" className="text-gray-100 no-underline">
+        <img className="h-5 inline mr-2" src={logo}/>
+        <span className="align-middle font-bold text-lg">
+          Rik Berkelder
+        </span>
+      </a>
+
+      <br className="md:hidden" />
+      <span className="hidden md:inline mx-2 align-middle">|</span>
+      <span className="align-middle">
+        {rendered}
+      </span>
+
+      <hr className="border-gray-800 my-2"/>
+	  </>
+  );
+};
+
+export default NavHeader;

src/markdown-pages/post2.md

@@ -0,0 +1,9 @@
+---
+title: "Hello World"
+slug: "test-2"
+date: "2021-04-17"
+---
+
+hello, hello!
+
+how are you?

src/markdown-pages/test.md

@@ -0,0 +1,54 @@
+---
+slug: "test"
+title: "MD Test Page"
+date: "2021-04-17"
+---
+# h1
+## h2
+### h3
+##### h4
+Markdown Test Page
+
+---
+
+test wow test hello
+
+test
+
+*test*
+**test**
+inline `code formatting` like a boss
+
+---
+
+```
+code 
+block
+hello
+  there
+```
+
+---
+```ts
+let hello: string = "test";
+console.log(hello);
+
+const test = {
+    one: "three"
+};
+```
+
+---
+
+[Visit google!](https://google.com)
+
+---
+
+| Heading 1 | Heading 2                               | Heading 3 |
+|:----------|:----------------------------------------|:----------|
+| One       | Two                                     | Three     |
+| Four      | Test Test Hello Hello Long Content Ahoy | Five          |
+
+---
+
+

src/pages/blog.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {graphql, PageProps, Link} from "gatsby";
+import {Query } from '../../gatsby-graphql';
+import Layout from '../components/Layout';
+
+const Blog: React.FC<PageProps<Query>> = (props) => {
+  const remark = props.data?.allMarkdownRemark?.edges;
+
+  const links = remark.map(edge => {
+    return (
+      <li key={edge.node.frontmatter.slug}>
+        <Link to={`/blog/${edge.node.frontmatter.slug}`} className="no-underline">
+          <span className="underline">
+          {edge.node.frontmatter.title}
+          </span>
+          <span className="text-gray-300 text-sm">
+            <> - </>
+            <span>{edge.node.frontmatter.date}</span>
+          </span>
+        </Link>
+      </li>
+    )
+  })
+
+    return (
+      <Layout>
+        <h1 className="mb-4">Blog</h1>
+        <ul>
+          {links}
+        </ul>
+      </Layout>
+    );
+};
+
+export default Blog;
+
+export const pageQuery = graphql`
+  query {
+    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
+      edges {
+        node {
+          id
+          frontmatter {
+            date(formatString: "MMMM DD, YYYY")
+            slug
+            title
+          }
+        }
+      }
+    }
+  }
+`

src/pages/contact.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import Layout from '../components/Layout';
+
+const Contact: React.FC<{}> = () => {
+  return (
+    <Layout>
+      <h1 className="mb-4">Contact Info</h1>
+          <h2>E-Mail</h2>
+          <div className="my-2">mail@riksolo.com</div>
+
+          <h2 className="mt-4">Social Media</h2>
+          <ul className="my-2">
+            {[
+              {url: "https://twitter.com/rikksolo", title: "Twitter"},
+              {url: "https://instagram.com/rikberkelder", title: "Instagram"},
+              {url: "https://github.com/rikberkelder", title: "Github"},
+              {url: "https://gitlab.riksolo.com/riksolo", title: "Gitlab"}
+            ].map(item => {
+              return <li><a href={item.url}>{item.title}</a></li>
+            })}
+          </ul>
+    </Layout>
+  );
+};
+
+export default Contact;

src/pages/index.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import Layout from '../components/Layout';
+
+const Home: React.FC<{}> = () => {
+    return (
+	<Layout>
+	    <h1 className="text-4xl">Rik Berkelder</h1>
+	    <span>Web Developer & Lighting Designer</span>
+
+	    <h2 className="mt-4">Skills</h2>
+	    <div className="grid lg:grid-cols-2">
+		<div>
+		    <span className="text-sm text-gray-400 font-bold mt-1 block">Software</span>
+		    <ul className="list-dash">
+			<li>TypeScript, GraphQL</li>
+			<li>React, React Native, Angular, Node, Gatsby, Electron</li>
+			<li>Docker, Heroku, GitLab CI</li>
+			<li>Linux</li>
+		    </ul>
+		</div>
+		<div>
+		    <span className="text-sm text-gray-400 font-bold mt-3 lg:mt-1 block">Lighting &amp; AV</span>
+		    <ul className="list-dash">
+			<li>GrandMA2/3, Hog4, Avolites Titan, Obsidian ONYX</li>
+			<li>Capture, WYSIWYG, Vectorworks, MA3D</li>
+			<li>ATEM, VMix, Arkaos, Resolume</li>
+			<li>Timecode, Remote Production, System Integration</li>
+		    </ul>
+		</div>
+	    </div>
+
+	    <h2 className="mt-4 mb-1">Highlighted Projects/Clients</h2>
+	    <ul className="list-dash">
+		<li><a target="_blank" href="https://aitum.tv">Aitum</a> - System integration software for twitch streamers</li>
+		<li><a target="_blank" href="https://gitlab.riksolo.com/riksolo/react-mqtt-controls">React MQTT Controls</a> - A React component library to quickly build custom MQTT interfaces</li>
+		<li><a target="_blank" href="https://twitch.tv/mrgregles">MrGregles</a> - Fully remote, real-time, live lighting workflow & operation</li>
+		<li><a target="_blank" href="http://ecolicht.nl">EcoLicht</a> - Lighting Operator for several events</li>
+		<li><a target="_blank" href="https://rn7.nl">RN7</a> - Custom digital signage for Visual Radio studio</li>
+		<li><a target="_blank" href="https://iambnb.nl">IamB&amp;B</a> - Custom back office solution for vacation rental property management</li>
+	    </ul>
+	</Layout>
+    ); 
+};
+
+export default Home;

src/styles/global.scss

@@ -0,0 +1,49 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
+
+h1, h2, h3, h4, h5 {
+    @apply font-bold;
+}
+
+h1 {
+    @apply text-3xl;
+}
+
+h2 {
+    @apply text-xl;
+}
+
+h3 {
+    @apply text-lg;
+}
+
+hr {
+    @apply border-gray-700 my-3;
+}
+
+.gatsby-highlight > pre, code.language-text {
+    @apply bg-gray-800 rounded-none #{!important};
+}
+
+a {
+    @apply underline text-blue-500;
+}
+
+p {
+    @apply mb-1;
+}
+
+table {
+    @apply table-auto;
+
+    td, th {
+	@apply px-2 py-1;
+    }
+}
+
+ul.list-dash > li::before{
+   content: "- " 
+}

src/templates/mdPageTemplate.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {graphql, PageProps, Link} from 'gatsby';
+import Layout from '../components/Layout';
+import {Query} from '../../gatsby-graphql';
+
+const MdPageTemplate: React.FC<PageProps<Query>> = ({data}) => {
+  const post = data.markdownRemark;
+    return (
+      <Layout>
+        <Link to="/blog" className="block mb-2">
+        &lt;&lt; Back to post list
+        </Link>
+        <h1>{post.frontmatter?.title}</h1>
+        <span className="text-sm">{post.frontmatter?.date}</span>
+        <hr className="my-4"/>
+        <div dangerouslySetInnerHTML={{__html: post.html}}>
+        </div>
+      </Layout>
+    );
+}
+
+export default MdPageTemplate;
+
+export const pageQuery = graphql`
+  query MarkdownPageTemplate($slug: String!) {
+    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        slug
+        date(formatString: "MMMM DD, YYYY")
+        title
+      }
+    }
+  }
+`;

tailwind.config.js

@@ -0,0 +1,24 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  theme: {
+    screens: {
+      sm: '480px',
+      md: '780px',
+      lg: '990px',
+      xl: '1440px',
+    },
+    colors: {
+      gray: colors.coolGray,
+      blue: colors.cyan,
+    },
+    fontFamily: {
+	main: ['Inconsolata', 'sans-serif'],
+      sans: ['sans-serif'],
+      serif: ['serif'],
+    },
+  },
+    plugins: [
+	require('@tailwindcss/typography'),
+    ]
+}