feat: sidebar de navigation mode dossier + permission set-title
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Pena — Markdown Viewer</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="view-home">
|
||||
<h1 class="home-title">Pena</h1>
|
||||
<div class="home-buttons">
|
||||
<button id="btn-open-file">Ouvrir un fichier Markdown</button>
|
||||
<button id="btn-open-dir">Ouvrir un dossier wiki</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="view-reader" class="hidden">
|
||||
<aside id="sidebar" class="sidebar">
|
||||
<!-- contenu généré par JS -->
|
||||
</aside>
|
||||
<div id="content" class="content">
|
||||
<!-- contenu généré par JS -->
|
||||
</div>
|
||||
<button id="btn-back" class="btn-back">← Accueil</button>
|
||||
</div>
|
||||
|
||||
<script src="main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
+176
@@ -0,0 +1,176 @@
|
||||
let currentPath = null;
|
||||
let currentMode = null; // 'file' | 'dir'
|
||||
|
||||
const viewHome = document.getElementById('view-home');
|
||||
const viewReader = document.getElementById('view-reader');
|
||||
const sidebar = document.querySelector('#sidebar');
|
||||
const content = document.querySelector('#content');
|
||||
|
||||
function showHome() {
|
||||
viewReader.classList.add('hidden');
|
||||
viewHome.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function showReader() {
|
||||
viewHome.classList.add('hidden');
|
||||
viewReader.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function buildSidebar(baseDir, files, currentFile) {
|
||||
const sep = baseDir.includes('\\') ? '\\' : '/';
|
||||
const dirName = baseDir.split(sep).pop();
|
||||
const prefix = baseDir.endsWith(sep) ? baseDir : baseDir + sep;
|
||||
const toRel = abs => abs.startsWith(prefix) ? abs.slice(prefix.length) : abs;
|
||||
const baseName = rel => rel.split(sep).pop();
|
||||
const currentRel = currentFile ? toRel(currentFile) : null;
|
||||
|
||||
const groups = new Map();
|
||||
for (const f of files) {
|
||||
const rel = toRel(f);
|
||||
const parts = rel.split(sep);
|
||||
const group = parts.length > 1 ? parts[0] : '';
|
||||
if (!groups.has(group)) groups.set(group, []);
|
||||
groups.get(group).push({ rel, abs: f });
|
||||
}
|
||||
|
||||
const sortedGroups = [...groups.keys()].sort((a, b) => {
|
||||
if (a === '') return -1;
|
||||
if (b === '') return 1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
let html = `<div class="sidebar__title-block">
|
||||
<h1 class="sidebar__title-block__title">${escapeHtml(dirName)}</h1>
|
||||
</div>
|
||||
<ul class="sidebar__menu">`;
|
||||
|
||||
for (const group of sortedGroups) {
|
||||
const pages = groups.get(group).slice().sort((a, b) => a.rel.localeCompare(b.rel));
|
||||
|
||||
if (group !== '') {
|
||||
html += `
|
||||
<li class="sidebar__menu__first-level-title">
|
||||
<span class="sidebar__menu__group-label">${escapeHtml(group)}</span>
|
||||
<ul class="sidebar__menu__second-level">`;
|
||||
for (const { rel, abs } of pages) {
|
||||
const label = baseName(rel).replace(/\.md$/i, '').replace(/-/g, ' ');
|
||||
const cls = rel === currentRel ? ' active' : '';
|
||||
html += `
|
||||
<li class="sidebar__menu__second-level-title">
|
||||
<a href="#" class="sidebar__menu__second-level-title__link${cls}" data-path="${escapeHtml(abs)}">${escapeHtml(label)}</a>
|
||||
</li>`;
|
||||
}
|
||||
html += `
|
||||
</ul>
|
||||
</li>`;
|
||||
} else {
|
||||
for (const { rel, abs } of pages) {
|
||||
const label = baseName(rel).replace(/\.md$/i, '').replace(/-/g, ' ');
|
||||
const cls = rel === currentRel ? ' active' : '';
|
||||
html += `
|
||||
<li class="sidebar__menu__first-level-title">
|
||||
<a href="#" class="sidebar__menu__first-level-title__link${cls}" data-path="${escapeHtml(abs)}">${escapeHtml(label)}</a>
|
||||
</li>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html += `
|
||||
</ul>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderSidebar(baseDir, files, currentFile) {
|
||||
sidebar.innerHTML = buildSidebar(baseDir, files, currentFile);
|
||||
sidebar.querySelectorAll('a[data-path]').forEach(a => {
|
||||
a.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
loadPage(a.dataset.path);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function loadPage(filePath) {
|
||||
try {
|
||||
const html = await window.__TAURI__.core.invoke('convert_file', { path: filePath });
|
||||
content.innerHTML = html;
|
||||
|
||||
const basename = filePath.split('/').pop().split('\\').pop();
|
||||
const title = basename.replace(/\.md$/i, '');
|
||||
await window.__TAURI__.window.getCurrentWindow().setTitle(title);
|
||||
|
||||
if (currentMode === 'dir') {
|
||||
sidebar.querySelectorAll('a').forEach(a => {
|
||||
a.classList.toggle('active', a.dataset.path === filePath);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
content.innerHTML = `<p class="error">Impossible de charger le fichier : ${err}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function openPath(path, mode) {
|
||||
currentPath = path;
|
||||
currentMode = mode;
|
||||
|
||||
if (mode === 'file') {
|
||||
sidebar.innerHTML = '';
|
||||
sidebar.classList.add('hidden');
|
||||
content.style.marginLeft = '0';
|
||||
showReader();
|
||||
await loadPage(path);
|
||||
return;
|
||||
}
|
||||
|
||||
// mode === 'dir'
|
||||
sidebar.classList.remove('hidden');
|
||||
content.style.marginLeft = '';
|
||||
|
||||
try {
|
||||
const files = await window.__TAURI__.core.invoke('list_md_files', { dir: path });
|
||||
showReader();
|
||||
|
||||
const sep = path.includes('\\') ? '\\' : '/';
|
||||
const home = files.find(f => {
|
||||
const name = f.split(sep).pop();
|
||||
return name === 'Home.md' || name === 'home.md';
|
||||
});
|
||||
|
||||
const firstFile = home ?? files[0];
|
||||
renderSidebar(path, files, firstFile);
|
||||
await loadPage(firstFile);
|
||||
} catch (err) {
|
||||
showReader();
|
||||
content.innerHTML = `<p class="error">Impossible d'ouvrir le dossier : ${err}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('btn-open-file').addEventListener('click', async () => {
|
||||
const selected = await window.__TAURI__.dialog.open({
|
||||
multiple: false,
|
||||
filters: [{ name: 'Markdown', extensions: ['md'] }],
|
||||
});
|
||||
if (selected == null) return;
|
||||
await openPath(selected, 'file');
|
||||
});
|
||||
|
||||
document.getElementById('btn-open-dir').addEventListener('click', async () => {
|
||||
const selected = await window.__TAURI__.dialog.open({ directory: true });
|
||||
if (selected == null) return;
|
||||
await openPath(selected, 'dir');
|
||||
});
|
||||
|
||||
document.getElementById('btn-back').addEventListener('click', () => {
|
||||
currentPath = null;
|
||||
currentMode = null;
|
||||
sidebar.innerHTML = '';
|
||||
showHome();
|
||||
});
|
||||
+263
@@ -0,0 +1,263 @@
|
||||
/* ── Reset ── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
::selection { background: #ffc3c3; }
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: #1a1b2e;
|
||||
color: #222;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── Utility ── */
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ── Home view ── */
|
||||
#view-home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: #1a1b2e;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
color: #fff;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 48px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.home-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.home-buttons button {
|
||||
background: #ff5577;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 14px 24px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.home-buttons button:hover {
|
||||
background: #ff3355;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.home-buttons button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 264px;
|
||||
height: 100vh;
|
||||
background: #1a1b2e;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar__title-block {
|
||||
margin: 48px 24px 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar__title-block a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.sidebar__title-block__title {
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 4px;
|
||||
line-height: 1.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sidebar__title-block__version {
|
||||
color: rgba(255,255,255,0.3);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* ── Sidebar menu ── */
|
||||
.sidebar__menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 8px 0 48px 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar__menu::-webkit-scrollbar { width: 0; }
|
||||
|
||||
.sidebar__menu__group-label {
|
||||
display: block;
|
||||
padding: 16px 24px 6px;
|
||||
color: rgba(255,255,255,0.35);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.sidebar__menu__first-level-title { margin: 0; }
|
||||
.sidebar__menu__first-level-title__link {
|
||||
display: block;
|
||||
padding: 7px 24px;
|
||||
color: rgba(255,255,255,0.85);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.sidebar__menu__first-level-title__link:hover { color: #ff5577; }
|
||||
.sidebar__menu__first-level-title__link.active {
|
||||
color: #ff5577;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar__menu__second-level { list-style: none; padding: 0; margin: 0; }
|
||||
.sidebar__menu__second-level-title { margin: 0; }
|
||||
.sidebar__menu__second-level-title__link {
|
||||
display: block;
|
||||
padding: 5px 24px 5px 36px;
|
||||
color: rgba(255,255,255,0.55);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.sidebar__menu__second-level-title__link:hover { color: #ff5577; }
|
||||
.sidebar__menu__second-level-title__link.active {
|
||||
color: #ff5577;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Content ── */
|
||||
.content {
|
||||
margin-left: 264px;
|
||||
padding: 48px 72px 96px;
|
||||
max-width: 1080px;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ── Typography ── */
|
||||
.content a { color: #0000ee; text-decoration: none; transition: color 0.16s; }
|
||||
.content a:hover { color: #ff5577; }
|
||||
.content a:visited { color: #551a8b; }
|
||||
.content a:visited:hover { color: #ff5577; }
|
||||
|
||||
.content h1, .content h2, .content h3,
|
||||
.content h4, .content h5, .content h6 {
|
||||
color: #222;
|
||||
margin-top: 48px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.content h1 { font-size: 2em; margin-top: 0; }
|
||||
.content h2 { font-size: 1.5em; }
|
||||
.content h3 { font-size: 1.25em; }
|
||||
|
||||
.content hr { margin: 72px 0; border: none; border-top: 1px solid rgba(34,34,34,0.15); }
|
||||
|
||||
.content p { color: #222; font-size: 1em; line-height: 1.64em; margin: 0 0 1em; }
|
||||
|
||||
.content code {
|
||||
font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 85%;
|
||||
font-weight: 700;
|
||||
background: #f4f4f7;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.content pre { background: #f4f4f7; padding: 20px 24px; border-radius: 6px; overflow-x: auto; margin: 16px 0; }
|
||||
.content pre code { background: none; padding: 0; font-weight: 400; font-size: 13px; }
|
||||
|
||||
.content blockquote {
|
||||
border-left: 3px solid rgba(34,34,34,0.25);
|
||||
margin: 24px 0;
|
||||
padding: 4px 24px;
|
||||
color: rgba(34,34,34,0.65);
|
||||
}
|
||||
|
||||
.content img { max-width: 100%; margin: 8px 0; }
|
||||
|
||||
.content table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 24px 0 48px;
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
}
|
||||
.content table th {
|
||||
border-bottom: 1px solid #ff5577;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
.content table td {
|
||||
border-bottom: 1px solid rgba(255,85,119,0.25);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content ul li, .content ol li {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.64em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.content ul li code, .content ol li code { font-weight: 700; }
|
||||
|
||||
/* ── Back button ── */
|
||||
.btn-back {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
width: 264px;
|
||||
background: transparent;
|
||||
color: rgba(255,255,255,0.45);
|
||||
border: none;
|
||||
padding: 8px 24px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: color 0.2s;
|
||||
z-index: 100;
|
||||
}
|
||||
.btn-back:hover { color: #ff5577; }
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media screen and (max-width: 1020px) {
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
transition: left 0.2s cubic-bezier(0.09, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.content { margin-left: 0; padding: 32px 24px 64px; }
|
||||
}
|
||||
@media screen and (max-width: 540px) {
|
||||
.content { padding: 24px 16px 48px; }
|
||||
}
|
||||
Reference in New Issue
Block a user