Wruczek/ts-website

Use offline

X4U7RK opened this issue · 3 comments

X4U7RK commented

I have a question. How I can make the website work external dependencies?
I live in Cuba and we don't have an internet connection all the time. But we have an internal network in my city of more than 4000 users.

edited by Wruczek - explanation from TS-website Telegram group

Wruczek commented

Hi - that's pretty cool!
You will need to download all of the JavaScript/CSS files and host them yourself.

  1. View the private/templates/body.latte
  2. Find all the lines that contain {cdnjs} file
    • for example: {$tplutils::includeStylesheet("{cdnjs}/twitter-bootstrap/4.6.0/css/bootstrap.min.css", "sha256-T/zFmO5s/0aSwc6ics2KLxlfbewyRz6UNw1s3Ppf5gE=")}
  3. For each line, find a part in the quotes that starts with {cdnjs}
    • example: {cdnjs}/twitter-bootstrap/4.6.0/css/bootstrap.min.css
  4. Replace {cdnjs} with https://cdnjs.cloudflare.com/ajax/libs/
    • example: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css
  5. Download the file from the link and save it in a directory on your web server
    • for example, if TS-website is installed in /var/www/html, you can download the file to /var/www/html/libs/bootstrap.min.css
  6. Change the old URL with {cdnjs} to a new URL to the local file
    • for example:
      • old: {$tplutils::includeStylesheet("{cdnjs}/twitter-bootstrap/4.6.0/css/bootstrap.min.css", "sha256-T/zFmO5s/0aSwc6ics2KLxlfbewyRz6UNw1s3Ppf5gE=")}
      • new: {$tplutils::includeStylesheet("libs/bootstrap.min.css", "sha256-T/zFmO5s/0aSwc6ics2KLxlfbewyRz6UNw1s3Ppf5gE=")}

Do that for all files. FontAwesome will require you to download some more icon files. Hope that helps.

xopez commented

Later I can share my download script for cdnjs. Furthermore also the Google fonts needs to be hosted locally.

xopez commented

Go here: https://gist.github.com/xopez/8a19bc001945d95ffc4faad2c7cf729d
the comment to run is simple as is.
For example:
./cdnjs.sh /var/www/mightful-noobs.de/libs www-data font-awesome 5.15.2

for short:
./cdnjs.sh <path> <user> <library> <version>

The scripts downloads all files regarding the library version in the given path. furthermore it replaces the user with the webuser in my case www-data.

I didn't modify the templates and didn't want to download all needed files manually.
After the download go to that file and line: https://github.com/Wruczek/ts-website/blob/2.0/src/private/php/Utils/TemplateUtils.php#L174

Replace https://cdnjs.cloudflare.com/ajax/libs with your desired new path. In my case it is https://mightful-noobs.de/libs.

The second thing you need to do, is, to host the google fonts locally.
Replace this line https://github.com/Wruczek/ts-website/blob/2.0/src/css/themes/dark.css#L7 with following:

/* exo-2-regular - latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/exo-2-v10-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/exo-2-v10-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-display: fallback;
}

Go here: https://google-webfonts-helper.herokuapp.com/fonts/exo-2?subsets=latin and download the fonts archiv. The font files need to be placed in the folder called fonts. The folder needs to be placed at the root of your website.
image
image

Also replace the user with your webserver user.
Hopefully this helps.