added matomo

control panel head changes
added page to the front end
2026-01-09 12:41:55 -08:00 · 2025-12-22 18:32:35 -08:00 · 2025-12-16 05:35:56 -08:00
10 changed files with 203 additions and 101 deletions
--- a/skeleton/novaconium/App/config.php
+++ b/skeleton/novaconium/App/config.php
@@ -10,6 +10,7 @@ $config = [
    'base_url' => 'http://localhost:8000',
    'secure_key' => '', //64 alphanumeric characters
    'logfile' => '/logs/novaconium.log',
-    'loglevel' => 'ERROR', // 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'NONE'
+    'loglevel' => 'ERROR', // 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'NONE',
+    'matomo' => '1',
    'fonts' => 'https://fonts.googleapis.com/css2?family=VT323:wght@400&family=Fira+Code:wght@400;500&display=swap&family=Material+Icons:wght@400;500&display=swap'
 ];
--- a/skeleton/novaconium/App/controllers/page.php
+++ b/skeleton/novaconium/App/controllers/page.php
@@ -0,0 +1,33 @@
+<?php
+$slug = $router->parameters['slug'];
+$query=<<<EOSQL
+    SELECT 
+        id,
+        title,
+        heading,
+        description,
+        keywords,
+        author,
+        body,
+        created,
+        updated
+    FROM pages 
+    WHERE slug = '$slug'
+EOSQL;
+
+//$db->debugGetRow($query);
+$data = $db->getRow($query);
+if(!$data) {
+    http_response_code('404');
+    header("Content-Type: text/html");
+    view('404');
+    exit;
+}
+
+$data = array_merge($data, [
+    'menuActive' => 'blog',
+    'pageid' => 'page',
+    'permissionsGroup' => $session->get('group')
+]);
+
+view('page', $data);
--- a/skeleton/novaconium/App/routes.php
+++ b/skeleton/novaconium/App/routes.php
@@ -8,5 +8,8 @@ $routes = [
    ],
    '/humans.txt' => [ 
        'get' => 'humans'
+    ],
+    '/page/{slug}' => [
+        'get' => 'page'
    ]
 ];
--- a/skeleton/novaconium/App/views/page.html.twig
+++ b/skeleton/novaconium/App/views/page.html.twig
@@ -0,0 +1,11 @@
+{% extends '@novaconium/master.html.twig' %}
+
+{% block content %}
+    <h1>{{ title }}</h1>
+    <div class="page-meta">
+    {% if updated is not empty %}
+        <span class="page-updated">Last Updated: {{ updated | date("M\\. jS Y \\a\\t g:ia") }}</span>
+    {% endif %}
+  </div>
+    {{ body | raw}}
+{% endblock %}
--- a/skeleton/novaconium/public/js/tabs.js
+++ b/skeleton/novaconium/public/js/tabs.js
@@ -1,5 +1,6 @@
-<script>
-// Tab switching JS (unchanged)
+// /js/tabs.js
+
+// Tab switching
 function switchTab(tabId, button) {
    const contents = document.querySelectorAll('.tab-content');
    contents.forEach(content => content.classList.remove('active'));
@@ -17,6 +18,7 @@ function switchTab(tabId, button) {

 // Tags Init (with custom dropdown autocomplete)
 let tagsListeners = [];
+
 function initTags() {
    const tagsInput = document.getElementById('tags-input');
    const tagsField = document.getElementById('tags');
@@ -28,7 +30,7 @@ function initTags() {
        return;
    }

-    // Clean old listeners
+    // Remove old listeners
    tagsListeners.forEach(ls => ls());
    tagsListeners = [];

@@ -39,13 +41,10 @@ function initTags() {
        existingTags = JSON.parse(tagsInput.dataset.existingTags || '[]');
    } catch (e) {
        console.warn('JSON error:', e);
-        tags = [];
-        existingTags = [];
    }

-    let selectedIndex = -1;  // For keyboard nav
+    let selectedIndex = -1;

-    // Render chips (unchanged)
    function renderTags() {
        tagsInput.innerHTML = '';
        tags.forEach((tag, index) => {
@@ -60,11 +59,10 @@ function initTags() {
            tagsInput.appendChild(chip);
        });
        tagsInput.appendChild(tagsField);
-        tagsInput.appendChild(dropdown);  // Re-add dropdown
+        tagsInput.appendChild(dropdown);
        hiddenTags.value = JSON.stringify(tags);
    }

-    // Filter and render dropdown
    function updateDropdown() {
        const value = tagsField.value.toLowerCase().trim();
        dropdown.innerHTML = '';
@@ -73,9 +71,9 @@ function initTags() {

        if (!value) return;

-        const matches = existingTags.filter(tag => 
-            tag.toLowerCase().startsWith(value) && !tags.includes(tag.toLowerCase())
-        ).slice(0, 10);  // Top 10 matches, exclude existing
+        const matches = existingTags
+            .filter(tag => tag.toLowerCase().startsWith(value) && !tags.includes(tag.toLowerCase()))
+            .slice(0, 10);

        matches.forEach((tag, index) => {
            const li = document.createElement('li');
@@ -90,21 +88,18 @@ function initTags() {
        else dropdown.parentElement.classList.remove('has-dropdown');
    }

-    // Highlight selected in dropdown
    function updateHighlight() {
        dropdown.querySelectorAll('li').forEach((li, index) => {
            li.classList.toggle('selected', index === selectedIndex);
        });
    }

-    // Select tag from dropdown
    function selectTag(tag) {
-        addTag(tag, true);  // Add as chip, refocus
-        tagsField.value = '';  // Clear input
+        addTag(tag, true);
+        tagsField.value = '';
        dropdown.setAttribute('aria-expanded', 'false');
    }

-    // Add tag (unchanged)
    function addTag(inputValue, refocus = false) {
        const tag = inputValue.trim().toLowerCase().replace(/[^\w-]/g, '');
        if (tag && tag.length > 0 && tag.length <= 50 && !tags.includes(tag)) {
@@ -113,44 +108,42 @@ function initTags() {
            if (refocus) tagsField.focus();
        }
        tagsField.value = '';
-        updateDropdown();  // Hide dropdown after add
+        updateDropdown();
    }

-    // Events: Enter/comma/TAB adds tag (no form submit)
    const keydownListener = (e) => {
-    console.log('Keydown:', e.key, 'Value:', tagsField.value, 'Selected:', selectedIndex);
        if (dropdown.getAttribute('aria-expanded') === 'true') {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                selectedIndex = Math.min(selectedIndex + 1, dropdown.querySelectorAll('li').length - 1);
                updateHighlight();
-            dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`).scrollIntoView({ block: 'nearest' });
+                dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`)?.scrollIntoView({ block: 'nearest' });
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                selectedIndex = Math.max(selectedIndex - 1, 0);
                updateHighlight();
-            dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`).scrollIntoView({ block: 'nearest' });
+                dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`)?.scrollIntoView({ block: 'nearest' });
            } else if ((e.key === 'Enter' || e.key === 'Tab') && selectedIndex >= 0) {
                e.preventDefault();
-            const selected = dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`).textContent;
-            selectTag(selected);  // Adds chip, refocuses
+                const selected = dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`)?.textContent;
+                if (selected) selectTag(selected);
            } else if (e.key === 'Escape') {
                e.preventDefault();
                tagsField.blur();
            }
        }

-    // Fallback for no dropdown or non-selected Tab/Enter
        if (!dropdown.getAttribute('aria-expanded') === 'true' || selectedIndex < 0) {
            if (e.key === 'Enter' || e.key === ',') {
                e.preventDefault();
                addTag(tagsField.value, true);
            } else if (e.key === 'Tab') {
                e.preventDefault();
-            if (tagsField.value.trim()) addTag(tagsField.value, true);  // Add typed value, refocus
+                if (tagsField.value.trim()) addTag(tagsField.value, true);
            }
        }
    };
+
    tagsField.addEventListener('keydown', keydownListener);
    tagsListeners.push(() => tagsField.removeEventListener('keydown', keydownListener));

@@ -159,21 +152,19 @@ tagsListeners.push(() => tagsField.removeEventListener('keydown', keydownListene
    tagsListeners.push(() => tagsField.removeEventListener('input', inputListener));

    const blurListener = () => {
-        setTimeout(() => dropdown.setAttribute('aria-expanded', 'false'), 150);  // Hide after blur
+        setTimeout(() => dropdown.setAttribute('aria-expanded', 'false'), 150);
        if (tagsField.value.trim()) addTag(tagsField.value);
    };
    tagsField.addEventListener('blur', blurListener);
    tagsListeners.push(() => tagsField.removeEventListener('blur', blurListener));

-    // Initial render
    renderTags();
-    console.log('Tags ready with autocomplete, loaded:', tags.length, 'tags');
 }

-// Init on load + observe (unchanged)
-document.addEventListener('DOMContentLoaded', function() {
+// Init on load and observe tab changes
+document.addEventListener('DOMContentLoaded', () => {
    const tagsTab = document.getElementById('content6');
-    if (tagsTab && tagsTab.classList.contains('active')) {
+    if (tagsTab?.classList.contains('active')) {
        initTags();
    }

@@ -189,4 +180,6 @@ document.addEventListener('DOMContentLoaded', function() {
    });
    observer.observe(document.body, { subtree: true, attributes: true });
 });
-</script>
+
+// Export switchTab for external use if needed
+window.switchTab = switchTab;
--- a/src/novaconium.php
+++ b/src/novaconium.php
@@ -17,6 +17,7 @@ $log = new Logger(\BASEPATH . $config['logfile'], $config['loglevel']);
 // --- Twig Data Array ---
 $data = [];
 $data['fonts'] = $config['fonts'] ?? [];
+$data['matomo'] = $config['matomo'] ?? 0;

 // --- Session ---
 use Novaconium\Session;
--- a/twig/cp/control-panel.html.twig
+++ b/twig/cp/control-panel.html.twig
@@ -2,7 +2,7 @@
 <html class="no-js" lang="en">

 <head>
-  {% include ['@override/head.html.twig', '@novaconium/head.html.twig'] %}
+  {% include ['@novaconium/cp/head.html.twig'] %}
 </head>

 <body id="{{ pageid | default('pageid') }}" class="{{ pageclass | default('pageclass') }}" >
@@ -28,8 +28,6 @@
      <div class="copyright">&copy; {{ 'now' | date('Y') }} Novaconium</div>
    </footer>

-    {% include '@novaconium/javascript/page-edit.html.twig' %}
-
    {% if editor == 'ace' %}
    {% include '@novaconium/javascript/ace.html.twig' %}
    {% endif %}
--- a/twig/cp/head.html.twig
+++ b/twig/cp/head.html.twig
@@ -0,0 +1,60 @@
+{# =============================================================================
+   <HEAD>
+   =============================================================================
+#}
+
+<meta charset="utf-8">
+
+<title>{{ title | default('Welcome To Novaconium') }}</title>
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+{# SEO & METADATA #}
+<meta name="generator" content="Novaconium" />
+<meta name="description" content="{{ description | default('No description given') }}">
+<meta name="keywords" content="{{ keywords | default('website') }}">
+<meta name="author" content="{{ author | default('anonymous') }}">
+
+{# DARK MODE & THEME HINTS #}
+<meta name="color-scheme" content="dark">
+<meta name="theme-color" content="#000000">
+
+{# OPEN GRAPH (OG) FOR SOCIAL SHARING #}
+<meta property="og:title" content="{{ title | default('Welcome') }}">
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ app_url | default(request.scheme ~ '://' ~ request.host) }}">
+<meta property="og:image" content="{{ og_image | default('/icon.png') }}">
+
+{# PWA & FAVICONS #}
+<link rel="manifest" href="site.webmanifest">
+<link rel="apple-touch-icon" href="/icon.png">
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+
+{# GOOGLE FONTS (CDN VIA PRECONNECT) #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="{{ fonts | default('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Roboto+Mono&family=Source+Code+Pro&family=Lato&family=Poppins&family=Material+Icons&family=Material+Icons+Outlined&family=VT323:wght@400&family=Fira+Code:wght@400;500&display=swap') }}"
+  rel="stylesheet"
+>
+
+{% if editor == 'ace' %}
+<!-- ACE Editor -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/mode-html.min.js"></script>  {# HTML syntax #}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/theme-tomorrow_night.min.js"></script>  {# Dark theme #}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ext-language_tools.min.js"></script>  {# Autocomplete #}
+<!-- END ACE Editor -->
+{% endif %}
+
+{# highlight.js #}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script>hljs.highlightAll();</script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/ir-black.min.css">
+
+<script src="/js/tabs.js"></script>
+
+{# STYLESHEET #}
+<link rel="stylesheet" href="/css/novaconium.css">
--- a/twig/foot.html.twig
+++ b/twig/foot.html.twig
@@ -9,3 +9,20 @@
 {% if editor == 'ace' %}
 {% include '@novaconium/javascript/ace.html.twig' %}
 {% endif %}
+
+{% if matomo > 0 %}
+<!-- Matomo -->
+<script>
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u = "//matomo.4lt.ca/";
+    _paq.push(['setTrackerUrl', u + 'matomo.php']);
+    _paq.push(['setSiteId', {{ matomo }}]);
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
+  })();
+</script>
+<!-- End Matomo Code -->
+{% endif %}
--- a/twig/head.html.twig
+++ b/twig/head.html.twig
@@ -39,22 +39,7 @@
 >

 {# STYLESHEET #}
-{% if pageclass == "novaconium" %}
-  <link rel="stylesheet" href="/css/novaconium.css">
-{% else %}
 <link rel="stylesheet" href="/css/main.css">
-{% endif %}
-
-
-{% if editor == 'ace' %}
-<!-- ACE Editor -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/mode-html.min.js"></script>  {# HTML syntax #}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/theme-tomorrow_night.min.js"></script>  {# Dark theme #}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ext-language_tools.min.js"></script>  {# Autocomplete #}
-<!-- END ACE Editor -->
-{% endif %}

 {# highlight.js #}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
Author	SHA1	Message	Date
Nick Yeoman	81c239f043	added matomo	2026-01-09 12:41:55 -08:00
Nick Yeoman	0d91b61bd0	control panel head changes	2025-12-22 18:32:35 -08:00
Nick Yeoman	fd9a71c4d6	added page to the front end	2025-12-16 05:35:56 -08:00