diff --git a/build.py b/build.py index f5202db..def469c 100644 --- a/build.py +++ b/build.py @@ -22,6 +22,7 @@ class Section: "pymdownx.blocks.html", "markdown.extensions.def_list", "sane_lists", + "attr_list", "pymdownx.blocks.tab", ], ) diff --git a/css/app.css b/css/app.css index 0d984b4..20d2ecb 100644 --- a/css/app.css +++ b/css/app.css @@ -4,35 +4,22 @@ text-shadow: 1px 1px 2px #fefefe; background: rgba(255, 255, 255, 0.8); padding: 20px; - border-radius: 10px; + border-radius: 5px; } .showcase-image img { display: block; margin-right: auto; margin-left: auto; - max-height: 500px; + max-height: 300px; /* width: 100%; */ padding: 10px 0; } -.textleft .text { - text-align: right; -} - .grid-container h1 { 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 { padding-top: 100px; margin-bottom: 100px; @@ -122,7 +109,7 @@ body { #main-content-section .grid-container { margin: auto; background: rgba(255, 255, 255, 0.8); - border-radius: 10px; + border-radius: 5px; padding: 20px; /* max-width: 50%; */ } diff --git a/dist/css/app.css b/dist/css/app.css index 0d984b4..20d2ecb 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -4,35 +4,22 @@ text-shadow: 1px 1px 2px #fefefe; background: rgba(255, 255, 255, 0.8); padding: 20px; - border-radius: 10px; + border-radius: 5px; } .showcase-image img { display: block; margin-right: auto; margin-left: auto; - max-height: 500px; + max-height: 300px; /* width: 100%; */ padding: 10px 0; } -.textleft .text { - text-align: right; -} - .grid-container h1 { 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 { padding-top: 100px; margin-bottom: 100px; @@ -122,7 +109,7 @@ body { #main-content-section .grid-container { margin: auto; background: rgba(255, 255, 255, 0.8); - border-radius: 10px; + border-radius: 5px; padding: 20px; /* max-width: 50%; */ } diff --git a/dist/faq.html b/dist/faq.html index 8bed75e..e7f5a5f 100644 --- a/dist/faq.html +++ b/dist/faq.html @@ -27,6 +27,12 @@ +
+ +
@@ -55,7 +61,7 @@
What file format can Syng.Rocks! play?
-

Syng.Rocks! uses MPV to play the karaoke songs, so it supports most video formats including cdg+mp3.

+

Syng.Rocks! uses MPV 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?
@@ -63,7 +69,7 @@ The Web Client 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 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. - The server is optional, as you can use the public server at syng.rocks.

+ The server is optional, as you can use the public server at syng.rocks.

Can I use Syng.Rocks! without internet?
@@ -71,7 +77,7 @@
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 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 to host your karaoke events. No need to roll up your own server.

Can I host my own server?
@@ -86,12 +92,12 @@ If the waiting room is enabled, guests can only add songs to the queue if they h
What data do you store?

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, the server will also store your IP address for a limited time to prevent abuse. +If you use the public server at syng.rocks, the server will also store your IP address for a limited time to prevent abuse. For more information, see the privacy policy.

I cannot connect to syng.rocks.
-

Sometimes the server is down for maintenance. Check the official Mastodon account 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 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?
@@ -99,7 +105,7 @@ For more information, see the privacy policy.

Something does not work, or I have questions not covered here
-

Feel free to open an issue on the official issue tracker on GitHub or reach out to us at our official Mastodon account: @syng@floss.social account or join our official matrix room: #syng:matrix.org.

+

Feel free to open an issue on the official issue tracker on GitHub or reach out to us at our official Mastodon account: @syng@floss.social account or join our official matrix room: #syng:matrix.org.

diff --git a/dist/images/mastodon.svg b/dist/images/mastodon.svg new file mode 100644 index 0000000..cec2c8a --- /dev/null +++ b/dist/images/mastodon.svg @@ -0,0 +1,2 @@ + + diff --git a/dist/images/matrix.svg b/dist/images/matrix.svg new file mode 100644 index 0000000..5e0778d --- /dev/null +++ b/dist/images/matrix.svg @@ -0,0 +1,2 @@ + +Matrix icon diff --git a/dist/index.html b/dist/index.html index c3ee6e1..34c1390 100644 --- a/dist/index.html +++ b/dist/index.html @@ -27,12 +27,18 @@ +
+ +
-
+

Syng.Rocks! Overview

@@ -41,10 +47,10 @@

Syng.Rocks!

Easily host karaoke events

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.

-

Linux/Flatpak -Windows -Web Client -Source Code

+

Linux/Flatpak +Windows +Web Client +Source Code

@@ -52,8 +58,8 @@
-
-
+
+

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.

@@ -61,8 +67,8 @@

Syng.Rocks! Client

-
-
+
+

Syng.Rocks! Web Client

@@ -71,16 +77,16 @@ The web client also contains an admin mode, that allows for manual moderation of the song queue.

-
-
+
+

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, a set time the event ends and much more.

-
+

Syng.Rocks! Web Client

-
+

Syng.Rocks! Web Client

diff --git a/dist/install.html b/dist/install.html index c204dca..b50a9ab 100644 --- a/dist/install.html +++ b/dist/install.html @@ -27,6 +27,12 @@
+
+
    +
  • Matrix
    • +
  • Mastodon

    • +
+
@@ -39,13 +45,13 @@
Linux
-

Syng.Rocks! is available as a Flatpak on Flathub. You can install it using the command line with:

+

Syng.Rocks! is available as a Flatpak on Flathub. You can install it using the command line with:

flatpak install rocks.syng.Syng

-

There also exists an Arch Linux package in the AUR.

+

There also exists an Arch Linux package in the AUR.

Windows
-

Windows binaries are available on Github. This is a portable version and does not require installation.

+

Windows binaries are available on Github. This is a portable version and does not require installation.

Generic
@@ -55,11 +61,10 @@

Server

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:

-
pip install syng[server]
-
+

pip install syng[server]

+

Similar to the client, there also exists an Arch Linux package in the AUR

diff --git a/dist/privacy.html b/dist/privacy.html index cbcf5c8..0a43d3b 100644 --- a/dist/privacy.html +++ b/dist/privacy.html @@ -27,6 +27,12 @@
+
+
    +
  • Matrix
    • +
  • Mastodon

    • +
+
diff --git a/images/mastodon.svg b/images/mastodon.svg new file mode 100644 index 0000000..cec2c8a --- /dev/null +++ b/images/mastodon.svg @@ -0,0 +1,2 @@ + + diff --git a/images/matrix.svg b/images/matrix.svg new file mode 100644 index 0000000..5e0778d --- /dev/null +++ b/images/matrix.svg @@ -0,0 +1,2 @@ + +Matrix icon diff --git a/site.template.html b/site.template.html index c333f30..53f3380 100644 --- a/site.template.html +++ b/site.template.html @@ -26,6 +26,12 @@ {% endfor %}
+
+ +
diff --git a/sites/faq.md b/sites/faq.md index 1cd1a1d..9412891 100644 --- a/sites/faq.md +++ b/sites/faq.md @@ -23,7 +23,7 @@ What are sources? 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*? @@ -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. 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? @@ -40,7 +40,7 @@ Can I use Syng.Rocks! without internet? 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? @@ -55,12 +55,12 @@ Can I host my own server? What data do you store? : 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). 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? @@ -68,6 +68,6 @@ What is the restricted mode of the server? 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" }. /// /// diff --git a/sites/index.md b/sites/index.md index 1e560fb..6a2f4b3 100644 --- a/sites/index.md +++ b/sites/index.md @@ -1,7 +1,7 @@ !!section:header,markdown /// html | div.hero-full-screen /// 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 ![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. -Linux/Flatpak -Windows -Web Client -Source Code +[Linux/Flatpak](https://flathub.org/apps/rocks.syng.Syng){: .button target="_blank" } +[Windows](https://github.com/christofsteel/syng/releases){: .button target="_blank" } +[Web Client](https://syng.rocks){: .button .hollow target="_blank" } +[Source Code](https://github.com/christofsteel/syng){: .button .hollow target="_blank" } !!section:content,markdown /// html | div#main-content-section /// html | div.grid-container -/// html | div.grid-x.grid-padding.textleft.align-right -/// html | div.cell.medium-5.text-right +/// html | div.grid-x.grid-padding.align-center.grid-padding-x +/// html | div.cell.medium-4.text-right ## 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. @@ -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) /// /// -/// html | div.grid-x.grid-padding.textright -/// html | div.cell.medium-8.showcase-image +/// html | div.grid-x.grid-padding-x +/// html | div.cell.medium-7.showcase-image ![Syng.Rocks! Web Client](images/web-shadows.png) /// /// 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. /// /// -/// html | div.grid-x.grid-padding.textleft.align-right -/// html | div.cell.medium-4.text-right +/// html | div.grid-x.grid-padding-x.align-right +/// html | div.cell.medium-5.text-right ## 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. /// -/// html | div.cell.medium-8.showcase-image +/// html | div.cell.medium-6.showcase-image ![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 ![Syng.Rocks! Web Client](images/sources.svg) /// diff --git a/sites/install.md b/sites/install.md index b77e31d..76d9047 100644 --- a/sites/install.md +++ b/sites/install.md @@ -8,17 +8,17 @@ Depending on your platform, you can install Syng.Rocks! in different ways. 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 ``` - 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 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 @@ -32,10 +32,16 @@ Generic The server is available as a Docker image hosted on Github. You can run it with: +``` docker run ghcr.io/christofsteel/syng +``` Alternatively, you can run the server using the Python Package Index (PyPI) package `syng`: +``` 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" } /// ///