diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..84a733c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+_site
+_cache
+.DS_Store
+deno.lock
\ No newline at end of file
diff --git a/_config.js b/_config.js
new file mode 100644
index 0000000..1af1a10
--- /dev/null
+++ b/_config.js
@@ -0,0 +1,28 @@
+import lume from "lume/mod.ts";
+import base_path from "lume/plugins/base_path.ts";
+import metas from "lume/plugins/metas.ts";
+import postcss from "lume/plugins/postcss.ts";
+import autoDependency from "https://deno.land/x/oi_lume_utils@v0.4.0/processors/auto-dependency.ts";
+
+const site = lume({
+ src: './src',
+ location: new URL("https://open-innovations.org.github.io/markdown-to-vento")
+ });
+
+site.process([".html"], (pages) => pages.forEach(autoDependency));
+
+site.use(base_path());
+
+site.use(metas({
+ defaultPageData: {
+ title: 'title',
+ },
+ }));
+
+site.use(postcss());
+
+site.copy('.nojekyll');
+
+site.copy('assets/js');
+
+export default site;
diff --git a/deno.json b/deno.json
new file mode 100644
index 0000000..0c488f4
--- /dev/null
+++ b/deno.json
@@ -0,0 +1,15 @@
+{
+ "imports": {
+ "lume/": "https://deno.land/x/lume@v2.3.0/"
+ },
+ "tasks": {
+ "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
+ "build": "deno task lume",
+ "serve": "deno task lume -s"
+ },
+ "compilerOptions": {
+ "types": [
+ "lume/types.ts"
+ ]
+ }
+}
diff --git a/src/.nojekyll b/src/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/src/_data.yaml b/src/_data.yaml
new file mode 100644
index 0000000..4e64cde
--- /dev/null
+++ b/src/_data.yaml
@@ -0,0 +1,49 @@
+layout: template/page.vto
+
+# Override the site logo colour here. Any CSS colour will work.
+logo_colour: black
+
+# Override the header class here. See https://open-innovations.org/brand for colour classes
+header_class: c5-bg
+
+# Automatically adds meta and social tags
+# See https://lume.land/plugins/metas/
+metas:
+ site: Markdown to Vento Converter
+ description: A simple tool to convert markdown files to vento with appropriate styling.
+ image: https://open-innovations.org/resources/images/logos/oi-square.png
+ twitter: openinnovates
+ lang: en
+ keywords: [open, data, leeds, innovation]
+
+footer: "
+
Notes:
+
+
+ Front Matter Handling:
+
+ Front matter, marked by ---, is included in the output without modification.
+
+
+
+ Code Block Handling:
+
+ Code blocks are detected by ``` delimiters.
+ Code blocks are wrapped in <pre><code> tags, preserving their content.
+
+
+
+ HTML Tag Detection:
+
+ HTML content is left unchanged and not wrapped in additional tags.
+
+
+
+ Text Wrapping:
+
+ Non-code, non-HTML, non-front matter text is wrapped in <p> tags.
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/_includes/template/base.vto b/src/_includes/template/base.vto
new file mode 100644
index 0000000..70d3ce0
--- /dev/null
+++ b/src/_includes/template/base.vto
@@ -0,0 +1,26 @@
+
+
+
+ {{ title }} | {{ metas.site }}
+
+
+ {{ content |> safe }}
+
+
{{ title }}
+{{ content }}
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
new file mode 100644
index 0000000..2da058c
--- /dev/null
+++ b/src/assets/css/style.css
@@ -0,0 +1,11 @@
+@charset "utf-8";
+/* These are imported by the PostCSS processor. Source is in the `_includes/css` folder */
+@import 'css/reset.css';
+@import 'css/building-blocks/stack.css';
+
+/*
+ All the standard OI stuff is included here.
+ Could be modularised, given PostCSS could enable much smaller css packages to be created.
+*/
+@import 'css/oi.css';
+@import 'css/file-drop.css';
\ No newline at end of file
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
new file mode 100644
index 0000000..5c82882
--- /dev/null
+++ b/src/assets/js/app.js
@@ -0,0 +1,105 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const dropArea = document.getElementById('drop-area');
+ const fileElem = document.getElementById('fileElem');
+ const downloadLink = document.getElementById('download-link');
+
+ dropArea.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropArea.classList.add('hover');
+ });
+
+ dropArea.addEventListener('dragleave', () => {
+ dropArea.classList.remove('hover');
+ });
+
+ dropArea.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropArea.classList.remove('hover');
+ const files = e.dataTransfer.files;
+ handleFiles(files);
+ });
+
+ fileElem.addEventListener('change', () => {
+ const files = fileElem.files;
+ handleFiles(files);
+ });
+
+ function handleFiles(files) {
+ if (files.length > 0) {
+ const file = files[0];
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ const content = e.target.result;
+ const convertedContent = convertMarkdownToVTO(content);
+ createDownloadableFile(convertedContent);
+ };
+
+ reader.readAsText(file);
+ }
+ }
+
+ function convertMarkdownToVTO(markdown) {
+ let lines = markdown.split('\n');
+ let inFrontMatter = false;
+ let inCodeBlock = false;
+ let inHtmlTag = false;
+ let result = [];
+
+ const openHtmlTagPattern = /<([a-zA-Z][a-zA-Z0-9]*)[^>]*>/;
+ const closeHtmlTagPattern = /<\/([a-zA-Z][a-zA-Z0-9]*)>/;
+
+ for (let line of lines) {
+ if (line.trim() === '---') {
+ inFrontMatter = !inFrontMatter;
+ result.push(line);
+ continue;
+ }
+
+ if (inFrontMatter) {
+ result.push(line);
+ continue;
+ }
+
+ if (line.trim().startsWith('```')) {
+ if (!inCodeBlock) {
+ const language = line.trim().slice(3);
+ result.push(``);
+ } else {
+ result.push('${line}
`);
+ }
+ }
+ }
+
+ return result.join('\n');
+ }
+
+ function createDownloadableFile(content) {
+ const blob = new Blob([content], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+ downloadLink.href = url;
+ downloadLink.style.display = 'block'; // Make the download link visible
+ }
+});
diff --git a/src/index.vto b/src/index.vto
new file mode 100644
index 0000000..1af999e
--- /dev/null
+++ b/src/index.vto
@@ -0,0 +1,26 @@
+---
+title: Markdown to Vento Converter
+---
+
+ On our housing site we recently started
+ documenting some of our code using
+ jupyter notebooks. It's easy to convert these to markdown format using jupyter nbconvert, and Lume
+ supports markdown as a template format. This worked fine until we wanted to put
+ OI Lume charts onto those pages as well. At this point, we needed to convert the files to Vento to allow us to load
+ the charts and maintain the styling for the code blocks. This was a tedious manual process, so we made a tool to do it for us.
+ This programme runs in the browser - nothing ever leaves your computer.
+
+
+ First, convert your notebook using the command line: jupyter nbconvert your_notebok.ipynb --to markdown.
+ The output will be saved in your current working directory. Read the docs
+ for more detailed info. Then use this tool to convert the markdown to vento.
+
+
+
Drop a markdown file here
+
or
+
+
Download Converted File
+
+