Configuration
Relevant source files
The following files were used as context for generating this wiki page:The configuration of the oldwebsite project is managed through a combination of different file types, each handling a specific aspect of the application's behavior and presentation. This includes a central JSON file for internationalization (i18n), PHP arrays for page-specific metadata, CSS files with custom properties for theming, and JavaScript for client-side logic and state management.
This decentralized approach allows for a clear separation of concerns. Textual content is managed independently from page structure, styling is defined globally, and client-side interactions are encapsulated within a dedicated script. The system is primarily driven by server-side PHP scripts that assemble the final page, with JavaScript enhancing the user experience on the client side.
Internationalization (i18n) System
The website supports multiple languages (Italian, English, French, Spanish) through a configuration-based system. Text strings and page titles are stored in dedicated configuration files and loaded based on the user's selected language.
Sources: apps/translations.json, apps/pages.php, iite/overview.php:4-8, 14-19
Text Translations
All UI text strings are stored in apps/translations.json. This file contains a large JSON object where each key represents a specific UI element, and its value is another object containing the translations for each supported language code (it, en, fr, es).
Sources: apps/translations.json
Example Translation Keys:
| Key | English Translation | Purpose |
|---|---|---|
hero_quote | The mind is humanity’s source code.\nEducation is the language we use to rewrite it. | Main quote on the homepage. |
translate_button_accept | I consent Terms & Cookies | Text for the cookie consent button. |
navbar_primary_iite | iite | Primary navigation link text. |
company_info_title | Education. \n Research. \n Impact. | Title for the company info section. |
departments_irca_title | IRCA – Department of \n Biotechnological Research | Title for a specific department card. |
Sources: apps/translations.json:2-6, 26-30, 43-47, 134-138, 204-208
Page Title Translations
Page titles are defined in apps/pages.php. This file returns a PHP array where keys correspond to page identifiers (e.g., iite_overview) and values are arrays of translated titles.
Sources: apps/pages.php
Page Title Definitions:
| Page Key | English Title |
|---|---|
index | Welcome to Institute Itech |
iite_overview | Overview of Institute Itech |
iite_company | Our company: Institute Itech |
departments_overview | The departments of Institute Itech |
Sources: apps/pages.php:4-29
Page Rendering and Language Handling
The core of the page rendering is handled by PHP controller scripts (e.g., iite/overview.php, departments/overview.php). These scripts manage the language state, load the necessary translation configurations, and include the appropriate PHTML templates to build the final HTML response.
The following diagram illustrates the server-side logic for handling a page request and selecting the correct language.
This diagram shows the process flow from an incoming HTTP request to the final HTML response, highlighting how the language is determined and applied.
Sources: iite/overview.php:4-22, departments/overview.php:4-22
The language is determined in the following order of precedence:
- A
langparameter in the URL's query string (e.g.,?lang=en). If present, it's saved to the session and the user is redirected to a clean URL. - An existing
langvalue in the$_SESSION. - A default value of
'it'(Italian) if neither of the above is found.
Sources: iite/overview.php:4-11
Theming and Styling
The visual theme of the website is configured using CSS custom properties (variables) defined in themes/css/design.css and themes/css/iite.css. These variables are declared within the :root pseudo-class, making them globally available for consistent styling across the site.
Sources: themes/css/design.css:1-18, themes/css/iite.css:3-20
Global Color Palette
A set of color variables defines the primary and secondary colors used for backgrounds, text, and interactive elements.
| Variable | Value | Description |
|---|---|---|
--static-background | #BFBFBF | A static background color. |
--navbar-background | #02274c | Background color for the navigation bar. |
--w-white | white | General white color. |
--w-black | black | General black color. |
--w-grey | #e9e9e9 | A light grey, often for backgrounds or inactive states. |
--w-midnight | #222940 | A dark blue/midnight color. |
--w-blue | #0448d5 | The primary brand blue color. |
--w-orange | #fc6d49 | An accent orange color. |
--w-yellow | #FFC34A | An accent yellow color. |
--w-green | #26A646 | An accent green color. |
--w-crimson | #f22e52 | An accent crimson/red color. |
Sources: themes/css/design.css:3-18, themes/css/iite.css:10-18
Client-Side Configuration
Client-side behavior is configured in apps/js/iite_components.js. This script handles user interactions, state management via localStorage, and dynamic style adjustments.
Sources: apps/js/iite_components.js
Page Navigation
Simple client-side navigation is implemented for primary menu items. HTML elements with a data-page attribute have click event listeners that redirect the user to a hardcoded URL.
// apps/js/iite_components.js:5-19
pages.forEach(page => {
page.addEventListener('click', () => {
if (page.dataset.page === 'iite') {
location.href = "http://localhost";
} else if (page.dataset.page === 'insideiite') {
location.href = "/inside/overview.php";
} else if (page.dataset.page === 'departments') {
location.href = "/departments/overview.php";
}
// ... and so on
});
});
Sources: apps/js/iite_components.js:5-19
Cookie Consent Management
The visibility of the cookie consent banner is managed using the browser's localStorage. When a user accepts or declines, a key cookies is set to 'hidden', and the banner is hidden. On subsequent page loads, the script checks for this value to keep the banner hidden.
The following diagram shows the logic for handling the cookie banner.
This flowchart details the client-side process for managing the cookie consent banner's visibility.
Sources: apps/js/iite_components.js:58-92
Dynamic Styling
The script contains logic to dynamically alter styles based on the current page's URL path. For example, the color of the main logo (#iitelogo) is changed to black on specific pages to ensure visibility against a light background.
An array whitePages lists the paths where the logo should be black. The script checks if the window.location.pathname includes any of these paths and applies the style accordingly.
// apps/js/iite_components.js:24-30
const whitePages = [
'/iite/company',
'/iite/wep',
'/iite/relationship',
'/departments/overview',
'/inside/overview',
'/inside/ets.php'
];
Sources: apps/js/iite_components.js:24-34