From ce812e84660f43707d1c0417bdf393c30d6dd6cb Mon Sep 17 00:00:00 2001 From: Timothy Pidashev Date: Tue, 22 Apr 2025 12:20:19 -0700 Subject: [PATCH] Add commands mdx component; continue work on coreboot post --- src/package.json | 4 +- src/pnpm-lock.yaml | 15 ++ src/src/components/mdx/code-block.tsx | 59 ++++++ src/src/components/mdx/command.tsx | 188 ++++++++++++++++++ .../blog/thinkpad-t440p-coreboot-guide.mdx | 78 ++++++++ .../thinkpad-t440p-modification-guide.mdx | 0 .../content/thinkpad-t440p-coreboot-guide.mdx | 38 ---- 7 files changed, 343 insertions(+), 39 deletions(-) create mode 100644 src/src/components/mdx/code-block.tsx create mode 100644 src/src/components/mdx/command.tsx create mode 100644 src/src/content/blog/thinkpad-t440p-coreboot-guide.mdx rename src/src/content/{ => blog}/thinkpad-t440p-modification-guide.mdx (100%) delete mode 100644 src/src/content/thinkpad-t440p-coreboot-guide.mdx diff --git a/src/package.json b/src/package.json index 1d7f7ac..356483e 100644 --- a/src/package.json +++ b/src/package.json @@ -29,11 +29,13 @@ "marked": "^15.0.8", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.5.0", "react-responsive": "^10.0.1", "reading-time": "^1.5.0", "rehype-pretty-code": "^0.14.1", "rehype-slug": "^6.0.0", "schema-dts": "^1.1.5", - "typewriter-effect": "^2.21.0" + "typewriter-effect": "^2.21.0", + "unist-util-visit": "^5.0.0" } } diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml index dd1c076..928aa71 100644 --- a/src/pnpm-lock.yaml +++ b/src/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-icons: + specifier: ^5.5.0 + version: 5.5.0(react@18.3.1) react-responsive: specifier: ^10.0.1 version: 10.0.1(react@18.3.1) @@ -62,6 +65,9 @@ importers: typewriter-effect: specifier: ^2.21.0 version: 2.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + unist-util-visit: + specifier: ^5.0.0 + version: 5.0.0 devDependencies: '@astrojs/react': specifier: ^4.2.4 @@ -1867,6 +1873,11 @@ packages: peerDependencies: react: ^18.3.1 + react-icons@5.5.0: + resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==} + peerDependencies: + react: '*' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -4636,6 +4647,10 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-icons@5.5.0(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react-refresh@0.17.0: {} diff --git a/src/src/components/mdx/code-block.tsx b/src/src/components/mdx/code-block.tsx new file mode 100644 index 0000000..e8a7ac0 --- /dev/null +++ b/src/src/components/mdx/code-block.tsx @@ -0,0 +1,59 @@ +import React, { useState } from 'react'; +import { Check, Copy } from 'lucide-react'; + +interface CodeBlockProps { + children: React.ReactNode; + className?: string; + 'data-language'?: string; + 'data-theme'?: string; + raw?: string; +} + +export const CodeBlock: React.FC = ({ + children, + className, + 'data-language': language, + raw +}) => { + const [copied, setCopied] = useState(false); + + const handleCopy = () => { + if (raw) { + navigator.clipboard.writeText(raw); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + return ( +
+ {language && ( +
+ + {language} + +
+ )} + + 
+        {children}
+
+
+ ); +}; diff --git a/src/src/components/mdx/command.tsx b/src/src/components/mdx/command.tsx new file mode 100644 index 0000000..426b21f --- /dev/null +++ b/src/src/components/mdx/command.tsx @@ -0,0 +1,188 @@ +import React, { useState } from 'react'; +import { Terminal, Copy, Check } from 'lucide-react'; +// Import all required icons from react-icons +import { FaDebian, FaFedora } from 'react-icons/fa6'; +import { SiGentoo, SiNixos, SiArchlinux } from 'react-icons/si'; + +const Commands = ({ + commandId, + description, + archCommand, + debianCommand, + fedoraCommand, + gentooCommand, + nixCommand +}) => { + const [activeTab, setActiveTab] = useState('arch'); + const [copied, setCopied] = useState(false); + + const distros = [ + { + id: 'arch', + name: 'Arch', + icon: SiArchlinux, + command: archCommand || 'echo "No command specified for Arch"' + }, + { + id: 'debian', + name: 'Debian', + icon: FaDebian, + command: debianCommand || 'echo "No command specified for Debian"' + }, + { + id: 'fedora', + name: 'Fedora', + icon: FaFedora, + command: fedoraCommand || 'echo "No command specified for Fedora"' + }, + { + id: 'gentoo', + name: 'Gentoo', + icon: SiGentoo, + command: gentooCommand || 'echo "No command specified for Gentoo"' + }, + { + id: 'nix', + name: 'NixOS', + icon: SiNixos, + command: nixCommand || 'echo "No command specified for NixOS"' + } + ]; + + const copyToClipboard = (text) => { + navigator.clipboard.writeText(text) + .then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }) + .catch(err => { + console.error('Failed to copy: ', err); + }); + }; + + return ( +
+ {/* Header with Terminal Icon and Copy Button */} +
+
+ +
+ {description || "Terminal Command"} +
+
+ +
+ + {/* Tabs */} +
+ {distros.map((distro) => { + const IconComponent = distro.icon; + + return ( + + ); + })} +
+ + {/* Command Display with Horizontal Scrolling */} +
+
+ $ + + {distros.find(d => d.id === activeTab).command} + +
+
+
+ ); +}; + +// Also include a simpler command component for single commands +const Command = ({ + command, + description, + shell = "bash" +}) => { + const [copied, setCopied] = useState(false); + + const copyToClipboard = () => { + navigator.clipboard.writeText(command) + .then(() => { + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }) + .catch(err => { + console.error('Failed to copy: ', err); + }); + }; + + return ( +
+ {/* Header with Terminal Icon and Copy Button */} +
+
+ +
+ {description || "Terminal Command"} +
+
+ +
+ + {/* Command Display with Horizontal Scrolling */} +
+
+ $ + + {command} + +
+
+
+ ); +}; + +export { Commands, Command }; diff --git a/src/src/content/blog/thinkpad-t440p-coreboot-guide.mdx b/src/src/content/blog/thinkpad-t440p-coreboot-guide.mdx new file mode 100644 index 0000000..21c372b --- /dev/null +++ b/src/src/content/blog/thinkpad-t440p-coreboot-guide.mdx @@ -0,0 +1,78 @@ +--- +title: Thinkpad T440p Coreboot Guide +description: The definitive guide on corebooting a Thinkpad T440p +author: Timothy Pidashev +tags: [t440p, coreboot, thinkpad] +date: 2025-01-15 +image: "/blog/thinkpad-t440p-coreboot-guide/thumbnail.png" +--- + +import { Commands, Command } from "@/components/mdx/command"; + +> **Interactive Script Available!** +> Want to skip the manual steps in this guide? +> I've created an interactive script that can automate the entire process step by step as you follow along. +> This script supports Arch, Debian, Fedora, Gentoo, and Nix! + + + +## Getting Started +The Thinkpad T440p is a powerful and versatile laptop that can be further enhanced by installing coreboot, +an open-source BIOS replacement. This guide will walk you through the process of corebooting your T440p, +including flashing the BIOS chip and installing the necessary software. + +## What You'll Need + +Before getting started corebooting your T440p, make sure you have the following: + +- **Thinkpad T440p**: This guide is specifically for the T440p model. +- **CH341A Programmer**: This is a USB device used to flash the BIOS chip. +- **Screwdriver**: A torx screwdriver is needed to open the laptop. + +## Installing Dependencies + +Install the following programs. These will be needed to compile coreboot and flash the BIOS. + + + +## Disassembling the Laptop +1. **Power off your laptop**: Make sure your T440p is completely powered off and unplugged from any power source. +2. **Remove the battery**: Flip the laptop over and remove the battery by sliding the latch to the unlock position and lifting it out. +3. **Unscrew the back panel**: Use a torx screwdriver to remove the screws securing the back panel. + +## Locating the EEPROM Chips + +In order to flash the laptop, you will need to have access to two EEPROM chips located next to the sodimm RAM. + +![EEPROM Chips Location](/blog/thinkpad-t440p-coreboot-guide/eeprom_chips_location.png) + +## Assembling the SPI Flasher + +Place the SPI flasher ribbon cable into the correct slot and make sure its the 3.3v variant + +![SPI Flasher Assembly](/blog/thinkpad-t440p-coreboot-guide/spi_flasher_assembly.png) + +After the flasher is ready, connect it to your machine and ensure its ready to use: + + + +Flashrom should report that programmer initialization was a success. + +## Extracting Original BIOS + + diff --git a/src/src/content/thinkpad-t440p-modification-guide.mdx b/src/src/content/blog/thinkpad-t440p-modification-guide.mdx similarity index 100% rename from src/src/content/thinkpad-t440p-modification-guide.mdx rename to src/src/content/blog/thinkpad-t440p-modification-guide.mdx diff --git a/src/src/content/thinkpad-t440p-coreboot-guide.mdx b/src/src/content/thinkpad-t440p-coreboot-guide.mdx deleted file mode 100644 index 55cf64c..0000000 --- a/src/src/content/thinkpad-t440p-coreboot-guide.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Thinkpad T440p Coreboot Guide -description: The definitive guide on corebooting a Thinkpad T440p -author: Timothy Pidashev -tags: [t440p, coreboot, thinkpad] -date: 2025-01-15 -image: "/blog/thinkpad-t440p-coreboot-guide/thumbnail.png" ---- - -> **Interactive Script Available!** -> Want to skip the manual steps in this guide? -> I've created an interactive script that can automate the entire process step by step as you follow along. -> Simply run the following command in your terminal to get started: -> -> ``` -> curl -fsSL https://timmypidashev.dev/scripts/run.sh | sh -s -- -t coreboot-t440p -> ``` -> NOTE: This script supports Arch, Debian, Fedora, Gentoo, and Nix linux distributions! - -## Getting Started -The Thinkpad T440p is a powerful and versatile laptop that can be further enhanced by installing coreboot, -an open-source BIOS replacement. This guide will walk you through the process of corebooting your T440p, -including flashing the BIOS chip and installing the necessary software. - -## What You'll Need - -Before getting started corebooting your T440p, make sure you have the following: - -- **Thinkpad T440p**: This guide is specifically for the T440p model. -- **CH341A Programmer**: This is a USB device used to flash the BIOS chip. -- **Screwdriver**: A torx screwdriver is needed to open the laptop. - -## Disassembling the Laptop -1. **Power off your laptop**: Make sure your T440p is completely powered off and unplugged from any power source. -2. **Remove the battery**: Flip the laptop over and remove the battery by sliding the latch to the unlock position and lifting it out. -3. **Unscrew the back panel**: Use a torx screwdriver to remove the screws securing the back panel. - -## Locating the EEPROM Chips