[%] 나도 아카이브 구현

[폭진이(miraed)]

디시 병신됨 스타일은 나오는데 

막막하노 

[익명(211.235)]

궁금한게 JS가 실행되서 렌더링되는 부분은 어떻게 처리함?

[폭진이(miraed)]

getComputedStyle

[호선이(solar3258)]

아카이브된 html 좀 보내줄 수 있어?

[폭진이(miraed)]

https://send.mni.li/download/c398225f5496ef2f/#1AjzU7gG4NL2CMNqX8YXcg

[호선이(solar3258)]

@폭진이 .vector-sticky-pinned-container에서 max-height가 원래 calc()를 썼던 게 계산된 값으로 바뀌었더라 이런 것도 스크롤이 없어지거나 다른 요소에서 깨지는 이유 정 하나일 거 같아

[폭진이(miraed)]

https://send.mni.li/download/9f3bb2f3a3e6517e/#3rHNbedrX88muPz2fk04Cw

[호선이(solar3258)]

근데 굳이 웨이백머신처럼 안 하고 저렇게 하고 싶은 이유가 있어?

[폭진이(miraed)]

JS안씀 Tor 운영할때 좋음

[호선이(solar3258)]

@폭진이 아 맞긴 하네

[호선이(solar3258)]

위키백과 고침 main#content에서 grid-template-rows(columns)가 원래 min-content min-content min-content 1fr처럼 돼있었는데 이게 계산된 값으로 바뀌어서 그랬어 원래 식 값으로 바꾸니까 안 깨지고 잘 나와

[호선이(solar3258)]

div.mw-page-container-inner도 같은 현상

[폭진이(miraed)]

@호선이 파일좀 보자

[호선이(solar3258)]

@폭진이
수정된 부분은 원본 주석처리했고 Articls, Read 탭 밑에 선이 없는 건 :after pseudo element가 사라져서 그래
https://send.mni.li/download/8ba7717aa97120e4/#6mSZUvQ6mYf9jjq8awPGYg

[폭진이(miraed)]

잘고치네

[호선이(solar3258)]

디시는 그냥 스타일시트를 다 못 긁어온 거 같은데 그냥 css 속성들이 다 누락됐어

[폭진이(miraed)]

다른 JS로 실행한거 가져올게

[호선이(solar3258)]

@폭진이 ㅇㅋ

[폭진이(miraed)]

https://send.mni.li/download/dfae3fe39d53647f/#OpTImypHrL2CkdM8ZIRhQA

[폭진이(miraed)]

위키는
https://archive.md/8BK19
그나마 2023년꺼가 비슷하게 나오고 지금 1024x768 형태로 나와서 다른게 나옴

[호선이(solar3258)]

@폭진이 위키백과는 밑에 표가 아까보다 더 깨졌네 grid처럼 일부 속성만 기존처럼 해야 할 수도?

[호선이(solar3258)]

@폭진이 디시 위에 파란 내비바에서 '갤러리' 마지막 글자가 줄바꿈되는 건 바로 상위(parent) 요소에 원래 전혀 없던 width 스타일이 생겨서 그런 거 같은데 거기 말고 페이지 전체적으로 다 그렇게 돼 있어

[폭진이(miraed)]

[폭진이(miraed)]

이게 다른코드 작동시키면 누구는 스타일 누락하고 누구는 깨지고

[호선이(solar3258)]

ㄷ

[폭진이(miraed)]

첨에 JS 직접 작성했는데 AI한테 수정 해달라고 하니 전부 수정하더라

[호선이(solar3258)]

@폭진이 ㄷㄷ

[폭진이(miraed)]

코드 볼래?

[호선이(solar3258)]

@폭진이 궁금하긴 한데 내가 도움 줄만한 게 있으려나...

[폭진이(miraed)]

@호선이 어차피 작동 안하는 사이트 ㅈㄴ많아서 상관없음

[폭진이(miraed)]

@호선이
https://send.mni.li/download/68d0a7d8d8173b2f/#8jLMH7VrmqKVEvc5F7lZ6g

[호선이(solar3258)]

@폭진이 디시인사이드 깨지는 건 document.styleSheets의 cssRules 일부가 cross-origin 보안 때메 'SecurityError: The operation is insecure.' 떠서 그런 거 같은데 한 번 직접 다시 해당 css를 불러와서 파싱하는 게 되나 해볼게

[호선이(solar3258)]

그냥 궁금한데 await가 없는데 async 함수인 이유가 있어? 작동 중에 프리징 되는 건 똑같던데... 그리고 함수 안에 다른 함수 정의나 화이트리스트같은 고정된 값을 넣는 건 개인적으로 비추천

[폭진이(miraed)]

@호선이 그런가?

[호선이(solar3258)]

@폭진이 일단 해보고 되나 알려줄게

[호선이(solar3258)]

@폭진이 일단 디시 반은 두 가지 방법으로 해결했어 근데 파이어폭스 계열 내비게이터만 가능해 첫째는 fetch로 블락된 css 화일을 직접 읽어와서 cssRules를 뽑아올 수 있어 근데 about:config에서 content.cors.disable, content.cors.bypass_preflight_request를 true로 바꿔줘야 돼 둘째는 그냥 xpcom (privileged javascript) 레벨에서 현재 탭의 document 객체에 접근하면 저 SecurityError가 안 나고 바로 cssRules에 접근할 수 있어 (const contentDocument = gBrowser.getBrowserForTab(gBrowser.selectedTab).contentDocument;)

[폭진이(miraed)]

@폭진이 빡세네 근데 웹 아카이브는 특정 사이트만 작동 시키면 문제있고 범용적으로 써야함 어렵네

[호선이(solar3258)]

@폭진이 저 cross origin 제한을 우회하는 게 좀 어려울 거 같은데 브라우저 확장 프로그램으로 실행하면 모르겠지만

[폭진이(miraed)]

내가 자바스크립트 잘하는거 아닌데 ㅈㄴ어렵네

[폭진이(miraed)]

@호선이
https://archive-is.tumblr.com/post/658456222842978304/will-the-code-ever-become-open-source-id-like-to

[호선이(solar3258)]

오픈소스 되긴 어려울 거 같네

[호선이(solar3258)]

@폭진이 아 그냥 js 관련 팁 주자면 catch에서 오류 매개변수 안 쓰면 그냥 'try { ... } catch { ... }'처럼 써도 돼 난 구형 node.js 등의 환경 호환성 때문에 매개변수 안 써도 그냥 catch(e) 하는 편이긴 한데 밑줄 문자 쓰길래

[폭진이(miraed)]

[폭진이(miraed)]

구현하지 어렵지
https://archive.md/QLzjg

[호선이(solar3258)]

@폭진이 ㄹㅇ 진짜 정교하던데

[호선이(solar3258)]

@폭진이 근데 아까 내가 grid 관련 속성에서 식 대신 계산된 값을 가져와서 깨진다고 말했는데 생각해보면 archive.today가 고정된 화면 너비에 높이는 페이지 실제 높이대로 고정해서 아카이빙해서 문제가 덜할 수 있던 게 아닐까 해

[폭진이(miraed)]

@호선이 얘네 div 에 id=CONTENT 보면 넓이는 고정시키고 높이는 사이트 최대 높이 계산해서 박아버림

[호선이(solar3258)]

@폭진이 ㄱㄴㄲ

[폭진이(miraed)]

@호선이 쟤 걍 능력자 같은데 배우고싶네

[호선이(solar3258)]

@폭진이 나도 한번 해보려고 하는데 지금 목표가 archive.today처럼 고정된 너비, 전체 높이대로 하는 거야, 아니면 그냥 내비게이터 창에 맞춰서 유동적으로 변할 수 있는 거야?

[폭진이(miraed)]

@호선이 내부는 유동적으로 일부는 변경함 스타일마다 다름 불필요한 스타일 최소화하고 최대한 잘보이게 만듬 크기는 1024x768임

[호선이(solar3258)]

@폭진이 ㅇㅋㅇㅋ 근데 아무 브라우저에서나 실행 가능하게 할 수 있는 게 목표지? 계속 방법을 찾아보고 있긴 한데 xpcom 레벨에서 접근하는 거 말고 CSSStyleSheet#cssRules를 cross-origin 때메 접근 못하니까 다른 방법을 생각해봐야 할 거 같은데

[호선이(solar3258)]

상관없으면 처음에 직접 짰던 것도 보여줄 수 있어? 그냥 궁금해서 그런 것도 있긴 한데

[폭진이(miraed)]

@호선이 단순하고 무식함 그냥 모든 스타일 불러와서 사용함

[호선이(solar3258)]

@폭진이 좀 오랫동안 해보니까 음... getComputedStyle를 모든 속성에 쓰는 건 고정 너비에 적합할 것 갖고 유동 너비로 하려면 원래 css에 정의된 값(calc나 auto가 포함된 거)를 쓰는 게 좋을 거 같아 근데 이렇게 하면 인라인화 시 css에서 var(--xxx)를 쓰는 게 제대로 안 될테니까 이 부분만 따로 계산해서 넣어야겠고...(아니면 변수를 루트 요소 인라인 스타일에 넣거나)

[호선이(solar3258)]

아니면 아까 디시 덜 깨졌던 버전(압축화일에 dc.html이랑 wiki.html 넣은 거) 코드 보내줄 수 있어? 그거 꽤 나쁘지 않았던 거 같은데

[폭진이(miraed)]

@호선이 맞는지 모르겠네

[호선이(solar3258)]

@폭진이 margin: 0 auto같은 게 있으면 아카이빙 당시 브라우저 창 크기에 맞춰서 상수로 저장돼서 창 크기를 늘려도 가운데 정렬이 안 되더라

[호선이(solar3258)]

@폭진이 나중에 더 발전되면 한 번 더 아카이빙 결과 예제 공유해줘 오늘 저녁 때 보내준 소스 보면서 계속 이거 연구하니까 피곤해짐..ㅋㅋ... ㅎㅇㅌ!

[호선이(solar3258)]

@폭진이 아 참고로 아카이브기 내가 직접 처음부터 다시 작성해본 버전도 있는데 돌아는 가는데 엄청나게 느림 ㅋㅋㅋ;

[폭진이(miraed)]

@호선이
https://www.tumblr.com/archive-is/103277332561
아마 JS 사용한거 맞을꺼임 이건 팬텀JS 시절임

[호선이(solar3258)]

@폭진이 ㄷㄷ