This is the top part of the main menu which includes the Avatar overlay.
I'm not quite sure how to label each part.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I'm going to break up my MainMenu into smaller components, starting with
the OverlayAvatar. Testing it taught me how to handle stores in Vitest.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This allows for proper testing and documentation in Storybook.
I also moved the image into its own component. This required me to
adjust the vitest.config.ts slightly because it wasn't finding the image
during tests.
Since components are fully translatable, this means we have new keys
now.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
By moving the fallback text into its own component I was able to move
the list element into the History molecule. Its API has changed
accordingly. I have written tests to prevent regressions.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This way the History molecule is only concerned with mapping the list of
commits to the appropriate structure and iterating over it. The markup
is deferred to separate components now.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
In order to reduce the complexity of a component I broke out the body
part of a commit into its own component.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This allows for easier testing. The component is still complex, so it
requires more refactoring into smaller parts. But I can now safely do
that since I have specified the expected behaviour with a test.
I already discovered a bug while writing the tests: I want to group by
date irrespective of the timestamp. Therefore I need to parse the date
from the ISO timestamp of a commit.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
During testing I realised that the buttons are not accessible.
While I was adding text I also ensured that it can be translated.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
When trying to deploy the application to my own domain I noticed that
the adapter is wrong. Since I'm not hosting anything in „the Cloud” I
went with a plain Node.js server. Therefore I have to use a specific
adapter and also fix the type of the server response. This in turn
uncovered a bug in the Created component which I also fixed.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This required adding annotation to the whole project.
I need to double-check whether I have the license banner of AGPL in
place everywhere.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I want to explore how I could potentially reuse components. Therefore I
extract the form into a component. Given its complexity it could either
be a molecule or an organism. I went with the latter here.
I have to explore how I pass around Objects and Arrays in Svelte so that
I can move server logic up in the component tree.
When I reuse components, I potentially want to define the labels and
placeholders. Therefore the hard-coded strings have to become variables.
Eventually I will define the key on the template level and use the real
values on page level and pass it down. That would break tests currently
so I'm not doing it in this refactoring.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I could imagine that we will refactor this into even smaller components
in the future but for now, I bundle the pronoun with the display name
like this.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
These have no handlers bound to them yet. At that point the atom might
be refactored to a molecule. Let's see.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
For now I'm following the Atomic Design philosophy with respect to
organising the components. I started with Avatar which wraps the
SvelteKit library with some defaults. I test it using vitest which is
now configured accordingly. All dependencies were updated to their
latest version.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
