-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: aeneasr <aeneasr@users.noreply.github.com>
- Loading branch information
Showing
7 changed files
with
19,919 additions
and
35 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
Large diffs are not rendered by default.
Oops, something went wrong.
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,105 @@ | ||
| // gen-faq.js | ||
| // generates faq.mdx and faq.module.css from the contents of faq.yaml. See https://github.com/ory/kratos/pull/1039. | ||
| const fs = require('fs') | ||
| const yaml = require('js-yaml') | ||
| const { Remarkable } = require('remarkable') | ||
| const path = require('path') | ||
| const yamlPath = path.resolve('./docs/faq.yaml') | ||
| const prettier = require('prettier') | ||
| const prettierStyles = require('ory-prettier-styles') | ||
| const config = require('../contrib/config.js') | ||
|
|
||
| // Generating FAQ.mdx | ||
|
|
||
| if (!fs.existsSync(yamlPath)) { | ||
| //file exists | ||
| console.warn('faq.yaml File does not exists, skipping generating FAQ') | ||
| return 0 | ||
| } | ||
|
|
||
| const faqYaml = fs.readFileSync(yamlPath, 'utf8') | ||
| const faq = yaml.load(faqYaml) | ||
|
|
||
| const tags = Array.from(new Set(faq.map(({ tags }) => tags).flat(1))) | ||
|
|
||
| // which project are we running in? | ||
| const project = config.projectSlug | ||
|
|
||
| let markdownPage = `--- | ||
| id: faq | ||
| title: Frequently Asked Questions (FAQ) | ||
| --- | ||
| <!-- This file is generated. Please edit /docs/faq.yaml or /docs/scripts/gen-faq.js instead. Changes will be overwritten otherwise --> | ||
| import {Question, FaqTags} from '@theme/Faq' | ||
| <FaqTags tags={${JSON.stringify(tags)}} initiallyDisabled={[${JSON.stringify( | ||
| project | ||
| )}]}/> | ||
| <br/><br/> | ||
| ` | ||
| md = new Remarkable() | ||
| faq.forEach((el) => { | ||
| markdownPage += `<Question tags={${JSON.stringify(el.tags)}}>\n` | ||
| markdownPage += `${el.tags | ||
| .map((tag) => { | ||
| return '#' + tag | ||
| }) | ||
| .join(' ')} | ||
| ` | ||
| markdownPage += md.render(`**Q**: ${el.q}`) | ||
| markdownPage += md.render(`**A**: ${el.a}`) | ||
| if (el.context) { | ||
| markdownPage += md.render(`context: ${el.context}`) | ||
| } | ||
| markdownPage += `</Question> | ||
| <br/> | ||
| ` | ||
| }) | ||
|
|
||
| fs.writeFileSync( | ||
| path.resolve('./docs/docs/faq.mdx'), | ||
| prettier.format(markdownPage, { ...prettierStyles, parser: 'mdx' }) | ||
| ) | ||
|
|
||
| // Generating faq.module.css | ||
| const tagList = Array.from( | ||
| new Set( | ||
| faq | ||
| .map((el) => { | ||
| return el.tags | ||
| }) | ||
| .flat(1) | ||
| ) | ||
| ) | ||
|
|
||
| let generatedCSS = ` | ||
| .selected { | ||
| background-color: #ffba00; | ||
| } | ||
| div.question { | ||
| display: none; | ||
| } | ||
| ` | ||
|
|
||
| tagList.forEach((tag) => { | ||
| generatedCSS += ` | ||
| li.selected.${tag} { | ||
| color:red; | ||
| } | ||
| li.selected.${tag}~.question.${tag} { | ||
| display: inline; | ||
| } | ||
| ` | ||
| }) | ||
|
|
||
| fs.writeFileSync( | ||
| './docs/src/theme/faq.gen.module.css', | ||
| prettier.format(generatedCSS, { ...prettierStyles, parser: 'css' }) | ||
| ) |
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,54 @@ | ||
| import React, { useState } from 'react' | ||
| import cn from 'classnames' | ||
| import styles from './faq.module.css' | ||
| import genStyle from './faq.gen.module.css' | ||
|
|
||
| const Question = ({ children, tags }) => ( | ||
| <div className={cn(genStyle.question, ...tags.map((tag) => genStyle[tag]))}> | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| const TagButton = ({ tag, isSelected, children, toggleSelected }) => ( | ||
| <li | ||
| className={cn( | ||
| { [genStyle.selected]: isSelected }, | ||
| genStyle[tag], | ||
| styles.pills, | ||
| styles.pills__item, | ||
| { [styles['pills__item--active']]: isSelected } | ||
| )} | ||
| onClick={toggleSelected} | ||
| > | ||
| {children} | ||
| </li> | ||
| ) | ||
|
|
||
| const FaqTags = ({ tags, initiallyDisabled }) => { | ||
| const [selectedTags, setSelectedTags] = useState( | ||
| tags.filter((t) => !initiallyDisabled.includes(t)) | ||
| ) | ||
|
|
||
| return ( | ||
| <> | ||
| {tags.map((tag) => ( | ||
| <TagButton | ||
| key={tag} | ||
| tag={tag} | ||
| isSelected={selectedTags.find((t) => t === tag)} | ||
| toggleSelected={() => { | ||
| if (selectedTags.find((t) => t === tag)) { | ||
| setSelectedTags(selectedTags.filter((t) => t !== tag)) | ||
| } else { | ||
| setSelectedTags([...selectedTags, tag]) | ||
| } | ||
| }} | ||
| > | ||
| #{tag} | ||
| </TagButton> | ||
| ))} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export { FaqTags, Question } |
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,83 @@ | ||
| .pills, | ||
| .tabs { | ||
| font-weight: var(--ifm-font-weight-bold); | ||
| } | ||
| .pills { | ||
| padding-left: 0; | ||
| } | ||
| .pills__item { | ||
| border-radius: 0.5rem; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| padding: 0.25rem 1rem; | ||
| transition: background var(--ifm-transition-fast) | ||
| var(--ifm-transition-timing-default); | ||
| } | ||
| .pills__item--active { | ||
| background: var(--ifm-pills-color-background-active); | ||
| color: var(--ifm-pills-color-active); | ||
| } | ||
| .pills__item:not(.pills__item--active):hover { | ||
| background-color: var(--ifm-pills-color-background-active); | ||
| } | ||
| .pills__item:not(:first-child) { | ||
| margin-left: var(--ifm-pills-spacing); | ||
| } | ||
| .pills__item:not(:last-child) { | ||
| margin-right: var(--ifm-pills-spacing); | ||
| } | ||
| .pills--block { | ||
| display: flex; | ||
| justify-content: stretch; | ||
| } | ||
| .pills--block .pills__item { | ||
| flex-grow: 1; | ||
| text-align: center; | ||
| } | ||
| .tabs { | ||
| display: flex; | ||
| overflow-x: auto; | ||
| color: var(--ifm-tabs-color); | ||
| margin-bottom: 0; | ||
| padding-left: 0; | ||
| } | ||
| .tabs__item { | ||
| border-bottom: 3px solid transparent; | ||
| border-radius: var(--ifm-global-radius); | ||
| cursor: pointer; | ||
| display: inline-flex; | ||
| padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal); | ||
| margin: 0; | ||
| transition: background-color var(--ifm-transition-fast) | ||
| var(--ifm-transition-timing-default); | ||
| } | ||
| .tabs__item--active { | ||
| border-bottom-color: var(--ifm-tabs-color-active); | ||
| border-bottom-left-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| color: var(--ifm-tabs-color-active); | ||
| } | ||
| .tabs__item:hover { | ||
| background-color: var(--ifm-hover-overlay); | ||
| } | ||
| .tabs--block { | ||
| justify-content: stretch; | ||
| } | ||
| .tabs--block .tabs__item { | ||
| flex-grow: 1; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| p { | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| .selected { | ||
| background-color: #ffba00; | ||
| } | ||
|
|
||
| div.question { | ||
| display: none; | ||
| } | ||
|
|
||
| @import 'faq.module.gen.css'; |