Оглавление

  1. Элементы, идеи и концепция
  2. ДевКарт
  3. Щиты.ио
  4. Репозитории GitHub
  5. DEV.to Статьи
  6. Будущие обновления

Элементы, идеи и концепция

Когда я посмотрел на свой веб-сайт, это был мой первый веб-сайт, и я не был очень доволен работой, которую я там размещал. Это был очень забавный проект и фантастическая возможность обучения, поскольку я впервые погрузился в веб-разработку. Но это все еще не был сайт, которым я был бы достаточно горд, чтобы публиковать и делиться им столько, сколько мне хотелось бы. И мой веб-сайт должен быть тем, чем я горжусь, чтобы продемонстрировать лучшие стороны меня индустрии.

Затем я наткнулся на dev.page и начал заполнять свою личную dev.page всеми ссылками на социальные сети, резюме и красиво обновленным введением. Я подумал… почему бы не переделать мой сайт, пока я этим всем занимаюсь. Наткнувшись на GitHub API Docs, а также на DEV.to API Docs недалеко друг от друга, я захотел поработать над ними и начал делать заметки.

DevCard

Поскольку моя DevCard уже внедрена в мой GitHub README.md, получить код для переноса этого раздела на мой веб-сайт было несложно. Если вам интересно узнать больше о DevCards, я написал статью специально о них здесь.

Со своей страницы DevCard я взял тег a и поместил его в div вот так:

<div class="devcard d-flex">
    <a href="https://app.daily.dev/tmchuynh"><img align=center src="https://api.daily.dev/devcards/9b4d6fa7ff784d3297e67d1edf73fc06.png?r=mg3" width="500" alt="Tina Huynh's Dev Card" /></a>
</div>

Щиты.ио

Я создал несколько пользовательских значков, чтобы добавить их к знакомству с Shields.io — простым и простым в использовании сайтом. Я пошел дальше и посмотрел на значки, которые они используют через Простые значки, и использовал свой собственный цвет, чтобы он соответствовал моему логотипу и остальной части страницы.

https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>

Репозитории GitHub

Когда я начал заполнять свои репозитории GitHub на своем веб-сайте, я пошел дальше и настроил раздел в своем HTML-файле следующим образом:

<div class="section-title">
    <h2 id="project-tiles">Projects</h2>
    <ul id="project-list">
    </ul>
</div>

Я добавил некоторые стили в свои файлы css:

#project-list .cards {
    color: var(--eerie-black);
    display: flex;
    flex-direction: column;
    height: 150px;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    border: 1px solid var(--eerie-black);
    box-shadow: 3px 10px 25px rgb(180,180,180, 0.4);
}

А затем начал реализовывать проекты в моих файлах JavaScript.

Сначала мне нужно было получить репозитории из моего профиля на GitHub. Я сделал это с $.getJSON:

$.getJSON('https://api.github.com/users/tmchuynh/repos', (data) => {
    console.log(data);
.
.

После этого я смог динамически создавать элементы документа для информации, которую я хотел отобразить, и добавлять ее в раздел моего HTML-файла. Например:

var title = document.createElement("a");
title.classList.add("title");
title.innerHTML = name;
var hyperlink = document.createAttribute("href");
hyperlink.value = url;
title.setAttributeNode(hyperlink);
card.appendChild(title);

Я лично включил последний раз, когда я нажимал на репо, и хотел, чтобы проекты отображались в порядке последнего обновления. Я сделал это, сначала отсортировав данные сразу после получения массива из API с помощью .sort():

data.sort((a,b) => (b.pushed_at > a.pushed_at) ? 1 : ((a.pushed_at > b.pushed_at) ? -1 : 0))
data.forEach((element, index) => {
   populate(element.name, element.html_url, element.pushed_at, index);
})

Если вам интересно, есть и другие статьи, посвященные пользовательскому API GitHub, например @technicalvandar885.

Извлечение данных профиля GitHub с использованием пользовательского API Github

DEV.to Статьи

DEV.to API предоставляет много информации об использовании их API.

const response = await fetch(`https://dev.to/api/articles/${id}`);
const data = await response.json();

fetch можно использовать для извлечения статей, и оттуда довольно просто отобразить необходимую информацию в форме блога.

На самом DEV.to есть много статей, объясняющих процесс использования API, таких как, помимо прочего, @j471n, @ugglr, @hackerkid.

Как использовать API dev.to

Добавляйте записи блога на личный сайт с помощью DEV.to API, React и хуков React

Публикация ваших сообщений из блога dev.to в diff.blog

Если вы хотите увидеть, как я реализовал этот раздел, ознакомьтесь с полным кодом моего проекта здесь.

Будущие обновления

Далее у меня есть несколько идей о том, куда я хочу направить сайт и какие новые функции я хочу добавить:
[ ] GitHub Skyline
[ ] Daily.dev Skyline

Мой горизонт GitHub в 2021 году выглядит ужасно! НО я здесь, чтобы изменить это к 2022 году. От таких людей, как Скотт, распечатывающих свой горизонт, до того, сколько проектных идей я хочу начать, я здесь, чтобы сделать этот год важным!

Просмотрите свой график вклада Github в виде анимированного горизонта + распечатайте его на 3D-принтере

… и линия горизонта Daily.dev будет выглядеть так, как звучит.

Статьи, прочитанные за последний год уже вдохновлены вкладами за последний год. Почему бы не добавить функцию горизонта? Каждый день, неделю или месяц может быть всплывающая подсказка о самой читаемой теме, когда пользователь наводит на нее курсор! @dailydevtips1 Это был бы еще один красивый визуальный способ показать всем, что вы читаете. Что все думают?

Я мог бы начать работать над этим сам, если я смогу понять это или если кто-то еще не сделает этого раньше.

Удачного кодирования!