fixed links + added href modal for the "engage" button.

c3lang · Jan 25, 2024 · 92e14b5 · 92e14b5
1 parent 9407ccc
commit 92e14b5
Show file tree

Hide file tree

Showing 9 changed files with 1,501 additions and 27 deletions.
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
@@ -165,11 +165,11 @@ declare module 'astro:content' {
 			? {
 					collection: C;
 					slug: ValidContentEntrySlug<C>;
-				}
+			  }
 			: {
 					collection: C;
 					id: keyof DataEntryMap[C];
-				}
+			  }
 	>;
 	// Allow generic `string` to avoid excessive type errors in the config
 	// if `dev` is not running to update as you edit.

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,7 +9,14 @@
     ".vscode": true,
     ".github": true,
     ".astro": true,
-    "node_modules": true
+    "node_modules": true,
+    "pnpm-lock.yaml": true
   },
-  "hide-files.files": [".vscode", ".github", ".astro", "node_modules"]
+  "hide-files.files": [
+    ".vscode",
+    ".github",
+    ".astro",
+    "node_modules",
+    "pnpm-lock.yaml"
+  ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@astrojs/starlight": "^0.15.2",
     "@astrojs/svelte": "^5.0.2",
     "@astrojs/tailwind": "^5.0.4",
+    "@preline/overlay": "^2.0.2",
     "astro": "^4.0.7",
     "boxicons": "^2.1.4",
     "preline": "^2.0.3",

diff --git a/public/overlay.min.js b/public/overlay.min.js
diff --git a/src/components/community.astro b/src/components/community.astro
@@ -2,6 +2,140 @@
 
 ---
 
+<div
+  id="hs-basic-modal"
+  class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden w-full h-full fixed top-0 start-0 z-[80] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none"
+>
+  <div
+    class="hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto"
+  >
+    <div
+      class="flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-stone-950 dark:border-gray-700 dark:shadow-slate-700/[.7]"
+    >
+      <div
+        class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700"
+      >
+        <h3 class="font-bold text-gray-800 dark:text-white">The Community</h3>
+        <button
+          type="button"
+          class="flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+          data-hs-overlay="#hs-basic-modal"
+        >
+          <span class="sr-only">Close</span>
+          <svg
+            class="flex-shrink-0 w-4 h-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            ><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg
+          >
+        </button>
+      </div>
+      <div class="p-4 overflow-y-auto">
+        <p class="mt-1 text-gray-800 dark:text-gray-400">
+          C3 has a wonderful and welcoming community full of passionate people,
+          join us on:
+        </p>
+        <!-- icon + link -->
+        <div class="flex items-center gap-x-2 mt-4">
+          <box-icon
+            class="w-6 h-6 text-black dark:text-white"
+            type="logo"
+            name="discord"
+            color="currentColor"
+            fill="currentColor"></box-icon>
+          <a
+            class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
+            href="https://discord.gg/PXr5QCXpTf"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Discord
+          </a>
+        </div>
+        <!-- icon + link -->
+        <div class="flex items-center gap-x-2 mt-4">
+          <box-icon
+            class="w-6 h-6 text-black dark:text-white"
+            type="logo"
+            name="discourse"
+            color="currentColor"
+            fill="currentColor"></box-icon>
+          <a
+            class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
+            href="https://c3lang.discourse.group/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Discourse
+          </a>
+        </div>
+        <!-- icon + link -->
+        <div class="flex items-center gap-x-2 mt-4">
+          <box-icon
+            class="w-6 h-6 text-black dark:text-white"
+            type="logo"
+            name="github"
+            color="currentColor"
+            fill="currentColor"></box-icon>
+          <a
+            class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
+            href="https://github.com/c3lang/c3c/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub Discussions
+          </a>
+        </div>
+
+        <p class="mt-4 text-gray-800 dark:text-gray-400">
+          You can also follow us on:
+        </p>
+        <!-- icon + link -->
+        <div class="flex items-center gap-x-2 mt-4">
+          <box-icon
+            class="w-6 h-6 text-black dark:text-white"
+            type="logo"
+            name="twitter"
+            color="currentColor"
+            fill="currentColor"></box-icon>
+          <a
+            class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
+            href="https://twitter.com/C3Lang"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Twitter
+          </a>
+        </div>
+      </div>
+      <div
+        class="flex
+            justify-end
+            items-center
+            gap-x-2
+            py-3
+            px-4
+            border-t
+            dark:border-gray-700"
+      >
+        <button
+          type="button"
+          class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+          data-hs-overlay="#hs-basic-modal"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="flex flex-col center content-center items-center justify-center">
   <h1
     style="font-size: 64px"
@@ -17,7 +151,7 @@
   >
     <a
       class="flex flex-col h-full text-center rounded-md hover:bg-gray-100 p-4 sm:p-6 dark:hover:bg-white/[.05]"
-      href="#"
+      href="/c3-web/references/"
     >
       <box-icon
         class="w-24 h-24 mx-auto text-black dark:text-white"
@@ -37,7 +171,7 @@
     </a>
     <a
       class="flex flex-col h-full text-center rounded-md hover:bg-gray-100 p-4 sm:p-6 dark:hover:bg-white/[.05]"
-      href="#"
+      href="/c3-web/guide/"
     >
       <box-icon
         class="w-24 h-24 mx-auto text-black dark:text-white"
@@ -55,17 +189,17 @@
         </p>
       </div>
     </a>
-    <a
+    <button
       class="flex flex-col h-full text-center rounded-md hover:bg-gray-100 p-4 sm:p-6 dark:hover:bg-white/[.05]"
-      href="#"
+      type="button"
+      data-hs-overlay="#hs-basic-modal"
     >
       <box-icon
         class="w-24 h-24 mx-auto text-black dark:text-white"
         type="solid"
         name="chat"
         color="currentColor"
         fill="currentColor"></box-icon>
-
       <div class="grow">
         <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
           Engage
@@ -74,7 +208,7 @@
           Help us improve C3 by being a part of the community.
         </p>
       </div>
-    </a>
+    </button>
   </div>
 </div>
 <footer class="mt-auto w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">

diff --git a/src/components/hero.astro b/src/components/hero.astro
@@ -12,7 +12,10 @@ import Navbar from "./navbar.astro";
       <h1
         class="flex justify-center content-center font-bold text-stone-950 text-2xl md:text-5xl lg:text-6xl dark:text-gray-200"
       >
-        <img src="https://raw.githubusercontent.com/onrirr/c3-web/a34e01d91fcaa6c7964efbe8e865ff41409a2b3a/public/logo.svg" class="flex justfity-center" />
+        <img
+          src="https://raw.githubusercontent.com/onrirr/c3-web/a34e01d91fcaa6c7964efbe8e865ff41409a2b3a/public/logo.svg"
+          class="flex justfity-center"
+        />
       </h1>
     </div>
     <div class="mt-5 max-w-3xl text-center mx-auto">
@@ -23,7 +26,7 @@ import Navbar from "./navbar.astro";
     <div class="mt-8 grid gap-3 w-full sm:inline-flex sm:justify-center">
       <a
         class="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 border border-transparent text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-4 dark:focus:ring-offset-stone-950"
-        href="#"
+        href="/c3-web/guide"
       >
         Get started
         <svg
@@ -44,7 +47,7 @@ import Navbar from "./navbar.astro";
         class="relative group inline-flex justify-center items-center gap-x-3.5 text-center bg-white border hover:border-gray-300 shadow-sm font-mono text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition p-2 pl-4 dark:bg-slate-900 dark:border-stone-950 dark:hover:border-gray-600 dark:shadow-slate-700/[.7] dark:text-white dark:focus:ring-stone-700 dark:focus:ring-offset-stone-950"
         href="javascript:;"
       >
-        $ choco install c3
+        $ c3c compile hello.c3
         <span
           class="flex justify-center items-center bg-gray-200 rounded-md w-7 h-7 dark:bg-stone-700 dark:text-gray-400"
         >
@@ -84,7 +87,7 @@ import Navbar from "./navbar.astro";
       </svg>
       <a
         class="inline-flex items-center gap-x-1.5 text-sm text-blue-600 decoration-2 hover:underline font-medium"
-        href="#"
+        href="/c3-web/references/installing/setup"
       >
         Installation Guide
         <svg

diff --git a/src/components/sample.astro b/src/components/sample.astro
@@ -19,6 +19,7 @@
           <div class="">
             <button
               type="button"
+              onclick="window.location.href='https://github.com/c3lang/c3c/releases/download/latest/c3-windows.zip'"
               class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-l-md border font-medium text-gray-700 dark:text-gray-400 shadow-sm bg-white dark:bg-stone-950 hover:bg-blue-500 dark:hover:bg-blue-950 focus:z-10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:hover:bg-slate-800 dark:border-gray-700 dark:hover:text-white dark:focus:ring-offset-gray-800"
             >
               Download for Windows
@@ -54,19 +55,13 @@
               >
                 <a
                   class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
-                  href="#"
-                >
-                  Windows
-                </a>
-                <a
-                  class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
-                  href="#"
+                  href="https://github.com/c3lang/c3c/releases/download/latest/c3-macos.zip"
                 >
                   Macos
                 </a>
                 <a
                   class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
-                  href="#"
+                  href="https://github.com/c3lang/c3c/releases/download/latest/c3-linux.tar.gz"
                 >
                   Linux
                 </a>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -8,24 +8,30 @@ import Community from "../components/community.astro";
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
-  <meta name="description" content="C3 is a simple, fast, and modern programming language." />
+  <meta
+    name="description"
+    content="C3 is a simple, fast, and modern programming language."
+  />
   <meta name="og:title" content="C3" />
-  <meta name="og:description" content="C3 is a simple, fast, and modern programming language." />
+  <meta
+    name="og:description"
+    content="C3 is a simple, fast, and modern programming language."
+  />
   <meta name="og:image" content="/logo.svg" />
   <title>C3</title>
   <script>
     import "boxicons";
-    import "../../public/preline.min.js"
+    import "../../public/preline.min.js";
+    import "../../public/overlay.min.js";
   </script>
 </head>
 
 <body class="dark:bg-stone-950 bg-white">
-  <div style="height: auto" >
+  <div style="height: auto">
     <Hero />
     <Sample />
     <Features />
     <Community />
   </div>
   <link rel="stylesheet" href="/index.css" />
-
 </body>