feat: changed export directory to brunocassol.com. Made HTML processi…

…ng simpler by using less regexes. Added more TODOs. Completed some TODOs.
ww9 · May 2, 2024 · 8bb06bb · 8bb06bb
1 parent 14f3535
commit 8bb06bb
Show file tree

Hide file tree

Showing 14 changed files with 2,166 additions and 267 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,39 @@ It is neatly generated by exporting a Joplin's notebook, processed using `node j
 
 The process is described here: https://brunocassol.com/blog/2023-02-08-How-I-blog-using-joplins-EXPORT-HTML-Di.html
 
-## TODO
+## Steps
+
+- In Joplin Desktop app, right click `brunocassol.com` notebook and export it to HTML Directory in `C:\dev\pessoal\ww9.github.io`.
+- In this project directory, run `npm install`
+- Then run `node joplin_to_github.js`
+- It will convert the notebook to html and generate files in `docs` which is what GitHub pages is configured to serve in https://brunocassol.com/
+- It will also clear `C:\dev\pessoal\ww9.github.io\bruno.cassol.com` directory for your next export.
+- Finally it will also start a local expressjs webserver so you can preview the generated pages of `docs`in your browser.
+- If you're happy with changes, I commit and push to GitHub. A few mminutes later my website is updated.
+
+## Features
 
-Not really much, but some extras I'd like to incorporate into `joplin_to_github.js`:
+- Support images
+- Adds CSS to improve looks and feels
+- Improves titles by appending " - brunocassol.com" to `<title>`
+
+## TODO
 
-- Improve `<title>` in each page.
+- Test attatchments such as PDF files
+- Test videos
+- Test mp3
+- Test code blocks
 - Link images so mobile devices can expand them.
-- Improve looks and User Experience by improving styles.
-- Insert disqus comments code in blog posts.
+- CSS to improve User Experience by improving styles.
+- Insert disqus comments code in blog posts.
+
+## Can we export using commnadline instead of a manual GUI interaction?
+
+Nope because HTML Directory export is not supported by Joplin commandline:
+
+`npm -g install joplin`
+
+`joplin --profile "/c/Users/dev/.config/joplin-desktop" export --format html --notebook "ab08048c2f774ee6a35c499493a8c458" expo
+rt_dir`
+
+Outputs: "HTML export is not supported. Please use the desktop application."
diff --git a/joplin_export/.gitignore → brunocassol.com/.gitignore b/joplin_export/.gitignore → brunocassol.com/.gitignore
diff --git a/docs/blog.html b/docs/blog.html
@@ -2,7 +2,7 @@
 						<meta charset="UTF-8">
 						<meta name="viewport" content="width=device-width, initial-scale=1">
 						<link rel="stylesheet" href="/pluginAssets/katex/katex.css"><script type="application/javascript" src="/pluginAssets/mermaid/mermaid.min.js"></script><script type="application/javascript" src="/pluginAssets/mermaid/mermaid_render.js"></script><link rel="stylesheet" href="/pluginAssets/highlight.js/atom-one-light.css">
-						<title>blog</title>
+						<title>Blog - brunocassol.com</title>
 					</head>
 					<body>
 						<div class="exported-note">
@@ -148,7 +148,7 @@
      * instead of the svg width, height property you must use a viewbox here, 0 0 1536 1792 is typically the actual size of the icon
      * each line begins with the pre-amble -webkit-mask: url("data:image/svg+xml;utf8,
      * and of course finishes with ");
-     * to precvent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
+     * to prevent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
      * on the following line
      * */
 		.fa-joplin {
@@ -350,7 +350,12 @@
 		}
 
 		.media-player.media-pdf {
-			min-height: 100vh;
+			min-height: 35rem;
+			width: 100%;
+			max-width: 1000px;
+			margin: 0;
+			border: 0;
+			display: block;
 		}
 
 		/* Clear the CODE style if the element is within a joplin-editable block */
@@ -436,7 +441,20 @@
 				.joplin-checklist li:not(.checked)::before {
 					content:"\f0c8";
 				}
-.mermaid { background-color: white; width: 640px; }</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="blog">Blog</h1>
+.mermaid { width: 640px; }
+.mermaid-export-graph {
+					opacity: 0;
+					height: 0;
+					z-index: 1;
+					position: relative;
+				} 
+				.joplin-editable:hover .mermaid-export-graph,
+				.joplin-editable .mermaid-export-graph:has(:focus-visible) {
+					opacity: 1;
+				}
+				.mermaid-export-graph > button:hover {
+					background-color: #CBDAF1 !important;
+				}</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="blog">Blog</h1>
 <p><b>2023-02-08</b> <a href="/blog/2023-02-08-How-I-blog-using-joplins-EXPORT-HTML-Di.html"> How I blog using Joplin's "EXPORT HTML Directory" plus GitHub Pages</a>
 <br>
 <b>2023-02-07</b> <a href="/blog/2023-02-07-Debugging-slow-MySQL-and-MariaDB-querie.html"> Debugging slow MySQL and MariaDB queries</a></p>

diff --git a/docs/blog/2023-02-07-Debugging-slow-MySQL-and-MariaDB-querie.html b/docs/blog/2023-02-07-Debugging-slow-MySQL-and-MariaDB-querie.html
@@ -2,7 +2,7 @@
 						<meta charset="UTF-8">
 						<meta name="viewport" content="width=device-width, initial-scale=1">
 						<link rel="stylesheet" href="/pluginAssets/katex/katex.css"><script type="application/javascript" src="/pluginAssets/mermaid/mermaid.min.js"></script><script type="application/javascript" src="/pluginAssets/mermaid/mermaid_render.js"></script><link rel="stylesheet" href="/pluginAssets/highlight.js/atom-one-light.css">
-						<title>2023-02-07-Debugging-slow-MySQL-and-MariaDB-queries</title>
+						<title>Debugging slow MySQL and MariaDB queries - brunocassol.com</title>
 					</head>
 					<body>
 						<div class="exported-note">
@@ -148,7 +148,7 @@
      * instead of the svg width, height property you must use a viewbox here, 0 0 1536 1792 is typically the actual size of the icon
      * each line begins with the pre-amble -webkit-mask: url("data:image/svg+xml;utf8,
      * and of course finishes with ");
-     * to precvent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
+     * to prevent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
      * on the following line
      * */
 		.fa-joplin {
@@ -350,7 +350,12 @@
 		}
 
 		.media-player.media-pdf {
-			min-height: 100vh;
+			min-height: 35rem;
+			width: 100%;
+			max-width: 1000px;
+			margin: 0;
+			border: 0;
+			display: block;
 		}
 
 		/* Clear the CODE style if the element is within a joplin-editable block */
@@ -436,7 +441,20 @@
 				.joplin-checklist li:not(.checked)::before {
 					content:"\f0c8";
 				}
-.mermaid { background-color: white; width: 640px; }</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="debugging-slow-mysql-and-mariadb-queries">Debugging slow MySQL and MariaDB queries</h1>
+.mermaid { width: 640px; }
+.mermaid-export-graph {
+					opacity: 0;
+					height: 0;
+					z-index: 1;
+					position: relative;
+				} 
+				.joplin-editable:hover .mermaid-export-graph,
+				.joplin-editable .mermaid-export-graph:has(:focus-visible) {
+					opacity: 1;
+				}
+				.mermaid-export-graph > button:hover {
+					background-color: #CBDAF1 !important;
+				}</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="debugging-slow-mysql-and-mariadb-queries">Debugging slow MySQL and MariaDB queries</h1>
 <p><em>posted on 2023-02-07</em></p>
 <p>Execute this on the database server to start logging all queries that take longer than 5 seconds to run:</p>
 <div class="joplin-editable"><pre class="joplin-source" data-joplin-language="sql" data-joplin-source-open="```sql

diff --git a/docs/blog/2023-02-08-How-I-blog-using-joplins-EXPORT-HTML-Di.html b/docs/blog/2023-02-08-How-I-blog-using-joplins-EXPORT-HTML-Di.html
@@ -2,7 +2,7 @@
 						<meta charset="UTF-8">
 						<meta name="viewport" content="width=device-width, initial-scale=1">
 						<link rel="stylesheet" href="/pluginAssets/katex/katex.css"><script type="application/javascript" src="/pluginAssets/mermaid/mermaid.min.js"></script><script type="application/javascript" src="/pluginAssets/mermaid/mermaid_render.js"></script><link rel="stylesheet" href="/pluginAssets/highlight.js/atom-one-light.css">
-						<title>2023-02-08-How-I-blog-using-joplins-EXPORT-HTML-Directory-plus-GitHub-Pages</title>
+						<title>How I blog using Joplin's "EXPORT HTML Directory" plus GitHub Pages - brunocassol.com</title>
 					</head>
 					<body>
 						<div class="exported-note">
@@ -148,7 +148,7 @@
      * instead of the svg width, height property you must use a viewbox here, 0 0 1536 1792 is typically the actual size of the icon
      * each line begins with the pre-amble -webkit-mask: url("data:image/svg+xml;utf8,
      * and of course finishes with ");
-     * to precvent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
+     * to prevent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
      * on the following line
      * */
 		.fa-joplin {
@@ -350,7 +350,12 @@
 		}
 
 		.media-player.media-pdf {
-			min-height: 100vh;
+			min-height: 35rem;
+			width: 100%;
+			max-width: 1000px;
+			margin: 0;
+			border: 0;
+			display: block;
 		}
 
 		/* Clear the CODE style if the element is within a joplin-editable block */
@@ -436,7 +441,20 @@
 				.joplin-checklist li:not(.checked)::before {
 					content:"\f0c8";
 				}
-.mermaid { background-color: white; width: 640px; }</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="how-i-blog-using-joplins-export-html-directory-plus-github-pages">How I blog using Joplin's "EXPORT HTML Directory" plus GitHub Pages</h1>
+.mermaid { width: 640px; }
+.mermaid-export-graph {
+					opacity: 0;
+					height: 0;
+					z-index: 1;
+					position: relative;
+				} 
+				.joplin-editable:hover .mermaid-export-graph,
+				.joplin-editable .mermaid-export-graph:has(:focus-visible) {
+					opacity: 1;
+				}
+				.mermaid-export-graph > button:hover {
+					background-color: #CBDAF1 !important;
+				}</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="how-i-blog-using-joplins-export-html-directory-plus-github-pages">How I blog using Joplin's "EXPORT HTML Directory" plus GitHub Pages</h1>
 <p><em>posted on 2023-02-08</em></p>
 <p>Joplin is a simple open source markdown note-taking app. I write pages as notes than export an entire notebook to HTML by using Joplin's "Export to HTML Directory" feature:</p>
 <p><img src="/_resources/037cd31e4bdc4caa83bb371d9e17f93e.png" alt="09ba8fe843506ba059e95ebcf87408d2.png"></p>

diff --git a/docs/index.html b/docs/index.html
@@ -2,21 +2,7 @@
 						<meta charset="UTF-8">
 						<meta name="viewport" content="width=device-width, initial-scale=1">
 						<link rel="stylesheet" href="/pluginAssets/katex/katex.css"><script type="application/javascript" src="/pluginAssets/mermaid/mermaid.min.js"></script><script type="application/javascript" src="/pluginAssets/mermaid/mermaid_render.js"></script><link rel="stylesheet" href="/pluginAssets/highlight.js/atom-one-light.css">
-						<title>index</title>
-						<link rel="manifest" href="pwa.webmanifest">
-						<script>
-							// Registering Service Worker
-							if ('serviceWorker' in navigator) {
-								navigator.serviceWorker.register('/sw.js');
-							}
-
-							let deferredPrompt;
-
-							window.addEventListener('beforeinstallprompt', (e) => {
-								deferredPrompt = e;
-								console.log('beforeinstallprompt', e);
-							});
-						</script>
+						<title>Bruno Cassol</title>
 					</head>
 					<body>
 						<div class="exported-note">
@@ -162,7 +148,7 @@
      * instead of the svg width, height property you must use a viewbox here, 0 0 1536 1792 is typically the actual size of the icon
      * each line begins with the pre-amble -webkit-mask: url("data:image/svg+xml;utf8,
      * and of course finishes with ");
-     * to precvent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
+     * to prevent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
      * on the following line
      * */
 		.fa-joplin {
@@ -364,7 +350,12 @@
 		}
 
 		.media-player.media-pdf {
-			min-height: 100vh;
+			min-height: 35rem;
+			width: 100%;
+			max-width: 1000px;
+			margin: 0;
+			border: 0;
+			display: block;
 		}
 
 		/* Clear the CODE style if the element is within a joplin-editable block */
@@ -450,7 +441,20 @@
 				.joplin-checklist li:not(.checked)::before {
 					content:"\f0c8";
 				}
-.mermaid { background-color: white; width: 640px; }</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="bruno-cassol">Bruno Cassol</h1>
+.mermaid { width: 640px; }
+.mermaid-export-graph {
+					opacity: 0;
+					height: 0;
+					z-index: 1;
+					position: relative;
+				} 
+				.joplin-editable:hover .mermaid-export-graph,
+				.joplin-editable .mermaid-export-graph:has(:focus-visible) {
+					opacity: 1;
+				}
+				.mermaid-export-graph > button:hover {
+					background-color: #CBDAF1 !important;
+				}</style><div id="rendered-md"><nav><a href="/">Home</a> | <a href="/blog.html">Blog</a></nav><h1 id="bruno-cassol">Bruno Cassol</h1>
 <p>Hi! I solve problems with computer programs. Usually by creating online systems with tech like TypeScript, C#, Vue, Angular and Databases.</p>
 <p>On my free time I like to research about how to build software that users and developers enjoy, at a faster pace, with less errors.</p>
 <p>GitHub: <a data-from-md="" title="https://github.com/ww9" href="https://github.com/ww9">https://github.com/ww9</a><br>