mirror_php/humhub
1
0
Fork 0
mirror of https://github.com/humhub/humhub.git synced 2025-01-16 13:51:42 +01:00
Code Issues Projects Releases Wiki Activity

Automatic Icon/PWA metatag generation and Manifest controller

Browse Source
This commit is contained in:
Lucas Bartholemy 2019-07-15 15:28:16 +02:00
parent ca5dd62709
commit c951d9e633
8 changed files with 163 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
protected/humhub/docs/guide/theme/migrate-1.4.md
View File

@ -2,3 +2,27 @@
- Added jquery.atwho.modified.css to `mentioning.less`
- Minor changes in `notification/views/index.php`
## PWA
Remove all icon and web app related head tags such as:
- <link rel="apple-touch-icon" sizes="57x57" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-57x57.png">
- <link rel="icon" type="image/png" sizes="192x192" href="<?= $this->theme->getBaseUrl(); ?>/ico/android-icon-192x192.png">
- <link rel="manifest" href="<?= $this->theme->getBaseUrl(); ?>/ico/manifest.json">
Remove Metatags:
- apple-mobile-web-app-title
- apple-mobile-web-app-capable
- apple-mobile-web-app-status-bar-style
- mobile-web-app-capable
- msapplication-TileColor
- msapplication-TileImage
- msapplication-TileImage
- theme-color
- application-name

1
protected/humhub/modules/ui/Events.php
View File

@ -20,4 +20,5 @@ class Events
$application = $event->sender;
$application->controllerMap['theme'] = commands\ThemeController::class;
}
}

4
protected/humhub/modules/ui/Module.php
View File

@ -23,6 +23,10 @@ class Module extends \humhub\components\Module
*/
public $isCoreModule = true;
public $themeColor = '';
/**
* @inheritdoc
*/

59
protected/humhub/modules/ui/controllers/ManifestController.php Normal file
View File

@ -0,0 +1,59 @@
<?php
namespace humhub\modules\ui\controllers;
use humhub\components\Controller;
use humhub\modules\ui\Module;
use humhub\modules\ui\widgets\SiteIcon;
use Yii;
use yii\helpers\Url;
/**
* Class ManifestController is responsible to generate the Manifest JSON output.
*
* @since 1.4
*
* @property Module $module
* @package humhub\modules\ui\controllers
*/
class ManifestController extends Controller
{
/**
* @var array the manifest
*/
public $manifest = [];
public function actionIndex()
{
$this->handleIcons();
$this->handlePwa();
return $this->asJson($this->manifest);
}
private function handlePwa()
{
$this->manifest['display'] = 'standalone';
$this->manifest['start_url'] = Url::home();
$this->manifest['name'] = Yii::$app->name;
$this->manifest['background_color'] = $this->module->themeColor;
$this->manifest['theme_color'] = $this->module->themeColor;
}
private function handleIcons()
{
$this->manifest['icons'] = [];
foreach ([48, 72, 96, 192, 512] as $size) {
$this->manifest['icons'][] = [
'src' => SiteIcon::getUrl($size),
'type' => 'image/png',
'sizes' => $size . 'x' . $size
];
}
}
}

10
protected/humhub/modules/ui/view/components/View.php
View File

@ -9,6 +9,7 @@
namespace humhub\modules\ui\view\components;
use humhub\libs\Html;
use humhub\modules\ui\widgets\SiteIcon;
use humhub\widgets\CoreJsConfig;
use humhub\widgets\LayoutAddons;
use yii\helpers\ArrayHelper;
@ -171,7 +172,12 @@ class View extends \yii\web\View
*/
protected function renderHeadHtml()
{
return (!Yii::$app->request->isAjax) ? parent::registerCsrfMetaTags() . parent::renderHeadHtml() : parent::renderHeadHtml();
if (!Yii::$app->request->isAjax) {
SiteIcon::registerMetaTags($this);
parent::registerCsrfMetaTags();
}
return parent::renderHeadHtml();
}
public function setStatusMessage($type, $message)
@ -257,8 +263,8 @@ class View extends \yii\web\View
/**
* Writes the currently registered jsConfig entries and flushes the the config array.
*
* @since v1.2
* @param string $key see View::registerJs
* @since v1.2
*/
protected function flushJsConfig($key = null)
{

47
protected/humhub/modules/ui/widgets/MobileAppHeader.php Normal file
View File

@ -0,0 +1,47 @@
<?php
/**
* @link https://www.humhub.org/
* @copyright Copyright (c) 2019 HumHub GmbH & Co. KG
* @license https://www.humhub.com/licences
*/
namespace humhub\modules\ui\widgets;
use Yii;
use yii\helpers\Url;
use humhub\components\Widget;
use humhub\modules\ui\Module;
use humhub\modules\ui\view\components\View;
/**
* Class MobileAppHeader
*
* @package humhub\modules\ui\widgets
*/
class MobileAppHeader extends Widget
{
/**
* Registers mobile app related MetaTags
*
* @param View $view
*/
public static function registerMetatags(View $view)
{
/** @var Module $module */
$module = Yii::$app->getModule('ui');;
$view->registerMetaTag(['name' => 'theme-color', 'content' => $module->themeColor]);
$view->registerMetaTag(['name' => 'application-name', 'content' => Yii::$app->name]);
// Apple/IOS headers
// https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
$view->registerMetaTag(['name' => 'apple-mobile-web-app-title', 'content' => Yii::$app->name]);
$view->registerMetaTag(['name' => 'apple-mobile-web-app-capable', 'content' => 'yes']);
$view->registerMetaTag(['name' => 'apple-mobile-web-app-status-bar-style', 'content' => $module->themeColor]);
$view->registerLinkTag(['rel' => 'manifest', 'href' => Url::to(['/ui/manifest'])]);
}
}

20
protected/humhub/modules/ui/widgets/SiteIcon.php
View File

@ -9,6 +9,7 @@
namespace humhub\modules\ui\widgets;
use humhub\modules\file\libs\FileHelper;
use humhub\modules\ui\view\components\View;
use Imagine\Image\Box;
use Yii;
use humhub\components\Widget;
@ -101,4 +102,23 @@ class SiteIcon extends Widget
$fileName = ($size === null) ? 'icon.png' : $size . 'x' . $size . '.png';
return $fileName;
}
/**
* @param View $view
*/
public static function registerMetaTags(View $view)
{
// Add Apple touch icons
// https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
$view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl()]);
$view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl(152), 'sizes' => '152x152']);
$view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl(180), 'sizes' => '180x180']);
$view->registerLinkTag(['rel' => 'apple-touch-icon', 'href' => static::getUrl(167), 'sizes' => '167x167']);
// Chrome, Firefox & Co.
$view->registerLinkTag(['rel' => 'icon', 'href' => static::getUrl(192), 'sizes' => '192x192']);
$view->registerLinkTag(['rel' => 'icon', 'href' => static::getUrl(96), 'sizes' => '96x96']);
$view->registerLinkTag(['rel' => 'icon', 'href' => static::getUrl(32), 'sizes' => '32x32']);
}
}

33
themes/HumHub/views/layouts/head.php
View File

@ -1,33 +0,0 @@
<!-- start: Web App Data-->
<link rel="manifest" href="<?= $this->theme->getBaseUrl(); ?>/ico/manifest.json">
<meta name="application-name" content="<?= \yii\helpers\Html::encode(Yii::$app->name) ?>">
<!-- end: Web App Data-->
<!-- start: Favicon and Touch Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?= $this->theme->getBaseUrl(); ?>/ico/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="<?= $this->theme->getBaseUrl(); ?>/ico/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?= $this->theme->getBaseUrl(); ?>/ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?= $this->theme->getBaseUrl(); ?>/ico/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?= $this->theme->getBaseUrl(); ?>/ico/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="<?= $this->theme->getBaseUrl(); ?>/ico/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- end: Favicon and Touch Icons -->
<!-- start: Apple Fullscreen and Webapp Title -->
<meta name="apple-mobile-web-app-title" content="<?= \yii\helpers\Html::encode(Yii::$app->name) ?>" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- end: Apple Fullscreen and Webapp Title -->
<!-- start: Android Fullscreen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- end: Android Fullscreen -->