mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 12:05:28 +00:00
refactor: replace YouTubeVideo with YouTube Lite
YouTube loads PER video embedded in a page 900 kB which is insane.
This commit is contained in:
Stefan Imhoff
@@ -16,6 +16,7 @@
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astro-community/astro-embed-youtube": "^0.2.2",
|
||||
"@astrojs/mdx": "^0.19.4",
|
||||
"@astrojs/preact": "^2.2.0",
|
||||
"@astrojs/tailwind": "^3.1.3",
|
||||
|
||||
16
pnpm-lock.yaml
generated
16
pnpm-lock.yaml
generated
@@ -9,6 +9,9 @@ overrides:
|
||||
react-dom: npm:@preact/compat@latest
|
||||
|
||||
dependencies:
|
||||
'@astro-community/astro-embed-youtube':
|
||||
specifier: ^0.2.2
|
||||
version: 0.2.2(astro@2.5.5)
|
||||
'@astrojs/mdx':
|
||||
specifier: ^0.19.4
|
||||
version: 0.19.4(astro@2.5.5)(rollup@3.23.0)
|
||||
@@ -179,6 +182,15 @@ packages:
|
||||
'@jridgewell/trace-mapping': 0.3.18
|
||||
dev: false
|
||||
|
||||
/@astro-community/astro-embed-youtube@0.2.2(astro@2.5.5):
|
||||
resolution: {integrity: sha512-eGBVujUNOv6x2x/iXS7D/XWmlx69frLQKyYBW0zTFzzgDCeOuXkJ4TPMOdQHsttp2ZCvbqii8f27GoaTKHIa7g==}
|
||||
peerDependencies:
|
||||
astro: ^1.0.0 || ^2.0.0-beta
|
||||
dependencies:
|
||||
astro: 2.5.5(@types/node@16.9.1)(sharp@0.32.1)
|
||||
lite-youtube-embed: 0.2.0
|
||||
dev: false
|
||||
|
||||
/@astrojs/compiler@1.4.2:
|
||||
resolution: {integrity: sha512-xoRp7JpiMZPK/beUcZEM5kM44Z/h20wwwQcl54duPqQMyySG9vZ5xMM6dYiQmn7b3XzpZs0cT6TRDoJJ5gwHAQ==}
|
||||
|
||||
@@ -7736,6 +7748,10 @@ packages:
|
||||
- zenObservable
|
||||
dev: true
|
||||
|
||||
/lite-youtube-embed@0.2.0:
|
||||
resolution: {integrity: sha512-XXXAk5sbvtjjwbie3XG+6HppgTm1HTGL/Uk9z9NkJH53o7puZLur434heHzAjkS60hZB3vT4ls25zl5rMiX4EA==}
|
||||
dev: false
|
||||
|
||||
/load-bmfont@1.4.1:
|
||||
resolution: {integrity: sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==}
|
||||
dependencies:
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import cx from 'classnames';
|
||||
|
||||
import type { FunctionalComponent } from 'preact';
|
||||
|
||||
interface Props {
|
||||
class?: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export const YouTubeVideo: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
|
||||
const classes = cx('relative aspect-video mbe-10', className);
|
||||
|
||||
return (
|
||||
<div class={classes} {...props}>
|
||||
<iframe
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
class="absolute h-full w-full"
|
||||
frameBorder="0"
|
||||
src={`https://www.youtube.com/embed/${id}`}
|
||||
></iframe>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -29,4 +29,3 @@ export * from './TextLink';
|
||||
export * from './Title';
|
||||
export * from './UnorderedList';
|
||||
export * from './Verse';
|
||||
export * from './YouTubeVideo';
|
||||
|
||||
@@ -10,7 +10,7 @@ tags: ["poetry", "politics", "philosophy"]
|
||||
series: kipling-poems
|
||||
---
|
||||
|
||||
<YouTubeVideo id="37ARLInjLVE" />
|
||||
<YouTube id="37ARLInjLVE" />
|
||||
|
||||
A few months ago, I stumbled over the poem <cite>The Gods of the Copybook Headings</cite> by _Rudyard Kipling_. I had never heard of the poem before, but the [visual interpretation of the poem](https://www.youtube.com/watch?v=37ARLInjLVE) by filmmaker and author [Lauren Southern](https://laurensouthern.net/) put me under a spell. I watched it over and over again and can recite the poem from my memory.
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ I used a simple spaced-repetition method to remember it. There are countless app
|
||||
|
||||
Next, I learned the English translation of [Epitaph for “Poet’s Tomb”](https://www.poetryinternational.org/pi/poem/23081/auto/0/0/Shuntaro-Tanikawa/EPITAPH-FOR-POETS-TOMB/en/tile) by _Shuntaro Tanikawa_. I first heard the poem in the visual epitaph [Hikari](https://youtu.be/__xVbrDvunY) in 2017. The film remembers the Japanese poet Hiraki-san, who took her life after struggling with depression.
|
||||
|
||||
<YouTubeVideo id="__xVbrDvunY" />
|
||||
<YouTube id="__xVbrDvunY" />
|
||||
|
||||
Compared to **The Gods of the Copybook Headings**, this poem was easy to learn in 1-2 days. I’m struggling to remember it in Japanese, though.
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ series: artificial-intelligence
|
||||
|
||||
Another type of AI that captures the time and minds of people around the world for months is text-to-image generation. You might have seen the website [This Person Does Not Exist](https://www.thispersondoesnotexist.com/), which generates a new face on every reload. Text-to-image generation is even better, you can generate images just with a text input.
|
||||
|
||||
<YouTubeVideo id="fpUpVznI4Yc" />
|
||||
<YouTube id="fpUpVznI4Yc" />
|
||||
|
||||
The video above is one month of work by an artist, created in Midjourney out of 10,000 images. If you’re curious about what artists created with these AI generators, have a look at these stunning videos:
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ tags: ["philosophy"]
|
||||
|
||||
I first came across the Japanese word _shokunin_ (職人) when I watched a [documentary](https://www.youtube.com/watch?v=NfdGGTb5_Ts) about the accomplished bonsai artist Ryan Neil, the founder of [Bonsai Mirai](https://bonsaimirai.com/) outside Portland, Oregon.
|
||||
|
||||
<YouTubeVideo id="NfdGGTb5_Ts" />
|
||||
<YouTube id="NfdGGTb5_Ts" />
|
||||
|
||||
The word can be translated as craftsman, artisan, tradesman, worker, or workman. Yet, the literal translation is not sufficient to transport its full meaning – as with many Japanese words.
|
||||
|
||||
@@ -65,7 +65,7 @@ The restaurant is tiny and has seats for 10 people. The menu has 20 courses and
|
||||
|
||||
Jiro’s talent is to create incredible sushi, and has been doing so for 50 years.
|
||||
|
||||
<YouTubeVideo id="R2L5IrkQTV0" />
|
||||
<YouTube id="R2L5IrkQTV0" />
|
||||
|
||||
<Blockquote author="Jiro Ono">
|
||||
Shokunin try to get the highest quality fish and apply their technique to it. We don’t care about
|
||||
@@ -98,7 +98,7 @@ Over the years, I found countless examples of the _shokunin_ spirit, before I ev
|
||||
|
||||
### Bonsai Releaf
|
||||
|
||||
<YouTubeVideo id="fCdXvp0tTnc" />
|
||||
<YouTube id="fCdXvp0tTnc" />
|
||||
|
||||
[Bonsai Releaf](https://www.youtube.com/@BonsaiReleaf) is one of the most fascinating Bonsai YouTube channels I know. Each video is the work of months or even years of preparation.
|
||||
|
||||
@@ -106,7 +106,7 @@ The presentation is made with such care, I rewatch the videos sporadically for r
|
||||
|
||||
### The Last Artisans of Japan
|
||||
|
||||
<YouTubeVideo id="QJqx8v259xU" />
|
||||
<YouTube id="QJqx8v259xU" />
|
||||
|
||||
[NOWNESS](https://www.nowness.com/), one of my favorite YouTube channels, created the 6-part series [The Last Artisans of Japan](https://www.nowness.com/series/the-last-artisans-of-japan). The series follows Japans fast-disappearing, traditional food producers.
|
||||
|
||||
@@ -114,25 +114,25 @@ Short videos present the production of [Vinegar](https://www.youtube.com/watch?v
|
||||
|
||||
### The Varis Japan Story
|
||||
|
||||
<YouTubeVideo id="hyPfJeHNe4Q" />
|
||||
<YouTube id="hyPfJeHNe4Q" />
|
||||
|
||||
This short documentary by [Dan Olivares](https://www.dan-olivares.com/documentary/varis-japan) shows the Japanese company [Varis](https://varis.co.jp/), that produces aerodynamic racing car parts.
|
||||
|
||||
### Shokunin Series by Rachel and Jun
|
||||
|
||||
<YouTubeVideo id="Z6znbUnhvYw" />
|
||||
<YouTube id="Z6znbUnhvYw" />
|
||||
|
||||
The YouTube creators [Rachel and Jun](https://www.youtube.com/@RachelandJun) created a 5-part series about _shokunin_ showing the [dying of kimono](https://www.youtube.com/watch?v=Z6znbUnhvYw), the production of [Taiko drums](https://www.youtube.com/watch?v=7lSmLnWpAjc), [pottery and sculptures](https://www.youtube.com/watch?v=YmzHphZ2plg), [candy sculptures](https://www.youtube.com/watch?v=SfyBMG0XSk0), and [Gifu fans](https://www.youtube.com/watch?v=Bw-L5u26jHY).
|
||||
|
||||
### Shokunin Woodwork
|
||||
|
||||
<YouTubeVideo id="wphP7eNJZ3g" />
|
||||
<YouTube id="wphP7eNJZ3g" />
|
||||
|
||||
This 9 minute long documentary shows the craft of Japanese woodwork. Japanese woodwork is known to create houses, furniture, and other wooden objects without the use of iron nails or glue. The wood parts are fitted perfectly to be stuck together like a puzzle.
|
||||
|
||||
### Karakuri Box
|
||||
|
||||
<YouTubeVideo id="P41diIqlYSk" />
|
||||
<YouTube id="P41diIqlYSk" />
|
||||
|
||||
The wooden designs of [Karakuri Box](https://karakuri.gr.jp/en/) are based on a 120-year-old traditional craft of “secret boxes” made in the Hakone Odawara region of Japan. Each box has a different design and way of opening. Even the smallest boxes might take a puzzle master [five minutes to open](https://www.youtube.com/watch?v=Yd63V64uYC4).
|
||||
|
||||
@@ -142,7 +142,7 @@ The [YouTube channel](https://www.youtube.com/@karakuribox.official/) has plenty
|
||||
|
||||
### Irezumi – Japanese Tattoo
|
||||
|
||||
<YouTubeVideo id="4orFB7tRDno" />
|
||||
<YouTube id="4orFB7tRDno" />
|
||||
|
||||
Since I first saw Japanese tattoos in a Yakuza movie, I've been obsessed with the art form and bought several art books on the topic.
|
||||
|
||||
@@ -155,13 +155,13 @@ One of the most renowned tattoo artists is Horiyoshi III, Japans undisputed tatt
|
||||
|
||||
### The Reluctant Master
|
||||
|
||||
<YouTubeVideo id="6CdmgXUa6d8" />
|
||||
<YouTube id="6CdmgXUa6d8" />
|
||||
|
||||
[The Reluctant Master](https://www.youtube.com/watch?v=6CdmgXUa6d8) is a short documentary about Sasuke, one of Japan’s well-known blacksmith brands. Yasuhiro Hirakawa is the master of a 22 generation old tradition leading back to ancient times when his predecessors crafted guns for Japanese Daimyō (Warlords). For the last 5 generations since 1867, they have produced knives and gardening scissors, where the most expensive items can cost up to tens of thousands of dollars. A second short documentary shows him creating a [$35,000 Bonsai Scissor](https://www.youtube.com/watch?v=TD2XGwmRJi8).
|
||||
|
||||
### Underwear (Atelier)
|
||||
|
||||
<YouTubeVideo id="CSnj2J6aVmI" />
|
||||
<YouTube id="CSnj2J6aVmI" />
|
||||
|
||||
[Atelier](https://www.themoviedb.org/tv/65584-underwear) <NetflixFlag id="80067618" /> (the original title is Underwear, but changed for the Western market to Atelier) is a brilliant Netflix TV Mini Series from Japan. It’s one of my favorite Japanese TV Shows.
|
||||
|
||||
@@ -169,7 +169,7 @@ The story follows a young lady who is a “fabric geek.” She manages to get th
|
||||
|
||||
### Chef’s Table
|
||||
|
||||
<YouTubeVideo id="qKqj85oo2wI" />
|
||||
<YouTube id="qKqj85oo2wI" />
|
||||
|
||||
[Chef’s Table](https://www.themoviedb.org/tv/62391-chef-s-table) <NetflixFlag id="80007945" /> (2015–) is an Emmy-nominated documentary following the best Chefs in the world. Each episode is a carefully crafted biography of the presented Chef with fantastic cinematography and beautiful music.
|
||||
|
||||
@@ -177,13 +177,13 @@ At this time, there are three spin-offs available: [Chef’s Table: France](http
|
||||
|
||||
### Abstract
|
||||
|
||||
<YouTubeVideo id="DYaq2sWTWAA" />
|
||||
<YouTube id="DYaq2sWTWAA" />
|
||||
|
||||
[Abstract: The Art of Design](https://www.themoviedb.org/tv/70177-abstract-the-art-of-design) <NetflixFlag id="80057883" /> (2017–) is an ongoing documentary TV Show on Netflix that shows the craft of world-famous designers, illustrators, architects and interior designers, and photographers.
|
||||
|
||||
### Midnight Diner
|
||||
|
||||
<YouTubeVideo id="OCGDVHjPX0c" />
|
||||
<YouTube id="OCGDVHjPX0c" />
|
||||
|
||||
Japan has a category of TV Shows, I’ve never seen before. I would call it a Docudrama. They have several fantastic shows that connect a beautiful story with the skillful presentation of Japanese craftsmanship.
|
||||
|
||||
@@ -195,37 +195,37 @@ It is a beautiful drama about a diner that opens at midnight and closes at seven
|
||||
|
||||
### Samurai Gourmet
|
||||
|
||||
<YouTubeVideo id="r8lvlgu8Qa4" />
|
||||
<YouTube id="r8lvlgu8Qa4" />
|
||||
|
||||
[Samurai Gourmet](https://www.themoviedb.org/tv/70781-samurai-gourmet) <NetflixFlag id="80132738" /> (2017) is the second TV Show of this format (I know of). The story follows the recently retired Takeshi who discovers his culinary passion in restaurants around his town while following an imaginary Samurai.
|
||||
|
||||
### Kantaro
|
||||
|
||||
<YouTubeVideo id="7o_cER382mM" />
|
||||
<YouTube id="7o_cER382mM" />
|
||||
|
||||
The third TV Show of this format is [Kantaro: The Sweet Tooth Salaryman](https://www.themoviedb.org/tv/78795) <NetflixFlag id="80175348" /> (2017). The story follows a salaryman who works extra fast to have time to take time off his job and to try different sweets around his town.
|
||||
|
||||
### Thermae Romae Novae
|
||||
|
||||
<YouTubeVideo id="zfwCaZsZp5Q" />
|
||||
<YouTube id="zfwCaZsZp5Q" />
|
||||
|
||||
[Thermae Romae Novae](https://www.themoviedb.org/tv/112169) <NetflixFlag id="81264354" /> (2022) is a TV Show of the most unusual kind. The Anime follows a proud ancient Roman bath architect who starts falling into his baths and travels through time to modern Japan’s bathhouses. At the end of each episode follows an extra documentary of a few minutes showing the Anime creator visiting different Japanese bath houses where the owners proudly present their ancient baths and the individual specialties.
|
||||
|
||||
### Prime Japan
|
||||
|
||||
<YouTubeVideo id="0fRO_l2enWE" />
|
||||
<YouTube id="0fRO_l2enWE" />
|
||||
|
||||
[Prime Japan: Nihon no kokoro ni deau](https://www.imdb.com/title/tt7329322/) <PrimeVideoFlag id="B01IIWE1CO" /> (2016–2017) is one of the best made documentaries on the pursuit of “Japan’s heart” I’ve ever seen. In 12 episodes, different Japanese themes as Sushi, Ramen, Japanese Design, Tea, or Japanese Swords are explored in detail. Unfortunately, the show is currently not available anywhere for streaming or even for sale.
|
||||
|
||||
### The Great Shokunin
|
||||
|
||||
<YouTubeVideo id="r6wn2JKtxsY" />
|
||||
<YouTube id="r6wn2JKtxsY" />
|
||||
|
||||
[The Great Shokunin](https://www.youtube.com/playlist?list=PLy8WDOJkSFFwU4eYJcEatIIC40nlBtr3n) is a Chinese TV Show (with English subtitles) with 20 episodes that shows a broad variation of _shokunin_. I found a [second season](https://www.youtube.com/playlist?list=PLy8WDOJkSFFwU4eYJcEatIIC40nlBtr3n) with 12 parts (and English subtitles).
|
||||
|
||||
### Takuya Matsuyama
|
||||
|
||||
<YouTubeVideo id="GznmPACXBlY" />
|
||||
<YouTube id="GznmPACXBlY" />
|
||||
|
||||
As my final example, I present [Takuya Matsuyama](https://www.craftz.dog/), an indie app developer from Osaka, Japan. He develops the Markdown note-taking app [Inkdrop](https://www.inkdrop.app/). I include him in this list because I think he presents a modern digital version of a _shokunin_.
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { YouTube } from '@astro-community/astro-embed-youtube';
|
||||
|
||||
import DownloadLink from './components/DownloadLink.astro';
|
||||
import EmailLink from './components/EmailLink.astro';
|
||||
import Image from './components/Image.astro';
|
||||
@@ -34,7 +36,6 @@ import {
|
||||
Title,
|
||||
UnorderedList,
|
||||
Verse,
|
||||
YouTubeVideo,
|
||||
} from './components';
|
||||
|
||||
export const mapping = {
|
||||
@@ -76,5 +77,5 @@ export const mapping = {
|
||||
ThemeBox,
|
||||
ul: UnorderedList,
|
||||
Verse,
|
||||
YouTubeVideo,
|
||||
YouTube,
|
||||
};
|
||||
|
||||
@@ -199,4 +199,13 @@
|
||||
@apply scale-105 blur-sm brightness-[100%] dark:brightness-[70%];
|
||||
}
|
||||
}
|
||||
|
||||
/** YouTube Lite */
|
||||
lite-youtube {
|
||||
@apply relative aspect-video mbe-10;
|
||||
|
||||
&::before {
|
||||
@apply !bg-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1
types/astro-embed-youtube.d.ts
vendored
Normal file
1
types/astro-embed-youtube.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
declare module '@astro-community/astro-embed-youtube';
|
||||
Reference in New Issue
Block a user