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.
Use as Simple Hosting
- wwws/{appname}/dist/ index.html (your web app)
- wwws/itm/{appname}.json context of the app if you want
- nginx conf must be set in tribename/nginx/appname.tribename.townname.nationname.conf
- for dev /etc/hosts must contain 127.0.0.1 appname.tribename.townname.nationname
- for prod a DNS must redirect to the apxtri server
Use apxtri webfactory.
- An app project : an item of object wwws
- A web component (wco) : an item of object wco.
wwws - appname
- wwws/{appname}/src source file of the app
- wwws/{appname}/src/{pagename}_{lg}.html the webpage in specific language lg
- wwws/{appname}/src/static/css/input.css contain the tailwind and daisyUI personnalisation (https://daisyui.com/theme-generator)
- wwws/{appname}/src/tpldata/{pagename}/{wcoid}{wconame}{lg}.json data personalisation of a component wconame for an HTML element with id=wcoid
- wwws/{appname}/dist build from the source (src forlder)
- wwws/itm/{appname}.json context of the app that contain all data needed to personnalize the wco
To make an app project in line http://appname.tribename.townname.nationname/pagename_lg.html :
- nginx conf must be set in tribename/nginx/appname.tribename.townname.nationname.conf
- for dev /etc/hosts must contain 127.0.0.1 appname.tribename.townname.nationname
- for prod a DNS must redirect to the apxtri server
wco - web component
- wco/{wconame}/{wconame}.js the engine that make wco is render depending of template
- wco/{wconame}/{tplname}[_{lg}].mustache a mustache template can be language dependant or independant (data are in json)
- wco/{wconame}/example{tplname}_{lg}.json a data example to customize the wco
wwws and wco
In /adminapi/package.json 2 scripts:
{
"src:css": "npx @tailwindcss/cli -i ../$tribe/objects/wwws/$webapp/src/static/css/input.css -o ../$tribe/objects/wwws/$webapp/src/static/css/output.css --watch",
"dist:css": "node apxtri/models/Wwws.js $tribe $webapp dist && tailwindcss --minify -i ../$tribe/objects/wwws/$webapp/src/static/css/input.css -o ../$tribe/objects/wwws/$webapp/dist/static/css/output.css"
}
# To dev : it produces wwws/{appname}/src/static/css/output.css on the flight when something change in an html, js, mustache as well in a wco called in an html.
$ tribe=adminapi webapp=admin yarn src:css
# To build : it minifies output.css in dist and merge, minify, uglify all js used and optimize image, manage language (THIS IS UNDER CONSTRUCTION)
$ tribe=adminapi webapp=admin yarn dist:jscss
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
The tailwindcss conf is store in /wwws/appname/src/static/css/input.css
/*
//start with if need a google font
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
*/
@font-face{
font-family: 'Questrial';
/*font-style: normal;
font-weight: 400;*/
font-display: swap;
src: url(../fonts/questrial-regular-webfont.woff2) format('woff2');
}
@font-face{
font-family:'Quicksand';
/*font-style: normal;
font-weight: 400;*/
font-display: swap;
src: url(../fonts/Quicksand-Light.ttf) format('ttf');
}
@import "tailwindcss" source("../../../src/**/*.{html,js,mustache}");
@import "./sourcetw.css";
@plugin "daisyui";
@theme {
--font-display: "Questrial", "sans-serif";
--font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--font-display--font-variation-settings: "opsz" 32;
--font-heading:"Quicksand","system-ui";
--font-body:"Questrial";
}
@layer base {
html {
font-family: var(--font-body);
font-weight: 300; /* Si nécessaire */
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 500; /* Ajuster selon besoin */
}
}
@plugin "daisyui/theme" {
name: "apxtridark";
default: true;
prefersdark: true;
color-scheme: "dark";
--color-base-100: oklch(37% 0.044 257.287);
--color-base-200: oklch(20% 0.042 265.755);
--color-base-300: oklch(12% 0.042 264.695);
--color-base-content: oklch(100% 0 0);
--color-primary: oklch(58.34% 0.136 249.54);
--color-primary-content: oklch(98% 0.019 200.873);
--color-secondary: oklch(84.93% 0.162 84.01);
--color-secondary-content: oklch(0% 0 0);
--color-accent: oklch(66.88% 0.138 137.06);
--color-accent-content: oklch(98% 0.002 247.839);
--color-neutral: oklch(27% 0.041 260.031);
--color-neutral-content: oklch(100% 0 0);
--color-info: oklch(82% 0.111 230.318);
--color-info-content: oklch(30% 0.056 229.695);
--color-success: oklch(66.88% 0.138 137.06);
--color-success-content: oklch(26% 0.051 172.552);
--color-warning: oklch(84.93% 0.162 84.01);
--color-warning-content: oklch(27% 0.077 45.635);
--color-error: oklch(69.54% 0.189 40.23);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 0.5rem;
--radius-field: 0.5rem;
--radius-box: 0.5rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 1;
--noise: 0;
}
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