ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ssr preview info

Browse Source
This commit is contained in:
keyan 2021-07-07 13:34:21 -05:00
parent 0c84b2898f
commit 38df1fcdb7
5 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/header.js
View File

@ -123,3 +123,19 @@ export default function Header () {
</> </>
) )
} }
export function HeaderPreview () {
return (
<>
<Container className='px-sm-0'>
<Navbar className={styles.navbar}>
<Nav className='w-100 justify-content-between flex-wrap align-items-center'>
<Link href='/' passHref>
<Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
</Link>
</Nav>
</Navbar>
</Container>
</>
)
}

18
components/layout-preview.js Normal file
View File

@ -0,0 +1,18 @@
import { HeaderPreview } from './header'
import Head from 'next/head'
import Container from 'react-bootstrap/Container'
export default function LayoutPreview ({ children }) {
return (
<>
<Head>
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<HeaderPreview />
<Container className='mt-1 px-sm-0'>
{children}
</Container>
</>
)
}

0
pages/preview/index.js Normal file
View File

53
pages/preview/items/[id].js Normal file
View File

@ -0,0 +1,53 @@
import { gql } from '@apollo/client'
import ApolloClient from '../../../api/client'
import { ITEM_FIELDS } from '../../../fragments/items'
import Item from '../../../components/item'
import Text from '../../../components/text'
import LayoutPreview from '../../../components/layout-preview'
import { LightningProvider } from '../../../components/lightning'
import Comment from '../../../components/comment'
// we can't SSR on the normal page because we'd have to hyrdate the cache
// on the client which is a lot of work, i.e. a bit fat todo
export async function getServerSideProps ({ req, params }) {
// grab the item on the server side
const { error, data: { item } } = await (await ApolloClient(req)).query({
query:
gql`
${ITEM_FIELDS}
{
item(id: ${params.id}) {
...ItemFields
text
}
}`
})
if (!item || error) {
return {
notFound: true
}
}
return {
props: {
item
}
}
}
export default function ItemPreview ({ item }) {
return (
<LayoutPreview>
<LightningProvider>
{item.parentId
? <Comment item={item} includeParent noComments />
: (
<Item item={item}>
{item.text && <div className='mb-3'><Text>{item.text}</Text></div>}
</Item>
)}
</LightningProvider>
</LayoutPreview>
)
}

0
pages/preview/recent.js Normal file
View File