Skip to content

Instantly share code, notes, and snippets.

@naranyala

naranyala/single-file-mithril-goober-blog.html

Last active July 17, 2025 19:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save naranyala/24900f89e88c8bcf700eff9e18447bc8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save naranyala/24900f89e88c8bcf700eff9e18447bc8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
single-file-mithril-goober-blog.html
<!DOCTYPE html>
<html>
<head>
<title>Kotlin/Native Guide</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/mithril@2.2.2/mithril.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/goober@2.1.13/dist/goober.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-kotlin.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script>
const { css } = goober;
// CSS variables
const theme = {
bg: '#141414',
surface: '#1f1f1f',
teal: '#4dd0e1',
coral: '#ff7043',
text: '#e0e0e0',
border: '#333',
metaText: '#c0c0c0'
};
// Styles with fixes for border issue
const styles = {
container: css`
min-height: 100vh;
background: ${theme.bg};
display: flex;
flex-direction: column;
align-items: center;
padding: 120px 20px;
margin: -20px -8px;
font-family: 'Inconsolata', monospace;
color: ${theme.text};
box-sizing: border-box;
* {
box-sizing: border-box; /* Global box-sizing to prevent border inflation */
}
`,
card: css`
max-width: 700px;
width: 100%;
background: ${theme.surface};
border-radius: 8px;
padding: 1.5rem;
margin: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Replace border with shadow for depth */
`,
title: css`
font-size: 1.8rem;
color: ${theme.teal};
margin-bottom: 0.5rem;
font-weight: 700;
`,
meta: css`
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 0.9rem;
color: ${theme.metaText};
`,
badge: css`
background: #222;
color: ${theme.coral};
border-radius: 4px;
padding: 0.2em 0.6em;
font-weight: 600;
`,
article: css`
line-height: 1.7;
font-size: 1rem;
`,
h2: css`
color: ${theme.coral};
font-size: 1.4rem;
margin: 1rem 0 0.5rem;
font-weight: 600;
`,
p: css`
color: ${theme.text};
margin: 0.5em 0;
`,
codeInline: css`
background: #222;
color: ${theme.teal};
padding: 0.1em 0.3em;
border-radius: 4px;
font-family: 'Inconsolata', monospace;
`,
codeBlock: css`
border-radius: 6px;
margin: 1rem 0;
overflow-x: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
`,
tagRow: css`
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
flex-wrap: wrap;
`,
tag: css`
background: #222;
color: ${theme.teal};
border: 1px solid ${theme.coral};
border-radius: 6px;
padding: 0.2em 0.6em;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
&:hover {
background: ${theme.coral};
color: ${theme.bg};
}
&:focus {
outline: 2px solid ${theme.teal};
}
`,
'@media (max-width: 600px)': {
card: css`
padding: 1.2rem;
`,
title: css`
font-size: 1.5rem;
`
}
};
// Blog post data
const post = {
title: "Getting Started with Kotlin/Native",
meta: ["Kotlin", "By dev", "2025"],
content: [
{type:"p", text:"Kotlin/Native enables-Kotlin code to run without a JVM, targeting platforms like iOS, Linux, Windows, and macOS. It lets you build truly native apps with full interop to C."},
{type:"h2", text:"Hello World Example"},
{type:"code", text:`fun main() {\n println("Hello, Kotlin/Native!")\n}`},
{type:"h2", text:"Building a Native Executable"},
{type:"p", text:"Compile your Kotlin file to a native binary with the `kotlinc-native` command:"},
{type:"code", text:`kotlinc-native hello.kt -o hello\n./hello`},
{type:"h2", text:"Interop with C Libraries"},
{type:"p", text:"Kotlin/Native can directly call C functions. Just define a .def file and use `cinterop` to generate bindings."},
{type:"code", text:`headers = myclib.h\npackage = myclib\nlinkerOpts = -L/path/to/lib -lmyclib`},
{type:"h2", text:"Resources"},
{type:"p", text:"- Official docs: `https://kotlinlang.org/docs/native-overview.html`\n- JetBrains GitHub: `https://github.com/JetBrains/kotlin-native`"}
],
tags: ["Kotlin", "Kotlin/Native", "Multiplatform"]
};
// Inline code component
const CodeInline = {
view: ({attrs: {t}}) => m('code', {class: styles.codeInline}, t)
};
// App
const App = {
oncreate: () => Prism.highlightAll(),
view: () => m('div', {class: styles.container}, [
m('div', {class: styles.card}, [
m('h1', {class: styles.title}, post.title),
m('div', {class: styles.meta}, post.meta.map(t =>
m('span', {class: styles.badge}, t))),
m('div', {class: styles.article}, post.content.map(item =>
item.type === 'p'
? m('p', {class: styles.p},
item.text.split(/`(.+?)`/g).map((t, i) =>
i % 2 ? m(CodeInline, {t}) : t
)
)
: item.type === 'h2'
? m('h2', {class: styles.h2}, item.text)
: item.type === 'code'
? m('pre', {class: styles.codeBlock}, m('code', {class: "language-kotlin"}, item.text))
: null
)),
m('div', {class: styles.tagRow}, post.tags.map(t =>
m('a', {class: styles.tag, href: '#'}, t)))
])
])
};
m.mount(document.getElementById('app'), App);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment