mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-27 07:34:43 +02:00
🚧 Working on the docs page
This commit is contained in:
Alicia Sykes
parent
1cd64b1e1c
commit
9d62d02162
@ -4,46 +4,175 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Button from '../components/Button';
|
||||
|
||||
import './docs.scss';
|
||||
|
||||
import getColor from '../utils/ui-helpers';
|
||||
import IconShortcuts from '../../static/icons/features_shortcuts.svg';
|
||||
|
||||
import IconCloudSync from '../../static/icons/features_cloud-sync.svg';
|
||||
import IconDeploy from '../../static/icons/features_depoloyment.svg';
|
||||
// import IconIconography from '../../static/icons/features_icons.svg';
|
||||
// import IconLayout from '../../static/icons/features_layout-customization.svg';
|
||||
// import IconOpeningMethods from '../../static/icons/features_opening-methods.svg';
|
||||
// import IconShortcuts from '../../static/icons/features_shortcuts.svg';
|
||||
// import IconStatusIndicators from '../../static/icons/features_status-indicators.svg';
|
||||
// import IconThemes from '../../static/icons/features_themes.svg';
|
||||
import IconUiConfig from '../../static/icons/features_ui-configuration.svg';
|
||||
import IconTroubleshooting from '../../static/icons/docs_troubleshooting.svg';
|
||||
import IconManagement from '../../static/icons/docs_managment.svg';
|
||||
import IconDeveloping from '../../static/icons/docs_developing.svg';
|
||||
import IconDevGuides from '../../static/icons/docs_guides.svg';
|
||||
import IconContributing from '../../static/icons/docs_contributing.svg';
|
||||
import IconShowcase from '../../static/icons/docs_showcase.svg';
|
||||
import IconCredits from '../../static/icons/docs_credits.svg';
|
||||
import IconAuth from '../../static/icons/docs_authentication.svg';
|
||||
// import IconCloudSync from '../../static/icons/docs_cloud-sync.svg';
|
||||
import IconIconography from '../../static/icons/docs_icons.svg';
|
||||
import IconInternationalization from '../../static/icons/docs_internationalisation.svg';
|
||||
import IconStatusIndicators from '../../static/icons/docs_status-indicators.svg';
|
||||
import IconTheming from '../../static/icons/docs_theming.svg';
|
||||
|
||||
const DocsLinks = [
|
||||
{
|
||||
title: 'Deployment',
|
||||
description: '',
|
||||
description: 'Getting Dashy up and running',
|
||||
link: '',
|
||||
icon: (<IconShortcuts />),
|
||||
icon: (<IconDeploy />),
|
||||
},
|
||||
{
|
||||
title: 'Configuring',
|
||||
description: '',
|
||||
description: 'All Config Options',
|
||||
link: '',
|
||||
icon: (<IconShortcuts />),
|
||||
icon: (<IconUiConfig />),
|
||||
},
|
||||
{
|
||||
title: 'Management',
|
||||
description: '',
|
||||
description: 'Updating, security, web server configuration, etc',
|
||||
link: '',
|
||||
icon: (<IconShortcuts />),
|
||||
icon: (<IconManagement />),
|
||||
},
|
||||
{
|
||||
title: 'Troubleshooting',
|
||||
description: '',
|
||||
description: 'Solutions to Common Issues',
|
||||
link: '',
|
||||
icon: (<IconShortcuts />),
|
||||
icon: (<IconTroubleshooting />),
|
||||
},
|
||||
];
|
||||
|
||||
const DocsSections = [
|
||||
{
|
||||
section: 'Running Dashy',
|
||||
items: [
|
||||
{
|
||||
title: 'Deployment',
|
||||
description: 'Getting Dashy up and running',
|
||||
link: '',
|
||||
icon: (<IconDeploy />),
|
||||
},
|
||||
{
|
||||
title: 'Configuring',
|
||||
description: 'All Config Options',
|
||||
link: '',
|
||||
icon: (<IconUiConfig />),
|
||||
},
|
||||
{
|
||||
title: 'Management',
|
||||
description: 'Updating, security, web server configuration, etc',
|
||||
link: '',
|
||||
icon: (<IconManagement />),
|
||||
},
|
||||
{
|
||||
title: 'Troubleshooting',
|
||||
description: 'Solutions to Common Issues',
|
||||
link: '',
|
||||
icon: (<IconTroubleshooting />),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
section: 'Community',
|
||||
items: [
|
||||
{
|
||||
title: 'Developing',
|
||||
description: 'Dashy workflow, and running locally',
|
||||
link: '',
|
||||
icon: (<IconDeveloping />),
|
||||
},
|
||||
{
|
||||
title: 'Dev Guides',
|
||||
description: 'Common development tasks',
|
||||
link: '',
|
||||
icon: (<IconDevGuides />),
|
||||
},
|
||||
{
|
||||
title: 'Contributing',
|
||||
description: 'How you can help support Dashy\'s development',
|
||||
link: '',
|
||||
icon: (<IconContributing />),
|
||||
},
|
||||
{
|
||||
title: 'Showcase',
|
||||
description: 'See how others are using Dashy, and share your dashboard',
|
||||
link: '',
|
||||
icon: (<IconShowcase />),
|
||||
},
|
||||
{
|
||||
title: 'Credits',
|
||||
description: 'List of people and projects that have made Dashy possible',
|
||||
link: '',
|
||||
icon: (<IconCredits />),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
section: 'Feature Docs',
|
||||
items: [
|
||||
{
|
||||
title: 'Authentication',
|
||||
description: 'Configure login and user control',
|
||||
link: '',
|
||||
icon: (<IconAuth />),
|
||||
},
|
||||
{
|
||||
title: 'Backup & Restore',
|
||||
description: 'Cloud Sync, usage and background',
|
||||
link: '',
|
||||
icon: (<IconCloudSync />),
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
description: 'Available icon types for sections and items',
|
||||
link: '',
|
||||
icon: (<IconIconography />),
|
||||
},
|
||||
{
|
||||
title: 'Language Switching',
|
||||
description: 'Changing language, and adding new locales',
|
||||
link: '',
|
||||
icon: (<IconInternationalization />),
|
||||
},
|
||||
{
|
||||
title: 'Status Indicators',
|
||||
description: 'Monitoring uptime of your services with Dashy',
|
||||
link: '',
|
||||
icon: (<IconStatusIndicators />),
|
||||
},
|
||||
{
|
||||
title: 'Theming',
|
||||
description: 'Guide to customizing the look and feel of Dashy',
|
||||
link: '',
|
||||
icon: (<IconTheming />),
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
function DocsLink({ title, description, icon, link, index }) {
|
||||
const color = getColor(index);
|
||||
return (
|
||||
<Button to={link} className="docs-link" color={color}>
|
||||
<div className="docs-icon">{icon}</div>
|
||||
<div className="docs-text">
|
||||
<p>{title}</p>
|
||||
<p>{description}</p>
|
||||
<div className="row1">
|
||||
{icon}
|
||||
<p className="name">{title}</p>
|
||||
</div>
|
||||
<span className="description">{description}</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@ -55,10 +184,15 @@ export default function Docs() {
|
||||
title={siteConfig.title}
|
||||
description="Documentation | Dashy, a self-hosted dashboard for your homelab">
|
||||
<main className="docs">
|
||||
<h1>Docs</h1>
|
||||
<h1 className="docs-title">Dashy Docs</h1>
|
||||
<div className="docs-contents">
|
||||
{DocsLinks.map((props, index) => (
|
||||
<DocsLink key={index} index={index} {...props} />
|
||||
{DocsSections.map((DocsLinks, indexOuter) => (
|
||||
<div key={indexOuter}>
|
||||
<h3 className="section-title">{indexOuter + 1}. {DocsLinks.section}</h3>
|
||||
<div className="docs-links-section">
|
||||
{DocsLinks.items.map((props, index) => (<DocsLink key={indexOuter + index} index={indexOuter + index} {...props} />))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,25 +1,53 @@
|
||||
|
||||
main.docs {
|
||||
max-width: 1000px;
|
||||
max-width: 950px;
|
||||
margin: 1rem auto;
|
||||
padding: 1rem;
|
||||
background: var(--hero-background);
|
||||
box-shadow: var(--feature-img-shadow);
|
||||
|
||||
h1.docs-title {
|
||||
margin: 0;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
div.row1 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.docs-links-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
div.docs-contents {
|
||||
color: var(--text-color);
|
||||
a {
|
||||
max-width: 5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
h3.section-title {
|
||||
margin: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
a.docs-link {
|
||||
max-width: 5rem;
|
||||
p {
|
||||
color: var(--text-color);
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(33% - 1.5rem);
|
||||
min-height: 5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0.5rem 0.75rem;
|
||||
p.name {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.docs-icon svg {
|
||||
width: 2rem;
|
||||
span.description {
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user