Skip to content

Commit ca3dfda

Browse files
MohamedElmdaryMohamedElmdary
committed
add legal pages
1 parent cbf5b48 commit ca3dfda

13 files changed

Lines changed: 543 additions & 206 deletions

File tree

‎frontend/kubecloud-v2/assets/scss/global.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,4 +150,5 @@ blockquote > * {
150150
&:last-child {
151151
margin-bottom: 0 !important;
152152
}
153-
}
153+
}
154+

‎frontend/kubecloud-v2/assets/scss/vuetify.scss‎

Lines changed: 13 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -14,142 +14,20 @@
1414
}
1515

1616
// markdown styles
17-
.markdown {
18-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
19-
Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
20-
line-height: 1.7;
21-
color: #c9d1d9;
22-
background-color: #0d1117;
23-
max-width: 900px;
24-
margin: 0 auto;
25-
padding: 24px;
26-
word-wrap: break-word;
27-
28-
/* Headings */
29-
h1,
30-
h2,
31-
h3,
32-
h4,
33-
h5,
34-
h6 {
35-
color: #e6edf3;
36-
font-weight: 600;
37-
margin: 24px 0 16px;
38-
line-height: 1.25;
39-
}
40-
41-
h1 {
42-
font-size: 2.2em;
43-
border-bottom: 1px solid #30363d;
44-
padding-bottom: 0.3em;
45-
}
46-
47-
h2 {
48-
font-size: 1.7em;
49-
border-bottom: 1px solid #30363d;
50-
padding-bottom: 0.3em;
51-
}
52-
53-
h3 { font-size: 1.4em; }
54-
h4 { font-size: 1.2em; }
55-
56-
/* Paragraphs */
57-
p {
58-
margin: 0 0 16px;
59-
}
60-
61-
/* Links */
62-
a {
63-
color: #58a6ff;
64-
text-decoration: none;
65-
}
66-
67-
a:hover {
68-
text-decoration: underline;
69-
}
70-
71-
/* Lists */
72-
ul,
73-
ol {
74-
margin: 0 0 16px 24px;
75-
}
76-
77-
li {
78-
margin: 6px 0;
79-
}
80-
81-
/* Blockquotes */
82-
blockquote {
83-
margin: 16px 0;
84-
padding: 0.75em 1em;
85-
color: #8b949e;
86-
background: #161b22;
87-
border-left: 4px solid #30363d;
88-
}
89-
90-
/* Inline code */
91-
code {
92-
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
93-
font-size: 0.95em;
94-
background: #161b22;
95-
color: #e6edf3;
96-
padding: 0.2em 0.4em;
97-
border-radius: 6px;
98-
}
99-
100-
/* Code blocks */
101-
pre {
102-
background: #010409;
103-
color: #c9d1d9;
104-
padding: 16px;
105-
overflow: auto;
106-
border-radius: 10px;
107-
margin: 16px 0;
108-
border: 1px solid #30363d;
109-
}
110-
111-
pre code {
112-
background: none;
113-
padding: 0;
114-
color: inherit;
115-
}
116-
117-
/* Tables */
118-
table {
119-
border-collapse: collapse;
120-
width: 100%;
121-
margin: 16px 0;
122-
}
123-
124-
th,
125-
td {
126-
border: 1px solid #30363d;
127-
padding: 8px 12px;
128-
}
129-
130-
th {
131-
background: #161b22;
132-
font-weight: 600;
133-
}
134-
135-
/* Images */
136-
img {
137-
max-width: 100%;
138-
display: block;
139-
margin: 16px auto;
140-
border-radius: 8px;
141-
}
142-
143-
/* Horizontal rule */
144-
hr {
145-
border: none;
146-
border-top: 1px solid #30363d;
147-
margin: 24px 0;
17+
// markdown
18+
.grid {
19+
&,
20+
> ul {
21+
@extend .d-md-flex, .ga-5, .justify-space-between, .w-100;
14822
}
23+
14924

150-
/* Selection */
151-
::selection {
152-
background: #264f78;
25+
> ul > li,
26+
&-item {
27+
width: 48%;
28+
29+
@media screen and (max-width: 960px) {
30+
width: 100%;
31+
}
15332
}
154-
15533
}

‎frontend/kubecloud-v2/components/WorkflowDialogCard.vue‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,22 +115,18 @@
115115
</p>
116116
</v-col>
117117

118-
<v-col cols="12">
118+
<v-col v-if="workflow?.metadata && Object.keys(workflow.metadata).length > 0" cols="12">
119119
<p class="text-subtitle-2 opacity-50 mb-1 text-uppercase">
120120
metadata
121121
</p>
122-
<pre>
123-
{{ workflow?.metadata }}
124-
</pre>
122+
<div :style="{ margin: '-20px 0 -24px 0' }" v-html="metadata" />
125123
</v-col>
126124

127125
<v-col cols="12">
128126
<p class="text-subtitle-2 opacity-50 mb-1 text-uppercase">
129127
state
130128
</p>
131-
<pre class="w-100 overflow-x-auto">
132-
{{ workflow?.state }}
133-
</pre>
129+
<div :style="{ margin: '-20px 0 -24px 0' }" v-html="state" />
134130
</v-col>
135131
</v-row>
136132
</v-card-text>
@@ -145,4 +141,6 @@ defineEmits<{ (e: "cancel"): void }>()
145141
146142
const color = useStatusColor(() => props.workflow?.status ?? "")
147143
const createdAt = useDateFormat(() => props.workflow?.created_at, "DD/MM/YYYY, HH:mm")
144+
const metadata = computed(() => marked.parse(`\`\`\`json\n${JSON.stringify(props.workflow?.metadata, null, 2)}\n\`\`\``, { renderer }))
145+
const state = computed(() => marked.parse(`\`\`\`json\n${JSON.stringify(props.workflow?.state, null, 2)}\n\`\`\``, { renderer }))
148146
</script>

‎frontend/kubecloud-v2/components/features/FeatureSectionLayout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
<div class="text-subtitle-1 text-accent" v-text="description" />
3535

36-
<div class="d-flex justify-center ga-2 mt-4 flex-wrap">
36+
<div class="d-flex ga-2 mt-4 flex-wrap">
3737
<v-chip
3838
v-for="tag in tags"
3939
:key="tag"

‎frontend/kubecloud-v2/composables/docs.ts‎

Lines changed: 74 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface Doc {
1616
}
1717
}
1818

19-
const marked = new Marked(
19+
export const marked = new Marked(
2020
markedHighlight({
2121
emptyLangClass: "hljs",
2222
langPrefix: "hljs language-",
@@ -27,7 +27,7 @@ const marked = new Marked(
2727
}),
2828
)
2929

30-
const renderer = new marked.Renderer()
30+
export const renderer = new marked.Renderer()
3131

3232
renderer.code = function ({ text }) {
3333
const parts = text.split("\n")
@@ -51,62 +51,64 @@ renderer.blockquote = function ({ tokens }) {
5151
return `<blockquote class="my-6 px-6 pa-4 border-s-lg border-primary rounded" style="--v-border-opacity: 1; background: rgba(var(--v-theme-primary), 0.12);">${content}</blockquote>`
5252
}
5353

54-
export const useDocs = createGlobalState(() => {
55-
// const router = useRouter()
54+
function getIdFromTitle(title: string) {
55+
let id = ""
56+
for (const char of title.toLowerCase()) {
57+
const code = char.charCodeAt(0)
58+
const isAlpha = code >= 97 && code <= 122
59+
const isAllowedSpace = code === 32 && id.length > 0 && id[id.length - 1] !== " "
60+
if (isAlpha || isAllowedSpace) {
61+
id += char
62+
}
63+
}
5664

57-
return useAsyncState(async () => {
58-
const res = await fetch("/docs/docs.yaml")
59-
const data = await res.text()
60-
const docs = yaml.load(data) as Doc[]
61-
const contents = await Promise.all(
62-
docs
63-
.map(doc => fetch(`/docs/${doc.file}`)
64-
.then(res => res.text())),
65-
)
65+
return id.replaceAll(" ", "-")
66+
}
6667

67-
let tableOfContent: Doc["md"]["tableOfContent"] = []
68-
69-
const linkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42"/></svg>`
70-
renderer.heading = function ({ depth, tokens }) {
71-
const content = this.parser.parseInline(tokens)
72-
let id = ""
73-
let a = ""
74-
if (depth === 2) {
75-
id = content.toLowerCase().replaceAll(":", "").replaceAll(" ", "-")
76-
a = `<a href="#${id}" class="d-inline-block mr-2 text-primary opacity-50">${linkIcon}</a>`
77-
tableOfContent.push({ id, content })
78-
}
68+
let tableOfContent: Doc["md"]["tableOfContent"] = []
69+
70+
const linkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42"/></svg>`
71+
renderer.heading = function ({ depth, tokens }) {
72+
const content = this.parser.parseInline(tokens)
73+
let id = ""
74+
let a = ""
75+
if (depth === 2) {
76+
id = getIdFromTitle(content)
77+
// .toLowerCase().replaceAll(":", "").replaceAll(" ", "-")
78+
a = `<a href="#${id}" class="d-inline-block mr-2 text-primary opacity-50">${linkIcon}</a>`
79+
tableOfContent.push({ id, content })
80+
}
7981

80-
const lv = Math.min(depth + 3, 6)
81-
return `
82-
<h${depth} id="${id}" class="text-h${lv} mb-4">
82+
const lv = Math.min(depth + 3, 6)
83+
return `
84+
<h${depth} id="${id}" class="text-white text-h${lv} mb-4">
8385
${a}${content}
8486
</h${depth}>
8587
`
86-
}
88+
}
8789

88-
renderer.paragraph = function ({ tokens }) {
89-
const content = this.parser.parseInline(tokens)
90-
return `<p class="text-body-1 text-accent mt-3 mb-6">${content}</p>`
91-
}
90+
renderer.paragraph = function ({ tokens }) {
91+
const content = this.parser.parseInline(tokens)
92+
return `<p class="text-body-1 text-accent mt-3 mb-6">${content}</p>`
93+
}
9294

93-
renderer.listitem = function (x) {
94-
const content = this.parser.parse(x.tokens)
95-
return `
96-
<li class="mb-2">
95+
renderer.listitem = function (x) {
96+
const content = this.parser.parse(x.tokens)
97+
return `
98+
<li class="mb-2 text-white">
9799
<span class="text-body-1 text-accent">${content}</span>
98100
</li>
99101
`
100-
}
102+
}
101103

102-
renderer.list = function ({ ordered, items }) {
103-
const tag = ordered ? "ol" : "ul"
104-
const body = items.map(item => this.listitem(item)).join("")
105-
return `<${tag} class="mt-4 mb-6 pl-4" style="list-style-type: square">${body}</${tag}>`
106-
}
104+
renderer.list = function ({ ordered, items }) {
105+
const tag = ordered ? "ol" : "ul"
106+
const body = items.map(item => this.listitem(item)).join("")
107+
return `<${tag} class="mt-4 mb-6 pl-4" style="list-style-type: square">${body}</${tag}>`
108+
}
107109

108-
renderer.link = function ({ href, tokens }) {
109-
const content = this.parser.parseInline(tokens)
110+
renderer.link = function ({ href, tokens }) {
111+
const content = this.parser.parseInline(tokens)
110112

111113
// if (href.startsWith("/")) {
112114
// const a = document.createElement("a")
@@ -120,24 +122,39 @@ export const useDocs = createGlobalState(() => {
120122
// }
121123

122124
;(window as any).xonClick = function (e: Event, _: HTMLAnchorElement) {
123-
e.preventDefault()
124-
// console.log({ event, target })
125-
}
125+
e.preventDefault()
126+
// console.log({ event, target })
127+
}
126128

127-
return `<a class="text-link" href="${href}" onclick="xonClick(event, this);">${content}</a>`
128-
}
129+
return `<a class="text-link" href="${href}" onclick="xonClick(event, this);">${content}</a>`
130+
}
129131

130-
renderer.strong = function ({ tokens }) {
131-
const content = this.parser.parseInline(tokens)
132-
return `<strong class="text-white text-body-1 font-weight-bold">${content}</strong>`
133-
}
132+
renderer.strong = function ({ tokens }) {
133+
const content = this.parser.parseInline(tokens)
134+
return `<strong class="text-white text-body-1 font-weight-bold">${content}</strong>`
135+
}
134136

135-
renderer.codespan = function ({ text }) {
136-
return `<code
137+
renderer.codespan = function ({ text }) {
138+
return `<code
137139
class="text-primary text-body-1 border border-primary py-1 px-2 rounded"
138140
style="--v-border-opacity: 0.12; background-color: rgba(var(--v-theme-primary), var(--v-border-opacity))"
139141
>${text}</code>`
140-
}
142+
}
143+
144+
export const useDocs = createGlobalState(() => {
145+
// const router = useRouter()
146+
147+
return useAsyncState(async () => {
148+
const res = await fetch("/docs/docs.yaml")
149+
const data = await res.text()
150+
const docs = yaml.load(data) as Doc[]
151+
const contents = await Promise.all(
152+
docs
153+
.map(doc => fetch(`/docs/${doc.file}`)
154+
.then(res => res.text())),
155+
)
156+
157+
// let tableOfContent: Doc["md"]["tableOfContent"] = []
141158

142159
return docs.map((doc, index) => {
143160
tableOfContent = []

‎frontend/kubecloud-v2/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@vueuse/nuxt": "14.1.0",
2222
"async-await-mutex-lock": "^1.0.12",
2323
"axios": "^1.13.2",
24+
"front-matter": "^4.0.2",
2425
"highlight.js": "^11.11.1",
2526
"izitoast": "^1.4.0",
2627
"js-yaml": "^4.1.1",

0 commit comments

Comments
 (0)