From 0a0485173bf6b47615e27ece4c5030508468d2fc Mon Sep 17 00:00:00 2001
From: Zoey <friendlypossum@netc.fr>
Date: Thu, 21 Dec 2023 01:01:16 +0100
Subject: [PATCH] rants
---
css/rants.css | 20 +++++++++++
css/styleHF.css | 57 ++++++++++++++++++++++++++++++++
html/rants.html | 16 ++++-----
js/articleload.js | 23 +++++++++++++
js/loadnavs.js | 8 +++++
js/rants.js | 79 ++++++++++++++++++++++++++++++++++++++++++++
md/rants/discord.md | 10 ++++++
md/rants/electron | 4 +++
md/rants/electron.md | 4 +++
md/rants/wayland.md | 4 +++
10 files changed, 216 insertions(+), 9 deletions(-)
create mode 100644 css/rants.css
create mode 100644 js/articleload.js
create mode 100644 js/rants.js
create mode 100644 md/rants/discord.md
create mode 100644 md/rants/electron
create mode 100644 md/rants/electron.md
create mode 100644 md/rants/wayland.md
diff --git a/css/rants.css b/css/rants.css
new file mode 100644
index 0000000..548c30a
--- /dev/null
+++ b/css/rants.css
@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Sarabun', sans-serif;
+ font-weight: 400;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: black;
+ color: lightpink;
+ padding-top: 6%;
+ padding-bottom: 3.5%;
+}
+
diff --git a/css/styleHF.css b/css/styleHF.css
index 0b7b4bc..29b2879 100644
--- a/css/styleHF.css
+++ b/css/styleHF.css
@@ -3,6 +3,8 @@
:root {
--background-color-dark: #111111;
--background-color-light: rgb(255, 224, 229);
+ --article-bg-dark: #161616;
+ --article-bg-light:#d3adb3;
--color-dark: lightpink;
--color-light: #111111;
--color-button-dark: rgb(160, 61, 76);
@@ -164,4 +166,59 @@ header {
input[type="checkbox"] {
display: none;
+}
+
+
+/*ARTICLES*/
+
+#article-list {
+ flex-direction: column;
+ text-align: center;
+ position: fixed;
+ align-items: flex-start;
+ left: 0;
+ width: 20%;
+ height: 100vh;
+ background-color: var(--article-bg-dark);
+ color: var(--color-dark);
+ overflow-y: auto;
+ padding-top: 6%;
+ flex-grow: 1;
+}
+
+/* Style for the subtitles */
+.article-subtitle {
+ bottom: 0;
+ left: 10%;
+ width: 80%;
+ padding: 5px;
+ text-align: center;
+ position: relative;
+ font-size: small;
+ }
+
+/* Style for the container of the article content */
+#article-container {
+ flex-grow: 1;
+ position: relative;
+ width: 85%; /* Adjusted width to accommodate the article list */
+ padding-left: 20%;
+ padding-right: 20%; /* Add some padding for spacing */
+}
+
+/* Responsive styles for smaller screens */
+@media screen and (max-width: 768px) {
+ body {
+ padding-top: 10%; /* Adjust as needed */
+ }
+
+ #article-list {
+ width: 100%;
+ padding-top: 10%; /* Adjust as needed */
+ }
+
+ #article-container {
+ margin-left: 0;
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/html/rants.html b/html/rants.html
index 508190f..757a9f6 100644
--- a/html/rants.html
+++ b/html/rants.html
@@ -5,20 +5,18 @@
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoey's Bits - Rants</title>
- <link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
+ <script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script>
+ <link rel="stylesheet" href="/css/rants.css" type="text/css" media="all">
</head>
<body>
+ <div id="article-container"></div>
+ <div id="article-list"></div>
<div id="header-placeholder"></div>
-
- <div class="centered-content">
- <h1 id="title">Welcome to the rants section!</h1>
- <h3 id="subtitle">WIP</h3>
- </div>
-
<div id="footer-placeholder"></div>
<script src="/js/loadnavs.js" defer></script>
-
+ <script src="/js/articleload.js" defer></script>
+ <script src="/js/rants.js" defer></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/articleload.js b/js/articleload.js
new file mode 100644
index 0000000..58164d6
--- /dev/null
+++ b/js/articleload.js
@@ -0,0 +1,23 @@
+// Function to convert Markdown to HTML
+function convertMarkdownToHTML(markdownContent) {
+ // Simple Markdown to HTML conversion
+ // This is a basic example and may not cover all Markdown features
+ // You may need to enhance this function based on your requirements
+ return markdownContent
+ .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // Bold
+ .replace(/\*(.*?)\*/g, '<em>$1</em>'); // Italics
+}
+
+// Function to fetch and display an article
+function displayArticle(articlePath) {
+ fetch(articlePath)
+ .then(response => response.text())
+ .then(markdownContent => {
+ const htmlContent = convertMarkdownToHTML(markdownContent);
+ document.getElementById('article-container').innerHTML = htmlContent;
+ })
+ .catch(error => console.error('Error fetching article:', error));
+}
+
+// Call the function with the path to your Markdown file
+displayArticle('/md/rants/test.md');
\ No newline at end of file
diff --git a/js/loadnavs.js b/js/loadnavs.js
index 14f95e2..0544da4 100644
--- a/js/loadnavs.js
+++ b/js/loadnavs.js
@@ -56,6 +56,7 @@ function toggleHeaderColor() {
const header = document.querySelector('header');
const togglebutton = document.querySelector('.toggle-button');
const body = document.querySelector('body');
+ const articlelist = document.querySelector('#article-list');
isLightMode = !isLightMode;
@@ -68,6 +69,10 @@ function toggleHeaderColor() {
body.style.backgroundColor = 'var(--color-bg-body-dark)';
body.style.color = 'var(--color-bg-body-light)';
+
+ articlelist.style.backgroundColor = 'var(--article-bg-dark)';
+ articlelist.style.color = 'var(--color-dark)';
+
} else {
header.style.backgroundColor = 'var(--background-color-light)';
@@ -78,5 +83,8 @@ function toggleHeaderColor() {
body.style.backgroundColor = 'var(--color-bg-body-light)';
body.style.color = 'var(--color-bg-body-dark)';
+
+ articlelist.style.backgroundColor = 'var(--article-bg-light)';
+ articlelist.style.color = 'var(--color-light)';
}
}
diff --git a/js/rants.js b/js/rants.js
new file mode 100644
index 0000000..9c90b2f
--- /dev/null
+++ b/js/rants.js
@@ -0,0 +1,79 @@
+const articles = [
+ { title: 'Electron', subtitle: '', path: '/md/rants/electron.md' },
+ { title: 'Discord', subtitle: '', path: '/md/rants/discord.md' },
+ { title: 'Wayland', subtitle: '', path: '/md/rants/wayland.md' },
+ ];
+
+ const showdownConverter = new showdown.Converter();
+
+ function createArticleBox(article) {
+ const articleBox = document.createElement('div');
+ articleBox.className = 'article-box';
+ articleBox.setAttribute('data-path', article.path);
+
+ const titleElement = document.createElement('h3');
+ titleElement.textContent = article.title;
+
+ const subtitleElement = document.createElement('p');
+ subtitleElement.textContent = article.subtitle;
+ subtitleElement.className = 'article-subtitle';
+
+ articleBox.appendChild(titleElement);
+ articleBox.appendChild(subtitleElement);
+
+ articleBox.addEventListener('click', () => {
+ loadArticle(article.path);
+ updateArticleBoxContent(article.path, article.title, article.subtitle);
+ });
+
+ return articleBox;
+ }
+
+ function createArticleList() {
+ const articleListContainer = document.getElementById('article-list');
+ articles.forEach(article => {
+ const articleBox = createArticleBox(article);
+ articleListContainer.appendChild(articleBox);
+ });
+ }
+
+ function loadArticle(articlePath) {
+ fetch(articlePath)
+ .then(response => response.text())
+ .then(markdownContent => {
+ const { title, subtitle } = extractTitleAndSubtitle(markdownContent);
+ const htmlContent = showdownConverter.makeHtml(markdownContent);
+ document.getElementById('article-container').innerHTML = htmlContent;
+ updateArticleBoxContent(articlePath, title, subtitle);
+ })
+ .catch(error => console.error('Error fetching article:', error));
+ }
+
+ function extractTitleAndSubtitle(markdownContent) {
+ const lines = markdownContent.split('\n');
+ const title = lines[0] ? lines[0].replace(/^#*\s*/, '').trim() : 'Untitled';
+ const subtitle = lines[3] ? lines[3].trim() : '';
+ return { title, subtitle };
+ }
+
+ function updateArticleBoxContent(articlePath, title, subtitle) {
+ const articleBox = document.querySelector(`.article-box[data-path="${articlePath}"]`);
+ if (articleBox) {
+ articleBox.innerHTML = '';
+ const titleElement = document.createElement('h3');
+ titleElement.textContent = title;
+ const subtitleElement = document.createElement('p');
+ subtitleElement.textContent = subtitle;
+ subtitleElement.className = 'article-subtitle';
+ articleBox.appendChild(titleElement);
+ articleBox.appendChild(subtitleElement);
+ }
+ }
+
+ // Load the functions when the DOM is fully loaded
+ document.addEventListener('DOMContentLoaded', () => {
+ createArticleList();
+ if (articles.length > 0) {
+ loadArticle(articles[0].path);
+ }
+ });
\ No newline at end of file
diff --git a/md/rants/discord.md b/md/rants/discord.md
new file mode 100644
index 0000000..7ca8550
--- /dev/null
+++ b/md/rants/discord.md
@@ -0,0 +1,10 @@
+# Discord
+20th December 2023
+
+Here's the reason I hate Discord.
+
+lorem ipsum butts and cakes, you are now my favourite person who bakes
+this is still the same paragraph
+yeah
+
+butts
\ No newline at end of file
diff --git a/md/rants/electron b/md/rants/electron
new file mode 100644
index 0000000..b6153ce
--- /dev/null
+++ b/md/rants/electron
@@ -0,0 +1,4 @@
+# Wayland
+21th December 2023
+
+Electron is awful and here's why.
\ No newline at end of file
diff --git a/md/rants/electron.md b/md/rants/electron.md
new file mode 100644
index 0000000..4c04e16
--- /dev/null
+++ b/md/rants/electron.md
@@ -0,0 +1,4 @@
+# Electron
+21th December 2023
+
+Electron is awful and here's why.
\ No newline at end of file
diff --git a/md/rants/wayland.md b/md/rants/wayland.md
new file mode 100644
index 0000000..f93c119
--- /dev/null
+++ b/md/rants/wayland.md
@@ -0,0 +1,4 @@
+# Wayland
+*22th December 2023*
+
+Insane defaults.
\ No newline at end of file