Skip to content

Commit 25d3b74

Browse files
eric-bureleric-burel
committed
reuse logic for computing the logo and favicon path, document BASE_URL
1 parent bf7872c commit 25d3b74

File tree

6 files changed

+57
-27
lines changed

6 files changed

+57
-27
lines changed

‎docs/tutorialkit.dev/src/content/docs/guides/deployment.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,16 @@ This will generate a `dist` directory containing the static files that make up y
3434

3535
You can learn more about the build process in the [Astro documentation](https://docs.astro.build/en/reference/cli-reference/#astro-build).
3636

37+
## Environment variables
38+
39+
The `BASE_URL` environment variable should point to your website's absolute URL.
40+
This will allow to compute absolute URLs for SEO metadata.
41+
42+
Example:
43+
```
44+
BASE_URL="https://tutorialkit.dev"
45+
```
46+
3747
## Headers configuration
3848

3949
The preview and terminal features in TutorialKit rely on WebContainers technology. To ensure that this technology works correctly, you need to configure the headers of your web server to ensure the site is cross-origin isolated (you can read more about this at [webcontainers.io](https://webcontainers.io/guides/configuring-headers)).

‎packages/astro/src/default/components/Logo.astro

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,11 @@
11
---
2-
import fs from 'node:fs';
3-
import path from 'node:path';
4-
import { joinPaths } from '../utils/url';
5-
6-
const LOGO_EXTENSIONS = ['svg', 'png', 'jpeg', 'jpg'];
2+
import { LOGO_EXTENSIONS } from '../utils/constants';
3+
import { readLogoFile } from '../utils/logo';
74
85
interface Props {
96
logoLink: string;
107
}
118
12-
function readLogoFile(logoPrefix: string) {
13-
let logo;
14-
15-
for (const logoExt of LOGO_EXTENSIONS) {
16-
const logoFilename = `${logoPrefix}.${logoExt}`;
17-
const exists = fs.existsSync(path.join('public', logoFilename));
18-
19-
if (exists) {
20-
logo = joinPaths(import.meta.env.BASE_URL, logoFilename);
21-
break;
22-
}
23-
}
24-
25-
return logo;
26-
}
27-
289
const { logoLink } = Astro.props;
2910
3011
const logo = readLogoFile('logo');

‎packages/astro/src/default/layouts/Layout.astro

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
---
22
import { ViewTransitions } from 'astro:transitions';
3-
import { joinPaths } from '../utils/url';
3+
import { readFaviconFile } from '../utils/favicon';
4+
import { readLogoFile } from '../utils/logo';
45
56
interface Props {
67
title: string;
78
description?: string;
89
}
910
1011
const { title, description = 'TutorialKit' } = Astro.props;
11-
const baseURL = import.meta.env.BASE_URL;
12-
const logoUrl = joinPaths(baseURL, '/logo.svg');
12+
const logoUrl = readLogoFile();
13+
const faviconUrl = readFaviconFile();
1314
---
1415

1516
<!doctype html>
@@ -21,12 +22,12 @@ const logoUrl = joinPaths(baseURL, '/logo.svg');
2122
<meta name="generator" content={Astro.generator} />
2223
<meta name="og:title" content={title} />
2324
<meta name="og:description" content={description} />
24-
<meta name="og:image" content={logoUrl} />
25+
{logoUrl ? <meta name="og:image" content={logoUrl} /> : null}
2526
<meta name="twitter:title" content={title} />
2627
<meta name="twitter:description" content={description} />
27-
<meta name="twitter:image" content={logoUrl} />
28+
{logoUrl ? <meta name="twitter:image" content={logoUrl} /> : null}
2829
<title>{title}</title>
29-
<link rel="icon" type="image/svg+xml" href={joinPaths(baseURL, '/favicon.svg')} />
30+
{faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
3031
<link rel="preconnect" href="https://fonts.googleapis.com" />
3132
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
3233
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

‎packages/astro/src/default/utils/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@ export const RESIZABLE_PANELS = {
22
Main: 'main',
33
} as const;
44
export const IGNORED_FILES = ['**/.DS_Store', '**/*.swp'];
5+
6+
export const LOGO_EXTENSIONS = ['svg', 'png', 'jpeg', 'jpg'];

‎packages/astro/src/default/utils/favicon.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import fs from 'node:fs';
2+
import path from 'node:path';
3+
import { joinPaths } from './url';
4+
5+
export function readFaviconFile(faviconPrefix: string = 'favicon') {
6+
let favicon;
7+
8+
const faviconFilename = `${faviconPrefix}.svg`;
9+
const exists = fs.existsSync(path.join('public', faviconFilename));
10+
11+
if (exists) {
12+
favicon = joinPaths(import.meta.env.BASE_URL, faviconFilename);
13+
}
14+
15+
return favicon;
16+
}

‎packages/astro/src/default/utils/logo.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import fs from 'node:fs';
2+
import path from 'node:path';
3+
import { LOGO_EXTENSIONS } from './constants';
4+
import { joinPaths } from './url';
5+
6+
export function readLogoFile(logoPrefix: string = 'logo') {
7+
let logo;
8+
9+
for (const logoExt of LOGO_EXTENSIONS) {
10+
const logoFilename = `${logoPrefix}.${logoExt}`;
11+
const exists = fs.existsSync(path.join('public', logoFilename));
12+
13+
if (exists) {
14+
logo = joinPaths(import.meta.env.BASE_URL, logoFilename);
15+
break;
16+
}
17+
}
18+
19+
return logo;
20+
}

0 commit comments

Comments
 (0)