feat: move essays of 2010

astro.config.mjs

@@ -10,6 +10,11 @@ import { defineConfig } from 'astro/config';
 export default defineConfig({
 	markdown: {
 		remarkPlugins: [remarkReadingTime],
+		shikiConfig: {
+			theme: 'nord',
+			langs: [],
+			wrap: true,
+		},
 	},
 	integrations: [mdx(), tailwind(), preact(), astroImageTools],
 });

src/components/Image.astro

@@ -12,7 +12,11 @@ interface Props extends ImgConfigOptions {
 
 const { class: className, noMargin, src, ...props } = Astro.props;
 
-const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
+const classes = cx(
+	'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none',
+	{ 'mbe-0': noMargin },
+	className
+);
 const imageClasses =
 	'rounded-1 border-1 block h-auto w-full border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10';
 ---

src/content/journal/2010/rework.mdx

@@ -0,0 +1,32 @@
+---
+title: Rework
+slug: rework
+author: Stefan Imhoff
+date: 2010-04-27T16:30:00+02:00
+description: "Reading recommendation for the new book from Basecamp: Rework. A short, well-illustrated book on product development and how to run a company that has not been wrongly put on the bestseller list for a long time and has been praised to the highest standards."
+cover: /assets/images/cover/rework.jpg
+tags: ["book"]
+---
+
+## Change the Way You Work Forever
+
+Today, I recommend a book that I finished recently and read a second time: _Rework_ by _Jason Fried_ and _David Heinemeier Hansson_.
+
+I have long been a great believer in the philosophy of simplicity which is cultivated by _<del>37signals</del> <ins>Basecamp</ins>_ successfully. Their first (free) book [Getting Real](https://basecamp.com/books/getting-real) (as <AffiliateLink asin="0578012812" text="paperback version" />) I read with great interest.
+
+<Bookshelf>
+	<AmazonBook asin="0307463745" />
+	<AmazonBook asin="0578012812" />
+</Bookshelf>
+
+But with _Rework_ they have achieved a true masterpiece. Not without reason, it is a bestseller in the US and the UK. Critics and CEOs praise the book in the highest terms (Seth Godin, John Maeda, Chris Anderson, and others).
+
+And unlike the simple _Getting Real_, there’s _Rework_ as a hardcover version, in an attractive binding and with fantastic drawings by Mike Rohde.
+
+The [official website](https://basecamp.com/books/rework) of the book offers a sample excerpt, three funny promotional videos, tons of words of praise and quotes, photos of enthusiastic readers, and a full chapter overview.
+
+Getting Real was created for programmers who want to complete a project. _Rework_, on the other hand, is suitable for every employee and employer, from the managing director to the administrator.
+
+With 21,000 words, the book offers valuable tips for getting a productive and fulfilling working day. Much of this is not new (similar topics can be found in _Getting Real_), and none of this has been invented by _<del>37signals</del> <ins>Basecamp</ins>_, but I’ve read nowhere as many good tips in brevity and conciseness.
+
+And for the lazy people, there is even an <AffiliateLink asin="0307704513" text="audiobook version" />.

src/content/journal/2010/vim.mdx

@@ -0,0 +1,156 @@
+---
+title: Vim
+slug: vim
+author: Stefan Imhoff
+date: 2010-10-29T19:00:00+02:00
+description: How I became a convinced Vim disciple, why Vim is an ingenious editor, and how to best practice if you want to learn Vim.
+tags: ["code"]
+---
+
+## By the Power of Vim … I Have the Power
+
+Something similar was said by the superhero _He-Man_ from the 80s TV show _Masters of the Universe_ before he got his superpowers. And Vim exists about as long as the TV show: **22 years**. And the older Vi, on which Vim is based, has been around even longer than I live. If a _simple_ text editor exists for a long time and gives these _powers_, it has to be something special about it.
+
+<Figure caption="Vim - cleanser and polisher. Brightens the home and the age.">
+	<Image src="/assets/images/posts/vim-vintage.jpg" alt="Vim, Reinigungs- und Poliermittel." />
+</Figure>
+
+The first time I stumbled upon Vim (or Vi) a couple of years ago, was when I first had to edit any file on a server and none of my fancy editors worked there. The first time I worked with Vi(m) was my natural reaction: <q>WTF, I cannot tap until I press `i`? Who invented this crap?</q>
+
+But because I, as a web worker, inevitably have to work on the server, again and again, I could not avoid learning either Vim or Nano. For years, I coped well with four or five Vim key combinations. But I was wrong. Wrong. Wrong. _Really_ wrong.
+
+Three years ago, I had tried to learn Vim and had failed miserably. Why?
+
+## Vim is Incredible, Incredibly Complex (but Equally Powerful)
+
+Some developers have been working with Vim for 20 years and do not think that they have mastered Vim.
+
+That I failed then was sole because I had not started properly. With Vim, it is necessary to start slowly and gradually. As with almost any other art form, the basics must first be learned and mastered before moving on to the next level. I copied a Vim configuration file and was overwhelmed.
+
+If you want to learn Vim, it’s important to first unlearn what all other editors have taught you wrong. With a text editor—whether Word, Notepad, TextMate, or another editor—you want to edit text. Even if you may think the most essential part is typing, that’s not true, not even with a book author, let alone a programmer.
+
+Therefore, the whole philosophy of Vim is different from that of any other competitors. You cannot even compare the other editors with Vim.
+
+When you use Vim, you feel as if you master the text, as a doctor can dissect the text with a scalpel. You navigate and edit your text in the best and most efficient way I’ve ever seen.
+
+## This is Not a Tutorial
+
+I will not write a beginner’s tutorial here, it would be a waste of work, as there are countless sources on the Internet, and Vim Help is one of the best. And you can type `vimtutor` on your terminal to start an interactive Vim tutorial. Instead, I want to describe how I got the first steps right.
+
+## The First Steps
+
+First, be sure to put all your Vim files and plugins under version control to be able to restore the same workspace to any computer in seconds. Incidentally, it’s a good idea to version all Bash files and Unix configuration files.
+
+I have created a repository `dotfile` with Git, which contains subfolders for `bash`, `bin`, `git`, `vim`, and other programs. My Vim subfolder contains a file `vimrc.vim` and `gvimrc.vim` and various other Vim folders. This simple bash installation script installs my environment on a computer if desired:
+
+```bash
+#!/bin/bash
+
+cd vim
+export VIM_SRC=`pwd`
+cd
+ln -nfs $VIM_SRC .vim
+ln -nfs $VIM_SRC/vimrc.vim .vimrc
+ln -nfs $VIM_SRC/gvimrc.vim .gvimrc
+```
+
+This script links my configuration files as a symbolic link to the home directory where Vim expects them.
+
+## The Second and Most Important Step
+
+Vim has the nasty feature of scattering files across folders taken from the Unix philosophy and does not facilitate the overview of what has been installed.
+
+Tim Pope has programmed a fantastic plugin that is the last plugin to be installed traditionally: **Pathogen**.
+
+Pathogen makes it possible to store plugins as bundles, individually, and bundled together as a nice package. All you have to do is download [pathogen.vim](https://github.com/tpope/vim-pathogen) and place it in the Vim folder in a subfolder `autoload`. The next step is to create a `bundle` folder in the Vim folder and open your `.vimrc` file. There you write at the beginning:
+
+#### .vimrc
+
+```vim
+silent! call pathogen#runtime_append_all_bundles()
+silent! call pathogen#helptags()
+```
+
+Plugins are from now on not put into the correct subfolders but put per plugin in a separate folder under `bundle`. For Vim, there are unfortunately various ways to install extensions. Simple scripts, automatic installer, and, thank God, Git checkouts.
+
+**Update:** A few years ago, I switched to [vim-plug](https://github.com/junegunn/vim-plug), a minimalist Vim Plugin Manager. It has many pleasant features.
+
+My recommendation is to switch to git checkouts. This has recently become easy because somebody created a mirror of many vim scripts under [vim-scripts](https://github.com/vim-scripts) on GitHub, and thus allows the automatic update of the plugins via Git.
+
+Another option is to clone the plugins as submodules, I use a small Ruby script from [Tammer Saleh](http://tammersaleh.com/posts/the-modern-vim-config-with-pathogen/), to update my git repositories:
+
+```ruby
+#!/usr/bin/env ruby
+
+git_bundles = [
+  "git://github.com/scrooloose/nerdtree.git",
+  "git://github.com/kogakure/snipmate.vim.git",
+  "git://github.com/vim-scripts/vim-surround.git"
+  # …
+]
+
+require 'fileutils'
+
+bundle_dir = File.expand_path('../bundle/', __FILE__)
+
+git_bundles.each do |url|
+  dirname = File.basename(url)
+  puts "* Extract #{url} → #{dirname}"
+  dir = File.join(bundle_dir, dirname)
+  cd #{dir} 2>/dev/null && git pull || git clone #{url} #{dir}
+end
+```
+
+This great script clones my bundles or updates them from different places (GitHub, my server). The advantage is that in my repository I always have everything with me and I have not gotten it with a submodule command.
+
+## Basic Configuration
+
+Next, you should open the `.vimrc` and enter basic settings. To find out which ones are the best, you can have a look at the blogs and screencasts mentioned below. I recommend that you always write comments next to each command that explains what it does.
+
+My file is divided into several areas: First, the basic settings are line width, wrapping, colors, backups, and line numbering. Then follows an area for abbreviations, then the area for the mappings, then file-type settings, and at the end functions.
+
+## Keyboard Shortcuts
+
+My biggest problem was that my keyboard had no keys left, about all the function keys and almost all the other keys were used. The consequence of this was that I constantly had to find out which function, which plugin or mapping now creates a conflict. But thank God, the ominous `Leader`, is a key that you can press and then press any key combination. By default, this key is located on the <kbd>\\</kbd> and is therefore difficult to reach, which is why you can remap it to another key, such as the space key or a comma:
+
+```vim
+let mapleader=','
+```
+
+By pressing the comma in NORMAL mode followed by my keyboard shortcuts, I can execute arbitrary commands.
+
+## Get Back Cherished Functions Through Plugins
+
+If you switch from TextMate (or another editor) to Vim, you’re bound to miss your editor’s favorite features. If the missing feature does not work in Vim by itself, it will likely work with one of the thousands of plugins.
+
+A sidebar, in which all files are to be seen in the tree structure, can for example added with [NERD tree](https://github.com/scrooloose/nerdtree). At first, I thought, I’ll need this functionality **undoubtedly**, but since I know the buffers and splits of Vim, I use the NERD tree rarely.
+
+Wincent Colaiuta has written [Command-T](https://wincent.com/products/command-t) an ingenious plugin that reproduces TextMate’s ability to open any file in the project with a few keystrokes.
+
+Another essential plugin is [surround. vim](https://github.com/tpope/vim-surround). It lets you manipulate, add or delete enclosures such as parentheses, tags, and single quotes.
+
+TextMate was the first program that introduced snippets on a large scale. I’ve has been working with TextMate for years and could not work properly without snippets. Vim even offers several implementations for snippets. I use [snipmate](https://github.com/msanders/snipmate.vim) even though there is a more powerful (but more complicated plugin) for Power users. Snipmate offers almost all the functions that TextMate had, the snippets can almost be copied and modified with a few changes.
+
+Peteris Krumin introduces it on his blog [Vim Plugins You Should Know About](http://www.catonmat.net/blog/vim-plugins-surround-vim/).
+
+## Omnicomplete Power
+
+Vim offers an unbeatable tool since version 7 with Omnicomplete. Omnicomplete completes everything: simple words, dictionaries, functions, classes, and file names. This is a genius. I’ve hooked up a 7 MB dictionary with German spelling, and now Vim completes any word that complicated.
+
+## There Will Be Color
+
+No matter if you like it bright, or dark, for Vim there are almost countless color schemes that can be downloaded and changed in seconds. There is even the possibility to convert TextMate themes into Vim color schemes. The color files can be adjusted until the last one is satisfied.
+
+## And Where Do I Start Now?
+
+If you have an hour and a half, take a look at the video from Google Tech Talk, in which the developer of Vim, the Dutchman Bram Moolenaar, shows in [7 Habits For Effective Text Editing 2.0](https://youtu.be/p6K4iIMlouI) which is impressive on Vim.
+
+There are two fantastic articles I can recommend: [Coming Home to Vim](http://stevelosh.com/blog/2010/09/coming-home-to-vim/) by Steve Losh and [How I boosted my vim](https://nvie.com/posts/how-i-boosted-my-vim/) by Vincent Driessen.
+
+## The Best Comes Last
+
+But the best way to get started is with two incredible screencast series. [Derek Wyatt’s Vim Tutorial Videos](http://derekwyatt.org/vim/tutorials/) and the [Screencasts at vimcasts.org](http://vimcasts.org/). If you have little time to read through the blogs, take the time to watch his screencasts. They are between 5 and 30 minutes long, and he has made a number of them. I’ve rarely laughed that way because Derek not only shows how a professional developer works with Vim but has a remarkable sense of humor. It’s best to watch the beginner videos first. You should start with the introductory video [Welcome to Vim](http://derekwyatt.org/vim/tutorials/novice/). The screencasts on vimcasts.org are recommended.
+
+Do not try too much at once, learn the basics, especially the motion commands, search commands, and string manipulations. And use them, even if you think the old way would go faster! In the beginning, you will be slow and feel that you are less productive with Vim. But that’s misleading since you’ll get better quickly and then depend on every other editor. The transition is not easy, I’ve been trying it for a month, and it’s difficult to get rid of all those awful habits: the constant grasp of the mouse or the nonsensical arrow keys to operate.
+
+If you use Vim, you will have to type far less, and you will be able to edit your text much faster. But above all, you will be constantly excited again when you have discovered a new way to write better, faster, and more efficiently.

src/content/journal/2010/webstandards-magazine-django.mdx

@@ -0,0 +1,23 @@
+---
+title: Django Article
+slug: webstandards-magazine-django
+author: Stefan Imhoff
+date: 2010-09-21T09:25:00+02:00
+description: I was allowed to write a multipage article about Django in Webstandards-Magazin. I wrote about what I appreciate about Django and why I use it.
+cover: /assets/images/cover/webstandards-magazine-django.jpg
+tags: ["publication"]
+---
+
+## Webstandards-Magazine, Issue 07/2010
+
+There it lay in my mailbox: My voucher copy of the current issue 07/2010 of the _Webstandards-Magazin_. This is a premiere for me because I wrote my first article for the Webstandards-Magazin.
+
+It should be three pages long, now it has almost become five. It was not possible to put all the fascination for _Django_, code samples, and graphics into that little space. But the editors-in-chief of [Webstandards-Magazine](https://www.screengui.de/) _Ansgar Hein_ and _Jörg Morsbach_ were accommodating and gave me more space. Thank you again for that! I would like to thank the diligent helpers who have checked my article for content or spelling errors.
+
+The article is not a tutorial with step-by-step instructions. But there are plenty of other good places on the internet for that. I wanted to clarify with my article, why I like Django and have stayed true to this web framework for more than four years, which is not self-evident because I am hard to please. I have used _TextPattern_, _WordPress_, _CodeIgniter_, _ExpressionEngine_, _ModX_, _Symphony_ and other web frameworks and CMS, but since I use Django, I have the feeling that I control and understand everything on my website.
+
+Django gives me a clean, easy-to-read Python code that even full-fledged beginner programmers can read. Since I changed my martial arts magazine [kogakure.de](https://www.kogakure.de/) to Django in May 2008, I am Djangonaut. I would like to implement many more projects with Django, but unfortunately, the distribution of Django is not as big as Ruby on Rails or various Java frameworks.
+
+Unfortunately, I did not manage to publish the article at the same time as switching to Django, because of missing time … But I work without pressure. Meanwhile, ExpressionEngine is doing its job. I hope you like my article and bring more to the Django community.
+
+The _Webstandards-Magazin_, _Issue 07/2010_ with the topic _Tools_ will be published on **24/09/2010** in the station and airport bookstores for the price of **€7.80** or by subscription for four issues per year for €28. You can find my article on pages 83-87: <cite lang="de">Einstieg in Django. Vielseitig und leistungsstark: Vorstellung des Python-Frameworks für anspruchsvolle Webanwendungen</cite>.

src/layouts/BaseLayout.astro

@@ -72,5 +72,10 @@ const { backLink, footer = true, header = true, title, description } = Astro.pro
 				'👋 I see you’re interested in the source code of this site? You can find it here 👉 https://github.com/kogakure/website-astro-stefanimhoff.de'
 			);
 		</script>
+		<style is:global>
+			.astro-code {
+				@apply overflow-auto rounded-2 p-[1em] font-mono text-code mbe-10 mbs-0;
+			}
+		</style>
 	</body>
 </html>

src/schema/journal.ts

@@ -10,13 +10,16 @@ export const journal = defineCollection({
 		cover: z.string().optional(),
 		tags: z.array(
 			z.enum([
+				'book',
 				'code',
 				'design',
 				'download',
 				'film',
 				'productivity',
+				'publication',
 				'self-improvement',
 				'tip',
+				'typography',
 			])
 		),
 	}),

tailwind.config.cjs

@@ -136,6 +136,7 @@ module.exports = {
 				7: ['clamp(3.3rem, 7.3vw, 8.5rem)', { lineHeight: '1' }],
 				8: ['clamp(4.5rem, 12.2vw, 13.87rem)', { lineHeight: '1' }],
 				9: ['clamp(5.5rem, 28.7vw, 22.43rem)', { lineHeight: '1' }],
+				code: ['clamp(0.75rem, 0.8vw, 0.9rem)', { lineHeight: '1.625' }],
 			},
 			boxShadow: {
 				subtle: '0 0 50px rgb(0 0 0 / 0.2)',