I would like to create an absolute link to files (images, downloads, ...) in my static directory, so during development the link would be http://localhost/myimage.jpg and once deployed it should be https://www.example.com/myimage.jpg.
Is there an easy way (e.g. an environment variable etc.) to reference the current domain name in Gatsby?
I would like to achieve this behavior without changing any config files.
A relative link is not an option in my case. The reason is that I am using the plugin gatsby-plugin-react-intl which modifies all relative links by adding the locale in front of it, meaning, the above mentioned link would automatically turn into https://www.example.com/en/myimage.jpg instead of https://www.example.com/myimage.jpg.
The default behavior is what you described. Using the static folder, a structure like /static/myimage.jpg will be referenced as https://somedomain.com/myimage.jpg.
The same approach applies to PDF or any static asset you wish to make available.
Following that, a structure like: /static/images/myimage.jpg will become https://somedomain.com/images/myimage.jpg.
Keep in mind that the static folder structure is "cloned" inside the public one once the site is built so everything inside will become public. /static becomes the root path once cloned.
I know that this is the default behavior. The problem is, that I'm
using react-intl (or more specifically, gatsby-plugin-react-intl),
which modifies all these paths by adding the locale in front of it,
e.g. <img src='/myimage.jpg' /> becomes <img src='/en/myimage.jpg />.
Using gatsby-image for all purposes is not possible, because it
doesn't work with SVGs etc. I haven't figured out how to stop the
plugin from doing this and I thought knowing how to refer to a your
own domain in js (or react) would be something worth knowing.
Well, there are multiple ways to point to your current domain. From the window.location.origin (check caveats of using window or global objects in SSR) to the default location props exposed by Gatsby (because its extension from #reach/router, from React). Note that location props will be only available in top-level components (pages) but you can drill down or use it as you wish, as any other property.
In addition, the gatsby-plugin-react-intl plugin exposes some methods that provide the current language information, useful to build your own static path to the asset. Using:
const { locale } = useIntl();
Will give you the current locale. You can use it to build your own asset like:
<img src={`/${locale}/images/myimage.jpg`} />
This path will work whether you are in local development or in your hosted project domain, because of the relativity. If you still want to use the full domain, you can use the previously explained location (React-based approach) or the window.location (JavaScript-based approach).
Regarding the automatic modification of static assets and paths, I'm afraid it's the default plugin's behavior and I haven't found any way or exposed method to change it otherwise.
Related
I´m using single-spa library (v 5.8.2) with multiple angular projects. When i try to import ngx-quill (library which imports another library (quill.js)), the single spa library replaces the default import url with localhost:9000 (the url root loads into).
I have followed the single-spa instructions to modify the scss url, images and other own elements, but remember that in this case, the import call is made from an external library, which should not be modified.
I have also tried to insert my own interceptor in which, if it detects that specific url, it is replaced by the one I want, but since this call is not REST, it does not go through that one and I cannot modify it.
Is it possible to make single-spa by default modify the routes so that they access the corresponding node_modules?
Thank you!.
the single spa library replaces the default import url
single-spa does not do anything at build time and is only used in the browser.
What is actually happening is that ng-quill likely makes use of relative references to external assets. This could be in JavaScript (import "./styles.css") or in CSS (#import("./styles.css") but in either case, this means that in the browser the app will try to resolve those. But those URLs being relative means that they're relative to the origin that loaded the asset, which is the root config. That is why you're seeing those URLs.
Is it possible to make single-spa by default modify the routes so that they access the corresponding node_modules?
The answer to this is no, because single-spa is not what is causing this. You need to instead configure your build tool (Webpack is what Angular uses I believe) and handle the processing of those URLs. The single-spa-angular
Angular community has documented them here https://single-spa.js.org/docs/ecosystem-angular/#styles
In Meteor, I have installed the spiderable package, which allows the application to be crawled by search engines. However, I want to exclude certain paths from being crawled.
For example, example.com/abc/[path] should not be crawled, whereas example.com/[path] should be.
I am unsure of how to do this. One guess is to include a robots.txt in the /public directory, and use regex as described here. However, the url doesn't contain the #! as it did in this question. Is that relevant?
My current implementation is a bit more complicated, and it's based on the following quote from the package's README.md:
In order to have links between multiple pages on a site visible to
spiders, apps must use real links (eg ) rather than
simply re-rendering portions of the page when an element is clicked.
At the moment, when the page is rendered, I test whether there's a /abc in the root of the path, and then set a persistent session variable. This allows me to make all paths in my pages' links not contain the /abc prefix. When a link is clicked, it will check whether the session variable is set and append to the path in an onBeforeAction() function, which allows the right template to be rendered. In doing so, I am hoping those links won't be visible to the spider, but I am unsure of the reliability of such a method.
tl;dr - How to exclude certain paths from being crawled in Meteor?
It kind of depends on what you're doing with the folders you don't want crawled. If they're just going to be used on the server side, you can use the /private/ folder. If you want them accessible, but uncrawlable, you can build in access to folders with a /.period/ in them, which makes them invisible to Meteor, but you can access via the connectHandlers and webApp properties similar to my answer here.
If you want them to be processed by Meteor as normal (e.g. javascript files) but then be inaccessible to the spiderable package, I'd suggest asking in meteor-core.
I am completely new to the Play Framework and don't consider myself too talented at front end development, so I was having a great deal of trouble with this...
I want to be able to have a button that changes an image's source back and forth. The images are rather large, so I was thinking of preloading the images in the Javascript, but in order to do that I have to access this Assets controller in order to grab the different images from the public images directory. The trouble is I am trying to keep everything neat and want to try to keep the Javascript (in my case I'm using Coffeescript) in separate files. The problem here is that I can't access this Assets controller from the Coffeescript (or any of the values passed from the Java to the template for that matter). So when I try to change the source of the image, it just gives me a 404.
There's a way in Play to create a global javascript object that has access to reverse routing for controllers, including Assets if you configure that. First read this page:
http://www.playframework.com/documentation/2.3.x/ScalaJavascriptRouting
After reading, set up your javascript routes to include this resource (see embedded router or router resource in docs):
routes.javascript.Assets.at
Then you'll be able to access assets throughout your javascript as follows:
console.log(jsRoutes);
console.log(jsRoutes.controllers.Assets.at("images/favicon.png").url);
I have redefined this question from the original a bit to make it more fundamental to the question at hand. The relevant parts of my filesystem are as follows.
env
tutorial
tutorial
templates
view.pt
static
myjava.js
views.py
__init__.py
Right now my view.pt template has
<script type="text/javascript" src="/static/myjava.js"></script>
Then in my __init__.py, I have
config.add_static_view(name='static',path='env/tutorial/tutorial/static')
And finally, the myjava.js file itself is very simple:
document.write("hello from the javascript file")
I am trying to follow this document: http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/assets.html
but right now none of the text is showing up. I feel like the problem lies in the paths i am giving it.
Some ideas I have had: in the config.add_static_view, the name='static' is confusing. I want users to be able to visit the url www.domain.com/firstpage, where firstpage is the result of a template that uses a javascript file resource (a file in the static folder). I am worried that these static assets are only for urls that start with www.domain.com/static/... Is this a valid concern? How can I tell the config.add_static_view function to serve the static resources for any views rendered from the view.pt template?
Edit: here is what worked:
in the template, use src="${request.static_url('tutorial:static/myjava.js')}"
then in the init.py use config.add_static_view(name='static',path='tutorial:static/')
Your javascript link, in the template, should be something like src="${request.static_url('tutorial:static/myjava.js')}"
This allows your application to be more easily relocated.
This also uses the appropriate asset specification, using the name of the package,
"tutorial", a colon, then a path relative to the location of the "tutorial" package, which in your case the package is at env/tutorial/tutorial.
Edited: I forgot about the Configurator object.
Here, you want to use a similar asset specification such as config.add_static_view('static', 'tutorial:static/').
You can make different static views for different directories as well, like: config.add_static_view('images', 'tutorial:images/')
When you do things like this, you can move the root of your application to another location, allowing you to have http://mysite.com/stable/ and http://mysite.com/devel/ having accesses to / be rewritten to /stable/.
The static views can be called from any template with code like ${request.static_url('tutorial:images/icons/favicon.ico')}
Was reading the docs here and it looks like when you call add_static_view it changes the path of the file? To quote the docs:
this means that you wish to serve the files that live in /var/www/static as sub-URLs of the /static URL prefix. Therefore, the file /var/www/static/foo.css will be returned when the user visits your application’s URL /static/foo.css.
In your case, since you're calling env/tutorial/tutorial/static "static", you might want to try src="static/Three.js"> instead
I'm working in Firefox and relative paths are not working.
One caveat is that I stream my .css file using AJAX and add it to the DOM dynamically.
Another caveat is that my site is entered in one of two ways:
www.host.com (use this for production)
or
www.host.com/dev/ (use this for dev)
Images are either here:
www.host.com/host/images
or
www.host.com/dev/host/images
depending upon how you enter the site.
I can post any information needed and test out a solution.
I was using
../images/name.jpg
but the browser somehow took this for:
hosts.com/images/name.jpg
which does not exist.
This is a question about relative paths and implementing correctly.
Absolute Path URLs
Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is:
What is the correct way to specify relative paths in streamed CSS?
You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to google it would be ...
If you're referring to a Web element that is on the same domain that you're on, you don't need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.
It is a good idea to use absolute paths, without the domain name, on most Web sites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.
Relative Path URLS
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information
listed filename
sub-directories are listed without any preceding slashes
weekly/filename
links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is
located in the/library/weekly folder on my site.
Determine the location of the page or image you want to link to. The
Beginner's Resource Center is located here: /library/beginning/
Compare the locations and to decide how to point to it From this
article, I would need to step up one directory (to/library) and then
go back down to the beginning directory
Write the link using the rules listed above: ...
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
The relative paths are always relative to the CSS location, not the web page location that references the CSS file. So the question is, what is the location of the CSS file to start with? If you make all paths relative to it, it should work for both your production and development URLs.
I need to test this out, but for dynamically inserted CSS all paths are relative to the root directory or www.host.com...where this resolves to...this is essentially saying all paths are actually absolute...this is the behavior I am seeing in FireFox.