From fd60e171ce9c6de2be30416757b86844acc273e9 Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Sat, 10 Jun 2023 19:17:43 +0200 Subject: [PATCH] refactor: replace YouTubeVideo with YouTube Lite YouTube loads PER video embedded in a page 900 kB which is insane. --- package.json | 1 + pnpm-lock.yaml | 16 ++++++++ src/components/YouTubeVideo.tsx | 24 ----------- src/components/index.ts | 1 - ...tion-the-gods-of-the-copybook-headings.mdx | 2 +- src/content/journal/2021/learning-poems.mdx | 2 +- ...ntelligence-3-text-to-image-generation.mdx | 2 +- src/content/journal/2023/shokunin.mdx | 40 +++++++++---------- src/mdx-components.ts | 5 ++- src/styles/global.css | 9 +++++ types/astro-embed-youtube.d.ts | 1 + 11 files changed, 53 insertions(+), 50 deletions(-) delete mode 100644 src/components/YouTubeVideo.tsx create mode 100644 types/astro-embed-youtube.d.ts diff --git a/package.json b/package.json index e5638fb..c726676 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9a50f9e..48675db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: diff --git a/src/components/YouTubeVideo.tsx b/src/components/YouTubeVideo.tsx deleted file mode 100644 index 3e03b9f..0000000 --- a/src/components/YouTubeVideo.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import cx from 'classnames'; - -import type { FunctionalComponent } from 'preact'; - -interface Props { - class?: string; - id: string; -} - -export const YouTubeVideo: FunctionalComponent = ({ class: className, id, ...props }) => { - const classes = cx('relative aspect-video mbe-10', className); - - return ( -
- -
- ); -}; diff --git a/src/components/index.ts b/src/components/index.ts index a261582..b8d30c1 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -29,4 +29,3 @@ export * from './TextLink'; export * from './Title'; export * from './UnorderedList'; export * from './Verse'; -export * from './YouTubeVideo'; diff --git a/src/content/journal/2021/interpretation-the-gods-of-the-copybook-headings.mdx b/src/content/journal/2021/interpretation-the-gods-of-the-copybook-headings.mdx index e871b10..7f4e369 100644 --- a/src/content/journal/2021/interpretation-the-gods-of-the-copybook-headings.mdx +++ b/src/content/journal/2021/interpretation-the-gods-of-the-copybook-headings.mdx @@ -10,7 +10,7 @@ tags: ["poetry", "politics", "philosophy"] series: kipling-poems --- - + A few months ago, I stumbled over the poem The Gods of the Copybook Headings 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. diff --git a/src/content/journal/2021/learning-poems.mdx b/src/content/journal/2021/learning-poems.mdx index 0a94c2e..74f5c43 100644 --- a/src/content/journal/2021/learning-poems.mdx +++ b/src/content/journal/2021/learning-poems.mdx @@ -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. - + 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. diff --git a/src/content/journal/2022/artificial-intelligence-3-text-to-image-generation.mdx b/src/content/journal/2022/artificial-intelligence-3-text-to-image-generation.mdx index edf1ef2..cbee407 100644 --- a/src/content/journal/2022/artificial-intelligence-3-text-to-image-generation.mdx +++ b/src/content/journal/2022/artificial-intelligence-3-text-to-image-generation.mdx @@ -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. - + 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: diff --git a/src/content/journal/2023/shokunin.mdx b/src/content/journal/2023/shokunin.mdx index 87f1e02..f913509 100644 --- a/src/content/journal/2023/shokunin.mdx +++ b/src/content/journal/2023/shokunin.mdx @@ -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. - + 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. - +
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 - + [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 - + [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 - + 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 - + 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 - + 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 - + 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 - + 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 - + [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) - + [Atelier](https://www.themoviedb.org/tv/65584-underwear) (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 - + [Chef’s Table](https://www.themoviedb.org/tv/62391-chef-s-table) (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 - + [Abstract: The Art of Design](https://www.themoviedb.org/tv/70177-abstract-the-art-of-design) (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 - + 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 - + [Samurai Gourmet](https://www.themoviedb.org/tv/70781-samurai-gourmet) (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 - + The third TV Show of this format is [Kantaro: The Sweet Tooth Salaryman](https://www.themoviedb.org/tv/78795) (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 - + [Thermae Romae Novae](https://www.themoviedb.org/tv/112169) (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 - + [Prime Japan: Nihon no kokoro ni deau](https://www.imdb.com/title/tt7329322/) (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 - + [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 - + 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_. diff --git a/src/mdx-components.ts b/src/mdx-components.ts index 90fdb3a..768d963 100644 --- a/src/mdx-components.ts +++ b/src/mdx-components.ts @@ -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, }; diff --git a/src/styles/global.css b/src/styles/global.css index 7359fc0..f7cfdf3 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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; + } + } } diff --git a/types/astro-embed-youtube.d.ts b/types/astro-embed-youtube.d.ts new file mode 100644 index 0000000..9563ea2 --- /dev/null +++ b/types/astro-embed-youtube.d.ts @@ -0,0 +1 @@ +declare module '@astro-community/astro-embed-youtube';