adding

README.md

@@ -0,0 +1 @@
+deno run --unstable --allow-write --allow-read --allow-net --allow-env server.ts 

mix-manifest.json

@@ -1,4 +1,5 @@
 {
+    "/public/js/spritemap.js": "/public/js/spritemap.js",
     "/public/js/index.js": "/public/js/index.js",
     "/public/js/critical.js": "/public/js/critical.js",
     "/public/css/index.css": "/public/css/index.css"

package.json

@@ -6,14 +6,17 @@
   "author": "me@herr-hase.wtf",
   "license": "GPL",
   "dependencies": {
+    "@tentakelfabrik/plain-ui": "^0.1.0",
     "turbolinks": "^5.2.0"
   },
   "devDependencies": {
     "@riotjs/webpack-loader": "^5.0.0",
     "cross-env": "^7.0.3",
     "laravel-mix": "^6.0.25",
+    "laravel-mix-purgecss": "^6.0.0",
     "resolve-url-loader": "^4.0.0",
     "sass": "^1.35.1",
-    "sass-loader": "^12.1.0"
+    "sass-loader": "^12.1.0",
+    "svg-spritemap-webpack-plugin": "^3.9.1"
   }
 }

public/js/spritemap.js

@@ -0,0 +1,13 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([["spritemap"],{
+
+/***/ "?4e0c":
+/*!******************************!*\
+  !*** spritemap-dummy-module ***!
+  \******************************/
+/***/ (() => {
+
+
+
+/***/ })
+
+}]);

resources/scss/index.scss

@@ -1,3 +1,6 @@
+@import
+    '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui';
+
 .turbolinks-progress-bar {
     width: 5px;
     height: 100%;

resources/views/bucket/form.html

@@ -3,50 +3,65 @@
 <div class="container">
     <div class="grid">
         <div class="col-12">
-            <h2>
+            <h1 class="highlight m-top-5">
                 Create Bucket
-            </h2>
+            </h1>
         </div>
         <div class="col-12">
             <form action="/bucket/store" method="POST" novalidate>
-                <div class="field">
-                    <label class="field__label">
+                <div class="field-group">
+                    <label class="field-label">
                         title*
-                        <input class="field__text" name="title" type="text" />
+                        <input class="field-text" name="title" type="text" />
                     </label>
                 </div>
-                <div class="field">
-                    <label class="field__label">
+                <div class="field-group">
+                    <label class="field-label">
                         description*
-                        <input class="field__text" name="description" type="text" />
+                        <input class="field-text" name="description" type="text" />
                     </label>
                 </div>
-                <div class="field">
-                    <label class="field__label">
+                <div class="field-group">
+                    <div class="m-top-4 m-bottom-3">
                         type*
-                        <% it.types.forEach(function(type) { %>
-                            <input class="field__choice" name="type" type="radio" value="<%= type.value %>" />
-                            <span class="field__help">
-                                <%= type %>
-                            </span>
-                        <% }) %>
-                    </label>
+                    </div>
+                    <% it.types.forEach(function(type) { %>
+                        <label class="field-label m-right-3">
+                            <input class="field-choice" name="type" type="radio" value="<%= type.value %>" />
+                            <svg class="icon field-choice__unchecked" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-circle"></use>
+                            </svg>
+                            <svg class="icon field-choice__checked" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-circle-check"></use>
+                            </svg>
+                            <%= type %>
+                        </label>
+                    <% }) %>
                 </div>
-                <div class="field">
-                    <label class="field__label">
+                <div class="field-group">
+                    <div class="m-top-4 m-bottom-3">
                         visiblity*
-                        <% it.visiblities.forEach(function(visiblity) { %>
-                            <input class="field__choice" name="visiblity" type="radio" value="<%= visiblity.value %>" />
-                            <span>
-                                <%= visiblity %>
-                            </span>
-                        <% }) %>
-                    </label>
+                    </div>
+                    <% it.visiblities.forEach(function(visiblity) { %>
+                        <label class="field-label m-right-3">
+                            <input class="field-choice" name="visiblity" type="radio" value="<%= visiblity.value %>" />
+                            <svg class="icon field-choice__unchecked" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-circle"></use>
+                            </svg>
+                            <svg class="icon field-choice__checked" aria-hidden="true">
+                                <use xlink:href="/symbol-defs.svg#icon-circle-check"></use>
+                            </svg>
+                            <%= visiblity %>
+                        </label>
+                    <% }) %>
                 </div>
 
                 <div class="">
-                    <button class="button">
+                    <button class="button hover-fill-text-constrast">
                         Create
+                        <svg class="icon p-left-3 size-large" aria-hidden="true">
+                            <use xlink:href="/symbol-defs.svg#icon-circle-add"></use>
+                        </svg>
                     </button>
                 </div>
             </form>

resources/views/index.html

@@ -9,14 +9,14 @@
                     Create
                 </a>
             </h2>
+            <h3>
+                Your Buckets
+            </h3>
+            <app-buckets visiblity="private"></app-buckets>
+            <h3>
+                Other Buckets
+            </h3>
+            <app-buckets visiblity="public,community"></app-buckets>
         </div>
-        <h3>
-            Your Buckets
-        </h3>
-        <app-buckets visiblity="private"></app-buckets>
-        <h3>
-            Other Buckets
-        </h3>
-        <app-buckets visiblity="public,community"></app-buckets>
     </div>
 </div>

resources/views/layout.html

@@ -9,10 +9,15 @@
     </head>
     <body>
         <header class="app-header">
-            <div class="container">
-                <nav class="navbar" role="navigation" aria-label="main navigation">
+            <div class="bar">
+                <div class="bar__start">
+                    <h1 class="h3 m-0 p-top-3 p-bottom-3">
+                        Nano Bucket
+                    </h1>
+                </div>
+                <div class="bar__main">
 
-                </nav>
+                </div>
             </div>
         </header>
 

server.ts

@@ -16,9 +16,11 @@ import bucketApi from './src/http/api/bucket.ts'
 const app = opine()
 const __dirname = dirname(import.meta.url)
 
-//
-app.use(json()); // for parsing application/json
-app.use(urlencoded()); // for parsing application/x-www-form-urlencoded
+// for parsing application/json
+app.use(json());
+
+// for parsing application/x-www-form-urlencoded
+app.use(urlencoded());
 
 // adding static files
 app.use(serveStatic(join(__dirname, 'public')))
@@ -39,5 +41,4 @@ app.use((request, response, next) => {
 
 // let it rain
 app.listen(Number(Deno.env.get('SERVER_PORT')))
-console.log('running on ' + Deno.env.get('SERVER_PORT'))
-
+console.log('running on ' + Deno.env.get('SERVER_PORT'))

src/http/bucket.ts

@@ -51,6 +51,7 @@ router.post('/store', async function(request, response, next)
         body.title = escapeHtml(body.title)
     }
 
+    // escape before validate
     if (body.description) {
         body.description = escapeHtml(body.description)
     }

webpack.mix.js

@@ -1,4 +1,5 @@
 const mix = require('laravel-mix')
+const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
 
 /*
  |--------------------------------------------------------------------------
@@ -11,13 +12,37 @@ const mix = require('laravel-mix')
  |
  */
 
+mix.webpackConfig({
+    plugins: [
+        new SvgSpritemapPlugin('node_modules/@tentakelfabrik/plain-ui/src/icons/mono-icons/svg/*.svg', {
+            output: {
+                filename: 'public/symbol-defs.svg',
+                chunk: {
+                    keep: true
+                },
+                svgo: {
+                    plugins: [{
+                        removeAttrs: {
+                            attrs: 'fill'
+                        }
+                    }]
+                },
+                svg4everybody: false
+            },
+            sprite: {
+                prefix: 'icon-'
+            }
+        })
+    ]
+})
+
 mix.options({
-   terser: {
-     extractComments: false
-   }
+    terser: {
+        extractComments: false
+    }
 })
 
 mix
     .js('resources/js/index.js', 'public/js')
     .js('resources/js/critical.js', 'public/js')
-    .sass('resources/scss/index.scss', 'public/css')
+    .sass('resources/scss/index.scss', 'public/css')