Check out my side-projects
wrux / bloke Goto Github PK
View Code? Open in Web Editor NEWWebsite for Bloke Blog
Home Page: https://bloke.blog
Website for Bloke Blog
Home Page: https://bloke.blog
Check out my side-projects
Create an image grid content block which displays a masonry grid on the frontend
column-count: 3
fallbackCommon file paths should be aliased to avoid using ../../
.
Create Webpack path aliases
The image masonry grid does not use the next/image
component. This is because the masonry grid uses CSS text columns and it can cause the images to break into the column mid-image
All images on the site should use the next/image
component and have no issues with images breaking inside text columns
Data coming from Sanity is not properly typed so the any
keyword was used temporarily.
any
types and instead use Sanity typesany
typesCreate an overview page which shows a world map with each country mentioned in the blog highlighted. When the user clicks on a country, they will go to the country detail page.
Ensure that all pages have the correct SEO meta data.
Add the following to all pages:
Links:
Create a 404 page template with a link to the homepage
pages/404.tsx
with some basic missing page informationNo dark mode
Sometimes it's better to have 2 images side by side. This can sort-of be achieved using the image grid component, but that assumes a 3 column layout above a certain breakpoint.
Explore 2 possible solutions:
Create a simple landing page builder with various blocks.
Array
schema typeExample page body component
const blockSerializers = {
types: {
imageBlock: () => (props) => (
<Container>
<Figure {...props} />
</Container>
),
imageGridBlock: (props) => (
<Container>
<ImageGrid {...props} />
</Container>
),
textBlock: ({ node }) => {
const { content } = node;
return (
<BlockContent
className="block prose lg:prose-xl mx-auto"
blocks={content}
projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
/>
);
},
},
};
const PageBody: React.FC<Props> = ({ content }) => (
<BlockContent
blocks={content}
projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
serializers={blockSerializers}
/>
);
Images are currently served in jpeg format, causing a slight hit in browser performance
Load WEBP images
The blog is travel related so each blog post should be associated with one or more countries.
/countries
Sanity supports previewing content in production.
The NextJS starter comes pre-configured with a preview API, this needs to be correctly setup.
Optimise the delivery of images and reduce the overall performance of the page.
NextJS provides a responsive image component next/image
, so all components with images should be refactored to use the responsive image.
cover-image.tsx
componentblocks/image.tsx
componentProvide nice typography for the post content
Code should be formatted automatically and consistently.
Configure Prettier for:
Preview components independently to the frontend.
Create a Storybook and render all visual components.
Prevent unwanted commits or pushes to branches to limit the possibility of introducing broken code
Setup git hooks to control the contribution workflow.
Husky git hooks: https://github.com/typicode/husky
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.