diff --git a/astro.config.mjs b/astro.config.mjs index ab84f40..00af0ef 100755 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -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(), diff --git a/package.json b/package.json index e37d61a..200b2d4 100755 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/readme.md b/readme.md index e88057d..f60d1d6 100755 --- a/readme.md +++ b/readme.md @@ -12,8 +12,8 @@

- - Astro Version 6.0 beta + + Astro Version 6.0.2 @@ -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+ diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index f67b47e..72c9705 100755 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -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 } = - - + + { + fontEntries.map(([key]) => { + const cssVar = `--font-${key}` as any; + return ; + }) + } @@ -131,7 +104,7 @@ const { title, meta_title, description, image, noindex, canonical } = @@ -139,7 +112,7 @@ const { title, meta_title, description, image, noindex, canonical } = @@ -152,7 +125,7 @@ const { title, meta_title, description, image, noindex, canonical } = @@ -160,7 +133,7 @@ const { title, meta_title, description, image, noindex, canonical } = diff --git a/src/layouts/helpers/SearchModal.tsx b/src/layouts/helpers/SearchModal.tsx index 6d29287..a7809fd 100644 --- a/src/layouts/helpers/SearchModal.tsx +++ b/src/layouts/helpers/SearchModal.tsx @@ -6,7 +6,7 @@ const SearchModal = () => { const [searchString, setSearchString] = useState(""); // handle input change - const handleSearch = (e: React.FormEvent) => { + const handleSearch = (e: React.ChangeEvent) => { setSearchString(e.currentTarget.value.replace("\\", "").toLowerCase()); };