1.markdown {
2  @apply text-base-content leading-normal break-words p-2;
3  overflow-x: scroll;
4  line-height: 2;
5}
6
7.markdown > * + * {
8  @apply mt-0 mb-4;
9}
10
11.markdown li + li {
12  @apply mt-1;
13}
14
15.markdown li > p + p {
16  @apply mt-6 mb-2;
17}
18
19.markdown strong {
20  @apply font-semibold;
21}
22
23.markdown a {
24  @apply text-blue-600 font-semibold;
25}
26.markdown a:hover {
27  @apply text-blue-400 font-semibold;
28}
29
30.markdown strong a {
31  @apply font-bold;
32}
33
34.markdown h1 {
35  @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
36}
37
38.markdown h2 {
39  @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
40}
41
42.markdown h3 {
43  @apply leading-snug text-lg font-semibold mb-4 mt-6;
44}
45
46.markdown h4 {
47  @apply leading-none text-base font-semibold mb-4 mt-6;
48}
49
50.markdown h5 {
51  @apply leading-tight text-sm font-semibold mb-4 mt-6;
52}
53
54.markdown h6 {
55  @apply leading-tight text-sm font-semibold text-base-content mb-4 mt-6;
56}
57
58.markdown blockquote {
59  @apply text-base border-l-4 border-base-200 px-3  text-base-content/70;
60}
61
62.markdown code {
63  @apply font-mono text-sm inline bg-base-100/60 rounded-2xl px-1 py-2 my-5;
64}
65
66.markdown pre {
67  @apply bg-base-200/60 rounded-2xl p-2;
68}
69
70.markdown pre code {
71  @apply block bg-transparent p-0 overflow-visible rounded-2xl my-5;
72}
73
74.markdown ul {
75  @apply text-base pl-8 list-disc;
76}
77
78.markdown ol {
79  @apply text-base pl-4 list-decimal;
80}
81
82.markdown kbd {
83  @apply text-xs inline-block rounded border px-1 py-5 align-middle font-normal font-mono shadow;
84}
85
86.markdown table {
87  @apply text-base border-base-300;
88}
89
90.markdown th {
91  @apply border font-bold text-lg py-1 px-3;
92}
93
94.markdown td {
95  @apply border py-1 px-3;
96}
97
98/* Override pygments style background color. */
99.markdown .highlight pre {
100  @apply bg-base-200/40 !important;
101}
102
103.markdown pre {
104  border-radius: "10%";
105  font-size: 85%;
106  line-height: 1.8;
107  overflow: auto;
108}
109
110code.hljs {
111  padding: 3px 5px;
112}
113/*
114
115Atom One Dark by Daniel Gamage
116Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
117
118base:    #282c34
119mono-1:  #abb2bf
120mono-2:  #818896
121mono-3:  #5c6370
122hue-1:   #56b6c2
123hue-2:   #61aeee
124hue-3:   #c678dd
125hue-4:   #98c379
126hue-5:   #e06c75
127hue-5-2: #be5046
128hue-6:   #d19a66
129hue-6-2: #e6c07b
130
131*/
132.hljs {
133  color: #abb2bf;
134  background: #282c34;
135}
136.hljs-comment,
137.hljs-quote {
138  color: #5c6370;
139  font-style: italic;
140}
141.hljs-doctag,
142.hljs-keyword,
143.hljs-formula {
144  color: #c678dd;
145}
146.hljs-section,
147.hljs-name,
148.hljs-selector-tag,
149.hljs-deletion,
150.hljs-subst {
151  color: #e06c75;
152}
153.hljs-literal {
154  color: #56b6c2;
155}
156.hljs-string,
157.hljs-regexp,
158.hljs-addition,
159.hljs-attribute,
160.hljs-meta .hljs-string {
161  color: #98c379;
162}
163.hljs-attr,
164.hljs-variable,
165.hljs-template-variable,
166.hljs-type,
167.hljs-selector-class,
168.hljs-selector-attr,
169.hljs-selector-pseudo,
170.hljs-number {
171  color: #d19a66;
172}
173.hljs-symbol,
174.hljs-bullet,
175.hljs-link,
176.hljs-meta,
177.hljs-selector-id,
178.hljs-title {
179  color: #61aeee;
180}
181.hljs-built_in,
182.hljs-title.class_,
183.hljs-class .hljs-title {
184  color: #e6c07b;
185}
186.hljs-emphasis {
187  font-style: italic;
188}
189.hljs-strong {
190  font-weight: bold;
191}
192.hljs-link {
193  text-decoration: underline;
194}

1layout.tsx
2
3import "./globals.css";
4import "../state/md/markdown.css";

1import { convertMarkdownToHtml } from "@/state/md/parse";
2
3interface GetRepoREADME {
4  repo: string;
5  owner: string;
6}
7export async function getGithubREADME({ repo, owner }: GetRepoREADME) {
8  try {
9    const response = await fetch(
10      `https://raw.githubusercontent.com/${owner}/${repo}/main/README.md`
11    );
12    if (!response.ok) {
13      throw new Error(response.statusText);
14    }
15    const text = await response.text();
16    if (!text) {
17      throw new Error("no parsable readme");
18    }
19    const output_html = convertMarkdownToHtml(text);
20    return output_html;
21  } catch (error) {
22    console.log(" === error === ", error);
23    return;
24  }
25}

1import { getGithubREADME } from "../helpers/getOneRepomarkdown";
2
3interface OneGithubRepoREADMEProps {
4  repo: string;
5  owner: string;
6}
7
8export async function OneGithubRepoREADME({owner,repo}:OneGithubRepoREADMEProps){
9    const data = await getGithubREADME({owner,repo}) 
10   
11    if (!data ) {
12      return null;
13    }
14
15return (
16 <div id="readme" className='w-[95%] md:w-[85%]  h-full  
17 bg-base-200/30 p-5 rounded-xl '>
18  <h2 className="text-2xl font-bold text-start w-full capitalize">{repo} readme</h2>
19   <div className="markdown" dangerouslySetInnerHTML={{ __html: data}} />
20 </div>
21);
22}
23

1
2"use client"
3import sdk from "@stackblitz/sdk";
4import { useEffect } from "react";
5
6interface stackblitzEmbedProps {
7    repo: string;
8    owner: string;
9
10}
11
12export function StackblitzEmbed({owner,repo}: stackblitzEmbedProps) {
13  const selectedRepo = {
14    github: `${owner}/${repo}`,
15    openFile: "README.md",
16  };
17
18  useEffect(() => {
19    sdk.embedGithubProject("embed", selectedRepo.github, {
20      height: 1000,
21      clickToLoad: true,
22      // openFile: selectedRepo.openFile,
23    });
24  }, [selectedRepo.github]);
25
26  /**
27   * Open the project in a new window on StackBlitz
28   */
29  function openProject() {
30    sdk.openGithubProject(selectedRepo.github, {
31      // openFile: selectedRepo.openFile,
32    });
33  }
34
35  return (
36  <div id="stackblitz" className="w-full h-full relative">
37    <button className="btn btn-sm btn-outline hover:bg-secondary absolute top-[1%] right-[2%]" 
38    onClick={openProject} >
39      Open in new window
40    </button>
41    <div id="embed" className="mt-5 p-5 w-[95%] h-full flex items-center justify-center">B</div>
42
43  </div>
44  )
45}