Dark mode support

wasnt really planning on adding this, i sort of like having bright and happy pages but figured i might as well after working on this website late at night and havign my retinas burned.

i also worked on other parts of the homepage, like the text contents, and fixing some overflow issues on chromium browsers. i also fixed some inconsistent borders for the embeds.

lastly, i also made error message notices show in red. previously, all notices were green, which worked for messages like “Hackvertisement successfully created!”, but felt a bit misleading on fails.

Add root user and an admin panel !

for management reasons, i decided to add an admin panel! i decided the easiest way to go about this is to mark one user as an admin, or the root user. in this case i simply made it so the user with the id=1 is the root. this has the benefit of ensuring there is never more than one root user, since ids must be unique for this database.

the root user has access to the admin panel, which lists all hackvertisements and all data attributed to them. all security checks are also basically disabled for the root user, meaning you can edit and delete other user’s posts.

i also wrote a little helper script for elevating a user to root status (and moves the potential previous root user to a regular user if there is one)

project is now nearing completion () or at the very least an MVP stage, so i will try looking for hosting and a domain. something like Nest would be perfect but seeing as its down i think i might use my raspberry pi. if someone has any tips, on domains or hosting, please lmk!!

Leaderboard :3

theres now a leaderboard which shows the pages that have displayed the most hackvertisements!

you can opt out of the leaderboard, but if you opt in, the iframe will use referrerpolicy="origin" and send the current websites domain root path as the referer header, which then gets logged by the servers database.

the leaderboard rn is probably really inneficient and would not do very well under load, since it is querying and writing to the database every single time a hackvertisement is loaded. i should probably use something like Redis for an in memory database, which is only periodically dumped to the actual stored database.

Clean up and getting CORS working for embeds!

the first screenshot attached shows an actually embedded hackvertisement for the first time! i had to configure some more CORS stuff to get it working but now it should theoretically work even on a non localhost setup.

in the second attachment you can see some small tweaks i did to the navbar. the active tab is now underlined, and i drew icons for both the “home” and “my stuff” buttons. i also fixed a problem with popup/alert windows not displaying over everything else.

i also cleaned up some of the database, removing columns (fields/keys) that were unused. when i was making this DB i had no clue what i was doing so there were some redundant columns.

Finally some much needed input validation :o

i started this task by documenting and restructuring the pile of sphagetti which was the user authentication and hackvertisements code. this is my first ever ruby on rails project, so the user authentication is quite literally the first controller i ever wrote for this language.

i added some checks for the authentication to among other things allow the server to end an authentication process early if required information is missing.

the hardest part was the hackvertisement upload authentication. first of all, i had to find a library that could parse many different file formats and get metadata like width and height. it was kinda hard to find though since all image libraries were quite large and featured image manipulation, while i only needed to read the metadata. i ended up going with “fastimage” though which works lovely!

i also had to detect animated PNGs. most people expect PNGs to be still, but they can be animated, and many programs and websites dont detect this. i would like all hackvertisements to be non-animated to not be too distracting, so i had to figure out how to detect this. i ended up finding a JS function for this, and translated it myself to Ruby, and it looks like this:

def isPngAnimated(data)
      idat_pos = data.index('IDAT')
      idat_pos != nil and data[0..idat_pos].index('acTL') != nil
end

Set up hackvertisement serving and embeds!!

the core functionality of hackvertisements is now finished! users can create, edit and delete hackvertisements, and users can also embed hackvertisements into their own websites!!

the embed is an iframe with its src set to the hackvertisements server. it simply displays a random entry in the hackvertisements database :3
i also did my best to make the embed work on most websites. i want it to be really easy to add without further tweaking or it breaking the website’s flow or causing overflow.

i also added a code block which you can copy which contains the required embed code. (see second attachment)

i still have a lot of work to do regarding sanitizing user input, things like enforcing the image’s width&height, enforcing that it is an image, enforcing that the url is a url, etc.

Added deleting hackvertisements

*i added support for deleting your previously uploaded hackvertisements now :3
i also drew two icons, one for the edit button (a pencil icon), and one for the delete button (a trashcan).
lastly, added more user authentication so now i dont think someone else can edit/destroy someone elses hackvertisements.

NOTE: i havent actually made the uploaded file get deleted from the CDN though, its entry is only removed from the database. for some reason, the hackclub CDN doesnt have an API endpoint for deleting uploaded files. i will see if i can get around this, or potentially pull request, as this seems like an obvious feature. keep in mind the CDN server is seperate from this projects server.

Added styled pages for uploading and editing hackvertisements!

theres now a cool dashboard where you can see (and edit) all your uploaded hackvertisements, and where you can create new hackvertisements!

i also wrote some short instructions for creating hackvertisements, as well as hover tooltips for the two form inputs.

i also added some very basic security measures, like not allowing someone else to edit your hackvertisement, and blocking the hackvertisement controller entirely from non-logged-in users.

Working on the design of the site :>

the website needs to be fun! want to make sure you have the right vibe of the project, so it cant be boring and professional.

have only finished the home page (for both when youre logged in and out), so will work on the dashboard for viewing/editing/deleting your uploaded hackvertisements and uploading new ones.

Added a special dev login

this devlog i added a python helper for directly interfacing with the database and adding a fake user. i also added a form on the main page of the website for logging in directly with a user id, so you can log in to these fake user accounts, sidestepping the hackclub auth.

this is only enabled for development servers obviously so people dont hijack eachothers accounts :3

might work on styling the website a bit next, dont want it to look professional and boring . maybe might otherwise try to finish up the main functionality of the server, i.e. also serving hackvertisements for people to embed.

List user’s hackvertisements on homepage

you can now see your uploaded hackvertisements on the homepage/dashboard thingy! cool beans!

Working image uploads!!!

ive now got image uploads working !! im planning to use hackclub’s CDN service for the actual image hosting, since they offer an API, but for testing i didnt want to use it to avoid sending them a bunch of bad or unnecessary requests, so i setup a local, fake CDN server. its just a flask server which offers the same endpoints as the real hackclub cdn server with the same errors and required arguments, which i can use while in development.

only logged in users can upload images and in the database the owner of a hackvertisement is stored, as well as a user’s owned hackvertisements, which i will use in the future. theres no user input validation yet, though, so thats something i have to work on. i also want to list all your hackvertisements on the homepage dashboard, and allow for editing/deletion of them.

:3

Added signing out and slack user data integration

You can now sign out after signing in and rather than displaying your real name you instead see your hackclub username and profile picture :>

I had to update the hackclub auth scope to get the user’s slack id and then query an API to get user data but i think its worth it as i feel a tad bit uncomfortable whenever i see my real name on apps rather than an online username

First devlog :3

hi! i am going to be making a cool little way of showcasing your hackclub projects! anyone can add a hackvertisement embed to their website and it will display a random hackclubber submitted hackvertisement :>

i decided to use Ruby on Rails for this since its something ive been seeing everywhere and seems fun to learn. it was not fun to learn. i spent maybe 3 hours just installing it and getting it to run. everything felt incredibly unfamiliar and i really struggled with this but did eventually sort of get a hang of it and you can now log in with your hackclub account!