From 5185f9999d94fe620c1060a3051df825a59a2567 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 29 Feb 2024 16:31:46 +0100 Subject: [PATCH] start homepage design, add languages and themes --- public/translations/ar/default.json | 5 ++ public/translations/bn/default.json | 5 ++ public/translations/cs/default.json | 5 ++ public/translations/da/default.json | 5 ++ public/translations/de/default.json | 5 ++ public/translations/el/default.json | 5 ++ public/translations/en/default.json | 5 ++ public/translations/es/default.json | 5 ++ public/translations/fa/default.json | 5 ++ public/translations/fi/default.json | 5 ++ public/translations/fil/default.json | 5 ++ public/translations/fr/default.json | 5 ++ public/translations/he/default.json | 5 ++ public/translations/hi/default.json | 5 ++ public/translations/hu/default.json | 5 ++ public/translations/id/default.json | 5 ++ public/translations/it/default.json | 5 ++ public/translations/ja/default.json | 5 ++ public/translations/ko/default.json | 5 ++ public/translations/mr/default.json | 5 ++ public/translations/nl/default.json | 5 ++ public/translations/no/default.json | 5 ++ public/translations/pl/default.json | 5 ++ public/translations/pt/default.json | 5 ++ public/translations/ro/default.json | 5 ++ public/translations/ru/default.json | 5 ++ public/translations/sq/default.json | 5 ++ public/translations/sv/default.json | 5 ++ public/translations/te/default.json | 5 ++ public/translations/th/default.json | 5 ++ public/translations/tr/default.json | 5 ++ public/translations/uk/default.json | 5 ++ public/translations/ur/default.json | 5 ++ public/translations/vi/default.json | 5 ++ public/translations/zh/default.json | 5 ++ src/app.module.css | 2 +- src/themes.css | 14 ++++- src/views/home/home.module.css | 76 +++++++++++++++++++++++++++- src/views/home/home.tsx | 54 ++++++++++++++++++-- 39 files changed, 311 insertions(+), 10 deletions(-) diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index e69de29b..7ed56ab3 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "ما هو بليبتشان؟", + "go": "اذهب", + "or": "أو" +} \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index e69de29b..202d21c7 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "প্লেবচ্যান কি?", + "go": "যাও", + "or": "অথবা" +} \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index e69de29b..a9724145 100644 --- a/public/translations/cs/default.json +++ b/public/translations/cs/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Co je Plebchan?", + "go": "jít", + "or": "nebo" +} \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index e69de29b..05c1d6f6 100644 --- a/public/translations/da/default.json +++ b/public/translations/da/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Hvad er Plebchan?", + "go": "gå", + "or": "eller" +} \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index e69de29b..2690244a 100644 --- a/public/translations/de/default.json +++ b/public/translations/de/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Was ist Plebchan?", + "go": "gehen", + "or": "oder" +} \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index e69de29b..6683942b 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Τι είναι το plebchan;", + "go": "πήγαινε", + "or": "ή" +} \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index e69de29b..941bf163 100644 --- a/public/translations/en/default.json +++ b/public/translations/en/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "What is plebchan?", + "go": "go", + "or": "or" +} \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index e69de29b..b5d69893 100644 --- a/public/translations/es/default.json +++ b/public/translations/es/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "¿Qué es Plebchan?", + "go": "ir", + "or": "o" +} \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index e69de29b..cc23a8b6 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "پلبچن چیست؟", + "go": "برو", + "or": "یا" +} \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index e69de29b..47784a62 100644 --- a/public/translations/fi/default.json +++ b/public/translations/fi/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Mikä on Plebchan?", + "go": "mennä", + "or": "tai" +} \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index e69de29b..e676a2c4 100644 --- a/public/translations/fil/default.json +++ b/public/translations/fil/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Ano ang plebchan?", + "go": "pumunta", + "or": "o" +} \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index e69de29b..e675a1cb 100644 --- a/public/translations/fr/default.json +++ b/public/translations/fr/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Qu'est-ce que Plebchan?", + "go": "aller", + "or": "ou" +} \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index e69de29b..a05cbcbb 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "מה זה פלבצ׳ן?", + "go": "לך", + "or": "או" +} \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index e69de29b..6f6c728f 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "प्लेबचैन क्या है?", + "go": "जाओ", + "or": "या" +} \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index e69de29b..166a1b94 100644 --- a/public/translations/hu/default.json +++ b/public/translations/hu/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Mi az a Plebchan?", + "go": "menni", + "or": "vagy" +} \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index e69de29b..cc4cf21f 100644 --- a/public/translations/id/default.json +++ b/public/translations/id/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Apa itu plebchan?", + "go": "pergi", + "or": "atau" +} \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index e69de29b..2c0af930 100644 --- a/public/translations/it/default.json +++ b/public/translations/it/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Cos'è plebchan?", + "go": "vai", + "or": "oppure" +} \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index e69de29b..64a8fc06 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "プレブチャンとは何ですか？", + "go": "行く", + "or": "または" +} \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index e69de29b..38cbb8d8 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "플레브찬이란 무엇인가요?", + "go": "가기", + "or": "또는" +} \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index e69de29b..49065ab8 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "प्लेबचॅन काय आहे?", + "go": "जा", + "or": "किव्हा" +} \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index e69de29b..311990a0 100644 --- a/public/translations/nl/default.json +++ b/public/translations/nl/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Wat is plebchan?", + "go": "gaan", + "or": "of" +} \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index e69de29b..1993a88c 100644 --- a/public/translations/no/default.json +++ b/public/translations/no/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Hva er plebchan?", + "go": "gå", + "or": "eller" +} \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index e69de29b..191fcc46 100644 --- a/public/translations/pl/default.json +++ b/public/translations/pl/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Co to jest plebchan?", + "go": "iść", + "or": "lub" +} \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index e69de29b..2297fa5d 100644 --- a/public/translations/pt/default.json +++ b/public/translations/pt/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "O que é Plebchan?", + "go": "vai", + "or": "ou" +} \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index e69de29b..96624e0d 100644 --- a/public/translations/ro/default.json +++ b/public/translations/ro/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Ce este Plebchan?", + "go": "du-te", + "or": "sau" +} \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index e69de29b..1d3fd12d 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Что такое плебчан?", + "go": "идти", + "or": "или" +} \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index e69de29b..bf651927 100644 --- a/public/translations/sq/default.json +++ b/public/translations/sq/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Çfarë është Plebchan?", + "go": "shko", + "or": "ose" +} \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index e69de29b..288ee639 100644 --- a/public/translations/sv/default.json +++ b/public/translations/sv/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Vad är Plebchan?", + "go": "gå", + "or": "eller" +} \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index e69de29b..ed482594 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "ప్లెబ్‌చాన్ ఏమిటి?", + "go": "వెళ్లు", + "or": "లేదా" +} \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index e69de29b..ff2b1cf7 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "พล็อกไซต์คืออะไร?", + "go": "ไป", + "or": "หรือ" +} \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index e69de29b..c55b0f42 100644 --- a/public/translations/tr/default.json +++ b/public/translations/tr/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Plebchan nedir?", + "go": "git", + "or": "veya" +} \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index e69de29b..0a8df4e9 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Що таке Плебчан?", + "go": "йди", + "or": "або" +} \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index e69de29b..f826453d 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "پلیبچان کیا ہے؟", + "go": "جا", + "or": "یا" +} \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index e69de29b..a73722f6 100644 --- a/public/translations/vi/default.json +++ b/public/translations/vi/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Plebchan là gì?", + "go": "đi", + "or": "hoặc" +} \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index e69de29b..5c5bd22f 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -0,0 +1,5 @@ +{ + "what_is_plebchan": "Plebchan是什么？", + "go": "去", + "or": "或者" +} \ No newline at end of file diff --git a/src/app.module.css b/src/app.module.css index 5a2214df..0ffc0490 100644 --- a/src/app.module.css +++ b/src/app.module.css @@ -1,6 +1,6 @@ .app { background: var(--background-color) var(--background-fade) top center repeat-x; - font: 13px arial, helvetica, sans-serif; + font: 13px/1.231 arial, helvetica, sans-serif; z-index: 1; min-height: 100%; overflow-y: hidden; diff --git a/src/themes.css b/src/themes.css index ee1cbc2e..c5e9b0d9 100644 --- a/src/themes.css +++ b/src/themes.css @@ -1,11 +1,21 @@ :root .yotsuba { --background-color: #ffe; --background-fade: url("/public/assets/background-fade.png"); - --color: #800; + --color-primary: #800; + --text-primary: #fff; + --text-black: #000; + --text-white: #fff; + --text-background: #fff; + --text-link: #00f; } :root .yotsuba-b { --background-color: #eef2ff; --background-fade: url("/public/assets/background-fade-blue.png"); - --color: #000; + --color-primary: #98e; + --text-primary: #000; + --text-black: #000; + --text-white: #fff; + --text-background: #fff; + --text-link: #00f; } \ No newline at end of file diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index a6d9143b..be417f3a 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -1,13 +1,24 @@ .content { - color: var(--color); - font-size: 20px; + color: var(--color-primary); width: 100%; height: 100%; + margin: auto; text-align: left; width: 57.69em; min-width: 750px; } +.debug { + position: fixed; + top: 0; + right: 0; + padding: 0.5em; +} + +.debug select { + margin: 2px; +} + .logo img { width: 300px; height: 120px; @@ -15,6 +26,67 @@ .logo { margin: 0px auto; + text-align: center; +} + +.box { + background: var(--text-background); + color: var(--text-black); + border: 1px solid; + margin-bottom: 0.5em; + padding-bottom: 0.5em; +} + +.boxBar { + background: var(--color-primary); + color: var(--text-primary); + padding-left: 0.5em; + line-height: 2em; +} + +.boxBar h2 { + font-size: 131%; + font-weight: 700; +} + +.boxContent { + line-height: 1.5em; + font-size: 93%; + padding: 0.5em; + padding-top: 0.25em; + padding-bottom: 0; +} + +.boxContent a, .boxContent a:visited{ + color: var(--text-link); +} + +.searchBar { + text-align: center; + margin-bottom: 20px; +} + +.searchBar input, .searchBar button { + font-size: 18px; + height: 30px; + box-sizing: border-box; + appearance: none; + border-radius: 0px; + border: 1px solid rgb(170, 170, 170); + outline: none; +} + +.searchBar input { + width: 400px; + padding: 3px 10px; +} + +.searchBar button { + font-size: 15px; + margin-left: 4px; + padding: 3px 10px; + background-color: rgb(239, 239, 239); + position: absolute; } @media (max-width: 768px) { diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index 3c429cd3..8292af6f 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -1,8 +1,9 @@ import styles from './home.module.css'; import useTheme from '../../hooks/use-theme'; import { Link } from 'react-router-dom'; +import { Trans, useTranslation } from 'react-i18next'; -// TODO: remove theme selector for debugging +// TODO: remove theme and languages selectors for debugging const ThemeSettings = () => { const [theme, setTheme] = useTheme(); @@ -14,21 +15,64 @@ const ThemeSettings = () => { ); }; +// prettier-ignore +const availableLanguages = ['ar', 'bn', 'cs', 'da', 'de', 'el', 'en', 'es', 'fa', 'fi', 'fil', 'fr', 'he', 'hi', 'hu', 'id', 'it', 'ja', 'ko', 'mr', 'nl', 'no', 'pl', 'pt', 'ro', 'ru', 'sq', 'sv', 'te', 'th', 'tr', 'uk', 'ur', 'vi', 'zh']; + +const LanguageSettings = () => { + const { t, i18n } = useTranslation(); + const { changeLanguage, language } = i18n; + + const onSelectLanguage = (e: React.ChangeEvent) => { + changeLanguage(e.target.value); + window.location.reload(); + }; + + return ( +
+ +
+ ); +}; + const Home = () => { + const { t } = useTranslation(); + return (
+
+ + +
plebchan
- - + +
-
-
What is plebchan?
+
+

{t('what_is_plebchan')}

+
+
+ Plebchan is a serverless, adminless, decentralized 4chan alternative where any pleb can create and own unlimited boards. All data comes from the{' '} + + plebbit + {' '} + protocol, it's all text including links from which media is embedded, shared peer-to-peer. Users do not need to register an account before participating in the + community. Feel free to click on a board below that interests you and jump right in! +
+
+ There are no global rules, each board is completely independent and its owner decides how/if to moderate it. +
);