i am trying to get a favicon to display on safari it works on every other browser except safari.
The application i built runs on Nuxt3 with composition api.
In the default layout i've added the following code using Nuxt components:
<Head>
<Title>{{ route.meta.title }}</Title>
<Link
rel="apple-touch-icon"
href="/favicons/apple-touch-icon.png"
/>
<Link
rel="apple-touch-icon"
sizes="57x57"
href="/favicons/apple-touch-icon-57x57.png"
/>
<Link
rel="apple-touch-icon"
sizes="72x72"
href="/favicons/apple-touch-icon-72x72.png"
/>
<Link
rel="apple-touch-icon"
sizes="76x76"
href="/favicons/apple-touch-icon-76x76.png"
/>
<Link
rel="apple-touch-icon"
sizes="114x114"
href="/favicons/apple-touch-icon-114x114.png"
/>
<Link
rel="apple-touch-icon"
sizes="120x120"
href="/favicons/apple-touch-icon-120x120.png"
/>
<Link
rel="apple-touch-icon"
sizes="144x144"
href="/favicons/apple-touch-icon-144x144.png"
/>
<Link
rel="apple-touch-icon"
sizes="152x152"
href="/favicons/apple-touch-icon-152x152.png"
/>
<Link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/apple-touch-icon-180x180.png"
/>
<Link
rel="icon"
type="image/png"
sizes="32x32"
href="/faviconsfavicons/favicon-32x32.png"
/>
<Link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/favicon-16x16.png"
/>
<Link rel="mask-icon" href="/favicons/apple-touch-icon-180x180.svg" color="#000000" />
<Link rel="manifest" href="/favicons/site.webmanifest" />
<Link rel="shortcut icon" href="/favicons/favicon.ico" type="image/x-icon" />
<Meta name="msapplication-TileColor" content="#ffffff" />
<Meta name="msapplication-config" content="/favicons/browserconfig.xml" />
<Meta name="theme-color" content="#ffffff" />
</Head>
After applying all this code i went to ~/Library/Safari/Favicon Cache, deleted everything inside opened safari again to discover it still doesn't work.
I've tried everything i found on older posts regarding this subject however nothing worked and allot of it seems outdated like the mask-icon for example (even Apple doesn't use it for their website anymore). Still tried it didn't work.
Any help would be greatly appreciated, Thanks!
You can put the head parts in your nuxt.config:
head: {
title: "Your global title",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{
hid: "description",
name: "description",
content: "Fallback description",
},
],
link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
},
This part is for your favicons:
link: [{ rel: "icon", type: "image/png", href: "/favicon.png" }],
Does this help?
Even if not, it's the better way to implement the links and meta data.
Related
The solution NToastNotify was working in .NET Core 2.2 before migration to .NET Core 3.1. Also, I am using the NToastNotify NuGet package (v7.0.0) with .NET core 3.1.
I will get the following two errors GET https://xy.hu/_content/NToastNotify/toastr.js?7.0.0.0 net::ERR_ABORTED 404 and Uncaught ReferenceError: nToastNotify is not defined
I have added the app.UseNToastNotify(); middleware in the Configure method as well as added the #await Component.InvokeAsync("NToastNotify") bit in the body tag within the layout page.
The #await Component.InvokeAsync("NToastNotify") will actually render the following
<script src=/_content/NToastNotify/toastr.js?7.0.0.0 type="text/javascript"></script>
<script>
if (nToastNotify) {
nToastNotify.init({
firstLoadEvent: 'DOMContentLoaded',
messages: [],
responseHeaderKey: 'X-NToastNotify-Messages',
requestHeaderKey: 'X-Requested-With',
libraryDetails:{"varName":"toastr","scriptSrc":"/js/toastr.min.js","styleHref":"/css/toastr.min.css","options":{"tapToDismiss":true,"positionClass":"toast-bottom-right","timeOut":3000,"newestOnTop":true,"progressBar":true,"title":"","type":"success"}},
disableAjaxToasts:false
});
};
</script>
My startup class
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews()
.AddNewtonsoftJson(options => SetupSerialiserSettings(options.SerializerSettings))
.AddNToastNotifyToastr(new ToastrOptions
{
ProgressBar = true,
PositionClass = ToastPositions.BottomRight,
TimeOut = (int)TimeSpan.FromSeconds(Configuration.GetValue<int>("Notifications:DefaultTimeoutSecs")).TotalMilliseconds,
Title = string.Empty,
TapToDismiss = true,
NewestOnTop = true
}, new NToastNotifyOption()
{
ScriptSrc = "/js/toastr.min.js",
StyleHref = "/css/toastr.min.css"
});
...
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseMiddleware<LogUserNameMiddleware>();
app.UseNToastNotify();
app.UseSession();
app.UseEndpoints(endpoints =>
...
}
This is my _Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
#if (IsSectionDefined("Styles"))
{#RenderSection("Styles", required: false)}
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/css/animate.css" />
<link rel="stylesheet" href="~/css/style.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/bootstrap4-toggle-3.4.0/css/bootstrap4-toggle.min.css" />
<link rel="stylesheet" href="~/lib/dataTables/datatables.min.css" />
<link rel="stylesheet" href="~/lib/jsgrid/jsgrid.min.css" />
<link rel="stylesheet" href="~/lib/jsgrid/jsgrid-theme.min.css" />
<link rel="stylesheet" href="~/lib/toastr/toastr.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
#await Component.InvokeAsync("NToastNotify")
</head>
<body>
<!-- End wrapper-->
<script src="~/js/jquery-3.6.0.min.js"></script>
<script src="~/lib/Popper/popper.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/metisMenu/dist/jquery.metisMenu.js"></script>
<script src="~/lib/slimScroll/jquery.slimscroll.js"></script>
<script src="~/lib/pace/pace.js"></script>
<script src="~/lib/bootstrap4-toggle-3.4.0/js/bootstrap4-toggle.js"></script>
<script src="~/lib/jquery-cookie/jquery.cook.js"></script>
<script src="~/js/polyfill.min.js"></script>
<script src="~/lib/dataTables/jquery.dataTables.min.js"></script>
<script src="~/lib/dataTables/dataTables.bootstrap4.min.js"></script>
<script src="~/js/script.js" asp-append-version="true"></script>
<script src="~/lib/jsgrid/jsgrid.min.js"></script>
<script src="~/lib/moment/moment.js"></script>
<script src="~/lib/toastr/toastr.min.js"></script>
#*<script src=https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js?7.0.0.0 type="text/javascript"></script>*#
<script src="~/js/utils.js"></script>
#RenderSection("scripts", required: false)
#await Component.InvokeAsync("NToastNotify")
</body>
</html>
I had the same problem. I solved this by created the directories in wwwroot (_content\NToastNotify) and copy there the toastr.js from %userprofile%.nuget\packages\ntoastnotify\7.0.0\staticwebassets. It works for development so far.
I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.
So, I've added links of these CDN in public/index.html as follow:
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>magiclabel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Add config.externals to vue.config.js as follow:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}
Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:
Is there any wrong or insufficient steps?
If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.
If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.
php require('includes/config.php');
if(!$user->is_logged_in()){ header('Location: login.php'); }
$title = 'main';
require('layout/header.php');
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href=
'http://fonts.googleapis.com/css?family=Lora:400,700|Open+Sans:400,300,700'
rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<!-- CSS reset -->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- Resource style -->
<script src="js/modernizr.js" type="text/javascript">
<title>
main menuw
</title>
PHP code should be between the '<?php' and '?>'
Your server should support PHP
I am developing a new openerp web module from scratch. I am trying to use the same concept used in the Point Of Sale web module that comes with OpenERP.
This is my controller method that is handling the web url:
#http.route('/university/', auth='public')
def index(self, **kw):
cr, uid, context, session = request.cr, request.uid, request.context, request.session
modules = simplejson.dumps(module_boot(request.db))
init = """
var wc = new s.web.WebClient();
wc._title_changed = function() {}
wc.show_application = function(){
wc.action_manager.do_action("university.ui");
};
wc.setElement($(document.body));
wc.start();
"""
html = request.registry.get('ir.ui.view').render(cr, session.uid,'university.index',{
'modules': modules,
'init': init,
})
return html
enter code here
the page source generated when the page loads is the following:
<!DOCTYPE html>
<html>
<head>
<title>Odoo POS</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="content-type" content="text/html, charset=utf-8"/>
<meta name="viewport" content=" width=1024, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<link rel="shortcut icon" sizes="196x196" href="/point_of_sale/static/src/img/touch-icon-196.png"/>
<link rel="shortcut icon" sizes="128x128" href="/point_of_sale/static/src/img/touch-icon-128.png"/>
<link rel="apple-touch-icon" href="/point_of_sale/static/src/img/touch-icon-iphone.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/point_of_sale/static/src/img/touch-icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/point_of_sale/static/src/img/touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/point_of_sale/static/src/img/touch-icon-ipad-retina.png"/>
<link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="/point_of_sale/static/src/fonts/lato/stylesheet.css"/>
<link rel="stylesheet" href="/point_of_sale/static/src/fonts/font-awesome-4.0.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/point_of_sale/static/src/css/pos.css" id="pos-stylesheet"/>
<link rel="stylesheet" href="/point_of_sale/static/src/css/keyboard.css"/>
<script type="text/javascript" src="/web/js/web.assets_common/d535558"></script>
<script type="text/javascript" src="/web/js/web.assets_backend/ec9370d"></script>
<script type="text/javascript" id="loading-script">
$(function() {
var s = new openerp.init(["web", "web_kanban", "base", "base_setup", "mail", "email_template", "edi", "share", "report", "product", "board", "account", "account_voucher", "point_of_sale", "account_accountant", "web_calendar", "calendar", "l10n_ae", "web_tests", "bus", "im_chat", "im_odoo_support", "base_import", "web_view_editor", "web_gantt", "portal", "student", "payment", "web_kanban_sparkline", "purchase", "web_diagram", "university", "sales_team", "sale", "web_example", "payment_transfer", "web_kanban_gauge", "stock", "web_graph", "crm"]);
var wc = new s.web.WebClient();
wc._title_changed = function() {}
wc.show_application = function(){
wc.action_manager.do_action("pos.ui");
};
wc.setElement($(document.body));
wc.start();
});
</script>
</head>
<body>
<div class="openerp openerp_webclient_container">
<table class="oe_webclient">
<tr>
<td class="oe_application"></td>
</tr>
</table>
</div>
</body>
</html>
When the page loads, it will display all my widgets successfully, but it will display at the bottom of the page "Loading..."
why this loading is displayed, and how to remove it.
Appreciate your response
I've written such code in my _Layout.cshtml:
<head>
<link href="#Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.fancybox-1.3.4.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("H");
$('#gallery a').fancybox({
});
}); // end ready
</script>
</head>
<body>
<div id="gallery" >
<a href="../../Content/Images/Slide1.JPG" rel="gallery" title="Img1!:)">
<img alt="Dog" height="170" src="../../Content/Images/Slide1_s.JPG" width="200" /></a>
<a href="../../Content/Images/Slide2.JPG" rel="gallery" title="Img2!:)">
<img alt="Cat" height="170" src="../../Content/Images/Slide2_s.JPG" width="200" /></a>
</div>
</body>
I've used above code in simple html file and it works perfectly. However, if I try to put this code in MVC 4, it does not work. Just links of images work and it shows just image without "new pop-up window". I checked a lot of times all addresses of ".js" libraries and putted "alert('Hello from .js')" to check availability from "Scripts" folder of these libraries.
What's the reason of that? How to resolve it?
I just moved "#Scripts.Render("~/bundles/jquery")" and "#RenderSection("scripts", required: false)" from to and it works perfectly!
The whole code is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<link href="~/Icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>