├── components
├── nav
│ ├── index.js
│ └── Nav.jsx
├── layout
│ ├── index.js
│ └── MainLayout.jsx
├── index.js
└── resource
│ ├── index.js
│ ├── ResourceArticle.jsx
│ ├── ResourceList.jsx
│ └── ResourceCard.jsx
├── .eslintrc.json
├── utils
├── index.js
├── pick.js
└── convertTime.js
├── public
├── favicon.ico
└── authors
│ └── hunter.jpeg
├── postcss.config.js
├── pages
├── index.js
├── api
│ └── hello.js
├── _document.js
├── _app.js
└── resources
│ ├── index.js
│ └── [slug].js
├── jsconfig.json
├── next.config.js
├── tailwind.config.js
├── .gitignore
├── package.json
├── README.md
├── contentlayer.config.js
├── content
└── resources
│ ├── my-second-resource.mdx
│ └── my-first-resource.mdx
└── styles
└── globals.css
/components/nav/index.js:
--------------------------------------------------------------------------------
1 | export * from './Nav';
2 |
--------------------------------------------------------------------------------
/components/layout/index.js:
--------------------------------------------------------------------------------
1 | export * from './MainLayout';
2 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/utils/index.js:
--------------------------------------------------------------------------------
1 | export * from './pick';
2 | export * from './convertTime';
3 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hunterbecton/next-js-mdx/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
1 | export * from './resource';
2 | export * from './nav';
3 | export * from './layout';
4 |
--------------------------------------------------------------------------------
/public/authors/hunter.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hunterbecton/next-js-mdx/HEAD/public/authors/hunter.jpeg
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import { MainLayout } from 'components';
2 |
3 | export default function Home() {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/components/resource/index.js:
--------------------------------------------------------------------------------
1 | export * from './ResourceArticle';
2 | export * from './ResourceCard';
3 | export * from './ResourceList';
4 |
--------------------------------------------------------------------------------
/utils/pick.js:
--------------------------------------------------------------------------------
1 | export const pick = (obj, keys) => {
2 | return keys.reduce((acc, key) => {
3 | acc[key] = obj[key];
4 | return acc;
5 | }, {});
6 | };
7 |
--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default function handler(req, res) {
4 | res.status(200).json({ name: 'John Doe' })
5 | }
6 |
--------------------------------------------------------------------------------
/utils/convertTime.js:
--------------------------------------------------------------------------------
1 | export const convertTime = (time) => {
2 | return new Date(time).toLocaleDateString('en-us', {
3 | year: 'numeric',
4 | month: 'long',
5 | day: 'numeric',
6 | });
7 | };
8 |
--------------------------------------------------------------------------------
/components/layout/MainLayout.jsx:
--------------------------------------------------------------------------------
1 | import { Nav } from 'components';
2 |
3 | export const MainLayout = ({ children }) => {
4 | return (
5 | <>
6 |
7 | {children}
8 | >
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "contentlayer/generated": ["./.contentlayer/generated"]
6 | }
7 | },
8 | "include": [".contentlayer/generated"]
9 | }
10 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const { withContentlayer } = require('next-contentlayer');
2 |
3 | module.exports = withContentlayer()({
4 | reactStrictMode: true,
5 | images: {
6 | domains: ['images.unsplash.com'],
7 | dangerouslyAllowSVG: true,
8 | contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
9 | },
10 | });
11 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document, { Html, Head, Main, NextScript } from 'next/document';
2 |
3 | class MyDocument extends Document {
4 | render() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | export default MyDocument;
20 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const { fontFamily } = require('tailwindcss/defaultTheme');
2 |
3 | module.exports = {
4 | content: [
5 | './pages/**/*.{js,ts,jsx,tsx}',
6 | './components/**/*.{js,ts,jsx,tsx}',
7 | ],
8 | theme: {
9 | extend: {
10 | fontFamily: {
11 | sans: ['Inter', ...fontFamily.sans],
12 | },
13 | },
14 | },
15 | plugins: [
16 | require('@tailwindcss/forms'),
17 | require('@tailwindcss/typography'),
18 | require('@tailwindcss/aspect-ratio'),
19 | ],
20 | };
21 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import { DefaultSeo } from 'next-seo';
2 |
3 | import 'styles/globals.css';
4 |
5 | function MyApp({ Component, pageProps }) {
6 | return (
7 | <>
8 |
13 |
14 | >
15 | );
16 | }
17 |
18 | export default MyApp;
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
36 |
37 | # Contentlayer
38 | .contentlayer
39 |
--------------------------------------------------------------------------------
/components/resource/ResourceArticle.jsx:
--------------------------------------------------------------------------------
1 | export const ResourceArticle = ({ category, title, children }) => {
2 | return (
3 |
4 |
5 |
6 | {category}
7 |
8 |
9 | {title}
10 |
11 |
12 | {children}
13 |
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/components/resource/ResourceList.jsx:
--------------------------------------------------------------------------------
1 | import { ResourceCard } from 'components';
2 |
3 | export const ResourceList = ({ resources }) => {
4 | return (
5 |
6 |
7 |
8 | {resources.map(
9 | ({
10 | title,
11 | description,
12 | slug,
13 | image,
14 | category,
15 | publishedAt,
16 | readingTime,
17 | }) => (
18 |
29 | )
30 | )}
31 |
32 |
33 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "content-layer",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint"
9 | },
10 | "dependencies": {
11 | "@svgr/webpack": "^6.2.1",
12 | "@tailwindcss/aspect-ratio": "^0.4.0",
13 | "@tailwindcss/forms": "^0.5.0",
14 | "@tailwindcss/typography": "^0.5.2",
15 | "contentlayer": "^0.1.2",
16 | "mdx-embed": "^1.0.0",
17 | "next": "12.1.0",
18 | "next-contentlayer": "^0.1.2",
19 | "next-seo": "^5.1.0",
20 | "prettier": "^2.5.1",
21 | "prettier-plugin-tailwindcss": "^0.1.8",
22 | "react": "17.0.2",
23 | "react-dom": "17.0.2",
24 | "reading-time": "^1.5.0",
25 | "rehype-autolink-headings": "^6.1.1",
26 | "rehype-code-titles": "^1.0.3",
27 | "rehype-prism-plus": "^1.3.2",
28 | "rehype-slug": "^5.0.1",
29 | "remark-gfm": "^3.0.1"
30 | },
31 | "devDependencies": {
32 | "autoprefixer": "^10.4.2",
33 | "eslint": "7.32.0",
34 | "eslint-config-next": "12.1.0",
35 | "postcss": "^8.4.8",
36 | "tailwindcss": "^3.0.23"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/pages/resources/index.js:
--------------------------------------------------------------------------------
1 | import { allResources } from 'contentlayer/generated';
2 | import { NextSeo } from 'next-seo';
3 |
4 | import { ResourceList, MainLayout } from 'components';
5 | import { pick } from 'utils';
6 |
7 | const Resources = ({ resources }) => {
8 | return (
9 |
10 |
14 |
15 |
16 | );
17 | };
18 |
19 | export default Resources;
20 |
21 | export function getStaticProps() {
22 | const resources = allResources
23 | .map((resource) =>
24 | pick(resource, [
25 | 'slug',
26 | 'title',
27 | 'description',
28 | 'publishedAt',
29 | 'readingTime',
30 | 'author',
31 | 'category',
32 | 'image',
33 | ])
34 | )
35 | .sort(
36 | (a, b) =>
37 | Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt))
38 | );
39 |
40 | return { props: { resources } };
41 | }
42 |
--------------------------------------------------------------------------------
/pages/resources/[slug].js:
--------------------------------------------------------------------------------
1 | import { allResources } from 'contentlayer/generated';
2 | import { useMDXComponent } from 'next-contentlayer/hooks';
3 | import { CodePen } from 'mdx-embed';
4 | import { NextSeo } from 'next-seo';
5 |
6 | import { ResourceArticle, MainLayout } from 'components';
7 |
8 | const mdxComponents = {
9 | CodePen,
10 | };
11 |
12 | const Resource = ({ resource }) => {
13 | const MDXContent = useMDXComponent(resource.body.code);
14 |
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | };
24 |
25 | export default Resource;
26 |
27 | export async function getStaticPaths() {
28 | return {
29 | paths: allResources.map((resource) => ({
30 | params: { slug: resource.slug },
31 | })),
32 | fallback: false,
33 | };
34 | }
35 |
36 | export async function getStaticProps({ params }) {
37 | const resource = allResources.find(
38 | (resource) => resource.slug === params.slug
39 | );
40 |
41 | return { props: { resource } };
42 | }
43 |
--------------------------------------------------------------------------------
/components/nav/Nav.jsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 |
3 | export const Nav = () => {
4 | return (
5 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/contentlayer.config.js:
--------------------------------------------------------------------------------
1 | import {
2 | defineDocumentType,
3 | defineNestedType,
4 | makeSource,
5 | } from 'contentlayer/source-files';
6 |
7 | import readingTime from 'reading-time';
8 | import remarkGfm from 'remark-gfm';
9 | import rehypeSlug from 'rehype-slug';
10 | import rehypeCodeTitles from 'rehype-code-titles';
11 | import rehypeAutolinkHeadings from 'rehype-autolink-headings';
12 | import rehypePrism from 'rehype-prism-plus';
13 |
14 | const computedFields = {
15 | readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
16 | wordCount: {
17 | type: 'number',
18 | resolve: (doc) => doc.body.raw.split(/\s+/gu).length,
19 | },
20 | slug: {
21 | type: 'string',
22 | resolve: (doc) => doc._raw.sourceFileName.replace(/\.mdx$/, ''),
23 | },
24 | };
25 |
26 | const Author = defineNestedType(() => ({
27 | name: 'Author',
28 | fields: {
29 | name: { type: 'string', required: true },
30 | image: { type: 'string', required: true },
31 | },
32 | }));
33 |
34 | const Resource = defineDocumentType(() => ({
35 | name: 'Resource',
36 | filePathPattern: 'resources/*.mdx',
37 | contentType: 'mdx',
38 | fields: {
39 | title: { type: 'string', required: true },
40 | publishedAt: { type: 'string', required: true },
41 | description: { type: 'string', required: true },
42 | seoDescription: { type: 'string', required: true },
43 | category: { type: 'string', required: true },
44 | author: {
45 | type: 'nested',
46 | of: Author,
47 | },
48 | image: { type: 'string', required: true },
49 | },
50 | computedFields,
51 | }));
52 |
53 | const contentLayerConfig = makeSource({
54 | contentDirPath: 'content',
55 | documentTypes: [Resource],
56 | mdx: {
57 | remarkPlugins: [remarkGfm],
58 | rehypePlugins: [
59 | rehypeSlug,
60 | rehypeCodeTitles,
61 | rehypePrism,
62 | [
63 | rehypeAutolinkHeadings,
64 | {
65 | properties: {
66 | className: ['anchor'],
67 | },
68 | },
69 | ],
70 | ],
71 | },
72 | });
73 |
74 | export default contentLayerConfig;
75 |
--------------------------------------------------------------------------------
/components/resource/ResourceCard.jsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image';
2 | import Link from 'next/link';
3 |
4 | import { convertTime } from 'utils';
5 |
6 | export const ResourceCard = ({
7 | title,
8 | description,
9 | slug,
10 | image,
11 | category,
12 | dateTime,
13 | readingTime,
14 | }) => {
15 | return (
16 |
17 |
18 |
19 |
25 |
26 |
27 |
28 | {category}
29 |
30 |
31 | {title}
32 |
33 |
{description}
34 |
62 |
63 |
64 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/content/resources/my-second-resource.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Reppulit meumque furtis Alcmene
3 | publishedAt: '2022-03-13'
4 | description: Et in fronde stamina posses faciat, indevitato obscura! Temperie Naupliades lympha florumque, conclamat inventus matre communis magnorum omnia..
5 | seoDescription: Et in fronde stamina posses faciat, indevitato obscura! Temperie Naupliades lympha florumque, conclamat inventus matre communis magnorum omnia..
6 | category: 'Ipsum'
7 | author: { name: 'Hunter Becton', image: '/authors/hunter.jpeg' }
8 | image: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80'
9 | ---
10 |
11 | ## Mollis tantum longo hominum
12 |
13 | Lorem markdownum traderet furtis Alcmene prohibetis in victima corda, est
14 | fiducia aequore. Teucras inmitibus maduere, est et est **quam** seu ab ingredior
15 | damnum, ad semina. Adunco solverat durior, matris in misit, ex nec perque
16 | ruricolae. Alto lanianda est. Comites et quae septemplice viribus et datos
17 | spectantur, quoniam.
18 |
19 | Finiat linguis, mihi simulavimus [hasta](http://fingi-orbe.io/iussustot). Solito
20 | amatas haec admirantibus nunc cornaque vosque lacerat, includere utque ceu!
21 | Numquam iram sumus prodidit palmis!
22 |
23 |
24 |
25 | ## Ora dixit dilecta redimat prohibete prosunt
26 |
27 | Aditus via ferre iuvenis Mygdoniusque nunc, repleam. Perlucida Dorylas. Bracchia
28 | more. Duo tenet insequar saepe nonne aberat quoque meritis, visum cavernas in
29 | sum litoris bellum tangam hic.
30 |
31 | ```js
32 | if (2 + rasterModemHardening * white_meta_external) {
33 | system.dos += surface_model.memory(5, 4) * matrix_safe_zip(adc, 4, display);
34 | } else {
35 | hard += vector * 97;
36 | hdd.disk_rj_twitter -= copy(
37 | 521080,
38 | cpc_document_emulation + veronica,
39 | bespoke
40 | );
41 | activexTroubleshootingFddi += menu_ray_virtual + recordCiscPdf;
42 | }
43 | cookie_system_p /= componentLoad;
44 | memory = 47;
45 | white(opacitySymbolicFaq, -1 * 572624 - 1, mediaBoolean);
46 | ```
47 |
48 | ## Erit pocula
49 |
50 | Et in fronde _stamina_ posses faciat, indevitato obscura! Temperie Naupliades
51 | lympha florumque, conclamat inventus matre communis **magnorum omnia**. Est me
52 | deum ter sibi illo consequitur lilia ferox, tua illa fovebam exanimis gloria.
53 | Aera te parsque colla manus ignava Macedoniaque huic, servatae _concordes errat
54 | radiosque_ cupidine adsueta pulvinaribus ripam comites, interea. Vulnus exit
55 | poteras fugamque primosque in nam frenataque [meritum
56 | mos](http://animas.io/altissima.aspx) Stygias, terga me est miror tergore.
57 |
58 | ```js
59 | scroll = ddr;
60 | command_traceroute_overwrite = xslt_horse_scsi;
61 | dvd += application_affiliate;
62 | sink_defragment_spider *= volumeDiskSimplex;
63 | trojan_print_file += dotNasCodec - ribbonCadAnsi;
64 | ```
65 |
66 | Me obductos saucia solent, non disce exasperat legeret perdere nitere
67 | precibusque et dempto. Labor quod, rigidis ipsa quater templa ac volui Lichan hi
68 | ager sacrisque respicit Amphione.
69 |
70 | Praeruptam hos iamque pando, inornatos rapienda ille pactus reserata ventis
71 | squamae o Timoli et castos, Epidauria tinnitibus conplerunt. Trunca orant
72 | roganti est est mihi Pelasgae iratus. De domus, **et gentis restant** se
73 | memoraverit talibus cornua nigra vincis iaculabile tuo, vae
74 | [victor](http://www.arboreiaculo.net/adspicit-iam), levi illi.
75 |
--------------------------------------------------------------------------------
/content/resources/my-first-resource.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Aurum perdideris incidit arbor et in pridem
3 | publishedAt: '2022-03-12'
4 | description: Sunt et ut cur Eryx etiamnunc. Duo ore crinita petis vulneribus opus Ophionides est umbra nobilis radicibus ferrugine virentem nec. .
5 | seoDescription: Sunt et ut cur Eryx etiamnunc. Duo ore crinita petis vulneribus opus Ophionides est umbra nobilis radicibus ferrugine virentem nec.
6 | category: 'Lorem'
7 | author: { name: 'Hunter Becton', image: '/authors/hunter.jpeg' }
8 | image: 'https://images.unsplash.com/photo-1628329336337-8c33a8f08ec1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80'
9 | ---
10 |
11 | ## Vellem tandem
12 |
13 | Lorem markdownum adplicor, et genusque Hectorea est ferri spectat, mensas.
14 | Clarium nomen sed magis moriens est deseruere stipes, molitor! Sunt et ut cur
15 | Eryx etiamnunc. Duo ore crinita petis vulneribus opus Ophionides est umbra
16 | nobilis radicibus ferrugine virentem nec. Conveniunt undis audire [ora
17 | solvit](http://www.agenorides-vix.org/non-hylaeusque), ad a tempore membraque.
18 |
19 |
20 |
21 | ```js
22 | flashTechnology += mmsInstallerYoutube(3, sdk_hfs_pad + -4, clob);
23 | if (vaporwareSip) {
24 | pdf_baseband_netmask.asp += textHyper;
25 | } else {
26 | meta_api(
27 | table_virtual_insertion,
28 | barePseudocodeNui(oleOdbc, fddi, snowVaporware)
29 | );
30 | }
31 | if (18) {
32 | directxLpi.null.backbone_cc_friend(smm_waveform_record, 23, storage);
33 | }
34 | hocHot.iphone =
35 | dac.symbolicStatusState.scrollGigoLaptop(system, real_power) -
36 | bin(702106) -
37 | skyscraperWddmLion * redundancy_site_file(logic);
38 | if (3 != teraflopsZettabyte) {
39 | copyright(
40 | graphicSpamHorse(port, base_sector_icio, 5),
41 | arrayHard,
42 | pplPcPretest
43 | );
44 | peripheral += shareware;
45 | wrap(manet(ipodOutput), optical_computing_ospf, cd_cgi);
46 | }
47 | ```
48 |
49 | Longis caput exspatiantur virgo spissa vidisti et quis! Haec vulneribus Echecli
50 | ullus ore: praeside et arma ingratum, imitata. Illa cohaeserat ignis. Dumque
51 | somno magna templum: per credere atque nec superos? Iste Myscelus deus propius
52 | venturis silvis; in fore paventque super, proculcat cum **cum habet**.
53 |
54 | ## Sic Iamque iacebas
55 |
56 | Arbore questus Proserpina inpatiens dolore densumque, caelestibus colla orbem
57 | vidit. Sanguine adiecerit honores [amictus
58 | in](http://futurae.net/alipedis-excita) Telamon plangi patiar adspeximus mihi;
59 | Lycaon nomine exstat sustinet.
60 |
61 | 1. Volvuntur aliae Melanthus faciem
62 | 2. Tractu relinqui at ut dabat an suum
63 | 3. Ille nondum Stheneleia avidos nitet Quas officium
64 | 4. Auxilium lacertis
65 | 5. Quod prosit alas
66 |
67 | ## Foliis ora fama tam nomen adest obstructaque
68 |
69 | Ulciscere missa ululatus carinam **corna**, cetera diversorum oranti amnis.
70 | Sitim suae, inmodicum et propiore sumitque vellet, ab nescio videtur restabat
71 | traxit. Gemitus ab equis acris in concidit illius ut peti sub. Nomen est vidit
72 | sanesque argumenta fines, arcana, Eumelique est hi, ubi hic.
73 |
74 | 1. Poscebatur Andraemon disiecit deficiunt populo
75 | 2. Est quaesita se ignis
76 | 3. Regnum cui terribilesque horum de nisi promittit
77 |
78 | Sublimis stellis? Et aestatem spectatae constitit reclusit perspexerat quoque
79 | aestuat comitant enses. Certate ripis et quoniam omne erat, sic omne, rura.
80 | Rubescere et **graves**, medullis custos Orphne. Librato amor aurea modo multa o
81 | sponte vertatur educta in.
82 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | /* Prism Styles */
6 |
7 | code[class*='language-'],
8 | pre[class*='language-'] {
9 | -moz-tab-size: 2;
10 | -o-tab-size: 2;
11 | tab-size: 2;
12 | -webkit-hyphens: none;
13 | -moz-hyphens: none;
14 | -ms-hyphens: none;
15 | hyphens: none;
16 | white-space: pre;
17 | white-space: pre-wrap;
18 | word-wrap: normal;
19 | font-family: Menlo, Monaco, 'Courier New', monospace;
20 | font-size: 14px;
21 | color: #76d9e6;
22 | text-shadow: none;
23 | }
24 |
25 | pre > code[class*='language-'] {
26 | font-size: 1em;
27 | }
28 |
29 | pre[class*='language-'],
30 | :not(pre) > code[class*='language-'] {
31 | background: #2a2a2a;
32 | }
33 |
34 | pre[class*='language-'] {
35 | padding: 15px;
36 | border-radius: 4px;
37 | border: 1px solid #e1e1e8;
38 | overflow: auto;
39 | position: relative;
40 | }
41 |
42 | pre[class*='language-'] code {
43 | white-space: pre;
44 | display: block;
45 | }
46 |
47 | :not(pre) > code[class*='language-'] {
48 | padding: 0.15em 0.2em 0.05em;
49 | border-radius: 0.3em;
50 | border: 0.13em solid #7a6652;
51 | box-shadow: 1px 1px 0.3em -0.1em #000 inset;
52 | }
53 |
54 | .token.namespace {
55 | opacity: 0.7;
56 | }
57 |
58 | .token.comment,
59 | .token.prolog,
60 | .token.doctype,
61 | .token.cdata {
62 | color: #6f705e;
63 | }
64 |
65 | .token.operator,
66 | .token.boolean,
67 | .token.number {
68 | color: #a77afe;
69 | }
70 |
71 | .token.attr-name,
72 | .token.string {
73 | color: #e6d06c;
74 | }
75 |
76 | .token.entity,
77 | .token.url,
78 | .language-css .token.string,
79 | .style .token.string {
80 | color: #e6d06c;
81 | }
82 |
83 | .token.selector,
84 | .token.inserted {
85 | color: #a6e22d;
86 | }
87 |
88 | .token.atrule,
89 | .token.attr-value,
90 | .token.keyword,
91 | .token.important,
92 | .token.deleted {
93 | color: #ef3b7d;
94 | }
95 |
96 | .token.regex,
97 | .token.statement {
98 | color: #76d9e6;
99 | }
100 |
101 | .token.placeholder,
102 | .token.variable {
103 | color: #fff;
104 | }
105 |
106 | .token.important,
107 | .token.statement,
108 | .token.bold {
109 | font-weight: bold;
110 | }
111 |
112 | .token.punctuation {
113 | color: #bebec5;
114 | }
115 |
116 | .token.entity {
117 | cursor: help;
118 | }
119 |
120 | .token.italic {
121 | font-style: italic;
122 | }
123 |
124 | code.language-markup {
125 | color: #f9f9f9;
126 | }
127 |
128 | code.language-markup .token.tag {
129 | color: #ef3b7d;
130 | }
131 |
132 | code.language-markup .token.attr-name {
133 | color: #a6e22d;
134 | }
135 |
136 | code.language-markup .token.attr-value {
137 | color: #e6d06c;
138 | }
139 |
140 | code.language-markup .token.style,
141 | code.language-markup .token.script {
142 | color: #76d9e6;
143 | }
144 |
145 | code.language-markup .token.script .token.keyword {
146 | color: #76d9e6;
147 | }
148 |
149 | /* Line highlight plugin */
150 | .line-highlight.line-highlight {
151 | padding: 0;
152 | background: rgba(255, 255, 255, 0.08);
153 | }
154 |
155 | .line-highlight.line-highlight:before,
156 | .line-highlight.line-highlight[data-end]:after {
157 | padding: 0.2em 0.5em;
158 | background-color: rgba(255, 255, 255, 0.4);
159 | color: black;
160 | height: 1em;
161 | line-height: 1em;
162 | box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
163 | }
164 |
165 | pre {
166 | overflow-x: auto;
167 | }
168 |
169 | /**
170 | * Inspired by gatsby remark prism - https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/
171 | * 1. Make the element just wide enough to fit its content.
172 | * 2. Always fill the visible space in .code-highlight.
173 | */
174 | .code-highlight {
175 | float: left; /* 1 */
176 | min-width: 100%; /* 2 */
177 | }
178 |
179 | .code-line {
180 | display: block;
181 | padding-left: 16px;
182 | padding-right: 16px;
183 | margin-left: -16px;
184 | margin-right: -16px;
185 | border-left-width: 4px;
186 | border-left-color: rgba(31, 41, 55, 0); /* Set code block color */
187 | }
188 |
189 | .code-line.inserted {
190 | background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
191 | }
192 |
193 | .code-line.deleted {
194 | background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
195 | }
196 |
197 | .highlight-line {
198 | margin-left: -16px;
199 | margin-right: -16px;
200 | background-color: rgba(55, 65, 81, 0.5); /* Set highlight bg color */
201 | border-left-width: 4px;
202 | border-left-color: rgb(59, 130, 246); /* Set highlight accent border color */
203 | }
204 |
205 | .line-number::before {
206 | display: inline-block;
207 | width: 1rem;
208 | text-align: right;
209 | margin-right: 16px;
210 | margin-left: -8px;
211 | color: rgb(156, 163, 175); /* Line number color */
212 | content: attr(line);
213 | }
214 |
--------------------------------------------------------------------------------