Created
March 28, 2020 11:21
-
-
Save righteous-coder/3197e0082adaebffcb3a29fea5d5eec2 to your computer and use it in GitHub Desktop.
Qiitaのユーザーページにナビゲーションタブを追加するUserScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Qiita User Page Nav | |
// @namespace http://tampermonkey.net/ | |
// @version 0.1 | |
// @description Adds an navigation tab on user pages | |
// @author righteous | |
// @match https://qiita.com/* | |
// @grant none | |
// ==/UserScript== | |
!(function () { | |
const targetClassPrefixes = [ | |
'UserMain__ContentsContainer', | |
'UserLgtms__ContentsContainer', | |
'UserFollowees__ContentsContainer', | |
'UserComments__ContentsContainer', | |
'UserEditRequests__ContentsContainer', | |
] | |
const selector = targetClassPrefixes.map(c => `[class^="${c}"],[class*=" ${c}"]`).join(',') | |
const containerDOM = document.querySelector(selector) | |
if (!containerDOM) return | |
const [username, curPage = ''] = window.location.pathname.split('/').filter(s => s) | |
if (!username) return | |
const pages = [ | |
{ path: '', label: 'マイページ' }, | |
{ path: 'lgtms', label: 'LGTM記事' }, | |
{ path: 'following_users', label: 'フォロー' }, | |
{ path: 'comments', label: 'コメント' }, | |
{ path: 'edit_requests', label: '編集リク' }, | |
] | |
const nav = document.createElement('div') | |
nav.classList.add('qiita-user-page-nav') | |
for (const page of pages) { | |
const linkDOM = document.createElement('a') | |
linkDOM.classList.add('ol-ItemList_tabItem') | |
if (curPage === page.path) { | |
linkDOM.classList.add('is-active') | |
} | |
linkDOM.textContent = page.label | |
linkDOM.href = `/${username}/${page.path}` | |
nav.appendChild(linkDOM) | |
} | |
containerDOM.insertBefore(nav, containerDOM.firstChild) | |
const styleDOM = document.createElement('style') | |
styleDOM.textContent = ` | |
.qiita-user-page-nav { | |
background-color: white; | |
display: flex; | |
padding-top: 15px; | |
margin-bottom: 10px; | |
} | |
@media (max-width: 770px) { | |
.qiita-user-page-nav .ol-ItemList_tabItem { | |
font-size: 8px; | |
} | |
} | |
` | |
document.head.appendChild(styleDOM) | |
})() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment