Skip to content

Commit 88ff131

Browse files
SikandarJODDSikandarJODD
committed
Updated Concepts
1 parent 3f68763 commit 88ff131

File tree

19 files changed

+795
-12
lines changed

19 files changed

+795
-12
lines changed

‎src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<meta property="twitter:description" content="Roadmap for Developers & Coders">
2222
<meta property="twitter:card" content="summary_large_image">
2323
<meta property="twitter:image" content="https://i.pinimg.com/736x/9e/be/8d/9ebe8db903a77a0a1fa5d2c575686f4e.jpg">
24-
<script src="https://cdn.jsdelivr.net/npm/shiki"></script>
24+
<!-- <script src="https://cdn.jsdelivr.net/npm/shiki"></script> -->
2525
%sveltekit.head%
2626
</head>
2727

‎src/lib/backend/BackendGuide.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
</a>
3535
<a
3636
in:fly={{ y: 100, duration: 300, delay: 500 }}
37-
href="/databases/d"
37+
href="/databases/concept"
3838
class="div2 box border dark:bg-orange-800/20 dark:border-orange-500 border-sky-600 bg-sky-600/30"
3939
>
4040
<FileBadge class="mr-1" size="30" strokeWidth="1.8" />
@@ -43,6 +43,7 @@
4343
<a
4444
in:fly={{ x: 100, duration: 300, delay: 1000 }}
4545
href="/databases/tools"
46+
target="_blank"
4647
class="div3 box border bg-emerald-500/30 dark:bg-emerald-800/20 border-emerald-500 bg"
4748
>
4849
<svg

‎src/lib/backend/concept/ConceptFlow.svelte‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import { writable } from 'svelte/store';
3+
import { SvelteFlow, Controls, Background, BackgroundVariant } from '@xyflow/svelte';
4+
import { onMount } from 'svelte';
5+
import { useSvelteFlow } from '@xyflow/svelte';
6+
import '@xyflow/svelte/dist/style.css';
7+
import '$lib/style.css';
8+
9+
import { conceptNodes, conceptEdges } from './allconceptmap';
10+
import ConceptNode from '$lib/frontend/concepts/ConceptNode.svelte';
11+
12+
let nodeTypes = {
13+
framework: ConceptNode
14+
};
15+
const nodes = writable(conceptNodes);
16+
const edges = writable(conceptEdges);
17+
18+
const { setZoom } = useSvelteFlow();
19+
onMount(() => {
20+
setTimeout(() => {
21+
setZoom(0.97, { duration: 300 });
22+
}, 800);
23+
});
24+
</script>
25+
26+
<div style:height="90vh">
27+
<SvelteFlow {nodes} {edges} fitView {nodeTypes}>
28+
<Controls />
29+
<Background variant={BackgroundVariant.Dots} gap={18} />
30+
</SvelteFlow>
31+
</div>

‎src/lib/backend/concept/allconceptmap.ts‎

Lines changed: 481 additions & 0 deletions
Large diffs are not rendered by default.

‎src/lib/backend/tools/ToolsFrame.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
2121
const { setZoom } = useSvelteFlow();
2222
onMount(() => {
23-
// window.location.reload();
2423
setTimeout(() => {
2524
setZoom(0.82, { duration: 300 });
2625
}, 800);

‎src/lib/frontend/concepts/ConceptNode.svelte‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script lang="ts">
2+
import Button from '$ui/button/button.svelte';
3+
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
4+
import * as Sheet from '$ui/ui/sheet';
5+
import Separator from '$ui/ui/separator/separator.svelte';
6+
type $$Props = NodeProps;
7+
8+
export let data: $$Props['data'];
9+
export let id: $$Props['data'];
10+
const { label, icon, src, desc, link, starter_code, docs, examples, playground } = data;
11+
export let isConnectable: $$Props['isConnectable'];
12+
</script>
13+
14+
<Handle type="source" position={Position.Bottom} {isConnectable} />
15+
<Handle type="target" position={Position.Top} {isConnectable} />
16+
{#if label === 'Frontend Frameworks' || label === 'Full Stack Frameworks'}
17+
<Button class="font-bold">
18+
{#if icon}
19+
<img src={icon} alt={label} class="h-5 w-5 mr-1" />
20+
{:else if data.src}
21+
<svelte:component this={src} strokeWidth="1.4" size="22" class="mr-1" />
22+
{/if}
23+
24+
{label}</Button
25+
>
26+
{:else}
27+
<div>
28+
<Sheet.Root>
29+
<Sheet.Trigger>
30+
<Button class="font-bold">
31+
{#if icon}
32+
<img src={icon} alt={label} class="h-5 w-5 mr-1" />
33+
{:else if data.src}
34+
<svelte:component this={src} strokeWidth="1.4" size="22" class="mr-1" />
35+
{/if}
36+
37+
{label}</Button
38+
>
39+
</Sheet.Trigger>
40+
<Sheet.Content side="frame" class="px-3 md:px-8">
41+
<Sheet.Header class="mb-2">
42+
<a href={link} target="_blank">
43+
<Sheet.Title class="md:text-2xl flex items-center font-bold">
44+
{#if icon}
45+
<img src={icon} alt={label} class="h-7 w-7 mr-1" />
46+
{:else if data.src}
47+
<svelte:component this={src} strokeWidth="1.4" size="26" class="mr-1" />
48+
{/if}
49+
{label}</Sheet.Title
50+
>
51+
</a>
52+
</Sheet.Header>
53+
<Separator />
54+
<Sheet.Description class="text-primary/80 md:text-lg text-left">{desc}</Sheet.Description>
55+
<div class="starter_code text-left">
56+
{#if starter_code}
57+
<h3 class="text-xl my-2 font-bold">Installation</h3>
58+
<div class="dark:bg-gray-800 flex flex-col p-2 rounded-md">
59+
{#each starter_code.split('\n') as item}
60+
<code class="">
61+
{item}
62+
</code>
63+
{/each}
64+
</div>
65+
{/if}
66+
</div>
67+
<div class=" text-left">
68+
<h3 class="text-xl mt-2 font-bold">Important Links</h3>
69+
<div class="prose dark:prose-a:text-primary/90">
70+
<ul>
71+
<li>
72+
<a href={docs} target="_blank" class="">Docs</a>
73+
</li>
74+
75+
{#if examples}
76+
<li>
77+
<a href={examples} target="_blank" class="">Examples</a>
78+
</li>
79+
{/if}
80+
{#if playground}
81+
<li>
82+
<a href={playground} target="_blank" class="">Playground</a>
83+
</li>
84+
{/if}
85+
</ul>
86+
</div>
87+
</div>
88+
</Sheet.Content>
89+
</Sheet.Root>
90+
</div>
91+
{/if}

‎src/lib/frontend/flowNodes/frameworkNode.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
44
import * as Sheet from '$ui/ui/sheet';
55
import Separator from '$ui/ui/separator/separator.svelte';
6-
import { split } from 'postcss/lib/list';
76
type $$Props = NodeProps;
87
98
export let data: $$Props['data'];

‎src/lib/home/GuideDev.svelte‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<script>
2+
import Button from '$ui/button/button.svelte';
3+
import { fly, slide } from 'svelte/transition';
4+
5+
let screenWidth = 0;
6+
</script>
7+
8+
<svelte:window bind:innerWidth={screenWidth} />
9+
<div class="flex flex-col justify-center items-center h-[84vh] md:h-[90vh] relative px-2 md:px-0">
10+
<div class="text-center">
11+
<h1 class="font-semibold head_title text-3xl md:text-5xl">
12+
<!-- {#key textCode}
13+
<span in:blur>{textCode}</span>
14+
{/key} -->
15+
Coding Guide.
16+
</h1>
17+
<p class="mt-1.5 md:mt-3 text-lg text-primary/70 head_para">
18+
Simple guide to Web Development & Competitive Coding with Interview Questions
19+
</p>
20+
</div>
21+
{#if screenWidth > 768}
22+
<div class="parent mt-5">
23+
<a
24+
in:slide={{ duration: 300 }}
25+
href="/roadmap/stl"
26+
class="div1 box border bg-orange-400/30 border-orange-500 dark:border-sky-400 dark:bg-sky-800/20"
27+
>
28+
DSA
29+
</a>
30+
<a
31+
in:fly={{ y: 100, duration: 300, delay: 500 }}
32+
href="/databases/d"
33+
class="div2 box border dark:bg-orange-800/20 dark:border-orange-500 border-sky-600 bg-sky-600/30"
34+
>
35+
Databases
36+
</a>
37+
<a
38+
in:fly={{ x: 100, duration: 300, delay: 1000 }}
39+
href="/fullstack"
40+
class="div3 box border bg-emerald-500/30 dark:bg-emerald-800/20 border-emerald-500 bg"
41+
>
42+
Full-stack</a
43+
>
44+
<div
45+
class="div4 box border bg-gray-100 border-gray-600 dark:border-cyan-800/50 dark:bg-cyan-800/10"
46+
/>
47+
<div
48+
class="div5 box border bg-gray-100 border-gray-600 dark:border-gray-800 dark:bg-gray-800/10"
49+
/>
50+
<div
51+
class="div6 box border bg-gray-100 border-gray-600 dark:border-gray-800 dark:bg-gray-800/10"
52+
/>
53+
<div
54+
class="div7 box border bg-gray-100 border-gray-600 dark:border-cyan-800/50 dark:bg-cyan-800/10"
55+
/>
56+
</div>
57+
{:else}
58+
<div class="flex flex-wrap gap-2 mt-5 justify-center">
59+
<Button size="lg" href="/fullstack/frameworks">Frameworks</Button>
60+
<Button size="lg" href="/fullstack/concepts">Concepts</Button>
61+
<Button size="lg" href="/fullstack/interview">Interview</Button>
62+
</div>
63+
{/if}
64+
</div>
65+
66+
<style>
67+
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');
68+
69+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
70+
.head_title {
71+
font-family: 'Sora', sans-serif;
72+
font-optical-sizing: auto;
73+
font-weight: 600;
74+
font-style: normal;
75+
}
76+
.head_para {
77+
font-family: 'Sora', sans-serif;
78+
}
79+
/* .parent {
80+
display: grid;
81+
grid-template-columns: repeat(2, 1fr);
82+
grid-template-rows: repeat(2, 1fr);
83+
grid-column-gap: 10px;
84+
grid-row-gap: 10px;
85+
font-weight: 500;
86+
font-family: 'Poppins', sans-serif;
87+
}
88+
89+
.div1 {
90+
grid-area: 1 / 1 / 2 / 2;
91+
height: 150px;
92+
width: 320px;
93+
}
94+
.div2 {
95+
height: 150px;
96+
width: 320px;
97+
grid-area: 2 / 1 / 3 / 2;
98+
}
99+
.div3 {
100+
height: 310px;
101+
width: 320px;
102+
grid-area: 1 / 2 / 3 / 3;
103+
} */
104+
.box {
105+
display: flex;
106+
align-items: center;
107+
justify-content: center;
108+
padding: 30px;
109+
border-radius: 15px;
110+
font-size: 2rem;
111+
}
112+
.parent {
113+
display: grid;
114+
grid-template-columns: repeat(6, 1fr);
115+
grid-template-rows: repeat(6, 1fr);
116+
grid-column-gap: 10px;
117+
grid-row-gap: 10px;
118+
font-family: 'Poppins', sans-serif;
119+
}
120+
121+
.div1 {
122+
grid-area: 1 / 2 / 4 / 4;
123+
}
124+
.div2 {
125+
grid-area: 1 / 4 / 7 / 6;
126+
}
127+
.div3 {
128+
grid-area: 4 / 2 / 7 / 4;
129+
}
130+
.div4 {
131+
grid-area: 1 / 6 / 5 / 7;
132+
}
133+
.div5 {
134+
grid-area: 5 / 6 / 7 / 7;
135+
}
136+
.div6 {
137+
grid-area: 1 / 1 / 3 / 2;
138+
}
139+
.div7 {
140+
grid-area: 3 / 1 / 7 / 2;
141+
}
142+
</style>

‎src/lib/home/allFeature.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
];
6363
</script>
6464

65-
<div class="mx-3 mt-20 md:mt-20 md:mx-20 flex justify-center flex-col items-center">
65+
<div class="mx-3 mt-20 md:mt-20 md:mx-20 flex justify-center flex-col items-center">
6666
<h1 class="text-3xl lg:text-5xl font-bold">Features</h1>
6767
<div class="flex flex-wrap gap-5 md:gap-x-10 my-4 lg:my-10 justify-center">
6868
{#each features as { name, desc, sub }}

‎src/lib/images/backend/drizzle.svg‎

Lines changed: 13 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)