From 12f7c4594f689b680abe93d9953b3613e8260773 Mon Sep 17 00:00:00 2001 From: cupcakearmy Date: Wed, 5 Feb 2020 22:48:14 +0100 Subject: [PATCH] website --- package.json | 12 +++++++----- website/index.html | 29 +++++++++++++++++++++++++++++ website/main.css | 34 ++++++++++++++++++++++++++++++++++ website/main.ts | 18 ++++++++++++++++-- 4 files changed, 86 insertions(+), 7 deletions(-) create mode 100644 website/main.css diff --git a/package.json b/package.json index ddaeb0e..5ea0e60 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,13 @@ { "name": "canihazusername", - "version": "1.0.3", + "version": "2.0.0", "description": "username generator. typed, simple and customizable", "main": "./lib/index.js", "types": "./lib/index.d.ts", "scripts": { "generate": "git -C ./generate/wordlist pull && node ./generate/wordlist.js", - "dev": "webpack -d -w", - "build": "webpack -p", - "test": "mocha", + "docs": "rm -r ./docs && parcel build --no-source-maps -d ./docs ./website/index.html", + "build": "tsc", "prepublishOnly": "npm run build && npm run test" }, "repository": { @@ -27,7 +26,10 @@ "url": "https://github.com/CupCakeArmy/canihazusername/issues" }, "homepage": "https://github.com/CupCakeArmy/canihazusername#readme", - "dependencies": {}, + "dependencies": { + "bulma": "^0.8.0", + "tachyons": "^4.11.1" + }, "devDependencies": { "parcel-bundler": "^1.12.4", "ts-node-dev": "^1.0.0-pre.44", diff --git a/website/index.html b/website/index.html index 31a2da2..a0e3af5 100644 --- a/website/index.html +++ b/website/index.html @@ -1,7 +1,36 @@ + + + + + +
+
+

canihazusername

+ +

+ +

+ +

+
+ + + +

+ 
yarn add canihazusername
+ 
import { generate } from 'canihazusername'
+generate('{character}_{english}')
+
+
+
Available lists
+

+
+
+
diff --git a/website/main.css b/website/main.css new file mode 100644 index 0000000..be385f7 --- /dev/null +++ b/website/main.css @@ -0,0 +1,34 @@ +* { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +body { + width: 100vw; + height: 100vh; +} + +#main { + text-align: center; + padding: 1em; + display: flex; + /* justify-content: center; + align-items: center; */ + height: 100%; + width: 100%; + overflow: auto; +} + +#main > div { + max-width: 35em; + margin: auto; +} + +pre { + text-align: left; + padding: 1em .5em; + border-radius: 1.5em; +} + +h2 span{ + color: #3273dc +} \ No newline at end of file diff --git a/website/main.ts b/website/main.ts index aab391f..ed7be9c 100644 --- a/website/main.ts +++ b/website/main.ts @@ -1,3 +1,17 @@ -import cihu from '../' +import 'bulma/css/bulma' +import { showAvailableLists, generate } from '../' -console.log(cihu()) \ No newline at end of file +const input = window.document.getElementById('format') as HTMLInputElement +const output = window.document.getElementById('username') as HTMLInputElement +const list = window.document.getElementById('lists') +const button = window.document.getElementById('button') + +const gen = () => { + output.value = generate(input.value) +} + +button.addEventListener('click', gen) +button.addEventListener('touchstart', gen) + +gen() +list.innerHTML = showAvailableLists().join(', ')