@brillout/docpress 0.15.13 → 0.16.0

package/EditLink.tsx

@@ -5,28 +5,40 @@ import { usePageContext } from './renderer/usePageContext'
 import { iconPencil } from './icons'
 import { getRepoHref } from './components'
 
-function EditLink({ className, style }: { className?: string; style: React.CSSProperties }) {
+function EditLink({
+  className,
+  style,
+  verbose,
+}: { className?: string; style: React.CSSProperties; verbose?: boolean }) {
   const pageContext = usePageContext()
-  const iconSize = 17
-  const icon = (
-    <img
-      src={iconPencil}
-      width={iconSize}
-      height={iconSize}
-      style={{
-        marginRight: 9,
-        position: 'relative',
-        top: -1,
-      }}
-    />
-  )
+  const iconSize = 13
+  const icon = <img src={iconPencil} width={iconSize} height={iconSize} style={{ marginRight: 6 }} />
   const { urlPathname } = pageContext
   const fsPath = urlPathname === '/' ? '/index/+Page.tsx' : `${urlPathname}/+Page.mdx`
   const docsDir = pageContext.globalContext.config.docpress.docsDir ?? 'docs'
   const editLink = getRepoHref(`/${docsDir}/pages${fsPath}`, true)
   return (
-    <a href={editLink} className={className} style={{ display: 'flex', alignItems: 'center', ...style }}>
-      {icon} Edit this page
+    <a
+      href={editLink}
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        paddingTop: 7,
+        paddingBottom: 7,
+        paddingLeft: 8,
+        paddingRight: 7,
+        border: '1px solid #e0e0e0',
+        borderRadius: 7,
+        fontSize: '0.91em',
+        color: '#6c6c6c',
+        background: '#f8f8f8',
+        letterSpacing: 0.4,
+        lineHeight: 0,
+        ...style,
+      }}
+    >
+      {icon} Edit{verbose ? ' page' : ''}
     </a>
   )
 }

package/ExternalLinks.tsx

@@ -31,6 +31,7 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
         ...props.style,
       }}
     >
+      <LinkIcon className="decolorize-4" icon={iconGithub} href={github} iconSizeBoost={1} />
       {iconI18n}
       {discord && <LinkIcon className="decolorize-6" icon={iconDiscord} href={discord} />}
       {twitter && <LinkIcon className="decolorize-4" icon={iconTwitter} href={`https://x.com/${twitter.slice(1)}`} />}
@@ -38,7 +39,6 @@ function ExternalLinks(props: { style?: React.CSSProperties }) {
       {linkedin && (
         <LinkIcon className="decolorize-6" icon={iconLinkedin} href={`https://www.linkedin.com/company/${linkedin}`} />
       )}
-      <LinkIcon className="decolorize-4" icon={iconGithub} href={github} />
       {changelog !== false && <ChangelogButton />}
     </div>
   )
@@ -54,7 +54,7 @@ function ChangelogButton() {
       style={{
         display: 'flex',
         alignItems: 'center',
-        padding: '0 5px',
+        padding: '0 3px',
         height: '100%',
       }}
     >
@@ -63,28 +63,51 @@ function ChangelogButton() {
         style={{
           display: 'flex',
           alignItems: 'center',
-          padding: '2px 10px',
+          paddingLeft: 8,
+          paddingRight: 8,
+          paddingTop: 4,
+          paddingBottom: 5,
           fontSize: '0.97em',
+          lineHeight: 0,
         }}
       >
-        <span id="version-number" className="decolorize-7">
+        <span
+          id="version-number"
+          className="decolorize-7"
+          style={{
+            position: 'relative',
+            top: 1,
+            color: 'var(--color-text)',
+          }}
+        >
           v{version}
         </span>
-        <img className="decolorize-6" src={iconChangelog} height={16} style={{ marginLeft: 6 }} />
+        <img
+          className="decolorize-6"
+          src={iconChangelog}
+          height={16}
+          style={{ marginLeft: 6, position: 'relative', top: 1 }}
+        />
       </div>
     </a>
   )
 }
 
-function LinkIcon({ className, icon, href, style }: { className: string; icon: string; href: string; style?: any }) {
+function LinkIcon({
+  className,
+  icon,
+  href,
+  style,
+  iconSizeBoost = 0,
+}: { className: string; icon: string; href: string; style?: any; iconSizeBoost?: number }) {
   return (
     <>
       <a
         className="colorize-on-hover"
         href={href}
-        style={{ padding: 5, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' }}
+        style={{ padding: 3, display: 'inline-flex', lineHeight: 0, height: '100%', alignItems: 'center' }}
       >
-        <img className={className} src={icon} height="20" style={style} />
+        <img className={className} src={icon} height={18 + iconSizeBoost} style={style} />
       </a>
     </>
   )

package/Layout.css

@@ -0,0 +1,4 @@
+body {
+  background: var(--color-bg-white);
+  --color-bg-white: #fdfdfd;
+}