Merge pull request #196 from LuxDL/la/author_badge

author badge
LuxDL · Jan 10, 2025 · 69acada · 69acada
2 parents 7f6bab5 + e3b401e
commit 69acada
Show file tree

Hide file tree

Showing 8 changed files with 523 additions and 2 deletions.
diff --git a/docs/make.jl b/docs/make.jl
@@ -49,7 +49,7 @@ makedocs(;
             "Updating to DocumenterVitepress" => "documenter_to_vitepress_docs_example.md",
             "DocumenterCitations integration" => "citations.md",
             "CSS Styling" => "style_css.md",
-
+            "Authors' badge" => "author_badge.md",
         ],
         "Developers' documentation" => [
             "The rendering process" => "render_pipeline.md",

diff --git a/docs/src/.vitepress/theme/index.ts b/docs/src/.vitepress/theme/index.ts
@@ -4,7 +4,8 @@ import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import AsideTrustees from '../../components/AsideTrustees.vue'
 import VersionPicker from "../../components/VersionPicker.vue"
-
+import AuthorBadge from '../../components/AuthorBadge.vue'
+import Authors from '../../components/Authors.vue'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import './style.css'
 
@@ -19,5 +20,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     enhanceAppWithTabs(app);
     app.component('VersionPicker', VersionPicker);
+    app.component('AuthorBadge', AuthorBadge)
+    app.component('Authors', Authors)
   }
 } satisfies Theme
diff --git a/docs/src/author_badge.md b/docs/src/author_badge.md
@@ -0,0 +1,180 @@
+```@raw html
+---
+authors:
+  - name: Jane Smith
+  - name: John Doe
+    platform: bluesky
+  - name: Lazaro
+    avatar: https://avatars.githubusercontent.com/u/19525261?v=4
+    platform: github
+    link: https://github.com/lazarusA
+
+---
+
+## Badges via the frontmatter
+
+<Authors />
+
+```
+
+**Input**
+
+````md
+
+```@raw html
+---
+authors:
+  - name: Jane Smith
+  - name: John Doe
+    platform: bluesky
+  - name: Lazaro
+    avatar: https://avatars.githubusercontent.com/u/19525261?v=4
+    platform: github
+    link: https://github.com/lazarusA
+
+---
+
+## Badges via the frontmatter
+
+<Authors />
+```
+
+````
+
+## `AuthorBadge` and platform icons
+
+You can include an `AuthorBadge` directly anywhere. See examples below.
+
+```@raw html
+<AuthorBadge
+  author="John Doe 2"
+/>
+
+<AuthorBadge
+  author="Isaac"
+  platform="x"
+/>
+
+<AuthorBadge
+  author="Marie"
+  platform="gitlab"
+/>
+
+<AuthorBadge
+  author="Nikola"
+  platform="github"
+/>
+
+<AuthorBadge
+  author="Galileo"
+  platform="linkedin"
+/>
+
+<AuthorBadge
+  author="Ada"
+  platform="bluesky"
+/>
+
+<AuthorBadge
+  author="Jane"
+  platform="mastodon"
+  link="#"
+/>
+```
+
+**Input**
+
+:::tabs
+
+== default
+
+````md
+```@raw html
+<AuthorBadge
+  author="John Doe 2"
+/>
+```
+````
+
+== X
+
+````md
+```@raw html
+<AuthorBadge
+  author="Isaac"
+  platform="x"
+/>
+```
+````
+
+== gitlab
+
+````md
+```@raw html
+<AuthorBadge
+  author="Marie"
+  platform="gitlab"
+/>
+```
+````
+
+== github
+
+````md
+```@raw html
+<AuthorBadge
+  author="Nikola"
+  platform="github"
+/>
+```
+````
+
+== linkedin
+
+````md
+```@raw html
+<AuthorBadge
+  author="Galileo"
+  platform="linkedin"
+/>
+```
+````
+
+== bluesky
+
+````md
+```@raw html
+<AuthorBadge
+  author="Ada"
+  platform="bluesky"
+/>
+```
+````
+
+== mastodon
+
+````md
+```@raw html
+<AuthorBadge
+  author="Jane"
+  platform="mastodon"
+  link="#"
+/>
+```
+````
+
+:::
+
+Icons by [icons8](https://icons8.com).
+
+::: details icons8 license
+
+If you use the default icons, you should provide attribution. Something like:
+
+```md
+Icons by [icons8](https://icons8.com).
+```
+
+see https://icons8.com/license for more info.
+
+:::
diff --git a/docs/src/components/AuthorBadge.vue b/docs/src/components/AuthorBadge.vue
@@ -0,0 +1,139 @@
+<template>
+  <a
+    v-if="link"
+    :href="link"
+    class="badge-link"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <span class="badge-container">
+      <span class="badge-label">Author</span>
+      <span class="author-badge" :style="{ backgroundColor: getColor(author) }">
+        <img :src="getAvatarUrl" :alt="author" :class="{ 'platform-avatar': !props.avatar }" class="author-avatar">
+        {{ author }}
+      </span>
+    </span>
+  </a>
+  <span v-else class="badge-container">
+    <span class="badge-label">Author</span>
+    <span class="author-badge" :style="{ backgroundColor: getColor(author) }">
+      <img :src="getAvatarUrl"  :alt="author" :class="{ 'platform-avatar': !props.avatar }" class="author-avatar">
+      {{ author }}
+    </span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  author: {
+    type: String,
+    required: true
+  },
+  avatar: {
+    type: String,
+    default: ''
+  },
+  platform: {
+    type: String,
+    default: 'user'
+  },
+  link: {
+    type: String,
+    default: ''
+  }
+})
+
+// Platform avatars mapping
+const platformAvatars = {
+  github: 'https://img.icons8.com/ios-filled/50/github.png',
+  gitlab: 'https://img.icons8.com/ios-filled/50/gitlab.png',
+  x: 'https://img.icons8.com/ios/50/twitterx--v2.png',
+  linkedin: 'https://img.icons8.com/ios-filled/50/linkedin.png',
+  bluesky: 'https://img.icons8.com/material-sharp/48/bluesky.png',
+  mastodon: 'https://img.icons8.com/windows/64/mastodon.png',
+  user: 'https://img.icons8.com/windows/64/user.png'
+}
+
+const getAvatarUrl = computed(() => {
+  // If custom avatar is provided, use it
+  if (props.avatar) {
+    return props.avatar
+  }
+  // If platform is specified, use platform avatar
+  if (props.platform && platformAvatars[props.platform.toLowerCase()]) {
+    return platformAvatars[props.platform.toLowerCase()]
+  }
+  // Default to user avatar
+  return platformAvatars.user
+})
+
+// Color function remains the same
+const getColor = (name) => {
+  const colors = [
+    '#3eaf7c', // green
+    '#476582', // blue
+    '#c53e3e', // red
+    '#986801', // orange
+    '#8957e5'  // purple
+  ]
+  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[hash % colors.length]
+}
+</script>
+
+<style scoped>
+.badge-container {
+  display: inline-flex;
+  height: 20px;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 5px;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  vertical-align: middle;
+}
+
+.badge-label {
+  padding: 0 8px;
+  background-color: #555;
+  color: white;
+  display: flex;
+  align-items: center;
+}
+
+.author-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  color: white;
+}
+
+.author-avatar {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  margin-right: 0.25rem;
+  margin-left: -0.25rem;
+}
+.platform-avatar {
+  filter: brightness(0) invert(1);
+}
+.badge-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.badge-link:hover .author-badge {
+  opacity: 0.9;
+}
+
+.badge-link:hover .badge-container {
+  box-shadow: 0 0 0 1.25px rgba(248, 248, 247, 0.4);
+  transition: all 0.2s ease;
+}
+</style>
diff --git a/docs/src/components/Authors.vue b/docs/src/components/Authors.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="authors-container">
+      <AuthorBadge
+        v-for="author in pageAuthors"
+        :key="author.name"
+        :author="author.name"
+        :avatar="author.avatar"
+        :platform="author.platform"
+        :link="author.link"
+      />
+    </div>
+  </template>
+
+  <script setup>
+  import { useData } from 'vitepress'
+  
+  const { frontmatter } = useData()
+  const pageAuthors = frontmatter.value.authors || []
+  </script>
+
+  <style scoped>
+  .authors-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 1rem 0;
+  }
+  </style>
diff --git a/template/src/.vitepress/theme/index.ts b/template/src/.vitepress/theme/index.ts
@@ -3,6 +3,8 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import VersionPicker from "../../components/VersionPicker.vue"
+import AuthorBadge from '../../components/AuthorBadge.vue'
+import Authors from '../../components/Authors.vue'
 
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import './style.css'
@@ -17,5 +19,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     enhanceAppWithTabs(app);
     app.component('VersionPicker', VersionPicker);
+    app.component('AuthorBadge', AuthorBadge)
+    app.component('Authors', Authors)
   }
 } satisfies Theme