feat: omnibox

chaos-design · Sep 12, 2024 · 7cd1336 · 7cd1336
1 parent 419de8b
commit 7cd1336
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 102 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,26 +1,25 @@
-name: Deploy Next.js site to Pages
+name: Deploy Site to Github Pages
 
 on:
   push:
     branches: ["main"]
-
   workflow_dispatch:
 
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 permissions:
   contents: read
   pages: write
   id-token: write
 
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@main
 
       - name: Detect package manager
         id: detect-package-manager
@@ -59,19 +58,30 @@ jobs:
         run: |
           pnpm install
 
-      - name: Build with Next.js
-        run: pnpm run build
+      - name: Build
+        run: |
+          pnpm run build
+          touch ./out/.nojekyll
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
 
   deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
     runs-on: ubuntu-latest
+    needs: build
+
     steps:
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@4.1.5
-        with:
-          branch: gh-pages # The branch the action should deploy to.
-          folder: out # The folder the action should deploy.
+      - name: Publish to GitHub Pages 🚀
+        id: deployment
+        uses: actions/deploy-pages@v4
+        # uses: JamesIves/github-pages-deploy-action@v4
+        # with:
+        #   token: ${{ secrets.ACCESS_TOKEN }}
+        #   branch: gh-pages # The branch the action should deploy to.
+        #   folder: build # The folder the action should deploy.
diff --git a/README.md b/README.md
@@ -1,36 +1,11 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Omnibox
 
-## Getting Started
+访问地址: https://chaos-design.github.io/omnibox
 
-First, run the development server:
+## 功能
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- [x] 代码
+    - [x] 对比 code-diff
+    - [x] 美化 code-format
+- [x] JSON
+    - [x] 序列化、压缩等功能 stringify-parse
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -4,6 +4,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import js from '@eslint/js';
 import { FlatCompat } from '@eslint/eslintrc';
+import { config } from 'node:process';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -13,7 +14,7 @@ const compat = new FlatCompat({
   allConfig: js.configs.all,
 });
 
-export default [
+const config = [
   {
     ignores: ['menu.mjs'],
   },
@@ -47,7 +48,7 @@ export default [
 
       quotes: [
         'error',
-        'double',
+        'single',
         {
           avoidEscape: true,
         },
@@ -67,3 +68,5 @@ export default [
     },
   },
 ];
+
+export default config;
diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
   },
   "lint-staged": {
     "src/**/*.{ts,tsx,js,jsx}": [
-      "eslint --fix",
       "prettier --write",
       "git add"
     ]

diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/index.module.scss b/src/app/index.module.scss
@@ -4,6 +4,17 @@
 
 .pageContainer {
   height: 100%;
+  text-align: center;
+}
+
+.features {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .feature {
+
+  }
 }
 
 .logoContainer {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,13 +1,63 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
+
+import { ExperimentTwoTone, CodeTwoTone, ShopTwoTone } from '@ant-design/icons';
+import { Card, Col, Row, Typography } from 'antd';
+
+const { Title, Paragraph } = Typography;
 
 import s from './index.module.scss';
 
+const features = [
+  {
+    icon: <ExperimentTwoTone />,
+    title: 'Ciao',
+    description: '💎Omnibox',
+  },
+  {
+    icon: <CodeTwoTone />,
+    title: '代码',
+    description: '💻 支持多种编程语言的代码对比、格式化功能',
+  },
+  {
+    icon: <ShopTwoTone />,
+    title: 'JSON',
+    description: '📝 JSON处理',
+  },
+];
+
 const App: React.FC = () => {
   return (
     <div className={s.pageContainer}>
-      首页
+      <Typography>
+        <Title>OmniBox</Title>
+
+        <Paragraph>
+          Omnibox是一个万能工具箱，包括并不限于代码美化、代码对比、JSON类的处理功能。
+        </Paragraph>
+      </Typography>
+      <Row gutter={16}>
+        {features.map((feature, index) => (
+          <Col span={24 / features.length}>
+            <Card
+              bordered={false}
+              title={
+                <>
+                  <span className={s.featureIcon}>{feature.icon}</span>
+                  <span className={s.featureTitle}>{feature.title}</span>
+                </>
+              }
+            >
+              <div key={index} className={s.feature}>
+                <div className={s.featureDescription}>
+                  {feature.description}
+                </div>
+              </div>
+            </Card>
+          </Col>
+        ))}
+      </Row>
     </div>
   );
 };

diff --git a/src/app/template.tsx b/src/app/template.tsx
@@ -2,11 +2,8 @@
 
 import React, { useState } from 'react';
 
-import {
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-} from '@ant-design/icons';
-import { ConfigProvider, Button, Layout, Menu, theme } from 'antd';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { ConfigProvider, Button, Layout, Menu, theme, Space } from 'antd';
 
 import Link from 'next/link';
 import Image from 'next/image';
@@ -17,7 +14,8 @@ import themeConfig from './themeConfig';
 
 import s from './index.module.scss';
 import Toolbar from '../components/toolbar';
-import { AppConfig, AppConfigParams } from '../utils/config/app';
+import type { AppConfigParams } from '../utils/config/app';
+import { AppConfig } from '../utils/config/app';
 import { MonacoEditor } from '../utils/config/editor';
 
 import { menu } from '../utils/menu';
@@ -79,6 +77,20 @@ export default function Template({
                 />
                 <div className={s.slogan}>Chaos</div>
               </div>
+
+              <Space>
+                <Button
+                  type="link"
+                  onClick={() => {
+                    window.open(
+                      'https://github.com/chaos-design/omnibox',
+                      '_blank',
+                    );
+                  }}
+                >
+                  GitHub
+                </Button>
+              </Space>
             </Header>
             <Layout>
               <Sider trigger={null} collapsible collapsed={collapsed}>
@@ -103,16 +115,6 @@ export default function Template({
                 </div>
               </Sider>
               <Layout>
-                {/* <Header style={{ padding: 0, background: colorBgContainer }}>
-              <Button
-                type="text"
-                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-                onClick={() => setCollapsed(!collapsed)}
-                style={{
-                  fontSize: '16px',
-                }}
-              />
-            </Header> */}
                 <Content
                   style={{
                     margin: 16,
@@ -122,9 +124,6 @@ export default function Template({
                     borderRadius: borderRadiusLG,
                   }}
                 >
-                  {/* <div className={s.contentHeader}>
-                    <Toolbar />
-                  </div> */}
                   {children}
                 </Content>
                 <Footer