fixing up styles! i also improved the theme logic .

Changelog

none, i didn’t commit yet

hi guys! ive pretty much finished everything and now i gotta fix the table stuff and get some more images, namely some dark mode images of macOS Big Sur through Tahoe, so if you have any of these operating systems, pls take a screenshot of your desktop in dark mode and send it to me on slack
soon, you will see ubuntu pages! then better mobile experience. then i’ll ship
note to self: get the pictures for classic mac os

Changelog

• 03d149f Change directory structures, get better images

finished renaming files ! now im onto fixing paths and dealing with nvim regex ()
i havent committed at all because everything is still buggy, i also legit spent like half an hour trying to figure out why the previous/next article nav disappeared, it was because i forgot to update the collection names in a partial (i renamed the collections and completely dropped the -pedia suffixes in the nav bar and in the actual code), then i spent another five mins trying to figure out why my kebab function wasnt working and it was because i used .title instead of .data.title. crazy fr.
screenshots attached btw
(yes i used chatgpt im stupid )

still renaming and moving files

106 hours/9² devlogs

we’re so done with windows with this one! i finished all the articles! well i finished copying from wikipedia and formatting it to my wish… we dont talk about that iykyk.
i asked chat gippity to give me a node script that gets a wikipedia page, strips citations, and converts it to github flavored markdown (gfm) and also to clean up the classes in the tables in the articles for windows versions vista to 8.1. i gave up on the tables for windows 10 and 11, i’m not dealing with those tf (see the ospedia.org file!)

as for what comes next, i already said this, it’s better pictures!
also, i finally merged unstable into master and now you can see everything that’s been on the unstable site on the main site! 🎉

Changelog

• 711aa44 Restore CONTRIBUTING.md from dev-ananta’s fork
• f74659e Remove node_modules
• 93c431a Finish fixing all Windows articles
• a998d65 Fix Windows NT 4.0, 2000, Me, XP articles

this is a huge feat!!!

finished fixing windows nt 4.0, 2000, me and xp this is making me exhausted help
you can see the updated articles though, its been deployed (im tired)

Changelog

• a998d65 Fix Windows NT 4.0, 2000, Me, XP articles

fixed windows 1.0-95 articles

Changelog

• adb2c31 [skip netlify] Fix Windows 1.0-95 articles

worked on the windows 98 article! i think when i used (n)vim regex to replace all occurrences of <div class="info">...</div> with +++, something happened a lot of content disappeared. am doing this with windows 95 rn too!

Changelog

• 3f925b8 Fix Windows 98 article
• 6af17a1 Changed styles for demo pages
• 3204f74 Created a CONTRIBUTING.md (#3)

btw, you can’t see the updated article because i skipped the build, i don’t want to tax netlify’s servers with unnecessary builds

hour to debug a misplaced {% endif %} statement. just great. i placed it just before the closing tag for div,info instead of just after it. oh well. hey, at least i’m almost done with the CONTRIBUTING.md!… that i didn’t track because i was using the online github editor to edit @dev_ananta’s pull request for a CONTRIBUTING.md he agreed to do (thanks though)

finished the fun fact section! i made it so the yellow is on a ::before pseudo element with an alpha of 0.3 so the background color affects the lightness/darkness of the yellow. it’s actually pretty cool! i also updated the [ospedia.org file] (https://github.com/Keyboard1000n17/OSPedia/blob/unstable/ospedia.org)
check out the pages on the unstable branch deploy (i fixed the blur issue)

hey guys! i improved the homepage! idk why the blur is there though, i’ll deal with that next. i also started on a fun fact system! learn random stuff :) you can see the rough start in the screenshot

Changelog

• Improve /index.html experience, start work on Fun Fact section
• Update styles for index.html
• Update demos.js

more changes to the demo pages! check em out at the demos page! imma add “Improve demos experience” to my TODO list in the ospedia.org file

Changelog

• Update demos.js
• Changes to demos

v86 being a pain in my ass again :noooovanish:
i can’t seem to get this shit working. i’ve spent so long on this and can’t figure out why initEmulator is not working and giving me undefined help me even chatgippity isn’t helping 🙏

IM DONE WITH THE JSON TABLES!!!! now you can see the result at https://unstable--ospedia.netlify.app/macpedia/ !

Changelog

• Finish adding JSON data for all tables
• (skip netlify) Progress on adding JSON table data for all macOS tables

next up: better image quality and sizes! and also fix the names in the table captions (was copy pasting )

also pls contribute to my repo or at least star it

guess what, i’m still converting all the tables to JSON
it took me like 2-3 hours to get the table generating script to work with any number of colums/keys. i did not enjoy that and didn’t use ai for that
i still have so many pages left
caption for image: next up to convert

if you are willing to help me PLEASE DM ME ON SLACK
im in the process of converting all the tables to json and converting them to tables via a script. its been there a while and im tryna get them all done
no commits yet
i have to do a LOT of improvements

welp, i finished adding all the carousel images to all the content pages. enjoy https://unstable--ospedia.netlify.app! (it’s 11:53 PM help this took way too long )

Changelog

• Add Pagefind command to build script in package.json
• (skip netlify) Update JSON macOS version data
• (skip netlify) Add carousel images to all webpages

the carousel is FINSIHED! and it works with both scroll AND arrows! now i just gotta add all the images for the other 39 pages…… this will be hell. but see it at https://ospedia.site/winpedia/windows_1.0 !

Changelog

• Finish carousel components

get high on the scrolling carousel at https://unstable--ospedia.netlify.app/winPedia/windows_1.0! the arrows are wonky and all, but i’ll get to it; it’s the unstable branch after all you know.

Changelog

• WIP: Added carousel for Windows 1.0 page only

i simply removed that other background, this is kinda sick ngl. no commits yet since i’m still making the carousel (it’s hidden, you can see in devtools).

help i have to manually update front matter for 40 pages AGAIN
i said i’ll add a carousel and then spent like 4 hours converting my articles to markdown because prettier decided that the front matter at the top of my html pages was just html and not yaml so it would collapse indentation. now im actually working on it, and guess what, i have to add carousel images to the front matter because every page has different paths to the images and some don’t even have images

got it done and dusted! all pages are now in markdown and take the information in div,info from YAML front matter! i wrote some custom nunjucks filters for this in eleventy.config.js (they’re at the top of the file)
last devlog, i said that i need to remove ::: from all the markdown pages. so i did! there’s now a +++ in place of :::...::: where the custom splitContent filter splits the content and returns i of the resulting array, where i is the index given.
now i can finally commit, push, and actually work on the carousel!!! well i do still have to do stuff in the front matter and add a carouselImages list for the carousel but it’s still work on the carousel.
you can now see the new code! the changes are also live at https://unstable--ospedia.netlify.app but they don’t really look any different

Commits:

• Finish conversion to Markdown, remove _site from repository: the whole point of this devlog!

this shit took too long
well, i finally finished putting all the info in the YAML front matter, im so done with this bs. at least now i get to do what i originally intended to do. honestly, i couldn’t figure out how to automate it without ai so
now, i need to remove this ::: thing that’s everywhere where there was <div id="info">...</div> and get the files out of */md/. i’m going to commit without pushing because i don’t want to push this just yet.

converted all my files to markdown! if you look at pages on my website, you’ll notice that after the first paragraph on every page, there’s a white container with some quick information in it along with the logo. i’m moving those to the YAML front matter so that during the build process, the eleventy compiler will:

• split the content into the first paragraph and the rest of the file
• convert and insert the first paragraph
• insert a div.info with the original structure
• insert the operating system logo with the path and alternate text
• loop over the contents of the paras list of the info key (info.paras)
• for each string in paras, insert the string into a p element
• convert and insert the rest of the file

it’s not really all that complicated but hey at least i’m finally doing something i’ve been thinking about for months

i deadass spent a bunch of time trying to figure out how tf i’ll get this carousel thing working when prettier keeps messing up my YAML and thought the best thing to do was just convert all the html files with front matter to markdown. i got pandoc and was gonna use bash but i keep forgetting bash loops so i spent pretty much this whole time writing a python script that converts html to markdown and puts it in a folder md/. i’ll have to process these markdown files and i stashed the carousel i was doing earlier so no worries! here’s the python script if you want it:

import os as os

for file in os.listdir("."):
    if os.path.isfile(os.path.join(".", file)) and file != "home.html" and file.split(".")[-1] == "html":
        os.system(f"pandoc -f html -t markdown {file} -o ./md/{'.'.join(file.split('.')[0:-1])}.md")
        print(f"Converted {file} to markdown")

yeah, i’m not the best with python, so this took a bit to figure out

caption for the screenshot: eleventy fails spectacularly on encountering malformed yaml front matter because pandoc messed it up and i have to manually fix 17 files (thank god nvim has substitute with regex)

i sure underestimated this, cuz now prettier is messing with my yaml front matter nested list . it goes from

carouselImages:
  - name: ui
    path: /WinPedia/Images/UI/Windows_1.0-UI.webp
    alt: Screenshot of Windows 1.0

to

carouselImages:
- name: ui
path: /WinPedia/Images/UI/Windows_1.0-UI.webp
alt: Screenshot of Windows 1.0

prettier be messing with it man and i don’t have any output rn! here’s my cursed code (it’s not pushed)

hi guys! i’m back! my mom hid my laptop () so i couldn’t code properly but we got bombed in qatar () and now we have online classes.
now, i’m working to remove that ugly sidebar with the links to all the pages. now on that side, there’ll be the table of contents that’s already there and on the other side, i’ll add a carousel system for all the images, along with a random fun fact section!!!
the carousel might take like an hour, the fun facts 15 minutes at laziest. also, i still have to study for exams

don’t mind the duplicated screenshots

so i was trying to get a blur on div.content‘s bg, but for some reason ::before and ::after simply wouldn’t work well. like there would be issues like a ghostly sidebar (1st pic), or a blurred scrollbar (2nd pic), so i just undid the changes (3rd pic). in fact, i think i’ll nuke the working tree.
for the 3rd pic, you can see blur becausebackdrop-filter is directly applied to the element instead of a pseudo-element. i was trying to do this because i wanted #info‘s blur to be nicely visible, but it just doesn’t work properly if the parent has blur too

heyo! here you get… details elements in the sidebar! the content appearing is animated too! i’ll push this to https://unstable--ospedia.netlify.app! please do check it out and create issues on github if there are any issues 🙏

styling changes! it brings:

• a fix for the div.links links not actually scrolling to the heading! it happened cuz the event listeners were added before repositioning the element on screens with width < 1440px, so the event listeners would be on a non-existent element
• i added details tags to the aside element so that the links for the specific OS are displayed and the rest are hidden in an unopened details tag

do check out the styling changes on the unstable deploy! and give me feedback ON THE GITHUB ISSUES PAGE :cat-gun: (other than the fact that the details tags are basically styleless i’ll do that after i wake up 12:25 AM for me atm :heavysob:)

hi guys, i’m back! you probably already know what happened.
anyways, i got started with some styling changes! here’s a changelog:

• changed the 1366px breakpoint to 1440px
• fixed the back to top button
• fixed div.contents links not actually going anywhere (only for screens greater than 1440px???)

a devlog before bed! this devlog brings some ui changes and i committed too! it deployed too! if you know me, you’ll know that there’s always something bad when i commit. so, i created an unstable branch and set up netlify branch deploys for unstable too! check out the ui changes at branch deploy and make an issue for any visual bugs!!! :yay:

would you look at that, it was backdrop-filter: blur(5px)! for some reason it made it black asf. not sure why but ok. also, i simply don’t get it but whatever. anyways, will commit soon so you can see the style’s true glory!

why does css wanna pmo me so hard 🙏
i’ve been trying for a while to get the pure black bg off div.content (the black bg section you can see in the middle). it just won’t go away even after removing div.content { background-color: rgba(0, 0, 0, 0.75); }. i know it’s not some other style on the element causing this cuz i can’t find it. anyways, i’ve been working on the styles for a bit and i know i did something other than just styling but i can’t remember TT

hey guys! i have’t been here in a week cuz my mom took away my laptop because i was grinding too hard TT

so i found out that im not supposed to put my windows hd images directly in my repo or else i might get dmca striked so uhh i’ll have to rewrite commit history. also, for this purpose, i set up a separate site (no link for u bcuz copyright) with all the windows hd images. also, if you like this project, PLEASE star my repo PLEASE it’s kinda STARLESS 😭

image caption: localhost loading my index page and being slow because 120+% cpu usage because of compiling cling in the bg

50th devlog!

for 50 minutes!

this devlog brings refactored scss! now all the styles are defined in one mixin and colors change according to defined variables! also, i added blur in front of the background and made the content column wider alongside scrollbars with transparent backgrounds (the problem was ::webkit-scrollbar-* bs didn’t work but scrollbar-width and scrollbar-color did)! overall, it just looks better! i do have to change some stuff but i’ll do that tomorrow since my mom isn’t liking my grind v_v

HELP SASS IS FIGHTING ME OVER VARIABLES 😭😭😭 CHATGPT FAILED ME SO HARD :heavysob:

so many issues!
did some ux improvements, don’t feel like listing them here rn.

no devlogmaxxing!
here’s what changed:

• i got windows 1.01, windows 2.03, windows 3.0 and windows 3.1 working in the browser. 95 will just not work because of protected mode limitations or sum shit. i’ll have to either switch to qemu compiled for wasm (it exists lmfao) or make a custom version of windows 95 that doesn’t use protected mode calls or anything
• i embedded system 1.0-7.0, mac os 8.0 and mac os 9 in the website too. it was surprisingly easy
• i made an index page for the demos (WIP)

NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO WINDOWS 95 WONT WORK IN THE BROWSER WITHOUT QEMU COMPILED FOR WASM NOOOOOOOOOOOOOOO

I MANAGED TO DO 1.01, 2.03, 3.0, 3.1 BUT NO 95
oh well looks like i’ll just have to do that later
i’ll get started with an index page and infinite mac embeds

i’m going to reduce my devlogs because i need to really focus on this. today, i’ve been trying to get windows 3.0 in the webpage all day and it just won’t even boot. help me

(img is cdrom image from the v86 website after my own hda image refused to boot but it literally doesn’t have enough space for install)

added some styles for the demo pages!

of course, this is barely any modification. and the only visible change is that div.contents (aka the table of contents) is not there and the page isn’t centered vertically but that’s because i couldn’t figure out what i should do–spontaneously thinking of the design while implementing it isn’t ideal for efficiency–and also i was modifying the layout in base.njk. here’s what i added:

    <main>
      {{ content | safe }}
      <div id="screen_container">
        <div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
        <canvas style="display: none; width: 100%; height: 100%"></canvas>
      </div>
      <script src="./libv86.js"></script>
      <script>
        var emulator = new V86({
          screen_container: document.querySelector("#screen_container"),
          bios: {
            url: "./seabios.bin",
          },
          vga_bios: {
            url: "./vgabios.bin",
          },
          {{disk}}: {
          url: "{{ url }}",
        },
        wasm_path: "./v86.wasm",
          autostart: true,
        });
        document.querySelector("#screen_container").addEventListener("click", () => {
          document.querySelector("#screen_container").requestPointerLock();
        });
      </script>
    </main>
    {% else %}
<!-- other stuff... -->

remember, i use eleventy to manage all my pages. also, it may seem strange that the h1 is white in light mode, but i’ll fix that tomorrow. i have to go sleep now (11:00 PM in GMT +3:00)

tl;dr

just modified some styles and changed layout for demo pages only, took a while because i didn’t plan layout beforehand.

so apparently the real problem was a bad structure and it automatically worked when i pasted the structure from the example page. so it went from:
<div class="screen"><canvas></canvas></div>
to:

  <div style="white-space: pre; font: 14px monospace; line-height: 14px"></div>
  <canvas style="display: none; width: 100%; height: 100%"></canvas>
</div>

welp, that wasn’t nice. looks like i’ll make a template.html and point the V86 README point to it. also, it’s running now!

holy shit if you know how to use v86, please send me a dm on slack.

changes:

• the theme toggle works perfectly and even persists across pages (cookie!)
• updated the light theme to match with the dark theme in layout
• started with embedding demos inside the browser

so i had a really bad bug where text would come on top of other text. chatgpt didn’t help. then i thought of removing .div-level-two which applied 20px of padding-right. that took a while v_v
in other news:

• made a dark mode logo with white text
• fixed a bug where clicking on one of the links under Contents would take you to the top of the page.
  • this happened because in the piece of code below, i forgot to change main to main div.content:

let b = document.querySelector("main div.content").scrollHeight - document.querySelector("main div.content").clientHeight;

• added a dark background over the background wallpaper (yay!)

that’s all for now! next up, i’m going to implement a theme switcher, and then i’ll add os demos. i’ll add more themes later because i’m putting these demos for a school exhibition.
edit: i didn’t even realize i’ve done 50 hours!

40th devlog!

i keep doing other stuff for some reason!

here’s what changed:

• there’s now an improvement to the contents sidebar where subheadings are indented to clearly indicate that they are second-level headings (see screenshot)
• i made the text in aside.tree (the thing with the links to all the pages) white

not much of course, but making detailed devlogs like this feels good :yay:

(a devlog with effort put into it?!)

so apparently i simply don’t know how mask images work. i was going mad cuz the search icon and search text were coming as a very dark grey. after half an hour or so, i figured that putting:

&::placeholder,
&::-webkit-input-placeholder,
&::-moz-placeholder {
  color: white !important;
  opacity: 0.8 !important;
}

instead of:

&::placeholder {
  color: white !important;
  opacity: 0.8 !important;
}
&::-webkit-input-placeholder {
  color: white !important;
  opacity: 0.8 !important;
}
&::-moz-placeholder {
  color: white !important;
  opacity: 0.8 !important;
}

somehow, that was the problem. why? how? idk :(
then after another half an hour, i simply gave up and asked chatgpt. apparently, the problem was i had a gray background color on the .pagefind-ui__search-input::before pseudo-element which was making it gray. it was there only because i had copied it from pagefind-ui.css so i could adjust the styles easily in my own stylesheet. rookie mistakes am i right.

do y’all like this yappity yap yap of a devlog? should i make more devlogs like this? also pls follow ^^

it’s like someone put an invisibility potion on the search bar!

wtf?

so i’ve started with what i promised–themes! atm i’m just trying to finish up this dark mode.

IM PUSHING!!!
i gave up on the scrollbars and spent a while trying to minify my output code but i have to go to the airport soon so im committing!!!!!!
here’s the commit link: https://github.com/Keyboard1000n17/OSPedia/commit/4f056ece015b691134c8c9549a1c195d02f4dc60
bye!

WHY WON’T THE SCROLLBARS WORK ON ASIDE.TREE?!?!?!

extra styling! next up: scrollbars

added an animation to the homepage yay! also why is obs studio so hard to use 😭

i’ve added a back to top button! i also did some other stuff but can’t remember right now. next up on the fix list, the homepage!

fixed up the search bar which i’ve been putting off and removing the singular media query partial. i’ve been putting media queries here and there to make it easier for me to find where i have to change stuff. also added another element for the contents box to insert itself before, so if the page doesn’t have #info or .info, it will insert itself before an element with the ID #insertHere. next up, i’ll be adding #insertHere where ever applicable.

this is good right? i’m going to change the background color of the scrollbars and fix up the index page and then i’ll finally commit!!!

do y’all think this is good ui? almost done with the redesign!

YAY MY HOURS ARE BACK
also js coming in clutch (css aint tho)

i don’t think this is ideal… i’ll have to change it then

help what did i do i only remember that i set grid-row of main to 1 instead of 2 in the media query

save me

now srsly, is this fine? cuz i dont think it is. also i dont think ive actually refactored anything but whatever, i added sass variables.

help i cant do this anymore PLEASE

started refactoring. will take a while. after this i’ll add themes… and DEMOS!!! commit will be after a while tho.

w chatgpt it told me how to fix that clipping problem! i wasnt gonna figure it out myself

commit dropping in 1 or 2 days!!!!! now have to fix:

• everything going up when i click on the last link in the toc
• media queries to make it good for everyone : )

yall im cooking a bg for the entire website and changing the scrollbars

better now! so close!!!!

oh COME ON

getting somwhere… follow for updates :)

help i think i have to rewrite the styling from scratch

lotta styling. also removed all the details tags and changed all the summary tags to h2 tags. i also worked on this quick links thing.

help it took so long pls follow to make it worth it

finally done with the homepage for the windows section

help i cant even remember what i did pls follow to save me

here’s my progress so far!

started revamping the ui. i had a really good idea last night. i want to do something like the mdn docs! once its finished, you will see :). so far:

• i figured out why the js i wrote to get the inner height of the browser window wasn’t applying, it was because it only applied whenever the browser would resize (how did i not catch that?).
• i’ve added max-width: 70ch; to the main element
• i’m switching to a mobile-first stylesheet so that i don’t need a bunch of rules just to set display: none;
  it’s gonna take a while. pls follow and star my repo and project : )

added a close button for the hamburger menu. i have no idea how tf it took me 31 minu-oh wait, i forgot i was styling it too and that took a bit. im finally gonna commit.
edit: wtf what happened to the images? oh well go to the website and open devtools and use that device emulator or if you’re on a phone, just open the site and open and close the menu

lmfao i was trying to figure out why my menu wasn’t aligning to the right and why right: -15px; seemed to work and eventually i pasted the code into chatgippity and i had another ruleset targeting the same element and there was margin-right: 1rem; there i’m so blind even with glasses that have +3.5 power 😭

so i’ve worked on improvements for the hamburger menu because there’s no blur. it took this long because of something about stacking context making the blur container go above the hamburger menu drawer (asked chatgippity after looking at it for 15 minutes without any progress whatsoever). i moved the hamburger menu part out of the nav element, only leaving the menu icon that opens the menu when you click it.
tldr: my blur was going above my hamburger menu because stacking context

so it was because i nested a tags… what did i expect i guess i deserved that

so my plan was just to modify the pagefind ui styling so that it doesn’t go off the damn phone screen and become a minor constituent of the air and i decided i’d do some homepage improvements too, and now… i think the screenshot tells it all

Just added a blur behind the OS logos lol. It took like 5 minutes but the time logged is 5^2 because I couldn’t figure out why tf my overlay styles weren’t working. It was because I was using > instead of <space>. The difference is that <space> means anywhere within an element, and > means a direct descendant of the element. Rookie mistake on my part I thought the Eleventy watch server was tripping lmfao : ).

SO much improvement!

• Finished the fluentUI.scss stylesheet WITH media query
• Added the html-minifier-next package after checking out other packages
• Added a bunch of scripts in package.json
• NEW!: Minified the (built) site! (was painful and the time didn’t even get logged 😭🙏

just worked further on the scss. dont mind the disgusting diffs, it’s minified lol.

nearly 10h! (???)
i don’t know why 10h but i’ll take it! i’ve begun finally implementing SCSS on my website. my files aren’t linked to it yet because it’s not complete and i’m planning to do that soon. meanwhile, during the gap between Summer or Making and joining Flavortown:

• i implemented a unified eleventy template for ALL my website files
• i also added a convenient table management system for my release history tables that uses JSON to generate a table. i’m thinking about going back though because it’s super unoptimized. like, using the JSON to build a table and then pasting the output into the file.
• i’ve changed the landing page a little
• did i mention a search bar?
  go check out everything on the website!