1---
 2import { profileConfig } from '@/config';
 3import PostInfo from '@components/misc/PostInfo.astro';
 4import ImageWrapper from '@components/utils/ImageWrapper.astro';
 5import Markdown from '@components/utils/Markdown.astro';
 6import Button from '@components/widgets/Button.astro';
 7import PostPageLayout from '@layouts/PostPageLayout.astro';
 8import { getAllReferences } from '@utils/content-utils';
 9import { t } from '@utils/i18n';
10import { Icon } from 'astro-icon/components';
11import { getEntry, render } from 'astro:content';
12
13const md = await getEntry('spec', 'about');
14
15const { Content, headings, remarkPluginFrontmatter } = md
16  ? await render(md)
17  : {
18      Content: Fragment,
19      headings: [],
20      remarkPluginFrontmatter: { references: [] },
21    };
22
23const allReferences = await getAllReferences();
24let allRefByCurrent: typeof allReferences = [];
25let references: {
26  reference: string;
27  context: string;
28  id: string;
29}[] = [];
30if (md) {
31  allRefByCurrent = allReferences.filter((it) => it.refBy.id === md.id);
32  references = remarkPluginFrontmatter.references || [];
33}
34---
35
36<PostPageLayout
37  title={md?.data.title || t.navigation.about()}
38  headings={headings}
39  comment={md?.data.comment}
40>
41  <Fragment slot="header-content">
42    <PostInfo title={md?.data.title || t.navigation.about()} />
43  </Fragment>
44  <div class="xs:w-2/3 mx-auto my-4 flex flex-col items-center justify-center gap-2 xl:hidden">
45    <ImageWrapper
46      class="w-4/5 max-w-60 rounded-xl"
47      src={profileConfig.avatar}
48      alt={profileConfig.name}
49    />
50    <div class="text-2xl font-bold">{profileConfig.name}</div>
51    <div>{profileConfig.bio}</div>
52    <div class="flex flex-row flex-wrap items-center justify-center gap-2">
53      {
54        profileConfig.socialLinks.map((link) => (
55          <Button
56            href={link.url}
57            title={link.name}
58            target="_blank"
59            class="btn-circle btn-ghost text-2xl"
60          >
61            {/* No tooltips because touch screen hard to show them */}
62            <Icon name={link.icon} />
63          </Button>
64        ))
65      }
66    </div>
67  </div>
68  <div class="divider xl:hidden">PROFILE</div>
69  <Markdown
70    bidirectional-references={md
71      ? {
72          references,
73          allRefByCurrent,
74        }
75      : undefined}
76  >
77    <Content />
78  </Markdown>
79</PostPageLayout>