SanYeCao-blog/src/pages/[lang]/index.astro

76 lines
2 KiB
Text

---
import BaseLayout from "@/layouts/BaseLayout.astro";
import PostList from "@/components/Posts/PostList.astro";
import Remark42LatestComments from "@/components/remark42-latest-comments.svelte";
import LatestComments from "@/components/LatestComments.astro";
import { getLangFromUrl, getTranslations } from "@/i18n";
import "@/styles/global.css";
export function getStaticPaths() {
return [{ params: { lang: "zh" } }, { params: { lang: "en" } }];
}
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
const headerTitle = lang === "zh" ? "Cloverta的博客" : "Cloverta's blog";
const pageTitle = t.home.title;
const rssLink = lang === "zh" ? "/rss.xml" : "/en/rss.xml"
---
<BaseLayout pageTitle=`${headerTitle} - ${t.banner.subtitle}`>
<h1 class="page-title">
<span>{pageTitle}</span>
<a
href={rssLink}
target="_blank"
rel="noopener noreferrer"
aria-label="RSS Feed"
class="rss-link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="33"
height="33"
aria-hidden="true"
style="margin-left: 0px; margin-bottom: -5px; color:#3f50e5"
>
<path
d="M6.18 17.82a1.64 1.64 0 1 1 0 3.28 1.64 1.64 0 0 1 0-3.28ZM3 10.44v2.25c4.56 0 8.27 3.71 8.27 8.27h2.25C13.52 15.16 8.84 10.44 3 10.44Zm0-4.54v2.25c7.06 0 12.81 5.75 12.81 12.81h2.25C18.06 12.66 11.3 5.9 3 5.9Z"
></path>
</svg>
</a>
</h1>
<div class="content">
{t.home.content.map((line: string) => <p set:html={line} />)}
</div>
<div class="section-divider"></div>
<h2>{t.home.latestTitle}</h2>
<PostList />
<div class="section-divider"></div>
<!-- <Remark42LatestComments lang={lang} client:load /> -->
<LatestComments />
</BaseLayout>
<style>
.section-divider {
height: 1px;
background: #cdd2d8;
margin: 1.5rem 0;
opacity: 0.8;
}
:global(.dark) .section-divider {
background: #7f8b97;
}
.page-title {
font-weight: 700;
}
</style>