CardLink

Description

Obsidian의 Obsidian-auto-card-link Plugin와 비슷한 형태로 그려줄 수 있는 Transfomer

• reference

GitHub - nekoshita/obsidian-auto-card-link

Contribute to nekoshita/obsidian-auto-card-link development by creating an account on GitHub.

• code 태그에서 cardlink lang을 찾아 해당 codeBlock을 Card 형태로 변환.

Required

• Obsidian-auto-card-link Plugin 필요
  • Obsidian에서 해당 Plugin으로 URL Card를 만들었을 때, 해당 결과물을 파싱하여 Web에 그려줌.

Source

JS

path: quartz/plugins/transformers/custom/cardLink.ts

cardLink.ts

import { QuartzTransformerPlugin } from "../../types"  
import { visit } from "unist-util-visit"  
  
export const CardLink: QuartzTransformerPlugin = () => {  
  return {  
    name: "CardLink",  
    markdownPlugins() {  
      return [  
        () => {  
          return (tree) => {  
            visit(tree, "code", (node) => {  
              if (node.lang === "cardlink") {  
                const cardData = parseCardData(node.value)  
                if (cardData) {  
                  node.type = "html"  
                  node.value = `  
                    <div class="card-link">  
                      <a href="${cardData.url}" target="_blank" rel="noopener noreferrer">  
                        <div class="card-link-content">  
                        <div class="card-image-container">  
                          <img src="${cardData.image}" alt="${cardData.title}" class="card-image"/>  
                        </div>  
                          <div class="card-text">  
                            <h3 class="card-title">${cardData.title}</h3>  
                            <p class="card-description">${cardData.description}</p>  
                          </div>  
                        </div>  
                      </a>  
                    </div>  
                  `  
                }  
              }  
            })  
          }  
        },  
      ]  
    },  
  }  
}  
  
function parseCardData(cardlink: string) {  
  const cardData: { [key: string]: string } = {}  
  
  const lines = cardlink.split("\n")  
  for (const line of lines) {  
    const [key, ...valueParts] = line.split(":")  
    if (key && valueParts.length > 0) {  
      const value = valueParts.join(":").trim() // 나머지 값은 다시 합쳐서 처리  
      cardData[key.trim()] = value  
    }  
  }  
  
  return {  
    url: cardData.url || "",  
    title: cardData.title || "",  
    description: cardData.description || "",  
    image: cardData.image || "",  
  }  
}

CSS

path: quartz/styles/custom/cardLink.scss

cadLink.scss

.card-link {  
  display: flex;  
  justify-content: center;  
  margin-top: 1rem;  
  margin-bottom: 1rem;  
  
  .internal {  
    display: none;  
  }  
  
  .external {  
    display: flex;  
    height: 100%;  
    padding: 0;  
    margin: 0;  
  }  
  
  /* hover 상태 */  
  &:hover .card-link-content {  
    transform: scale(1.02); /* 크기 확대 */  
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 그림자 효과 */  
    transition: all 0.3s ease; /* 부드러운 전환 효과 */  
  }  
  
  /* hover 상태 */  
  &:hover .card-title {  
    transform: scale(1.02); /* 크기 확대 */  
    transition: all 0.3s ease; /* 부드러운 전환 효과 */  
  }  
}  
  
.card-link-content {  
  display: flex;  
  flex-direction: row; /* 가로 방향으로 레이아웃 설정 */  
  align-items: center; /* 세로 가운데 정렬 */  
  border: 1px solid #ddd;  
  border-radius: 8px;  
  overflow: hidden;  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
  width: 100%;  
  height: 10rem;  
  box-sizing: border-box; /* padding, border 포함하여 계산 */  
  transition: all 0.3s ease; /* 부드러운 전환 효과 */  
}  
  
.card-image-container {  
  width: 15rem; /* 이미지 너비 */  
  height: 100%; /* 이미지 높이 */  
  border-right: 1px solid #ddd; /* 이미지와 텍스트 사이에 구분선 */  
  padding: 0;  
  margin: 0;  
}  
  
.card-image {  
  width: 100%; /* 부모의 크기를 100%로 맞추기 */  
  height: 100%; /* 부모의 크기를 100%로 맞추기 */  
  object-fit: fill; /* 이미지가 영역에 맞게 자르기 */  
  display: block; /* img 요소가 block으로 취급되어 부모 영역에 맞게 확장됨 */  
  margin: 0;  
}  
  
.card-text {  
  padding: 15px;  
  flex-grow: 1; /* 텍스트 영역이 남은 공간을 차지하도록 설정 */  
}  
  
.card-title {  
  font-size: 20px; /* 제목 크기 */  
  font-weight: bold;  
  margin-bottom: 10px;  
  color: #333;  
}  
  
.card-description {  
  font-size: 14px;  
  color: #555;  
  line-height: 1.6;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  display: -webkit-box;  
  -webkit-line-clamp: 3; /* 최대 3줄로 텍스트 자르기 */  
  -webkit-box-orient: vertical;  
}  
  
.card-content a {  
  text-decoration: none;  
  color: inherit;  
}  
  
.card-content a:hover {  
  text-decoration: underline;  
}