adding

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

.env.example

@@ -0,0 +1,47 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+LOG_LEVEL=debug
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=laravel
+DB_USERNAME=root
+DB_PASSWORD=
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+MAIL_FROM_ADDRESS=null
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_APP_CLUSTER=mt1
+
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

.env0

@@ -0,0 +1,14 @@
+APP_NAME=Urban-Filehub
+APP_ENV=development
+APP_VERSION=1.0.0
+APP_KEY=base64:W2hi43X7fQQOdlMZuD/g2zvcdOde79IJ68pEl4CTxGY=
+APP_DEBUG=true
+APP_URL=
+
+DB_CONNECTION=mysql
+DB_HOST=127.0.0.1
+DB_PORT=3306
+DB_DATABASE=db876529637523745
+DB_USERNAME=u595949632775429
+DB_PASSWORD=test
+DB_PREFIX=

.gitattributes

@@ -0,0 +1,5 @@
+* text=auto
+*.css linguist-vendored
+*.scss linguist-vendored
+*.js linguist-vendored
+CHANGELOG.md export-ignore

.gitignore

@@ -1,8 +1,12 @@
-# ---> Composer
-composer.phar
-/vendor/
-
-# Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
-# You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file
-# composer.lock
-
+/node_modules
+/public/hot
+/public/storage
+/storage/*.key
+/vendor
+.env
+.env.backup
+.phpunit.result.cache
+Homestead.json
+Homestead.yaml
+npm-debug.log
+yarn-error.log

.styleci.yml

@@ -0,0 +1,13 @@
+php:
+  preset: laravel
+  disabled:
+    - no_unused_imports
+  finder:
+    not-name:
+      - index.php
+      - server.php
+js:
+  finder:
+    not-name:
+      - webpack.mix.js
+css: true

LICENSE

@@ -1,19 +0,0 @@
-MIT License Copyright (c) <year> <copyright holders>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is furnished
-to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice (including the next
-paragraph) shall be included in all copies or substantial portions of the
-Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
-OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
-OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,2 +1,61 @@
-# urban-filehub
+<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400"></a></p>
 
+<p align="center">
+<a href="https://travis-ci.org/laravel/framework"><img src="https://travis-ci.org/laravel/framework.svg" alt="Build Status"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
+<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
+</p>
+
+## About Laravel
+
+Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
+
+- [Simple, fast routing engine](https://laravel.com/docs/routing).
+- [Powerful dependency injection container](https://laravel.com/docs/container).
+- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
+- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
+- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
+- [Robust background job processing](https://laravel.com/docs/queues).
+- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
+
+Laravel is accessible, powerful, and provides tools required for large, robust applications.
+
+## Learning Laravel
+
+Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
+
+If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains over 1500 video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
+
+## Laravel Sponsors
+
+We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the Laravel [Patreon page](https://patreon.com/taylorotwell).
+
+### Premium Partners
+
+- **[Vehikl](https://vehikl.com/)**
+- **[Tighten Co.](https://tighten.co)**
+- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
+- **[64 Robots](https://64robots.com)**
+- **[Cubet Techno Labs](https://cubettech.com)**
+- **[Cyber-Duck](https://cyber-duck.co.uk)**
+- **[Many](https://www.many.co.uk)**
+- **[Webdock, Fast VPS Hosting](https://www.webdock.io/en)**
+- **[DevSquad](https://devsquad.com)**
+- **[OP.GG](https://op.gg)**
+
+## Contributing
+
+Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
+
+## Code of Conduct
+
+In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
+
+## License
+
+The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

app/Http/Controllers/BucketController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Foundation\Validation\ValidatesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+class BucketController extends BaseController
+{
+    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+
+    /**
+     *
+     *  @return [type] [description]
+     *
+     */
+    public function create()
+    {
+        return view('bucket.create');
+    }
+}

app/Http/Controllers/HomeController.php

@@ -7,7 +7,17 @@ use Illuminate\Foundation\Bus\DispatchesJobs;
 use Illuminate\Foundation\Validation\ValidatesRequests;
 use Illuminate\Routing\Controller as BaseController;
 
-class Controller extends BaseController
+class HomeController extends BaseController
 {
     use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
+
+    /**
+     *
+     *  @return [type] [description]
+     *
+     */
+    public function show()
+    {
+        return view('home');
+    }
 }

composer.json

@@ -11,7 +11,6 @@
         "php": "^7.3|^8.0",
         "fideloper/proxy": "^4.4",
         "fruitcake/laravel-cors": "^2.0",
-        "goldspecdigital/laravel-eloquent-uuid": "^8.0",
         "guzzlehttp/guzzle": "^7.0.1",
         "laravel/framework": "^8.12",
         "laravel/tinker": "^2.5"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "331f413509a3783c2d3abc0382dd180b",
+    "content-hash": "fac753ae2702317b354e7eb283f28cbc",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -555,63 +555,6 @@
             ],
             "time": "2020-10-22T13:57:20+00:00"
         },
-        {
-            "name": "goldspecdigital/laravel-eloquent-uuid",
-            "version": "v8.0.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/goldspecdigital/laravel-eloquent-uuid.git",
-                "reference": "c203b3104e5c371b1ed94b0dbaf12de1d1ca7045"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/goldspecdigital/laravel-eloquent-uuid/zipball/c203b3104e5c371b1ed94b0dbaf12de1d1ca7045",
-                "reference": "c203b3104e5c371b1ed94b0dbaf12de1d1ca7045",
-                "shasum": ""
-            },
-            "require": {
-                "laravel/framework": "^8.0",
-                "php": "^7.3"
-            },
-            "require-dev": {
-                "ext-pdo": "*",
-                "friendsofphp/php-cs-fixer": "^2.15",
-                "orchestra/testbench": "^6.0",
-                "phpunit/phpunit": "^8.4"
-            },
-            "type": "library",
-            "extra": {
-                "laravel": {
-                    "providers": [
-                        "GoldSpecDigital\\LaravelEloquentUUID\\UuidServiceProvider"
-                    ]
-                }
-            },
-            "autoload": {
-                "psr-4": {
-                    "GoldSpecDigital\\LaravelEloquentUUID\\": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Matthew Inamdar",
-                    "email": "matt@goldspecdigital.com"
-                }
-            ],
-            "description": "A simple drop-in solution for providing UUID support for the IDs of your Eloquent models.",
-            "homepage": "https://github.com/goldspecdigital/laravel-eloquent-uuid",
-            "keywords": [
-                "eloquent",
-                "laravel",
-                "php",
-                "uuid"
-            ],
-            "time": "2020-09-09T20:26:47+00:00"
-        },
         {
             "name": "graham-campbell/result-type",
             "version": "v1.0.1",

database/migrations/2019_08_19_000000_create_failed_jobs_table.php

@@ -15,7 +15,6 @@ class CreateFailedJobsTable extends Migration
     {
         Schema::create('failed_jobs', function (Blueprint $table)
         {
-            $table->foreign('user_id')->references('id')->on('users');
             $table->string('uuid')->unique();
             $table->text('connection');
             $table->text('queue');

database/migrations/2020_11_20_113852_create_hubs_table.php

@@ -17,8 +17,8 @@ class CreateHubsTable extends Migration
             $table->uuid('id')->primary();
 
             $table->string('name');
+            $table->text('description')->nullable();
             $table->string('path')->nullable();
-            $table->boolean('is_public')->default(false);
 
             $table->timestamps();
         });

database/migrations/2020_11_20_120236_create_roles_table.php

@@ -21,7 +21,7 @@ class CreateRolesTable extends Migration
             $table->string('name');
 
             // Foreign key for user
-            $table->uuid('hub_id')->nullable();
+            $table->uuid('hub_id');
 
             $table->boolean('can_hub_delete')->default(false);
             $table->boolean('can_hub_edit')->default(false);

database/migrations/2020_11_22_000000_create_links_table.php

@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateLinksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('links', function (Blueprint $table) {
+            $table->uuid('id')->primary();
+
+            $table->string('hash');
+
+            $table->uuid('user_id');
+            $table->uuid('hub_id');
+
+            $table->foreign('user_id')->references('id')->on('users');
+            $table->foreign('hub_id')->references('id')->on('hubs');
+
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('links');
+    }
+}

database/migrations/2020_11_28_120236_create_options_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateOptionsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('options', function (Blueprint $table)
+        {
+            // Primary key.
+            $table->uuid('id')->primary();
+
+            $table->string('key');
+            $table->string('value');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('options');
+    }
+}

database/migrations/2020_11_20_114514_create_hub_users_table.php → database/migrations/2020_12_20_114514_create_hub_users_table.php

@@ -25,7 +25,7 @@ class CreateHubUsersTable extends Migration
             $table->uuid('user_id');
 
             // Foreign key for user
-            $table->uuid('roles_id');
+            $table->uuid('role_id');
 
             $table->foreign('hub_id')->references('id')->on('hubs');
             $table->foreign('user_id')->references('id')->on('users');

package.json

@@ -10,10 +10,22 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "axios": "^0.19",
-        "cross-env": "^7.0",
+        "@riotjs/compiler": "^5.1.3",
+        "@riotjs/webpack-loader": "^5.0.0",
+        "axios": "^0.21.1",
+        "cross-env": "^7.0.3",
         "laravel-mix": "^5.0.1",
         "lodash": "^4.17.19",
-        "resolve-url-loader": "^3.1.0"
+        "resolve-url-loader": "^3.1.0",
+        "sass": "^1.30.0",
+        "sass-loader": "^8.0.2",
+        "svg-spritemap-webpack-plugin": "^3.8.3",
+        "vue-template-compiler": "^2.6.12"
+    },
+    "dependencies": {
+        "@tentakelfabrik/tiny-accordion": "^1.0.0",
+        "@tentakelfabrik/tiny-validator": "^1.0.0",
+        "bulma": "^0.9.1",
+        "riot": "^5.1.1"
     }
 }

public/mix-manifest.json

@@ -0,0 +1,8 @@
+{
+    "/js/bootstrap.js": "/js/bootstrap.js",
+    "/css/bootstrap.css": "/css/bootstrap.css",
+    "/js/bucket.js": "/js/bucket.js",
+    "/js/home.js": "/js/home.js",
+    "/spritemap.js": "/spritemap.js",
+    "/symbol-defs.svg": "/symbol-defs.svg"
+}

public/spritemap.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{null:function(n,w){}}]);

public/symbol-defs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-add-circle" viewBox="0 0 30 30"><title>add-circle</title><path d="M21.27 16.23v-2.461h-5.039V8.73H13.77v5.039H8.731v2.461h5.039v5.039h2.461V16.23h5.039zM15 2.52q5.156 0 8.818 3.662T27.48 15t-3.662 8.818T15 27.48t-8.818-3.662T2.52 15t3.662-8.818T15 2.52z"/></symbol><symbol id="icon-email" viewBox="0 0 30 30"><title>email</title><path d="M25.02 10.02V7.5L15 13.77 4.98 7.5v2.52L15 16.231zm0-5.04q.996 0 1.729.762t.732 1.758v15q0 .996-.732 1.758t-1.729.762H4.981q-.996 0-1.729-.762T2.52 22.5v-15q0-.996.732-1.758t1.729-.762H25.02z"/></symbol><symbol id="icon-secret" viewBox="0 0 30 30"><title>secret</title><path d="M8.73 17.52q.996 0 1.758-.762T11.25 15t-.762-1.758-1.758-.762-1.729.762T6.269 15t.732 1.758 1.729.762zm7.09-5.04h12.949v5.039h-2.52v4.98h-4.98v-4.98H15.82q-.762 2.051-2.842 3.516T8.73 22.5q-3.105 0-5.303-2.197T1.23 15t2.197-5.303T8.73 7.5q2.168 0 4.248 1.465t2.842 3.516z"/></symbol><symbol id="icon-tag" viewBox="0 0 30 30"><title>tag</title><path d="M6.855 8.73q.762 0 1.318-.557t.557-1.318-.557-1.318-1.318-.557-1.318.557-.557 1.318.557 1.318 1.318.557zm19.922 5.743q.703.703.703 1.758t-.703 1.758l-8.789 8.789q-.703.703-1.758.703t-1.758-.703l-11.25-11.25q-.703-.703-.703-1.758V4.981q0-.996.732-1.729T4.98 2.52h8.789q1.055 0 1.758.703z"/></symbol></svg>

resources/icons/add-circle.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+<title>add-circle</title>
+<path d="M21.27 16.23v-2.461h-5.039v-5.039h-2.461v5.039h-5.039v2.461h5.039v5.039h2.461v-5.039h5.039zM15 2.52q5.156 0 8.818 3.662t3.662 8.818-3.662 8.818-8.818 3.662-8.818-3.662-3.662-8.818 3.662-8.818 8.818-3.662z"></path>
+</svg>

resources/icons/email.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+<title>email</title>
+<path d="M25.020 10.020v-2.52l-10.020 6.27-10.020-6.27v2.52l10.020 6.211zM25.020 4.98q0.996 0 1.729 0.762t0.732 1.758v15q0 0.996-0.732 1.758t-1.729 0.762h-20.039q-0.996 0-1.729-0.762t-0.732-1.758v-15q0-0.996 0.732-1.758t1.729-0.762h20.039z"></path>
+</svg>

resources/icons/secret.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+<title>secret</title>
+<path d="M8.73 17.52q0.996 0 1.758-0.762t0.762-1.758-0.762-1.758-1.758-0.762-1.729 0.762-0.732 1.758 0.732 1.758 1.729 0.762zM15.82 12.48h12.949v5.039h-2.52v4.98h-4.98v-4.98h-5.449q-0.762 2.051-2.842 3.516t-4.248 1.465q-3.105 0-5.303-2.197t-2.197-5.303 2.197-5.303 5.303-2.197q2.168 0 4.248 1.465t2.842 3.516z"></path>
+</svg>

resources/icons/tag.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+<title>tag</title>
+<path d="M6.855 8.73q0.762 0 1.318-0.557t0.557-1.318-0.557-1.318-1.318-0.557-1.318 0.557-0.557 1.318 0.557 1.318 1.318 0.557zM26.777 14.473q0.703 0.703 0.703 1.758t-0.703 1.758l-8.789 8.789q-0.703 0.703-1.758 0.703t-1.758-0.703l-11.25-11.25q-0.703-0.703-0.703-1.758v-8.789q0-0.996 0.732-1.729t1.729-0.732h8.789q1.055 0 1.758 0.703z"></path>
+</svg>

resources/js/app.js

@@ -1 +0,0 @@
-require('./bootstrap');

resources/js/bootstrap.js

@@ -1,28 +1,2 @@
-window._ = require('lodash');
-
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
-window.axios = require('axios');
-
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-/**
- * Echo exposes an expressive API for subscribing to channels and listening
- * for events that are broadcast by Laravel. Echo and event broadcasting
- * allows your team to easily build robust real-time web applications.
- */
-
-// import Echo from 'laravel-echo';
-
-// window.Pusher = require('pusher-js');
-
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
-// });
+window.axios = require('axios')
+window.riot = require('riot')

resources/js/components/accordion.riot

@@ -0,0 +1,101 @@
+<urban-accordion>
+    <div class="accordion">
+        <div class="tabs mb-3">
+            <ul>
+                <li class={ getCurrentClass(index) } each={ (item, index) in state.items } onclick={ () => handleClick(event, index) }>
+                    <a>{ item }</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <script>
+
+        /**
+         *
+         *
+         *
+         */
+
+        export default {
+
+            state: {
+                items: [],
+                index: 0
+            },
+
+            /**
+             *  getting innerHTML and remove it
+             *
+             */
+            onBeforeMount()
+            {
+                this.content = this.root.innerHTML
+                this.root.innerHTML = ''
+            },
+
+            /**
+             *  create wrapper for
+             *
+             *  @param  {object} props
+             *  @param  {object} state
+             *
+             */
+            onMounted(props, state) {
+                const header = this.$('.tabs')
+
+                state.wrapper = document.createElement('div')
+
+                state.wrapper.innerHTML = this.content
+                header.after(state.wrapper)
+
+                // run through all items and add a css-class and current class to first element
+                for (let i = 0; i < state.wrapper.children.length; i++) {
+                    state.items.push(state.wrapper.children[i].title)
+                    state.wrapper.children[i].classList.add('accordion__item')
+
+                    if (i === 0) {
+                        state.wrapper.children[i].classList.add('accordion__item--active')
+                    }
+                }
+
+                this.update()
+            },
+
+            /**
+             *  remove all active classes and add active-classes to clicked
+             *
+             *  @param  {object} event
+             *  @param  {object} index
+             *
+             */
+            handleClick(event, index) {
+                for (let i = 0; i < this.state.wrapper.children.length; i++) {
+                    this.state.wrapper.children[i].classList.remove('accordion__item--active')
+
+                    if (i === index) {
+                        this.state.wrapper.children[i].classList.add('accordion__item--active')
+                        this.state.index = i
+                    }
+                }
+
+                this.update()
+            },
+
+            /**
+             *  getting class for active accordion in header
+             *
+             */
+            getCurrentClass(index)
+            {
+                let classes = []
+
+                if (index === this.state.index) {
+                    classes.push('is-active')
+                }
+
+                return classes.join(' ')
+            }
+        }
+
+    </script>
+</urban-accordion>

resources/js/components/bucket/form.riot

@@ -0,0 +1,91 @@
+<urban-bucket-form>
+    <div class="form">
+        <form method="POST">
+
+            <input type="hidden" name="_token" value={ state.csrfToken } if={ state.csrfToken } />
+
+            <div class="field is-horizontal">
+                <div class="field-label is-normal">
+                    <label class="label" for="title">
+                        title
+                    </label>
+                </div>
+                <div class="field-body">
+                    <div class="field">
+                        <p class="control">
+                            <input id="title" class={ getClasses('title', 'input') } type="text" name="title" value={ props.title } onkeyup={ (event) => { state.validator.handle(event, 'title') }} />
+                            <field-error errors={ state.validator.errors('title') } ></field-error>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="field is-horizontal">
+                <div class="field-label is-normal">
+                    <label class="label" for="public">
+                        public
+                    </label>
+                </div>
+                <div class="field-body">
+                    <div class="field">
+                        <input id="public" type="checkbox">
+                    </div>
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    <button class="button is-primary" type="submit" disabled={ state.validator.errors().length > 0 }>
+                        Create
+                    </button>
+                </div>
+            </div>
+
+        </form>
+    </div>
+    <script>
+
+    import Validator from '@tentakelfabrik/tiny-validator/src/validator'
+    import FieldError from '../field-error.riot'
+
+    riot.register('field-error', FieldError)
+
+    /**
+     *
+     *
+     *
+     */
+
+    export default {
+        onBeforeMount(props, state) {
+            state.validator = new Validator({
+                title: {
+                    presence: true
+                }
+            }, this)
+
+            //
+            const meta = document.querySelector("meta[name='csrf-token']")
+
+            if (meta) {
+                state.csrfToken = meta.getAttribute("content")
+            }
+        },
+
+        getClasses(key, defaultClass) {
+            const classes = [
+                defaultClass
+            ]
+
+            console.log(this.state.validator)
+
+            if (this.state.validator.errors(key).length > 0) {
+                classes.push('is-danger')
+            }
+
+            return classes.join(' ')
+        }
+    }
+
+    </script>
+</urban-bucket-form>

resources/js/components/buckets.riot

@@ -0,0 +1,46 @@
+<buckets>
+    <div class="buckets">
+        <div class="tile is-ancestor">
+            <div class="tile is-3 is-parent" each={ bucket in props.buckets }>
+                <div class="tile is-child">
+                    <a class="buckets__item" href="/bucket/{ bucket.uuid }">
+                        <div class="content">
+                            <p class="title is-4">
+                                { bucket.name }
+                            </p>
+                            <div class="tags are-medium" if={ bucket.tags.length > 0 }>
+                                <span class="tag is-white" each={ tag in bucket.tags }>{ tag }</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="buckets__more">
+            <button type="button" class="button" onclick={ handleClick }>
+                More
+                <span class="icon is-small is-left">
+                    <svg aria-hidden="true">
+                        <use xlink:href="/symbol-defs.svg#icon-add-circle"></use>
+                    </svg>
+                </span>
+            </button>
+        </div>
+    </div>
+    <script>
+
+        /**
+         *
+         *
+         *  @author Björn Hase
+         *
+         */
+
+        export default {
+            handleClick() {
+
+            }
+        }
+
+    </script>
+</buckets>

resources/js/components/field-error.riot

@@ -0,0 +1,42 @@
+<field-error>
+    <div class="field-error" if={ state.errors.length > 0 }>
+        <ul>
+            <li class="help is-danger" each={ error in state.errors }>{ error }</li>
+        </ul>
+    </div>
+    <script>
+
+        /**
+         *  Shows errors of Validation
+         *
+         *  <field-error key="name" errors={ errors }></field-error>
+         *
+         */
+
+        export default {
+
+            state: {
+                errors: [
+
+                ]
+            },
+
+            /**
+             *  check if errors from props has an error, if not reset errors in state
+             *
+             *  @param  {object} props
+             *  @param  {object} state
+             *
+             */
+            onBeforeUpdate(props, state) {
+                if (props.errors && props.errors.length > 0) {
+                    state.errors = props.errors
+                } else {
+                    state.errors = []
+                }
+            }
+
+        }
+
+    </script>
+</field-error>

resources/js/components/login-email.riot

@@ -0,0 +1,34 @@
+<urban-login-email>
+    <div class="login">
+        <form>
+            <div class="field is-horizontal">
+                <div class="field-body">
+                    <div class="field">
+                        <div class="control has-icons-left">
+                            <input class="input" type="text" placeholder="E-Mail">
+                            <span class="icon is-small is-left">
+                                <svg aria-hidden="true">
+                                    <use xlink:href="/symbol-defs.svg#icon-email"></use>
+                                </svg>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <div class="control">
+                            <button class="button is-primary" type="submit">
+                                Send me a Link
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <script>
+
+        export default {
+
+        }
+
+    </script>
+</urban-login-email>

resources/js/components/login-password.riot

@@ -0,0 +1,44 @@
+<urban-login-password>
+    <div class="login">
+        <form>
+            <div class="field is-horizontal">
+                <div class="field-body">
+                    <div class="field">
+                        <div class="control has-icons-left">
+                            <input class="input" type="text" placeholder="E-Mail">
+                            <span class="icon is-small is-left">
+                                <svg aria-hidden="true">
+                                    <use xlink:href="symbol-defs.svg#icon-email"></use>
+                                </svg>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <div class="control has-icons-left">
+                            <input class="input" type="text" placeholder="Password">
+                            <span class="icon is-small is-left">
+                                <svg aria-hidden="true">
+                                    <use xlink:href="symbol-defs.svg#icon-secret"></use>
+                                </svg>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="field">
+                        <div class="control">
+                            <button class="button is-primary" type="submit">
+                                Login
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <script>
+
+        export default {
+
+        }
+
+    </script>
+</urban-login-password>

resources/js/views/bucket.js

@@ -0,0 +1,10 @@
+import Form from './../components/bucket/form.riot'
+
+/**
+ *  Bucket
+ *
+ *
+ */
+
+// register components
+riot.register('urban-bucket-form', Form)

resources/js/views/home.js

@@ -0,0 +1,24 @@
+import Buckets from './../components/buckets.riot'
+import LoginEmail from './../components/login-email.riot'
+import LoginPassword from './../components/login-password.riot'
+import Accordion from './../components/accordion.riot'
+
+/**
+ *  Home
+ *
+ *
+ */
+
+// register components
+riot.register('buckets', Buckets)
+riot.register('urban-login-email', LoginEmail)
+riot.register('urban-login-password', LoginPassword)
+
+riot.register('urban-accordion', Accordion)
+
+// mount
+riot.mount('urban-accordion')
+
+riot.mount('urban-login-email')
+riot.mount('urban-login-password')
+riot.mount('urban-form-validator')

resources/scss/bootstrap.scss

@@ -0,0 +1,59 @@
+@charset "utf-8";
+
+@import "../../node_modules/bulma/sass/utilities/_all.sass";
+@import "../../node_modules/bulma/sass/base/_all.sass";
+@import "../../node_modules/bulma/sass/helpers/spacing.sass";
+@import "../../node_modules/bulma/sass/form/_all.sass";
+
+@import "../../node_modules/bulma/sass/elements/button.sass";
+@import "../../node_modules/bulma/sass/elements/container.sass";
+@import "../../node_modules/bulma/sass/elements/title.sass";
+@import "../../node_modules/bulma/sass/elements/notification.sass";
+@import "../../node_modules/bulma/sass/elements/tag.sass";
+
+@import "../../node_modules/bulma/sass/layout/hero.sass";
+
+@import "../../node_modules/bulma/sass/grid/_all.sass";
+
+@import "../../node_modules/bulma/sass/components/card.sass";
+@import "../../node_modules/bulma/sass/components/tabs.sass";
+
+@import "components/accordion";
+@import "components/buckets";
+
+.icon {
+    svg {
+        display: inline-block;
+        font-size: inherit;
+        height: 1.5em;
+        width: 1.5em;
+        overflow: visible;
+
+        max-height: 100%;
+        max-width: 100%;
+
+        margin: 0.5em;
+
+        fill: #dbdbdb;
+    }
+}
+
+.button {
+    .icon {
+        margin-left: 0.25em !important;
+        margin-right: 0.25em !important;
+
+        svg {
+            margin: 0;
+        }
+    }
+}
+
+input {
+    &:focus + .icon svg {
+        fill: #363636;
+    }
+}
+
+@include component__accordion();
+@include component__buckets();

resources/scss/components/_accordion.scss

@@ -0,0 +1,18 @@
+/**
+ *
+ *
+ *
+ */
+
+@mixin component__accordion()
+{
+    .accordion {
+        &__item {
+            display: none;
+
+            &--active {
+                display: block;
+            }
+        }
+    }
+}

resources/scss/components/_buckets.scss

@@ -0,0 +1,27 @@
+/**
+ *
+ *
+ *
+ */
+
+@mixin component__buckets()
+{
+    .buckets {
+        &__item {
+            display: block;
+
+            border-radius: 4px;
+            position: relative;
+            padding: 1.25rem 2.5rem 1.25rem 1.5rem;
+
+            background-color: $primary;
+            border: 1px solid darken($primary, 5%);
+
+            .content {
+                .title {
+                    color: $white;
+                }
+            }
+        }
+    }
+}

resources/views/bucket/create.blade.php

@@ -0,0 +1,21 @@
+@extends('layout')
+
+@section('head')
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+@endsection
+
+@section('main')
+<div class="container is-fluid">
+    <h1 class="title is-3 is-spaced">
+        Create Bucket
+    </h1>
+    <urban-bucket-form></urban-bucket-form>
+</div>
+
+@push('scripts')
+    <script type="text/javascript" src="/js/bucket.js"></script>
+    <script type="text/javascript" defer>
+        riot.mount('urban-bucket-form', {!! json_encode(request()->all()) !!});
+    </script>
+@endpush
+@endsection

resources/views/home.blade.php

@@ -0,0 +1,43 @@
+@extends('layout')
+
+@section('main')
+@php
+    $buckets = [ 'buckets' => [[
+        'uuid' => 'djdj333j',
+        'name' => 'llkjj lk',
+        'tags' => [
+            'test3', 'test2', 'test1'
+        ]
+    ],[
+        'uuid' => 'djdj333j',
+        'name' => 'flwhfjwh lkehjkh ',
+        'tags' => [
+            'test3', 'test2', 'test1'
+        ]
+    ]]];
+@endphp
+
+<div class="container is-fluid">
+    <h2 class="title is-4 is-spaced mt-6 mb-1">
+        Buckets
+        <a class="button is-small ml-3" href="/bucket/create">
+            Create
+            <span class="icon">
+                <svg aria-hidden="true">
+                    <use xlink:href="/symbol-defs.svg#icon-add-circle"></use>
+                </svg>
+            </span>
+        </a>
+    </h2>
+    <hr class="mt-2" />
+    <buckets></buckets>
+</div>
+
+@push('scripts')
+    <script type="text/javascript" src="/js/home.js"></script>
+    <script type="text/javascript" defer>
+        riot.mount('buckets', {!! json_encode($buckets) !!});
+    </script>
+@endpush
+
+@endsection

resources/views/layout.blade.php

@@ -3,9 +3,46 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Laravel</title>
+        <title>Urban Filehub</title>
+
+        @yield('head')
+
+        <link rel="stylesheet" href="/css/bootstrap.css" />
     </head>
     <body>
-        
+        <div>
+            @if (Route::has('login'))
+                <div>
+                    @auth
+                        <a href="{{ url('/home') }}" class="text-sm text-gray-700 underline">Home</a>
+                    @else
+                        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>
+                        @if (Route::has('register'))
+                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
+                        @endif
+                    @endauth
+                </div>
+            @endif
+        </div>
+
+        <section class="section">
+            <div class="container is-fluid mt-3 mb-4">
+                <urban-accordion>
+                    <div title="Send me a Link">
+                        <urban-login-email></urban-login-email>
+                    </div>
+                    <div title="Login with Password">
+                        <urban-login-password></urban-login-password>
+                    </div>
+                </urban-accordion>
+            </div>
+        </section>
+
+        <main>
+            @yield('main')
+        </main>
+
+        <script type="text/javascript" src="/js/bootstrap.js"></script>
+        @stack('scripts')
     </body>
 </html>

resources/views/welcome.blade.php

@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <title>Laravel</title>
-
-        <!-- Fonts -->
-        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
-
-        <!-- Styles -->
-        <style>
-            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
-        </style>
-
-        <style>
-            body {
-                font-family: 'Nunito';
-            }
-        </style>
-    </head>
-    <body class="antialiased">
-        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
-            @if (Route::has('login'))
-                <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
-                    @auth
-                        <a href="{{ url('/home') }}" class="text-sm text-gray-700 underline">Home</a>
-                    @else
-                        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>
-
-                        @if (Route::has('register'))
-                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
-                        @endif
-                    @endauth
-                </div>
-            @endif
-
-            <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
-                <div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
-                    <svg viewBox="0 0 651 192" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-16 w-auto text-gray-700 sm:h-20">
-                        <g clip-path="url(#clip0)" fill="#EF3B2D">
-                            <path d="M248.032 44.676h-16.466v100.23h47.394v-14.748h-30.928V44.676zM337.091 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.431 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162-.001 2.863-.479 5.584-1.432 8.161zM463.954 87.202c-2.101-3.341-5.083-5.965-8.949-7.875-3.865-1.909-7.756-2.864-11.669-2.864-5.062 0-9.69.931-13.89 2.792-4.201 1.861-7.804 4.417-10.811 7.661-3.007 3.246-5.347 6.993-7.016 11.239-1.672 4.249-2.506 8.713-2.506 13.389 0 4.774.834 9.26 2.506 13.459 1.669 4.202 4.009 7.925 7.016 11.169 3.007 3.246 6.609 5.799 10.811 7.66 4.199 1.861 8.828 2.792 13.89 2.792 3.913 0 7.804-.955 11.669-2.863 3.866-1.908 6.849-4.533 8.949-7.875v9.021h15.607V78.182h-15.607v9.02zm-1.432 32.503c-.955 2.578-2.291 4.821-4.009 6.73-1.719 1.91-3.795 3.437-6.229 4.582-2.435 1.146-5.133 1.718-8.091 1.718-2.96 0-5.633-.572-8.019-1.718-2.387-1.146-4.438-2.672-6.156-4.582-1.719-1.909-3.032-4.152-3.938-6.73-.909-2.577-1.36-5.298-1.36-8.161 0-2.864.451-5.585 1.36-8.162.905-2.577 2.219-4.819 3.938-6.729 1.718-1.908 3.77-3.437 6.156-4.582 2.386-1.146 5.059-1.718 8.019-1.718 2.958 0 5.656.572 8.091 1.718 2.434 1.146 4.51 2.674 6.229 4.582 1.718 1.91 3.054 4.152 4.009 6.729.953 2.577 1.432 5.298 1.432 8.162 0 2.863-.479 5.584-1.432 8.161zM650.772 44.676h-15.606v100.23h15.606V44.676zM365.013 144.906h15.607V93.538h26.776V78.182h-42.383v66.724zM542.133 78.182l-19.616 51.096-19.616-51.096h-15.808l25.617 66.724h19.614l25.617-66.724h-15.808zM591.98 76.466c-19.112 0-34.239 15.706-34.239 35.079 0 21.416 14.641 35.079 36.239 35.079 12.088 0 19.806-4.622 29.234-14.688l-10.544-8.158c-.006.008-7.958 10.449-19.832 10.449-13.802 0-19.612-11.127-19.612-16.884h51.777c2.72-22.043-11.772-40.877-33.023-40.877zm-18.713 29.28c.12-1.284 1.917-16.884 18.589-16.884 16.671 0 18.697 15.598 18.813 16.884h-37.402zM184.068 43.892c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002-35.648-20.524a2.971 2.971 0 00-2.964 0l-35.647 20.522-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v38.979l-29.706 17.103V24.493a3 3 0 00-.103-.776c-.024-.088-.073-.165-.104-.25-.058-.157-.108-.316-.191-.46-.056-.097-.137-.176-.203-.265-.087-.117-.161-.242-.265-.345-.085-.086-.194-.148-.29-.223-.109-.085-.206-.182-.327-.252l-.002-.001-.002-.002L40.098 1.396a2.971 2.971 0 00-2.964 0L1.487 21.919l-.002.002-.002.001c-.121.07-.219.167-.327.252-.096.075-.205.138-.29.223-.103.103-.178.228-.265.345-.066.089-.147.169-.203.265-.083.144-.133.304-.191.46-.031.085-.08.162-.104.25-.067.249-.103.51-.103.776v122.09c0 1.063.568 2.044 1.489 2.575l71.293 41.045c.156.089.324.143.49.202.078.028.15.074.23.095a2.98 2.98 0 001.524 0c.069-.018.132-.059.2-.083.176-.061.354-.119.519-.214l71.293-41.045a2.971 2.971 0 001.489-2.575v-38.979l34.158-19.666a2.971 2.971 0 001.489-2.575V44.666a3.075 3.075 0 00-.106-.774zM74.255 143.167l-29.648-16.779 31.136-17.926.001-.001 34.164-19.669 29.674 17.084-21.772 12.428-43.555 24.863zm68.329-76.259v33.841l-12.475-7.182-17.231-9.92V49.806l12.475 7.182 17.231 9.92zm2.97-39.335l29.693 17.095-29.693 17.095-29.693-17.095 29.693-17.095zM54.06 114.089l-12.475 7.182V46.733l17.231-9.92 12.475-7.182v74.537l-17.231 9.921zM38.614 7.398l29.693 17.095-29.693 17.095L8.921 24.493 38.614 7.398zM5.938 29.632l12.475 7.182 17.231 9.92v79.676l.001.005-.001.006c0 .114.032.221.045.333.017.146.021.294.059.434l.002.007c.032.117.094.222.14.334.051.124.088.255.156.371a.036.036 0 00.004.009c.061.105.149.191.222.288.081.105.149.22.244.314l.008.01c.084.083.19.142.284.215.106.083.202.178.32.247l.013.005.011.008 34.139 19.321v34.175L5.939 144.867V29.632h-.001zm136.646 115.235l-65.352 37.625V148.31l48.399-27.628 16.953-9.677v33.862zm35.646-61.22l-29.706 17.102V66.908l17.231-9.92 12.475-7.182v33.841z"/>
-                        </g>
-                    </svg>
-                </div>
-
-                <div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
-                    <div class="grid grid-cols-1 md:grid-cols-2">
-                        <div class="p-6">
-                            <div class="flex items-center">
-                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
-                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">Documentation</a></div>
-                            </div>
-
-                            <div class="ml-12">
-                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                    Laravel has wonderful, thorough documentation covering every aspect of the framework. Whether you are new to the framework or have previous experience with Laravel, we recommend reading all of the documentation from beginning to end.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
-                            <div class="flex items-center">
-                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
-                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laracasts.com" class="underline text-gray-900 dark:text-white">Laracasts</a></div>
-                            </div>
-
-                            <div class="ml-12">
-                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                    Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="p-6 border-t border-gray-200 dark:border-gray-700">
-                            <div class="flex items-center">
-                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
-                                <div class="ml-4 text-lg leading-7 font-semibold"><a href="https://laravel-news.com/" class="underline text-gray-900 dark:text-white">Laravel News</a></div>
-                            </div>
-
-                            <div class="ml-12">
-                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                    Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-l">
-                            <div class="flex items-center">
-                                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-8 h-8 text-gray-500"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                                <div class="ml-4 text-lg leading-7 font-semibold text-gray-900 dark:text-white">Vibrant Ecosystem</div>
-                            </div>
-
-                            <div class="ml-12">
-                                <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
-                                    Laravel's robust library of first-party tools and libraries, such as <a href="https://forge.laravel.com" class="underline">Forge</a>, <a href="https://vapor.laravel.com" class="underline">Vapor</a>, <a href="https://nova.laravel.com" class="underline">Nova</a>, and <a href="https://envoyer.io" class="underline">Envoyer</a> help you take your projects to the next level. Pair them with powerful open source libraries like <a href="https://laravel.com/docs/billing" class="underline">Cashier</a>, <a href="https://laravel.com/docs/dusk" class="underline">Dusk</a>, <a href="https://laravel.com/docs/broadcasting" class="underline">Echo</a>, <a href="https://laravel.com/docs/horizon" class="underline">Horizon</a>, <a href="https://laravel.com/docs/sanctum" class="underline">Sanctum</a>, <a href="https://laravel.com/docs/telescope" class="underline">Telescope</a>, and more.
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex justify-center mt-4 sm:items-center sm:justify-between">
-                    <div class="text-center text-sm text-gray-500 sm:text-left">
-                        <div class="flex items-center">
-                            <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="-mt-px w-5 h-5 text-gray-400">
-                                <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
-                            </svg>
-
-                            <a href="https://laravel.bigcartel.com" class="ml-1 underline">
-                                Shop
-                            </a>
-
-                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="ml-4 -mt-px w-5 h-5 text-gray-400">
-                                <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
-                            </svg>
-
-                            <a href="https://github.com/sponsors/taylorotwell" class="ml-1 underline">
-                                Sponsor
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
-                        Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
-                    </div>
-                </div>
-            </div>
-        </div>
-    </body>
-</html>

routes/web.php

@@ -13,6 +13,24 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::get('/', function () {
-    return view('welcome');
+Route::get('/', 'App\Http\Controllers\HomeController@show');
+
+Route::prefix('bucket')->group(function() {
+    Route::get('create', 'App\Http\Controllers\BucketController@create');
+    Route::post('create', 'App\Http\Controllers\BucketController@create');
+});
+
+/***
+Route::post('/login', 'App\Http\Controllers\AuthController@login');
+Route::get('/logout', 'App\Http\Controllers\AuthController@logout');
+
+Route::group('/hub', function() {
+    Route::get('/{uuid}/options', 'App\Http\Controllers\Hub\OptionsController@show');
+    Route::get('/{uuid}/user', 'App\Http\Controllers\Hub\UserController@show');
+    Route::get('/{uuid}', 'App\Http\Controllers\Hub\Controller@show');
+});
+
+Route::group('/system', function() {
+    Route::get('/user', 'App\Http\Controllers\System\UserController@show');
+    Route::get('/options', 'App\Http\Controllers\System\OptionsController@show');
 });

webpack.mix.js

@@ -1,5 +1,8 @@
 const mix = require('laravel-mix');
 
+// plugins
+const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
+
 /*
  |--------------------------------------------------------------------------
  | Mix Asset Management
@@ -11,7 +14,41 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js')
-    .postCss('resources/css/app.css', 'public/css', [
-        //
-    ]);
+
+mix.webpackConfig({
+    module: {
+        rules: [{
+ 		    test: /\.riot$/,
+ 			use: [{
+ 				loader: '@riotjs/webpack-loader',
+ 				query: {
+ 					hot: false
+ 				}
+ 			}]
+ 		}
+    ]},
+    plugins: [
+        new SvgSpritemapPlugin('resources/icons/*.svg', {
+            output: {
+                filename: 'symbol-defs.svg',
+                chunk: {
+                    keep: true
+                }
+            },
+            sprite: {
+                prefix: 'icon-'
+            }
+        })
+    ]
+})
+
+mix
+    .js('resources/js/bootstrap.js', 'public/js')
+    .js('resources/js/views/home.js', 'public/js')
+    .js('resources/js/views/bucket.js', 'public/js')
+    .sass('resources/scss/bootstrap.scss', 'public/css')
+    .options({
+        terser: {
+            extractComments: false,
+        }
+    })