На рынке есть новая вещь, называемая профилем GitHub Readme. Если вы не знаете, что это такое, пожалуйста, прочитайте отсюда
Я узнал о том, как люди делают действительно удивительные вещи с профилями GitHub и хотели что-то остыть.
Идея заключалась в том, чтобы динамически создавать изображение и показать его в профиль GitHub. Я начал с создания и экспресс-сервера на Glitck.me и созданию маршрута /изображение который будет служить изображению.
Динамически создание изображений на узле было легко с использованием модуля NPM Canvas. Больше информации об этом здесь
В итоге я получил следующий код для обработки /изображение Маршрут на экспресс-сервере.
/* width and height of canvas*/
const width = 1200
const height = 630
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')
/* random background color*/
const bgColor=getRandomColor();
context.fillStyle = bgColor;
context.fillRect(0, 0, width, height)
/* setting the font and text alignment*/
context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.textBaseline = 'top'
/* getting randome message if random language*/
const randomIndex=getRandomInt(0,50);
const language=Object.keys(messages)[randomIndex];
const text = messages[language]
const textWidth = context.measureText(text).width
/*drawing text on canvas*/
context.fillStyle = '#fff'
context.fillText(text, 600, 170)
context.font = 'bold 15pt Menlo'
context.fillText(`(${language})`, 600, 280)
context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('diwakersurya', 600, 540)
context.beginPath();
/* loading image from github url*/
const myimg = await loadImage('https://avatars3.githubusercontent.com/u/7386665?s=400&u=aaff658cd860d5f886775a293c58e73fa57e7bf9&v=4')
context.arc(600,500,50,0,2*Math.PI);
context.clip();
context.drawImage(myimg, 530, 450,myimg.width * 0.3, myimg.height * 0.3)
/*sending as response to client*/
const buffer = canvas.toBuffer('image/png')
response.contentType('image/jpeg');
response.send(buffer);
Что мы делаем в этом коде в основном, создают холст на сервере Express и прикрепление куча текста/изображений в холсте и, наконец, отправляя его клиенту как изображение.
После того, как сервер работает и работает, нам нужно внести следующие изменения в файл Readme.md.
Если вы знакомы с Markdown, вы знаете, что эта строка загружает изображение из URL https://image-serv.glitch.me/image Отказ
Вот и все. Результат будет что-то вроде этого
Как только я сохранил свой профиль GitHub readme и перезагрузил страницу, изображение началось отображаться как ожидалось. Но на перезагрузке страницы я не смог получить новое изображение с измененным цветом и сообщением. Как оказалось, GitHub кэшировал изображение, когда-то загружается и используя URL-адрес кэшированного изображения в README. Я пробовал разные способы преодоления этого вопроса, но не смог.
Сегодня я попробовал снова и оказывается, что Github удалил кэширование изображений. Обновление страницы дает мне изображение с новым сообщением и цветом.
Оформить заказ мой профиль https://github.com/diwakersurya и попробуйте освежить страницу.
Поскольку реализация изображения находится на сервере, определенно бесконечны возможности думать о.
Профиль профиля Github:
ДИВАКЕРСУРЕЙА/DIWAKERSURYA
Мой профиль readme.
⚡ Fun fact: * Refresh page to change the message language and background color. *
Ссылки: https://flaviocopes.com/canvas-node-generate-image/ https://github.com/Automattic/node-canvas https://stackoverflow.com/questions/52940095/how-to-style-images-in-a-canvas https://www.solosophie.com/how-to-say-hello-in-50/
Оригинал: “https://dev.to/diwakersurya/dynamic-content-in-github-profile-readme-6i4”