spoko-design-system 0.0.1

package/.github/workflows/deploy.yml

@@ -0,0 +1,40 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
+  push:
+    branches: [ ma ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
+  workflow_dispatch:
+
+# Allow this job to clone the repo and create a page deployment
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v3
+      - name: Install, build, and upload your site
+        uses: withastro/action@v1
+        with:
+            pnpm@latest
+          # path: . # The root location of your Astro project inside the repository. (optional)
+          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
+          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

package/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jordi Enric Roig Ramis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Layout/Header.astro

@@ -0,0 +1,89 @@
+---
+import { Icon } from 'astro-icon/components';
+import Search from "astro-pagefind/components/Search";
+// import Search from "components/NavbarSearch.astro";
+import { t } from "i18next";
+const { translation, locale } = Astro.props;
+
+import { Image } from 'astro:assets';
+import vwLogo from './../../../public/vw.svg'
+
+const likes = {
+    list: {
+        ids: [0, 1, 2]
+    }
+}
+---
+<style lang="scss">
+.logo {
+    max-height: 25px;
+    max-width: 25px;
+}
+</style>
+
+
+  <nav class="nav print-hidden" itemscope itemtype="http://schema.org/WPHeader">
+    <div class="mx-auto px-4 shadow-md ">
+    <div class="relative flex items-center justify-between h-24 sm:h-14 flex-wrap pt-1 sm:pt-0">
+        <div class="flex items-center justify-start sm:items-stretch order-1">
+          <div class="flex-shrink-0 flex items-center h-8"  >
+            <a class="flex items-center" href={locale !== 'en' ? `/${locale}/` : '/'} title={t('catalog.title')}>
+              <Image src={vwLogo} alt="VW" width="25" height="25" class="logo mr-2 dark:text-white hover:animate-spin"/>
+              <span class="text-xl brand text-left leading-none dark:text-white">catalog
+                <span class="text-xs block leading-none -mt-0.5 text-lightBlue-500"><strong class="text-black font-400">polo</strong>blue</span>
+              </span>
+            </a>
+          </div>
+          <div class="hidden sm:block sm:ml-6">
+            <div class="flex space-x-4"  itemprop="hasPart">
+              <!-- <a href="https://uk-polos.net/viewforum.php?f=56" title="UK-Polos.net / Polo 6R/6C" target="_blank" rel="noopener" class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium">Forum</a> -->
+              <a href={`https://polo.blue${locale==='pl'?'/pl':''}`}
+              class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
+              title="Polo 6R Blog" itemprop="url">Blog</a>
+              <!-- <a href="#" class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium">Price Checker</a> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="relative md:block sm:ml-4 w-full sm:w-64 sm:mr-auto order-4 sm:order-2 h-10">
+          <Search 
+            id="search"
+            transition:name="search-field"
+            transition:persist
+            className="search-container" 
+            uiOptions={{ 
+              showImages: true,
+              showEmptyFilters: false,
+              resetStyles: true,
+              translations: {  
+                clear_search: t('search.clear'),
+                placeholder: t('search.type-to-search'),
+                search_label: t('search.search_label'),
+                filters_label: t('search.filters'),
+                zero_results: t('search.zero-results'),
+                many_results: `[COUNT] ${t('search.results-for')} [SEARCH_TERM]`,
+                one_result: `[COUNT] ${t('search.result-for')} [SEARCH_TERM]`,
+                alt_search: t('search.alt_search'),
+                search_suggestion: t('search.search_suggestion'),
+                searching: t('search.searching'),
+                load_more: t('search.load-more')
+              }
+            }} 
+          />
+        </div>
+
+        <div class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2  dark:text-gray-400 print:hidden order-3 sm:order-3 w-20 justify-end"
+          itemprop="hasPart" itemscope itemtype="http://schema.org/SiteNavigationElement"
+        >
+          <a class="icon-btn mx-2" 
+            title={t('button.toggle_langs')}
+            href={translation}
+            itemprop="url"
+            data-astro-reload
+          >
+              <Icon name="carbon:language" width="1.2em" height="1.2em"/>
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>

package/README.md

@@ -0,0 +1,69 @@
+---
+title: Introduction
+description: Docs intro
+layout: ../../layouts/MainLayout.astro
+---
+
+# Spoko Design System
+
+Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
+
+## Getting started
+
+### Adding new sections
+
+Although it's not required, you can create folders for new sections.
+
+To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
+
+Example:
+https://spoko-design-system.netlify.app/
+
+```js
+export const SIDEBAR = [
+    { text: "Core", header: true },
+    { text: "Introduction", link: "/core/introduction" },
+    ...,
+    { text: "Components", header: true },
+    { text: "Buttons", link: "/components/buttons" },
+    ...,
+    { text: "New section", header: true },
+    { text: "New component", link: "/new-section/new-component.md" },
+];
+```
+
+### Adding new pages
+
+To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.md`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
+
+You're free to organize the pages however you want.
+
+### Customizing Core section (colors, typography, shadows...)
+
+If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.
+
+Feel free to add new pages to the Core section
+
+### Customizing the page layout
+
+You can find the css for the pages in `src/styles/content.scss`.
+
+### Adding your components
+
+Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
+
+To get started check how the `MainButton` component is used in the `src/pages/en/buttons.md` file.
+
+You can import your component library or create your own and document it easily.
+
+### `.component-preview` utility
+
+There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
+
+<div class="component-preview">
+    <button class="text-white bg-blue-500 px-4 py-2 rounded-md">Your component</button>
+</div>
+
+### Have fun!
+
+Spoko Design System template was made by **[@spoko.space](https://spoko.space)** for personal and commercial use.

package/astro-i18next.config.mjs

@@ -0,0 +1,18 @@
+/** @type {import('astro-i18next').AstroI18nextConfig} */
+export default {
+    defaultLocale: "en",
+    locales: ["en", "pl"],
+    i18next: {
+        // debug is convenient during development to check for missing keys
+        debug: true,
+        initImmediate: false,
+        // backend: {
+        //   loadPath: './src/locales/{{lng}}.yml',
+        // },
+        detection: {}, // Default detection settings
+      },
+      i18nextPlugins: {
+        fsBackend: 'i18next-fs-backend',
+        LanguageDetector: 'i18next-browser-languagedetector',
+      },
+  };

package/astro-i18next.config.ts

@@ -0,0 +1,11 @@
+import type { AstroI18nextConfig } from "astro-i18next";
+
+const config: AstroI18nextConfig = {
+  defaultLocale: "en",
+  locales: ["en", "pl"],
+  i18nextServer: {
+    debug: true,
+  },
+};
+
+export default config;

package/astro.config.mjs

@@ -0,0 +1,43 @@
+import { defineConfig } from "astro/config";
+// import tailwind from "@astrojs/tailwind";
+import vue from "@astrojs/vue";
+import mdx from '@astrojs/mdx';
+import UnoCSS from '@unocss/astro';
+
+// https://github.com/yassinedoghri/astro-i18next#readme
+import astroI18next from "astro-i18next";
+
+import icon from "astro-icon";
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://spoko-design-system.netlify.app",
+  server: {
+    port: 1234
+  },
+  integrations: [
+  // Enable Preact to support Preact JSX components.
+  vue(),
+  // tailwind(),
+  mdx(), astroI18next(), UnoCSS({
+    injectReset: true
+  }), icon(
+    {
+      include: {
+        // mdi: ["*"], // (Default) Loads entire Material Design Icon set
+        mdi: ["facebook", "instagram", "post-it-note-edit-outline"], // Loads only Material Design Icon's "account" SVG
+        'ant-design': ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined" ],
+        bi: ["envelope-open", "credit-card"],
+        bx: ["arrow-back"],
+        carbon: ["language", "checkmark", "home", "dicom-overlay"],
+        el: ["star-empty", "star"],
+        'eos-icons': ["three-dots-loading"],
+        fluent: ["share-android-24-regular"],
+        'fluent-emoji': ["cookie"],
+        la: ["arrow-right", "arrow-left"],
+        octicon: ["chevron-left-24", "x-24"],
+        uil: ["map-marker", "envelope", "phone"]
+      }
+    }
+  )]
+});

package/index.ts

@@ -0,0 +1,6 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import MyComponent from './src/MyComponent.astro';
+
+export default MyComponent;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "spoko-design-system",
+  "version": "0.0.1",
+  "private": false,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@algolia/client-search": "^4.22.1",
+    "@astrojs/mdx": "^2.0.5",
+    "@astrojs/node": "^7.0.4",
+    "@astrojs/vue": "^4.0.8",
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/react": "^3.5.2",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/ant-design": "^1.1.13",
+    "@iconify-json/bi": "^1.1.23",
+    "@iconify-json/bx": "^1.1.10",
+    "@iconify-json/carbon": "^1.1.28",
+    "@iconify-json/el": "^1.1.8",
+    "@iconify-json/eos-icons": "^1.1.10",
+    "@iconify-json/fluent": "^1.1.46",
+    "@iconify-json/fluent-emoji": "1.1.18",
+    "@iconify-json/la": "^1.1.8",
+    "@iconify-json/octicon": "^1.1.52",
+    "@iconify-json/uil": "^1.1.8",
+    "@iconify-json/noto-v1": "^1.1.11",
+    "@iconify/json": "^2.2.172",
+    "@iconify/vue": "^4.1.1",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@unocss/astro": "^0.58.3",
+    "@unocss/preset-attributify": "^0.58.3",
+    "@unocss/preset-typography": "^0.58.3",
+    "@unocss/preset-uno": "^0.58.3",
+    "@unocss/preset-web-fonts": "^0.58.3",
+    "@unocss/preset-wind": "^0.58.3",
+    "@unocss/reset": "^0.58.3",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.0.2",
+    "i18next": "^23.7.18",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-fs-backend": "^2.3.1",
+    "i18next-http-backend": "^2.4.2",
+    "i18next-vue": "^3.0.0",
+    "preact": "^10.19.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.70.0",
+    "unocss": "^0.57.7",
+    "vite": "^5.0.12",
+    "vue": "^3.4.15"
+  },
+  "devDependencies": {
+    "@astrojs/preact": "^3.1.0",
+    "@astrojs/react": "^3.0.9",
+    "@astrojs/tailwind": "^5.1.0",
+    "@unocss/transformer-variant-group": "^0.58.3",
+    "astro": "^4.2.1",
+    "unocss": "^0.58.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  }
+}

package/public/astro-design-system-logo.svg

@@ -0,0 +1,10 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.4008 23.9454C59.3085 24.7845 58.8705 25.6033 57.9945 27.2409L38.8579 63.0169C37.3849 58.3378 35.1972 53.8377 32.2944 49.6873L45.2674 25.8805C45.4797 25.4909 45.411 25.0094 45.0987 24.6971C44.7855 24.3839 44.3024 24.3158 43.9125 24.5298L20.1826 37.557C16.0187 34.6351 11.5013 32.4342 6.80319 30.9539L42.6221 11.8558C44.2588 10.9832 45.0772 10.5469 45.9154 10.4555C46.6555 10.3747 47.403 10.4848 48.0867 10.7752C48.8612 11.1042 49.5142 11.7571 50.8202 13.0632L56.7917 19.0346C58.0994 20.3423 58.7532 20.9962 59.0822 21.7716C59.3726 22.4562 59.4823 23.2046 59.4008 23.9454Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2823 56.055C26.7326 55.8617 23.1916 53.9277 20.0384 50.7745C16.1682 46.9043 14.1348 42.4501 14.902 39.9615C13.6613 40.5867 12.5245 41.5855 11.8424 42.2676C11.8424 42.2676 8.29031 45.4142 8.27954 50.0626C9.48919 48.853 11.4459 48.8485 12.6499 50.0525C14.7137 52.1163 12.9026 53.9228 11.4331 55.3885C11.3891 55.4324 11.3454 55.476 11.3021 55.5193C9.07462 57.7468 8.52027 61.0113 9.64259 63.7433C9.94951 62.8607 10.4559 62.0314 11.1618 61.3255C13.2862 59.2011 15.3186 59.6516 17.6808 60.1751C19.5603 60.5917 21.6485 61.0546 24.1578 60.3034C25.467 59.9114 26.7017 59.1976 27.737 58.1622C28.3738 57.5255 28.8889 56.8135 29.2823 56.055Z" fill="url(#paint0_linear_27_26)"/>
+<defs>
+<linearGradient id="paint0_linear_27_26" x1="21.1464" y1="43.106" x2="1.62677" y2="74.0121" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B90FF"/>
+<stop offset="1" stop-color="#0711FF"/>
+</linearGradient>
+</defs>
+</svg>

package/public/fonts/lg.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+<json>
+<![CDATA[
+{
+	"fontFamily": "lg",
+	"majorVersion": 2,
+	"minorVersion": 0,
+	"fontURL": "",
+	"copyright": "",
+	"license": "",
+	"licenseURL": "",
+	"description": "Font generated by IcoMoon.",
+	"version": "Version 2.0",
+	"fontId": "lg",
+	"psName": "lg",
+	"subFamily": "Regular",
+	"fullName": "lg"
+}
+]]>
+</json>
+</metadata>
+<defs>
+<font id="lg" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe01a;" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
+<glyph unicode="&#xe01d;" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
+<glyph unicode="&#xe033;" glyph-name="stack-2" data-tags="stack-2" d="M384 853.334h426.667q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5zM170.667 675.334v-547.333q0-17.667 12.5-30.167t30.167-12.5h547.333q-13.333-37.667-46.333-61.5t-74.333-23.833h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 41.333 23.833 74.333t61.5 46.333zM810.667 768h-426.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h426.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5z" />
+<glyph unicode="&#xe070;" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
+<glyph unicode="&#xe094;" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
+<glyph unicode="&#xe095;" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
+<glyph unicode="&#xe0f2;" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
+<glyph unicode="&#xe1ff;" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
+<glyph unicode="&#xe20c;" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe311;" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe312;" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe80d;" glyph-name="share" data-tags="share" d="M768 252.667c68 0 124-56 124-124s-56-126-124-126-124 58-124 126c0 10 0 20 2 28l-302 176c-24-22-54-34-88-34-70 0-128 58-128 128s58 128 128 128c34 0 64-12 88-34l300 174c-2 10-4 20-4 30 0 70 58 128 128 128s128-58 128-128-58-128-128-128c-34 0-64 14-88 36l-300-176c2-10 4-20 4-30s-2-20-4-30l304-176c22 20 52 32 84 32z" />
+<glyph unicode="&#xe900;" glyph-name="rotate_left" data-tags="rotate_left" d="M554 764.667q126-16 213-112t87-226-87-226-213-112v86q92 16 153 87t61 165-61 165-153 87v-166l-194 190 194 194v-132zM302 156.667l62 62q46-34 106-44v-86q-96 12-168 68zM260 384.667q10-58 42-106l-60-60q-56 74-68 166h86zM304 574.667q-36-52-44-106h-86q12 90 70 166z" />
+<glyph unicode="&#xe901;" glyph-name="rotate_right" data-tags="rotate_right" d="M720 278.667q34 46 44 106h86q-12-92-68-166zM554 174.667q60 10 106 44l62-62q-72-56-168-68v86zM850 468.667h-86q-10 60-44 106l62 60q58-72 68-166zM664 702.667l-194-190v166q-92-16-153-87t-61-165 61-165 153-87v-86q-126 16-213 112t-87 226 87 226 213 112v132z" />
+<glyph unicode="&#xe902;" glyph-name="swap_horiz" data-tags="swap_horiz" d="M896 554.667l-170-170v128h-300v84h300v128zM298 468.667v-128h300v-84h-300v-128l-170 170z" />
+<glyph unicode="&#xe903;" glyph-name="swap_vert" data-tags="swap_vert" d="M384 810.667l170-170h-128v-300h-84v300h-128zM682 212.667h128l-170-170-170 170h128v300h84v-300z" />
+<glyph unicode="&#xe904;" glyph-name="facebook-with-circle" data-tags="facebook-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM628.429 612.659h-73.882c-8.755 0-18.483-11.52-18.483-26.829v-53.35h92.416l-13.978-76.083h-78.438v-228.403h-87.194v228.403h-79.104v76.083h79.104v44.749c0 64.205 44.544 116.378 105.677 116.378h73.882v-80.947z" />
+<glyph unicode="&#xe905;" glyph-name="google-with-circle" data-tags="google+-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM483.686 249.805c-30.874-15.002-64.102-16.589-76.954-16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962 4.608-119.962 95.59 0 89.395 108.8 96.41 142.131 96.41h0.87c-19.251 25.702-15.258 51.61-15.258 51.61-1.69-0.102-4.147-0.205-7.168-0.205-12.544 0-36.762 1.997-57.549 15.411-25.498 16.384-38.4 44.288-38.4 82.893 0 109.107 119.142 113.51 120.32 113.613h118.989v-2.611c0-13.312-23.91-15.923-40.192-18.125-5.53-0.819-16.64-1.894-19.763-3.482 30.157-16.128 35.021-41.421 35.021-79.104 0-42.906-16.794-65.587-34.611-81.51-11.059-9.882-19.712-17.613-19.712-28.006 0-10.189 11.878-20.582 25.702-32.717 22.579-19.917 53.555-47.002 53.555-92.723 0-47.258-20.326-81.050-60.416-100.454zM742.4 460.8h-76.8v-76.8h-51.2v76.8h-76.8v51.2h76.8v76.8h51.2v-76.8h76.8v-51.2zM421.018 401.92c-2.662 0-5.325-0.102-8.038-0.307-22.733-1.69-43.725-10.189-58.88-24.013-15.053-13.619-22.733-30.822-21.658-48.179 2.304-36.403 41.37-57.702 88.832-54.323 46.694 3.379 77.824 30.31 75.571 66.714-2.15 34.202-31.898 60.109-75.827 60.109zM465.766 599.808c-12.39 43.52-32.358 56.422-63.386 56.422-3.328 0-6.707-0.512-9.933-1.382-13.466-3.84-24.166-15.053-30.106-31.744-6.093-16.896-6.451-34.509-1.229-54.579 9.472-35.891 34.97-61.901 60.672-61.901 3.379 0 6.758 0.41 9.933 1.382 28.109 7.885 45.722 50.79 34.048 91.802z" />
+<glyph unicode="&#xe906;" glyph-name="pinterest-with-circle" data-tags="pinterest-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM545.638 344.32c-31.539 2.406-44.749 18.022-69.427 32.973-13.568-71.219-30.157-139.52-79.309-175.206-15.206 107.725 22.221 188.518 39.629 274.381-29.645 49.92 3.533 150.323 66.099 125.645 76.954-30.515-66.662-185.6 29.747-205.005 100.659-20.173 141.773 174.694 79.36 237.978-90.214 91.494-262.502 2.099-241.306-128.87 5.12-32 38.246-41.728 13.21-85.914-57.702 12.8-74.957 58.317-72.704 118.989 3.533 99.328 89.242 168.909 175.155 178.483 108.698 12.083 210.688-39.885 224.819-142.182 15.821-115.405-49.101-240.282-165.274-231.27z" />
+<glyph unicode="&#xe907;" glyph-name="twitter-with-circle" data-tags="twitter-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM711.936 549.683c0.205-4.198 0.256-8.397 0.256-12.493 0-128-97.331-275.507-275.405-275.507-54.682 0-105.574 15.974-148.378 43.52 7.526-0.922 15.258-1.28 23.091-1.28 45.363 0 87.091 15.411 120.218 41.421-42.342 0.819-78.080 28.774-90.419 67.174 5.888-1.075 11.93-1.69 18.176-1.69 8.806 0 17.408 1.178 25.498 3.379-44.288 8.909-77.67 48.026-77.67 94.925v1.178c13.056-7.219 28.006-11.622 43.878-12.134-26.010 17.408-43.059 47.002-43.059 80.64 0 17.715 4.762 34.406 13.107 48.691 47.77-58.573 119.040-97.075 199.526-101.222-1.69 7.117-2.509 14.49-2.509 22.118 0 53.402 43.315 96.819 96.819 96.819 27.802 0 52.992-11.776 70.656-30.618 22.067 4.403 42.752 12.39 61.44 23.501-7.219-22.579-22.528-41.574-42.547-53.606 19.61 2.406 38.246 7.578 55.603 15.309-12.954-19.405-29.389-36.506-48.282-50.125z" />
+<glyph unicode="&#xe908;" glyph-name="message-circle" data-tags="message-circle" d="M938.667 448.128v21.205c0 0.725-0.043 1.621-0.085 2.475-5.803 99.755-47.488 190.336-112.725 258.176-68.352 71.125-162.731 117.419-268.843 123.264-0.683 0.043-1.536 0.085-2.347 0.085h-20.864c-59.947 0.683-122.965-13.227-181.931-43.008-52.181-26.496-97.749-63.488-133.931-108.16-56.405-69.717-89.899-158.080-89.941-253.696-0.597-54.4 10.795-111.36 35.157-165.419l-75.605-226.859c-2.816-8.363-3.072-17.835 0-26.965 7.467-22.357 31.616-34.432 53.973-26.965l226.731 75.563c49.493-22.485 105.984-35.243 165.376-35.115 58.539 0.384 115.797 13.141 168.149 36.949 81.579 37.163 151.040 101.248 193.749 186.667 27.477 53.291 43.307 115.84 43.136 181.803zM853.333 447.872c0.128-52.267-12.459-101.333-33.664-142.464-34.176-68.352-88.832-118.827-153.259-148.139-41.387-18.859-86.827-28.971-133.376-29.269-52.096-0.128-101.163 12.459-142.293 33.664-10.624 5.504-22.528 6.059-33.067 2.56l-162.261-54.101 54.101 162.261c3.755 11.221 2.56 22.912-2.389 32.725-23.552 46.677-34.304 96.171-33.792 142.421 0.043 76.331 26.411 145.92 70.955 200.917 28.629 35.371 64.768 64.725 106.24 85.76 46.592 23.552 96.085 34.304 142.336 33.792h19.456c83.712-4.565 158.037-41.003 212.011-97.152 51.285-53.376 84.139-124.416 89.003-202.795z" />
+<glyph unicode="&#xe909;" glyph-name="maximize-2" data-tags="maximize-2" d="M793.003 768l-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0l225.835 225.835v-153.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-3.925 3.925-8.619 7.083-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM230.997 85.334l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835v153.003c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-256c0-23.552 19.115-42.667 42.667-42.667h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667z" />
+<glyph unicode="&#xe90a;" glyph-name="minimize-2" data-tags="minimize-2" d="M700.331 554.667l225.835 225.835c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-225.835-225.835v153.003c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-256c0-5.803 1.152-11.307 3.243-16.341s5.163-9.728 9.216-13.781c0.043-0.043 0.043-0.043 0.085-0.085 3.925-3.925 8.619-7.083 13.781-9.216 5.035-2.091 10.539-3.243 16.341-3.243h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667zM158.165 12.502l225.835 225.835v-153.003c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v256c0 5.803-1.152 11.307-3.243 16.341s-5.163 9.728-9.216 13.781c-0.043 0.043-0.043 0.043-0.085 0.085-4.096 4.053-8.789 7.125-13.781 9.216-5.035 2.091-10.539 3.243-16.341 3.243h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667h153.003l-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z" />
+</font></defs></svg>