Add diagrams for "Putting markup into JavaScript" (#4390)

* Add diagrams for "Putting markup into JavaScript"

* Update alt tags

* Fix isLoggedIn

* Minor style updates for mobile

beta/public/images/docs/diagrams/writing_jsx_html.dark.svg

@@ -0,0 +1,10 @@
+<svg width="430" height="312" viewBox="0 0 430 312" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="31" y="33" width="368" height="277" rx="6" fill="#23252F"/>
+<rect x="51" y="53" width="328" height="238" rx="6" fill="#E7E9FB"/>
+<path d="M82.832 95.848L73.88 89.776V88.288L82.832 82.216V84.112L75.608 88.984V89.08L82.832 93.952V95.848ZM91.8946 97.288C91.1266 97.288 90.4306 97.152 89.8066 96.88C89.1986 96.608 88.6706 96.216 88.2226 95.704C87.7746 95.176 87.4306 94.536 87.1906 93.784C86.9506 93.032 86.8306 92.168 86.8306 91.192C86.8306 90.248 86.9746 89.4 87.2626 88.648C87.5666 87.88 87.9586 87.232 88.4386 86.704C88.9346 86.176 89.5026 85.768 90.1426 85.48C90.7826 85.192 91.4466 85.048 92.1346 85.048C92.8386 85.048 93.4626 85.184 94.0066 85.456C94.5666 85.712 95.1026 86.08 95.6146 86.56H95.6866L95.5906 84.4V79.912H97.5586V97H95.9266L95.7586 95.464H95.6866C95.2066 95.96 94.6306 96.392 93.9586 96.76C93.3026 97.112 92.6146 97.288 91.8946 97.288ZM92.3026 95.632C93.4546 95.632 94.5506 95.048 95.5906 93.88V88.072C95.0626 87.576 94.5426 87.224 94.0306 87.016C93.5346 86.808 93.0306 86.704 92.5186 86.704C92.0066 86.704 91.5266 86.816 91.0786 87.04C90.6466 87.248 90.2626 87.552 89.9266 87.952C89.6066 88.336 89.3506 88.8 89.1586 89.344C88.9666 89.888 88.8706 90.496 88.8706 91.168C88.8706 92.576 89.1666 93.672 89.7586 94.456C90.3666 95.24 91.2146 95.632 92.3026 95.632ZM107.365 97V86.944H101.941V85.336H109.333V97H107.365ZM108.133 82.888C107.685 82.888 107.309 82.752 107.005 82.48C106.701 82.192 106.549 81.816 106.549 81.352C106.549 80.888 106.701 80.52 107.005 80.248C107.309 79.96 107.685 79.816 108.133 79.816C108.581 79.816 108.957 79.96 109.261 80.248C109.565 80.52 109.717 80.888 109.717 81.352C109.717 81.816 109.565 82.192 109.261 82.48C108.957 82.752 108.581 82.888 108.133 82.888ZM120.316 97L115.396 85.336H117.388L120.076 91.96C120.316 92.552 120.54 93.136 120.748 93.712C120.972 94.272 121.188 94.832 121.396 95.392H121.492C121.7 94.832 121.9 94.272 122.092 93.712C122.3 93.136 122.524 92.552 122.764 91.96L125.452 85.336H127.348L122.524 97H120.316ZM131.131 95.848V93.952L138.355 89.08V88.984L131.131 84.112V82.216L140.083 88.288V89.776L131.131 95.848Z" fill="#4E5769"/>
+<path d="M126.004 137.848L117.052 131.776V130.288L126.004 124.216V126.112L118.78 130.984V131.08L126.004 135.952V137.848ZM130.795 143.92V127.336H132.427L132.595 128.824H132.667C133.211 128.312 133.835 127.888 134.539 127.552C135.259 127.216 135.979 127.048 136.699 127.048C137.483 127.048 138.171 127.192 138.763 127.48C139.371 127.752 139.875 128.152 140.275 128.68C140.691 129.192 141.003 129.816 141.211 130.552C141.419 131.272 141.523 132.088 141.523 133C141.523 133.992 141.379 134.88 141.091 135.664C140.803 136.432 140.411 137.088 139.915 137.632C139.435 138.176 138.875 138.592 138.235 138.88C137.595 139.152 136.923 139.288 136.219 139.288C135.675 139.288 135.083 139.16 134.443 138.904C133.819 138.632 133.251 138.256 132.739 137.776H132.667L132.763 139.984V143.92H130.795ZM135.883 137.632C136.939 137.632 137.803 137.224 138.475 136.408C139.147 135.592 139.483 134.456 139.483 133C139.483 132.36 139.419 131.776 139.291 131.248C139.163 130.72 138.963 130.272 138.691 129.904C138.435 129.52 138.099 129.224 137.683 129.016C137.267 128.808 136.771 128.704 136.195 128.704C135.683 128.704 135.131 128.848 134.539 129.136C133.963 129.408 133.371 129.848 132.763 130.456V136.264C133.323 136.76 133.883 137.112 134.443 137.32C135.003 137.528 135.483 137.632 135.883 137.632ZM145.521 137.848V135.952L152.745 131.08V130.984L145.521 126.112V124.216L154.473 130.288V131.776L145.521 137.848ZM169.176 137.848L160.224 131.776V130.288L169.176 124.216V126.112L161.952 130.984V131.08L169.176 135.952V137.848ZM174.11 142.84L181.982 121.96H183.758L175.886 142.84H174.11ZM188.357 143.92V127.336H189.989L190.157 128.824H190.229C190.773 128.312 191.397 127.888 192.101 127.552C192.821 127.216 193.541 127.048 194.261 127.048C195.045 127.048 195.733 127.192 196.325 127.48C196.933 127.752 197.437 128.152 197.837 128.68C198.253 129.192 198.565 129.816 198.773 130.552C198.981 131.272 199.085 132.088 199.085 133C199.085 133.992 198.941 134.88 198.653 135.664C198.365 136.432 197.973 137.088 197.477 137.632C196.997 138.176 196.437 138.592 195.797 138.88C195.157 139.152 194.485 139.288 193.781 139.288C193.237 139.288 192.645 139.16 192.005 138.904C191.381 138.632 190.813 138.256 190.301 137.776H190.229L190.325 139.984V143.92H188.357ZM193.445 137.632C194.501 137.632 195.365 137.224 196.037 136.408C196.709 135.592 197.045 134.456 197.045 133C197.045 132.36 196.981 131.776 196.853 131.248C196.725 130.72 196.525 130.272 196.253 129.904C195.997 129.52 195.661 129.224 195.245 129.016C194.829 128.808 194.333 128.704 193.757 128.704C193.245 128.704 192.693 128.848 192.101 129.136C191.525 129.408 190.933 129.848 190.325 130.456V136.264C190.885 136.76 191.445 137.112 192.005 137.32C192.565 137.528 193.045 137.632 193.445 137.632ZM203.084 137.848V135.952L210.308 131.08V130.984L203.084 126.112V124.216L212.036 130.288V131.776L203.084 137.848Z" fill="#4E5769"/>
+<path d="M126.004 179.848L117.052 173.776V172.288L126.004 166.216V168.112L118.78 172.984V173.08L126.004 177.952V179.848ZM134.371 181V170.944H131.035V169.456L134.371 169.336V168.352C134.371 166.928 134.747 165.784 135.499 164.92C136.267 164.056 137.459 163.624 139.075 163.624C140.227 163.624 141.347 163.848 142.435 164.296L141.979 165.784C141.499 165.56 141.051 165.416 140.635 165.352C140.235 165.272 139.779 165.232 139.267 165.232C138.211 165.232 137.451 165.504 136.987 166.048C136.539 166.576 136.315 167.32 136.315 168.28V169.336H141.211V170.944H136.315V181H134.371ZM150.153 181.288C149.385 181.288 148.649 181.152 147.945 180.88C147.257 180.608 146.649 180.216 146.121 179.704C145.593 179.176 145.169 178.536 144.849 177.784C144.545 177.016 144.393 176.152 144.393 175.192C144.393 174.216 144.545 173.352 144.849 172.6C145.169 171.832 145.593 171.184 146.121 170.656C146.649 170.128 147.257 169.728 147.945 169.456C148.649 169.184 149.385 169.048 150.153 169.048C150.921 169.048 151.649 169.184 152.337 169.456C153.041 169.728 153.657 170.128 154.185 170.656C154.713 171.184 155.129 171.832 155.433 172.6C155.753 173.352 155.913 174.216 155.913 175.192C155.913 176.152 155.753 177.016 155.433 177.784C155.129 178.536 154.713 179.176 154.185 179.704C153.657 180.216 153.041 180.608 152.337 180.88C151.649 181.152 150.921 181.288 150.153 181.288ZM150.153 179.656C150.713 179.656 151.217 179.552 151.665 179.344C152.129 179.12 152.521 178.816 152.841 178.432C153.177 178.032 153.433 177.56 153.609 177.016C153.785 176.472 153.873 175.864 153.873 175.192C153.873 174.52 153.785 173.912 153.609 173.368C153.433 172.808 153.177 172.328 152.841 171.928C152.521 171.528 152.129 171.224 151.665 171.016C151.217 170.792 150.713 170.68 150.153 170.68C149.593 170.68 149.081 170.792 148.617 171.016C148.169 171.224 147.777 171.528 147.441 171.928C147.121 172.328 146.873 172.808 146.697 173.368C146.521 173.912 146.433 174.52 146.433 175.192C146.433 175.864 146.521 176.472 146.697 177.016C146.873 177.56 147.121 178.032 147.441 178.432C147.777 178.816 148.169 179.12 148.617 179.344C149.081 179.552 149.593 179.656 150.153 179.656ZM160.848 181V169.336H162.48L162.648 172.096H162.72C163.328 171.152 164.072 170.408 164.952 169.864C165.848 169.32 166.84 169.048 167.928 169.048C168.36 169.048 168.76 169.088 169.128 169.168C169.496 169.232 169.864 169.352 170.232 169.528L169.776 171.232C169.36 171.088 169.008 170.984 168.72 170.92C168.448 170.856 168.08 170.824 167.616 170.824C166.736 170.824 165.888 171.08 165.072 171.592C164.272 172.088 163.52 172.944 162.816 174.16V181H160.848ZM173.126 181V169.336H174.71L174.878 170.872H174.926C175.23 170.328 175.582 169.888 175.982 169.552C176.382 169.216 176.918 169.048 177.59 169.048C178.726 169.048 179.462 169.72 179.798 171.064C180.134 170.44 180.502 169.952 180.902 169.6C181.318 169.232 181.862 169.048 182.534 169.048C183.35 169.048 183.982 169.36 184.43 169.984C184.894 170.592 185.126 171.48 185.126 172.648V181H183.158V172.792C183.158 171.432 182.742 170.752 181.91 170.752C181.494 170.752 181.158 170.904 180.902 171.208C180.646 171.496 180.358 171.944 180.038 172.552V181H178.214V172.792C178.214 172.12 178.118 171.616 177.926 171.28C177.75 170.928 177.446 170.752 177.014 170.752C176.598 170.752 176.246 170.904 175.958 171.208C175.67 171.496 175.382 171.944 175.094 172.552V181H173.126ZM188.693 179.848V177.952L195.917 173.08V172.984L188.693 168.112V166.216L197.645 172.288V173.776L188.693 179.848Z" fill="#4E5769"/>
+<path d="M126.004 221.848L117.052 215.776V214.288L126.004 208.216V210.112L118.78 214.984V215.08L126.004 219.952V221.848ZM130.939 226.84L138.811 205.96H140.587L132.715 226.84H130.939ZM148.761 223V212.944H145.425V211.456L148.761 211.336V210.352C148.761 208.928 149.137 207.784 149.889 206.92C150.657 206.056 151.849 205.624 153.465 205.624C154.617 205.624 155.737 205.848 156.825 206.296L156.369 207.784C155.889 207.56 155.441 207.416 155.025 207.352C154.625 207.272 154.169 207.232 153.657 207.232C152.601 207.232 151.841 207.504 151.377 208.048C150.929 208.576 150.705 209.32 150.705 210.28V211.336H155.601V212.944H150.705V223H148.761ZM164.544 223.288C163.776 223.288 163.04 223.152 162.336 222.88C161.648 222.608 161.04 222.216 160.512 221.704C159.984 221.176 159.56 220.536 159.24 219.784C158.936 219.016 158.784 218.152 158.784 217.192C158.784 216.216 158.936 215.352 159.24 214.6C159.56 213.832 159.984 213.184 160.512 212.656C161.04 212.128 161.648 211.728 162.336 211.456C163.04 211.184 163.776 211.048 164.544 211.048C165.312 211.048 166.04 211.184 166.728 211.456C167.432 211.728 168.048 212.128 168.576 212.656C169.104 213.184 169.52 213.832 169.824 214.6C170.144 215.352 170.304 216.216 170.304 217.192C170.304 218.152 170.144 219.016 169.824 219.784C169.52 220.536 169.104 221.176 168.576 221.704C168.048 222.216 167.432 222.608 166.728 222.88C166.04 223.152 165.312 223.288 164.544 223.288ZM164.544 221.656C165.104 221.656 165.608 221.552 166.056 221.344C166.52 221.12 166.912 220.816 167.232 220.432C167.568 220.032 167.824 219.56 168 219.016C168.176 218.472 168.264 217.864 168.264 217.192C168.264 216.52 168.176 215.912 168 215.368C167.824 214.808 167.568 214.328 167.232 213.928C166.912 213.528 166.52 213.224 166.056 213.016C165.608 212.792 165.104 212.68 164.544 212.68C163.984 212.68 163.472 212.792 163.008 213.016C162.56 213.224 162.168 213.528 161.832 213.928C161.512 214.328 161.264 214.808 161.088 215.368C160.912 215.912 160.824 216.52 160.824 217.192C160.824 217.864 160.912 218.472 161.088 219.016C161.264 219.56 161.512 220.032 161.832 220.432C162.168 220.816 162.56 221.12 163.008 221.344C163.472 221.552 163.984 221.656 164.544 221.656ZM175.238 223V211.336H176.87L177.038 214.096H177.11C177.718 213.152 178.462 212.408 179.342 211.864C180.238 211.32 181.23 211.048 182.318 211.048C182.75 211.048 183.15 211.088 183.518 211.168C183.886 211.232 184.254 211.352 184.622 211.528L184.166 213.232C183.75 213.088 183.398 212.984 183.11 212.92C182.838 212.856 182.47 212.824 182.006 212.824C181.126 212.824 180.278 213.08 179.462 213.592C178.662 214.088 177.91 214.944 177.206 216.16V223H175.238ZM187.517 223V211.336H189.101L189.269 212.872H189.317C189.621 212.328 189.973 211.888 190.373 211.552C190.773 211.216 191.309 211.048 191.981 211.048C193.117 211.048 193.853 211.72 194.189 213.064C194.525 212.44 194.893 211.952 195.293 211.6C195.709 211.232 196.253 211.048 196.925 211.048C197.741 211.048 198.373 211.36 198.821 211.984C199.285 212.592 199.517 213.48 199.517 214.648V223H197.549V214.792C197.549 213.432 197.133 212.752 196.301 212.752C195.885 212.752 195.549 212.904 195.293 213.208C195.037 213.496 194.749 213.944 194.429 214.552V223H192.605V214.792C192.605 214.12 192.509 213.616 192.317 213.28C192.141 212.928 191.837 212.752 191.405 212.752C190.989 212.752 190.637 212.904 190.349 213.208C190.061 213.496 189.773 213.944 189.485 214.552V223H187.517ZM203.084 221.848V219.952L210.308 215.08V214.984L203.084 210.112V208.216L212.036 214.288V215.776L203.084 221.848Z" fill="#4E5769"/>
+<path d="M82.832 263.848L73.88 257.776V256.288L82.832 250.216V252.112L75.608 256.984V257.08L82.832 261.952V263.848ZM87.7666 268.84L95.6386 247.96H97.4146L89.5426 268.84H87.7666ZM106.285 265.288C105.517 265.288 104.821 265.152 104.197 264.88C103.589 264.608 103.061 264.216 102.613 263.704C102.165 263.176 101.821 262.536 101.581 261.784C101.341 261.032 101.221 260.168 101.221 259.192C101.221 258.248 101.365 257.4 101.653 256.648C101.957 255.88 102.349 255.232 102.829 254.704C103.325 254.176 103.893 253.768 104.533 253.48C105.173 253.192 105.837 253.048 106.525 253.048C107.229 253.048 107.853 253.184 108.397 253.456C108.957 253.712 109.493 254.08 110.005 254.56H110.077L109.981 252.4V247.912H111.949V265H110.317L110.149 263.464H110.077C109.597 263.96 109.021 264.392 108.349 264.76C107.693 265.112 107.005 265.288 106.285 265.288ZM106.693 263.632C107.845 263.632 108.941 263.048 109.981 261.88V256.072C109.453 255.576 108.933 255.224 108.421 255.016C107.925 254.808 107.421 254.704 106.909 254.704C106.397 254.704 105.917 254.816 105.469 255.04C105.037 255.248 104.653 255.552 104.317 255.952C103.997 256.336 103.741 256.8 103.549 257.344C103.357 257.888 103.261 258.496 103.261 259.168C103.261 260.576 103.557 261.672 104.149 262.456C104.757 263.24 105.605 263.632 106.693 263.632ZM121.756 265V254.944H116.332V253.336H123.724V265H121.756ZM122.524 250.888C122.076 250.888 121.7 250.752 121.396 250.48C121.092 250.192 120.94 249.816 120.94 249.352C120.94 248.888 121.092 248.52 121.396 248.248C121.7 247.96 122.076 247.816 122.524 247.816C122.972 247.816 123.348 247.96 123.652 248.248C123.956 248.52 124.108 248.888 124.108 249.352C124.108 249.816 123.956 250.192 123.652 250.48C123.348 250.752 122.972 250.888 122.524 250.888ZM134.707 265L129.787 253.336H131.779L134.467 259.96C134.707 260.552 134.931 261.136 135.139 261.712C135.363 262.272 135.579 262.832 135.787 263.392H135.883C136.091 262.832 136.291 262.272 136.483 261.712C136.691 261.136 136.915 260.552 137.155 259.96L139.843 253.336H141.739L136.915 265H134.707ZM145.521 263.848V261.952L152.745 257.08V256.984L145.521 252.112V250.216L154.473 256.288V257.776L145.521 263.848Z" fill="#4E5769"/>
+<rect x="31" y="33" width="368" height="277" rx="6" stroke="white" stroke-linejoin="bevel"/>
+</svg>

beta/public/images/docs/diagrams/writing_jsx_html.svg

@@ -0,0 +1,10 @@
+<svg width="430" height="312" viewBox="0 0 430 312" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="31" y="33" width="368" height="277" rx="6" fill="white"/>
+<rect x="51" y="53" width="328" height="238" rx="6" fill="#E7E9FB"/>
+<path d="M82.832 95.848L73.88 89.776V88.288L82.832 82.216V84.112L75.608 88.984V89.08L82.832 93.952V95.848ZM91.8946 97.288C91.1266 97.288 90.4306 97.152 89.8066 96.88C89.1986 96.608 88.6706 96.216 88.2226 95.704C87.7746 95.176 87.4306 94.536 87.1906 93.784C86.9506 93.032 86.8306 92.168 86.8306 91.192C86.8306 90.248 86.9746 89.4 87.2626 88.648C87.5666 87.88 87.9586 87.232 88.4386 86.704C88.9346 86.176 89.5026 85.768 90.1426 85.48C90.7826 85.192 91.4466 85.048 92.1346 85.048C92.8386 85.048 93.4626 85.184 94.0066 85.456C94.5666 85.712 95.1026 86.08 95.6146 86.56H95.6866L95.5906 84.4V79.912H97.5586V97H95.9266L95.7586 95.464H95.6866C95.2066 95.96 94.6306 96.392 93.9586 96.76C93.3026 97.112 92.6146 97.288 91.8946 97.288ZM92.3026 95.632C93.4546 95.632 94.5506 95.048 95.5906 93.88V88.072C95.0626 87.576 94.5426 87.224 94.0306 87.016C93.5346 86.808 93.0306 86.704 92.5186 86.704C92.0066 86.704 91.5266 86.816 91.0786 87.04C90.6466 87.248 90.2626 87.552 89.9266 87.952C89.6066 88.336 89.3506 88.8 89.1586 89.344C88.9666 89.888 88.8706 90.496 88.8706 91.168C88.8706 92.576 89.1666 93.672 89.7586 94.456C90.3666 95.24 91.2146 95.632 92.3026 95.632ZM107.365 97V86.944H101.941V85.336H109.333V97H107.365ZM108.133 82.888C107.685 82.888 107.309 82.752 107.005 82.48C106.701 82.192 106.549 81.816 106.549 81.352C106.549 80.888 106.701 80.52 107.005 80.248C107.309 79.96 107.685 79.816 108.133 79.816C108.581 79.816 108.957 79.96 109.261 80.248C109.565 80.52 109.717 80.888 109.717 81.352C109.717 81.816 109.565 82.192 109.261 82.48C108.957 82.752 108.581 82.888 108.133 82.888ZM120.316 97L115.396 85.336H117.388L120.076 91.96C120.316 92.552 120.54 93.136 120.748 93.712C120.972 94.272 121.188 94.832 121.396 95.392H121.492C121.7 94.832 121.9 94.272 122.092 93.712C122.3 93.136 122.524 92.552 122.764 91.96L125.452 85.336H127.348L122.524 97H120.316ZM131.131 95.848V93.952L138.355 89.08V88.984L131.131 84.112V82.216L140.083 88.288V89.776L131.131 95.848Z" fill="#4E5769"/>
+<path d="M126.004 137.848L117.052 131.776V130.288L126.004 124.216V126.112L118.78 130.984V131.08L126.004 135.952V137.848ZM130.795 143.92V127.336H132.427L132.595 128.824H132.667C133.211 128.312 133.835 127.888 134.539 127.552C135.259 127.216 135.979 127.048 136.699 127.048C137.483 127.048 138.171 127.192 138.763 127.48C139.371 127.752 139.875 128.152 140.275 128.68C140.691 129.192 141.003 129.816 141.211 130.552C141.419 131.272 141.523 132.088 141.523 133C141.523 133.992 141.379 134.88 141.091 135.664C140.803 136.432 140.411 137.088 139.915 137.632C139.435 138.176 138.875 138.592 138.235 138.88C137.595 139.152 136.923 139.288 136.219 139.288C135.675 139.288 135.083 139.16 134.443 138.904C133.819 138.632 133.251 138.256 132.739 137.776H132.667L132.763 139.984V143.92H130.795ZM135.883 137.632C136.939 137.632 137.803 137.224 138.475 136.408C139.147 135.592 139.483 134.456 139.483 133C139.483 132.36 139.419 131.776 139.291 131.248C139.163 130.72 138.963 130.272 138.691 129.904C138.435 129.52 138.099 129.224 137.683 129.016C137.267 128.808 136.771 128.704 136.195 128.704C135.683 128.704 135.131 128.848 134.539 129.136C133.963 129.408 133.371 129.848 132.763 130.456V136.264C133.323 136.76 133.883 137.112 134.443 137.32C135.003 137.528 135.483 137.632 135.883 137.632ZM145.521 137.848V135.952L152.745 131.08V130.984L145.521 126.112V124.216L154.473 130.288V131.776L145.521 137.848ZM169.176 137.848L160.224 131.776V130.288L169.176 124.216V126.112L161.952 130.984V131.08L169.176 135.952V137.848ZM174.11 142.84L181.982 121.96H183.758L175.886 142.84H174.11ZM188.357 143.92V127.336H189.989L190.157 128.824H190.229C190.773 128.312 191.397 127.888 192.101 127.552C192.821 127.216 193.541 127.048 194.261 127.048C195.045 127.048 195.733 127.192 196.325 127.48C196.933 127.752 197.437 128.152 197.837 128.68C198.253 129.192 198.565 129.816 198.773 130.552C198.981 131.272 199.085 132.088 199.085 133C199.085 133.992 198.941 134.88 198.653 135.664C198.365 136.432 197.973 137.088 197.477 137.632C196.997 138.176 196.437 138.592 195.797 138.88C195.157 139.152 194.485 139.288 193.781 139.288C193.237 139.288 192.645 139.16 192.005 138.904C191.381 138.632 190.813 138.256 190.301 137.776H190.229L190.325 139.984V143.92H188.357ZM193.445 137.632C194.501 137.632 195.365 137.224 196.037 136.408C196.709 135.592 197.045 134.456 197.045 133C197.045 132.36 196.981 131.776 196.853 131.248C196.725 130.72 196.525 130.272 196.253 129.904C195.997 129.52 195.661 129.224 195.245 129.016C194.829 128.808 194.333 128.704 193.757 128.704C193.245 128.704 192.693 128.848 192.101 129.136C191.525 129.408 190.933 129.848 190.325 130.456V136.264C190.885 136.76 191.445 137.112 192.005 137.32C192.565 137.528 193.045 137.632 193.445 137.632ZM203.084 137.848V135.952L210.308 131.08V130.984L203.084 126.112V124.216L212.036 130.288V131.776L203.084 137.848Z" fill="#4E5769"/>
+<path d="M126.004 179.848L117.052 173.776V172.288L126.004 166.216V168.112L118.78 172.984V173.08L126.004 177.952V179.848ZM134.371 181V170.944H131.035V169.456L134.371 169.336V168.352C134.371 166.928 134.747 165.784 135.499 164.92C136.267 164.056 137.459 163.624 139.075 163.624C140.227 163.624 141.347 163.848 142.435 164.296L141.979 165.784C141.499 165.56 141.051 165.416 140.635 165.352C140.235 165.272 139.779 165.232 139.267 165.232C138.211 165.232 137.451 165.504 136.987 166.048C136.539 166.576 136.315 167.32 136.315 168.28V169.336H141.211V170.944H136.315V181H134.371ZM150.153 181.288C149.385 181.288 148.649 181.152 147.945 180.88C147.257 180.608 146.649 180.216 146.121 179.704C145.593 179.176 145.169 178.536 144.849 177.784C144.545 177.016 144.393 176.152 144.393 175.192C144.393 174.216 144.545 173.352 144.849 172.6C145.169 171.832 145.593 171.184 146.121 170.656C146.649 170.128 147.257 169.728 147.945 169.456C148.649 169.184 149.385 169.048 150.153 169.048C150.921 169.048 151.649 169.184 152.337 169.456C153.041 169.728 153.657 170.128 154.185 170.656C154.713 171.184 155.129 171.832 155.433 172.6C155.753 173.352 155.913 174.216 155.913 175.192C155.913 176.152 155.753 177.016 155.433 177.784C155.129 178.536 154.713 179.176 154.185 179.704C153.657 180.216 153.041 180.608 152.337 180.88C151.649 181.152 150.921 181.288 150.153 181.288ZM150.153 179.656C150.713 179.656 151.217 179.552 151.665 179.344C152.129 179.12 152.521 178.816 152.841 178.432C153.177 178.032 153.433 177.56 153.609 177.016C153.785 176.472 153.873 175.864 153.873 175.192C153.873 174.52 153.785 173.912 153.609 173.368C153.433 172.808 153.177 172.328 152.841 171.928C152.521 171.528 152.129 171.224 151.665 171.016C151.217 170.792 150.713 170.68 150.153 170.68C149.593 170.68 149.081 170.792 148.617 171.016C148.169 171.224 147.777 171.528 147.441 171.928C147.121 172.328 146.873 172.808 146.697 173.368C146.521 173.912 146.433 174.52 146.433 175.192C146.433 175.864 146.521 176.472 146.697 177.016C146.873 177.56 147.121 178.032 147.441 178.432C147.777 178.816 148.169 179.12 148.617 179.344C149.081 179.552 149.593 179.656 150.153 179.656ZM160.848 181V169.336H162.48L162.648 172.096H162.72C163.328 171.152 164.072 170.408 164.952 169.864C165.848 169.32 166.84 169.048 167.928 169.048C168.36 169.048 168.76 169.088 169.128 169.168C169.496 169.232 169.864 169.352 170.232 169.528L169.776 171.232C169.36 171.088 169.008 170.984 168.72 170.92C168.448 170.856 168.08 170.824 167.616 170.824C166.736 170.824 165.888 171.08 165.072 171.592C164.272 172.088 163.52 172.944 162.816 174.16V181H160.848ZM173.126 181V169.336H174.71L174.878 170.872H174.926C175.23 170.328 175.582 169.888 175.982 169.552C176.382 169.216 176.918 169.048 177.59 169.048C178.726 169.048 179.462 169.72 179.798 171.064C180.134 170.44 180.502 169.952 180.902 169.6C181.318 169.232 181.862 169.048 182.534 169.048C183.35 169.048 183.982 169.36 184.43 169.984C184.894 170.592 185.126 171.48 185.126 172.648V181H183.158V172.792C183.158 171.432 182.742 170.752 181.91 170.752C181.494 170.752 181.158 170.904 180.902 171.208C180.646 171.496 180.358 171.944 180.038 172.552V181H178.214V172.792C178.214 172.12 178.118 171.616 177.926 171.28C177.75 170.928 177.446 170.752 177.014 170.752C176.598 170.752 176.246 170.904 175.958 171.208C175.67 171.496 175.382 171.944 175.094 172.552V181H173.126ZM188.693 179.848V177.952L195.917 173.08V172.984L188.693 168.112V166.216L197.645 172.288V173.776L188.693 179.848Z" fill="#4E5769"/>
+<path d="M126.004 221.848L117.052 215.776V214.288L126.004 208.216V210.112L118.78 214.984V215.08L126.004 219.952V221.848ZM130.939 226.84L138.811 205.96H140.587L132.715 226.84H130.939ZM148.761 223V212.944H145.425V211.456L148.761 211.336V210.352C148.761 208.928 149.137 207.784 149.889 206.92C150.657 206.056 151.849 205.624 153.465 205.624C154.617 205.624 155.737 205.848 156.825 206.296L156.369 207.784C155.889 207.56 155.441 207.416 155.025 207.352C154.625 207.272 154.169 207.232 153.657 207.232C152.601 207.232 151.841 207.504 151.377 208.048C150.929 208.576 150.705 209.32 150.705 210.28V211.336H155.601V212.944H150.705V223H148.761ZM164.544 223.288C163.776 223.288 163.04 223.152 162.336 222.88C161.648 222.608 161.04 222.216 160.512 221.704C159.984 221.176 159.56 220.536 159.24 219.784C158.936 219.016 158.784 218.152 158.784 217.192C158.784 216.216 158.936 215.352 159.24 214.6C159.56 213.832 159.984 213.184 160.512 212.656C161.04 212.128 161.648 211.728 162.336 211.456C163.04 211.184 163.776 211.048 164.544 211.048C165.312 211.048 166.04 211.184 166.728 211.456C167.432 211.728 168.048 212.128 168.576 212.656C169.104 213.184 169.52 213.832 169.824 214.6C170.144 215.352 170.304 216.216 170.304 217.192C170.304 218.152 170.144 219.016 169.824 219.784C169.52 220.536 169.104 221.176 168.576 221.704C168.048 222.216 167.432 222.608 166.728 222.88C166.04 223.152 165.312 223.288 164.544 223.288ZM164.544 221.656C165.104 221.656 165.608 221.552 166.056 221.344C166.52 221.12 166.912 220.816 167.232 220.432C167.568 220.032 167.824 219.56 168 219.016C168.176 218.472 168.264 217.864 168.264 217.192C168.264 216.52 168.176 215.912 168 215.368C167.824 214.808 167.568 214.328 167.232 213.928C166.912 213.528 166.52 213.224 166.056 213.016C165.608 212.792 165.104 212.68 164.544 212.68C163.984 212.68 163.472 212.792 163.008 213.016C162.56 213.224 162.168 213.528 161.832 213.928C161.512 214.328 161.264 214.808 161.088 215.368C160.912 215.912 160.824 216.52 160.824 217.192C160.824 217.864 160.912 218.472 161.088 219.016C161.264 219.56 161.512 220.032 161.832 220.432C162.168 220.816 162.56 221.12 163.008 221.344C163.472 221.552 163.984 221.656 164.544 221.656ZM175.238 223V211.336H176.87L177.038 214.096H177.11C177.718 213.152 178.462 212.408 179.342 211.864C180.238 211.32 181.23 211.048 182.318 211.048C182.75 211.048 183.15 211.088 183.518 211.168C183.886 211.232 184.254 211.352 184.622 211.528L184.166 213.232C183.75 213.088 183.398 212.984 183.11 212.92C182.838 212.856 182.47 212.824 182.006 212.824C181.126 212.824 180.278 213.08 179.462 213.592C178.662 214.088 177.91 214.944 177.206 216.16V223H175.238ZM187.517 223V211.336H189.101L189.269 212.872H189.317C189.621 212.328 189.973 211.888 190.373 211.552C190.773 211.216 191.309 211.048 191.981 211.048C193.117 211.048 193.853 211.72 194.189 213.064C194.525 212.44 194.893 211.952 195.293 211.6C195.709 211.232 196.253 211.048 196.925 211.048C197.741 211.048 198.373 211.36 198.821 211.984C199.285 212.592 199.517 213.48 199.517 214.648V223H197.549V214.792C197.549 213.432 197.133 212.752 196.301 212.752C195.885 212.752 195.549 212.904 195.293 213.208C195.037 213.496 194.749 213.944 194.429 214.552V223H192.605V214.792C192.605 214.12 192.509 213.616 192.317 213.28C192.141 212.928 191.837 212.752 191.405 212.752C190.989 212.752 190.637 212.904 190.349 213.208C190.061 213.496 189.773 213.944 189.485 214.552V223H187.517ZM203.084 221.848V219.952L210.308 215.08V214.984L203.084 210.112V208.216L212.036 214.288V215.776L203.084 221.848Z" fill="#4E5769"/>
+<path d="M82.832 263.848L73.88 257.776V256.288L82.832 250.216V252.112L75.608 256.984V257.08L82.832 261.952V263.848ZM87.7666 268.84L95.6386 247.96H97.4146L89.5426 268.84H87.7666ZM106.285 265.288C105.517 265.288 104.821 265.152 104.197 264.88C103.589 264.608 103.061 264.216 102.613 263.704C102.165 263.176 101.821 262.536 101.581 261.784C101.341 261.032 101.221 260.168 101.221 259.192C101.221 258.248 101.365 257.4 101.653 256.648C101.957 255.88 102.349 255.232 102.829 254.704C103.325 254.176 103.893 253.768 104.533 253.48C105.173 253.192 105.837 253.048 106.525 253.048C107.229 253.048 107.853 253.184 108.397 253.456C108.957 253.712 109.493 254.08 110.005 254.56H110.077L109.981 252.4V247.912H111.949V265H110.317L110.149 263.464H110.077C109.597 263.96 109.021 264.392 108.349 264.76C107.693 265.112 107.005 265.288 106.285 265.288ZM106.693 263.632C107.845 263.632 108.941 263.048 109.981 261.88V256.072C109.453 255.576 108.933 255.224 108.421 255.016C107.925 254.808 107.421 254.704 106.909 254.704C106.397 254.704 105.917 254.816 105.469 255.04C105.037 255.248 104.653 255.552 104.317 255.952C103.997 256.336 103.741 256.8 103.549 257.344C103.357 257.888 103.261 258.496 103.261 259.168C103.261 260.576 103.557 261.672 104.149 262.456C104.757 263.24 105.605 263.632 106.693 263.632ZM121.756 265V254.944H116.332V253.336H123.724V265H121.756ZM122.524 250.888C122.076 250.888 121.7 250.752 121.396 250.48C121.092 250.192 120.94 249.816 120.94 249.352C120.94 248.888 121.092 248.52 121.396 248.248C121.7 247.96 122.076 247.816 122.524 247.816C122.972 247.816 123.348 247.96 123.652 248.248C123.956 248.52 124.108 248.888 124.108 249.352C124.108 249.816 123.956 250.192 123.652 250.48C123.348 250.752 122.972 250.888 122.524 250.888ZM134.707 265L129.787 253.336H131.779L134.467 259.96C134.707 260.552 134.931 261.136 135.139 261.712C135.363 262.272 135.579 262.832 135.787 263.392H135.883C136.091 262.832 136.291 262.272 136.483 261.712C136.691 261.136 136.915 260.552 137.155 259.96L139.843 253.336H141.739L136.915 265H134.707ZM145.521 263.848V261.952L152.745 257.08V256.984L145.521 252.112V250.216L154.473 256.288V257.776L145.521 263.848Z" fill="#4E5769"/>
+<rect x="31" y="33" width="368" height="277" rx="6" stroke="#2C749E" stroke-linejoin="bevel"/>
+</svg>

beta/src/components/MDX/Diagram.tsx

@@ -15,7 +15,7 @@ interface DiagramProps {
 
 export function Diagram({name, alt, height, width, children}: DiagramProps) {
   return (
-    <figure className="flex flex-col px-0 py-5 sm:p-10">
+    <figure className="flex flex-col px-0 p-0 sm:p-10">
       <div className="dark-image">
         <Image
           src={`/images/docs/diagrams/${name}.dark.svg`}
@@ -32,7 +32,7 @@ export function Diagram({name, alt, height, width, children}: DiagramProps) {
           width={width}
         />
       </div>
-      <figcaption className="p-1 sm:p-4 mt-4 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-6">
+      <figcaption className="p-1 sm:p-2 mt-0 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-none sm:leading-3">
         {children}
       </figcaption>
     </figure>

beta/src/components/MDX/DiagramGroup.tsx

@@ -11,7 +11,7 @@ interface DiagramGroupProps {
 
 export function DiagramGroup({children}: DiagramGroupProps) {
   return (
-    <div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 space-y-10 sm:space-y-0">
+    <div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 sm:space-y-0 justify-center items-center">
       {children}
     </div>
   );

beta/src/pages/learn/writing-markup-with-jsx.md

@@ -20,11 +20,39 @@ JSX is a syntax extension for JavaScript that lets you write HTML-like markup in
 
 The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
 
-![HTML and JavaScript living in separate files](/images/docs/illustrations/i_html_js.svg)
+<DiagramGroup>
+
+<Diagram name="writing_jsx_html" height={237} width={325} alt="HTML markup with purple background and a div with two child tags: p and form. ">
+
+HTML
+
+</Diagram>
+
+<Diagram name="writing_jsx_js" height={237} width={325} alt="Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick.">
+
+JavaScript
+
+</Diagram>
+
+</DiagramGroup>
 
 But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components!**
 
-![JavaScript functions sprinkled with markup](/images/docs/illustrations/i_jsx.svg)
+<DiagramGroup>
+
+<Diagram name="writing_jsx_sidebar" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram.">
+
+Sidebar.js
+
+</Diagram>
+
+<Diagram name="writing_jsx_form" height={330} width={325} alt="React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop.">
+
+Form.js
+
+</Diagram>
+
+</DiagramGroup>
 
 Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.