Search bar.

web/.env.example

@@ -3,6 +3,7 @@ APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
 APP_URL=http://gtoria.net
+MIX_APP_URL=http://gtoria.net
 
 LOG_CHANNEL=stack
 LOG_DEPRECATIONS_CHANNEL=null

web/app/Helpers/DomainHelper.php

@@ -0,0 +1,21 @@
+<?php
+
+/*
+	Graphictoria 2022
+	Domain helper.
+*/
+
+namespace App\Helpers;
+
+use Illuminate\Http\Request;
+
+class DomainHelper
+{
+	public static function TopLevelDomain()
+	{
+		$baseurl = config('app.url');
+		$baseurl = str_replace(['http://', 'https://'], '', $baseurl);
+		
+		return $baseurl;
+	}
+}

web/app/Providers/RouteServiceProvider.php

@@ -8,6 +8,8 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\Facades\Route;
 
+use App\Helpers\DomainHelper;
+
 class RouteServiceProvider extends ServiceProvider
 {
     /**
@@ -29,12 +31,26 @@ class RouteServiceProvider extends ServiceProvider
         $this->configureRateLimiting();
 
         $this->routes(function () {
-            Route::middleware('api')
+			//
-                ->prefix('api')
+			// Domain: gtoria.net
-                ->group(base_path('routes/api.php'));
+			//
-
+			Route::domain(DomainHelper::TopLevelDomain())
-            Route::middleware('web')
+                ->middleware('web')
                 ->group(base_path('routes/web.php'));
+			
+			//
+			// Domain: www.gtoria.net
+			//
+            Route::domain('www.' . DomainHelper::TopLevelDomain())
+                ->middleware('web')
+                ->group(base_path('routes/web.php'));
+			
+			//
+			// Domain: api.gtoria.net
+			//
+            Route::domain('api.' . DomainHelper::TopLevelDomain())
+                ->middleware('api')
+                ->group(base_path('routes/api.php'));
         });
     }
 

web/config/session.php

@@ -128,7 +128,7 @@ return [
 
     'cookie' => env(
         'SESSION_COOKIE',
-        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
+        'GTSession'
     ),
 
     /*

web/package.json

@@ -30,6 +30,9 @@
         "tailwindcss": "^3.0.18"
     },
     "dependencies": {
-        "laravel-mix-banner": "^0.1.4"
+        "install": "^0.13.0",
+        "laravel-mix-banner": "^0.1.4",
+        "npm": "^8.8.0",
+        "react-router-dom": "^6.3.0"
     }
 }

web/public/js/app.js.LICENSE.txt

@@ -8,7 +8,7 @@
  * Graphictoria 5 (https://gtoria.net)
  * Copyright © XlXi 2022
  *
- * BUILD TIMESTAMP: Sat, 30 Apr 2022 02:02:46 GMT
+ * BUILD TIMESTAMP: Sun, 01 May 2022 20:23:21 GMT
  */
 
 /*!
@@ -44,3 +44,43 @@
  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

web/public/js/pages/maintenance.js.LICENSE.txt

@@ -2,7 +2,7 @@
  * Graphictoria 5 (https://gtoria.net)
  * Copyright © XlXi 2022
  *
- * BUILD TIMESTAMP: Sat, 30 Apr 2022 02:02:46 GMT
+ * BUILD TIMESTAMP: Sun, 01 May 2022 20:23:21 GMT
  */
 
 /*!

web/public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=80aa85302f9cae9ff3974445e60a1a1e",
+    "/js/app.js": "/js/app.js?id=c057b931349e16c6860e84d6115094f6",
-    "/js/pages/maintenance.js": "/js/pages/maintenance.js?id=46d62629eccfa8469acbd4536fbcee61",
+    "/js/pages/maintenance.js": "/js/pages/maintenance.js?id=e3ff1a0cc59435b2953e748e81e0f7cf",
-    "/css/graphictoria.css": "/css/graphictoria.css?id=7ba4cc490c62318ad457620aa38f5645"
+    "/css/graphictoria.css": "/css/graphictoria.css?id=8ef8b7b682ee538eb2b82b5f6aa6e03f"
 }

web/resources/js/components/Main.js

@@ -1,9 +1,20 @@
 import $ from 'jquery';
 import * as Bootstrap from 'bootstrap';
 
+import React from 'react';
+import { render } from 'react-dom';
+
+import SearchBar from './SearchBar';
+
+const searchBarId = 'graphictoria-nav-searchbar';
+
 $(document).ready(function() {
 	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
 	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 	  return new Bootstrap.Tooltip(tooltipTriggerEl)
 	});
+	
+	if (document.getElementById(searchBarId)) {
+		render(<SearchBar />, document.getElementById(searchBarId));
+	}
 });

web/resources/js/components/SearchBar.js

@@ -0,0 +1,92 @@
+// © XlXi 2021
+// Graphictoria 5
+
+import { useState, useRef, useEffect } from 'react';
+
+import { buildGenericApiUrl } from '../util/HTTP.js';
+
+const dropdownLinks = [
+	{
+		area: 'Games',
+		urlbase: buildGenericApiUrl('www', 'games/search/')
+	},
+	{
+		area: 'Shop',
+		urlbase: buildGenericApiUrl('www', 'shop/search/')
+	},
+	{
+		area: 'Users',
+		urlbase: buildGenericApiUrl('www', 'users/search/')
+	},
+	{
+		area: 'Groups',
+		urlbase: buildGenericApiUrl('www', 'groups/search/')
+	}
+];
+
+function useOnClickOutside(refs, handler) {
+	useEffect(
+		() => {
+			const listener = (event) => {
+				var shouldReturn = false;
+				
+				refs.map(
+					function(val)
+					{
+						if (shouldReturn == false && (!val.current || val.current.contains(event.target))) 
+						{
+							shouldReturn = true;
+						}
+					}
+				);
+				
+				if(shouldReturn)
+				{
+					return;
+				}
+				
+				handler(event);
+			};
+			document.addEventListener('mousedown', listener);
+			document.addEventListener('touchstart', listener);
+			return () => {
+				document.removeEventListener('mousedown', listener);
+				document.removeEventListener('touchstart', listener);
+			};
+		},
+		[refs, handler]
+	);
+}
+
+const SearchBar = () => {
+	const inputRef = useRef();
+	const dropdownRef = useRef();
+	const [searchQuery, setSearchQuery] = useState('');
+	
+	useOnClickOutside([inputRef, dropdownRef], () => setSearchQuery(''));
+	
+	return (
+		<>
+			<input type="text" ref={inputRef} className="form-control d-lg-flex" placeholder="Search" aria-label="Search" aria-describedby="graphictoria-nav-search-button" onChange={ changeEvent => setSearchQuery(changeEvent.target.value) } value={ searchQuery }/>
+			
+			{
+				searchQuery.length !== 0 ?
+				<div ref={dropdownRef} id="graphictoria-search-dropdown">
+					<ul className="dropdown-menu show" area-labelledby="graphictoria-search-dropdown">
+						{
+							dropdownLinks.map(({ area, urlbase }, index) => 
+								<li key={index}>
+									<a className="dropdown-item py-2" onClick={ () => setSearchQuery('') } href={ urlbase + encodeURIComponent(searchQuery) }>Search <b className="text-truncate graphictoria-search-dropdown-truncate">{searchQuery}</b> in {area}</a>
+								</li>
+							)
+						}
+					</ul>
+				</div>
+				:
+				null
+			}
+		</>
+	);
+};
+
+export default SearchBar;

web/resources/js/config.js

@@ -1,6 +0,0 @@
-const Config = {
-	BaseUrl: 'http://gtoria.local',
-	Protocol: 'http://'
-};
-
-export default Config;

web/resources/js/util/HTTP.js

@@ -4,7 +4,10 @@
 const urlObject = new URL(document.location.href);
 
 export function getCurrentDomain() {
-	return urlObject.hostname.split('.').slice(-2).join('.');
+	let url = process.env.MIX_APP_URL;
+	url = url.replace(/https?:\/\//i, '');
+	
+	return url;
 };
 
 export function getProtocol() {

web/resources/sass/Graphictoria.scss

@@ -444,7 +444,6 @@ html {
 #graphictoria-search-dropdown > .dropdown-menu {
   width: 100%;
   left: 0;
-  top: 1.5rem;
 }
 
 // Cards

web/resources/views/dashboard.blade.php

@@ -1,5 +1,7 @@
 @extends('layouts.app')
 
+@section('title', 'Dashboard')
+
 @section('content')
 <div class="container-lg my-2">
 	<h4>Hello, {{ Auth::user()->username }}!</h4>
@@ -21,7 +23,7 @@
 						<li class="pb-2"><a href="#" class="text-decoration-none fw-normal"><i class="fa-solid fa-circle-right"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a></li>
 					</ul>
 					<div class="text-left px-2">
-						<a href="#" class="text-decoration-none fw-normal">More <i class="fa-solid fa-caret-right"></i></a>
+						<a href="https://blog.gtoria.net" class="text-decoration-none fw-normal" target="_blank">More <i class="fa-solid fa-caret-right"></i></a>
 					</div>
 				</x-slot>
 			</x-MiniCard>

web/resources/views/layouts/nav.blade.php

@@ -61,6 +61,7 @@
 			</ul>
 			@live
 				@auth
+					<div id="graphictoria-nav-searchbar" class="graphictoria-search"></div>
 					<div class="flex">
 						<p class="my-auto me-2 text-muted" style="color:#e59800!important;font-weight:bold">
 							<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tokens are Graphictoria's currency.">

web/webpack.mix.js

@@ -1,5 +1,4 @@
 const mix = require('laravel-mix');
-
 require('laravel-mix-banner');
 
 /*