-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: Implement card alike documents index (#216)
* docs:docs card projects * docs: update navbar docs * docs:projects cards grid * docs: card title update * feat: Add json content plugins * docs: navigation bar dot alignment under 1440 * docs: add version url to github * docs: link version to master * docs: font weight change * docs: font weight changes * docs:span adjustment * docs: title align * docs: adjust title Co-authored-by: zhouyang <[email protected]>
- Loading branch information
1 parent
92024e5
commit 187d220
Showing
13 changed files
with
306 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| const axios = require('axios'); | ||
| const { Joi } = require("@docusaurus/utils-validation") | ||
|
|
||
| const validateOptionsSchema = Joi.object( | ||
| { | ||
| path: Joi.string().required(), | ||
| projects: Joi.array().items( | ||
| Joi.object( | ||
| { | ||
| name: Joi.string().required(), | ||
| path: Joi.string().required(), | ||
| json_urls: Joi.array().items(Joi.string()), | ||
| } | ||
| ) | ||
| ).required(), | ||
| component: Joi.string().required(), | ||
| } | ||
| ); | ||
|
|
||
| const getProject = async (project) => { | ||
| const { json_urls = [] } = project; | ||
|
|
||
| const jsonList = await Promise.all(json_urls.map((url) => { | ||
| return axios.get(url).then((res) => { | ||
| return res.data || {}; | ||
| }).catch((e) => { | ||
| console.log(e.response.data); | ||
|
|
||
| return {}; | ||
| }); | ||
| })); | ||
|
|
||
| const _project = {}; | ||
| jsonList.forEach((json) => Object.assign(_project, json)); | ||
|
|
||
| return Object.assign(_project, project); | ||
| }; | ||
|
|
||
| const pluginRemoteJson = (context, options) => ({ | ||
| name: 'github-repositories', | ||
| validateOptions: ({ options, validate }) => { | ||
| const validationOptions = validate(validateOptionsSchema, options); | ||
|
|
||
| return validationOptions; | ||
| }, | ||
|
|
||
| async loadContent() { | ||
| let { projects = [] } = options; | ||
|
|
||
| projects = await Promise.all(projects.map((project) => getProject(project))); | ||
|
|
||
| return projects | ||
| }, | ||
| async contentLoaded({content, actions}) { | ||
| const { createData, addRoute } = actions; | ||
| const projects = await createData('projects.json', JSON.stringify(content)); | ||
|
|
||
| addRoute({ | ||
| exact: true, | ||
| path: options.path, | ||
| component: options.component, | ||
| modules: { projects }, | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| module.exports = pluginRemoteJson; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React from "react"; | ||
|
|
||
| import Layout from "@theme/Layout"; | ||
| import Translate from "@docusaurus/Translate"; | ||
| import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; | ||
| import useBaseUrl from "@docusaurus/useBaseUrl"; | ||
| import styles from "./styles.module.css"; | ||
|
|
||
| const GithubRepositories = ({ projects = [] }) => { | ||
| const context = useDocusaurusContext(); | ||
| const { title, customFields = {} } = context.siteConfig || {}; | ||
| const flags = [ | ||
| "/img/flag_green.svg", | ||
| "/img/flag_blue.svg", | ||
| "/img/flag_red.svg", | ||
| "/img/flag_purple.svg", | ||
| ]; | ||
| const getTime = (date, separator = '-') => { | ||
| const pushed_at = new Date(date) | ||
| const year = pushed_at.getFullYear() | ||
| const month = (pushed_at.getMonth() + 1) < 10 ? "0" + (pushed_at.getMonth() + 1) : pushed_at.getMonth() + 1 | ||
| const day = pushed_at.getDate() < 10 ? "0" + pushed_at.getDate() : pushed_at.getDate() | ||
| return year + separator + month + separator + day | ||
| } | ||
| return ( | ||
| <Layout title={title} description={customFields.description}> | ||
| <div className={styles.docs}> | ||
| <h1>DOCUMENTS</h1> | ||
| <div className={styles.docsCardBox}> | ||
| <div className={styles.docsCardWrapper}> | ||
| {projects.map( | ||
| ({ name, description, pushed_at, tag_name, path, html_url }, index) => ( | ||
| <div key={name} className={styles.docsCard}> | ||
| <div> | ||
| <img src={useBaseUrl(flags[index % 4])} /> | ||
| <a href={path}>{name}</a> | ||
| </div> | ||
| <p>{description}</p> | ||
| <p> | ||
| Latest {tag_name ? "version" : "update"} | ||
| <a href={html_url} target="_blank">{tag_name ? tag_name : "master"}</a> | ||
| {tag_name ? "version" : "updated"} at | ||
| <span>{getTime(pushed_at) || "--"}</span> | ||
| </p> | ||
| </div> | ||
| ) | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default GithubRepositories; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| /* docs */ | ||
| .docs { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .docs h1 { | ||
| margin-top: 5.3125rem; | ||
| font-family: Roboto; | ||
| font-weight: 900; | ||
| font-size: 2.25rem; | ||
| line-height: 2.25rem; | ||
| } | ||
| .docs p { | ||
| font-family: Proxima Nova; | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| size: .875rem; | ||
| line-height: .875rem; | ||
| } | ||
| .docsCardBox { | ||
| width: 80%; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .docsCardWrapper { | ||
| padding: 3.75rem 0; | ||
| display: inline-grid; | ||
| grid-template-columns: repeat(2, 50%); | ||
| } | ||
| .docsCard { | ||
| display: inline; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| width: 31.25rem; | ||
| margin: 1rem 1rem; | ||
| padding: 2rem; | ||
| border-radius: 16px; | ||
| border: 1px solid rgba(203, 213, 225, 0.8); | ||
| } | ||
| .docsCard div { | ||
| position: relative; | ||
| display: flex; | ||
| align-items: baseline; | ||
| } | ||
| .docsCard div a { | ||
| position: relative; | ||
| padding-left: .75rem; | ||
| top: -0.125rem; | ||
| font-family: Roboto; | ||
| font-weight: bold; | ||
| font-style: normal; | ||
| font-size: 1.875rem; | ||
| color: rgba(23, 28, 52, 1); | ||
| } | ||
|
|
||
| .docsCard { | ||
| font-family: Roboto; | ||
| font-style: normal; | ||
| font-weight: normal; | ||
| font-size: 1rem; | ||
| line-height: 1.5rem; | ||
| color: rgba(49, 56, 62, 1); | ||
| } | ||
| .docsCard p span { | ||
| line-height: 1.5rem; | ||
| font-weight: 700; | ||
| } | ||
| .docsCard p a { | ||
| line-height: 1.5rem; | ||
| font-weight: 700; | ||
| color: rgba(49, 56, 62, 1); | ||
| } | ||
|
|
||
| .docsCard p:first-of-type { | ||
| line-height: 1.5rem; | ||
| padding-top: .625rem; | ||
| min-height: 4.375rem; | ||
| } | ||
| .docsCard p:last-of-type { | ||
| margin: 0 !important; | ||
| } | ||
|
|
||
| @media (max-width: 996px) { | ||
| .docsCardBox { | ||
| width: 100%; | ||
| } | ||
| .docsCardWrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .docsCard { | ||
| width: 96%; | ||
| margin: .625rem 2%; | ||
| } | ||
| .docsCard p:first-of-type { | ||
| padding-top: 0px; | ||
| min-height: 0px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
187d220There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: