songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate Geist font and update site configuration

Browse Source
This commit is contained in:
javayhu 2025-02-25 00:49:58 +08:00
parent f507c44959
commit 59f023e933
8 changed files with 145 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -34,6 +34,7 @@
"date-fns": "^4.1.0",
"dotenv": "^16.4.7",
"drizzle-orm": "^0.39.3",
"geist": "^1.3.1",
"lucide-react": "^0.475.0",
"mdast-util-toc": "^7.1.0",
"motion": "^12.4.3",

12
pnpm-lock.yaml generated
View File

@ -83,6 +83,9 @@ importers:
drizzle-orm:
specifier: ^0.39.3
version: 0.39.3(@neondatabase/serverless@0.10.4)(@opentelemetry/api@1.9.0)(@types/pg@8.11.11)(kysely@0.27.5)(pg@8.13.3)
geist:
specifier: ^1.3.1
version: 1.3.1(next@15.1.7(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
lucide-react:
specifier: ^0.475.0
version: 0.475.0(react@19.0.0)
@ -2358,6 +2361,11 @@ packages:
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
geist@1.3.1:
resolution: {integrity: sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==}
peerDependencies:
next: '>=13.2.0'
get-caller-file@2.0.5:
resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
engines: {node: 6.* || 8.* || >= 10.*}
@ -5536,6 +5544,10 @@ snapshots:
function-bind@1.1.2: {}
geist@1.3.1(next@15.1.7(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)):
dependencies:
next: 15.1.7(@opentelemetry/api@1.9.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
get-caller-file@2.0.5: {}
get-intrinsic@1.2.7:

2
src/app/(public)/blog/[...slug]/page.tsx
View File

@ -121,7 +121,7 @@ export default async function BlogPostPage(props: NextPageProps) {
</div>
{/* blog post content */}
<div className="mt-4">
<div className="mt-4 font-serif">
<Mdx code={post.body.code} />
{/* {markdownContent && <BlogCustomMdx source={markdownContent} />} */}
</div>

13
src/app/layout.tsx
View File

@ -6,11 +6,9 @@ import { cn } from "@/lib/utils";
import { ThemeProvider } from "next-themes";
import { Toaster } from "@/components/ui/sonner";
import { TailwindIndicator } from "@/components/tailwind-indicator";
import {
fontBricolageGrotesque,
fontSourceSans,
fontSourceSerif4,
} from "@/assets/fonts";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { fontSourceSans, fontSourceSerif4 } from "@/assets/fonts";
export const metadata: Metadata = constructMetadata();
@ -32,10 +30,11 @@ export default function RootLayout({ children }: PropsWithChildren) {
<body
className={cn(
"min-h-screen bg-background antialiased",
fontBricolageGrotesque.className,
GeistSans.className,
fontSourceSerif4.variable,
fontSourceSans.variable,
fontBricolageGrotesque.variable,
GeistSans.variable,
GeistMono.variable,
)}
>
<ThemeProvider

19
src/assets/fonts/index.ts
View File

@ -1,32 +1,23 @@
import localFont from "next/font/local";
import { Source_Serif_4 } from "next/font/google";
/**
* use local font
* This file shows how to customize the font by using local font and google font
*
* [1] use local font
*
* 1. Get font file from https://gwfh.mranftl.com/fonts
* 2. Add font file to the assets/fonts folder
* 3. Add font variable to the font object
*/
// https://gwfh.mranftl.com/fonts/source-serif-4?subsets=latin
// export const fontSourceSerif = localFont({
// src: "./source-serif-4-v8-latin-regular.woff2",
// variable: "--font-source-serif",
// });
// https://gwfh.mranftl.com/fonts/source-sans-3?subsets=latin
export const fontSourceSans = localFont({
src: "./source-sans-3-v15-latin-regular.woff2",
variable: "--font-source-sans",
});
// https://gwfh.mranftl.com/fonts/bricolage-grotesque?subsets=latin
export const fontBricolageGrotesque = localFont({
src: "./bricolage-grotesque-v7-latin-regular.woff2",
variable: "--font-bricolage",
});
/**
* use google font
* [2] use google font
*
* 1. You can browser fonts at Google Fonts
* https://fonts.google.com

9
src/config/site.ts
View File

@ -6,9 +6,9 @@ export const siteConfig: SiteConfig = {
name: "MkSaaS",
title: "MkSaaS - The Best AI SaaS Boilerplate",
tagline:
"Make AI SaaS Websites in hours, simply and effortlessly",
"Make AI SaaS in hours, simply and effortlessly",
description:
"MkSaaS is the best AI SaaS boilerplate. Make AI SaaS websites in hours, simply and effortlessly",
"MkSaaS is the best AI SaaS boilerplate. Make AI SaaS in hours, simply and effortlessly",
keywords: [
"SaaS",
"SaaS Website",
@ -20,11 +20,6 @@ export const siteConfig: SiteConfig = {
url: SITE_URL ?? "",
image: `${SITE_URL}/og.png`,
mail: "support@mksaas.com",
utm: {
source: "mksaas.com",
medium: "referral",
campaign: "navigation",
},
links: {
twitter: "https://x.com/javay_hu",
bluesky: "https://bsky.app/profile/javayhu.com",

5
src/types/index.d.ts vendored
View File

@ -14,11 +14,6 @@ export type SiteConfig = {
url: string;
image: string;
mail: string;
utm: {
source: string;
medium: string;
campaign: string;
};
links: {
github?: string;
twitter?: string;

231
tailwind.config.ts
View File

@ -1,117 +1,122 @@
import type { Config } from "tailwindcss";
export default {
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
},
'color-1': 'hsl(var(--color-1))',
'color-2': 'hsl(var(--color-2))',
'color-3': 'hsl(var(--color-3))',
'color-4': 'hsl(var(--color-4))',
'color-5': 'hsl(var(--color-5))'
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
animation: {
'shiny-text': 'shiny-text 8s infinite',
rainbow: 'rainbow var(--speed, 2s) infinite linear',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
},
keyframes: {
'shiny-text': {
'0%, 90%, 100%': {
'background-position': 'calc(-100% - var(--shiny-width)) 0'
},
'30%, 60%': {
'background-position': 'calc(100% + var(--shiny-width)) 0'
}
},
rainbow: {
'0%': {
'background-position': '0%'
},
'100%': {
'background-position': '200%'
}
},
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
}
}
},
plugins: [require("tailwindcss-animate")],
darkMode: ["class"],
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
serif: ['var(--font-source-serif)'],
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
},
'color-1': 'hsl(var(--color-1))',
'color-2': 'hsl(var(--color-2))',
'color-3': 'hsl(var(--color-3))',
'color-4': 'hsl(var(--color-4))',
'color-5': 'hsl(var(--color-5))'
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
animation: {
'shiny-text': 'shiny-text 8s infinite',
rainbow: 'rainbow var(--speed, 2s) infinite linear',
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
},
keyframes: {
'shiny-text': {
'0%, 90%, 100%': {
'background-position': 'calc(-100% - var(--shiny-width)) 0'
},
'30%, 60%': {
'background-position': 'calc(100% + var(--shiny-width)) 0'
}
},
rainbow: {
'0%': {
'background-position': '0%'
},
'100%': {
'background-position': '200%'
}
},
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
}
}
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;