Corné Dorrestijn

My new fancy blog

Welcome to my new blog, on this page i'm currently testing out features i'm implementing on this website. For example to test some markdown features. Or to test if I can include React components like using these MDX files.

ReScript

This blog supports readonml components as well, for example this counter:

Count: 0

Here is the source of the counter component:

type action =
  | Add
  | Min;

type state = {count: int};

let counterReducer = (state, action) =>
  switch (action) {
  | Add => {count: state.count + 1}
  | Min => {count: state.count - 1}
  };

module Styles = {
  open Css;

  let counter =
    style([
      background(hex("ddd")),
      display(inlineBlock),
      padding2(~v=px(5), ~h=px(10)),
    ]);
};

[@react.component]
let make = () => {
  let (state, dispatch) = React.useReducer(counterReducer, {count: 0});

  let countMsg = "Count: " ++ string_of_int(state.count);
  <div>
    <Button onClick={_ => dispatch(Min)}> {React.string("-")} </Button>
    <strong className=Styles.counter> {React.string(countMsg)} </strong>
    <Button onClick={_ => dispatch(Add)}> {React.string("+")} </Button>
  </div>;
};

let default = make;

It is even possible to include OCaml, here is the result of fact 5;;: 120

let fact n =
    let result = ref 1 in
    for i = 2 to n do
      result := i * !result
    done;
    !result;;

Snippets

Code blocks are renderd using refractor.

TSX:

import Refractor from 'react-refractor'
import { useEffect, useState } from 'react'

export type SnippetProps = Refractor.Props

const languageCache: string[] = []

const Snippet = ({ language, ...props }: Refractor.Props) => {
  const [isLanguageLoaded, setIsLanguageLoaded] = useState<boolean>(false)
  useEffect(() => {
    if (!languageCache.includes(language)) {
      import(
        /* webpackMode: "lazy", webpackChunkName: "refractor-lang-[request]" */
        `refractor/lang/${language}`
      ).then((lang) => {
        Refractor.registerLanguage(lang.default)
        languageCache.push(language)
        setIsLanguageLoaded(true)
      })
    } else {
      setIsLanguageLoaded(true)
    }
  }, [language])

  return isLanguageLoaded ? (
    <Refractor {...props} language={language} />
  ) : (
    <pre className="language-clike">
      <code className="language-clike">{props.value}</code>
    </pre>
  )
}

export default Snippet

Clojure:

(ns example
  (:require [reagent.core :as r]))

(def click-count (r/atom 0))

(defn counting-component []
  [:div
   "The atom " [:code "click-count"] " has value: "
   @click-count ". "
   [:input {:type "button" :value "Click me!"
            :on-click #(swap! click-count inc)}]])

C++:

void Recorder::setCodec(const Codec &codec)
{
    if (this->codec() != codec)
    {
        settings.setValue(CODEC, codec);
        emit this->codecChanged();
    }
}

Debug tools