I spotted an experimental vitest addon and configured most parts of it.
However due to given peer dependency in that addon I cannot install it.
Therefore everything was commented for now.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
When I was reinstalling Orca to get it back working I noticed that Anvil
is not displaying any document.title. I did some research on how to
define it and added it on two pages. This is meant to discuss how we
want to structure the title. Once we settled on something it'll become
translateable, too.
Speaking of, when navigating through the Settings modal I noticed that
the Remove button for keys lacked context. So I added the key title for
screen readers. Nothing worse than deleting the wrong key!
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
We want to improve the translation experience by creating screenshots
that illustrate which part of the UI is to be translated.
There's one variant showing the keys and another one with the English
translation.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is currently a mock as we have no notification mechanism in place.
Also, I need to figure out how to talk to Vervis' API first.
That being said, this step allows for translations at least.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
REUSE had a breaking change that changed the way they configure the
tool:
https://github.com/fsfe/reuse-tool/releases/tag/v4.0.0
This PR adjusts our code to get compliant again.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
When I was working on this I learned about
https://www.skeleton.dev/docs/tokens#color-pairing-chart
and how the different colour values of
https://www.skeleton.dev/docs/colors
relate to each other. I went off and augmented every colour class to the
respective dark mode according to the pairing.
There is no predefined mapping for text-white resp. bg-white to replace
it with black, so I had to fallback to dark:.
Likewise with the placeholder: assignments.
Another major aha moment came after studying
https://github.com/skeletonlabs/skeleton/blob/%40skeletonlabs/skeleton%402.10.2/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts
and realising, that I could put away my hack and instead use Svelte
stores - or rather the wrappers Skeleton provided for convenience.
This way, the LightSwitch I use in the Overlay popup now syncs up with
the Appearance radios in the Settings! Hooray!
I had to think a little bit harder how to handle Auto option. I feel
like it's not 100% where I would like to be but Skeleton is looking at
preferred colour scheme in a binary view and does not know anything
other than light or dark.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This features two knobs: theming and indent.
I was curious whether I could actually hand the theme switching to the
parent, so I created an event dispatcher for it.
It works! But I had to hack the Svelte component a little.
I also need to sync it two the theme switcher in the popup and go over
every component that is focused on light mode only at the moment. To
limit the work I will constraint myself to the Profile page here. If the
theme is meant to apply to other pages as well, we will need to persist
the setting. That means a database in Anvil, I guess. I'm not willing to
take that step right now. It must come at some point (e.g. when talking
to Vervis to actually inform about changes made in Anvil).
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
In July 2024 the first batch of donations was wired for working on
Anvil. As a token of gratitude and for the sake of transparency, the
project README should shout out to NLnet.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
Currently the SSH and GPG keys are hardcoded. In a refactoring those
will be passed down as prop to the component. But I would need to query
Vervis to receive the real keys. Likewise I am not talking to Vervis
when updating (remove, add) a key.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is not interacting with Vervis at this point in time.
I clarified that changes should be persisted on moving away from a view.
I'm going to implement that once I have all views in place.
On top of that, persisting changes to Vervis requires me to study the
now documented Vervis API in more detail. I'm going to postpone this for
now but will revisit it in a few weeks.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
Turns out most Storybook Addons expect React and won't be installable in
a Svelte(Kit) project. But I could figure out how to use the play
functions. So I have an example for it.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is now showing the MainMenu on the profile page which in turn
pulls in the Settings modal.
I wasn't able to register the modal on Storybook yet, which means
that there won't be any on the Profile template or page story.
The implementation in Skeleton is causing some accessibility
warnings. However, since there next version is taking a radical
different approach I'm inclined to let it be for now. We should
document it somewhere, I guess.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I realised that I must not show the sidebar everywhere. So to not move
code around I extracted it into its own component. This one is not
matching the design (because of the links etc.) but is a step in the
direction.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is in need of at least one refactoring. Skeleton is redesigning
the AppRail we are using here. The layout is hard to style.
This implementation interacts with a drawer, but it will likely be
dropped in the final version.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
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>
This markup was commented. In case we ever need it, git will have it
stored in the repo history.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I also introduce Person24 as fallback avatar and grant it a new icon in
Storybook as consequence.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I dropped the examples while at it.
Since Svelte-Octicons are used as-is I have to declare the license as
MIT.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I received confirmation that Inter is meant to be used for the whole
application. Therefore I'm loading it from a remote server.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
As it is visible here, part of the layout is deferred to the parent
component. See Login template.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
There is a v8 in the beta, so I update the dependencies to check whether
I need to adjust something.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This is the second form I have touched. Here, I even have a light
validation implemented on the server.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
I also extracted the Icons we use into a story and looked into how I
could potentially allow for changing the locale.
Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
