Skip to content

Commit

Permalink
"Request an update" badge component (#6)
Browse files Browse the repository at this point in the history
  • Loading branch information
symbolpunk authored Dec 20, 2022
1 parent f72e455 commit 0c754de
Show file tree
Hide file tree
Showing 4 changed files with 265 additions and 37 deletions.
59 changes: 59 additions & 0 deletions src/components/HeaderBadges/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import styles from './styles.module.css';

export const HeaderBadges = ({ commaDelimitedContributors, lastVerifiedDateString, lastVerifiedVersionString }) => {
let githubUsernames = {
Mick: "mick-prysm",
Raul: "rauljordan",
Terence: "terencechain",
James: "james-prysm",
Kasey: "kasey",
Potuz: "potuz",
Nishant: "nisdas"
}

let buildAuthorBadge = function (authorNickname) {
if (authorNickname != "Clarin") {
return (
<a class="header-badge" href={`https://github.com/${githubUsernames[authorNickname]}`}>
<span class="badge-avatar" style={{ backgroundImage: "url('https://avatars.githubusercontent.com/" + githubUsernames[authorNickname] + "')" }}></span>
<span class="badge-label">{authorNickname}</span>
</a>
)
} else {
return (
<a class="header-badge" href='https://www.linkedin.com/in/clarin-dy-239b5616a/'>
<span class="badge-avatar" style={{ backgroundImage: "url('https://i.imgur.com/vhht8qs.jpg')" }}></span>
<span class="badge-label">{authorNickname}</span>
</a>
)
}
}

let buildLastVerifiedBadge = function (dateString) {
if (dateString != null) {
return (
<a class="header-badge">
<span class="badge-avatar emoji-avatar">✔️</span>
<span class="badge-label">Last verified on <strong>{dateString}</strong></span>
</a>
)
}
}

return (
<BrowserOnly>
{() =>
<div class="header-badges">
{(commaDelimitedContributors != null ? commaDelimitedContributors.split(',').map(buildAuthorBadge) : null)}
{buildLastVerifiedBadge(lastVerifiedDateString, lastVerifiedVersionString)}
<a class="header-badge" href={`https://github.com/CoolChainCo/docs/issues/new?title=Docs update request: ${new URL(window.location.href).pathname}&body=Source: ${window.location.href}%0A%0ARequest: (how can we help?)`}>
<span class="badge-avatar emoji-avatar">✏️</span>
<span class="badge-label">Request an update</span>
</a>
</div>
}
</BrowserOnly>
);
};
71 changes: 71 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,77 @@
--ifm-color-primary-lightest: #4fbcdd;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
/* sticking it here for now. todo: experiment with different file/less structures, could simplify this without bloating file structure */
.header-badges {
display: block;
margin-bottom: 15px;
min-height: 35px;
/*pragmatism over perfection*/
}
.header-badges .header-badge {
transition-property: all;
transition-duration: 0.2s;
display: inline-block;
border-radius: 20px;
background-color: #efefef;
padding: 3px 20px 3px 3px;
height: 31px;
margin-right: 6px;
margin-bottom: 5px;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.header-badges .header-badge:hover {
text-decoration: none;
background-color: #e6e6e6;
opacity: 1;
}
.header-badges .header-badge:hover .badge-avatar {
opacity: 1;
}
.header-badges .header-badge:hover .badge-label {
color: #000;
}
.header-badges .header-badge .badge-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition-property: all;
transition-duration: 0.2s;
font-size: 13px;
line-height: 24px;
color: #333;
display: inline-block;
vertical-align: top;
height: 25px;
max-width: calc(100% - 33px);
}
.header-badges .header-badge .badge-avatar {
transition-property: all;
transition-duration: 0.2s;
display: inline-block;
border-radius: 30px;
width: 25px;
height: 25px;
background-size: cover;
margin-right: 12px;
font-size: 12px;
vertical-align: top;
line-height: 23px;
padding-left: 8px;
opacity: 0.7;
}
.header-badges .header-badge .emoji-avatar {
margin-right: 8px !important;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
article .markdown h1:first-child {
font-size: 30px;
}
Expand Down
154 changes: 117 additions & 37 deletions src/css/custom.less
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,138 @@

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #28a0f0;
--ifm-color-primary-dark: #295f78;
--ifm-color-primary-darker: #275771;
--ifm-color-primary-darkest: #20465d;
--ifm-color-primary-light: #337292;
--ifm-color-primary-lighter: #357899;
--ifm-color-primary-lightest: #3c85ad;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--ifm-color-primary: #28a0f0;
--ifm-color-primary-dark: #295f78;
--ifm-color-primary-darker: #275771;
--ifm-color-primary-darkest: #20465d;
--ifm-color-primary-light: #337292;
--ifm-color-primary-lighter: #357899;
--ifm-color-primary-lightest: #3c85ad;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
--ifm-color-primary: #28a0f0;
--ifm-color-primary-dark: #2182af;
--ifm-color-primary-darker: #1f7fa5;
--ifm-color-primary-darkest: #1a6c88;
--ifm-color-primary-light: #29b0d5;
--ifm-color-primary-lighter: #32b4d8;
--ifm-color-primary-lightest: #4fbcdd;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--ifm-color-primary: #28a0f0;
--ifm-color-primary-dark: #2182af;
--ifm-color-primary-darker: #1f7fa5;
--ifm-color-primary-darkest: #1a6c88;
--ifm-color-primary-light: #29b0d5;
--ifm-color-primary-lighter: #32b4d8;
--ifm-color-primary-lightest: #4fbcdd;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

article {
.markdown {

h1:first-child {
font-size: 30px;
}
/* sticking it here for now. todo: experiment with different file/less structures, could simplify this without bloating file structure */
.header-badges {
display: block;
margin-bottom: 15px;
min-height: 35px;
/*pragmatism over perfection*/

.header-badge {
.truncate;
transition-property: all;
transition-duration: 0.2s;
display: inline-block;
border-radius: 20px;
background-color: #efefef;
padding: 3px 20px 3px 3px;
height: 31px;
margin-right: 6px;
margin-bottom: 5px;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;

&:hover {
text-decoration: none;
background-color: #e6e6e6;
opacity: 1;

.badge-avatar {
opacity: 1;
}

.badge-label {
color: #000;
}
}

>h3 {
font-size: 21px;
margin-top: 50px;
margin-bottom: 15px;
}
.badge-label {
.truncate;
transition-property: all;
transition-duration: 0.2s;
font-size: 13px;
line-height: 24px;
color: #333;
display: inline-block;
vertical-align: top;
height: 25px;
max-width: calc(100% ~'-' 33px);
}

li li {
margin-top: 4px;
}
.badge-avatar {
transition-property: all;
transition-duration: 0.2s;
display: inline-block;
border-radius: 30px;
width: 25px;
height: 25px;
background-size: cover;
margin-right: 12px;
font-size: 12px;
vertical-align: top;
line-height: 23px;
padding-left: 8px;
opacity: 0.7;
}

.emoji-avatar {
margin-right: 8px !important;
}
}
}

.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 736px) {
.markdown h1:first-child {
font-size: 24px;
article {
.markdown {

h1:first-child {
font-size: 30px;
}

.markdown>h3 {
font-size: 18px;
margin-top: 35px;
margin-bottom: 10px;
>h3 {
font-size: 21px;
margin-top: 50px;
margin-bottom: 15px;
}

li li {
margin-top: 4px;
}
}


}

@media (max-width: 736px) {
.markdown h1:first-child {
font-size: 24px;
}

.markdown>h3 {
font-size: 18px;
margin-top: 35px;
margin-bottom: 10px;
}
}
18 changes: 18 additions & 0 deletions src/theme/DocItem/Content/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import Content from '@theme-original/DocItem/Content';
import { HeaderBadges } from '@site/src/components/HeaderBadges';


export default function ContentWrapper(props) {
return (
<>
<HeaderBadges />
<Content {...props} />
</>
);
}

// This file was generated via `yarn swizzle @docusaurus/theme-classic DocItem/Content` - I selected `wrap` when prompted and then imported & injected the `HeaderBadges` widget. Lines :3 and :9 are the only additions I made.
// docs -> https://docusaurus.io/docs/next/swizzling#wrapping
// other docs -> https://docusaurus.io/docs/next/markdown-features/react#mdx-component-scope
// note that the "other docs" recommend wrapping `@theme/MDXComponents` but this is no longer possible as of docusaurus v2.

0 comments on commit 0c754de

Please sign in to comment.