c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

manual ids for mdi because of SSR

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-27 15:41:27 +02:00
parent e84f6920b6
commit a62b9aafca
6 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Blog/ContentPage.tsx
View File

@ -12,8 +12,8 @@ const ContentPage: NextPage<{ content: ProjectRender | DiaryRender }> = ({ conte
return (<> return (<>
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} /> : null} {content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} /> : null}
<div className={styles.more}> <div className={styles.more}>
{content.more ? <a href={content.more} className={"nostyle"}><Icon path={mdiWeb} size={"2em"} title="More" /></a> : null} {content.more ? <a href={content.more} className={"nostyle"}><Icon path={mdiWeb} size={"2em"} title="More" id={`mdi_content_more_link_${content.name}`} /></a> : null}
{content.repo ? <a href={content.repo} className={"nostyle"}><Git size={"2em"} title={"Repository"} /></a> : null} {content.repo ? <a href={content.repo} className={"nostyle"}><Git size={"2em"} title={"Repository"} id={`mdi_content_repo_link_${content.name}`} /></a> : null}
</div> </div>
<div className={styles.asciidoc} dangerouslySetInnerHTML={{ __html: content.html }}> <div className={styles.asciidoc} dangerouslySetInnerHTML={{ __html: content.html }}>
</div> </div>

6
components/Blog/Navigation.tsx
View File

@ -23,17 +23,17 @@ const Navigation: NextPage<{}> = () => {
<div className={styles.navLink}> <div className={styles.navLink}>
<Link href={"/"}><a className="nostyle"> <Link href={"/"}><a className="nostyle">
<span className={styles.linkText}>Projects</span> <span className={styles.linkText}>Projects</span>
<span className={styles.linkIcon}><Icon path={mdiHome} size={"2em"} title={"Home and Projects"} /></span> <span className={styles.linkIcon}><Icon path={mdiHome} size={"2em"} title={"Home and Projects"} id={"mdi_nav_home"} /></span>
</a></Link> </a></Link>
</div> </div>
<div className={styles.navLink}> <div className={styles.navLink}>
<Link href={"/me"}><a className="nostyle"> <Link href={"/me"}><a className="nostyle">
<span className={styles.linkText}>About Me</span> <span className={styles.linkText}>About Me</span>
<span className={styles.linkIcon}><Icon path={mdiAccount} size={"2em"} title={"About Me"} /></span> <span className={styles.linkIcon}><Icon path={mdiAccount} size={"2em"} title={"About Me"} id={"mdi_nav_aboutme"} /></span>
</a></Link> </a></Link>
</div> </div>
<div className={styles.spacer}></div> <div className={styles.spacer}></div>
<div className={styles.navIcon}><a className="nostyle" href={"/terminal"}><Icon path={mdiConsole} size={"2em"} title={"Terminal"} /></a></div> <div className={styles.navIcon}><a className="nostyle" href={"/terminal"}><Icon path={mdiConsole} size={"2em"} title={"Terminal"} id={"mdi_nav_terminal"} /></a></div>
<ThemeSwitch /> <ThemeSwitch />
</nav>; </nav>;
}; };

6
components/Blog/ThemeSwitch.tsx
View File

@ -36,7 +36,7 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
if (!mounted) { if (!mounted) {
return <div className={styles.switch} title="Theme switching needs JS to be enabled."> return <div className={styles.switch} title="Theme switching needs JS to be enabled.">
<Icon path={mdiLanguageJavascript} size={size || "1.5em"} className={styles.placeHolder} /> <Icon path={mdiLanguageJavascript} size={size || "1.5em"} className={styles.placeHolder} id={"mdi_themeswitch_noscript"} />
</div>; </div>;
} }
@ -44,8 +44,8 @@ const ThemeSwitch: NextPage<{ size?: string }> = ({ size }) => {
const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined); const moonClasses = fadeProps.moon || (theme === "light" ? styles.selected : undefined);
return <div className={styles.switch}> return <div className={styles.switch}>
<div className={sunClasses} onClick={() => switchTheme("light")}><Icon path={mdiWhiteBalanceSunny} size={size || "1.5em"} title={"Light theme"} /></div> <div className={sunClasses} onClick={() => switchTheme("light")}><Icon path={mdiWhiteBalanceSunny} size={size || "1.5em"} title={"Light theme"} id={"mdi_themeswitch_light"} /></div>
<div className={moonClasses} onClick={() => switchTheme("dark")}><Icon path={mdiWeatherNight} size={size || "1.5em"} title={"Dark theme"} /></div> <div className={moonClasses} onClick={() => switchTheme("dark")}><Icon path={mdiWeatherNight} size={size || "1.5em"} title={"Dark theme"} id={"mdi_themeswitch_dark"} /></div>
</div>; </div>;
}; };

4
data/achievements.tsx
View File

@ -9,10 +9,10 @@ interface Achievement {
export const achievements = (size?: string): Achievement[] => [ export const achievements = (size?: string): Achievement[] => [
{ {
"description": "Awarded with the Deutschlandstipendium", "description": "Awarded with the Deutschlandstipendium",
"icon": <Icon path={mdiSeal} size={size || "2em"} /> "icon": <Icon path={mdiSeal} size={size || "2em"} id={"mdi_achievement_stip"} />
}, { }, {
"description": "Developer of the official testbed for Digital Twins in Industry 4.0 of the TU Dresden", "description": "Developer of the official testbed for Digital Twins in Industry 4.0 of the TU Dresden",
"icon": <Icon path={mdiRobotIndustrial} size={size || "2em"} /> "icon": <Icon path={mdiRobotIndustrial} size={size || "2em"} id={"mdi_achievement_i40"} />
} }
]; ];

36
data/skills.tsx
View File

@ -45,39 +45,39 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
title: "Programming Languages", title: "Programming Languages",
skillBars: [{ skillBars: [{
name: "TypeScript", name: "TypeScript",
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons} id={"mdi_skills_prog_ts"} />,
pct: 100 pct: 100
}, { }, {
name: "JavaScript", name: "JavaScript",
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons} id={"mdi_skills_prog_js"} />,
pct: 100 pct: 100
}, { }, {
name: "Java", name: "Java",
icon: <Icon path={mdiLanguageJava} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageJava} size={sizeCardIcons} id={"mdi_skills_prog_java"} />,
pct: 80 pct: 80
}, { }, {
name: "Python 3", name: "Python 3",
icon: <Icon path={mdiLanguagePython} size={sizeCardIcons} />, icon: <Icon path={mdiLanguagePython} size={sizeCardIcons} id={"mdi_skills_prog_python"} />,
pct: 95 pct: 95
}, { }, {
name: "PHP", name: "PHP",
icon: <Icon path={mdiLanguagePhp} size={sizeCardIcons} />, icon: <Icon path={mdiLanguagePhp} size={sizeCardIcons} id={"mdi_skills_prog_php"} />,
pct: 50 pct: 50
}, { }, {
name: "Bash", name: "Bash",
icon: <Icon path={mdiBash} size={sizeCardIcons} />, icon: <Icon path={mdiBash} size={sizeCardIcons} id={"mdi_skills_prog_bash"} />,
pct: 60 pct: 60
}, { }, {
name: "C/C++", name: "C/C++",
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons} id={"mdi_skills_prog_c"} />,
pct: 60 pct: 60
}, { }, {
name: "Rust", name: "Rust",
icon: <Icon path={mdiLanguageRust} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageRust} size={sizeCardIcons} id={"mdi_skills_prog_rust"} />,
pct: 80 pct: 80
}, { }, {
name: "C#", name: "C#",
icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageCsharp} size={sizeCardIcons} id={"mdi_skills_prog_cs"} />,
pct: 40 pct: 40
}], }],
colors: { colors: {
@ -94,23 +94,23 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
title: "Web Technologies", title: "Web Technologies",
skillBars: [{ skillBars: [{
name: "TypeScript", name: "TypeScript",
icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageTypescript} size={sizeCardIcons} id={"mdi_skills_web_ts"} />,
pct: 100 pct: 100
}, { }, {
name: "JavaScript", name: "JavaScript",
icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageJavascript} size={sizeCardIcons} id={"mdi_skills_web_js"} />,
pct: 100 pct: 100
}, { }, {
name: "React", name: "React",
icon: <Icon path={mdiReact} size={sizeCardIcons} />, icon: <Icon path={mdiReact} size={sizeCardIcons} id={"mdi_skills_web_react"} />,
pct: 80 pct: 80
}, { }, {
name: "HTML5", name: "HTML5",
icon: <Html5 size={sizeCardIcons} />, icon: <Html5 size={sizeCardIcons} id={"mdi_skills_web_html"} />,
pct: 80 pct: 80
}, { }, {
name: "CSS3", name: "CSS3",
icon: <CssThree size={sizeCardIcons} />, icon: <CssThree size={sizeCardIcons} id={"mdi_skills_web_css"} />,
pct: 90 pct: 90
}], }],
additional: [{ additional: [{
@ -137,7 +137,7 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
title: "Embedded Programming", title: "Embedded Programming",
skillBars: [{ skillBars: [{
name: "C/C++", name: "C/C++",
icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons} />, icon: <Icon path={mdiLanguageCpp} size={sizeCardIcons} id={"mdi_skills_embedded_c"} />,
pct: 60 pct: 60
}], }],
additional: [{ additional: [{
@ -184,15 +184,15 @@ export const skills = (sizeCardIcons?: string, sizeBadgeIcons?: string): SkillSe
title: "Languages", title: "Languages",
skillBars: [{ skillBars: [{
name: "German (native)", name: "German (native)",
icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />, icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} id={"mdi_skills_lang_de"} />,
pct: 100 pct: 100
}, { }, {
name: "English (C1)", name: "English (C1)",
icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />, icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} id={"mdi_skills_lang_en"} />,
pct: 90 pct: 90
}, { }, {
name: "Russian (basics)", name: "Russian (basics)",
icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} />, icon: <Icon path={mdiTranslateVariant} size={sizeCardIcons} id={"mdi_skills_lang_ru"} />,
pct: 30 pct: 30
}], }],
colors: { colors: {

2
pages/terminal.tsx
View File

@ -65,7 +65,7 @@ const Terminal: NextPage<{ buildTime: string }> = ({ buildTime }) => {
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>
<a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank" rel="noreferrer">Bug?</a> <a href="https://github.com/C0ntroller/c0ntroller.de/issues/new" target="_blank" rel="noreferrer">Bug?</a>
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>
<a href="mailto:admin-website@c0ntroller.de" rel="noreferrer" className={styles.iconLink}><Icon path={mdiEmail} color="var(--repl_color)" size={"1.5em"} /></a> <a href="mailto:admin-website@c0ntroller.de" rel="noreferrer" className={styles.iconLink}><Icon path={mdiEmail} color="var(--repl_color)" size={"1.5em"} id={"mdi_terminal_nav_email"} /></a>
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>
<a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer" className={styles.iconLink}><Github color="var(--repl_color)" size={iconSize} /></a> <a href="https://github.com/C0ntroller" target="_blank" rel="noreferrer" className={styles.iconLink}><Github color="var(--repl_color)" size={iconSize} /></a>
<span className={styles.divider}>|</span> <span className={styles.divider}>|</span>