content: update showcase pages

package-lock.json

@@ -9,8 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "astro": "^1.2.6",
-        "astro-github-stats": "^0.2.1",
+        "astro-github-stats": "^0.3.1",
-        "astro-reactive-form": "^0.0.10"
+        "astro-reactive-form": "^0.1.1"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -985,17 +985,17 @@
       }
     },
     "node_modules/astro-github-stats": {
-      "version": "0.2.1",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.3.1.tgz",
-      "integrity": "sha512-MGbJB8sCJEl67tl7qvg+FPpgrmNDmBIjXzhEQxwPvEy574rbp019bdCTK9T3AX84sWD0QFh/zpiGBOpKSHU6Bw==",
+      "integrity": "sha512-AAsXvo6H8WiSoEjHLpbgetlrI8rNpZ7xY9bY3O++qysMXng3uzwxTyhPcvE5yI1QYJ4EdkB8ByiOUydOp5Fg1w==",
       "peerDependencies": {
         "astro": "^1.0.0"
       }
     },
     "node_modules/astro-reactive-form": {
-      "version": "0.0.10",
+      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/astro-reactive-form/-/astro-reactive-form-0.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/astro-reactive-form/-/astro-reactive-form-0.1.1.tgz",
-      "integrity": "sha512-51UmPdyPIZ+fovQvCgT4XctvvSJJoKMuIgitj7jqnFxqgBKMPPZVvJHnwRz3ssLe+vtaS83pyoLrJt+Fuc5yJQ==",
+      "integrity": "sha512-E9AabXwZKpq+nevtdKK0IGKMdGW+AyvHRraKovMarxBnVCl9ypzXXQ1FRqxgczrd1vsNTeR95G8165T+oPahMA==",
       "peerDependencies": {
         "astro": "^1.0.0"
       }
@@ -6570,15 +6570,15 @@
       }
     },
     "astro-github-stats": {
-      "version": "0.2.1",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.3.1.tgz",
-      "integrity": "sha512-MGbJB8sCJEl67tl7qvg+FPpgrmNDmBIjXzhEQxwPvEy574rbp019bdCTK9T3AX84sWD0QFh/zpiGBOpKSHU6Bw==",
+      "integrity": "sha512-AAsXvo6H8WiSoEjHLpbgetlrI8rNpZ7xY9bY3O++qysMXng3uzwxTyhPcvE5yI1QYJ4EdkB8ByiOUydOp5Fg1w==",
       "requires": {}
     },
     "astro-reactive-form": {
-      "version": "0.0.10",
+      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/astro-reactive-form/-/astro-reactive-form-0.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/astro-reactive-form/-/astro-reactive-form-0.1.1.tgz",
-      "integrity": "sha512-51UmPdyPIZ+fovQvCgT4XctvvSJJoKMuIgitj7jqnFxqgBKMPPZVvJHnwRz3ssLe+vtaS83pyoLrJt+Fuc5yJQ==",
+      "integrity": "sha512-E9AabXwZKpq+nevtdKK0IGKMdGW+AyvHRraKovMarxBnVCl9ypzXXQ1FRqxgczrd1vsNTeR95G8165T+oPahMA==",
       "requires": {}
     },
     "bail": {

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "astro": "^1.2.6",
-    "astro-github-stats": "^0.2.1",
+    "astro-github-stats": "^0.3.1",
-    "astro-reactive-form": "^0.0.10"
+    "astro-reactive-form": "^0.1.1"
   }
 }

src/pages/showcase/astro-github-stats.astro

@@ -9,9 +9,17 @@ import GithubStats from "astro-github-stats";
   <main>
     <Back url="/showcase" />
     <h1>Astro GitHub Stats ✨</h1>
+
+    <h3>Account Stats</h3>
     <GithubStats username="ayoayco" />
+
+    <h3>Account Top Languages</h3>
+    <GithubStats username="ayoayco" topLanguages={true} />
+
+    <h3>Repo card</h3>
     <GithubStats username="withastro" repo="astro" />
-    <h2>Links</h2>
+
+    <h3>Links</h3>
     <ol>
       <li>
         GitHub repo: <a href="https://github.com/ayoayco/astro-github-stats"
@@ -24,6 +32,7 @@ import GithubStats from "astro-github-stats";
         >
       </li>
     </ol>
+
     <Footer />
   </main>
 </Layout>

src/pages/showcase/astro-reactive-form.astro

@@ -2,8 +2,22 @@
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
 import Back from "../../components/Back.astro";
-import Form, { FormGroup } from "astro-reactive-form";
+import Form, { FormControl, FormGroup } from "astro-reactive-form";
-const form = new FormGroup([
+
+const simpleForm = new FormGroup([
+  {
+    name: "simple-text",
+    label: "Simple Text Control",
+  },
+  {
+    name: "a-checkbox",
+    label: "A Checkbox with Label on the left",
+    type: "checkbox",
+    value: "checked",
+  },
+]);
+
+const name: FormControl[] = [
   {
     name: "first-name",
     value: "Ayo",
@@ -14,21 +28,30 @@ const form = new FormGroup([
     value: "Ayco",
     label: "Last Name",
   },
-  {
+];
-    name: "is-awesome",
+
-    type: "checkbox",
+const characteristics: FormControl[] = [
-    value: "checked",
-    label: "Is Awesome?",
-    labelPosition: "right",
-  },
   {
     name: "is-good-looking",
     type: "radio",
+    label: "Is Good Looking?",
     value: "checked",
-    label: "Is Good-Looking?",
     labelPosition: "right",
   },
-]);
+  {
+    name: "is-awesome",
+    type: "checkbox",
+    label: "Is Awesome?",
+    value: "checked",
+    labelPosition: "right",
+  },
+];
+
+const nameForm: FormGroup = new FormGroup(name, "Name");
+const characteristicsForm: FormGroup = new FormGroup(
+  characteristics,
+  "Characteristics"
+);
 ---
 
 <Layout title="Ayo Ayco | Showcase | Astro Reactive Form">
@@ -36,9 +59,13 @@ const form = new FormGroup([
     <Back url="/showcase" />
     <h1>Astro Reactive Form 🔥</h1>
 
-    <Form formGroup={form} />
+    <h3>Simple single form group</h3>
+    <Form formGroups={[simpleForm]} />
 
-    <h2>Links</h2>
+    <h3>Multiple Form Groups</h3>
+    <Form formGroups={[nameForm, characteristicsForm]} />
+
+    <h3>Links</h3>
     <ol>
       <li>
         GitHub repo: <a href="https://github.com/ayoayco/astro-reactive-form"