Giter Club home page Giter Club logo

kendalldoescoding / mogul-christmas Goto Github PK

View Code? Open in Web Editor NEW
22.0 2.0 61.0 23.36 MB

Ludwig Ahgren made a Christmas Album in 2020. I just thought of a project cause I was bored where you can play all the songs by a click of a button which you can already do from his timestamps but what makes it special is that it has lyrics of those songs too and a bunch of other features.

Home Page: https://kendalldoescoding.tech/mogulchristmas

License: Creative Commons Zero v1.0 Universal

HTML 92.32% CSS 3.58% JavaScript 4.10%
ludwig html css christmas mogul-christmas songs music fun-project youtube qtcinderella

mogul-christmas's Introduction

mogul-christmas

Open in Gitpod

Introduction

This is a project where you can play all the songs by a click of a button which you can already do from the timestamps but what makes it unique is that it has lyrics of the songs and a bunch of other features like a photo gallery.

On the 18th of December 2021, I was bored, so I created this basic HTML Project. I felt like continuing with this fun project, so I enlisted the help of a few contributors.

Check it out here

The project website is hosted here!

Backup URL: Backup Domain

Make sure you check it out.

Build Status

You can view the versions & previews here

Please Note: This only has 25 releases, at the time of writing this (21st September 2022, 6:29pm IST) there are 87 more releases not added to this list.

  • For updates on the website, I've written it as a Version, and for updates on Github we've written it as a Release, for Releases, we've provided a complete changelog.

  • If you would prefer dark mode on this site, you can toggle dark mode on or off by using the button in the top right corner of the site.

Please note that since version 8.0, we have updated how the website looks so that there is no embed/iframe. While that does slow down the performance(how fast the song plays and the user does not know if the song is loading or not), the song should play in 1-5 seconds. In case of any issue, please create a bug report issue using the template in the issue panel in this repo. However, since the release of 10.5.0, the songs have started playing a little faster than they used to, only taking only 1-4 seconds.

Deploy Status

Below, you can see the progress of the GitHub deployment to the site. In case a change is made to this repo, it takes around 2-5 minutes to display on the site, depending on if there are other deploy's going on within Pull Requests or within repos that have sites, because using Netlify, I can only deploy one thing at a time.

Netlify Status

Images From Website

Landing Page

Landing Page

Landing Page (Dark Mode)

Landing Page darkmode

Photo Gallery

Photo Gallery

Songs With Lyrics

Lyrics landing page

Recommended Songs

Rating page

Ludwig's Socials

Ludwig Socials

Contributing Guidelines & Related Contributing Stuff

Contributing Guidelines

Your contributions are always welcome!

Please go through the active issues, before you plan to contribute.

How to contribute

There are different ways to use git and GitHub.
In this tutorial we will try to keep stuff simple and therefore use the command line.

Find an issue

While viewing the repository you can use the tap "Issues" to view and filter open issues.
There are some tags like "good first issue" or "beginner" that might be of special interest to you.

Fork the repository

Why should you fork the repository?

A fork of a repository is a copy that still remembers where it came from. Advantages of this are:

  • You can open your own branches separate from the forked (upstream) repository.
  • You can easily keep your repository up to date by simply pulling changes from upstream.
  • Once you have finished making the changes you want to make, suggesting this changes for the original is very easy.

Using forks and pull request makes developing with many contributors less complicated for everybody involved!

How to fork the repository

As long as you are visiting the repository there is a button called "fork" on the top right of the page.
By clicking it and confirming you can fork the repository.

For the next steps you need to have git installed on your device. If you haven't already done that, this page might help.

Clone your version of the repository

Why do we clone the repository?

After forking a repository it still is not local on your device.
For bringing the repository on your device you need to clone it.

How to clone

Go to your version of the repository, click on the "Code" button and choose one of three ways: HTTPS, SSH or GitHub CLI. Copy the line beneath the method.

Open a terminal and navigate to where you want to place the repository.
Enter git clone <copied url>

Create a branch

Working on branches helps keeping different versions of your code and different uncompleted features from becoming a big mess. You never work directly on the main branch (sometimes also called master).

Change to the repository directory on your computer (if you are not already there):

cd mogul-christmas

Now create a branch using the git checkout command:

git checkout -b your-new-branch-name

For example:

git checkout -b do-something

Make necessary changes

Do whatever you planned to do.

Commit changes

Adding files

For adding specific files: git add <filename>

Be sure only files you wish to add have been changed. Use git status to check.

Committing added files

Use
git commit -m "<commit message>" Your commit message should describe the changes you have made.

Push changes to GitHub

To make your local changes visible for remote (so you can see and interact with them on GitHub) you need to push them.

Push your changes using the command git push:

git push origin <add-your-branch-name>

Create a pull request

In your repository on GitHub, you'll see a "Compare & pull request" button. Click on that button.

You will have the option to give some additional information to the changes your pull request is going to cause by entering text. After you have done that, create the pull request by clicking on "Create pull request".

Wait for review

Your reviewer might merge the request or ask for you to make some changes.

If there are some improvements you need to do, don't worry:
Everything you push on your branch will now be added to the pull request. (That is one of the reasons we need different branches for different issues!). You can use the comments to ask for clarification if needed. As soon as the reviewer is happy, your changes will be merged.
(Remember: your reviewer is a person who tries to work for the good of all. Don't ever be harsh with them, especially if they wish for multiple changes.)

Happy Coding!

Issues which new contributors can take up.

Credits

Project credits are located here.

Credits include the following:

  • Mogul Christmas Team
  • Project Contributors
  • Singers whose songs are in the You May Like directory.

Contributors

Thanks to all our contributors for their active support and participation!

mogul-christmas's People

Contributors

0xmukesh avatar 93belen avatar abhinav2712 avatar aliraza944 avatar allcontributors[bot] avatar arhyasaha avatar bibhavshah avatar cipherkill avatar divyakelaskar avatar eduarecnam avatar fk00750 avatar frazie avatar gabrysia694 avatar harisdev-netizen avatar imgbot[bot] avatar imgbotapp avatar jeffbucherdev avatar kanielpinto avatar kendalldoescoding avatar kendalldoescodingalt avatar michael-obele avatar mnik7044 avatar mukul314 avatar mumtaz12 avatar nsysean avatar sanjana-1604 avatar shalini469717 avatar sharmavivek223 avatar techstudent10 avatar wyenelle avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

mogul-christmas's Issues

Extra slashes in _redirects

There are some extra /'s in the redirect file links. The redirects will work even without them in the end.

I need to get to removing them.

[FEATURE REQUEST] Loop song

For now, users can tap a song and play it, I was thinking that we could add a loop command or something in the program so if they tap it their song will automatically loop, instead of them having to manually do it again, if they are running the website in the background.

The youtube loop will not work, because the youtube loop will only loop after it's finished with "All I want for Christmas" and it will start from the first song "The Christmas Song" but I want this loop feature to be only to LOOP the same song again.

[FEATURE REQUEST] Button to toggle dark mode

My original idea for #45 was to make it so it reads if chrome theme is black and accordingly shows in dark mode or light mode, @Bibhavshah made a PR that if your Windows theme was black, the page displayed in black too. Which was a great concept, but I didn't really like that concept. I had a while to think about it, and I decided that it would be great if it was made so that if the user on their keyboard types "d" the background color goes to #d9d9d9 and if they type "l" it remains white and they can keep on switching their input to change the bg color.

That would be really cool.

EDIT: As discussed below, let's make a button to toggle on/off darkmode.

[FEATURE REQUEST] - Put all lyrics in one js file

Is your feature request related to a problem? Please describe.
No, I just thought that we could enhance the idea of #11 and set it so that all the lyrics which are currently in the songs respective folder should go in a file called lyrics.js and with that, instead of JS files in every lyric folder.

[FEATURE REQUEST] Auto-stop when song is over.

Right now, we have only made it so that if they tap the song it will automatically start from there, in the main directory. Idk about that for the lyrics directory as seen in #8 . But anyways, it would be good if it can be made so that, it starts the song from there. And it knows when the next song is set. So then, it automatically stops after the song and the user will have to tap the next song if they want to listen to it.

Becuase, sometimes people only want to listen to one song not all of them.

[BUG REPORT]:- (Release number incorrect)

Duplicate Issues

  • There are no existing posts relating to my problem
  • There are existing posts relating to my problem, but the solution given, doesn't work for me.

What happened?

Release number incorrect

Release version

No response

Steps to reproduce

None

What platform are you seeing this problem on?

Windows

Relevant console log (if any)

No response

Organize files more better

Move the css and JS file to another folder called href or something to format the main directory better.

Remove iframe/embed from lyrics directory.

For the lyrics directory, I just want to song to autoplay in the background without the iframe/embed showing. I can add a .mp3 file in the assets folder of the songs, if that's not possible, because then I think it should be able to be done.

Update text

Instead of the text "Christmas Album By Ludwig" I think the name can be Ludwig Ahgren

[FEATURE REQUEST]: Change embed automatically when clicked to link and autoplay embed.

Right now, the site hosted on https://kendalldoescoding.gq/mogulchristmas, has a embed on top with all the songs and a list of the songs below and if they click the songs it redirects them to a new tab (I'm working on making it so that it redirects them in a different tab), but I want it to be possible that when they click the song, in the embed it automatically goes to that part of the video, that's actually pretty easy to get the embed code, but idk how to work on when tapped do this in JS. That will be very useful and keeping everything in the site.

[FEAUTRE REQUEST] Const lyrics in Javascript

Right now, for the lyrics directory, I have to continuously add the p tag and remove it to remove lyrics, and there's just a lot of code going into the html. I think it's possible to const all the lyrics for all the songs in the Javascript file and call upon the lyrics for that specific song in the lyrics directory. That would also avoid the p tag mess and stuff, if possible.

The autoplay embed is on mute.

Now, if you tap any song, it autoplays it on the webpage itself. But, it's going on mute as the autoplay embed? Can we fix that or is that just Chrome's settings and you can't do anything about it?

EDIT AS OF 22ND DECEMBER: It depends on your youtube setting, if the last video you watched on youtube was on mute, it remains muted in embeds too.

Update Version & Previews

Update Version & Previews for 10 releases

EDIT: #109 added most of the releases needed, only 3 more need to be added now.

EDIT 2: 10 releases to be added now.

Remove christmas tree image src from body in css, link it via html though

The christmas trees in the other projects directory was merging with the text, so I made a new css and removed that, not I realize that in the lyrics directory, in the songs its coming in the bottom corners but in https://mogulchristmas.kendalldoescoding.gq/lyrics there is half a christmas tree.

I need to figure out how to make a div class in index.html and in index.html for each of the song lyric directory too and link that christmas tree image to that, and nothing else, cause rn its linked to the body in css to all the pages.

@Bibhavshah, @TechStudent11 I need your help for this.

EDIT: I don't mind if main.css is in the other projects directory now but now #83 fixes the christmas tree issue.

[FEATURE REQUEST] Version changelogs in README.md

After the version preview and github release page, I think we should also inculde a version changelog from the previous version.

For example changes made in 2.0 which weren't there in 1.0. That's possible to check from the release page I think, but we can save users a few clicks by doing this.

[FEATURE REQUEST] Auto-embed in lyrics instead of iframe

Right now, in the lyrics directory. The iframe for the song is still running. But, I think we can call upon the function we created in the JS for the timestamps for each song, and set that in the directory. I explained it in a confusing manner but yeah. And using #9 we can automatically stop the song, but even if we don't implement #9 that would still be fine as it would be as it is now, but without the long iframe.

[Javascript] Format lyrics proper in lyrics directory songs

In the lyrics of the actual songs which are in the lyrics directory, there are paragraphs in between. In the project lyrics directory for the songs there are no gaps or spaces between paragraphs so this needs working on for the formatting.

[BUG REPORT]:- (Embed issue in Lyrics path, Christmas Song)

Duplicate Issues

  • There are no existing posts relating to my problem
  • There are existing posts relating to my problem, but the solution given, doesn't work for me.

What happened?

I was trying to play the charismas song embed in the lyrics path when I got this embed error.

Infomation here - https://user-images.githubusercontent.com/76978184/147239658-03ed7b6d-7e4b-4b89-9cbc-544656b92f99.png

Release version

Current Website Version

Steps to reproduce

  1. Go to https://mogulchristmas.kendalldoescoding.gq/lyrics/christmassong/
  2. Play sog

What platform are you seeing this problem on?

Windows

Relevant console log (if any)

No response

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.