Base href URL html5 - html

I have a website like www.site.com, I used languages on it:
https://www.example.com/en/dashboard.html
https://www.example.com/es/dashboard.html
https://www.example.com/fr/dashboard.html
https://www.example.com/de/dashboard.html
And I am using a base href url:
<base href="www.site.com/">
If I call a css file or a js file such as:
<link rel="stylesheet" href="assets/css/bootstrap-4.5.0.min.css">
It give that the file does NOT exists, when I check the source code and click on that file, I follow to the below url:
https://www.example.com/en/assets/css/bootstrap-4.5.0.min.css
However files are under root domain:
/home/site/www/assets/css/bootstrap-4.5.0.min.css
Not under all languages.
So can I call these files to have a url like this, without language code:
https://www.example.com/assets/css/bootstrap-4.5.0.min.css

Related

Location of webroot (for css file) in Perfect app

I've cloned the PerfectTemplate project and am using it to serve up html as follows…
import PerfectHTTP
import PerfectHTTPServer
var routes = Routes()
routes.add(method: .get, uri: "/test") { request, response in
response.addHeader(.contentType, value: "text/html")
response.setBody(string: """
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Welcome">Hello</div>
</body>
</html>
""")
response.completed()
}
routes.add(method: .get,
uri: "/**",
handler: StaticFileHandler(documentRoot: "./webroot", allowResponseFilters: true).handleRequest)
try HTTPServer.launch(name: "localhost",
port: 8181,
routes: routes,
responseFilters: [(PerfectHTTPServer.HTTPFilter.contentCompression(data: [:]), HTTPFilterPriority.high)])
I'm compiling and running with Xcode, and http://localhost:8181/test is returning the html as expected.
The problem is the location of the external css file. As far as I can tell this should be in a folder called webroot, but where should that folder be when running locally?
For reference, I'm coming at this as an iOS dev, so my knowledge of web development and server config is limited.
Update
Per a suggestion on the Perfect Slack group, I added the css file to the project folder (the same folder as Package.swift), and set the Working Directory of the scheme $(PROJECT_DIR) - but I’m getting a 404 trying to load http://localhost:8181/style.css
With help from the Perfect Slack group, I found a solution. The missing piece for me was the webroot folder. I'd assumed this was some kind of alias, but it turns out that you do need to create an actual folder called webroot. So…
Set the Working Directory of the scheme to $(PROJECT_DIR)
In the project folder, create a folder named webroot and add the css file to that folder. It should look like this…
I'm sure all the seasoned web devs are laughing at me right now!

Canonical link type with no protocol or domain path, auto-generated with forward slash & file extension

1&1 MyWebsite is automatically generating
<link rel="canonical" href="/">
for the home page.
I do not have access to the .htaccess file.
Is there a way to remove this auto-generated tag that I'm missing? I want to set the canonical link type to the HTTPS protocol with full domain & file extension where necessary. Is this an issue that arises with the SSL certificate? Each page is auto-generating with the forward slash & proceeding file location & extension.
Auto-generated home page tag = href="/".
You can instead change the canonical link in dom using Jquery.
See this:
Replace existing canonical tag with javascript or jquery
You can use this:
<script>
$(document).ready(function() {
$('link[rel="canonical"]').attr('href', 'http://www.yoursite.com');
});
</script>

How to create global variables to share between HTML pages

Hi I am currently working on porting over an application to a new server and I each time I move the application to a new directory I have to manually go in and change all of the img, src, and script tags within the html pages. This is becoming very tedious because there are over 30 different pages.
Is the anyway to create a configuration file that holds global variables that can then be included at the top of every HTML file? For example, if I change the path to a script, the only change I would have to make is in the configuration file and not every separate html file.
edit to clarify:
Currently I have hard coded scipt/img/scr tags that look like this:
<link rel="stylesheet" type="text/css" href="/app/returning/html/returning.css" />
I was hoping I could make the href value a variable in a separate file that can be included at the top of every page and it would look something like this:
<link rel="stylesheet" type="text/css" href="(variable from configuration file here)" />
You can create another javascript file with an object with all settings/configurations, and include it in every HTML page.
Something like:
var settings = {
applicationName : "TEST",
IsInDebug : true
};

Tornado static file routing

I'm trying to prepare a default error page. In error.html file I use:
<link href="css/bootstrap.min.css" rel="stylesheet">
In tornado Application I use following routing instruction:
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
Let's say I type http://localhost:8888/api url. Everything is fine and css file is loading correctly and error page is rendered fine. However when I type http://localhost:8888/api/foo the css file is not found.
In the first situation the css request http://localhost:8888/css/bootstrap.min.css is handled correctly by the handler. In the second approach the request for css is translated to http://localhost:8888/api/css/bootstrap.min.css which is not handled.
I want the resources to be found in both situations to correctly display error page. I can use:
(r'.*/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
However this time I can type into browser http://localhost:8888/api/asdasdsadsad/css/bootstrap.min.css url and the css file is dispayed while I think there should displayed error page. How may I get rid of this problem?
It is because you use relative paths. There are two common ways to fix this:
use absolute urls. Add / (slash) before any resource, so instead of <link href="css/bootstrap.min.css" rel="stylesheet"> use <link href="/css/bootstrap.min.css" rel="stylesheet">
add <base> to page in <head> section
Base ... specifies the base URL to use for all relative URLs contained within a document.
<base href="http://www.example.com/">
And leave the handler as
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'})
the latter is working because it's regex is very broad, as you notice it handles request that should be 404. The good practice is to have routes as specific as possible.

can't locate css files in paths

My directory structure is something like this
APPLICATION
|
+-[code]
+-[config]
+-[database]
+-[includes]
+-[src]
+-.htaccess
+-composer.json
Pretty self explanatory. The .htaccess guides requests to src/index.php, the code is the middle tier logic, the database is the DAL and the config is configuration INI filies.
The problem I have is that my header file... I have a header.php file in [includes] that holds all of my css directives (html5reset, global.css, etc) but for some reason I can't access them. The fact that I can access the header file makes me think I should be able to access the css files (which live in [includes]) but they are not loading.
The odd thing is, in firebug, it looks like the actual html page is loading in the place where the css is loading.
this is my call from /includes/header.php
<link href="/includes/css/html5reset.css" type="text/css">
Confusing question, I apologize. Any advise would be appreciated.
in your config.php file you can define a URL (baseurl)
define('URL', 'http://localhost/myproject/');
then you could use this defined variable like so...
<link href="<?php echo URL ?>includes/css/html5reset.css" type="text/css">