Merge branch 'route-i18n'

.gitignore

 
 \.DS_Store
+
+/vendor/

.gitlab-ci.yml

-image: hiorgserver/docker-lftp
+image: axelterizaki/karaokemugen-portal-cicd
 
 deploy:
   stage: deploy
   script:
+  - composer install
   - lftp -c "set ftp:ssl-allow no; open -u $USERNAME,$PASSWORD $HOST; cd portal; mirror -Rnev --parallel=10 --exclude logs/ --exclude .gitlab-ci.yml --exclude .git"
   only:
   - master

.htaccess

+Allow from all
+
+RewriteEngine On
+
+# rewrite all call to the bootstrap except for direct file or directory
+RewriteCond %{REQUEST_FILENAME} -s [OR]
+RewriteCond %{REQUEST_FILENAME} -l [OR]
+RewriteCond %{REQUEST_FILENAME} -d
+RewriteRule . - [NC,L]
+RewriteRule ^.*$ ./bootstrap.php [L]
\ No newline at end of file

_helpers.php

+<?php
+function route_url($code,$language=null)
+{
+    $code = $code ? $code : ENV_ROUTE;
+    $language = $language ? $language : ENV_LNG;
+    return ENV_BASEPATH.$language.'/'.($code!='index' ? $code:'');
+}
+
+//       #     #     ##
+//            ##    #  #
+//      ##     #    #  #  ###
+//       #     #     ##   #  #
+//       #     #    #  #  #  #
+//       #     #    #  #  #  #
+//      ###    #     ##   #  #
+//
+function __locale($code=null) // convert local shortcode to full iso standard with charset
+{
+    switch ($code) {
+        case 'fr': return 'fr_FR.UTF-8'; break;
+        case 'en': return 'en_US.UTF-8'; break;
+        case 'de': return 'de_DE.UTF-8'; break;
+        case 'it': return 'it_IT.UTF-8'; break;
+        case 'es': return 'es_ES.UTF-8'; break;
+        // add more language conversion here if needed
+        // ...
+        default: return false; break;
+    }
+}
+function __localeSet($code)
+{
+    setlocale(LC_TIME, __locale($code));
+
+    $t = \Gettext\BaseTranslator::$current;
+    $t->__currentLocal = $code;
+    $file = __DIR__.'/locales/'.preg_replace('/\..+$/','',__locale($code)).'/messages.mo';
+    if(file_exists($file))
+    {
+        $translations = Gettext\Translations::fromMoFile($file);
+        $t->loadTranslations($translations);
+    }
+}
+function __localeGet()
+{
+    $t = \Gettext\BaseTranslator::$current;
+    return $t->__currentLocal;
+}
+
+//                        ####   #          ##       #
+//                   #    #                  #       #
+//       ###   ##   ####  #     ##     ##    #     ###
+//      #  #  #  #   #    ###    #    #  #   #    #  #
+//      #  #  ####   #    #      #    ####   #    #  #
+//       ###  #      #    #      #    #      #    #  #
+//         #   ##     ##  #     ###    ##   ###    ###
+//       ##
+function getField($array,$field,$default=NULL,$notempty=false){
+    if(is_array($field)){
+        $v = $array;
+        foreach($field as $f)
+            $v = getField($v,$f,$default,$notEmpty);
+        return $v;
+    }
+    if(is_array($array) && isset($array[$field]))
+    {
+        if($notempty && ($array[$field]===NULL || $array[$field]===''))
+        {
+            return $default;
+        }
+        return $array[$field];
+    }
+    if(is_object($array) && isset($array->$field))
+    {
+        if($notempty && ($array->$field===NULL || $array->$field===''))
+        {
+            return $default;
+        }
+        return $array->$field;
+    }
+    return $default;
+}
+
+//       #          ##     #
+//                   #
+//      ##    ###    #    ##    ###    ##          ###  #  #   ###
+//       #    #  #   #     #    #  #  #  #        #     #  #  #  #
+//       #    #  #   #     #    #  #  ####         ##   #  #  #  #
+//       #    #  #   #     #    #  #  #              #   ##    ###
+//      ###   #  #  ###   ###   #  #   ##         ###    ##      #
+//                                         #####               ##
+// injection de svg en mode inline (avec nettoyage automatique du code SVG)
+function inline_svg($svgfile, $maxWidth=null, $maxHeight=null)
+{
+    if(file_exists($svgfile))
+    {
+        $svg = file_get_contents($svgfile);
+        $svg = preg_replace('/(?=<!--)([\s\S]*?)-->/','',$svg);
+        $svg = preg_replace('/(?=<\?xml)([\s\S]*?)\?>/','',$svg);
+
+        // svg basics cleanup
+        $svg = preg_replace("/(<svg[^>]*)[\t ]style=\"[^\"]+\"/", '\\1', $svg);
+        $svg = preg_replace("/(<svg[^>]*)[\t ]x=\"[^\"]+\"/", '\\1', $svg);
+        $svg = preg_replace("/(<svg[^>]*)[\t ]y=\"[^\"]+\"/", '\\1', $svg);
+        $svg = preg_replace("/(<svg[^>]*)[\t ]width=\"[^\"]+\"/", '\\1', $svg);
+        $svg = preg_replace("/(<svg[^>]*)[\t ]height=\"[^\"]+\"/", '\\1', $svg);
+        $svg = preg_replace("/(<svg[^>]*)[\t ]class=\"[^\"]+\"/", '\\1', $svg);
+        $svg = preg_replace("/(<svg[^>]*)[\t ]id=\"[^\"]+\"/", '\\1', $svg);
+
+        // inline svg self reference classes
+        // work only on direct class selector
+        preg_match_all('/\.([a-z0-9_-]+)[\t ]*{([^}]*)}/i',$svg,$regs);
+        //print_r($regs);
+        foreach($regs[1] as $k=>$class)
+        {
+            $style = $regs[2][$k];
+            $svg = str_replace('class="'.$class.'"','style="'.$style.'"',$svg);
+        }
+        $svg = preg_replace('/(?=<style)([\s\S]*?)<\/style>/','',$svg);
+
+        if($maxWidth ||  $maxHeight) {
+            $svg = str_replace('<svg ','<svg style="'.($maxWidth ? 'max-width:'.$maxWidth.';':'').($maxHeight ? 'max-height:'.$maxHeight.';':'').'"',$svg);
+        }
+        return $svg;
+    }
+    return false;
+}
\ No newline at end of file

assets/style.css

@@ -14,6 +14,12 @@ a {
 	color: #629dd1;
 }
 
+body {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
 /* ------------------------------------------------------------------- */
 header {
 	margin: 2em 1em;
@@ -55,7 +61,7 @@ main .cards a {
 	text-align: center;
 	border: 1px solid #555;
 	background: #333;
-	transition:background ease 0.5s, border ease 0.5s;
+	transition:background ease 0.5s, border ease 0.5s, transform ease 0.5s;
 	
     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
 }
@@ -83,8 +89,8 @@ main .cards .icon {
 }
 main .cards svg {
 	display: block;
-	max-width: 100%;
-	max-height: 100%;
+	max-width: 100% !important;
+	max-height: 100% !important;
 	width: auto;
 	height: auto;
 }
@@ -95,28 +101,23 @@ main .cards svg rect {
 	fill:#fff;
 }
 
+main .cards a.karaoke-mugen { background: hsla(234, 44%, 47%, 0.2) }
+main .cards a.karaoke-mugen .icon { background: hsla(234, 44%, 77%, 0.2) }
+main .cards a.karaoke-live { background: hsla(140, 47%, 47%, 0.2); }
+main .cards a.karaoke-live .icon { background: hsla(140, 47%, 77%, 0.2); }
+main .cards a.karaoke-support { background: hsla(60, 50%, 38%, 0.35) }
+main .cards a.karaoke-support .icon { background: hsla(60, 50%, 68%, 0.35) }
+main .cards a.karaoke-karas { background: hsla(0, 22%, 34%, 0.4) }
+main .cards a.karaoke-karas .icon { background: hsla(0, 22%, 64%, 0.4) }
+
 main .cards a:hover {
-	background: #629dd1;
 	border: 1px solid #ddd;
+	transform:translate(0,-0.5em);
 }
 main .cards a:hover dd {
 	color:#fff;
 }
 
-
-main .cards a:nth-child(1) {
-    background: hsla(234, 44%, 47%, 0.2)
-}
-main .cards a:nth-child(2) {
-    background: hsla(140, 47%, 47%, 0.2);
-}
-main .cards a:nth-child(3) {
-    background: hsla(60, 50%, 38%, 0.35)
-}
-main .cards a:nth-child(4) {
-    background: hsla(0, 22%, 34%, 0.4)
-}
-
 @media screen and (max-width:1100px) {
 	main .cards a {
 		flex: unset;
@@ -126,7 +127,7 @@ main .cards a:nth-child(4) {
 		padding: 16px;
 	}
 }
-@media screen and (max-width:720px) {
+@media screen and (max-width:640px) {
 	main .cards a {
 		flex: unset;
 		width: calc(100% - 1em);

bootstrap.php

+<?php
+include_once __DIR__.'/vendor/autoload.php';
+include_once __DIR__.'/_helpers.php';
+
+use Gettext\Translator;
+
+// Définition de l'environnement à partir du context d'appel
+
+// Eg.
+// [REQUEST_URI] => /edsa-karaportal/en/test
+// [SCRIPT_NAME] => /edsa-karaportal/bootstrap.php
+// [PHP_SELF] => /edsa-karaportal/bootstrap.php
+
+define('BOOTSTRAP_LOADED', true);
+define('ENV_ROOTPATH', realpath(__DIR__));
+define('ENV_BASEPATH', str_replace('bootstrap.php', '', getField($_SERVER, 'SCRIPT_NAME', getField($_SERVER, 'PHP_SELF'))));
+define('ENV_REQUEST', str_replace(ENV_BASEPATH, '', getField($_SERVER, 'REQUEST_URI')));
+define('ENV_ROUTE', preg_replace('/^[a-z]{2}\/?/', '', ENV_REQUEST) ? preg_replace('/^[a-z]{2}\/?/', '', ENV_REQUEST) : 'index');
+
+// extraction de la langue courante
+if (preg_match('/^([a-z]{2})(\/.*)?$/', ENV_REQUEST, $reg))
+	define('ENV_LNG', $reg[1]);
+else
+{
+	$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
+	if(__locale($lang))
+		header('location:'.route_url('',$lang));
+	else
+		header('location:'.route_url('','fr'));
+	exit();
+}
+
+// Debug ENV
+// echo '<pre>'.print_r(array('ENV_BASEPATH'=>ENV_BASEPATH,'ENV_REQUEST'=>ENV_REQUEST,'ENV_ROUTE'=>ENV_ROUTE,'ENV_LNG'=>ENV_LNG),1).'</pre>'; die();
+
+// Translator
+$t = new Translator();
+// create global function to handle translation as described bellow
+$t->register();
+/*
+__(original)                                     →  gettext
+n__(original, plural, value)                     →  ngettext:1,2
+p__(context, original)                           →  pgettext:1c,2
+d__(domaine, original)                           →  dgettext:2
+dp__(domaine, context, original)                 →  dpgettext:2c,3
+dnp__(domain, context, original, plural, value)  →  dnpgettext:2c,3,4
+*/
+__localeSet(ENV_LNG);
+
+if (file_exists(__DIR__.'/routes/'.ENV_ROUTE.'.php'))
+	require __DIR__.'/routes/'.ENV_ROUTE.'.php';
+else
+	require __DIR__.'/routes/404.php';
+?>
\ No newline at end of file

components/footer.php

+<?php
+if(!defined('BOOTSTRAP_LOADED'))
+  die("Direct access is not authorized");
+?>
+<footer>
+  <ul class="footer-bar">
+    <li class="logo">Logo par <a href="http://sedeto.fr">Sedeto</a></li>
+    <li class="licence"><a href=https://opensource.org/licenses/mit-license.php><?=__("License MIT");?></a></li>
+    <li class="git"><a href="https://lab.shelter.moe/karaokemugen/sites/portal"><?=__("Dépot Git");?></a></li>
+    <li class="language">
+    	<a href="<?=route_url(null,'fr')?>">FR</a> | <a href="<?=route_url(null,'en')?>">EN</a>
+    </li>
+  </ul>
+  <p class="credits"><?=__("Les images, musiques et textes utilisés sur ce site appartiennent à leurs auteurs respectifs.");?></p>
+</footer>
\ No newline at end of file

components/header.php

+<?php
+if(!defined('BOOTSTRAP_LOADED'))
+  die("Direct access is not authorized");
+?>
+<header>
+<a href="<?=route_url('');?>"><img class="logo" src="<?=ENV_BASEPATH;?>/assets/images/index.png" alt="Karaokes.moe - Le Karaoke Mignon"></a>
+<h2 class="welcome">
+  <h2 class="welcome">
+      <?=__("Bienvenue !");?>
+      <small><?=__("Karaoke Mugen est un projet open source et collaboratif autour du karaoké. Que souhaitez-vous faire ?");?></small>
+    </h2>
+</h2>
+</header>
\ No newline at end of file

components/html/footer.php

+<?php
+if(!defined('BOOTSTRAP_LOADED'))
+  die("Direct access is not authorized");
+?>
+</body>
+</html>
\ No newline at end of file

components/html/header.php

+<?php
+if(!defined('BOOTSTRAP_LOADED'))
+  die("Direct access is not authorized");
+?>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Karaokes.moe - <?=__("Le Karaoke Mignon");?></title>
+  <link rel="stylesheet" href="<?=ENV_BASEPATH;?>/assets/style.css">
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+</head>
+<body>
\ No newline at end of file

composer.json

+{
+    "name": "karaokemugen/portal",
+    "description": "Portal site for Karaoke Mugen's sites",
+    "license": "MIT",
+    "require": {
+        "gettext/gettext": "^4.6"
+    }
+}

composer.lock

+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "d7b70b8850bfe95fd01f1d745ea36f0a",
+    "packages": [
+        {
+            "name": "gettext/gettext",
+            "version": "v4.6.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/oscarotero/Gettext.git",
+                "reference": "854ff5f5aaf92d2af7080ba8fc15718b27b5c89a"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/oscarotero/Gettext/zipball/854ff5f5aaf92d2af7080ba8fc15718b27b5c89a",
+                "reference": "854ff5f5aaf92d2af7080ba8fc15718b27b5c89a",
+                "shasum": ""
+            },
+            "require": {
+                "gettext/languages": "^2.3",
+                "php": ">=5.4.0"
+            },
+            "require-dev": {
+                "illuminate/view": "*",
+                "phpunit/phpunit": "^4.8|^5.7|^6.5",
+                "squizlabs/php_codesniffer": "^3.0",
+                "symfony/yaml": "~2",
+                "twig/extensions": "*",
+                "twig/twig": "^1.31|^2.0"
+            },
+            "suggest": {
+                "illuminate/view": "Is necessary if you want to use the Blade extractor",
+                "symfony/yaml": "Is necessary if you want to use the Yaml extractor/generator",
+                "twig/extensions": "Is necessary if you want to use the Twig extractor",
+                "twig/twig": "Is necessary if you want to use the Twig extractor"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Gettext\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Oscar Otero",
+                    "email": "oom@oscarotero.com",
+                    "homepage": "http://oscarotero.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "PHP gettext manager",
+            "homepage": "https://github.com/oscarotero/Gettext",
+            "keywords": [
+                "JS",
+                "gettext",
+                "i18n",
+                "mo",
+                "po",
+                "translation"
+            ],
+            "time": "2018-08-27T15:40:19+00:00"
+        },
+        {
+            "name": "gettext/languages",
+            "version": "2.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/mlocati/cldr-to-gettext-plural-rules.git",
+                "reference": "1b74377bd0c4cd87e8d72b948f5d8867e23505a5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/mlocati/cldr-to-gettext-plural-rules/zipball/1b74377bd0c4cd87e8d72b948f5d8867e23505a5",
+                "reference": "1b74377bd0c4cd87e8d72b948f5d8867e23505a5",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^4"
+            },
+            "bin": [
+                "bin/export-plural-rules",
+                "bin/export-plural-rules.php"
+            ],
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Gettext\\Languages\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Michele Locati",
+                    "email": "mlocati@gmail.com",
+                    "role": "Developer"
+                }
+            ],
+            "description": "gettext languages with plural rules",
+            "homepage": "https://github.com/mlocati/cldr-to-gettext-plural-rules",
+            "keywords": [
+                "cldr",
+                "i18n",
+                "internationalization",
+                "l10n",
+                "language",
+                "languages",
+                "localization",
+                "php",
+                "plural",
+                "plural rules",
+                "plurals",
+                "translate",
+                "translations",
+                "unicode"
+            ],
+            "time": "2018-06-21T15:58:36+00:00"
+        }
+    ],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": [],
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": [],
+    "platform-dev": []
+}

en/index.php

-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Karaoke Mugen</title>
-  <link rel="stylesheet" href="../assets/style.css">
-  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-</head>
-<body>
-  <header>
-    <img class="logo" src="../assets/images/index.png" alt="Karaoke Mugen">
-    <h2 class="welcome">
-      Welcome !
-      <small>Karaoke Mugen is a collaborative and open-source project on karaoke. What would you like to do?</small>
-    </h2>
-  </header>
-
-  <main>
-    <div class="cards">
-      <a target="_blank" href="http://mugen.karaokes.moe/en/" class="karaoke-mugen">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-mugen.svg');?></span>
-            Karaoke Mugen App
-          </dt>
-          <dd>Organize karaoke sessions at home or at an event!</dd>
-        </dl>
-      </a>
-      <a target="_blank" href="https://live.karaokes.moe/" class="karaoke-live">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-live.svg');?></span>
-            Live
-          </dt>
-          <dd>Try out our karaokes from your browser!</dd>
-        </dl>
-      </a>      
-      <a target="_blank" href="http://mugen.karaokes.moe/karas.html"class="karaoke-karas">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-karas.svg');?></span>
-            Karaokes Database
-          </dt>
-          <dd>Explore the karaokes database, updated daily!</dd>
-        </dl>
-      </a>
-	  <a target="_blank" href="http://mugen.karaokes.moe/en/participate.html" class="karaoke-support">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-support.svg');?></span>
-            Contribute
-          </dt>
-          <dd>Want to cotnribute? Read on how you can help.</dd>
-        </dl>
-      </a>
-    </div>
-  </main>
-
-  <footer>
-    <ul class="footer-bar">
-      <li class="logo">Logo by <a href="http://sedeto.fr">Sedeto</a></li>
-      <li class="licence"><a href=https://opensource.org/licenses/mit-license.php>License MIT</a></li>
-      <li class="git"><a href="https://lab.shelter.moe/karaokemugen/sites/portal">Git repository</a></li>
-    </ul>
-    <p class="credits">Pictures, sounds and texts used here belong to their respective authors.</p>
-  </footer>
-</body>
-</html>
\ No newline at end of file

fr/index.php

-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Karaoke Mugen</title>
-  <link rel="stylesheet" href="../assets/style.css">
-  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-</head>
-<body>
-  <header>
-    <img class="logo" src="../assets/images/index.png" alt="Karaoke Mugen">
-    <h2 class="welcome">
-      Bienvenue !
-      <small>Karaoke Mugen est un projet open source et collaboratif autour du karaoké. Que souhaitez-vous faire ?</small>
-    </h2>
-  </header>
-
-  <main>
-    <div class="cards">
-      <a target="_blank" href="http://mugen.karaokes.moe/" class="karaoke-mugen">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-mugen.svg');?></span>
-            Application
-          </dt>
-          <dd>Organisez vos propres karaokés chez vous ou en convention !</dd>
-        </dl>
-      </a>
-      <a target="_blank" href="https://live.karaokes.moe/" class="karaoke-live">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-live.svg');?></span>
-            Live
-          </dt>
-          <dd>Testez nos karaokés depuis votre navigateur !</dd>
-        </dl>
-      </a>      
-      <a target="_blank" href="http://mugen.karaokes.moe/karas.html"class="karaoke-karas">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-karas.svg');?></span>
-            Base de Karaokés
-          </dt>
-          <dd>Accédez à la base de données de karaokés, mise à jour quotidiennement.</dd>
-        </dl>
-      </a>
-	  <a target="_blank" href="http://mugen.karaokes.moe/participate.html" class="karaoke-support">
-        <dl>
-          <dt>
-            <span class="icon"><?=file_get_contents(__DIR__.'/../assets/images/karaoke-support.svg');?></span>
-            Participer
-          </dt>
-          <dd>Vous voulez contribuer au projet ? C'est par ici.</dd>
-        </dl>