diff --git a/package.json b/package.json index ec2d85d..f486357 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "docusaurus": "docusaurus", "gen:api": "mkdir -p docs/.static && cp ../spec/api.json docs/.static/api.json", "gen:config": "node ./scripts/config.js config.js", - "gen:faq": "node ./scripts/gen-faq.js", "start": "docusaurus start", "build": "docusaurus build", "swizzle": "docusaurus swizzle", diff --git a/scripts/gen-faq.js b/scripts/gen-faq.js deleted file mode 100644 index e90e448..0000000 --- a/scripts/gen-faq.js +++ /dev/null @@ -1,105 +0,0 @@ -// 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('./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) ---- - - - - -import {Question, FaqTags} from '@theme/Faq' - - -

- -` -md = new Remarkable() -faq.forEach((el) => { - markdownPage += `\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 += ` - -
-` -}) - -fs.writeFileSync( - path.resolve('./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( - './src/theme/faq.gen.module.css', - prettier.format(generatedCSS, { ...prettierStyles, parser: 'css' }) -) diff --git a/src/theme/Faq.js b/src/theme/Faq.js deleted file mode 100644 index d181720..0000000 --- a/src/theme/Faq.js +++ /dev/null @@ -1,54 +0,0 @@ -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 }) => ( -
genStyle[tag]))}> - {children} -
-) - -const TagButton = ({ tag, isSelected, children, toggleSelected }) => ( -
  • - {children} -
  • -) - -const FaqTags = ({ tags, initiallyDisabled }) => { - const [selectedTags, setSelectedTags] = useState( - tags.filter((t) => !initiallyDisabled.includes(t)) - ) - - return ( - <> - {tags.map((tag) => ( - t === tag)} - toggleSelected={() => { - if (selectedTags.find((t) => t === tag)) { - setSelectedTags(selectedTags.filter((t) => t !== tag)) - } else { - setSelectedTags([...selectedTags, tag]) - } - }} - > - #{tag} - - ))} - - ) -} - -export { FaqTags, Question } diff --git a/src/theme/faq.module.css b/src/theme/faq.module.css deleted file mode 100644 index cc92c5f..0000000 --- a/src/theme/faq.module.css +++ /dev/null @@ -1,83 +0,0 @@ -.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';