/target

*.sqlite

[package]

name = "sipp-rust"

version = "0.1.0"

edition = "2024"

[dependencies]

axum = "0.8.8"

tokio = { version = "1", features = ["full"] }

askama = "0.15.4"

askama_web = { version = "0.15.1", features = ["axum-0.8"] }

rusqlite = { version = "0.38", features = ["bundled"] }

serde = { version = "1", features = ["derive"] }

tower-http = { version = "0.6.8", features = ["fs"] }

rand = "0.10"

{"name":"","short_name":"","icons":[{"src":"/assets/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/assets/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

use rand::RngExt;

use rusqlite::{Connection, params};

use std::sync::{Arc, Mutex};

pub type Db = Arc<Mutex<Connection>>;

pub struct Snippet {

    #[allow(dead_code)]

    pub id: i64,

    pub short_id: String,

    pub content: String,

    pub name: String,

}

const ALPHABET: &[u8] = b"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

fn generate_short_id() -> String {

    let mut rng = rand::rng();

    (0..10)

        .map(|_| ALPHABET[rng.random_range(0..ALPHABET.len())] as char)

        .collect()

}

pub fn init_db() -> Db {

    let conn = Connection::open("sipp.sqlite").expect("Failed to open database");

    conn.execute(

        "CREATE TABLE IF NOT EXISTS snippets (

            id INTEGER PRIMARY KEY AUTOINCREMENT,

            short_id TEXT NOT NULL UNIQUE,

            content TEXT NOT NULL,

            name TEXT NOT NULL

        )",

        [],

    )

    .expect("Failed to create table");

    Arc::new(Mutex::new(conn))

}

pub fn create_snippet(db: &Db, name: &str, content: &str) -> Snippet {

    let conn = db.lock().unwrap();

    let short_id = generate_short_id();

    conn.execute(

        "INSERT INTO snippets (short_id, content, name) VALUES (?1, ?2, ?3)",

        params![short_id, content, name],

    )

    .expect("Failed to insert snippet");

    let id = conn.last_insert_rowid();

    Snippet {

        id,

        short_id,

        content: content.to_string(),

        name: name.to_string(),

    }

}

pub fn get_snippet_by_short_id(db: &Db, short_id: &str) -> Option<Snippet> {

    let conn = db.lock().unwrap();

    conn.query_row(

        "SELECT id, short_id, content, name FROM snippets WHERE short_id = ?1",

        params![short_id],

        |row| {

            Ok(Snippet {

                id: row.get(0)?,

                short_id: row.get(1)?,

                content: row.get(2)?,

                name: row.get(3)?,

            })

        },

    )

    .ok()

}

mod db;

use askama::Template;

use askama_web::WebTemplate;

use axum::{

    Router,

    extract::{Form, Path, State},

    http::StatusCode,

    response::{Html, IntoResponse, Redirect},

    routing::{get, post},

};

use serde::Deserialize;

use tower_http::services::ServeDir;

use db::Db;

#[derive(Template)]

#[template(path = "index.html")]

struct IndexTemplate;

#[derive(Template)]

#[template(path = "snippet.html")]

struct SnippetTemplate {

    name: String,

    content: String,

}

#[derive(Template)]

#[template(path = "about.html")]

struct AboutTemplate;

#[derive(Deserialize)]

struct CreateSnippetForm {

    name: String,

    content: String,

}

async fn index() -> WebTemplate<IndexTemplate> {

    WebTemplate(IndexTemplate)

}

async fn about() -> WebTemplate<AboutTemplate> {

    WebTemplate(AboutTemplate)

}

async fn view_snippet(

    State(db): State<Db>,

    Path(short_id): Path<String>,

) -> Result<WebTemplate<SnippetTemplate>, (StatusCode, Html<String>)> {

    match db::get_snippet_by_short_id(&db, &short_id) {

        Some(snippet) => Ok(WebTemplate(SnippetTemplate {

            name: snippet.name,

            content: snippet.content,

        })),

        None => Err((

            StatusCode::NOT_FOUND,

            Html("<h1>Snippet not found</h1>".to_string()),

        )),

    }

}

async fn create_snippet(

    State(db): State<Db>,

    Form(form): Form<CreateSnippetForm>,

) -> impl IntoResponse {

    let snippet = db::create_snippet(&db, &form.name, &form.content);

    Redirect::to(&format!("/s/{}", snippet.short_id))

}

#[tokio::main]

async fn main() {

    let db = db::init_db();

    let app = Router::new()

        .route("/", get(index))

        .route("/about", get(about))

        .route("/s/{short_id}", get(view_snippet))

        .route("/snippets", post(create_snippet))

        .nest_service("/assets", ServeDir::new("assets"))

        .nest_service("/static", ServeDir::new("static"))

        .with_state(db);

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000")

        .await

        .expect("Failed to bind to port 3000");

    println!("Server running at http://localhost:3000");

    axum::serve(listener, app)

        .await

        .expect("Failed to start server");

}

* {

	padding: 0;

	margin: 0;

	box-sizing: border-box;

	font-family: "Commit Mono", monospace, sans-serif;

	scrollbar-width: none;

	-ms-overflow-style: none;

}

html {

	background: #121113;

	color: #ffffff;

}

html::-webkit-scrollbar {

	display: none;

}

body {

	display: flex;

	flex-direction: column;

	justify-content: start;

	align-items: start;

	gap: 1.5rem;

	min-height: 100vh;

	max-width: 700px;

	margin: auto;

}

.header {

	display: flex;

	flex-direction: column;

	gap: 0.5rem;

	text-decoration: none;

	margin-top: 2rem;

}

#snippetForm {

	display: flex;

	flex-direction: column;

	gap: 1rem;

	width: 100%;

}

#snippetForm input {

	background: #121113;

	color: #ffffff;

	border: 1px solid white;

	padding: 4px;

}

.links {

	display: flex;

	align-items: center;

	gap: 1.5rem;

	font-size: 12px;

}

.about {

	display: flex;

	flex-direction: column;

	gap: 0.5rem;

	font-size: 14px;

}

textarea {

	background: #121113;

	color: #ffffff;

	width: 100%;

	min-height: 400px;

	padding: 6px;

	border: 1px solid white;

}

button {

	background: #121113;

	color: #ffffff;

	padding: 6px;

	border: 1px solid white;

	cursor: pointer;

	width: fit-content;

}

a {

	background: #121113;

	color: #ffffff;

}

@media (max-width: 480px) {

	body {

		padding: 1rem;

		gap: 1rem;

	}

}

@font-face {

	font-family: "Commit Mono";

	src: url("/assets/fonts/CommitMono-400-Regular.otf") format("opentype");

	font-weight: 400;

	font-style: normal;

}

@font-face {

	font-family: "Commit Mono";

	src: url("/assets/fonts/CommitMono-700-Regular.otf") format("opentype");

	font-weight: 700;

	font-style: normal;

}

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="/static/styles.css" />

    <meta name="theme-color" content="#121113" />

    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

    <link rel="manifest" href="/assets/site.webmanifest">

    <title>Sipp | About</title>

    <meta name="description" content="Minimal Code Sharing">

    <meta property="og:url" content="https://sipp.so">

    <meta property="og:type" content="website">

    <meta property="og:title" content="Sipp | About">

    <meta property="og:description" content="Minimal Code Sharing">

    <meta property="og:image" content="https://sipp.so/assets/og.png">

    <meta name="twitter:card" content="summary_large_image">

    <meta property="twitter:domain" content="sipp.so">

    <meta property="twitter:url" content="https://sipp.so">

    <meta name="twitter:title" content="Sipp | About">

    <meta name="twitter:description" content="Minimal Code Sharing">

    <meta name="twitter:image" content="https://sipp.so/assets/og.png">

  </head>

  <body>

    <a href="/" class="header">

      <h1>SIPP</h1>

    </a>

    <div class="links">

      <a href="/">Go Back</a>

      <a target="_blank" href="https://github.com/stevedylandev/sipp">

        GitHub

      </a>

      <p>by <a target="_blank" href="https://stevedylan.dev">Steve</a></p>

    </div>

    <div class="about">

      <p>A while back I released an app called Snippets. While it had lots of polish and the stuff influencers say you need to have, it was also bloated, slow, and had too much vendor lock-in. This app is the antitode that takes a different approach. There is no Next.js, shadcn/ui components, or even syntax highlighting. It's just text sharing, all powered by Bun and no other dependencies. From the ground up it's designed to be self hosted and used on your own hardware or VPS so you have control of the data. I've also designed this with longevity in mind by using just html css and js. You can edit any part you like, update it, and know that you can always come back and fix something.</p>

      <p>The web needs more simplicity, and the ability to build our own tools and solutions that can be picked up and used 5 or 10 years from now. Put down the framework, build simply, and make it open source.</p>

    </div>

  </body>

</html>

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="theme-color" content="#121113" />

    <link rel="stylesheet" href="/static/styles.css" />

    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

    <link rel="manifest" href="/assets/site.webmanifest">

    <title>Sipp</title>

    <meta name="description" content="Minimal Code Sharing">

    <meta property="og:url" content="https://sipp.so">

    <meta property="og:type" content="website">

    <meta property="og:title" content="Sipps">

    <meta property="og:description" content="Minimal Code Sharing">

    <meta property="og:image" content="https://sipp.so/assets/og.png">

    <meta name="twitter:card" content="summary_large_image">

    <meta property="twitter:domain" content="sipp.so">

    <meta property="twitter:url" content="https://sipp.so">

    <meta name="twitter:title" content="Sipps">

    <meta name="twitter:description" content="Minimal Code Sharing">

    <meta name="twitter:image" content="https://sipp.so/assets/og.png">

  </head>

  <body>

    <a href="/" class="header">

      <h1>SIPP</h1>

    </a>

    <div class="links">

      <a target="_blank" href="https://github.com/stevedylandev/sipp">

        GitHub

      </a>

      <a href="/about">About</a>

      <p>by <a target="_blank" href="https://stevedylan.dev">Steve</a></p>

    </div>

    <form id="snippetForm" method="POST" action="/snippets">

      <div>

        <input placeholder="index.ts" type="text" id="name" name="name" required>

      </div>

      <div>

        <textarea placeholder="// paste your code here" id="content" name="content" required></textarea>

      </div>

      <button type="submit">Create Snippet</button>

    </form>

    <script>

      document.getElementById('content').addEventListener('keydown', (e) => {

        if (e.metaKey && e.key === 'Enter' || e.ctrlKey && e.key === 'Enter') {

          e.preventDefault();

          document.getElementById('snippetForm').requestSubmit();

        }

      });

    </script>

  </body>

</html>

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="/static/styles.css" />

    <meta name="theme-color" content="#121113" />

    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

    <link rel="manifest" href="/assets/site.webmanifest">

    <title>Sipp | {{ name }}</title>

    <meta name="description" content="Minimal Code Sharing">

    <meta property="og:url" content="https://sipp.so">

    <meta property="og:type" content="website">

    <meta property="og:title" content="Sipp | {{ name }}">

    <meta property="og:description" content="Minimal Code Sharing">

    <meta property="og:image" content="https://sipp.so/assets/og.png">

    <meta name="twitter:card" content="summary_large_image">

    <meta property="twitter:domain" content="sipp.so">

    <meta property="twitter:url" content="https://sipp.so">

    <meta name="twitter:title" content="Sipp | {{ name }}">

    <meta name="twitter:description" content="Minimal Code Sharing">

    <meta name="twitter:image" content="https://sipp.so/assets/og.png">

  </head>

  <body>

    <a href="/" class="header">

      <h1>SIPP</h1>

    </a>

    <div class="links">

      <a target="_blank" href="https://github.com/stevedylandev/sipp">

        GitHub

      </a>

      <a href="/about">About</a>

      <p>by <a target="_blank" href="https://stevedylan.dev">Steve</a></p>

    </div>

    <form id="snippetForm">

        <label id="snippetName">{{ name }}</label>

        <textarea id="content" name="content" rows="10" cols="50" readonly>{{ content }}</textarea>

      <div class="button-group">

        <button type="button" id="copyLinkBtn" data-original-text="Copy Link">Copy Link</button>

        <button type="button" id="copyContentBtn" data-original-text="Copy Content">Copy Content</button>

        <button type="button" id="createNewBtn">Create New Snippet</button>

      </div>

    </form>

    <script>

      async function copyToClipboard(text, button) {

        try {

          await navigator.clipboard.writeText(text);

          showButtonFeedback(button, '\u2714 Copied', 'success');

        } catch (error) {

          console.error('Copy failed:', error);

          showButtonFeedback(button, '\u2718 Failed', 'error');

          try {

            const textArea = document.createElement('textarea');

            textArea.value = text;

            textArea.style.position = 'fixed';

            textArea.style.opacity = '0';

            document.body.appendChild(textArea);

            textArea.select();

            document.execCommand('copy');

            document.body.removeChild(textArea);

            showButtonFeedback(button, '\u2714 Copied', 'success');

          } catch (fallbackError) {

            showButtonFeedback(button, '\u2718 Failed', 'error');

          }

        }

      }

      function showButtonFeedback(button, message, type = 'success') {

        const originalText = button.dataset.originalText || button.textContent;

        const originalDisabled = button.disabled;

        if (!button.dataset.originalText) {

          button.dataset.originalText = originalText;

        }

        button.textContent = message;

        button.disabled = true;

        button.classList.add(`copy-${type}`);

        setTimeout(() => {

          button.textContent = originalText;

          button.disabled = originalDisabled;

          button.classList.remove(`copy-${type}`);

        }, 1000);

      }

      document.getElementById('copyContentBtn').addEventListener('click', async () => {

        const content = document.getElementById('content').value;

        const button = document.getElementById('copyContentBtn');

        await copyToClipboard(content, button);

      });

      document.getElementById('copyLinkBtn').addEventListener('click', async () => {

        const currentUrl = window.location.href;

        const button = document.getElementById('copyLinkBtn');

        await copyToClipboard(currentUrl, button);

      });

      document.getElementById('createNewBtn').addEventListener('click', () => {

        window.location.href = '/';

      });

    </script>

  </body>

</html>