Skip to content

Commit f7ac9fc

Browse files
committed
Rewrite the site to use Jekyll
This allows modular component reuse on the frontend (like the header/footer) without putting it into every single page. It has to be generated first with Jekyll (make sure you have Jekyll export it into the server directory the jar uses). Use For-loop for FAQ Move Variables to data file - Also move _config.yml into web folder - Fix CDN var - Add var for the GitHub Add Liquify Plugin Fixes the Git links since they Liquid variables can't be used in Yaml files like the data set used for the FAQ Navbar by Looping Simplify adding Nav Bar items by doing a for loop with a Data file Split Tweet button into include Convert Profile page into Jekyll Convert Retro into Jekyll - FAQ now loads the same content as the updated site but in the style of the old page - Added Header/Footer to FAQ to make it easier to navigate. - Added a "Return to Modern Jukebox" link to Retro Footer since Retro doesn't have the dropdown nav. Add Compression Add a layout that auto-compresses the page code on generation by trimming whitespace, removing optional end/start tags, and more. Remove Duplicate Jquery line in Retro Also a couple blank lines Move Rufous iframe to Default layout Go and Search Layout Go and Search pages are very similar between the Jukebox and Canonizer other than a few minor things (like API endpoint on the Search pages) Also updated the button panel to be made dynamically with YAML in the layout (no separate data file since there's so little items)
1 parent a17197a commit f7ac9fc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1942
-2455
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,4 @@ trid_audio/
5555
working/
5656
!/src/main/kotlin/org/abimon/eternalJukebox/data/audio
5757
/data/
58+
web

_web/_config.yml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: The Eternal Jukebox
2+
url: https://eternal.abimon.org
3+
4+
defaults:
5+
-
6+
scope:
7+
path: "" # an empty string here means all files in the project
8+
values:
9+
layout: "default"
10+
11+
compress_html:
12+
clippings: all
13+
endings: all
14+
ignore:
15+
envs: []
16+
blanklines: true
17+
profile: false # Enable to see a table at the bottom of the page to show how much it was compressed, make sure to disable for production.
18+
startings: [html, head, body]

_web/_data/faq.yml

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
faq:
2+
- question: What is this?
3+
id: about
4+
answer: "_For when your favorite song just isn't long enough._\n
5+
This web app lets you search a song on Spotify and will then generate a never-ending and ever changing version of the song. It does what Infinite Gangnam Style did but for any song."
6+
7+
- question: How does it work?
8+
id: technical
9+
answer: "We use the [Spotify API](https://developer.spotify.com/web-api/get-audio-features/) to break the song into beats. We play the song beat by beat, but at every beat there's a chance that we will jump to a different part of song that happens to sound very similar to the current beat. For beat similarity we look at pitch, timbre, loudness, duration and the position of the beat within a bar. There's a nifty visualization that shows all the possible transitions that can occur at any beat.\n\n
10+
The backend is written in [Kotlin](https://kotlinlang.org/) and hosted on a [Google Compute](https://console.cloud.google.com/) server. The source code is available [here.]({{ site.data.var.git }})"
11+
12+
- question: Are there any ways to control the song?
13+
id: control
14+
answer: "Yes - here are some keys:\n
15+
* **[Space]** - Start and stop playing the song\n
16+
* **[Left Arrow]** - Decrement the current play velocity by one\n
17+
* **[Right Arrow]** - Increment the current play velocity by one\n
18+
* **[Down Arrow]** - Sets the current play velocity to zero\n
19+
* **[Control]** - freeze on the current beat\n
20+
* **[Shift]** - bounce between the current beat and all of the similar sounding beats. These are the branch points.\n
21+
* **'H'** - Bring it on home - toggles infinite mode off/on."
22+
23+
- question: What do the coloured blocks represent?
24+
id: colours
25+
answer: Each block represents a beat in the song. The colors are related to the timbre of the music for that beat.
26+
27+
- question: How can I tune the Jukebox?
28+
id: tune
29+
answer: "(For detailed tuning instructions see ['Tuning the Infinite Jukebox'](http://musicmachinery.com/2012/11/26/tuning-the-infinite-jukebox/) on Music Machinery.)\n
30+
This is a mostly experimental feature.\n
31+
32+
* You can tune by clicking the tune button.\n
33+
* Adjust the slider to the left for higher audio quality, and adjust the slider to the right for more branch points.\n
34+
* You can also delete any edge by clicking on it to select it (when selected the edge turns red).\n
35+
* Delete the edge by pressing the **[del]** key.\n
36+
* The Infinite Jukebox will try hard to maximize the amount of the song that is played when in infinite mode.\n
37+
* This behavior can be turned off by de-selecting the 'Loop Extension Optimization' checkbox.\n
38+
* If we don't get the track right for the song you request, you can change the audio by putting in a YouTube URL into the Audio URL box.\n
39+
* You can also upload an audio track for the current song using the 'Browse' button\n
40+
* You can throw away all of your tunings by pressing the 'reset' button.\n
41+
* You can share your tuned songs, all your edits are encoded in the URL."
42+
43+
- question: I have an awesome infinite track that I'd like everyone to hear. What do I do?
44+
id: sharing
45+
answer: "You can tweet it with the tags [#EternalJukebox](https://twitter.com/hashtag/eternaljukebox)\n\n
46+
...or you could submit it to the [InfiniteJukebox subreddit](https://www.reddit.com/r/infinitejukebox)\n\n
47+
...or you might want to share it in the [Eternal Jukebox Discord](https://discord.gg/KWN5BfD).\n\n
48+
49+
You can either copy the URL of the page you're on, or you can click the 'Share' button to obtain a nicer link to use."
50+
51+
- question: Who made the cool logo?
52+
id: logo
53+
answer: The logo was contributed by [Jasper Allijn](http://jasperallijn.crevado.com/)
54+
55+
- question: Who made this?
56+
id: creator
57+
answer: "The original site was made by [Paul Lamere](http://twitter.com/plamere) at [Music Hack Day Boston](http://boston.musichackday.org/) on November 11, 2012 (More info at [Music Machinery](http://musicmachinery.com/2012/11/12/the-infinite-jukebox/) ), and used to be hosted over [here.](http://labs.echonest.com/Uploader/index.html)
58+
This site is a rework of the original project, and is now hosted by [UnderMybrella]({{ site.data.var.git }})."
59+
60+
- question: Help! My audio seems to be jumping randomly!
61+
id: random-jump
62+
answer: "There's a couple of reasons this could be:\n\n
63+
The most likely being that the audio file we found for your song doesn't match up perfectly with the version that Spotify has, which means you'll experience jumps at points that there shouldn't be throughout a song.\n\n
64+
The solution to this is to find a version of it that matches up to the version on Spotify **as close as possible**, or to upload your own track, if you can't find one online.\n\n
65+
If you _do_ have a song that seems to be synchronised perfectly, but still seems to jump randomly, feel free to file an issue [here]({{ site.data.var.git }}/issues)"
66+
67+
- question: Help! Something broke!
68+
id: issue
69+
answer: This is still a fairly early build, so there may be some bugs in the server. If you do find an issue, please file an issue [here]({{ site.data.var.git }}/issues).

_web/_data/nav.yml

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
main-dropdown:
2+
- title: The Eternal Jukebox
3+
url: jukebox_index.html
4+
5+
- title: The (Retro) Eternal Jukebox
6+
url: retro_index.html
7+
8+
- title: The Autocanonizer
9+
url: canonizer_index.html
10+
11+
social:
12+
- title: Infinite Jukebox Reddit
13+
id: show-reddit
14+
url: https://www.reddit.com/r/infinitejukebox/
15+
- title: Eternal Jukebox Discord
16+
id: show-discord
17+
url: https://discord.gg/KWN5BfD
18+
19+
bar:
20+
- title: Main
21+
id: show-main
22+
canonizer: canonizer_index.html
23+
jukebox: jukebox_index.html
24+
- title: Pick a song
25+
id: show-loader
26+
canonizer: canonizer_search.html
27+
jukebox: jukebox_search.html
28+
- title: About
29+
id: show-about
30+
canonizer: http://musicmachinery.com/2014/03/13/the-autocanonizer
31+
jukebox: http://musicmachinery.com/2012/11/12/the-infinite-jukebox

_web/_data/var.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
cdn: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7"
2+
git: "https://github.com/UnderMybrella/EternalJukebox"
3+
jquery: "https://code.jquery.com"

_web/_includes/footer.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{% if page.layout == 'retro' %}
2+
<div id="footer">
3+
<ul id="footer-list">
4+
<li>Now powered by <a href="http://http://spotify.com/">Spotify </a></li>
5+
<li>Built at <a href="http://boston.musichackday.org/">Music Hack Day @ MIT</a> by <a
6+
href="http://twitter.com/plamere"> Paul Lamere </a></li>
7+
<li>Now hosted by <a href="{{ site.data.var.git }}"> UnderMybrella </a></li>
8+
<li>Read the <a href="retro_faq.html"> FAQ </a></li>
9+
<li>More info at <a href="http://musicmachinery.com/2012/11/12/the-infinite-jukebox/">Music Machinery</a></li>
10+
<li>Check out the <a href="http://www.reddit.com/r/infinitejukebox/"> Infinite Jukebox Reddit </a></li>
11+
</ul>
12+
<!--
13+
Interested in a <b>mobile</b> version of the Infinite Jukebox? Let me know by taking this
14+
<a href="https://docs.google.com/forms/d/1jLy_XlPt2WD4tuE9-paLBMbapzLJ9CAgTDjuD2Wefa0/viewform">
15+
one minute survey</a>.
16+
-->
17+
<!--
18+
-->
19+
</div>
20+
{% else %}
21+
<hr>
22+
<div class="container span11">
23+
<small>
24+
Originally built at <a href="http://boston.musichackday.org/">Music Hack Day @ MIT</a> by
25+
<a href="http://twitter.com/plamere"> Paul Lamere </a>
26+
Now hosted by <a href="{{ site.data.var.git }}"> UnderMybrella </a> and
27+
powered by <a href="http://http://spotify.com/">Spotify. </a>
28+
</small>
29+
</div>
30+
{% endif %}

_web/_includes/ga.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script type="text/javascript">
2+
3+
var _gaq = _gaq || [];
4+
_gaq.push(['_setAccount', 'UA-3675615-27']);
5+
_gaq.push(['_trackPageview']);
6+
7+
(function () {
8+
var ga = document.createElement('script');
9+
ga.type =
10+
'text/javascript';
11+
ga.async = true;
12+
ga.src = ('https:' === document.location.protocol ? 'https://ssl' :
13+
'http://www') + '.google-analytics.com/ga.js';
14+
var s = document.getElementsByTagName('script')[0];
15+
s.parentNode.insertBefore(ga, s);
16+
})();
17+
18+
</script>

0 commit comments

Comments
 (0)