10h30/astroplate
1
0
Fork 0
mirror of https://github.com/10h30/astroplate.git synced 2026-07-11 10:46:07 +09:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3 from zeon-studio/dev

Browse Source 
Added Tab shortcode
This commit is contained in:
Somrat
2023-05-13 16:26:55 +06:00
committed by GitHub
parent ed7a32efb6 36e8818657
commit 982b13a09d
10 changed files with 112 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.config.mjs
+2
View File
@@ -32,6 +32,8 @@ export default defineConfig({
"@/shortcodes/Notice",
"@/shortcodes/Video",
"@/shortcodes/Youtube",
"@/shortcodes/Tabs",
"@/shortcodes/Tab",
],
}),
mdx(),
package.json
+1 -1
View File
@@ -30,7 +30,7 @@
"fuse.js": "^6.6.2",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"marked": "^5.0.1",
"marked": "^5.0.2",
"postcss": "^8.4.23",
"prettier": "^2.8.8",
"prettier-plugin-astro": "^0.8.0",
src/content/pages/elements.mdx
+33
View File
@@ -163,6 +163,39 @@ window.addEventListener("load", (e) => {
---
### Tab
<Tabs client:load>
<Tab name="Tab 1">
#### Did you come here for something in particular?
Did you come here for something in particular or just general Riker-bashing? And blowing into maximum warp speed, you appeared for an instant to be in two places at once. We have a saboteur aboard. We know you’re dealing in stolen ore. But I wanna talk about the assassination attempt on Lieutenant Worf.
</Tab>
<Tab name="Tab 2">
#### I wanna talk about the assassination attempt
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</Tab>
<Tab name="Tab 3">
#### We know you’re dealing in stolen ore
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
</Tab>
</Tabs>
---
### Table
| # | First | Last | Handle |
src/layouts/shortcodes/Accordion.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useState } from "react";
import React, { useState } from "react";
const Accordion = ({
title,
@@ -6,8 +6,8 @@ const Accordion = ({
className,
}: {
title: string;
children: any;
className: string | null;
children: React.ReactNode;
className?: string;
}) => {
const [show, setShow] = useState(false);
src/layouts/shortcodes/Notice.tsx
+11 -4
View File
@@ -1,6 +1,13 @@
import { humanize } from "@/lib/utils/textConverter";
import React from "react";
function Notice({ type, children }: { type: string; children: any }) {
function Notice({
type,
children,
}: {
type: string;
children: React.ReactNode;
}) {
return (
<div className={`notice ${type}`}>
<div className="notice-head">
@@ -62,9 +69,9 @@ function Notice({ type, children }: { type: string; children: any }) {
<path
d="M10 9V14M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19ZM10.0498 6V6.1L9.9502 6.1002V6H10.0498Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)}
src/layouts/shortcodes/Tab.tsx
+7
View File
@@ -0,0 +1,7 @@
import React from "react";
function Tab({ name, children }: { name: string; children: React.ReactNode }) {
return <div data-name={name}>{children}</div>;
}
export default Tab;
src/layouts/shortcodes/Tabs.tsx
+44
View File
@@ -0,0 +1,44 @@
import { marked } from "marked";
import React, { useState } from "react";
function Tabs({ children }: { children: any }) {
const [active, setAvtive] = useState(0);
const tabItems = Array.from(
children.props.value.matchAll(
/<div\s+data-name="([^"]+)"[^>]*>(.*?)<\/div>/gs
),
(match: RegExpMatchArray) => ({ name: match[1], children: match[0] })
);
return (
<div className="tab">
<ul className="tab-nav">
{tabItems.map((item: any, index: number) => (
<li
key={index}
className={`tab-nav-item ${index === active && "active"}`}
onClick={() => setAvtive(index)}
>
{item.name}
</li>
))}
</ul>
<div className="tab-content">
{tabItems.map((item, i) => (
<div
className={`tab-content-panel ${
active === i ? "active" : "hidden"
}`}
dangerouslySetInnerHTML={{
__html: marked.parse(item.children),
}}
/>
))}
</div>
</div>
);
}
export default Tabs;
src/layouts/shortcodes/Video.tsx
+4 -3
View File
@@ -1,3 +1,4 @@
import React from "react";
function Video({
title,
width = 500,
@@ -6,10 +7,10 @@ function Video({
...rest
}: {
title: string;
width?: number;
height?: string;
width: number;
height: number | "auto";
src: string;
rest: any;
[key: string]: any;
}) {
return (
<video
src/layouts/shortcodes/Youtube.tsx
+2 -1
View File
@@ -1,3 +1,4 @@
import React from "react";
import LiteYouTubeEmbed from "react-lite-youtube-embed";
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
@@ -8,7 +9,7 @@ const Youtube = ({
}: {
id: string;
title: string;
rest: any;
[key: string]: any;
}) => {
return (
<LiteYouTubeEmbed
src/styles/components.scss
+5 -5
View File
@@ -103,7 +103,7 @@
}
&-content {
&-panel {
@apply hidden p-8;
@apply p-8;
p {
@apply mb-0;
}
@@ -160,15 +160,15 @@
@apply prose-img:max-w-full prose-img:rounded;
@apply prose-hr:border-border prose-hr:dark:border-darkmode-border;
@apply prose-p:text-base prose-p:text-text prose-p:dark:text-darkmode-text;
@apply prose-blockquote:border-l-[10px] prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
@apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
@apply prose-code:px-1 prose-code:text-primary prose-code:dark:text-darkmode-primary;
@apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
@apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
@apply prose-li:text-text prose-li:dark:text-darkmode-text;
@apply prose-table:before:rounded-[inherit] prose-table:before:content-[""] prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:border prose-table:before:dark:border-darkmode-border;
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] prose-table:before:dark:border-darkmode-border;
@apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
@apply prose-th:py-[18px] prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:text-dark prose-th:dark:text-darkmode-text;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
@apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
@apply prose-td:py-[18px] prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:dark:text-darkmode-text;
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
}