WIP links, small changes

Author: Solant

src/content/docs/docs/guides/examples/handling-assets.mdx

@@ -10,13 +10,13 @@ Assets are static resources that your application use. In FSD, the placement of
 
 <Aside type="caution">
 
-It's a common practice to implement a custom `assets` segment (http://localhost:4321/docs/reference/slices-segments/#segments), but just like the code, this creates an issue of desegmentation (http://localhost:4321/docs/guides/issues/desegmented/) and should be generally avoided.
+It's a common practice to implement a [custom `assets` segment](/docs/reference/slices-segments/#segments), but just like the code, this creates an issue of [desegmentation](/docs/guides/issues/desegmented/) and should be generally avoided.
 
 </Aside>
 
-## Global Assets
+## Global Assets \{#global-assets}
 
-Global assets include things like global stylesheets (like css reset), fonts and so on. `app` is the appropriate layer for those kind of files, as they are not reused by any other component, and will be used by the application entrypoint.
+Global assets include things like global stylesheets (like css reset), fonts and so on. `app` is the appropriate layer for those kind of files, as they are not used by any other component except for the application entrypoint.
 
 <FileTree>
 - app/
@@ -26,7 +26,7 @@ Global assets include things like global stylesheets (like css reset), fonts and
   - main.ts
 </FileTree>
 
-## Slice-specific Assets
+## Slice-specific Assets \{#slice-specific-assets}
 
 When an asset is only used by one page, widget, or feature, keep it inside that slice. This maintains encapsulation and makes it clear where the asset belongs:
 
@@ -54,7 +54,7 @@ If your UI has a lot of static assets like images, you can create a subfolder in
 </FileTree>
 
 
-## Non-UI Assets
+## Non-UI Assets \{#non-ui-assets}
 
 There are cases when asset is not part of UI, but a crucial part of business logic. Consider this example:
 
@@ -69,46 +69,20 @@ There are cases when asset is not part of UI, but a crucial part of business log
 
 In this example, while `invoicing-template.pdf` is a static asset, it is tightly coupled with the core business logic in `create-invoice.ts`. In cases like that, it is preferrable to place `invoice-template.pdf` in the `model` segment to maintain high cohesion.
 
-## Public Folder
+## Public Folder \{#public}
 
-Most bundlers and frameworks provide a `public/` folder at the root of your project. Files here are served as-is without processing. Use this folder for:
+Most bundlers and frameworks provide a `public` folder at the root of your project. Files here are served as-is without processing.
 
-- **favicon.ico** and other browser-required files
-- **robots.txt** and SEO-related files
-- **Static files** that don't need to be processed by your bundler
-- **Large assets** that would unnecessarily increase your bundle size
+Some build tools like [Vite](https://vite.dev/config/shared-options#publicdir) allows public folder to be changed, while others like [Astro](https://docs.astro.build/en/basics/project-structure/#public) don't have this option. If your build tool doesn't support this change, it is ok to leave it as it is, as the `public` folder is not part of the FSD structure and won't have name collisions with it.
 
-The `public/` folder is not part of the FSD structure — it's external to it. Reference these assets with absolute paths from your site root:
-
-```tsx
-<img src="/images/hero.jpg" alt="Hero" />
-```
-
-## Stylesheets
-
-Global styles belong in `shared/styles`. For framework-specific approaches:
-
-- **CSS Modules** — can be placed alongside components (`Button.module.css` next to `Button.tsx`)
-- **Global CSS** — place in `shared/styles` and import in your app entry point
-- **CSS-in-JS** — usually doesn't need separate asset files
-
-
-## Framework-specific Considerations
-
-Some frameworks have specific requirements for asset handling:
-
-- **Next.js** — uses `next/image` for optimized images, and has a `public/` folder at the root. See the [Next.js integration guide](/docs/guides/tech/with-nextjs) for FSD-specific routing setup.
-- **Astro** — has its own asset handling with Image component. See the [Astro integration guide](/docs/guides/tech/with-astro).
-- **Vite** — imports assets as URLs by default, works well with the patterns described above.
-
-## Summary
+## Summary \{#summary}
 
 | Asset Type | Location |
 |------------|----------|
-| Reusable icons, images | `shared/ui/` (as components) |
-| Global styles | `shared/styles/` |
-| Fonts | `shared/fonts/` or `public/` |
+| Reusable icons and images | `shared/ui/` |
+| Global styles | `app/styles/` |
+| Fonts | `app/fonts/` or `public/` |
 | Slice-specific assets | Inside the slice (e.g., `pages/home/ui/`) |
-| Static files, favicon | `public/` at project root |
+| Static files, favicon | `public/` or `app/public` |
 
 Follow the FSD principle: place assets where they are used, and move them to `shared` when there's an actual need for reuse across slices.