Cannot install "lanyon" jekyll theme - ruby

Before I begin this, some preface warning;
My knowledge of jekyll is 0.
My knowledge of ruby is 0.
Though I do think I've done pretty well for having no experience and just stepping into it today. That said, this is all completely new to me.
I wanted to give it a try for my github pages for a blog, just to see if I could make it work. I am running into a huge issue with what I suppose would be called the global variables.
I downloaded Lanyon here; Lanyon
I did the following steps, in order, from my Windows 8.1 x64 machine.
Installed python 3.4.1 (link)
Installed ruby using the RailsInstaller (link)
Installed rubygems using gem update --system from a PowerShell console
created a new github repository
created a gh-pages branch in that repository
created a Gemfile in that branch, with the following text
source 'https://rubygems.org'
gem 'github-pages'
Then came the work with Lanyon.
downloaded Lanyon and extracted it, I copied all of the files into a new directory
pushed the entire directory to my repository on branch gh-pages
tried to navigate to the gh-pages given url.
Now I did see the index page, it did have the content, but the theme wasn't working. The css files were missing. Per the instructions for theme structure found on jekyll's website, I made some changes; link
I moved the head.html and sidebar.html into a new subfolder under _includes called themes/lanyon, per the suggested layout on the api docs.
I loved the css folder into a new folder called assets/themes/lanyon, again following those docs
I moved the files apple-touch-icon-144-precomposed.png, apple-touch-icon-precomposed.png, and favicon.ico into a new folder called assets/themes/lanyon/img, following the example in the api docs.
Now comes the trickiest part ... trying to get the {{ ASSET_PATH }} to work.
I looked at the file _includes/themes/lanyon/head.html and saw the 3 css assets had no variables.
I changed them to look like the following
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/poole.css">
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/syntax.css">
<link rel="stylesheet" href="{{ ASSET_PATH }}/css/lanyon.css">
I updated _config.yml to look like this, obviously filling in the [] variables instead.
# For more see: http://jekyllrb.com/docs/permalinks/
permalink: /:categories/:year/:month/:day/:title
exclude: [".rvmrc", ".rbenv-version", "README.md", "Rakefile", "changelog.md"]
pygments: true
markdown: redcarpet
title: lanyon
tagline: 'lanyon theme'
author :
name : Ciel
email : stacey.cielia.lynn#gmail.com
github : ciel
paginate: 5
production_url : http://[username].github.io
Lanyon :
version: 2.0.0
BASE_PATH : "/[repositoryname]"
ASSET_PATH : "/assets/themes/lanyon"
But even with all of that, it still doesn't work. It does_ work if I type the absolute paths to the files, but that's not how jekyll is supposed to work, from my understanding.

To access ASSET_PATH, try :
{{ site.Lanyon.ASSET_PATH }}
Edit : You're using Jekyll Bootstrap (JB) variables, not Jekyll ones.
site.Lanyon.ASSET_PATH is specific to JB. Here it's '/assets/themes/lanyon'
site.Lanyon.BASE_PATH (site.baseurl in Jekyll) is the path from your site root to your Jekyll install.
eg : If you do http://ciel.com/my/jekyll/site/ to reach you site : site.Lanyon.BASE_PATH or site.baseurl = '/my/jekyll/site'
So if you want to reach your assets from any page, you need to do :
<link rel="stylesheet" href="{{ site.Lanyon.BASE_PATH }}{{ site.Lanyon.ASSET_PATH }}/css/poole.css">
or
<link rel="stylesheet" href="{{ site.baseurl }}{{ site.Lanyon.ASSET_PATH }}/css/poole.css">
Et voilĂ  !

Related

Empty CSS files generated through asset pipeline

Problem:
I have a Hugo site with pretty standard setup. It uses asset pipeline to process SASS. It imports bootstrap, font-awesome, and also uses resources.ExecuteAsTemplate (please do check out main.css file). CSS resources are being generated properly (I checked resources/_gen/assets/scss/sass) but the .css file in public directory is an empty file. I am not able to find any problems in the code. See the code here, site here. I tried creating a new project with same head.html file and .scss files, and it generated CSS resources, and had them in the public directory properly.
Additional info:
Related files:
head.html
main.scss
Currently, I am not using PostCSS; just have the config file created. Would be replacing minify with postCSS on line 13 in head.html once empty .css file problem is solved.
Output of hugo version:
Hugo Static Site Generator v0.57.2-A849CB2D/extended linux/amd64 BuildDate: 2019-08-17T17:57:54Z
I would gladly provide any additional information if required. Please help!
In the head.html file, link tag is:
<link rel="stylesheet" integrity="{{ $css.Data.Integrity }}" href="{{ $css.Permalink }}">
Changing the link tag with following:
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
fixes the issue.
It seems that Hugo requires user to first call .Permalink of the asset and then only other related functions or variables.
See related discussion on Hugo Discourse here.

Unable to Include Font Awesome in Laravel

I am new to Laravel and have just started learning about views, routes, migrations, etc. I tried to include the Font Awesome CSS library using the link statement, but that didn't work. I found an answer on Stack Overflow that used npm but got an error running npm run dev that was marked as the solved answer. I also tried to use {{ asset() }} as well as several other functions but none of those worked.
What should I do?
Wrap the code in the url method.
<link href="{{ url('new_dedicated_folder/font-awesome.css') }}" rel="stylesheet">
put inside in head tag
if u use cdn
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
if u use local copy
<link href="/css/fontawesome.min.css" rel="stylesheet" />
make sure youre fontawesome copy is inside of public/css directory

Install Font Awesome in Laravel Using Composer

I install Twitter Bootstrap using composer and can easily include the CSS like this:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
However, when I install Font Awesome using composer in the same way, I don't see any CSS files added to that folder. The one CSS file created by Font Awesome is in /app/vendor/components/font-awesome.
How do I include the downloaded Font Awesome CSS into HTML?
Thank you.
Just put the downloaded css file inside public/css/ directory and add following line in your view file.
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
And, Make sure your directory structure should like this:
public/css/font-awesome.min.css
public/fonts/
So that, icon will be displayed properly.

laravel 5 - css file is not defined in asset manifest?

I get an Error Message with laravel 5, which I don't understand.
Next exception 'ErrorException' with message 'File build/css/all.css not
defined in asset manifest.
I haven't installed any asset pipeline or something. Just used elixir to compile, minify and version the scss-file to all.css and included it into the master view with <link rel="stylesheet" href="{{ elixir("css/all.css") }}">
What is this 'asset manifest' and how to fix this error?`
The question is of course what you want to achieve.
If you simply put all.css file into the public/css directory and you want to display this file, you can use:
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
However if you plan to modify this file and you don't want to have caching issues, you can put this all.css file again into public/css then put into gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.version('public/css/all.css');
});
Now you'll need to run:
gulp
in your terminal, and now you can use
<link rel="stylesheet" href="{{ elixir('css/all.css') }}" />
as you previously did in your HTML.
It will create public/build/ folder with rev-manifest.json (this file is missing in your case).
I would recommend you to watch Managing assets Laracasts episode to understand it a bit better.
Same issue here!! I solve it by creating production version of css. I update gulefile.js as bellow,
elixir(function(mix) {
mix.sass('app.scss').version('css/app.css').browserify('app.js');
});
Then run following command which will create rev-manifest.json file in public/build directory.
gulp --production
Good luck!!

Symfony 2 compass with assetic on Windows XP

I try to install Compass in my Symfony 2.3.1 project on Windows XP though not successfuly up to now.
I have Ruby, compass, sass the newest versions installed.
This is my assetic configuration in app/config/config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
#bundles: [ ]
#java: /usr/bin/java
filters:
cssrewrite: ~
sass: ~
compass: ~
Here is my app/cofnfig/parameters.xml
# Assetic
assetic.filter.compass.images_dir: %kernel.root_dir%/../web/images
assetic.filter.compass.http_path: /images
assetic.filter.compass.bin: C:/Ruby200/bin/compass
The block code including stylesheets section in app/Resources/views/base.html.twig
{% stylesheets filter="compass"
"#PortalSlubnyMainBundle/Resources/assets/css/main.sass"
"#PortalSlubnyMainBundle/Resources/assets/css/header.sass"
"#PortalSlubnyMainBundle/Resources/assets/css/footer.sass"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Ok so when I try to compile this from command line as a result of this command php app/console assetic:dump I get output below:
Dumping all dev assets. Debug mode is on.
17:46:14 [file+] C:/xampp/htdocs/slub/app/../web/css/12c97a7.css
[Assetic\Exception\FilterException] An error occurred while
running: "C:\Ruby200\bin\ruby.EXE" "C:/Ruby200/bin/compass"
"compile" "C:\Documents and Settings\piotr\Ustawienia lokalne\Temp"
"--images-dir" "C:/xampp/htdocs /slub/app/../web/images" "--config"
"C:\Documents and Settings\piotr\Ustawi enia
lokalne\Temp\ass1C9.tmp" "--sass-dir" "--css-dir" "C:/Documents and
Settings/piotr/Ustawienia lokalne/Temp/ass1CA.tmp.sass"
Error Output: You must compile individual stylesheets from the
project directory.
Input: html, body {
overflow-x: hidden;
background-color: yellow;
}
assetic:dump [--watch] [--force] [--period="..."] [write_to]
Ruby is working from cmd and it is set in the PATH environment variable as well as compass. Guys any help would be fully apreciated.
EDIT:
Thanks for the answer unfortunetly it doesnt help me either.
When I changed names to bundles/portalslubnymain/css/main.sass CLI return me error sth similar to that this file is unable to find, thogh the paths to files seem to be ok
I followed instructions form the article you posted earlier I also checked this article
Looking at your code i suggest you followed this article. please notice the UPDATE notice at the end!
At first your assets should live in the Resources/public folder ...
... not in Resources/assets. fix this...
Afterwards please change ...
{% stylesheets filter="compass"
"#PortalSlubnyMainBundle/Resources/public/css/main.sass"
"#PortalSlubnyMainBundle/Resources/public/css/header.sass"
"#PortalSlubnyMainBundle/Resources/public/css/footer.sass"
... to
{% stylesheets filter="compass"
"bundles/portalslubnymain/css/main.sass"
"bundles/portalslubnymain/css/header.sass"
"bundles/portalslubnymain/css/footer.sass"
... because some assetic filters ( i.e. cssrewrite ) are known to NOT work with the #-syntax.
Afterwards symlink your assets into the web dir like this:
app/console assets:install web --symlink
Finally you should be able to run
app/console assetic:dump

Resources