Add new files and update existing files

README.md

@@ -33,14 +33,18 @@ Follow these steps to get LinkShrtnr up and running:
  cd linkshrinker
  ```
 2. Set up your environment variables:
- ```bash
- cp .env.example .env
- ```
- Fill in the necessary information in the .env file.
+
+```bash
+cp .env.example .env
+```
+
+Fill in the necessary information in the .env file.
 3.Run the application
- ```bash
- cargo run
- ``` 
+
+```bash
+cargo run
+```
+
 4. Navigate to http://localhost:3000 to view the application.
 
 ## Features 🌟
@@ -61,6 +65,4 @@ Follow these steps to get LinkShrtnr up and running:
 
 Contributions are welcome! Feel free to open issues, submit pull requests, or share your ideas.
 
-
 Enjoy shrinking your links with LinkShrtnr! 🚀
-

assets/custom.css

@@ -21,3 +21,12 @@
  transform: translateY(0);
  }
 }
+.htmx-indicator {
+ display: none;
+}
+.htmx-request .htmx-indicator {
+ display: inline;
+}
+.htmx-request.htmx-indicator {
+ display: inline;
+}

assets/main.css

@@ -544,6 +544,22 @@ video {
  --tw-backdrop-sepia: ;
 }
 
+.sticky {
+ position: sticky;
+}
+
+.top-0 {
+ top: 0px;
+}
+
+.z-10 {
+ z-index: 10;
+}
+
+.m-20 {
+ margin: 5rem;
+}
+
 .mb-4 {
  margin-bottom: 1rem;
 }
@@ -552,6 +568,10 @@ video {
  margin-top: 1rem;
 }
 
+.mt-8 {
+ margin-top: 2rem;
+}
+
 .block {
  display: block;
 }
@@ -564,30 +584,34 @@ video {
  height: 4rem;
 }
 
-.min-h-screen {
- min-height: 100vh;
+.h-64 {
+ height: 16rem;
 }
 
-.w-full {
- width: 100%;
+.min-h-screen {
+ min-height: 100vh;
 }
 
-.w-56 {
- width: 14rem;
+.w-1\/2 {
+ width: 50%;
 }
 
-.w-96 {
- width: 24rem;
+.w-11\/12 {
+ width: 91.666667%;
 }
 
-.w-1\/2 {
- width: 50%;
+.w-full {
+ width: 100%;
 }
 
 .max-w-4xl {
  max-width: 56rem;
 }
 
+.max-w-7xl {
+ max-width: 80rem;
+}
+
 .flex-1 {
  flex: 1 1 0%;
 }
@@ -612,8 +636,8 @@ video {
  justify-content: space-between;
 }
 
-.gap-20 {
- gap: 5rem;
+.gap-3 {
+ gap: 0.75rem;
 }
 
 .gap-6 {
@@ -624,21 +648,22 @@ video {
  gap: 1.25rem;
 }
 
-.gap-3 {
- gap: 0.75rem;
-}
-
 .rounded {
  border-radius: 0.25rem;
 }
 
+.rounded-full {
+ border-radius: 9999px;
+}
+
 .rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
 }
 
-.rounded-tr {
- border-top-right-radius: 0.25rem;
+.rounded-t-lg {
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
 }
 
 .border {
@@ -650,22 +675,42 @@ video {
  border-right-width: 1px;
 }
 
-.border-t {
- border-top-width: 1px;
-}
-
 .border-b {
  border-bottom-width: 1px;
 }
 
+.border-t {
+ border-top-width: 1px;
+}
+
 .border-\[\#d3d3d3\] {
  --tw-border-opacity: 1;
  border-color: rgb(211 211 211 / var(--tw-border-opacity));
 }
 
-.bg-\[\#FFDC61\] {
+.bg-\[\#f5f6f7\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(245 246 247 / var(--tw-bg-opacity));
+}
+
+.bg-black {
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-slate-900 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
+.bg-\[rgb\(234\2c 198\2c 67\)\] {
  --tw-bg-opacity: 1;
- background-color: rgb(255 220 97 / var(--tw-bg-opacity));
+ background-color: rgb(234 198 67 / var(--tw-bg-opacity));
 }
 
 .fill-black {
@@ -676,14 +721,14 @@ video {
  padding: 0.75rem;
 }
 
-.p-8 {
- padding: 2rem;
-}
-
 .p-5 {
  padding: 1.25rem;
 }
 
+.p-8 {
+ padding: 2rem;
+}
+
 .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
@@ -694,6 +739,11 @@ video {
  padding-bottom: 0.75rem;
 }
 
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
 .text-center {
  text-align: center;
 }
@@ -703,6 +753,11 @@ video {
  line-height: 2rem;
 }
 
+.text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+}
+
 .text-6xl {
  font-size: 3.75rem;
  line-height: 1;
@@ -713,6 +768,11 @@ video {
  line-height: 1.25rem;
 }
 
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+}
+
 .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
@@ -726,8 +786,13 @@ video {
  font-weight: 300;
 }
 
-.font-black {
- font-weight: 900;
+.font-medium {
+ font-weight: 500;
+}
+
+.text-\[\#2a2e30\] {
+ --tw-text-opacity: 1;
+ color: rgb(42 46 48 / var(--tw-text-opacity));
 }
 
 .text-\[rgb\(234\2c 198\2c 67\)\] {

migrations/0002_Create_LinkClicks_Table.sql

@@ -0,0 +1,13 @@
+CREATE TABLE LinkClicks (
+ ID SERIAL PRIMARY KEY,
+ LinkID INTEGER REFERENCES "Links"(id) ON DELETE CASCADE,
+ ClickTimestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+ IPAddress VARCHAR(255),
+ UserAgent TEXT,
+ Referrer TEXT,
+ DeviceInfo TEXT,
+ GeographicLocation VARCHAR(255),
+ UserID INTEGER REFERENCES "User"(id) ON DELETE SET NULL,
+ ClickCount INTEGER
+);
+;

src/routes/link_routes.rs

@@ -5,14 +5,12 @@ use rand::Rng;
 use serde::Deserialize;
 use sqlx::{Error, PgPool};
 use tracing::info;
+
 #[derive(sqlx::FromRow, Debug, Deserialize)] // Add this line
 struct LinkRequest {
  original_url: String,
  path: String,
 }
-struct LinkResponse {
- link: String,
-}
 
 pub fn get_routes() -> Router {
  Router::new().route("/", post(add_link))

src/routes/web_routes.rs

@@ -21,13 +21,13 @@ async fn get_another_page() -> impl IntoResponse {
 struct AnotherPageTemplate;
 
 async fn get_index() -> impl IntoResponse {
- let template = HelloTemplate {};
+ let template = IndexTemplate{};
  HtmlTemplate(template)
 }
 
 #[derive(Template)]
 #[template(path = "pages/index.html")]
-struct HelloTemplate;
+struct IndexTemplate;
 struct HtmlTemplate<T>(T);
 
 impl<T> IntoResponse for HtmlTemplate<T>

tailwind.config.js

@@ -1,12 +1,12 @@
-const { fontFamily } = require('tailwindcss/defaultTheme');
+const { fontFamily } = require("tailwindcss/defaultTheme");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
- content: ['./templates/**/*.html'],
- theme: {
- extend: {
- fontFamily: {
- sans: ['Inter var', ...fontFamily.sans],
- },
- },
+ content: ["./templates/**/*.html"],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ["Inter var", ...fontFamily.sans],
+ },
  },
+ },
 };

templates/components/companies.html

@@ -0,0 +1,5 @@
+<div class="flex flex-col items-center justify-center bg-white h-64 w-full">
+ <h2 class="text-3xl font-bold text-center">
+ Trusted by the world's best brands
+ </h2>
+</div>

templates/components/footer.html

@@ -0,0 +1,15 @@
+<footer
+ class="flex text-black bg-white justify-center w-full p-8 text-xs text-center border-t"
+>
+ <p>
+ Made by
+ <a
+ href="https://twitter.com/ikurotime"
+ target="_blank"
+ class="font-bold hover:underline"
+ rel="noreferrer"
+ >
+ kuro
+ </a>
+ </p>
+</footer>

templates/components/landing_cta.html

@@ -0,0 +1,4 @@
+<div class="flex flex-col justify-center items-center w-full h-64 bg-slate-900">
+ <h2 class="text-3xl text-white font-bold">Start sending better links today.</h2>
+ <a href="/register" class="bg-[rgb(234,198,67)] text-black font-bold py-3 px-8 rounded-full mt-8">Get Started</a>
+</div>

templates/components/login_buttons.html

@@ -0,0 +1,5 @@
+<div class="flex gap-5">
+ <a href="/login" class="text-black font-medium py-3 px-8 rounded-full">Login</a>
+ <a href="/register" class="bg-[rgb(234,198,67)] text-black font-bold py-3 px-8 rounded-full">Get Started</a>
+
+</div>