oeiuwq.com
Import all nix files in a directory tree.
Discussions: https://oeiuwq.zulipchat.com/join/nqp26cd4kngon6mo3ncgnuap/
dendrix.oeiuwq.com/Dendritic.html
dendritic
inputs
1---
2import type { HTMLAttributes } from 'astro/types';
3
4export interface Props {
5 id: string;
6 initial?: boolean;
7}
8const { id, initial } = Astro.props;
9const attributes: HTMLAttributes<'div'> = initial ? { 'data-initial': 'true' } : {};
10---
11
12<div {id} {...attributes}>
13 <slot />
14</div>
15
16<style>
17 /*
18 These styles avoid layout shift on page load.
19 We don’t want to hide all tabs forever in case JS never loads,
20 so instead we hide them initially with an animation that jumps
21 from hidden to visible after 10s. Usually JS will run before
22 10s at which point we’ll rely on the `hidden` attribute and
23 toggle off the animation using `role='tabpanel'`. Both these
24 attributes are injected by the JS.
25 */
26
27 div {
28 animation: tab-panel-appear 10s steps(2, jump-none) 1;
29 }
30
31 div[data-initial],
32 div[role='tabpanel'] {
33 animation: none;
34 }
35
36 @keyframes tab-panel-appear {
37 from {
38 /* `content-visibility` is set as well as `display` to work around a Firefox
39 bug where animations containing only `display: none` don’t play. */
40 display: none;
41 content-visibility: hidden;
42 }
43 }
44</style>