Getting started

1
export const SITE: Site = {
2
  TITLE: 'Name of your blog',
3
  DESCRIPTION: 'Description for your blog',
4
  AUTHOR: 'Name of the author',
5
  CANONICAL_URL: import.meta.env.DEV
6
    ? 'http://localhost:4321'
7
    : 'https://example.com',
8
  LOCALE: 'en',
9
  CATEGORIES: ['blog', 'projects'],
10
  OG_IMAGE: '/og-image.webp',
11

12
  TWITTER: {
13
    CREATOR: '@',
14
    CARD: 'summary_large_image',
15
  },
16

17
  NUM_POSTS_ON_HOMEPAGE: 3,
18
  NUM_PROJECTS_ON_HOMEPAGE: 3,
19
  SCHEDULED_POST_MARGIN: minutesToMilliseconds(15),
20
};

1
export const SOCIALS: Socials = [
2
  {
3
    NAME: 'Facebook',
4
    ICON: 'facebook',
5
    LABEL: `${SITE.AUTHOR} on Facebook`,
6
    HREF: 'https://www.facebook.com/johndoe',
7
  },
8
  // Add more social media platforms here
9
];

1
const markup = html(`
2
  // Your custom HTML template here
3
`);

1
import { readFileSync } from 'fs';
2
import type { ImageConfig, SvgConfig } from './types';
3
import type { Font } from 'satori';
4

5
// Custom font configuration
6
const interRegular = readFileSync(
7
  `${process.cwd()}/public/og-fonts/inter-v18-latin-regular.ttf`
8
);
9
const interBlack = readFileSync(
10
  `${process.cwd()}/public/og-fonts/inter-v18-latin-900.ttf`
11
);
12

13
// Image format configuration
14
export const DEFAULT_IMAGE: ImageConfig = {
15
  format: 'webp',
16
  webpOptions: {
17
    quality: 90,
18
  },
19
};
20

21
// SVG dimensions
22
export const DEFAULT_SVG: SvgConfig = {
23
  width: 1200,
24
  height: 630,
25
  embedFont: true,
26
};
27

28
// Font configuration
29
export const DEFAULT_FONTS: Font[] = [
30
  {
31
    name: 'Inter',
32
    data: interRegular,
33
    weight: 400,
34
    style: 'normal',
35
  },
36
  {
37
    name: 'Inter',
38
    data: interBlack,
39
    weight: 900,
40
    style: 'normal',
41
  },
42
];

1
/*
2
  X-Frame-Options: DENY
3
  X-Content-Type-Options: nosniff
4
  X-XSS-Protection: 0
5
  Referrer-Policy: no-referrer
6
  Permissions-Policy: accelerometer=(), autoplay=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(self), fullscreen=(self), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(self), xr-spatial-tracking=()
7
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
8
  Access-Control-Allow-Origin: https://example.com

1
import fs from 'fs/promises';
2
import path from 'path';
3
import {
4
  inlineScriptHashes,
5
  inlineStyleHashes,
6
} from '../src/generated/sriHashes.mjs';
7

8
const headersPath = path.join(process.cwd(), 'dist', '_headers');
9

10
async function generateCSPHeader() {
11
  try {
12
    // Combine all script hashes
13
    const scriptHashes = new Set([...inlineScriptHashes]);
14

15
    // Combine all style hashes
16
    const styleHashes = new Set([...inlineStyleHashes]);
17

18
    // Generate CSP header
19
    const cspHeader =
20
      `Content-Security-Policy: default-src 'self'; object-src 'self'; script-src 'self' ${Array.from(
21
        scriptHashes
22
      )
23
        .map(hash => `'${hash}'`)
24
        .join(' ')}; connect-src 'self'; style-src 'self' ${Array.from(
25
        styleHashes
26
      )
27
        .map(hash => `'${hash}'`)
28
        .join(
29
          ' '
30
        )}; base-uri 'self'; img-src 'self' https://example.com; frame-ancestors 'none'; worker-src 'self'; manifest-src 'none'; form-action 'self';`.trim();
31

32
    // Read existing _headers file
33
    let headersContent = await fs.readFile(headersPath, 'utf-8');
34

35
    headersContent += '\n  ' + cspHeader;
36

37
    // Write updated content back to _headers file
38
    await fs.writeFile(headersPath, headersContent);
39

40
    console.log('CSP header generated and _headers file updated successfully.');
41
  } catch (error) {
42
    console.error('Error generating CSP header:', error);
43
  }
44
}
45

46
generateCSPHeader();

1
img-src 'self' https://example.com;

1
font-src 'self' https://example.com;

1
import { defineEcConfig } from 'astro-expressive-code';
2
import { pluginLineNumbers } from '@expressive-code/plugin-line-numbers';
3

4
export default defineEcConfig({
5
  plugins: [pluginLineNumbers()],
6
  themes: ['andromeeda'],
7

8
  styleOverrides: {
9
    // You can also override styles
10
    borderRadius: '0.5rem',
11
    uiFontFamily: 'JetBrains Mono',
12
    codeFontFamily: 'JetBrains Mono',
13
    codeFontSize: '1rem',
14
  },
15
});