Skip to content

Commit 15517d5

Browse files
desktopofsamueldesktopofsamuel
committed
design update & moved to landing
1 parent 7a86b00 commit 15517d5

5 files changed

Lines changed: 109 additions & 88 deletions

File tree

‎content/pages/about.mdx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,6 @@ draft: false
1515

1616
[Now Page Movement](https://nownownow.com/) 是一個外國網主發起的運動，在自己的網站開一新頁 "Now" ，寫下“What are you focused on now?” 的答案。在社交媒體的世代，每個 Tweet、Status 和 Story 也在表達自己的心情和想法。Now 把焦點放到「現在」，寫下自己在做甚麼和宏觀的目標。現時已有約 2000 人加入 Now 到自己的網頁。
1717

18-
import MusicCard from '@/components/music-card';
19-
import BookCard from '@/components/book-card';
20-
import MovieCard from '@/components/movie-card';
21-
import { SimpleGrid } from '@chakra-ui/react';
22-
23-
<SimpleGrid columns={2} spacing={8}>
24-
<MusicCard />
25-
<BookCard />
26-
<MovieCard />
27-
</SimpleGrid>
28-
2918
### 最近喜愛的東西 Recent Favorites
3019

3120
- 最近在看 Starstruck, Never Have I Ever 和 Loki

‎src/components/book-card.tsx‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
import React from 'react';
22
import { useStaticQuery, graphql } from 'gatsby';
3-
import { Box, Text, chakra, SimpleGrid } from '@chakra-ui/react';
3+
import {
4+
Box,
5+
Text,
6+
chakra,
7+
SimpleGrid,
8+
useColorModeValue,
9+
} from '@chakra-ui/react';
10+
import { FaExternalLinkAlt } from 'react-icons/fa';
411
import { GatsbyImage } from 'gatsby-plugin-image';
512
import Link from '@/components/gatsby-link';
13+
import { ExternalLinkIcon } from '@chakra-ui/icons';
614

715
const BookCard = () => {
816
const data = useStaticQuery(graphql`
@@ -23,14 +31,29 @@ const BookCard = () => {
2331
return (
2432
<>
2533
{data.allFeedOku.edges && (
26-
<Box backgroundColor="gray.100" p="4" borderRadius="16">
27-
<Text m="0">I'm reading to</Text>
34+
<Box
35+
backgroundColor={useColorModeValue('gray.100', 'gray.700')}
36+
p="4"
37+
borderRadius="16"
38+
gridColumn={{ base: 'span 2', md: 'initial' }}
39+
>
40+
<Text m="0">最近在讀</Text>
2841
{data.allFeedOku.edges.map((book) => (
29-
<Box key={book.node.id}>
30-
<Link to={book.node.guid} target="_blank">
31-
<Text> {book.node.title}</Text>
42+
<Box key={book.node.id} mb="8">
43+
<Link
44+
fontSize="lg"
45+
fontWeight="bold"
46+
lineHeight="short"
47+
to={book.node.guid}
48+
target="_blank"
49+
isExternal
50+
>
51+
{book.node.title} <ExternalLinkIcon mx="2px" />
3252
</Link>
33-
<Text>by {book.node.creator}</Text>
53+
54+
<Text m="0" fontSize="xs" textTransform="uppercase">
55+
by {book.node.creator}
56+
</Text>
3457
</Box>
3558
))}
3659
</Box>

‎src/components/movie-card.tsx‎

Lines changed: 36 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,33 @@
11
import React from 'react';
22
import { useStaticQuery, graphql } from 'gatsby';
3-
import { Box, Text, chakra, SimpleGrid } from '@chakra-ui/react';
3+
import {
4+
Box,
5+
Text,
6+
chakra,
7+
Grid,
8+
useColorModeValue,
9+
Tooltip,
10+
Img,
11+
} from '@chakra-ui/react';
412
import { StaticImage, GatsbyImage, getImage } from 'gatsby-plugin-image';
513
import Link from '@/components/gatsby-link';
6-
import letterboxd from 'letterboxd';
7-
import { move } from 'formik';
814

915
const MovieCard = () => {
10-
let FilmData;
11-
12-
// letterboxd('desktopofsamuel')
13-
// .then((items) =>
14-
// items.forEach((item) => {
15-
// console.log(item);
16-
// }),
17-
// )
18-
// .catch((error) => console.log(error));
19-
20-
// ;
21-
22-
function Striper(data) {
23-
const imageURL = data.match(/<p>/);
24-
return imageURL;
25-
}
26-
27-
function getTestDiv(htmlString) {
28-
let textVal = null;
16+
function rssParser(htmlString) {
17+
let imgLink = null;
2918
const searchTerm = `\"/></p>`;
30-
const imgclose = htmlString.indexOf(searchTerm);
31-
const elements = htmlString.slice(14, imgclose);
32-
textVal = elements;
33-
34-
// console.log(textVal);
35-
return textVal;
19+
const imgTagPosition = htmlString.indexOf(searchTerm);
20+
const elements = htmlString.slice(14, imgTagPosition);
21+
imgLink = elements;
22+
// console.log(imgLink);
23+
return imgLink;
3624
}
3725

3826
// .getElementsByTagName('p')[0]
3927

4028
const data = useStaticQuery(graphql`
4129
query MovieCardPage {
42-
allFeedLetterboxd(limit: 3) {
30+
allFeedLetterboxd(limit: 5) {
4331
edges {
4432
node {
4533
id
@@ -56,43 +44,39 @@ const MovieCard = () => {
5644
}
5745
`);
5846

59-
function htmlDecode(input) {
60-
var e = document.createElement('div');
61-
e.innerHTML = input;
62-
return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
63-
}
64-
6547
// const image = getImage(getTestDiv(movie.node.content));
6648

6749
return (
6850
<>
6951
{data.allFeedLetterboxd.edges && (
7052
<Box
71-
backgroundColor="gray.100"
53+
backgroundColor={useColorModeValue('gray.100', 'gray.700')}
7254
p="4"
7355
borderRadius="16"
7456
gridColumn="span 2"
7557
>
76-
<Text m="0">I'm watching to</Text>
77-
<SimpleGrid columns={3} spacing={10}>
78-
{data.allFeedLetterboxd.edges.map((movie) => (
79-
<Box key={movie.node.id}>
58+
<Text m="0">最近在看</Text>
59+
<Grid gridTemplateColumns="repeat(auto-fit, 120px)">
60+
{data.allFeedLetterboxd.edges.map((movie, index) => (
61+
<Box
62+
key={movie.node.id}
63+
mr="-30px"
64+
zIndex={index}
65+
_hover={{ zIndex: '100' }}
66+
boxShadow="2px 0 7px grey;"
67+
>
8068
<Link to={movie.node.link} target="_blank">
81-
{/* {console.log(getTestDiv(movie.node.content))} */}
82-
{/* <Box
83-
dangerouslySetInnerHTML={{
84-
__html: getTestDiv(movie.node.content),
85-
}}
86-
/> */}
87-
<img
88-
src={getTestDiv(movie.node.content)}
89-
alt={movie.node.title}
90-
/>
91-
<Text>{movie.node.title}</Text>
69+
<Tooltip label={movie.node.title} fontSize="md">
70+
<Img
71+
src={rssParser(movie.node.content)}
72+
alt={movie.node.title}
73+
/>
74+
{/* <Text>{movie.node.title}</Text> */}
75+
</Tooltip>
9276
</Link>
9377
</Box>
9478
))}
95-
</SimpleGrid>
79+
</Grid>
9680
</Box>
9781
)}
9882
</>

‎src/components/music-card.tsx‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import React from 'react';
22
import { useStaticQuery, graphql } from 'gatsby';
3-
import { Box, Text, chakra, SimpleGrid } from '@chakra-ui/react';
3+
import {
4+
Box,
5+
Text,
6+
chakra,
7+
SimpleGrid,
8+
useColorModeValue,
9+
Tooltip,
10+
} from '@chakra-ui/react';
411
import { GatsbyImage } from 'gatsby-plugin-image';
512
import Link from '@/components/gatsby-link';
613

@@ -32,28 +39,35 @@ const MusicCard = () => {
3239
return (
3340
<>
3441
{data.allSpotifyTopArtist.edges && (
35-
<Box backgroundColor="gray.100" p="4" borderRadius="16">
36-
<Text m="0">I'm listening to</Text>
37-
<SimpleGrid columns={2} rows={3} spacing={10}>
42+
<Box
43+
backgroundColor={useColorModeValue('gray.100', 'gray.700')}
44+
p="4"
45+
borderRadius="16"
46+
gridColumn={{ base: 'span 2', md: 'initial' }}
47+
>
48+
<Text m="0">最近在聽</Text>
49+
<SimpleGrid columns={2} rows={3} spacing={4}>
3850
{data.allSpotifyTopArtist.edges.map((artist, index) => (
3951
<Link
4052
to={artist.node.external_urls.spotify}
4153
target="_blank"
4254
key={artist.node.id}
4355
>
44-
<ArtistImage
45-
image={
46-
artist.node.image.localFile.childImageSharp.gatsbyImageData
47-
}
48-
alt={artist.node.name}
49-
objectFit="cover"
50-
w="100px"
51-
h="100px"
52-
transition="all 0.2s ease-in-out"
53-
loading="lazy"
54-
_groupHover={{ transform: 'scale(1.05)' }}
55-
/>
56-
<Text key={index}>{artist.node.name}</Text>
56+
<Tooltip label={artist.node.name} textSize="md">
57+
<ArtistImage
58+
image={
59+
artist.node.image.localFile.childImageSharp
60+
.gatsbyImageData
61+
}
62+
alt={artist.node.name}
63+
objectFit="cover"
64+
w="100px"
65+
h="100px"
66+
transition="all 0.2s ease-in-out"
67+
loading="lazy"
68+
_groupHover={{ transform: 'scale(1.05)' }}
69+
/>
70+
</Tooltip>
5771
</Link>
5872
))}
5973
</SimpleGrid>

‎src/templates/index-template.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ import Helmet from 'react-helmet';
77
import { PageContext, AllMdx } from '@/type';
88
import { useSiteMetadata } from '../hooks';
99

10+
import MusicCard from '@/components/music-card';
11+
import BookCard from '@/components/book-card';
12+
import MovieCard from '@/components/movie-card';
13+
import { SimpleGrid } from '@chakra-ui/react';
14+
1015
type Props = {
1116
data: AllMdx;
1217
pageContext: PageContext;
@@ -29,7 +34,13 @@ const IndexTemplate = ({ data, pageContext }: Props) => {
2934
return (
3035
<Layout subtitle={siteSubtitle} description={siteDescription}>
3136
<Helmet title={pageTitle} />
32-
37+
{hasPrevPage === false && (
38+
<SimpleGrid columns={2} spacing={4} mb="8">
39+
<MusicCard />
40+
<BookCard />
41+
<MovieCard />
42+
</SimpleGrid>
43+
)}
3344
<PostList edges={edges} />
3445
{(hasPrevPage || hasNextPage) && (
3546
<Pagination

0 commit comments

Comments
 (0)