@steele In many other areas, you can suggest that in order to learn, you go and look at what other people have done. It’s a bit tricky with SVG, because very often everything would be converted to <path>’s, and those are inscrutable. But the beauty of SVG is that it’s a text file that describes shapes. I would actually suggest that you do this: smash some shapes together! :) How they relate to each other, what properties you can add to them (this is similar to CSS and can even be CSS). Then clips and masks. And with those you can basically do anything.

Unless you are more comfortable with visual stuff, then something like https://alternativeto.net/software/godsvg/about/ would be a good place to start before diving into Inkscape or similar editors.

But you know how *you* learn better than I do, so you’ll figure it out, I have no doubt.

@steele I’m glad you like it!

I opened the color icon from the omg.lol site in Inkscape. It felt a bit too complicated for a smaller size of icons that in PaperMod, so I decided to alter it a bit: make the face bigger and remove the cheeks. I also looked at some icons in PaperMod to see what properties they had. In the end, I needed it to fit into 24×24 and have 2px lines (strokes). So I shrunk the heart shape to fit 22×22 (it would be 24×24 with a 2px line, strokes are centered), then shrunk the eyes and mouth to whatever size I wanted, just to make it feel right. I saved it as optimized SVG and then did a bit of tinkering in the text editor: removing color, adding stroke property, like in PaperMod icons, that sort of thing. I also ended up changing the eyes to just two circles. A lot of it doesn’t have a hard and fast rule, you kind of learn what you can do and what feels right, I guess.

@steele I’m not familiar with PaperMod, but I guess you should add this:

{{- else if (eq $icon_name "omglol") -}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="m12 21.1c-1.6891 0-3.3781-0.6444-4.6669-1.9331l-4.4-4.4c-2.5775-2.5775-2.5775-6.7563 0-9.3338 2.4903-2.4903 6.4755-2.5746 9.0669-0.2527 2.5915-2.3218 6.5767-2.2375 9.0669 0.2527 2.5775 2.5775 2.5775 6.7563 0 9.3338l-4.4 4.4c-1.2887 1.2887-2.9778 1.9331-4.6669 1.9331"/>
<path d="m8.4878 13.677c1.6071 2.6225 5.4172 2.6225 7.0243 0"/>
<circle cx="8.5" cy="9.5" r="1"/>
<circle cx="15.5" cy="9.5" r="1"/>
</svg>

to `layouts/partials/svg.html`. And then activate it, just as you have activated others. Feel free to ask further questions!

Revisiting #typograf for #KateEditor. It’s actually a lot easier than I made it before. So, install typograf-cli

npm install typograf-cli -g

In Kate, add External Tool.

Name: Typograf (or anything)
Executable: typograf (with `-g` installation flag, it should be in your $PATH)
Arguments: --stdin -c /home/andrew/.config/typograf/typograf.json
Input: %{Document:Selection:Text}
Working directory: empty
Mime types: empty
Save: none
Trigger: none
Output: Replace selected text
Editor command: typograf

`-c` is for a settings file if you want to change the default behavior. It really wants a full path for some reason, so no `~/`.

You can customize these to process the entire document, for example. But I just add a keyboard shortcut, and it does the magic on a selected text.

---

Bonus, in #micro you can add

"Alt-y": "command:textfilter typograf --stdin -c /home/andrew/.config/typograf/typograf.json",

to `.config/micro/bindings.json` for the same result.

---

https://github.com/typograf/typograf-cli

Index (an alphabetical listing of items and their location) for #hugo.

In front mater of each post:

items:
- Name of a thing
- Name of another thing
- Etc.

Then in a list.html in layouts/map/ folder we create a dictionary:

{{ $mapItems := dict }}

{{ range .Site.RegularPages }}
{{ $mapDate := .Date | time.Format "060102150405" }}
{{ $mapLink := .Permalink }}
{{ with .Params.items }}
{{ range . }}
{{ $mapItem := . }}
{{ $mapUnique := printf "%s%s" $mapItem $mapDate }}
{{ $mapItems = merge $mapItems ( dict $mapUnique ( slice $mapLink $mapItem ) ) }}
{{ end }}
{{ end }}
{{ end }}

$mapUnique (item+date) makes each key unique, so two posts with the same item will not override each other.

And render it:

<ul>
{{ range $key, $value := $mapItems }}
<li><a href="{{ index $value 0 }}">{{ index $value 1 }}</a></li>
{{ end }}
</ul>

With more detail and a couple of unnecessary but nice additions: https://no-pe.netlify.app/index-for-hugo/

https://metatags.io

Website that lets you preview and create metadata tags for sharing on social media. You can even turn it into a search for a quick test. In Firefox, bookmark the URL `https://metatags.io/?url=%s`, add a keyword, for example `mt`, and then in the address bar you can just add `mt` in front of an URL (mt example.com), hit Enter and that’s it!

#WebDev #MetaData #MetaTags #sharing

Idea for a very simple icon for Nintendo Switch. Tried to come up with icons for other devices in the same style, but there is not enough resolution for that (would love to be proven wrong!). For example, Xbox Series X|S is just a black or white box 🤷

#NintendoSwitch #Icon #LowPoly #WIP

With libnotify you can send notifications from your console (so basically from anywhere). But what wasn’t obvious to me was how to make them behave like other “real” notifications, i.e. appear in the KDE notification widget. Answer is, you need to add parameter -h "string:desktop-entry:org.kde.konsole". For example, you can create a notification with text “It’s done!”, title “Backup”, icon for warning and normal urgency like this:

notify-send "It's done" -a Backup -i dialog-warning -u normal -h "string:desktop-entry:org.kde.konsole"

https://gitlab.gnome.org/GNOME/libnotify

#KDE #notifications #libnotify

I finally figured out how to make gestures with my Logitech mouse in Solaar. First, you have to set a key to Mouse Gestures. Any button will do, but it has to be set to it, not Diverted. Then, in the Rule Editor, you make a rule with Condition set to Mouse Gesture, choose one of the 8 movements, and then add the desired action below it. If you delete the gesture, then it would work on that button press. So you can have 9 actions (8 movements + click) like this.

This helped: https://pwr-solaar.github.io/Solaar/rules

Still have no idea how to do the thumbwheel. 😕

#Solaar #Logitech #Logi

SVG allows you to embed CSS.
CSS can detect dark mode.
Make your favicons in SVG!

Simple example:

<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<style>
@media (prefers-color-scheme: dark) {
.r {fill: white}
}
</style>
<rect class="r" fill="black" width="16" height="16">
</svg>

#SVG #CSS #favicon #webdesign