Skip to content

Commit

Permalink
basic codeExample syntax highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
tacheraSasi committed Nov 26, 2024
1 parent 04dfe1f commit 9ca51f0
Show file tree
Hide file tree
Showing 5 changed files with 429 additions and 34 deletions.
15 changes: 10 additions & 5 deletions website/components/code-example.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ import { useEffect, useState } from 'react'
import { motion } from 'motion/react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { codeExamples } from '@/lib/codeExample'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { dracula ,dark ,oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'


export default function CodeExample() {
const [activeTab, setActiveTab] = useState('basics')

useEffect(()=>{
useEffect(() => {
console.log(activeTab)
},[activeTab])
}, [activeTab])

return (
<section id="code-example" className="container py-24 sm:py-32">
Expand All @@ -23,9 +26,10 @@ export default function CodeExample() {
transition={{ duration: 0.5 }}
>
<Tabs defaultValue="basics" className="w-full" onValueChange={setActiveTab}>
<TabsList className="grid w-full grid-cols-3">
<TabsList className="grid w-full grid-cols-4">
<TabsTrigger value="basics">Basics</TabsTrigger>
<TabsTrigger value="functions">Functions</TabsTrigger>
<TabsTrigger value="jsonModule">JSON</TabsTrigger>
<TabsTrigger value="timeAndNet">Time & Network</TabsTrigger>
</TabsList>
{Object.entries(codeExamples).map(([key, code]) => (
Expand All @@ -37,7 +41,9 @@ export default function CodeExample() {
className="relative"
>
<pre className="p-4 rounded-lg bg-muted overflow-x-auto">
<code className="text-sm font-mono">{code}</code>
<SyntaxHighlighter language="javascript" style={oneDark}>
{code}
</SyntaxHighlighter>
</pre>
</motion.div>
</TabsContent>
Expand All @@ -47,4 +53,3 @@ export default function CodeExample() {
</section>
)
}

97 changes: 68 additions & 29 deletions website/lib/codeExample.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,75 @@
export const codeExamples = {
basics: `// Basic VintLang Operations
let name = "VintLang"
s = name.split("")
for i in s {
print(i)
}
// Type conversion
age = "10"
convert(age, "INTEGER")
print(type(age))`,
let name = "VintLang"
s = name.split("")
for i in s {
print(i)
}
// Type conversion
age = "10"
convert(age, "INTEGER")
print(type(age))`,

functions: `// Function Definition in VintLang
let printDetails = func(name, age, height) {
print("My name is " + name +
", I am " + age +
" years old, and my height is " +
height + " feet.")
}
// Function call
printDetails("VintLang", "10", "6.0")`,
let printDetails = func(name, age, height) {
print("My name is " + name +
", I am " + age +
" years old, and my height is " +
height + " feet.")
}
// Function call
printDetails("VintLang", "10", "6.0")`,

timeAndNet: `// Time and Network Operations
import time
import net
// Time operations
print(time.format(time.now(), "02-01-2006 15:04:05"))
print(time.add(time.now(), "1h"))
import time
import net
// Time operations
print(time.format(time.now(), "02-01-2006 15:04:05"))
print(time.add(time.now(), "1h"))
// Network request
let res = net.get("https://example.com")
print(res)`,

// Network request
let res = net.get("https://example.com")
print(res)`,
}
jsonModule: `// JSON Module Examples in VintLang
import json
// Example 1: Decode a JSON string
print("=== Example 1: Decode ===")
raw_json = '{"name": "John", "age": 30, "isAdmin": false, "friends": ["Jane", "Doe"]}'
decoded = json.decode(raw_json)
print("Decoded Object:", decoded)
// Example 2: Encode a Vint object to JSON
print("\\n=== Example 2: Encode ===")
data = {
"language": "Vint",
"version": 1.0,
"features": ["custom modules", "native objects"]
}
encoded_json = json.encode(data)
print("Encoded JSON:", encoded_json)
// Example 3: Pretty print a JSON string
print("\\n=== Example 3: Pretty Print ===")
raw_json_pretty = '{"name":"John","age":30,"friends":["Jane","Doe"]}'
pretty_json = json.pretty(raw_json_pretty)
print("Pretty JSON:\\n", pretty_json)
// Example 4: Merge two JSON objects
print("\\n=== Example 4: Merge ===")
json1 = {"name": "John", "age": 30}
json2 = {"city": "New York", "age": 35}
merged_json = json.merge(json1, json2)
print("Merged JSON:", merged_json)
// Example 5: Get a value by key from a JSON object
print("\\n=== Example 5: Get Value by Key ===")
json_object = {"name": "John", "age": 30, "city": "New York"}
value = json.get(json_object, "age")
print("Age Value:", value)`
};

43 changes: 43 additions & 0 deletions website/lib/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,46 @@ export const features = [
icon: Globe,
},
]

export const taupeTheme = {
'code[class*="language-"]': {
color: '#3c3a36', // Dark taupe color for text
background: 'none',
fontFamily: 'monospace',
fontSize: '1em',
lineHeight: '1.5',
whiteSpace: 'pre',
wordWrap: 'normal',
tabSize: '4',
hyphens: 'none',
},
'pre[class*="language-"]': {
background: '#ebe3d7', // Lighter taupe for the background
padding: '16px',
borderRadius: '5px',
overflow: 'auto',
},
'token.keyword': {
color: '#a15c1c', // Earthy brown for keywords
},
'token.string': {
color: '#6a493d', // Soft brownish color for strings
},
'token.comment': {
color: '#928e85', // Faded taupe gray for comments
fontStyle: 'italic',
},
'token.operator': {
color: '#3c3a36', // Darker taupe for operators
},
'token.function': {
color: '#4b3e31', // A warm brown for function names
},
'token.variable': {
color: '#2f2a27', // A darker taupe for variable names
},
'token.number': {
color: '#d49952', // A slightly golden brown for numbers
},
}

Loading

0 comments on commit 9ca51f0

Please sign in to comment.