
Per un progetto che sto seguendo ho avuto la necessità di integrare la vista "code" di github dentro una pagina web in modo che sia sempre sincronizzata con ciò che viene pubblicato su GitHub. Inizialmente sembrava una procedura semplice, ma dopo un po' mi sono accorto che la questione era più complicata di quello sembrava. La soluzione che ho trovato è un po' articolata ma non complicata, con un po' di impegno si riesce a raggiungere l'obiettivo preposto, facendo funzionare il tutto cross site (da Firefox 27 in poi lo script deve risiedere sullo stesso dominio). Ringrazio Alessandro Amp Popolizio, Domingo Sarmiento Lupo, Marco Pragliola per avermi indirizzato sulla strada giusta :D
Lato server
Bisogna predisporre due file dentro una cartella sul server web: "index.php" e ".htaccess". Il file ".htaccess" ha la funzione di rewriting e passa come parametro tutto quello che c'è nell'url. Il filne "index.php" recupera il file che vogliamo includere e lo restituisce in formato javascript, così lo possiamo includere in qualsiasi dominio. Di seguito i due file da scrivere sul server.
index.php
<?php // la cratella dove è installato lo script php $cartella_script = '/GitWrapper/'; //tolgo la cartella dalla REQUEST_URI altrimenti non funziona la regola in .htaccess $_SERVER['REQUEST_URI'] = str_replace($cartella_script , '', $_SERVER['REQUEST_URI']); // sistemo la REQUEST_URI per github $_SERVER['REQUEST_URI'] = str_replace('blob/' , '', $_SERVER['REQUEST_URI']); $_SERVER['REQUEST_URI'] = str_replace('https://github.com/' , 'https://raw.github.com/', $_SERVER['REQUEST_URI']); // recupero il file $ch = curl_init(); $timeout = 5; curl_setopt($ch, CURLOPT_URL, $_SERVER['REQUEST_URI']); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $data = curl_exec($ch); curl_close($ch); // nel javascript non ci devono essere CR altrimenti si blocca $data = str_replace("\r", "\\r", $data); $data = str_replace("\n", "\\n", $data); // recupero l'estensione $estensione = end(explode( '.', $_SERVER['REQUEST_URI'] )); // in caso di script php if ($estensione == 'php') $data = str_replace("<?php", "<?php", $data); // sistemo gli apici $data = str_replace("'", "\'", $data); // imposto il Content-Type header ("Content-Type: text/javascript"); // scrivo nella pagina echo 'document.write( \'<pre class="brush: '.$estensione.'">'.$data.'</pre>\');';
.htaccess
ErrorDocument 400 :) ErrorDocument 401 :) ErrorDocument 402 :) ErrorDocument 403 ;) ErrorDocument 404 :) ErrorDocument 500 :) # Opzioni rewriting Options All -Indexes RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^ index.php [L]
Nella pagina web
Nella pagina web bisogna predisporre tutti i file css e js per far funzionare questo plugin http://alexgorbatchev.com/SyntaxHighlighter/. Nella pagina html bisogna inserire il successivo codice:
<script src="http://tuo_dominio.tld/GitWrapper/indirizzo_della_pagina_in_cui_e_contenuto_il_codice"></script>
L'attributo "src" va valorizzato con l'url dove si trova lo script seguito dall'url dove si trova il codice da importare. Un esempio, se vogliamo visualizzare il codice contenuto in questa pagina: https://github.com/symfony/.../HttpKernel.php
<script src="http://arturu.it/GitWrapper/https://github.com/symfony/symfony/blob/master/src/Symfony/Component/HttpKernel/HttpKernel.php"></script>
e verrà visualizzato nel seguente modo
Dato che nella pagina web si inserisce il tag script il tutto funzionerà cross site.