milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

packages/app/src/components/loading/index.tsx

@@ -1,14 +1,3 @@
-import { StyledLoading, StyledLoadingItem } from './styled';
-
-export const Loading = () => {
-  return (
-    <StyledLoading>
-      <StyledLoadingItem />
-      <StyledLoadingItem />
-      <StyledLoadingItem />
-      <StyledLoadingItem />
-    </StyledLoading>
-  );
-};
-
+import Loading from './loading';
+export * from './page-loading';
 export default Loading;

packages/app/src/components/loading/loading.tsx

@@ -0,0 +1,20 @@
+import {
+  StyledLoadingWrapper,
+  StyledLoading,
+  StyledLoadingItem,
+} from './styled';
+
+export const Loading = ({ size = 40 }: { size?: number }) => {
+  return (
+    <StyledLoadingWrapper size={size}>
+      <StyledLoading>
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+        <StyledLoadingItem size={size} />
+      </StyledLoading>
+    </StyledLoadingWrapper>
+  );
+};
+
+export default Loading;

packages/app/src/components/loading/page-loading.tsx

@@ -0,0 +1,31 @@
+import { styled } from '@/styles';
+import Loading from './loading';
+
+// Used for the full page loading
+const StyledLoadingContainer = styled('div')(() => {
+  return {
+    height: '100vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: '#6880FF',
+    h1: {
+      fontSize: '2em',
+      marginTop: '15px',
+      fontWeight: '600',
+    },
+  };
+});
+
+export const PageLoading = ({ text = 'Loading...' }: { text?: string }) => {
+  return (
+    <StyledLoadingContainer>
+      <div className="wrapper">
+        <Loading />
+        <h1>{text}</h1>
+      </div>
+    </StyledLoadingContainer>
+  );
+};
+
+export default PageLoading;

packages/app/src/components/loading/styled.ts

@@ -1,14 +1,19 @@
 import { styled } from '@/styles';
 
 // Inspired by https://codepen.io/graphilla/pen/rNvBMYY
-const loadingItemSize = '40px';
+export const StyledLoadingWrapper = styled.div<{ size?: number }>(
+  ({ size = 40 }) => {
+    return {
+      width: size * 4,
+      height: size * 4,
+      position: 'relative',
+    };
+  }
+);
 export const StyledLoading = styled.div`
-  position: relative;
-  left: 50%;
-  transform: rotateX(55deg) rotateZ(-45deg)
-    translate(calc(${loadingItemSize} * -2), 0);
-  margin-bottom: calc(3 * ${loadingItemSize});
-
+  position: absolute;
+  left: 25%;
+  top: 25%;
   @keyframes slide {
     0% {
       transform: translate(var(--sx), var(--sy));
@@ -21,24 +26,14 @@ export const StyledLoading = styled.div`
       transform: translate(var(--ex), var(--ey));
     }
   }
-  @keyframes load {
-    20% {
-      content: '.';
-    }
-    40% {
-      content: '..';
-    }
-    80%,
-    100% {
-      content: '...';
-    }
-  }
 `;
 
-export const StyledLoadingItem = styled.div`
+export const StyledLoadingItem = styled.div<{ size: number }>(
+  ({ size = 40 }) => {
+    return `
   position: absolute;
-  width: ${loadingItemSize};
-  height: ${loadingItemSize};
+  width: ${size}px;
+  height: ${size}px;
   background: #9dacf9;
   animation: slide 0.9s cubic-bezier(0.65, 0.53, 0.59, 0.93) infinite;
 
@@ -92,3 +87,5 @@ export const StyledLoadingItem = styled.div`
     --ey: -50%;
   }
 `;
+  }
+);