Skip to content
This repository was archived by the owner on Nov 2, 2024. It is now read-only.

Commit 4b7e981

Browse files
wibus-weewibus-wee
committed
feat: index page
1 parent 193b150 commit 4b7e981

File tree

3 files changed

+404
-0
lines changed

3 files changed

+404
-0
lines changed

‎pages/_meta.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"index": {
3+
"type": "page",
4+
"title": "Mog",
5+
"display": "hidden",
6+
"theme": {
7+
"layout": "raw"
8+
}
9+
},
10+
"github": {
11+
"title": "GitHub ↗",
12+
"type": "page",
13+
"href": "https://github.com/mogland/core",
14+
"newWindow": true
15+
}
16+
}

‎pages/index.mdx

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
---
2+
title: Mix Space - An Alternative Personal Space.
3+
---
4+
5+
import Link from "next/link";
6+
import cn from "clsx";
7+
import { useState } from "react";
8+
import Image from "next/image";
9+
import { motion } from "framer-motion";
10+
import { Features, Feature } from "@components/features";
11+
import styles from "./index.module.css";
12+
import docsCard from "../public/console.png";
13+
import docsCardDark from "../public/console-dark.png";
14+
15+
<div className="home-content">
16+
<div className="content-container">
17+
<h1 className="headline">An Alternative <br className='sm:block hidden'/>Personal Space.</h1>
18+
<p className="subtitle">一个替代个人空间的新方式<br className='sm:block hidden'/></p>
19+
<p className="subtitle">
20+
<Link className={styles.cta} href="/docs">5 分钟拥有自己的 Mix Space <span>→</span></Link>
21+
</p>
22+
</div>
23+
<style jsx>{`
24+
.content-container {
25+
max-width: 90rem;
26+
padding-left: max(env(safe-area-inset-left), 1.5rem);
27+
padding-right: max(env(safe-area-inset-right), 1.5rem);
28+
margin: 0 auto;
29+
}
30+
.features-container {
31+
margin: 8rem 0 0;
32+
padding: 4rem 0;
33+
background-color: #f3f4f6;
34+
border-bottom: 1px solid #e5e7eb;
35+
}
36+
.features-container .content-container {
37+
margin-top: -8rem;
38+
}
39+
:global(.dark) .features-container {
40+
background-color: #000;
41+
border-bottom: 1px solid rgb(38, 38, 38);
42+
}
43+
.headline {
44+
display: inline-block;
45+
font-size: 3.125rem;
46+
font-size: min(4.375rem, max(8vw, 2.5rem));
47+
font-weight: 700;
48+
font-feature-settings: initial;
49+
letter-spacing: -0.12rem;
50+
margin-left: -0.2rem;
51+
margin-top: 3.4rem;
52+
line-height: 1.1;
53+
background-image: linear-gradient(146deg, #000, #757a7d);
54+
-webkit-background-clip: text;
55+
-webkit-text-fill-color: transparent;
56+
background-clip: text;
57+
}
58+
:global(.dark) .headline {
59+
background-image: linear-gradient(146deg, #fff, #757a7d);
60+
}
61+
.subtitle {
62+
font-size: 1.3rem;
63+
font-size: min(1.3rem, max(3.5vw, 1.2rem));
64+
font-feature-settings: initial;
65+
line-height: 1.6;
66+
}
67+
.nextjs-link {
68+
color: currentColor;
69+
text-decoration: none;
70+
font-weight: 600;
71+
}
72+
:global(#docs-card) {
73+
color: #fff;
74+
text-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
75+
}
76+
:global(#docs-card img) {
77+
object-fit: cover;
78+
object-position: left;
79+
position: absolute;
80+
left: 0;
81+
right: 0;
82+
top: 0;
83+
bottom: 0;
84+
height: 100%;
85+
z-index: 0;
86+
user-select: none;
87+
pointer-events: none;
88+
}
89+
:global(#docs-card img:nth-child(2)) {
90+
display: none;
91+
}
92+
:global(.dark #docs-card img:nth-child(2)) {
93+
display: initial;
94+
}
95+
:global(.dark #docs-card img:nth-child(1)) {
96+
display: none;
97+
}
98+
:global(.feat-darkmode) {
99+
min-height: 300px;
100+
}
101+
:global(.feat-darkmode h3) {
102+
font-size: 48px;
103+
}
104+
:global(#search-card) {
105+
display: flex;
106+
flex-direction: column;
107+
justify-content: center;
108+
}
109+
:global(#search-card p) {
110+
max-width: 320px;
111+
}
112+
:global(#search-card video) {
113+
position: absolute;
114+
right: 0;
115+
top: 24px;
116+
height: 430px;
117+
pointer-events: none;
118+
max-width: 60%;
119+
}
120+
:global(#fs-card) {
121+
min-height: 240px;
122+
}
123+
:global(#fs-card h3) {
124+
text-align: left;
125+
width: min(300px, 41%);
126+
min-width: 155px;
127+
}
128+
:global(#a11y-card) {
129+
background-image: url(/assets/high-contrast.png);
130+
background-position: -160px 160px;
131+
}
132+
@media screen and (max-width: 1300px) {
133+
:global(#a11y-card) {
134+
background-image: linear-gradient(to bottom, white, transparent),
135+
url(/assets/high-contrast.png);
136+
}
137+
}
138+
@media screen and (max-width: 1200px) {
139+
:global(#highlighting-card) {
140+
aspect-ratio: auto;
141+
}
142+
:global(.feat-darkmode h3) {
143+
font-size: 4vw;
144+
font-size: min(48px, max(4vw, 30px));
145+
}
146+
:global(#search-card video) {
147+
aspect-ratio: 787/623;
148+
height: auto;
149+
}
150+
.headline {
151+
letter-spacing: -0.08rem;
152+
}
153+
}
154+
@media screen and (max-width: 1024px) {
155+
:global(#docs-card) {
156+
aspect-ratio: 135/86;
157+
}
158+
:global(#search-card) {
159+
aspect-ratio: 8/3;
160+
}
161+
:global(#search-card h3) {
162+
text-align: left;
163+
}
164+
:global(#highlighting-card) {
165+
background-size: 136%;
166+
}
167+
:global(#a11y-card) {
168+
background-image: url(/assets/high-contrast.png);
169+
background-position: center 160px;
170+
}
171+
}
172+
@media screen and (max-width: 768px) {
173+
:global(#docs-card) {
174+
min-height: 348px;
175+
width: 100%;
176+
aspect-ratio: auto;
177+
}
178+
:global(#docs-card img) {
179+
object-position: -26px 0;
180+
width: 250%;
181+
max-width: initial;
182+
}
183+
}
184+
@media screen and (max-width: 640px) {
185+
:global(#search-card) {
186+
aspect-ratio: 2.5/2;
187+
justify-content: flex-start;
188+
align-items: stretch;
189+
min-height: 350px;
190+
}
191+
:global(#search-card h3) {
192+
text-align: center;
193+
}
194+
:global(#search-card p) {
195+
max-width: 100%;
196+
}
197+
:global(#search-card video) {
198+
position: relative;
199+
margin: 0.75em -1.75em 0;
200+
max-width: calc(100% + 3.5em);
201+
}
202+
:global(.dark #search-card video) {
203+
mix-blend-mode: lighten;
204+
}
205+
}
206+
`}</style>
207+
208+
<div className="features-container">
209+
<div className="content-container">
210+
<Features>
211+
<Feature index={0} large centered id="docs-card" href="/docs">
212+
<Image src={docsCard} alt="Background" loading="eager" />
213+
<Image src={docsCardDark} alt="Background (Dark)" loading="eager" />
214+
<h3>几分钟内创建<br className="show-on-mobile"/>强大现代的博客网站。</h3>
215+
</Feature>
216+
<Feature index={1} centered className="card-with-border" href="/docs/why">
217+
<div className="h-full flex flex-col justify-between">
218+
<h3>部署方式<br className="show-on-mobile" /><span style={{ fontWeight: 300 }}>多样</span>且<span style={{ fontWeight: 300 }}>快速</span>.</h3>
219+
<div className='text-left mb-8'>
220+
Mix Space 有多种部署方式，您可以选择最适合您的方式来部署您的 Mix Space。采用 Docker 部署，您可以在几分钟内部署您的博客，而不需要任何专业知识。使用预设脚本部署亦是如此。
221+
</div>
222+
<div>
223+
<div className={styles.optimization}>
224+
<div style={{ fontSize: '.9rem' }} className="leading-8">
225+
<code>{`bash <(curl -s https://fastly.jsdelivr.net/gh/mx-space/docker@master/install.sh)>`}</code>
226+
</div>
227+
</div>
228+
<div className="flex justify-center text-neutral-400 my-2">
229+
<span>/</span>
230+
</div>
231+
<div className={styles.optimization}>
232+
<div style={{ fontSize: '.9rem' }} className="leading-8">
233+
<code>{`git clone https://github.com/mx-space/docker --depth=1 && cd docker && bash install.sh`}</code>
234+
</div>
235+
</div>
236+
</div>
237+
</div>
238+
</Feature>
239+
<Feature index={2} centered className="feat-darkmode" style={{
240+
display: 'flex',
241+
alignItems: 'center',
242+
justifyContent: 'center',
243+
}}>
244+
<motion.div
245+
animate={{
246+
backgroundPosition: ['0% 0%', '50% 40%', '50% 40%', '100% 100%'],
247+
backgroundImage: [`radial-gradient(farthest-corner, #e2e5ea, #e2e5ea)`, 'radial-gradient(farthest-corner, #06080a, #e2e5ea)', 'radial-gradient(farthest-corner, #06080a, #e2e5ea)', 'radial-gradient(farthest-corner, #e2e5ea, #e2e5ea)'],
248+
}}
249+
transition={{
250+
backgroundPosition: {
251+
times: [0, .5, .5, 1],
252+
type: 'tween',
253+
repeat: Infinity,
254+
duration: 10,
255+
delay: 1
256+
},
257+
backgroundImage: {
258+
times: [0, .2, .8, 1],
259+
repeat: Infinity,
260+
duration: 10,
261+
delay: 1
262+
},
263+
}}
264+
style={{
265+
top: 0,
266+
left: "0",
267+
width: '100%',
268+
height: '100%',
269+
backgroundImage: `radial-gradient(farthest-corner, #06080a, #e2e5ea)`,
270+
backgroundSize: '400% 400%',
271+
backgroundRepeat: 'no-repeat',
272+
position: 'absolute',
273+
}}
274+
/>
275+
<motion.h3
276+
animate={{
277+
color: ['#dae5ff', '#fff', '#fff', '#dae5ff'],
278+
}}
279+
transition={{
280+
color: {
281+
times: [.25, .35, .7, .8],
282+
type: 'spring',
283+
repeat: Infinity,
284+
duration: 10,
285+
delay: 1
286+
},
287+
}}
288+
style={{
289+
position: 'relative',
290+
mixBlendMode: 'difference',
291+
}}
292+
>黑暗模式 <br/>原生适配.</motion.h3>
293+
</Feature>
294+
<Feature index={3} href="/services/render-service">
295+
<h3>先进的<br className="show-on-mobile"/>文本语言渲染解决方案。</h3>
296+
<div>
297+
高性能、可靠、可扩展的<strong>文本宏函数</strong>和<strong>标记语言设置</strong>。在渲染过程中，Mog 会将大量的文本预处理工作交给后端服务，从而减轻前端的负担。
298+
</div>
299+
</Feature>
300+
<Feature index={6}>
301+
<h3>更多特性...</h3>
302+
<p>可插拔主题 / 备份系统 / 独立的评论系统... <strong><i>更多新特性等待您的探索。</i></strong></p>
303+
<p className="subtitle"><Link className="!no-underline" href="/docs">拥有你自己的 Mog →</Link></p>
304+
</Feature>
305+
</Features>
306+
</div>
307+
</div>
308+
</div>

0 commit comments

Comments
 (0)