Skip to content

Commit be0ced7

Browse files
committed
small stylistic adjustments
1 parent ae24463 commit be0ced7

1 file changed

Lines changed: 14 additions & 14 deletions

File tree

β€Žsrc/content/docs/docs/guides/examples/handling-assets.mdxβ€Ž

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ sidebar:
66

77
import { FileTree, Aside } from '@astrojs/starlight/components';
88

9-
Assets are static resources that your application use. In FSD, the placement of assets follows the same principles as code β€” assets should be grouped based not on the type, but on the use case and should be near the component that uses it.
9+
Assets are static resources that your application uses. In FSD, assets follow the same placement principles as code. Group them by use case, not by type, and keep them close to the components that use them.
1010

1111
<Aside type="caution">
1212

13-
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.
13+
It's a common practice to implement a [custom `assets` segment](/docs/reference/slices-segments/#segments), but just like with code, this creates an issue of [desegmentation](/docs/guides/issues/desegmented/) and should be generally avoided.
1414

1515
</Aside>
1616

1717
## Global Assets \{#global-assets}
1818

19-
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.
19+
Global assets include things like global stylesheets (such as a CSS reset) and fonts. The `πŸ₯ž app` layer is the right place for these files since they're only used by the application entrypoint.
2020

2121
<FileTree>
2222
- app/
@@ -39,7 +39,7 @@ When an asset is only used by one page, widget, or feature, keep it inside that
3939
- index.ts
4040
</FileTree>
4141

42-
If your UI has a lot of static assets like images, you can create a subfolder in the `ui` segment:
42+
If your UI has many static assets like images, you can create a subfolder in the `ui` segment:
4343

4444
<FileTree>
4545
- pages/
@@ -56,7 +56,7 @@ If your UI has a lot of static assets like images, you can create a subfolder in
5656

5757
## Non-UI Assets \{#non-ui-assets}
5858

59-
There are cases when asset is not part of UI, but a crucial part of business logic. Consider this example:
59+
Sometimes an asset is not part of the UI but is a crucial part of business logic. Consider this example:
6060

6161
<FileTree>
6262
- features/
@@ -67,22 +67,22 @@ There are cases when asset is not part of UI, but a crucial part of business log
6767
- index.ts
6868
</FileTree>
6969

70-
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.
70+
Here, `invoice-template.pdf` is tightly coupled with the business logic in `create-invoice.ts`. In cases like this, it's preferable to place the file in the `model` segment to maintain high cohesion and localize changes.
7171

7272
## Public Folder \{#public}
7373

74-
Most bundlers and frameworks provide a `public` folder at the root of your project. Files here are served as-is without processing.
74+
Most bundlers and frameworks provide a `πŸ“ public` folder at the root of your project. Files here are served as-is without processing.
7575

76-
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.
76+
Some build tools like [Vite](https://vite.dev/config/shared-options#publicdir) allow the public folder location 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, that's fine. The `πŸ“ public` folder is not part of the FSD structure and won't cause naming collisions.
7777

7878
## Summary \{#summary}
7979

8080
| Asset Type | Location |
8181
|------------|----------|
82-
| Reusable icons and images | `shared/ui/` |
83-
| Global styles | `app/styles/` |
84-
| Fonts | `app/fonts/` or `public/` |
85-
| Slice-specific assets | Inside the slice (e.g., `pages/home/ui/`) |
86-
| Static files, favicon | `public/` or `app/public` |
82+
| Reusable icons and images | `πŸ“ shared/ui/` |
83+
| Global styles | `πŸ“ app/styles/` |
84+
| Fonts | `πŸ“ app/fonts/` or `πŸ“ public/` |
85+
| Slice-specific assets | Inside the slice (e.g., `πŸ“ pages/home/ui/`) |
86+
| Static files, favicon | `πŸ“ public/` or `πŸ“ app/public` |
8787

88-
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.
88+
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.

0 commit comments

Comments
Β (0)