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: 0Here 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();
}
}