Often I want to set up a main repository on my server that I can share amongst my other machines - so I can work on the laptop or the desktop machine (when James will let me use it). To do this you need to set up a bare repostitory.
git init --bare <repostitory name>
eg:
[don@@server moko-papa.co.nz] git init --bare theme/moko-papa/
Initialized empty Git repository in /srv/git/moko-papa.co.nz/theme/moko-papa/
[don@server moko-papa.co.nz]$ ll theme/moko-papa/
branches/ config description HEAD hooks/ info/
objects/ refs/
On the client, we need to clone the repository before we add to it.
don@client:~/Development/moko-papa.co.nz/user/themes$ git clone don@server:/srv/git/moko-papa.co.nz/theme/moko-papa moko-papa
Cloning into 'moko-papa'...
warning: You appear to have cloned an empty repository.
Now we can add files to the folder, and add them to the git repository.
don@client:~/Development/moko-papa.co.nz/user/themes $
don@client:~/Development/moko-papa.co.nz/user/themes$ cp -a moko-papa.bak/* moko-papa/
don@client:~/Development/moko-papa.co.nz/user/themes$ cd moko-papa/
don@client:~/Development/moko-papa.co.nz/user/themes/moko-papa$ git add *
don@client:~/Development/moko-papa.co.nz/user/themes/moko-papa$ git commit -m "Inital commit of existing files"
<snip>
create mode 100644 templates/partials/social.html.twig
create mode 100644 templates/partials/taxonomylist.html.twig
create mode 100644 templates/simplesearch_results.html.twig
create mode 100644 templates/snipcart.html.twig
create mode 100644 thumbnail.jpg
don@client:~/Development/moko-papa.co.nz/user/themes/moko-papa$ git push
Enumerating objects: 1993, done.
Counting objects: 100% (1993/1993), done.
Delta compression using up to 4 threads
Compressing objects: 100% (1984/1984), done.
Writing objects: 100% (1993/1993), 4.68 MiB | 6.40 MiB/s, done.
Total 1993 (delta 208), reused 0 (delta 0), pack-reused 0
To server:/srv/git/moko-papa.co.nz/theme/moko-papa
* [new branch] master -> master
don@client:~/Development/moko-papa.co.nz/user/themes/moko-papa$ git status
On branch master
Your branch is up to date with 'origin/master'.
nothing to commit, working tree clean
don@client:~/Development/moko-papa.co.nz/user/themes/moko-papa$
Now it is set up.
git add
git commit
On the server
git pull
]]>
Now we have to not only expect huge screens — 4K devices have a resolution of 3840×2160 — we also have to make sites work on phone screens as small as 240x320. And we need pages to load quickly on mobile networks and public wifi, as well as home fibre optic cables.
We are lucky we have CSS. With HTML 4, layouts got horribly complicated with tables nested in table, twenty column tables with row-spans and col-spans all over the place. It would be impossible to make things work on such different devices with HTML 4, or DHTML or whatever Netscape and Microsoft were calling their latest versions.
All in all it has got much easier — but we want to do so much more. We want fast loading on mobile devices and massive images on TV's and high end desktops or laptops.
Which brings us to Responsive Design, a technique that lets you build a basic layout which will work best on small screens, and use CSS media queries to add complexity to the layout as screens get larger. This approach works well with font sizes, block placement and column widths and so on, but it is not practical to use CSS to deliver different images for different screen sizes. It could be done by adding images as element backgrounds … but, no.
Fortunately there is a way to do it - but it involves embedding layout information in the content … which is not ideal either.
Introducing the srcset attribute. srcset lets you define different images at different resolutions, and lets the browser pick the best image for the screen size being used. CSS Tricks has a good article that is a good starting point: Responsive Images: If you’re just changing resolutions, use srcset
If you are using Grav, there is a way to add srcset to your templates. The Media module will not only generate the srcset attributes, but can also generate the images needed. The only problem is that is makes the largest size the default.
]]>Getting the Nextcloud PicoCMS app app running correctly is not that straight forward, and takes a bit of fiddling around. To get it running, first install the app as described on the app's wiki pages.
However, you might still have problems loading media — such as fonts, images and stylesheets — held on remote sites.
Load the page, and then use the browsers Developer Tools > Console
. If you are getting errors like the following:
Refused to load the stylesheet
'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
because it violates the following Content
Security Policy directive: "style-src 'self'
'unsafe-inline'". Note that 'style-src-elem' was
not explicitly set, so 'style-src' is used as a
fallback.
you will need to edit the Apache configuration to allow the stylesheet to load.
<VirtualHost *:443>
DocumentRoot "/path/to/nextcloud"
ServerName cloud.domain.name
<IfModule mod_headers.c>
Header always set Strict-Transport-Security "max-age=15552000; includeSubDomains; preload"
Header always set Content-Security-Policy "default-src 'none';base-uri 'none';manifest-src 'self';script-src 'unsafe-eval' 'unsafe-inline' 'self';style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/;img-src 'self' data: blob: *;font-src 'self' https://fonts.gstatic.com;connect-src 'self';media-src 'self';frame-src www.youtube.com prezi.com player.vimeo.com vine.co 'self';child-src 'self';"
Header set Referrer-Policy "no-referrer"
</IfModule>
…
</VirtualHost>
Note: Some of these directives should already be configured. unsafe-eval
and unsafe-inline
are needed by Nextcloud for the time being.
The documentation says:
The Admin of a cloud have the possibility to provide to his user plugins, templates and themes. The installation is done by uploading the files on the filesystem of the server:
- For new templates, create a new folder in your_nextcloud_root/apps/cms_pico/Pico/templates/
- For a new theme, create a new folder in your_nextcloud_root/apps/cms_pico/Pico/themes/
- Plugins have to be uploaded into your_nextcloud_root/apps/cms_pico/Pico/plugins/
However, the Nextcloud admin page for the app says:
To add a custom theme, you will need to create a new folder in the 'themes' directory: /path/to/nextcloud/data/appdata_xxxxxxxxxxx/cms_pico/themes/
To add a custom template, you will need to create a new folder in the 'templates' directory: /path/to/nextcloud/data/appdata_xxxxxxxxxxx/cms_pico/templates/
where the /path/to/nextcloud/data/appdata_xxxxxxxxxxx/
is the path to the Nextcloud app data in the data directory.
Putting the theme in one or the other of these directories fails. What is needed a theme directory in both locations.
In the appdata
directory, the theme directory needs to contain
These examples are modified from the examples on the page This bookmarklet gives you a code editor in your browser with a single click.
First, this:
data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;font-size:18px;}</style><div class="e" id="editor"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/kurior");e.getSession().setMode("ace/mode/html");</script>
Now that is a bit hard to understand, so lets break it down a bit. Note — I've added some line breaks which may or may not work if copied and pasted.
data:text/html,
The data uri - this tells the browser that the uri is an embedded document or chunk of data, rather than the location of a resource on the internet. More about data uri's at Wikipedia.
In this case, the data is html.
<style type="text/css">
.e{position:absolute;top:0;right:0;bottom:0;left:0;font-size:18px;}
</style>
A simple inline style sheet. I have made the font size 18pt so it is easier to read.
<div class="e" id="editor"></div>
A container div
where the Javascript will add the editor.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"
type="text/javascript" charset="utf-8">
</script>
Now it starts getting a little more interesting — this is the location of the Ace embedable code editor. It is pretty much a complete application written in Javascript — and it makes you think "What about CKEditor?".
Anyway — this loads the editor code, and the next bits configure it.
<script>
var e=ace.edit("editor");
e.setTheme("ace/theme/kurior");
e.getSession().setMode("ace/mode/html");
</script>
So we set e to the editor and load it into the div with the id editor. We set the theme to kurior, and the highlighting mode to HTML. Loads of themes and highlighting modes are available.
The cool thing is you can also set other ace configuration values — for example e.session.setUseWrapMode(true);
enables softwrapping, e.setValue("the new text here");
will add some default text.
Other applications — word processing applications, for example — can make it difficult to past text into documents without importing the formatting from the source document. Pasting into and then copying from a basic text editor can remove the formatting.
Fortunately you don't need to leave your browser. Paste the following into the browser address bar will give you a workable text editor.
data:text/html, <body contenteditable style="font: 1rem/1.5 monospace;max-width:40rem;margin:0 auto;padding:4rem;">
Hit F11, and you have a full screen, distraction free text editor that will let you concentrate on your words. You can play about with the page style if you want - you could have
data:text/html, <body contenteditable style="color:555555;background-color:222222;font:0.5rem/1.5 monospace;max-width:40rem;margin:0 auto;padding:4rem;">
if you fancy yourself as a designer :-)
Hit F11, and you have a full screen, distraction free text editor that will let you concentrate on your words.
Bookmark the page for future reference.
One of the main reasons I like this idea is that it is a quick way to remove formatting. Unfortunatly the bookmark above does not do that, so here is another one. And for some reason, the 'target="_blank"' isn't working, so you need to right click on the link, and open in a new window.
data:text/html, <title>Editor</title><body style="background-color:silver"><div style="margin: auto;max-width: 40rem;"><textarea style="font: 1rem/1.5 monospace;width:100%;height:100%;padding:1rem;"></textarea></div></body>