publish v1

static/base.css

@@ -0,0 +1,71 @@
+@import url("typography.css");
+
+/* Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Base Layout */
+html, body {
+    overflow-x: hidden;
+}
+
+body {
+    background-image: url("https://jvns.ca/stylesheets/noise.png");
+    background-color: #234892;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Main Container */
+#wrap {
+    width: 70%;
+    max-width: 45em;
+    margin: 0 auto;
+    background-color: #fff;
+    flex: 1;
+}
+
+/* Header Styles */
+header {
+    padding-left: 35px;
+    padding-right: 35px;
+    min-height: 130px;
+    position: relative;
+}
+
+header h1 {
+    font-size: 100px;
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+/* Navigation Bar */
+#navbar {
+    min-width: 100%;
+    background-color: #03396C;
+    padding: 5px 3em 5px 0;
+    text-align: right;
+    width: 70%;
+    max-width: 45em;
+    margin: 0 auto;
+}
+
+/* Main Content */
+#main {
+    padding: 35px;
+}
+
+/* Footer */
+#footer {
+    padding-bottom: 0.5em;
+}
+
+#footer-title {
+    min-width: 100%;
+    background-color: #03396C;
+    text-align: center;
+}

static/editor.css

@@ -0,0 +1,41 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+#code {
+    width: 50%;
+    height: 100%;
+    margin: 0;
+    padding: 10px;
+    background-color: #1F1F1F;
+    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+    color: #CCCCCC;
+    position: absolute;
+    border: none;
+    resize: none;
+    outline: none;
+    font-family: monospace;
+    font-size: 14px;
+    box-sizing: border-box;
+}
+#preview {
+    width: 50%;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    left: 50%;
+    height: 100%;
+    background-color: white;
+    border: none;
+}
+.switch-container {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background-color: #1F1F1F;
+    color: #CCCCCC;
+    padding: 5px 10px;
+    border-radius: 5px;
+}

static/editor.js

@@ -0,0 +1,52 @@
+const codeArea = document.getElementById('code')
+const previewFrame = document.getElementById('preview')
+const previewSwitch = document.getElementById('previewSwitch')
+let lastCode = ''
+let previewMode = false
+
+function forceUpdatePreview() {
+    const currentCode = codeArea.value
+    const encodedCode = btoa(currentCode)
+    let url = `http://127.0.0.1:5000/preview/${encodedCode}`
+    if (previewMode) {
+        url += "?website=True"
+    }
+    previewFrame.src = url
+}
+
+function updatePreview() {
+    const currentCode = codeArea.value
+    if (currentCode !== lastCode) {
+        forceUpdatePreview();
+        lastCode = currentCode
+    }
+}
+
+function saveCode() {
+    const currentCode = codeArea.value
+    const blob = new Blob([currentCode], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'code.html'
+    a.style.display = 'none'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+}
+
+setInterval(updatePreview, 1000)
+updatePreview()
+
+document.addEventListener('keydown', function(event) {
+    if (event.ctrlKey && event.key === 's') {
+        event.preventDefault()
+        saveCode()
+    }
+})
+
+previewSwitch.addEventListener('change', function(event) {
+    previewMode = event.target.checked
+    forceUpdatePreview()
+})

static/typography.css

@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* Base Typography */
+body {
+    font-family: "PT Serif", Georgia, Times, "Times New Roman", serif;
+    color: #000000;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+    margin-bottom: 0;
+    font-family: "Montserrat", sans-serif;
+    font-weight: bold;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    color: #000000;
+    position: relative;
+}
+
+/* Heading Hover Effects */
+h2 a:hover::before, 
+h3 a:hover::before, 
+h4 a:hover::before, 
+h5 a:hover::before, 
+h6 a:hover::before {
+    content: "#";
+    position: absolute;
+    left: -0.75em;
+    top: 0;
+    color: #0073E6;
+}
+
+/* Text Elements */
+#main p {
+    margin-bottom: 0.75em;
+}
+
+time {
+    font-family: "Montserrat", sans-serif;
+    font-weight: bold;
+    font-size: 75%;
+}
+
+hr {
+    margin-bottom: 1em;
+}
+
+/* Links */
+a {
+    text-decoration: none;
+    color: #005B96;
+}
+
+/* Navigation */
+#navbar {
+    min-width: 100%;
+    color: #ffffff;
+    text-transform: uppercase;
+    font-family: "Montserrat", sans-serif;
+}
+
+#navbar a {
+    color: inherit;
+}
+
+#navbar a + a::before {
+    content: "// ";
+    padding: 0 0.1em;
+}
+
+/* Footer */
+#footer-title {
+    padding: 5px 0;
+    margin-bottom: 0.5em;
+    min-width: 100%;
+    color: #ffffff;
+    font-family: "Montserrat", sans-serif;
+}
+
+#footer {
+    text-align: center;
+}
+
+#footer p {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    line-height: 1.25;
+}