github · keithamus · Mar 5, 2021 · Mar 5, 2021 · Mar 5, 2021 · Mar 5, 2021
@@ -1,2 +1,101 @@
 # github-elements
+
 GitHub's Web Component collection.
+
+We have 16 open source custom elements:
+
+### [github/auto-check-element](https://github.com/github/auto-check-element)
+
+An input element that validates its value with a server endpoint.
+
+[Link](https://github.com/github/auto-check-element)
+
+### [github/auto-complete-element](https://github.com/github/auto-complete-element)
+
+Auto-complete input values from server search results.
+
+[Link](https://github.com/github/auto-complete-element)
+
+### [github/clipboard-copy-element](https://github.com/github/clipboard-copy-element)
+
+Copy element text content or input values to the clipboard.
+
+[Link](https://github.com/github/clipboard-copy-element)
+
+### [github/details-dialog-element](https://github.com/github/details-dialog-element)
+
+A modal dialog that&#39;s opened with &lt;details&gt;.
+
+[Link](https://github.com/github/details-dialog-element)
+
+### [github/details-menu-element](https://github.com/github/details-menu-element)
+
+A menu opened with &lt;details&gt;.
+
+[Link](https://github.com/github/details-menu-element)
+
+### [github/file-attachment-element](https://github.com/github/file-attachment-element)
+
+Attach files via drag and drop or file input.
+
+[Link](https://github.com/github/file-attachment-element)
+
+### [github/filter-input-element](https://github.com/github/filter-input-element)
+
+Display elements in a subtree that match filter input text.
+
+[Link](https://github.com/github/filter-input-element)
+
+### [github/g-emoji-element](https://github.com/github/g-emoji-element)
+
+Backports native emoji characters to browsers that don&#39;t support them by replacing the characters with fallback images.
+
+[Link](https://github.com/github/g-emoji-element)
+
+### [github/image-crop-element](https://github.com/github/image-crop-element)
+
+A custom element for cropping a square image. Returns x, y, width, and height.
+
+[Link](https://github.com/github/image-crop-element)
+
+### [github/include-fragment-element](https://github.com/github/include-fragment-element)
+
+A client-side includes tag.
+
+[Link](https://github.com/github/include-fragment-element)
+
+### [github/markdown-toolbar-element](https://github.com/github/markdown-toolbar-element)
+
+Markdown formatting buttons for text inputs.
+
+[Link](https://github.com/github/markdown-toolbar-element)
+
+### [github/remote-input-element](https://github.com/github/remote-input-element)
+
+An input element that sends its value to a server endpoint and renders the response body.
+
+[Link](https://github.com/github/remote-input-element)
+
+### [github/tab-container-element](https://github.com/github/tab-container-element)
+
+An accessible tab container element with keyboard support.
+
+[Link](https://github.com/github/tab-container-element)
+
+### [github/task-lists-element](https://github.com/github/task-lists-element)
+
+Drag and drop task list items.
+
+[Link](https://github.com/github/task-lists-element)
+
+### [github/text-expander-element](https://github.com/github/text-expander-element)
+
+Activates a suggestion menu to expand text snippets as you type.
+
+[Link](https://github.com/github/text-expander-element)
+
+### [github/time-elements](https://github.com/github/time-elements)
+
+Web component extensions to the standard &lt;time&gt; element.
+
+[Link](https://github.com/github/time-elements)
@@ -26,4 +26,4 @@
     "remote-input-element": "github/remote-input-element",
     "time-elements": "github/time-elements"
   }
-}
+}
@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+import {request} from 'https'
+import {readFileSync, writeFileSync} from 'fs'
+const escapeMap = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  "'": '&#39;',
+  '"': '&#quot;',
+}
+function escape(str) {
+  let newStr = ''
+  for(const char of str) newStr += char in escapeMap ? escapeMap[char] : char
+  return newStr
+}
+
+function json(url) {
+  return new Promise((resolve, reject) => {
+    const req = request(url, {
+      headers: {
+        'User-Agent': `nodejs ${process.version}`,
+        'Authorization': `Bearer ${process.env['GITHUB_TOKEN']}`,
+        'Accept': 'application/vnd.github.mercy-preview+json'
+      }
+    }, async res => {
+      res.on('error', reject)
+      let body = ''
+      for await (const chunk of res) {
+        body += chunk
+      }
+      resolve(JSON.parse(body))
+    })
+    req.on('error', reject)
+    req.end()
+  })
+}
+
+async function *getRepos() {
+  for(let page = 1; page < 1000; page += 1) {
+    const repos = await json(`https://api.github.com/orgs/github/repos?type=public&per_page=100&page=${page}`)
+    if (!repos.length) return
+    for (const repo of repos) {
+      if (!repo.topics) continue
+      if (repo.private) continue
+      if (repo.fork) continue
+      if (!repo.topics.includes('web-components')) continue
+      if (!repo.topics.includes('custom-elements')) continue
+      yield repo
+    }
+  }
+}
+
+let readme = readFileSync('readme.head.md', 'utf-8')
+const bowerJson = JSON.parse(readFileSync('bower.json', 'utf-8'))
+bowerJson.dependencies = {}
+const packageJson = JSON.parse(readFileSync('package.json', 'utf-8'))
+packageJson.dependencies = {}
+let repos = []
+for await (const repo of getRepos()) {
+  if (repo.full_name === 'github/custom-element-boilerplate') continue
+  repos.push(repo)
+}
+repos.sort((a, b) => a.full_name.localeCompare(b.full_name))
+readme += `
+We have ${repos.length} open source custom elements:
+`
+for (const repo of repos) {
+  bowerJson.dependencies[repo.name] = repo.full_name
+  packageJson.dependencies[`@${repo.full_name}`] = '*'
+  readme += `
+### [${escape(repo.full_name)}](${repo.html_url})
+
+${escape(repo.description)}
+
+[Link](${repo.html_url})
+`
+}
+readme += readFileSync('readme.tail.md', 'utf-8')
+writeFileSync('README.md', readme)
+writeFileSync('bower.json', JSON.stringify(bowerJson, null, 2))
+writeFileSync('package.json', JSON.stringify(packageJson, null, 2))
+
@@ -0,0 +1,36 @@
+{
+  "name": "github-elements",
+  "private": true,
+  "description": "GitHub's Web Component collection.",
+  "keywords": [
+    "element-collection"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/github/github-elements.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "",
+  "scripts": {
+    "generate": "node generate.js"
+  },
+  "dependencies": {
+    "@github/auto-check-element": "*",
+    "@github/auto-complete-element": "*",
+    "@github/clipboard-copy-element": "*",
+    "@github/details-dialog-element": "*",
+    "@github/details-menu-element": "*",
+    "@github/file-attachment-element": "*",
+    "@github/filter-input-element": "*",
+    "@github/g-emoji-element": "*",
+    "@github/image-crop-element": "*",
+    "@github/include-fragment-element": "*",
+    "@github/markdown-toolbar-element": "*",
+    "@github/remote-input-element": "*",
+    "@github/tab-container-element": "*",
+    "@github/task-lists-element": "*",
+    "@github/text-expander-element": "*",
+    "@github/time-elements": "*"
+  }
+}
@@ -0,0 +1,3 @@
+# github-elements
+
+GitHub's Web Component collection.
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,4 +26,4 @@ @@
         "remote-input-element": "github/remote-input-element",
         "time-elements": "github/time-elements"
       }
-    }
+    }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# github-elements

		GitHub's Web Component collection.