Merge pull request #17 from jasikpark/main

Implement basic AvatarList.astro

README.md

@@ -4,7 +4,7 @@
 
 ### Pull Requests
 
-Every pull requests needs to be reviewed by another contributor to the documentations to help with the overall quality of the documentation.
+Every pull request needs to be reviewed by another contributor to the documentation to help with the overall quality of the documentation.
 
 ## Running this project
 
@@ -13,3 +13,5 @@ Every pull requests needs to be reviewed by another contributor to the documenta
 - Run `yarn install` to install latest dependencies.
 - Run `yarn start` to start the dev server.
 - Run `yarn build` to build the final site for production.
+
+The environment variable `SNOWPACK_PUBLIC_GITHUB_TOKEN` must be set to a personal access token with `public_repo` permissions to prevent rate-limiting.

package.json

@@ -7,6 +7,7 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.14.1"
+    "astro": "^0.14.1",
+    "@snowpack/plugin-dotenv": "^2.1.0"
   }
 }

snowpack.config.mjs

@@ -3,4 +3,5 @@ export default {
     components: './src/components',
     '~': './src',
   },
+  plugins: ['@snowpack/plugin-dotenv'],
 };

src/components/ArticleFooter.astro

@@ -1,9 +1,10 @@
 ---
+export let path;
 import AvatarList from './AvatarList.astro';
 ---
 
 <footer>
-  <AvatarList />
+  <AvatarList path={path} />
 </footer>
 
 <style>

src/components/AvatarList.astro

@@ -1,10 +1,71 @@
+---
+export let path;
+// fetch all commits for just this page's path
+const url = `https://api.github.com/repos/snowpackjs/astro-docs/commits?path=${path}`;
+
+async function getCommits(url) {
+  try {
+    const token =
+      import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ??
+      console.log(
+        'You might not have "SNOWPACK_PUBLIC_GITHUB_TOKEN added for escaping rate-limiting.'
+      );
+
+    const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
+
+    const res = await fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: auth,
+        "User-Agent": "astro-docs/1.0",
+      },
+    });
+
+    const data = res.ok
+      ? await res.json()
+      : console.log(
+          'You might not have "SNOWPACK_PUBLIC_GITHUB_TOKEN and may have been rate-limited.'
+        );
+
+    return data;
+  } catch (e) {
+    console.warn(`Error: ${e}`);
+    return new Array();
+  }
+}
+
+function removeDups(arr) {
+  if (!arr) {
+    return new Array();
+  }
+  let map = new Map();
+
+  for (let item of arr) {
+    let author = item.author;
+    // Deduplicate based on author.id
+    map.set(author.id, { login: author.login, id: author.id });
+  }
+
+  return Array.from(map.values());
+}
+
+const data = await getCommits(url);
+const unique = removeDups(data);
+const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors
+const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors
+
+---
 <!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
+<div class="contributors">
+<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
 
-<ul class="avatar-list">
-  <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 1" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairBun&accessoriesType=Blank&hairColor=Auburn&facialHairType=BeardMedium&facialHairColor=Auburn&clotheType=ShirtCrewNeck&clotheColor=Blue01&eyeType=Side&eyebrowType=RaisedExcitedNatural&mouthType=Serious&skinColor=Tanned' /></a></li>
-  <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 2" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairDreads&accessoriesType=Blank&hairColor=Brown&facialHairType=Blank&clotheType=ShirtScoopNeck&clotheColor=PastelGreen&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Smile&skinColor=Tanned' /></a></li>
-  <li><a href="https://smolcss.dev/#smol-avatar-list"><img alt="Avatar 3" width="64" height="64" src='https://avataaars.io/?avatarStyle=Transparent&topType=LongHairCurly&hairColor=BrownDark&facialHairType=Blank&clotheType=GraphicShirt&clotheColor=Pink&graphicType=Diamond&eyeType=Side&eyebrowType=Default&mouthType=Default&skinColor=Brown'/></a></li>
-</ul>
+{recentContributors.map((item) => (
+      <li><a href={`https://github.com/${item.login}`}><img alt={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`}/></a></li>
+
+))}
+  </ul>
+  {additionalContributors > 0 && <span>{`and ${additionalContributors} additional contributor${additionalContributors > 1 && 's'}.`}</span>}
+</div>
 
 <style>
 .avatar-list {
@@ -71,4 +132,13 @@
   /* Double-layer trick to work for dark and light backgrounds */
   box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
 }
+
+.contributors {
+  display: flex;
+  align-items: center;
+}
+
+.contributors > * + * {
+  margin-left: .75rem;
+}
 </style>

src/layouts/Main.astro

@@ -8,7 +8,11 @@ export let content;
 const headers = content?.astro?.headers;
 let editHref = Astro?.request?.url?.pathname?.slice(1) ?? '';
 if (editHref === '') editHref = `index`;
-editHref = `https://github.com/snowpackjs/astro/tree/main/examples/doc/src/pages/${editHref}.md`
+editHref = `https://github.com/snowpackjs/astro-docs/blob/main/src/pages/${editHref}.md`
+let filePath = Astro?.request?.url?.pathname?.slice(1) ?? '';
+if (filePath === '') { filePath = `index`; }
+filePath = filePath.replace(/\/$/, ""); 
+filePath = `src/pages/${filePath}.md`;
 ---
 
 <html lang="{content.lang ?? 'en-us'}">
@@ -224,7 +228,7 @@ editHref = `https://github.com/snowpackjs/astro/tree/main/examples/doc/src/pages
             <h1>{content.title}</h1>
             <slot />
           </main>
-          <ArticleFooter />
+          <ArticleFooter path={filePath} />
         </article>
       </div>
       <aside class="sidebar" id="sidebar-content">

yarn.lock

@@ -247,6 +247,14 @@
     retext-smartypants "^4.0.0"
     unist-util-visit "^2.0.1"
 
+"@snowpack/plugin-dotenv@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@snowpack/plugin-dotenv/-/plugin-dotenv-2.1.0.tgz#dac77007bf657f999d222318506a850fd7d16875"
+  integrity sha512-NvwB+kQuxKheZLWrRvOgXB8i0cXhuIkljbgCn02fRGCIOigPIDk1jZrnn3x9skqqtul/XvW9dNulVi6Fa7CN6g==
+  dependencies:
+    dotenv "^8.2.0"
+    dotenv-expand "^5.1.0"
+
 "@snowpack/plugin-postcss@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@snowpack/plugin-postcss/-/plugin-postcss-1.4.1.tgz#21aa7b0633204d60bf3a82a956964d641f172ffa"
@@ -1046,6 +1054,16 @@ domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
+dotenv@^8.2.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
+  integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -1060,9 +1078,9 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 electron-to-chromium@^1.3.723:
-  version "1.3.755"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.755.tgz#4b6101f13de910cf3f0a1789ddc57328133b9332"
-  integrity sha512-BJ1s/kuUuOeo1bF/EM2E4yqW9te0Hpof3wgwBx40AWJE18zsD1Tqo0kr7ijnOc+lRsrlrqKPauJAHqaxOItoUA==
+  version "1.3.754"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.754.tgz#afbe69177ad7aae968c3bbeba129dc70dcc37cf4"
+  integrity sha512-Q50dJbfYYRtwK3G9mFP/EsJVzlgcYwKxFjbXmvVa1lDAbdviPcT9QOpFoufDApub4j0hBfDRL6v3lWNLEdEDXQ==
 
 emoji-regex@^9.2.2:
   version "9.2.2"