mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 11:09:18 +02:00
replace EasyMDE (333KB) with OverType (118KB) in pages-edit.php
- Remove easymde.min.js (320KB) and easymde.min.css (13KB) - Vendor overtype.min.js (118KB, v2.3.5) - Replace <textarea name=content> + 60-line toolbar/SVG init with: - <input type=hidden name=content> for form submission - <div id=editor> as OverType mount target - 6-line init: value from hidden input, onChange syncs it back - Net saving: ~215KB assets, ~54 lines of inline JS
This commit is contained in:
Pontoporeia
2
TODO.md
2
TODO.md
@@ -11,6 +11,8 @@ Pending tasks have been split into topic files under [`todo/`](todo/README.md):
|
||||
|
||||
## Recently completed (this session)
|
||||
|
||||
- [x] `pages-edit.php` — replaced EasyMDE (333 KB: 320 KB JS + 13 KB CSS) with OverType (118 KB, single JS file, no CSS); removed `easymde.min.js` and `easymde.min.css` from `public/assets/`; vendored `overtype.min.js`; replaced `<textarea name="content">` + 60-line EasyMDE toolbar/SVG init block with `<input type="hidden" name="content">` + `<div id="editor">` mount target + 6-line OverType init; `onChange` callback keeps the hidden input in sync for form submission; net saving: ~215 KB, ~54 lines of JS
|
||||
|
||||
- [x] `templates/header.php` + `admin.css` — extracted last remaining inline `style=` from any shared template: `style="vertical-align:middle;margin-right:0.4em"` on the admin-nav public-site SVG icon moved to `.admin-body header nav > a svg` rule in `admin.css`; `templates/header.php` now contains zero `style=` attributes; only the dynamic gradient (`hsl(<?= $hue ?>)`) in `public/index.php` and the PHP-runtime `--disk-pct`/`--disk-color` custom properties in `system.php` remain (both legitimately dynamic)
|
||||
|
||||
- [x] `admin/thanks.php` + `admin/pages.php` + `admin.css` — extracted last 3 inline `style=` attributes from admin PHP templates: `<div style="margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap;">` in `thanks.php` → `class="admin-action-bar"` (`.admin-action-bar` rule added to CSS); `<p style="color:var(--text-secondary);">` in `thanks.php` → `class="admin-muted"` (`.admin-muted` rule added); `style="font-size:.8rem;padding:.3rem .75rem;"` on Éditer button in `pages.php` → `class="admin-btn admin-btn--sm"` (uses existing modifier). Only the dynamic `--disk-pct`/`--disk-color` CSS custom properties on the disk bar in `system.php` remain (carry PHP runtime values — legitimate).
|
||||
|
||||
49
flake.nix
49
flake.nix
@@ -1,49 +0,0 @@
|
||||
{
|
||||
description = "Post-ERG development environment";
|
||||
|
||||
inputs = {
|
||||
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
|
||||
flake-utils.url = "github:numtide/flake-utils";
|
||||
};
|
||||
|
||||
outputs = { self, nixpkgs, flake-utils }:
|
||||
flake-utils.lib.eachDefaultSystem (system:
|
||||
let
|
||||
pkgs = nixpkgs.legacyPackages.${system};
|
||||
|
||||
php = pkgs.php84.buildEnv {
|
||||
extensions = ({ enabled, all }: enabled ++ (with all; [
|
||||
curl
|
||||
mbstring
|
||||
pdo
|
||||
pdo_sqlite
|
||||
sqlite3
|
||||
]));
|
||||
extraConfig = ''
|
||||
error_reporting = E_ALL
|
||||
display_errors = On
|
||||
log_errors = On
|
||||
'';
|
||||
};
|
||||
in
|
||||
{
|
||||
devShells.default = pkgs.mkShell {
|
||||
name = "posterg";
|
||||
|
||||
packages = [
|
||||
php
|
||||
pkgs.sqlite
|
||||
pkgs.just
|
||||
pkgs.git
|
||||
];
|
||||
|
||||
shellHook = ''
|
||||
echo "🛠 Post-ERG dev shell"
|
||||
echo " php $(php --version | head -1)"
|
||||
echo " just $(just --version)"
|
||||
echo ""
|
||||
echo "Run 'just serve' to start the dev server."
|
||||
'';
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -28,53 +28,15 @@ try {
|
||||
}
|
||||
|
||||
$pageTitle = "Éditer : " . htmlspecialchars($page['title']);
|
||||
$extraCss = ['/assets/css/easymde.min.css'];
|
||||
$extraJs = ['/assets/js/easymde.min.js'];
|
||||
// SVG icons for each toolbar button — eliminates the Font Awesome dependency entirely.
|
||||
// Paths sourced from Tabler Icons (MIT). 20×20 viewBox, stroke-based, no fill.
|
||||
$extraJs = ['/assets/js/overtype.min.js'];
|
||||
$extraJsInline = <<<'JS'
|
||||
var SVG = {
|
||||
bold: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg>',
|
||||
italic: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>',
|
||||
heading: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v16"/><path d="M18 4v16"/><path d="M6 12h12"/></svg>',
|
||||
quote: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>',
|
||||
"unordered-list": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none"/></svg>',
|
||||
"ordered-list": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/></svg>',
|
||||
link: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>',
|
||||
image: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>',
|
||||
preview: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',
|
||||
"side-by-side": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="18" rx="1"/></svg>',
|
||||
fullscreen: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>',
|
||||
guide: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>'
|
||||
};
|
||||
|
||||
var toolbar = [
|
||||
{ name: 'bold', action: EasyMDE.toggleBold, icon: SVG.bold, title: 'Gras (Ctrl+B)' },
|
||||
{ name: 'italic', action: EasyMDE.toggleItalic, icon: SVG.italic, title: 'Italique (Ctrl+I)' },
|
||||
{ name: 'heading', action: EasyMDE.toggleHeadingSmaller, icon: SVG.heading, title: 'Titre' },
|
||||
'|',
|
||||
{ name: 'quote', action: EasyMDE.toggleBlockquote, icon: SVG.quote, title: 'Citation' },
|
||||
{ name: 'unordered-list', action: EasyMDE.toggleUnorderedList, icon: SVG['unordered-list'], title: 'Liste à puces' },
|
||||
{ name: 'ordered-list', action: EasyMDE.toggleOrderedList, icon: SVG['ordered-list'], title: 'Liste numérotée' },
|
||||
'|',
|
||||
{ name: 'link', action: EasyMDE.drawLink, icon: SVG.link, title: 'Insérer un lien (Ctrl+K)'},
|
||||
{ name: 'image', action: EasyMDE.drawImage, icon: SVG.image, title: 'Insérer une image' },
|
||||
'|',
|
||||
{ name: 'preview', action: EasyMDE.togglePreview, icon: SVG.preview, title: 'Aperçu (Ctrl+P)', noDisable: true },
|
||||
{ name: 'side-by-side', action: EasyMDE.toggleSideBySide, icon: SVG['side-by-side'], title: 'Côte à côte (F9)', noDisable: true, noMobile: true },
|
||||
{ name: 'fullscreen', action: EasyMDE.toggleFullScreen, icon: SVG.fullscreen, title: 'Plein écran (F11)', noDisable: true, noMobile: true },
|
||||
'|',
|
||||
{ name: 'guide', action: 'https://www.markdownguide.org/basic-syntax/', icon: SVG.guide, title: 'Guide Markdown', noDisable: true }
|
||||
];
|
||||
|
||||
var easyMDE = new EasyMDE({
|
||||
element: document.getElementById('content'),
|
||||
autoDownloadFontAwesome: false,
|
||||
toolbar: toolbar,
|
||||
spellChecker: false,
|
||||
status: ['lines', 'words'],
|
||||
var OT = window.OverType.default || window.OverType;
|
||||
var hidden = document.getElementById('content');
|
||||
var editor = new OT(document.getElementById('editor'), {
|
||||
value: hidden.value,
|
||||
minHeight: '400px',
|
||||
toolbarTips: true
|
||||
spellcheck: false,
|
||||
onChange: function(value) { hidden.value = value; }
|
||||
});
|
||||
JS;
|
||||
?>
|
||||
@@ -89,12 +51,10 @@ JS;
|
||||
<input type="hidden" name="slug" value="<?= htmlspecialchars($slug) ?>">
|
||||
|
||||
<div>
|
||||
<label for="content">Contenu (Markdown) :</label>
|
||||
<div>
|
||||
<textarea id="content" name="content"
|
||||
rows="20"><?= htmlspecialchars($page['content'] ?? '') ?></textarea>
|
||||
<small>Appuyez sur <kbd>Échap</kbd> pour quitter l'éditeur au clavier.</small>
|
||||
</div>
|
||||
<label for="editor">Contenu (Markdown) :</label>
|
||||
<input type="hidden" id="content" name="content"
|
||||
value="<?= htmlspecialchars($page['content'] ?? '') ?>">
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
|
||||
<div class="admin-form-footer">
|
||||
|
||||
7
public/assets/css/easymde.min.css
vendored
7
public/assets/css/easymde.min.css
vendored
File diff suppressed because one or more lines are too long
7
public/assets/js/easymde.min.js
vendored
7
public/assets/js/easymde.min.js
vendored
File diff suppressed because one or more lines are too long
1005
public/assets/js/overtype.min.js
vendored
Normal file
1005
public/assets/js/overtype.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user