Frontend Wwws

apXtri comes with a tailwindcss / daisyUi settings to allow developer to sales web component (wco) across a town server. The mayor profil can add wco to all the tribe's druid profilfor them to include in any webpage an autonomous components.

How it works ?

An app project is an item of object wwws, a web component (wco) is an item of object wco.
To make an app project on line http://appname.tribename.townname.nationname/pagename_lg.html, nginx conf must be set in tribename/nginx/appname.tribename.townname.nationname.conf
Then the webapp can get context data with the endpoint http://appname.tribename.townname.nationname/api/adminapi/wwws/updatelocaldbanonymous/tribename/appname/pagename/versionnumber this will return in data a set of data parameter into tribename/objects/wwws/itm/appname.json

In folder objects/wwws/appname/

adminapi/objects/wco/wconame/wconame.js
adminapi/objects/wco/wconame/tplname_lg.mustache
adminapi/objects/wco/wconame/tpldatanameexample_lg.json 

tribename/nginx/appname.tribename.townname.nationname.conf

tribename/objects/wwws/appname/tailwind.config.js
tribename/objects/wwws/appname/dist/
tribename/objects/wwws/appname/src/
tribename/objects/wwws/appname/src/tatic/
tribename/objects/wwws/appname/src/tpldata/ 
tribename/objects/wwws/appname/src/pagename_lg.html

tribename/objects/wwws/itm/appname.json     // Contain all parameter

Setup

Use tailwindcss is not mandatory to host a webapp, but this process automatize the web page creation based on reusable component, as well an authentification UI. If you prefer to use any other framework like react, react native, angular, vuejs ,... you will have to set localdb manually to make some backend data available.
To set up a web page a list of file must be initialize, then dev works only in tribe/objects/wwws/appname/src and tribe/objects/wco/wconame to add any reusable web component. The wco that manage exchange with apXtri is named apx it contain only adminapi/objects/wco/apx/apx.js that allow to update localdb (data context of a website) The wco that manage authentification is names apxid and allow to get accessright for a domain name.

In any case, web page http://dns/pagename.html is available into /dist folder after a build process, with tailwindcss you can have acces to your source web site http://dns/src/pagename.html

nginx conf

You can get an example in adminapi/apxtri/setup/nginx.wwwcf this will redirect the website to /appname/dist/ or you can access http://appname.tribename.townname.nationname/src/pagename_lg.html

localdb

tribename/objects/wwws/itm/appname.json

{
"dns": [ "smatchapp.smatchit.newdev.ants", "smatchapp.smatchit"  ],
  "version": "1",
   "pages": {
    "pagename": {
      "version": 1,
      "confpage": {},
      "profils": [ "anonymous" ],  // profil tha access those data
      "schema": ["adminapi/objects/pagans"] ,
      "options":{"profil":"tribename/objects/options/profil"},
      "tpl":{"menu":"adminapi/objects/wco/wconame/tplname"},  // where file tplname_lg.mustache exist
      "tpldata":{...}

     }
 }  
}

a web component (wco)

A web component is an objects store into /objects/wco , we have only one js code that make works the component objects/wco/wconame/wconame.js. All the template are store in tpl and the data related are store in tpldata.

Content of a wco is for example for /tribename/objects/wco/itm/apxid.json :

{
    "wconame": "apxid",
    "owner": "philc",
    "price": 1,
    "aliascode": [],
    "commentaliascode": "if paid wco then [tribename_uniquecode,...]",
    "codehash": "123",
    "thumbnail": "",
    "title": "apXtri pagans create and authentification interface",
    "description": "",
    "lang": [
        "fr"
    ],
    "tpl": {
        "apxidscreensignup": "{{tribe}}/objects/wco/apxid/screensignup",
        "apxidscreensignin": "{{tribe}}/objects/wco/apxid/screensignin",
        "apxidscreenlogout": "{{tribe}}/objects/wco/apxid/screenlogout",
        "apxidscreeninformation": "{{tribe}}/objects/wco/apxid/screeninformation",
        "apxidscreenforgetkey": "{{tribe}}/objects/wco/apxid/screenforgetkey"
    },
    "tpldatamodel": {},
    "options": {
        "profil": "{{tribeId}}/objects/options/profil"
    },
    "ref": {
        "Odmdb": "adminapi/objects/tplstrings/Odmdb",
        "Pagans": "adminapi/objects/tplstrings/Pagans",
        "Persons": "adminapi/objects/tplstrings/Persons"
    },
    "schema": [
        "adminapi/objects/pagans",
        "{{tribe}}/objects/persons"
    ]
}

page web

To create a new web page here is a model, third parties like axios, and other can be accessible in /adminapi/node_modules or /tribename/node_modules depending of where they are installed. To add wco component it must exists and you can add one with a simple script src with the endpoint returning a js. This endpoint also check that all wco pre-request are well set in the webapp conf in tribe/objects/wwws/itm/webappname.json.

When the web page is load the localdb settings is updating, then the app get localy from apx.js in localstorage all the tpl, tpldata available for the wco.js worked.

<!DOCTYPE html>
<html lang="fr" data-theme="apxtri" class="h-full bg-neutral-800 ">
  <head>
    <meta charset="utf-8" />
    <title>Authentification</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta    content=""   name="keywords" />
    <meta    content=""   name="description" />
    <link data-wco="favicon" href="static/img/icons/iconbgdark.png" rel="icon" />
    <link href="static/css/twstyle.css" rel="stylesheet" />
    <script>
      /**
       *  Read apx.js to know more
       */
      const apxtri = {
        headers: {  xtrkversion: 1,  xtribe: "adminapi", xapp: "admin", xlang: "fr",  xalias: "anonymous",  xhash: "anonymous", xprofils:["anonymous"], xdays: 0, },
        pagename: "apxid",   pageauth: "apxid",   allowedprofils:["anonymous"], version:0
      };
    </script>
    <script src="/adminapi/node_modules/axios/dist/axios.min.js"></script>
    <script src="/adminapi/node_modules/dayjs/dayjs.min.js"></script>
    <script src="/adminapi/node_modules/openpgp/dist/openpgp.min.js"></script>
    <script src="/adminapi/node_modules/mustache/mustache.min.js"></script>
    <script src="/adminapi/Checkjson.js"></script>

    <script src="/api/adminapi/wwws/getwco/apx.js?wcotribe=adminapi&tribe=adminapi&xapp=admin&pagename=apxid&code=enjoy"></script>
    <script src="/api/adminapi/wwws/getwco/simplemobnav.js?wcotribe=adminapi&tribe=adminapi&xapp=admin&pagename=apxid&code=enjoy"></script>
    <script src="/api/adminapi/wwws/getwco/apxid.js?wcotribe=adminapi&tribe=adminapi&xapp=admin&pagename=apxid&code=enjoy"></script>
  </head>
  <body class="h-full">
      <div   id="authentification"  wco-name="simplemobnav"  class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
    </div>
    <div id="chatbot" wco-name="chatroom" class="hidden flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
    </div>
  </body>
  </html>
 
#########################################"
A  wconame.js looks like:

var apx=apx || {}                       // to get all the existing apx properties
apx.wconame={}                     // add a new one related of wconame
apx.wconame.init=()=>{}     // a function that replace the content of <div wco-name></div>  with the component expected.

apx.readyafterupdate(apx.wconame.init) // optionnaly to automaticaly run after all main apx update (localdb,...)

Each script {{wco-name}}.js will replace the div with wco-name={{wco-name}} with the business logic of the component. If you add a new wco-name div dynamicaly then it has to call a function in wco-name.js to activate it.

tailwindcss

In adlinapi/package.json a script must be run in real time to watch any modification in js html mustache to reprocess the wwws/appname/src/ as well than any wco used. This will generate /src/static/css/twstyle.css

$ tribe=tribename webapp=appname yarn src:css

To customize webpage and wco, all is set into tailwindcss.config.js. The file tribename/objects/wwws/itm/webappname.json contain a property tailwindcsscontent updated with the list of wco to watch for tailwindcss.

** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
const confwww= require('../itm/webappname.json');
//  content: ["../adminapi/objects/wwws/admin/src/**/*.{html,js,mustache}","../adminapi/objects/wco/apxid/*.{html,js,mustache}"],

module.exports = {
  content: confwww.tailwindcsscontent,
  theme: {
    fontFamily: {
      sans: ["questrial", "sans-serif"],
      serif: ["quicksand", "serif"],
    },
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
  daisyui: {
    themes: ["dark", "light", "apxtri"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
    themes: [
      {
        //check https://daisyui.com/theme-generator/ to customize
        apxtri: {
          primary: "#2e7fc8",
          "primary-focus": "#218787",
          "primary-content": "#ffffff",
          secondary: "#ffc332",
          "secondary-focus": "#fa6a31",
          "secondary-content": "#ffffff",
          accent: "#6aa84f",
          "accent-focus": "#218787",
          "accent-content": "#ffffff",
          neutral: colors.gray[800],
          "neutral-focus": colors.gray[600],
          "neutral-content": "#ffffff",
          "base-100": "#ffffff", // Fond principal
          "base-200": "#f9fafb", // Fond secondaire
          "base-300": "#d1d5db", // Fond tertiaire
          "base-content": "#1f2937", // Texte principal
          info: "#2e7fc8",
          success: "#6aa84f",
          warning: "#ffc332",
          error: "#fa6a31",
        },
      },
    ],
  },
};

The dev tailwindcss is store in /wwws/appname/src/static/css/twdevstyle.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'daisyui';

@Layer base {
    @font-face{
        font-family: 'questrial';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/questrial-regular-webfont.woff2) format('woff2');
    }
    font-family:"questrial", system-ui, sans-serif;
    @font-face{
        font-family:'quicksand';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(../fonts/Quicksand-Light.woff2) format('woff2');
    }
}
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #2d3748;
  }
  ::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
  }

  .transition-width {
    transition: width 0.3s ease;
  }

Build

@todo to explain the endpoint build that will take all src and generate the optimized website into /dist

Then conf website test domain and use sudo certbot --nginx -d domainename to get ssl and access in https