Ways to feed it with CSS / JS resources

There are several possibilities to place a CSS and JS in html page. Each has some advantages. Yawrap helps handling probably all of them.

from yawrap import Yawrap


class PlainPage(Yawrap):
    resources = []


doc = PlainPage("/tmp/test.html")
doc.render()

Will create a page that has no style sheet (and no content) defined. It’s just to show the Tabula rasa case, when the resources list is empty.

OK, but of course you would like to use the styles and scripts.

External resources

This is how to reference resources hosted on external server.

from yawrap import ExternalCss, ExternalJs


class PageWithExternalCss(Yawrap):
    resources = [
        ExternalCss.from_url("https://www.w3schools.com/w3css/4/w3.css"),
        ExternalJs.from_url("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
    ]

That gives:

Disadvantage of such approach is of course - dependency on other web resource, …but Yawrap doesn’t care it’s your business.

Auto-Linked resources

Yawrap can download the sheet or script given by URL (while page build), save it as a local file and manage its relative path calculation.

Just replace ExternalCss with LinkCss and ExternalJs with LinkJs like this:

from yawrap import LinkCss, LinkJs


class LinkedCssPage(Yawrap):
    resources = [
        LinkCss.from_url("https://www.w3schools.com/w3css/4/w3.css"),
        LinkJs.from_url("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
    ]

With such a result:

See how these link point to local files in resources directory? It’s a default location, next to output html file. Yawrap created it while build.

Let’s say it once again Yawrap downloads and saves the files with each run.

If you allways want to get a fresh copy from these urls, it’s ok. But it’s probably eaiser to download it manually, save it close to your yawrap generator code. While each run, yawrap will source its contents from local files, instead of the web. Rest (i.e. saving to target resources dir) is the same as before.

Such a code will source the linked code from given files:

class LocalSources(Yawrap):
    resources = [
        LinkCss.from_file("path/to/source_of/w3.css"),
        LinkJs.from_file("path/to/source_of/jquery.min.js"),
    ]

Changing default resources path

The default resources output directory can be changed like this:

class LinkCssInMyStyle(LinkCss):
    resource_subdir = "the_super_directory"
    # for nested structure, do:
#   # resource_subdir = os.path.join("the", "super", "directory")


class LinkJsInMyStyle(LinkJs):
    resource_subdir = ""
    # empty string will same dir, as parent html


class MyStyleOfLinking(Yawrap):
    resources = [
        LinkCssInMyStyle.from_url("https://www.w3schools.com/w3css/4/w3.css"),
        LinkJsInMyStyle.from_url("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"),
    ]

This code will generate exactly the same HTML, just paths differ.

Note that JS and CSS will go to separate dirs.

Note

Relative path management makes sense when several pages from different paths share same CSS/JS file. E.g. when NavedYawrap is in use. Then the resources directory path is threated as relative to the top level of output directory structure (relative to root, the first page).

Defining CSS / JS in python code

Sometimes you would like to keep definition of the CSS or JS inside a python module. Especially if you use python for generating it (e.g. calculate CSS colors, margin sizes, etc..)

Then there are

If you are interested with getting single-file page (all-in-one, no linked CSS nor JS), where everything is embedded in single html, then use such an pattern:

Replacing a resource sourcer LinkCss with EmbedCss as here:

LinkCss.from_url("https://www.w3schools.com/w3css/4/w3.css")   # with
EmbedCss.from_url("https://www.w3schools.com/w3css/4/w3.css")

will cause downloading the w3 style sheet and placing it directly to the /html/head/style section. The download happens with each call of Yawrap.render().

It also embeds additional style for body defined as a python string.

The most useful in my opinion is to create own class derived from Yawrap (or NavedYawrap or whatever from the family).