Compare commits
10 Commits
60149f73e2
...
72dfd58f94
| Author | SHA1 | Date | |
|---|---|---|---|
| 72dfd58f94 | |||
| c92c85b3f0 | |||
| 31a5922cf6 | |||
| 1a80c5d9ce | |||
| b271c94012 | |||
| 6aa9c53969 | |||
| 78c0a99b72 | |||
| 814adbd334 | |||
| d69b8aad67 | |||
| 7f3425b386 |
131
.gitignore
vendored
131
.gitignore
vendored
@ -1 +1,130 @@
|
|||||||
/node_modules
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
20
Dockerfile
Normal file
20
Dockerfile
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
# Use an official Node.js runtime as a parent image
|
||||||
|
FROM node:18-alpine
|
||||||
|
|
||||||
|
# Set the working directory inside the container
|
||||||
|
WORKDIR /usr/src/app
|
||||||
|
|
||||||
|
# Copy package.json and package-lock.json to the working directory
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Install any needed packages
|
||||||
|
RUN npm install --production
|
||||||
|
|
||||||
|
# Copy the rest of the application code to the container
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Expose the port the app runs on
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
# Start the application
|
||||||
|
CMD ["node", "server.js"]
|
||||||
11
package.json
11
package.json
@ -1,17 +1,16 @@
|
|||||||
{
|
{
|
||||||
"name": "dev",
|
"name": "pasteboard",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "A simple Hastebin alternative for pasting text and code snippets.",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"author": "",
|
"author": "Walzen665",
|
||||||
"type": "commonjs",
|
"type": "commonjs",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "nodemon server.js",
|
"start": "node server.js",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"express": "^5.1.0",
|
"express": "^5.1.0"
|
||||||
"nodemon": "^3.1.9"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
381
public/index.css
381
public/index.css
@ -1,381 +0,0 @@
|
|||||||
:root {
|
|
||||||
--bg-primary: #ffffff;
|
|
||||||
--bg-secondary: #f5f7fa;
|
|
||||||
--text-primary: #333333;
|
|
||||||
--text-secondary: #666666;
|
|
||||||
--border-color: #e0e0e0;
|
|
||||||
--accent-color: #4f46e5;
|
|
||||||
--accent-hover: #4338ca;
|
|
||||||
--line-numbers-bg: #f0f0f0;
|
|
||||||
--line-numbers-text: #888888;
|
|
||||||
--editor-bg: #f8f9fc;
|
|
||||||
--toast-bg: rgba(0, 0, 0, 0.8);
|
|
||||||
--toast-text: #ffffff;
|
|
||||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] {
|
|
||||||
--bg-primary: #1a1a1a;
|
|
||||||
--bg-secondary: #252525;
|
|
||||||
--text-primary: #e0e0e0;
|
|
||||||
--text-secondary: #a0a0a0;
|
|
||||||
--border-color: #3a3a3a;
|
|
||||||
--accent-color: #6366f1;
|
|
||||||
--accent-hover: #818cf8;
|
|
||||||
--line-numbers-bg: #2a2a2a;
|
|
||||||
--line-numbers-text: #777777;
|
|
||||||
--editor-bg: #2d2d2d;
|
|
||||||
--toast-bg: rgba(255, 255, 255, 0.8);
|
|
||||||
--toast-text: #1a1a1a;
|
|
||||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background-color: var(--bg-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
transition: background-color 0.3s, color 0.3s;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
padding: 15px 0;
|
|
||||||
box-shadow: 0 1px 3px var(--shadow-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo i {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 1.25rem;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle:hover {
|
|
||||||
background-color: var(--border-color);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
padding: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-header h2 {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-wrapper {
|
|
||||||
display: flex;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 5px var(--shadow-color);
|
|
||||||
position: relative;
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-numbers {
|
|
||||||
background-color: var(--line-numbers-bg);
|
|
||||||
color: var(--line-numbers-text);
|
|
||||||
padding: 15px 10px;
|
|
||||||
text-align: right;
|
|
||||||
user-select: none;
|
|
||||||
overflow-y: hidden;
|
|
||||||
min-width: 50px;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border-right: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-area {
|
|
||||||
flex-grow: 1;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editor {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
background-color: var(--editor-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: none;
|
|
||||||
resize: none;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
tab-size: 4;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewer-area {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
background-color: var(--editor-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
overflow: auto;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
white-space: pre;
|
|
||||||
tab-size: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-viewer {
|
|
||||||
white-space: pre;
|
|
||||||
tab-size: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-viewer pre,
|
|
||||||
.code-viewer code {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
white-space: pre;
|
|
||||||
overflow-x: auto;
|
|
||||||
width: 100%;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure highlight.js doesn't add extra space */
|
|
||||||
.hljs {
|
|
||||||
padding: 0 !important;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: var(--accent-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background-color: var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 20px;
|
|
||||||
padding: 12px 20px;
|
|
||||||
background-color: var(--toast-bg);
|
|
||||||
color: var(--toast-text);
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
|
||||||
transform: translateY(100px);
|
|
||||||
opacity: 0;
|
|
||||||
transition: all 0.3s;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast.show {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 100;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 5px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top-color: white;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row; /* Ensure horizontal layout */
|
|
||||||
align-items: stretch; /* Make items same height */
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-display {
|
|
||||||
flex: 1; /* Take up available space */
|
|
||||||
padding: 12px 15px;
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-right: none; /* Remove right border to connect with button */
|
|
||||||
border-radius: 6px 0 0 6px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-btn {
|
|
||||||
flex: 0 0 auto; /* Don't grow or shrink */
|
|
||||||
padding: 12px 15px;
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0 6px 6px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-btn:hover {
|
|
||||||
background-color: var(--accent-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
padding: 20px 0;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.editor-wrapper {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom styling for highlight.js themes */
|
|
||||||
[data-theme="light"] .hljs {
|
|
||||||
background: var(--editor-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] .hljs {
|
|
||||||
background: var(--editor-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--border-color);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--text-secondary);
|
|
||||||
}
|
|
||||||
@ -1,308 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>CodeShare - Modern Pastebin</title>
|
|
||||||
|
|
||||||
<!-- jQuery -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Highlight.js for syntax highlighting -->
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Font Awesome for icons -->
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap">
|
|
||||||
<link rel="stylesheet" href="/index.css">
|
|
||||||
</head>
|
|
||||||
<body data-theme="light">
|
|
||||||
<header>
|
|
||||||
<div class="container header-content">
|
|
||||||
<div class="logo">
|
|
||||||
<i class="fas fa-code"></i>
|
|
||||||
<span>CodeShare</span>
|
|
||||||
</div>
|
|
||||||
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
|
||||||
<i class="fas fa-moon"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container">
|
|
||||||
<div class="editor-container">
|
|
||||||
<div class="editor-header">
|
|
||||||
<h2 id="pageTitle">Create New Paste</h2>
|
|
||||||
<div id="viewControls" style="display:none;">
|
|
||||||
<button class="btn btn-secondary" id="newPasteBtn">
|
|
||||||
<i class="fas fa-plus"></i> New Paste
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="editor-wrapper">
|
|
||||||
<div class="line-numbers" id="lineNumbers"></div>
|
|
||||||
<div class="editor-area">
|
|
||||||
<textarea id="editor" placeholder="Paste or type your code here..."></textarea>
|
|
||||||
<div class="viewer-area code-viewer" id="codeViewer">
|
|
||||||
<pre><code id="highlightedCode"></code></pre>
|
|
||||||
</div>
|
|
||||||
<div class="loading-overlay" id="loadingOverlay">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-buttons" id="actionButtons">
|
|
||||||
<button class="btn btn-primary" id="saveBtn">
|
|
||||||
<i class="fas fa-save"></i> Save Paste
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="url-container" id="urlContainer">
|
|
||||||
<div class="url-display" id="urlDisplay"></div>
|
|
||||||
<button class="copy-btn" id="copyBtn">
|
|
||||||
<i class="fas fa-copy"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div class="toast" id="toast">
|
|
||||||
<i class="fas fa-info-circle"></i>
|
|
||||||
<span id="toastMessage"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="container">
|
|
||||||
<p>© 2025 CodeShare. A modern pastebin application.</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
// API Endpoint (adjust based on your server settings)
|
|
||||||
const baseUrl = window.location.origin;
|
|
||||||
const API_BASE_URL = baseUrl + '/api';
|
|
||||||
|
|
||||||
// Theme toggle functionality
|
|
||||||
$('#themeToggle').on('click', function() {
|
|
||||||
const currentTheme = $('body').attr('data-theme');
|
|
||||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
||||||
$('body').attr('data-theme', newTheme);
|
|
||||||
|
|
||||||
// Update icon
|
|
||||||
if (newTheme === 'dark') {
|
|
||||||
$(this).html('<i class="fas fa-sun"></i>');
|
|
||||||
} else {
|
|
||||||
$(this).html('<i class="fas fa-moon"></i>');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Store preference
|
|
||||||
localStorage.setItem('theme', newTheme);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check for saved theme preference
|
|
||||||
const savedTheme = localStorage.getItem('theme');
|
|
||||||
if (savedTheme) {
|
|
||||||
$('body').attr('data-theme', savedTheme);
|
|
||||||
if (savedTheme === 'dark') {
|
|
||||||
$('#themeToggle').html('<i class="fas fa-sun"></i>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Line numbers functionality
|
|
||||||
function updateLineNumbers() {
|
|
||||||
const text = $('#editor').val();
|
|
||||||
const lines = text.split('\n');
|
|
||||||
const lineCount = lines.length;
|
|
||||||
|
|
||||||
let lineNumbersHtml = '';
|
|
||||||
for (let i = 1; i <= lineCount; i++) {
|
|
||||||
lineNumbersHtml += i + '<br>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#lineNumbers').html(lineNumbersHtml);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update line numbers on input
|
|
||||||
$('#editor').on('input scroll keyup', function() {
|
|
||||||
updateLineNumbers();
|
|
||||||
// Sync scroll position between textarea and line numbers
|
|
||||||
$('#lineNumbers').scrollTop($(this).scrollTop());
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize line numbers
|
|
||||||
updateLineNumbers();
|
|
||||||
|
|
||||||
// Save paste functionality
|
|
||||||
$('#saveBtn').on('click', function() {
|
|
||||||
const content = $('#editor').val();
|
|
||||||
|
|
||||||
if (!content.trim()) {
|
|
||||||
showToast('Please enter some content first!', 'warning');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#loadingOverlay').fadeIn(200);
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: `${API_BASE_URL}/pastes`,
|
|
||||||
method: 'POST',
|
|
||||||
data: content,
|
|
||||||
contentType: 'text/plain',
|
|
||||||
success: function(response) {
|
|
||||||
const pasteUrl = `${window.location.origin}${window.location.pathname}?id=${response.id}`;
|
|
||||||
$('#urlDisplay').text(pasteUrl);
|
|
||||||
$('#urlContainer').fadeIn();
|
|
||||||
showToast('Paste created successfully!', 'success');
|
|
||||||
|
|
||||||
// Update URL without reloading page
|
|
||||||
history.pushState({}, '', `?id=${response.id}`);
|
|
||||||
|
|
||||||
// Copy to clipboard automatically
|
|
||||||
copyToClipboard(pasteUrl);
|
|
||||||
},
|
|
||||||
error: function(xhr) {
|
|
||||||
console.error('Error creating paste:', xhr);
|
|
||||||
showToast('Failed to create paste. Please try again.', 'error');
|
|
||||||
},
|
|
||||||
complete: function() {
|
|
||||||
$('#loadingOverlay').fadeOut(200);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Copy URL functionality
|
|
||||||
$('#copyBtn').on('click', function() {
|
|
||||||
const url = $('#urlDisplay').text();
|
|
||||||
copyToClipboard(url);
|
|
||||||
});
|
|
||||||
|
|
||||||
function copyToClipboard(text) {
|
|
||||||
navigator.clipboard.writeText(text)
|
|
||||||
.then(function() {
|
|
||||||
showToast('URL copied to clipboard!', 'success');
|
|
||||||
})
|
|
||||||
.catch(function(err) {
|
|
||||||
console.error('Failed to copy: ', err);
|
|
||||||
showToast('Failed to copy URL.', 'error');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toast notification
|
|
||||||
function showToast(message, type = 'info') {
|
|
||||||
let icon = 'fa-info-circle';
|
|
||||||
|
|
||||||
switch(type) {
|
|
||||||
case 'success':
|
|
||||||
icon = 'fa-check-circle';
|
|
||||||
break;
|
|
||||||
case 'error':
|
|
||||||
icon = 'fa-exclamation-circle';
|
|
||||||
break;
|
|
||||||
case 'warning':
|
|
||||||
icon = 'fa-exclamation-triangle';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#toast').html(`<i class="fas ${icon}"></i><span>${message}</span>`);
|
|
||||||
$('#toast').addClass('show');
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
$('#toast').removeClass('show');
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check for paste ID in URL
|
|
||||||
function getParameterByName(name) {
|
|
||||||
const url = window.location.href;
|
|
||||||
name = name.replace(/[\[\]]/g, '\\$&');
|
|
||||||
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
|
|
||||||
const results = regex.exec(url);
|
|
||||||
if (!results) return null;
|
|
||||||
if (!results[2]) return '';
|
|
||||||
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
|
||||||
}
|
|
||||||
|
|
||||||
const pasteId = getParameterByName('id');
|
|
||||||
|
|
||||||
if (pasteId) {
|
|
||||||
// We're viewing an existing paste
|
|
||||||
$('#pageTitle').text('Viewing Paste');
|
|
||||||
$('#editor').hide();
|
|
||||||
$('#codeViewer').show();
|
|
||||||
$('#actionButtons').hide();
|
|
||||||
$('#viewControls').show();
|
|
||||||
|
|
||||||
$('#loadingOverlay').fadeIn(200);
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: `${API_BASE_URL}/pastes/${pasteId}`,
|
|
||||||
method: 'GET',
|
|
||||||
success: function(response) {
|
|
||||||
const code = response;
|
|
||||||
|
|
||||||
// Clear any existing content first
|
|
||||||
$('#highlightedCode').empty();
|
|
||||||
|
|
||||||
// Use .text() to safely set the content without HTML interpretation
|
|
||||||
$('#highlightedCode').text(code);
|
|
||||||
|
|
||||||
// Apply syntax highlighting
|
|
||||||
hljs.highlightAll();
|
|
||||||
|
|
||||||
// Update line numbers for the viewer
|
|
||||||
const lines = code.split('\n');
|
|
||||||
const lineCount = lines.length;
|
|
||||||
|
|
||||||
let lineNumbersHtml = '';
|
|
||||||
for (let i = 1; i <= lineCount; i++) {
|
|
||||||
lineNumbersHtml += i + '<br>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#lineNumbers').html(lineNumbersHtml);
|
|
||||||
},
|
|
||||||
error: function(xhr) {
|
|
||||||
console.error('Error fetching paste:', xhr);
|
|
||||||
showToast('Failed to load paste. It may have expired.', 'error');
|
|
||||||
// Redirect to new paste creation after a delay
|
|
||||||
setTimeout(function() {
|
|
||||||
window.location.href = window.location.pathname;
|
|
||||||
}, 2000);
|
|
||||||
},
|
|
||||||
complete: function() {
|
|
||||||
$('#loadingOverlay').fadeOut(200);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// New paste button
|
|
||||||
$('#newPasteBtn').on('click', function() {
|
|
||||||
window.location.href = window.location.pathname;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle tab key in textarea
|
|
||||||
$('#editor').on('keydown', function(e) {
|
|
||||||
if (e.key === 'Tab') {
|
|
||||||
e.preventDefault();
|
|
||||||
const start = this.selectionStart;
|
|
||||||
const end = this.selectionEnd;
|
|
||||||
|
|
||||||
// Insert tab character
|
|
||||||
this.value = this.value.substring(0, start) + ' ' + this.value.substring(end);
|
|
||||||
|
|
||||||
// Move cursor position
|
|
||||||
this.selectionStart = this.selectionEnd = start + 4;
|
|
||||||
|
|
||||||
// Update line numbers
|
|
||||||
updateLineNumbers();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
93
server.js
93
server.js
@ -1,58 +1,59 @@
|
|||||||
// Import necessary modules
|
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
// --- Configuration ---
|
const PORT = process.env.PORT || 3000;
|
||||||
const PORT = process.env.PORT || 3000; // Use environment variable or default to 3000
|
const PASTE_TTL_HOURS = 3;
|
||||||
const PASTE_TTL_HOURS = 2;
|
const PASTE_TTL_MS = PASTE_TTL_HOURS * 60 * 60 * 1000;
|
||||||
const PASTE_TTL_MS = PASTE_TTL_HOURS * 60 * 60 * 1000; // Time-to-live in milliseconds
|
|
||||||
|
|
||||||
// --- In-Memory Storage ---
|
const pastes = new Map();
|
||||||
// Using a Map for efficient key-based storage and deletion
|
const ipLastPaste = new Map(); // Tracks the last paste time for each IP
|
||||||
const pastes = new Map(); // Stores { id: content }
|
const RATE_LIMIT_MS = 10 * 1000; // 10 seconds rate limit
|
||||||
|
const IP_CLEANUP_INTERVAL = 30 * 60 * 1000; // Clean up IP records every 30 minutes
|
||||||
|
|
||||||
// --- Express App Setup ---
|
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
// Middleware to parse plain text request bodies (like Hastebin)
|
app.use(express.text({ limit: '10mb', type: 'text/plain' }));
|
||||||
// Limit set to 1MB, adjust as needed
|
app.use(express.json());
|
||||||
app.use(express.text({ limit: '1mb', type: 'text/plain' }));
|
app.use(express.static('static'));
|
||||||
app.use(express.json()); // For JSON API responses
|
|
||||||
|
|
||||||
// Serve static files from the 'public' directory
|
|
||||||
app.use(express.static('public'));
|
|
||||||
|
|
||||||
// Function to generate a unique ID without crypto
|
|
||||||
function generateUniqueId() {
|
function generateUniqueId() {
|
||||||
const timestamp = Date.now().toString(36);
|
const timestamp = Date.now().toString(36);
|
||||||
const randomPart = Math.random().toString(36).substring(2, 10);
|
const randomPart = Math.random().toString(36).substring(2, 10);
|
||||||
return `${timestamp}-${randomPart}`;
|
return `${timestamp}-${randomPart}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- API Routes ---
|
|
||||||
|
|
||||||
/**
|
|
||||||
* POST /api/pastes
|
|
||||||
* Creates a new paste.
|
|
||||||
* Expects the raw text content in the request body.
|
|
||||||
* Responds with the generated ID for the paste.
|
|
||||||
*/
|
|
||||||
app.post('/api/pastes', (req, res) => {
|
app.post('/api/pastes', (req, res) => {
|
||||||
const content = req.body;
|
const content = req.body;
|
||||||
|
const clientIp = req.ip;
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
// Check rate limit
|
||||||
|
if (ipLastPaste.has(clientIp)) {
|
||||||
|
const lastPasteTime = ipLastPaste.get(clientIp);
|
||||||
|
const timeElapsed = now - lastPasteTime;
|
||||||
|
|
||||||
|
if (timeElapsed < RATE_LIMIT_MS) {
|
||||||
|
return res.status(429).json({
|
||||||
|
error: 'Rate limit exceeded. Please wait before creating another paste.',
|
||||||
|
retryAfter: Math.ceil((RATE_LIMIT_MS - timeElapsed) / 1000)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Basic validation: Ensure content is present and is a string
|
|
||||||
if (!content || typeof content !== 'string' || content.trim() === '') {
|
if (!content || typeof content !== 'string' || content.trim() === '') {
|
||||||
return res.status(400).json({ error: 'Paste content cannot be empty.' });
|
return res.status(400).json({ error: 'Paste content cannot be empty.' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate a unique ID without using crypto
|
// Calculate paste size in bytes
|
||||||
|
const pasteSize = Buffer.byteLength(content, 'utf8');
|
||||||
|
const sizeInKB = (pasteSize / 1024).toFixed(2);
|
||||||
|
|
||||||
const id = generateUniqueId();
|
const id = generateUniqueId();
|
||||||
|
|
||||||
// Store the paste content in the map
|
|
||||||
pastes.set(id, content);
|
pastes.set(id, content);
|
||||||
console.log(`[${new Date().toISOString()}] Paste created with ID: ${id}`);
|
ipLastPaste.set(clientIp, now);
|
||||||
|
|
||||||
|
console.log(`[${new Date().toISOString()}] Paste created with ID: ${id} | Size: ${sizeInKB} KB (${pasteSize} bytes)`);
|
||||||
|
|
||||||
// Schedule the paste for deletion after the TTL
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (pastes.has(id)) {
|
if (pastes.has(id)) {
|
||||||
pastes.delete(id);
|
pastes.delete(id);
|
||||||
@ -60,21 +61,14 @@ app.post('/api/pastes', (req, res) => {
|
|||||||
}
|
}
|
||||||
}, PASTE_TTL_MS);
|
}, PASTE_TTL_MS);
|
||||||
|
|
||||||
// Respond with the ID
|
|
||||||
res.status(201).json({ id: id });
|
res.status(201).json({ id: id });
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
|
||||||
* GET /api/pastes/:id
|
|
||||||
* Retrieves the content of a specific paste by its ID.
|
|
||||||
* Responds with the raw text content or 404 if not found.
|
|
||||||
*/
|
|
||||||
app.get('/api/pastes/:id', (req, res) => {
|
app.get('/api/pastes/:id', (req, res) => {
|
||||||
const id = req.params.id;
|
const id = req.params.id;
|
||||||
|
|
||||||
if (pastes.has(id)) {
|
if (pastes.has(id)) {
|
||||||
const content = pastes.get(id);
|
const content = pastes.get(id);
|
||||||
// Send raw text content
|
|
||||||
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
|
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
|
||||||
res.status(200).send(content);
|
res.status(200).send(content);
|
||||||
} else {
|
} else {
|
||||||
@ -82,22 +76,35 @@ app.get('/api/pastes/:id', (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Serve the main HTML page for all other routes
|
|
||||||
app.get('/', (req, res) => {
|
app.get('/', (req, res) => {
|
||||||
res.sendFile(path.join(__dirname, 'public', 'index.html'));
|
res.sendFile(path.join(__dirname, 'public', 'index.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- Start Server ---
|
// Periodically clean up the IP tracking map to prevent memory leak
|
||||||
|
setInterval(() => {
|
||||||
|
const now = Date.now();
|
||||||
|
let cleanupCount = 0;
|
||||||
|
|
||||||
|
// Remove IPs that haven't posted in the last hour (much longer than rate limit)
|
||||||
|
ipLastPaste.forEach((timestamp, ip) => {
|
||||||
|
if (now - timestamp > RATE_LIMIT_MS * 360) { // 1 hour = 360 * 10 seconds
|
||||||
|
ipLastPaste.delete(ip);
|
||||||
|
cleanupCount++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (cleanupCount > 0) {
|
||||||
|
console.log(`[${new Date().toISOString()}] Cleaned up ${cleanupCount} IP records from rate limiter`);
|
||||||
|
}
|
||||||
|
}, IP_CLEANUP_INTERVAL);
|
||||||
|
|
||||||
app.listen(PORT, () => {
|
app.listen(PORT, () => {
|
||||||
console.log(`Paste server listening on port ${PORT}`);
|
console.log(`Paste server listening on port ${PORT}`);
|
||||||
console.log(`Pastes will be stored for ${PASTE_TTL_HOURS} hours.`);
|
console.log(`Pastes will be stored for ${PASTE_TTL_HOURS} hours.`);
|
||||||
console.log(`Open http://localhost:${PORT} in your browser to use the application`);
|
console.log(`Open http://localhost:${PORT} in your browser to use the application`);
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- Graceful Shutdown (Optional but Recommended) ---
|
|
||||||
// Handles CTRL+C in the terminal
|
|
||||||
process.on('SIGINT', () => {
|
process.on('SIGINT', () => {
|
||||||
console.log('\nShutting down server...');
|
console.log('\nShutting down server...');
|
||||||
// Perform any cleanup here if needed (though in-memory storage is lost anyway)
|
|
||||||
process.exit(0);
|
process.exit(0);
|
||||||
});
|
});
|
||||||
227
static/index.css
Normal file
227
static/index.css
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
:root {
|
||||||
|
/* Light theme variables */
|
||||||
|
--bg-color: #f8f9fa;
|
||||||
|
--text-color: #212529;
|
||||||
|
--editor-bg: #ffffff;
|
||||||
|
--line-number-bg: #f1f3f5;
|
||||||
|
--line-number-color: #868e96;
|
||||||
|
--header-bg: #ffffff;
|
||||||
|
--border-color: #dee2e6;
|
||||||
|
--btn-bg: #e9ecef;
|
||||||
|
--btn-hover: #ced4da;
|
||||||
|
--accent-color: #228be6;
|
||||||
|
--notification-bg: #d3f9d8;
|
||||||
|
--notification-text: #2b8a3e;
|
||||||
|
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme='dark'] {
|
||||||
|
/* Dark theme variables */
|
||||||
|
--bg-color: #212529;
|
||||||
|
--text-color: #f8f9fa;
|
||||||
|
--editor-bg: #343a40;
|
||||||
|
--line-number-bg: #2b3035;
|
||||||
|
--line-number-color: #adb5bd;
|
||||||
|
--header-bg: #343a40;
|
||||||
|
--border-color: #495057;
|
||||||
|
--btn-bg: #495057;
|
||||||
|
--btn-hover: #6c757d;
|
||||||
|
--accent-color: #74c0fc;
|
||||||
|
--notification-bg: #0b7285;
|
||||||
|
--notification-text: #e3fafc;
|
||||||
|
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: var(--header-bg);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
border: none;
|
||||||
|
color: var(--text-color);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-btn:hover {
|
||||||
|
background-color: var(--btn-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--editor-shadow);
|
||||||
|
background-color: var(--editor-bg);
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers {
|
||||||
|
background-color: var(--line-number-bg);
|
||||||
|
color: var(--line-number-color);
|
||||||
|
padding: 1rem 0.5rem;
|
||||||
|
text-align: right;
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
min-width: 3.5rem;
|
||||||
|
user-select: none;
|
||||||
|
overflow-y: hidden;
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers div {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editor, #viewer {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 1rem;
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
background-color: var(--editor-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: none;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
white-space: pre;
|
||||||
|
overflow-y: auto;
|
||||||
|
tab-size: 4;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#viewer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-active #editor {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewer-active #viewer {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background-color: var(--notification-bg);
|
||||||
|
color: var(--notification-text);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s, opacity 0.3s;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification.show {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--line-number-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-selector {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: var(--btn-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* For mobile responsiveness */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.header-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-container {
|
||||||
|
height: calc(100vh - 260px);
|
||||||
|
}
|
||||||
|
}
|
||||||
149
static/index.html
Normal file
149
static/index.html
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>PasteBoard - Simple Code Sharing</title>
|
||||||
|
<!-- Highlight.js for syntax highlighting -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
||||||
|
<!-- Load common languages -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/json.min.js"></script>
|
||||||
|
<!-- Logic -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
|
||||||
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
|
||||||
|
<!-- Custom Scripts-->
|
||||||
|
<script src="/index.js" type="text/javascript"></script>
|
||||||
|
<link rel="stylesheet" href="/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header-content">
|
||||||
|
<div><span class="logo">PasteBoard </span><small>by <a style="color:inherit;" href="https://github.com/Walzen665">Walzen665</a></small></div>
|
||||||
|
<div class="controls">
|
||||||
|
<select class="language-selector" id="language-selector">
|
||||||
|
<option value="plaintext">Plain Text</option>
|
||||||
|
<option value="javascript" selected>JavaScript</option>
|
||||||
|
<option value="json">JSON</option>
|
||||||
|
<option value="html">HTML</option>
|
||||||
|
<option value="css">CSS</option>
|
||||||
|
<option value="python">Python</option>
|
||||||
|
<option value="java">Java</option>
|
||||||
|
<option value="csharp">C#</option>
|
||||||
|
<option value="php">PHP</option>
|
||||||
|
<option value="ruby">Ruby</option>
|
||||||
|
<option value="go">Go</option>
|
||||||
|
<option value="rust">Rust</option>
|
||||||
|
<option value="swift">Swift</option>
|
||||||
|
<option value="kotlin">Kotlin</option>
|
||||||
|
</select>
|
||||||
|
<button class="control-btn" id="save-btn">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
<button class="control-btn" id="copy-btn">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
<button class="control-btn" id="new-btn">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
|
||||||
|
New
|
||||||
|
</button>
|
||||||
|
<button class="theme-toggle" id="theme-toggle">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="moon-icon" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="editor-container">
|
||||||
|
<div class="line-numbers" id="line-numbers">
|
||||||
|
<div>1</div>
|
||||||
|
</div>
|
||||||
|
<textarea id="editor" spellcheck="false" placeholder="Paste or type your code here..."></textarea>
|
||||||
|
<pre><code id="viewer" class="language-javascript"></code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification" id="notification"></div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>Pastes are stored for 3 hours only. © 2025 Walzen665</p>
|
||||||
|
<p>Privacy Policy: All pastes are publicly accessible via the generated URL. PasteBoard tracks your IP address for spam protection for maximum of 30 minutes.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div class="modal fade" id="privacyPolicyModal" tabindex="-1" aria-labelledby="privacyPolicyModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="privacyPolicyModalLabel">Privacy Policy</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<h3>PasteBoard Privacy Policy</h3>
|
||||||
|
<p><strong>Last Updated:</strong> April 12, 2025</p>
|
||||||
|
|
||||||
|
<h4>1. Information We Collect</h4>
|
||||||
|
<p>PasteBoard collects and temporarily stores the following information:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Content that you paste or create on our service</li>
|
||||||
|
<li>Your IP address (stored temporarily for rate limiting purposes)</li>
|
||||||
|
<li>Basic usage data (such as when pastes are created and accessed)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>2. How We Use Your Information</h4>
|
||||||
|
<p>We use the collected information for the following purposes:</p>
|
||||||
|
<ul>
|
||||||
|
<li>To provide and maintain our service</li>
|
||||||
|
<li>To prevent spam and abuse through IP-based rate limiting</li>
|
||||||
|
<li>To improve our service based on usage patterns</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>3. Data Retention</h4>
|
||||||
|
<p>We implement the following data retention practices:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Pastes are automatically deleted after 3 hours</li>
|
||||||
|
<li>IP addresses used for rate limiting are deleted after 1 hour of inactivity</li>
|
||||||
|
<li>We do not maintain backups of expired pastes</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>4. Public Access</h4>
|
||||||
|
<p>Please be aware that all pastes created on PasteBoard are publicly accessible to anyone with the generated URL. Do not share sensitive or personal information through this service.</p>
|
||||||
|
|
||||||
|
<h4>5. Third-Party Services</h4>
|
||||||
|
<p>PasteBoard uses the following third-party services:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Highlight.js (for syntax highlighting)</li>
|
||||||
|
<li>jQuery (for DOM manipulation)</li>
|
||||||
|
<li>Bootstrap (for UI components)</li>
|
||||||
|
<li>CDN hosting services for libraries</li>
|
||||||
|
</ul>
|
||||||
|
<p>These services may use cookies and collect usage data according to their own privacy policies.</p>
|
||||||
|
|
||||||
|
<h4>6. Changes to This Policy</h4>
|
||||||
|
<p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.</p>
|
||||||
|
|
||||||
|
<h4>7. Contact Us</h4>
|
||||||
|
<p>If you have any questions about this Privacy Policy, please contact us through our <a href="https://github.com/Walzen665">GitHub page</a>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||||
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">I Understand</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
308
static/index.js
Normal file
308
static/index.js
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
// init privacy policy modal
|
||||||
|
$('.footer p:nth-child(2)').html('All pastes are publicly accessible via the generated URL. <a href="#" id="privacy-link">View the Privacy Policy</a> for more information.');
|
||||||
|
$('#privacy-link').click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var privacyModal = new bootstrap.Modal(document.getElementById('privacyPolicyModal'));
|
||||||
|
privacyModal.show();
|
||||||
|
});
|
||||||
|
|
||||||
|
// DOM Elements
|
||||||
|
const $editor = $('#editor');
|
||||||
|
const $viewer = $('#viewer');
|
||||||
|
const $lineNumbers = $('#line-numbers');
|
||||||
|
const $themeToggle = $('#theme-toggle');
|
||||||
|
const $sunIcon = $themeToggle.find('.sun-icon');
|
||||||
|
const $moonIcon = $themeToggle.find('.moon-icon');
|
||||||
|
const $saveBtn = $('#save-btn');
|
||||||
|
const $copyBtn = $('#copy-btn');
|
||||||
|
const $newBtn = $('#new-btn');
|
||||||
|
const $notification = $('#notification');
|
||||||
|
const $languageSelector = $('#language-selector');
|
||||||
|
const $editorContainer = $('.editor-container');
|
||||||
|
|
||||||
|
// Format JSON button
|
||||||
|
const $formatJsonBtn = $('<button>', {
|
||||||
|
class: 'control-btn',
|
||||||
|
id: 'format-json-btn',
|
||||||
|
html: `
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 3H3C1.89 3 1 3.89 1 5V19C1 20.11 1.89 21 3 21H21C22.11 21 23 20.11 23 19V5C23 3.89 22.11 3 21 3Z"></path><path d="M7 8L12 13L17 8"></path></svg>
|
||||||
|
Format JSON
|
||||||
|
`,
|
||||||
|
css: {
|
||||||
|
display: $languageSelector.val() === 'json' ? 'inline-flex' : 'none'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.controls').prepend($formatJsonBtn);
|
||||||
|
|
||||||
|
// Initial theme setup
|
||||||
|
function setInitialTheme() {
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
$('html').attr('data-theme', 'dark');
|
||||||
|
$sunIcon.hide();
|
||||||
|
$moonIcon.show();
|
||||||
|
} else {
|
||||||
|
$('html').attr('data-theme', 'light');
|
||||||
|
$sunIcon.show();
|
||||||
|
$moonIcon.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Line numbers
|
||||||
|
function updateLineNumbers() {
|
||||||
|
const lineCount = $editor.val().split('\n').length;
|
||||||
|
$lineNumbers.empty();
|
||||||
|
|
||||||
|
for (let i = 1; i <= lineCount; i++) {
|
||||||
|
$('<div>').text(i).appendTo($lineNumbers);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-detect JSON content
|
||||||
|
function detectContentType(content) {
|
||||||
|
try {
|
||||||
|
JSON.parse(content);
|
||||||
|
return 'json';
|
||||||
|
} catch (e) {
|
||||||
|
return $languageSelector.val() || 'javascript';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show notification
|
||||||
|
function showNotification(message, type = 'success') {
|
||||||
|
$notification.text(message).addClass('show');
|
||||||
|
|
||||||
|
if (type === 'error') {
|
||||||
|
$notification.css({
|
||||||
|
'background-color': 'var(--error-bg, #fa5252)',
|
||||||
|
'color': 'var(--error-text, #fff5f5)'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$notification.css({
|
||||||
|
'background-color': 'var(--notification-bg)',
|
||||||
|
'color': 'var(--notification-text)'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$notification.removeClass('show');
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load paste on page load
|
||||||
|
async function loadPasteFromUrl() {
|
||||||
|
$viewer.text("Loading...");
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const pasteId = urlParams.get('id');
|
||||||
|
|
||||||
|
if (pasteId) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/pastes/${pasteId}`);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
$('pre').css('width', '100%'); // Set pre width
|
||||||
|
const content = await response.text();
|
||||||
|
$editor.val(content);
|
||||||
|
updateLineNumbers();
|
||||||
|
|
||||||
|
// Auto-detect JSON content
|
||||||
|
if (content.trim().startsWith('{') || content.trim().startsWith('[')) {
|
||||||
|
try {
|
||||||
|
JSON.parse(content);
|
||||||
|
$languageSelector.val('json');
|
||||||
|
} catch (e) {
|
||||||
|
// Not valid JSON, check URL hash or use default
|
||||||
|
const hash = window.location.hash.substring(1);
|
||||||
|
if (hash && $(`option[value="${hash}"]`).length) {
|
||||||
|
$languageSelector.val(hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Check for language in URL hash
|
||||||
|
const hash = window.location.hash.substring(1);
|
||||||
|
if (hash && $(`option[value="${hash}"]`).length) {
|
||||||
|
$languageSelector.val(hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update viewer
|
||||||
|
$viewer.text(content);
|
||||||
|
$viewer.attr('class', `language-${$languageSelector.val()}`);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
|
||||||
|
// Switch to viewer mode
|
||||||
|
$editorContainer.addClass('viewer-active');
|
||||||
|
} else {
|
||||||
|
showNotification('Paste not found or has expired.', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showNotification('Failed to load paste.', 'error');
|
||||||
|
console.error('Load error:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
setInitialTheme();
|
||||||
|
updateLineNumbers();
|
||||||
|
loadPasteFromUrl();
|
||||||
|
hljs.highlightAll();
|
||||||
|
|
||||||
|
// Theme toggle
|
||||||
|
$themeToggle.on('click', () => {
|
||||||
|
if ($('html').attr('data-theme') === 'dark') {
|
||||||
|
$('html').attr('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
$sunIcon.show();
|
||||||
|
$moonIcon.hide();
|
||||||
|
} else {
|
||||||
|
$('html').attr('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
$sunIcon.hide();
|
||||||
|
$moonIcon.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle editor input
|
||||||
|
$editor.on('input', () => {
|
||||||
|
updateLineNumbers();
|
||||||
|
|
||||||
|
// Update viewer content with syntax highlighting
|
||||||
|
$viewer.text($editor.val());
|
||||||
|
|
||||||
|
// Try to auto-detect JSON if content changes significantly
|
||||||
|
if ($editor.val().trim().startsWith('{') || $editor.val().trim().startsWith('[')) {
|
||||||
|
const detectedLanguage = detectContentType($editor.val());
|
||||||
|
if (detectedLanguage === 'json') {
|
||||||
|
$languageSelector.val('json');
|
||||||
|
$formatJsonBtn.show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$viewer.attr('class', `language-${$languageSelector.val()}`);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle tab key in editor
|
||||||
|
$editor.on('keydown', (e) => {
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
e.preventDefault();
|
||||||
|
const start = e.target.selectionStart;
|
||||||
|
const end = e.target.selectionEnd;
|
||||||
|
|
||||||
|
// Insert tab at cursor position
|
||||||
|
const value = $editor.val();
|
||||||
|
$editor.val(value.substring(0, start) + ' ' + value.substring(end));
|
||||||
|
|
||||||
|
// Move cursor after the inserted tab
|
||||||
|
e.target.selectionStart = e.target.selectionEnd = start + 4;
|
||||||
|
|
||||||
|
// Update line numbers
|
||||||
|
updateLineNumbers();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save paste
|
||||||
|
$saveBtn.on('click', async () => {
|
||||||
|
if (!$editor.val().trim()) {
|
||||||
|
showNotification('Cannot save empty paste!', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/pastes', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/plain'
|
||||||
|
},
|
||||||
|
body: $editor.val()
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
// Add language as a hash parameter with query param format
|
||||||
|
const url = `${window.location.origin}/?id=${data.id}#${$languageSelector.val()}`;
|
||||||
|
navigator.clipboard.writeText(url);
|
||||||
|
showNotification('Paste saved! URL copied to clipboard.', 'success');
|
||||||
|
|
||||||
|
// Update URL without reloading the page
|
||||||
|
window.history.pushState({}, '', `/?id=${data.id}#${$languageSelector.val()}`);
|
||||||
|
|
||||||
|
// Switch to viewer mode
|
||||||
|
$('pre').css('width', '100%'); // Set pre width
|
||||||
|
$editorContainer.addClass('viewer-active');
|
||||||
|
} else {
|
||||||
|
showNotification(`Error: ${data.error}`, 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showNotification('Failed to save paste. Please try again.', 'error');
|
||||||
|
console.error('Save error:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Copy to clipboard
|
||||||
|
$copyBtn.on('click', () => {
|
||||||
|
if ($editorContainer.hasClass('viewer-active')) {
|
||||||
|
navigator.clipboard.writeText($viewer.text());
|
||||||
|
} else {
|
||||||
|
navigator.clipboard.writeText($editor.val());
|
||||||
|
}
|
||||||
|
showNotification('Content copied to clipboard!', 'success');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create new paste
|
||||||
|
$newBtn.on('click', () => {
|
||||||
|
$editor.val('');
|
||||||
|
updateLineNumbers();
|
||||||
|
window.history.pushState({}, '', '/'); // Reset URL to homepage
|
||||||
|
$editorContainer.removeClass('viewer-active');
|
||||||
|
$languageSelector.val('javascript');
|
||||||
|
$formatJsonBtn.hide(); // Hide JSON button when switching to new paste with JavaScript
|
||||||
|
});
|
||||||
|
|
||||||
|
// Language change
|
||||||
|
$languageSelector.on('change', () => {
|
||||||
|
// Toggle Format JSON button visibility based on language selection
|
||||||
|
$formatJsonBtn.toggle($languageSelector.val() === 'json');
|
||||||
|
|
||||||
|
if ($editorContainer.hasClass('viewer-active')) {
|
||||||
|
$viewer.attr('class', `language-${$languageSelector.val()}`);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
|
||||||
|
// Update URL hash
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const pasteId = urlParams.get('id');
|
||||||
|
if (pasteId) {
|
||||||
|
window.history.replaceState({}, '', `/?id=${pasteId}#${$languageSelector.val()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format JSON handler
|
||||||
|
$formatJsonBtn.on('click', () => {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse($editor.val());
|
||||||
|
const formatted = JSON.stringify(parsed, null, 2);
|
||||||
|
$editor.val(formatted);
|
||||||
|
$viewer.text(formatted);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
updateLineNumbers();
|
||||||
|
showNotification('JSON formatted successfully!', 'success');
|
||||||
|
} catch (e) {
|
||||||
|
showNotification('Invalid JSON: ' + e.message, 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sync scroll between line numbers and editor
|
||||||
|
$editor.on('scroll', () => {
|
||||||
|
$lineNumbers.scrollTop($editor.scrollTop());
|
||||||
|
});
|
||||||
|
|
||||||
|
$viewer.on('scroll', () => {
|
||||||
|
$lineNumbers.scrollTop($viewer.scrollTop());
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user