Merge branch 'master' into ci-optimization

# Conflicts:
#	.github/workflows/build-website.yml

.github/dependabot.yml

@@ -6,3 +6,9 @@ updates:
       interval: "weekly"
       day: "friday"
     open-pull-requests-limit: 5
+
+  - package-ecosystem: "npm"
+    directory: "/website"
+    schedule:
+      interval: "daily"
+    target-branch: "master"

.github/workflows/benchmark.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - master
   pull_request_target:
+      types: [labeled, synchronize, opened, reopened]
 
 permissions:
   # deployments permission to deploy GitHub pages website
@@ -37,7 +38,7 @@ jobs:
           # Push and deploy GitHub pages branch automatically
           alert-threshold: "200%"
           alert-comment-cc-users: "@yewstack/yew"
-          comment-always: true
+          comment-always: ${{ github.event_name != 'pull_request_target' || contains(github.event.pull_request.labels.*.name, 'performance') }}
           comment-on-alert: true
           # Don't push to gh-pages if its a pull request
           auto-push: ${{ github.event_name != 'pull_request_target' }}

.github/workflows/build-website.yml

@@ -20,24 +20,23 @@ jobs:
       PR_INFO_FILE: ".PR_INFO"
     steps:
       - uses: actions/checkout@v2
+
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "16"
 
-      - uses: actions/cache@v2
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-build-website-${{ hashFiles('website/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-website-
-            ${{ runner.os }}
+      - name: Check Translations
+        run: |
+          cd website
+          npm install
+          npm run check-translations
 
       - name: Build
         run: |
           cd website
-          npm install
           npm run build
+
       - name: Upload build artifact
         uses: actions/upload-artifact@v2
         with:
@@ -49,10 +48,11 @@ jobs:
         name: Build pr info
         run: |
           echo "${{ github.event.number }}" > $PR_INFO_FILE
+
       - if: github.event_name == 'pull_request'
         name: Upload pr info
         uses: actions/upload-artifact@v2
         with:
           name: pr-info
           path: "${{ env.PR_INFO_FILE }}"
-          retention-days: 1
+          retention-days: 1

.github/workflows/publish-examples.yml

@@ -53,6 +53,11 @@ jobs:
               continue
             fi
 
+            # ssr does not need trunk
+            if [[ "$example" == "simple_ssr" ]]; then
+              continue
+            fi
+
             echo "building: $example"
             (
               cd "$path"

CONTRIBUTING.md

@@ -101,3 +101,10 @@ Below, you can find some useful guidance and best practices on how to write APIs
 
 - [The Rust API Guidelines](https://rust-lang.github.io/api-guidelines/)
 - [Elegant Library APIs in Rust](https://deterministic.space/elegant-apis-in-rust.html)
+
+## Website
+
+The source code of our website ([https://yew.rs](https://yew.rs)) is in the [website directory](website).
+Most of the times, edits can be done in markdown.
+
+[website/README.md](website/README.md) has more detailed instructions.

Cargo.toml

@@ -14,6 +14,7 @@ members = [
   "examples/counter",
   "examples/dyn_create_destroy_apps",
   "examples/file_upload",
+  "examples/function_memory_game",
   "examples/function_todomvc",
   "examples/futures",
   "examples/game_of_life",
@@ -26,6 +27,7 @@ members = [
   "examples/password_strength",
   "examples/portals",
   "examples/router",
+  "examples/simple_ssr",
   "examples/timer",
   "examples/todomvc",
   "examples/two_apps",

Makefile.toml

@@ -38,7 +38,7 @@ category = "Testing"
 description = "Run all tests"
 dependencies = ["tests-setup"]
 env = { CARGO_MAKE_WORKSPACE_SKIP_MEMBERS = ["**/examples/*", "**/packages/changelog"] }
-run_task = { name = ["test-flow", "doc-test-flow", "website-test"], fork = true }
+run_task = { name = ["test-flow", "doc-test-flow", "ssr-test", "website-test"], fork = true }
 
 [tasks.benchmarks]
 category = "Testing"
@@ -113,3 +113,8 @@ category = "Maintainer processes"
 toolchain = "stable"
 command = "cargo"
 args = ["run","-p","changelog", "--release", "${@}"]
+
+[tasks.ssr-test]
+env = { CARGO_MAKE_WORKSPACE_INCLUDE_MEMBERS = ["**/packages/yew"] }
+private = true
+workspace = true

README.md

@@ -11,7 +11,7 @@
     <a href="https://crates.io/crates/yew"><img alt="Crate Info" src="https://img.shields.io/crates/v/yew.svg"/></a>
     <a href="https://docs.rs/yew/"><img alt="API Docs" src="https://img.shields.io/badge/docs.rs-yew-green"/></a>
     <a href="https://discord.gg/VQck8X4"><img alt="Discord Chat" src="https://img.shields.io/discord/701068342760570933"/></a>
-    <a href="https://gitlocalize.com/repo/4999"> <img src="https://gitlocalize.com/repo/4999/whole_project/badge.svg" /> </a>
+    <a href="https://gitlocalize.com/repo/4999/whole_project?utm_source=badge"> <img src="https://gitlocalize.com/repo/4999/whole_project/badge.svg" /> </a>
     <a href="https://blog.rust-lang.org/2020/12/31/Rust-1.56.0.html"><img alt="Rustc Version 1.56.0+" src="https://img.shields.io/badge/rustc-1.56%2B-lightgrey.svg"/></a>
   </p>
 

examples/agents/Cargo.toml

@@ -2,7 +2,7 @@
 name = "agents"
 version = "0.1.0"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
-edition = "2018"
+edition = "2021"
 license = "MIT OR Apache-2.0"
 
 [dependencies]

examples/boids/Cargo.toml

@@ -2,7 +2,7 @@
 name = "boids"
 version = "0.1.0"
 authors = ["motoki saito <stmtk13044032@gmail.com>"]
-edition = "2018"
+edition = "2021"
 license = "MIT OR Apache-2.0"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

examples/contexts/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "contexts"
 version = "0.1.0"
-edition = "2018"
+edition = "2021"
 license = "MIT OR Apache-2.0"
 
 [dependencies]

examples/counter/Cargo.toml

@@ -2,7 +2,7 @@
 name = "counter"
 version = "0.1.1"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
-edition = "2018"
+edition = "2021"
 license = "MIT OR Apache-2.0"
 
 [dependencies]

examples/dyn_create_destroy_apps/Cargo.toml

@@ -2,7 +2,7 @@
 name = "dyn_create_destroy_apps"
 version = "0.1.0"
 authors = ["Nicklas Warming Jacobsen <nicklaswj@gmail.com>"]
-edition = "2018"
+edition = "2021"
 license = "MIT OR Apache-2.0"
 
 [dependencies]

examples/file_upload/Cargo.toml

@@ -2,7 +2,7 @@
 name = "file_upload"
 version = "0.1.0"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
-edition = "2018"
+edition = "2021"
 license = "MIT OR Apache-2.0"
 
 [dependencies]

examples/function_memory_game/Cargo.toml

@@ -0,0 +1,22 @@
+[package]
+name = "function_memory_game"
+version = "0.1.0"
+authors = ["Howard.Zuo <leftstick@qq.com>"]
+edition = "2021"
+license = "MIT OR Apache-2.0"
+
+[dependencies]
+serde = { version = "1.0", features = ["derive"] }
+strum = "0.23"
+strum_macros = "0.23"
+gloo = "0.4"
+nanoid = "0.4"
+rand = "0.8"
+getrandom = { version = "0.2", features = ["js"] }
+yew = { path = "../../packages/yew" }
+
+[dependencies.web-sys]
+version = "0.3"
+features = [
+	"HtmlInputElement",
+]

examples/function_memory_game/README.md

@@ -0,0 +1,15 @@
+# Memory Game Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Ffunction_memory_game)](https://examples.yew.rs/function_memory_game)
+
+This is an implementation of [Memory Game](https://github.com/bradlygreen/Memory-Game) for Yew using function components and hooks.
+
+## Concepts
+
+- Uses [`function_components`](https://yew.rs/docs/next/concepts/function-components)
+- Uses [`gloo::storage`](https://docs.rs/gloo-storage/0.2.0/gloo_storage/index.html) to persist the state
+- Uses [`gloo::timers`](https://docs.rs/gloo-timers/0.2.2/gloo_timers/index.html) to schedule asynchronous callback
+
+## Note
+
+Images are authorized by [@bradlygreen](https://github.com/bradlygreen), see [authorization-issue](https://github.com/bradlygreen/Memory-Game/issues/6)

examples/function_memory_game/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="public/favicon.ico" />
+    <title>Yew • Function Memory Game</title>
+    <base data-trunk-public-url />
+
+    <link data-trunk rel="sass" href="scss/index.scss" />
+    <link data-trunk rel="copy-dir" href="public/" />
+
+  </head>
+  <body></body>
+</html>

examples/function_memory_game/scss/chess_board.scss

@@ -0,0 +1,28 @@
+.chess-board {
+  margin-top: 20px;
+  width: 100%;
+  background-color: #fff;
+  height: 530px;
+  border-radius: 4px;
+  padding: 10px 5px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: space-around;
+  .chess-board-card-container:nth-child(4n) {
+    margin-right: 0px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .chess-board {
+    height: 480px;
+    padding: 10px 0px;
+  }
+}
+@media screen and (max-width: 370px) {
+  .chess-board {
+    height: 450px;
+  }
+}

examples/function_memory_game/scss/chess_board_card.scss

@@ -0,0 +1,61 @@
+.chess-board-card-container {
+  width: 100px;
+  height: 121px;
+  margin-right: 3px;
+  cursor: pointer;
+  position: relative;
+  perspective: 800px;
+
+  .card {
+    width: 100%;
+    height: 100%;
+    transition: transform 1s;
+    transform-style: preserve-3d;
+  }
+
+  .card.flipped {
+    transform: rotateY(180deg);
+  }
+
+  .card img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    backface-visibility: hidden;
+  }
+
+  .card .back {
+    background: blue;
+    transform: rotateY(0deg);
+  }
+
+  .card .front {
+    background: blue;
+    transform: rotateY(180deg);
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .chess-board-card-container {
+    width: 92px;
+    height: 111px;
+    margin-right: 1px;
+  }
+}
+
+@media screen and (max-width: 395px) {
+  .chess-board-card-container {
+    width: 85px;
+    height: 102px;
+    margin-right: 1px;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .chess-board-card-container {
+    width: 70px;
+    height: 84px;
+    margin-right: 1px;
+  }
+}

examples/function_memory_game/scss/game_progress.scss

@@ -0,0 +1,48 @@
+.game-progress {
+  width: 120px;
+  height: 100px;
+  padding: 10px;
+  background-color: #bbada0;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  color: #eae0d1;
+
+  span {
+    font-size: 19px;
+    font-weight: bold;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  h2 {
+    color: #fff;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .game-progress {
+    width: 105px;
+    span {
+      font-size: 17px;
+    }
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .game-progress {
+    width: 95px;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .game-progress {
+    width: 90px;
+    span {
+      font-size: 15px;
+    }
+  }
+}