feat: support uploading static resources to aws s3 (#17)

* feat: support uploading static resources to aws s3

* fix: dark animation

* fix: test ci should set up the NODE_ENV to test

Author: qinluhe

.eslintignore

@@ -1,3 +1,4 @@
 .next
 node_modules
-next.config.js
+next.config.js
+**.js

.github/workflows/deploy_dev.yml

@@ -13,6 +13,10 @@ jobs:
     env:
       SSH_TARGET: 54.206.53.213
       NODE_ENV: production
+      ENVIRONMENT: test
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+
 
     steps:
       - name: Checkout code
@@ -32,5 +36,5 @@ jobs:
 
       - name: Deploy to EC2
         run: |
-          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa.pem admin@$SSH_TARGET "cd space/AppFlowy-Website && git fetch && git reset --hard origin/${{ steps.branch.outputs.branch }} && pnpm install && pnpm run build && node run-script.js" || { echo "Failed to execute the command"; exit 1; }
+          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa.pem admin@$SSH_TARGET "cd space/AppFlowy-Website && git fetch && git reset --hard origin/${{ steps.branch.outputs.branch }} && pnpm install && pnpm run build && pnpm run upload:s3 && node run-script.js" || { echo "Failed to execute the command"; exit 1; }
         

.github/workflows/deploy_prod.yml

@@ -18,6 +18,9 @@ jobs:
     env:
       SSH_TARGET: 54.206.53.213
       NODE_ENV: production
+      ENVIRONMENT: production
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
 
     steps:
       - name: Checkout code
@@ -33,4 +36,4 @@ jobs:
 
       - name: Deploy to EC2 (Main)
         run: |
-          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa.pem admin@$SSH_TARGET "cd space/AppFlowy-Website && git fetch && git reset --hard origin/${{ inputs.branch }} && pnpm install && pnpm run build && node run-script.js" || { echo "Failed to execute the command"; exit 1; }
+          ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa.pem admin@$SSH_TARGET "cd space/AppFlowy-Website && git fetch && git reset --hard origin/${{ inputs.branch }} && pnpm install && pnpm run build && pnpm run upload:s3 && node run-script.js" || { echo "Failed to execute the command"; exit 1; }

.github/workflows/test.yml

@@ -13,6 +13,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
 
+    env:
+      NODE_ENV: test
+
     steps:
       - name: Checkout source code
         uses: actions/checkout@v2
@@ -27,12 +30,12 @@ jobs:
           pnpm install
       - name: Build
         run: |
-          pnpm run build
+          NODE_ENV=test pnpm run build
       - name: Run lint
         run: |
           pnpm run lint
       - name: Run tests
         run: |
-          pnpm run start &
+          NODE_ENV=test pnpm run start &
           pnpm run test:headless
 

.gitignore

@@ -36,4 +36,4 @@ next-env.d.ts
 
 cypress/videos
 
-**/*.log
+**/*.log

README.md

@@ -6,11 +6,7 @@ with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/
 First, run the development server:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
+pnpm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -20,6 +16,13 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and
 load Inter, a custom Google Font.
 
+## How to modify the content?
+
+### Static Text Content
+
+- `lib/config/home.tsx` - Home page content
+- `lib/config/pages.tsx` - Other pages content
+
 ## Deploy
 
 ### Automatic Testing Environment Deployment

app/appflowy-blocks/page.tsx

@@ -21,7 +21,7 @@ function Page() {
           </svg>
         </div>
       </div>
-      <div className={'desc'}>{blocksPageConfig.desc}</div>
+      <div className={'desc'}>{blocksPageConfig.subtitle}</div>
       <AppflowyBlocks />
     </div>
   );

app/contributors/page.tsx

@@ -9,7 +9,7 @@ function Page() {
     <div className={'contributors-page'}>
       <div className={'ellipse'} />
       <div className={'title'}>
-        {contributorsPageConfig.title1}
+        {contributorsPageConfig.mainTitle}
         <div className={'line'}>
           <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 174 6' fill='none'>
             <path
@@ -21,10 +21,10 @@ function Page() {
           </svg>
         </div>
       </div>
-      <div className={'desc'}>{contributorsPageConfig.desc}</div>
+      <div className={'desc'}>{contributorsPageConfig.subtitle}</div>
       <ContributorsList />
       <div className={'title learn-more'}>
-        {contributorsPageConfig.title2}
+        {contributorsPageConfig.learnMoreTitle}
         <div className={'line'}>
           <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 155 6' fill='none'>
             <path

app/progress/page.tsx renamed to app/downloading/page.tsx

@@ -20,7 +20,8 @@ body {
     @apply text-black dark:text-white;
     font-family: "Inter", sans-serif;
     font-size: 16px;
-    background: #EAE6FF;
+    @apply bg-light-blue-gray;
+    @apply dark:bg-night-blue;
 }
 
 @media screen and (max-width: 768px) {

app/globals.css

@@ -21,7 +21,7 @@ function Page() {
           </svg>
         </div>
       </div>
-      <div className={'desc'}>{joinPageConfig.desc}</div>
+      <div className={'desc'}>{joinPageConfig.subtitle}</div>
       <Link href={'/join#opening'}>
         <div className={'download-btn'}>Open Position</div>
       </Link>
@@ -40,7 +40,7 @@ function Page() {
         </div>
       </div>
       <div className={'title opening'} id={'opening'}>
-        {joinPageConfig.title1}
+        {joinPageConfig.currentJobTitle}
         <div className={'circle'}>
           <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 163 90' fill='none'>
             <path