Skip to content

Commit 9c69320

Browse files
AskingQuestionsAskingQuestions
committed
Release setup
1 parent 076803e commit 9c69320

File tree

16 files changed

+373
-74
lines changed

16 files changed

+373
-74
lines changed

‎README.md

Lines changed: 87 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,87 @@
1-
# oversnip
2-
1+
<p align="center"><a href="https://oversnip.com" target="_blank" rel="noopener noreferrer"><img width="100" src="images/logo.png" alt="Oversnip logo"></a></p>
2+
3+
<p align="center">
4+
<img src="https://img.shields.io/github/package-json/v/AskingQuestions/oversnip" alt="Version">
5+
<img src="https://img.shields.io/github/license/AskingQuestions/oversnip" alt="License">
6+
</p>
7+
8+
<h1 align="center"><a href="https://oversnip.com">Oversnip</a></h1>
9+
10+
## Frictionless screenshots on Windows, Mac, and Linux
11+
12+
Oversnip is a modern screenshotting tool that instantly presents a clean UI to rapidly markup and prepare your images for sharing. You don't have to click multiple times or jump through any hoops, just snip and paste/drag wherever you'd like.
13+
14+
<br>
15+
16+
<img src="images/examples/example.gif">
17+
18+
<br><br>
19+
20+
# Features
21+
22+
<h2 style="font-size: 22px">🖼️ Draggable screenshots</h2>
23+
24+
Drag and drop your snips into applications that don't support pasting
25+
26+
<img src="images/examples/drag.gif">
27+
28+
<br><br>
29+
30+
<h2 style="font-size: 22px">🔍 Instant image search</h2>
31+
32+
Easily image search any portion of your screen using `Ctrl/Cmd + Alt + I`
33+
34+
<br><br>
35+
36+
<h2 style="font-size: 22px">🎨 Color palette extraction</h2>
37+
38+
Are you a designer? Use oversnip to grab dominant colors in any region of your screen
39+
40+
<img src="images/examples/palette.gif">
41+
42+
<br><br>
43+
44+
<h2 style="font-size: 22px">↗️ Re-croppable after the fact</h2>
45+
46+
Missed your initial crop? No worries, extend or contract your snip by dragging from any edge.
47+
48+
<img src="images/examples/resize.gif">
49+
50+
<br><br>
51+
52+
<h2 style="font-size: 22px">☁️ One-click upload - <span style="font-size: 16px"> Anonymously upload screenshots to imgur with a single click</span></h2>
53+
54+
<br><br>
55+
56+
<h2 style="font-size: 22px">🌈 Color picker</h2>
57+
58+
Quickly copy any single color from your screen or create multiple floating color cards
59+
60+
<img src="images/examples/picker.gif">
61+
62+
<br><br>
63+
64+
<h2 style="font-size: 22px">🎈 Always on top</h2>
65+
66+
Your snips float above other windows and can be used as stencils or glanceable info cards.
67+
68+
<img src="images/examples/floating.gif">
69+
70+
<br><br>
71+
72+
## Hackable
73+
74+
Oversnip is open source and powered by Electron. Hop in and make it your own!
75+
76+
---
77+
78+
## Installation & Usage
79+
80+
## Development
81+
82+
```
83+
git clone https://github.com/AskingQuestions/oversnip.git
84+
cd oversnip
85+
npm install
86+
npm run dev
87+
```

‎frontend/install.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Oversnip Install</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/install.js"></script>
12+
</body>
13+
</html>

‎frontend/src/assets/logo.png

28.3 KB
Loading

‎frontend/src/install.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import "./styles/settings.css";
2+
import App from "./screens/Install.svelte";
3+
4+
const app = new App({
5+
target: document.getElementById("app"),
6+
});
7+
8+
export default app;

‎frontend/src/screens/Install.svelte

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script>
2+
import { settings, setSetting } from "../stores/settings.js";
3+
import ShortcutInput from "../components/ShortcutInput.svelte";
4+
import Logo from "../assets/logo.png";
5+
6+
let settingsMap = {};
7+
8+
let options = [
9+
{ section: "Global Shortcuts" },
10+
{ key: "shortcut.snipRegion", type: "shortcut", label: "Snip Region" },
11+
{ key: "shortcut.colorPicker", type: "shortcut", label: "Color Picker" },
12+
];
13+
14+
settings.subscribe((settings) => {
15+
console.log(settings);
16+
settingsMap = settings;
17+
});
18+
19+
function handleChange(key, val) {
20+
console.log(key, val);
21+
setSetting(key, val);
22+
}
23+
</script>
24+
25+
<div
26+
style="display: flex; flex-direction: column; align-items: center; padding-top: 46px"
27+
>
28+
<img style="max-width: 50%" src={Logo} alt="Logo" />
29+
<h2
30+
style="font-weight: 100; opacity: 0.75; color: white; margin: 24px; margin-top: 24px; margin-bottom: 0px; text-align: center;"
31+
>
32+
Thanks for installing Oversnip!
33+
</h2>
34+
<p
35+
style="opacity: 0.5; color: white; margin: 24px; margin-top: 24px; margin-bottom: 0px; text-align: center;"
36+
>
37+
Get started by using one of the shortcuts below.
38+
</p>
39+
</div>
40+
<div class="settings">
41+
{#each options as option}
42+
{#if option.section}
43+
<div class="setting setting--section">
44+
{#if option.icon}
45+
<div class="setting__icon">
46+
{@html option.icon}
47+
</div>
48+
{/if}
49+
{option.section}
50+
</div>
51+
{:else if settingsMap[option.key] !== undefined}
52+
<div class="setting">
53+
<div class="setting__label">
54+
<span>{option.label}</span>
55+
</div>
56+
<div class="setting__input">
57+
{#if option.type == "shortcut"}
58+
<ShortcutInput
59+
value={settingsMap[option.key]}
60+
on:change={(e) => {
61+
handleChange(option.key, e.detail);
62+
}}
63+
/>
64+
{:else if option.type == "color"}
65+
<input
66+
type="color"
67+
value={settingsMap[option.key]}
68+
on:change={(e) => {
69+
handleChange(option.key, e.target.value);
70+
}}
71+
/>
72+
{:else if option.type == "select"}
73+
<select
74+
value={settingsMap[option.key]}
75+
on:change={(e) => {
76+
handleChange(
77+
option.key,
78+
option.number ? parseInt(e.target.value) : e.target.value
79+
);
80+
}}
81+
>
82+
{#each option.options as opt, i}
83+
<option value={opt}
84+
>{option.labels ? option.labels[i] : opt}</option
85+
>
86+
{/each}
87+
</select>
88+
{:else if option.type == "checkbox"}
89+
<input
90+
type="checkbox"
91+
checked={settingsMap[option.key]}
92+
on:change={(e) => {
93+
handleChange(option.key, e.target.checked);
94+
}}
95+
/>
96+
{/if}
97+
</div>
98+
</div>
99+
{/if}
100+
{/each}
101+
</div>

‎frontend/vite.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export default defineConfig({
1616
input: {
1717
editor: fileURLToPath(new URL("./editor.html", import.meta.url)),
1818
settings: fileURLToPath(new URL("./settings.html", import.meta.url)),
19+
install: fileURLToPath(new URL("./install.html", import.meta.url)),
1920
},
2021
},
2122
},

‎images/examples/drag.gif

2.57 MB
Loading

‎images/examples/example.gif

8.44 MB
Loading

‎images/examples/floating.gif

1.73 MB
Loading

‎images/examples/palette.gif

3.27 MB
Loading

0 commit comments

Comments
 (0)