Move Octicons website into primer/octicons repo (#377)

* Scaffold docs site * Display icons on homepage * Import json file directly * Remove sidebar * Update doctocat * Remove example pages * Disable search on hompage * Create pages for each icon * Implement search * Add aria-label to search input * Fix icon viewer * Add start script * Remove README * Move index page to content directory
primer · Mar 6, 2020 · e4f54e4 · e4f54e4 · vercel · Mar 6, 2020
1 parent 078e2f9
commit e4f54e4
Show file tree

Hide file tree

Showing 13 changed files with 21,216 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,10 @@ vendor
 
 # Ignore build/export artifacts
 lib/**/build/
+
+# Gatsby
+public
+.cache
+
+# Now
+.now
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:github/recommended", "plugin:github/es6", "plugin:github/react"]
+}
diff --git a/docs/content/index.mdx b/docs/content/index.mdx
@@ -0,0 +1,39 @@
+import {Flex, Link, TextInput} from '@primer/components'
+import {Container, Head, Header, Hero} from '@primer/gatsby-theme-doctocat'
+import {Search} from '@primer/octicons-react'
+import icons from '../../lib/build/data.json'
+import Icon from '../src/components/icon'
+import useSearch from '../src/use-search'
+
+export default function IndexPage() {
+  const [query, setQuery] = React.useState('')
+  const iconsArray = React.useMemo(() => Object.values(icons), [icons])
+  const results = useSearch(iconsArray, query, {keys: ['name']})
+  return (
+    <Flex flexDirection="column" minHeight="100vh">
+      <Head />
+      <Header isSearchEnabled={false} />
+      <Hero />
+      <Container>
+        <TextInput
+          icon={Search}
+          aria-label="Search"
+          value={query}
+          onChange={event => setQuery(event.target.value)}
+          placeholder="Search icons..."
+          width="100%"
+          mb={5}
+        />
+        <Flex flexWrap="wrap" m={-3}>
+          {results.map(icon => (
+            <Link key={icon.name} display="block" p={3} color="inherit" href={icon.name}>
+              <Flex>
+                <Icon name={icon.name} />
+              </Flex>
+            </Link>
+          ))}
+        </Flex>
+      </Container>
+    </Flex>
+  )
+}
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  siteMetadata: {
+    title: 'Octicons',
+    shortName: 'Octicons',
+    description: "Your project. GitHub's icons.",
+    imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png'
+  },
+  pathPrefix: '/octicons',
+  plugins: [
+    {
+      resolve: '@primer/gatsby-theme-doctocat',
+      options: {
+        repoRootPath: '..'
+      }
+    }
+  ]
+}
diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
@@ -0,0 +1,14 @@
+const path = require('path')
+const icons = require('../lib/build/data.json')
+
+exports.createPages = async ({actions}) => {
+  const iconPageTemplate = path.resolve(__dirname, 'src/templates/icon-page.mdx')
+
+  for (const icon of Object.values(icons)) {
+    actions.createPage({
+      path: icon.name,
+      component: iconPageTemplate,
+      context: {name: icon.name}
+    })
+  }
+}