{subtext}
17 | }
18 | 
--------------------------------------------------------------------------------
/src/components/HeadSEO.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
3 |
4 | export interface Props {
5 | frontmatter: Frontmatter;
6 | canonicalUrl: URL;
7 | }
8 |
9 | const { frontmatter, canonicalUrl } = Astro.props as Props;
10 | const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`;
11 | const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src;
12 | const canonicalImageSrc = new URL(imageSrc, Astro.site);
13 | const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
14 | ---
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
47 |
--------------------------------------------------------------------------------
/src/components/Header/AstroLogo.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | size: number;
4 | };
5 | const { size } = Astro.props as Props;
6 | ---
7 |
8 |
14 |
15 |
--------------------------------------------------------------------------------
/src/components/Header/LanguageSelect.css:
--------------------------------------------------------------------------------
1 | .language-select {
2 | flex-grow: 1;
3 | width: 48px;
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0.33em 0.5em;
7 | overflow: visible;
8 | font-weight: 500;
9 | font-size: 1rem;
10 | font-family: inherit;
11 | line-height: inherit;
12 | background-color: var(--theme-bg);
13 | border-color: var(--theme-text-lighter);
14 | color: var(--theme-text-light);
15 | border-style: solid;
16 | border-width: 1px;
17 | border-radius: 0.25rem;
18 | outline: 0;
19 | cursor: pointer;
20 | transition-timing-function: ease-out;
21 | transition-duration: 0.2s;
22 | transition-property: border-color, color;
23 | -webkit-font-smoothing: antialiased;
24 | padding-left: 30px;
25 | padding-right: 1rem;
26 | }
27 | .language-select-wrapper .language-select:hover,
28 | .language-select-wrapper .language-select:focus {
29 | color: var(--theme-text);
30 | border-color: var(--theme-text-light);
31 | }
32 | .language-select-wrapper {
33 | color: var(--theme-text-light);
34 | position: relative;
35 | }
36 | .language-select-wrapper > svg {
37 | position: absolute;
38 | top: 7px;
39 | left: 10px;
40 | pointer-events: none;
41 | }
42 |
43 | @media (min-width: 50em) {
44 | .language-select {
45 | width: 100%;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/Header/LanguageSelect.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource react */
2 | import type { FunctionComponent } from 'react';
3 | import './LanguageSelect.css';
4 | import { KNOWN_LANGUAGES, langPathRegex } from '../../languages';
5 |
6 | const LanguageSelect: FunctionComponent<{ lang: string }> = ({ lang }) => {
7 | return (
8 | 
3 |
4 |
5 |
6 |
3 |
4 |
5 |
6 |
3 |
4 |
5 |
6 |
3 |
4 |
5 |
6 |
11 |
{title}
12 | {:else}
13 | {title}
14 | {/if}
15 | 
