general cleanup
Some checks failed
Build and publish the docker image / build (push) Failing after 1m16s
Some checks failed
Build and publish the docker image / build (push) Failing after 1m16s
Signed-off-by: ngn <ngn@ngn.tf>
This commit is contained in:
parent
f274ba527d
commit
58e9b94868
28
.gitea/workflows/build.yml
Normal file
28
.gitea/workflows/build.yml
Normal file
@ -0,0 +1,28 @@
|
||||
name: Build and publish the docker image
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: ["custom"]
|
||||
|
||||
env:
|
||||
REGISTRY: git.ngn.tf
|
||||
IMAGE: ${{gitea.repository}}
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: "https://github.com/actions/checkout@v4"
|
||||
|
||||
- name: Login to container repo
|
||||
uses: "https://github.com/docker/login-action@v1"
|
||||
with:
|
||||
registry: ${{env.REGISTRY}}
|
||||
username: ${{gitea.actor}}
|
||||
password: ${{secrets.PACKAGES_TOKEN}}
|
||||
|
||||
- name: Build image
|
||||
run: |
|
||||
docker build . --tag ${{env.REGISTRY}}/${{env.IMAGE}}:latest
|
||||
docker push ${{env.REGISTRY}}/${{env.IMAGE}}:latest
|
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
@ -1,3 +0,0 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
@ -1,32 +0,0 @@
|
||||
steps:
|
||||
lint:
|
||||
image: docker.io/node:16
|
||||
commands:
|
||||
- git clone --recurse-submodules -j8 https://codeberg.org/${CI_REPO_OWNER}/safetwitch
|
||||
- npm i
|
||||
- npm run lint
|
||||
when:
|
||||
event: push
|
||||
branch: master
|
||||
|
||||
build:
|
||||
image: docker.io/node:16
|
||||
commands:
|
||||
- npm run build
|
||||
when:
|
||||
event: push
|
||||
branch: master
|
||||
|
||||
publish:
|
||||
image: woodpeckerci/plugin-docker-buildx
|
||||
settings:
|
||||
dockerfile: ./docker/Dockerfile
|
||||
platforms: linux/amd64,linux/arm/v7,linux/arm64/v8
|
||||
registry: codeberg.org
|
||||
auto_tag: true
|
||||
repo: codeberg.org/safetwitch/safetwitch
|
||||
username: safetwitch
|
||||
password:
|
||||
from_secret: cb_token
|
||||
when:
|
||||
event: tag
|
26
Dockerfile
Normal file
26
Dockerfile
Normal file
@ -0,0 +1,26 @@
|
||||
FROM docker.io/node:16 AS builder
|
||||
|
||||
ENV SAFETWITCH_BACKEND_DOMAIN SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER
|
||||
ENV SAFETWITCH_INSTANCE_DOMAIN SAFETWITCH_INSTANCE_DOMAIN_PLACEHOLDER
|
||||
ENV SAFETWITCH_HTTPS SAFETWITCH_HTTPS_PLACEHOLDER
|
||||
ENV SAFETWITCH_DEFAULT_LOCALE SAFETWITCH_DEFAULT_LOCALE_PLACEHOLDER
|
||||
ENV SAFETWITCH_FALLBACK_LOCALE SAFETWITCH_FALLBACK_LOCALE_PLACEHOLDER
|
||||
ENV SAFETWITCH_DEFAULT_THEME SAFETWITCH_DEFAULT_THEME_PLACEHOLDER
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY ./ .
|
||||
RUN npm i
|
||||
RUN npm run build
|
||||
|
||||
FROM docker.io/nginx:alpine
|
||||
|
||||
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
|
||||
|
||||
WORKDIR /app
|
||||
COPY --from=builder /app/dist ./
|
||||
|
||||
COPY ./docker/init.sh /init.sh
|
||||
RUN chmod +x /init.sh
|
||||
|
||||
ENTRYPOINT ["/init.sh"]
|
127
README.md
127
README.md
@ -1,126 +1,5 @@
|
||||
# SafeTwitch
|
||||
# [ngn.tf] | safetwitch
|
||||
|
||||
<a href="https://translate.codeberg.org/engage/safetwitch/">
|
||||
<img src="https://translate.codeberg.org/widget/safetwitch/frontend/svg-badge.svg" alt="Translation status" />
|
||||
</a>
|
||||
![](https://git.ngn.tf/ngn/safetwitch/actions/workflows/build.yml/badge.svg)
|
||||
|
||||
SafeTwitch is a privacy respecting frontend for [twitch.tv](https://twitch.tv/)
|
||||
|
||||
The main advantages of SafeTwitch are:
|
||||
|
||||
- Private: Every request is proxied through the server, and no logs are kept.
|
||||
- Lightweight: Compared to twitch, SafeTwitch is optimized for speed and usability.
|
||||
|
||||
</br>
|
||||
|
||||
You can find an instance to use [here](#instances)!
|
||||
|
||||
Do you want to help translate? You can do it over here on weblate! [Translate](#translate)
|
||||
|
||||
# Okay, but why?
|
||||
|
||||
It is impossible to use Twitch without being bombarded with tons of ads, multiple trackers, and enourmous page sizes and loading times. This project aims to fix these issues, by removing all trackers, have much smaller page sizes, and very fast loading times.
|
||||
|
||||
# Features
|
||||
|
||||
### User features
|
||||
|
||||
- [x] No connection to twitch/amazon
|
||||
- [x] Lightweight on server and client
|
||||
- [x] No Ads or tracking
|
||||
- [x] No outside connections, only connection is the instance
|
||||
- [x] Uses [Vue](https://vuejs.org/) for a speedy experience
|
||||
- [x] No logs
|
||||
- [x] Much smaller pages compared to Twitch (<1.6mb with images compared to >8.2mb)
|
||||
- [x] Follow streamers locally to have a more personalized feel
|
||||
- [x] Infinite scrolling
|
||||
- [x] Proxied WebSocket IRC
|
||||
|
||||
### Technical features
|
||||
|
||||
- [x] Public API
|
||||
- [x] No official APIs are used
|
||||
- [x] No rate limiting
|
||||
- [x] Uses a custom Twitch webscraper
|
||||
|
||||
It's not all sunshine and rainbows though, and still has various cons, including
|
||||
|
||||
- SafeTwitch was a learning project
|
||||
- Uses Vue, which relies on Javascript
|
||||
|
||||
You aren't forced to use SafeTwitch, so use whatever suits you the most!
|
||||
Heres some other notable twitch projects
|
||||
|
||||
- [Xtra](https://f-droid.org/packages/com.github.andreyasadchy.xtra/), a Twitch client focused on providing the best viewing and chatting experience on mobile devices
|
||||
- [Twire](https://f-droid.org/packages/com.perflyst.twire/), an ad free Twitch browser and stream player for Android.
|
||||
- [Streamlink Twitch Gui](https://streamlink.github.io/streamlink-twitch-gui/), A multi platform Twitch.tv browser for Streamlink
|
||||
- [Twineo](https://codeberg.org/CloudyyUw/twineo), A alternative twitch frontend
|
||||
|
||||
# Screenshots
|
||||
|
||||
| Images | More Images |
|
||||
| --------------------------------------------------- | --------------------------------------------------- |
|
||||
| ![ Photo of stream ](images/home.png "title") | ![ Photo of stream ](images/stream.png "title") |
|
||||
| ![ Photo of category ](images/category.png "title") | ![ Photo of streamer ](images/streamer.png "title") |
|
||||
# Donations
|
||||
|
||||
Donations towards development are not accepted. I really thank you for feeling the need to donate, it does mean a lot to me!
|
||||
|
||||
Instead, please donate your money to one of these charities which mean a lot to me.
|
||||
|
||||
- [American Foundation for Suicide Prevention](https://afsp.org/)
|
||||
- [Boys and Girls Club of America](https://www.bgca.org/ways-to-give)
|
||||
|
||||
# Getting Started
|
||||
|
||||
All documentation can be found on the [wiki](https://codeberg.org/SafeTwitch/safetwitch/wiki)
|
||||
|
||||
## Translate
|
||||
|
||||
<a href="https://translate.codeberg.org/engage/safetwitch/">
|
||||
<img src="https://translate.codeberg.org/widgets/safetwitch/-/frontend/multi-auto.svg" alt="Translation status" />
|
||||
</a>
|
||||
|
||||
Translating is a great way to help contribute! Even if it's only one word, anything helps!
|
||||
|
||||
You can translate here: https://translate.codeberg.org/projects/safetwitch/frontend/
|
||||
|
||||
## Instances
|
||||
|
||||
If you host a SafeTwitch instance and would like it to be listed in the readme, please make an issue or a pull request to add it in.
|
||||
|
||||
### Clearnet
|
||||
|
||||
| URL | Country | Info | Cloudflare |
|
||||
|-----------------------------------------------------------------------------|----------------|----------------------------------------------------------------------------------------------------| ---------- |
|
||||
| [safetwitch.drgns.space \(Official\)](https://safetwitch.drgns.space/) | 🇺🇸 | Homelab | ❌ |
|
||||
| [safetwitch.projectsegfau.lt](https://safetwitch.projectsegfau.lt/) | 🇺🇸 🇮🇳 🇩🇪 | #2 | ❌ |
|
||||
| [stream.whateveritworks.org](https://stream.whateveritworks.org) | 🇩🇪 | Hosted on Hetzner/Dedicated Server with Encryption at rest | ✅ |
|
||||
| [safetwitch.datura.network](https://safetwitch.datura.network) | 🇩🇪 | #9 | ❌ |
|
||||
| [ttv.vern.cc](https://ttv.vern.cc) | 🇺🇸 | #12 | ❌ |
|
||||
| [safetwitch.frontendfriendly.xyz](https://safetwitch.frontendfriendly.xyz/) | 🇺🇸 | #16 | ❌ |
|
||||
| [ttv.femboy.band](https://ttv.femboy.band) | 🇩🇪 | #29 | ❌ |
|
||||
| [twitch.seitan-ayoub.lol](https://twitch.seitan-ayoub.lol) | 🇩🇪 | Hetnzer VPS | ❌ |
|
||||
| [st.ggtyler.dev](https://st.ggtyler.dev) | 🇺🇸 | [See ggtyler's frontend list for more info and locations](https://www.ggtyler.dev/other/frontends) | ❌ |
|
||||
| [safetwitch.lunar.icu](https://safetwitch.lunar.icu) | 🇩🇪 | [See lunar.icu's site for more info](https://lunar.icu) | ❌ |
|
||||
| [twitch.sudovanilla.org](https://twitch.sudovanilla.org) | 🇺🇸 | Selfhosted | ❌ |
|
||||
| [safetwitch.r4fo.com](https://safetwitch.r4fo.com) | 🇩🇪 | #80 | ✅ |
|
||||
| [safetwitch.ducks.party](https://safetwitch.ducks.party) | 🇳🇱 | Timeweb VPS | ❌ |
|
||||
| [safetwitch.nogafam.fr](https://safetwitch.nogafam.fr) | 🇫🇷 | [See NoGafam services](https://nogafam.fr) | ❌ |
|
||||
| [safetwitch.privacyredirect.com](https://safetwitch.privacyredirect.com/) | 🇫🇮 | #98 | ❌ |
|
||||
| [st.ngn.tf](https://st.ngn.tf/) | 🇹🇷 | Selfhosted | ❌ |
|
||||
| [safetwitch.darkness.services](https://safetwitch.darkness.services) | 🇺🇸 | #119 | ✅ |
|
||||
| [safetwitch.4o1x5.dev/](https://safetwitch.4o1x5.dev/) | 🇭🇺 | [See 4o1x5's site for more info](https://4o1x5.dev/privacy-policy/) | ❌ |
|
||||
| [safetwitch.adminforge.de](https://safetwitch.adminforge.de) | 🇩🇪 | Hosted on Hetzner by adminForge.de | ❌ |
|
||||
|
||||
### Onion
|
||||
|
||||
| URL | Country | Info |
|
||||
| ------------------------------------------------------------------------------------------ | ------- | ---- |
|
||||
| [Onion vern.cc](http://ttv.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion) | 🇺🇸 | #12 |
|
||||
|
||||
### I2P
|
||||
|
||||
| URL | Country | Info |
|
||||
| ---------------------------------------------------------------------------------- | ------- | ---- |
|
||||
| [i2p vern.cc](http://vernz43kgqiy3nzzof3nejeo4hh3bjgyqi3b3hijchilv7noqtrq.b32.i2p) | 🇺🇸 | #12 |
|
||||
A fork of the [safetwitch](https://codeberg.org/safetwitch/safetwitch) project, with my personal changes.
|
||||
|
@ -1,24 +0,0 @@
|
||||
server {
|
||||
server_name changethis;
|
||||
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/changethis/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/changethis/privkey.pem;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:7100;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "Upgrade";
|
||||
proxy_set_header Host $host;
|
||||
}
|
||||
}
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name changethis;
|
||||
return 301 https://changethis$request_uri;
|
||||
}
|
@ -1,21 +0,0 @@
|
||||
server {
|
||||
server_name changethis;
|
||||
|
||||
listen 443 ssl;
|
||||
listen [::]:443 ssl;
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/changethis/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/changethis/privkey.pem;
|
||||
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:8280;
|
||||
}
|
||||
}
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name changethis;
|
||||
return 301 https://changethis$request_uri;
|
||||
}
|
@ -1,41 +0,0 @@
|
||||
# Multi-stage
|
||||
# 1) Node image for building frontend assets
|
||||
# 2) nginx stage to serve frontend assets
|
||||
|
||||
# Name the node stage "builder"
|
||||
FROM docker.io/node:16 AS builder
|
||||
# Set working directory
|
||||
WORKDIR /app
|
||||
|
||||
|
||||
# Filled with placeholders, later changed and managed
|
||||
# by the substitute_environment_variables.sh file
|
||||
ENV SAFETWITCH_BACKEND_DOMAIN SAFETWITCH_BACKEND_DOMAIN_PLACEHOLDER
|
||||
ENV SAFETWITCH_INSTANCE_DOMAIN SAFETWITCH_INSTANCE_DOMAIN_PLACEHOLDER
|
||||
ENV SAFETWITCH_HTTPS SAFETWITCH_HTTPS_PLACEHOLDER
|
||||
ENV SAFETWITCH_DEFAULT_LOCALE SAFETWITCH_DEFAULT_LOCALE_PLACEHOLDER
|
||||
ENV SAFETWITCH_FALLBACK_LOCALE SAFETWITCH_FALLBACK_LOCALE_PLACEHOLDER
|
||||
ENV SAFETWITCH_DEFAULT_THEME SAFETWITCH_DEFAULT_THEME_PLACEHOLDER
|
||||
|
||||
|
||||
# Copy all files from current directory to working dir in image
|
||||
COPY ./ .
|
||||
|
||||
RUN ls
|
||||
# install node modules and build assets
|
||||
RUN npm i && npm run build
|
||||
|
||||
# nginx state for serving content
|
||||
FROM docker.io/nginx:alpine
|
||||
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
|
||||
# Set working directory to nginx asset directory
|
||||
RUN mkdir /app
|
||||
# Copy static assets from builder stage
|
||||
COPY --from=builder /app/dist /app
|
||||
# Containers run nginx with global directives and daemon off
|
||||
EXPOSE 8280
|
||||
|
||||
# Overriding the default NGINX container behavior
|
||||
COPY ./docker/substitute_environment_variables.sh ./substitute_environment_variables.sh
|
||||
RUN chmod +x /substitute_environment_variables.sh
|
||||
ENTRYPOINT ["/substitute_environment_variables.sh"]
|
@ -1,35 +0,0 @@
|
||||
version: "3.7"
|
||||
|
||||
services:
|
||||
safetwitch-frontend:
|
||||
container_name: safetwitch-frontend
|
||||
hostname: safetwitch-frontend
|
||||
restart: always
|
||||
build:
|
||||
context: "../"
|
||||
dockerfile: "./docker/Dockerfile"
|
||||
ports:
|
||||
- "127.0.0.1:8280:8280"
|
||||
environment:
|
||||
- SAFETWITCH_BACKEND_DOMAIN=localhost:7100
|
||||
- SAFETWITCH_INSTANCE_DOMAIN=localhost:8280
|
||||
- SAFETWITCH_HTTPS=true
|
||||
- SAFETWITCH_DEFAULT_THEME=dark
|
||||
- SAFETWITCH_DEFAULT_LOCALE=en-US
|
||||
- SAFETWITCH_FALLBACK_LOCALE=en-US
|
||||
|
||||
safetwitch-backend:
|
||||
container_name: safetwitch-backend
|
||||
hostname: safetwitch-backend
|
||||
read_only: true
|
||||
security_opt:
|
||||
- no-new-privileges:true
|
||||
cap_drop:
|
||||
- ALL
|
||||
restart: always
|
||||
image: codeberg.org/safetwitch/safetwitch-backend:latest
|
||||
ports:
|
||||
- "127.0.0.1:7100:7000"
|
||||
environment:
|
||||
- PORT=7000
|
||||
- URL=changeme
|
@ -1,32 +1,32 @@
|
||||
version: "3.7"
|
||||
|
||||
services:
|
||||
safetwitch-frontend:
|
||||
container_name: safetwitch-frontend
|
||||
hostname: safetwitch-frontend
|
||||
restart: always
|
||||
image: codeberg.org/safetwitch/safetwitch:latest
|
||||
st_frontend:
|
||||
container_name: safetwitch_frontend
|
||||
image: git.ngn.tf/ngn/safetwitch
|
||||
security_opt:
|
||||
- no-new-privileges:true
|
||||
cap_drop:
|
||||
- ALL
|
||||
ports:
|
||||
- "127.0.0.1:8280:8280"
|
||||
- 8080:8280
|
||||
environment:
|
||||
- SAFETWITCH_BACKEND_DOMAIN=changeme
|
||||
- SAFETWITCH_INSTANCE_DOMAIN=changeme
|
||||
- SAFETWITCH_HTTPS=true
|
||||
- SAFETWITCH_DEFAULT_LOCALE=en
|
||||
- SAFETWITCH_FALLBACK_LOCALE=en
|
||||
- SAFETWITCH_BACKEND_DOMAIN=localhost:8081
|
||||
- SAFETWITCH_INSTANCE_DOMAIN=localhost:8080
|
||||
- SAFETWITCH_HTTPS=false
|
||||
- SAFETWITCH_DEFAULT_LOCALE=en
|
||||
- SAFETWITCH_FALLBACK_LOCALE=en
|
||||
restart: unless-stopped
|
||||
|
||||
safetwitch-backend:
|
||||
container_name: safetwitch-backend
|
||||
hostname: safetwitch-backend
|
||||
st_backend:
|
||||
container_name: safetwitch_backend
|
||||
image: codeberg.org/safetwitch/safetwitch-backend:latest
|
||||
read_only: true
|
||||
security_opt:
|
||||
- no-new-privileges:true
|
||||
- no-new-privileges:true
|
||||
cap_drop:
|
||||
- ALL
|
||||
restart: always
|
||||
image: codeberg.org/safetwitch/safetwitch-backend:latest
|
||||
- ALL
|
||||
ports:
|
||||
- "127.0.0.1:7100:7000"
|
||||
- 8081:7000
|
||||
environment:
|
||||
- PORT=7000
|
||||
- URL=changeme
|
||||
- PORT=7000
|
||||
- URL=http://localhost:8081
|
||||
restart: unless-stopped
|
||||
|
0
docker/substitute_environment_variables.sh → docker/init.sh
Executable file → Normal file
0
docker/substitute_environment_variables.sh → docker/init.sh
Executable file → Normal file
@ -1,2 +0,0 @@
|
||||
User-agent: *
|
||||
Disallow: /
|
@ -24,7 +24,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
|
||||
<div class="bg-crust w-40 h-full lg:w-[11rem] md:w-[13.5rem] rounded-lg flex flex-col justify-between">
|
||||
<router-link :to="`/directory/game/${encodeURIComponent(category.name)}`">
|
||||
<img :src="category.image" class="rounded-lg rounded-b-none w-full" />
|
||||
</router-link>
|
||||
|
@ -32,12 +32,11 @@ export default {
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<search-bar class="mt-4 mr-4 hidden md:inline-block sm:mt-0"></search-bar>
|
||||
<search-bar class="mt-4 mr-4 hidden md:inline-block sm:mt-0 grow"></search-bar>
|
||||
|
||||
<div class="text-contrast hidden space-x-4 md:block">
|
||||
<div class="text-contrast hidden md:block">
|
||||
<a href="https://codeberg.org/safetwitch/safetwitch" target="_blank">{{ $t('nav.code') }}</a>
|
||||
<a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
|
||||
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
|
||||
<a href="https://git.ngn.tf/ngn/safetwitch">Modified Code</a>
|
||||
<router-link to="/following">{{ $t('home.following') }}</router-link>
|
||||
<router-link to="/settings">{{ $t('nav.settings') }}</router-link>
|
||||
</div>
|
||||
@ -60,8 +59,8 @@ export default {
|
||||
<search-bar></search-bar>
|
||||
<ul class="inline-flex space-x-3 md:space-x-6 font-medium">
|
||||
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
|
||||
<a href="https://git.ngn.tf/ngn/safetwitch">Modified Code</a>
|
||||
<a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
|
||||
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
|
||||
<router-link to="/following">{{ $t('home.following') }}</router-link>
|
||||
<router-link to="/settings">{{ $t('nav.settings') }}</router-link>
|
||||
</ul>
|
||||
@ -69,3 +68,15 @@ export default {
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
a:hover, router-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a + a::before {
|
||||
content: "|";
|
||||
margin: 0 8px;
|
||||
font-weight: 100;
|
||||
}
|
||||
</style>
|
||||
|
@ -25,7 +25,7 @@ export default {
|
||||
:placeholder="$t('main.search')"
|
||||
v-model="searchInput"
|
||||
@keyup.enter="redirectToSearch"
|
||||
class="rounded-md p-1 pl-8 w-56 text-black bg-white placeholder:text-black"
|
||||
class="rounded-md p-1 pl-8 w-56 text-white bg-black border-white outline-none placeholder:text-white w-full"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -244,7 +244,7 @@ export const themeList = [
|
||||
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#141515',
|
||||
primary: '#000',
|
||||
secondary: '#1e1f1f',
|
||||
overlay0: '#282a2a',
|
||||
overlay1: '#323434',
|
||||
|
@ -21,40 +21,11 @@ export default {
|
||||
return {
|
||||
data,
|
||||
status,
|
||||
filterTags: '',
|
||||
following,
|
||||
followingStreaming
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterSearches(toFilter: string) {
|
||||
const categories = this.$refs.categoryItem
|
||||
const wantedTags: string[] = toFilter
|
||||
.toLowerCase()
|
||||
.split(',')
|
||||
.filter((v) => v.toLowerCase())
|
||||
|
||||
for (let category of categories as any) {
|
||||
let tagElements = category.getElementsByTagName('span')
|
||||
let tags = []
|
||||
|
||||
for (let tag of tagElements) {
|
||||
tags.push(tag.innerText.toLowerCase())
|
||||
}
|
||||
|
||||
// Create sets from the arrays
|
||||
const [set1, set2] = [new Set(wantedTags), new Set(tags)]
|
||||
const common = [...set1].filter((x) => set2.has(x))
|
||||
|
||||
if (common.length === wantedTags.length) {
|
||||
category.style.display = ''
|
||||
} else if (wantedTags[0] === '') {
|
||||
category.style.display = ''
|
||||
} else {
|
||||
category.style.display = 'none'
|
||||
}
|
||||
}
|
||||
},
|
||||
async getNextCategory() {
|
||||
let bottomOfWindow =
|
||||
document.documentElement.scrollTop + window.innerHeight ===
|
||||
@ -130,27 +101,9 @@ export default {
|
||||
<div class="p-2 text-contrast">
|
||||
<h1 class="font-bold text-5xl">{{ $t('home.discover') }}</h1>
|
||||
<p class="text-xl">{{ $t('home.discoverDescription') }}</p>
|
||||
|
||||
<div class="pt-5 inline-flex">
|
||||
<p class="mr-2 font-bold">{{ $t('home.tagDescription') }}</p>
|
||||
<div class="relative">
|
||||
<label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
|
||||
<v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
|
||||
<input
|
||||
type="text"
|
||||
id="searchBar"
|
||||
name="searchBar"
|
||||
:placeholder="$t('main.search')"
|
||||
v-model="filterTags"
|
||||
@keypress="filterSearches(filterTags)"
|
||||
@keyup="filterSearches(filterTags)"
|
||||
class="rounded-md p-1 pl-8 placeholder:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul ref="categoryList" class="flex flex-wrap justify-center">
|
||||
<ul ref="categoryList" class="flex flex-wrap">
|
||||
<li
|
||||
v-for="category in data"
|
||||
:key="category.name"
|
||||
|
Loading…
x
Reference in New Issue
Block a user