# Opensophy Hub 3.4: CodeBlock의 새 탭 기능, 맞춤형 랜딩 페이지, UI 개선 사항
Opensophy Hub 3.4에서는 CodeBlock 컴포넌트에 탭 지원 기능이 도입되었습니다. 이제 tabs: CodeTab[] 배열을 지정하여 이름을 붙인 탭을 만들 수 있으며, 각 탭은 고유의 구문 강조 언어와 코드 내용을 가집니다. docUtils.mjs의 파서가 :::tabs와 :::tab[Name] 같은 마크다운 블록을 해당 구조로 변환합니다.
마크다운 에디터에 이제 Tabs 블록을 삽입하는 버튼이 추가되었습니다. 이를 통해 서로 다른 언어로 된 구현 버전을 비교하는 등의 다중 변형 코드 작업이 훨씬 간편해집니다.
이전에 더 나은 통합을 위해 Mermaid를 사용자 지정 다이어그램으로 대체했습니다. 자세한 내용은 포맷팅 가이드를 참조하세요.
맞춤형 랜딩 페이지
새로운 옵션을 통해 표준 welcome.md를 완전한 랜딩 페이지로 대체할 수 있습니다. GeneralPage.tsx 컴포넌트에는 SingularityShaders WebGL 셰이더를 포함한 히어로 섹션과 보안 및 생태계 블록이 들어 있습니다.
설정은 public/data/site-config.json에 저장되며, 개발 모드에서 재빌드 없이 적용됩니다. 랜딩 모드의 SEO를 위해 SSR 스텁을 추가했습니다—SPA와 호환되는 숨겨진 <div id="seo-landing-content">입니다.
주요 수정 사항 및 탐색 개선
- 관리 패널에서 SEO/GEO 관리를 제거했습니다 (향후 버전에서 확장된 옵션과 함께 복귀 예정).
- devpanel의 문제를 수정했습니다.
- 시각적 세부 조정.
탐색
SectionDropdown을 재작업했습니다: 섹션 텍스트가 더 이상 잘리지 않습니다. 탐색 트리 요소에 wordBreak: 'break-word'와 lineHeight: 1.3을 추가했습니다.
DocHoverPreview에 메타데이터 표시: 작성자, 유형, 날짜, 태그. 동기화된 브레이크포인트 초기화를 통해 모바일 탐색 깜빡임을 제거했습니다.
관리 패널
전체 키보드 크기 조정 지원. 헤더의 모든 지점에서 드래그 가능. 키보드 패널 이동(화살표 키 ±20px). welcome.md와 랜딩 페이지 간 전환을 위한 새로운 SitePanel 탭.
테이블 및 CodeBlock 개선
테이블 (tableStyles.ts)
- 적절한 확장을 위한
width: 100%; min-width: max-content. - 중첩 테이블을 위한
.prose .not-prose table에display: table적용. - 5px 임계값을 가진 드래그 스크롤(임계값 전—텍스트 선택).
- 터치: 수평 스와이프 시 수직 스크롤 차단 없음.
CodeBlock
- 7줄 초과 블록에 "Expand" 버튼.
- Overlay를 통한 전체 화면.
- 모바일 메뉴
⋯(복사/확장)은 스크롤 시 닫힘. - highlight.js 언어 지연 로딩.
SEO, 검색, 마이그레이션
SEO/레이아웃
단일 제어 지점—src/app/layouts/Layout.astro의 SITE 객체. JSON-LD(WebSite, Article), Open Graph, Twitter Card, canonical, article:published_time / modified_time 지원. props를 통해 설정: title, description, keywords, robots, lang, author, date.
검색
navSlug별 필터링(배지와 리셋 포함).- 날짜 필터: 지난 30일 내 신규/업데이트.
- 정렬: 최신/오래된/업데이트.
- "N개 더 보기" 페이지네이션(재렌더링 없이).
- 키보드 탐색: 결과 ↑↓, Enter로 열기.
마이그레이션: hub.opensophy.com의 콘텐츠가 UI 라이브러리(ui.opensophy.com)와 함께 opensophy.com으로 이동되었습니다. 라이브러리는 오픈소스 컴포넌트로 채워지고 있으며—등록 불필요, 무료 솔루션 아카이브와 같습니다.
핵심 사항:
CodeBlock의 탭 기능::::tabs파싱으로 다중 언어 코드 지원.- WebGL 히어로와 SEO용 SSR 스텁을 가진 맞춤형 랜딩 페이지.
- UI 강화: 호버 미리보기, 관리 패널 드래그 크기 조정, 테이블 드래그 스크롤.
Layout.astro의 중앙화된 SEO: JSON-LD 및 OG 메타 태그.- UI 라이브러리와 함께 메인 도메인으로 마이그레이션.
— Editorial Team
아직 댓글이 없습니다.