Fix the table element overflow (#787)

* add terminals.run blog for example
* fix table element overflow

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,10 +40,11 @@ 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.
 
@@ -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
 

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}
+{
+  "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
+}

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,
 }

components/TableWrapper.tsx

@@ -0,0 +1,9 @@
+const TableWrapper = ({ children }) => {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table>{children}</table>
+    </div>
+  )
+}
+
+export default TableWrapper

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);
 }