Where and how to place apple-touch-icon in TYPO3 app - typo3-9.x

I'm getting the following error in the backend:
Core: Exception handler (WEB): Uncaught TYPO3 Exception: #1518472189: The requested page does not exist |
TYPO3\CMS\Core\Error\Http\PageNotFoundException thrown in file /var/www/vhosts/my-doma.in/typo3/sysext/frontend/Classes/Controller/ErrorController.php in line 80.
Requested URL: https://my-doma.in/apple-touch-icon-120x120.png
To place an apple icon one apparently should add:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
somewhere, as seen here: https://stackoverflow.com/a/21144916/4120196
But given a TYPO3 (v9.5) application - Where and how should I to add this?

I found a way after stumbling on the headerData property - added this to my TypoScript root template:
page.headerData {
1 = TEXT
1.value = <link rel="apple-touch-icon" href="fileadmin/path_to_icons/apple-touch-icon.png">
}
And I found this answer when it comes to Android as well.
My android browser seemed to be happy already with the apple icon though.

Related

GWT Bootstrap3 Openlayers offline

I am using GWT with Bootstrap3 and Openlayers Map. I have implemented my own OSM Map server.
My application does not start without internet connection. I need guidance.
I followed the instructions in boostrap3 V1.0.2 for offline applications.
However I only got a blank screen.
Starting with the Firefox debugger I got the following message in the console:
Uncaught ReferenceError: OpenLayers is not defined
<anonymous> http://www.openstreetmap.org/openlayers/OpenStreetMap.js:7
Starting with Google Chrome I get the following warning
[Deprecation] Application Cache API manifest selection is deprecated and will be removed in M85, around August 2020. See https://www.chromestatus.com/features/6192449487634432 for more details.
followed by
GET http://www.openlayers.org/api/OpenLayers.js net::ERR_INTERNET_DISCONNECTED
and
localhost/:1 Application Cache Error event: Invalid or missing manifest origin trial token: http://localhost:8090/simaso/simasoweb/appcache.manifest
Here is my basic setup
SiMaSoWeb.gwt.xml:
...
<inherits name='com.google.gwt.json.JSON'/>
<inherits name="com.google.web.bindery.autobean.AutoBean"/>
<inherits name="org.gwtbootstrap3.extras.cachemanifest.Offline"/>
...
<add-linker name="offline" />
SiMaSoWeb.html:
<!doctype html>
<html manifest="simasoweb/appcache.manifest">
<head>
<title>Sirene</title>
<script type="text/javascript" language="javascript" src="simasoweb/simasoweb.nocache.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<link type="text/css" rel="stylesheet" href="SiMaSoWeb.css">
....
</html>
In ...\simasoweb\appcache.manifest I find:
CACHE MANIFEST
# Version: 1599380329409.0.6297069797290025
CACHE:
AF4477772D0DB53A10ABCF74A5AE0C4D.cache.js
fonts/fontawesome-webfont.woff
clear.cache.gif
fonts/FontAwesome.otf
css/bootstrap-notify-custom.min.cache.css
7192594CA2F468C2F793523022719FA0.cache.js
...
css/font-awesome-4.7.0.min.cache.css
NETWORK:
*
Finally
I compile all this . Resources seem to be included in the war file ..
Needless to say that with internet connection, only in the first 1-2 seconds of starting, all is running fine ..
As per the Google Chrome warning you included, App Cache is a deprecated standard and is being removed. It has already been removed from non-secure contexts.
You should be using Service Workers instead to cache resources for offline use. You may have to write your own linker or maybe you can use gwt-serviceworker-linker.
Thanks to ELEVATE I managed to move from AppCache to ServiceWorker. However the Openlayers couldnt be fixed this way. So here is what solved the issues:
ServiceWorker
I am still using Java 8
I upgraded to GWT 2.9
I added to .gwt.xml
<inherits name="org.realityforge.gwt.serviceworker.Linker"/>
<inherits name="elemental2.dom.Dom"/>
<inherits name="elemental2.promise.Promise"/>
<inherits name="jsinterop.base.Base"/>
...
and
<add-linker name="serviceworker"/>
<extend-configuration-property name="serviceworker_static_files" value="./"/>
<extend-configuration-property name="serviceworker_static_files" value="../SiMaSoWeb.html"/>
In my entry JAVA-routine right at the start of my onModuleLod I added
import static elemental2.dom.DomGlobal.*;
import elemental2.dom.DomGlobal;
public void onModuleLoad() {
...
initStatic();
...
and later in that module
public void initStatic() {
if ( null != navigator.serviceWorker )
{
navigator.serviceWorker.register("simasoweb/"+ GWT.getModuleName() + "-sw.js" ).then( registration -> {
console.log( "ServiceWorker registration successful with scope: " + registration.getScope() );
// Every minute attempt to update the serviceWorker. If it does update
// then the "controllerchange" event will fire.
DomGlobal.setInterval( v -> registration.update(), 60000 );
return null;
}, error -> {
console.log( "ServiceWorker registration failed: ", error );
return null;
} );
navigator.serviceWorker.addEventListener( "controllerchange", e -> {
// This fires when the service worker controlling this page
// changes, eg a new worker has skipped waiting and become
// the new active worker.
console.log( "ServiceWorker updated ", e );
} );
}
}
}
I had issues with accesing the right files in my gwt - war directory. Therefore I updated the navigator.serviceWorker.register... command.
Very useful was the google inherent debugger with CTRL+SHIFT+I. In the 'console'-tab you find the messages - red means bad - solve it!
As external jar libraries I had to include
elemental2-core
elemental2-dom
elemental2-promise
base
Now the openlayers issues... Needless to say that there might be a much more elegant way and further more, you need an offline-map, which I have rendered myself and available (150GB for Germany!).
In the HTML file
Note that I opened the openlayers and openstreetmap .js files in a browser copied them in a file and copied them into my war directory in the subdirectory src. Again the browser debugger can help find directory issues.
<script type="text/javascript" language="javascript" src="simasoweb/simasoweb.nocache.js"></script>
<script src="src/OpenLayers.js"></script>
<script src="src/OpenStreetMap.js"></script>
Copy hard
I downloaded the gwt-openlayers demo project GWT-OpenLayers-master.zip
and copied all files in GWT-OpenLayers-master\gwt-openlayers-showcase\src\main\resources\org\gwtopenmaps\demo\openlayers\public\openlayers into my ...war\src\ directory where my openlayers.js files lie.
Finally I am not sure if the service-worker point 1-3 really helped.

Unable to use "Letters" from "CKeditor"

I'm trying to use Letters as the main collaborative text editor for one of our projects. But, I'm unable to run even a simple demo.
This is my "index.html" test page:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="letters.js"></script>
<meta charset="UTF-8">
<script type="text/javascript">
function load() {
Letters.create( document.body, {
cloudServices: {
tokenUrl: '<Development token URL from https://dashboard.ckeditor.com>',
uploadUrl: '<Upload URL from https://dashboard.ckeditor.com>',
documentId: 'cats'
},
title: 'Cats',
body: `<p>Cats are awesome.</p>`
} )
.then( letters => {
console.log( letters.getTitle() );
console.log( letters.getBody() );
});
}
</script>
</head>
<body onload="load()">
</body>
</html>
There's also a "letters.js" file, but I couldn't even find a download link for Letters. I had to look at the demo page source to find it. If anyone knows an official link, please tell me.
When I open this file (locally or within a web server), nothing happens. The console shows this messages:
Logging on browser console. See `cloudServices._logUrl` configuration. Object { message: "letters-restarteditor: Restart.", level: "error", stackTrace: "value#file:///home/(...)/letters.js:1:1018463\n", data: {...} } letters.js:1:47910
Logging on browser console. See `cloudServices._logUrl` configuration. Object { message: "letters-restarteditor: Restart.", level: "error", stackTrace: "value#file:///home/(...)/letters.js:1:1018463\n", data: {...} } letters.js:1:47910
Logging on browser console. See `cloudServices._logUrl` configuration. Object { message: "letters-restarteditor: Switched to offline mode. Too many restarts.", level: "error", stackTrace: "value#file:///home/(...)/letters.js:1:1018463\n", data: {...} } letters.js:1:47910
Does anyone knows what can be happening? Is "Letters" a stable and reliable tool to use in a big project? Being built over CKEditor5, is CKEditor5 a stable and reliable tool? Or I should better stick with CKEditor4?
Thanks in advance!
There has been no official release of Letters so far, that's why tere is no download link for it. The documentation was published for people who are trying Letters in a private beta program.
I have a good news though, next week there will be a free trial officially available with valid download links, updated documentation, which should work just fine. Within the next few days after offering the trial we will also document on how to customize Letters, add/remove plugins and so on.
As of the end of April 2018, you can sign up to Letters and try it out. For the quick start guide check https://docs.ckeditor.com/letters/latest/guides/integration/quick-start.html

asset() function in twig gives an NotFoundHttpException "No route found for "GET /favicon.ico"

I have just installed a new Symfony project (I use xampp). When I started the application the favicon on the url tab wasn't showing, i opened the source code and opend the icon from there, but I got the error message I writed in the title.
In the code the link is presented as:
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
and in the source code it was like
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
What is the problem, am I missing something ?
Thanks
you should put the file in the web folder
the asset function target a folder web by default.
http://symfony.com/doc/current/best_practices/web-assets.html

/dist/handsontable.full.js 404 Not Found with bower

I have installed Handsontable as it's shown on its documentation using bower:
bower install handsontable --save
and i added these links to the view.ejs
<script src="/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="/dist/handsontable.full.css">
but i got the follwoing 404 errors in the browser
"NetworkError: 404 Not Found - http://localhost:3000/dist/handsontable.full.js"
handson...full.js
"NetworkError: 404 Not Found - http://localhost:3000/dist/handsontable.full.css"
handson...ull.css
ReferenceError: Handsontable is not defined in
var hot = new Handsontable(container, {
even when i tried to change links to the absolute file location (project's root as reference):
<script src="./bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="./bower_components/handsontable/dist/handsontable.full.css">
i still hav the same problem :
"NetworkError: 404 Not Found - http://localhost:3000/bower_components/handsontable/dist/handsontable.full.js"
handson...full.js
2
"NetworkError: 404 Not Found - http://localhost:3000/bower_components/handsontable/dist/handsontable.full.css"
handson...ull.css
ReferenceError: Handsontable is not defined
var hot = new Handsontable(container, {
--- EDIT ----
Here is my project structure , i also have the same problem with loading jquery.js
i was trying all solutions for this question but none of them work.
This worked for me :
app.use("/bower_components", express.static(path.join(__dirname, 'bower_components')));
my mistake was to write it like this :
app.use("bower_components", express.static(__dirname + '/bower_components')); // this is wrong
and in the view it doesn't matter what i wrote
(./bower_components or ../bower_components).
All these worked for me :
<script src="../bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="bower_components/handsontable/dist/handsontable.full.css">

Google web fonts and SSL error

My site is working well with Google webfonts UNTIL the user hits the SSL portion of the site.
At that point, chrome throws the partial encoding error, and my cufon menu losses it's kerning.
I'm including my webfont with this css:
#font-face {
src: local('Lusitana'), url(https://themes.googleusercontent.com/static/fonts/lusitana
/v1/tAIvAkRzqMJf8Y4fM1R7PXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
My js console then gives me this error:
[blocked] The page at https://domain.com/ecommerce.php ran insecure content from
http://fonts.googleapis.com/css?family=Lusitana:regular,700&subset=latin.
Any ideas how I can get google fonts to force SSL?
Have you tried replacing https:// with // in the url? The request should use the correct protocol automatically.
locate this line on your HTML page (or template):
<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
and change it to this:
<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS).
Enjoy!
To load google fonts that will work in non-secure, and SSL mode, try the following in your page header - (and remove what you've got there calling a https:// inside the CSS):
<script type="text/javascript">
WebFontConfig = { google: { families: [ 'Droid+Serif::latin' ] } };
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
In my example, I'm using Droid Serif font, so swap that with yours.
You can read more on this here.
I also had this error caused by a theme in WordPress. It caused slow page loading and the following error reported by development console:
Mixed Content: The page at 'https://xxxxxxx.co.uk/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?
family=Droid+Serif%3A400%2C700%2C400italic%2C700italic&ver=5.4.1'. This
request has been blocked; the content must be served over HTTPS.
The culprit was Wordpress theme called "Fresh and Clean". It inherits code written in 2014 which contains 'pre-SSL' coding practices
To resolve the problem all need to do is make changes inside the following file in the theme:
/wp-content/themes/wpex-freshandclean/functions/scripts.php
Look inside for any occurences of http:// and change each one to https://