단일 행 링크 확장🔗

나는 블로그 게시물을 최대한 먼지를 털지 않으려고 아주 간단한 방식으로 교차해서 링크하고 싶지만, GitHub의 일반적인 가격 인하에서는 여전히 보기 좋다.나는 줄곧 HTML을 가격 인하에 넣는 부분을 사용하고 있다.비록 이것은 실행할 수 있지만, 나에게는 이것은 수첩/어려움과 같다. 그것은 보기에 가장 좋은 것 같지 않을 뿐만 아니라, 읽기에도 좋지 않다

새 카드의 목표

새 카드는 제목, 설명, 내용을 확장하기 위해 완전히 자동화되어야 한다
표지 사진.만약 내가 그것의 뒤에 평론을 첨부할 수 있다면, 좋은 점이 있을 것이다.

완전 자동

확장 카드

직함

설명

표지 사진

낡은 상표

하면, 만약, 만약...🤣. 이 카드는 닻 라벨과 단락 라벨에 싸인 그림일 뿐입니다.나는 이것이 GitHub과 dev.to에서 이미지를 더욱 좁고 집중시키는 가장 일치하는 방법이라는 것을 발견했다.

<p style='text-align: center'>
  <a href='https://waylonwalker.com/notes/eight-years-cat'>
    <img
    style='width:500px; max-width:80%; margin: auto;'
    src="https://waylonwalker.com/eight-years-cat.png"
    alt="My first eight years as a working professional article"
    />
  </a>
</p>

여기서 관건은 내가 반드시 HTML을 가격 인하에 넣어야 한다는 것이다.그것은 편집할 때 좀 더러워 보였는데, 솔직히 말하면 처리하기가 매우 고통스러웠다.

새 카드

<a class="onelinelink" href="https://waylonwalker.com/eight-years-cat/">
<img style="float: right;" align='right' src="https://waylonwalker.com/static/29cdf6fcfb17d7fd766fc438144fb3e4/630fb/eight-years-cat-xmas2020.png" alt="article cover for My first eight years as a working professional.">
<div class="right">
    <h2>My first eight years as a working professional.</h2>
    <p class="description">
    This day 8 years ago I started my first day as a Mechanical Engineer. I am so grateful for this journey that I have been able to have. There is no way that I could have planned this journey from the beginning.
    </p>
    <p class="url">
    <span class="read-more">read more</span>  waylonwalker.com
    </p>
</div>
</a>

내 경력의 첫 8년.

8년 전 오늘, 나는 기계 엔지니어로서의 첫날을 시작했다.나는 이번 여행에 매우 감격한다. 나는 이미 할 수 있다.나는 처음부터 이번 여행을 계획할 수 없다.
더 많은 waylonwalker를 읽으세요.일반 도메인 이름 형식

첫걸음

나의 첫 번째 시도는 gatsby-remark-embedder를 위해 자신의 변압기를 만드는 것이다.제가 전에 제 트위터와 유튜브 사이트에 이걸 설치했어요.나는 맞춤형 트랜스포머를 실행시켜 내 사이트를 위해 내가 하고 싶은 일을 하려고 했지만 실패했다.나는 변압기가 들어오는 것이 어떤 데이터인지 정말 이해하기 어렵다.나는 js/node 디버깅 기교가 부족하다는 점이 매우 뚜렷하다.

게이츠비 평론 삽입기

Discussion의 링크 확장에 영감을 받아 블로그에 단일 링크 확장을 내놓았습니다.
더 많은 waylonwalker를 읽으세요.일반 도메인 이름 형식

using gatsby-remark-embedder to expand Twitter/YouTube

방향을 바꾸다

그것 또한 방향을 바꾸는 데도 적용된다.나는 나의 최신 게시물로 방향을 바꿨다.이것은 내가 최신을 유지하는 데 있어서 가장 잘하지 못한 일이지만, 내가 정말 한 문장을 자랑스러워할 때, 나는 그것을 최신으로 만들 것이다.

Kedro의 새로운 기능 0.16.6

이 버전의kedro에서 지원하는 새로운 배치 옵션을 발표했습니다.spaceflights 파이프는 초기 별명으로 정식으로 추가되었습니다.
더 많은 waylonwalker를 읽으세요.일반 도메인 이름 형식

this post is a redirect to my "latest post"

클라이언트

나는 이 카드 확장 클라이언트를 실행하는 것부터 시작한다.이것이 바로 내가 전환해야 할 요소 목록을 찾는 전략이다.

모든 닻 가져오기

모든 단락 가져오기

필터 내용이 링크 중 하나인 단락

필터 단락 중 원소만 있는 단락

링크가 있는 단락으로 필터링

이 요소들은 응용해야 한다shouldTransform.

const oneLineLinks = () => {
  const linkText = [...document.querySelectorAll('.post-body p a')].map(
    (p) => p.innerText
  )
  const paragraphs = document.querySelectorAll('.post-body p') //

  const regex = /^https?:\/\/waylonwalker\.com\//
  const shouldTransform = (url) => regex.test(url)

  const anchorOnly = [...paragraphs].filter(
    (p) => linkText.includes(p.innerText) && p.childElementCount === 1
  )

  anchorOnly
    .filter((p) => shouldTransform(p.firstElementChild.href))
    .map(
      async (p) =>
        (p.outerHTML = await oneLineLinkCard(p.firstElementChild.href))
    )
}

콘셉트

CSS는 나의 강점이 아니지만, 나는 보통 물건을 내가 좋아하는 모양으로 칠 수 있다.이것에 대해 나는 확실히 그것이 각종 스크린의 외관에 얽매여 있다. 특히 나는 표지 이미지의 크기를 단단한 300px로 제어하기 때문이다.나는 마침내 내가 필요로 하는 것보다 더 많은 미디어 조회를 받았지만, 그것은 효과적이었다.

.onelinelink + blockquote {
  position: relative;
  left: 2rem;
  background: rgba(0, 0, 0, .2);
  margin: -6rem auto 1rem;
  padding-top: 3rem;
  border: 1px solid goldenrod;
  border-top: 2px solid goldenrod;

  max-width: 300px;
  @media (max-width: 350px) {
  left: 0rem;
  margin-left: .4rem;
  margin-right: .4rem;
  }
  @media (min-width: 800px) {
    max-width: 600px;
  }
  @media (min-width: 900px) {
    max-width: 700px;
  }
  @media (min-width: 1000px) {
    max-width: 800px;
  }
  border-radius: 15px/45px;
  display: block;
  }

}

.onelinelink {
  position: relative;
  z-index: 2;
  margin: 4rem;
  overflow: hidden;
  display: flex;
  border: 2px solid rgba(255, 50, 50, .1);
  background: rgba(255, 50, 50, .015);
  background: #262236;
  text-decoration: none;
  border-radius: 8px;
  max-height: 126px;

  @media (max-width: 800px) {
    flex-direction: column;
    max-height: 800px;
    max-width: 300px;
    margin: 4rem auto;

  }

  h2 {
    top: -1.2rem;
    postition: relative;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    font-weight: 400;

  }

  .right {
  width: 100%;
    padding: 5px 15px;
  }
  .description {
    font-size: 1rem;
    line-height: 1.2rem;
    height: calc(100% - 31px - 1rem);
    padding: 0;
    padding-bottom: 1rem;
    padding-top: .1rem;
    margin: 0;
  }
  .url {
    padding-right: 30px;
    color: rgba(255, 255, 255, .1);
    text-align: right;
    position: relative;
    z-index: 2;
    background: #262236;
  }

  img {
    max-width: 300px;
    max-height: 126px;
    padding: 0;
    margin: 0;
    border-radius: 8px 0 0 8px;
  }
  .read-more {
    font-size: .6rem;
    color: rgba(255, 255, 255, .08);
  }
}

마지막 눈

이동 장치에서 수직으로 렌더링됩니다.

데스크톱에서 수평으로 렌더링합니다.

확장하다.

나는 이 모든 것이 더욱 좋아질 것이라고 믿는다. 나의 js 기술은 아직도 형성되고 있다.익숙하지 않은 언어로 생각하는 것이 얼마나 어려운지 보고 나는 매우 겸손함을 느꼈다.다음 oneLineLinkCard 은 하나의 닻이 있는 단락에서 페이지 정보를 포함하는 카드로 문자열 템플릿 문자를 보여 줍니다.이것oneLineLineCard 함수는fetch를 사용하여 페이지 내용에서 정확한 메타데이터를 가져옵니다.

const getDescription = (url) =>
  fetch(url)
    .then((r) => r.text())
    .then((html) => {
      let parser = new DOMParser()
      let doc = parser.parseFromString(html, 'text/html')
      let meta = doc.querySelectorAll('meta')
      const description = [...meta].filter(
        (m) => m.name === 'og:description'
      )[0].content
      const image = [...meta].filter((m) => m.name === 'og:image')[0]?.content
      const sm_image = [...meta].filter((m) => m.name === 'og:sm_image')[0]
        ?.content
      const url = [...meta].filter((m) => m.name === 'og:url')[0]?.content
      const title = [...meta].filter((m) => m.name === 'title')[0]?.content
      return { description, image, url, title, sm_image }
    })

const oneLineLinkCard = (url) => {
  return getDescription(url).then(
    (meta) =>
      `<a class="onelinelink" href=${meta.url}>
  <img src='${meta.sm_image ? meta.sm_image : meta.image ? meta.image : ''}' alt='cover image for ${meta.title ? meta.title : ''}>
  <div class="right">
    <h2>${meta.title ? meta.title : ''}</h2>
    <p class='description'>
      ${meta.description ? meta.description : ''}
    </p>
    <p class="url">
       <span class='read-more'>read more</span>  waylonwalker.com
    </p>
  </div>

</a>
  `
  )
}

효과가 있다.

그리고 효과가 있어요.내가 자신의 블로그를 인용할 때마다markdown의 한 줄에 링크가 있으면 나는 아주 좋은 카드 링크를 얻어 다른 글에 링크할 수 있다. 그 위에 작은 그림이 있는데 크기가 카드, 제목과 글 묘사와 일치한다.

그렇지만

클라이언트가 너무 많음

교차 이체에는 적용되지 않음

내가 클라이언트와 진행하는 모든 링크에 대해 클라이언트는 전체 페이지를 끌어당겨서 약간의 메타데이터를 얻는다.나는 블로그를 위해 클라이언트보다 더 많은 일을 했기 때문에 미리 하고 싶다.
그 밖에 이것은 클라이언트에서 완성된 것이기 때문에 내가 나의 가격 인하를 다른 각종 블로그 플랫폼으로 복제할 때 번역 효과가 좋지 않다.만약 그것이 직접 가격 인하 단계에 들어갈 수 있다면 교차 발표는 훨씬 쉬울 것이다.

향후 상태

실제로 이 점에서 이미 실현되었다
내가 시도하는 방향은python을 사용하여 모든 댓글을 불러오고 링크만 포함된 줄을 찾아서 태그에 같은 태그를 표시하는 것입니다.이를 위해, 나는 내가 더 잘 아는 언어인python을 사용하고, 구축할 때까지GitHub 작업에서 이렇게 할 것이다. 내가 작성한 태그가 변하지 않고, 카드는prod에만 나타날 것이다.

왜 구렁이야🐍

파이톤은 나의 일상생활이다. 나는 그것을 이용하여 더욱 효율적이고 깨끗하게 일할 수 있다는 것을 안다.내가 쓴 블로그가 많을수록 내가 본 추상적인 개념이 많을수록 나는 게으르다.설명, 검색엔진 최적화, 표지 사진 등이 자동화되고 있다.게이츠비는 이런 것들이 부족할 때 달리기를 정말 좋아하지 않는다. 아마도 내가 JS 오류 처리 기술이 부족하기 때문일 것이다.나는 이전에 모든 페이지를 불러오고python으로frontmatter를 수리하는 것이 훨씬 쉽다는 것을 발견했다
구축 시간.
나는 최종적으로python으로 내가 필요로 하는 모든 것을 다시 만들 수 있을지 궁금하다. 왜냐하면 나는 솔직히 말하면, 검색을 제외하고,react를 사용하는 것은 단순히 미화된 템플릿 시스템을 위한 것이 아니기 때문이다.만약 내가python으로 모든 것을 미리 보여줄 수 있다면

어떻게 생각하세요?

얘네 예뻐요?그들이 더 잘할 수 있을까?