32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore
33 | voluptate quo deleniti animi laboriosam.{' '}
34 | Possimus ullam velit rem itaque consectetur, in distinctio? Lorem ipsum, dolor sit amet
35 | consectetur adipisicing elit. Soluta repellendus quia quos obcaecati nihil. Laudantium non accusantium, voluptate eum nesciunt
36 | at suscipit quis est soluta?
37 |
38 |
39 |
40 |
41 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem error incidunt a doloremque voluptatem porro inventore{' '}
42 | voluptate quo deleniti animi laboriosam. Possimus ullam velit rem itaque consectetur, in distinctio?
43 |
}
68 |
69 | )}
70 |
71 |
72 | );
73 | }
74 |
75 | function CopyIcon() {
76 | return (
77 |
83 | );
84 | }
85 |
86 | const Caption = styled.small`
87 | position: relative;
88 | top: -2.2rem;
89 | word-break: break-word;
90 | font-size: 1.2rem;
91 | `;
92 |
93 | const CopyButton = styled.button<{ copied: boolean }>`
94 | position: absolute;
95 | border: none;
96 | top: 2.4rem;
97 | right: 2.4rem;
98 | visibility: hidden;
99 | background-color: rgba(var(--secondary), 0.1);
100 | cursor: pointer;
101 | width: 3rem;
102 | height: 3rem;
103 | line-height: normal;
104 | border-radius: 0.3rem;
105 | color: rgb(var(--text));
106 | z-index: 1;
107 | line-height: 1;
108 |
109 | &::after {
110 | position: absolute;
111 | content: 'Copied';
112 | visibility: ${(p) => (p.copied ? 'visible' : 'hidden')};
113 | top: 0;
114 | left: -4rem;
115 | height: 3rem;
116 | font-weight: bold;
117 | border-radius: 0.3rem;
118 | line-height: 1.5;
119 | font-size: 1.4rem;
120 | padding: 0.5rem 1rem;
121 | color: rgb(var(--primary));
122 | background-color: rgb(var(--secondary));
123 | }
124 |
125 | &:hover {
126 | background-color: rgba(var(--secondary), 0.2);
127 | }
128 | `;
129 |
130 | const CodeWrapper = styled.div<{ language: string }>`
131 | position: relative;
132 | border-radius: 0.3em;
133 | margin-top: 4.5rem;
134 | transition: visibility 0.1s;
135 | font-size: 1.6rem;
136 |
137 | &:not(:last-child) {
138 | margin-bottom: 3rem;
139 | }
140 |
141 | &::after {
142 | position: absolute;
143 | height: 2.2em;
144 | content: '${(p) => p.language}';
145 | right: 2.4rem;
146 | padding: 1.2rem;
147 | top: -2em;
148 | line-height: 1rem;
149 | border-radius: 0.3em;
150 | font-size: 1.5rem;
151 | text-transform: uppercase;
152 | background-color: inherit;
153 | font-weight: bold;
154 | text-align: center;
155 | }
156 |
157 | &:hover {
158 | ${CopyButton} {
159 | visibility: visible;
160 | }
161 | }
162 | `;
163 |
164 | const Pre = styled.pre`
165 | text-align: left;
166 | margin: 1em 0;
167 | padding: 0.5em;
168 | overflow: scroll;
169 | `;
170 |
171 | const Line = styled.div`
172 | display: flex;
173 | `;
174 |
175 | const LineNo = styled.span`
176 | display: table-cell;
177 | text-align: right;
178 | padding-right: 1em;
179 | user-select: none;
180 | opacity: 0.5;
181 | `;
182 |
183 | const LineContent = styled.span`
184 | display: table-cell;
185 | `;
186 |
--------------------------------------------------------------------------------
/posts/test-article-4.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Officia culpa tempor eu dolore dolor esse ex incididunt ea ullamco mollit occaecat cupidatat irure. 4
3 | description: Aliquip fugiat nostrud nulla eu exercitation culpa officia irure dolor elit eu duis. Irure exercitation ex ad id anim fugiat mollit magna et. Proident magna exercitation amet irure est anim dolore. Sint reprehenderit ullamco aliquip dolor veniam exercitation excepteur ex cupidatat aute fugiat dolore minim. Labore reprehenderit duis nostrud eu dolore consequat sit tempor nisi irure elit dolore irure culpa. Duis ea do quis magna adipisicing laboris officia Lorem pariatur. Deserunt ex cillum incididunt id esse ipsum.
4 | date: '2021-07-31'
5 | tags: nextjs,next,something-else,idk
6 | imageUrl: '/posts/test-article/example-image-1.jpeg'
7 | ---
8 |
9 | ## HISTORY, PURPOSE AND USAGE
10 |
11 | Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:
12 |
13 |
18 |
19 | ## HEDONIST ROOTS
20 |
21 | Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine [answered a curious reader](https://www.straightdope.com/columns/read/2290/what-does-the-filler-text-lorem-ipsum-mean/), “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”
22 |
23 | **As Cicero would put it, “Um, not so fast.”**
24 |
25 | The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
26 |
27 | Richard McClintock, a Latin scholar from **Hampden-Sydney College**, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.
28 |
29 | In particular, the garbled words of lorem ipsum bear an unmistakable resemblance to sections `1.10.32–33` of Cicero's work, with the most notable passage excerpted below:
30 |
31 |
32 |
33 | McClintock's eye for detail certainly helped narrow the whereabouts of lorem ipsum's origin, however, the “how and when” still remain something of a mystery, with competing theories and timelines.
34 |
35 | ## Creation timelines for the standard lorem ipsum passage vary, with some citing the 15th century and others the 20th.
36 |
37 | So how did the classical Latin become so incoherent? According to McClintock, a 15th century typesetter likely scrambled part of Cicero's De Finibus in order to provide placeholder text to mockup various fonts for a type specimen book.
38 |
39 | - It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
40 | - And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
41 |
42 | McClintock wrote to Before & After to explain his discovery;
43 |
44 |
45 |
46 | It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
47 |
48 | And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
49 |
50 |
71 |
--------------------------------------------------------------------------------
/posts/test-article-5.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Officia culpa tempor eu dolore dolor esse ex incididunt ea ullamco mollit occaecat cupidatat irure. 5
3 | description: Aliquip fugiat nostrud nulla eu exercitation culpa officia irure dolor elit eu duis. Irure exercitation ex ad id anim fugiat mollit magna et. Proident magna exercitation amet irure est anim dolore. Sint reprehenderit ullamco aliquip dolor veniam exercitation excepteur ex cupidatat aute fugiat dolore minim. Labore reprehenderit duis nostrud eu dolore consequat sit tempor nisi irure elit dolore irure culpa. Duis ea do quis magna adipisicing laboris officia Lorem pariatur. Deserunt ex cillum incididunt id esse ipsum.
4 | date: '2021-07-31'
5 | tags: nextjs,next,something-else,idk
6 | imageUrl: '/posts/test-article/example-image-1.jpeg'
7 | ---
8 |
9 | ## HISTORY, PURPOSE AND USAGE
10 |
11 | Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:
12 |
13 |
18 |
19 | ## HEDONIST ROOTS
20 |
21 | Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine [answered a curious reader](https://www.straightdope.com/columns/read/2290/what-does-the-filler-text-lorem-ipsum-mean/), “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”
22 |
23 | **As Cicero would put it, “Um, not so fast.”**
24 |
25 | The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
26 |
27 | Richard McClintock, a Latin scholar from **Hampden-Sydney College**, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.
28 |
29 | In particular, the garbled words of lorem ipsum bear an unmistakable resemblance to sections `1.10.32–33` of Cicero's work, with the most notable passage excerpted below:
30 |
31 |
32 |
33 | McClintock's eye for detail certainly helped narrow the whereabouts of lorem ipsum's origin, however, the “how and when” still remain something of a mystery, with competing theories and timelines.
34 |
35 | ## Creation timelines for the standard lorem ipsum passage vary, with some citing the 15th century and others the 20th.
36 |
37 | So how did the classical Latin become so incoherent? According to McClintock, a 15th century typesetter likely scrambled part of Cicero's De Finibus in order to provide placeholder text to mockup various fonts for a type specimen book.
38 |
39 | - It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
40 | - And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
41 |
42 | McClintock wrote to Before & After to explain his discovery;
43 |
44 |
45 |
46 | It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
47 |
48 | And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
49 |
50 |
71 |
--------------------------------------------------------------------------------
/posts/test-article-6.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Officia culpa tempor eu dolore dolor esse ex incididunt ea ullamco mollit occaecat cupidatat irure. 6
3 | description: Aliquip fugiat nostrud nulla eu exercitation culpa officia irure dolor elit eu duis. Irure exercitation ex ad id anim fugiat mollit magna et. Proident magna exercitation amet irure est anim dolore. Sint reprehenderit ullamco aliquip dolor veniam exercitation excepteur ex cupidatat aute fugiat dolore minim. Labore reprehenderit duis nostrud eu dolore consequat sit tempor nisi irure elit dolore irure culpa. Duis ea do quis magna adipisicing laboris officia Lorem pariatur. Deserunt ex cillum incididunt id esse ipsum.
4 | date: '2021-07-31'
5 | tags: nextjs,next,something-else,idk
6 | imageUrl: '/posts/test-article/example-image-1.jpeg'
7 | ---
8 |
9 | ## HISTORY, PURPOSE AND USAGE
10 |
11 | Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:
12 |
13 |
18 |
19 | ## HEDONIST ROOTS
20 |
21 | Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine [answered a curious reader](https://www.straightdope.com/columns/read/2290/what-does-the-filler-text-lorem-ipsum-mean/), “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”
22 |
23 | **As Cicero would put it, “Um, not so fast.”**
24 |
25 | The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
26 |
27 | Richard McClintock, a Latin scholar from **Hampden-Sydney College**, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.
28 |
29 | In particular, the garbled words of lorem ipsum bear an unmistakable resemblance to sections `1.10.32–33` of Cicero's work, with the most notable passage excerpted below:
30 |
31 |
32 |
33 | McClintock's eye for detail certainly helped narrow the whereabouts of lorem ipsum's origin, however, the “how and when” still remain something of a mystery, with competing theories and timelines.
34 |
35 | ## Creation timelines for the standard lorem ipsum passage vary, with some citing the 15th century and others the 20th.
36 |
37 | So how did the classical Latin become so incoherent? According to McClintock, a 15th century typesetter likely scrambled part of Cicero's De Finibus in order to provide placeholder text to mockup various fonts for a type specimen book.
38 |
39 | - It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
40 | - And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
41 |
42 | McClintock wrote to Before & After to explain his discovery;
43 |
44 |
45 |
46 | It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
47 |
48 | And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
49 |
50 |
71 |
--------------------------------------------------------------------------------
/posts/test-article.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Officia culpa tempor eu dolore dolor esse ex incididunt ea ullamco mollit occaecat cupidatat irure.
3 | description: Aliquip fugiat nostrud nulla eu exercitation culpa officia irure dolor elit eu duis. Irure exercitation ex ad id anim fugiat mollit magna et. Proident magna exercitation amet irure est anim dolore. Sint reprehenderit ullamco aliquip dolor veniam exercitation excepteur ex cupidatat aute fugiat dolore minim. Labore reprehenderit duis nostrud eu dolore consequat sit tempor nisi irure elit dolore irure culpa. Duis ea do quis magna adipisicing laboris officia Lorem pariatur. Deserunt ex cillum incididunt id esse ipsum.
4 | date: '2021-07-31'
5 | tags: nextjs,next,something-else,idk
6 | imageUrl: '/posts/test-article/example-image-1.jpeg'
7 | ---
8 |
9 | ## HISTORY, PURPOSE AND USAGE
10 |
11 | Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:
12 |
13 |
18 |
19 | ## HEDONIST ROOTS
20 |
21 | Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine [answered a curious reader](https://www.straightdope.com/columns/read/2290/what-does-the-filler-text-lorem-ipsum-mean/), “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”
22 |
23 | **As Cicero would put it, “Um, not so fast.”**
24 |
25 | The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
26 |
27 | Richard McClintock, a Latin scholar from **Hampden-Sydney College**, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.
28 |
29 | In particular, the garbled words of lorem ipsum bear an unmistakable resemblance to sections `1.10.32–33` of Cicero's work, with the most notable passage excerpted below:
30 |
31 |
32 |
33 | McClintock's eye for detail certainly helped narrow the whereabouts of lorem ipsum's origin, however, the “how and when” still remain something of a mystery, with competing theories and timelines.
34 |
35 | ## Creation timelines for the standard lorem ipsum passage vary, with some citing the 15th century and others the 20th.
36 |
37 | So how did the classical Latin become so incoherent? According to McClintock, a 15th century typesetter likely scrambled part of Cicero's De Finibus in order to provide placeholder text to mockup various fonts for a type specimen book.
38 |
39 | - It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
40 | - And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
41 |
42 | McClintock wrote to Before & After to explain his discovery;
43 |
44 |
45 |
46 | It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
47 |
48 | And anyways, as Cecil Adams reasoned, “[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
49 |
50 |
71 |
--------------------------------------------------------------------------------
/pages/blog/[slug].tsx:
--------------------------------------------------------------------------------
1 | import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
2 | import Head from 'next/head';
3 | import React, { useEffect, useRef, useState } from 'react';
4 | import styled from 'styled-components';
5 | import { staticRequest } from 'tinacms';
6 | import Container from 'components/Container';
7 | import MDXRichText from 'components/MDXRichText';
8 | import { NonNullableChildrenDeep } from 'types';
9 | import { formatDate } from 'utils/formatDate';
10 | import { media } from 'utils/media';
11 | import { getReadTime } from 'utils/readTime';
12 | import Header from 'views/SingleArticlePage/Header';
13 | import MetadataHead from 'views/SingleArticlePage/MetadataHead';
14 | import OpenGraphHead from 'views/SingleArticlePage/OpenGraphHead';
15 | import ShareWidget from 'views/SingleArticlePage/ShareWidget';
16 | import StructuredDataHead from 'views/SingleArticlePage/StructuredDataHead';
17 | import { Posts, PostsDocument, Query } from '.tina/__generated__/types';
18 |
19 | export default function SingleArticlePage(props: InferGetStaticPropsType) {
20 | const contentRef = useRef(null);
21 | const [readTime, setReadTime] = useState('');
22 |
23 | useEffect(() => {
24 | calculateReadTime();
25 | lazyLoadPrismTheme();
26 |
27 | function calculateReadTime() {
28 | const currentContent = contentRef.current;
29 | if (currentContent) {
30 | setReadTime(getReadTime(currentContent.textContent || ''));
31 | }
32 | }
33 |
34 | function lazyLoadPrismTheme() {
35 | const prismThemeLinkEl = document.querySelector('link[data-id="prism-theme"]');
36 |
37 | if (!prismThemeLinkEl) {
38 | const headEl = document.querySelector('head');
39 | if (headEl) {
40 | const newEl = document.createElement('link');
41 | newEl.setAttribute('data-id', 'prism-theme');
42 | newEl.setAttribute('rel', 'stylesheet');
43 | newEl.setAttribute('href', '/prism-theme.css');
44 | newEl.setAttribute('media', 'print');
45 | newEl.setAttribute('onload', "this.media='all'; this.onload=null;");
46 | headEl.appendChild(newEl);
47 | }
48 | }
49 | }
50 | }, []);
51 |
52 | const { slug, data } = props;
53 | const content = data.getPostsDocument.data.body;
54 |
55 | if (!data) {
56 | return null;
57 | }
58 | const { title, description, date, tags, imageUrl } = data.getPostsDocument.data as NonNullableChildrenDeep;
59 | const meta = { title, description, date: date, tags, imageUrl, author: '' };
60 | const formattedDate = formatDate(new Date(date));
61 | const absoluteImageUrl = imageUrl.replace(/\/+/, '/');
62 | return (
63 | <>
64 |
65 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | );
79 | }
80 |
81 | export async function getStaticPaths() {
82 | const postsListData = await staticRequest({
83 | query: `
84 | query PostsSlugs{
85 | getPostsList{
86 | edges{
87 | node{
88 | sys{
89 | basename
90 | }
91 | }
92 | }
93 | }
94 | }
95 | `,
96 | variables: {},
97 | });
98 |
99 | if (!postsListData) {
100 | return {
101 | paths: [],
102 | fallback: false,
103 | };
104 | }
105 |
106 | type NullAwarePostsList = { getPostsList: NonNullableChildrenDeep };
107 | return {
108 | paths: (postsListData as NullAwarePostsList).getPostsList.edges.map((edge) => ({
109 | params: { slug: normalizePostName(edge.node.sys.basename) },
110 | })),
111 | fallback: false,
112 | };
113 | }
114 |
115 | function normalizePostName(postName: string) {
116 | return postName.replace('.mdx', '');
117 | }
118 |
119 | export async function getStaticProps({ params }: GetStaticPropsContext<{ slug: string }>) {
120 | const { slug } = params as { slug: string };
121 | const variables = { relativePath: `${slug}.mdx` };
122 | const query = `
123 | query BlogPostQuery($relativePath: String!) {
124 | getPostsDocument(relativePath: $relativePath) {
125 | data {
126 | title
127 | description
128 | date
129 | tags
130 | imageUrl
131 | body
132 | }
133 | }
134 | }
135 | `;
136 |
137 | const data = (await staticRequest({
138 | query: query,
139 | variables: variables,
140 | })) as { getPostsDocument: PostsDocument };
141 |
142 | return {
143 | props: { slug, variables, query, data },
144 | };
145 | }
146 |
147 | const CustomContainer = styled(Container)`
148 | position: relative;
149 | max-width: 90rem;
150 | margin: 10rem auto;
151 |
152 | ${media('<=tablet')} {
153 | margin: 5rem auto;
154 | }
155 | `;
156 |
--------------------------------------------------------------------------------
/posts/test-article-3.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: >-
3 | Officiaaa culpa tempor eu dolore dolor esse ex incididunt ea ullamco mollit
4 | occaecat cupidatat irure. 3
5 | description: >-
6 | Aliquip fdassadadassugiat nostrud nulla eu exercitation culpa officia irure
7 | dolor elit eu duis. Irure exercitation ex ad id anim fugiat mollit magna et.
8 | Proident magna exercitation amet irure est anim dolore. Sint reprehenderit
9 | ullamco aliquip dolor veniam exercitation excepteur ex cupidatat aute fugiat
10 | dolore minim. Labore reprehenderit duis nostrud eu dolore consequat sit tempor
11 | nisi irure elit dolore irure culpa. Duis ea do quis magna adipisicing laboris
12 | officia Lorem pariatur. Deserunt ex cillum incididunt id esse ipsum.
13 | date: '2021-07-31'
14 | tags: 'nextjs,next,something-else,idk'
15 | imageUrl: /posts/test-article/example-image-1.jpeg
16 | ---
17 |
18 | ## HISTORY, PURPOSE AND USAGE
19 |
20 | Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:
21 |
22 |
27 |
28 | ## HEDONIST ROOTS
29 |
30 | Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine [answered a curious reader](https://www.straightdope.com/columns/read/2290/what-does-the-filler-text-lorem-ipsum-mean/), “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”
31 |
32 | As Cicero would put it, “Um, not so fast.”
33 |
34 | The placeholder text, beginning with the line “Lorem ipsum dolor sit amet, consectetur adipiscing elit”, looks like Latin because in its youth, centuries ago, it was Latin.
35 |
36 | Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.
37 |
38 | In particular, the garbled words of lorem ipsum bear an unmistakable resemblance to sections 1.10.32–33 of Cicero's work, with the most notable passage excerpted below:
39 |
40 |
41 |
42 | McClintock's eye for detail certainly helped narrow the whereabouts of lorem ipsum's origin, however, the “how and when” still remain something of a mystery, with competing theories and timelines.
43 |
44 | ## Creation timelines for the standard lorem ipsum passage vary, with some citing the 15th century and others the 20th.
45 |
46 | So how did the classical Latin become so incoherent? According to McClintock, a 15th century typesetter likely scrambled part of Cicero's De Finibus in order to provide placeholder text to mockup various fonts for a type specimen book.
47 |
48 | * It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
49 | * And anyways, as Cecil Adams reasoned, “\[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
50 |
51 | McClintock wrote to Before & After to explain his discovery;
52 |
53 |
54 |
55 | It's difficult to find examples of lorem ipsum in use before Letraset made it popular as a dummy text in the 1960s, although McClintock says he remembers coming across the lorem ipsum passage in a book of old metal type samples. So far he hasn't relocated where he once saw the passage, but the popularity of Cicero in the 15th century supports the theory that the filler text has been used for centuries.
56 |
57 | And anyways, as Cecil Adams reasoned, “\[Do you really] think graphic arts supply houses were hiring classics scholars in the 1960s?” Perhaps. But it seems reasonable to imagine that there was a version in use far before the age of Letraset.
58 |
59 |
80 |
81 |
--------------------------------------------------------------------------------
/public/partners/logoipsum-logo-5.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/prism-theme.css:
--------------------------------------------------------------------------------
1 | code[class*=language-],pre[class*=language-]{font-family:'Fira Code',Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.next-dark-theme code[class*=language-],.next-dark-theme pre[class*=language-]{color:#f8f8f2;background:0 0}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}.next-dark-theme .code-wrapper,.next-dark-theme :not(pre)>code[class*=language-],.next-dark-theme pre[class*=language-]{background:#2e3440}.next-dark-theme :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.next-dark-theme .token.cdata,.next-dark-theme .token.comment,.next-dark-theme .token.doctype,.next-dark-theme .token.prolog{color:#636f88}.next-dark-theme .token.punctuation{color:#81a1c1}.next-dark-theme .namespace{opacity:.7}.next-dark-theme .token.constant,.next-dark-theme .token.deleted,.next-dark-theme .token.property,.next-dark-theme .token.symbol,.next-dark-theme .token.tag{color:#81a1c1}.next-dark-theme .token.number{color:#b48ead}.next-dark-theme .token.boolean{color:#81a1c1}.next-dark-theme .token.attr-name,.next-dark-theme .token.builtin,.next-dark-theme .token.char,.next-dark-theme .token.selector,.next-dark-theme .token.string,.token.inserted{color:#a3be8c}.next-dark-theme .selected-line::after{background-color:rgba(99,111,136,.4);border-color:#81a1c1}.next-dark-theme .language-css .token.string,.next-dark-theme .style .token.string,.next-dark-theme .token.entity,.next-dark-theme .token.operator,.next-dark-theme .token.url,.next-dark-theme .token.variable{color:#81a1c1}.next-dark-theme .token.atrule,.next-dark-theme .token.attr-value,.next-dark-theme .token.class-name,.next-dark-theme .token.function{color:#88c0d0}.next-dark-theme .token.keyword{color:#81a1c1}.next-dark-theme .token.important,.next-dark-theme .token.regex{color:#ebcb8b}.next-dark-theme .token.bold,.next-dark-theme .token.important{font-weight:700}.next-dark-theme .token.italic{font-style:italic}.next-dark-theme .token.entity{cursor:help}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.next-light-theme .code-wrapper,.next-light-theme code[class*=language-],.next-light-theme pre[class*=language-]{background:#f5f7ff;color:#5e6687}.next-light-theme code[class*=language-] ::-moz-selection,.next-light-theme code[class*=language-]::-moz-selection,.next-light-theme pre[class*=language-] ::-moz-selection,.next-light-theme pre[class*=language-]::-moz-selection{text-shadow:none;background:#dfe2f1}.next-light-theme code[class*=language-] ::selection,.next-light-theme code[class*=language-]::selection,.next-light-theme pre[class*=language-] ::selection,.next-light-theme pre[class*=language-]::selection{text-shadow:none;background:#dfe2f1}.next-light-theme pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}.next-light-theme :not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.next-light-theme .token.cdata,.next-light-theme .token.comment,.next-light-theme .token.doctype,.next-light-theme .token.prolog{color:#898ea4}.next-light-theme .token.punctuation{color:#5e6687}.next-light-theme .token.namespace{opacity:.7}.next-light-theme .token.boolean,.next-light-theme .token.number,.next-light-theme .token.operator{color:#c76b29}.next-light-theme .token.property{color:#c08b30}.next-light-theme .token.tag{color:#3d8fd1}.next-light-theme .token.string{color:#22a2c9}.next-light-theme .token.selector{color:#6679cc}.next-light-theme .selected-line::after{background-color:rgba(107,115,148,.1);border-color:#c08b30}.next-light-theme .token.attr-name{color:#c76b29}.next-light-theme .language-css .token.string,.next-light-theme .style .token.string,.next-light-theme .token.entity,.next-light-theme .token.url{color:#22a2c9}.next-light-theme .token.attr-value,.next-light-theme .token.control,.next-light-theme .token.directive,.next-light-theme .token.keyword,.next-light-theme .token.unit{color:#ac9739}.next-light-theme .token.atrule,.next-light-theme .token.regex,.next-light-theme .token.statement{color:#22a2c9}.next-light-theme .token.placeholder,.next-light-theme .token.variable{color:#3d8fd1}.next-light-theme .token.deleted{text-decoration:line-through}.next-light-theme .token.inserted{border-bottom:1px dotted #202746;text-decoration:none}.next-light-theme .token.italic{font-style:italic}.next-light-theme .token.bold,.next-light-theme .token.important{font-weight:700}.next-light-theme .token.important{color:#c94922}.next-light-theme .token.entity{cursor:help}.next-light-theme pre>code.highlight{outline:.4em solid #c94922;outline-offset:.4em}.next-light-theme .line-numbers .line-numbers-rows{border-right-color:#dfe2f1}.next-light-theme .line-numbers-rows>span:before{color:#979db4}.next-light-theme .line-highlight{background:rgba(107,115,148,.2);background:-webkit-linear-gradient(left,rgba(107,115,148,.2) 70%,rgba(107,115,148,0));background:linear-gradient(to right,rgba(107,115,148,.2) 70%,rgba(107,115,148,0))}.selected-line{cursor:text;position:relative;width:100%}.selected-line::after{position:absolute;pointer-events:none;content:'';top:0;left:0;width:calc(100% + 2em);height:100%;border-left:2px solid;margin:0 -1em}
--------------------------------------------------------------------------------
/public/demo-illustration-2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/partners/logoipsum-logo-1.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------