From 94b720e9c5712d26d526ba0c601c5820be5b77d8 Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Wed, 21 Dec 2022 18:13:32 +0100 Subject: [PATCH 1/9] start /o-gractwie content fill + icons --- components/Icon.tsx | 63 ++++++++++++++++++++++++++ data/administracja.json | 32 +++++++++++++ pages/index.tsx | 13 +++--- pages/o-gractwie.tsx | 68 +++++++++++++++++++++++++++- styles/Index.module.scss | 35 --------------- styles/globals.scss | 36 +++++++++++++++ styles/oGractwie.module.scss | 87 ++++++++++++++++++++++++++++++++++++ 7 files changed, 290 insertions(+), 44 deletions(-) create mode 100644 data/administracja.json create mode 100644 styles/oGractwie.module.scss diff --git a/components/Icon.tsx b/components/Icon.tsx index 367d00c..6912cc8 100644 --- a/components/Icon.tsx +++ b/components/Icon.tsx @@ -1,5 +1,8 @@ enum IconSet { Menu, + Users, + Link2, + ExternalLink, Twitter, GitHub, YouTube, @@ -38,6 +41,66 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => { ); + case IconSet.Users: + return ( + + + + + + + ); + case IconSet.Link2: + return ( + + + + + ); + case IconSet.ExternalLink: + return ( + + + + + + ); case IconSet.Twitter: // twitter icon courtesy of simpleicons.org return ( diff --git a/data/administracja.json b/data/administracja.json new file mode 100644 index 0000000..50ccfcb --- /dev/null +++ b/data/administracja.json @@ -0,0 +1,32 @@ +[ + { + "name": "jamesen", + "desc": "Frontendowiec nie jebany.", + "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg" + }, + { + "name": "Mollin", + "desc": "Porucznik Essy.", + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3" + }, + { + "name": "Elephant", + "desc": "Osobnik demencyjny.", + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A" + }, + { + "name": "Dzioba", + "desc": "Backendowiec jebany.", + "img": "https://avatars.githubusercontent.com/u/62724833?v=4" + }, + { + "name": "KuOlek", + "desc": "Duch. (bo go nie ma)", + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121" + }, + { + "name": "Bavil Gravlax", + "desc": "Śpiący rękawek.", + "img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657" + } +] diff --git a/pages/index.tsx b/pages/index.tsx index 2fd724e..58bb1e4 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -21,7 +21,6 @@ const PageIndex = () => { return res.text(); }) .then((data) => { - console.log(data); setMemberCount(data); }) .catch((err) => { @@ -41,8 +40,6 @@ const PageIndex = () => { „{splash || "..."}”

{welcometext}

-
-

Warto naznaczyć, że strona jest w trakcie remontu.

@@ -65,17 +62,17 @@ const PageIndex = () => {
-
- +
+ discord - + youtube - + twitter - + github
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index 0246e15..e485db5 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -1,10 +1,76 @@ +import { GractwoLogo } from "../components/Logo"; import { SEO } from "../components/SEO"; +import styles from "../styles/oGractwie.module.scss"; +import Link from "next/link"; +import { Icon, IconSet } from "../components/Icon"; +import administracja from "../data/administracja.json"; +import links from "../data/links.json"; const PageInfo = () => { return ( <> -
Miejsce na stronkę od informacji nt. Gractwa.
+
+
+ +
+

+ + Gractwo +

+

+ Gractwo jest nieformalną organizacją i społecznością osób + zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku + jest zreszeniem ludzi w dużej mierze znających się nawzajem i + spędzających razem „na Gractwie” czas. Genezą nazwy jest złączenie + słów „Gracz” i „Bractwo”. + {/* discordowa społeczność kryptogenshinowa która jest yyy często + charakteryzuje się łączeniem przez relacje interpersonalne + kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać + naszą kryptogenshinowość */} + {/* THANKS, MOLLIN */} +

+
+
+ {/*
+ + skład administracji + + + + linki i przekierowania + + +
*/} +
+
+

skład administracji

+
+ {administracja.map((el) => { + return ( +
+ {`zdjęcie +
+

{el.name}

+

{el.desc || "brak opisu."}

+
+
+ ); + })} +
+
+ {/*
+

linki i przekierowania

+
+ {links.map((el) => { + return ( + + {el.name} + + ); + })} +
+
*/} ); }; diff --git a/styles/Index.module.scss b/styles/Index.module.scss index f856226..c76545b 100644 --- a/styles/Index.module.scss +++ b/styles/Index.module.scss @@ -92,38 +92,3 @@ } } } -.chips { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - gap: 1rem; -} -.chip { - display: inline-flex; - text-decoration: none; - gap: 0.5rem; - align-items: center; - color: inherit; - padding: 6px 8px; - border: 1px solid var(--grey); - border-radius: 8px; - transition-duration: 100ms; - text-rendering: geometricPrecision; - // font-family: var(--fonts-bold); - // color: var(--grey); - svg { - color: var(--grey); - } - &:hover, - &:focus { - outline: none; - background: var(--black1); - border: 1px solid var(--black1); - box-shadow: var(--shadow0); - transform: scale(1.1); - svg { - color: var(--color); - } - } -} diff --git a/styles/globals.scss b/styles/globals.scss index e4048d5..bfaa49b 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -39,3 +39,39 @@ main { margin: 0 auto; padding: 1rem; } + +.chips { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 1rem; +} +.chip { + display: inline-flex; + text-decoration: none; + gap: 0.5rem; + align-items: center; + color: inherit; + padding: 6px 8px; + border: 1px solid var(--grey); + border-radius: 8px; + transition-duration: 100ms; + text-rendering: geometricPrecision; + // font-family: var(--fonts-bold); + // color: var(--grey); + svg { + color: var(--grey); + } + &:hover, + &:focus { + outline: none; + background: var(--black1); + border: 1px solid var(--black1); + box-shadow: var(--shadow0); + transform: scale(1.1); + svg { + color: var(--color); + } + } +} diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss new file mode 100644 index 0000000..101b0cc --- /dev/null +++ b/styles/oGractwie.module.scss @@ -0,0 +1,87 @@ +.biglogocontainer { + display: flex; + flex-direction: row; + background: var(--black1); + margin: 1rem 0; + border-radius: 8px; + box-shadow: var(--shadow0); + svg { + min-width: 192px; + min-height: 192px; + @media screen and (max-width: 800px) { + display: none; + } + } + article { + background: rgba(white, 5%); + border-radius: 8px; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + @media screen and (max-width: 800px) { + border-radius: 8px; + } + padding: 0.5rem 1rem; + h1 { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + svg { + display: inline; + min-width: initial; + min-height: initial; + @media screen and (min-width: 801px) { + display: none; + } + } + } + p { + margin: 6px 0; + } + } +} +.persons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 1rem; + gap: 1rem; + article { + --radius: 6px; + flex: 1; + display: flex; + flex-direction: row; + background: var(--black1); + border-radius: var(--radius); + img { + width: 128px; + max-width: 156px; + flex: 1; + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); + // for alt text + color: var(--grey); + // for mollin's vertical picture to display well + aspect-ratio: 1 / 1; + object-fit: cover; + object-position: 50% 35%; + } + div { + min-width: 14rem; + padding: 0 1rem; + } + } + @media screen and (max-width: 400px) { + article { + flex-direction: column; + width: 100%; + img { + margin: 1rem auto; + border-radius: 8px; + } + div { + padding-bottom: 1rem; + } + } + } +} From c6ae6cdfa9a5d623c603561c1d2d75f2671664d5 Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Wed, 21 Dec 2022 21:29:56 +0100 Subject: [PATCH 2/9] adjust /o-gractwie styling, add 1st profpage, add keys to generated items --- data/administracja.json | 3 ++- pages/o-gractwie.tsx | 24 +++++++++++++++--------- pages/profile/jamesen.tsx | 5 +++++ styles/oGractwie.module.scss | 8 +++++++- 4 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 pages/profile/jamesen.tsx diff --git a/data/administracja.json b/data/administracja.json index 50ccfcb..81abdfa 100644 --- a/data/administracja.json +++ b/data/administracja.json @@ -2,7 +2,8 @@ { "name": "jamesen", "desc": "Frontendowiec nie jebany.", - "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg" + "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", + "profilehref": "jamesen" }, { "name": "Mollin", diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index e485db5..cf524cd 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -22,8 +22,9 @@ const PageInfo = () => { Gractwo jest nieformalną organizacją i społecznością osób zainteresowanych grami, anime, popkulturą. Powstałe w 2020 roku jest zreszeniem ludzi w dużej mierze znających się nawzajem i - spędzających razem „na Gractwie” czas. Genezą nazwy jest złączenie - słów „Gracz” i „Bractwo”. + spędzających razem „na Gractwie” czas. + {/* Genezą nazwy jest złączenie słów „Gracz” i „Bractwo”. */} + {/* */} {/* discordowa społeczność kryptogenshinowa która jest yyy często charakteryzuje się łączeniem przez relacje interpersonalne kluczowych członków, chyba że jeszcze bardziej chcemy ukrywać @@ -48,13 +49,18 @@ const PageInfo = () => {
{administracja.map((el) => { return ( -
- {`zdjęcie -
-

{el.name}

-

{el.desc || "brak opisu."}

-
-
+ +
+ {`zdjęcie +
+

{el.name}

+

{el.desc || "brak opisu."}

+
+
+ ); })}
diff --git a/pages/profile/jamesen.tsx b/pages/profile/jamesen.tsx new file mode 100644 index 0000000..a43d3b9 --- /dev/null +++ b/pages/profile/jamesen.tsx @@ -0,0 +1,5 @@ +const ProfileJamesen = () => { + return
Hello, this is jamesen's profile page!!
; +}; + +export default ProfileJamesen; diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss index 101b0cc..076392a 100644 --- a/styles/oGractwie.module.scss +++ b/styles/oGractwie.module.scss @@ -44,8 +44,13 @@ display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: center; margin-top: 1rem; - gap: 1rem; + gap: 1.5rem; + a { + color: inherit; + text-decoration: inherit; + } article { --radius: 6px; flex: 1; @@ -53,6 +58,7 @@ flex-direction: row; background: var(--black1); border-radius: var(--radius); + box-shadow: var(--shadow0); img { width: 128px; max-width: 156px; From 75e59fce207c3a31416a2baf2e7b088fc6a587f7 Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Wed, 21 Dec 2022 21:50:55 +0100 Subject: [PATCH 3/9] simplify admin json by mutating name string for link, add hover state to admin card links --- data/administracja.json | 3 +- pages/o-gractwie.tsx | 4 ++- styles/oGractwie.module.scss | 70 +++++++++++++++++++----------------- 3 files changed, 41 insertions(+), 36 deletions(-) diff --git a/data/administracja.json b/data/administracja.json index 81abdfa..50ccfcb 100644 --- a/data/administracja.json +++ b/data/administracja.json @@ -2,8 +2,7 @@ { "name": "jamesen", "desc": "Frontendowiec nie jebany.", - "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", - "profilehref": "jamesen" + "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg" }, { "name": "Mollin", diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index cf524cd..4d80c65 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -51,7 +51,9 @@ const PageInfo = () => { return (
{`zdjęcie diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss index 076392a..34132e1 100644 --- a/styles/oGractwie.module.scss +++ b/styles/oGractwie.module.scss @@ -50,43 +50,47 @@ a { color: inherit; text-decoration: inherit; - } - article { - --radius: 6px; - flex: 1; - display: flex; - flex-direction: row; - background: var(--black1); - border-radius: var(--radius); - box-shadow: var(--shadow0); - img { - width: 128px; - max-width: 156px; - flex: 1; - border-top-left-radius: var(--radius); - border-bottom-left-radius: var(--radius); - // for alt text - color: var(--grey); - // for mollin's vertical picture to display well - aspect-ratio: 1 / 1; - object-fit: cover; - object-position: 50% 35%; - } - div { - min-width: 14rem; - padding: 0 1rem; - } - } - @media screen and (max-width: 400px) { article { - flex-direction: column; - width: 100%; + --radius: 6px; + flex: 1; + display: flex; + flex-direction: row; + background: var(--black1); + border-radius: var(--radius); + box-shadow: var(--shadow0); + transition-duration: 100ms; img { - margin: 1rem auto; - border-radius: 8px; + width: 128px; + max-width: 156px; + flex: 1; + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); + // for alt text + color: var(--grey); + // for mollin's vertical picture to display well + aspect-ratio: 1 / 1; + object-fit: cover; + object-position: 50% 35%; } div { - padding-bottom: 1rem; + min-width: 14rem; + padding: 0 1rem; + } + &:hover { + background: var(--black2); + } + } + @media screen and (max-width: 400px) { + article { + flex-direction: column; + width: 100%; + img { + margin: 1rem auto; + border-radius: 8px; + } + div { + padding-bottom: 1rem; + } } } } From 2236c4e779ff48d2b8dbf2444e8a8e69e7b5eccf Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Wed, 21 Dec 2022 23:19:14 +0100 Subject: [PATCH 4/9] basic dynamic route for profile pages implementation this includes: * modifying the administracja.json schema to fit a longer description for pages, and possibly more soon * the dynamic routing of profiles and handling of data therein * a redirect from base /profile path to a better destination * a journey of self discovery leading me to assess .filter() and .map(el, INDEX!!) as being based as fuck * wet spot where my tears landed --- data/administracja.json | 19 +++++++- data/links.json | 4 ++ pages/profile/[profname]/index.tsx | 72 ++++++++++++++++++++++++++++++ pages/profile/jamesen.tsx | 5 --- 4 files changed, 94 insertions(+), 6 deletions(-) create mode 100644 pages/profile/[profname]/index.tsx delete mode 100644 pages/profile/jamesen.tsx diff --git a/data/administracja.json b/data/administracja.json index 50ccfcb..3959246 100644 --- a/data/administracja.json +++ b/data/administracja.json @@ -2,7 +2,24 @@ { "name": "jamesen", "desc": "Frontendowiec nie jebany.", - "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg" + "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", + "profile": { + "bigdesc": [ + "Tutaj można napisać w kit dużo tekstu o sobie i generalnie to będzie on wyrenderowany na stronce.", + "Tak to ma działać, generalnie. Tak. Owszem.", + "", + "Aaaaaaaaaaaaaaaaaa.", + "Jakby ktoś się zastanawiał jak zrobić takiego breaka jak tu:", + "", + "To zrobiłem żeby się tworzył przy pustym stringu w arrayu opisowym.", + "", + "ale jestem dobry, ty.", + "", + "", + "", + "~jamesen" + ] + } }, { "name": "Mollin", diff --git a/data/links.json b/data/links.json index 94707d0..6b9b896 100644 --- a/data/links.json +++ b/data/links.json @@ -23,6 +23,10 @@ "hrefalias": ["/github", "/gh"], "desc": "Nasz org na GitHubie!" }, + { + "href": "/o-gractwie#sklad-administracji", + "hrefalias": ["/profile"] + }, { "name": "Kod Źródłowy", "href": "https://github.com/gractwo/gractwo-web", diff --git a/pages/profile/[profname]/index.tsx b/pages/profile/[profname]/index.tsx new file mode 100644 index 0000000..21f684d --- /dev/null +++ b/pages/profile/[profname]/index.tsx @@ -0,0 +1,72 @@ +import { useRouter } from "next/router"; +import administracja from "../../../data/administracja.json"; + +const ProfilePage = () => { + const router = useRouter(); + const profname = router.query.profname as string; + if ( + administracja + .map((el) => { + return el.name.replaceAll(" ", "-").toLocaleLowerCase(); + }) + .includes(profname) + ) { + const person = administracja.filter((wpis) => { + return wpis.name.replaceAll(" ", "-").toLocaleLowerCase() === profname; + })[0]; + return ( +
+
+ {`${person.name} +
+

{person.name}

+

{person.desc}

+
+
+ {person.profile?.bigdesc.map((el, index) => { + return

{el ||
}

; + })} +
+ ); + } else { + return ( +
+

Sorki!{" :("}

+

+ Sprawdź pisownię: + + {`/profile/${profname}`} + + nie jest poprawnym lokatorem profilu. +

+
+ ); + } +}; + +export default ProfilePage; diff --git a/pages/profile/jamesen.tsx b/pages/profile/jamesen.tsx deleted file mode 100644 index a43d3b9..0000000 --- a/pages/profile/jamesen.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const ProfileJamesen = () => { - return
Hello, this is jamesen's profile page!!
; -}; - -export default ProfileJamesen; From 0cff9691e00909dd6824ef72fd2e029e5c73599b Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Thu, 22 Dec 2022 13:31:07 +0100 Subject: [PATCH 5/9] standardise bigdesc fields, add experimental properties --- data/administracja.json | 45 ++++++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 19 deletions(-) diff --git a/data/administracja.json b/data/administracja.json index 3959246..d30a374 100644 --- a/data/administracja.json +++ b/data/administracja.json @@ -4,46 +4,53 @@ "desc": "Frontendowiec nie jebany.", "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", "profile": { - "bigdesc": [ - "Tutaj można napisać w kit dużo tekstu o sobie i generalnie to będzie on wyrenderowany na stronce.", - "Tak to ma działać, generalnie. Tak. Owszem.", - "", - "Aaaaaaaaaaaaaaaaaa.", - "Jakby ktoś się zastanawiał jak zrobić takiego breaka jak tu:", - "", - "To zrobiłem żeby się tworzył przy pustym stringu w arrayu opisowym.", - "", - "ale jestem dobry, ty.", - "", - "", - "", - "~jamesen" + "bigdesc": ["Tutaj będzie kiedyś opis profilu."], + "links": [ + { + "resname": "Website", + "href": "https://manczak.net" + } ] } }, { "name": "Mollin", "desc": "Porucznik Essy.", - "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3" + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } }, { "name": "Elephant", "desc": "Osobnik demencyjny.", - "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A" + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } }, { "name": "Dzioba", "desc": "Backendowiec jebany.", - "img": "https://avatars.githubusercontent.com/u/62724833?v=4" + "img": "https://avatars.githubusercontent.com/u/62724833?v=4", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } }, { "name": "KuOlek", "desc": "Duch. (bo go nie ma)", - "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121" + "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } }, { "name": "Bavil Gravlax", "desc": "Śpiący rękawek.", - "img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657" + "img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657", + "profile": { + "bigdesc": ["Tutaj będzie kiedyś opis profilu."] + } } ] From 8a2687674bd058148b76d056290da3c8d1409f60 Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Thu, 22 Dec 2022 13:36:07 +0100 Subject: [PATCH 6/9] add /o-gractwie content list, links & redirects list --- pages/o-gractwie.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index 4d80c65..944d4a0 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -33,7 +33,7 @@ const PageInfo = () => {

- {/*
+
skład administracji @@ -42,7 +42,7 @@ const PageInfo = () => { linki i przekierowania -
*/} +

skład administracji

@@ -67,18 +67,20 @@ const PageInfo = () => { })}
- {/*
+

linki i przekierowania

{links.map((el) => { - return ( - - {el.name} - - ); + if (el.name) { + return ( + + {el.name} + + ); + } })}
-
*/} +
); }; From ae2c5fbba4125ae081cb5537bd30cfe232e790dd Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Thu, 22 Dec 2022 13:43:10 +0100 Subject: [PATCH 7/9] convert Icon component from enum input to string type --- components/Icon.tsx | 39 ++++++++++++++-------------- components/Navigation/Navigation.tsx | 4 +-- pages/index.tsx | 10 +++---- pages/o-gractwie.tsx | 6 ++--- 4 files changed, 29 insertions(+), 30 deletions(-) diff --git a/components/Icon.tsx b/components/Icon.tsx index 6912cc8..10c8587 100644 --- a/components/Icon.tsx +++ b/components/Icon.tsx @@ -1,16 +1,15 @@ -enum IconSet { - Menu, - Users, - Link2, - ExternalLink, - Twitter, - GitHub, - YouTube, - Discord, -} +type iconselection = + | "Menu" + | "Users" + | "Link2" + | "ExternalLink" + | "Twitter" + | "GitHub" + | "YouTube" + | "Discord"; type iconprops = { - icon: IconSet; + icon: iconselection; width?: number; height?: number; } & React.SVGProps; @@ -21,7 +20,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => { // - add {width || ogWidth} // - add {height || ogHeight} // - add {...props} - case IconSet.Menu: + case "Menu": return ( { ); - case IconSet.Users: + case "Users": return ( { ); - case IconSet.Link2: + case "Link2": return ( { ); - case IconSet.ExternalLink: + case "ExternalLink": return ( { ); - case IconSet.Twitter: + case "Twitter": // twitter icon courtesy of simpleicons.org return ( { ); - case IconSet.GitHub: + case "GitHub": // github icon courtesy of simpleicons.org return ( { ); - case IconSet.YouTube: + case "YouTube": // youtube icon courtesy of simpleicons.org return ( { ); - case IconSet.Discord: + case "Discord": // discord icon courtesy of simpleicons.org return ( { } }; -export { Icon, IconSet }; +export { Icon }; diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx index 6d27b52..0aecdf4 100644 --- a/components/Navigation/Navigation.tsx +++ b/components/Navigation/Navigation.tsx @@ -1,6 +1,6 @@ import styles from "./Navigation.module.scss"; import { GractwoLogo } from "../Logo"; -import { Icon, IconSet } from "../Icon"; +import { Icon } from "../Icon"; import navigation from "../../data/navigation.json"; import Link from "next/link"; @@ -26,7 +26,7 @@ const Navigation = () => { ); })}
- + {/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
{navigation.map((navlink) => { diff --git a/pages/index.tsx b/pages/index.tsx index 58bb1e4..b7e7af3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,7 @@ import styles from "../styles/Index.module.scss"; import { useEffect, useState } from "react"; import { SEO } from "../components/SEO"; -import { Icon, IconSet } from "../components/Icon"; +import { Icon } from "../components/Icon"; import splashes from "../data/splashes.json"; import Link from "next/link"; import { IndexGallery } from "../components/IndexGallery/IndexGallery"; @@ -64,16 +64,16 @@ const PageIndex = () => {
- discord + discord - youtube + youtube - twitter + twitter - github + github
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index 944d4a0..75dd424 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -2,7 +2,7 @@ import { GractwoLogo } from "../components/Logo"; import { SEO } from "../components/SEO"; import styles from "../styles/oGractwie.module.scss"; import Link from "next/link"; -import { Icon, IconSet } from "../components/Icon"; +import { Icon } from "../components/Icon"; import administracja from "../data/administracja.json"; import links from "../data/links.json"; @@ -36,11 +36,11 @@ const PageInfo = () => {
skład administracji - + linki i przekierowania - +
From fe326c70d84b4a7d37ccfb2943904e88694e228e Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Thu, 22 Dec 2022 14:38:55 +0100 Subject: [PATCH 8/9] add code icon, add icons to link/redirect list in /o-gractwie --- components/Icon.tsx | 23 +++++++++++++++++++++++ data/links.json | 15 ++++++++++----- pages/o-gractwie.tsx | 2 ++ 3 files changed, 35 insertions(+), 5 deletions(-) diff --git a/components/Icon.tsx b/components/Icon.tsx index 10c8587..72aebfc 100644 --- a/components/Icon.tsx +++ b/components/Icon.tsx @@ -3,6 +3,7 @@ type iconselection = | "Users" | "Link2" | "ExternalLink" + | "Code" | "Twitter" | "GitHub" | "YouTube" @@ -100,6 +101,25 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => { ); + case "Code": + return ( + + + + + ); case "Twitter": // twitter icon courtesy of simpleicons.org return ( @@ -164,7 +184,10 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => { ); + default: + return <>; } }; export { Icon }; +export type { iconselection }; diff --git a/data/links.json b/data/links.json index 6b9b896..ccb77c2 100644 --- a/data/links.json +++ b/data/links.json @@ -3,25 +3,29 @@ "name": "Discord", "href": "https://discord.gg/NBXq95C", "hrefalias": ["/discord", "/dsc", "/dc"], - "desc": "Nasz serwer na Discordzie!" + "desc": "Nasz serwer na Discordzie!", + "icon": "Discord" }, { "name": "YouTube", "href": "https://www.youtube.com/@gractwopl", "hrefalias": ["/youtube", "/yt"], - "desc": "Nasz kanał na YouTubie!" + "desc": "Nasz kanał na YouTubie!", + "icon": "YouTube" }, { "name": "Twitter", "href": "https://twitter.com/gractwo", "hrefalias": ["/twitter", "/twt"], - "desc": "Nasz profil na Twitterze!" + "desc": "Nasz profil na Twitterze!", + "icon": "Twitter" }, { "name": "GitHub", "href": "https://github.com/gractwo", "hrefalias": ["/github", "/gh"], - "desc": "Nasz org na GitHubie!" + "desc": "Nasz org na GitHubie!", + "icon": "GitHub" }, { "href": "/o-gractwie#sklad-administracji", @@ -31,6 +35,7 @@ "name": "Kod Źródłowy", "href": "https://github.com/gractwo/gractwo-web", "hrefalias": ["/source", "/oss"], - "desc": "Kod źródłowy naszej strony internetowej." + "desc": "Kod źródłowy naszej strony internetowej.", + "icon": "Code" } ] diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index 75dd424..90e58d8 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -3,6 +3,7 @@ import { SEO } from "../components/SEO"; import styles from "../styles/oGractwie.module.scss"; import Link from "next/link"; import { Icon } from "../components/Icon"; +import { iconselection } from "../components/Icon"; import administracja from "../data/administracja.json"; import links from "../data/links.json"; @@ -75,6 +76,7 @@ const PageInfo = () => { return ( {el.name} + {el.icon ? : ""} ); } From 21e3b32e4bd20dcec916d6c12cf1b7042d3c8577 Mon Sep 17 00:00:00 2001 From: jakubmanczak Date: Thu, 22 Dec 2022 15:07:45 +0100 Subject: [PATCH 9/9] devbadge on profiles & description adjustments --- data/administracja.json | 14 ++++++++------ pages/o-gractwie.tsx | 5 +++++ styles/oGractwie.module.scss | 10 ++++++++++ 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/data/administracja.json b/data/administracja.json index d30a374..8e5a013 100644 --- a/data/administracja.json +++ b/data/administracja.json @@ -1,8 +1,9 @@ [ { "name": "jamesen", - "desc": "Frontendowiec nie jebany.", + "desc": "project pioneer.", "img": "https://pbs.twimg.com/profile_images/1605591811921149953/Ogr8ALPa_400x400.jpg", + "devBadge": true, "profile": { "bigdesc": ["Tutaj będzie kiedyś opis profilu."], "links": [ @@ -15,7 +16,7 @@ }, { "name": "Mollin", - "desc": "Porucznik Essy.", + "desc": "porucznik essy.", "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/310691519_1360386137823083_6441534118963998218_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=nmArlTkhFvYAX9VQJc3&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfC6DiffR_3d4apR8EB-Mq7OAms46MygDluvUM9qn6h1yQ&oe=63A73BC3", "profile": { "bigdesc": ["Tutaj będzie kiedyś opis profilu."] @@ -23,7 +24,7 @@ }, { "name": "Elephant", - "desc": "Osobnik demencyjny.", + "desc": "osobnik demencyjny.", "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/311286331_1301953777209022_2921346369745668199_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=C4Zk591EV6kAX9t5DFj&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfBPI8OYZAoBS3H5ZCIV8-5rpcnYYWcAjq7EcxyZmGUSjg&oe=63A80F4A", "profile": { "bigdesc": ["Tutaj będzie kiedyś opis profilu."] @@ -31,15 +32,16 @@ }, { "name": "Dzioba", - "desc": "Backendowiec jebany.", + "desc": "backend bastard.", "img": "https://avatars.githubusercontent.com/u/62724833?v=4", + "devBadge": true, "profile": { "bigdesc": ["Tutaj będzie kiedyś opis profilu."] } }, { "name": "KuOlek", - "desc": "Duch. (bo go nie ma)", + "desc": "duch. (bo go nie ma)", "img": "https://scontent.fpoz3-1.fna.fbcdn.net/v/t39.30808-6/289371411_1715545058798551_2853229246533249138_n.jpg?_nc_cat=107&ccb=1-7&_nc_sid=174925&_nc_ohc=ljBd8O9-PfYAX91OEf_&_nc_ht=scontent.fpoz3-1.fna&oh=00_AfCr0jhihBgN8aqMrG2EbwNCjvPTpPbsOmvfD6kxuv7zbA&oe=63A7E121", "profile": { "bigdesc": ["Tutaj będzie kiedyś opis profilu."] @@ -47,7 +49,7 @@ }, { "name": "Bavil Gravlax", - "desc": "Śpiący rękawek.", + "desc": "śpiący rękawek.", "img": "https://media.discordapp.net/attachments/795744664556535809/1055159702880784556/Awatar.jpg?width=657&height=657", "profile": { "bigdesc": ["Tutaj będzie kiedyś opis profilu."] diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx index 90e58d8..8667d78 100644 --- a/pages/o-gractwie.tsx +++ b/pages/o-gractwie.tsx @@ -61,6 +61,11 @@ const PageInfo = () => {

{el.name}

{el.desc || "brak opisu."}

+ {el.devBadge ? ( + DEV + ) : ( + "" + )}
diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss index 34132e1..6d9e974 100644 --- a/styles/oGractwie.module.scss +++ b/styles/oGractwie.module.scss @@ -75,6 +75,16 @@ div { min-width: 14rem; padding: 0 1rem; + position: relative; + .devBadge { + position: absolute; + bottom: 6px; + right: 8px; + background: rgba(violet, 0.18); + font-family: var(--fonts-bold); + padding: 1px 4px; + border-radius: 2px; + } } &:hover { background: var(--black2);