Merge pull request #458 from OpenCatalogi/development

Development to main, week 11
OpenCatalogi · Mar 18, 2024 · 6a74ce4 · 6a74ce4
2 parents 03c0a66 + 0f00259
commit 6a74ce4
Show file tree

Hide file tree

Showing 25 changed files with 532 additions and 129 deletions.
diff --git a/.github/workflows/openCatalogi.yaml b/.github/workflows/openCatalogi.yaml
@@ -4,7 +4,6 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - main
       - development
 
 permissions:

diff --git a/.github/workflows/publiccode-action.yml b/.github/workflows/publiccode-action.yml
@@ -6,7 +6,7 @@ permissions:
 on:
   push:
     branches:
-      - never
+      - main
 
 jobs:
   build:

diff --git a/pwa/src/apiService/resources/components.ts b/pwa/src/apiService/resources/components.ts
@@ -25,4 +25,20 @@ export default class Component {
 
     return data;
   };
+
+  public getAllConfig = async (applicationName: string): Promise<any> => {
+    const { data } = await Send(
+      this._instance,
+      "GET",
+      `/components?extend[]=all&softwareType=configurationFiles&embedded.applicationSuite.name=${applicationName}`,
+    );
+
+    return data;
+  };
+
+  public getApplicationComponent = async (applicationName: string): Promise<any> => {
+    const { data } = await Send(this._instance, "GET", `/components?extend[]=all&name=${applicationName}`);
+
+    return data;
+  };
 }
diff --git a/pwa/src/apiService/resources/search.ts b/pwa/src/apiService/resources/search.ts
@@ -14,7 +14,6 @@ export default class Search {
     filters: IFiltersContext,
     currentPage: number,
     limit: number,
-    ratingFilter: string,
   ): Promise<any> => {
     let endpoint = `/search?page=${currentPage}&limit=${limit}&extend[]=all${filtersToQueryParams(filters)}`;
 

diff --git a/pwa/src/assets/images/OpenCatalogi.png b/pwa/src/assets/images/OpenCatalogi.png
diff --git a/pwa/src/assets/svgs/CommongroundRatingImages.tsx b/pwa/src/assets/svgs/CommongroundRatingImages.tsx
@@ -0,0 +1,191 @@
+import * as React from "react";
+
+export const CommongroundRatingGold: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="118.000000pt"
+    height="223.000000pt"
+    viewBox="0 0 118.000000 223.000000"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g transform="translate(0.000000,223.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+      <path
+        d="M481 2083 c-439 -550 -577 -1011 -405 -1353 67 -135 226 -237 418
+-271 l66 -11 0 -208 c0 -172 3 -210 15 -220 12 -10 18 -10 30 0 12 10 15 48
+15 221 l0 208 38 6 c220 37 376 134 447 278 67 138 86 272 61 435 -41 273
+-195 575 -467 915 -56 70 -105 127 -109 127 -4 0 -53 -57 -109 -127z m119 -88
+l0 -176 55 -51 55 -51 0 -78 c0 -68 3 -80 20 -89 41 -22 16 -100 -32 -100 -51
+0 -75 61 -38 95 16 15 20 31 20 89 0 65 -2 72 -32 103 -18 18 -36 33 -40 33
+-4 0 -8 -64 -8 -143 0 -140 1 -144 25 -167 30 -28 32 -49 5 -78 -26 -28 -54
+-28 -80 0 -27 29 -25 50 5 78 l25 23 0 224 c0 123 -2 223 -5 223 -3 0 -20 -17
+-40 -37 l-34 -38 -1 -125 c0 -113 2 -127 20 -143 27 -23 25 -52 -6 -76 -34
+-27 -40 -26 -69 4 -31 30 -31 36 0 73 24 28 25 36 25 153 l0 122 55 58 55 58
+0 95 c0 57 4 96 10 96 6 0 10 -65 10 -175z m244 -297 c14 -23 -3 -53 -30 -53
+-17 0 -20 -12 -27 -140 l-8 -140 -54 -55 c-30 -30 -58 -51 -62 -47 -4 4 17 31
+45 60 l52 53 0 131 c0 77 4 134 10 138 6 3 10 16 10 29 0 44 41 59 64 24z
+m-476 -58 c2 -13 13 -35 23 -49 16 -19 19 -40 19 -115 l0 -92 50 -49 c28 -27
+50 -56 50 -64 0 -9 -26 11 -60 44 l-60 59 0 97 c0 105 -7 120 -62 133 -21 5
+-28 13 -28 30 0 30 9 38 40 34 18 -2 26 -10 28 -28z m582 2 c0 -5 -11 -19 -25
+-32 -24 -22 -25 -29 -25 -135 0 -111 0 -111 -30 -140 -20 -20 -28 -35 -24 -47
+8 -28 -22 -68 -51 -68 -28 0 -65 32 -65 55 0 24 38 55 67 55 15 0 37 10 50 22
+21 20 23 30 23 127 0 105 0 105 32 138 31 32 48 41 48 25z m-661 -237 c54 -52
+74 -65 99 -65 31 0 62 -29 62 -57 0 -20 -38 -53 -60 -53 -30 0 -63 37 -56 64
+8 33 -106 144 -153 148 -52 5 -52 28 -1 28 38 0 48 -6 109 -65z m-79 -70 c7
+-8 19 -15 27 -15 8 0 51 -34 96 -75 78 -71 84 -75 129 -75 27 0 48 -4 48 -10
+0 -5 -23 -10 -52 -10 -51 0 -53 1 -129 75 -42 41 -82 75 -89 75 -6 0 -18 -7
+-26 -15 -9 -8 -19 -15 -24 -15 -11 0 -40 29 -40 40 0 11 29 40 39 40 5 0 14
+-7 21 -15z m828 -88 c4 -32 -21 -46 -49 -29 -10 7 -41 12 -69 12 -46 0 -55 -4
+-99 -45 -44 -41 -52 -45 -100 -45 -28 0 -51 5 -51 10 0 6 21 10 47 10 42 0 51
+5 99 50 50 48 55 50 108 50 33 0 56 4 56 11 0 6 12 9 28 7 21 -2 28 -9 30 -31z
+m-854 -132 c16 -12 54 -15 173 -15 95 0 153 -4 153 -10 0 -6 -59 -10 -158 -10
+-100 0 -162 -4 -169 -11 -16 -16 -57 -7 -61 14 -9 45 24 61 62 32z m871 -20
+c0 -24 -5 -31 -24 -33 -13 -2 -28 1 -34 7 -7 7 -69 11 -170 11 -122 0 -158 3
+-155 13 4 9 46 13 159 15 87 1 158 7 164 13 5 5 21 9 35 7 20 -2 25 -8 25 -33z
+m-218 -45 c10 -11 24 -20 32 -20 8 0 42 -27 77 -60 61 -59 63 -60 118 -60 31
+0 56 -4 56 -10 0 -12 -7 -12 -75 -10 -46 2 -55 6 -107 56 -31 30 -63 54 -70
+54 -7 0 -21 -9 -31 -20 -20 -24 -54 -26 -79 -3 -22 20 -23 42 -2 71 19 28 59
+29 81 2z m-407 -30 c23 -23 25 -39 7 -64 -17 -23 -83 -35 -194 -35 -81 -1 -84
+-2 -123 -37 -57 -52 -65 -32 -8 22 l47 44 91 0 c88 0 91 1 85 20 -9 30 20 70
+50 70 14 0 34 -9 45 -20z m10 -115 c-83 -83 -86 -85 -132 -85 -27 0 -57 -5
+-67 -12 -35 -22 -77 16 -51 47 16 19 44 19 60 0 7 -9 29 -15 54 -15 38 0 47 6
+116 75 41 41 81 75 90 75 8 0 -23 -38 -70 -85z m285 45 c38 -39 41 -40 106
+-40 44 0 70 -5 78 -14 6 -7 24 -16 40 -19 30 -6 44 -27 35 -51 -14 -36 -61
+-28 -70 13 -11 45 -22 51 -92 51 -64 0 -68 1 -109 42 -24 23 -43 46 -43 50 0
+17 17 7 55 -32z m-93 -107 c26 -23 23 -69 -4 -87 -20 -13 -23 -22 -20 -72 l4
+-56 32 31 c19 18 42 31 58 31 14 0 37 11 52 25 31 29 43 31 74 9 14 -10 22
+-26 22 -44 0 -18 -8 -34 -22 -44 -30 -22 -42 -20 -76 9 -38 32 -62 24 -115
+-34 -32 -36 -37 -47 -37 -91 0 -28 -4 -50 -10 -50 -5 0 -10 12 -10 26 0 32
+-12 55 -66 121 -30 37 -44 63 -44 83 0 25 -4 30 -25 30 -30 0 -65 32 -65 60 0
+42 62 75 96 52 24 -16 33 -48 23 -90 -11 -50 -3 -74 45 -127 l35 -40 1 76 c0
+71 -2 78 -25 93 -46 30 -23 106 33 106 14 0 34 -7 44 -17z"
+      />
+    </g>
+  </svg>
+);
+
+export const CommongroundRatingSilver: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="118.000000pt"
+    height="223.000000pt"
+    viewBox="0 0 118.000000 223.000000"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g transform="translate(0.000000,223.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+      <path
+        d="M517 2133 c-159 -192 -303 -410 -383 -578 -184 -387 -173 -748 28
+  -941 80 -77 195 -132 326 -155 l72 -12 0 -214 c0 -181 2 -215 15 -219 8 -4 22
+  -1 30 6 12 10 15 49 15 220 l0 208 48 7 c199 30 377 144 446 288 135 277 56
+  658 -224 1081 -94 141 -283 386 -299 386 -5 0 -38 -35 -74 -77z m83 -146 l0
+  -173 55 -54 55 -54 0 -72 c0 -58 4 -74 20 -89 11 -10 20 -29 20 -41 0 -29 -41
+  -58 -70 -49 -43 14 -49 74 -9 95 16 9 19 22 19 78 0 67 0 68 -45 112 l-45 44
+  0 -155 c0 -143 1 -155 20 -167 22 -14 27 -61 8 -80 -7 -7 -24 -12 -38 -12 -14
+  0 -31 5 -38 12 -19 19 -14 66 8 80 19 12 20 24 20 247 l0 235 -45 -44 -45 -44
+  0 -126 c0 -116 2 -126 21 -138 15 -9 19 -21 17 -44 -4 -40 -28 -55 -65 -42
+  -37 12 -45 66 -14 86 19 12 21 22 21 143 l0 131 55 54 55 54 0 93 c0 55 4 93
+  10 93 6 0 10 -64 10 -173z m245 -307 c0 -20 -6 -26 -30 -30 l-30 -5 -3 -140
+  -3 -140 -46 -47 c-65 -66 -78 -60 -14 6 l51 55 0 135 c0 80 4 137 10 141 6 4
+  8 10 5 15 -12 19 8 41 34 38 20 -2 26 -8 26 -28z m-486 -24 c6 -8 11 -18 9
+  -22 -1 -5 6 -22 17 -38 16 -24 20 -49 21 -124 l2 -94 53 -54 c29 -30 49 -54
+  44 -54 -5 0 -33 23 -62 52 l-53 52 0 100 c0 109 -11 136 -57 136 -28 0 -40 24
+  -23 45 16 19 34 19 49 1z m562 -51 c-31 -35 -31 -37 -31 -144 0 -105 -1 -109
+  -25 -125 -19 -12 -25 -25 -25 -51 0 -26 -6 -39 -25 -51 -23 -15 -27 -15 -50 0
+  -32 21 -33 60 -1 81 13 8 31 13 40 9 11 -4 26 2 42 16 23 22 24 30 24 131 0
+  101 2 109 26 138 14 17 33 31 41 31 10 0 6 -11 -16 -35z m-641 -200 c53 -53
+  70 -65 96 -65 38 0 64 -22 64 -54 0 -29 -18 -46 -50 -46 -34 0 -50 17 -50 55
+  0 45 -113 155 -159 155 -17 0 -31 5 -31 10 0 6 15 10 33 10 27 0 44 -11 97
+  -65z m-49 -81 c19 -9 67 -49 106 -88 67 -65 77 -71 125 -77 l53 -6 -55 -2 -56
+  -1 -74 75 c-70 71 -101 88 -115 65 -9 -15 -45 -12 -51 5 -8 20 2 45 19 45 8 0
+  29 -7 48 -16z m803 -66 c8 -14 7 -21 -6 -34 -16 -16 -19 -16 -42 -1 -14 10
+  -44 17 -68 17 -37 0 -48 -6 -89 -46 -41 -40 -55 -47 -97 -52 -30 -2 -52 0 -56
+  7 -5 8 10 11 46 11 51 0 57 3 98 45 41 42 48 45 96 45 34 0 56 5 64 15 16 19
+  39 16 54 -7z m-854 -143 c10 -12 45 -15 174 -17 l161 -2 -160 -3 c-128 -3
+  -162 -7 -177 -19 -31 -29 -75 9 -48 41 16 19 34 19 50 0z m870 0 c27 -32 -17
+  -70 -48 -41 -15 12 -49 16 -177 19 l-160 3 161 2 c129 2 164 5 174 17 16 19
+  34 19 50 0z m-210 -70 c19 -14 39 -25 45 -25 6 0 35 -25 65 -55 52 -53 56 -55
+  107 -55 29 0 53 -4 53 -10 0 -5 -25 -10 -57 -10 -55 0 -57 1 -120 61 l-63 61
+  -31 -26 c-17 -14 -37 -26 -45 -26 -19 0 -54 36 -54 55 0 18 35 55 53 55 7 0
+  28 -11 47 -25z m-418 -22 c22 -20 23 -56 2 -73 -17 -15 -46 -19 -179 -26 -87
+  -5 -91 -6 -127 -42 -50 -48 -62 -32 -13 18 l38 39 96 3 96 3 3 30 c7 57 48 81
+  84 48z m17 -119 c-75 -72 -78 -74 -127 -74 -32 0 -54 -5 -62 -15 -20 -25 -54
+  -15 -58 16 -4 33 23 46 48 24 10 -9 36 -15 65 -15 46 0 50 3 124 74 41 41 78
+  72 81 70 2 -3 -30 -39 -71 -80z m383 6 c46 0 69 -4 78 -15 7 -8 27 -19 44 -23
+  24 -6 31 -14 31 -33 0 -33 -48 -35 -53 -2 -2 13 -14 31 -28 42 -20 16 -35 18
+  -78 14 -52 -5 -55 -4 -100 37 -25 23 -46 47 -46 53 0 6 19 -8 43 -31 41 -41
+  45 -42 109 -42z m-192 -70 c26 -26 25 -46 -5 -76 -21 -21 -25 -34 -25 -84 0
+  -33 2 -60 4 -60 3 0 22 16 43 35 23 21 48 35 64 35 14 0 34 9 44 20 22 24 52
+  26 77 3 22 -20 23 -41 1 -65 -21 -24 -59 -23 -80 2 -28 32 -61 25 -109 -24
+  -41 -40 -44 -47 -44 -95 0 -28 -4 -51 -10 -51 -5 0 -10 12 -10 28 0 29 -14 54
+  -72 124 -22 26 -38 56 -38 71 0 20 -6 27 -29 32 -16 3 -35 12 -41 20 -19 23
+  -8 68 21 84 24 13 29 13 53 -3 26 -17 27 -20 21 -84 l-6 -67 43 -52 43 -53 3
+  81 c3 76 1 82 -23 100 -14 11 -25 29 -25 40 0 25 35 59 60 59 11 0 29 -9 40
+  -20z"
+      />
+    </g>
+  </svg>
+);
+
+export const CommongroundRatingBronze: React.FC = () => (
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="118.000000pt"
+    height="223.000000pt"
+    viewBox="0 0 118.000000 223.000000"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <g transform="translate(0.000000,223.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
+      <path
+        d="M517 2133 c-159 -192 -303 -410 -383 -578 -184 -387 -173 -748 28
+-941 80 -77 195 -132 326 -155 l72 -12 0 -214 c0 -181 2 -215 15 -219 8 -4 22
+-1 30 6 12 10 15 49 15 220 l0 208 48 7 c199 30 377 144 446 288 135 277 56
+658 -224 1081 -94 141 -283 386 -299 386 -5 0 -38 -35 -74 -77z m83 -146 l0
+-173 55 -54 55 -54 0 -72 c0 -58 4 -74 20 -89 11 -10 20 -29 20 -41 0 -29 -41
+-58 -70 -49 -43 14 -49 74 -9 95 16 9 19 22 19 78 0 67 0 68 -45 112 l-45 44
+0 -155 c0 -143 1 -155 20 -167 22 -14 27 -61 8 -80 -7 -7 -24 -12 -38 -12 -14
+0 -31 5 -38 12 -19 19 -14 66 8 80 19 12 20 24 20 247 l0 235 -45 -44 -45 -44
+0 -126 c0 -116 2 -126 21 -138 15 -9 19 -21 17 -44 -4 -40 -28 -55 -65 -42
+-37 12 -45 66 -14 86 19 12 21 22 21 143 l0 131 55 54 55 54 0 93 c0 55 4 93
+10 93 6 0 10 -64 10 -173z m245 -307 c0 -20 -6 -26 -30 -30 l-30 -5 -3 -140
+-3 -140 -46 -47 c-65 -66 -78 -60 -14 6 l51 55 0 135 c0 80 4 137 10 141 6 4
+8 10 5 15 -12 19 8 41 34 38 20 -2 26 -8 26 -28z m-486 -24 c6 -8 11 -18 9
+-22 -1 -5 6 -22 17 -38 16 -24 20 -49 21 -124 l2 -94 53 -54 c29 -30 49 -54
+44 -54 -5 0 -33 23 -62 52 l-53 52 0 100 c0 109 -11 136 -57 136 -28 0 -40 24
+-23 45 16 19 34 19 49 1z m562 -51 c-31 -35 -31 -37 -31 -144 0 -105 -1 -109
+-25 -125 -19 -12 -25 -25 -25 -51 0 -26 -6 -39 -25 -51 -23 -15 -27 -15 -50 0
+-32 21 -33 60 -1 81 13 8 31 13 40 9 11 -4 26 2 42 16 23 22 24 30 24 131 0
+101 2 109 26 138 14 17 33 31 41 31 10 0 6 -11 -16 -35z m-641 -200 c53 -53
+70 -65 96 -65 38 0 64 -22 64 -54 0 -29 -18 -46 -50 -46 -34 0 -50 17 -50 55
+0 45 -113 155 -159 155 -17 0 -31 5 -31 10 0 6 15 10 33 10 27 0 44 -11 97
+-65z m-49 -81 c19 -9 67 -49 106 -88 67 -65 77 -71 125 -77 l53 -6 -55 -2 -56
+-1 -74 75 c-70 71 -101 88 -115 65 -9 -15 -45 -12 -51 5 -8 20 2 45 19 45 8 0
+29 -7 48 -16z m803 -66 c8 -14 7 -21 -6 -34 -16 -16 -19 -16 -42 -1 -14 10
+-44 17 -68 17 -37 0 -48 -6 -89 -46 -41 -40 -55 -47 -97 -52 -30 -2 -52 0 -56
+7 -5 8 10 11 46 11 51 0 57 3 98 45 41 42 48 45 96 45 34 0 56 5 64 15 16 19
+39 16 54 -7z m-854 -143 c10 -12 45 -15 174 -17 l161 -2 -160 -3 c-128 -3
+-162 -7 -177 -19 -31 -29 -75 9 -48 41 16 19 34 19 50 0z m870 0 c27 -32 -17
+-70 -48 -41 -15 12 -49 16 -177 19 l-160 3 161 2 c129 2 164 5 174 17 16 19
+34 19 50 0z m-210 -70 c19 -14 39 -25 45 -25 6 0 35 -25 65 -55 52 -53 56 -55
+107 -55 29 0 53 -4 53 -10 0 -5 -25 -10 -57 -10 -55 0 -57 1 -120 61 l-63 61
+-31 -26 c-17 -14 -37 -26 -45 -26 -19 0 -54 36 -54 55 0 18 35 55 53 55 7 0
+28 -11 47 -25z m-418 -22 c22 -20 23 -56 2 -73 -17 -15 -46 -19 -179 -26 -87
+-5 -91 -6 -127 -42 -50 -48 -62 -32 -13 18 l38 39 96 3 96 3 3 30 c7 57 48 81
+84 48z m17 -119 c-75 -72 -78 -74 -127 -74 -32 0 -54 -5 -62 -15 -20 -25 -54
+-15 -58 16 -4 33 23 46 48 24 10 -9 36 -15 65 -15 46 0 50 3 124 74 41 41 78
+72 81 70 2 -3 -30 -39 -71 -80z m383 6 c46 0 69 -4 78 -15 7 -8 27 -19 44 -23
+24 -6 31 -14 31 -33 0 -33 -48 -35 -53 -2 -2 13 -14 31 -28 42 -20 16 -35 18
+-78 14 -52 -5 -55 -4 -100 37 -25 23 -46 47 -46 53 0 6 19 -8 43 -31 41 -41
+45 -42 109 -42z m-192 -70 c26 -26 25 -46 -5 -76 -21 -21 -25 -34 -25 -84 0
+-33 2 -60 4 -60 3 0 22 16 43 35 23 21 48 35 64 35 14 0 34 9 44 20 22 24 52
+26 77 3 22 -20 23 -41 1 -65 -21 -24 -59 -23 -80 2 -28 32 -61 25 -109 -24
+-41 -40 -44 -47 -44 -95 0 -28 -4 -51 -10 -51 -5 0 -10 12 -10 28 0 29 -14 54
+-72 124 -22 26 -38 56 -38 71 0 20 -6 27 -29 32 -16 3 -35 12 -41 20 -19 23
+-8 68 21 84 24 13 29 13 53 -3 26 -17 27 -20 21 -84 l-6 -67 43 -52 43 -53 3
+81 c3 76 1 82 -23 100 -14 11 -25 29 -25 40 0 25 35 59 60 59 11 0 29 -9 40
+-20z"
+      />
+    </g>
+  </svg>
+);
diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css
@@ -116,30 +116,21 @@
   }
 }
 
-.commongroundRating {
-  border-radius: 50%;
-  height: 70px;
-  width: 70px;
-  justify-content: center;
-  align-items: center;
-  display: flex;
+.commongroundRating > * {
+  height: 100px;
 }
 
 /* Colors of commonground rating */
-
-.goldRating {
-  background-color: #d4af37;
-  color: #ffffff;
+.goldRating > svg > g {
+  fill: #d4af37;
 }
 
-.silverRating {
-  background: #bcc6cc;
-  color: #ffffff;
+.silverRating > svg > g {
+  fill: #bcc6cc;
 }
 
-.bronzeRating {
-  background: #a97142;
-  color: #ffffff;
+.bronzeRating > svg > g {
+  fill: #a97142;
 }
 
 /* Colors of the 5 layers */

diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx
@@ -15,6 +15,11 @@ import { navigate } from "gatsby";
 import { RatingIndicatorTemplate } from "../../templates/templateParts/ratingIndicator/RatingIndicatorTemplate";
 import { getCommongroundRating } from "../../services/getCommongroundRating";
 import { getStatusColor } from "../../services/getStatusColor";
+import {
+  CommongroundRatingBronze,
+  CommongroundRatingGold,
+  CommongroundRatingSilver,
+} from "../../assets/svgs/CommongroundRatingImages";
 
 export interface ComponentCardProps {
   title: {
@@ -41,9 +46,17 @@ export interface ComponentCardProps {
     licence?: string;
     githubLink?: string;
   };
+  layoutClassName?: string;
 }
 
-export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, categories, description, tags }) => {
+export const ComponentCard: React.FC<ComponentCardProps> = ({
+  title,
+  layer,
+  categories,
+  description,
+  tags,
+  layoutClassName,
+}) => {
   const { t } = useTranslation();
 
   const ratingFilter = window.sessionStorage.getItem("FILTER_RATING");
@@ -54,13 +67,39 @@ export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, cate
     layer &&
     categories?.length &&
     categories.map((category: any) => {
-      return _categories[_layer]?.find((_category: any) => {
+      const result = _categories[_layer]?.find((_category: any) => {
         return _category.value === category;
       });
+
+      if (!result) {
+        return {
+          title: category,
+        };
+      } else {
+        return result;
+      }
     });
 
+  const getCommongroundImage = (rating: number) => {
+    switch (rating) {
+      case 0:
+        return <CommongroundRatingBronze />;
+      case 1:
+        return <CommongroundRatingBronze />;
+      case 2:
+        return <CommongroundRatingSilver />;
+      case 3:
+        return <CommongroundRatingGold />;
+      default:
+        return <CommongroundRatingBronze />;
+    }
+  };
+
   return (
-    <CardWrapper className={styles.container} onClick={() => navigate(title.href)}>
+    <CardWrapper
+      className={clsx([styles.container, layoutClassName && layoutClassName])}
+      onClick={() => navigate(title.href)}
+    >
       <CardHeader>
         <CardHeaderTitle>
           <Link className={styles.title} onClick={() => navigate(title.href)}>
@@ -186,7 +225,7 @@ export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, cate
                       styles.commongroundRating,
                     )}
                   >
-                    {t(getCommongroundRating(tags.ratingCommonground.rating))}
+                    {getCommongroundImage(tags.ratingCommonground.rating ?? "0")}
                   </div>
                 )}
               </>

diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts
@@ -2,8 +2,8 @@ import * as React from "react";
 import { GlobalContext } from "./global";
 
 export interface IFiltersContext {
-  isForked: string;
-  orderRating: string;
+  isForked: boolean;
+  orderRating: boolean;
   rating: string;
   ratingCommonground: string;
 
@@ -39,16 +39,20 @@ export const defaultFiltersContext: IFiltersContext = {
   isForked:
     isWindow && window.sessionStorage.getItem("FILTER_FORKS")
       ? window.sessionStorage.getItem("FILTER_FORKS") === "true"
-        ? "true"
-        : "false"
-      : process.env.GATSBY_FILTER_FORKS ?? "false",
+        ? true
+        : false
+      : process.env.GATSBY_FILTER_FORKS === "true"
+        ? true
+        : false,
 
   orderRating:
     isWindow && window.sessionStorage.getItem("FILTER_RATING")
       ? window.sessionStorage.getItem("FILTER_RATING") !== "false"
-        ? "true"
-        : "false"
-      : process.env.GATSBY_RATING ?? "false",
+        ? true
+        : false
+      : process.env.GATSBY_RATING === "true"
+        ? true
+        : false,
   rating:
     isWindow && window.sessionStorage.getItem("FILTER_RATING")
       ? window.sessionStorage.getItem("FILTER_RATING") !== "false"