Adding the images and a new section #1

sena commented 2026年01月30日 12:59:32 +01:00

we should use

.obsidian/

instead, so that all directories are affected.

we should use ``` .obsidian/ ``` instead, so that all directories are affected.

sena commented 2026年01月30日 13:08:06 +01:00

this src is bad practice, as it's automatically generated and could change in the future.

the best practice would be to:

• make this file MDX (01-welcome-to-bufoss.mdx) instead,
• add the following line after line 4:

  import bufoss from '../../../assets/bufoss.svg';
  

• replace the src attribute with src={bufoss.src}.

if this looks like too much work, we can cheat and just use src="https://guide.bufoss.org/favicon.svg" instead since it's the same image but static. but again, best practices are nicer.

---

one other thing about this line, is that i don't think the style attribute is necessary. unless you specifically want that much amount of top and bottom margin, we should use this pattern to center horizontally:

<div align="center">
 <img src="something" width="something" />
</div>

---

also, ideally, we want to include an alt text for every image, even if it's not that detailed. something like alt="buFOSS logo" would be enough. if you believe it's better to not provide in this context, you could do alt="" instead.

this `src` is bad practice, as it's automatically generated and could change in the future. the best practice would be to: - make this file MDX (`01-welcome-to-bufoss.mdx`) instead, - add the following line after line 4: ```js import bufoss from '../../../assets/bufoss.svg'; ``` - replace the `src` attribute with `src={bufoss.src}`. if this looks like too much work, we can cheat and just use `src="https://guide.bufoss.org/favicon.svg"` instead since it's the same image but static. but again, best practices are nicer. --- one other thing about this line, is that i don't think the `style` attribute is necessary. unless you specifically want that much amount of top and bottom margin, we should use this pattern to center horizontally: ```md <div align="center"> <img src="something" width="something" /> </div> ``` --- also, ideally, we want to include an alt text for every image, even if it's not that detailed. something like `alt="buFOSS logo"` would be enough. if you believe it's better to not provide in this context, you could do `alt=""` instead.

sena commented 2026年01月30日 13:13:22 +01:00

this image is natively a svg but you're using a converted png. src="https://upload.wikimedia.org/wikipedia/commons/3/31/Free_and_open-source_software_logo_%282009%29.svg" would have been better for scaling and all.

---

my points about aligning applies here as well :3

this image is natively a `svg` but you're using a converted png. `src="https://upload.wikimedia.org/wikipedia/commons/3/31/Free_and_open-source_software_logo_%282009%29.svg"` would have been better for scaling and all. --- my points about aligning applies here as well :3

sena commented 2026年01月30日 13:14:21 +01:00

this one is also an svg originally, so src="https://upload.wikimedia.org/wikipedia/commons/7/78/Definition_of_Free_Cultural_Works_logo_notext.svg" would have been better.

---

my points about aligning applies here as well :3

this one is also an svg originally, so `src="https://upload.wikimedia.org/wikipedia/commons/7/78/Definition_of_Free_Cultural_Works_logo_notext.svg"` would have been better. --- my points about aligning applies here as well :3