Here is the plugin code...
module Jekyll
module VersionFilter
def versioned_url(input)
"#{input}?#{Time.now.to_i}"
end
end
end
Liquid::Template.register_filter(Jekyll::VersionFilter)
I am trying to cache bust/version control my .css file. I am new to Liquid. I am having trouble figuring out this basic plugin. Any help?
You need to put version.rb into the _plugins/ directory in the root of your Jekyll site. If you don't have a _plugins/ directory, create one.
For usage - it looks like it gives a new filter that you can apply to text - so you'd use it in your templates to filter the references to your CSS files, adding the query string so that they aren't cached - but I'm sure there's more info on that wherever you got the code from.
For what it's worth, breaking caches with querystrings isn't the best solution. It'd probably be better to write a plugin that adds a new string to the actual filename, and then adds that string to the urls where those assets are included in the templates - but that is a bit more complex.
If using an existing plugin for static asset versioning is an option for you, try jekyll-minibundle.
Assuming you keep non-stamped CSS files in _styles (note the _, because you don't want these to be exported to the production site) and want the stamped CSS files to appear in css, do the following:
<link href="{% ministamp _styles/site.css css/site.css %}" rel="stylesheet" media="screen, projection">
That works fine in combination with compass, just make compass export to _styles.
Related
I'm trying to produce modular webpack bundles, I'd like to put my TS files on the folders where I would use those specific scripts and then transcript them to the public folder.
Example: the blade 'index.blade.php' and 'index.ts' are in resources/views/register/client.
The blade would have a tag <script src="{{asset('assets/js/register/client/index.js')}}"> </script> to import the webpack-generated bundle 'index.js'.
I think this way my resources would be more organized but I can't find a way to do this nor a better solution.
In my website, I am only including the .css files that are generated by SASS. However, when I inspect the Network tab in Chrome I can see the browser is trying to GET the .map and .scss files as well. The .map file works, but the .scss is failing because of the file type being not allowed in my server configuration.
Are these files supposed to be loaded as well? I would expect only the CSS is needed.. these others are just used in the compilation side.
Here is my line of code
<link rel="stylesheet" type="text/css" href="/mywebapp/SASS/maas.css" />
When I exclude it, the browser GETs none of these files, but adding it causes it to GET all 3... I'm very confused about what is initializing these requests.
If this is NOT supposed to happen by default then there must be something set up in our CMS that is forcefully requesting these files.
Try to find in your CSS something like this /*# sourceMappingURL=/mywebapp/SASS/maas.css.map */
maas.css.map tries to read you .scss
You can read - http://thesassway.com/intermediate/using-source-maps-with-sass
Actually my question is How is folder path hidden ? Firstly I am using Joomla.
I found a website 4 months ago, so i don't remember name of the website which is Joomla site. They hide their folder path.
Between to head> sth. head(tags). If you look at source code, you can see this part. And then this part include template name.
For example:
<link type="text/css" href="http://www.site.com/templates/template_name/css/style.css" rel="stylesheet"></link>
So we can learn to what the name of the template. But they hide this part. When i looked this part(http://www.site.com/templates/template_name/css), i can see only /style.css.
Do you have any idea?
You need two things to accomplish that.
A (system) plugin, that changes every template related URL to the 'official' format, eg.
$url = str_replace('/templates/template_name/css/', '/style/', $url;
An .htaccess redirect reverting the change.
RewriteRule ^style/(.*)$ templates/template_name/css/$1 [R=301,L]
If you want obscure template names, and a few modules and plugins from HTML source, the easy way is use a CSS and JS compressor like jbetolo or RokBooster.
But keep in mind that you will make a bit more hader to find your template name, but still possible via other ways. Like some images if they are not compressed in HTML.
I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.
How do I access assets on my maintenance page in rails 3.1 with the asset pipeline enabled?
With the asset pipeline enalbed all assets have a hash in their filename. However, maintenance pages are vanilla HTML, and rails/passenger is being bypassed by the apache config, so there's no way to generate the right asset paths.
I need my application.css and an image file. It's fine if they're the old ones.
I can think of a few kludges, but they're all lame:
On each deploy, symlink the assets I need to a generic name that I use in the maintenance file.
Make my maintenance page dynamic, generate it, and dump the markup somewhere - then modify my maintennce 'deploy' script.
If you want to avoid a symlink or a dynamic (erb) page, then use a static template and modify this during deployment.
First create a maintenance page template.
During deployment read the mainfest.yml file created by the precompile process.
Read in the template of the maint page.
Replace any files named in the template with the hashed version from the manifest.
Write out the altered template to the file-system.
For anyone's convenience, I adopted Richard's solution in my project and created a simple ruby script that replaces asset links in the static HTML error / maintenance pages. It is deliberatery NOT a rake task so that it is as fast as possible. It has no Rails depenency anyway, other than that it has to be run from the rails root directory.
#!/usr/bin/env ruby
require 'yaml'
GLOBS = %w(public/errors_source/*.html)
MANIFEST = "public/assets/manifest.yml"
manifest = YAML::load(File.open(MANIFEST))
GLOBS.each do |glob|
Dir.glob(glob).each do |file|
next unless File.file?(file)
contents = File.read(file)
manifest.each do |asset, compiled_asset|
contents.gsub!(asset, "/assets/#{compiled_asset}")
end
File.open(file.gsub('errors_source/',''), 'w') do |outfile|
outfile.write(contents)
end
end
end
The script expects the static HTML error/maintenance pages to live under the errors_source directory and copies them (with assets replaced for their hashed versions) to the rails root directory.
A sample maintenance page then may look like this (notice the CSS asset link and logo image - these assets are simply shared with the main rails code):
<html>
<head>
...
<link href="application.css" media="screen" rel="stylesheet" type="text/css"/>
</head>
<body>
...
<img src="logo.png" width="161" height="61"/>
...
</body>
</html>
If you are on Heroku, there's an add-on called Trackman.
You can link all your assets and it deploys your pages and assets on S3.
You practically have nothing to code.
You can use the utilities within the gem to also make the dev a piece of cake.
http://www.trackman-addon.com