christofsteel/syng-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better everything

Browse source
This commit is contained in:
Christoph Stahl 2025-07-02 12:05:22 +02:00
parent ce14963576
commit fed3e3f586
15 changed files with 98 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
build.py
View file

@ -22,6 +22,7 @@ class Section:
"pymdownx.blocks.html", "pymdownx.blocks.html",
"markdown.extensions.def_list", "markdown.extensions.def_list",
"sane_lists", "sane_lists",
"attr_list",
"pymdownx.blocks.tab", "pymdownx.blocks.tab",
], ],
) )

19
css/app.css
View file

@ -4,35 +4,22 @@
text-shadow: 1px 1px 2px #fefefe; text-shadow: 1px 1px 2px #fefefe;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 5px;
} }
.showcase-image img { .showcase-image img {
display: block; display: block;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
max-height: 500px; max-height: 300px;
/* width: 100%; */ /* width: 100%; */
padding: 10px 0; padding: 10px 0;
} }
.textleft .text {
text-align: right;
}
.grid-container h1 { .grid-container h1 {
border-bottom: 1px solid #0a0a0a; border-bottom: 1px solid #0a0a0a;
} }
.textright .work-feature-block-image {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 500px;
/* width: 100%; */
padding: 10px 0;
}
.hero-full-screen { .hero-full-screen {
padding-top: 100px; padding-top: 100px;
margin-bottom: 100px; margin-bottom: 100px;
@ -122,7 +109,7 @@ body {
#main-content-section .grid-container { #main-content-section .grid-container {
margin: auto; margin: auto;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
border-radius: 10px; border-radius: 5px;
padding: 20px; padding: 20px;
/* max-width: 50%; */ /* max-width: 50%; */
} }

19
dist/css/app.css vendored
View file

@ -4,35 +4,22 @@
text-shadow: 1px 1px 2px #fefefe; text-shadow: 1px 1px 2px #fefefe;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 5px;
} }
.showcase-image img { .showcase-image img {
display: block; display: block;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
max-height: 500px; max-height: 300px;
/* width: 100%; */ /* width: 100%; */
padding: 10px 0; padding: 10px 0;
} }
.textleft .text {
text-align: right;
}
.grid-container h1 { .grid-container h1 {
border-bottom: 1px solid #0a0a0a; border-bottom: 1px solid #0a0a0a;
} }
.textright .work-feature-block-image {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 500px;
/* width: 100%; */
padding: 10px 0;
}
.hero-full-screen { .hero-full-screen {
padding-top: 100px; padding-top: 100px;
margin-bottom: 100px; margin-bottom: 100px;
@ -122,7 +109,7 @@ body {
#main-content-section .grid-container { #main-content-section .grid-container {
margin: auto; margin: auto;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
border-radius: 10px; border-radius: 5px;
padding: 20px; padding: 20px;
/* max-width: 50%; */ /* max-width: 50%; */
} }

18
dist/faq.html vendored
View file

@ -27,6 +27,12 @@
</ul> </ul>
</div> </div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="https://matrix.to/#/#syng:matrix.org" target="_blank"><img alt="Matrix" src="images/matrix.svg" style="max-height:24px;"></a></li>
<li><a href="https://floss.social/@syng" target="_blank"><img alt="Mastodon" src="images/mastodon.svg" style="max-height:24px;"></a></p></li>
</ul>
</div>
</div> </div>
</div> </div>
@ -55,7 +61,7 @@
</dd> </dd>
<dt>What file format can Syng.Rocks! play?</dt> <dt>What file format can Syng.Rocks! play?</dt>
<dd> <dd>
<p>Syng.Rocks! uses <a href="https://mpv.io">MPV</a> to play the karaoke songs, so it supports most video formats including <code>cdg+mp3</code>.</p> <p>Syng.Rocks! uses <a href="https://mpv.io" target="_blank">MPV</a> to play the karaoke songs, so it supports most video formats including <code>cdg+mp3</code>.</p>
</dd> </dd>
<dt>What do you mean by <em>Playback Client</em>, <em>Web Client</em> and <em>Server</em>?</dt> <dt>What do you mean by <em>Playback Client</em>, <em>Web Client</em> and <em>Server</em>?</dt>
<dd> <dd>
@ -63,7 +69,7 @@
The <em>Web Client</em> is the web application that allows you to manage the queue and search for songs. It is used by the guests to add songs to the queue. The <em>Web Client</em> is the web application that allows you to manage the queue and search for songs. It is used by the guests to add songs to the queue.
The <em>Server</em> is the backend that manages the queue and handles connection between web clients and playback clients.</p> The <em>Server</em> is the backend that manages the queue and handles connection between web clients and playback clients.</p>
<p>If you only want to host a karaoke event, you only need the playback client. <p>If you only want to host a karaoke event, you only need the playback client.
The server is optional, as you can use the public server at <a href="https://syng.rocks">syng.rocks</a>.</p> The server is optional, as you can use the public server at <a href="https://syng.rocks" target="_blank">syng.rocks</a>.</p>
</dd> </dd>
<dt>Can I use Syng.Rocks! without internet?</dt> <dt>Can I use Syng.Rocks! without internet?</dt>
<dd> <dd>
@ -71,7 +77,7 @@
</dd> </dd>
<dt>Can I use Syng.Rocks! without a server?</dt> <dt>Can I use Syng.Rocks! without a server?</dt>
<dd> <dd>
<p>You do need some kind of server to manage the queue, but you can use the public server at <a href="https://syng.rocks">syng.rocks</a> to host your karaoke events. No need to roll up your own server.</p> <p>You do need some kind of server to manage the queue, but you can use the public server at <a href="https://syng.rocks" target="_blank">syng.rocks</a> to host your karaoke events. No need to roll up your own server.</p>
</dd> </dd>
<dt>Can I host my own server?</dt> <dt>Can I host my own server?</dt>
<dd> <dd>
@ -86,12 +92,12 @@ If the waiting room is enabled, guests can only add songs to the queue if they h
<dt>What data do you store?</dt> <dt>What data do you store?</dt>
<dd> <dd>
<p>Syng.Rocks! does not store any personal data. The server only stores the current state of the queue. <p>Syng.Rocks! does not store any personal data. The server only stores the current state of the queue.
If you use the public server at <a href="https://syng.rocks">syng.rocks</a>, the server will also store your IP address for a limited time to prevent abuse. If you use the public server at <a href="https://syng.rocks" target="_blank">syng.rocks</a>, the server will also store your IP address for a limited time to prevent abuse.
For more information, see the <a href="privacy.html">privacy policy</a>.</p> For more information, see the <a href="privacy.html">privacy policy</a>.</p>
</dd> </dd>
<dt>I cannot connect to <a href="https://syng.rocks">syng.rocks</a>.</dt> <dt>I cannot connect to <a href="https://syng.rocks">syng.rocks</a>.</dt>
<dd> <dd>
<p>Sometimes the server is down for maintenance. Check the official <a href="https://floss.social/@syng">Mastodon account</a> for announcements. Also check, if your client is up-to-date. The server is only compatible with the latest release.</p> <p>Sometimes the server is down for maintenance. Check the official <a href="https://floss.social/@syng" target="_blank">Mastodon account</a> for announcements. Also check, if your client is up-to-date. The server is only compatible with the latest release.</p>
</dd> </dd>
<dt>What is the restricted mode of the server?</dt> <dt>What is the restricted mode of the server?</dt>
<dd> <dd>
@ -99,7 +105,7 @@ For more information, see the <a href="privacy.html">privacy policy</a>.</p>
</dd> </dd>
<dt>Something does not work, or I have questions not covered here</dt> <dt>Something does not work, or I have questions not covered here</dt>
<dd> <dd>
<p>Feel free to open an issue on the official issue tracker on <a href="https://github.com/christofsteel/syng/issues">GitHub</a> or reach out to us at our official Mastodon account: <a href="https://floss.social/@syng">@syng@floss.social</a> account or join our official matrix room: <a href="https://matrix.to/#/#syng:matrix.org">#syng:matrix.org</a>.</p> <p>Feel free to open an issue on the official issue tracker on <a href="https://github.com/christofsteel/syng/issues" target="_blank">GitHub</a> or reach out to us at our official Mastodon account: <a href="https://floss.social/@syng" target="_blank">@syng@floss.social</a> account or join our official matrix room: <a href="https://matrix.to/#/#syng:matrix.org" target="_blank">#syng:matrix.org</a>.</p>
</dd> </dd>
</dl> </dl>
</div> </div>

2
dist/images/mastodon.svg vendored Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fefefe" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
dist/images/matrix.svg vendored Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fefefe" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Matrix icon</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

32
dist/index.html vendored
View file

@ -27,12 +27,18 @@
</ul> </ul>
</div> </div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="https://matrix.to/#/#syng:matrix.org" target="_blank"><img alt="Matrix" src="images/matrix.svg" style="max-height:24px;"></a></li>
<li><a href="https://floss.social/@syng" target="_blank"><img alt="Mastodon" src="images/mastodon.svg" style="max-height:24px;"></a></p></li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="hero-full-screen"> <div class="hero-full-screen">
<div class="middle-content-section grid-container"> <div class="middle-content-section grid-container">
<div class="grid-x align-middle"> <div class="grid-x align-middle grid-padding-x">
<div class="cell large-6"> <div class="cell large-6">
<p><img alt="Syng.Rocks! Overview" src="images/overview.png" /></p> <p><img alt="Syng.Rocks! Overview" src="images/overview.png" /></p>
</div> </div>
@ -41,10 +47,10 @@
<h1>Syng.Rocks!</h1> <h1>Syng.Rocks!</h1>
<h5>Easily host karaoke events</h5> <h5>Easily host karaoke events</h5>
<p>Syng.Rocks! is a karaoke app that allows you to host karaoke events without much hassle. Whether you have a big collection of karaoke songs, or just want to stream karaoke songs from YouTube, whether you want to sing with a couple of friends or with a crowd of over 100 people, Syng.Rocks! has you covered in a privacy-friendly manner. No need to register, no need to log in, Syng.Rocks! will never collect any personal data from you. You can even host your own server if you want to.</p> <p>Syng.Rocks! is a karaoke app that allows you to host karaoke events without much hassle. Whether you have a big collection of karaoke songs, or just want to stream karaoke songs from YouTube, whether you want to sing with a couple of friends or with a crowd of over 100 people, Syng.Rocks! has you covered in a privacy-friendly manner. No need to register, no need to log in, Syng.Rocks! will never collect any personal data from you. You can even host your own server if you want to.</p>
<p><a href="https://flathub.org/apps/rocks.syng.Syng" target="_blank" class="button">Linux/Flatpak</a> <p><a class="button" href="https://flathub.org/apps/rocks.syng.Syng" target="_blank">Linux/Flatpak</a>
<a href="https://github.com/christofsteel/syng/releases" target="_blank" class="button">Windows</a> <a class="button" href="https://github.com/christofsteel/syng/releases" target="_blank">Windows</a>
<a href="https://syng.rocks" target="_blank" class="button hollow">Web Client</a> <a class="button hollow" href="https://syng.rocks" target="_blank">Web Client</a>
<a href="https://github.com/christofsteel/syng" target="_blank" class="button hollow">Source Code</a></p> <a class="button hollow" href="https://github.com/christofsteel/syng" target="_blank">Source Code</a></p>
</div> </div>
</div> </div>
</div> </div>
@ -52,8 +58,8 @@
</div> </div>
<div id="main-content-section"> <div id="main-content-section">
<div class="grid-container"> <div class="grid-container">
<div class="grid-x grid-padding textleft align-right"> <div class="grid-x grid-padding align-center grid-padding-x">
<div class="cell medium-5 text-right"> <div class="cell medium-4 text-right">
<h2>Start Singing</h2> <h2>Start Singing</h2>
<p>If you only want to have a small YouTube based karaoke event, you can just download the app, share the generated QR Code and start singing. No registration, no login and no configuration required. </p> <p>If you only want to have a small YouTube based karaoke event, you can just download the app, share the generated QR Code and start singing. No registration, no login and no configuration required. </p>
</div> </div>
@ -61,8 +67,8 @@
<p><img alt="Syng.Rocks! Client" src="images/syng.png" /></p> <p><img alt="Syng.Rocks! Client" src="images/syng.png" /></p>
</div> </div>
</div> </div>
<div class="grid-x grid-padding textright"> <div class="grid-x grid-padding-x">
<div class="cell medium-8 showcase-image"> <div class="cell medium-7 showcase-image">
<p><img alt="Syng.Rocks! Web Client" src="images/web-shadows.png" /></p> <p><img alt="Syng.Rocks! Web Client" src="images/web-shadows.png" /></p>
</div> </div>
<div class="cell medium-4"> <div class="cell medium-4">
@ -71,16 +77,16 @@
The web client also contains an admin mode, that allows for manual moderation of the song queue.</p> The web client also contains an admin mode, that allows for manual moderation of the song queue.</p>
</div> </div>
</div> </div>
<div class="grid-x grid-padding textleft align-right"> <div class="grid-x grid-padding-x align-right">
<div class="cell medium-4 text-right"> <div class="cell medium-5 text-right">
<h2>Configure to your needs</h2> <h2>Configure to your needs</h2>
<p>Syng.Rocks! allows for a lot of configuration options. You can set up your own song database, you can set up a <a href="faq.html#waiting-room">waiting room</a>, a set time the event ends and much more.</p> <p>Syng.Rocks! allows for a lot of configuration options. You can set up your own song database, you can set up a <a href="faq.html#waiting-room">waiting room</a>, a set time the event ends and much more.</p>
</div> </div>
<div class="cell medium-8 showcase-image"> <div class="cell medium-6 showcase-image">
<p><img alt="Syng.Rocks! Web Client" src="images/syng_advanced.png" /></p> <p><img alt="Syng.Rocks! Web Client" src="images/syng_advanced.png" /></p>
</div> </div>
</div> </div>
<div class="grid-x grid-padding textright"> <div class="grid-x grid-padding-x">
<div class="cell medium-7 showcase-image"> <div class="cell medium-7 showcase-image">
<p><img alt="Syng.Rocks! Web Client" src="images/sources.svg" /></p> <p><img alt="Syng.Rocks! Web Client" src="images/sources.svg" /></p>
</div> </div>

19
dist/install.html vendored
View file

@ -27,6 +27,12 @@
</ul> </ul>
</div> </div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="https://matrix.to/#/#syng:matrix.org" target="_blank"><img alt="Matrix" src="images/matrix.svg" style="max-height:24px;"></a></li>
<li><a href="https://floss.social/@syng" target="_blank"><img alt="Mastodon" src="images/mastodon.svg" style="max-height:24px;"></a></p></li>
</ul>
</div>
</div> </div>
</div> </div>
@ -39,13 +45,13 @@
<dl> <dl>
<dt>Linux</dt> <dt>Linux</dt>
<dd> <dd>
<p>Syng.Rocks! is available as a Flatpak on <a href="https://flathub.org/apps/rocks.syng.Syng">Flathub</a>. You can install it using the command line with:</p> <p>Syng.Rocks! is available as a Flatpak on <a href="https://flathub.org/apps/rocks.syng.Syng" target="_blank">Flathub</a>. You can install it using the command line with:</p>
<p><code>flatpak install rocks.syng.Syng</code></p> <p><code>flatpak install rocks.syng.Syng</code></p>
<p>There also exists an Arch Linux package in the <a href="https://aur.archlinux.org/packages/syng-client">AUR</a>.</p> <p>There also exists an Arch Linux package in the <a href="https://aur.archlinux.org/packages/syng-client" target="_blank">AUR</a>.</p>
</dd> </dd>
<dt>Windows</dt> <dt>Windows</dt>
<dd> <dd>
<p>Windows binaries are available on <a href="https://github.com/christofsteel/syng/releases">Github</a>. This is a portable version and does not require installation.</p> <p>Windows binaries are available on <a href="https://github.com/christofsteel/syng/releases" target="_blank">Github</a>. This is a portable version and does not require installation.</p>
</dd> </dd>
<dt>Generic</dt> <dt>Generic</dt>
<dd> <dd>
@ -55,11 +61,10 @@
</dl> </dl>
<h2>Server</h2> <h2>Server</h2>
<p>The server is available as a Docker image hosted on Github. You can run it with:</p> <p>The server is available as a Docker image hosted on Github. You can run it with:</p>
<pre><code>docker run ghcr.io/christofsteel/syng <p><code>docker run ghcr.io/christofsteel/syng</code></p>
</code></pre>
<p>Alternatively, you can run the server using the Python Package Index (PyPI) package <code>syng</code>:</p> <p>Alternatively, you can run the server using the Python Package Index (PyPI) package <code>syng</code>:</p>
<pre><code>pip install syng[server] <p><code>pip install syng[server]</code></p>
</code></pre> <p>Similar to the client, there also exists an Arch Linux package in the <a href="https://aur.archlinux.org/packages/syng-server" target="_blank">AUR</a></p>
</div> </div>
</div> </div>

6
dist/privacy.html vendored
View file

@ -27,6 +27,12 @@
</ul> </ul>
</div> </div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="https://matrix.to/#/#syng:matrix.org" target="_blank"><img alt="Matrix" src="images/matrix.svg" style="max-height:24px;"></a></li>
<li><a href="https://floss.social/@syng" target="_blank"><img alt="Mastodon" src="images/mastodon.svg" style="max-height:24px;"></a></p></li>
</ul>
</div>
</div> </div>
</div> </div>

2
images/mastodon.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fefefe" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
images/matrix.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#fefefe" width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Matrix icon</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
site.template.html
View file

@ -26,6 +26,12 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<div class="top-bar-right">
<ul class="menu">
<li><a href="https://matrix.to/#/#syng:matrix.org" target="_blank"><img alt="Matrix" src="images/matrix.svg" style="max-height:24px;"></a></li>
<li><a href="https://floss.social/@syng" target="_blank"><img alt="Mastodon" src="images/mastodon.svg" style="max-height:24px;"></a></p></li>
</ul>
</div>
</div> </div>
</div> </div>

12
sites/faq.md
View file

@ -23,7 +23,7 @@ What are sources?
What file format can Syng.Rocks! play? What file format can Syng.Rocks! play?
: Syng.Rocks! uses [MPV](https://mpv.io) to play the karaoke songs, so it supports most video formats including `cdg+mp3`. : Syng.Rocks! uses [MPV](https://mpv.io){: target="_blank" } to play the karaoke songs, so it supports most video formats including `cdg+mp3`.
What do you mean by *Playback Client*, *Web Client* and *Server*? What do you mean by *Playback Client*, *Web Client* and *Server*?
@ -32,7 +32,7 @@ What do you mean by *Playback Client*, *Web Client* and *Server*?
The *Server* is the backend that manages the queue and handles connection between web clients and playback clients. The *Server* is the backend that manages the queue and handles connection between web clients and playback clients.
If you only want to host a karaoke event, you only need the playback client. If you only want to host a karaoke event, you only need the playback client.
The server is optional, as you can use the public server at [syng.rocks](https://syng.rocks). The server is optional, as you can use the public server at [syng.rocks](https://syng.rocks){: target="_blank" }.
Can I use Syng.Rocks! without internet? Can I use Syng.Rocks! without internet?
@ -40,7 +40,7 @@ Can I use Syng.Rocks! without internet?
Can I use Syng.Rocks! without a server? Can I use Syng.Rocks! without a server?
: You do need some kind of server to manage the queue, but you can use the public server at [syng.rocks](https://syng.rocks) to host your karaoke events. No need to roll up your own server. : You do need some kind of server to manage the queue, but you can use the public server at [syng.rocks](https://syng.rocks){: target="_blank" } to host your karaoke events. No need to roll up your own server.
Can I host my own server? Can I host my own server?
@ -55,12 +55,12 @@ Can I host my own server?
What data do you store? What data do you store?
: Syng.Rocks! does not store any personal data. The server only stores the current state of the queue. : Syng.Rocks! does not store any personal data. The server only stores the current state of the queue.
If you use the public server at [syng.rocks](https://syng.rocks), the server will also store your IP address for a limited time to prevent abuse. If you use the public server at [syng.rocks](https://syng.rocks){: target="_blank" }, the server will also store your IP address for a limited time to prevent abuse.
For more information, see the [privacy policy](privacy.html). For more information, see the [privacy policy](privacy.html).
I cannot connect to [syng.rocks](https://syng.rocks). I cannot connect to [syng.rocks](https://syng.rocks).
: Sometimes the server is down for maintenance. Check the official [Mastodon account](https://floss.social/@syng) for announcements. Also check, if your client is up-to-date. The server is only compatible with the latest release. : Sometimes the server is down for maintenance. Check the official [Mastodon account](https://floss.social/@syng){: target="_blank" } for announcements. Also check, if your client is up-to-date. The server is only compatible with the latest release.
What is the restricted mode of the server? What is the restricted mode of the server?
@ -68,6 +68,6 @@ What is the restricted mode of the server?
Something does not work, or I have questions not covered here Something does not work, or I have questions not covered here
: Feel free to open an issue on the official issue tracker on [GitHub](https://github.com/christofsteel/syng/issues) or reach out to us at our official Mastodon account: [@syng@floss.social](https://floss.social/@syng) account or join our official matrix room: [#syng:matrix.org](https://matrix.to/#/#syng:matrix.org). : Feel free to open an issue on the official issue tracker on [GitHub](https://github.com/christofsteel/syng/issues){: target="_blank" } or reach out to us at our official Mastodon account: [@syng@floss.social](https://floss.social/@syng){: target="_blank" } account or join our official matrix room: [#syng:matrix.org](https://matrix.to/#/#syng:matrix.org){: target="_blank" }.
/// ///
/// ///

26
sites/index.md
View file

@ -1,7 +1,7 @@
!!section:header,markdown !!section:header,markdown
/// html | div.hero-full-screen /// html | div.hero-full-screen
/// html | div.middle-content-section.grid-container /// html | div.middle-content-section.grid-container
/// html | div.grid-x.align-middle /// html | div.grid-x.align-middle.grid-padding-x
/// html | div.cell.large-6 /// html | div.cell.large-6
![Syng.Rocks! Overview](images/overview.png) ![Syng.Rocks! Overview](images/overview.png)
/// ///
@ -12,15 +12,15 @@
Syng.Rocks! is a karaoke app that allows you to host karaoke events without much hassle. Whether you have a big collection of karaoke songs, or just want to stream karaoke songs from YouTube, whether you want to sing with a couple of friends or with a crowd of over 100 people, Syng.Rocks! has you covered in a privacy-friendly manner. No need to register, no need to log in, Syng.Rocks! will never collect any personal data from you. You can even host your own server if you want to. Syng.Rocks! is a karaoke app that allows you to host karaoke events without much hassle. Whether you have a big collection of karaoke songs, or just want to stream karaoke songs from YouTube, whether you want to sing with a couple of friends or with a crowd of over 100 people, Syng.Rocks! has you covered in a privacy-friendly manner. No need to register, no need to log in, Syng.Rocks! will never collect any personal data from you. You can even host your own server if you want to.
<a href="https://flathub.org/apps/rocks.syng.Syng" target="_blank" class="button">Linux/Flatpak</a> [Linux/Flatpak](https://flathub.org/apps/rocks.syng.Syng){: .button target="_blank" }
<a href="https://github.com/christofsteel/syng/releases" target="_blank" class="button">Windows</a> [Windows](https://github.com/christofsteel/syng/releases){: .button target="_blank" }
<a href="https://syng.rocks" target="_blank" class="button hollow">Web Client</a> [Web Client](https://syng.rocks){: .button .hollow target="_blank" }
<a href="https://github.com/christofsteel/syng" target="_blank" class="button hollow">Source Code</a> [Source Code](https://github.com/christofsteel/syng){: .button .hollow target="_blank" }
!!section:content,markdown !!section:content,markdown
/// html | div#main-content-section /// html | div#main-content-section
/// html | div.grid-container /// html | div.grid-container
/// html | div.grid-x.grid-padding.textleft.align-right /// html | div.grid-x.grid-padding.align-center.grid-padding-x
/// html | div.cell.medium-5.text-right /// html | div.cell.medium-4.text-right
## Start Singing ## Start Singing
If you only want to have a small YouTube based karaoke event, you can just download the app, share the generated QR Code and start singing. No registration, no login and no configuration required. If you only want to have a small YouTube based karaoke event, you can just download the app, share the generated QR Code and start singing. No registration, no login and no configuration required.
@ -29,8 +29,8 @@ If you only want to have a small YouTube based karaoke event, you can just downl
![Syng.Rocks! Client](images/syng.png) ![Syng.Rocks! Client](images/syng.png)
/// ///
/// ///
/// html | div.grid-x.grid-padding.textright /// html | div.grid-x.grid-padding-x
/// html | div.cell.medium-8.showcase-image /// html | div.cell.medium-7.showcase-image
![Syng.Rocks! Web Client](images/web-shadows.png) ![Syng.Rocks! Web Client](images/web-shadows.png)
/// ///
/// html | div.cell.medium-4 /// html | div.cell.medium-4
@ -40,17 +40,17 @@ Let your guests join your karaoke event using the web client. They can use their
The web client also contains an admin mode, that allows for manual moderation of the song queue. The web client also contains an admin mode, that allows for manual moderation of the song queue.
/// ///
/// ///
/// html | div.grid-x.grid-padding.textleft.align-right /// html | div.grid-x.grid-padding-x.align-right
/// html | div.cell.medium-4.text-right /// html | div.cell.medium-5.text-right
## Configure to your needs ## Configure to your needs
Syng.Rocks! allows for a lot of configuration options. You can set up your own song database, you can set up a [waiting room](faq.html#waiting-room), a set time the event ends and much more. Syng.Rocks! allows for a lot of configuration options. You can set up your own song database, you can set up a [waiting room](faq.html#waiting-room), a set time the event ends and much more.
/// ///
/// html | div.cell.medium-8.showcase-image /// html | div.cell.medium-6.showcase-image
![Syng.Rocks! Web Client](images/syng_advanced.png) ![Syng.Rocks! Web Client](images/syng_advanced.png)
/// ///
/// ///
/// html | div.grid-x.grid-padding.textright /// html | div.grid-x.grid-padding-x
/// html | div.cell.medium-7.showcase-image /// html | div.cell.medium-7.showcase-image
![Syng.Rocks! Web Client](images/sources.svg) ![Syng.Rocks! Web Client](images/sources.svg)
/// ///

12
sites/install.md
View file

@ -8,17 +8,17 @@ Depending on your platform, you can install Syng.Rocks! in different ways.
Linux Linux
: Syng.Rocks! is available as a Flatpak on [Flathub](https://flathub.org/apps/rocks.syng.Syng). You can install it using the command line with: : Syng.Rocks! is available as a Flatpak on [Flathub](https://flathub.org/apps/rocks.syng.Syng){: target="_blank" }. You can install it using the command line with:
``` ```
flatpak install rocks.syng.Syng flatpak install rocks.syng.Syng
``` ```
There also exists an Arch Linux package in the [AUR](https://aur.archlinux.org/packages/syng-client). There also exists an Arch Linux package in the [AUR](https://aur.archlinux.org/packages/syng-client){: target="_blank" }.
Windows Windows
: Windows binaries are available on [Github](https://github.com/christofsteel/syng/releases). This is a portable version and does not require installation. : Windows binaries are available on [Github](https://github.com/christofsteel/syng/releases){: target="_blank" }. This is a portable version and does not require installation.
Generic Generic
@ -32,10 +32,16 @@ Generic
The server is available as a Docker image hosted on Github. You can run it with: The server is available as a Docker image hosted on Github. You can run it with:
```
docker run ghcr.io/christofsteel/syng docker run ghcr.io/christofsteel/syng
```
Alternatively, you can run the server using the Python Package Index (PyPI) package `syng`: Alternatively, you can run the server using the Python Package Index (PyPI) package `syng`:
```
pip install syng[server] pip install syng[server]
```
Similar to the client, there also exists an Arch Linux package in the [AUR](https://aur.archlinux.org/packages/syng-server){: target="_blank" }
/// ///
/// ///