hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update meta image location and styles

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-05 00:05:23 +01:00
parent b953d57203
commit d8a6384814
2 changed files with 14 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/blog/[slug].tsx
+7 -19
View File
@@ -14,6 +14,7 @@ import Head from 'next/head';
import IconButton from '../../components/IconButton'; import IconButton from '../../components/IconButton';
import CodeBlock from '../../components/CodeBlock'; import CodeBlock from '../../components/CodeBlock';
import readingTime from 'reading-time'; import readingTime from 'reading-time';
import Image from 'next/image';
interface Props { interface Props {
source: MdxRemote.Source; source: MdxRemote.Source;
@@ -42,20 +43,7 @@ const Wrapper = styled.div`
} }
.image { .image {
height: 0; margin: 1rem 0rem;
width: 100%;
overflow: hidden;
padding-top: calc(591.44 / 1127.34 * 100%);
position: relative;
margin-bottom: 1rem;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
} }
h1, h1,
@@ -162,11 +150,6 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
</Head> </Head>
<Wrapper> <Wrapper>
<div className='meta'> <div className='meta'>
{frontMatter.image ? (
<div className='image'>
<img src={frontMatter.image} alt='portfolio project image' />
</div>
) : null}
<div className='back' onClick={() => router.back()}> <div className='back' onClick={() => router.back()}>
<IconButton icon='/icons/arrow-left.svg' /> <IconButton icon='/icons/arrow-left.svg' />
<span>Back</span> <span>Back</span>
@@ -183,6 +166,11 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
))} ))}
</div> </div>
) : null} ) : null}
{frontMatter.image ? (
<div className='image'>
<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
</div>
) : null}
<hr /> <hr />
</div> </div>
<MDXProvider components={{ code: CodeBlock }}> <MDXProvider components={{ code: CodeBlock }}>
pages/portfolio/[slug].tsx
+7 -19
View File
@@ -13,6 +13,7 @@ import AllComponents from '../../components/All';
import Head from 'next/head'; import Head from 'next/head';
import IconButton from '../../components/IconButton'; import IconButton from '../../components/IconButton';
import CodeBlock from '../../components/CodeBlock'; import CodeBlock from '../../components/CodeBlock';
import Image from 'next/image';
interface Props { interface Props {
source: MdxRemote.Source; source: MdxRemote.Source;
@@ -40,20 +41,7 @@ const Wrapper = styled.div`
} }
.image { .image {
height: 0; margin: 1rem 0rem;
width: 100%;
overflow: hidden;
padding-top: calc(591.44 / 1127.34 * 100%);
position: relative;
margin-bottom: 1rem;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
} }
h1, h1,
@@ -144,11 +132,6 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
</Head> </Head>
<Wrapper> <Wrapper>
<div className='meta' ref={metaRef}> <div className='meta' ref={metaRef}>
{frontMatter.image ? (
<div className='image'>
<img src={frontMatter.image} alt='portfolio project image' />
</div>
) : null}
<div className='back' onClick={() => router.back()}> <div className='back' onClick={() => router.back()}>
<IconButton icon='/icons/arrow-left.svg' /> <IconButton icon='/icons/arrow-left.svg' />
<span>Back</span> <span>Back</span>
@@ -162,6 +145,11 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
))} ))}
</div> </div>
) : null} ) : null}
{frontMatter.image ? (
<div className='image'>
<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
</div>
) : null}
<hr /> <hr />
</div> </div>
<MDXProvider components={{ code: CodeBlock }}> <MDXProvider components={{ code: CodeBlock }}>