I am using inkline breadcrumbs and by docs description I can use :to routing, but it doesn't work properly. :href is working, but I want to use NuxtLink instead of a element. I could add NuxtLink in but it will generate nested a then.
<i-breadcrumb-item
:to="{ path: /something}">
Start
</i-breadcrumb-item>
https://www.inkline.io/docs/components/breadcrumb
Related
I just jump to laravel 9 recently (from few months ago), kinda wondering about,
Is it possible to generate all css classes (including custom classes), BUT, only when APP_ENV on .env is not production?
I tried to overcome No.1 (see below explanation), by using const APP_ENV = import.meta.env.VITE_APP_ENV; on tailwind.config.js - so I can do if - else thing, to load things, but it produce an error - offset is longer than source length! offset 81 > length 59. Is it possible to get .env variables on tailwind.config.js?
As I tried to find another way for No.2. I'm narrowing my objective on No.1 and No.2, so, I tried to load all possibilities of my "custom classes" only on dev. By using safelist - to generate all my-own custom class, but it seems not working well, since, the custom class that I want to add doesn't added. I'm using this - pattern: /./ - since I saw this article says so (please, correct me if I'm wrong), but, it's indeed "hitting" all other classes, not just my custom classes. I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *? (I already check around on tailwind docs, but couldn't found something like that)
I tried a proper way, to just load all my custom classes like pattern: /ctm/, but as stated on tailwind documentation
Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.
How can I do so, without me typing & guessing all of the possibility of variants?
Explanation how I try to overcome For question No.1 -
I tried using these code on app.js
const APP_ENV = import.meta.env.VITE_APP_ENV;
if (APP_ENV == 'production') {
//need to use ()
import ('../css/app.css');
}
and with below code on app.blade.php
#if (config('app.env') != 'production')
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
#endif
But, when it comes to a custom classes on tailwind.config.js - for example
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'ctm-dark-purple': '#2a234f', //<--- custom class here
'ctm-light-dark-purple': '#2a234f', //<--- custom class here
},
},
},
It doesn't generate that custom classes, since I "block" the generated class and swap it into cdn mode on dev.
So, in-summary, how can I "generate all css classes" only on "development" mode? Along with my "custom css class"? If that's not possible, then, is it possible to overcome No.3? I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *?
My main reason is simply, I want to apply classes directly on web-browser console and see the changes more faster, rather than back-and-forth modifying-then-save the code on text-editor.
Thanks a lot!
Log -
Updating Problem No.3 - since forgot to mention precisely what I want
I have a template I have set up as my layout using iron-router:
Router.configure({
layoutTemplate: 'main'
});
Within this layout, I have a line of html that I would like to be changed on certain routes.
My ideas is doing something like:
{{#if landing }}
<div id="page-wrapper">
{{/if}}
However, how do I implement this for a certain route? I want this variable to be true on every route except for 1.
I think that this kind of "change the template based upon what route I'm on" logic fits best into the use of a template for that route (and any others that will make this same change. Depending on the change required, you may be able to call in your base Template into the modified template.
Example:
Router.route('/yourSpecialRoute', function(){
this.layout('OtherLayout');
});
See the Layout docs - I borrowed the syntax of Setting Region Data Contexts
Having said, if you prefer not to switch layouts per route, consider setting a data on your route (something like {data: item} as shown here in the iron:route readme which can then be read by a global helper (Template.registerHelper syntax) - this will at least make it consistent across your routes / templates.
My site works fine when the data is in a template, but once I try to route to it using iron:router, a background image and most remaining content no longer appear. (Some of the content still appears with working css, JS components so I know that those files are being read. Also, when inspecting the element, all the text, images are still visible in the code, but not the website.
This works fine (index.html):
<body>
{{>home}}
</body>
This adds another {{>home}} section, but the new section is having issues rendering as explained above (router.js):
Router.map(function() {
this.route('home', {path: '/'});
});
Are you on the latest iron:router? I had a similar problem, and inquired about it in this pull request:
https://github.com/iron-meteor/iron-router/issues/1051
Latest response indicates this should be fixed now!
You've followed the wrong tutorial :( There are plenty of tutorials and articles out there explaining to define routes like you did.
However, the Iron Router project page explains how to define routes differently.
For more information on routes, have a look at this article about Iron Router as well.
Fixed: problem was not with iron:router but rather that not all elements were loaded into the page yet. Document.ready() works fine when I directly called template.
Issue is that when iron:router loads the template, the new page elements are being loaded after the JS files were already called (JS that animates the images/text in).
Solution: use rendered instead of document ready:
Template.MyTemplate.rendered = function(){
}
This is the problem:
I have a menu link which I want to resolve to domain/course/2
This menu link is on a menu bar. The menu bar is visible on all pages of the web site including /home and /course/1
If I code the menu link like this:
href="/course/2"
then that works fine for navigation. However if I am on /domain/app_dev.php/course/1 then that style of doing the links loses the app_dev and I jump into production i.e. I go to domain/course/2 not /domain/app_dev.php/course/2. Not what I want.
However if I code the menu link like this:
href="course/2"
Then that does not break app_dev. However the navigation breaks. Because it is a relative path if I am in /course/1 when I click on that link I end up in /course/course/2 which of course (no pun intended) doesn't exist.
I can see how I can fix this by making my nav bar know what page (directory) it is being loaded on and set the links dynamically. But this feels a bit "hacky".
This must be a v. common problem with Symfony. How is it best solved?
Looks like you are generating links in "hardcode" style, instead of
href="/course/2"
you should use "path" function, so if you have the route name "closure" for your controller action, then you should use
href="{{ path('closure', {id: 2})}}"
Where "id" is expected action parameter. And I suppose you use Twig as template engine
Before 3.2, I can set the menu item type to "external link" and then set the link as
"javascript:myFunction()"
When clicked, the menu item will call the JavaScript function. But after I upgraded to 3.2, when I did the same thing and tried to save the menu item, it said "Save not permitted".
Did 3.2 block this usage? If yes, how do I get my JS function executed by a menu item?
I've came up this problem a while ago, in Joomla version 3.2.1 concerning a 'Skype' link, e.g.
skype:myloginname
This has to do with the protocol types that are allowed and are defined in this file:
/administrator/components/com_menus/controllers/item.php, line ~180.
There is an array that defines the acceptable schemes:
$scheme = array('http', 'https', 'ftp', 'ftps', 'gopher', 'mailto', 'news', 'prospero', 'telnet', 'rlogin', 'tn3270', 'wais', 'url', 'mid', 'cid', 'nntp', 'tel', 'urn', 'ldap', 'file', 'fax', 'modem', 'git');
When adding skype at the end of the list Joomla! allowed saving the external link. The same applies for javascript. In any case you should consider any security risk that comeswith this solution.
In addition, you should take into mind that this override may be discarded in any future update of joomla.
Technically speaking Joomla thinks that javascript is a protocol, like HTTP & Co., it looks it up inside a list of known protocols, it does not find it and it throws an error.
Start reading at around line inside [MenusControllerItem::save()][1]. So basically it has nothing to do with the fact you are trying to use some JavaScript, this is just a side-effect.
While using JavaScript in the External Link is not really an advertised feature but rather said a loophole, it does break b/c if you have used before.
You can:
Open an issue in the Joomla Issue Tracker and report this issue, get some community feedback. The fix is really easy, it just needs to get accepted.
Use the suggestion below:
Instead of link put #
Set the field "Link CSS Style" to something that does not colide with other classes, eg. my-function
Save
You can use jQuery to intercept the click event on the link and to make it run your function. See code below:
jQuery(document).ready(function($){
// Select element based on the class set in Joomla backend
$( ".my-function" ).on( "click", function(e) {
// Do not follow the link
e.preventDefault();
// Call function
myFunction(1);
});
});
function myFunction(x)
{
alert("I was called" + x);
}
Update: after a short discussion with the commiter of the change, I understood that it may be related to a security issue. So it may be on purpose after all not to allow js.