All Projects → antvis → Gatsby Theme Antv

antvis / Gatsby Theme Antv

Licence: other
⚛️ Polished Gatsby theme for documentation site

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Gatsby Theme Antv

gatsby-wordpress-typescript-scss-blog
Gatsby Wordpress Typescript Blog Boilerplate
Stars: ✭ 50 (-79.92%)
Mutual labels:  gatsby, antd, gatsbyjs
Gatsbyhub
Access everything Gatsby has to offer without ever leaving Visual Studio Code. This VSCode Extension allows you to generate a new Gatsby site using a starter, browse Gatsby plugins, and develop a server all with a click of a button.
Stars: ✭ 158 (-36.55%)
Mutual labels:  gatsby, gatsbyjs
Reactive Resume
A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!
Stars: ✭ 3,280 (+1217.27%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Portfolio Jodie
Image-heavy photography portfolio with colorful accents & customizable pages. Includes adaptive image grids powered by CSS grid and automatic image integration into projects.
Stars: ✭ 249 (+0%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Source Ghost
Source plugin for pulling data into Gatsby.js from the Ghost Public API.
Stars: ✭ 144 (-42.17%)
Mutual labels:  gatsby, gatsbyjs
Spacy Course
👩‍🏫 Advanced NLP with spaCy: A free online course
Stars: ✭ 1,920 (+671.08%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Plugin Favicon
Favicon Gatsby plugin
Stars: ✭ 175 (-29.72%)
Mutual labels:  gatsby, gatsbyjs
Gabriel Adorf Portfolio
Gabriel Adorf's personal website
Stars: ✭ 133 (-46.59%)
Mutual labels:  gatsby, gatsbyjs
Js Docs
Este projeto foi desenvolvido para contribuir com o open-source. Se você quiser contribuir basta seguir o README
Stars: ✭ 191 (-23.29%)
Mutual labels:  gatsby, gatsbyjs
React Portfolio Template
Modern React Portfolio Template (FREE)
Stars: ✭ 188 (-24.5%)
Mutual labels:  gatsby, gatsbyjs
Here Covid 19 Tracker
Using HERE Technologies APIs, fork and build your own COVID-19 Tracker. For a live version, see the website.
Stars: ✭ 200 (-19.68%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Delog
A blog for designers and developer, built with Gatsby and Netlfiy CMS. Live demo https://delog-w3layouts.netlify.com/
Stars: ✭ 145 (-41.77%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Try Ghost
Publish flaring fast blogs with Gatsby and Ghost
Stars: ✭ 137 (-44.98%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Remark Oembed
A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.
Stars: ✭ 154 (-38.15%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Starter Foundation
A starter to launch your blazing fast personal website and a blog, Built with Gatsby and Netlify CMS. Made with ❤ by Stackrole
Stars: ✭ 135 (-45.78%)
Mutual labels:  gatsby, gatsbyjs
Sentry Docs
The new place for the sentry documentation (and tools to build it)
Stars: ✭ 160 (-35.74%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Mdx Blog Starter Project
Gatsby MDX Blog Starter Project
Stars: ✭ 248 (-0.4%)
Mutual labels:  gatsby, gatsbyjs
Mdx Deck
♠️ React MDX-based presentation decks
Stars: ✭ 10,487 (+4111.65%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Plugin Mailchimp
A simple, lightweight Gatsby plugin to subscribe new email addresses to your Mailchimp list
Stars: ✭ 125 (-49.8%)
Mutual labels:  gatsby, gatsbyjs
Gatsby Docker
Develop & Build GatsbyJS static sites within Docker.
Stars: ✭ 184 (-26.1%)
Mutual labels:  gatsby, gatsbyjs
图片

Gatsby Theme for AntV ⚛

✨ Polished Gatsby theme for documentation site.

NPM downloads CI status

Dependency Status devDependencies Status prettier code style

Features

  • ⚛ Prerendered static site
  • 🌎 Internationalization support by i18next
  • 📝 Markdown-based documentation and menus
  • 🎬 Examples with live playground
  • 🏗 Unified Theme and Layout
  • 🆙 Easy customized header nav
  • 🧩 Built-in home page components

Websites using it

Usage

Create a Gatsby site from gatsby-starter-theme-antv.

$ yarn global add gatsby-cli // or npm install gatsby-cli -g
$ gatsby new mysite https://github.com/antvis/gatsby-starter-theme-antv

Start developing.

$ cd mysite
$ yarn start

✨ AntV 站点 接入方式额外功能

gatsby-config.js

// gatsby-config.js
const { repository } = require('./package.json');

module.exports = {
  plugins: [
    {
      resolve: `@antv/gatsby-theme-antv`,
      options: {
        // pagesPath: './site/pages',
        GATrackingId: `UA-XXXXXXXXX-X`,
        pathPrefix: '/g2',
        // antd 主题:https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
        theme: {
          'primary-color': '#873bf4',
        },
        pwa: true, // 是否开启 gatsby-plugin-offline
        cname: true, // 是否自动从 siteUrl 中提取 CNAME 文件
        codeSplit: true, // 是否开启 gatsby 按路由的代码分割,默认为 false
      },
    },
  ],
  siteMetadata: {
    title: `AntV`,
    description: `Ant Visualization solution home page`,
    githubUrl: repository.url,
    logoUrl: '', // 自定义 logo
    navs: [], // 用于定义顶部菜单
    docs: [], // 用于定义文档页面的二级分类菜单
    examples: [], // 用于定义演示页面的二级菜单,属性见下方
    isAntVSite: false, //是否是AntV官网,header样式footer和图表详情页均为定制
    galleryMenuCloseAll: false, // 是否默认收起 gallery 页面所有 menu
    showSearch: true, // 是否展示搜索框
    showChinaMirror: true, // 是否展示国内镜像链接
    showLanguageSwitcher: true, // 用于定义是否展示语言切换
    showAntVProductsCard: true, // 是否展示 AntV 系列产品的卡片链接
    showGithubCorner: true, // 是否展示角落的 GitHub 图标
    showChartResize: true, // 是否在demo页展示图表视图切换
    themeSwitcher: 'g2', // 是否在demo页展示主题切换, 取值为'g2' | 'g2plot' 如果不设置则不展示主题切换工具
    showAPIDoc: true, // 是否在demo页展示API文档
    mdPlayground: {
      // markdown 文档中的 playground 若干设置
      splitPaneMainSize: '62%',
    },
    playground: {
      container: '<canvas id="container" />', // 定义演示的渲染节点,默认 <div id="container" />
      playgroundDidMount: 'console.log("playgroundDidMount");',
      playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
    },
    versions: [
      {
        '1.x': 'https://1x.ant.design',
        '2.x': 'https://2x.ant.design',
        '3.x': 'https://ant.design',
        '4.x': 'https://next.ant.design',
      },
    ],
    redirects: [
      {
        from: /\/old-url/,
        to: '/new-url', // 不指定 to 时直接跳转到 https://antv-2018.alipay.com/***
      },
    ],
  },
};

Components

import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
import Header from '@antv/gatsby-theme-antv/site/components/Header';
import Footer from '@antv/gatsby-theme-antv/site/components/Footer';
import Banner from '@antv/gatsby-theme-antv/site/components/Banner';
import Features from '@antv/gatsby-theme-antv/site/components/Features';
import Applications from '@antv/gatsby-theme-antv/site/components/Applications';
import Companies from '@antv/gatsby-theme-antv/site/components/Companies';

// @antv/gatsby-theme-antv/components/Header for commonjs version

const Layout = () => {
  const features = [
    {
      icon:
        'https://gw.alipayobjects.com/zos/basement_prod/5dbaf094-c064-4a0d-9968-76020b9f1510.svg',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
      icon:
        'https://gw.alipayobjects.com/zos/basement_prod/0a0371ab-6bed-41ad-a99b-87a5044ba11b.svg',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
      icon:
        'https://gw.alipayobjects.com/zos/basement_prod/716d0bc0-e311-4b28-b79f-afdd16e8148e.svg',
      title: 'xxxxx',
      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    },
  ];
  const cases = [
    {
      logo:
        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
      title: '灯塔专业版',
      description:
        '深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金',
      link: '#',
      image:
        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
    },
    // ...
  ];
  const companies = [
    {
      name: '公司1',
      image:
        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Z1NnQ6L4xCIAAAAAAAAAAABkARQnAQ',
    },
    {
      name: '公司2',
      image:
        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6u3hTpsd7h8AAAAAAAAAAABkARQnAQ',
    },
    // ...
  ];
  const notifications = [
    {
      type: '测试',
      title: 'G6 3.2 全新上线!',
      date: '2019.12.04',
      link: '#',
    },
  ];

  const downloadButton = {
    text: '下载使用',
    link: 'https://antv.alipay.com/zh-cn/index.html',
  };

  return (
    <>
      <SEO title="蚂蚁数据可视化" lang="zh" />
      <Header
        subTitle="子产品名"
        logo={{
          link: 'https://antv.alipay.com',
          img: <img src="url" />,
        }}
        githubUrl="https://github.com/antvis/g2"
        // docs={[]}
        showSearch={false}
        showGithubCorner={false}
        showLanguageSwitcher={false}
        onLanguageChange={(language) => {
          console.log(language);
        }}
        defaultLanguage="zh"
      />
      <Footer
      // columns={[]}
      // bottom={<div>powered by antv</div>}
      />

      <Banner
        coverImage={<svg></svg>} // 右侧 banner svg 内容
        title="主页标题"
        description="主页描述内容描述内容描述内容描述内容"
        buttonText="按钮文字"
        buttonHref={'#按钮链接路径'}
        notifications={notifications} // 可传 1-2 个内容,若不传则显示 2 个默认通知
        style={{}}
        className="Banner 的 className"
        video="视频按钮点开后视频的链接,不传则不会出现视频按钮"
        githubStarLink="Github Star 链接,不传则不会出现 GitHub Start 按钮"
        downloadButton={downloadButton} // 不传则不会出现下载按钮
      />
      <Features
        title="优势页面名称" // 可不传
        features={features} // 必传
        style={{}}
        className="Features 的 className"
      />
      <Cases cases={cases} style={{}} className="Cases 的 className" />
      <Companies
        title="公司页面名称" // 必传
        companies={companies} // 必传
        style={{}}
        className="Companies 的 className"
      />
    </>
  );
};

Custom Tag in Markdown

We support three type of custom tags in markdown

  • tag
<tag color="green" text="分类图例">分类图例</tag>

See antd Tag components for more usage.

  • swatch
<swatch colors="#F4664A,#30BF78,#FAAD14" colorNames="Red,Green,Yellow"></swatch>

swatch props:

name description isRequired type default
title - true string -
darkmode - false boolean -
colors - false string -
colornames - false string -
grid - false 'sudoku' 'sudoku'
  • playground

Insert demos to markdown document as code playground.

将 demo 以代码预览效果插入到 markdown 文档中。

<playground path='category/basic/demo/ts-demo.ts' rid='container'></playground>

playground props:

name description isRequired type default
path demo relative path true string -
height height of code playground false number 400
rid specify the container ID when more than one demo in docs false string 'container'

Develop

yarn install
yarn start

Visit https://localhost:8000 to preview.

Publish to npm

⚠️ If it is your first time for GitHub release, please read the following steps, otherwise, you can skip directly to the third step.

  1. Generate a personal access token: (release-it only needs "repo" access; no "admin" or other scopes).

generate token

Click the button 'Generate token', then your token would be generated. Copy this token as soon as you get it since you won’t be able to see it again after refreshing the web page!

  1. Make sure the token is available as an environment variable.

Example:

export GITHUB_TOKEN="YOUR TOKEN"

In macOS or Linux, this can be added to e.g. ~/.profile or ~/.zshrc, so it's available everytime the shell is used.

More details for the GitHub releases preperation: GitHub Releases

  1. Run the following commands in your terminal.
cd @antv/gatsby-theme-antv
npm run release

Deploy

npm run deploy

Set envoironment variable GATSBY_PATH_PREFIX to / in deploy service like netlify to preview pathPrefix site in root domain.

Add Dependency

cd @antv/gatsby-theme-antv
yarn add shallowequal

or

yarn workspace @antv/gatsby-theme-antv add shallowequal

Q&A

How to customise layout footer?

// gatsby-browser.js
exports.wrapPageElement = ({ element, props }) => {
  return React.cloneElement(element, {
    ...props,
    ...element.props,
    // https://github.com/react-component/footer#api
    footerProps: {
      bottom: 'xxx',
    },
  });
};

How to embed other markdown document in a markdown document

`markdown:docs/common/data-mapping.zh.md`

docs/common/data-mapping.zh.md is the path relative to the current project. It supports multiple levels of nested.

Related libraries

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].