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 @@ Zoey's Bits - Rants - + + +
+
- -
-

Welcome to the rants section!

-

WIP

-
- - + + - \ No newline at end of file + 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, '$1') // Bold + .replace(/\*(.*?)\*/g, '$1'); // 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