filipe/personal-website
1
1
Fork 0
Code Issues Pull requests Activity

fixed footnotes I think. i18n later

Browse source
This commit is contained in:
Filipe Medeiros 2023-12-20 15:54:37 +01:00
parent 9a3a60829d
commit ea0c2b1f96
Signed by: filipe
GPG key ID: 9533BD5467CC1E78
15 changed files with 374 additions and 545 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/astro.config.js
View file

@ -1,9 +1,9 @@
import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config';
import mdx from "@astrojs/mdx";
import mdx from '@astrojs/mdx';
// https://astro.build/config
export default defineConfig({
integrations: [tailwind(), mdx()]
integrations: [tailwind(), mdx()],
});

11
frontend/package.json
View file

@ -15,16 +15,13 @@
"dependencies": {
"@astrojs/mdx": "^1.1.5",
"@astrojs/tailwind": "^5.0.3",
"@sanity/client": "^6.9.1",
"@sanity/image-url": "^1.0.2",
"astro": "^4.0.1",
"sharp": "^0.33.0"
"astro": "^4.0.6",
"sharp": "^0.33.1"
},
"devDependencies": {
"@portabletext/types": "^2.0.8",
"@types/node": "^20.10.3",
"@types/node": "^20.10.5",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6"
"tailwindcss": "^3.4.0"
}
}

734
frontend/pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

45
frontend/src/components/BlogPostFootnotes.astro
View file

@ -1,45 +0,0 @@
---
import type { PortableTextBlock } from '@portabletext/types';
import { PortableText } from 'astro-portabletext';
import InlineLink from './portableText/components/InlineLink.astro';
import langToFootnoteString from '../lib/langToFootnoteString';
export interface Props {
blogPostContent: PortableTextBlock[];
}
const footnoteString = langToFootnoteString(Astro);
const { blogPostContent } = Astro.props;
const blocksWithFootnotes = blogPostContent.filter((block) =>
block.markDefs?.some((mark) => mark._type === 'footnote'),
);
const footnotes: PortableTextBlock[][] = [];
for (const block of blocksWithFootnotes) {
for (const mark of block.markDefs!) {
footnotes.push(mark.content as PortableTextBlock[]);
}
}
---
<ul>
{
footnotes.map((footnote, index) => (
<li id={`${footnoteString}-${index + 1}`} class="flex gap-1">
<span>{index + 1}.</span>
<div>
<PortableText
value={footnote}
components={{
mark: {
link: InlineLink,
},
}}
/>
</div>
</li>
))
}
</ul>

10
frontend/src/components/mdx/blogPostComponents.ts → frontend/src/components/mdx/blogPostComponents.tsx
View file

@ -1,4 +1,4 @@
import ShowableFigure from './components/ShowableFigure.astro';
import ShowableFigureComponent from './components/ShowableFigure.astro';
import NumberListItem from './components/NumberListItem.astro';
import InlineLink from './components/InlineLink.astro';
import InlineCode from './components/InlineCode.astro';
@ -12,10 +12,11 @@ import Heading4 from './components/Heading4.astro';
import Heading5 from './components/Heading5.astro';
import Heading6 from './components/Heading6.astro';
import Paragraph from './components/Paragraph.astro';
import Footnote from './components/Footnote.astro';
import LinkToFootnote from './components/LinkToFootnote.astro';
import Null from './components/Null.astro';
const components = {
img: ShowableFigure,
img: ShowableFigureComponent,
h1: Heading1,
h2: Heading2,
h3: Heading3,
@ -27,6 +28,9 @@ const components = {
a: InlineLink,
ul: BulletList,
ol: NumberList,
Footnote: LinkToFootnote,
ShowableFigure: ShowableFigureComponent,
FootnoteLink: Null,
};
export default components;

23
frontend/src/components/mdx/blogPostFootnotesComponents.tsx Normal file
View file

@ -0,0 +1,23 @@
import InlineLink from './components/InlineLink.astro';
import Footnote from './components/Footnote.astro';
import Null from './components/Null.astro';
const components = {
img: Null,
h1: Null,
h2: Null,
h3: Null,
h4: Null,
h5: Null,
h6: Null,
p: Null,
code: Null,
a: Null,
ul: Null,
ol: Null,
ShowableFigure: Null,
Footnote: Footnote,
FootnoteLink: InlineLink,
};
export default components;

24
frontend/src/components/mdx/components/Footnote.astro
View file

@ -1,31 +1,23 @@
---
import InlineLink from '../../InlineLink.astro';
import langToFootnoteString from '../../../lib/langToFootnoteString';
import blogPostComponents from '../blogPostComponents';
// @ts-expect-error Seems to be a bug between patches on Astro's side?
const footnoteString = langToFootnoteString(Astro);
// This is an incredible hack!! Ahah
// Not sure if safe, but seems to be
declare global {
var footnoteCounts: Record<string, number> | undefined;
}
if (!globalThis.footnoteCounts) {
globalThis.footnoteCounts = {};
}
if (globalThis.footnoteCounts[Astro.params.slug!] === undefined) {
globalThis.footnoteCounts[Astro.params.slug!] = 1;
globalThis.footnoteCounts[Astro.params.slug!] = { content: 0, footnotes: 1 };
} else {
globalThis.footnoteCounts[Astro.params.slug!]++;
globalThis.footnoteCounts[Astro.params.slug!].footnotes++;
}
const footnoteCount = globalThis.footnoteCounts[Astro.params.slug!];
const footnoteCount = globalThis.footnoteCounts[Astro.params.slug!].footnotes;
---
<slot /><InlineLink
class="align-super ml-1 text-sm"
href={`#${footnoteString}-${footnoteCount}`}
>
{footnoteCount}
</InlineLink>
<li id={`${footnoteString}-${footnoteCount}`} class="flex gap-1">
<slot name="footnote" />
</li>

41
frontend/src/components/mdx/components/LinkToFootnote.astro Normal file
View file

@ -0,0 +1,41 @@
---
import InlineLink from '../../InlineLink.astro';
import langToFootnoteString from '../../../lib/langToFootnoteString';
// @ts-expect-error Seems to be a bug between patches on Astro's side?
const footnoteString = langToFootnoteString(Astro);
// This is an incredible hack!! Ahah
// Not sure if safe, but seems to be
declare global {
var footnoteCounts:
| Record<string, { content: number; footnotes: number }>
| undefined;
}
if (!globalThis.footnoteCounts) {
globalThis.footnoteCounts = {};
}
if (globalThis.footnoteCounts[Astro.params.slug!] === undefined) {
globalThis.footnoteCounts[Astro.params.slug!] = { content: 1, footnotes: 0 };
} else {
globalThis.footnoteCounts[Astro.params.slug!].content++;
}
const footnoteCount = globalThis.footnoteCounts[Astro.params.slug!].content;
// I'm not using Astro locales because I like custom URLs
// Maybe one day they will implement that
const english = Astro.url.toString().includes('blog/');
---
<slot /><InlineLink
class="align-super ml-1 text-sm"
href={`#${footnoteString}-${footnoteCount}`}
title={english
? 'Link to corresponding footnote'
: 'Ligação para a nota de rodapé correspondente'}
>
{footnoteCount}
</InlineLink>

0
frontend/src/components/mdx/components/Null.astro Normal file
View file

2
frontend/src/components/mdx/components/ShowableFigure.astro
View file

@ -2,8 +2,6 @@
import ShowableImage from './ShowableImage.astro';
const caption = Astro.slots.default;
console.log();
---
{

4
frontend/src/content/blog/pt/somos-uma-familia-pobre copy.mdx
View file

@ -19,8 +19,6 @@ linkPreview:
desfocado.
---
import ShowableFigure from '../../../components/mdx/components/ShowableFigure.astro'
import Footnote from '../../../components/mdx/components/Footnote.astro'
import image from '../../../assets/blog/posts/somos-uma-familia-pobre/somos-uma-familia-pobre.jpeg'
Recentemente, com grande taxa de adesão, as trabalhadoras e trabalhadores da Nobre Alimentação - conhecida pelo fabrico de enchidos - [organizaram greves e manifestações](https://sicnoticias.pt/pais/2023-04-28-Uma-familia-pobre-trabalhadores-da-Nobre-em-greve-9e790445), utilizando essas ferramentas fundamentais para expressar o seu profundo descontentamento em relação à empresa.
@ -32,4 +30,4 @@ As manifestantes aproveitaram para virar este lema do avesso e trazê-lo para a
<ShowableFigure src={image} alt="alt text">Some [caption](https://example.com)</ShowableFigure>
<Footnote>Olá</Footnote>
<Footnote>Olá<span slot="footnote">Eu sou a nota</span></Footnote>

4
frontend/src/content/blog/pt/somos-uma-familia-pobre.mdx
View file

@ -19,8 +19,6 @@ linkPreview:
desfocado.
---
import ShowableFigure from '../../../components/mdx/components/ShowableFigure.astro'
import Footnote from '../../../components/mdx/components/Footnote.astro'
import image from '../../../assets/blog/posts/somos-uma-familia-pobre/somos-uma-familia-pobre.jpeg'
Recentemente, com grande taxa de adesão, as trabalhadoras e trabalhadores da Nobre Alimentação - conhecida pelo fabrico de enchidos - [organizaram greves e manifestações](https://sicnoticias.pt/pais/2023-04-28-Uma-familia-pobre-trabalhadores-da-Nobre-em-greve-9e790445), utilizando essas ferramentas fundamentais para expressar o seu profundo descontentamento em relação à empresa.
@ -32,4 +30,4 @@ As manifestantes aproveitaram para virar este lema do avesso e trazê-lo para a
<ShowableFigure src={image} alt="alt text">Some [caption](https://example.com)</ShowableFigure>
<Footnote>Olá</Footnote>
<Footnote>[Olá](https://example.com)<Fragment slot="footnote">Outra <FootnoteLink href="https://example.com">com link</FootnoteLink></Fragment></Footnote>

8
frontend/src/layouts/Layout.astro
View file

@ -8,12 +8,12 @@ export interface Props {
lang: string;
}
const { title, ptUrl, enUrl, lang } = Astro.props;
const { title, ptUrl, enUrl } = Astro.props;
const { footer } = Astro.slots;
const hasFooter = !!footer;
---
<html lang={lang}>
<html lang={Astro.currentLocale}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -33,14 +33,14 @@ const hasFooter = !!footer;
>
<ul class="flex gap-3">
{
lang !== 'pt' && (
Astro.currentLocale !== 'pt' && (
<li>
<InlineLink href={ptUrl}>PT</InlineLink>
</li>
)
}
{
lang !== 'en' && (
Astro.currentLocale !== 'en' && (
<li>
<InlineLink href={enUrl}>EN</InlineLink>
</li>

1
frontend/src/pages/blog/[slug]/index.astro
View file

@ -4,7 +4,6 @@ import ButtonLink from '../../../components/ButtonLink.astro';
import PageTitle from '../../../components/PageTitle.astro';
import Layout from '../../../layouts/Layout.astro';
import BlogPostMetadata from '../../../components/BlogPostMetadata.astro';
import BlogPostFootnotes from '../../../components/BlogPostFootnotes.astro';
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import blogPostComponents from '../../../components/mdx/blogPostComponents';

6
frontend/src/pages/blogue/[slug]/index.astro
View file

@ -4,10 +4,10 @@ import ButtonLink from '../../../components/ButtonLink.astro';
import PageTitle from '../../../components/PageTitle.astro';
import Layout from '../../../layouts/Layout.astro';
import BlogPostMetadata from '../../../components/BlogPostMetadata.astro';
import BlogPostFootnotes from '../../../components/BlogPostFootnotes.astro';
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
import blogPostComponents from '../../../components/mdx/blogPostComponents';
import blogPostFootnotesComponents from '../../../components/mdx/blogPostFootnotesComponents';
export interface Props {
blogPost: CollectionEntry<'blog'>;
@ -77,7 +77,9 @@ const formattedPublishDate = publishDate.toLocaleDateString('pt', {
<Content components={blogPostComponents} />
</div>
<hr class="my-5 border-t border-primary-700" />
<!-- <BlogPostFootnotes blogPostContent={content} /> -->
<ol>
<Content components={blogPostFootnotesComponents} />
</ol>
</article>
<Fragment slot="footer">
<nav class="flex gap-4">