10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-06-05 15:08:00 +09:00
Code Issues Packages Projects Releases Wiki Activity

Update theme to Astro v6 stable and switch to built-in Fonts API

Browse Source 
* Updated theme to Astro v6 stable
* Replaced third-party astro-font with the built-in Fonts API
This commit is contained in:
Al Murad Uzzaman
2026-03-11 10:23:14 +06:00
parent 056dd1727f
commit c04ffb8b3b
5 changed files with 70 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.config.mjs
+37 -1
View File
@@ -3,11 +3,46 @@ import react from "@astrojs/react";
import sitemap from "@astrojs/sitemap";
import tailwindcss from "@tailwindcss/vite";
import AutoImport from "astro-auto-import";
import { defineConfig } from "astro/config";
import { defineConfig, fontProviders } from "astro/config";
import remarkCollapse from "remark-collapse";
import remarkToc from "remark-toc";
import sharp from "sharp";
import config from "./src/config/config.json";
import theme from "./src/config/theme.json";
// Helper to parse font string format: "FontName:wght@400;500;600;700"
function parseFontString(fontStr) {
const [name, weightPart] = fontStr.split(":");
let weights = [400]; // default weight
if (weightPart) {
// Extract weights from wght@400;500;600 format
const weightMatch = weightPart.match(/wght@?([\d;]+)/);
if (weightMatch) {
weights = weightMatch[1].split(";").map((w) => parseInt(w, 10));
}
}
return { name, weights };
}
// Build fonts configuration from theme.json
const fontsConfig = Object.entries(theme.fonts.font_family)
.filter(([key]) => !key.includes("_type")) // Filter out type entries
.map(([key, fontStr]) => {
const { name, weights } = parseFontString(fontStr);
const typeKey = `${key}_type`;
const fallback = theme.fonts.font_family[typeKey] || "sans-serif";
return {
name,
cssVariable: `--font-${key}`,
provider: fontProviders.google(),
weights,
display: "swap",
fallbacks: [fallback],
};
});
// https://astro.build/config
export default defineConfig({
@@ -16,6 +51,7 @@ export default defineConfig({
trailingSlash: config.site.trailing_slash ? "always" : "never",
image: { service: sharp() },
vite: { plugins: [tailwindcss()] },
fonts: fontsConfig,
integrations: [
react(),
sitemap(),
package.json
+12 -13
View File
@@ -1,6 +1,6 @@
{
"name": "astroplate",
"version": "6.0.0",
"version": "6.0.1",
"description": "Astro and Tailwindcss boilerplate",
"author": "zeon.studio",
"license": "MIT",
@@ -18,25 +18,24 @@
"preview:cf-workers": "npm run build && wrangler dev"
},
"dependencies": {
"@astrojs/check": "0.9.7-beta.1",
"@astrojs/mdx": "5.0.0-beta.9",
"@astrojs/react": "5.0.0-beta.3",
"@astrojs/sitemap": "3.7.0",
"@astrojs/check": "0.9.7",
"@astrojs/mdx": "5.0.0",
"@astrojs/react": "5.0.0",
"@astrojs/sitemap": "3.7.1",
"@digi4care/astro-google-tagmanager": "^1.6.0",
"@justinribeiro/lite-youtube": "^1.9.0",
"astro": "6.0.0-beta.17",
"astro": "6.0.2",
"astro-auto-import": "^0.5.1",
"astro-font": "^1.1.0",
"astro-swiper": "^2.1.1",
"astro-swiper": "^2.2.1",
"date-fns": "^4.1.0",
"disqus-react": "^1.1.7",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"marked": "^17.0.3",
"marked": "^17.0.4",
"prop-types": "^15.8.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-icons": "^5.5.0",
"react-icons": "^5.6.0",
"remark-collapse": "^0.1.2",
"remark-toc": "^9.0.0",
"sharp": "^0.34.5",
@@ -46,17 +45,17 @@
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.2.1",
"@types/node": "25.3.3",
"@types/node": "25.4.0",
"@types/react": "19.2.14",
"@types/react-dom": "19.2.3",
"concurrently": "^9.2.1",
"eslint": "^10.0.2",
"eslint": "^10.0.3",
"prettier": "^3.8.1",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.7.2",
"tailwind-bootstrap-grid": "^7.0.0",
"tailwindcss": "^4.2.1",
"typescript": "^5.9.3",
"wrangler": "^4.69.0"
"wrangler": "^4.72.0"
}
}
readme.md
+3 -3
View File
@@ -12,8 +12,8 @@
</h2>
<p align=center>
<a href="https://github.com/withastro/astro/releases/tag/astro%406.0.0-beta.17">
<img src="https://img.shields.io/static/v1?label=ASTRO&message=6.0%20beta&color=000&logo=astro" alt="Astro Version 6.0 beta"/>
<a href="https://github.com/withastro/astro/releases/tag/astro%406.0.2">
<img src="https://img.shields.io/static/v1?label=ASTRO&message=6.0.2&color=000&logo=astro" alt="Astro Version 6.0.2"/>
</a>
<a href="https://github.com/zeon-studio/astroplate/blob/main/LICENSE">
@@ -70,7 +70,7 @@
### 📦 Dependencies
- astro v6.0.0-beta+
- astro v6.0.2
- node v22.12.0+ (see `.nvmrc`)
- yarn v1.22+
- tailwind v4+
src/layouts/Base.astro
+17 -44
View File
@@ -10,26 +10,15 @@ import {
GoogleTagmanager,
GoogleTagmanagerNoscript,
} from "@digi4care/astro-google-tagmanager";
import { AstroFont } from "astro-font";
import { Font } from "astro:assets";
import { ClientRouter } from "astro:transitions";
import Announcement from "./helpers/Announcement";
import SearchModal from "./helpers/SearchModal";
// font families
const pf = theme.fonts.font_family.primary;
const sf = theme.fonts.font_family.secondary;
let fontPrimary, fontSecondary;
if (theme.fonts.font_family.primary) {
fontPrimary = theme.fonts.font_family.primary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
}
if (theme.fonts.font_family.secondary) {
fontSecondary = theme.fonts.font_family.secondary
.replace(/\+/g, " ")
.replace(/:[ital,]*[ital@]*[wght@]*[0-9,;.]+/gi, "");
}
// font families - extract font names for Font component (filter out type keys)
const fontEntries = Object.entries(theme.fonts.font_family).filter(
([key]) => !key.includes("_type"),
);
// types for frontmatters
export interface Props {
@@ -73,29 +62,13 @@ const { title, meta_title, description, image, noindex, canonical } =
<meta name="generator" content={Astro.generator} />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- google font css -->
<AstroFont
config={[
{
src: [],
preload: false,
display: "swap",
name: fontPrimary!,
fallback: "sans-serif",
cssVariable: "font-primary",
googleFontsURL: `https://fonts.googleapis.com/css2?family=${pf}&display=swap`,
},
{
src: [],
preload: false,
display: "swap",
name: fontSecondary!,
fallback: "sans-serif",
cssVariable: "font-secondary",
googleFontsURL: `https://fonts.googleapis.com/css2?family=${sf}&display=swap`,
},
]}
/>
<!-- google font css - Astro 6 built-in Font API -->
{
fontEntries.map(([key]) => {
const cssVar = `--font-${key}` as any;
return <Font cssVariable={cssVar} preload />;
})
}
<!-- responsive meta -->
<meta
@@ -118,7 +91,7 @@ const { title, meta_title, description, image, noindex, canonical } =
<meta
name="description"
content={plainify(
description ? description : config.metadata.meta_description
description ? description : config.metadata.meta_description,
)}
/>
@@ -131,7 +104,7 @@ const { title, meta_title, description, image, noindex, canonical } =
<meta
property="og:title"
content={plainify(
meta_title ? meta_title : title ? title : config.site.title
meta_title ? meta_title : title ? title : config.site.title,
)}
/>
@@ -139,7 +112,7 @@ const { title, meta_title, description, image, noindex, canonical } =
<meta
property="og:description"
content={plainify(
description ? description : config.metadata.meta_description
description ? description : config.metadata.meta_description,
)}
/>
<meta property="og:type" content="website" />
@@ -152,7 +125,7 @@ const { title, meta_title, description, image, noindex, canonical } =
<meta
name="twitter:title"
content={plainify(
meta_title ? meta_title : title ? title : config.site.title
meta_title ? meta_title : title ? title : config.site.title,
)}
/>
@@ -160,7 +133,7 @@ const { title, meta_title, description, image, noindex, canonical } =
<meta
name="twitter:description"
content={plainify(
description ? description : config.metadata.meta_description
description ? description : config.metadata.meta_description,
)}
/>
src/layouts/helpers/SearchModal.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ const SearchModal = () => {
const [searchString, setSearchString] = useState("");
// handle input change
const handleSearch = (e: React.FormEvent<HTMLInputElement>) => {
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchString(e.currentTarget.value.replace("\\", "").toLowerCase());
};