mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-28 14:01:32 -05:00
feat: add bio component to profile page (#54285)
Co-authored-by: sembauke <semboot699@gmail.com> Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Moshe
@@ -314,6 +314,7 @@
|
||||
"tweet": "I just earned the {{certTitle}} certification @freeCodeCamp! Check it out here: {{certURL}}",
|
||||
"avatar": "{{username}}'s avatar",
|
||||
"joined": "Joined {{date}}",
|
||||
"from": "From {{location}}",
|
||||
"total-points": "Total Points:",
|
||||
"points": "{{count}} point on {{date}}",
|
||||
"points_plural": "{{count}} points on {{date}}",
|
||||
|
||||
@@ -13,100 +13,149 @@ exports[`<Profile/> renders correctly 1`] = `
|
||||
class="spacer"
|
||||
style="padding: 15px 0px;"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="bio-container"
|
||||
>
|
||||
<div
|
||||
class="mx-[-15px] "
|
||||
>
|
||||
<div
|
||||
class="avatar-camper min-h-[1px] px-[15px] w-full "
|
||||
class=" min-h-[1px] px-[15px] w-full md:w-2/3 md:ml-[16.6%] "
|
||||
>
|
||||
<div
|
||||
class="avatar-container default-border"
|
||||
class="avatar-camper"
|
||||
>
|
||||
<span
|
||||
class="sr-only"
|
||||
<div
|
||||
class="avatar-container default-border"
|
||||
>
|
||||
buttons.profile
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="avatar default-avatar"
|
||||
height="500px"
|
||||
version="1.1"
|
||||
viewBox="0 0 500 500"
|
||||
width="500px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>
|
||||
icons.avatar
|
||||
</title>
|
||||
<desc>
|
||||
icons.avatar-2
|
||||
</desc>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
buttons.profile
|
||||
</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="avatar default-avatar"
|
||||
height="500px"
|
||||
version="1.1"
|
||||
viewBox="0 0 500 500"
|
||||
width="500px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>
|
||||
icons.avatar
|
||||
</title>
|
||||
<desc>
|
||||
icons.avatar-2
|
||||
</desc>
|
||||
<g
|
||||
id="g"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<rect
|
||||
fill="#D0D0D5"
|
||||
height="500"
|
||||
width="500"
|
||||
/>
|
||||
<path
|
||||
d="m251.34 49c23.859 58.47 34.222 90.121 31.088 94.954-4.701 7.2493-15.381 32.924 0 50.968s77.487 6.439 92.029 23.897c14.542 17.458 12.196 68.184 14.542 135.56-22.154 0.54208-68.154 1.0837-138 1.6248l0.062-56h-0.124l0.062 56c-69.846-0.54109-115.85-1.0827-138-1.6248 2.3463-67.372 0-118.1 14.542-135.56 14.542-17.458 76.649-5.852 92.029-23.897s4.701-43.719 0-50.968c-3.134-4.8329 7.2285-36.484 31.088-94.954l0.13247 120h0.415z"
|
||||
fill="#242440"
|
||||
/>
|
||||
<path
|
||||
d="m250.13 185c47.577 0 66.872-66.034 66.872-90.434 0-42.286-29.773-76.566-66.5-76.566s-66.5 34.28-66.5 76.566c0 24.7 18.552 90.434 66.128 90.434z"
|
||||
fill="#242440"
|
||||
id="c"
|
||||
stroke="#D0D0D5"
|
||||
stroke-width="17"
|
||||
/>
|
||||
<path
|
||||
d="m77.011 459c-19.341-119.95-29.011-183.79-29.011-191.53 0-11.605 6.2167-16.473 17.298-16.473h370.4c11.082 0 17.298 4.8681 17.298 16.473 0 7.7366-9.6704 71.579-29.011 191.53z"
|
||||
fill="#5F5F8C"
|
||||
stroke="#D0D0D5"
|
||||
stroke-width="16"
|
||||
/>
|
||||
<rect
|
||||
fill="#5F5F8C"
|
||||
height="23"
|
||||
stroke="#D0D0D5"
|
||||
stroke-width="6"
|
||||
width="339"
|
||||
x="81"
|
||||
y="459"
|
||||
/>
|
||||
<g
|
||||
fill-rule="nonzero"
|
||||
transform="translate(162 283)"
|
||||
id="g"
|
||||
>
|
||||
<ellipse
|
||||
cx="88.5"
|
||||
cy="79"
|
||||
fill="#0A0A23"
|
||||
rx="88.5"
|
||||
ry="79"
|
||||
<rect
|
||||
fill="#D0D0D5"
|
||||
height="500"
|
||||
width="500"
|
||||
/>
|
||||
<path
|
||||
d="m251.34 49c23.859 58.47 34.222 90.121 31.088 94.954-4.701 7.2493-15.381 32.924 0 50.968s77.487 6.439 92.029 23.897c14.542 17.458 12.196 68.184 14.542 135.56-22.154 0.54208-68.154 1.0837-138 1.6248l0.062-56h-0.124l0.062 56c-69.846-0.54109-115.85-1.0827-138-1.6248 2.3463-67.372 0-118.1 14.542-135.56 14.542-17.458 76.649-5.852 92.029-23.897s4.701-43.719 0-50.968c-3.134-4.8329 7.2285-36.484 31.088-94.954l0.13247 120h0.415z"
|
||||
fill="#242440"
|
||||
/>
|
||||
<path
|
||||
d="m250.13 185c47.577 0 66.872-66.034 66.872-90.434 0-42.286-29.773-76.566-66.5-76.566s-66.5 34.28-66.5 76.566c0 24.7 18.552 90.434 66.128 90.434z"
|
||||
fill="#242440"
|
||||
id="c"
|
||||
stroke="#D0D0D5"
|
||||
stroke-width="17"
|
||||
/>
|
||||
<path
|
||||
d="m77.011 459c-19.341-119.95-29.011-183.79-29.011-191.53 0-11.605 6.2167-16.473 17.298-16.473h370.4c11.082 0 17.298 4.8681 17.298 16.473 0 7.7366-9.6704 71.579-29.011 191.53z"
|
||||
fill="#5F5F8C"
|
||||
stroke="#D0D0D5"
|
||||
stroke-width="16"
|
||||
/>
|
||||
<rect
|
||||
fill="#5F5F8C"
|
||||
height="23"
|
||||
stroke="#D0D0D5"
|
||||
stroke-width="6"
|
||||
width="339"
|
||||
x="81"
|
||||
y="459"
|
||||
/>
|
||||
<g
|
||||
transform="translate(20 40)"
|
||||
fill-rule="nonzero"
|
||||
transform="translate(162 283)"
|
||||
>
|
||||
<ellipse
|
||||
cx="88.5"
|
||||
cy="79"
|
||||
fill="#0A0A23"
|
||||
rx="88.5"
|
||||
ry="79"
|
||||
/>
|
||||
<g
|
||||
id="Group"
|
||||
transform="translate(42.462 4)"
|
||||
transform="translate(20 40)"
|
||||
>
|
||||
<g
|
||||
id="Group"
|
||||
transform="translate(42.462 4)"
|
||||
>
|
||||
<g
|
||||
fill="#fff"
|
||||
id="e"
|
||||
>
|
||||
<path
|
||||
d="m38.312 39.042c-3.9186-0.91476 12.174-18.263-16.43-39.034 0 0 3.7555 10.879-15.169 35.157-18.933 24.27 8.418 38.725 8.418 38.725s-12.834-6.24 2.0846-28.459c2.6734-4.0329 6.1663-7.6847 10.507-15.899 0 0 3.839 4.9441 1.834 15.671-2.9996 16.208 13.005 11.569 13.256 11.794 5.5895 6.0077-4.6307 16.564-5.2513 16.894-0.62061 0.32307 29.185-16.36 8.0083-41.469-1.4521 1.325-3.3338 7.5359-7.2564 6.6212z"
|
||||
id="i"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#000"
|
||||
fill-opacity="0"
|
||||
stroke="#000"
|
||||
stroke-opacity="0"
|
||||
>
|
||||
<path
|
||||
d="m38.312 39.042c-3.9186-0.91476 12.174-18.263-16.43-39.034 0 0 3.7555 10.879-15.169 35.157-18.933 24.27 8.418 38.725 8.418 38.725s-12.834-6.24 2.0846-28.459c2.6734-4.0329 6.1663-7.6847 10.507-15.899 0 0 3.839 4.9441 1.834 15.671-2.9996 16.208 13.005 11.569 13.256 11.794 5.5895 6.0077-4.6307 16.564-5.2513 16.894-0.62061 0.32307 29.185-16.36 8.0083-41.469-1.4521 1.325-3.3338 7.5359-7.2564 6.6212z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="b"
|
||||
transform="translate(110.13)"
|
||||
>
|
||||
<g
|
||||
fill="#fff"
|
||||
id="d"
|
||||
>
|
||||
<path
|
||||
d="m0.96996 0.62339c-0.47786 0.41439-0.95166 1.0162-0.95166 1.6215-0.0040664 1.045 1.3846 2.4611 3.9577 4.7889 10.713 9.1022 16.104 20.251 16.068 33.692-0.040843 14.875-5.7099 26.82-16.729 36.077-2.3158 1.8305-3.2674 3.2647-3.2715 4.4935 0 0.60537 0.4697 1.2324 0.94347 1.8341 0.44519 0.4216 1.3927 0.83962 2.0748 0.83962 2.5486 0.0071777 6.1183-2.6521 10.774-7.8266 9.0712-9.8085 13.172-20.64 13.401-35.4 0.21238-14.77-5.0319-24.784-15.308-35.126-3.6963-3.6935-6.7759-5.6141-8.8834-5.6177-0.68208 0-1.3927 0.20539-2.0748 0.62339z"
|
||||
id="a"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#000"
|
||||
fill-opacity="0"
|
||||
stroke="#000"
|
||||
stroke-opacity="0"
|
||||
>
|
||||
<path
|
||||
d="m0.96996 0.62339c-0.47786 0.41439-0.95166 1.0162-0.95166 1.6215-0.0040664 1.045 1.3846 2.4611 3.9577 4.7889 10.713 9.1022 16.104 20.251 16.068 33.692-0.040843 14.875-5.7099 26.82-16.729 36.077-2.3158 1.8305-3.2674 3.2647-3.2715 4.4935 0 0.60537 0.4697 1.2324 0.94347 1.8341 0.44519 0.4216 1.3927 0.83962 2.0748 0.83962 2.5486 0.0071777 6.1183-2.6521 10.774-7.8266 9.0712-9.8085 13.172-20.64 13.401-35.4 0.21238-14.77-5.0319-24.784-15.308-35.126-3.6963-3.6935-6.7759-5.6141-8.8834-5.6177-0.68208 0-1.3927 0.20539-2.0748 0.62339z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
fill="#fff"
|
||||
id="e"
|
||||
id="h"
|
||||
>
|
||||
<path
|
||||
d="m38.312 39.042c-3.9186-0.91476 12.174-18.263-16.43-39.034 0 0 3.7555 10.879-15.169 35.157-18.933 24.27 8.418 38.725 8.418 38.725s-12.834-6.24 2.0846-28.459c2.6734-4.0329 6.1663-7.6847 10.507-15.899 0 0 3.839 4.9441 1.834 15.671-2.9996 16.208 13.005 11.569 13.256 11.794 5.5895 6.0077-4.6307 16.564-5.2513 16.894-0.62061 0.32307 29.185-16.36 8.0083-41.469-1.4521 1.325-3.3338 7.5359-7.2564 6.6212z"
|
||||
id="i"
|
||||
d="m26.367 0.6342c0.47409 0.41439 0.9482 1.0162 0.9482 1.6215 0.004069 1.045-1.3855 2.4611-3.9603 4.7889-10.72 9.1022-16.111 20.251-16.078 33.692 0.04087 14.875 5.7136 26.82 16.74 36.077 2.3173 1.8305 3.2696 3.2647 3.2737 4.4935 0 0.60537-0.47001 1.2324-0.9441 1.8341-0.44548 0.4216-1.3896 0.83962-2.0762 0.83962-2.5503 0.0071777-6.1223-2.6521-10.782-7.8266-9.0773-9.8085-13.181-20.64-13.409-35.4-0.21252-14.77 5.0352-24.784 15.318-35.126 3.6987-3.6935 6.7844-5.6141 8.8892-5.6177 0.68253 0 1.3937 0.20539 2.0803 0.62339z"
|
||||
id="f"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
@@ -116,168 +165,173 @@ exports[`<Profile/> renders correctly 1`] = `
|
||||
stroke-opacity="0"
|
||||
>
|
||||
<path
|
||||
d="m38.312 39.042c-3.9186-0.91476 12.174-18.263-16.43-39.034 0 0 3.7555 10.879-15.169 35.157-18.933 24.27 8.418 38.725 8.418 38.725s-12.834-6.24 2.0846-28.459c2.6734-4.0329 6.1663-7.6847 10.507-15.899 0 0 3.839 4.9441 1.834 15.671-2.9996 16.208 13.005 11.569 13.256 11.794 5.5895 6.0077-4.6307 16.564-5.2513 16.894-0.62061 0.32307 29.185-16.36 8.0083-41.469-1.4521 1.325-3.3338 7.5359-7.2564 6.6212z"
|
||||
d="m26.367 0.6342c0.47409 0.41439 0.9482 1.0162 0.9482 1.6215 0.004069 1.045-1.3855 2.4611-3.9603 4.7889-10.72 9.1022-16.111 20.251-16.078 33.692 0.04087 14.875 5.7136 26.82 16.74 36.077 2.3173 1.8305 3.2696 3.2647 3.2737 4.4935 0 0.60537-0.47001 1.2324-0.9441 1.8341-0.44548 0.4216-1.3896 0.83962-2.0762 0.83962-2.5503 0.0071777-6.1223-2.6521-10.782-7.8266-9.0773-9.8085-13.181-20.64-13.409-35.4-0.21252-14.77 5.0352-24.784 15.318-35.126 3.6987-3.6935 6.7844-5.6141 8.8892-5.6177 0.68253 0 1.3937 0.20539 2.0803 0.62339z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="b"
|
||||
transform="translate(110.13)"
|
||||
>
|
||||
<g
|
||||
fill="#fff"
|
||||
id="d"
|
||||
>
|
||||
<path
|
||||
d="m0.96996 0.62339c-0.47786 0.41439-0.95166 1.0162-0.95166 1.6215-0.0040664 1.045 1.3846 2.4611 3.9577 4.7889 10.713 9.1022 16.104 20.251 16.068 33.692-0.040843 14.875-5.7099 26.82-16.729 36.077-2.3158 1.8305-3.2674 3.2647-3.2715 4.4935 0 0.60537 0.4697 1.2324 0.94347 1.8341 0.44519 0.4216 1.3927 0.83962 2.0748 0.83962 2.5486 0.0071777 6.1183-2.6521 10.774-7.8266 9.0712-9.8085 13.172-20.64 13.401-35.4 0.21238-14.77-5.0319-24.784-15.308-35.126-3.6963-3.6935-6.7759-5.6141-8.8834-5.6177-0.68208 0-1.3927 0.20539-2.0748 0.62339z"
|
||||
id="a"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#000"
|
||||
fill-opacity="0"
|
||||
stroke="#000"
|
||||
stroke-opacity="0"
|
||||
>
|
||||
<path
|
||||
d="m0.96996 0.62339c-0.47786 0.41439-0.95166 1.0162-0.95166 1.6215-0.0040664 1.045 1.3846 2.4611 3.9577 4.7889 10.713 9.1022 16.104 20.251 16.068 33.692-0.040843 14.875-5.7099 26.82-16.729 36.077-2.3158 1.8305-3.2674 3.2647-3.2715 4.4935 0 0.60537 0.4697 1.2324 0.94347 1.8341 0.44519 0.4216 1.3927 0.83962 2.0748 0.83962 2.5486 0.0071777 6.1183-2.6521 10.774-7.8266 9.0712-9.8085 13.172-20.64 13.401-35.4 0.21238-14.77-5.0319-24.784-15.308-35.126-3.6963-3.6935-6.7759-5.6141-8.8834-5.6177-0.68208 0-1.3927 0.20539-2.0748 0.62339z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
fill="#fff"
|
||||
id="h"
|
||||
>
|
||||
<path
|
||||
d="m26.367 0.6342c0.47409 0.41439 0.9482 1.0162 0.9482 1.6215 0.004069 1.045-1.3855 2.4611-3.9603 4.7889-10.72 9.1022-16.111 20.251-16.078 33.692 0.04087 14.875 5.7136 26.82 16.74 36.077 2.3173 1.8305 3.2696 3.2647 3.2737 4.4935 0 0.60537-0.47001 1.2324-0.9441 1.8341-0.44548 0.4216-1.3896 0.83962-2.0762 0.83962-2.5503 0.0071777-6.1223-2.6521-10.782-7.8266-9.0773-9.8085-13.181-20.64-13.409-35.4-0.21252-14.77 5.0352-24.784 15.318-35.126 3.6987-3.6935 6.7844-5.6141 8.8892-5.6177 0.68253 0 1.3937 0.20539 2.0803 0.62339z"
|
||||
id="f"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#000"
|
||||
fill-opacity="0"
|
||||
stroke="#000"
|
||||
stroke-opacity="0"
|
||||
>
|
||||
<path
|
||||
d="m26.367 0.6342c0.47409 0.41439 0.9482 1.0162 0.9482 1.6215 0.004069 1.045-1.3855 2.4611-3.9603 4.7889-10.72 9.1022-16.111 20.251-16.078 33.692 0.04087 14.875 5.7136 26.82 16.74 36.077 2.3173 1.8305 3.2696 3.2647 3.2737 4.4935 0 0.60537-0.47001 1.2324-0.9441 1.8341-0.44548 0.4216-1.3896 0.83962-2.0762 0.83962-2.5503 0.0071777-6.1223-2.6521-10.782-7.8266-9.0773-9.8085-13.181-20.64-13.409-35.4-0.21252-14.77 5.0352-24.784 15.318-35.126 3.6987-3.6935 6.7844-5.6141 8.8892-5.6177 0.68253 0 1.3937 0.20539 2.0803 0.62339z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
@
|
||||
string
|
||||
</h1>
|
||||
<h2>
|
||||
string
|
||||
</h2>
|
||||
<div
|
||||
class="spacer"
|
||||
style="padding: 5px 0px;"
|
||||
/>
|
||||
<p>
|
||||
string
|
||||
</p>
|
||||
<div
|
||||
class="profile-meta-container"
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-calendar "
|
||||
data-icon="calendar"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
profile.joined
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-location-dot "
|
||||
data-icon="location-dot"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
profile.from
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx-[-15px] "
|
||||
>
|
||||
<div
|
||||
class="social-icons-row min-h-[1px] px-[15px] "
|
||||
>
|
||||
<a
|
||||
aria-label="aria.linkedin"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-linkedin fa-2x "
|
||||
data-icon="linkedin"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
aria-label="aria.github"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-github fa-2x "
|
||||
data-icon="github"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 496 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
aria-label="aria.website"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-link fa-2x "
|
||||
data-icon="link"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 640 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
aria-label="aria.twitter"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-x-twitter fa-2x "
|
||||
data-icon="x-twitter"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx-[-15px] "
|
||||
>
|
||||
<div
|
||||
class="text-center social-media-icons min-h-[1px] px-[15px] md:w-1/2 md:ml-[25%] "
|
||||
>
|
||||
<a
|
||||
aria-label="aria.linkedin"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-linkedin fa-2x "
|
||||
data-icon="linkedin"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
aria-label="aria.github"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-github fa-2x "
|
||||
data-icon="github"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 496 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
aria-label="aria.website"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-link fa-2x "
|
||||
data-icon="link"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 640 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
aria-label="aria.twitter"
|
||||
href="string"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-x-twitter fa-2x "
|
||||
data-icon="x-twitter"
|
||||
data-prefix="fab"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<h2
|
||||
class="text-center username"
|
||||
>
|
||||
@
|
||||
string
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
|
||||
67
client/src/components/profile/components/bio.tsx
Normal file
67
client/src/components/profile/components/bio.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faCalendar, faLocationDot } from '@fortawesome/free-solid-svg-icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { userSelector } from '../../../redux/selectors';
|
||||
import { User } from '../../../redux/prop-types';
|
||||
import { AvatarRenderer, FullWidthRow, Spacer } from '../../helpers';
|
||||
import { parseDate } from './utils';
|
||||
import SocialIcons from './social-icons';
|
||||
|
||||
const Bio = () => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
joinDate,
|
||||
location,
|
||||
username,
|
||||
name,
|
||||
about,
|
||||
githubProfile,
|
||||
linkedin,
|
||||
twitter,
|
||||
website,
|
||||
isDonating,
|
||||
yearsTopContributor,
|
||||
picture
|
||||
} = useSelector(userSelector) as User;
|
||||
|
||||
return (
|
||||
<FullWidthRow>
|
||||
<div className='avatar-camper'>
|
||||
<AvatarRenderer
|
||||
isDonating={isDonating}
|
||||
isTopContributor={yearsTopContributor.length > 0}
|
||||
picture={picture}
|
||||
/>
|
||||
</div>
|
||||
<h1>@{username}</h1>
|
||||
{name && <h2>{name}</h2>}
|
||||
<Spacer size={'small'} />
|
||||
{about && <p>{about}</p>}
|
||||
<div className='profile-meta-container'>
|
||||
{joinDate && (
|
||||
<div>
|
||||
<FontAwesomeIcon icon={faCalendar} />
|
||||
<span>{parseDate(joinDate, t)}</span>
|
||||
</div>
|
||||
)}
|
||||
{location && (
|
||||
<div>
|
||||
<FontAwesomeIcon icon={faLocationDot} />
|
||||
<span>{t('profile.from', { location })}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<SocialIcons
|
||||
githubProfile={githubProfile}
|
||||
linkedin={linkedin}
|
||||
twitter={twitter}
|
||||
username={username}
|
||||
website={website}
|
||||
/>
|
||||
<hr />
|
||||
</FullWidthRow>
|
||||
);
|
||||
};
|
||||
export default Bio;
|
||||
@@ -7,7 +7,6 @@
|
||||
|
||||
.avatar-camper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-camper .avatar {
|
||||
@@ -29,3 +28,28 @@
|
||||
width: auto;
|
||||
margin: 0 0.2em -0.3em 0.2em;
|
||||
}
|
||||
|
||||
.profile-meta-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--quaternary-color);
|
||||
}
|
||||
|
||||
.profile-meta-container div {
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
.profile-meta-container svg {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.social-icons-row a {
|
||||
display: inline-block;
|
||||
margin-inline-end: 12px;
|
||||
color: var(--quaternary-color);
|
||||
}
|
||||
|
||||
.bio-container h2 {
|
||||
color: var(--quaternary-color);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import { faAward, faCalendar } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faAward } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Col, Row } from '@freecodecamp/ui';
|
||||
import type { User } from '../../../redux/prop-types';
|
||||
import { AvatarRenderer } from '../../helpers';
|
||||
import Link from '../../helpers/link';
|
||||
import SupporterBadge from '../../../assets/icons/supporter-badge';
|
||||
import SocialIcons from './social-icons';
|
||||
import { formatYears, parseDate } from './utils';
|
||||
import { formatYears } from './utils';
|
||||
import './camper.css';
|
||||
import Bio from './bio';
|
||||
|
||||
export type CamperProps = Pick<
|
||||
User,
|
||||
@@ -27,56 +24,12 @@ export type CamperProps = Pick<
|
||||
| 'joinDate'
|
||||
>;
|
||||
|
||||
function Camper({
|
||||
name,
|
||||
username,
|
||||
location,
|
||||
picture,
|
||||
about,
|
||||
yearsTopContributor,
|
||||
githubProfile,
|
||||
isDonating,
|
||||
joinDate,
|
||||
linkedin,
|
||||
twitter,
|
||||
website
|
||||
}: CamperProps): JSX.Element {
|
||||
function Camper({ yearsTopContributor }: CamperProps): JSX.Element {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col className='avatar-camper' xs={12}>
|
||||
<AvatarRenderer
|
||||
isDonating={isDonating}
|
||||
isTopContributor={yearsTopContributor.length > 0}
|
||||
picture={picture}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<SocialIcons
|
||||
githubProfile={githubProfile}
|
||||
linkedin={linkedin}
|
||||
twitter={twitter}
|
||||
username={username}
|
||||
website={website}
|
||||
/>
|
||||
<br />
|
||||
<h2 className='text-center username'>@{username}</h2>
|
||||
{name && <p className='text-center name'>{name}</p>}
|
||||
{location && <p className='text-center location'>{location}</p>}
|
||||
{isDonating && (
|
||||
<p className='text-center supporter'>
|
||||
<SupporterBadge />
|
||||
{t('profile.supporter')}
|
||||
</p>
|
||||
)}
|
||||
{about && <p className='bio text-center'>{about}</p>}
|
||||
{joinDate && (
|
||||
<p className='bio text-center'>
|
||||
<FontAwesomeIcon icon={faCalendar} /> {parseDate(joinDate, t)}
|
||||
</p>
|
||||
)}
|
||||
<div className='bio-container'>
|
||||
<Bio />
|
||||
{yearsTopContributor.filter(Boolean).length > 0 && (
|
||||
<div>
|
||||
<br />
|
||||
|
||||
@@ -86,7 +86,7 @@ function SocialIcons(props: SocialIconsProps): JSX.Element | null {
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col className='text-center social-media-icons' sm={6} smOffset={3}>
|
||||
<Col className='social-icons-row'>
|
||||
{linkedin ? LinkedInIcon(linkedin, username) : null}
|
||||
{githubProfile ? GitHubIcon(githubProfile, username) : null}
|
||||
{website ? WebsiteIcon(website, username) : null}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore } from 'redux';
|
||||
import { Themes } from '../settings/theme';
|
||||
|
||||
import Profile from './profile';
|
||||
|
||||
jest.mock('../../analytics');
|
||||
//workaround to avoid some strange gatsby error:
|
||||
window.___loader = { enqueue: () => {}, hovering: () => {} };
|
||||
|
||||
const userProps = {
|
||||
user: {
|
||||
@@ -77,17 +80,24 @@ const notMyProfileProps = {
|
||||
isSessionUser: false,
|
||||
...userProps
|
||||
};
|
||||
|
||||
function reducer() {
|
||||
return {
|
||||
app: { appUsername: 'vasili', user: { vasili: userProps.user } }
|
||||
};
|
||||
}
|
||||
function renderWithRedux(ui: JSX.Element) {
|
||||
return render(<Provider store={createStore(reducer)}>{ui}</Provider>);
|
||||
}
|
||||
describe('<Profile/>', () => {
|
||||
it('renders the report button on another persons profile', () => {
|
||||
render(<Profile {...notMyProfileProps} />);
|
||||
renderWithRedux(<Profile {...notMyProfileProps} />);
|
||||
|
||||
const reportButton: HTMLElement = screen.getByText('buttons.flag-user');
|
||||
expect(reportButton).toHaveAttribute('href', '/user/string/report-user');
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const { container } = render(<Profile {...notMyProfileProps} />);
|
||||
const { container } = renderWithRedux(<Profile {...notMyProfileProps} />);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user