Merge pull request #50 from sippy-platform/docs

Docs

.fantasticonrc.js

@@ -6,26 +6,20 @@ module.exports = {
   inputDir: "./icons",
   outputDir: "./font",
   fontTypes: ["woff", "woff2"],
-  assetTypes: ["scss", "html", "json"],
+  assetTypes: ["scss", "json"],
   fontsUrl: "./fonts",
   name: "Valkyrie",
   prefix: "vi",
   selector: ".vi",
   codepoints,
   descent: 26,
   templates: {
-    html: "./templates/html.hbs",
-    css: "./templates/css.hbs",
-    scss: "./templates/css.hbs",
+    scss: "./build/templates/scss.hbs",
   },
   pathOptions: {
-    eot: "./font/fonts/Valkyrie.eot",
-    ttf: "./font/fonts/Valkyrie.ttf",
     woff: "./font/fonts/Valkyrie.woff",
     woff2: "./font/fonts/Valkyrie.woff2",
-    css: "./font/Valkyrie.css",
     scss: "./font/Valkyrie.scss",
-    html: "./docs/index.html",
     json: "./font/valkyrie.json",
   },
 };

.gitignore

@@ -1,2 +1,6 @@
-/node_modules
-/dist
+.DS_Store
+/.hugo_build.lock
+/_site/
+/node_modules/
+/resources/
+/dist/

build/generate-pages.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const fs = require('fs').promises
+const path = require('path')
+const picocolors = require('picocolors')
+
+const iconsDir = path.join(__dirname, '../icons/')
+const pagesDir = path.join(__dirname, '../docs/content/icons/')
+
+const VERBOSE = process.argv.includes('--verbose')
+
+function capitalizeFirstLetter(string) {
+  return (string.charAt(0).toUpperCase() + string.slice(1)).split('-').join(' ')
+}
+
+async function main(file) {
+  const iconBasename = path.basename(file, path.extname(file))
+  const iconTitle = capitalizeFirstLetter(iconBasename)
+  const pageName = path.join(pagesDir, `${iconBasename}.md`)
+
+  const pageTemplate = `---
+title: ${iconTitle}
+categories:
+tags:
+---
+`
+
+  try {
+    await fs.access(pageName, fs.F_OK)
+
+    if (VERBOSE) {
+      console.log(`☑️ ${picocolors.cyan(iconBasename)}: Already exists, skipping`)
+    }
+  } catch {
+    await fs.writeFile(pageName, pageTemplate)
+    console.log(`✅ ${picocolors.cyan(iconBasename)}: ${picocolors.green('Page created')}`)
+  }
+}
+
+(async () => {
+  try {
+    const timeLabel = picocolors.cyan(`Page generation finished`)
+
+    console.log(picocolors.cyan(`Page generation started`))
+    console.time(timeLabel)
+
+    const files = await fs.readdir(iconsDir)
+
+    await Promise.all(files.map(file => main(file)))
+
+    const filesLength = files.length
+
+    console.log(picocolors.green('\nSuccess, %s page%s created!'), filesLength, filesLength !== 1 ? 's' : '')
+    console.timeEnd(timeLabel)
+  } catch (error) {
+    console.error(error)
+    process.exit(1)
+  }
+})()

config.yml

@@ -0,0 +1,58 @@
+languageCode:           "en"
+title:                  "Valkyrie"
+baseURL:                "https://sippy-platform.github.io/valkyrie"
+enableInlineShortcodes: true
+enableRobotsTXT:        true
+metaDataFormat:         "yaml"
+disableKinds:           ["404", "taxonomy", "term", "RSS"]
+
+publishDir:             "_site"
+
+security:
+  enableInlineShortcodes: true
+  funcs:
+    getenv:
+      - ^HUGO_
+
+markup:
+  goldmark:
+    renderer:
+      unsafe:           true
+  highlight:
+    noClasses:          false
+
+module:
+  mounts:
+    - source:           docs/assets
+      target:           assets
+    - source:           docs/content
+      target:           content
+    - source:           docs/data
+      target:           data
+    - source:           docs/layouts
+      target:           layouts
+    - source:           docs/static
+      target:           static
+    - source:           docs/static/assets/img/favicons/apple-touch-icon.png
+      target:           static/apple-touch-icon.png
+    - source:           docs/static/assets/img/favicons/favicon.png
+      target:           static/favicon.png
+    - source:           valkyrie.svg
+      target:           static/valkyrie.svg
+    - source:           icons
+      target:           static/assets/icons
+    - source:           font
+      target:           static/assets/font
+    - source:           node_modules/bootstrap/scss
+      target:           assets/scss/bootstrap
+
+params:
+  description:          "Open source SVG icon library from Sippy"
+  social_image_path:    /assets/img/valkyrie-social.png
+
+  version:              "0.21.1"
+
+  main:                 "https://sippy.cloud"
+  github_org:           "https://github.com/sippy-platform"
+  repo:                 "https://github.com/sippy-platform/valkyrie"
+  icons_figma:          "https://www.figma.com/community/file/1164522380895285426"

docs/assets/scss/_buttons.scss

@@ -0,0 +1,13 @@
+.btn-primary {
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--vd-blue);
+  --bs-btn-border-color: var(--vd-blue);
+  --bs-btn-border-radius: .5rem;
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($vd-blue, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($vd-blue, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--vd-blue-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($vd-blue, 20%)};
+  --bs-btn-active-border-color: #{shade-color($vd-blue, 20%)};
+}

docs/assets/scss/_navbar.scss

@@ -0,0 +1,40 @@
+.navbar {
+  padding: .75rem 0;
+  background-color: var(--vd-blue);
+  height: 64px;
+
+  .navbar-toggler {
+    padding: 0;
+    margin-right: -.5rem;
+    border: 0;
+
+    &:first-child {
+      margin-left: -.5rem;
+    }
+
+    .vi {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .nav-link {
+    padding-right: $spacer * .25;
+    padding-left: $spacer * .25;
+    color: rgba($white, .85);
+
+    &:hover,
+    &:focus {
+      color: $white;
+    }
+
+    &.active {
+      font-weight: 600;
+      color: $white;
+    }
+  }
+}