Instead of importing links here, we should make the <Link /> component more flexible. Right now, the component is like a function that always produces the same output. We should aim for a function that takes in some data, and produces a result that depends on the data given to it.
So in a nutshell, we should make the <Link /> component take in some props (specifically the links we want it to render) and render these instead.
Take a look at the <HelloWorld />component that I created recently. Take a look at how I pass in props to it, and then render those. (You wont be needing useState and your component would be way simpler)
Feel free to hmu if there's anything that doesn't make sense, and I can walk you through it on a call.
Instead of importing links here, we should make the `<Link />` component more flexible. Right now, the component is like a function that always produces the same output. We should aim for a function that takes in some data, and produces a result that depends on the data given to it.
So in a nutshell, we should make the `<Link />` component take in some props (specifically the links we want it to render) and render these instead.
Take a look at the `<HelloWorld />` [component](https://git.uwaterloo.ca/csc/linktree/-/blob/main/frontend/pages/hello-world.tsx) that I created recently. Take a look at how I pass in props to it, and then render those. (You wont be needing `useState` and your component would be way simpler)
Feel free to hmu if there's anything that doesn't make sense, and I can walk you through it on a call.
Since we are using a ul tag, we should also have li tags. (ul = Unordered List, li = List item)
We should be using semantic elements where we can, as these are very useful for visually impaired people. Visually impaired people mostly use screen readers to view webpages. These screen readers announce whatever is on the webpage, and if we don't use li, the screen reader cannot tell that each a tag is a separate list item, and it would announce all the links at once.
If we do add li tags, then the screen reader knows that each tag is an element of the list, and so the user can easily navigate the page using arrow keys.
Since we are using a `ul` tag, we should also have `li` tags. (ul = Unordered List, li = List item)
We should be using semantic elements where we can, as these are very useful for visually impaired people. Visually impaired people mostly use screen readers to view webpages. These screen readers announce whatever is on the webpage, and if we don't use `li`, the screen reader cannot tell that each `a` tag is a separate list item, and it would announce all the links at once.
If we do add `li` tags, then the screen reader knows that each tag is an element of the list, and so the user can easily navigate the page using arrow keys.
Here's an intro to web a11y: https://www.w3schools.com/html/html_accessibility.asp
More in depth info on mdn: https://developer.mozilla.org/en-US/docs/Web/Accessibility
From line 22-28 (because gitlab doesn't have multi-line comments AHHHH WTF)
Put this in _app.tsx because we'll need the title + fonts included in every page, _app.tsx will apply this to every page for us
It'll prob look something like this
From line 22-28 (because gitlab doesn't have multi-line comments AHHHH WTF)
- Put this in `_app.tsx` because we'll need the title + fonts included in every page, `_app.tsx` will apply this to every page for us
- It'll prob look something like this
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_23_20)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_2_3)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_10_9)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#9f86ceb115f7fe9d0fb9f91b3fa4b807020cf5ce_1_0)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#1a6b71374dc7231e0ce4cb72133a1320e5030eee_4_4)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#37083060967a471c011a16651e22bdc2ade41759_23_22)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#37083060967a471c011a16651e22bdc2ade41759_17_17)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_22_20)
changed this line in [version 2 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b#fb79b93671dfc0706360a8fe2e984c0a8665cc34_30_20)
added 4 commits
<ul><li>22c9cd43 - added li and moved head tag</li><li>4e885148 - fixed position at top</li><li>d350ef34 - code review changes</li><li>75fa10e6 - passed in data through props</li></ul>
[Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51597&start_sha=7c8a856ad8337b7032c12e036523ee91577bf08b)
added 1 commit
<ul><li>2f7278b5 - passed data through props</li></ul>
[Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51598&start_sha=75fa10e6ce42419a868ccfc8da46be3a7460a91d)
changed this line in [version 5 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51648&start_sha=2f7278b5e3706185c4cef279835de1f60dee1db6#1a6b71374dc7231e0ce4cb72133a1320e5030eee_9_9)
changed this line in [version 6 of the diff](/csc/linktree/-/merge_requests/11/diffs?diff_id=51651&start_sha=45d66f5ad87b47627df6b29af9c69dd1fde93d7e#fb79b93671dfc0706360a8fe2e984c0a8665cc34_28_0)
added 18 commits
<ul><li>2b66d287...08fc9eb3 - 7 commits from branch <code>main</code></li><li>4317e153 - implemented links</li><li>42cc2fbb - changed to LF</li><li>5f49cd71 - made responsive</li><li>61da9fbb - added li and moved head tag</li><li>d75d131f - fixed position at top</li><li>aaa6f06b - code review changes</li><li>41916147 - passed in data through props</li><li>e743c712 - passed data through props</li><li>651f3a4d - changed website title</li><li>6ebb0548 - renaming fixes</li><li>9451e65f - destructuring</li></ul>
[Compare with previous version](/csc/linktree/-/merge_requests/11/diffs?diff_id=51653&start_sha=2b66d287f20803bcbe77eaf48a6164304beca5cd)
This should go in
pages/index. The<Link />component should only care about "what" it's rendering, and not "where" it is rendering.I'm assuming we're not using the dog api anymore haha 🐶
Instead of importing links here, we should make the
<Link />component more flexible. Right now, the component is like a function that always produces the same output. We should aim for a function that takes in some data, and produces a result that depends on the data given to it.So in a nutshell, we should make the
<Link />component take in some props (specifically the links we want it to render) and render these instead.Take a look at the
<HelloWorld />component that I created recently. Take a look at how I pass in props to it, and then render those. (You wont be needinguseStateand your component would be way simpler)Feel free to hmu if there's anything that doesn't make sense, and I can walk you through it on a call.
remove the comments haha 🙈
Since we are using a
ultag, we should also havelitags. (ul = Unordered List, li = List item)We should be using semantic elements where we can, as these are very useful for visually impaired people. Visually impaired people mostly use screen readers to view webpages. These screen readers announce whatever is on the webpage, and if we don't use
li, the screen reader cannot tell that eachatag is a separate list item, and it would announce all the links at once.If we do add
litags, then the screen reader knows that each tag is an element of the list, and so the user can easily navigate the page using arrow keys.Here's an intro to web a11y: https://www.w3schools.com/html/html_accessibility.asp
More in depth info on mdn: https://developer.mozilla.org/en-US/docs/Web/Accessibility
Great job on the PR! 🎉
changed title from {-Feat/links-} to {+Add the Link component+}
LOL
Let's delete this file, we don't need craco
Remove this line, tailwind has been imported in
globals.cssno need to import it again hereWe won't be needing this either, removing this import doesn't break anything locally, so lets get rid of it
Same with this, yeet craco outta here
From line 22-28 (because gitlab doesn't have multi-line comments AHHHH WTF)
_app.tsxbecause we'll need the title + fonts included in every page,_app.tsxwill apply this to every page for usReally good job on the styling here 💯
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
changed this line in version 2 of the diff
added 4 commits
Compare with previous version
resolved all threads
added 1 commit
Compare with previous version
mentioned in merge request !13
changed the description
changed the description
changed this line in version 5 of the diff
resolved all threads
added 1 commit
Compare with previous version
changed this line in version 6 of the diff
added 4 commits
Compare with previous version
approved this merge request
added 18 commits
mainCompare with previous version
Reviewers