-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathposts.html
1 lines (1 loc) · 11.9 KB
/
posts.html
1
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="shortcut icon" href="/portfolio/favicon.ico"/><title>Blog Posts</title><meta name="description" content="List of all my web development blog posts/articles including technologies like React, Next.js, Redux, Typescript, Node.js, Express, MongoDB, Bootstrap and Shopware."/><meta name="next-head-count" content="5"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerPolicy="no-referrer"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/portfolio/_next/static/css/afd1f1acc4546ee2.css" as="style"/><link rel="stylesheet" href="/portfolio/_next/static/css/afd1f1acc4546ee2.css" data-n-g=""/><link rel="preload" href="/portfolio/_next/static/css/0a4ec652d6028205.css" as="style"/><link rel="stylesheet" href="/portfolio/_next/static/css/0a4ec652d6028205.css" data-n-p=""/><link rel="preload" href="/portfolio/_next/static/css/1a6e0aac0a59bc85.css" as="style"/><link rel="stylesheet" href="/portfolio/_next/static/css/1a6e0aac0a59bc85.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/portfolio/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/portfolio/_next/static/chunks/webpack-f10e1d74334e5489.js" defer=""></script><script src="/portfolio/_next/static/chunks/framework-75db3117d1377048.js" defer=""></script><script src="/portfolio/_next/static/chunks/main-995bb50545027da3.js" defer=""></script><script src="/portfolio/_next/static/chunks/pages/_app-12446f34b1c606dc.js" defer=""></script><script src="/portfolio/_next/static/chunks/pages/posts-8705cc9333ae0ef1.js" defer=""></script><script src="/portfolio/_next/static/lH_ilZ9o8Ak1_-mg94rg5/_buildManifest.js" defer=""></script><script src="/portfolio/_next/static/lH_ilZ9o8Ak1_-mg94rg5/_ssgManifest.js" defer=""></script><script src="/portfolio/_next/static/lH_ilZ9o8Ak1_-mg94rg5/_middlewareManifest.js" defer=""></script><style data-href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Poppins&display=swap">@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sFVQ.woff) format('woff')}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJM.woff) format('woff')}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37MOzlojwUKaJO.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7MOzlojwUKaJO.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7MOzlojwUKaJO.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77MOzlojwUKaJO.woff) format('woff');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7MOzlojwUKQ.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div class="app" data-theme="dark"><div class="navbar_navbar__LVObF "><div class="navbar_container__RaknJ"><a class="navbar_logo__UErdh" href="/portfolio"></a><nav class="navbar_navMenu___hRqD" id="navMenu"><div class="navbar_linkWrapper__Tf745"><a style="cursor:pointer;opacity:0;transform:translateY(-30px) translateZ(0)">Projects</a><a style="cursor:pointer;opacity:0;transform:translateY(-30px) translateZ(0)">Blog</a><a style="cursor:pointer;opacity:0;transform:translateY(-30px) translateZ(0)">About me</a></div></nav><div class="navbar_navContainer__1x0xH"><button class="navbar_icon__LC6_z" style="opacity:0;transform:translateY(-30px) translateZ(0)"><i class="fa fa-envelope"></i></button><button class="navbar_icon__LC6_z" style="opacity:0;transform:translateY(-30px) translateZ(0)"><i class="fa fa-sun" style="opacity:1;transform:none"></i></button><div class="navbar_iconMain__bk69K"><button class="navbar_icon__LC6_z navbar_iconMain__bk69K"><svg width="45" height="45" viewBox="0 0 23 23"><path fill="transparent" stroke-width="3" stroke="hsl(0, 0%, 18%)" stroke-linecap="round" d="M 2 2.5 L 20 2.5"></path><path fill="transparent" stroke-width="3" stroke="hsl(0, 0%, 18%)" stroke-linecap="round" d="M 2 9.423 L 20 9.423" opacity="1"></path><path fill="transparent" stroke-width="3" stroke="hsl(0, 0%, 18%)" stroke-linecap="round" d="M 2 16.346 L 20 16.346"></path></svg></button></div></div></div></div><main><section class="allPosts_blog__JNVG1"><div class="allPosts_container__vuR4h"><h1>Blog Posts</h1><div class="allPosts_filter__XeDGi"><p>Sort by tech:</p><div class="allPosts_filterButtons__Awiqp"><button class="btn btn-outlined sm active">All</button><button class="btn btn-outlined sm">Markdown</button></div></div><div class="allPosts_galleryWrap__n83PE"><div class="allPosts_gallery__0YCrM"><div class="postItem_card__A_FX_" data-aos="zoom-in-up"><div><h4>Lorem Ipsum</h4><time>April 3, 2022</time><p>How to build a blog using react-markdown to render posts written in markdown</p></div><div class="postItem_cardAction__0dwSq"><a href="/portfolio/posts/example-post-2">Read more</a></div></div><div class="postItem_card__A_FX_" data-aos="zoom-in-up"><div><h4>Using Markdown as a blog format</h4><time>April 3, 2022</time><p>How to build a blog using react-markdown to render posts written in markdown</p></div><div class="postItem_cardAction__0dwSq"><a href="/portfolio/posts/example-post">Read more</a></div></div></div></div></div></section><footer class="footer_footer__zsYAi"><div class="footer_socialMedia__hzLZE"><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-github"></i></a><a href="#" target="_blank" rel="noreferrer"><i class="fab fa-linkedin"></i></a></div><div>Lorem Ipsum</div><small>Icons by<!-- --> <!-- --><a href="https://www.flaticon.com/" target="_blank" rel="noreferrer">Flaticon</a> <!-- -->&<!-- --> <!-- --><a href="https://fontawesome.com/" target="_blank" rel="noreferrer">Font Awesome</a></small></footer></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"posts":[{"slug":"example-post-2","title":"Lorem Ipsum","date":"2022-04-03","image":"first-post.jpg","excerpt":"How to build a blog using react-markdown to render posts written in markdown","isFeatured":true,"tech":["Markdown"],"content":"\n# Using Markdown as a blog format\n\n\n\n```text\n---\ntitle: 'Using Markdown as a blog format'\ndate: '2022-04-03'\nimage: first-post.jpg\nexcerpt: 'How to build a blog using react-markdown to render posts written in markdown'\nisFeatured: true\n---\n\n```\n\nLorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos minima optio omnis commodi atque modi, dolores saepe nostrum vero sunt obcaecati recusandae animi delectus veritatis ut nam dolore magnam.\n\nLorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, explicabo necessitatibus cumque quis, labore incidunt facere dolor impedit odio fugit totam, praesentium blanditiis consequatur deleniti repellat reprehenderit modi aut enim.\n"},{"slug":"example-post","title":"Using Markdown as a blog format","date":"2022-04-03","image":"first-post.jpg","excerpt":"How to build a blog using react-markdown to render posts written in markdown","isFeatured":true,"tech":["Markdown"],"content":"\n# Using Markdown as a blog format\n\n\n\n```text\n---\ntitle: 'Using Markdown as a blog format'\ndate: '2022-04-03'\nimage: first-post.jpg\nexcerpt: 'How to build a blog using react-markdown to render posts written in markdown'\nisFeatured: true\n---\n\n```\n\n```jsx\nimport ReactMarkdown from 'react-markdown';\nimport Image from 'next/image';\nimport classes from './postContent.module.scss';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';\n\nconst PostContent = (props) =\u003e {\n const { post } = props;\n\n const title = post.title;\n const content = post.content;\n const imagePath = `/portfolio/images/posts/${post.slug}/${post.image}`;\n\n const customRenderers = {\n p(paragraph) {\n const { node } = paragraph;\n\n if (node.children[0].tagName === 'img') {\n const image = node.children[0];\n\n return (\n \u003cdiv\u003e\n \u003cImage src={imagePath} alt={image.alt} width={450} height={450} /\u003e\n \u003c/div\u003e\n );\n }\n\n return \u003cp\u003e{paragraph.children}\u003c/p\u003e;\n },\n\n code(code) {\n const { className, children } = code;\n const language = className.split('-')[1]; // className is something like language-js =\u003e We need the \"js\" part here\n\n return (\n \u003cSyntaxHighlighter\n language={language}\n style={atomDark}\n // eslint-disable-next-line react/no-children-prop\n children={children}\n /\u003e\n );\n },\n };\n\n return (\n \u003cdiv className={classes.postContent}\u003e\n \u003cdiv className={classes.container}\u003e\n \u003carticle\u003e\n \u003cReactMarkdown components={customRenderers}\u003e{content}\u003c/ReactMarkdown\u003e\n \u003c/article\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n );\n};\n\nexport default PostContent;\n```\n"}]},"__N_SSG":true},"page":"/posts","query":{},"buildId":"lH_ilZ9o8Ak1_-mg94rg5","assetPrefix":"/portfolio","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>