SailorZoop/ZoeysBits
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

rants

Browse source
This commit is contained in:
Zoey 2023-12-21 01:01:16 +01:00
parent 317cdb06af
commit 0a0485173b
10 changed files with 216 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
css/rants.css Normal file
View file

@ -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%;
}

57
css/styleHF.css
View file

@ -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%;
}
}

16
html/rants.html
View file

@ -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>
</html>

23
js/articleload.js Normal file
View file

@ -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');

8
js/loadnavs.js
View file

@ -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)';
}
}

79
js/rants.js Normal file
View file

@ -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);
}
});

10
md/rants/discord.md Normal file
View file

@ -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

4
md/rants/electron Normal file
View file

@ -0,0 +1,4 @@
# Wayland
21th December 2023
Electron is awful and here's why.

4
md/rants/electron.md Normal file
View file

@ -0,0 +1,4 @@
# Electron
21th December 2023
Electron is awful and here's why.

4
md/rants/wayland.md Normal file
View file

@ -0,0 +1,4 @@
# Wayland
*22th December 2023*
Insane defaults.