From 0a8e1dbbdcddc522989d878da1c727bbe6dfea90 Mon Sep 17 00:00:00 2001 From: Terminels Date: Tue, 21 Nov 2023 18:17:58 +0800 Subject: [PATCH] Fix the table element overflow (#787) * add terminals.run blog for example * fix table element overflow --- README.md | 9 +++++---- app/tag-data.json | 20 +++++++++++++++++++- components/MDXComponents.tsx | 2 ++ components/TableWrapper.tsx | 9 +++++++++ css/prism.css | 4 ++-- faq/github-pages-deployment.md | 2 +- 6 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 components/TableWrapper.tsx diff --git a/README.md b/README.md index 4a0c4d7..5f5ac1b 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Feature request? Check the past discussions to see if it has been brought up pre ## Variations -__Note__: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported. +**Note**: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported. Astro alternative - [Tailwind Astro Template](https://github.com/wanoo21/tailwind-astro-starting-blog). @@ -40,11 +40,12 @@ Internationalization support - [Template with i18n](https://tailwind-nextjs-star - [Rabby Hasan's Blog](https://blog.rabbyhasan.com.bd/) - Rabby Hasan's personal blog about full stack development with cloud ([source code](https://github.com/rabbyalone/myblog)) - [enscribe.dev](https://enscribe.dev) - enscribe's personal blog; cybersecurity shenanigans, frontend webdev, etc. ([source code](https://github.com/jktrn/enscribe.dev)) - [dalelarroder.com](https://dalelarroder.com) - Dale Larroder's personal website upgraded from V1 ([source code](https://github.com/dlarroder/dalelarroder)) -- [thetalhatahir.com](https://www.thetalhatahir.com) - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons. +- [thetalhatahir.com](https://www.thetalhatahir.com) - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons. - [hauhau.cn](https://www.hauhau.cn) - Homing's personal blog about the stuff he's learning ([source code](https://github.com/hominsu/blog)) - [zS1m's Blog](https://contrails.space) - zS1m's personal blog for recording and sharing daily learning technical content _中文_ - [dariuszwozniak.net](https://dariuszwozniak.net/) - Software development blog - +- [Terminals.run](https://terminals.run) - Blog site for some thoughts and records for life and technology. + Using the template? Feel free to create a PR and add your blog to this list. ## Examples V1 @@ -259,7 +260,7 @@ See [Next.js on Netlify](https://docs.netlify.com/integrations/frameworks/next-j 5. Run `yarn build`. The generated static content is in the `out` folder. 6. Deploy the `out` folder to your hosting service of choice or run `npx serve out` to view the website locally. -__Note__: Deploying on Github pages require addition modifications to the base path. Please refer to the FAQ for more information. +**Note**: Deploying on Github pages require addition modifications to the base path. Please refer to the FAQ for more information. ## Frequently Asked Questions diff --git a/app/tag-data.json b/app/tag-data.json index e35862a..67c072e 100644 --- a/app/tag-data.json +++ b/app/tag-data.json @@ -1 +1,19 @@ -{"markdown":1,"code":1,"features":1,"next-js":6,"math":1,"ols":1,"github":1,"guide":5,"tailwind":3,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1} \ No newline at end of file +{ + "markdown": 1, + "code": 1, + "features": 1, + "next-js": 6, + "math": 1, + "ols": 1, + "github": 1, + "guide": 5, + "tailwind": 3, + "holiday": 1, + "canada": 1, + "images": 1, + "feature": 2, + "writings": 1, + "book": 1, + "reflection": 1, + "multi-author": 1 +} diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx index a440b7a..4b3e271 100644 --- a/components/MDXComponents.tsx +++ b/components/MDXComponents.tsx @@ -4,11 +4,13 @@ import BlogNewsletterForm from 'pliny/ui/BlogNewsletterForm' import type { MDXComponents } from 'mdx/types' import Image from './Image' import CustomLink from './Link' +import TableWrapper from './TableWrapper' export const components: MDXComponents = { Image, TOCInline, a: CustomLink, pre: Pre, + table: TableWrapper, BlogNewsletterForm, } diff --git a/components/TableWrapper.tsx b/components/TableWrapper.tsx new file mode 100644 index 0000000..37e55cf --- /dev/null +++ b/components/TableWrapper.tsx @@ -0,0 +1,9 @@ +const TableWrapper = ({ children }) => { + return ( +
+ {children}
+
+ ) +} + +export default TableWrapper diff --git a/css/prism.css b/css/prism.css index 4804a53..9046e34 100644 --- a/css/prism.css +++ b/css/prism.css @@ -7,7 +7,7 @@ /* Code title styles */ .remark-code-title { - @apply rounded-t bg-gray-700 dark:bg-gray-800 px-5 py-3 font-mono text-sm font-bold text-gray-200; + @apply rounded-t bg-gray-700 px-5 py-3 font-mono text-sm font-bold text-gray-200 dark:bg-gray-800; } .remark-code-title + div > pre { @@ -36,7 +36,7 @@ } .line-number::before { - @apply mr-4 -ml-2 inline-block w-4 text-right text-gray-400; + @apply -ml-2 mr-4 inline-block w-4 text-right text-gray-400; content: attr(line); } diff --git a/faq/github-pages-deployment.md b/faq/github-pages-deployment.md index f3f33d0..9b8439d 100644 --- a/faq/github-pages-deployment.md +++ b/faq/github-pages-deployment.md @@ -105,4 +105,4 @@ jobs: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v2 -``` \ No newline at end of file +```