Add why-sloth article, add articles images

deadrime · Feb 19, 2024 · d01cb12 · d01cb12
1 parent 1fbb8b8
commit d01cb12
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 20 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,7 +15,8 @@
     "mdx/language-mapper": {}
   },
   "rules": {
-    "react-hooks/rules-of-hooks": "warn"
+    "react-hooks/rules-of-hooks": "warn",
+    "@next/next/no-img-element": "off"
   },
   "overrides": [
     {

diff --git a/app/blog/[slug]/layout.tsx b/app/blog/[slug]/layout.tsx
@@ -6,6 +6,7 @@ import classNames from "classnames";
 import React from "react";
 import Tag from "@/components/Tag/Tag";
 import dayjs from 'dayjs';
+import { capitalize } from "@/helpers/capitalize";
 
 type ArticleLayoutProps = {
   children: React.ReactNode,
@@ -33,7 +34,9 @@ export default async function Layout({ children, params }: ArticleLayoutProps) {
             </h2>
             <div className="flex gap-2 flex-wrap gap-y-1">
               {topics?.map((i) => (
-                <Tag key={i} as={Link} href={`/blog/topics/${i}`}>{i}</Tag>
+                <Tag key={i} borderless as={Link} href={`/blog/topics/${i}`}>
+                  {capitalize(i)}
+                </Tag>
               ))}
             </div>
             <time className="text-body2 text-lilac block mt-4">

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,5 @@
-import OldResume from './oldResume.mdx';
-import Link from "next/link";
-import styles from './styles.module.css';
 import { Metadata } from 'next';
-import { getAllArticles, getPaginatedArticles } from '@/helpers/blog';
+import { getPaginatedArticles } from '@/helpers/blog';
 import { BlogArticle } from '@/components/Article';
 import AboutSection from '@/components/AboutSection/AboutSection';
 import Technologies from '@/components/Technologies/Technologies';

diff --git a/app/styles.module.css b/app/styles.module.css
diff --git a/articles/implementing-own-redux-toolkit/page.mdx b/articles/implementing-own-redux-toolkit/page.mdx
@@ -1,4 +1,5 @@
 import actionsTypeHightlightImg from './actions-type-hightlight.png';
+import previewImg from './preview.webp';
 
 export const data = {
   title: "Пишем свой redux-toolkit",
@@ -10,7 +11,8 @@ export const data = {
     "redux",
     "typescript",
     "state-manager"
-  ]
+  ],
+  image: previewImg.src,
 }
 
 <h2 id="motivation">Мотивация</h2>

diff --git a/articles/implementing-own-redux-toolkit/preview.webp b/articles/implementing-own-redux-toolkit/preview.webp
diff --git a/articles/progressive-images-using-thumbhash/page.mdx b/articles/progressive-images-using-thumbhash/page.mdx
@@ -1,5 +1,6 @@
 import ProgressiveImageExample from './ProgressiveImageExample';
 import tgExample from './telegram-example.png';
+import previewSrc from './preview.webp';
 
 export const data = {
   title: "Progressive images при помощи base64 миниатюр",
@@ -10,7 +11,8 @@ export const data = {
     'images',
     'react',
     'node.js',
-  ]
+  ],
+  image: previewSrc.src,
 }
 
 <h2 id="why">Зачем оно вообще нужно</h2>

diff --git a/articles/progressive-images-using-thumbhash/preview.webp b/articles/progressive-images-using-thumbhash/preview.webp
diff --git a/articles/why-sloth/page.mdx b/articles/why-sloth/page.mdx
@@ -0,0 +1,57 @@
+import previewImg from './preview.webp';
+
+export const data = {
+  title: "Почему ленивец?",
+  description: 'Разработчик должен быть ленивым. В хорошем смысле этого слова, потому что лень - это далеко не всегда плохо.',
+  slug: 'why-sloth',
+  publishedTime: '2024-01-01',
+  topics: [
+    'thoughts',
+  ],
+  image: previewImg.src
+}
+
+
+Мысли вслух о лени, в частности о ее пользе и вреде в разрезе веб-разработки. 
+Все мы знаем, что лень - двигатель прогресса. В веб-разработке ленью пропитано буквально все,
+большинство прекрасных библиотек появились в том числе из-за лени - а именно из-за желания облегчить себе жизнь.
+
+## Мы очень любим облегчать себе жизнь
+
+Очень наглядный пример - фавикон. Когда я только пришел в веб-разработку, мне приходилось запускать photoshop,
+вручную ресайзить картинку и конвертировать ее в `.ico`, `.png`, после чего гуглить,
+какие мне нужно прописать метатеги для поддержки `32х32`. Сейчас есть замечательные сайты,
+куда можно одним кликом загрузить картинку любого размера/формата и они тебе сгенерируют
+и `.ico` и `.png` всех нужных размеров и код для `<head>` дадут вместе с `minifest.json`.
+А, например `next.js` даже сам сгенерирует тебе все метатеги, достаточно лишь кинуть картинки в папку /app.
+Все ради того, чтобы тебе не пришлось лишний раз нажимать `ctrl + c`, `ctrl + v`. Это ли не кульминация лени?
+Но ведь круто! Но ведь удобно!
+
+Или скажем бандлеры. Настроить `gulp` или `grunt` для сборки сайта было делом хоть и не хитростным,
+но требующим определенного опыта и знаний. Сейчас же фреймворки имеют встроенный конфиг бандлера под копотом,
+чтобы просто начать что-то делать тебе вообще не нужно ничего настраивать,
+а если и придется - вся настройка в 99% случаев сведется к тому, чтобы сделать `npm i` с нужным плагином/лоадером.
+Для какого-нибудь `CRA` `eject` конфига вообще считается плохим тоном,
+и ощущается как "ай ай ай, плохой разработчик, зачем ты лезешь в настройки вебпака, все уже и так за тебя настроили".
+
+А сколько есть библиотек вроде lodash, underscore или react-hooks, на все случаи жизни,
+бери себе да импортируй готовые методы. 
+
+## Почему лень - это хорошо?
+
+А потому что ленивый разработчик, по настоящему ленивый, в самом хорошем смысле этого слова -
+он обязательно напишет свой велосипед, который будет пусть на 5%, но удобнее существующего решения.
+Создаст свой кастомный конфиг для бандлера, где все будет настроенно именно так, как ему удобно.
+Сделает свой темплейт для быстрого старта проекта на react + typescript.
+Напишет какой-нибудь [cssrem](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem) или
+[rename](https://marketplace.visualstudio.com/items?itemName=YounesHenni.rename-extensions). 
+
+## А почему плохо?
+
+Мне кажется, мы слишком культивируем лень. Привыкаем к тому, что все уже написано за нас. Понижаем порог входа до неприлично низкого уровня. Я не говорю о том, что простота - это плохо, скорее призываю разбираться в том, как эта простота устроена и создавать ее самому. Зона комфорта - это прекрасно, но когда она создана руками других людей, то выйти за ее пределы бывает крайне болезненно.
+
+## Так почему же ленивец?
+
+Я считаю, что этому миру нужны ленивые разработчики, которым не лень создавать вещи, которые сильно облегчают нам жизнь. Я сам стремлюсь стать именно таким разработкиком. А еще ленивцы милые. 
+
+<Image alt="А еще Блиц - скорость без границ" src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExNTdlOWIxemZ3OXNpbWpudHI1a3R3MjdrZ3N2aG8wd296YjM2N3VodSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xUA7b5OQjivd4cl3j2/giphy.gif"/>
diff --git a/articles/why-sloth/preview.webp b/articles/why-sloth/preview.webp
diff --git a/components/Article.tsx b/components/Article.tsx
@@ -10,16 +10,19 @@ type BlogArticleProps = {
 export const BlogArticle: React.FC<BlogArticleProps> = ({
   article
 }) => (
-  <article>
-    {article.image && (
-      <figure className='aspect-[380/200] bg-slate-100/10 rounded-lg mb-3'>
-      </figure>
-    )}
+  <article className='max-w-xl'>
     <Link href={`/blog/${article.slug}`} className='text-text'>
-      <h3 className="mt-0 mb-3 p-0 text-md max-w-sm">
+      {article.image && (
+        <img
+          src={article.image}
+          alt={article.title}
+          className='aspect-[38/20] bg-slate-100/10 rounded-lg mb-3 overflow-hidden object-cover object-center w-full'
+        />
+      )}
+      <h3 className="mt-0 mb-3 p-0 text-md leading-tight">
         {article.title}
       </h3>
-      <span className="max-w-sm text-body2 text-text/70 block mb-4">
+      <span className="text-body2 text-text/70 block mb-4">
         {article.description}
       </span>
     </Link>

diff --git a/helpers/blog.ts b/helpers/blog.ts
@@ -18,7 +18,7 @@ export const getAllArticles = async () => {
     return article
   }));
 
-  return articlesData.sort((a, b) => a.publishedTime - b.publishedTime);
+  return articlesData.sort((a, b) => b.publishedTime - a.publishedTime);
 }
 
 export const getPaginatedArticles = async (limit: number, offset = 0) => {
@@ -55,6 +55,7 @@ export const getArticleBySlug = async (slug: string): Promise<Article> => {
 
   const article: Article = {
     component,
+    image: data.image,
     slug: data.slug || slug,
     description: data.description,
     publishedTime,