Giter Club home page Giter Club logo

staticfy's Introduction

Status

Build Status Code Climate

Staticfy

Have you ever been annoyed by the amount of time you spend manually changing the links in a html template you bought or downloaded until all the static files and assets are properly linked and the file looks exactly like the demo you saw online? with Staticfy you can save that time (and some of your hair) by automatically converting the static urls in your template to dynamic url's that wouldn't break if you decide to move your file to another location.

<img src="img/staticfy.jpg" /> ===> <img src="{{ url_for('static', filename='img/staticfy.jpg') }}" />

Installation and Usage

Clone the repo from github

git clone https://github.com/danidee10/Staticfy.git

Make the script executable with

sudo chmod +x staticfy.py`

and run it

./staticfy.py staticfy.html --static-endpoint=static --add-tags='{"img": "data-url"}'`

Using ./ runs Staticfy with python3, if you're running windows or you want to use another version of python e.g python2, you can just run

python2 staticfy.py staticfy.html --static-endpoint=static --add-tags='{"img": "data-url"}'`

--static-endpoint and --add-tags are optional

Before Staticfying

alt tag

After Staticfying

alt tag

Notice how it preserves the font-awesome css link at the top of the file?, external resources (images, scripts, font-awesome, google-fonts, bootstrap files, disqus e.t.c) which aren't hosted locally with your website won't be staticfied. Staticfy also accepts an optional argument --static-endpoint in case you're not using the default static endpoint.

Staticy also preserves the indentation and formatting of any html file given to it, so your html file(s) are still look the same way and are still readablebe just the way they were before you staticfied them.

Batch operation

Staticfy is also smart enough to know if it was given a single file or a directory to work with, if you want to staticfy all html files in a directory, just give staticfy the name of the directory that's all!. staticfy will search through the specified folder and staticfy all the (html | htm) files it finds, this saves you more time if you want to staticfy a bunch of files at once.

./staticfy.py html_files'

Additional tags and attributes

By default staticfy identifies and staticfies the following tags:

  1. img tags with src attributes -- <img src="" />
  2. link tags with rel attributes -- <link rel="" />
  3. script tags with src attributes -- <script src="" />

But it's common these days for javascript libraries (for a slider or animation) that have link to images (mostly) or other static resources. you can easily staticfy those tags by specifying the --add-tags argument and passing in a valid JSON string, an example is this slider from http://www.pixedelic.com/plugins/camera/, you can staticfy the div tags like this

./staticfy.py staticfy.html --add-tags='{"div": "data-src"}'`

and sure enough it gets staticfied

Before staticfying

alt tag

After staticfying

alt tag

You can exclude certain tags you don't want to be staticfied by specifying the --exc-tags parameter, like --add-tags it expects a valid JSON string.

./staticfy.py staticfy.html --exc-tags='{"img": "src"}'`

running that on a template should leave the img tags with the src attribute as they were in the original file.

It should be noted that sub folders containing html files won't be staticfied, only html files that exist in the specified directory will be staticfied. (this might change in the future)

Whenever you run staticfy on a template or on a folder, a staticfy folder is generated in the present working directory and the staticfied file(s) is placed in that folder, you also need to copy the file(s) over to the appropriate directory to overwrite the existing file with the new one.

Using staticfy with other frameworks

Staticfy was initially built with flask in mind, but it can also be extended to support other frameworks easily, out of the box it supports:

  1. flask
  2. django and
  3. laravel

for example to use staticfy with django specify --project-type=django, You can also set the environment variable STATICFY_FRAMEWORK to any supported framework, so you can avoid using --project-type everytime. if you're running linux you can easily do this from the terminal.

export STATICFY_FRAMEWORK=django

If you specify a project_type that isn't found, staticfy would cry and gracefully fall back to it's flask roots.

To add support for other frameworks, simply edit the config.py file and add your framework and it's corresponding pattern to the frameworks dictionary, using python3 string formatting for the pattern. you've added a new framework to staticfy read the contribution section and make a PR we'll love it!

Tests

The tests are located in the test.py file and can be run with ./test.py

Python support

Staticfy supports both python2 and python3 (python 2.7 >)

Requirements and 3rd party stuff

Beautiful soup 4 pip3 install bs4 or you can use the requirements file pip3 install -r requirements.txt

if you have issues with importing HTML.parser on python 3.5, run this pip install --upgrade beautifulsoup4

Contribution

Pull requests and issues are welcome, if you're making a pull request, make sure you respect the surrounding code style and write tests to show that your code works, in your PR and commit also describe clearly what your PR attempts to fix / improve / add

You should also write your code from python3's perspective, try to avoid python2 style and idioms as much as possible.

staticfy's People

Contributors

danidee10 avatar gbozee avatar

Watchers

James Cloos avatar Bashir Hamza avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.