chore: init

.github/renovate.json

@@ -0,0 +1,23 @@
+{
+  "labels": ["dependencies"],
+  "extends": [
+    "config:base",
+    ":automergePatch",
+    ":automergeTypes",
+    ":automergeTesters",
+    ":automergeLinters",
+    ":rebaseStalePrs"
+  ],
+  "packageRules": [
+    {
+      "updateTypes": [
+        "major"
+      ],
+      "labels": [
+        "UPDATE-MAJOR",
+        "dependencies"
+      ]
+    }
+  ],
+  "enabled": true
+}

.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+on:
+  pull_request:
+
+
+name: Build CI
+
+jobs:
+  build:
+    name: Build
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+      - uses: pnpm/[email protected]
+        with:
+          version: latest
+          run_install: false
+
+      - name: Build project
+        run: |
+          pnpm i
+          pnpm run build
+          npx next export

.github/workflows/deploy.yml

@@ -0,0 +1,51 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-${{ matrix.node-version }}-
+      - uses: pnpm/[email protected]
+        with:
+          version: latest
+          run_install: false
+
+      - name: Build project
+        run: |
+          pnpm i
+          pnpm run build
+          npx next export
+      - name: Add CNAME
+        run: |
+          echo "mx-space.js.org" > out/CNAME
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: out
+    env:
+      CI: true

.gitignore

@@ -0,0 +1,4 @@
+.next
+node_modules
+out
+public/rss.*

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Shu Ding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/features/index.module.css

@@ -0,0 +1,127 @@
+.feature {
+  position: relative;
+  padding: 1.5rem 1.75rem;
+  color: #000;
+  background-color: white;
+  overflow: hidden;
+  border-radius: 1.78em;
+}
+.feature.large {
+  grid-column: span 2;
+}
+.feature.centered {
+  text-align: center;
+}
+.feature h3 {
+  position: relative;
+  font-size: 34px;
+  font-size: min(34px, max(4vw, 24px));
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.02rem;
+  z-index: 2;
+}
+:global(.dark) .feature:not(.light-only) {
+  color: #fff;
+  background-color: #202020;
+}
+.feature {
+  box-shadow: 0 8px 16px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%),
+    0 0 0 1px rgb(0 0 0 / 3%);
+  transition: box-shadow 0.3s ease;
+}
+:global(.dark) .feature {
+  box-shadow: 0 0 0 1px rgb(82 82 82 / 60%);
+}
+.feature .link {
+  position: absolute;
+  right: 1em;
+  bottom: 1em;
+  z-index: 2;
+  width: 2.5em;
+  height: 2.5em;
+  background-color: rgb(0 0 0 / 39%);
+  backdrop-filter: blur(10px);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 0 2px rgb(154 154 154 / 56%), 0 0 30px rgb(0 0 0 / 10%);
+  transition: all 0.2s ease;
+  -webkit-user-drag: none;
+}
+@media (hover: hover) {
+  .feature .link {
+    opacity: 0;
+  }
+  .feature:hover .link {
+    opacity: 1;
+  }
+  .feature .link:hover {
+    transform: scale(1.05);
+    color: rgba(255, 255, 255, 1);
+    background-color: rgba(64, 64, 64, 0.39);
+    box-shadow: 0 0 0 2px rgba(220, 220, 220, 0.56), 0 0 30px rgb(0 0 0 / 10%);
+  }
+  .feature .link:active {
+    transform: scale(1);
+    color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(22, 22, 22, 0.39);
+    box-shadow: 0 0 0 2px rgba(178, 178, 178, 0.56), 0 0 30px rgb(0 0 0 / 10%);
+  }
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 2em;
+  font-feature-settings: initial;
+}
+
+.feature :global(.show-on-mobile) {
+  display: none;
+}
+
+@media screen and (max-width: 1024px) {
+  .feature {
+    max-width: 80vw;
+    width: 100%;
+  }
+  .feature.large {
+    grid-column: span 1;
+  }
+  .features {
+    grid-template-columns: 1fr;
+    grid-gap: 3em;
+    justify-items: center;
+  }
+  .feature h3 {
+    font-size: 28px;
+    font-size: min(28px, max(4vw, 22px));
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .feature {
+    max-width: 460px;
+    width: 100%;
+  }
+  .feature.large {
+    grid-column: span 1;
+  }
+  .features {
+    grid-template-columns: 1fr;
+    grid-gap: 3em;
+    justify-items: center;
+  }
+  .feature h3 {
+    font-size: 34px;
+    font-size: min(34px, max(4vw, 22px));
+    text-align: center;
+  }
+  .feature :global(.show-on-mobile) {
+    display: block;
+  }
+}

components/features/index.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import cn from 'clsx'
+import { motion } from 'framer-motion'
+
+import styles from './index.module.css'
+
+export function Feature({
+  large,
+  centered,
+  children,
+  lightOnly,
+  className,
+  href,
+  index,
+  ...props
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: '-20px' }}
+      transition={{ duration: Math.min(0.25 + index * 0.2, 0.8) }}
+      className={cn(
+        styles.feature,
+        large && styles.large,
+        centered && styles.centered,
+        lightOnly && styles['light-only'],
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {href ? (
+        <Link className={styles.link} href={href}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.5em"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </Link>
+      ) : null}
+    </motion.div>
+  )
+}
+
+export function Features({ children }: { children: ReactNode }) {
+  return <div className={styles.features}>{children}</div>
+}