mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(client): profile consistency (#56720)
Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Sem Bauke
@@ -346,6 +346,7 @@
|
||||
"donated": "Donated to the community",
|
||||
"projects": "Projects",
|
||||
"stats": "Stats",
|
||||
"activity": "Activity",
|
||||
"timeline": "Timeline",
|
||||
"none-completed": "No challenges have been completed yet.",
|
||||
"get-started": "Get started here.",
|
||||
|
||||
@@ -21,95 +21,145 @@ exports[`<Profile/> renders correctly 1`] = `
|
||||
class=" min-h-[1px] px-[15px] w-full md:w-2/3 md:ml-[16.6%] "
|
||||
>
|
||||
<div
|
||||
class="avatar-camper"
|
||||
class="h-[90px]"
|
||||
/>
|
||||
<section
|
||||
class="card card-header"
|
||||
>
|
||||
<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"
|
||||
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"
|
||||
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
|
||||
@@ -119,176 +169,132 @@ 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>
|
||||
</div>
|
||||
<div
|
||||
class="profile-edit-container"
|
||||
>
|
||||
<h1>
|
||||
@
|
||||
string
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-[10px]"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="profile-meta-container"
|
||||
>
|
||||
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="mx-[-15px] "
|
||||
>
|
||||
<div
|
||||
class="social-icons-row min-h-[1px] px-[15px] "
|
||||
class="profile-edit-container"
|
||||
>
|
||||
<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>
|
||||
<h1>
|
||||
@
|
||||
string
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<div
|
||||
class="h-[20px]"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="profile-meta-container"
|
||||
>
|
||||
|
||||
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+433
-429
@@ -7,441 +7,445 @@ exports[`should check certification page consistency 1`] = `
|
||||
<div
|
||||
className=" min-h-[1px] px-[15px] w-full md:w-2/3 md:ml-[16.6%] "
|
||||
>
|
||||
<h2>
|
||||
profile.timeline
|
||||
</h2>
|
||||
<div
|
||||
className="h-[10px]"
|
||||
/>
|
||||
<table
|
||||
className="table-auto w-full max-w-full border-collapse text-start text-foreground-tertiary [&_th]:font-normal [&_td]:p-1 [&_th]:p-1 [&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary"
|
||||
<section
|
||||
className="card"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
profile.challenge
|
||||
</th>
|
||||
<th>
|
||||
settings.labels.solution
|
||||
</th>
|
||||
<th
|
||||
className="text-center"
|
||||
>
|
||||
profile.completed
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-41"
|
||||
>
|
||||
Step 41
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-number-guessing-game-project/build-a-number-guessing-game"
|
||||
>
|
||||
Build a Number Guessing Game
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-periodic-table-database-project/build-a-periodic-table-database"
|
||||
>
|
||||
Build a Periodic Table Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-git-by-building-an-sql-reference-object/build-an-sql-reference-object"
|
||||
>
|
||||
Build an SQL Reference Object
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-nano-by-building-a-castle/build-a-castle"
|
||||
>
|
||||
Build a Castle
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler"
|
||||
>
|
||||
Build a Salon Appointment Scheduler
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-bash-and-sql-by-building-a-bike-rental-shop/build-a-bike-rental-shop"
|
||||
>
|
||||
Build a Bike Rental Shop
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-advanced-bash-by-building-a-kitty-ipsum-translator/build-a-kitty-ipsum-translator"
|
||||
>
|
||||
Build a Kitty Ipsum Translator
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-world-cup-database-project/build-a-world-cup-database"
|
||||
>
|
||||
Build a World Cup Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2"
|
||||
>
|
||||
Build a Student Database: Part 2
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1"
|
||||
>
|
||||
Build a Student Database: Part 1
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-bash-scripting-by-building-five-programs/build-five-programs"
|
||||
>
|
||||
Build Five Programs
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database"
|
||||
>
|
||||
Build a Celestial Bodies Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-relational-databases-by-building-a-mario-database/build-a-mario-database"
|
||||
>
|
||||
Build a Mario Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-bash-by-building-a-boilerplate/build-a-boilerplate"
|
||||
>
|
||||
Build a Boilerplate
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav
|
||||
aria-label="aria.timeline-pagination-nav"
|
||||
>
|
||||
<ul
|
||||
aria-hidden="true"
|
||||
className="timeline-pagination_list"
|
||||
<h2>
|
||||
profile.timeline
|
||||
</h2>
|
||||
<div
|
||||
className="h-[20px]"
|
||||
/>
|
||||
<table
|
||||
className="table-auto w-full max-w-full border-collapse text-start text-foreground-tertiary [&_th]:font-normal [&_td]:p-1 [&_th]:p-1 [&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary"
|
||||
>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.first-page"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
profile.challenge
|
||||
</th>
|
||||
<th>
|
||||
settings.labels.solution
|
||||
</th>
|
||||
<th
|
||||
className="text-center"
|
||||
>
|
||||
profile.completed
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<<
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.previous-page"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-41"
|
||||
>
|
||||
Step 41
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
>
|
||||
profile.page-number
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "unset",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.next-page"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-number-guessing-game-project/build-a-number-guessing-game"
|
||||
>
|
||||
Build a Number Guessing Game
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "unset",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.last-page"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-periodic-table-database-project/build-a-periodic-table-database"
|
||||
>
|
||||
Build a Periodic Table Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
>>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-git-by-building-an-sql-reference-object/build-an-sql-reference-object"
|
||||
>
|
||||
Build an SQL Reference Object
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-nano-by-building-a-castle/build-a-castle"
|
||||
>
|
||||
Build a Castle
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler"
|
||||
>
|
||||
Build a Salon Appointment Scheduler
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-bash-and-sql-by-building-a-bike-rental-shop/build-a-bike-rental-shop"
|
||||
>
|
||||
Build a Bike Rental Shop
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-advanced-bash-by-building-a-kitty-ipsum-translator/build-a-kitty-ipsum-translator"
|
||||
>
|
||||
Build a Kitty Ipsum Translator
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-world-cup-database-project/build-a-world-cup-database"
|
||||
>
|
||||
Build a World Cup Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2"
|
||||
>
|
||||
Build a Student Database: Part 2
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1"
|
||||
>
|
||||
Build a Student Database: Part 1
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-bash-scripting-by-building-five-programs/build-five-programs"
|
||||
>
|
||||
Build Five Programs
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database"
|
||||
>
|
||||
Build a Celestial Bodies Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-relational-databases-by-building-a-mario-database/build-a-mario-database"
|
||||
>
|
||||
Build a Mario Database
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
className="timeline-row"
|
||||
>
|
||||
<td>
|
||||
<a
|
||||
gatsby="true"
|
||||
href="/learn/relational-database/learn-bash-by-building-a-boilerplate/build-a-boilerplate"
|
||||
>
|
||||
Build a Boilerplate
|
||||
</a>
|
||||
</td>
|
||||
<td />
|
||||
<td
|
||||
className="text-center"
|
||||
>
|
||||
<time
|
||||
dateTime="2016-09-28T20:31:56.730Z"
|
||||
>
|
||||
Dec 29, 2022
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav
|
||||
aria-label="aria.timeline-pagination-nav"
|
||||
>
|
||||
<ul
|
||||
aria-hidden="true"
|
||||
className="timeline-pagination_list"
|
||||
>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.first-page"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<<
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.previous-page"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
>
|
||||
profile.page-number
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "unset",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.next-page"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className="timeline-pagination_list_item"
|
||||
style={
|
||||
{
|
||||
"visibility": "unset",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-label="aria.last-page"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
>>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -34,51 +34,53 @@ const Bio = ({
|
||||
|
||||
return (
|
||||
<FullWidthRow>
|
||||
<div className='avatar-camper'>
|
||||
<AvatarRenderer
|
||||
isDonating={isDonating}
|
||||
isTopContributor={isTopContributor}
|
||||
picture={picture}
|
||||
<Spacer size={'xl'} />
|
||||
<section className='card card-header'>
|
||||
<div className='avatar-camper'>
|
||||
<AvatarRenderer
|
||||
isDonating={isDonating}
|
||||
isTopContributor={isTopContributor}
|
||||
picture={picture}
|
||||
/>
|
||||
</div>
|
||||
<div className='profile-edit-container'>
|
||||
<h1>@{username}</h1>
|
||||
{isSessionUser && (
|
||||
<Button
|
||||
onClick={() => setIsEditing(true)}
|
||||
size='small'
|
||||
className='button-fit'
|
||||
aria-label={t('aria.edit-my-profile')}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPen} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{name && <h2>{name}</h2>}
|
||||
<Spacer size={'s'} />
|
||||
{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}
|
||||
/>
|
||||
</div>
|
||||
<div className='profile-edit-container'>
|
||||
<h1>@{username}</h1>
|
||||
{isSessionUser && (
|
||||
<Button
|
||||
onClick={() => setIsEditing(true)}
|
||||
size='small'
|
||||
className='button-fit'
|
||||
aria-label={t('aria.edit-my-profile')}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPen} />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{name && <h2>{name}</h2>}
|
||||
<Spacer size='xs' />
|
||||
{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 />
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
|
||||
.avatar-camper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: -160px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -36,7 +38,6 @@
|
||||
.profile-meta-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--quaternary-color);
|
||||
}
|
||||
|
||||
@@ -44,13 +45,19 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-top: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.profile-edit-container h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-edit-container button {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
.profile-meta-container div {
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
@@ -59,6 +66,10 @@
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
.social-icons-row {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.social-icons-row a {
|
||||
display: inline-block;
|
||||
margin-inline-end: 12px;
|
||||
|
||||
@@ -66,36 +66,37 @@ function Camper({
|
||||
</div>
|
||||
{(isDonating || isTopContributor) && (
|
||||
<FullWidthRow>
|
||||
<h2>{t('profile.badges')}</h2>
|
||||
<div className='badge-card-container'>
|
||||
{isDonating && (
|
||||
<div className='badge-card'>
|
||||
<div className='camper-badge'>
|
||||
<SupporterBadgeEmblem />
|
||||
<section className='card'>
|
||||
<h2>{t('profile.badges')}</h2>
|
||||
<div className='badge-card-container'>
|
||||
{isDonating && (
|
||||
<div className='badge-card'>
|
||||
<div className='camper-badge'>
|
||||
<SupporterBadgeEmblem />
|
||||
</div>
|
||||
<div className='badge-card-description'>
|
||||
<h3>{t('profile.supporter')}</h3>
|
||||
<p>{t('profile.donated')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='badge-card-description'>
|
||||
<h3>{t('profile.supporter')}</h3>
|
||||
<p>{t('profile.donated')}</p>
|
||||
)}
|
||||
{isTopContributor && (
|
||||
<div className='badge-card'>
|
||||
<div className='camper-badge'>
|
||||
<TopContibutorBadgeEmblem />
|
||||
</div>
|
||||
<div className='badge-card-description'>
|
||||
<h3>{t('profile.contributor')}</h3>
|
||||
<p>
|
||||
{t('profile.contributor-prolific', {
|
||||
year: yearsTopContributor.join(', ')
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isTopContributor && (
|
||||
<div className='badge-card'>
|
||||
<div className='camper-badge'>
|
||||
<TopContibutorBadgeEmblem />
|
||||
</div>
|
||||
<div className='badge-card-description'>
|
||||
<h3>{t('profile.contributor')}</h3>
|
||||
<p>
|
||||
{t('profile.contributor-prolific', {
|
||||
year: yearsTopContributor.join(', ')
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<hr />
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -72,45 +72,50 @@ function Certificates({
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<FullWidthRow className='profile-certifications'>
|
||||
<h2 id='fcc-certifications'>{t('profile.fcc-certs')}</h2>
|
||||
<br />
|
||||
{hasModernCert && currentCerts ? (
|
||||
<ul aria-labelledby='fcc-certifications'>
|
||||
{currentCerts
|
||||
.filter(({ show }) => show)
|
||||
.map(cert => (
|
||||
<CertButton key={cert.certSlug} cert={cert} username={username} />
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className='text-center'>{t('profile.no-certs')}</p>
|
||||
)}
|
||||
{hasLegacyCert && (
|
||||
<div>
|
||||
<Spacer size='m' />
|
||||
<h3 id='legacy-certifications'>
|
||||
{t('settings.headings.legacy-certs')}
|
||||
</h3>
|
||||
<Spacer size='m' />
|
||||
{legacyCerts && (
|
||||
<>
|
||||
<ul aria-labelledby='legacy-certifications'>
|
||||
{legacyCerts
|
||||
.filter(({ show }) => show)
|
||||
.map(cert => (
|
||||
<CertButton
|
||||
key={cert.certSlug}
|
||||
cert={cert}
|
||||
username={username}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<Spacer size='m' />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<hr />
|
||||
<section className='card'>
|
||||
<h2 id='fcc-certifications'>{t('profile.fcc-certs')}</h2>
|
||||
<br />
|
||||
{hasModernCert && currentCerts ? (
|
||||
<ul aria-labelledby='fcc-certifications'>
|
||||
{currentCerts
|
||||
.filter(({ show }) => show)
|
||||
.map(cert => (
|
||||
<CertButton
|
||||
key={cert.certSlug}
|
||||
cert={cert}
|
||||
username={username}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className='text-center'>{t('profile.no-certs')}</p>
|
||||
)}
|
||||
{hasLegacyCert && (
|
||||
<div>
|
||||
<Spacer size='m' />
|
||||
<h3 id='legacy-certifications'>
|
||||
{t('settings.headings.legacy-certs')}
|
||||
</h3>
|
||||
<Spacer size='m' />
|
||||
{legacyCerts && (
|
||||
<>
|
||||
<ul aria-labelledby='legacy-certifications'>
|
||||
{legacyCerts
|
||||
.filter(({ show }) => show)
|
||||
.map(cert => (
|
||||
<CertButton
|
||||
key={cert.certSlug}
|
||||
cert={cert}
|
||||
username={username}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<Spacer size='m' />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -97,72 +97,74 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
|
||||
|
||||
return (
|
||||
<FullWidthRow>
|
||||
<Spacer size='m' />
|
||||
<section className='card'>
|
||||
<h2>{t('profile.activity')}</h2>
|
||||
<Spacer size='m' />
|
||||
|
||||
<CalendarHeatMap
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
classForValue={(value: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (!value || value.count < 1) return 'color-empty';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (value.count < 4) return 'color-scale-1';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (value.count < 8) return 'color-scale-2';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (value.count >= 8) return 'color-scale-a-lot';
|
||||
return 'color-empty';
|
||||
}}
|
||||
endDate={endOfCalendar}
|
||||
startDate={startOfCalendar}
|
||||
tooltipDataAttrs={(value: { count: number; date: Date }) => {
|
||||
const dateFormatted: string =
|
||||
value && value.date
|
||||
? value.date.toLocaleDateString([localeCode, 'en-US'], {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})
|
||||
: '';
|
||||
return {
|
||||
'data-tip':
|
||||
value && value.count > -1
|
||||
? t('profile.points', {
|
||||
count: value.count,
|
||||
date: dateFormatted
|
||||
<CalendarHeatMap
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
classForValue={(value: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (!value || value.count < 1) return 'color-empty';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (value.count < 4) return 'color-scale-1';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (value.count < 8) return 'color-scale-2';
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
if (value.count >= 8) return 'color-scale-a-lot';
|
||||
return 'color-empty';
|
||||
}}
|
||||
endDate={endOfCalendar}
|
||||
startDate={startOfCalendar}
|
||||
tooltipDataAttrs={(value: { count: number; date: Date }) => {
|
||||
const dateFormatted: string =
|
||||
value && value.date
|
||||
? value.date.toLocaleDateString([localeCode, 'en-US'], {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
})
|
||||
: ''
|
||||
};
|
||||
}}
|
||||
values={dataToDisplay}
|
||||
/>
|
||||
<ReactTooltip className='react-tooltip' effect='solid' html={true} />
|
||||
<Row className='text-center'>
|
||||
<button
|
||||
className='heatmap-nav-btn'
|
||||
disabled={!pages[this.state.pageIndex - 1]}
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
onClick={this.prevPage}
|
||||
style={{
|
||||
visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
|
||||
: '';
|
||||
return {
|
||||
'data-tip':
|
||||
value && value.count > -1
|
||||
? t('profile.points', {
|
||||
count: value.count,
|
||||
date: dateFormatted
|
||||
})
|
||||
: ''
|
||||
};
|
||||
}}
|
||||
>
|
||||
<
|
||||
</button>
|
||||
<span>{title}</span>
|
||||
<button
|
||||
className='heatmap-nav-btn'
|
||||
disabled={!pages[this.state.pageIndex + 1]}
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
onClick={this.nextPage}
|
||||
style={{
|
||||
visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
|
||||
}}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
</Row>
|
||||
<Spacer size='m' />
|
||||
<hr />
|
||||
values={dataToDisplay}
|
||||
/>
|
||||
<ReactTooltip className='react-tooltip' effect='solid' html={true} />
|
||||
<Row className='text-center'>
|
||||
<button
|
||||
className='heatmap-nav-btn'
|
||||
disabled={!pages[this.state.pageIndex - 1]}
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
onClick={this.prevPage}
|
||||
style={{
|
||||
visibility: pages[this.state.pageIndex - 1] ? 'unset' : 'hidden'
|
||||
}}
|
||||
>
|
||||
<
|
||||
</button>
|
||||
<span>{title}</span>
|
||||
<button
|
||||
className='heatmap-nav-btn'
|
||||
disabled={!pages[this.state.pageIndex + 1]}
|
||||
// eslint-disable-next-line @typescript-eslint/unbound-method
|
||||
onClick={this.nextPage}
|
||||
style={{
|
||||
visibility: pages[this.state.pageIndex + 1] ? 'unset' : 'hidden'
|
||||
}}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
</Row>
|
||||
<Spacer size='m' />
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
.portfolio-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -18,39 +18,47 @@ export const PortfolioProjects = ({
|
||||
}
|
||||
return (
|
||||
<FullWidthRow>
|
||||
<h2>{t('profile.projects')}</h2>
|
||||
{portfolioProjects.map(({ title, url, image, description, id }) => (
|
||||
<a
|
||||
href={url}
|
||||
rel='nofollow noopener noreferrer'
|
||||
target='_blank'
|
||||
className='portfolio-card'
|
||||
key={id}
|
||||
>
|
||||
{image && (
|
||||
<img
|
||||
alt=''
|
||||
className='portfolio-image'
|
||||
src={image}
|
||||
onError={({ currentTarget }) => {
|
||||
currentTarget.src =
|
||||
'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png';
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className='portfolio-card-description'>
|
||||
<div className='portfolio-card-text'>
|
||||
<h3>
|
||||
{title}
|
||||
<span className='sr-only'>, {t('aria.opens-new-window')}</span>
|
||||
</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
<Spacer size='m' />
|
||||
<hr />
|
||||
<section className='card'>
|
||||
<h2>{t('profile.projects')}</h2>
|
||||
<Spacer size='s' />
|
||||
{portfolioProjects.map(
|
||||
({ title, url, image, description, id }, index) => (
|
||||
<React.Fragment key={id}>
|
||||
<a
|
||||
href={url}
|
||||
rel='nofollow noopener noreferrer'
|
||||
target='_blank'
|
||||
className='portfolio-card'
|
||||
>
|
||||
{image && (
|
||||
<img
|
||||
alt=''
|
||||
className='portfolio-image'
|
||||
src={image}
|
||||
onError={({ currentTarget }) => {
|
||||
currentTarget.src =
|
||||
'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png';
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className='portfolio-card-description'>
|
||||
<div className='portfolio-card-text'>
|
||||
<h3>
|
||||
{title}
|
||||
<span className='sr-only'>
|
||||
, {t('aria.opens-new-window')}
|
||||
</span>
|
||||
</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{index < portfolioProjects.length - 1 && <hr />}
|
||||
</React.Fragment>
|
||||
)
|
||||
)}
|
||||
<Spacer size='m' />
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -113,29 +113,30 @@ function Stats({ points, calendar }: StatsProps): JSX.Element {
|
||||
|
||||
return (
|
||||
<FullWidthRow>
|
||||
<h2>{t('profile.stats')}</h2>
|
||||
<Spacer size='xs' />
|
||||
<dl className='stats'>
|
||||
<div>
|
||||
<dt>
|
||||
<b data-testid='current-streak'>{t('profile.current-streak')}</b>
|
||||
</dt>
|
||||
<dd>{currentStreak || 0}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>
|
||||
<b>{t('profile.total-points')}</b>
|
||||
</dt>
|
||||
<dd>{points}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>
|
||||
<b data-testid='longest-streak'>{t('profile.longest-streak')}</b>
|
||||
</dt>
|
||||
<dd>{longestStreak || 0}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<hr />
|
||||
<section className='card'>
|
||||
<h2>{t('profile.stats')}</h2>
|
||||
<Spacer size='s' />
|
||||
<dl className='stats'>
|
||||
<div>
|
||||
<dt>
|
||||
<b data-testid='current-streak'>{t('profile.current-streak')}</b>
|
||||
</dt>
|
||||
<dd>{currentStreak || 0}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>
|
||||
<b>{t('profile.total-points')}</b>
|
||||
</dt>
|
||||
<dd>{points}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>
|
||||
<b data-testid='longest-streak'>{t('profile.longest-streak')}</b>
|
||||
</dt>
|
||||
<dd>{longestStreak || 0}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -176,64 +176,66 @@ function TimelineInner({
|
||||
|
||||
return (
|
||||
<FullWidthRow>
|
||||
<h2>{t('profile.timeline')}</h2>
|
||||
<Spacer size='xs' />
|
||||
{completedMap.length === 0 ? (
|
||||
<p className='text-center'>
|
||||
{t('profile.none-completed')}
|
||||
<Link to='/learn'>{t('profile.get-started')}</Link>
|
||||
</p>
|
||||
) : (
|
||||
<Table condensed={true} striped={true}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('profile.challenge')}</th>
|
||||
<th>{t('settings.labels.solution')}</th>
|
||||
<th className='text-center'>{t('profile.completed')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedTimeline.slice(startIndex, endIndex).map(renderCompletion)}
|
||||
</tbody>
|
||||
</Table>
|
||||
)}
|
||||
{id && (
|
||||
<Modal onClose={closeSolution} open={solutionOpen} size='large'>
|
||||
<Modal.Header showCloseButton={true} closeButtonClassNames='close'>
|
||||
{`${username}'s Solution to ${
|
||||
idToNameMap.get(id)?.challengeTitle ?? ''
|
||||
}`}
|
||||
</Modal.Header>
|
||||
<Modal.Body alignment='left'>
|
||||
<SolutionViewer
|
||||
challengeFiles={challengeData.challengeFiles}
|
||||
solution={challengeData.solution ?? ''}
|
||||
/>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button onClick={closeSolution}>{t('buttons.close')}</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
)}
|
||||
{totalPages > 1 && (
|
||||
<TimelinePagination
|
||||
firstPage={firstPage}
|
||||
lastPage={lastPage}
|
||||
nextPage={nextPage}
|
||||
pageNo={pageNo}
|
||||
prevPage={prevPage}
|
||||
totalPages={totalPages}
|
||||
<section className='card'>
|
||||
<h2>{t('profile.timeline')}</h2>
|
||||
<Spacer size='s' />
|
||||
{completedMap.length === 0 ? (
|
||||
<p className='text-center'>
|
||||
{t('profile.none-completed')}
|
||||
<Link to='/learn'>{t('profile.get-started')}</Link>
|
||||
</p>
|
||||
) : (
|
||||
<Table condensed={true} striped={true}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{t('profile.challenge')}</th>
|
||||
<th>{t('settings.labels.solution')}</th>
|
||||
<th className='text-center'>{t('profile.completed')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedTimeline.slice(startIndex, endIndex).map(renderCompletion)}
|
||||
</tbody>
|
||||
</Table>
|
||||
)}
|
||||
{id && (
|
||||
<Modal onClose={closeSolution} open={solutionOpen} size='large'>
|
||||
<Modal.Header showCloseButton={true} closeButtonClassNames='close'>
|
||||
{`${username}'s Solution to ${
|
||||
idToNameMap.get(id)?.challengeTitle ?? ''
|
||||
}`}
|
||||
</Modal.Header>
|
||||
<Modal.Body alignment='left'>
|
||||
<SolutionViewer
|
||||
challengeFiles={challengeData.challengeFiles}
|
||||
solution={challengeData.solution ?? ''}
|
||||
/>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button onClick={closeSolution}>{t('buttons.close')}</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
)}
|
||||
{totalPages > 1 && (
|
||||
<TimelinePagination
|
||||
firstPage={firstPage}
|
||||
lastPage={lastPage}
|
||||
nextPage={nextPage}
|
||||
pageNo={pageNo}
|
||||
prevPage={prevPage}
|
||||
totalPages={totalPages}
|
||||
/>
|
||||
)}
|
||||
<ProjectPreviewModal
|
||||
challengeData={challengeData}
|
||||
closeText={t('buttons.close')}
|
||||
previewTitle={projectTitle}
|
||||
/>
|
||||
)}
|
||||
<ProjectPreviewModal
|
||||
challengeData={challengeData}
|
||||
closeText={t('buttons.close')}
|
||||
previewTitle={projectTitle}
|
||||
/>
|
||||
<ExamResultsModal
|
||||
projectTitle={projectTitle}
|
||||
examResults={completedChallenge?.examResults}
|
||||
/>
|
||||
<ExamResultsModal
|
||||
projectTitle={projectTitle}
|
||||
examResults={completedChallenge?.examResults}
|
||||
/>
|
||||
</section>
|
||||
</FullWidthRow>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,3 +3,16 @@
|
||||
height: fit-content;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
box-shadow: none;
|
||||
background: var(--gray00);
|
||||
border: 1px solid var(--gray15);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user