Feature/issue-1344/player-lineups-urls (#1347) (#1366)

.github/CONTRIBUTING_TEMPLATES/README.md

@@ -0,0 +1,26 @@
+# How to contribute ?
+
+#### ➕ Creating a new widget
+
+> When creating a new widget, please follow the following guidelines:
+
+1. Structure the widget as follows:
+
+```
+/lib/
+  -> components/
+    -> X/
+      -> new-widget/
+        -> loaders/
+        -> New-Widget-Widget.svelte
+          Is the MAIN entry point to the widget that is being created, think of it as the *handler*
+          for the widget, containing "data" getter for the widget, and showing loaders.
+        -> New-Widget-Main.svelte
+          Is the MAIN widget layout, design and logic, after the parent [...]-Widget.svelte has loaded all necessary
+          data and deemed it OK to show the widget.
+        -> New-Widget-Loader.svelte
+          Is the MAIN widget loader layout, used for showing the widget outline and it's preloading-state. Used in
+          conjuction with the .svelte files in the laoders/ folder, containing .svg elements within.
+```
+
+⚠️ Take a look at the `src/lib/components/page/player/team` as an example.

CONTRIBUTING/TEMPLATE.svelte → .github/CONTRIBUTING_TEMPLATES/TEMPLATE.v5.svelte

@@ -17,20 +17,18 @@ COMPONENT JS (w/ TS)
 <script lang="ts">
 
   //#region ➤ [MAIN] Package Imports
-  // <-imports-go-here->
 
-	import { onMount } from 'svelte';
 	import { viewport_change } from '$lib/utils/platform-functions';
-  import profile_avatar from './assets/profile-avatar.svg';
+	import { onMount } from 'svelte';
+
+	import profile_avatar from './assets/profile-avatar.svg';
+
+	import SeoBox from '$lib/components/SEO-Box.svelte';
 
   //#endregion ➤ [MAIN] Package Imports
 
   //#region ➤ [VARIABLES]
 
-  // ~~~~~~~~~~~~~~~~~~~~~
-  //  COMPONENT VARIABLES
-  // ~~~~~~~~~~~~~~~~~~~~~
-
   export const EXAMPLE_VALUE
   
   const EXAMPLE_VALUE
@@ -43,7 +41,13 @@ COMPONENT JS (w/ TS)
   //  COMPONENT METHODS
   // ~~~~~~~~~~~~~~~~~~~~~
 
-  function do_something() {}
+  function do_something
+  (
+    // arg
+  )
+  {
+    // logic
+  }
 
   // ~~~~~~~~~~~~~~~~~~~~~
 	// VIEWPORT CHANGES | IMPORTANT
@@ -97,6 +101,12 @@ COMPONENT HTML
 NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
 =================-->
 
+<SeoBox>
+  <!-- 
+  SEO CONTENT GOES HERE
+  -->
+</SeoBox>
+
 <!-- 
 [ℹ] example comment
 -->
@@ -117,17 +127,13 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
 
 <style>
 
-  /* #region ❌ [NOT WORKING] w/ regions */
-  div#example {
-    color: var(--dark-theme);
-    background-color: var();
-  } div#example > div#target {
-  }
-  /* #endregion ❌ [NOT WORKING] w/ regions */
-
-  div#example {
+  div#example 
+  {
     color: var(--dark-theme);
-  } div#example > div#target {
+  } 
+  div#example > div#target 
+  {
+    
   }
 
   /*
@@ -137,8 +143,9 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
   */
 
   @media only screen 
-    and (min-width: 726px) 
-    and (max-width: 1000px) {
+  and (min-width: 726px) 
+  and (max-width: 1000px) 
+  {
   }
 
   /*