|
| 1 | +--- |
| 2 | +const PUBLIC_URL = import.meta.env.PUBLIC_URL || ''; |
| 3 | +
|
| 4 | +function urlJoin(...segments: string[]) { |
| 5 | + return segments |
| 6 | + .map((s) => s.replace(/^\/+|\/+$/g, '')) |
| 7 | + .filter(Boolean) |
| 8 | + .join('/'); |
| 9 | +} |
| 10 | +
|
| 11 | +const extMimeMap = { |
| 12 | + png: 'image/png', |
| 13 | + jpg: 'image/jpg', |
| 14 | +}; |
| 15 | +
|
| 16 | +const defaults = { |
| 17 | + color: '#6e56cf', |
| 18 | + icons: [ |
| 19 | + urlJoin(PUBLIC_URL, '/logo-24.png'), |
| 20 | + urlJoin(PUBLIC_URL, '/logo-48.png'), |
| 21 | + urlJoin(PUBLIC_URL, '/logo-96.png'), |
| 22 | + ], |
| 23 | +}; |
| 24 | +
|
| 25 | +interface Props { |
| 26 | + title: string; |
| 27 | + description: string; |
| 28 | + keywords?: string[]; |
| 29 | +} |
| 30 | +
|
| 31 | +console.log('PUB', PUBLIC_URL); |
| 32 | +const { title, description, keywords = [] } = Astro.props; |
| 33 | +const url = urlJoin(PUBLIC_URL, Astro.url.pathname); |
| 34 | +const image = urlJoin(PUBLIC_URL, '/social.png'); |
| 35 | +const sitename = new URL(PUBLIC_URL).hostname; |
| 36 | +--- |
| 37 | + |
| 38 | +<title>{title}</title> |
| 39 | +<meta name="description" content={description} /> |
| 40 | +<meta name="msapplication-TileColor" content={defaults.color} /> |
| 41 | +<meta name="theme-color" content={defaults.color} /> |
| 42 | +<meta name="keywords" content={keywords.join(', ')} /> |
| 43 | +<link rel="canonical" href={url} /> |
| 44 | + |
| 45 | +{defaults.icons.flatMap((href) => { |
| 46 | + const [ext, size] = href.split(/[\/\-.]/).reverse(); |
| 47 | + return ['icon', 'apple-touch-icon'].map((rel) => ( |
| 48 | + <link rel={rel} type={extMimeMap[ext as keyof typeof extMimeMap] || extMimeMap.png} sizes={`${size}x${size}`} |
| 49 | + href={href} /> |
| 50 | + )); |
| 51 | + })} |
| 52 | + |
| 53 | +<meta itemprop="name" content={title} /> |
| 54 | +<meta itemprop="description" content={description} /> |
| 55 | +<meta itemprop="image" content={image} /> |
| 56 | +<meta property="image:alt" content={description} /> |
| 57 | + |
| 58 | +<meta property="og:type" content="website" /> |
| 59 | +<meta property="og:url" content={url} /> |
| 60 | +<meta property="og:title" content={title} /> |
| 61 | +<meta property="og:site_name" content={sitename} /> |
| 62 | +<meta property="og:image" content={image} /> |
| 63 | +<meta property="og:image:alt" content={description} /> |
| 64 | +<meta property="og:image:width" content="1200" /> |
| 65 | +<meta property="og:image:height" content="670" /> |
| 66 | +<meta property="og:description" content={description} /> |
| 67 | +<meta property="og:locale" content="en_US" /> |
| 68 | + |
| 69 | +<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} /> |
| 70 | +<meta name="twitter:url" content={url} /> |
| 71 | +<meta name="twitter:title" content={title} /> |
| 72 | +<meta name="twitter:description" content={description} /> |
| 73 | +<meta name="twitter:image" content={image} /> |
| 74 | +<meta name="twitter:image:alt" content={title} /> |
0 commit comments