Create a default way to make links
This commit is contained in:
parent
62fa66cd4f
commit
080bb3331a
|
@ -2,20 +2,28 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper h1 {
|
|
||||||
margin: 1rem 0;
|
|
||||||
font-size: calc(24rem / 16);
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--primary-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: calc(24rem / 16);
|
||||||
|
color: var(--primary-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2,
|
||||||
|
.content h3 {
|
||||||
|
font-size: calc(18rem / 16);
|
||||||
|
margin-top: calc(24rem / 16);
|
||||||
|
margin-bottom: calc(16rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
|
top: calc(20rem / 16);
|
||||||
|
position: sticky;
|
||||||
|
height: 100%;
|
||||||
margin: calc(8rem / 16) calc(32rem / 16) 0 0;
|
margin: calc(8rem / 16) calc(32rem / 16) 0 0;
|
||||||
color: var(--primary-heading);
|
color: var(--primary-heading);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -29,7 +37,7 @@
|
||||||
border-bottom: calc(1rem / 16) solid var(--primary-accent-light);
|
border-bottom: calc(1rem / 16) solid var(--primary-accent-light);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: calc(40rem / 16);
|
height: calc(40rem / 16);
|
||||||
width: calc(284rem / 16);
|
width: calc(200rem / 16);
|
||||||
padding: 0 calc(14rem / 16);
|
padding: 0 calc(14rem / 16);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -110,7 +118,25 @@
|
||||||
padding-left: calc(8rem / 16);
|
padding-left: calc(8rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link,
|
||||||
|
.link:visited {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
.content h1 {
|
||||||
|
font-size: calc(18rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2,
|
||||||
|
.content h3,
|
||||||
|
.content h4 {
|
||||||
|
font-size: calc(18rem / 16);
|
||||||
|
margin-top: calc(24rem / 16);
|
||||||
|
margin-bottom: calc(8rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,8 @@
|
||||||
|
import NextLink from "next/link";
|
||||||
import React, { ReactNode, ComponentType } from "react";
|
import React, { ReactNode, ComponentType } from "react";
|
||||||
|
|
||||||
import styles from "./OrganizedContent.module.css";
|
import styles from "./OrganizedContent.module.css";
|
||||||
|
|
||||||
export interface LinkProps {
|
|
||||||
className?: string;
|
|
||||||
id: string;
|
|
||||||
children: ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
type Link = ComponentType<LinkProps>;
|
type Link = ComponentType<LinkProps>;
|
||||||
|
|
||||||
interface Section {
|
interface Section {
|
||||||
|
@ -50,10 +45,10 @@ export function OrganizedContent({
|
||||||
children
|
children
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div>
|
<section>
|
||||||
<h1>{section.title}</h1>
|
<h1>{section.title}</h1>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</section>
|
||||||
<Footer
|
<Footer
|
||||||
sections={sections}
|
sections={sections}
|
||||||
currentIndex={currentIndex}
|
currentIndex={currentIndex}
|
||||||
|
@ -74,7 +69,7 @@ interface NavProps {
|
||||||
|
|
||||||
function Nav({ sections, currentIndex, link: Link }: NavProps) {
|
function Nav({ sections, currentIndex, link: Link }: NavProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.nav}>
|
<nav className={styles.nav}>
|
||||||
{sections.map((section, index) => {
|
{sections.map((section, index) => {
|
||||||
const classNames = [styles.navItem];
|
const classNames = [styles.navItem];
|
||||||
|
|
||||||
|
@ -97,7 +92,7 @@ function Nav({ sections, currentIndex, link: Link }: NavProps) {
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -148,25 +143,61 @@ export interface SectionWithContent {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createReadAllSection(
|
export function createReadAllSection(
|
||||||
sections: SectionWithContent[]
|
sections: Section[],
|
||||||
): SectionWithContent {
|
content: false
|
||||||
return {
|
): Section;
|
||||||
section: {
|
export function createReadAllSection(
|
||||||
|
sections: SectionWithContent[],
|
||||||
|
content: true
|
||||||
|
): SectionWithContent;
|
||||||
|
export function createReadAllSection(
|
||||||
|
sections: SectionWithContent[] | Section[],
|
||||||
|
content = true
|
||||||
|
): SectionWithContent | Section {
|
||||||
|
const readAllSection = {
|
||||||
id: READ_ALL_ID,
|
id: READ_ALL_ID,
|
||||||
title: READ_ALL_TITLE,
|
title: READ_ALL_TITLE,
|
||||||
},
|
};
|
||||||
|
|
||||||
|
return content
|
||||||
|
? {
|
||||||
|
section: readAllSection,
|
||||||
Content: function ReadAllContent() {
|
Content: function ReadAllContent() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{sections.map(({ section: { id, title }, Content }) => (
|
{(sections as SectionWithContent[]).map(
|
||||||
<div key={id}>
|
({ section: { id, title }, Content }) => (
|
||||||
|
<section key={id}>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<Content />
|
<Content />
|
||||||
</div>
|
</section>
|
||||||
))}
|
)
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
}
|
||||||
|
: readAllSection;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LinkProps {
|
||||||
|
className?: string;
|
||||||
|
id: string;
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createLink(page: string) {
|
||||||
|
let base = page.startsWith("/") ? page : `/${page}`;
|
||||||
|
base = base.endsWith("/") ? base : `${base}/`;
|
||||||
|
|
||||||
|
return function Link({ className, id, children }: LinkProps) {
|
||||||
|
const href = id === READ_ALL_ID ? base : base + id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NextLink href={href}>
|
||||||
|
<a className={`${styles.link} ${className ?? ""}`}>{children}</a>
|
||||||
|
</NextLink>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue