-
- {lastMessage?.data ?? ""}
-
-
+
+
+ CodeSnap.nvim
+
+
+
+
+
+
+ {event?.code?.content ?? CODE_EMPTY_PLACEHOLDER}
+
+
+
+
);
}
diff --git a/snap-client/src/components/control-bar.tsx b/snap-client/src/components/control-bar.tsx
deleted file mode 100644
index 785bac2..0000000
--- a/snap-client/src/components/control-bar.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export const ControlBar = {};
diff --git a/snap-client/src/components/control-bar/color-picker.tsx b/snap-client/src/components/control-bar/color-picker.tsx
new file mode 100644
index 0000000..88509ae
--- /dev/null
+++ b/snap-client/src/components/control-bar/color-picker.tsx
@@ -0,0 +1,3 @@
+export const ColorPicker = () => {
+ return
;
+};
diff --git a/snap-client/src/components/control-bar/control-bar.tsx b/snap-client/src/components/control-bar/control-bar.tsx
new file mode 100644
index 0000000..9e56463
--- /dev/null
+++ b/snap-client/src/components/control-bar/control-bar.tsx
@@ -0,0 +1,53 @@
+import { ColorPicker } from "./color-picker";
+
+interface ControlBarProps {
+ onCopyClick(): void;
+}
+
+export const ControlBar = ({ onCopyClick }: ControlBarProps) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/snap-client/src/components/control-bar/index.ts b/snap-client/src/components/control-bar/index.ts
new file mode 100644
index 0000000..644e990
--- /dev/null
+++ b/snap-client/src/components/control-bar/index.ts
@@ -0,0 +1 @@
+export * from "./control-bar";
diff --git a/snap-client/src/components/editor/editor.tsx b/snap-client/src/components/editor/editor.tsx
new file mode 100644
index 0000000..57fc61b
--- /dev/null
+++ b/snap-client/src/components/editor/editor.tsx
@@ -0,0 +1,42 @@
+import { MacStyleTitleBar } from "./mac-style-titlebar";
+import hljs from "highlight.js";
+
+export interface EditorProps {
+ macStyleTitleBar?: boolean;
+ language?: string;
+ opacity?: boolean;
+ children: string;
+}
+
+const highlightLanguage = (code: string, language?: string) => {
+ if (!language) {
+ return hljs.highlightAuto(code).value;
+ }
+
+ try {
+ return hljs.highlight(code, { language }).value;
+ } catch {
+ return hljs.highlightAuto(code).value;
+ }
+};
+
+export const Editor = ({
+ children,
+ language,
+ opacity = true,
+ macStyleTitleBar = true,
+}: EditorProps) => (
+
+ {macStyleTitleBar &&
}
+
+
+
+);
diff --git a/snap-client/src/components/editor/frame.tsx b/snap-client/src/components/editor/frame.tsx
new file mode 100644
index 0000000..f74fa6c
--- /dev/null
+++ b/snap-client/src/components/editor/frame.tsx
@@ -0,0 +1,18 @@
+import { forwardRef, PropsWithChildren } from "react";
+
+export interface FrameProps {
+ watermark?: string;
+}
+
+export const Frame = forwardRef
>(
+ ({ children, watermark }, ref) => (
+
+ {children}
+ {watermark && (
+
+ {watermark}
+
+ )}
+
+
+
+
+
+);
diff --git a/snap-client/src/components/index.ts b/snap-client/src/components/index.ts
index 644e990..0765ac0 100644
--- a/snap-client/src/components/index.ts
+++ b/snap-client/src/components/index.ts
@@ -1 +1,3 @@
export * from "./control-bar";
+export * from "./panel";
+export * from "./editor";
diff --git a/snap-client/src/components/panel.tsx b/snap-client/src/components/panel.tsx
new file mode 100644
index 0000000..6023a04
--- /dev/null
+++ b/snap-client/src/components/panel.tsx
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+
+export interface PanelProps {}
+
+export const Panel = ({ children }: PropsWithChildren) => (
+ {children}
+);
diff --git a/snap-client/src/hooks/index.ts b/snap-client/src/hooks/index.ts
new file mode 100644
index 0000000..a53cdcc
--- /dev/null
+++ b/snap-client/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from "./use-event";
+export * from "./use-storage";
+export * from "./use-config";
diff --git a/snap-client/src/hooks/use-config.ts b/snap-client/src/hooks/use-config.ts
new file mode 100644
index 0000000..c4ca2aa
--- /dev/null
+++ b/snap-client/src/hooks/use-config.ts
@@ -0,0 +1,18 @@
+import { useLocalStorage } from "./use-storage";
+
+export interface Config {
+ breadcrumbs: boolean;
+ column_number: boolean;
+ mac_window_bar: boolean;
+ opacity: boolean;
+ watermark: string;
+ auto_load: boolean;
+}
+
+const CONFIG_STORAGE_KEY = "CONFIG_STORAGE_KEY";
+
+export const useConfig = (defaultConfig?: Config) => {
+ const [config] = useLocalStorage(CONFIG_STORAGE_KEY, defaultConfig);
+
+ return config;
+};
diff --git a/snap-client/src/hooks/use-event.ts b/snap-client/src/hooks/use-event.ts
new file mode 100644
index 0000000..f9c12d7
--- /dev/null
+++ b/snap-client/src/hooks/use-event.ts
@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { Config } from "./use-config";
+
+export enum EventType {
+ CONFIG_SETUP = "config_setup",
+ CODE = "code",
+}
+
+type CodeMessage = {
+ content: string;
+ language: string;
+};
+
+type ParsedConfig = {
+ [EventType.CODE]: CodeMessage;
+ [EventType.CONFIG_SETUP]: Config;
+};
+
+export const useEvent = (
+ event: MessageEvent | null,
+): Partial | undefined =>
+ useMemo(() => {
+ if (!event) {
+ return undefined;
+ }
+
+ const parsedEvent = JSON.parse(event.data);
+
+ return {
+ [parsedEvent.name]: parsedEvent.data,
+ };
+ }, [event]);
diff --git a/snap-client/src/hooks/use-storage.ts b/snap-client/src/hooks/use-storage.ts
new file mode 100644
index 0000000..5aaf1b3
--- /dev/null
+++ b/snap-client/src/hooks/use-storage.ts
@@ -0,0 +1,33 @@
+import { useCallback, useMemo } from "react";
+
+const createStorageHook =
+ (storage: Storage) =>
+ (
+ key: string,
+ defaultData?: T,
+ ): [NonNullable | null, (value: T) => void] => {
+ const setValue = useCallback(
+ (value: T) => {
+ storage.setItem(key, JSON.stringify(value));
+ },
+ [key],
+ );
+
+ const value = useMemo(() => {
+ const value = storage.getItem(key);
+
+ if (defaultData) {
+ setValue(defaultData);
+
+ return defaultData;
+ }
+
+ return value ? JSON.parse(value) : value;
+ }, [key, defaultData, setValue]);
+
+ return [value, setValue];
+ };
+
+export const useLocalStorage = createStorageHook(localStorage);
+
+export const useSessionStorage = createStorageHook(sessionStorage);
diff --git a/snap-client/src/index.tsx b/snap-client/src/index.tsx
index 2f8febf..54831f6 100644
--- a/snap-client/src/index.tsx
+++ b/snap-client/src/index.tsx
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./output.css";
+import "highlight.js/styles/atom-one-dark.css";
import App from "./app";
import reportWebVitals from "./reportWebVitals";
diff --git a/snap-client/src/input.css b/snap-client/src/input.css
index a90f074..a704ceb 100644
--- a/snap-client/src/input.css
+++ b/snap-client/src/input.css
@@ -2,3 +2,109 @@
@tailwind components;
@tailwind utilities;
+html, body, #root {
+ height: 100%;
+ background-image:
+ linear-gradient(to right, rgba(36, 46, 54, 0.2) 2px, transparent 1px),
+ linear-gradient(to bottom, rgba(36, 46, 54, 0.2) 2px, transparent 1px);
+ background-size: 2.5rem 2.5rem;
+ background-position: center center;
+}
+
+@layer components {
+ .rainbow-text {
+ background-image: linear-gradient(90deg,hsl(var(--s)) 4%,color-mix(in oklch, hsl(var(--sf)), hsl(163.22deg 80% 43%)));
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+
+ .editor-shadow {
+ box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
+ }
+
+ .code * {
+ font-family: 'CaskaydiaCove Nerd Font';
+ }
+
+ .pacifico-regular {
+ font-family: "Pacifico", cursive;
+ font-weight: 400;
+ font-style: normal;
+ }
+
+ .bg-stripe {
+ background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
+ }
+ .bg-flare {
+ background: linear-gradient(to right, #f12711, #f5af19);
+ }
+ .bg-vanusa {
+ background: linear-gradient(to right, #da4453, #89216b);
+ }
+ .bg-sublime-light {
+ background: linear-gradient(to right, #fc5c7d, #6a82fb);
+ }
+ .bg-bighead {
+ background: linear-gradient(to right, #c94b4b, #4b134f);
+ }
+ .bg-velvet-sun {
+ background: linear-gradient(to right, #e1eec3, #f05053);
+ }
+ .bg-argon {
+ background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
+ }
+ .bg-celestial {
+ background: linear-gradient(to right, #c33764, #1d2671);
+ }
+ .bg-relay {
+ background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
+ }
+ .bg-crystal-clear {
+ background: linear-gradient(to right, #159957, #155799);
+ }
+ .bg-ibiza-sunset {
+ background: linear-gradient(to right, #ee0979, #ff6a00);
+ }
+ .bg-fresh-turboscent {
+ background: linear-gradient(to right, #f1f2b5, #135058);
+ }
+ .bg-cheer-up-emo-kid {
+ background: linear-gradient(to right, #556270, #ff6b6b);
+ }
+ .bg-starfall {
+ background: linear-gradient(to right, #f0c27b, #4b1248);
+ }
+ .bg-nelson {
+ background: linear-gradient(to right, #f2709c, #ff9472);
+ }
+ .bg-forever-lost {
+ background: linear-gradient(to right, #5d4157, #a8caba);
+ }
+ .bg-blurry-beach {
+ background: linear-gradient(to right, #d53369, #cbad6d);
+ }
+ .bg-influenza {
+ background: linear-gradient(to right, #c04848, #480048);
+ }
+ .bg-jshine {
+ background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
+ }
+ .bg-calm-darya {
+ background: linear-gradient(to right, #5f2c82, #49a09d);
+ }
+ .bg-titanium {
+ background: linear-gradient(to right, #283048, #859398);
+ }
+ .bg-pinky {
+ background: linear-gradient(to right, #dd5e89, #f7bb97);
+ }
+ .bg-purple-paradise {
+ background: linear-gradient(to right, #1d2b64, #f8cdda);
+ }
+ .bg-horizon {
+ background: linear-gradient(to right, #003973, #e5e5be);
+ }
+ .bg-noon-to-dusk {
+ background: linear-gradient(to right, #ff6e7f, #bfe9ff);
+ }
+}
diff --git a/snap-client/tailwind.config.ts b/snap-client/tailwind.config.ts
index 4f3d2f5..33f0af3 100644
--- a/snap-client/tailwind.config.ts
+++ b/snap-client/tailwind.config.ts
@@ -2,8 +2,19 @@ import type { Config } from "tailwindcss";
export default {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ plugins: [require("daisyui"), require("@tailwindcss/typography")],
+ daisyui: {
+ themes: ["dark"],
+ },
theme: {
- extend: {},
+ fontFamily: {
+ caskaydiacove: "CaskaydiaCove Nerd Font",
+ },
+ extend: {
+ colors: {
+ "one-dark-base": "#282C34",
+ "border-color": "#545F64",
+ },
+ },
},
- plugins: [],
} satisfies Config;
diff --git a/snap-server/src/event.rs b/snap-server/src/event.rs
index 4a6294b..363b5bd 100644
--- a/snap-server/src/event.rs
+++ b/snap-server/src/event.rs
@@ -13,8 +13,11 @@ impl Event
where
T: Serialize,
{
- pub fn new(name: String, data: T) -> Event {
- Event { name, data }
+ pub fn new(name: &str, data: T) -> Event {
+ Event {
+ name: name.to_string(),
+ data,
+ }
}
}
diff --git a/snap-server/src/event_handler.rs b/snap-server/src/event_handler.rs
index e206354..814a68f 100644
--- a/snap-server/src/event_handler.rs
+++ b/snap-server/src/event_handler.rs
@@ -1,18 +1,23 @@
-mod messages;
+pub mod arguments;
+pub mod config;
+pub mod messages;
pub mod neovim;
use actix::{Actor, Addr, AsyncContext, Context};
+use arguments::parse_string_first;
+pub use config::Config;
pub use messages::Message;
use neovim::Neovim;
-use serde_json::json;
+use serde_json::{json, Value};
use std::{
+ any::Any,
collections::HashMap,
sync::{Arc, Mutex},
};
use crate::{
event::Event,
- server::{ClientMessage, Server},
+ server::{ClientMessage, ConfigSetupMessage, Server},
};
pub struct EventHandler {
@@ -37,22 +42,20 @@ impl EventHandler {
let receiver = self.neovim.lock().unwrap().create_receiver();
for (event_name, values) in receiver {
+ self.neovim.lock().unwrap().print(&event_name);
+
match Message::from(event_name.clone()) {
Message::PreviewCode => self.server.do_send(ClientMessage {
msg: Event::new(
- "hello".to_string(),
- serde_json::from_str::(
- values
- .iter()
- .map(|value| value.to_string())
- .collect::>()
- .first()
- .unwrap(),
- )
- .unwrap(),
+ "code",
+ serde_json::from_str::(parse_string_first(&values).as_str())
+ .unwrap(),
)
.into(),
}),
+ Message::ConfigSetup => self.server.do_send(ConfigSetupMessage {
+ msg: parse_string_first(&values),
+ }),
Message::Unknown => self
.neovim
.lock()
diff --git a/snap-server/src/event_handler/arguments.rs b/snap-server/src/event_handler/arguments.rs
new file mode 100644
index 0000000..bd69caf
--- /dev/null
+++ b/snap-server/src/event_handler/arguments.rs
@@ -0,0 +1,9 @@
+use neovim_lib::Value;
+
+pub fn parse_string(values: &Vec) -> Vec {
+ values.iter().map(|value| value.to_string()).collect()
+}
+
+pub fn parse_string_first(values: &Vec) -> String {
+ parse_string(values).first().unwrap().to_string()
+}
diff --git a/snap-server/src/event_handler/config.rs b/snap-server/src/event_handler/config.rs
new file mode 100644
index 0000000..53dc89d
--- /dev/null
+++ b/snap-server/src/event_handler/config.rs
@@ -0,0 +1,17 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Debug, Deserialize, Clone)]
+pub struct Config {
+ breadcrumbs: bool,
+ column_number: bool,
+ mac_window_bar: bool,
+ opacity: bool,
+ watermark: Option,
+ auto_load: bool,
+}
+
+impl From<&str> for Config {
+ fn from(value: &str) -> Self {
+ return serde_json::from_str(value).unwrap();
+ }
+}
diff --git a/snap-server/src/event_handler/messages.rs b/snap-server/src/event_handler/messages.rs
index 2c777ec..d4cc366 100644
--- a/snap-server/src/event_handler/messages.rs
+++ b/snap-server/src/event_handler/messages.rs
@@ -1,6 +1,7 @@
#[derive(PartialEq, Hash)]
pub enum Message {
PreviewCode,
+ ConfigSetup,
Unknown,
}
@@ -10,6 +11,7 @@ impl From for Message {
fn from(value: String) -> Self {
match value.as_str() {
"preview_code" => Message::PreviewCode,
+ "config_setup" => Message::ConfigSetup,
_ => Message::Unknown,
}
}
diff --git a/snap-server/src/main.rs b/snap-server/src/main.rs
index 6bbdda5..ccb0c57 100644
--- a/snap-server/src/main.rs
+++ b/snap-server/src/main.rs
@@ -11,7 +11,7 @@ use actix_web::{
App, Error, HttpRequest, HttpResponse, HttpServer,
};
use actix_web_actors::ws;
-use event_handler::neovim::Neovim;
+use event_handler::{neovim::Neovim, Config};
use event_handler::{EventHandler, Message};
use server::Server;
use session::Session;
@@ -43,3 +43,21 @@ async fn main() -> std::io::Result<()> {
.run()
.await
}
+
+// fn main() {
+// let data = r#"
+// {
+// "breadcrumbs":true,
+// "watermark":"CodeSnap.nvim",
+// "mac_window_bar":true,
+// "column_number":true,
+// "auto_load":true,
+// "background":{
+// "grandient":true
+// }
+// }"#;
+//
+// let config: Config = serde_json::from_str(data).unwrap();
+//
+// println!("{:?}", config)
+// }
diff --git a/snap-server/src/server.rs b/snap-server/src/server.rs
index d6aa879..f080c17 100644
--- a/snap-server/src/server.rs
+++ b/snap-server/src/server.rs
@@ -1,11 +1,15 @@
use actix::{Actor, Context, Handler, Message, Recipient};
use rand::{rngs::ThreadRng, Rng};
+use serde::Serialize;
use std::{
collections::HashMap,
sync::{Arc, Mutex},
};
-use crate::event_handler::neovim::Neovim;
+use crate::{
+ event::Event,
+ event_handler::{neovim::Neovim, Config},
+};
type SessionID = usize;
@@ -31,10 +35,17 @@ pub struct ClientMessage {
pub msg: String,
}
+#[derive(Message)]
+#[rtype(result = "()")]
+pub struct ConfigSetupMessage {
+ pub msg: String,
+}
+
pub struct Server {
rng: ThreadRng,
sessions: HashMap>,
neovim: Arc>,
+ config: Option,
}
impl Server {
@@ -43,6 +54,7 @@ impl Server {
rng: rand::thread_rng(),
sessions: HashMap::new(),
neovim,
+ config: None,
}
}
@@ -51,6 +63,14 @@ impl Server {
session.do_send(ServerMessage(message.to_string()))
}
}
+
+ fn send_event_to_clients(&self, event: Event)
+ where
+ T: Serialize,
+ {
+ let stringify_event: String = event.into();
+ self.send_message_to_clients(stringify_event.as_str())
+ }
}
impl Actor for Server {
@@ -65,6 +85,10 @@ impl Handler for Server {
self.sessions.insert(id, msg.addr);
+ if let Some(config) = &self.config {
+ self.send_event_to_clients(Event::new("config_setup", config));
+ }
+
id
}
}
@@ -84,3 +108,14 @@ impl Handler for Server {
self.send_message_to_clients(&msg.msg)
}
}
+
+impl Handler for Server {
+ type Result = ();
+
+ fn handle(&mut self, msg: ConfigSetupMessage, _: &mut Self::Context) -> Self::Result {
+ let config = Config::from(msg.msg.as_str());
+
+ self.config = Some(config.clone());
+ self.send_event_to_clients(Event::new("config_setup", config));
+ }
+}