Zoek programma / manier voor browsen 100+ html files

[segil]

Mijn vraag

Ik zoek een programma / utility / methode waarmee ik eenvoudig 100+ offline html pagina's kan inzien. Liefst een soort van index.html waar ik door alle files kan bladeren en in het midden de inhoud van de html pagina zie. In een iframe ofzo. De html pagina's staan allemaal in 1 directory en zijn single page. Elke html bestand bevat een artikel van een bepaalde lengte. Ik wil graag deze artikelen lezen, en heen/weer bladeren. Liefst met een kolom aan de zijkant met alle titels, waar ik op kan klikken om snel naar die pagina te springen.
Optioneel: zoektermen gebruiken om een pagina te vinden.

Ik kan me van vroeger enkele programma's herinneren, met trainingsmateriaal. Dat was niet meer dan een index / start pagina, en in sub directories stonden (per hoofdstuk) diverse html pagina's, die dan geladen werden als je klikte op dat onderwerp.

Het mag een tool zijn die een index.html genereert. Of een browser add-on die dit kan.

Relevante software en hardware die ik gebruik

Windows / Firefox / Edge

Wat ik al gevonden of geprobeerd heb

10tallen zoekopdrachten. Chatgpt / co pilot. Ik krijg allemaal resultaat om zelf iets te bouwen in python. 1x een veelbelovende tip voor een tooltje genaamd "mass html viewer", maar die tool is offline gehaald.

[RaZ]

Als je via de command-prompt gewoon alle htlm's samenvoegd naar 1 bestand, ben je er toch ook?

type *.html > a.b
ren a.b grootbestand.html

Hoe dat er dan in je browser uitziet geen idee

[segil]

RaZ schreef op woensdag 12 juni 2024 @ 15:27:
Als je via de command-prompt gewoon alle htlm's samenvoegd naar 1 bestand, ben je er toch ook?

type *.html > a.b
ren a.b grootbestand.html

Hoe dat er dan in je browser uitziet geen idee

Ik betwijl zeer dat dat iets nuttigs, bruikbaars gaat opleveren
De html files bevatten wel CSS / plaatjes / opmaak /etc

[Juup]

Als je een beetje kan programmeren is dit super eenvoudig zelf in elkaar te zetten.

[segil]

Juup schreef op woensdag 12 juni 2024 @ 15:51:
Als je een beetje kan programmeren is dit super eenvoudig zelf in elkaar te zetten.

Ja dat kan ik alleen niet en ook geen tijd of interesse om me aan te leren.

[g0tanks]

Misschien dat je naar file managers kunt kijken met een preview pane. Bijvoorbeeld: https://www.xyplorer.com/

[SVMartin]

Niet getest, maar je kunt in elke browser toch file://<pad> doen? Krijg je dan niet een lijst van de html files, en dan kun je die stuk voor stuk openen in een nieuwe tab?

[JukeboxBill]

Ik denk dat je het moet zoeken bij een wysiwyg webeditor.
Lang geleden gebruikte ik Namo Web Editor en voor zo ver ik mij kan herinneren zaten daar wel wat slimme dingen in om bestaande pagina's te importeren in je eigen project.
Ook diverse basis dingen, zoals zoekvensters, waren eenvoudig te maken.

[DukeBox]

Anders alles 'printen' maar PDF en dan in PDF een page index maken?

[jeroen3]

Bedoel je https://www.httrack.com/ ?

[segil]

g0tanks schreef op woensdag 12 juni 2024 @ 16:18:
Misschien dat je naar file managers kunt kijken met een preview pane. Bijvoorbeeld: https://www.xyplorer.com/

Bedankt voor de tip. Ik heb die gauw bekeken. Kan inderdaad in een preview window, al wordt de pagina raar genoeg in het zwart weergegeven. En het laden duurt meerdere seconden. Maar daar valt wellicht wel mee te leven, als ik die zwarte kleur weg kan krijgen.

SVMartin schreef op woensdag 12 juni 2024 @ 17:02:
Niet getest, maar je kunt in elke browser toch file://<pad> doen? Krijg je dan niet een lijst van de html files, en dan kun je die stuk voor stuk openen in een nieuwe tab?

Ja, misschien is het wel zoiets simpels als dit. Niet helemaal wat ik voor ogen had, maar door enkele pagina's tegelijk te openen en die te sluiten als ik het gelezen heb, kan het misschien wel werken.

JukeboxBill schreef op woensdag 12 juni 2024 @ 17:30:
Ik denk dat je het moet zoeken bij een wysiwyg webeditor.
Lang geleden gebruikte ik Namo Web Editor en voor zo ver ik mij kan herinneren zaten daar wel wat slimme dingen in om bestaande pagina's te importeren in je eigen project.
Ook diverse basis dingen, zoals zoekvensters, waren eenvoudig te maken.

Bedankt voor de tip.... Dit zijn 100+ html pagina's van elke zo'n 100 KB in grootte. Ik vraag me af hoe makkelijk dat importeren gaat.

DukeBox schreef op woensdag 12 juni 2024 @ 17:37:
Anders alles 'printen' maar PDF en dan in PDF een page index maken?

Nee, de opmaak van de html pagine is echt niet print friendly. Bedankt voor de tip.

jeroen3 schreef op woensdag 12 juni 2024 @ 17:38:
Bedoel je https://www.httrack.com/ ?

Die ken ik nog niet, zal eens kijken. Bedankt.

[g0tanks]

jeroen3 schreef op woensdag 12 juni 2024 @ 17:38:
Bedoel je https://www.httrack.com/ ?

Met die tool kan je een online website omzet in een verzameling html-bestanden voor offline gebruik. Dat lijkt mij hier niet aan de orde.

[Z-Dragon]

Mass HTML Viewer is hier nog te downloaden.

[segil]

Z-Dragon schreef op woensdag 12 juni 2024 @ 22:21:
Mass HTML Viewer is hier nog te downloaden.

Tof, dat je die hebt kunnen vinden! Super!
Gelijk geprobeerd, maar het lijkt erop dat een oudere engine wordt gebruikt, want de pagina's zijn onleesbaar
Toch kudo's voor het vinden!

[Z-Dragon]

Dat klopt; is van binnen gewoon IE11.

[Falcon]

VSCode met "HTML Preview" extensie kan het denk ik wel. Ik weet alleen even niet hoe je het zo kan zetten dat hij automatisch de preview weergeeft ipv de HTML code.

[F_J_K]

segil schreef op woensdag 12 juni 2024 @ 15:34:
[...]


Ik betwijl zeer dat dat iets nuttigs, bruikbaars gaat opleveren
De html files bevatten wel CSS / plaatjes / opmaak /etc

CSS, plaatjes etc worden daar toch gewoon weggelaten uit de lijst? Ik neem aan dat je het even hebt geprobeerd, wat mis je?

Juist bij file://<pad> zie je ook de onderliggende bestanden die je niet wilt zien.

[ Voor 10% gewijzigd door F_J_K op 13-06-2024 11:03 ]

[Z-Dragon]

Ik dacht zelf snel wat in elkaar te draaien, maar heb eerst eens gekeken wat ChatGPT ervan wist te maken. Dat ging wonderbaarlijk genoeg in een keer vrijwel helemaal goed. Hier een PowerShell-scriptje om een index.html te genereren. Open bijvoorbeeld PowerShell ISE, navigeer onder in de console naar de map met je bestanden, plak bovenin het script (eerst Nieuw kiezen) en draai het.

PowerShell:

Add-Type -AssemblyName System.Web

# Define the directory to search for HTML files
$directory = Get-Location

# Define where to write the output
$indexFilePath = Join-Path -Path $directory -ChildPath "index.html"

# Delete previous output if it exists, so it won't be indexed
if (Test-Path $indexFilePath) {
    Remove-Item $indexFilePath
}

# Get all HTML files in the directory
$htmlFiles = Get-ChildItem -Path $directory -Filter *.htm* -File

# Initialize an array to hold the title and filename
$pages = @()

# Loop through each file and extract the title
foreach ($file in $htmlFiles) {
    $content = Get-Content -Path $file.FullName -Raw
    if ($content -match "<title>(.*?)</title>") {
        $title = $matches[1]
    } else {
        $title = "No Title"
    }
    # Encode the file name for URLs
    $encodedFileName = [System.Web.HttpUtility]::UrlPathEncode($file.Name)
    $pages += [PSCustomObject]@{
        Title = $title
        FileName = $encodedFileName
    }
}

# Create the index.html content
$indexContent = @"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style>
        body { display: flex; }
        #titles { width: 30%; padding: 10px; border-right: 1px solid #ccc; }
        #iframe-container { flex-grow: 1; }
        a { display: block; margin: 5px 0; }
    </style>
</head>
<body>
    <div id="titles">
        <h2>Pages</h2>
"@

# Add each title to the index.html content
foreach ($page in $pages) {
    $indexContent += "        <a href='$($page.FileName)' target='contentFrame'>$($page.Title)</a>`n"
}

# Complete the index.html content
$indexContent += @"
    </div>
    <div id="iframe-container">
        <iframe name="contentFrame" style="width: 100%; height: 100vh; border: none;"></iframe>
    </div>
</body>
</html>
"@

# Write the index.html file
Set-Content -Path $indexFilePath -Value $indexContent

Voor geïnteresseerden, dit was de prompt: 'Write a PowerShell script that looks for HTM(L) files in the same directory, determines the title of each page, then produces an index.html that has a list of titles on the left and an iframe on the right where clicking a title loads the given file into the iframe. Make sure it works with filenames that contain special characters.' Vervolgens nog minimale handmatige aanpassingen, zoals het importeren van de benodigde module en het verwijderen van eerdere output.

[ Voor 9% gewijzigd door Z-Dragon op 13-06-2024 11:46 ]

[segil]

Z-Dragon schreef op donderdag 13 juni 2024 @ 11:34:
Ik dacht zelf snel wat in elkaar te draaien, maar heb eerst eens gekeken wat ChatGPT ervan wist te maken. Dat ging wonderbaarlijk genoeg in een keer vrijwel helemaal goed. Hier een PowerShell-scriptje om een index.html te genereren. Open bijvoorbeeld PowerShell ISE, navigeer onder in de console naar de map met je bestanden, plak bovenin het script (eerst Nieuw kiezen) en draai het.

PowerShell:

Add-Type -AssemblyName System.Web

# Define the directory to search for HTML files
$directory = Get-Location

# Define where to write the output
$indexFilePath = Join-Path -Path $directory -ChildPath "index.html"

# Delete previous output if it exists, so it won't be indexed
if (Test-Path $indexFilePath) {
    Remove-Item $indexFilePath
}

# Get all HTML files in the directory
$htmlFiles = Get-ChildItem -Path $directory -Filter *.htm* -File

# Initialize an array to hold the title and filename
$pages = @()

# Loop through each file and extract the title
foreach ($file in $htmlFiles) {
    $content = Get-Content -Path $file.FullName -Raw
    if ($content -match "<title>(.*?)</title>") {
        $title = $matches[1]
    } else {
        $title = "No Title"
    }
    # Encode the file name for URLs
    $encodedFileName = [System.Web.HttpUtility]::UrlPathEncode($file.Name)
    $pages += [PSCustomObject]@{
        Title = $title
        FileName = $encodedFileName
    }
}

# Create the index.html content
$indexContent = @"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <style>
        body { display: flex; }
        #titles { width: 30%; padding: 10px; border-right: 1px solid #ccc; }
        #iframe-container { flex-grow: 1; }
        a { display: block; margin: 5px 0; }
    </style>
</head>
<body>
    <div id="titles">
        <h2>Pages</h2>
"@

# Add each title to the index.html content
foreach ($page in $pages) {
    $indexContent += "        <a href='$($page.FileName)' target='contentFrame'>$($page.Title)</a>`n"
}

# Complete the index.html content
$indexContent += @"
    </div>
    <div id="iframe-container">
        <iframe name="contentFrame" style="width: 100%; height: 100vh; border: none;"></iframe>
    </div>
</body>
</html>
"@

# Write the index.html file
Set-Content -Path $indexFilePath -Value $indexContent

Voor geïnteresseerden, dit was de prompt: 'Write a PowerShell script that looks for HTM(L) files in the same directory, determines the title of each page, then produces an index.html that has a list of titles on the left and an iframe on the right where clicking a title loads the given file into the iframe. Make sure it works with filenames that contain special characters.' Vervolgens nog minimale handmatige aanpassingen, zoals het importeren van de benodigde module en het verwijderen van eerdere output.

Ow dat is helemaal gaaf! Ik had ook lopen spelen met chat, maar kreeg (blijkbaar) niet de juiste prompt voor elkaar. Bedankt, dit is helemaal wat ik zocht!

Update: ik was benieuwd of dezelfde prompt ook leidt tot dezelfde output. Ik krijg nu wel een ander script, die ongeveer hetzelfde doet, alleen is de iframe slechts half hoog, waarin de html wordt getoond. Minder handig dan de versie die jij had gegenereerd.

[ Voor 3% gewijzigd door segil op 14-06-2024 10:47 ]