add release notes

Eugene · Eugene · commit 09166a5967e4 · 2022-01-02T18:59:14.000+02:00
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react-responsive-carousel": "^3.2.22",
     "react-router-dom": "^6.2.1",
     "react-scripts": "4.0.3",
+    "react-showdown": "^2.3.1",
     "react-slotify": "^0.1.7",
     "react-snow-particle": "^1.0.6",
     "typescript": "^4.4.4"
diff --git a/src/assets/images/icons/chevron-left.svg b/src/assets/images/icons/chevron-left.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24"
+  viewBox="0 0 24 24">
+  <path fill="#1c1c1e" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
+</svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/1.svg b/src/assets/images/projects/quick-picture-viewer/features/1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" /></svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/2.svg b/src/assets/images/projects/quick-picture-viewer/features/2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6,20H15L18,20V12L14,16L12,14L6,20M8,9A2,2 0 0,0 6,11A2,2 0 0,0 8,13A2,2 0 0,0 10,11A2,2 0 0,0 8,9Z" /></svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/3.svg b/src/assets/images/projects/quick-picture-viewer/features/3.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20.5,11H19V7C19,5.89 18.1,5 17,5H13V3.5A2.5,2.5 0 0,0 10.5,1A2.5,2.5 0 0,0 8,3.5V5H4A2,2 0 0,0 2,7V10.8H3.5C5,10.8 6.2,12 6.2,13.5C6.2,15 5,16.2 3.5,16.2H2V20A2,2 0 0,0 4,22H7.8V20.5C7.8,19 9,17.8 10.5,17.8C12,17.8 13.2,19 13.2,20.5V22H17A2,2 0 0,0 19,20V16H20.5A2.5,2.5 0 0,0 23,13.5A2.5,2.5 0 0,0 20.5,11Z" /></svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/4.svg b/src/assets/images/projects/quick-picture-viewer/features/4.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" /></svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/5.svg b/src/assets/images/projects/quick-picture-viewer/features/5.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M9,7V17H11V13H13A2,2 0 0,0 15,11V9A2,2 0 0,0 13,7H9M11,9H13V11H11V9M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" /></svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/6.svg b/src/assets/images/projects/quick-picture-viewer/features/6.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,11H11V17H19V11M23,19V5C23,3.88 22.1,3 21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19M21,19H3V4.97H21V19Z" /></svg>
diff --git a/src/assets/images/projects/quick-picture-viewer/features/7.svg b/src/assets/images/projects/quick-picture-viewer/features/7.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>
diff --git a/src/assets/scss/animations.scss b/src/assets/scss/animations.scss
@@ -1,8 +1,26 @@
-@keyframes lds-dual-ring {
+@keyframes lds-ellipsis1 {
   0% {
-    transform: rotate(0deg);
+    transform: scale(0);
   }
   100% {
-    transform: rotate(360deg);
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
   }
 }
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
@@ -14,6 +14,7 @@ $size-md: 8px; // medium
 $size-lg: 16px; // large
 $size-xl: 32px; // extra large
 $size-mx: 64px; // maximum
+$size-mx2: 128px; // double maximum
 
 // font size
 $font-size-sm: 14px; // small
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -5,7 +5,7 @@ const Footer: FunctionComponent = () => {
   return (
     <footer className="footer">
       <span className="footer__copyright">
-        Copyright © 2022 Module Art. All rights reserved.
+        Copyright © {new Date().getFullYear()} Module Art. All rights reserved.
       </span>
     </footer>
   );
diff --git a/src/components/Loading/index.scss b/src/components/Loading/index.scss
@@ -1,3 +1,45 @@
+@import "../../assets/scss/variables.scss";
+@import "../../assets/scss/animations.scss";
+
 .loading {
-  
-}
+  padding: $size-xl;
+  display: flex;
+  justify-content: center;
+
+  &__lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+
+    div {
+      position: absolute;
+      top: 33px;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: $color-text;
+      animation-timing-function: cubic-bezier(0, 1, 1, 0);
+
+      &:nth-child(1) {
+        left: 8px;
+        animation: lds-ellipsis1 0.6s infinite;
+      }
+
+      &:nth-child(2) {
+        left: 8px;
+        animation: lds-ellipsis2 0.6s infinite;
+      }
+
+      &:nth-child(3) {
+        left: 32px;
+        animation: lds-ellipsis2 0.6s infinite;
+      }
+      
+      &:nth-child(4) {
+        left: 56px;
+        animation: lds-ellipsis3 0.6s infinite;
+      }
+    }
+  }
+}
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
@@ -2,10 +2,15 @@ import { FunctionComponent } from "react";
 
 import "./index.scss";
 
-const Loading: FunctionComponent= () => {
+const Loading: FunctionComponent = () => {
   return (
     <div className="loading">
-
+      <div className="loading__lds-ellipsis">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/MarkdownView/Props.ts b/src/components/MarkdownView/Props.ts
@@ -0,0 +1,5 @@
+interface Props {
+  markdown: string;
+}
+
+export default Props;
diff --git a/src/components/MarkdownView/index.scss b/src/components/MarkdownView/index.scss
@@ -0,0 +1,16 @@
+@import "../../assets/scss/variables.scss";
+
+.markdown-view {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: $size-xl 0 $size-md;
+  }
+
+  img {
+    margin: $size-xl 0;
+  }
+}
diff --git a/src/components/MarkdownView/index.tsx b/src/components/MarkdownView/index.tsx
@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+import Showdown from "react-showdown";
+
+import Props from "./Props";
+import "./index.scss";
+
+const MarkdownView: FunctionComponent<Props> = ({ markdown }) => {
+  return (
+    <div className="markdown-view">
+      <Showdown markdown={markdown} options={{ tables: true, emoji: true }} />
+    </div>
+  );
+};
+
+export default MarkdownView;
diff --git a/src/components/ProjectCard/index.scss b/src/components/ProjectCard/index.scss
@@ -28,7 +28,7 @@
   &__image {
     position: absolute;
     left: $size-mx;
-    width: calc(100% - #{$size-mx * 2});
+    width: calc(100% - #{$size-mx2});
     top: 96px;
     transition: top $duration-t, box-shadow $duration-t;
     border-radius: $size-md;
diff --git a/src/components/Slider/index.scss b/src/components/Slider/index.scss
@@ -31,7 +31,7 @@
     cursor: pointer;
     background-color: #fff;
     z-index: 1;
-    box-shadow: $shadow-md;
+    box-shadow: $shadow-lg;
 
     &:hover {
       background-color: #fff;
@@ -43,7 +43,7 @@
 
     &--prev {
       left: -$size-xl;
-      transform: rotate(180deg);
+      background-image: url("../../assets/images/icons/chevron-left.svg");
     }
   }
 
@@ -69,36 +69,47 @@
         content: "";
         position: absolute;
         bottom: 0;
-        left: $size-md;
-        width: calc(100% - #{$size-lg});
-        height: $size-xs;
-        border-radius: 1px;
-        background: $color-primary;
+        left: calc(50% - #{($size-xs + $size-md) / 2});
+        width: $size-md;
+        height: $size-md;
+        border-radius: 50%;
+        background: #fff;
         opacity: 0;
         transition: opacity $duration-t, transform $duration-t;
-        top: calc(100% + #{$size-sm});
+        top: calc(100% - #{$size-xs + $size-md});
         pointer-events: none;
+        box-shadow: $shadow-lg;
+        border: $size-xs solid $color-primary;
       }
 
-      &:hover,
       &.selected {
-        border: none;
-
         &::before {
           opacity: 1;
           transform: translateY($size-sm);
         }
       }
 
+      &:hover,
+      &.selected {
+        border: none;
+
+        img.slider__image {
+          outline-offset: -1px;
+          outline: 2px solid $color-primary;
+          box-shadow: $shadow-xl;
+        }
+      }
+
       img.slider__image {
-        border-radius: $size-sm;
-        box-shadow: none;
+        border-radius: $size-md;
+        box-shadow: $shadow-lg;
         width: 100%;
+        transition: box-shadow $duration-t;
       }
     }
 
     .slider-wrapper {
-      padding-bottom: #{$size-mx * 2};
+      padding-bottom: $size-mx2;
       box-sizing: content-box;
       transition: height $duration-t;
     }
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
@@ -15,6 +15,7 @@ const Slider: FunctionComponent<Props> = ({ images, labels = [] }) => {
         autoFocus
         showStatus={false}
         showIndicators={false}
+        thumbWidth={64}
         renderArrowNext={(clickHandler) => {
           return (
             <button
diff --git a/src/config/Main.ts b/src/config/Main.ts
@@ -43,7 +43,7 @@ const mainConfig: MainConfig = {
       githubPath: "RoadToDream/SzContext",
       platform: Platform.mac,
       os: "macOS 10.15+",
-      authorName: "DuanJiawei",
+      authorName: "Duan Jiawei",
       authorUrl: "https://github.com/RoadToDream",
     },
     // {
diff --git a/src/pages/ProjectPage/index.scss b/src/pages/ProjectPage/index.scss
@@ -76,4 +76,22 @@
     color: $color-secondary;
     margin-top: $size-lg;
   }
+
+  &__tile-heading {
+    text-align: center;
+    margin: $size-mx2 0 $size-xl;
+    font-size: $font-size-xl;
+  }
+
+  &__release-name {
+    text-align: center;
+    margin: $size-lg 0;
+    font-weight: $font-weight-md;
+  }
+
+  &__tile {
+    padding: $size-mx;
+    background: $color-substrate;
+    border-radius: $size-lg;
+  }
 }
diff --git a/src/pages/ProjectPage/index.tsx b/src/pages/ProjectPage/index.tsx
diff --git a/yarn.lock b/yarn.lock
