CSS styling missing

[Victorlouisdg]

Hi I'm having trouble converting Markdown files to html/pdf. I installed grip on Ubuntu 20.04 by running:

sudo apt install grip

and then, when I try to display a Markdown file, like the README of this repo:

grip grip.md

I get this result:

The console output is the following:

 * Serving Flask app "grip.app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://localhost:6419/ (Press CTRL+C to quit)
127.0.0.1 - - [20/Jan/2021 12:46:54] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [20/Jan/2021 12:46:54] "GET /__/grip/static/favicon.ico HTTP/1.1" 200 -

Thanks in advance :)

[raxod502]

In classic Ubuntu fashion, release 20.04 packages a version of Grip from April 2016, which obviously doesn't work at all given upstream updates to GitHub. Furthermore, even the latest official release of Grip is from March 2018 and it doesn't work either (although it's not as broken as the 2016 version). You need to run from source.

In case it's helpful, here's my packaging script:

#!/usr/bin/env bash

set -euxo pipefail

if [[ ! -d grip ]]; then
    git clone https://github.com/joeyespo/grip.git
else
    git -C grip pull
fi

ver="$(git -C grip describe --tags | sed 's/^v//')"

pkg="grip-${ver}"

rm -rf "${pkg}"
pip3 install --root="${PWD}/${pkg}" --prefix=/opt/grip --ignore-installed ./grip

pyver="$(ls "${pkg}/opt/grip/lib" | head -n1)"

install -d "${pkg}/usr/local/bin"
tee "${pkg}/usr/local/bin/grip" <<EOF >/dev/null
#!/usr/bin/env bash
set -euo pipefail
exec env PYTHONPATH=/opt/grip/lib/${pyver}/site-packages /opt/grip/bin/grip "\$@"
EOF
chmod +x "${pkg}/usr/local/bin/grip"

install -d "${pkg}/DEBIAN"
tee "${pkg}/DEBIAN/control" <<EOF >/dev/null
Package: grip
Version: ${ver}
Section: utils
Priority: optional
Architecture: all
Maintainer: Radon Rosborough <radon.neon@gmail.com>
Description: Preview GitHub Markdown files like Readme locally
EOF

fakeroot dpkg-deb --build "${pkg}" "grip-${ver}.deb"
if dpkg -s grip &>/dev/null; then
    sudo dpkg -r --force-depends grip
fi
sudo apt --fix-broken install -y "./grip-${ver}.deb"

[Victorlouisdg]

Thanks for the info!

Just tried running from source, and indeed it does work on Ubuntu 20.04.

For anyone wondering how to run from source:

git clone https://github.com/joeyespo/grip.git
cd grip/grip
python3 __main__.py /path/to/your/README.md

[ghost]

Unfortunately I am also having this issue, even when running from source. No errors in the console or network tab however. I'm running on Arch Linux if it's relevant, have tried both AUR packages as well as manual cloning, and have run --clear first both times. Tried two browsers in case that was the issue too.

[jj1bdx]

I've found that when the following Content-Security-Policy HTTP header is set on the Web server (Apache in the following example), inline styles are prohibited and rejected by the browser, so the style sheets of Grip are not accepted by the browser.

Header set Content-Security-Policy "default-src 'self';"

A workaround for this is to put all the stylesheet data into a separate file.

You can find an example of mine at https://radio.jj1bdx.tokyo/wspr.html and https://radio.jj1bdx.tokyo/css/grip-styles.css.

[long2ice]

I resolve this by add --no-inline option and add https://radio.jj1bdx.tokyo/css/grip-styles.css to settings.py of STYLE_URLS

[jj1bdx]

@long2ice Use a local copy of grip-styles.css. I won't guarantee that the URL at radio.jj1bdx.tokyo will remain the same.

[long2ice]

Okay