marcovega

Omnis Hestia Laravel Architecture - OPL Overview

Executive Summary

This document outlines the technical architecture for the new Laravel-based Hestia frontend, replacing the current Vue.js/Quasar SPA. The architecture leverages Laravel's ecosystem for maximum productivity and maintainability.

Core Components Overview

Technology Stack

• Laravel 12 - Main application framework

marcovega

<%* const noteTitle = tp.file.title; const dateFormat = "YYYY-MM-DD"; const today = moment(noteTitle, dateFormat); const yesterday = today.clone().subtract(1, 'days').format(dateFormat); const tomorrow = today.clone().add(1, 'days').format(dateFormat); %>

[[<% yesterday %>]] < [[<% noteTitle %>]] > [[<% tomorrow %>]]

marcovega

import * as React from 'react';
import { Redirect, Route, RouteProps } from 'react-router';

export const PrivateRoute: React.FC<RouteProps> = (props) => {
  if (!localStorage.getItem('user')) {
    const renderComponent = () => <Redirect to={{ pathname: '/login', state: { from: props.location } }} />;
    return <Route {...props} component={renderComponent} render={undefined} />;
  } else {
    return <Route {...props} />;
  }

marcovega

<?php
// enqueue these scripts and styles before admin_head
wp_enqueue_script( 'jquery-ui-dialog' ); // jquery and jquery-ui should be dependencies, didn't check though...
wp_enqueue_style( 'wp-jquery-ui-dialog' );
?>

<!-- The modal / dialog box, hidden somewhere near the footer -->
<div id="my-dialog" class="hidden" style="max-width:800px">
  <h3>Dialog content</h3>
  <p>This is some terribly exciting content inside this dialog. Don't you agree?</p>

marcovega

<?php

if ( ! class_exists( 'WP_Custom_Walker' ) ) {
	/**
	 * WP_Custom_Walker class.
	 *
	 * @extends Walker_Nav_Menu
	 */
	class WP_Custom_Walker extends Walker_Nav_Menu {

marcovega

Discussion Boards View Integration

This document contains information for a proper integration of the Discussion Boards Backend and the View. Please feel free to comment, edit, add or substract any information.

Views

There are different views available for the Discussion Boards (let's call them DDBB):

• General board display: shows all the available boards. There will be one board for each one of the courses for that specific client. There should be a board manager, so boards in addition of those regarding to courses can be added.
• Inner board display: it's an individual board, shows a single board and its contents. The view looks like this: https://invis.io/WX55W6V8N

marcovega

<?php
  
  	/**
	 * List lessons by course
	 *
	 * Generates the shortcode that outputs the list of the lessons for a given course.
	 *
	 * @return string The HTML Layout output of the Course Lessons.
	 */
	function lessons_shortcode_func(){

marcovega

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 

marcovega

<widget>
    <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/drawable-ldpi/ic_launcher.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/drawable-mdpi/ic_launcher.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/drawable-hdpi/ic_launcher.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/drawable-xhdpi/ic_launcher.png" />
    <icon gap:platform="android" gap:qualifier="xxhdpi" src="www/res/icon/android/drawable-xxhdpi/ic_launcher.png" />
    <icon gap:platform="android" gap:qualifier="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi/ic_launcher.png" />
    
    <icon gap:platform="ios" height="29" src="www/res/icon/ios/Icon-Small.png" width="29" />
    <icon gap:platform="ios" height="58" src="www/res/icon/ios/Icon-Small@2x.png" width="58" />