Maurice/pastabble
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects 1 Releases Wiki Activity

Pastabble frontend

Browse Source
This commit is contained in:
Maurice
2024-02-01 15:52:03 +01:00
parent 293a0af9c5
commit a1b5c513ea
29 changed files with 2410 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pastabble-frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

47
pastabble-frontend/README.md Normal file
View File

@@ -0,0 +1,47 @@
# Svelte + TS + Vite
This template should help get you started developing with Svelte and TypeScript in Vite.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
## Need an official Svelte framework?
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
## Technical considerations
**Why use this over SvelteKit?**
- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
**Why include `.vscode/extensions.json`?**
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
**Why enable `allowJs` in the TS template?**
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
**Why is HMR not preserving my local component state?**
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
```ts
// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```

4
pastabble-frontend/data/conf Normal file
View File

@@ -0,0 +1,4 @@
segment_size: 524288
use_compression: false
version: 0.34
vQ<>

BIN
pastabble-frontend/data/db Normal file
View File

Binary file not shown.

13
pastabble-frontend/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pastabble</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

29
pastabble-frontend/package.json Normal file
View File

@@ -0,0 +1,29 @@
{
"name": "pastabble-frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"@tsconfig/svelte": "^5.0.2",
"autoprefixer": "^10.4.17",
"daisyui": "^4.6.1",
"postcss": "^8.4.33",
"svelte": "^4.2.8",
"svelte-check": "^3.6.2",
"tailwindcss": "^3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^5.0.8"
},
"dependencies": {
"highlight.js": "^11.9.0",
"svelte-spa-router": "^4.0.1"
}
}

1717
pastabble-frontend/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
pastabble-frontend/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

22
pastabble-frontend/src/App.svelte Normal file
View File

@@ -0,0 +1,22 @@
<script lang="ts">
import ThemeSwitcher from "./lib/components/ThemeSwitcher.svelte";
import Router from 'svelte-spa-router'
import Home from './lib/pages/Home.svelte';
import Viewer from "./lib/pages/Viewer.svelte";
const routes = {
'/:id': Viewer,
'*': Home
};
</script>
<div class="float-right p-5">
<ThemeSwitcher />
</div>
<main class="p-10">
<a href="/#/" class="text-3xl font-bold">Pastabble</a><br/>
<i>Fast and free pastebin alternative brought to you by the Plabble team</i>
<Router {routes} />
</main>

3
pastabble-frontend/src/app.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

67
pastabble-frontend/src/lib/components/CodeBlock.svelte Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts">
import hljs from 'highlight.js';
import LanguageSelector from './LanguageSelector.svelte';
export let code: string | undefined;
export let language: string | undefined;
let displayCode: string | undefined;
let showAlert = false;
let initial = true;
$: if(code) {
highlight();
initial = false;
}
$: if(language) {
if(initial || !code) {
highlight();
}
}
function highlight() {
if(language) {
const res = hljs.highlight(language!, code!);
if(!res.errorRaised) {
displayCode = res.value;
}
} else {
const res = hljs.highlightAuto(code!);
if(!res.errorRaised) {
displayCode = res.value;
language = res.language;
}
}
}
async function copy() {
await navigator.clipboard.writeText(code!);
showAlert = true;
setTimeout(() => showAlert = false, 3000);
}
async function share() {
await navigator.clipboard.writeText(window.location.href);
showAlert = true;
setTimeout(() => showAlert = false, 3000);
}
</script>
<div class="flex flex-col m-3 gap-5">
<div role="alert" class="alert alert-success transition-opacity ease-in-out duration-500 {showAlert ? 'opacity-100' : 'opacity-0'}">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>Copied to your clipboard!</span>
</div>
<div class="flex flex-col md:flex-row gap-5">
<div class="mockup-code flex-1">
<pre class="p-5"><code>{@html displayCode}</code></pre>
</div>
<div class="flex flex-col gap-3">
<LanguageSelector bind:language />
<button on:click={copy} class="btn btn-outline btn-primary">Copy</button>
<button on:click={share} class="btn btn-outline btn-primary">Share link</button>
</div>
</div>
</div>

13
pastabble-frontend/src/lib/components/LanguageSelector.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import hljs from 'highlight.js';
const languages = hljs.listLanguages();
export let language: string | undefined = undefined;
</script>
<select bind:value={language} class="select select-primary select-bordered w-full max-w-xs">
<option value="{undefined}" disabled selected>Choose programming language</option>
{#each languages as lang}
<option value="{lang}">{lang}</option>
{/each}
</select>

28
pastabble-frontend/src/lib/components/ThemeSwitcher.svelte Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts">
import { onMount } from "svelte";
let darkTheme: boolean;
let mounted = false;
onMount(() => {
mounted = true;
darkTheme = localStorage['theme'] ? localStorage['theme'] === 'dark' : isDarkMode();
});
$: if(darkTheme) {
localStorage.setItem('theme', 'dark');
document.documentElement.setAttribute('data-theme', 'dark');
} else if(mounted) {
localStorage.setItem('theme', 'light');
document.documentElement.setAttribute('data-theme', 'light');
}
const isDarkMode = () =>
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
</script>
<label class="flex cursor-pointer gap-2 items-center">
<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"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
<input bind:checked={darkTheme} type="checkbox" class="toggle theme-controller"/>
<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"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</label>

5
pastabble-frontend/src/lib/models/note_details.ts Normal file
View File

@@ -0,0 +1,5 @@
export default interface NoteDetails {
content: string;
language?: string;
created: string;
}

176
pastabble-frontend/src/lib/pages/Home.svelte Normal file
View File

@@ -0,0 +1,176 @@
<script lang="ts">
import { push } from "svelte-spa-router";
import LanguageSelector from "../components/LanguageSelector.svelte";
let language: string | undefined;
let lookupNoteId: string = '';
let enteredUrl: string = '';
let createdUrl: string = '';
let newNoteId: string = '';
let newNoteCode: string = '';
let urlError = false;
let lookupNoteIdError = false;
let creatingNote = false;
let creatingUrl = false;
let copied = false;
let showAlert = false;
$: if(copied) {
setTimeout(() => {
copied = false;
}, 5000);
}
$: if(showAlert) {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
async function createNote() {
creatingNote = true;
const res = await fetch(language ? `/${newNoteId}?lang=${language}` : `/${newNoteId}`, {
method: 'POST',
body: newNoteCode
});
if(res.ok) {
const id = await res.text();
push(`/${id}`);
}
}
async function lookupNote() {
if(lookupNoteId.length === 0) {
lookupNoteIdError = true;
}
push(`/${lookupNoteId}`);
}
async function copyUrl() {
await navigator.clipboard.writeText(createdUrl);
copied = true;
}
async function shortenUrl() {
if(!isValidUrl(enteredUrl)) {
urlError = true;
return;
}
creatingUrl = true;
const res = await fetch('/to', {
method: 'POST',
body: enteredUrl
});
if(res.status === 200) {
const id = await res.text();
createdUrl = `${location.origin}/to/${id}`;
enteredUrl = '';
showAlert = true;
}
creatingUrl = false;
}
const isValidUrl = (url: string) => {
var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // validate protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // validate domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // validate OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // validate port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // validate query string
'(\\#[-a-z\\d_]*)?$','i'); // validate fragment locator
return !!urlPattern.test(url);
}
</script>
<div role="alert" class="alert transition-opacity ease-in-out duration-500 my-5 {showAlert ? 'opacity-100' : 'opacity-0'}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div class="flex flex-col md:flex-row gap-3 items-center w-full">
<span>Link created: </span>
<a href={createdUrl} class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{createdUrl}</a>
<button on:click={copyUrl} class="btn btn-info ml-auto">
{copied ? 'Copied' : 'Copy'}
<svg class:hidden={!copied} xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col md:flex-row gap-5 justify-around">
<div class="mt-10">
<div>
<h2 class="text-2xl font-bold mb-3">Lookup existing note</h2>
<div class="flex gap-2">
<input
on:keydown={(e) => {
lookupNoteIdError = false;
e.key === 'Enter' && lookupNote();
}}
bind:value={lookupNoteId}
type="text"
placeholder="Note ID"
class:input-error={lookupNoteIdError}
class:input-primary={!lookupNoteIdError}
class="input input-bordered w-full max-w-xs"
/>
<button on:click={lookupNote} class="btn btn-primary">Find</button>
</div>
</div>
<div class="mt-10">
<h2 class="text-2xl font-bold mb-3">URL shortener</h2>
<div class="flex gap-2">
<input
bind:value={enteredUrl}
on:keydown={(e) => {
lookupNoteIdError = false;
e.key === 'Enter' && shortenUrl();
}}
type="text"
placeholder="Enter your long URL"
class:input-error={urlError}
class="input input-bordered w-full max-w-xs"
/>
<button disabled={creatingUrl} on:click={shortenUrl} class="btn btn-outline btn-primary">
Shorten
<span class:hidden={!creatingUrl} class="loading loading-spinner"></span>
</button>
</div>
</div>
</div>
<div class="mt-10">
<h2 class="text-2xl font-bold mb-3">Or create a new one</h2>
<div class="flex flex-col md:flex-row gap-3">
<input
type="text"
placeholder="Note ID (empty for random)"
class="input input-bordered w-full max-w-xs"
bind:value={newNoteId}
/>
<LanguageSelector bind:language />
</div>
<textarea
class="textarea textarea-bordered mt-5 w-full h-32"
placeholder="Paste your code here..."
bind:value={newNoteCode}
></textarea>
<button disabled={creatingNote} on:click={createNote} class="btn btn-outline btn-primary w-full mt-3">
Save your paste
<span class:hidden={!creatingNote} class="loading loading-spinner"></span>
</button>
</div>
</div>

46
pastabble-frontend/src/lib/pages/Viewer.svelte Normal file
View File

@@ -0,0 +1,46 @@
<script lang="ts">
import { push } from "svelte-spa-router";
import CodeBlock from "../components/CodeBlock.svelte";
import type NoteDetails from "../models/note_details";
export let params: any;
let paste: NoteDetails | undefined;
let code: string | undefined;
let language: string | undefined;
let noteDoesNotExist = false;
let noteId: string;
if(params.id) {
noteId = params.id;
lookup();
}
async function lookup() {
const res = await fetch(`/${noteId}?details=y`);
if(res.ok) {
paste = await res.json();
code = paste?.content;
language = paste?.language;
} else {
if(res.status === 404) {
noteDoesNotExist = true;
}
}
}
function home() {
push('/');
}
</script>
<div>
{#if noteDoesNotExist}
<div role="alert" class="alert alert-warning mt-10">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<span>Note with id <b>#{noteId}</b> not found!</span>
</div>
<button on:click={home} class="btn btn-outline btn-primary mt-5">Back home</button>
{:else if code}
<CodeBlock {language} {code} />
{/if}
</div>

9
pastabble-frontend/src/main.ts Normal file
View File

@@ -0,0 +1,9 @@
import './app.css'
import 'highlight.js/styles/github-dark.min.css';
import App from './App.svelte'
const app = new App({
target: document.getElementById('app'),
})
export default app

2
pastabble-frontend/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
/// <reference types="svelte" />
/// <reference types="vite/client" />

7
pastabble-frontend/svelte.config.js Normal file
View File

@@ -0,0 +1,7 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}

9
pastabble-frontend/tailwind.config.js Normal file
View File

@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,svelte,js,ts}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
}

20
pastabble-frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"resolveJsonModule": true,
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true,
"isolatedModules": true
},
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
pastabble-frontend/tsconfig.node.json Normal file
View File

@@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler"
},
"include": ["vite.config.ts"]
}

7
pastabble-frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()]
})