├── .gitignore
├── .vscode
├── extensions.json
└── launch.json
├── README.md
├── astro.config.mjs
├── package.json
├── pnpm-lock.yaml
├── public
├── favicon.ico
├── favicon.svg
├── og.png
└── robots.txt
├── src
├── assets
│ ├── houston.webp
│ ├── images
│ │ ├── analytics-google.png
│ │ ├── config-ai-function.png
│ │ ├── dokploy-buildtype.png
│ │ ├── dokploy-deploy.png
│ │ ├── dokploy-domain.png
│ │ ├── dokploy-env.png
│ │ ├── dokploy-settings.png
│ │ ├── github-client.png
│ │ ├── google-client.png
│ │ ├── guide-ad-featured.png
│ │ ├── guide-ad-sponsor-2.png
│ │ ├── guide-ad-sponsor.png
│ │ ├── guide-category-list.png
│ │ ├── guide-category.png
│ │ ├── guide-config-logo.png
│ │ ├── guide-config-website-2.png
│ │ ├── guide-config-website.png
│ │ ├── guide-custom-homepage.png
│ │ ├── guide-custom-page.png
│ │ ├── guide-dev-architecture.png
│ │ ├── guide-dev-console-logs.png
│ │ ├── guide-dev-logs-vercel.png
│ │ ├── guide-email-preview.png
│ │ ├── guide-file-structure.png
│ │ ├── guide-font-file.png
│ │ ├── guide-font-layout.png
│ │ ├── guide-group-list.png
│ │ ├── guide-group.png
│ │ ├── guide-item-card-icon.png
│ │ ├── guide-item-card-image.png
│ │ ├── guide-logo.png
│ │ ├── guide-payment-feature.png
│ │ ├── guide-payment-sponsor.png
│ │ ├── guide-send-notification-email.png
│ │ ├── guide-sponsor-config.png
│ │ ├── guide-sponsor-status.png
│ │ ├── guide-submission-admin.png
│ │ ├── guide-submission-approved.png
│ │ ├── guide-submission-autofill.png
│ │ ├── guide-submission-publish.png
│ │ ├── guide-submission-review.png
│ │ ├── guide-submission-user.png
│ │ ├── guide-sync-code-1.png
│ │ ├── guide-sync-code.png
│ │ ├── guide-theme-blue.png
│ │ ├── guide-theme.png
│ │ ├── openpanel-client.png
│ │ ├── resend-audience.png
│ │ ├── resend-keys.png
│ │ ├── sanity-cors.png
│ │ ├── stripe-key.png
│ │ ├── stripe-price.png
│ │ ├── stripe-webhook.png
│ │ ├── vercel-cloudflare-ssl.png
│ │ ├── vercel-domain.png
│ │ └── vercel-project.png
│ ├── logo-rounded.png
│ └── logo.png
├── components
│ └── Head.astro
├── content
│ ├── config.ts
│ └── docs
│ │ ├── 404.md
│ │ ├── astro.mdx
│ │ ├── configuration
│ │ ├── ai.mdx
│ │ ├── analytics.mdx
│ │ ├── auth.mdx
│ │ ├── resend.mdx
│ │ ├── sanity.mdx
│ │ └── stripe.mdx
│ │ ├── customization
│ │ ├── card.mdx
│ │ ├── category.mdx
│ │ ├── custom-page.mdx
│ │ ├── email.mdx
│ │ ├── font.mdx
│ │ ├── information.mdx
│ │ ├── logo.mdx
│ │ └── theme.mdx
│ │ ├── deployment
│ │ ├── docker.mdx
│ │ ├── dokploy.mdx
│ │ └── vercel.mdx
│ │ ├── faq.mdx
│ │ ├── guide
│ │ ├── develop.mdx
│ │ ├── sanity.mdx
│ │ ├── sponsor-ads.mdx
│ │ └── submission.mdx
│ │ ├── index.mdx
│ │ ├── installation.mdx
│ │ ├── prerequisites.mdx
│ │ └── zh-cn
│ │ ├── configuration
│ │ ├── ai.mdx
│ │ ├── analytics.mdx
│ │ ├── auth.mdx
│ │ ├── resend.mdx
│ │ ├── sanity.mdx
│ │ └── stripe.mdx
│ │ ├── customization
│ │ ├── card.mdx
│ │ ├── category.mdx
│ │ ├── custom-page.mdx
│ │ ├── email.mdx
│ │ ├── font.mdx
│ │ ├── information.mdx
│ │ ├── logo.mdx
│ │ └── theme.mdx
│ │ ├── deployment
│ │ ├── docker.mdx
│ │ ├── dokploy.mdx
│ │ └── vercel.mdx
│ │ ├── faq.mdx
│ │ ├── guide
│ │ ├── develop.mdx
│ │ ├── sanity.mdx
│ │ ├── sponsor-ads.mdx
│ │ └── submission.mdx
│ │ ├── index.mdx
│ │ ├── installation.mdx
│ │ └── prerequisites.mdx
└── env.d.ts
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # build output
2 | dist/
3 | # generated types
4 | .astro/
5 |
6 | # dependencies
7 | node_modules/
8 |
9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 |
15 |
16 | # environment variables
17 | .env
18 | .env.production
19 |
20 | # macOS-specific files
21 | .DS_Store
22 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["astro-build.astro-vscode"],
3 | "unwantedRecommendations": []
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "command": "./node_modules/.bin/astro dev",
6 | "name": "Development server",
7 | "request": "launch",
8 | "type": "node-terminal"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Mkdirs Documentation
2 |
3 | The best directory website template.
4 |
5 | Website: [mkdirs.com](https://mkdirs.com)
6 |
7 | Explore the [live demo](https://demo.mkdirs.com)
8 |
9 | Read the [documentation](https://docs.mkdirs.com)
10 |
11 | Watch the [video tutorial](https://www.youtube.com/@MkdirsHQ)
12 |
13 | > If you find any issues, please [submit an issue](https://github.com/MkdirsHQ/mkdirs-template/issues/new) or contact me at [support@mkdirs.com](mailto:support@mkdirs.com).
14 |
15 | > If you have any feature requests or questions or ideas to share, please [submit it in the discussions](https://github.com/MkdirsHQ/mkdirs-template/discussions).
16 |
--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { defineConfig } from "astro/config";
3 | import starlight from "@astrojs/starlight";
4 |
5 | import sitemap from "@astrojs/sitemap";
6 |
7 | // https://astro.build/config
8 | export default defineConfig({
9 | // site: "http://localhost:4321",
10 | site: "https://docs.mkdirs.com",
11 | integrations: [
12 | sitemap(),
13 | starlight({
14 | title: "Mkdirs",
15 | favicon: "./favicon.ico",
16 | social: {
17 | github: "https://github.com/MkdirsHQ",
18 | twitter: "https://x.com/javay_hu",
19 | youtube: "https://www.youtube.com/@MkdirsHQ",
20 | },
21 | logo: {
22 | src: "./src/assets/logo-rounded.png",
23 | alt: "Mkdirs Logo",
24 | },
25 | // https://starlight.astro.build/guides/i18n/#use-a-root-locale
26 | defaultLocale: "root",
27 | locales: {
28 | root: {
29 | label: "English",
30 | lang: "en",
31 | },
32 | "zh-cn": {
33 | label: "简体中文",
34 | lang: "zh-CN",
35 | },
36 | },
37 | components: {
38 | Head: './src/components/Head.astro',
39 | },
40 | sidebar: [
41 | {
42 | label: "Introduction",
43 | translations: {
44 | "zh-CN": "模板介绍"
45 | },
46 | slug: "index",
47 | },
48 | {
49 | label: "FAQ",
50 | translations: {
51 | "zh-CN": "常见问题"
52 | },
53 | slug: "faq",
54 | },
55 | {
56 | label: "Roadmap",
57 | translations: {
58 | "zh-CN": "路线图"
59 | },
60 | link: "https://github.com/MkdirsHQ/mkdirs-template/issues/10",
61 | },
62 | {
63 | label: "Prerequisites",
64 | translations: {
65 | "zh-CN": "前提条件"
66 | },
67 | slug: "prerequisites",
68 | },
69 | {
70 | label: "Installation",
71 | translations: {
72 | "zh-CN": "安装部署"
73 | },
74 | slug: "installation",
75 | },
76 | {
77 | label: "Configuration",
78 | translations: {
79 | "zh-CN": "配置环境"
80 | },
81 | items: [
82 | {
83 | label: "Sanity",
84 | translations: {
85 | "zh-CN": "数据服务 - Sanity"
86 | },
87 | slug: "configuration/sanity"
88 | },
89 | {
90 | label: "Resend",
91 | translations: {
92 | "zh-CN": "邮件服务 - Resend"
93 | },
94 | slug: "configuration/resend"
95 | },
96 | {
97 | label: "Stripe",
98 | translations: {
99 | "zh-CN": "支付服务 - Stripe"
100 | },
101 | slug: "configuration/stripe"
102 | },
103 | {
104 | label: "Auth",
105 | translations: {
106 | "zh-CN": "认证服务 - Auth"
107 | },
108 | slug: "configuration/auth"
109 | },
110 | {
111 | label: "Analytics",
112 | translations: {
113 | "zh-CN": "数据分析 - Analytics"
114 | },
115 | slug: "configuration/analytics"
116 | },
117 | {
118 | label: "AI",
119 | translations: {
120 | "zh-CN": "AI 模型 - AI"
121 | },
122 | slug: "configuration/ai"
123 | },
124 | ],
125 | },
126 | {
127 | label: "Deployment",
128 | translations: {
129 | "zh-CN": "部署上线"
130 | },
131 | items: [
132 | {
133 | label: "Vercel",
134 | translations: {
135 | "zh-CN": "部署到 Vercel"
136 | },
137 | slug: "deployment/vercel"
138 | },
139 | {
140 | label: "Docker",
141 | translations: {
142 | "zh-CN": "Docker 自部署"
143 | },
144 | slug: "deployment/docker"
145 | },
146 | {
147 | label: "Dokploy",
148 | translations: {
149 | "zh-CN": "部署到 Dokploy"
150 | },
151 | slug: "deployment/dokploy"
152 | },
153 | ],
154 | },
155 | {
156 | label: "Customization",
157 | translations: {
158 | "zh-CN": "自定义"
159 | },
160 | items: [
161 | {
162 | label: "Customize Information",
163 | translations: {
164 | "zh-CN": "自定义网站信息"
165 | },
166 | slug: "customization/information"
167 | },
168 | {
169 | label: "Customize Logo",
170 | translations: {
171 | "zh-CN": "自定义 Logo"
172 | },
173 | slug: "customization/logo"
174 | },
175 | {
176 | label: "Customize Font",
177 | translations: {
178 | "zh-CN": "自定义字体"
179 | },
180 | slug: "customization/font"
181 | },
182 | {
183 | label: "Customize Theme",
184 | translations: {
185 | "zh-CN": "自定义主题"
186 | },
187 | slug: "customization/theme"
188 | },
189 | {
190 | label: "Customize Card",
191 | translations: {
192 | "zh-CN": "自定义卡片样式"
193 | },
194 | slug: "customization/card"
195 | },
196 | {
197 | label: "Customize Category",
198 | translations: {
199 | "zh-CN": "自定义分类"
200 | },
201 | slug: "customization/category"
202 | },
203 | {
204 | label: "Customize Email",
205 | translations: {
206 | "zh-CN": "自定义邮件"
207 | },
208 | slug: "customization/email"
209 | },
210 | {
211 | label: "Customize Page",
212 | translations: {
213 | "zh-CN": "自定义页面"
214 | },
215 | slug: "customization/custom-page"
216 | },
217 | ],
218 | },
219 | {
220 | label: "Guide",
221 | translations: {
222 | "zh-CN": "使用指南"
223 | },
224 | items: [
225 | {
226 | label: "Development",
227 | translations: {
228 | "zh-CN": "开发相关"
229 | },
230 | slug: "guide/develop"
231 | },
232 | {
233 | label: "Submission",
234 | translations: {
235 | "zh-CN": "提交数据"
236 | },
237 | slug: "guide/submission"
238 | },
239 | {
240 | label: "Sponsor Ads",
241 | translations: {
242 | "zh-CN": "赞助广告"
243 | },
244 | slug: "guide/sponsor-ads"
245 | },
246 | {
247 | label: "Sanity",
248 | translations: {
249 | "zh-CN": "Sanity 相关"
250 | },
251 | slug: "guide/sanity"
252 | },
253 | ],
254 | },
255 | ]
256 | }),
257 | ],
258 | });
259 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mkdirs-docs-starlight",
3 | "type": "module",
4 | "version": "0.0.1",
5 | "scripts": {
6 | "dev": "astro dev",
7 | "start": "astro dev",
8 | "build": "astro check && astro build",
9 | "preview": "astro preview",
10 | "astro": "astro"
11 | },
12 | "dependencies": {
13 | "@astrojs/check": "^0.9.4",
14 | "@astrojs/sitemap": "^3.2.1",
15 | "@astrojs/starlight": "^0.28.3",
16 | "astro": "^4.15.3",
17 | "sharp": "^0.32.5",
18 | "typescript": "^5.6.3"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/public/favicon.ico
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/public/og.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 |
4 | Sitemap: https://docs.mkdirs.com/sitemap-index.xml
5 |
--------------------------------------------------------------------------------
/src/assets/houston.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/houston.webp
--------------------------------------------------------------------------------
/src/assets/images/analytics-google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/analytics-google.png
--------------------------------------------------------------------------------
/src/assets/images/config-ai-function.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/config-ai-function.png
--------------------------------------------------------------------------------
/src/assets/images/dokploy-buildtype.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/dokploy-buildtype.png
--------------------------------------------------------------------------------
/src/assets/images/dokploy-deploy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/dokploy-deploy.png
--------------------------------------------------------------------------------
/src/assets/images/dokploy-domain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/dokploy-domain.png
--------------------------------------------------------------------------------
/src/assets/images/dokploy-env.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/dokploy-env.png
--------------------------------------------------------------------------------
/src/assets/images/dokploy-settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/dokploy-settings.png
--------------------------------------------------------------------------------
/src/assets/images/github-client.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/github-client.png
--------------------------------------------------------------------------------
/src/assets/images/google-client.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/google-client.png
--------------------------------------------------------------------------------
/src/assets/images/guide-ad-featured.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-ad-featured.png
--------------------------------------------------------------------------------
/src/assets/images/guide-ad-sponsor-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-ad-sponsor-2.png
--------------------------------------------------------------------------------
/src/assets/images/guide-ad-sponsor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-ad-sponsor.png
--------------------------------------------------------------------------------
/src/assets/images/guide-category-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-category-list.png
--------------------------------------------------------------------------------
/src/assets/images/guide-category.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-category.png
--------------------------------------------------------------------------------
/src/assets/images/guide-config-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-config-logo.png
--------------------------------------------------------------------------------
/src/assets/images/guide-config-website-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-config-website-2.png
--------------------------------------------------------------------------------
/src/assets/images/guide-config-website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-config-website.png
--------------------------------------------------------------------------------
/src/assets/images/guide-custom-homepage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-custom-homepage.png
--------------------------------------------------------------------------------
/src/assets/images/guide-custom-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-custom-page.png
--------------------------------------------------------------------------------
/src/assets/images/guide-dev-architecture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-dev-architecture.png
--------------------------------------------------------------------------------
/src/assets/images/guide-dev-console-logs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-dev-console-logs.png
--------------------------------------------------------------------------------
/src/assets/images/guide-dev-logs-vercel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-dev-logs-vercel.png
--------------------------------------------------------------------------------
/src/assets/images/guide-email-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-email-preview.png
--------------------------------------------------------------------------------
/src/assets/images/guide-file-structure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-file-structure.png
--------------------------------------------------------------------------------
/src/assets/images/guide-font-file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-font-file.png
--------------------------------------------------------------------------------
/src/assets/images/guide-font-layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-font-layout.png
--------------------------------------------------------------------------------
/src/assets/images/guide-group-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-group-list.png
--------------------------------------------------------------------------------
/src/assets/images/guide-group.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-group.png
--------------------------------------------------------------------------------
/src/assets/images/guide-item-card-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-item-card-icon.png
--------------------------------------------------------------------------------
/src/assets/images/guide-item-card-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-item-card-image.png
--------------------------------------------------------------------------------
/src/assets/images/guide-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-logo.png
--------------------------------------------------------------------------------
/src/assets/images/guide-payment-feature.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-payment-feature.png
--------------------------------------------------------------------------------
/src/assets/images/guide-payment-sponsor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-payment-sponsor.png
--------------------------------------------------------------------------------
/src/assets/images/guide-send-notification-email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-send-notification-email.png
--------------------------------------------------------------------------------
/src/assets/images/guide-sponsor-config.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-sponsor-config.png
--------------------------------------------------------------------------------
/src/assets/images/guide-sponsor-status.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-sponsor-status.png
--------------------------------------------------------------------------------
/src/assets/images/guide-submission-admin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-submission-admin.png
--------------------------------------------------------------------------------
/src/assets/images/guide-submission-approved.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-submission-approved.png
--------------------------------------------------------------------------------
/src/assets/images/guide-submission-autofill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-submission-autofill.png
--------------------------------------------------------------------------------
/src/assets/images/guide-submission-publish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-submission-publish.png
--------------------------------------------------------------------------------
/src/assets/images/guide-submission-review.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-submission-review.png
--------------------------------------------------------------------------------
/src/assets/images/guide-submission-user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-submission-user.png
--------------------------------------------------------------------------------
/src/assets/images/guide-sync-code-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-sync-code-1.png
--------------------------------------------------------------------------------
/src/assets/images/guide-sync-code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-sync-code.png
--------------------------------------------------------------------------------
/src/assets/images/guide-theme-blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-theme-blue.png
--------------------------------------------------------------------------------
/src/assets/images/guide-theme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/guide-theme.png
--------------------------------------------------------------------------------
/src/assets/images/openpanel-client.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/openpanel-client.png
--------------------------------------------------------------------------------
/src/assets/images/resend-audience.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/resend-audience.png
--------------------------------------------------------------------------------
/src/assets/images/resend-keys.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/resend-keys.png
--------------------------------------------------------------------------------
/src/assets/images/sanity-cors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/sanity-cors.png
--------------------------------------------------------------------------------
/src/assets/images/stripe-key.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/stripe-key.png
--------------------------------------------------------------------------------
/src/assets/images/stripe-price.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/stripe-price.png
--------------------------------------------------------------------------------
/src/assets/images/stripe-webhook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/stripe-webhook.png
--------------------------------------------------------------------------------
/src/assets/images/vercel-cloudflare-ssl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/vercel-cloudflare-ssl.png
--------------------------------------------------------------------------------
/src/assets/images/vercel-domain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/vercel-domain.png
--------------------------------------------------------------------------------
/src/assets/images/vercel-project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/images/vercel-project.png
--------------------------------------------------------------------------------
/src/assets/logo-rounded.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/logo-rounded.png
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MkdirsHQ/mkdirs-docs/8fb617e7c8fef3a78df8d8cb138f874b4d65828e/src/assets/logo.png
--------------------------------------------------------------------------------
/src/components/Head.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { Props } from '@astrojs/starlight/props'
3 | import Default from '@astrojs/starlight/components/Head.astro'
4 |
5 | // Get the URL of the generated image for the current page using its ID and
6 | // append the `.png` file extension.
7 | const ogImageUrl = new URL("/og.png", Astro.site);
8 | // console.log("ogImageUrl", ogImageUrl);
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/content/config.ts:
--------------------------------------------------------------------------------
1 | import { defineCollection } from 'astro:content';
2 | import { docsSchema } from '@astrojs/starlight/schema';
3 |
4 | export const collections = {
5 | docs: defineCollection({ schema: docsSchema() }),
6 | };
7 |
--------------------------------------------------------------------------------
/src/content/docs/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: '404'
3 | template: splash
4 | editUrl: false
5 | hero:
6 | title: '404'
7 | tagline: Page not found. Check the URL or try using the search bar.
8 | ---
--------------------------------------------------------------------------------
/src/content/docs/astro.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Welcome to Mkdirs
3 | description: Get started building your directory website with Mkdirs.
4 | template: splash
5 | hero:
6 | tagline: Launch your directory website in minutes and make profits today.
7 | image:
8 | file: ../../assets/houston.webp
9 | actions:
10 | - text: Get Started
11 | link: /get-started/
12 | icon: right-arrow
13 | - text: Introduction
14 | link: /introduction/
15 | variant: secondary
16 | icon: right-arrow
17 | ---
18 |
19 | import { Card, CardGrid } from '@astrojs/starlight/components';
20 |
21 | ## Next steps
22 |
23 |
24 |
25 | Edit `src/content/docs/index.mdx` to see this page change.
26 |
27 |
28 | Add Markdown or MDX files to `src/content/docs` to create new pages.
29 |
30 |
31 | Edit your `sidebar` and other config in `astro.config.mjs`.
32 |
33 |
34 | Learn more in [the Starlight Docs](https://starlight.astro.build/).
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/content/docs/configuration/ai.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: AI Models
3 | description: How to configure AI models.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | Mkdirs uses AI models to analyze the content of the website and automatically fill in the submission form, which improves the efficiency of the submission process.
10 |
11 | Mkdirs uses [Vercel AI SDK](https://sdk.vercel.ai/) to wrap AI models and supports [OpenAI ChatGPT](https://openai.com/), [Google Gemini](https://gemini.google.com/), [DeepSeek](https://www.deepseek.com/), [XAI](https://x.ai/) and [OpenRouter](https://openrouter.ai/) models by default, which can be selected according to the needs of the directory.
12 |
13 | ## Configuration
14 |
15 |
16 |
17 | 1. Determine the AI model to use
18 |
19 | You can choose to use `google`, `deepseek`, `openai`, `xai` or `openrouter` as the AI model, and set the `DEFAULT_AI_PROVIDER` variable in the `.env` file.
20 |
21 | ```bash
22 | # .env
23 | # [only required if you are using AI models to auto fill the submission form]
24 | # default ai provider: ``, `google`, `deepseek`, `openai`, `xai`, `openrouter`
25 | # -----------------------------------------------------------------------------
26 | DEFAULT_AI_PROVIDER=
27 | ```
28 |
29 |
34 |
35 | 2. Get the API Key of the corresponding AI model
36 |
37 | 2.1 Get Google Gemini API Key
38 |
39 | Link to get the API Key: [Google Gemini API Key](https://aistudio.google.com/apikey)
40 |
41 | ```bash
42 | # .env
43 | # [only required if you are using Google Gemini]
44 | # NOTE: if you set `DEFAULT_AI_PROVIDER=google`, you should set this API_KEY
45 | # -----------------------------------------------------------------------------
46 | GOOGLE_GENERATIVE_AI_API_KEY=
47 | ```
48 |
49 | 2.2 Get DeepSeek API Key
50 |
51 | Link to get the API Key: [DeepSeek API Key](https://platform.deepseek.com/api_keys)
52 |
53 | ```bash
54 | # .env
55 | # [only required if you are using DeepSeek]
56 | # NOTE: if you set `DEFAULT_AI_PROVIDER=deepseek`, you should set this API_KEY
57 | # -----------------------------------------------------------------------------
58 | DEEPSEEK_API_KEY=
59 | ```
60 |
61 | 2.3 Get OpenAI ChatGPT API Key
62 |
63 | Link to get the API Key: [OpenAI ChatGPT API Key](https://platform.openai.com/settings/organization/api-keys)
64 |
65 | ```bash
66 | # .env
67 | # [only required if you are using OpenAI]
68 | # NOTE: if you set `DEFAULT_AI_PROVIDER=openai`, you should set this API_KEY
69 | # -----------------------------------------------------------------------------
70 | OPENAI_API_KEY=
71 | ```
72 |
73 | 2.4 Get XAI API Key
74 |
75 | Link to get the API Key: [XAI API Key](https://console.x.ai/)
76 |
77 | ```bash
78 | # .env
79 | # [only required if you are using XAI]
80 | # NOTE: if you set `DEFAULT_AI_PROVIDER=xai`, you should set this API_KEY
81 | # -----------------------------------------------------------------------------
82 | XAI_API_KEY=
83 | ```
84 |
85 | 2.5 Get OpenRouter API Key
86 |
87 | Link to get the API Key: [OpenRouter API Key](https://openrouter.ai/settings/keys)
88 |
89 | ```bash
90 | # .env
91 | # [only required if you are using OpenRouter]
92 | # NOTE: if you set `DEFAULT_AI_PROVIDER=openrouter`, you should set this API_KEY
93 | # -----------------------------------------------------------------------------
94 | OPENROUTER_API_KEY=
95 | OPENROUTER_MODEL=
96 | ```
97 |
98 | 3. Enable the AI autofill feature
99 |
100 | If you need to enable the AI model to implement the autofill feature, please set `SUPPORT_AI_SUBMIT` to `true`.
101 |
102 | ```bash
103 | # src/lib/constants.ts
104 | # support AI submit, default is false
105 | # NOTE: if you set true, you should make sure the AI provider
106 | # and the API_KEY is set in the env variables.
107 | # if something is wrong in AI submit, you can set false to disable it.
108 | export const SUPPORT_AI_SUBMIT = true;
109 | ```
110 |
111 |
116 |
117 |
118 |
119 | After configuration of AI models, the "AI Autofill" button will appear in the submission form if the AI autofill feature is enabled, and click the button will trigger the AI model to automatically parse the webpage content and fill in the form.
120 |
121 | 
122 |
123 | ## Video tutorial
124 |
125 | This video demonstrates how to use the AI model to automatically fill in the submission form.
126 |
127 |
128 |
139 |
140 |
141 | ## Further reading
142 |
143 | - [Vercel AI SDK](https://sdk.vercel.ai/)
144 | - [DeepSeek API Key](https://platform.deepseek.com/api_keys)
145 | - [Google Gemini API Key](https://aistudio.google.com/apikey)
146 | - [OpenAI ChatGPT API Key](https://platform.openai.com/settings/organization/api-keys)
147 | - [XAI API Key](https://console.x.ai/)
148 | - [OpenRouter API Key](https://openrouter.ai/settings/keys)
149 |
--------------------------------------------------------------------------------
/src/content/docs/configuration/analytics.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Analytics
3 | description: How to configure the analytics.
4 | ---
5 |
6 | import { Steps } from '@astrojs/starlight/components';
7 |
8 | Mkdirs uses [Google Analytics](https://analytics.google.com/) or [OpenPanel](https://openpanel.dev/) as the analytics service, but you can also add other analytics services, and we will support more in the future.
9 |
10 | ## Google Analytics
11 |
12 | Follow the [Google Analytics official guide](https://support.google.com/analytics/answer/9304153) to set up Google Analytics for a website.
13 |
14 | Then copy the Google Analytics ID, and set it to the `.env` file.
15 |
16 | ```bash
17 | # .env
18 | # [only required if you are using Google Analytics]
19 | NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=your_google_analytics_id;
20 | ```
21 |
22 | 
23 |
24 | ## OpenPanel Analytics
25 |
26 |
27 |
28 | 1. Create an account on [OpenPanel](https://openpanel.dev//login)
29 |
30 | If you don't have an account, follow [the steps](https://dashboard.openpanel.dev/login) to create your account.
31 |
32 | 2. Create a new project
33 |
34 | Click on the `Create Project` button, enter the name of your project to create a new one.
35 |
36 | 3. Create a new client
37 |
38 | Click on the `...` button next to the project name, and select `Projects`.
39 |
40 | Click on the `New Client` button, and enter the domain to create a new client.
41 |
42 | 4. Get the OpenPanel Client ID
43 |
44 | Once the client is created, copy the `Client ID` and set it to the `.env` file.
45 |
46 | ```bash
47 | # .env
48 | # [only required if you are using OpenPanel Analytics]
49 | NEXT_PUBLIC_OPENPANEL_CLIENT_ID=your_open_panel_client_id;
50 | ```
51 |
52 | 
53 |
54 |
55 |
56 | ## Umami Analytics
57 |
58 |
59 |
60 | 1. Create an account on [Umami](https://umami.is)
61 |
62 | If you don't have an account, follow the steps to create your account.
63 |
64 | 2. Create a new website
65 |
66 | After logging in, click on the `Add Website` button and enter your website details.
67 |
68 | 3. Get the Website ID
69 |
70 | Once the website is created, you'll find the Website ID in the website settings. Copy it and set it along with the script URL in your `.env` file.
71 |
72 | ```bash
73 | # .env
74 | # [only required if you are using Umami Analytics]
75 | NEXT_PUBLIC_UMAMI_WEBSITE_ID=your_website_id
76 | NEXT_PUBLIC_UMAMI_SCRIPT=https://cloud.umami.is/script.js
77 | ```
78 |
79 |
80 |
81 | ## Plausible Analytics
82 |
83 |
84 |
85 | 1. Create an account on [Plausible](https://plausible.io)
86 |
87 | If you don't have an account, follow the steps to create your account.
88 |
89 | 2. Add a new site
90 |
91 | After logging in, click on the `Add a site` button and enter your domain name.
92 |
93 | 3. Configure the domain
94 |
95 | Once the site is added, copy your domain name and set it along with the script URL in your `.env` file.
96 |
97 | ```bash
98 | # .env
99 | # [only required if you are using Plausible Analytics]
100 | NEXT_PUBLIC_PLAUSIBLE_DOMAIN=your_domain
101 | NEXT_PUBLIC_PLAUSIBLE_SCRIPT=https://plausible.io/js/script.js
102 | ```
103 |
104 |
105 |
106 | ## Video tutorial
107 |
108 | {/* https://www.youtube.com/embed/O3DEgUjJvhs?list=PLVBbrIi208W_qLhMoEV8-XQi7lrTyPlOM */}
109 |
110 |
121 |
122 |
123 | ## Further Reading
124 |
125 | - [Google Analytics](https://analytics.google.com/)
126 | - [OpenPanel Analytics](https://openpanel.dev/)
127 |
--------------------------------------------------------------------------------
/src/content/docs/configuration/auth.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Authentication
3 | description: How to configure the authentication.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | Mkdirs uses [Auth.js v5](https://authjs.dev/) for authentication, supports email/password, GitHub, and Google authentication.
10 |
11 | ## Configuration
12 |
13 |
14 |
15 | 1. Generate the `AUTH_SECRET` variable
16 |
17 | `AUTH_SECRET` is a random value, and you can generate one via running:
18 |
19 | ```bash
20 | npx auth secret
21 |
22 | # or
23 | openssl rand -base64 32
24 | ```
25 |
26 | Then set it to the `.env` file.
27 |
28 | ```bash
29 | # .env
30 | # [required]
31 | AUTH_SECRET=secret
32 | ```
33 |
34 | 2. [Optional] Get the GitHub client variables
35 |
36 | If you want to use GitHub as an OAuth provider, you need to update the `AUTH_GITHUB_ID` and `AUTH_GITHUB_SECRET` variables.
37 |
38 | Follow the steps [here](https://authjs.dev/guides/configuring-github) to get the `client_id` and `client_secret` from the [GitHub Developer Settings](https://github.com/settings/developers).
39 |
40 | For the callback URL, it is **`https://your-domain.com/api/auth/callback/github`** or **`http://localhost:3000/api/auth/callback/github`** for local development.
41 |
42 | ```bash
43 | # .env
44 | # [only required if you want to support GitHub authentication]
45 | AUTH_GITHUB_ID = your_secret_client_id
46 | AUTH_GITHUB_SECRET = your_secret_client
47 | ```
48 |
49 |
53 |
54 | 
55 |
56 | 3. [Optional] Get the Google client variables
57 |
58 | If you want to use Google as an OAuth provider, you need to update the `AUTH_GOOGLE_ID` and `AUTH_GOOGLE_SECRET` variables.
59 |
60 | You can get the `client_id` and `client_secret` from the [Google Cloud Console](https://console.cloud.google.com/apis/credentials).
61 |
62 | For the callback URL, it is **`https://your-domain.com/api/auth/callback/google`** or **`http://localhost:3000/api/auth/callback/google`** for local development.
63 |
64 | ```bash
65 | # .env
66 | # [only required if you want to support Google authentication]
67 | AUTH_GOOGLE_ID = your_secret_client_id.apps.googleusercontent.com
68 | AUTH_GOOGLE_SECRET = your_secret_client
69 | ```
70 |
71 |
75 |
76 | 
77 |
78 |
79 |
80 |
93 |
94 | ## Video tutorial
95 |
96 | {/* https://www.youtube.com/embed/BANUS9CmxYA?list=PLVBbrIi208W_qLhMoEV8-XQi7lrTyPlOM */}
97 |
98 |
109 |
110 |
111 | If you are interested in Next Auth V5, you can refer to the following video tutorial, it is a more advanced guide for Next Auth V5, so much better than the official documentation.
112 |
113 |
114 |
125 |
126 |
127 | ## Further Reading
128 |
129 | - [Auth.js v5](https://authjs.dev/getting-started/introduction)
130 | - [Auth.js v5 - Environment Variables](https://authjs.dev/guides/environment-variables)
131 | - [Auth.js v5 - OAuth with GitHub](https://authjs.dev/guides/configuring-github)
132 | - [Auth.js v5 - Database Adapter](https://authjs.dev/guides/creating-a-database-adapter)
133 | - [Auth.js v5 - Data Models](https://authjs.dev/concepts/database-models)
134 | - [YouTube Video - Next Auth V5 - Advanced Guide (2024)](https://www.youtube.com/watch?v=1MTyCvS05V4)
135 |
--------------------------------------------------------------------------------
/src/content/docs/configuration/resend.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Resend
3 | description: How to configure the email.
4 | ---
5 |
6 | import { Steps } from '@astrojs/starlight/components';
7 |
8 | Mkdirs uses [Resend](https://resend.com/) as the email service, supports sending emails, receiving notification emails, and supports subscription functionality.
9 |
10 | ## Configuration
11 |
12 |
13 |
14 | 1. Create an account on [Resend](https://resend.com/)
15 |
16 | If you don't have an account on Resend, follow their steps to [signup](https://resend.com/signup).
17 |
18 | After signin on Resend, following their steps to [add your domain to Resend](https://resend.com/docs/dashboard/domains/cloudflare).
19 |
20 | 2. Get the Resend API key
21 |
22 | Click on `API Keys` on the left navigation bar, then click on the `Create API key` button, and set it to the `.env` file.
23 |
24 | Please make sure the API key has the `Full Access` permission.
25 |
26 | ```bash
27 | # .env
28 | # [only required if you want to authenticate users by email/password]
29 | RESEND_API_KEY=your_api_key
30 | ```
31 |
32 | 
33 |
34 | 3. Set the email address to send the emails from
35 |
36 | When sending an email, for example, signup emails, the email will be sent from the following email address:
37 |
38 | ```bash
39 | # .env
40 | # [only required if you want to authenticate users by email/password]
41 | RESEND_EMAIL_FROM=support@example.com
42 | ```
43 |
44 | 4. [Optional] Set the email address to receive the notification emails
45 |
46 | When there is a new submission from a customer, a notification email will be sent to the following email address:
47 |
48 | ```bash
49 | # .env
50 | # [only required if you want to receive notification emails]
51 | RESEND_EMAIL_ADMIN=admin@example.com
52 | ```
53 |
54 | 5. [Optional] Get the audience id for newsletter
55 |
56 | Create a new audience in Resend and copy the audience id, then set it to the `.env` file.
57 |
58 | This variable is used to support newsletter subscription on the website, if you don't need it, you can skip this step.
59 |
60 | ```bash
61 | # .env
62 | # [only required if you want to support newsletter]
63 | RESEND_AUDIENCE_ID=your_audience_id
64 | ```
65 |
66 | 
67 |
68 |
69 |
70 | ## Video tutorial
71 |
72 | {/* https://www.youtube.com/embed/W1BsVEwvFsM?list=PLVBbrIi208W_qLhMoEV8-XQi7lrTyPlOM */}
73 |
74 |
83 |
84 |
85 | ## Further Reading
86 |
87 | - [Resend](https://resend.com/)
88 | - [Resend - Domains](https://resend.com/docs/dashboard/domains/cloudflare)
89 | - [Resend - Email API](https://resend.com/docs/api-reference/emails)
90 | - [Resend - Audiences](https://resend.com/docs/dashboard/audiences/introduction)
91 | - [Resend - Broadcasts](https://resend.com/docs/dashboard/broadcasts/introduction)
92 | - [React Email](https://react.email/docs/introduction)
93 |
--------------------------------------------------------------------------------
/src/content/docs/configuration/sanity.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sanity
3 | description: How to configure the Sanity.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | Mkdirs uses [Sanity](https://www.sanity.io/) as a headless CMS, so you can manage the content of the website (including user data, items data, blog posts data, images, etc.) through Sanity Studio, and you don't need to configure the database or the storage anymore.
10 |
11 | ## Configuration
12 |
13 |
14 |
15 | 1. Create an account on [Sanity](https://www.sanity.io/)
16 |
17 | If you don't have an account on Sanity, follow their steps to [signup](https://www.sanity.io/login/sign-up).
18 |
19 | 2. Create a new project
20 |
21 | After signin on Sanity, you can create your project [here](https://www.sanity.io/manage?new-project).
22 |
23 | 3. Get the project id
24 |
25 | After creating the project, you will see the project id under the project name.
26 |
27 | ```bash
28 | # .env
29 | # [required]
30 | NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
31 | ```
32 |
33 | 4. Get the dataset
34 |
35 | The default dataset is `production`, and you can use the default dataset or create a new one.
36 |
37 | ```bash
38 | # .env
39 | # [required]
40 | NEXT_PUBLIC_SANITY_DATASET=your_dataset
41 | ```
42 |
43 |
46 |
47 | 5. Get the API token
48 |
49 | Go to the project API settings, click on the `Add API token` button, create a new token with **the permissions of `Editor`**, and set it to the `.env` file.
50 |
51 | ```bash
52 | # .env
53 | # [required]
54 | SANITY_API_TOKEN=your_api_token
55 | ```
56 |
57 | 6. Configure the CORS origins
58 |
59 | Go to the project API settings, click on the `Add CORS origin` button, add the origin of your domain, for example, **`https://your-domain.com`** for production or **`http://localhost:3000`** for local development.
60 |
61 | It's used to allow you to access the Sanity Studio under the `/studio` path, for example, `https://your-domain.com/studio` or `http://localhost:3000/studio`.
62 |
63 |
66 |
67 | 
68 |
69 |
70 |
71 | ## Video tutorial
72 |
73 | {/* https://www.youtube.com/embed/8THGP7Wpkic?list=PLVBbrIi208W_qLhMoEV8-XQi7lrTyPlOM */}
74 |
75 |
84 |
85 |
86 | ## Further Reading
87 |
88 | - [Sanity](https://www.sanity.io/)
89 | - [Sanity Content Lake](https://www.sanity.io/docs/datastore)
90 | - [Sanity Studio](https://www.sanity.io/docs/sanity-studio)
91 | - [Sanity Plugins](https://www.sanity.io/plugins)
92 | - [Sanity CLI](https://www.sanity.io/docs/cli-reference)
93 | - [Sanity Courses](https://www.sanity.io/learn)
94 | - [Course: Day one with Sanity](https://www.sanity.io/learn/course/day-one-with-sanity-studio)
95 | - [Course: Sanity Typed content with Sanity TypeGen](https://www.sanity.io/learn/course/typescripted-content)
96 | - [Cheatsheet: GROQ](https://www.sanity.io/docs/query-cheat-sheet)
97 | - [Cheatsheet: Migrating content](https://www.sanity.io/docs/content-migration-cheatsheet)
98 | - [Sanity docs for Localization](https://www.sanity.io/docs/localization)
99 | - [Sanity docs for Block Content](https://www.sanity.io/docs/block-content)
100 |
--------------------------------------------------------------------------------
/src/content/docs/configuration/stripe.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Stripe
3 | description: How to manage the payment with Stripe.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | Mkdirs uses [Stripe](https://stripe.com/) as a payment processor.
10 |
11 | ## Configuration
12 |
13 |
14 |
15 | 1. Create an account on [Stripe](https://stripe.com/)
16 |
17 | If you don't have an account on Stripe, follow their steps to [signup](https://dashboard.stripe.com/register).
18 |
19 | 2. Get the Stripe API key
20 |
21 | - Go to your Stripe dashboard.
22 | - Select `Developers` on the top right navigation bar.
23 | - Select `API keys` on the menu under `Developers`.
24 | - Click on the `Reveal live key` (or `Reveal test key` if you are in test mode).
25 | - Copy the secret key and set it to the `.env` file.
26 |
27 | ```bash
28 | # .env
29 | # [only required if you want to support paid submissions]
30 | STRIPE_API_KEY=your_stripe_api_key
31 | ```
32 |
33 |
37 |
38 | 
39 |
40 | 3. Get the product price id
41 |
42 | - Go to your Stripe dashboard.
43 | - Select `Product Catalog` on the left sidebar.
44 | - Click on the `+ Create Product` button.
45 | - Give your product a clear name and set the one-time fee for user submissions.
46 | - Click on the `Add Product` button to create it.
47 | - Go to the product detail page, click on the `...` button in the pricing section.
48 | - Copy the **price id** and set it to the `.env` file.
49 |
50 | ```bash
51 | # .env
52 | # [only required if you want to support paid submissions and sponsor ads]
53 | NEXT_PUBLIC_STRIPE_PRO_PRICE_ID=your_price_id
54 | NEXT_PUBLIC_STRIPE_SPONSOR_PRICE_ID=your_price_id
55 | ```
56 |
57 |
64 |
65 | 
66 |
67 | 4. Get the webhook secret
68 |
69 | - Go to your Stripe dashboard.
70 | - Select `Developers` on the top right navigation bar.
71 | - Select `Webhooks` on the menu under `Developers`.
72 | - Click on the `Add an endpoint` button.
73 | - Enter the endpoint URL where Stripe will send events to, for example, `https://your-domain.com/api/webhook`.
74 | - Choose the events you want to receive notifications for, common events include `checkout.session.completed`.
75 | - Copy the webhook secret and set it to the `.env` file.
76 |
77 |
81 |
82 | ```bash
83 | # .env
84 | # [only required if you want to support paid submissions and sponsor ads]
85 | STRIPE_WEBHOOK_SECRET=your_webhook_secret
86 | ```
87 |
88 | 
89 |
90 |
91 |
92 | ## Video tutorial
93 |
94 | {/* https://www.youtube.com/embed/xNtFPjhaVKM?list=PLVBbrIi208W_qLhMoEV8-XQi7lrTyPlOM */}
95 |
96 |
107 |
108 |
109 | ## Further Reading
110 |
111 | - [Stripe - API Keys](https://stripe.com/docs/keys)
112 | - [Stripe - Webhooks](https://stripe.com/docs/webhooks)
113 | - [Stripe - Checkout Sessions](https://docs.stripe.com/api/checkout/sessions/create)
114 |
--------------------------------------------------------------------------------
/src/content/docs/customization/card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to customize the Item Card
3 | description: How to customize the Item Card of the directory website.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 |
8 | Mkdirs support two kinds of Item Card: `Card with Image` and `Card with Icon` (default).
9 |
10 | Item Card with Image ([item-card.tsx](https://github.com/MkdirsHQ/mkdirs-template/blob/main/src/components/item/item-card.tsx)):
11 |
12 | 
13 |
14 | Item Card with Icon ([item-card-2.tsx](https://github.com/MkdirsHQ/mkdirs-template/blob/main/src/components/item/item-card-2.tsx)):
15 |
16 | 
17 |
18 |
19 | `Card with Icon` is the default style, and you can change it to `Card with Image` by setting the `SUPPORT_ITEM_ICON` to `false` in the `src/lib/constants.ts` file.
20 |
21 | ```ts
22 | // support item icon, default is true (aka, show item icon)
23 | // NOTE: if you set true, you should make sure the item icon is available
24 | // if you set false, the item card will show image instead of icon
25 | export const SUPPORT_ITEM_ICON = false;
26 | ```
27 |
28 |
33 |
--------------------------------------------------------------------------------
/src/content/docs/customization/category.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to add categories and category groups
3 | description: How to add categories and category groups to the directory website.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 |
8 | ## Add categories
9 |
10 | Go to the Sanity Studio, click the `Category Management` button, and then click the `+` button.
11 |
12 | Input the category name, and generate the slug, set the description and priority, then click the `Publish` button.
13 |
14 | 
15 |
16 |
19 |
20 | After the category is published, you can see the category list in the website like this.
21 |
22 | 
23 |
24 | ## Add category groups
25 |
26 | Go to the Sanity Studio, click the `Group Management` button, and then click the `+` button.
27 |
28 | Input the group name, and generate the slug, set the description and priority, then click the `Publish` button.
29 |
30 | 
31 |
32 |
35 |
36 | After the group is published, you can see the group list in the website like this.
37 |
38 | 
39 |
40 |
41 | The category group is supported by default, if you do not want to show the group, you can disable it by setting the `SUPPORT_CATEGORY_GROUP` to `false` in the `src/lib/constants.ts` file.
42 |
43 | ```ts
44 | // support category group, default is true (aka, show category group)
45 | // NOTE: if you set true, you should make sure each category belongs to a group
46 | // if you set false, the category will be shown in the root level
47 | export const SUPPORT_CATEGORY_GROUP = false;
48 | ```
49 |
--------------------------------------------------------------------------------
/src/content/docs/customization/custom-page.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to custom website pages
3 | description: How to change or add the website pages.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 |
8 | ## Add custom pages
9 |
10 | Go to the Sanity Studio, click the `Pages` button, and then click the `Create` button.
11 |
12 | Input the page title, and generate the slug, then click the `Publish` button.
13 |
14 | After the page is published, you can see the page in the website via the URL `/[slug]`.
15 |
16 | For example, if the slug is `about`, you can see the page in the website via the URL `/about`.
17 |
18 | You can add About page, Contact page, Privacy page, Terms page, etc, in the Sanity Studio.
19 |
20 | 
21 |
22 |
25 |
26 |
27 | ## Change Home Page
28 |
29 | There are 3 home page layouts in Mkdirs template, you can change the default home page layout by the following steps.
30 |
31 | 1. Remove the 3 files in the `src/app/(website)/(public)/(home)` folder.
32 |
33 | 2. Copy the files in `src/app/(website)/(test)/(home2)` or `src/app/(website)/(test)/(home3)` folder to the `src/app/(website)/(public)/(home)` folder.
34 |
35 | 
36 |
--------------------------------------------------------------------------------
/src/content/docs/customization/email.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to change or add the emails
3 | description: How to change or add the emails used in the directory website.
4 | ---
5 |
6 | ## Start the email server
7 |
8 | Run the following command to start the email server, and you can see the email server is running on `http://localhost:3333`.
9 |
10 | ```bash
11 | pnpm email
12 | ```
13 |
14 | 
15 |
16 | ## Change or add new emails
17 |
18 | The email files are in the `emails` folder, you can change the email files to your own emails.
19 |
20 | Or you can add new email files to the `emails` folder, preview the email in the browser.
21 |
22 | ## Video tutorial
23 |
24 |
25 |
36 |
37 |
--------------------------------------------------------------------------------
/src/content/docs/customization/font.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to customize the font
3 | description: How to customize the font of the directory website.
4 | ---
5 |
6 | The font file is in the `src/assets/fonts` folder, you can add your custom font file to the `fonts` folder, and define the font in `src/assets/fonts/index.ts`.
7 |
8 | 
9 |
10 | Then you can use the font in the `src/app/(website)/layout.tsx` file.
11 |
12 | 
13 |
--------------------------------------------------------------------------------
/src/content/docs/customization/information.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to customize the information
3 | description: How to customize the information.
4 | ---
5 |
6 | Open the files under `src/config` folder, you can see the `site.ts` file.
7 |
8 | 
9 |
10 | You can customize the information of the website here, and you can also customize other information in other files under the `config` folder.
11 |
12 | {/* ```ts
13 | export const siteConfig: SiteConfig = {
14 | name: "Directory",
15 | tagline: "This is a demo site for Mkdirs, the best directory website template",
16 | description:
17 | "This is a demo site for Mkdirs template. Mkdirs is the ultimate directory website template. With Mkdirs, you can build any trending and profitable directory website in minutes, packed with Listings, Newsletter, Payment, CMS, Blog, Authentication, SEO, Themes and more",
18 | keywords: [
19 | "Directory",
20 | "Template",
21 | "Boilerplate",
22 | ],
23 | author: "Mkdirs",
24 | url: SITE_URL,
25 | // please increase the version number when you update the image
26 | image: `${SITE_URL}/og.png?v=1`,
27 | mail: "support@mkdirs.com",
28 | utm: {
29 | source: "mkdirs.com",
30 | medium: "referral",
31 | campaign: "navigation",
32 | },
33 | links: {
34 | // leave it blank if you don't want to show the link (don't delete)
35 | twitter: "https://x.com/MkdirsHQ",
36 | github: "https://github.com/MkdirsHQ",
37 | youtube: "https://www.youtube.com/@MkdirsHQ",
38 | },
39 | };
40 | ``` */}
41 |
42 | For example, if you have changed the name/title/subtitle/menus/logo/theme, your directory website may look like this.
43 |
44 | 
45 |
46 |
47 | ## Video tutorial
48 |
49 | Currently, there is no video tutorial in English for this part, but you can refer to the following video in Chinese to learn how to customize the information.
50 |
51 | ### How to customize the information - Video Tutorial in Chinese (for developers)
52 |
53 |
54 |
65 |
66 |
67 | ### How to customize the information - Video Tutorial in Chinese (for beginners)
68 |
69 |
70 |
81 |
82 |
--------------------------------------------------------------------------------
/src/content/docs/customization/logo.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to customize the logo
3 | description: How to customize the logo and favicon of the directory website.
4 | ---
5 |
6 | Create a new `logo.png` file and new `favicon.ico` files, put them in the `public` folder.
7 |
8 | You can delete original `logo.png` file and `favicon.ico` files.
9 |
10 | You can create your logo and favicons using [these tools](https://indiehub.best/collection/the-best-logo-generator-tools-in-2025), I prefer [IconKitchen](https://icon.kitchen/) and [Icon Maker](https://ray.so/icon).
11 |
12 | 
13 |
14 |
15 | ## Video tutorial
16 |
17 | Currently, there is no video tutorial in English for this part, but you can refer to the following video in Chinese to learn how to customize the information.
18 |
19 | ### How to customize the information - Video Tutorial in Chinese (for developers)
20 |
21 |
22 |
33 |
34 |
35 | ### How to customize the information - Video Tutorial in Chinese (for beginners)
36 |
37 |
38 |
49 |
50 |
--------------------------------------------------------------------------------
/src/content/docs/customization/theme.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to customize the theme
3 | description: How to customize the theme of the directory website.
4 | ---
5 |
6 | Mkdirs uses Shadcn UI for the theme, and you can customize the color themes in [Shadcn UI Theme](https://ui.shadcn.com/themes), then copy the code and replace the existing code in the `src/styles/globals.css` file.
7 |
8 | For example, you can change the color theme to `Blue` by copying the code below to test it.
9 |
10 | 
11 |
12 |
13 | ```css
14 | /* src/styles/globals.css */
15 |
16 | @layer base {
17 | :root {
18 | --background: 0 0% 100%;
19 | --foreground: 222.2 84% 4.9%;
20 | --card: 0 0% 100%;
21 | --card-foreground: 222.2 84% 4.9%;
22 | --popover: 0 0% 100%;
23 | --popover-foreground: 222.2 84% 4.9%;
24 | --primary: 221.2 83.2% 53.3%;
25 | --primary-foreground: 210 40% 98%;
26 | --secondary: 210 40% 96.1%;
27 | --secondary-foreground: 222.2 47.4% 11.2%;
28 | --muted: 210 40% 96.1%;
29 | --muted-foreground: 215.4 16.3% 46.9%;
30 | --accent: 210 40% 96.1%;
31 | --accent-foreground: 222.2 47.4% 11.2%;
32 | --destructive: 0 84.2% 60.2%;
33 | --destructive-foreground: 210 40% 98%;
34 | --border: 214.3 31.8% 91.4%;
35 | --input: 214.3 31.8% 91.4%;
36 | --ring: 221.2 83.2% 53.3%;
37 | --radius: 0.5rem;
38 | --chart-1: 12 76% 61%;
39 | --chart-2: 173 58% 39%;
40 | --chart-3: 197 37% 24%;
41 | --chart-4: 43 74% 66%;
42 | --chart-5: 27 87% 67%;
43 | }
44 |
45 | .dark {
46 | --background: 222.2 84% 4.9%;
47 | --foreground: 210 40% 98%;
48 | --card: 222.2 84% 4.9%;
49 | --card-foreground: 210 40% 98%;
50 | --popover: 222.2 84% 4.9%;
51 | --popover-foreground: 210 40% 98%;
52 | --primary: 217.2 91.2% 59.8%;
53 | --primary-foreground: 222.2 47.4% 11.2%;
54 | --secondary: 217.2 32.6% 17.5%;
55 | --secondary-foreground: 210 40% 98%;
56 | --muted: 217.2 32.6% 17.5%;
57 | --muted-foreground: 215 20.2% 65.1%;
58 | --accent: 217.2 32.6% 17.5%;
59 | --accent-foreground: 210 40% 98%;
60 | --destructive: 0 62.8% 30.6%;
61 | --destructive-foreground: 210 40% 98%;
62 | --border: 217.2 32.6% 17.5%;
63 | --input: 217.2 32.6% 17.5%;
64 | --ring: 224.3 76.3% 48%;
65 | --chart-1: 220 70% 50%;
66 | --chart-2: 160 60% 45%;
67 | --chart-3: 30 80% 55%;
68 | --chart-4: 280 65% 60%;
69 | --chart-5: 340 75% 55%;
70 | }
71 | }
72 | ```
73 |
74 | ## Video tutorial
75 |
76 | Currently, there is no video tutorial in English for this part, but you can refer to the following video in Chinese to learn how to customize the information.
77 |
78 | ### How to customize the information - Video Tutorial in Chinese (for developers)
79 |
80 |
81 |
92 |
93 |
94 | ### How to customize the information - Video Tutorial in Chinese (for beginners)
95 |
96 |
97 |
108 |
109 |
--------------------------------------------------------------------------------
/src/content/docs/deployment/docker.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Docker
3 | description: How to deploy Mkdirs on Docker.
4 | ---
5 |
6 | import { Steps } from '@astrojs/starlight/components';
7 |
8 | You can easily deploy Mkdirs on [Docker](https://www.docker.com/).
9 |
10 | ## Deploy with Dockerfile
11 |
12 | Mkdirs comes with a pre-configured Docker file.
13 |
14 | ```bash
15 | # Dockerfile
16 |
17 | # syntax=docker/dockerfile:1
18 | FROM node:20-alpine AS base
19 |
20 | # Install dependencies only when needed
21 | FROM base AS deps
22 | # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
23 | RUN apk add --no-cache libc6-compat
24 | WORKDIR /app
25 |
26 | # Install dependencies
27 | COPY package.json pnpm-lock.yaml* ./
28 | RUN corepack enable pnpm && pnpm i --frozen-lockfile
29 |
30 | # Rebuild the source code only when needed
31 | FROM base AS builder
32 | WORKDIR /app
33 | COPY --from=deps /app/node_modules ./node_modules
34 | COPY . .
35 |
36 | # Next.js collects completely anonymous telemetry data about general usage.
37 | # Learn more here: https://nextjs.org/telemetry
38 | # Uncomment the following line in case you want to disable telemetry during the build.
39 | # ENV NEXT_TELEMETRY_DISABLED 1
40 |
41 | RUN corepack enable pnpm \
42 | && mv next.config.docker.mjs next.config.mjs \
43 | && pnpm build
44 |
45 | # Production image, copy all the files and run next
46 | FROM base AS runner
47 | WORKDIR /app
48 |
49 | ENV NODE_ENV production
50 | # Uncomment the following line in case you want to disable telemetry during runtime.
51 | # ENV NEXT_TELEMETRY_DISABLED 1
52 |
53 | RUN addgroup --system --gid 1001 nodejs
54 | RUN adduser --system --uid 1001 nextjs
55 |
56 | COPY --from=builder /app/public ./public
57 |
58 | # Set the correct permission for prerender cache
59 | RUN mkdir .next
60 | RUN chown nextjs:nodejs .next
61 |
62 | # Automatically leverage output traces to reduce image size
63 | # https://nextjs.org/docs/advanced-features/output-file-tracing
64 | COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
65 | COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
66 |
67 | USER nextjs
68 |
69 | EXPOSE 3000
70 |
71 | ENV PORT 3000
72 | ENV HOSTNAME "0.0.0.0"
73 |
74 | # server.js is created by next build from the standalone output
75 | # https://nextjs.org/docs/pages/api-reference/next-config-js/output
76 | CMD ["node", "server.js"]
77 | ```
78 |
--------------------------------------------------------------------------------
/src/content/docs/deployment/dokploy.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dokploy
3 | description: How to deploy Mkdirs on Dokploy.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | I personally recommend using [Dokploy](https://dokploy.com/) to deploy Mkdirs, because it's much easier to setup the whole thing and you get the automatic CI/CD pipeline like Vercel out of the box.
10 |
11 | ## Deploy on Dokploy
12 |
13 |
14 |
15 | 1. Create a new project on Dokploy
16 |
17 | Click on the `Create project` button and set the project name and description.
18 |
19 | 2. Create an application in the project
20 |
21 | Click on the `Create services` button and select `Application`, then set the application name and description.
22 |
23 | 3. Set the source code and build type
24 |
25 | Set the source code to the repository, and set the build type to Dockerfile.
26 |
27 | 
28 |
29 | 
30 |
31 | 4. Set the environment variables
32 |
33 | Copy the content from the `.env` file and paste them in environment settings.
34 |
35 |
40 |
41 | 
42 |
43 | 5. Start to deploy
44 |
45 | Click on `Deploy` and wait for the deployment to finish.
46 |
47 | 
48 |
49 | 6. Set the domain
50 |
51 | Add the domain you want to use, and make sure to check on `HTTPS`.
52 |
53 | 
54 |
55 | 7. Done
56 |
57 | Check the application by visiting the domain you set once the deployment is finished.
58 |
59 |
60 |
61 |
62 | ## Video tutorial
63 |
64 | There is no video tutorial for the deployment on Dokploy for now, but you can refer to the following video for the introduction of Dokploy Cloud, and learn how to deploy a Next.js application on Dokploy Cloud.
65 |
66 | After that, you will know how to deploy your directory on Dokploy by following the steps above.
67 |
68 | {/* https://youtu.be/x2s_Y5ON-ms */}
69 |
70 |
79 |
80 |
81 | ## Further reading
82 |
83 | - [Dokploy](https://dokploy.com/)
84 | - [How to install Dokploy on your own server](https://mksaas.me/blog/dokploy)
85 | - [How to install Dokploy on Aliyun ECS server](https://coreychiu.com/blogs/how-to-install-dokploy-on-aliyun-ecs-server)
86 |
--------------------------------------------------------------------------------
/src/content/docs/deployment/vercel.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Vercel
3 | description: How to deploy Mkdirs on Vercel.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | You can easily deploy Mkdirs on [Vercel](https://vercel.com/).
10 |
11 | ## Deploy on Vercel
12 |
13 |
14 |
15 | 1. Create an account on [Vercel](https://vercel.com/)
16 |
17 | If you don't have an account on Vercel, follow their steps to [signup](https://vercel.com/signup).
18 |
19 | 2. Create a new project
20 |
21 | Click on the `Add New Project` button, and select the GitHub repository you just created, then click on the `Import` button.
22 |
23 | 3. Set the environment variables
24 |
25 | Copy and paste the environment variables from the `.env` file to the `Environment Variables` section, then click on the `Deploy` button.
26 |
27 | 
28 |
29 | 4. Set the domain
30 |
31 | Add the domain you want to use in the `Domains` section, and add the DNS records to your domain provider, then wait for the DNS records to take effect.
32 |
33 | 
34 |
35 | 5. Set the Function Max Duration (Optional)
36 |
37 |
40 |
41 | 
42 |
43 | 6. Done
44 |
45 | Wait for the deployment to finish, and your directory website should be live on the web.
46 |
47 |
48 |
49 | ## FAQ
50 |
51 | - **Q: How to use Cloudflare as a reverse proxy?**
52 |
53 | A: Follow the steps [here](https://vercel.com/docs/integrations/external-platforms/cloudflare#set-cloudflare-ssl/tls-encryption-mode) to use Cloudflare as a reverse proxy.
54 |
55 | **If you met with `Error: Too many redirects`, you can try to set SSL mode to `Full`.**
56 |
57 | 
58 |
59 | ## Video tutorial
60 |
61 |
62 |
73 |
74 |
--------------------------------------------------------------------------------
/src/content/docs/faq.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: FAQ
3 | description: Frequently asked questions about Mkdirs.
4 | ---
5 |
6 | import { LinkCard } from '@astrojs/starlight/components';
7 |
8 | ## General
9 |
10 | ### How to set up the directory website with Mkdirs?
11 |
12 | You can checkout the [documentation](https://docs.mkdirs.com) and the [video tutorials](https://youtube.com/@MkdirsHQ) for the detailed instructions.
13 | I can launch a directory website within 30 minutes, you can too if you follow the instructions.
14 | Feel free to reach out to us via email at [support@mkdirs.com](mailto:support@mkdirs.com) if you have any questions.
15 |
16 | ### How many directory websites can I build with Mkdirs?
17 |
18 | You can build unlimited directory websites with Mkdirs, you only need to pay for the template, no other fees are required.
19 |
20 | ### What am I allowed to do with the boilerplate?
21 |
22 | You are allowed to build and ship unlimited projects with Mkdirs (commercial projects too).
23 |
24 | You are not allowed to:
25 | - Publish the code or parts of it as a template or boilerplate
26 | - Provide the boilerplate code as a service to others, for example, you can't help others launch directory websites with Mkdirs as a service, but if others are willing to pay for the Mkdirs template, you can help them launch directory websites
27 |
28 | ### How to get technical support?
29 |
30 | You can reach out to us via email at [support@mkdirs.com](mailto:support@mkdirs.com).
31 |
32 | ## Technical
33 |
34 | ### How many items can I save to Sanity in Free Plan?
35 |
36 | According to the [Sanity pricing](https://www.sanity.io/pricing), you can save up to 10,000 items in the Free Plan.
37 |
38 | If you upgrade to the Growth plan, you can save up to 25,000 items, and the price is $15/month.
39 |
40 | ### How to sync the source code with the repository?
41 |
42 | You can checkout this [guide](https://docs.mkdirs.com/guide/develop/#how-to-sync-the-code) for the detailed instructions.
43 |
44 | ### How to customize the font or the logo or the theme?
45 |
46 | You can checkout the [documentation](https://docs.mkdirs.com) and the [video tutorials](https://youtube.com/@MkdirsHQ) for the detailed instructions.
47 |
48 | - Customize the font: [https://docs.mkdirs.com/customization/font/](https://docs.mkdirs.com/customization/font/)
49 | - Customize the logo: [https://docs.mkdirs.com/customization/logo/](https://docs.mkdirs.com/customization/logo/)
50 | - Customize the theme: [https://docs.mkdirs.com/customization/theme/](https://docs.mkdirs.com/customization/theme/)
51 |
52 | ### How to find the logs?
53 |
54 | You can checkout the [guide](https://docs.mkdirs.com/guide/develop/#how-to-find-the-logs) for the detailed instructions.
55 |
56 | ### How to import the data from other directory websites?
57 |
58 | You can write a script to export the data from other directory websites, and then import the data to Mkdirs.
59 |
60 | We have provided some example scripts in the codebase, you can refer to them for more information.
61 |
62 | For example, you can use the [Sanity CLI](https://www.sanity.io/docs/cli-reference) feature or [Sanity Client API](https://www.sanity.io/docs/js-client) to import the data to Mkdirs.
63 |
64 | More information can be found in this [Issue](https://github.com/MkdirsHQ/mkdirs-template/issues/34).
65 |
66 | ### How to learn more about Sanity CMS?
67 |
68 | You can checkout this [guide](https://docs.mkdirs.com/guide/sanity/) for the detailed instructions.
69 |
70 | You will learn how to update the Sanity schemas, and how to configure the Sanity Studio, etc.
71 |
72 | We also provide a [list of tutorials and documents](https://docs.mkdirs.com/guide/sanity/#further-reading) about Sanity CMS, you can refer to them for more information.
73 |
74 | ### Does Mkdirs support internationalization?
75 |
76 | No, Mkdirs does not support internationalization, and will not support it in the future, because it will make the boilerplate too heavy.
77 |
78 | I have open sourced another [Directory Boilerplate](https://github.com/javayhu/free-directory-boilerplate), which supports internationalization, you can refer to it for more information.
79 |
80 | If you want to support internationalization, you can email Meepo at [meepo.hyper@gmail.com](mailto:meepo.hyper@gmail.com), he offers a paid service to help you to add the internationalization feature to your directory website.
81 |
82 | And if you want to do it yourself, you can refer to the following documents:
83 |
84 | - Next.js: [https://nextjs.org/docs/app/building-your-application/routing/internationalization](https://nextjs.org/docs/app/building-your-application/routing/internationalization)
85 | - Sanity: [https://www.sanity.io/docs/localization](https://www.sanity.io/docs/localization)
86 |
87 | ## Payment
88 |
89 | ### Does Mkdirs support Lemonsqueezy or other payment services?
90 |
91 | No, Mkdirs does not support Lemonsqueezy or other payment services, only Stripe is supported.
92 |
93 | If you want to support Lemon Squeezy, you can refer to this open source project.
94 |
95 | [https://github.com/lmsqueezy/nextjs-billing](https://github.com/lmsqueezy/nextjs-billing)
96 |
97 | ### How much does it cost to run a directory website?
98 |
99 | With Mkdirs, you can easily launch a directory website for almost zero cost.
100 |
101 | You only pay for your domain, and start with the free plan of [Sanity](https://www.sanity.io/pricing) and [Resend](https://resend.com/pricing) and [Vercel](https://vercel.com/pricing).
102 |
103 | When the traffic of your directory website grows, you can choose to upgrade your plans later.
104 |
--------------------------------------------------------------------------------
/src/content/docs/guide/develop.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to work with source code
3 | description: How to work with the source code of the directory website.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | ## Folder Structure
10 |
11 | It's simply a [Next.js](https://nextjs.org/) project using [Typescript](https://www.typescriptlang.org/), so the folder structure of the Mkdirs is as follows:
12 |
13 | 
14 |
15 | ## Application Architecture
16 |
17 | 
18 |
19 | ## How to find the logs
20 |
21 | If you met with some errors, you can find the logs in the `console` of the browser (if it is a client error), or in the `terminal` of the server (if it is a server error).
22 |
23 | If you are using Vercel to deploy your website, you can find the logs in the `Logs` section of the Vercel dashboard.
24 |
25 | **Console Logs**
26 |
27 | 
28 |
29 | **Vercel Logs**
30 |
31 | 
32 |
33 | ## How to batch import data
34 |
35 | Mkdirs uses [Sanity](https://www.sanity.io/) as the content management system, so if you want to batch import data, you need to import the data into Sanity, and it's recommended to read the [Sanity documentation](/guide/sanity) before importing the data.
36 |
37 | If you are familiar with Sanity, you can refer to the scripts in the `scripts` directory in the root of the project to implement batch import of categories, tags, and items.
38 |
39 | By default, there are four scripts in the `scripts` directory in the root of the project: `batch-group.ts`, `batch-category.ts`, `batch-tag.ts`, and `batch-item.ts`, which are used to import category groups, categories, tags, and items, respectively.
40 |
41 | You can test importing data by running the command `pnpm batch` after creating a new project, and you can also refer to the other scripts in the directory too, the corresponding commands can be found in the [`package.json` file](https://github.com/MkdirsHQ/mkdirs-template/blob/main/package.json#L27).
42 |
43 | ```json
44 | "scripts": {
45 | "dev": "next dev",
46 | "build": "next build",
47 | "start": "next start",
48 | "lint": "next lint",
49 | "typegen": "sanity schema extract && sanity typegen generate",
50 | "email": "email dev --dir emails --port 3333",
51 | "export-user-emails": "tsx scripts/export-user-emails.ts",
52 | "microlink:fetch": "tsx scripts/explore-microlink.ts fetch",
53 | "microlink:insights": "tsx scripts/explore-microlink.ts insights",
54 | "microlink:screenshot": "tsx scripts/explore-microlink.ts screenshot",
55 | "microlink:fullpage": "tsx scripts/explore-microlink.ts fullpage",
56 | "aisdk:fetch": "tsx scripts/explore-aisdk.ts fetch",
57 | "aisdk:structure": "tsx scripts/explore-aisdk.ts structure",
58 | "item:remove": "tsx scripts/batch-item.ts remove",
59 | "item:import": "tsx scripts/batch-item.ts import",
60 | "item:update": "tsx scripts/batch-item.ts update",
61 | "item:fetch": "tsx scripts/batch-item.ts fetch",
62 | "batch": "tsx scripts/batch-all.ts",
63 | "batch:remove": "tsx scripts/batch-all.ts remove",
64 | "batch:import": "tsx scripts/batch-all.ts import",
65 | "batch:update": "tsx scripts/batch-all.ts update"
66 | },
67 | ```
68 |
69 |
73 |
74 |
75 | ## How to format the code
76 |
77 | We use [Biome](https://biomejs.dev/) to format the code, and it's already configured in the project.
78 |
79 | You can install the [Biome extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) in vscode to format the code automatically.
80 |
81 | Or you can run the following command to format the code:
82 |
83 | ```bash
84 | biome format
85 | ```
86 |
87 | ## How to sync the code
88 |
89 | If you have followed the steps in the [Installation](/installation), and you have a repository named `@your-github-username/your-mkdirs`.
90 |
91 | Follow the steps below to sync the source code from `@MkdirsHQ/mkdirs-template` to your own repository if some updates are available, for example, new features or bug fixes.
92 |
93 |
94 |
95 | 1. Add the upstream repository
96 |
97 | First, you need to add the original repository as a remote repository.
98 |
99 | You can name it `upstream`, and run the following command in your local repository:
100 |
101 | ```bash
102 | git remote add upstream https://github.com/MkdirsHQ/mkdirs-template.git
103 | ```
104 |
105 | 2. Fetch upstream changes
106 |
107 | Run the following command to fetch all branches and commits from the original repository:
108 |
109 | ```bash
110 | git fetch upstream
111 | ```
112 |
113 | 3. Switch to your main branch
114 |
115 | Make sure you're on your main branch (usually main or master):
116 |
117 | ```bash
118 | git checkout main
119 | ```
120 |
121 | 4. Merge upstream changes
122 |
123 | Now, merge the changes from the upstream main branch into your local main branch:
124 |
125 | ```bash
126 | git merge upstream/main --allow-unrelated-histories
127 | ```
128 |
129 | If you don't want to merge all the changes from the upstream main branch, you can also cherry-pick the specific commits that you want to apply to your local main branch:
130 |
131 |
132 | ```bash
133 | git cherry-pick
134 | ```
135 |
136 | If you prefer to use vscode extension, you can use [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) to sync the code.
137 |
138 | 
139 |
140 | 5. Resolve conflicts (if any)
141 |
142 | If conflicts occur during the merge (mainly due to you have made some changes to the source code already), you'll need to resolve them manually.
143 |
144 | After resolving, use `git add` to add the modified files, then use `git commit` to commit the changes.
145 |
146 | 6. Push to your own repository
147 |
148 | Finally, push the updated local main branch to your own repository:
149 |
150 | ```bash
151 | git push origin main
152 | ```
153 |
154 |
155 |
156 | By following these steps, you can keep your fork in sync with the original repository. It's recommended to perform this process regularly to ensure your fork doesn't fall too far behind.
157 |
158 | ## Further Reading
159 |
160 | - [Next.js](https://nextjs.org/)
161 | - [Course: Learn React Foundation](https://nextjs.org/learn/react-foundations)
162 | - [Course: Learn Next.js](https://nextjs.org/learn)
163 |
--------------------------------------------------------------------------------
/src/content/docs/guide/sanity.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to work with Sanity CMS
3 | description: How to customize the Sanity schema and GROQ queries.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 |
8 | ## Learn Sanity
9 |
10 | If you are new to Sanity, you can learn it from the [Sanity Courses](https://www.sanity.io/learn), especially the following two courses:
11 |
12 | - [Course: Day one with Sanity](https://www.sanity.io/learn/course/day-one-with-sanity-studio)
13 | - [Course: Sanity Typed content with Sanity TypeGen](https://www.sanity.io/learn/course/typescripted-content)
14 |
15 | These courses are free and will help you understand how to use Sanity, and the following content are based on these courses.
16 |
17 |
18 | ## Add or update the Sanity schema
19 |
20 | The Sanity schema files are in the `src/sanity/schemas/documents` folder, you can change the schema to your own schema, or add new schema, then add the new schema to the `src/sanity/schemas/index.ts` file.
21 |
22 | After you update the Sanity schema, you need to run the following command to generate the types:
23 |
24 | ```bash
25 | pnpm typegen
26 | ```
27 |
28 |
31 |
32 | For example, you want to add a new field to the `item` schema, you can add the new field to the `src/sanity/schemas/documents/directory/item.ts` file, and then update the `itemSimpleFields` in the `src/sanity/libs/queries.ts` file, so that the new field will be fetched from the Sanity CMS when you query the item information from the GROQ queries.
33 |
34 |
35 | ## Update the GROQ queries
36 |
37 | The GROQ queries are in the `src/sanity/lib/queries.ts` file, you can change the GROQ queries to your own queries, or add new queries to the file.
38 |
39 | After you update the GROQ queries, you need to run the following command to generate the types:
40 |
41 | ```bash
42 | pnpm typegen
43 | ```
44 |
45 |
48 |
49 | ## Configure the Sanity Studio
50 |
51 | The configuration of the Sanity Studio is in the `sanity.config.ts` file, you can customize the Sanity Studio to your own needs.
52 |
53 | For example, you can find a new [Sanity Plugin](https://www.sanity.io/plugins) and add it to the Sanity Studio.
54 |
55 | You can also change the default layout structure, according to the [Sanity Structure Builder](https://www.sanity.io/docs/structure-builder-introduction).
56 |
57 |
58 | ## Further Reading
59 |
60 | - [Sanity](https://www.sanity.io/)
61 | - [Sanity Content Lake](https://www.sanity.io/docs/datastore)
62 | - [Sanity Studio](https://www.sanity.io/docs/sanity-studio)
63 | - [Sanity Plugins](https://www.sanity.io/plugins)
64 | - [Sanity CLI](https://www.sanity.io/docs/cli-reference)
65 | - [Sanity Structure Builder](https://www.sanity.io/docs/structure-builder-introduction)
66 | - [Sanity Courses](https://www.sanity.io/learn)
67 | - [Course: Day one with Sanity](https://www.sanity.io/learn/course/day-one-with-sanity-studio)
68 | - [Course: Sanity Typed content with Sanity TypeGen](https://www.sanity.io/learn/course/typescripted-content)
69 | - [Cheatsheet: GROQ](https://www.sanity.io/docs/query-cheat-sheet)
70 | - [Cheatsheet: Migrating content](https://www.sanity.io/docs/content-migration-cheatsheet)
71 | - [Sanity docs for Localization](https://www.sanity.io/docs/localization)
72 | - [Sanity docs for Block Content](https://www.sanity.io/docs/block-content)
73 |
--------------------------------------------------------------------------------
/src/content/docs/guide/sponsor-ads.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sponsor Ads
3 | description: How to display sponsor ads.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | Sponsor ads are one of the main sources of revenue for directories. Sponsor ads are displayed in the list pages or detail pages. Mkdirs template supports sponsor ads submission and display, only one sponsor ad can be displayed at a time.
10 |
11 | The default process for displaying sponsor ads is as follows.
12 |
13 | ## Display Sponsor Ads
14 |
15 |
16 |
17 | 1. User fills out the submission form and pays the sponsor fee
18 |
19 | User clicks the "Submit" button on the directory website, fills out the form, and pays the sponsor fee.
20 |
21 |
24 |
25 | 
26 |
27 | 2. Admin communicates with the user to set the display time of the sponsor ad
28 |
29 | The admin communicates with the user to set the display time of the sponsor ad, and then sets the display time of the sponsor ad in Sanity Studio, and checks the `Sponsor` option.
30 |
31 |
34 |
35 | 
36 |
37 | 
38 |
39 | 3. The directory website automatically displays the sponsor ad
40 |
41 | After the display time of the sponsor ad is set, the directory website will automatically display the sponsor ad at the specified time.
42 |
43 | 
44 |
45 | 
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/src/content/docs/guide/submission.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to submit items
3 | description: How to submit new items to the directory.
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | ## Free Submission
10 |
11 | ### How users submit new item to the directory
12 |
13 |
14 |
15 | 1. Users fill in the submission form
16 |
17 | Users click the "Submit" button on the directory page, and fill in the form with the required information, then submit to review.
18 |
19 |
25 |
26 | 
27 |
28 | 2. Admins review the submission and approve it or reject it
29 |
30 | Admins will review the submission, and approve it or reject it, if reject it, a rejection message will be sent to the user.
31 |
32 | 
33 |
34 |
37 |
38 | 
39 |
40 | 3. Users publish the submission
41 |
42 | After the submission is approved, users can publish the submission to the directory by clicking the "Publish" button whenever they want. After publishing, the item will be displayed in the directory.
43 |
44 | 
45 |
46 |
47 |
48 | ### How admins submit new item to the directory
49 |
50 | Admins can submit new item to the directory by clicking the "Submit" button on the directory page like users, or by adding a new item in the Sanity Studio directly.
51 |
52 | 
53 |
54 | Please make sure to set the `Publish Date` field, and the `Free Plan Status` field to `approved` before publishing. After publishing, the item will be displayed in the directory. Because Sanity has cache for API requests, it may take a few minutes to see the content on the directory page.
55 |
56 | 
57 |
58 |
59 | ## Paid Submission
60 |
61 | Users click the "Submit" button on the directory website, fill out the form, and pay the `PRO` fee.
62 |
63 | After payment, the admin does not need to review it, and the user can publish it immediately or wait for a suitable time to publish it.
64 |
65 | 
66 |
67 |
68 | ## Video tutorial
69 |
70 | This video demonstrates how to submit a new item to the directory for free.
71 |
72 |
73 |
84 |
85 |
86 | This video demonstrates how to submit a new item to the directory after payment.
87 |
88 |
89 |
100 |
101 |
--------------------------------------------------------------------------------
/src/content/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | description: Learn about Mkdirs and how it works.
4 | ---
5 |
6 | import { LinkCard } from '@astrojs/starlight/components';
7 |
8 | 👋 Hello, welcome to [Mkdirs](https://mkdirs.com)!
9 |
10 | [Mkdirs](https://mkdirs.com) is the best directory website template, you can launch any profitable directory website in minutes, packed with AI Submission, Listings, Payment, Submission, CMS, Blog, Authentication, Newsletter, SEO, Themes and more.
11 |
12 | **The documentation and the video tutorials are available in [🇬🇧 English](https://docs.mkdirs.com) and [🇨🇳 Chinese](https://docs.mkdirs.com/zh-cn).**
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | ## Further Reading
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/content/docs/installation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Installation
3 | description: How to launch your directory website with Mkdirs.
4 | ---
5 |
6 | import { Steps } from '@astrojs/starlight/components';
7 | import { LinkCard } from '@astrojs/starlight/components';
8 |
9 | Learn how to launch your directory website with Mkdirs.
10 |
11 | ## Installation Guide
12 |
13 |
14 |
15 | 1. Create your own repository
16 |
17 | Click on `Fork` button on the top right corner of [mkdirs-template](https://github.com/MkdirsHQ/mkdirs-template) to create your own repository, set the name of the repository and make sure to set it to private.
18 |
19 | 2. Clone the Github repository
20 |
21 | ```bash
22 | git clone https://github.com/your-username/.git
23 | ```
24 |
25 | 3. Install the dependencies
26 |
27 | Make sure to install the dependencies (PNPM recommended).
28 |
29 | ```bash
30 | cd
31 | pnpm install
32 | ```
33 |
34 | 4. Copy the `.env.example` file to `.env`
35 |
36 | ```bash
37 | cp .env.example .env
38 | ```
39 |
40 | 5. Configure the environment variables
41 |
42 | Update the environment variables with your own values, learn more about configuring the environment variables [here](/configuration/sanity/).
43 |
44 | ```bash
45 | # .env
46 |
47 | # "http://localhost:3000" or "https://mkdirs.com"
48 | NEXT_PUBLIC_APP_URL=
49 |
50 | # -----------------------------------------------------------------------------
51 | # Dataset & Storage (Sanity)
52 | # -----------------------------------------------------------------------------
53 | NEXT_PUBLIC_SANITY_DATASET=
54 | NEXT_PUBLIC_SANITY_PROJECT_ID=
55 | SANITY_API_TOKEN=
56 |
57 | # -----------------------------------------------------------------------------
58 | # Email (Resend)
59 | # -----------------------------------------------------------------------------
60 | RESEND_API_KEY=
61 | RESEND_EMAIL_FROM=
62 | RESEND_EMAIL_ADMIN=
63 | RESEND_AUDIENCE_ID=
64 |
65 | # -----------------------------------------------------------------------------
66 | # Analytics (OpenPanel & Google Analytics)
67 | # -----------------------------------------------------------------------------
68 | NEXT_PUBLIC_OPENPANEL_CLIENT_ID=
69 | NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
70 |
71 | # -----------------------------------------------------------------------------
72 | # Payment (Stripe)
73 | # -----------------------------------------------------------------------------
74 | STRIPE_API_KEY=
75 | STRIPE_WEBHOOK_SECRET=
76 | NEXT_PUBLIC_STRIPE_PRO_PRICE_ID=
77 |
78 | # -----------------------------------------------------------------------------
79 | # Authentication (NextAuth)
80 | # -----------------------------------------------------------------------------
81 | AUTH_SECRET=
82 |
83 | AUTH_GOOGLE_ID=
84 | AUTH_GOOGLE_SECRET=
85 |
86 | AUTH_GITHUB_ID=
87 | AUTH_GITHUB_SECRET=
88 | ```
89 |
90 | 6. Start the development server
91 |
92 | Start the development server and open it in your browser at http://localhost:3000
93 |
94 | ```bash
95 | pnpm dev
96 | ```
97 |
98 | 7. Build for production
99 |
100 | Build the application to generate code for production.
101 |
102 | ```bash
103 | pnpm build
104 | ```
105 |
106 | 8. Deploy
107 |
108 | Follow the deployment guides to deploy your application on your favorite platform.
109 |
110 | - [Vercel](/deployment/vercel)
111 | - [Docker](/deployment/docker)
112 | - [Dokploy](/deployment/dokploy)
113 |
114 |
115 |
116 | ## Video tutorial
117 |
118 | {/* https://www.youtube.com/embed/etdRxqls8Co?list=PLVBbrIi208W_qLhMoEV8-XQi7lrTyPlOM */}
119 |
120 |
129 |
130 |
131 | ## What's next?
132 |
133 | Once you have deployed your application, it's recommended to set up a process to sync the source code from `MkdirsHQ/mkdirs-template` to your own repository if some updates are available, for example, new features or bug fixes.
134 |
135 | Learn more about how to sync the source code in the [Development](/guide/develop) section.
136 |
137 |
138 | ## Further reading
139 |
140 |
141 |
--------------------------------------------------------------------------------
/src/content/docs/prerequisites.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Prerequisites
3 | description: Prerequisites to start with Mkdirs.
4 | ---
5 |
6 | import { Steps } from '@astrojs/starlight/components';
7 | import { LinkCard } from '@astrojs/starlight/components';
8 |
9 | Learn how to set up the prerequisites to start with Mkdirs.
10 |
11 | ## Prerequisites
12 |
13 |
14 |
15 | 1. Node.js
16 |
17 | Make sure you have installed Node.js v18 or later, if you don't have it, you can install it from [Node.js official website](https://nodejs.org/en/download/).
18 |
19 | ```bash
20 | # Check if Node.js is installed
21 | node -v
22 | ```
23 |
24 | 2. Git
25 |
26 | Make sure you have installed Git, if you don't have it, you can install it from [Git official website](https://git-scm.com/downloads).
27 |
28 | ```bash
29 | # Check if Git is installed
30 | git --version
31 | ```
32 |
33 | 3. PNPM
34 |
35 | Make sure you have installed PNPM, if you don't have it, you can install it from [PNPM official website](https://pnpm.io/installation).
36 |
37 | ```bash
38 | # Install PNPM
39 | npm install -g pnpm
40 |
41 | # Check if PNPM is installed
42 | pnpm --version
43 | ```
44 |
45 |
46 |
47 |
48 | ## Further reading
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/content/docs/zh-cn/configuration/ai.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: AI模型
3 | description: 如何配置AI模型相关的环境变量。
4 | ---
5 |
6 | import { Aside } from '@astrojs/starlight/components';
7 | import { Steps } from '@astrojs/starlight/components';
8 |
9 | Mkdirs 在提交界面使用 AI 模型来分析网站的内容，并将分析结果自动填充到提交表单中，从而大幅度提高导航站提交和数据录入流程的效率。
10 |
11 | Mkdirs 使用 [Vercel AI SDK](https://sdk.vercel.ai/) 作为 AI 模型的封装，并默认支持 [OpenAI ChatGPT](https://openai.com/)、[Google Gemini](https://gemini.google.com/)、[DeepSeek](https://www.deepseek.com/)、[XAI](https://x.ai/) 和 [OpenRouter](https://openrouter.ai/) 5个模型，可以根据导航站的需求选择使用。
12 |
13 | ## 配置
14 |
15 |
16 |
17 | 1. 确定要使用的 AI 模型
18 |
19 | 您可以选择使用 `google`、`deepseek`、`openai`、`xai` 或 `openrouter` 作为 AI 模型，并在 `.env` 文件中设置 `DEFAULT_AI_PROVIDER` 变量。
20 |
21 |
26 |
27 | ```bash
28 | # .env
29 | # [only required if you are using AI models to auto fill the submission form]
30 | # default ai provider: ``, `google`, `deepseek`, `openai`, `xai`, `openrouter`
31 | # -----------------------------------------------------------------------------
32 | DEFAULT_AI_PROVIDER=
33 | ```
34 |
35 | 2. 获取对应 AI 模型的 API Key
36 |
37 | 2.1 获取 Google Gemini API Key
38 |
39 | 获取 API Key 的链接：[Google Gemini API Key](https://aistudio.google.com/apikey)
40 |
41 | ```bash
42 | # .env
43 | # [only required if you are using Google Gemini]
44 | # NOTE: if you set `DEFAULT_AI_PROVIDER=google`, you should set this API_KEY
45 | # -----------------------------------------------------------------------------
46 | GOOGLE_GENERATIVE_AI_API_KEY=
47 | ```
48 |
49 | 2.2 获取 DeepSeek API Key
50 |
51 | 获取 API Key 的链接：[DeepSeek API Key](https://platform.deepseek.com/api_keys)
52 |
53 | ```bash
54 | # .env
55 | # [only required if you are using DeepSeek]
56 | # NOTE: if you set `DEFAULT_AI_PROVIDER=deepseek`, you should set this API_KEY
57 | # -----------------------------------------------------------------------------
58 | DEEPSEEK_API_KEY=
59 | ```
60 |
61 | 2.3 获取 OpenAI ChatGPT API Key
62 |
63 | 获取 API Key 的链接：[OpenAI ChatGPT API Key](https://platform.openai.com/settings/organization/api-keys)
64 |
65 | ```bash
66 | # .env
67 | # [only required if you are using OpenAI]
68 | # NOTE: if you set `DEFAULT_AI_PROVIDER=openai`, you should set this API_KEY
69 | # -----------------------------------------------------------------------------
70 | OPENAI_API_KEY=
71 | ```
72 |
73 | 2.4 获取 XAI API Key
74 |
75 | 获取 API Key 的链接：[XAI API Key](https://console.x.ai/)
76 |
77 | ```bash
78 | # .env
79 | # [only required if you are using XAI]
80 | # NOTE: if you set `DEFAULT_AI_PROVIDER=xai`, you should set this API_KEY
81 | # -----------------------------------------------------------------------------
82 | XAI_API_KEY=
83 | ```
84 |
85 | 2.5 获取 OpenRouter API Key
86 |
87 | 获取 API Key 的链接：[OpenRouter API Key](https://openrouter.ai/settings/keys)
88 |
89 | ```bash
90 | # .env
91 | # [only required if you are using OpenRouter]
92 | # NOTE: if you set `DEFAULT_AI_PROVIDER=openrouter`, you should set this API_KEY
93 | # -----------------------------------------------------------------------------
94 | OPENROUTER_API_KEY=
95 | OPENROUTER_MODEL=
96 | ```
97 |
98 | 3. 启用 AI 自动填表的功能
99 |
100 | 如果需要启用 AI 模型实现自动填表的功能，请将 `SUPPORT_AI_SUBMIT` 设置为 `true`。
101 |
102 |
107 |
108 | ```bash
109 | # src/lib/constants.ts
110 | # support AI submit, default is false
111 | # NOTE: if you set true, you should make sure the AI provider
112 | # and the API_KEY is set in the env variables.
113 | # if something is wrong in AI submit, you can set false to disable it.
114 | export const SUPPORT_AI_SUBMIT = true;
115 | ```
116 |
117 |
118 |
119 | 配置完成之后，如果开启 AI 自动填表功能，在提交表单时，就会出现 "AI 自动填充" 按钮，点击该按钮，AI 模型会自动解析网页内容并自动填充表单。
120 |
121 | 
122 |
123 | ## 视频教程
124 |
125 | 这个视频演示了如何使用 AI 模型自动填充提交表单的功能流程。
126 |
127 |