From 30525f0d30a4a56cea3b61859d769017aeb428b7 Mon Sep 17 00:00:00 2001 From: Thada Wangthammang Date: Tue, 31 Dec 2024 11:04:53 +0700 Subject: [PATCH] feat: improve lighthouse --- sass/main.scss | 121 +------ sass/preload-main.scss | 125 ++++++++ templates/_base.html | 10 +- templates/_custom_font.html | 609 +++++++++++++++++++++++++++++++++++- templates/home.html | 3 +- templates/post.html | 3 +- templates/prose.html | 64 ++++ 7 files changed, 809 insertions(+), 126 deletions(-) create mode 100644 sass/preload-main.scss create mode 100644 templates/prose.html diff --git a/sass/main.scss b/sass/main.scss index 3b5f37a..80464bc 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -608,126 +608,7 @@ } } - /* homepage - ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - - body.homepage { - #wrapper { - width: 100%; - min-height: 100vh; - min-height: 100dvh; - display: flex; - justify-content: center; - align-items: center; - font-size: var(--homepage-font-size); - } - - main { - width: 100%; - max-width: var(--homepage-max-width); - min-height: 75vh; - min-height: 75dvh; - padding: 4em 0; - @media screen and (max-width: 425px) { - & { - padding: 2em 0; - } - } - } - - #info { - padding: 0 15px; - display: flex; - gap: 1em; - - img { - height: var(--avatar-size); - width: var(--avatar-size); - border-radius: 50%; - } - - #text { - display: flex; - flex-direction: column; - justify-content: space-around; - line-height: 1.5; - gap: 0.5em; - } - - #name, #id { - font-size: 1.1em; - } - - #id { - margin-left: 0.5em; - color: var(--primary-color); - } - - #bio { - color: var(--text-pale-color); - font-weight: 300; - } - } - - #links { - padding: 0 15px; - margin: 1.75em 0 1.75em; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1em; - font-size: 1.1em; - - a, - button { - text-decoration: none; - color: var(--text-color); - - @media (hover: hover) { - &:hover { - color: var(--primary-color); - } - } - } - - #left { - display: flex; - flex-wrap: wrap; - gap: 1em; - - a { - border-bottom: 1.5px solid var(--primary-color); - line-height: 1.5; - } - } - - #right { - display: flex; - gap: 0.5em; - - button { - padding: 0; - border: none; - background-color: transparent; - cursor: pointer; - } - } - - @media (max-width: 425px) { - #left { - gap: 0.75em; - } - } - } - - #brief { - padding: 0 15px; - font-size: 1em; - line-height: var(--homepage-line-height); - } - } - + /* header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ diff --git a/sass/preload-main.scss b/sass/preload-main.scss new file mode 100644 index 0000000..8a91bd0 --- /dev/null +++ b/sass/preload-main.scss @@ -0,0 +1,125 @@ +/** + * Prevent Layout Shifts + */ + +/* homepage + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +body.homepage { + #wrapper { + width: 100%; + min-height: 100vh; + min-height: 100dvh; + display: flex; + justify-content: center; + align-items: center; + font-size: var(--homepage-font-size); + } + + main { + width: 100%; + max-width: var(--homepage-max-width); + min-height: 75vh; + min-height: 75dvh; + padding: 4em 0; + + @media screen and (max-width: 425px) { + & { + padding: 2em 0; + } + } + } + + #info { + padding: 0 15px; + display: flex; + gap: 1em; + + img { + height: var(--avatar-size); + width: var(--avatar-size); + border-radius: 50%; + } + + #text { + display: flex; + flex-direction: column; + justify-content: space-around; + line-height: 1.5; + gap: 0.5em; + } + + #name, + #id { + font-size: 1.1em; + } + + #id { + margin-left: 0.5em; + color: var(--primary-color); + } + + #bio { + color: var(--text-pale-color); + font-weight: 300; + } + } + + #links { + padding: 0 15px; + margin: 1.75em 0 1.75em; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1em; + font-size: 1.1em; + + a, + button { + text-decoration: none; + color: var(--text-color); + + @media (hover: hover) { + &:hover { + color: var(--primary-color); + } + } + } + + #left { + display: flex; + flex-wrap: wrap; + gap: 1em; + + a { + border-bottom: 1.5px solid var(--primary-color); + line-height: 1.5; + } + } + + #right { + display: flex; + gap: 0.5em; + + button { + padding: 0; + border: none; + background-color: transparent; + cursor: pointer; + } + } + + @media (max-width: 425px) { + #left { + gap: 0.75em; + } + } + } + + #brief { + padding: 0 15px; + font-size: 1em; + line-height: var(--homepage-line-height); + } +} \ No newline at end of file diff --git a/templates/_base.html b/templates/_base.html index 29a4bff..3f7c628 100644 --- a/templates/_base.html +++ b/templates/_base.html @@ -13,14 +13,18 @@ {% include "_custom_font.html" %} {% include "_custom_css.html" %} - + + + + {% block head %}{% endblock head %} {% include "_head_extend.html" %} {%- block seo %} {%- endblock seo %} - + {% if not config.extra.force_theme %} - + \ No newline at end of file diff --git a/templates/_custom_font.html b/templates/_custom_font.html index a7357f9..1b71fec 100644 --- a/templates/_custom_font.html +++ b/templates/_custom_font.html @@ -1,3 +1,610 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/templates/home.html b/templates/home.html index 4b28247..3b73a32 100644 --- a/templates/home.html +++ b/templates/home.html @@ -10,7 +10,8 @@ {% block head %} {% if config.markdown.highlight_theme == "css" %} - + {% endif %} {% if section.extra.math %} {{ macro_math::math_render(style = section.extra.math) }} diff --git a/templates/post.html b/templates/post.html index 1bf4593..3f12c64 100644 --- a/templates/post.html +++ b/templates/post.html @@ -23,7 +23,8 @@ {% block head %} {% if config.markdown.highlight_theme == "css" %} - + {% endif %} {% if page.extra.math %} {{ macro_math::math_render(style = page.extra.math) }} diff --git a/templates/prose.html b/templates/prose.html new file mode 100644 index 0000000..d341e68 --- /dev/null +++ b/templates/prose.html @@ -0,0 +1,64 @@ +{% import 'macros/math.html' as macro_math -%} +{% extends "_base.html" %} + +{% block page %}prose-page{% endblock page %} +{% block lang -%} +{%- if section.extra.lang %}{{section.extra.lang}}{% else %}{{page.lang}}{% endif -%} +{%- endblock lang %} +{% block title %}{{ section.title }}{% endblock title %} +{% block desc %} + +{% endblock desc %} + +{% block head %} +{% if config.markdown.highlight_theme == "css" %} + +{% endif %} +{% if section.extra.math %} + {{ macro_math::math_render(style = section.extra.math) }} +{% endif %} +{% endblock head %} + +{% block content %} +{% include "_header.html" %} +
+
+
+ {% if section.extra.copy is defined %}{% set allow_copy = section.extra.copy %}{% else %}{% set allow_copy = config.extra.copy %}{% endif %} + {% if allow_copy %} + {% set copy_icon = load_data(path="static/icon/copy.svg") %} + {% set check_icon = load_data(path="static/icon/check.svg") %} + + {% endif %} + {% set backlink_icon = load_data(path="static/icon/backlink.svg") %} +
+ {{ section.content | safe }} +
+ + {% if section.extra.reaction is defined %}{% set show_reaction = section.extra.reaction %}{% else %}{% set show_reaction = config.extra.reaction %}{% endif %} + {% if show_reaction %} +
+ {% endif %} + + {% if section.extra.comment is defined %}{% set show_comment = section.extra.comment %}{% else %}{% set show_comment = config.extra.comment %}{% endif %} + {% if show_comment %} +
+ {% include "_giscus_script.html" %} + {% endif %} +
+ + {% include "_footer.html" %} +
+
+{% endblock content %} + +{% block script %} + +{% if section.extra.mermaid %} + +{% endif %} +{% endblock script %}