Skip to content

Commit

Permalink
feat: add dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@sametpalitci
sametpalitci committed Mar 14, 2024
1 parent 502d669 commit 7c5afff
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 69 deletions.
18 changes: 9 additions & 9 deletions src/generator/apitypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ class TypesGenerator implements Generatable<TypesGeneratorStructure> {
): string {
return `
<tr>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${field.name} </td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${field.type
.map((f) =>
isScalarType(f.type as string)
Expand All @@ -47,7 +47,7 @@ class TypesGenerator implements Generatable<TypesGeneratorStructure> {
.join(' | ')}
</td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${field.nullable ? '<strong>Yes</strong>' : 'No'}
</td>
</tr>
Expand All @@ -57,15 +57,15 @@ class TypesGenerator implements Generatable<TypesGeneratorStructure> {
getTypeHTML(type: TGType, kind: 'inputType' | 'outputType'): string {
return `
<div>
<h3 class="mb-2 text-xl" id="type-${kind}-${type.name}">${
<h3 class="mb-2 text-xl text-black dark:text-white" id="type-${kind}-${type.name}">${
type.name
}</h3>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2 border">Name</th>
<th class="px-4 py-2 border">Type</th>
<th class="px-4 py-2 border">Nullable</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Name</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Type</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Nullable</th>
</tr>
</thead>
<tbody>
Expand All @@ -80,10 +80,10 @@ class TypesGenerator implements Generatable<TypesGeneratorStructure> {

toHTML() {
return `<div>
<h1 class="text-3xl" id="types">Types</h1>
<h1 class="text-3xl dark:text-white" id="types">Types</h1>
<div>
<div class="ml-4">
<h3 class="mb-2 text-2xl font-normal" id="input-types">Input Types</h3>
<h3 class="mb-2 text-2xl font-normal" id="input-types dark:text-white">Input Types</h3>
<div class="ml-4">
${this.data.inputTypes
.map((inputType) => this.getTypeHTML(inputType, 'inputType'))
Expand Down
74 changes: 37 additions & 37 deletions src/generator/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,12 @@ export default class ModelGenerator
getModelDiretiveHTML(directive: MGModelDirective): string {
return `
<tr>
<td class="px-4 py-2 border">
<strong>${directive.name}</strong>
<td class="px-4 py-2 border dark:border-gray-400">
<strong class="text-dark dark:text-white">${directive.name}</strong>
</td>
<td class="px-4 py-2 border"> <ul>
${directive.values.map((val) => `<li>${val}</li>`).join('')}
<td class="px-4 py-2 border dark:border-gray-400"> <ul>
${directive.values.map((val) => `<li class="text-dark dark:text-white">${val}</li>`).join('')}
</ul>
</td>
</tr>
Expand All @@ -95,18 +95,18 @@ export default class ModelGenerator
getModelFieldTableRow(field: MGModelField, modelName: string): string {
return `
<tr id="${`model-${modelName}-${field.name}`}">
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${field.name}
</td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${
isScalarType(field.bareTypeName)
? field.type
: `<a href="#type-outputType-${field.bareTypeName}">${field.type}</a>`
}
</td>
<td class="px-4 py-2 border">
<ul>
<td class="px-4 py-2 border dark:border-gray-400">
<ul class="text-black dark:text-white">
${
field.directives.length > 0
? field.directives
Expand All @@ -116,10 +116,10 @@ export default class ModelGenerator
}
</ul>
</td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${field.required ? `<strong>Yes</strong>` : 'No'}
</td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">
${field.documentation ?? '-'}
</td>
</tr>
Expand All @@ -132,46 +132,46 @@ export default class ModelGenerator
): string {
return `
<div class="mt-4">
<h4 id="${`model-${modelName}-${operation.name}`}" class="mb-2 text-lg font-bold">${
<h4 id="${`model-${modelName}-${operation.name}`}" class="mb-2 text-lg font-bold dark:text-white">${
operation.name
}</h4>
<p>${operation.description}</p>
<p class="text-black dark:text-white">${operation.description}</p>
<div class="mb-2">
<pre
class="language-markup"
><code class=" language-javascript">${
operation.usage
}</code></pre>
</div>
<h4 class="text-lg mb-2">Input</h4>
<h4 class="text-lg mb-2 text-black dark:text-white">Input</h4>
<table class="table-auto mb-2">
<thead>
<tr>
<th class="px-4 py-2 border">Name</th>
<th class="px-4 py-2 border">Type</th>
<th class="px-4 py-2 border">Required</th>
<th class="px-4 py-2 border dark:text-white dark:border-gray-400">Name</th>
<th class="px-4 py-2 border dark:text-white dark:border-gray-400">Type</th>
<th class="px-4 py-2 border dark:text-white dark:border-gray-400">Required</th>
</tr>
</thead>
<tbody>
${operation.opKeys
?.map(
(opK) => `
<tr>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border dark:text-white dark:border-gray-400"">
${opK.name}
</td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border dark:text-white dark:border-gray-400"">
${opK.types
.map((t) =>
isScalarType(t.type as string)
? t.type
: `<a href="#type-inputType-${t.type}">${t.type}${
: `<a href="#type-inputType-${t.type}" class="dark:text-white">${t.type}${
t.isList ? '[]' : ''
}</a>`
)
.join(' | ')}
</td>
<td class="px-4 py-2 border">
<td class="px-4 py-2 border dark:text-white dark:border-gray-400"">
${opK.required ? '<strong>Yes</strong>' : 'No'}
</td>
</tr>
Expand All @@ -180,13 +180,13 @@ export default class ModelGenerator
.join('')}
</tbody>
</table>
<h4 class="text-lg mb-2">Output</h4>
<div><strong>Type: </strong> <a href="#type-outputType-${
<h4 class="text-lg mb-2 text-black dark:text-white">Output</h4>
<div class="text-dark dark:text-white"><strong>Type: </strong> <a href="#type-outputType-${
operation.output.type
}">${operation.output.type}</a></div>
<div><strong>Required: </strong>
<div class="text-dark dark:text-white"><strong>Required: </strong>
${operation.output.required ? `Yes` : `No`}</div>
<div><strong>List: </strong>
<div class="text-dark dark:text-white"><strong>List: </strong>
${operation.output.list ? `Yes` : `No`}</div>
</div>
`;
Expand All @@ -197,15 +197,15 @@ export default class ModelGenerator

return `
<div class="mb-8">
<h1 class="text-3xl text-gray-800" id="models">Models</h1>
<h1 class="text-3xl text-gray-800 dark:text-white" id="models">Models</h1>
${this.data.models
.map(
(model) => `
<div class="px-4 mb-4">
<h2 class="text-2xl" id="model-${model.name}">${model.name}</h2>
<h2 class="text-2xl text-black dark:text-white" id="model-${model.name}">${model.name}</h2>
${
model.documentation
? `<div class="mb-2">Description: ${model.documentation}</div>`
? `<div class="mb-2 text-black dark:text-white">Description: ${model.documentation}</div>`
: ''
}
${
Expand All @@ -214,8 +214,8 @@ export default class ModelGenerator
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2 border">Name</th>
<th class="px-4 py-2 border">Value</th>
<th class="px-4 py-2 border dark:text-white dark:border-gray-400">Name</th>
<th class="px-4 py-2 border dark:text-white dark:border-gray-400">Value</th>
</tr>
</thead>
<tbody>
Expand All @@ -228,18 +228,18 @@ export default class ModelGenerator
: ''
}
<div class="px-4 mt-4">
<h3 class="mb-2 text-xl" id="model-${
<h3 class="mb-2 text-xl text-black dark:text-white" id="model-${
model.name
}-fields">Fields</h3>
<div class="px-2 mb-4">
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2 border">Name</th>
<th class="px-4 py-2 border">Type</th>
<th class="px-4 py-2 border">Attributes</th>
<th class="px-4 py-2 border">Required</th>
<th class="px-4 py-2 border">Comment</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Name</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Type</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Attributes</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Required</th>
<th class="px-4 py-2 border text-black dark:text-white dark:border-gray-400">Comment</th>
</tr>
</thead>
<tbody>
Expand All @@ -254,13 +254,13 @@ export default class ModelGenerator
</div>
<hr class="my-8">
<div class="px-4 mt-4">
<h3 class="mb-2 text-xl" id="model-${
<h3 class="mb-2 text-xl dark:text-white" id="model-${
model.name
}-operations">Operations</h3>
<div class="px-2 mb-4">
${model.operations
.map((op) => this.getModelOperationMarkup(op, model.name))
.join(`<hr class="my-4">`)}
.join(`<hr class="my-4 dark:text-white">`)}
</div>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions src/generator/toc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,20 @@ export default class TOCGenerator implements Generatable<TOCStructure> {

getTOCSubHeaderHTML(name: string): string {
return `
<div class="font-semibold text-gray-700">
<div class="font-semibold text-gray-700 dark:text-white">
<a href="#model-${name}">${name}</a>
</div>
`;
}

getSubFieldHTML(identifier: string, root: string, field: string): string {
return `<li><a href="#${identifier}-${root}-${field}">${field}</a></li>`;
return `<li><a href="#${identifier}-${root}-${field}" class="dark:text-white">${field}</a></li>`;
}

toHTML() {
return `
<div>
<h5 class="mb-2 font-bold"><a href="#models">Models</a></h5>
<h5 class="mb-2 font-bold dark:text-white"><a href="#models">Models</a></h5>
<ul class="mb-2 ml-1">
${this.data.models
.map(
Expand All @@ -50,8 +50,8 @@ export default class TOCGenerator implements Generatable<TOCStructure> {
<div class="mt-1 ml-2">
<div class="mb-1 font-medium text-gray-600"><a href="#model-${
model.name
}-fields">Fields</a></div>
<ul class="pl-3 ml-1 border-l-2 border-gray-400">
}-fields" class="dark:text-gray-200">Fields</a></div>
<ul class="pl-3 ml-1 border-l-2 border-gray-400 dark:text-white">
${model.fields
.map((field) =>
this.getSubFieldHTML('model', model.name, field)
Expand All @@ -62,8 +62,8 @@ export default class TOCGenerator implements Generatable<TOCStructure> {
<div class="mt-2 ml-2">
<div class="mb-1 font-medium text-gray-600"><a href="#model-${
model.name
}-operations">Operations</a></div>
<ul class="pl-3 ml-1 border-l-2 border-gray-400">
}-operations" class="dark:text-gray-200">Operations</a></div>
<ul class="pl-3 ml-1 border-l-2 border-gray-400 dark:text-white">
${model.operations
.map((op) =>
this.getSubFieldHTML('model', model.name, op)
Expand All @@ -76,13 +76,13 @@ export default class TOCGenerator implements Generatable<TOCStructure> {
)
.join('')}
</ul>
<h5 class="mt-12 mb-2 font-bold"><a href="#types">Types</a></h5>
<h5 class="mt-12 mb-2 font-bold dark:text-white"><a href="#types">Types</a></h5>
<ul class="mb-2 ml-1">
<li class="mb-4">
<div class="font-semibold text-gray-700">
<div class="font-semibold text-gray-700 dark:text-white">
<a href="#input-types">Input Types</a>
</div>
<ul class="pl-3 ml-1 border-l-2 border-gray-400">
<ul class="pl-3 ml-1 border-l-2 border-gray-400 dark:text-white">
${this.data.types.inputTypes
.map((inputType) =>
this.getSubFieldHTML('type', 'inputType', inputType)
Expand All @@ -91,10 +91,10 @@ export default class TOCGenerator implements Generatable<TOCStructure> {
</ul>
</li>
<li class="mb-4">
<div class="font-semibold text-gray-700">
<div class="font-semibold text-gray-700 dark:text-white">
<a href="#output-types">Output Types</a>
</div>
<ul class="pl-3 ml-1 border-l-2 border-gray-400">
<ul class="pl-3 ml-1 border-l-2 border-gray-400 dark:text-white">
${this.data.types.outputTypes
.map((outputType) =>
this.getSubFieldHTML('type', 'outputType', outputType)
Expand Down
Loading

0 comments on commit 7c5afff

Please sign in to comment.