mirror of
https://github.com/Lissy93/awesome-privacy.git
synced 2026-03-11 08:55:33 +00:00
Built out all the main pages
This commit is contained in:
Alicia Sykes
parent
92f2750a0d
commit
73ec5fdbc1
4 changed files with 279 additions and 83 deletions
|
|
@ -1,68 +1,221 @@
|
|||
---
|
||||
|
||||
import yaml from 'js-yaml';
|
||||
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import { AwesomePrivacy, Section, Service } from '../types/Service';
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import Button from '@components/form/Button.astro';
|
||||
import Main from '@components/scafold/MainCard.astro';
|
||||
import ServiceList from '@components/things/ServiceList.astro';
|
||||
import type { AwesomePrivacy, Section, Service, ShortService } from '../types/Service';
|
||||
import { fetchData, slugify } from '@utils/fetch-data';
|
||||
import { parseMarkdown } from '@utils/parse-markdown';
|
||||
|
||||
const { title, otherSections, services } = Astro.props;
|
||||
interface Props {
|
||||
slug: string,
|
||||
title: string,
|
||||
services: Service[],
|
||||
intro?: string,
|
||||
notableMentions?: ShortService[] | string,
|
||||
furtherInfo?: string,
|
||||
wordOfWarning?: string,
|
||||
categoryName: string,
|
||||
otherSections: Section[],
|
||||
}
|
||||
|
||||
const { slug, title, otherSections, services, notableMentions, furtherInfo, wordOfWarning, categoryName, intro } = Astro.props;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
|
||||
const fetchData = async (): Promise<AwesomePrivacy> => {
|
||||
return await fetch('http://localhost:4321/awesome-privacy.yml')
|
||||
.then((res) => res.text())
|
||||
.then((data) => yaml.load(data))
|
||||
.catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
|
||||
const slugify = (title: string) => {
|
||||
return title.toLowerCase().replace(/\s/g, '-');
|
||||
};
|
||||
|
||||
|
||||
const pages = await fetchData().then((data) => {
|
||||
|
||||
const results: { slug: string, title: string, otherSections: Section[], services: Service[] }[] = [];
|
||||
data.categories.forEach((service) => {
|
||||
const sections = service.sections.map((section) => ({
|
||||
slug: `${slugify(service.name)}/${slugify(section.name)}`,
|
||||
const results: Array<Props> = [];
|
||||
(data as AwesomePrivacy).categories.forEach((category) => {
|
||||
const sections = category.sections.map((section) => ({
|
||||
slug: `${slugify(category.name)}/${slugify(section.name)}`,
|
||||
title: section.name,
|
||||
services: section.services,
|
||||
otherSections: service.sections,
|
||||
intro: section.intro,
|
||||
notableMentions: section.notableMentions,
|
||||
furtherInfo: section.furtherInfo,
|
||||
wordOfWarning: section.wordOfWarning,
|
||||
categoryName: category.name,
|
||||
otherSections: category.sections,
|
||||
}));
|
||||
results.push(...sections);
|
||||
});
|
||||
return results;
|
||||
});
|
||||
|
||||
return pages.map(({ slug, title, otherSections, services }) => {
|
||||
return pages.map(({ slug, title, otherSections, services, notableMentions, furtherInfo, wordOfWarning, categoryName, intro }) => {
|
||||
return {
|
||||
params: { section: slug },
|
||||
props: { title, otherSections, services },
|
||||
props: { title, otherSections, services, notableMentions, furtherInfo, wordOfWarning, categoryName, intro },
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const makePaginationLinks = () => {
|
||||
const index = otherSections.findIndex(section => section.name === title);
|
||||
const previousSection = index > 0 ? otherSections[index - 1].name : null;
|
||||
const nextSection = index < otherSections.length - 1 ? otherSections[index + 1].name : null;
|
||||
return { previous: previousSection, next: nextSection };
|
||||
};
|
||||
|
||||
const { previous, next } = makePaginationLinks();
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Awesome Privacy">
|
||||
<Main>
|
||||
|
||||
<h1>{title}</h1>
|
||||
<h2>{title}</h2>
|
||||
|
||||
{intro && (
|
||||
<section class="intro">
|
||||
<p set:html={parseMarkdown(intro)}></p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<ServiceList title={title} services={services} />
|
||||
|
||||
{notableMentions && (
|
||||
<section class="notable-mentions">
|
||||
<h3>Notable Mentions</h3>
|
||||
{ Array.isArray(notableMentions) ?
|
||||
<ul>
|
||||
{notableMentions.map((mention) => (
|
||||
<li>
|
||||
<a href={mention.url}>{mention.name}</a>
|
||||
{mention.description && (
|
||||
<span>- </span>
|
||||
<span set:html={parseMarkdown(mention.description)}></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul> :
|
||||
<p set:html={parseMarkdown(notableMentions)}></p>
|
||||
}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{furtherInfo && (
|
||||
<section class="further-info">
|
||||
<h3>Notes</h3>
|
||||
<p set:html={parseMarkdown(furtherInfo)}></p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{wordOfWarning && (
|
||||
<section class="word-of-warning">
|
||||
<h3>Word of Warning</h3>
|
||||
<p set:html={parseMarkdown(wordOfWarning)}></p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div class="pagination-navigation">
|
||||
{ previous ? (
|
||||
<Button url={`/${slugify(categoryName)}/${slugify(previous)}`}>
|
||||
<span>← Previous</span>
|
||||
<p>{previous}</p>
|
||||
</Button>
|
||||
) : <p class="nothing"></p>}
|
||||
<a href={`/${slugify(categoryName)}`} class="go-to-category">
|
||||
View all in {categoryName} ({otherSections.length})
|
||||
</a>
|
||||
{ next && (
|
||||
<Button url={`/${slugify(categoryName)}/${slugify(next)}`}>
|
||||
<span>Next →</span>
|
||||
<p>{next}</p>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Main>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 1000px;
|
||||
max-width: calc(100% - 2rem);
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
section {
|
||||
padding-bottom: 1rem;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 2px solid var(--accent-3);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin: -2rem 0 2rem -2rem;
|
||||
box-shadow: 6px 6px 0 var(--foreground);
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
width: fit-content;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.pagination-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
:global(.button) {
|
||||
min-width: 120px;
|
||||
width: fit-content;
|
||||
padding: 0.25rem 1rem;
|
||||
text-align: right;
|
||||
&:first-child { text-align: left; }
|
||||
p {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
}
|
||||
.nothing {
|
||||
width: 120px;
|
||||
}
|
||||
.go-to-category {
|
||||
color: var(--foreground);
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
.further-info, .notable-mentions, .word-of-warning {
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
:global(p) {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
:global(strong) {
|
||||
font-weight: 500;
|
||||
}
|
||||
:global(a) {
|
||||
color: var(--foreground);
|
||||
transition: all 0.15s ease-in-out;
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
list-style: circle;
|
||||
padding-left: 1rem;
|
||||
font-size: 0.9rem;
|
||||
li {
|
||||
margin-bottom: 0.25rem;
|
||||
:global(p) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
---
|
||||
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import SectionList from '@components/things/SectionList.astro';
|
||||
import Main from '@components/scafold/MainCard.astro';
|
||||
|
||||
import { fetchData, slugify } from '@utils/fetch-data';
|
||||
|
||||
import yaml from 'js-yaml';
|
||||
import type { AwesomePrivacy, Section, Service } from '../types/Service';
|
||||
import type { Section } from '../types/Service';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
|
|
@ -16,16 +16,6 @@ interface Props {
|
|||
const { title, sections } = Astro.props;
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const fetchData = async (): Promise<AwesomePrivacy> => {
|
||||
return await fetch('http://localhost:4321/awesome-privacy.yml')
|
||||
.then((res) => res.text())
|
||||
.then((data) => yaml.load(data))
|
||||
.catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
const slugify = (title: string) => {
|
||||
return title.toLowerCase().replace(/\s/g, '-');
|
||||
};
|
||||
|
||||
const pages = await fetchData().then((data) => {
|
||||
return data.categories.map((category) => {
|
||||
|
|
@ -45,29 +35,14 @@ export async function getStaticPaths() {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Awesome Privacy">
|
||||
<!-- <Hero /> -->
|
||||
<main>
|
||||
<h1>Title: {title}</h1>
|
||||
<!-- {sections.map((section) => (
|
||||
<section>
|
||||
<h2>{section.name}</h2>
|
||||
</section>
|
||||
))} -->
|
||||
</main>
|
||||
<Main>
|
||||
<SectionList title={title} sections={sections} bigTitle={true} />
|
||||
</Main>
|
||||
</Layout>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 1000px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
import yaml from 'js-yaml';
|
||||
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Card from '../../components/Card.astro';
|
||||
import Hero from '../../components/Hero.astro';
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import Card from '@components/Card.astro';
|
||||
import Hero from '@components/Hero.astro';
|
||||
import { AwesomePrivacy, Section, Service } from '../../types/Service';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,34 @@
|
|||
---
|
||||
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import Card from '@components/Card.astro';
|
||||
import Hero from '@components/Hero.astro';
|
||||
import Search from '@components/Search.astro';
|
||||
import SectionList from '@components/things/SectionList.astro';
|
||||
|
||||
import { fetchData } from '@utils/fetch-data';
|
||||
import Button from '@components/form/Button.astro';
|
||||
|
||||
const categories = (await fetchData()).categories;
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Awesome Privacy">
|
||||
<Layout title="Awesome Privacy" hideNav={true}>
|
||||
<Hero />
|
||||
<main>
|
||||
<Card title="Email" body="" href="/" />
|
||||
<h2>Search</h2>
|
||||
<Search />
|
||||
<h2 class="browse-title">Browse</h2>
|
||||
<ul class="categories">
|
||||
{categories.map((category) => (
|
||||
<li class="category">
|
||||
<SectionList title={category.name} sections={category.sections} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div class="view-all">
|
||||
<Button url="/all" text="View All" />
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
|
|
@ -17,10 +36,59 @@ import Hero from '../components/Hero.astro';
|
|||
main {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
width: 1000px;
|
||||
width: 1100px;
|
||||
max-width: calc(100% - 2rem);
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.view-all {
|
||||
width: 8rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--accent-3);
|
||||
font-family: "Lekton", sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.categories {
|
||||
columns: 6 300px;
|
||||
column-gap: 1rem;
|
||||
.category {
|
||||
background: var(--accent-fg);
|
||||
border: 2px solid var(--foreground);
|
||||
border-radius: var(--curve-sm);
|
||||
box-shadow: 4px 4px 0 var(--foreground);
|
||||
padding: 1rem;
|
||||
width: 85%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
.category-title {
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
h3 {
|
||||
font-family: "Lekton", sans-serif;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.sections {
|
||||
padding-left: 1rem;
|
||||
.section {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.service-count {
|
||||
color: var(--accent-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue