Skip to content

Commit 899ea78

Browse files
jiwonacjiwonac
committed
initial rendering optimizations
1 parent 4f02e1b commit 899ea78

8 files changed

Lines changed: 54 additions & 12 deletions

File tree

‎.eleventy.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = function(eleventyConfig) {
1212
const cssDir = "src/_css";
1313
const outputDir = "_site";
1414
const cssFiles = [
15+
"fonts.css",
1516
"base.css",
1617
"theme.css",
1718
"typography.css",
@@ -36,7 +37,7 @@ module.exports = function(eleventyConfig) {
3637
});
3738

3839
/* Copy some files directly */
39-
eleventyConfig.addPassthroughCopy("src/_scripts/theme-init.js");
40+
eleventyConfig.addPassthroughCopy({ "src/_fonts": "_fonts" });
4041
eleventyConfig.addPassthroughCopy("src/_scripts/theme-toggle.js");
4142
eleventyConfig.addPassthroughCopy("src/_scripts/rough-cards.js");
4243
eleventyConfig.addPassthroughCopy("src/_scripts/microblog-cards.js");

‎src/_css/base.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/* Import subtle handwritten font for headings */
2-
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Caveat:wght@400;600&display=swap');
3-
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
4-
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Grandstander:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
51
:root {
62
/* Shadows & Effects */
73
--shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.08);

‎src/_css/fonts.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* Self-hosted fonts for performance */
2+
3+
/* Inter - Sans-serif body text */
4+
@font-face {
5+
font-family: 'Inter';
6+
font-style: normal;
7+
font-weight: 100 900;
8+
font-display: swap;
9+
src: url('/_fonts/inter-latin.woff2') format('woff2');
10+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
11+
}
12+
13+
/* Grandstander - Semi-handwriting accent font */
14+
@font-face {
15+
font-family: 'Grandstander';
16+
font-style: normal;
17+
font-weight: 100 900;
18+
font-display: swap;
19+
src: url('/_fonts/grandstander-latin.woff2') format('woff2');
20+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
21+
}
22+
23+
/* Architects Daughter - Handwriting headings font */
24+
@font-face {
25+
font-family: 'Architects Daughter';
26+
font-style: normal;
27+
font-weight: 400;
28+
font-display: swap;
29+
src: url('/_fonts/architects-daughter-latin.woff2') format('woff2');
30+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
31+
}

‎src/_fonts/architects-daughter-latin.woff2‎

12.8 KB
Binary file not shown.

‎src/_fonts/grandstander-latin.woff2‎

41.4 KB
Binary file not shown.

‎src/_fonts/inter-latin.woff2‎

47.1 KB
Binary file not shown.

‎src/_includes/_head.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,22 @@
3737
<!-- RSS Autodiscovery -->
3838
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="{{ metadata.baseURL }}/feed.xml">
3939

40-
<!-- Theme init: must load synchronously before CSS to prevent flash -->
41-
<script src="/_scripts/theme-init.js"></script>
40+
<!-- Preload fonts for faster rendering -->
41+
<link rel="preload" href="/_fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
42+
<link rel="preload" href="/_fonts/grandstander-latin.woff2" as="font" type="font/woff2" crossorigin>
43+
<link rel="preload" href="/_fonts/architects-daughter-latin.woff2" as="font" type="font/woff2" crossorigin>
44+
45+
<!-- Theme init: inlined to prevent flash of wrong theme -->
46+
<script>
47+
(function() {
48+
var storageKey = 'theme-preference';
49+
var theme = localStorage.getItem(storageKey);
50+
if (!theme) {
51+
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
52+
}
53+
document.documentElement.setAttribute('data-theme', theme);
54+
})();
55+
</script>
4256

4357
<!-- Stylesheet -->
4458
<link rel="stylesheet" href="/style.css">

‎src/_includes/layout.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,13 @@ <h2>{{ title }}</h2>
5555
<!--footer-->
5656
{% include "_foot.html" %}
5757
<!-- Rough.js library -->
58-
<script src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js"></script>
58+
<script defer src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.js"></script>
5959
<!-- Masonry.js library -->
60-
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
60+
<script defer src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>
6161
<!-- imagesLoaded for Masonry -->
62-
<script src="https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js"></script>
62+
<script defer src="https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js"></script>
6363
<!-- Rough cards initialization -->
64-
<script src="/_scripts/rough-cards.js"></script>
64+
<script defer src="/_scripts/rough-cards.js"></script>
6565
<!-- Microblog cards ragged edges and masonry layout -->
66-
<script src="/_scripts/microblog-cards.js"></script>
66+
<script defer src="/_scripts/microblog-cards.js"></script>
6767
</body>

0 commit comments

Comments
 (0)