diff --git a/.eleventy.js b/.eleventy.js index d94c1eb..f8f10d7 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,6 +1,9 @@ const { DateTime } = require("luxon") +const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); module.exports = function (eleventyConfig) { + eleventyConfig.addPlugin(syntaxHighlight); + //eleventyConfig.addPassthroughCopy("css") eleventyConfig.addPassthroughCopy("src/**/*.png") eleventyConfig.addPassthroughCopy("src/**/*.jpg") diff --git a/package-lock.json b/package-lock.json index bc8fb7c..298ee58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ }, "devDependencies": { "@11ty/eleventy": "^1.0.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "autoprefixer": "^10.4.13", "npm-run-all": "^4.1.5", "postcss": "^8.4.18", @@ -79,6 +80,19 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz", + "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==", + "dev": true, + "dependencies": { + "prismjs": "^1.29.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz", @@ -3339,6 +3353,15 @@ "node": ">=0.10.0" } }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -4793,6 +4816,15 @@ } } }, + "@11ty/eleventy-plugin-syntaxhighlight": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz", + "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==", + "dev": true, + "requires": { + "prismjs": "^1.29.0" + } + }, "@11ty/eleventy-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz", @@ -7198,6 +7230,12 @@ "js-beautify": "^1.6.12" } }, + "prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", diff --git a/package.json b/package.json index 044845c..388b7cc 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "license": "MIT", "devDependencies": { "@11ty/eleventy": "^1.0.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "autoprefixer": "^10.4.13", "npm-run-all": "^4.1.5", "postcss": "^8.4.18", diff --git a/src/css/tailwind.css b/src/css/tailwind.css index 1dd6f10..8b75876 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -34,8 +34,20 @@ .post-style blockquote a { @apply ml-1 text-cyan-700; } -/* Model List */ +.post-style img { + @apply mx-auto rounded-lg my-7; +} + +.post-style code:not(pre code) { + @apply mx-0.5 my-2 px-2 py-0.5 bg-gray-900 rounded-lg; +} + +.post-style pre[class^="language-"] { + @apply my-7 p-2 rounded-lg bg-gray-900; +} + +/*** Model List Styles ***/ .model-list-style h1 { @apply mt-6 mb-2 text-4xl font-bold; } diff --git a/src/posts/adding-custom-icons-for-mime-types-on-linux/gltf-before.jpg b/src/posts/adding-custom-icons-for-mime-types-on-linux/gltf-before.jpg new file mode 100644 index 0000000..fa6773e Binary files /dev/null and b/src/posts/adding-custom-icons-for-mime-types-on-linux/gltf-before.jpg differ diff --git a/src/posts/adding-custom-icons-for-mime-types-on-linux/index.md b/src/posts/adding-custom-icons-for-mime-types-on-linux/index.md new file mode 100644 index 0000000..6cfb73f --- /dev/null +++ b/src/posts/adding-custom-icons-for-mime-types-on-linux/index.md @@ -0,0 +1,68 @@ +--- +title: Adding custom icons for MIME types on linux +sources: + - https://blog.robertelder.org/custom-mime-type-ubuntu/ + - another source +--- + +# The problem + +I frequently work with 3D models in the web and therefore with .gltf or .glb files. These formats are the best choice for compressing and optimizing models for the web but they still seem to lack support in operating systems and their file managers. That is also the case for the preview icons. For example, that's how a .gltf file shows up in my file manager in Fedora 38 (Nautilus): + +![A window of the default file manager in Fedora 38 showing a broken file icon for the file named 'DamagedHelmet.gltf'](./gltf-before.jpg) + +That's a very bad icon for files. It's blurry, shows a warning symbol and does not really represent the file contents. + +I was wondering if it's possible to change icons for specific file types (also called MIME types) and as it turns out, it's possible on Linux! + +## What to do + +First, it's important to make the file extension known to the operating system. You can find existing custom definitions for all users in the `/usr/share/mime/packages` folder: + +![The contents of the /usr/share/mime/packages/ folder, showing multiple files with .xml extension](./output1.png) + +Notice the `gltf.xml` and `glb.xml` files? For every file type you want to add a custom icon to you need to add a corresponding `.xml` file. Let's look at the `glb.xml` file for reference: + +```xml + + + + glTF Binary Format MIME Type + + + +``` + +The important part is the `` and the `` line. Add a new file and change the lines according to your MIME type and file extension and also name the file accordingly. + +### Update the mime database + +The next step is to update the mime database to give your defined MIME types to files ending with .glb or .gltf. +You can do that with: + +```bash +sudo update-mime-database /usr/share/mime +``` + +This will generate a folder with your MIME type xml definition in `/usr/share/mime/`, so for `.glb` and `.gltf` it will create the following files: + +```bash +luca@carbon /usr/share/mime $ tree model +model +├── 3mf.xml +├── gltf-binary.xml +├── gltf+json.xml +└── ... + +1 directory, 4 files +``` + +### Add the icons to your file types + +The final step is getting your .svg icon ready and connect it to your MIME type. Copy your svg icon to `/usr/share/icons/hicolor/scalable/mimetypes/-.svg`. For .glb the mimetype-group would be `model` and the mimetype would be `gltf-binary`, resulting in this line for the whole filepath: + +```bash +/usr/share/icons/hicolor/scalable/mimetypes/model-binary-gltf.svg +``` + +Now you just need to update your icon database with `sudo update-icon-caches /usr/share/icons/*` on Debian/Ubuntu or `sudo gtk-update-icon-cache /usr/share/icons/*` on Fedora. You may need to restart you system to get the icon to show up. \ No newline at end of file diff --git a/src/posts/adding-custom-icons-for-mime-types-on-linux/output1.png b/src/posts/adding-custom-icons-for-mime-types-on-linux/output1.png new file mode 100644 index 0000000..bca6996 Binary files /dev/null and b/src/posts/adding-custom-icons-for-mime-types-on-linux/output1.png differ