commit 0dfaf18f6a30b30b8328b5f7b6f48518332ba1c1 · dunkirk.sh/zera

+32 -18

tools/genOG.ts

···

       7
       7
        
       

     

       8
       8
        
       async function og(

     

       9
       9
        
       	postname: string,

     

       10
       10
       +
       	type: string,

     

       10
       11
        
       	outputPath: string,

     

       11
       12
        
       	width = 1200,

     

       12
       13
        
       	height = 630,

     
···

       15
       16
        
       

     

       16
       17
        
       	await page.setViewport({ width, height });

     

       17
       18
        
       

     

       18
       18
       -
       	await page.setContent(template.toString().replace("{{postname}}", postname));

     

       19
       19
       +
       	await page.setContent(

     

       20
       20
       +
       		template

     

       21
       21
       +
       			.toString()

     

       22
       22
       +
       			.replace("{{postname}}", postname)

     

       23
       23
       +
       			.replace("{{type}}", type),

     

       24
       24
       +
       	);

     

       19
       25
        
       

     

       20
       26
        
       	await page.screenshot({ path: outputPath });

     

       21
       27
        
       }

     
···

       40
       46
        
       	}

     

       41
       47
        
       

     

       42
       48
        
       	// read all the files in the current directory filtering for index.htmls

     

       43
       43
       -
       	const files = (await readdir("public/", { recursive: true }))

     

       44
       44
       -
       		.filter((file) => file.endsWith("index.html"))

     

       45
       45
       -
       		.filter((file) => file !== "index.html");

     

       49
       49
       +
       	const files = (await readdir("public/", { recursive: true })).filter((file) =>

     

       50
       50
       +
       		file.endsWith("index.html"),

     

       51
       51
       +
       	);

     

       46
       52
        
       

     

       47
       53
        
       	const directories = new Set(

     

       48
       54
        
       		files.map((file) => file.replace("index.html", "")),

     
···

       66
       72
        
       	// for each file, get the title tag from the index.html

     

       67
       73
        
       	for (const file of files) {

     

       68
       74
        
       		const index = await Bun.file(`public/${file}`).text();

     

       69
       69
       -
       		let title: string;

     

       70
       70
       -
       		if (file.startsWith("tags/")) {

     

       71
       71
       -
       			const parts = file.split("/");

     

       72
       72
       -
       			title = `Tag: ${parts[1]}`; // take the next directory as the title

     

       73
       73
       -
       		} else {

     

       74
       74
       -
       			const match = index.match(/<title>(.*?)<\/title>/);

     

       75
       75
       -
       			if (match) {

     

       76
       76
       -
       				title = match[1];

     

       77
       77
       -
       			} else {

     

       78
       78
       -
       				console.error(`No title found for ${file}`);

     

       79
       79
       -
       				continue;

     

       80
       80
       -
       			}

     

       75
       75
       +
       		const title = index.match(/<title>(.*?)<\/title>/)[1];

     

       76
       76
       +
       		let type = "Page";

     

       77
       77
       +
       		switch (file.split("/")[0]) {

     

       78
       78
       +
       			case "blog":

     

       79
       79
       +
       				type = "Blog";

     

       80
       80
       +
       				break;

     

       81
       81
       +
       			case "verify":

     

       82
       82
       +
       			case "pfp":

     

       83
       83
       +
       				type = "Slash Page";

     

       84
       84
       +
       				break;

     

       85
       85
       +
       			case "tags":

     

       86
       86
       +
       				if (file.split("/")[1] === "index.html") {

     

       87
       87
       +
       					type = "Tags";

     

       88
       88
       +
       				} else {

     

       89
       89
       +
       					type = "Tag";

     

       90
       90
       +
       				}

     

       91
       91
       +
       				break;

     

       92
       92
       +
       			case "index.html":

     

       93
       93
       +
       				type = "Root";

     

       94
       94
       +
       				break;

     

       81
       95
        
       		}

     

       82
       96
        
       

     

       83
       83
       -
       		console.log("Generating OG for", title);

     

       84
       84
       -
       		await og(title, `static/${file.replace("index.html", "og.png")}`);

     

       97
       97
       +
       		console.log("Generating OG for", file, "title:", title, "with type:", type);

     

       98
       98
       +
       		await og(title, type, `static/${file.replace("index.html", "og.png")}`);

     

       85
       99
        
       	}

     

       86
       100
        
       } catch (e) {

     

       87
       101
        
       	console.error(e);

+63 -10

tools/og.html

···

       14
       14
        
               --accent-text: var(--bg);

     

       15
       15
        
               --border: #dbd5bc;

     

       16
       16
        
               --link: #e2c8a2;

     

       17
       17
       +
               --gradient-average-light: oklch(86.49% 0.018 73.05);

     

       18
       18
       +
               --gradient-average-dark: oklch(27.58% 0.0203 289.13);

     

       19
       19
       +
               --nightshade-violet: oklch(22.96% 0.0242 287.67);

     

       20
       20
       +
               --purple-night: oklch(18.96% 0.0242 287.67);

     

       21
       21
       +
               --dark-crushed-grape: oklch(74.02% 0.0756 311.96);

     

       22
       22
       +
               --light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       23
       23
       +
               --reseda-green: oklch(62.33% 0.0475 126.94);

     

       24
       24
       +
               --earth-yellow: oklch(87.45% 0.0203 74.93);

     

       25
       25
       +
               --sunset: oklch(87.45% 0.0334 74.93);

     

       26
       26
       +
               --ultra-violet: oklch(42.21% 0.0676 297.45);

     

       27
       27
       +
               --rose-quartz: oklch(65.32% 0.0585 311.96);

     

       28
       28
       +
               --pink-puree: oklch(75.65% 0.0555 290.76);

     

       29
       29
       +
               --lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       30
       30
       +
               --purple-gray: oklch(25.63% 0.0002 290.76);

     

       31
       31
       +
               --alice-blue: oklch(95.38% 0.0118 239.91);

     

       17
       32
        
             }

     

       18
       33
        
       

     

       19
       34
        
             body {

     

       20
       35
        
               font-weight: 600;

     

       21
       21
       -
               color: #d6d6d6;

     

       22
       22
       -
               background-color: #222529;

     

       36
       36
       +
               color: var(--lavendar-breeze);

     

       37
       37
       +
               background-color: var(--purple-night);

     

       23
       38
        
               font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono",

     

       24
       39
        
                 monospace;

     

       25
       40
        
               display: flex;

     
···

       42
       57
        
       

     

       43
       58
        
             h1 {

     

       44
       59
        
               font-size: calc(

     

       45
       45
       -
                 2rem + 2vw

     

       46
       46
       -
               ); /* Adjust font size based on viewport width */

     

       47
       47
       -
               margin: 0.5em 0;

     

       48
       48
       -
               line-height: 1.1;

     

       60
       60
       +
                 2 * 2vw

     

       61
       61
       +
               );

     

       62
       62
       +
             }

     

       63
       63
       +
             h2 {

     

       64
       64
       +
               font-size: calc(

     

       65
       65
       +
                 1.75 * 2vw

     

       66
       66
       +
               );

     

       67
       67
       +
             }

     

       68
       68
       +
             h3 {

     

       69
       69
       +
               font-size: calc(

     

       70
       70
       +
                 1.5 * 2vw

     

       71
       71
       +
               );

     

       72
       72
       +
             }

     

       73
       73
       +
             h4 {

     

       74
       74
       +
               font-size: calc(

     

       75
       75
       +
                 1.25 * 2vw

     

       76
       76
       +
               );

     

       77
       77
       +
             }

     

       78
       78
       +
             h5 {

     

       79
       79
       +
               font-size: calc(

     

       80
       80
       +
                 1 * 2vw

     

       81
       81
       +
               );

     

       82
       82
       +
             }

     

       83
       83
       +
             h6 {

     

       84
       84
       +
               font-size: calc(

     

       85
       85
       +
                 0.75 * 2vw

     

       86
       86
       +
               );

     

       49
       87
        
             }

     

       50
       88
        
       

     

       51
       51
       -
             h1::before {

     

       52
       52
       -
               color: var(--accent);

     

       53
       53
       -
               content: "# ";

     

       89
       89
       +
             h1,

     

       90
       90
       +
             h2,

     

       91
       91
       +
             h3,

     

       92
       92
       +
             h4,

     

       93
       93
       +
             h5,

     

       94
       94
       +
             h6 {

     

       95
       95
       +
               margin: 0.5em 0 0.5em 0;

     

       96
       96
       +
               padding: 0.22em 0.4em 0.22em 0.4em;

     

       97
       97
       +
               border-radius: 0.1em;

     

       98
       98
       +
               width: fit-content;

     

       99
       99
       +
               color: var(--lavendar-breeze);

     

       100
       100
       +
             }

     

       101
       101
       +
       

     

       102
       102
       +
             h1 {

     

       103
       103
       +
               background-color: var(--rose-quartz);

     

       104
       104
       +
               color: var(--purple-gray);

     

       54
       105
        
             }

     

       55
       106
        
       

     

       56
       107
        
             p {

     

       57
       108
        
               margin: 1rem 0;

     

       109
       109
       +
               color: var(--pink-puree);

     

       58
       110
        
               font-size: calc(

     

       59
       111
        
                 1rem + 1vw

     

       60
       112
        
               ); /* Adjust font size based on viewport width */

     
···

       63
       115
        
         </head>

     

       64
       116
        
         <body>

     

       65
       117
        
           <div>

     

       66
       66
       -
             <h1>{{postname}}</h1>

     

       118
       118
       +
             <h1>{{type}}</h1>

     

       119
       119
       +
             <h2>{{postname}}</h2>

     

       67
       120
        
             <p>By Kieran Klukas</p>

     

       68
       121
        
           </div>

     

       69
       122
        
         </body>