Skip to content

Commit ab131c4

Browse files
stevending1ststevending1st
authored
关于页面 (#6)
1 parent 1500940 commit ab131c4

11 files changed

Lines changed: 1136 additions & 50 deletions

File tree

‎components/PageContent/PageContent.module.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.MDXProvider {
2+
font-size: 1rem;
3+
4+
h1 {
5+
margin-bottom: 1.5rem;
6+
font-weight: 700;
7+
text-align: center;
8+
}
9+
10+
ul {
11+
li {
12+
margin-bottom: 1rem;
13+
}
14+
li:last-child {
15+
margin-bottom: 0;
16+
}
17+
}
18+
}

‎components/PageContent/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { MDXProvider } from '@mdx-js/react';
2+
import type { PropsWithChildren } from 'react';
3+
import { Container, Card } from 'react-bootstrap';
4+
5+
import styles from '../../styles/Home.module.scss';
6+
import pageContentStyles from './PageContent.module.scss';
7+
8+
export type PageContentProps = PropsWithChildren<{}>;
9+
10+
const components = {
11+
h1: (props: PropsWithChildren<{}>) => (
12+
<h1 className="bg-info text-center fw-bolder" style={{ color: 'red' }}>
13+
{props?.children}
14+
</h1>
15+
),
16+
};
17+
18+
export default function PageContent({ children }: PageContentProps) {
19+
return (
20+
<main
21+
className={`flex-fill d-flex flex-column justify-content-start align-items-center bg-secondary bg-gradient text-dark bg-opacity-10 ${styles.main}`}
22+
>
23+
<Container>
24+
<Card
25+
body
26+
className={`px-5 py-5 lh-base ${pageContentStyles.MDXProvider}`}
27+
>
28+
<MDXProvider components={components}>{children}</MDXProvider>
29+
</Card>
30+
</Container>
31+
</main>
32+
);
33+
}

‎next.config.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
/** @type {import('next').NextConfig} */
2-
module.exports = {
2+
const withMDX = require('@next/mdx')({
3+
options: {
4+
remarkPlugins: [],
5+
rehypePlugins: [],
6+
providerImportSource: '@mdx-js/react',
7+
},
8+
extension: /\.mdx?$/,
9+
});
10+
11+
module.exports = withMDX({
12+
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
313
reactStrictMode: true,
4-
}
14+
});

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
"e2e": "jest"
1515
},
1616
"dependencies": {
17+
"@mdx-js/loader": "^2.0.0",
18+
"@mdx-js/react": "^2.0.0",
19+
"@next/mdx": "^12.1.0",
1720
"idea-react": "^0.10.2",
1821
"next": "12.1.0",
1922
"react": "17.0.2",

‎pages/_app.tsx‎

Lines changed: 68 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,99 @@
11
import type { AppProps } from 'next/app';
22
import Head from 'next/head';
3-
3+
import { useRouter } from 'next/router';
44
import Container from 'react-bootstrap/Container';
55
import Nav from 'react-bootstrap/Nav';
66
import Navbar from 'react-bootstrap/Navbar';
77

88
import 'idea-react/dist/index.css';
99
import '../styles/globals.css';
1010

11+
const topNavBarMenu = [
12+
{
13+
href: '/about',
14+
name: '关于',
15+
},
16+
{
17+
href: '/history',
18+
name: '历史',
19+
},
20+
{
21+
href: '/code-of-conduct',
22+
name: '行为规范',
23+
},
24+
{
25+
href: '/join-us',
26+
name: '参与',
27+
},
28+
{
29+
href: '/open-collaborator-award',
30+
name: '开放协作人奖',
31+
},
32+
];
33+
1134
export default function MyApp({ Component, pageProps }: AppProps) {
35+
const { pathname } = useRouter();
36+
const thisFullYear = new Date().getFullYear();
1237
return (
1338
<>
1439
<Head>
1540
<meta name="viewport" content="width=device-width, initial-scale=1" />
1641

1742
<title>开源市集</title>
1843
<link rel="icon" href="/favicon.ico" />
19-
<link
20-
rel="stylesheet"
21-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
22-
/>
23-
<link
24-
rel="stylesheet"
25-
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
26-
/>
2744
</Head>
2845

29-
<Navbar bg="dark" variant="dark" fixed="top">
46+
<Navbar bg="dark" variant="dark" fixed="top" expand="lg">
3047
<Container>
31-
<Navbar.Brand href="/">开源市集</Navbar.Brand>
32-
<Nav className="me-auto">
33-
<Nav.Link href="/about">关于</Nav.Link>
34-
<Nav.Link href="/history">历史</Nav.Link>
35-
<Nav.Link href="/code-of-conduct">行为规范</Nav.Link>
36-
<Nav.Link href="/join-us">参与</Nav.Link>
37-
<Nav.Link href="/open-collaborator-award">开放协作人奖</Nav.Link>
38-
</Nav>
48+
<Navbar.Brand href="/" className="fw-bolder">
49+
开源市集
50+
</Navbar.Brand>
51+
<Navbar.Toggle aria-controls="navbarScroll" />
52+
<Navbar.Collapse id="navbarScroll">
53+
<Nav className="me-auto my-2 my-lg-0" navbarScroll>
54+
{topNavBarMenu.map(({ href, name }) => (
55+
<Nav.Link
56+
key={`${href}-${name}`}
57+
href={href}
58+
className={
59+
pathname === `${href}` ? 'fw-bolder text-light' : ''
60+
}
61+
>
62+
{name}
63+
</Nav.Link>
64+
))}
65+
</Nav>
66+
</Navbar.Collapse>
3967
</Container>
4068
</Navbar>
4169

4270
<div className="mt-5 pt-2">
4371
<Component {...pageProps} />
4472
</div>
4573

46-
{/* <footer className="flex-fill d-flex justify-content-center align-items-center border-top py-4">
47-
<a
48-
className="flex-fill d-flex justify-content-center align-items-center"
49-
href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
50-
target="_blank"
51-
rel="noopener noreferrer"
52-
>
53-
Powered by
54-
<span className="mx-2">
55-
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
74+
<footer className="mw-100 bg-dark text-white">
75+
<p className="text-center my-0 py-3">
76+
<span className="pr-3">
77+
© 2021{thisFullYear === 2021 ? '' : `-${thisFullYear}`} 开源市集
5678
</span>
57-
</a>
58-
</footer> */}
79+
{/* <a
80+
className="flex-fill d-flex justify-content-center align-items-center"
81+
href="https://vercel.com/"
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
>
85+
Powered by
86+
<span className="mx-2">
87+
<Image
88+
src="/vercel.svg"
89+
alt="Vercel Logo"
90+
width={72}
91+
height={16}
92+
/>
93+
</span>
94+
</a> */}
95+
</p>
96+
</footer>
5997
</>
6098
);
6199
}

‎pages/_document.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Html, Head, Main, NextScript } from 'next/document';
2+
3+
export default function Document() {
4+
return (
5+
<Html>
6+
<Head>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
10+
/>
11+
<link
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"
14+
/>
15+
</Head>
16+
<body>
17+
<Main />
18+
<NextScript />
19+
</body>
20+
</Html>
21+
);
22+
}

‎pages/about.mdx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import PageHead from '../components/PageHead';
2+
import PageContent from '../components/PageContent/index';
3+
4+
<>
5+
<PageHead />
6+
<PageContent>
7+
# 关于开源市集
8+
9+
***「开源市集 Open Source Bazzar」*** 是一个以开源软硬件、公益项目为主题的公益活动品牌，也是一个以 ***「开放式协作」*** 为核心理念的开源社群。
10+
11+
开源是一种基于国际互联网的全球性社会化协作模式。这个概念虽来自计算机软件行业，但其核心运作模式 ***「开放的社会化协作」*** 则是可以脱离技术本身、放之四海而皆准的新型生产力与生产关系，通用于各类商业、非商业组织。
12+
13+
市集在世界范围内有着悠久的历史，促进了经济和文化交流。据「周易」记载，「神农氏作……日中为市，致天下之民，聚天下之货，交易而退，各得其所」。
14+
15+
在开源市集中，一群来自科技、人文、艺术等不同领域的有趣的朋友通过展示、交流将「开源」和「开放式协作」的乐趣带给更多人，点亮更多有趣的灵魂，为社会带来正面影响。
16+
17+
给世界带来美好改变，不是一个人做很多，而是每个人都做一点点。
18+
19+
---
20+
21+
我们不给开源市集设定预期，比如要举办多大规模的活动或者要邀请多少共创人和共创方加入。我们希望通过真诚且有温度的表达，为自己，也为更多人营造一个社区：
22+
23+
- 关注社区中的每一个人，去倾听一些平时没有机会发声或者不敢打开自己去发声的人们的声音，为 ta 们创造一个安全的环境。
24+
- 让更多人身心获得放松和疗愈，接纳自己，然后和伙伴们一起实践更多美好行动，为世界带来和平。
25+
26+
我们相信，不管你从哪里来，只要你投入热情，坚持做正确的事情，社区会让你慢慢了解你想去哪里，并且最终抵达。
27+
28+
---
29+
30+
**所有参与开源市集线上贡献或线下活动筹备的个人都是 *「共创人」*** ，例如：基础设施建设者、活动出品人、设计师、编辑、摆摊或组织工作坊的人们……
31+
32+
**所有参与开源市集线上贡献或线下活动筹备的社区、高校、企业、政府部门等机构、组织都是 *「共创方」***，例如：通过自己的官方社交媒体宣传开源市集的社区、提供物资的企业……
33+
</PageContent>
34+
</>

‎pages/index.tsx‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Link from 'next/link';
12
import ReactTyped from 'react-typed-component';
23
import { Row, Col, Card } from 'react-bootstrap';
34
import PageHead from '../components/PageHead';
@@ -31,15 +32,17 @@ const HomePage = () => (
3132
</h2>
3233
</section>
3334
<section
34-
className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-success bg-opacity-25 ${styles.main}`}
35+
className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-warning bg-opacity-10 ${styles.main}`}
3536
>
3637
<h2 className="text-start mb-5 mt-5 fw-bolder">形式</h2>
3738
<Row className="flex-fill d-flex justify-content-around align-items-center w-100 px-3">
3839
<Col xs={8} sm={7} md={4} className="pb-5">
3940
<Card body className={`shadow ${styles.activeCard}`}>
40-
<a href="/history">
41-
<h5 className="fw-bold mb-3">开源市集</h5>
42-
</a>
41+
<Link href="/history">
42+
<a>
43+
<h5 className="fw-bold mb-3">开源市集</h5>
44+
</a>
45+
</Link>
4346
<p>
4447
一群来自科技、艺术、环保不同领域的有趣的朋友通过展示、交流，将“开源”和“开放式协作”的乐趣带给更多人，点亮更多有趣的灵魂，为社会带来正面影响。
4548
</p>
@@ -67,9 +70,29 @@ const HomePage = () => (
6770
</Col>
6871
</Row>
6972
</section>
70-
<footer className="mw-100 bg-dark text-white">
71-
<p className="text-center my-0 py-3">© 2022 开源市集</p>
72-
</footer>
73+
<section
74+
className={`flex-fill d-flex flex-column justify-content-center align-items-center pb-0 bg-success bg-opacity-10 ${styles.main}`}
75+
>
76+
<h2 className="text-start mb-5 fw-bolder h1">行动</h2>
77+
<Row className="d-flex flex-column justify-content-start align-items-center w-100 mb-5">
78+
<Col className="text-center">
79+
<figure className="text-center">
80+
<blockquote className="blockquote mb-4">
81+
<p className="h2">我们正在筹办 3 月开源市集，欢迎参与！</p>
82+
</blockquote>
83+
<figcaption className="h6 text-muted">
84+
即兴三月，开源开放！来都来了，玩就是了！👉
85+
<a
86+
href="https://open-source-bazaar.feishu.cn/docs/doccnGSsshgO4ojuAHVzWJMXWog?from=from_copylink"
87+
className="text-primary"
88+
>
89+
立刻协作
90+
</a>
91+
</figcaption>
92+
</figure>
93+
</Col>
94+
</Row>
95+
</section>
7396
</>
7497
);
7598

‎public/vercel.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"jsx": "preserve",
1717
"incremental": true
1818
},
19-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mdx"],
2020
"exclude": ["node_modules"]
2121
}

0 commit comments

Comments
 (0)