mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-10-23 04:52:14 +00:00
Compare commits
17 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
fce9240221 | ||
|
e6a7397493 | ||
|
a099485382 | ||
|
181c9f9874 | ||
|
21e9890b65 | ||
|
e894125001 | ||
|
ffe25b87d2 | ||
|
eb4363244b | ||
|
58372b0d06 | ||
|
096bebf093 | ||
|
9f83534046 | ||
|
c1dafd09b7 | ||
|
cc1ac8398b | ||
|
24fd5e7aaf | ||
|
94cb74d434 | ||
|
08aae49aa3 | ||
|
c727e150f7 |
@@ -4,6 +4,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## Next
|
||||
- [fix] [GithubContributors] ordered contributors by contribution count
|
||||
- [refactor] used vue-typecasting for number inputs
|
||||
- [feat] lazy loading tools routes
|
||||
- [feat] added [markdown editor](/#/markdown-editor)
|
||||
- [feat] added [lorem ipsum generator](/#/lorem-ipsum-generator)
|
||||
|
||||
## 1.2.1
|
||||
- [fix] [UuidGenerator] added quantity validation rules
|
||||
- [refactor] better isInt checker
|
||||
|
||||
@@ -22,4 +29,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- [fix] remove history move (incompatible with vercel.com)
|
||||
|
||||
## 1.0.0
|
||||
- First release
|
||||
- First release
|
||||
|
@@ -2,7 +2,7 @@
|
||||
|
||||
Aggregated set of useful tools that every developer may need once in a while. Available [here](https://it-tools.tech).
|
||||
|
||||
## Functionality/roadmap
|
||||
## Functionalities roadmap
|
||||
Here is an unordered list of the current functionalities, and some that may come.
|
||||
|
||||
- [x] Token generator
|
||||
@@ -15,7 +15,8 @@ Here is an unordered list of the current functionalities, and some that may come
|
||||
- [x] Url encoder
|
||||
- [x] Base 64 generator
|
||||
- [x] Text information
|
||||
- [ ] Lorem ipsum text generator
|
||||
- [x] Markdown editor
|
||||
- [x] Lorem ipsum text generator
|
||||
- [ ] Image exif editor/remover
|
||||
- [ ] QR code generator
|
||||
- [ ] Bip39 pass-phrase generator
|
||||
@@ -24,6 +25,8 @@ Here is an unordered list of the current functionalities, and some that may come
|
||||
- [ ] Image cropper
|
||||
- [ ] Image resizer
|
||||
- [ ] HTTP client (w/ axios)
|
||||
- [ ] Math expression evaluator
|
||||
- [ ] Math expression graph
|
||||
|
||||
You have an idea of a tool? Submit a feature request!
|
||||
|
||||
|
24
package-lock.json
generated
24
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "it-tools",
|
||||
"version": "1.2.1",
|
||||
"version": "1.3.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -3139,6 +3139,12 @@
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"highlight.js": {
|
||||
"version": "9.18.1",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
|
||||
"integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
|
||||
@@ -4373,6 +4379,11 @@
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"dompurify": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.11.tgz",
|
||||
"integrity": "sha512-qVoGPjIW9IqxRij7klDQQ2j6nSe4UNWANBhZNLnsS7ScTtLb+3YdxkRY8brNTpkUiTtcXsCJO+jS0UCDfenLuA=="
|
||||
},
|
||||
"domutils": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
|
||||
@@ -6253,12 +6264,6 @@
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
|
||||
"dev": true
|
||||
},
|
||||
"highlight.js": {
|
||||
"version": "9.18.1",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
|
||||
"integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
|
||||
"dev": true
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
@@ -8103,6 +8108,11 @@
|
||||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"marked": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-1.1.0.tgz",
|
||||
"integrity": "sha512-EkE7RW6KcXfMHy2PA7Jg0YJE1l8UPEZE8k45tylzmZM30/r1M1MUXWQfJlrSbsTeh7m/XTwHbWUENvAJZpp1YA=="
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
|
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "it-tools",
|
||||
"description": "",
|
||||
"version": "1.2.1",
|
||||
"version": "1.3.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@@ -13,6 +13,8 @@
|
||||
"color-convert": "^2.0.1",
|
||||
"color-name": "^1.1.4",
|
||||
"core-js": "^3.6.4",
|
||||
"dompurify": "^2.0.11",
|
||||
"marked": "^1.1.0",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"roboto-fontface": "*",
|
||||
"vue": "^2.6.11",
|
||||
|
52
src/App.vue
52
src/App.vue
@@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<vue-headful
|
||||
:title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
|
||||
:description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
|
||||
:keywords="currentRoute ? currentRoute.keywords: null"
|
||||
image="/img/banner.png"
|
||||
:title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
|
||||
:description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
|
||||
:keywords="currentRoute ? currentRoute.keywords: null"
|
||||
image="/img/banner.png"
|
||||
/>
|
||||
<v-navigation-drawer v-model="drawer" app clipped>
|
||||
|
||||
<SearchBar class="hidden-sm-and-up" />
|
||||
<template v-slot:prepend>
|
||||
<SearchBar class="hidden-sm-and-up"/>
|
||||
</template>
|
||||
|
||||
<v-list dense>
|
||||
|
||||
@@ -17,7 +18,7 @@
|
||||
|
||||
<v-list-item v-for="item in section.child" :key="item.text" :to="item.path">
|
||||
<v-list-item-action>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
<v-icon style="width: 1.25em">{{ item.icon }}</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
@@ -99,7 +100,7 @@
|
||||
appVersion: 'v' + process.env.APPLICATION_VERSION,
|
||||
drawer: null,
|
||||
items: toolsComponents,
|
||||
currentRoute:{}
|
||||
currentRoute: {}
|
||||
}),
|
||||
mounted() {
|
||||
this.setTitle()
|
||||
@@ -107,14 +108,14 @@
|
||||
created() {
|
||||
this.$vuetify.theme.dark = true
|
||||
},
|
||||
methods:{
|
||||
setTitle(){
|
||||
methods: {
|
||||
setTitle() {
|
||||
const path = this.$router.currentRoute.path;
|
||||
this.currentRoute = toolsComponents.map(p => p.child).flat().find(p => p.path === path)
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$route'(){
|
||||
watch: {
|
||||
'$route'() {
|
||||
this.setTitle()
|
||||
}
|
||||
}
|
||||
@@ -126,6 +127,33 @@
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.pretty-scrollbar{
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px!important;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
&::-webkit-scrollbar-track {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(241, 241, 241, 0.10) !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(241, 241, 241, 0.20)!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.v-navigation-drawer__content{
|
||||
.pretty-scrollbar;
|
||||
}
|
||||
|
||||
.single-card {
|
||||
width: 100%;
|
||||
max-width: 700px !important;
|
||||
|
@@ -36,7 +36,7 @@
|
||||
axios
|
||||
.get(url)
|
||||
.then(({data}) => {
|
||||
this.contributors = data.sort((a, b) => a.contributions - b.contributions)
|
||||
this.contributors = data.sort((a, b) => b.contributions - a.contributions)
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => this.hasError = true)
|
||||
|
@@ -1,20 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from './routes/Home.vue'
|
||||
import TokenGenerator from "./routes/tools/TokenGenerator";
|
||||
import Hash from "./routes/tools/Hash";
|
||||
import DateConverter from "./routes/tools/DateConverter";
|
||||
import UrlEncoder from "./routes/tools/UrlEncoder";
|
||||
import FileToBase64 from "./routes/tools/FileToBase64";
|
||||
import TextCypher from "./routes/tools/TextCypher";
|
||||
import TextStats from "./routes/tools/TextStats";
|
||||
import BaseConverter from "./routes/tools/BaseConverter";
|
||||
import UuidGenerator from "./routes/tools/UuidGenerator";
|
||||
import ColorConverter from "./routes/tools/ColorConverter";
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
|
||||
const toolsComponents = [
|
||||
{
|
||||
title: 'Crypto',
|
||||
@@ -23,7 +12,7 @@ const toolsComponents = [
|
||||
icon: 'fa-key',
|
||||
text: 'Token generator',
|
||||
path: '/token-generator',
|
||||
component: TokenGenerator,
|
||||
component: () => import('./routes/tools/TokenGenerator'),
|
||||
keywords: ['token', 'random', 'string', 'alphanumeric'],
|
||||
description: 'Generate random tokens.'
|
||||
},
|
||||
@@ -31,14 +20,14 @@ const toolsComponents = [
|
||||
icon: 'fa-fingerprint',
|
||||
text: 'Uuid generator',
|
||||
path: '/uuid-generator',
|
||||
component: UuidGenerator,
|
||||
component: () => import('./routes/tools/UuidGenerator'),
|
||||
keywords: ['token', 'v4', 'string', 'alphanumeric']
|
||||
},
|
||||
{
|
||||
icon: 'fa-font',
|
||||
text: 'Hash text',
|
||||
path: '/hash',
|
||||
component: Hash,
|
||||
component: () => import('./routes/tools/Hash'),
|
||||
keywords: ['md5', 'sha1', 'sha256', 'sha224', 'sha512', 'sha384', 'sha3', 'ripemd160', 'random']
|
||||
|
||||
},
|
||||
@@ -46,7 +35,7 @@ const toolsComponents = [
|
||||
icon: 'fa-lock',
|
||||
text: 'Cypher/uncypher text',
|
||||
path: '/cypher',
|
||||
component: TextCypher,
|
||||
component: () => import('./routes/tools/TextCypher'),
|
||||
keywords: ['aes', 'tripledes', 'rabbit', 'rabbitlegacy', 'rc4']
|
||||
},
|
||||
],
|
||||
@@ -58,21 +47,21 @@ const toolsComponents = [
|
||||
icon: 'fa-calendar',
|
||||
text: 'Date/Time converter',
|
||||
path: '/date-converter',
|
||||
component: DateConverter,
|
||||
component: () => import('./routes/tools/DateConverter'),
|
||||
keywords: ['locale', 'format', 'iso 8601', 'utc', 'timestamp', 'unix', 'year', 'month', 'day', 'hours', 'minutes', 'seconds']
|
||||
},
|
||||
{
|
||||
icon: 'fa-exchange-alt',
|
||||
text: 'Base converter',
|
||||
path: '/base-converter',
|
||||
component: BaseConverter,
|
||||
component: () => import('./routes/tools/BaseConverter'),
|
||||
keywords: ['binary', 'hexadecimal', 'decimal']
|
||||
},
|
||||
{
|
||||
icon: 'fa-palette',
|
||||
text: 'Color picker/converter',
|
||||
path: '/color-picker-converter',
|
||||
component: ColorConverter,
|
||||
component: () => import('./routes/tools/ColorConverter'),
|
||||
keywords: ['rgb', 'rgba', 'hexadecimal', 'hsla', 'red', 'green', 'blue', 'alpha']
|
||||
},
|
||||
],
|
||||
@@ -84,27 +73,41 @@ const toolsComponents = [
|
||||
icon: 'fa-link',
|
||||
text: 'URL encode/decode',
|
||||
path: '/url-encoder',
|
||||
component: UrlEncoder,
|
||||
component: () => import('./routes/tools/UrlEncoder'),
|
||||
keywords: ['%20']
|
||||
},
|
||||
{
|
||||
icon: 'fa-file-export',
|
||||
text: 'File to Base64',
|
||||
path: '/file-to-base64',
|
||||
component: FileToBase64
|
||||
component: () => import('./routes/tools/FileToBase64')
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Miscellaneous',
|
||||
title: 'Text',
|
||||
child: [
|
||||
{
|
||||
icon: 'fa-align-left\n',
|
||||
icon: 'fa-align-left',
|
||||
text: 'Text stats',
|
||||
path: '/text-stats',
|
||||
component: TextStats,
|
||||
component: () => import('./routes/tools/TextStats'),
|
||||
keywords: ['word', 'count', 'size', 'bytes', 'length']
|
||||
},
|
||||
{
|
||||
icon: 'fab fa-markdown',
|
||||
text: 'Markdown editor',
|
||||
path: '/markdown-editor',
|
||||
component: () => import('./routes/tools/MarkdownEditor'),
|
||||
keywords: ['text', 'html', 'markdown']
|
||||
},
|
||||
{
|
||||
icon: 'fa-align-justify',
|
||||
text: 'Lorem ipsum generator',
|
||||
path: '/lorem-ipsum-generator',
|
||||
component: () => import('./routes/tools/LoremIpsumGenerator'),
|
||||
keywords: ['text', 'dolor', 'sit', 'placeholder', 'fill', 'dummy']
|
||||
}
|
||||
],
|
||||
}
|
||||
];
|
||||
|
@@ -11,7 +11,7 @@
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
<v-row justify="center" >
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="5" sm="12">
|
||||
<v-card>
|
||||
<v-card-title>Contributors</v-card-title>
|
||||
@@ -22,12 +22,7 @@
|
||||
<v-card>
|
||||
<v-card-title>Changelog</v-card-title>
|
||||
<v-card-text>
|
||||
<div v-for="(section, i) in changelog" :key="i">
|
||||
<h2>{{section.title}}</h2>
|
||||
<ul>
|
||||
<li v-for="(log, i) in section.logs" :key="i"> {{log}}</li>
|
||||
</ul>
|
||||
<br>
|
||||
<div v-html="changelog" class="changelog">
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -39,6 +34,8 @@
|
||||
import Abstract from "../components/Abstract";
|
||||
import GithubContributors from "../components/GithubContributors";
|
||||
import changelog from "../../CHANGELOG.md"
|
||||
import marked from 'marked'
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
export default {
|
||||
name: "About",
|
||||
@@ -46,28 +43,21 @@
|
||||
changelog: []
|
||||
}),
|
||||
mounted() {
|
||||
|
||||
this.changelog = ('##' + changelog.replace(/^(.*?)##/s, ''))
|
||||
.split('\n')
|
||||
.filter(v => v !== '')
|
||||
.reduce((sections, v) => {
|
||||
v = v.trim();
|
||||
if(v.startsWith('##')){
|
||||
sections.push({
|
||||
title: v.replace(/^##/, '').trim(),
|
||||
logs: []
|
||||
})
|
||||
}else {
|
||||
sections.slice(-1)[0].logs.push(v.replace(/^-/, '').trim())
|
||||
}
|
||||
|
||||
return sections
|
||||
}, []);
|
||||
console.log(this.changelog);
|
||||
this.changelog = DOMPurify.sanitize(marked('##' + changelog.replace(/^(.*?)##/s, '')));
|
||||
},
|
||||
components: {
|
||||
Abstract,
|
||||
GithubContributors
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep {
|
||||
.changelog {
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -8,7 +8,7 @@
|
||||
label="Input base"
|
||||
outlined
|
||||
type="number"
|
||||
v-model="inputBase"
|
||||
v-model.number="inputBase"
|
||||
ref="inputBase"
|
||||
hide-details="auto"
|
||||
:rules="baseRules"
|
||||
@@ -33,7 +33,7 @@
|
||||
label="Output base"
|
||||
outlined
|
||||
type="number"
|
||||
v-model="outputBase"
|
||||
v-model.number="outputBase"
|
||||
ref="outputBase"
|
||||
:rules="baseRules"
|
||||
/>
|
||||
|
94
src/routes/tools/LoremIpsumGenerator.vue
Normal file
94
src/routes/tools/LoremIpsumGenerator.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<v-row justify="center" align="center" class="lorem-ipsum-generator">
|
||||
<v-col cols="12" xl="5" lg="6" md="12">
|
||||
<v-card>
|
||||
<v-card-title>Lorem ipsum generator</v-card-title>
|
||||
<v-card-text>
|
||||
<v-slider v-model="paragraphs" min="1" max="20" label="Paragraphs" thumb-label/>
|
||||
<v-range-slider v-model="sentencePerParagraph" min="1" max="50" label="Sentences per paragraph"
|
||||
thumb-label/>
|
||||
<v-range-slider v-model="wordPerSentence" min="1" max="50" label="Words per sentence" thumb-label hide-details/>
|
||||
<v-checkbox v-model="startWithLoremIpsum" label="Start with 'Lorem ipsum ...'" hide-details/>
|
||||
<v-checkbox v-model="asHTML" label="As HTML" hide-details/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" xl="5" lg="6" md="12">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-textarea outlined readonly hide-details="auto" v-model="loremIpsum" rows="15"
|
||||
class="text-justify"></v-textarea>
|
||||
<div class="text-center mt-4">
|
||||
<v-btn depressed @click="copy()">Copy</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {copyToClipboard, randFromArray, randIntFromInterval} from "../../utils/helpers";
|
||||
|
||||
const vocabulary = ['a', 'ac', 'accumsan', 'ad', 'adipiscing', 'aenean', 'aliquam', 'aliquet', 'amet', 'ante', 'aptent', 'arcu', 'at', 'auctor', 'bibendum', 'blandit', 'class', 'commodo', 'condimentum', 'congue', 'consectetur', 'consequat', 'conubia', 'convallis', 'cras', 'cubilia', 'cum', 'curabitur', 'curae', 'dapibus', 'diam', 'dictum', 'dictumst', 'dignissim', 'dolor', 'donec', 'dui', 'duis', 'egestas', 'eget', 'eleifend', 'elementum', 'elit', 'enim', 'erat', 'eros', 'est', 'et', 'etiam', 'eu', 'euismod', 'facilisi', 'faucibus', 'felis', 'fermentum', 'feugiat', 'fringilla', 'fusce', 'gravida', 'habitant', 'habitasse', 'hac', 'hendrerit', 'himenaeos', 'iaculis', 'id', 'imperdiet', 'in', 'inceptos', 'integer', 'interdum', 'ipsum', 'justo', 'lacinia', 'lacus', 'laoreet', 'lectus', 'leo', 'ligula', 'litora', 'lobortis', 'lorem', 'luctus', 'maecenas', 'magna', 'magnis', 'malesuada', 'massa', 'mattis', 'mauris', 'metus', 'mi', 'molestie', 'mollis', 'montes', 'morbi', 'mus', 'nam', 'nascetur', 'natoque', 'nec', 'neque', 'netus', 'nisi', 'nisl', 'non', 'nostra', 'nulla', 'nullam', 'nunc', 'odio', 'orci', 'ornare', 'parturient', 'pellentesque', 'penatibus', 'per', 'pharetra', 'phasellus', 'placerat', 'platea', 'porta', 'porttitor', 'posuere', 'potenti', 'praesent', 'pretium', 'primis', 'proin', 'pulvinar', 'purus', 'quam', 'quis', 'quisque', 'rhoncus', 'ridiculus', 'risus', 'rutrum', 'sagittis', 'sapien', 'scelerisque', 'sed', 'sem', 'semper', 'senectus', 'sit', 'sociis', 'sociosqu', 'sodales', 'sollicitudin', 'suscipit', 'suspendisse', 'taciti', 'tellus', 'tempor', 'tempus', 'tincidunt', 'torquent', 'tortor', 'turpis', 'ullamcorper', 'ultrices', 'ultricies', 'urna', 'varius', 'vehicula', 'vel', 'velit', 'venenatis', 'vestibulum', 'vitae', 'vivamus', 'viverra', 'volutpat', 'vulputate'];
|
||||
const firstSentence = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
|
||||
|
||||
const generateSentence = (length) => {
|
||||
let sentence = Array.from({length}).map(() => randFromArray(vocabulary)).join(' ')
|
||||
sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1) + '.'
|
||||
return sentence
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
name: "LoremIpsumGenerator",
|
||||
data: () => ({
|
||||
paragraphs: 1,
|
||||
sentencePerParagraph: [3, 8],
|
||||
wordPerSentence: [8, 15],
|
||||
startWithLoremIpsum: true,
|
||||
asHTML: false
|
||||
}),
|
||||
methods:{
|
||||
copy(){
|
||||
copyToClipboard(this.loremIpsum)
|
||||
this.$toast.success('Copied to clipboard.')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loremIpsum: function () {
|
||||
const lorem = Array
|
||||
.from({length: this.paragraphs})
|
||||
.map(() => {
|
||||
const length = randIntFromInterval(...this.sentencePerParagraph);
|
||||
|
||||
return Array.from({length}).map(() => {
|
||||
const wordCount = randIntFromInterval(...this.wordPerSentence);
|
||||
return generateSentence(wordCount);
|
||||
})
|
||||
});
|
||||
|
||||
if (this.startWithLoremIpsum) {
|
||||
lorem[0][0] = firstSentence
|
||||
}
|
||||
|
||||
let result;
|
||||
if(this.asHTML){
|
||||
result = `<p>${lorem.map(s => s.join(' ')).join('</p>\n\n<p>')}</p>`
|
||||
}else{
|
||||
result = lorem.map(s => s.join(' ')).join('\n\n')
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep {
|
||||
.v-label{
|
||||
min-width: 200px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
77
src/routes/tools/MarkdownEditor.vue
Normal file
77
src/routes/tools/MarkdownEditor.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col cols="12" xl="5" lg="6" md="12">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-textarea v-model="markdown" auto-grow outlined label="Markdown editor"/>
|
||||
<div class="text-center">
|
||||
<v-btn @click="copy(markdown)">copy markdown</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" xl="5" lg="6" md="12">
|
||||
<v-card>
|
||||
<v-card-text >
|
||||
<div class="preview" v-html="html"></div>
|
||||
<div class="text-center">
|
||||
<v-divider />
|
||||
<br>
|
||||
<v-btn @click="copy(html)">copy html</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {debounce} from "../../utils/helpers";
|
||||
import marked from 'marked'
|
||||
import DOMPurify from 'dompurify';
|
||||
import {copyToClipboard} from "../../utils/helpers";
|
||||
|
||||
export default {
|
||||
name: "MarkdownEditor",
|
||||
data: () => ({
|
||||
markdown: '# Hello, World!\nLorem ipsum **dolor** sit *amet*, consectetur adipisicing elit. A aspernatur commodi consequuntur distinctio dolore doloribus eaque earum est ipsum nobis numquam pariatur perspiciatis quasi quis, sed, sunt tempore tenetur, veniam!\n',
|
||||
}),
|
||||
methods: {
|
||||
copy(text){
|
||||
copyToClipboard(text)
|
||||
this.$toast.success('Copied to clipboard.')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
html() {
|
||||
return DOMPurify.sanitize(marked(this.markdown))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep {
|
||||
.preview {
|
||||
padding: 20px;
|
||||
|
||||
h1{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
code{
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
box-shadow: none;
|
||||
color: #9a9a9a;
|
||||
font-weight: normal;
|
||||
}
|
||||
pre {
|
||||
width: 100%;
|
||||
|
||||
code {
|
||||
width: 100% !important;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -5,7 +5,7 @@
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
outlined
|
||||
v-model="quantity"
|
||||
v-model.number="quantity"
|
||||
ref="quantity"
|
||||
type="number"
|
||||
label="Quantity"
|
||||
|
@@ -28,9 +28,25 @@ const isInt = (value) => {
|
||||
return Number.isInteger(value);
|
||||
}
|
||||
|
||||
const debounce = (callback, delay = 300) => {
|
||||
let timer;
|
||||
|
||||
return function(...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => callback(...args), delay);
|
||||
}
|
||||
}
|
||||
|
||||
const randFromArray = (array) => array[Math.floor(Math.random() * array.length)];
|
||||
|
||||
const randIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min) + min)
|
||||
|
||||
export {
|
||||
copyToClipboard,
|
||||
fileIsImage,
|
||||
formatBytes,
|
||||
isInt
|
||||
isInt,
|
||||
debounce,
|
||||
randFromArray,
|
||||
randIntFromInterval
|
||||
}
|
Reference in New Issue
Block a user