This commit is contained in:
Egor Aristov 2025-02-06 12:44:22 +03:00
commit 75fb03d3e1
31 changed files with 6319 additions and 2 deletions

View File

@ -2,9 +2,10 @@ package main
import (
"context"
wizard_vue "github.com/egor3f/rssalchemy/frontend/wizard-vue"
"github.com/egor3f/rssalchemy/internal/adapters/natsadapter"
httpApi "github.com/egor3f/rssalchemy/internal/api/http"
"github.com/egor3f/rssalchemy/internal/config"
httpApi "github.com/egor3f/rssalchemy/internal/delivery/http"
"github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware"
"github.com/labstack/gommon/log"
@ -47,7 +48,8 @@ func main() {
e := echo.New()
e.Use(middleware.Logger())
e.Use(middleware.Recover())
e.Static("/", "frontend/wizard")
e.StaticFS("/", echo.MustSubFS(wizard_vue.EmbedFS, wizard_vue.FSPrefix))
apiHandler := httpApi.New(cq)
apiHandler.SetupRoutes(e.Group("/api/v1"))

View File

@ -0,0 +1,9 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100

View File

@ -0,0 +1 @@
VITE_API_BASE=http://localhost:5000

View File

@ -0,0 +1 @@
VITE_API_BASE=

1
frontend/wizard-vue/.gitattributes vendored Normal file
View File

@ -0,0 +1 @@
* text=auto eol=lf

30
frontend/wizard-vue/.gitignore vendored Normal file
View File

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

View File

@ -0,0 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

View File

@ -0,0 +1,8 @@
package wizard_vue
import "embed"
//go:embed dist
var EmbedFS embed.FS
const FSPrefix = "dist"

1
frontend/wizard-vue/env.d.ts vendored Normal file
View File

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

View File

@ -0,0 +1,24 @@
import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
},
{
name: 'app/files-to-ignore',
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
},
pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
skipFormatting,
)

View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

5542
frontend/wizard-vue/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,39 @@
{
"name": "wizard-vue",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --fix",
"format": "prettier --write src/"
},
"dependencies": {
"@kalimahapps/vue-icons": "^1.7.1",
"pinia": "^2.3.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.0",
"@types/node": "^22.10.7",
"@vitejs/plugin-vue": "^5.2.1",
"@vue/eslint-config-prettier": "^10.1.0",
"@vue/eslint-config-typescript": "^14.3.0",
"@vue/tsconfig": "^0.7.0",
"eslint": "^9.18.0",
"eslint-plugin-vue": "^9.32.0",
"jiti": "^2.4.2",
"npm-run-all2": "^7.0.2",
"prettier": "^3.4.2",
"sass-embedded": "^1.83.4",
"typescript": "~5.7.3",
"vite": "^6.0.11",
"vite-plugin-vue-devtools": "^7.7.0",
"vue-tsc": "^2.2.0"
}
}

View File

@ -0,0 +1,11 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<RouterView />
</template>
<style scoped>
</style>

View File

@ -0,0 +1,3 @@
body {
font-family: "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
}

View File

@ -0,0 +1,44 @@
<script setup lang="ts">
const {active} = defineProps({
active: {
type: Boolean,
default: true
}
});
</script>
<template>
<div class="btn-wrapper" :class="{active: active}">
<slot></slot>
</div>
</template>
<style scoped lang="scss">
div.btn-wrapper {
display: inline-block;
border-radius: 4px;
margin: 4px 8px 0 0;
padding: 4px 6px;
user-select: none;
background-color: #ffffff;
border: 1px solid #868686;
color: #505050;
&.active {
background-color: #f2f2f2;
box-shadow: #acacac 1px 1px;
border: 1px solid #464646;
color: black;
cursor: pointer;
&:hover {
background-color: #d5d5d5;
}
&:active {
background-color: #c0c0c0;
}
}
}
</style>

View File

@ -0,0 +1,60 @@
<script setup lang="ts">
import { MdContentCopy } from '@kalimahapps/vue-icons';
import {ref} from "vue";
const {contents} = defineProps({
contents: String,
});
const copiedTooltip = ref(false);
async function copy() {
if(contents) {
await navigator.clipboard.writeText(contents);
copiedTooltip.value = true;
setTimeout(() => {
copiedTooltip.value = false;
}, 1000);
}
}
</script>
<template>
<div class="copyable">
<span class="contents">{{ contents }}</span>
<span class="copy" v-if="copiedTooltip">Copied!</span>
<span class="copy" @click="copy" v-else><MdContentCopy class="icon"/></span>
</div>
</template>
<style scoped lang="scss">
div.copyable {
display: flex;
flex-flow: row nowrap;
align-items: center;
border: 1px solid #464646;
border-radius: 2px;
margin: 4px 4px 0 0;
user-select: all;
span.contents {
flex: 1;
padding: 4px;
overflow: hidden;
text-align: left;
}
span.copy {
flex: 0;
cursor: pointer;
user-select: none;
padding: 4px;
.icon {
display: block;
font-size: 18px;
}
}
}
</style>

View File

@ -0,0 +1,91 @@
<script setup lang="ts">
import Field from "@/components/Field.vue";
import {type Field as FieldSpec} from "@/urlmaker/specs";
import {validateUrl} from "@/urlmaker/validators.ts";
import Btn from "@/components/Btn.vue";
import {onMounted, onUnmounted, ref, watch} from "vue";
const field: FieldSpec = {
name: '',
input_type: 'url',
label: 'URL of feed for editing',
default: '',
required: true,
validate: validateUrl,
}
const {visible, modelValue} = defineProps({
visible: Boolean,
modelValue: {
type: String,
required: true,
}
});
const emit = defineEmits(['close', 'update:modelValue']);
const url = ref(modelValue);
watch(() => visible, () => {
url.value = modelValue;
});
const valid = ref(false);
watch(url, (value) => {
valid.value = field.validate(value).ok;
});
const accept = () => {
valid.value = field.validate(url.value).ok;
if (valid.value) {
emit('update:modelValue', url.value);
emit('close');
}
}
const listener = (e: KeyboardEvent) => {
if (e.code === 'Escape') emit('close');
if (e.code === 'Enter') accept();
};
onMounted(() => {
document.addEventListener('keyup', listener);
});
onUnmounted(() => {
document.removeEventListener('keyup', listener);
});
</script>
<template>
<Teleport to="#app">
<div class="modal-wrapper" v-if="visible" @click="$emit('close')">
<div class="modal" @click.stop>
<Field :field="field" v-model="url" :focused="true"/>
<Btn :active="valid" @click="accept">Edit</Btn>
</div>
</div>
</Teleport>
</template>
<style scoped lang="scss">
div.modal-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
background: rgba(200, 200, 200, 0.5);
backdrop-filter: blur(2px);
}
div.modal {
width: 100%;
max-width: 400px;
margin: auto auto;
background: #ffffff;
padding: 10px;
border-radius: 6px;
box-shadow: #a0a0a0 1px 2px 2px;
}
</style>

View File

@ -0,0 +1,45 @@
<script setup lang="ts">
import type {Field} from "@/urlmaker/specs.ts";
import {getCurrentInstance, onMounted, useTemplateRef} from "vue";
const {field, focused} = defineProps<{
field: Field,
focused?: boolean,
}>();
const id = 'field' + getCurrentInstance()?.uid;
const model = defineModel();
const inputRef = useTemplateRef('field');
onMounted(() => {
if(focused) inputRef.value?.focus();
})
</script>
<template>
<div class="field">
<div class="label"><label :for="id">{{ field.label }}</label></div>
<div class="input">
<input :type="field.input_type" :name="field.name" :id="id" v-model="model" ref="field"/>
</div>
</div>
</template>
<style scoped lang="scss">
div.field {
margin: 0 0 8px 0;
}
div.label {
font-size: 0.9em;
}
div.input {
margin: 2px 0 0 0;
box-sizing: border-box;
input {
box-sizing: border-box;
width: 100%;
padding: 2px;
}
}
</style>

View File

@ -0,0 +1,17 @@
<script setup lang="ts">
import {fields, type Specs} from '@/urlmaker/specs.ts';
import Field from "@/components/Field.vue";
const model = defineModel<Specs>({required: true});
</script>
<template>
<div>
<Field v-for="field in fields" :field="field" v-model="model[field.name]"></Field>
</div>
</template>
<style scoped lang="scss">
</style>

View File

@ -0,0 +1,14 @@
import './assets/base.scss'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

View File

@ -0,0 +1,80 @@
<script setup lang="ts">
import SpecsForm from "@/components/SpecsForm.vue";
import {reactive, ref, watch} from "vue";
import {type Field, fields, type Specs} from "@/urlmaker/specs.ts";
import Btn from "@/components/Btn.vue";
import Copyable from "@/components/Copyable.vue";
import EditUrlModal from "@/components/EditUrlModal.vue";
import {decodeUrl, encodeUrl, getScreenshotUrl} from "@/urlmaker";
const emptySpecs = fields.reduce((o, f) => {
o[f.name] = f.default;
return o
}, {} as Specs);
const specs = reactive(emptySpecs);
const formValid = ref(false);
watch(specs, (value) => {
formValid.value = fields.every(field => (
value[field.name].length === 0 && !(field as Field).required || field.validate(value[field.name]).ok
));
});
const existingLink = ref("");
const link = ref("");
const editModalVisible = ref(false);
watch(existingLink, async (value) => {
if(!value) return;
existingLink.value = "";
try {
Object.assign(specs, await decodeUrl(value));
link.value = "";
} catch (e) {
console.log(e);
alert(`Decoding error: ${e}`);
}
});
async function generateLink() {
try {
link.value = await encodeUrl(specs);
} catch (e) {
console.log(e);
alert(`Encoding error: ${e}`);
}
}
function screenshot() {
window.open(getScreenshotUrl(specs.url));
}
</script>
<template>
<div class="wrapper">
<SpecsForm v-model="specs" class="specs-form"></SpecsForm>
<Btn :active="formValid" @click="generateLink">Generate link</Btn>
<Btn :active="formValid" @click="screenshot">Screenshot</Btn>
<Btn @click="editModalVisible = true">Edit existing task</Btn>
<Copyable v-if="link" :contents="link" class="link-view"></Copyable>
<EditUrlModal :visible="editModalVisible" @close="editModalVisible = false"
v-model="existingLink"></EditUrlModal>
</div>
</template>
<style scoped lang="scss">
div.wrapper {
width: 100%;
max-width: 600px;
margin: auto;
}
.specs-form {
margin-bottom: 15px;
}
.link-view {
margin-top: 15px !important;
}
</style>

View File

@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import WizardPage from "@/pages/WizardPage.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'wizard',
component: WizardPage,
},
],
})
export default router

View File

@ -0,0 +1,71 @@
import type {Specs} from "@/urlmaker/specs.ts";
const apiBase = import.meta.env.VITE_API_BASE || document.location.origin;
const renderEndpoint = '/api/v1/render/';
const screenshotEndpoint = `/api/v1/screenshot/`;
export async function decodeUrl(url: string): Promise<Specs> {
const splitUrl = url.split(renderEndpoint);
if(splitUrl.length !== 2) {
throw 'Split failed';
}
let encodedData = splitUrl[1];
console.log('Data len=' + encodedData.length);
const m = encodedData.match(/(\d*):?([A-Za-z0-9+/=]+)/);
if(!m) {
throw 'Regex failed';
}
const version = m[1] ? parseInt(m[1]) : 0;
console.log('Decoding url using version: ' + version);
encodedData = m[2];
let buf = b64decode(encodedData);
if (version === 0) {
const jsonData = await decompress(buf);
return JSON.parse(jsonData);
}
throw 'Unknown version'
}
export async function encodeUrl(specs: Specs): Promise<string> {
const jsonData = JSON.stringify(specs);
const buf = await compress(jsonData);
const encodedData = b64encode(buf);
console.log('Data len=' + encodedData.length);
const version = 0;
return `${apiBase}${renderEndpoint}${version}:${encodedData}`
}
export function getScreenshotUrl(url: string): string {
return `${apiBase}${screenshotEndpoint}?url=${encodeURIComponent(url)}`;
}
function b64encode(buf: Uint8Array): string {
// @ts-ignore
const b64str = btoa(String.fromCharCode.apply(null, buf));
// @ts-ignore
return b64str.replaceAll('=', '');
}
function b64decode(s: string): Uint8Array {
return Uint8Array.from(atob(s), c => c.charCodeAt(0));
}
async function compress(s: string): Promise<Uint8Array> {
let byteArray = new TextEncoder().encode(s);
let cs = new CompressionStream('deflate-raw');
let writer = cs.writable.getWriter();
writer.write(byteArray);
writer.close();
let response = new Response(cs.readable);
return new Uint8Array(await response.arrayBuffer());
}
async function decompress(buf: Uint8Array): Promise<string> {
let ds = new DecompressionStream('deflate-raw');
let writer = ds.writable.getWriter();
writer.write(buf);
writer.close();
let response = new Response(ds.readable);
return response.text();
}

View File

@ -0,0 +1,93 @@
import {
validateDuration,
validateSelector,
validateUrl,
type validator
} from "@/urlmaker/validators.ts";
export interface Field {
name: string
input_type: string
label: string
default: string
validate: validator
required?: boolean
}
export const fields = [
{
name: 'url',
input_type: 'url',
label: 'URL of page for converting',
default: '',
validate: validateUrl,
required: true,
},
{
name: 'selector_post',
input_type: 'text',
label: 'CSS Selector for post',
default: '',
validate: validateSelector,
},
{
name: 'selector_title',
input_type: 'text',
label: 'CSS Selector for title',
default: '',
validate: validateSelector,
},
{
name: 'selector_link',
input_type: 'text',
label: 'CSS Selector for link',
default: '',
validate: validateSelector,
},
{
name: 'selector_description',
input_type: 'text',
label: 'CSS Selector for description',
default: '',
validate: validateSelector,
},
{
name: 'selector_author',
input_type: 'text',
label: 'CSS Selector for author',
default: '',
validate: validateSelector,
},
{
name: 'selector_created',
input_type: 'text',
label: 'CSS Selector for created date',
default: '',
validate: validateSelector,
},
{
name: 'selector_content',
input_type: 'text',
label: 'CSS Selector for content',
default: '',
validate: validateSelector,
},
{
name: 'selector_enclosure',
input_type: 'text',
label: 'CSS Selector for enclosure (e.g. image url)',
default: '',
validate: validateSelector,
},
{
name: 'cache_lifetime',
input_type: 'text',
label: 'Cache lifetime (format examples: 10s, 1m, 2h)',
default: '1m',
validate: validateDuration,
},
] as const satisfies Field[];
export type FieldNames = (typeof fields)[number]['name'];
export type Specs = {[k in FieldNames]: string}

View File

@ -0,0 +1,31 @@
type validResult = { ok: boolean, error?: string };
export type validator = (v: string) => validResult
export function validateUrl(s: string): validResult {
let url;
try {
url = new URL(s);
return {
ok: url.protocol === "http:" || url.protocol === "https:",
error: 'Invalid URL protocol',
};
} catch {
return {ok: false, error: 'Invalid URL'};
}
}
export function validateSelector(s: string): validResult {
try {
document.createDocumentFragment().querySelector(s);
return {ok: true}
} catch {
return {ok: false, error: 'Invalid selector'};
}
}
export function validateDuration(s: string): validResult {
return {
ok: /^\d+[smh]$/.test(s),
error: 'Duration must be number and unit (s/m/h), example: 5s = 5 seconds'
}
}

View File

@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}

View File

@ -0,0 +1,16 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
],
"compilerOptions": {
"lib": [
"es2021"
]
}
}

View File

@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

View File

@ -0,0 +1,18 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})