Collectie site generator

[ikk]

Ik ben bezig met het schrijven van een scriptje, die een site genereert voor je collectie en waarvoor je alleen een excel file hoeft te vullen.
De gegenereerde site kan vervolgens gratis gehost worden op github of andere plekken waar je gratis html sites kunt hosten.
Het hele idee hiervan is om het zo makkelijk mogelijk te maken om een collectie site te maken en de meesten houden volgens mij toch al een xls bij van je collectie. Mijn huidige site (work in progress met bijna alleen gamecube titels) kun je hier zien.
De gegenereerde site bestaat uit een lijst pagina en voor elke titel een detail pagina.

Momenteel werkt het als volgt:
Het script zoekt een file genaamd "collection.xlsx" dus je kunt je eigen file hernoemen of je data in de bestaande file zetten.
In het eerste sheet van de xls wordt de eerste rij uitgelezen om de headers van de lijst pagina te vullen.
Als eerste header wordt "Titel" verwacht en als 2e "Platform" verder kun je zelf header invullen, maar alleen de eerste 7 headers worden in de lijst weergegeven, de rest alleen op de detailpagina's (mogelijk ga ik dit nog configureerbaar maken).
Wanneer er "date" of "datum" in de headernaam zit wordt er een datum verwacht en deze wordt geformat zodat erop gesorteerd kan worden.
Wanneer er "img" in de headernaam zit, wordt er een link naar een afbeelding verwacht om weer te geven op de detail pagina. Je kunt meerdere links invullen voor 1 titel.

In de 2e sheet staat een lijst met platforms (die je zelf kunt aanpassen), deze worden gebruikt als dropdown voor sheet 1 voor de kolom platforms. Deze lijst wordt ook gebruikt om op de lijstpagina een dropdown te vullen zodat op platform gefilterd kan worden.
De achtergrond kun je aanpassen in de index.css (staat in code\templates), pas de url aan achter "background: url". Misschien dat ik dit ook nog in een config file zet.

Als je het wil proberen kun je hier een zip downloaden. In de map code\executable staat een .exe file die de site genereerd. Vervolgens kun je je site zien door de index.html te openen.

En voor de geïnteresseerden is de code hier terug te vinden.

Mijn vraag aan jullie is, zou iemand dit uberhaupt gebruiken en zijn er nog dingen die je graag toegevoegd of anders zou willen zien?

[Sp33dFr34k]

Ziet er netjes uit hoor. Ik prefereer zelf php ipv (x)html ivm de flexibiliteit die je hebt (denk aan een online CMS), maar dit is wel ideaal voor mensen die niet zo technisch zijn op dit gebied. Excelbestandje invullen en klaar. Updaten doe je door middel van het excelbestandje aanvullen en weer het scriptje runnen?

[ikk]

Ziet er netjes uit hoor. Ik prefereer zelf php ipv (x)html ivm de flexibiliteit die je hebt (denk aan een online CMS), maar dit is wel ideaal voor mensen die niet zo technisch zijn op dit gebied. Excelbestandje invullen en klaar. Updaten doe je door middel van het excelbestandje aanvullen en weer het scriptje runnen?

Bedankt!
De reden dat ik voor (x)html heb gekozen is dat je dat gratis kunt hosten. Dit kon eerst nog via dropbox en google drive, maar die zijn er inmiddels mee gestopt, kwam ik achter nadat ik begonnen was... Gelukkig doet github nog aan gratis hosting, maar nadeel daarvan is dat je voor elke update alles weer moet pushen, dus als iemand een eenvoudigere optie heeft hoor ik het graag.
CMS opties zijn er al genoeg en zijn meer werk om te bouwen dan een python scriptje en wat templates. Daarbij wilde ik gewoon de lijst die ik toch al bijhield kunnen gebruiken in plaats van alles op meerdere plekken bijhouden.

Updaten is inderdaad een kwestie van excel aanpassen en scriptje runnen. Het script begint met een cleanup, dus alle bestaande detailpagina's worden verwijderd voordat alles opnieuw wordt gegenereert.

[Apenheul]

Werkt best wel mooi ook met die filters. Ik zou dit denk ik wel gebruiken als ik de motivatie nog op kon brengen om alles in een Excel te zetten

[toejam]

Ziet er absoluut netjes uit, mooi alternatief voor een CMS. Ik ben zelf ook de PHP-route gegaan, maar onderliggend is het gewoon een Excel-sheet in Dropbox die ik via PHP importeer. Belangrijkste voor mij was dat ik onderweg even snel kan checken of ik iets heb en ik welke staat.

Ik denk voor iemand die technisch niet zo onderlegd is en niet aan apps vast wil zitten is dit ideaal.

[Dr. Drips]

Ik gebruik Onedrive. Hier kan je een linkje van je spreadsheet maken en dan heb ik die gewoon aan een gratis dot TK url gehangen

[ikk]

Werkt best wel mooi ook met die filters. Ik zou dit denk ik wel gebruiken als ik de motivatie nog op kon brengen om alles in een Excel te zetten

Bedankt! Het vullen van de Excel kan ik helaas niet voor je automatiseren

Ziet er absoluut netjes uit, mooi alternatief voor een CMS. Ik ben zelf ook de PHP-route gegaan, maar onderliggend is het gewoon een Excel-sheet in Dropbox die ik via PHP importeer. Belangrijkste voor mij was dat ik onderweg even snel kan checken of ik iets heb en ik welke staat.

Ik denk voor iemand die technisch niet zo onderlegd is en niet aan apps vast wil zitten is dit ideaal.

Bedankt! Dat is ook een mooie oplossing, gewoon excel importeren en klaar. Wordt er tijdens het importeren nog meer met de data gedaan of wordt puur de excel weergegeven met wat formatting?

Ik gebruik Onedrive. Hier kan je een linkje van je spreadsheet maken en dan heb ik die gewoon aan een gratis dot TK url gehangen

Helaas zijn de meeste cloud services gestopt met het renderen van html en Onedrive lijkt dit ook niet te doen, dus ik moet nog is op zoek naar een handigere plek om gratis html te hosten. Voor nu voldoet het nog wel om github te gebruiken, maar het moet makkelijker kunnen dan de hele site pushen na elke update.

Dit weekend ga ik er weer mee verder en wil ik in ieder geval de volgende dingen implementeren:

• Zoekfunctie
• Duidelijkere scheiding tussen code en gegenereerde site, wss alles voor de site in een aparte map.
• Aantal zichtbare items in de lijst weergeven en updaten bij het filteren.
• Config file met; url voor de achtergrondafbeelding, aantal headers en de titel (ipv My collection).

Als iemand nog suggesties heeft hoor ik het graag.

[Apenheul]

In een (wellicht verre) toekomstige versie zouden tags wel fijn zijn. Dat je het genre kan taggen en je collectie op tags kan filteren.

Bv. SNES + PLATFORMER + KONAMI oid

[Dynamike]

Ik vind het er wel erg netjes uit zien hoor! Straks en overzichtelijk. Ik zou zelf, nu ik CLZ Games gebruik, niet zo snel meer overstappen, maar zeker leuk om te zien wat er nog allemaal bijkomt.

[toejam]

Ziet er absoluut netjes uit, mooi alternatief voor een CMS. Ik ben zelf ook de PHP-route gegaan, maar onderliggend is het gewoon een Excel-sheet in Dropbox die ik via PHP importeer. Belangrijkste voor mij was dat ik onderweg even snel kan checken of ik iets heb en ik welke staat.

Ik denk voor iemand die technisch niet zo onderlegd is en niet aan apps vast wil zitten is dit ideaal.

Bedankt! Dat is ook een mooie oplossing, gewoon excel importeren en klaar. Wordt er tijdens het importeren nog meer met de data gedaan of wordt puur de excel weergegeven met wat formatting?

Ik heb een tabel met de ruwe import en vervolgens een proces dat het in de 3e normaalvorm omzet naar een aantal subtabellen. Dan heb ik wat checks of ik niet ergens een typefout heb gemaakt in zo'n Excel-lijstje of dat ik per ongeluk een dubbele game heb ingevoerd.

Daarna heb ik me vooral op de output gericht:



Dit is een standaardtabel met een thead en een tbody die met CSS via een mediaquery op kleine devices zo wordt opgebouwd dat je altijd overzicht over de tabel hebt. Dat zoekvak gaat vanaf 3 karakters de html filteren via javascript, zoekt zowel op key als op titel. Met de zoek button zoek je in de hele database, ongeacht wat voor filters je verder hebt staan.

Het grootste probleem dat ik heb is dat het zoekdeel nogal geheugenintensief is. Mijn zoon heeft een androidtelefoon en die vindt het niet zo leuk om van de 1800 tabelrijen er 1797 hidden te moeten maken. Op mijn iPhone draait het allemaal wel vrij soepel tot dusver.

[ikk]

In een (wellicht verre) toekomstige versie zouden tags wel fijn zijn. Dat je het genre kan taggen en je collectie op tags kan filteren.

Bv. SNES + PLATFORMER + KONAMI oid

Bedankt voor je suggestie. Tags zouden wel kunnen als er nog een kolom in de excel gevuld wordt en gebruikt als dropdown voor de data kolommen. Vervolgens zouden er een aantal dropdowns bij moeten komen op de pagina om te filteren, hoewel dit ook dynamisch zou kunnen dus dat er een nieuwe dropdown verschijnt als de bestaande is ingevuld.
Dit zou wat meer excel kennis vergen van potentiele gebruikers en ik ben bang dat de layout dan rommelig wordt, vooral op mobiel.
Ik was voor nu van plan om de zoekfunctie op elk zichtbaar veld te laten zoeken, dus als je een genre of publisher kolom hebt kun je daar op zoeken. Dit icm de bestaande filter voor platforms zou je op 2 "tags" kunnen filteren zonder dat je iets extra's in de excel hoeft te vullen. Zou dat al voldoen?

Ik vind het er wel erg netjes uit zien hoor! Straks en overzichtelijk. Ik zou zelf, nu ik CLZ Games gebruik, niet zo snel meer overstappen, maar zeker leuk om te zien wat er nog allemaal bijkomt.

Bedankt! Ik gebruik zelf ook CLZ en de desktop applicatie werkt perfect. Het nadeel van CLZ vind ik dat je voor de collectie site zelf geen headers kunt kiezen en op mobiel vind ik de layout niet heel handig.

Ik heb een tabel met de ruwe import en vervolgens een proces dat het in de 3e normaalvorm omzet naar een aantal subtabellen. Dan heb ik wat checks of ik niet ergens een typefout heb gemaakt in zo'n Excel-lijstje of dat ik per ongeluk een dubbele game heb ingevoerd.

Daarna heb ik me vooral op de output gericht:



Dit is een standaardtabel met een thead en een tbody die met CSS via een mediaquery op kleine devices zo wordt opgebouwd dat je altijd overzicht over de tabel hebt. Dat zoekvak gaat vanaf 3 karakters de html filteren via javascript, zoekt zowel op key als op titel. Met de zoek button zoek je in de hele database, ongeacht wat voor filters je verder hebt staan.

Het grootste probleem dat ik heb is dat het zoekdeel nogal geheugenintensief is. Mijn zoon heeft een androidtelefoon en die vindt het niet zo leuk om van de 1800 tabelrijen er 1797 hidden te moeten maken. Op mijn iPhone draait het allemaal wel vrij soepel tot dusver.

Ziet er ook erg netjes uit! En ik haal er gelijk een goede tip uit om zsm de volledige excel erin te gooien zodat ik de performance kan testen van de filters, de sorteerfunctie en straks de zoekfunctie.

[ikk]

Kleine update; de zoekfunctie zit erin, het aantal zichtbare items wordt weergegeven, wat kleine bugs opgelost en ik heb de mappenstructuur wat overzichtelijker gemaakt, nu komt alles van de gegenereerde site in 1 map.

Link van de site en de link van het zipje voor als iemand het al wil testen.

[ikk]

Eindelijk weer is verder gegaan, aantal bugs gefixt, afbeeldingen clickable gemaakt en een config file geïmplementeerd.
Je kunt nu in de config file zelf de volgende instellingen aanpassen:

• Aantal weer te geven kolommen op de lijstpagina
• Datum format
• Achtergrond afbeelding
• Stock img voor spellen zonder afbeelding
• Titel van je collectie pagina
• Of afbeeldingen in een nieuwe tab geopent moeten worden.

Voorbeeld is hier te zien.
Link van het zipje.
Gewoon zip uitpakken, excel sheet vullen, config.txt aanpassen en fillTemplates.exe runnen.
Vervolgens krijg je een mapje genaamd "site" waarin je hele site staat (te openen dmv index.html).

Als iemand nog suggesties heeft of bugs vind heeft hoor ik het wel.

[Dynamike]

Begint er al slick uit te zien man. En werkt ook nog eens lekker snel. Tof dat je er aan blijft doorwerken. Enige is dat het op een mobieltje wel lastig bekijken is.

[ikk]

Begint er al slick uit te zien man. En werkt ook nog eens lekker snel. Tof dat je er aan blijft doorwerken. Enige is dat het op een mobieltje wel lastig bekijken is.

Zie je maar weer dat ik geen front-ender ben
Zal is een poging wagen om het er op kleine schermen ook normaal uit te laten zien.

[toejam]

Gewoon een stukje css met een media query, kind kan de was doen. Als je het voor kleine schermen met een omgeklapte tabel wil oplossen zoals ik je hierboven liet zien wil ik je die zelfs wel gewoon aanleveren

Ziet er puik uit verder. Gewoon goede functionaliteit, niet teveel toeters en bellen.

[ikk]

Gewoon een stukje css met een media query, kind kan de was doen. Als je het voor kleine schermen met een omgeklapte tabel wil oplossen zoals ik je hierboven liet zien wil ik je die zelfs wel gewoon aanleveren

Ziet er puik uit verder. Gewoon goede functionaliteit, niet teveel toeters en bellen.

Ik heb nog even met bootstrap geklooit en het ziet er al een stuk beter uit op mobiel (links oud, rechts nieuw):


Persoonlijk vind ik het zo wel acceptabel, maar als het je niet teveel moeite kost wil ik het nog wel proberen met een media query als je die kan aanleveren.

[toejam]

Bootstrap is feitelijk 1 grote media query, maar ook die heeft heel veel moeite met het schalen van tabellen.

Gooi dit in de style header of css-file en wonderen zouden moeten gebeuren

Code: Selecteer alles

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
		td:nth-of-type(1):before { content: "Titel"; }
		td:nth-of-type(2):before { content: "Platform"; }
		td:nth-of-type(3):before { content: "Completeness"; }
		td:nth-of-type(4):before { content: "Release date"; }
		td:nth-of-type(5):before { content: "Regio"; }		
		td:nth-of-type(6):before { content: "Notes"; }
		td:nth-of-type(7):before { content: "Played"; }
	}

/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 5px; 
			margin: 0; 
			width: 350px;
			font-size: 120%;
		}
		#input-filter {
			font-size:24px;
		}
		.input-filter-container {
			margin: 15px 0;
		}
	}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}

Je mist trouwens een table row in je thead

Code: Selecteer alles

<thead>
<tr> <<DEZE
								<!-- Hier komen alle tabel headers -->
								<th class="col-xs-2">Titel</th>
<th class="col-xs-2">Platform</th>
<th class="col-xs-2">Completeness</th>
<th class="col-xs-2">Release date</th>
<th class="col-xs-2">Regio</th>
<th class="col-xs-2">Notes</th>
<th class="col-xs-2">Played</th>
</tr> <<DEZE
							</thead>

[ikk]

Bedankt!
Heb het in de css gegooit en nog een beetje mee geprutst (en de missend tr toegevoegd...) met dit als resultaat:


En op de desktop:


Moet nog wat spelen met de positie van de zoekbalk, dropdown en titel/counter maar het begint wat te worden.
Scriptje moet ook weer aangepast worden om de labels te printen die nu hardcoded in de css staan, maar dat doe ik morgen wel ff

[toejam]

Ja dat heeft er mee te maken dat je feitelijk elke TD uit de TBODY een eigen LABEL geeft om hem mee te identificeren. Wat ik wel raar vind is dat de uitlijning van de rijen niet lijkt te kloppen. Ik zie in de css wel dat bootstrap er nog weer wat zaken op loslaat maar als ik die in de inspector uit zet wordt het er niet beter op.

[ikk]

Ja dat heeft er mee te maken dat je feitelijk elke TD uit de TBODY een eigen LABEL geeft om hem mee te identificeren. Wat ik wel raar vind is dat de uitlijning van de rijen niet lijkt te kloppen. Ik zie in de css wel dat bootstrap er nog weer wat zaken op loslaat maar als ik die in de inspector uit zet wordt het er niet beter op.

Heb voor nu het scriptje weer geupdate om de labels aan te maken in de css en vind de layout voorlopig wel prima zo.
Zal binnenkort eerst is een readme/tutorial schrijven en het zipje updaten en dan laat ik het voorlopig zo.
Eerst is de rest van mijn collectie op de foto zetten en de excel helemaal vullen voor ik ermee verder ga.

[ikk]

Ik had gisteren de mobiele layout gesloopt:doh:, dus die net weer ff gefixt en nog wat andere kleine layout wijzigingen gedaan.
Verder de readme geschreven en de zip geupdate dus persoonlijk vind ik hem zo gebruiksklaar en voorlopig gaat er niks meer aan wijzigen.

Laatste versie van de zip.

Mijn gegenereerde site.

En de code voor de geïnteresseerden.

Geen idee of iemand anders hem gaat gebruiken, maar het was een leuk en leerzaam projectje en ik heb zelf eindelijk mijn site
Iedereen die gereageerd heeft; bedankt voor de hulp en input

[toejam]

Ziet er puik uit zo, je hebt een mooi stukje software opgeleverd! En zelf ben je toch altijd de hoofdgebruiker van je eigen software