I've been given a lighttpd.conf that someone else wrote and need help working out how to serve it. I'm 90% of the way there but stuck... The index.html page appears, but links and CSS files don't point to the right place.
To clarify, the links and CSS files are all pointing to a 'file:///' URL. So styles.css in the HTML header points to file:///html/styles.css, whereas it should be going to http://example.com/styles.css
Maybe url.rewrite or url.redirect isn't working properly?
server.document-root = "~/html"
server.port = 28001
mimetype.assign = (
".html" => "text/html",
".txt" => "text/plain",
".jpg" => "image/jpeg",
".png" => "image/png"
)
url.rewrite = (
"^(.*)/($|\?.*)" => "$1/index.html",
"^(.*)/([^.?]+)($|\?.*)$" => "$1/$2.html"
)
$HTTP["scheme"] == "http" {
url.redirect = (
"^/platform/index.html$" => "/platform",
"^/about/company.html$" => "/about/company",,
)
}
----- UPDATE ------
file:/// problem now solved, thanks to Marcel. However, http://example.com/about/company still doesn't find anything, whereas http://example.com/about/company.html renders OK. Is there a problem with url.rewrite? I'm using v1.4.20 of lighttpd, so maybe I need to change it to rewrite-once or rewrite-final?
About the original problem: it's not a problem of web server configuration, but of the HTML being served, likely containing the file:// protocol. Use http:// instead.
Regarding the second problem: I'm not an expert in Lighttpd configuration options, but it might help if you exchange those settings in url.redirect and get rid of the trailing commas, like:
url.redirect = (
"^/platform$" => "/platform/index.html",
"^/about/company$" => "/about/company.html"
)
(but I'm not sure). See the documentation for examples.
BTW, is mod_redirect loaded in server.modules?
Related
I have searched everywhere I can think of and can't find a single example of an "a" href which contains a relative path on localhost with embedded spaces.
I am trying to download a json file from my localhost located at "json/test file.json". If I rename the file to "json/test-file.json" then the link works fine. I have hundreds of json files and renaming them will break other applications.
I have also tried putting quotes around 'json/test file.json' and that does not work either.
Here is a simple tag that demonstrates the problem
<a id="download_json" href="json/test%20file.json" title="Download JSON" target="new" download>Download</a>
I have already tried encodeURI but that is a waste of time. If you can just hard code the path/file as shown above for testing with nothing fancy it would be helpful and avoid distractions.
This problem must have a very simple solution, I just can't seem to put my finger on it.
Any ideas will be deeply appreciated, Thank you for your time.
Finally found the answer. Problem only with Firefox Developers Edition
function downloadJSON(filename, dataObjToWrite){
const blob = new Blob([JSON.stringify(dataObjToWrite)], { type: "text/json" });
const link = document.createElement("a");
link.download = filename;
link.href = window.URL.createObjectURL(blob);
link.dataset.downloadurl = ["text/json", link.download, link.href].join(":");
const evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
});
link.dispatchEvent(evt);
link.remove()
};
I'm Working on a Angular 6.x application where i'm trying to change theme (dynamically).
The CLI compile everything properly but in developer console im getting this error message.
Refused to apply style from
'http://localhost:4200/vendor/theme-light.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME
checking is enabled.
My file structure looks like this, the path is correct
project
|-src
|-vendor
|-theme-light.css
|theme-dark.css
My theme changing code looks this
import { Component, Inject, PLATFORM_ID } from '#angular/core';
import { DOCUMENT, isPlatformBrowser } from '#angular/common';
#Component({
..
..
})
linkRef: HTMLLinkElement;
themes = [
{ name: 'Light', href: '../vendor/theme-light.css' },
{ name: 'Dark', href: '../vendor/theme-dark.css' }
];
constructor(#Inject(DOCUMENT) private document: Document, #Inject(PLATFORM_ID) private platformId: Object) {
if (isPlatformBrowser(this.platformId)) {
let theme = this.themes[0];
try {
const stored = localStorage.getItem('theme');
if (stored) {
theme = JSON.parse(stored);
}
} catch (e) {
}
this.linkRef = this.document.createElement('link');
this.linkRef.rel = 'stylesheet';
this.linkRef.href = theme.href;
this.document.querySelector('head').appendChild(this.linkRef);
}
}
setTheme(theme) {
localStorage.setItem('theme', JSON.stringify(theme));
this.linkRef.href = theme.href;
}
Now, I don't really understand why this happens. Is am i missing something ? Feel free to ask for more details if needed.
Any help will be really appreciated.
Thanks
Looks like the href is wrong.
There is a good answer to a different question exactly like yours:
The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever...
The solution is to find the correct path and router configuration so that you get your plain CSS file / image / etc. when accessing that path.
In your case it's the css href.
Finally figured out Im giving the wrong path on my path configuration href: '../vendor/theme-light.css' thats returns http://localhost:4200/vendor/theme-light.css on the browser which is not the correct path.
Solution
themes = [
//added the missing src ( source root)
{ name: 'Light', href: '../src/vendor/theme-light.css' },
{ name: 'Dark', href: '../src/vendor/theme-dark.css' }
];
Thank You for your answers
when you're using a static folder , please make sure to use "/" . Let's say for example assets is our static folder , we want the image folder which is under the assets , so you type this src="image/img1.png" , that's wrong you have to add "/" ,,, so it will be like this src="/image/img1.png"
Found this answer here Proper solution
The issue could be with a CSS library starting with comments. While on dev, We do not minify files and We don't remove comments, this meant that the stylesheet started with some comments, causing it to be seen as something different from css.
Removing the library and putting it into vendor file (which is ALWAYS minified without comments) solved the issue.
you have to change the place of your file css into the directory assets assets/style.css
and then put these path in your file index.html src/index.html
<link rel="stylesheet" type="text/css" href="assets/style.css" />
in addition you have to modify to file angular.json in styles
"styles": [
"src/assets/style.css",
"./node_modules/materialize-css/dist/css/materialize.min.css",
],
In mediawiki, I can show a link to a file using:
[[Media:File.pdf|A file]]
Results in
A file
But how can I get the the last modified date for an uploaded file? I would like to show the timestamp alongside that link, rather than having to go to the file page for it. Is there a way to do this?
A file [Timestamp]
Does this require an extension of some sort? I am unable to find any documentation on getting metadata for uploaded files.
It would require custom logic, yes (which is normally packaged into extensions but in simple cases you can just add it directly to your config file). You can use the HtmlPageLinkRendererEnd hook for example:
global $wgHooks;
$wgHooks['HtmlPageLinkRendererEnd'][] = function(
LinkRenderer $linkRenderer, LinkTarget $target,
$isKnown, &$text, &$attribs, &$ret
) {
if ( $linkTarget->inNamespace( NS_FILE ) ) {
$file = wfFindFile( $linkTarget->getText() );
if ( $file && $file->exists() && $file->isLocal() ) {
$text .= ' ' . $file->getTimestamp();
}
}
};
(untested) which will put the timestamp inside the link but it's close enough.
I use noam image manager for my yii2 app
https://github.com/noam148/yii2-image-manager
and in the components , they told me to put this
'components' => [
'imagemanager' => [
'class' => 'noam148\imagemanager\components\ImageManagerGetPath',
//set media path (outside the web folder is possible)
'mediaPath' => '/path/where/to/store/images/media/imagemanager',
//path relative web folder to store the cache images
'cachePath' => 'assets/images',
//use filename (seo friendly) for resized images else use a hash
'useFilename' => true,
//show full url (for example in case of a API)
'absoluteUrl' => false,
],
],
and i tried so many times to make the extension create folder outside the web folder , and always not working , can somebody help me on this ?
i found the way to move the target , all you have to do is make link shortcut in config files, and use it in params file , and also you can modified the model in the composer files directly
I want to use the html5 cache manifest technology with CakePHP,
but I don't know where to place the cache manifest in CakePHP,
I've searched for a solution, but I do not found anything.
Can you help me?
The best and easiest way to access one manifest file in all views is to look at your layouts, for example
View/Layouts/default.ctp
and replace <html> with
<?php echo "<html manifest='".$this->webroot."manifest.php'>"; ?>
in which manifest.php is located in
app/webroot/manifest.php
and looks something like this:
<?php
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
echo "\n\nNETWORK:\n";
echo "*\n";
echo "\n\nCACHE:\n";
echo "# Version: 1\n";
?>
So the manifest.php is only needed once and can be used for all views.
HINT:
For a dynamic manifest-file you can use a code snippet from here:
http://nial.me/2010/01/using-the-html5-cache-manifest-with-dynamic-files/
I tried this solution, putting the manifest in default.ctp, but it causes some problems, all my pages was cached... i think it's discribed in the spec "...the page that referenced the manifest is automatically cached even if it isn't explicitly mentioned".
...couse this all my pages was being cached, manifest is checked in each page. And when another user logs in they see the last user homepage and other pages.
The final solution: create a redirect/loading page
1 - create the redirect page:
I had create the Pages/redirect.ctp file and the function redirect(){} in the Pages controller. A simple page, just with a hello message and a loading bar based on the applicationCache progress event:
var appCache = window.applicationCache;
appCache.addEventListener('progress', function(event) {
console.log(event.loaded + " of " + event.total + " files...");
//make some changes in the page' loading bar
}, false);
2 - Load manifest only in the redirect page:
In the View/Layouts/default.ctp I filtered the tag to show the manifest only in the redirect page:
<? if($this->request->params['controller']=='pages' &&
$this->request->params['action']=='redirect'): ?><html
manifest="<?=$this->webroot?>manifest.php">
<? else: ?>
<html >
<?
endif; ?>
3 - Use the redirect page in the auth component to lead my user
to redirect page after login:
In the appController a setted auth component like this
public $components = array (
'Session',
'Auth' => array (
'authError' => "user or password invalid",
'unauthorizedRedirect' => "/pages/redirect?err=login",
'loginRedirect' => "/pages/redirect",
'logoutRedirect' => "/",
'loginAction' => "/user/login",
'authorize' => array ('Controller')
)
);
now only the elements putted in the manifest will be cached. The redirect page is cached (according the spec) but the applicationCache event updates the page torning this "dinamic".
If you mean the manifest file it should go into /app/webroot, the directory that your vhost should also use for the site. besides this there is nothing really related to CakePHP with this.
Have a look at this: http://www.html5rocks.com/en/tutorials/appcache/beginner/