feat: Add Tailwind CSS and UI components
- Updated project to use Tailwind CSS for styling. - Added new UI components including Navbar, Sidebar, Footer, Accordion, and Button. - Created markdown content page for documentation. - Improved overall structure and design of the application.
This commit is contained in:
Mahmoud Emad
parent
373820ec8a
commit
4c6ce31b20
2
run.sh
2
run.sh
@ -1,7 +1,7 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Change to the Svelte app directory
|
||||
cd my-svelte-app
|
||||
cd sweb
|
||||
|
||||
# Run the development server
|
||||
bun run dev
|
||||
3
sweb/bun.lock
Normal file → Executable file
3
sweb/bun.lock
Normal file → Executable file
@ -1,8 +1,7 @@
|
||||
{
|
||||
"lockfileVersion": 1,
|
||||
"lockfileVersion": 0,
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "sweb",
|
||||
"dependencies": {
|
||||
"lucide-svelte": "^0.509.0",
|
||||
},
|
||||
|
||||
@ -21,6 +21,13 @@
|
||||
"vite": "^6.3.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-svelte": "^0.509.0"
|
||||
"@tailwindcss/postcss": "^4.1.6",
|
||||
"@tailwindcss/vite": "^4.1.6",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-svelte": "^0.509.0",
|
||||
"marked": "^15.0.11",
|
||||
"shadcn-svelte": "^0.14.2",
|
||||
"tailwind-merge": "^3.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
1565
sweb/pnpm-lock.yaml
Normal file
1565
sweb/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
6
sweb/public/images/introduction/sample-image.svg
Normal file
6
sweb/public/images/introduction/sample-image.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="800" height="400" fill="#f3f4f6" />
|
||||
<text x="400" y="200" font-family="Arial" font-size="48" text-anchor="middle" fill="#1e40af">Sample Image</text>
|
||||
<text x="400" y="250" font-family="Arial" font-size="24" text-anchor="middle" fill="#4b5563">800 x 400</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 406 B |
@ -1,47 +1,9 @@
|
||||
<script lang="ts">
|
||||
import svelteLogo from './assets/svelte.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import Counter from './lib/Counter.svelte'
|
||||
import Layout from "./components/Layout.svelte";
|
||||
import Home from "./components/Home.svelte";
|
||||
import "./app.css";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank" rel="noreferrer">
|
||||
<img src={viteLogo} class="logo" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
|
||||
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + Svelte</h1>
|
||||
|
||||
<div class="card">
|
||||
<Counter />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
|
||||
</p>
|
||||
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite and Svelte logos to learn more
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.svelte:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
<Layout>
|
||||
<Home />
|
||||
</Layout>
|
||||
|
||||
@ -1,87 +1,11 @@
|
||||
@import "tailwindcss";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
@layer base {
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
sweb/src/components/Footer.svelte
Normal file
98
sweb/src/components/Footer.svelte
Normal file
@ -0,0 +1,98 @@
|
||||
<script lang="ts">
|
||||
// Footer component
|
||||
</script>
|
||||
|
||||
<footer class="bg-gray-100 border-t border-gray-200 py-6 px-4 w-full mt-auto">
|
||||
<div class="container mx-auto max-w-6xl">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="mb-4 md:mb-0">
|
||||
<div class="text-lg font-semibold text-blue-800">SecureWeb</div>
|
||||
<p class="text-gray-600 text-sm mt-1">
|
||||
Secure and reliable web solutions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-6">
|
||||
<a
|
||||
href="/"
|
||||
class="text-gray-600 hover:text-blue-800 transition-colors"
|
||||
>Home</a
|
||||
>
|
||||
<a
|
||||
href="/about"
|
||||
class="text-gray-600 hover:text-blue-800 transition-colors"
|
||||
>About</a
|
||||
>
|
||||
<a
|
||||
href="/services"
|
||||
class="text-gray-600 hover:text-blue-800 transition-colors"
|
||||
>Services</a
|
||||
>
|
||||
<a
|
||||
href="/contact"
|
||||
class="text-gray-600 hover:text-blue-800 transition-colors"
|
||||
>Contact</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-4 mt-4 md:mt-0">
|
||||
<a
|
||||
href="/twitter"
|
||||
aria-label="Twitter"
|
||||
class="text-gray-500 hover:text-blue-800"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="/github"
|
||||
aria-label="GitHub"
|
||||
class="text-gray-500 hover:text-blue-800"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="/linkedin"
|
||||
aria-label="LinkedIn"
|
||||
class="text-gray-500 hover:text-blue-800"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="border-t border-gray-200 mt-6 pt-6 text-center text-gray-500 text-sm"
|
||||
>
|
||||
<p>
|
||||
© {new Date().getFullYear()} SecureWeb. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
146
sweb/src/components/Home.svelte
Normal file
146
sweb/src/components/Home.svelte
Normal file
@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
import MarkdownContent from "./MarkdownContent.svelte";
|
||||
import { Shield, Zap, Smartphone } from "lucide-svelte";
|
||||
|
||||
export let contentPath: string = "introduction/introduction";
|
||||
|
||||
// Default to introduction if no path is provided
|
||||
$: actualPath = contentPath || "introduction/introduction";
|
||||
</script>
|
||||
|
||||
<div class="py-8 px-4 max-w-7xl mx-auto">
|
||||
{#if contentPath}
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
|
||||
<MarkdownContent path={actualPath} />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Hero Section -->
|
||||
<section class="mb-20 text-center md:text-left">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="md:w-1/2 mb-10 md:mb-0">
|
||||
<h1
|
||||
class="text-4xl md:text-5xl font-bold mb-6 text-gray-900 leading-tight"
|
||||
>
|
||||
Welcome to <span class="text-blue-600">SecureWeb</span>
|
||||
</h1>
|
||||
<p
|
||||
class="text-xl text-gray-600 max-w-2xl mb-8 leading-relaxed"
|
||||
>
|
||||
A comprehensive platform for secure and reliable web
|
||||
solutions designed for modern businesses.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<button
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-colors duration-200"
|
||||
>Get Started</button
|
||||
>
|
||||
<button
|
||||
class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-8 py-3 rounded-md font-medium border border-gray-300 transition-colors duration-200"
|
||||
>Learn More</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<img
|
||||
src="https://via.placeholder.com/600x400/f3f4f6/1e40af?text=SecureWeb"
|
||||
alt="SecureWeb Platform"
|
||||
class="rounded-lg shadow-lg w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="mb-20">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold mb-4 text-gray-900">
|
||||
Our Features
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Discover what makes SecureWeb the preferred choice for
|
||||
security-conscious businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<div
|
||||
class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100"
|
||||
>
|
||||
<div
|
||||
class="bg-blue-100 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-6"
|
||||
>
|
||||
<Shield class="h-7 w-7 text-blue-600" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800">
|
||||
Advanced Security
|
||||
</h3>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
State-of-the-art encryption and security protocols to
|
||||
keep your data protected from threats.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100"
|
||||
>
|
||||
<div
|
||||
class="bg-blue-100 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-6"
|
||||
>
|
||||
<Zap class="h-7 w-7 text-blue-600" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800">
|
||||
Lightning Performance
|
||||
</h3>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Optimized for speed and efficiency, ensuring a smooth
|
||||
and responsive user experience.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-gray-50 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow border border-gray-100"
|
||||
>
|
||||
<div
|
||||
class="bg-blue-100 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-6"
|
||||
>
|
||||
<Smartphone class="h-7 w-7 text-blue-600" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-4 text-gray-800">
|
||||
Responsive Design
|
||||
</h3>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Fully responsive layouts that provide a seamless
|
||||
experience across all devices and screen sizes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section>
|
||||
<div
|
||||
class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl p-10 text-white shadow-xl"
|
||||
>
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="mb-8 md:mb-0 md:w-2/3">
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Ready to Get Started?
|
||||
</h2>
|
||||
<p class="text-lg text-blue-100 mb-0 max-w-2xl">
|
||||
Join thousands of satisfied users who trust
|
||||
SecureWeb for their web security needs. Sign up
|
||||
today and experience the difference.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="bg-white text-blue-700 hover:bg-blue-50 px-8 py-3 rounded-lg font-semibold text-lg shadow-md transition-colors"
|
||||
>
|
||||
Sign Up Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
67
sweb/src/components/Layout.svelte
Normal file
67
sweb/src/components/Layout.svelte
Normal file
@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import Navbar from "./Navbar.svelte";
|
||||
import Sidebar from "./Sidebar.svelte";
|
||||
import Footer from "./Footer.svelte";
|
||||
import NavDataProvider from "./NavDataProvider.svelte";
|
||||
import Home from "./Home.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let sidebarVisible = true;
|
||||
let isMobile = false;
|
||||
let selectedContentPath = "";
|
||||
|
||||
function toggleSidebar() {
|
||||
sidebarVisible = !sidebarVisible;
|
||||
}
|
||||
|
||||
function handleNavItemClick(path: string) {
|
||||
selectedContentPath = path;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile = window.innerWidth < 768;
|
||||
if (isMobile) {
|
||||
sidebarVisible = false;
|
||||
} else {
|
||||
sidebarVisible = true;
|
||||
}
|
||||
};
|
||||
|
||||
checkMobile();
|
||||
window.addEventListener("resize", checkMobile);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", checkMobile);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-gray-50">
|
||||
<Navbar {toggleSidebar} />
|
||||
|
||||
<div class="flex flex-1 pt-16">
|
||||
<NavDataProvider let:navData>
|
||||
{#if sidebarVisible}
|
||||
<Sidebar {navData} onNavItemClick={handleNavItemClick} />
|
||||
{/if}
|
||||
|
||||
<main
|
||||
class={`flex-1 transition-all duration-300 ${sidebarVisible ? "md:ml-64" : "ml-0"}`}
|
||||
>
|
||||
<div
|
||||
class="container mx-auto px-4 py-8 min-h-[calc(100vh-12rem)]"
|
||||
>
|
||||
{#if selectedContentPath}
|
||||
<Home contentPath={selectedContentPath} />
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
</NavDataProvider>
|
||||
</div>
|
||||
|
||||
<!-- Footer is now outside the main content area -->
|
||||
<Footer />
|
||||
</div>
|
||||
215
sweb/src/components/MarkdownContent.svelte
Normal file
215
sweb/src/components/MarkdownContent.svelte
Normal file
@ -0,0 +1,215 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { marked } from "marked";
|
||||
|
||||
export let path: string = "";
|
||||
|
||||
// Base path for images
|
||||
const imagePath = "/images";
|
||||
|
||||
let content = "";
|
||||
let loading = true;
|
||||
let error: string | null = null;
|
||||
|
||||
$: if (path) {
|
||||
loadMarkdownContent(path);
|
||||
}
|
||||
|
||||
async function loadMarkdownContent(mdPath: string) {
|
||||
if (!mdPath) return;
|
||||
|
||||
loading = true;
|
||||
error = null;
|
||||
content = "";
|
||||
|
||||
try {
|
||||
// Remove leading slash if present
|
||||
const cleanPath = mdPath.startsWith("/")
|
||||
? mdPath.substring(1)
|
||||
: mdPath;
|
||||
|
||||
// If path is just a section like "introduction", append "/introduction" to it
|
||||
const finalPath = cleanPath.includes("/")
|
||||
? cleanPath
|
||||
: `${cleanPath}/${cleanPath}`;
|
||||
|
||||
console.log(`Loading markdown from: /src/docs/${finalPath}.md`);
|
||||
|
||||
const response = await fetch(`/src/docs/${finalPath}.md`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to load content: ${response.status} ${response.statusText}`,
|
||||
);
|
||||
}
|
||||
|
||||
// Get the directory path for relative image references
|
||||
const docDir = finalPath.substring(0, finalPath.lastIndexOf("/"));
|
||||
|
||||
let markdown = await response.text();
|
||||
|
||||
// Process markdown to fix image paths
|
||||
// Replace relative image paths with absolute paths
|
||||
markdown = markdown.replace(
|
||||
/!\[(.*?)\]\((?!http|\/)(.*?)\)/g,
|
||||
(_match, alt, imgPath) => {
|
||||
return ``;
|
||||
},
|
||||
);
|
||||
|
||||
const parsedContent = marked.parse(markdown);
|
||||
content =
|
||||
typeof parsedContent === "string"
|
||||
? parsedContent
|
||||
: await parsedContent;
|
||||
} catch (err: any) {
|
||||
console.error("Error loading markdown content:", err);
|
||||
error = err.message || "Failed to load content";
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (path) {
|
||||
loadMarkdownContent(path);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="markdown-content">
|
||||
{#if loading}
|
||||
<div class="loading">
|
||||
<p>Loading content...</p>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="error">
|
||||
<p>Error: {error}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="content">
|
||||
{@html content}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.markdown-content {
|
||||
padding: 1rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e53e3e;
|
||||
}
|
||||
|
||||
.content :global(h1) {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.content :global(h2) {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.content :global(h3) {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.content :global(p) {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content :global(ul),
|
||||
.content :global(ol) {
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.content :global(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content :global(a) {
|
||||
color: #2563eb;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content :global(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.content :global(blockquote) {
|
||||
border-left: 4px solid #e5e7eb;
|
||||
padding-left: 1rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-style: italic;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.content :global(code) {
|
||||
background-color: #f3f4f6;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.content :global(pre) {
|
||||
background-color: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content :global(pre code) {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content :global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.content :global(hr) {
|
||||
border: 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.content :global(table) {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content :global(th),
|
||||
.content :global(td) {
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.content :global(th) {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
</style>
|
||||
46
sweb/src/components/Navbar.svelte
Normal file
46
sweb/src/components/Navbar.svelte
Normal file
@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
import { Menu, Search, User, Bell } from "lucide-svelte";
|
||||
|
||||
export let toggleSidebar: () => void = () => {};
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="bg-gray-50 border-b border-gray-200 fixed top-0 left-0 right-0 z-10 h-16 flex items-center justify-between px-4 shadow-sm"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
class="md:hidden mr-3 p-2 rounded-md hover:bg-gray-100 text-gray-700"
|
||||
on:click={toggleSidebar}
|
||||
aria-label="Toggle sidebar"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
</button>
|
||||
<div class="text-xl font-bold text-blue-800">SecureWeb</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="relative hidden md:block">
|
||||
<Search
|
||||
class="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
class="pl-9 pr-4 py-1.5 text-sm rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-48 lg:w-64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="p-2 rounded-full hover:bg-gray-100 text-gray-700 relative"
|
||||
>
|
||||
<Bell class="h-5 w-5" />
|
||||
<span
|
||||
class="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full"
|
||||
></span>
|
||||
</button>
|
||||
|
||||
<button class="p-1.5 rounded-full hover:bg-gray-100 text-gray-700">
|
||||
<User class="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
86
sweb/src/components/Sidebar.svelte
Normal file
86
sweb/src/components/Sidebar.svelte
Normal file
@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import type { NavItem } from "../types/nav";
|
||||
import { ChevronDown } from "lucide-svelte";
|
||||
|
||||
export let navData: NavItem[] = [];
|
||||
|
||||
// Define a prop for the event handler
|
||||
export let onNavItemClick: (path: string) => void = () => {};
|
||||
|
||||
// Track which sections are expanded
|
||||
let expanded: Record<string, boolean> = {};
|
||||
|
||||
// Track active item
|
||||
let activePath: string = "";
|
||||
|
||||
function toggleSection(label: string) {
|
||||
expanded[label] = !expanded[label];
|
||||
}
|
||||
|
||||
function handleNavItemClick(path: string, event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
activePath = path;
|
||||
|
||||
// Convert URL path to document path
|
||||
// Remove leading slash
|
||||
const docPath = path.replace(/^\//, "");
|
||||
|
||||
// Call the event handler prop
|
||||
onNavItemClick(docPath);
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside
|
||||
class="sidebar w-64 bg-gray-50 border-r border-gray-200 h-screen fixed top-0 left-0 pt-16 overflow-y-auto shadow-sm"
|
||||
>
|
||||
<nav class="w-full">
|
||||
{#each navData as item}
|
||||
{#if item.children && item.children.length > 0}
|
||||
<div class="border-b border-gray-200">
|
||||
<button
|
||||
class="flex justify-between items-center w-full text-left p-4 hover:bg-gray-100 text-gray-700 font-medium"
|
||||
on:click={() => toggleSection(item.label)}
|
||||
>
|
||||
{item.label}
|
||||
<ChevronDown
|
||||
class="h-4 w-4 transition-transform duration-200 {expanded[
|
||||
item.label
|
||||
]
|
||||
? 'rotate-180'
|
||||
: ''}"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{#if expanded[item.label]}
|
||||
<div class="bg-gray-50">
|
||||
{#each item.children as child}
|
||||
<a
|
||||
href={child.link}
|
||||
class="block p-3 pl-8 hover:bg-gray-100 text-gray-600 border-t border-gray-100 {activePath ===
|
||||
child.link
|
||||
? 'bg-blue-50 text-blue-700 font-medium'
|
||||
: ''}"
|
||||
on:click={(e) =>
|
||||
handleNavItemClick(child.link, e)}
|
||||
>
|
||||
{child.label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<a
|
||||
href={item.link}
|
||||
class="block p-4 hover:bg-gray-100 text-gray-700 border-b border-gray-200 {activePath ===
|
||||
item.link
|
||||
? 'bg-blue-50 text-blue-700 font-medium'
|
||||
: ''}"
|
||||
on:click={(e) => handleNavItemClick(item.link, e)}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
</aside>
|
||||
@ -1,7 +1,17 @@
|
||||
[
|
||||
{
|
||||
"label": "Introduction",
|
||||
"link": "/introduction"
|
||||
"link": "/introduction",
|
||||
"children": [
|
||||
{
|
||||
"label": "Introduction",
|
||||
"link": "/introduction/introduction"
|
||||
},
|
||||
{
|
||||
"label": "With Images",
|
||||
"link": "/introduction/with-images"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Why OurWorld",
|
||||
|
||||
32
sweb/src/docs/introduction/introduction.md
Normal file
32
sweb/src/docs/introduction/introduction.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Introduction to SecureWeb
|
||||
|
||||
Welcome to SecureWeb, a revolutionary platform designed to provide secure and reliable web solutions for modern businesses and individuals.
|
||||
|
||||
## Our Mission
|
||||
|
||||
At SecureWeb, our mission is to create a safer digital environment where users can browse, communicate, and conduct business without compromising their security or privacy. We believe that everyone deserves access to secure web technologies, regardless of their technical expertise.
|
||||
|
||||
## What We Offer
|
||||
|
||||
SecureWeb provides a comprehensive suite of tools and services designed to enhance your online security:
|
||||
|
||||
- **Secure Browsing**: Advanced encryption and security protocols to keep your data safe
|
||||
- **Fast Performance**: Optimized for speed and efficiency, ensuring a smooth user experience
|
||||
- **Responsive Design**: Fully responsive layouts that work perfectly on any device
|
||||
- **Privacy Protection**: Built-in features to protect your privacy and prevent tracking
|
||||
- **Threat Detection**: Real-time monitoring and detection of potential security threats
|
||||
|
||||
## Why Choose SecureWeb
|
||||
|
||||
In today's digital landscape, security threats are constantly evolving. Traditional security measures are often insufficient to protect against sophisticated attacks. SecureWeb uses cutting-edge technology to stay ahead of these threats, providing you with peace of mind as you navigate the online world.
|
||||
|
||||
Our platform is built on the principles of:
|
||||
|
||||
1. **Security by Design**: Security is not an afterthought but a fundamental aspect of our architecture
|
||||
2. **User-Centric Approach**: Powerful security that doesn't compromise usability
|
||||
3. **Continuous Improvement**: Regular updates and enhancements to address emerging threats
|
||||
4. **Transparency**: Clear communication about how we protect your data
|
||||
|
||||
## Getting Started
|
||||
|
||||
Ready to experience a more secure web? Sign up today and join thousands of satisfied users who trust SecureWeb for their security needs.
|
||||
46
sweb/src/docs/introduction/with-images.md
Normal file
46
sweb/src/docs/introduction/with-images.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Introduction with Images
|
||||
|
||||
This is a sample Markdown file that includes images to test our image handling functionality.
|
||||
|
||||
## Using Images in Markdown
|
||||
|
||||
Images can be included in Markdown using the following syntax:
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
## Sample Image References
|
||||
|
||||
Here are some examples of how images can be referenced:
|
||||
|
||||
1. **Relative path image** (this will be processed by our custom handler):
|
||||
|
||||
|
||||
2. **Absolute path image** (already has a leading slash):
|
||||
|
||||
|
||||
3. **External image** (has http/https):
|
||||
|
||||
|
||||
## Image Styling
|
||||
|
||||
Our Markdown renderer applies custom styling to images to ensure they look good in the document:
|
||||
|
||||
- Maximum width is set to 100% to prevent overflow
|
||||
- Border radius is applied for a modern look
|
||||
- Margins are added for proper spacing
|
||||
|
||||
## Testing Different Image Formats
|
||||
|
||||
Markdown supports various image formats:
|
||||
|
||||
- JPEG/JPG
|
||||
- PNG
|
||||
- GIF
|
||||
- SVG
|
||||
- WebP
|
||||
|
||||
## Conclusion
|
||||
|
||||
If you can see the images properly displayed in this document, our image handling functionality is working correctly!
|
||||
90
sweb/src/docs/more-info/more-info.md
Normal file
90
sweb/src/docs/more-info/more-info.md
Normal file
@ -0,0 +1,90 @@
|
||||
# More Information
|
||||
|
||||
## Resources for Learning More About SecureWeb
|
||||
|
||||
Thank you for your interest in SecureWeb. This page provides additional resources to help you learn more about our platform, our approach to security, and how we can help protect your digital life.
|
||||
|
||||
## Documentation
|
||||
|
||||
Our comprehensive documentation covers all aspects of the SecureWeb platform:
|
||||
|
||||
- [User Guides](https://secureweb.com/docs/user-guides)
|
||||
- [API Documentation](https://secureweb.com/docs/api)
|
||||
- [Security Best Practices](https://secureweb.com/docs/best-practices)
|
||||
- [Implementation Guides](https://secureweb.com/docs/implementation)
|
||||
- [Troubleshooting](https://secureweb.com/docs/troubleshooting)
|
||||
|
||||
## Blog and Research
|
||||
|
||||
Stay up-to-date with the latest in web security through our regularly updated blog:
|
||||
|
||||
- [Security Trends and Insights](https://secureweb.com/blog/trends)
|
||||
- [Threat Research](https://secureweb.com/blog/research)
|
||||
- [Product Updates](https://secureweb.com/blog/updates)
|
||||
- [Case Studies](https://secureweb.com/blog/case-studies)
|
||||
- [Security Tips](https://secureweb.com/blog/tips)
|
||||
|
||||
## Webinars and Events
|
||||
|
||||
Join our security experts for live discussions and demonstrations:
|
||||
|
||||
- [Upcoming Webinars](https://secureweb.com/events/webinars)
|
||||
- [Conference Appearances](https://secureweb.com/events/conferences)
|
||||
- [Security Workshops](https://secureweb.com/events/workshops)
|
||||
- [Past Event Recordings](https://secureweb.com/events/recordings)
|
||||
|
||||
## Educational Resources
|
||||
|
||||
We're committed to improving security literacy for everyone:
|
||||
|
||||
- [Security Fundamentals Course](https://secureweb.com/learn/fundamentals)
|
||||
- [Privacy Protection Guide](https://secureweb.com/learn/privacy)
|
||||
- [Threat Recognition Training](https://secureweb.com/learn/threats)
|
||||
- [Security for Families](https://secureweb.com/learn/families)
|
||||
- [Business Security Essentials](https://secureweb.com/learn/business)
|
||||
|
||||
## Community
|
||||
|
||||
Connect with other security-conscious users and our team:
|
||||
|
||||
- [SecureWeb Forum](https://community.secureweb.com)
|
||||
- [GitHub](https://github.com/secureweb)
|
||||
- [Discord Server](https://discord.gg/secureweb)
|
||||
- [Reddit Community](https://reddit.com/r/secureweb)
|
||||
|
||||
## Support
|
||||
|
||||
We're here to help with any questions or issues:
|
||||
|
||||
- [Knowledge Base](https://support.secureweb.com/kb)
|
||||
- [FAQ](https://support.secureweb.com/faq)
|
||||
- [Contact Support](https://support.secureweb.com/contact)
|
||||
- [Report a Vulnerability](https://secureweb.com/security/report)
|
||||
|
||||
## Press and Media
|
||||
|
||||
For media inquiries and resources:
|
||||
|
||||
- [Press Releases](https://secureweb.com/press/releases)
|
||||
- [Media Kit](https://secureweb.com/press/media-kit)
|
||||
- [Brand Assets](https://secureweb.com/press/brand)
|
||||
- [Media Contact](mailto:press@secureweb.com)
|
||||
|
||||
## Careers
|
||||
|
||||
Interested in joining our team?
|
||||
|
||||
- [Current Openings](https://secureweb.com/careers/jobs)
|
||||
- [Our Culture](https://secureweb.com/careers/culture)
|
||||
- [Benefits](https://secureweb.com/careers/benefits)
|
||||
- [Internship Program](https://secureweb.com/careers/internships)
|
||||
|
||||
## Contact Us
|
||||
|
||||
Have questions or want to learn more?
|
||||
|
||||
- **Email**: info@secureweb.com
|
||||
- **Phone**: +1 (555) 123-4567
|
||||
- **Address**: 123 Security Street, Cybertown, CT 12345
|
||||
|
||||
We look forward to helping you create a more secure digital experience.
|
||||
85
sweb/src/docs/our-projects/projects.md
Normal file
85
sweb/src/docs/our-projects/projects.md
Normal file
@ -0,0 +1,85 @@
|
||||
# Our Projects
|
||||
|
||||
## Innovations in Web Security
|
||||
|
||||
At SecureWeb, we're constantly working on new projects to advance the state of web security and privacy. Here are some of our current initiatives:
|
||||
|
||||
## Project SafeHaven
|
||||
|
||||
**Status: Beta Testing**
|
||||
|
||||
SafeHaven is our next-generation secure communication platform, designed to provide end-to-end encrypted messaging, file sharing, and collaboration tools for individuals and organizations handling sensitive information.
|
||||
|
||||
**Key Features:**
|
||||
- Zero-knowledge architecture ensuring that even we cannot access your communications
|
||||
- Multi-platform support (desktop, mobile, web)
|
||||
- Ephemeral messaging with customizable retention policies
|
||||
- Secure video conferencing with verified participants
|
||||
- Tamper-evident audit logs for enterprise users
|
||||
|
||||
We're currently running a closed beta program with selected partners in journalism, legal services, and healthcare. Public beta is scheduled for Q3 2023.
|
||||
|
||||
## Project Sentinel
|
||||
|
||||
**Status: Active Development**
|
||||
|
||||
Sentinel is an AI-powered threat detection system that identifies potential security risks before they can be exploited. Unlike traditional security tools that rely on known signatures, Sentinel uses advanced machine learning to detect anomalous patterns that may indicate new types of attacks.
|
||||
|
||||
**Key Features:**
|
||||
- Predictive threat modeling
|
||||
- Behavioral analysis of network traffic
|
||||
- Automated response recommendations
|
||||
- Integration with existing security infrastructure
|
||||
- Continuous learning from global threat data
|
||||
|
||||
We're developing Sentinel in partnership with leading cybersecurity research institutions and plan to incorporate it into our enterprise offerings by the end of the year.
|
||||
|
||||
## Project Digital Fortress
|
||||
|
||||
**Status: Research Phase**
|
||||
|
||||
Digital Fortress is our long-term research initiative focused on developing quantum-resistant encryption methods. As quantum computing advances, many current encryption standards will become vulnerable. This project aims to create practical, implementable encryption solutions that will remain secure in the post-quantum era.
|
||||
|
||||
**Areas of Research:**
|
||||
- Lattice-based cryptography
|
||||
- Hash-based digital signatures
|
||||
- Multivariate polynomial cryptosystems
|
||||
- Practical implementation of post-quantum algorithms
|
||||
- Performance optimization for web environments
|
||||
|
||||
We're collaborating with cryptographers and mathematicians from several universities on this project, with the goal of publishing open standards that can be adopted across the industry.
|
||||
|
||||
## Project Guardian
|
||||
|
||||
**Status: Early Access**
|
||||
|
||||
Guardian is our comprehensive child safety platform, designed to help parents protect their children online while respecting their privacy and autonomy.
|
||||
|
||||
**Key Features:**
|
||||
- Age-appropriate content filtering
|
||||
- Screen time management
|
||||
- Cyberbullying detection
|
||||
- Online predator protection
|
||||
- Educational resources for digital literacy
|
||||
|
||||
Guardian is currently available in early access to selected families, with a full launch planned for the coming months.
|
||||
|
||||
## Open Source Initiatives
|
||||
|
||||
We believe in giving back to the security community. Here are some of our open source projects:
|
||||
|
||||
### SecureHeaders
|
||||
|
||||
A library for implementing best-practice security headers in web applications, making it easier for developers to enhance the security of their sites.
|
||||
|
||||
### PrivacyCheck
|
||||
|
||||
A tool for websites to audit their privacy practices and ensure compliance with global regulations like GDPR, CCPA, and others.
|
||||
|
||||
### ThreatShare
|
||||
|
||||
An open platform for sharing threat intelligence among security researchers and organizations, helping to create a more collaborative approach to cybersecurity.
|
||||
|
||||
## Get Involved
|
||||
|
||||
We welcome collaboration on our projects. If you're interested in participating in beta testing, contributing to our open source initiatives, or partnering on research, please contact our team at projects@secureweb.com.
|
||||
91
sweb/src/docs/our-solutions/intro.md
Normal file
91
sweb/src/docs/our-solutions/intro.md
Normal file
@ -0,0 +1,91 @@
|
||||
# Our Solutions
|
||||
|
||||
## Comprehensive Security for the Modern Web
|
||||
|
||||
At SecureWeb, we've developed a suite of integrated solutions designed to address the complex security challenges of today's digital landscape. Our approach combines cutting-edge technology with user-friendly design to provide protection that's both powerful and accessible.
|
||||
|
||||
## Core Solutions
|
||||
|
||||
### Secure Browsing Platform
|
||||
|
||||
Our flagship product provides a secure environment for all your web activities. Unlike traditional browsers that add security as an afterthought, our platform is built with security as its foundation.
|
||||
|
||||
**Key Features:**
|
||||
- End-to-end encryption for all web traffic
|
||||
- Advanced phishing and malware detection
|
||||
- Automatic blocking of tracking scripts and cookies
|
||||
- Secure password management
|
||||
- Private browsing mode with enhanced protections
|
||||
|
||||
### Threat Intelligence Network
|
||||
|
||||
Our global threat intelligence network continuously monitors for emerging security threats, providing real-time protection against new vulnerabilities and attack vectors.
|
||||
|
||||
**Key Features:**
|
||||
- Real-time threat detection and alerts
|
||||
- Crowdsourced security intelligence
|
||||
- AI-powered analysis of potential threats
|
||||
- Regular security reports and insights
|
||||
- Automated security updates
|
||||
|
||||
### Privacy Guardian
|
||||
|
||||
Take control of your digital footprint with our comprehensive privacy protection tools.
|
||||
|
||||
**Key Features:**
|
||||
- Data exposure monitoring
|
||||
- Social media privacy management
|
||||
- Automated data removal from broker sites
|
||||
- Digital identity protection
|
||||
- Privacy-focused search and browsing
|
||||
|
||||
## Industry-Specific Solutions
|
||||
|
||||
### Enterprise Security Suite
|
||||
|
||||
Tailored security solutions for businesses of all sizes, designed to protect corporate networks, data, and users.
|
||||
|
||||
**Key Features:**
|
||||
- Centralized security management
|
||||
- Employee security training and simulation
|
||||
- Compliance monitoring and reporting
|
||||
- Advanced threat protection for corporate networks
|
||||
- Secure remote work solutions
|
||||
|
||||
### E-commerce Protection
|
||||
|
||||
Specialized security for online retailers and their customers, ensuring safe transactions and data protection.
|
||||
|
||||
**Key Features:**
|
||||
- Secure payment processing
|
||||
- Customer data protection
|
||||
- Fraud detection and prevention
|
||||
- PCI compliance tools
|
||||
- Trust badges and customer reassurance
|
||||
|
||||
### Healthcare Security
|
||||
|
||||
HIPAA-compliant security solutions for healthcare providers, protecting sensitive patient information and medical systems.
|
||||
|
||||
**Key Features:**
|
||||
- Patient data encryption
|
||||
- Secure telehealth platforms
|
||||
- Medical device security
|
||||
- Compliance documentation and reporting
|
||||
- Staff security training
|
||||
|
||||
## Implementation and Support
|
||||
|
||||
All our solutions come with comprehensive implementation assistance and ongoing support:
|
||||
|
||||
- Personalized security assessments
|
||||
- Custom implementation plans
|
||||
- 24/7 technical support
|
||||
- Regular security updates
|
||||
- Educational resources and training
|
||||
|
||||
## Start Securing Your Digital Presence
|
||||
|
||||
Whether you're an individual concerned about your personal privacy, a small business looking to protect your customers' data, or an enterprise with complex security needs, SecureWeb has solutions designed for you.
|
||||
|
||||
Contact our team today to discuss how we can help you create a more secure digital environment.
|
||||
36
sweb/src/docs/our-story/story.md
Normal file
36
sweb/src/docs/our-story/story.md
Normal file
@ -0,0 +1,36 @@
|
||||
# Our Story
|
||||
|
||||
## The Genesis of SecureWeb
|
||||
|
||||
SecureWeb was born out of a simple yet powerful idea: that everyone deserves access to a secure internet experience. In 2018, a group of cybersecurity experts, privacy advocates, and web developers came together with a shared concern about the growing threats in the digital landscape.
|
||||
|
||||
## The Early Days
|
||||
|
||||
Our founders, having worked in various sectors of the tech industry, had witnessed firsthand the vulnerabilities that existed in many web platforms. They saw how both individuals and businesses were increasingly becoming targets of sophisticated cyber attacks, yet lacked the tools to protect themselves effectively.
|
||||
|
||||
The team began by developing a set of security protocols that could be implemented across different web applications. What started as a research project quickly evolved as they realized the potential impact of creating an integrated platform that could address multiple security concerns simultaneously.
|
||||
|
||||
## From Concept to Reality
|
||||
|
||||
In 2019, after months of development and testing, the first version of SecureWeb was launched. The platform initially focused on secure browsing and basic threat detection, but the vision was always broader.
|
||||
|
||||
The response was immediate and enthusiastic. Users appreciated the combination of robust security features and user-friendly design—something that had been notably absent in the security tools market.
|
||||
|
||||
## Growth and Evolution
|
||||
|
||||
As our user base grew, so did our team and our capabilities. We listened carefully to feedback and continuously improved our platform:
|
||||
|
||||
- In 2020, we expanded our services to include advanced privacy protection features
|
||||
- In 2021, we introduced our enterprise solutions for businesses
|
||||
- In 2022, we launched our mobile applications, bringing secure browsing to smartphones and tablets
|
||||
- In 2023, we integrated AI-powered threat detection to stay ahead of emerging security risks
|
||||
|
||||
## Our Community
|
||||
|
||||
Today, SecureWeb serves millions of users worldwide, from individual consumers to large enterprises. We've built a community of security-conscious users who not only benefit from our platform but also contribute to its improvement through feedback, beta testing, and even open-source contributions.
|
||||
|
||||
## Looking Forward
|
||||
|
||||
As we look to the future, our mission remains unchanged: to create a safer digital environment for everyone. The threats may evolve, but so do we. We continue to invest in research and development, staying at the forefront of cybersecurity innovation.
|
||||
|
||||
We're proud of how far we've come, but we're even more excited about where we're going. The journey to a truly secure web is ongoing, and we're committed to leading the way.
|
||||
53
sweb/src/docs/our-story/team.md
Normal file
53
sweb/src/docs/our-story/team.md
Normal file
@ -0,0 +1,53 @@
|
||||
# Our Team
|
||||
|
||||
## Leadership
|
||||
|
||||
### Sarah Chen
|
||||
**Chief Executive Officer**
|
||||
|
||||
Sarah brings over 20 years of experience in cybersecurity and technology leadership. Before founding SecureWeb, she served as the CTO of a major security firm and advised Fortune 500 companies on their security strategies. Sarah holds a Ph.D. in Computer Science from MIT and is a frequent speaker at global security conferences.
|
||||
|
||||
### Michael Rodriguez
|
||||
**Chief Technology Officer**
|
||||
|
||||
Michael leads our technical strategy and oversees all product development. With a background in cryptography and distributed systems, he has pioneered several innovations in secure communication protocols. Prior to SecureWeb, Michael was a senior security researcher at Google and contributed to multiple open-source security projects.
|
||||
|
||||
### Aisha Kamara
|
||||
**Chief Operating Officer**
|
||||
|
||||
Aisha manages our day-to-day operations and ensures that our business strategies align with our mission. Her background in both technology and business administration gives her a unique perspective on scaling security solutions. Aisha previously led operations at several successful tech startups and holds an MBA from Stanford.
|
||||
|
||||
## Security Research Team
|
||||
|
||||
### Dr. David Park
|
||||
**Head of Security Research**
|
||||
|
||||
David leads our team of security researchers who work to identify emerging threats and develop countermeasures. His team combines academic research with practical applications to stay ahead of malicious actors. David has published numerous papers on network security and holds several patents in intrusion detection systems.
|
||||
|
||||
### Olivia Tanaka
|
||||
**Principal Security Analyst**
|
||||
|
||||
Olivia specializes in malware analysis and threat intelligence. Her work involves reverse engineering malicious code and developing detection signatures. Before joining SecureWeb, she worked at a national cybersecurity agency and has been recognized for discovering several critical vulnerabilities.
|
||||
|
||||
## Product Development
|
||||
|
||||
### Carlos Mendez
|
||||
**VP of Product**
|
||||
|
||||
Carlos oversees our product roadmap and ensures that our security solutions meet the needs of our diverse user base. He has a talent for translating complex security concepts into user-friendly features. Carlos has led product teams at several tech companies and is passionate about creating accessible security tools.
|
||||
|
||||
### Priya Sharma
|
||||
**Lead UX Designer**
|
||||
|
||||
Priya is responsible for creating intuitive user experiences that make security accessible to everyone. She believes that good security should never come at the expense of usability. Priya has a background in cognitive psychology and has designed interfaces for various security and privacy tools.
|
||||
|
||||
## Customer Success
|
||||
|
||||
### Thomas Okonkwo
|
||||
**Director of Customer Success**
|
||||
|
||||
Thomas leads our customer success team, ensuring that our users get the most out of SecureWeb's features. His team provides training, support, and educational resources to help users strengthen their security posture. Thomas has extensive experience in customer education and technical support leadership.
|
||||
|
||||
---
|
||||
|
||||
Our team is united by a shared commitment to creating a safer digital world. We bring together diverse backgrounds, perspectives, and expertise, all focused on our mission of making security accessible to everyone.
|
||||
56
sweb/src/docs/why-ourworld/why-ourworld.md
Normal file
56
sweb/src/docs/why-ourworld/why-ourworld.md
Normal file
@ -0,0 +1,56 @@
|
||||
# Why OurWorld
|
||||
|
||||
## A Vision for a Better Digital Future
|
||||
|
||||
OurWorld represents a revolutionary approach to how we interact with technology and with each other in the digital realm. In an era where centralized platforms control vast amounts of our data and dictate the terms of our online experiences, OurWorld offers an alternative vision.
|
||||
|
||||
## The Problems We're Solving
|
||||
|
||||
### Centralization of Power
|
||||
|
||||
Today's internet is dominated by a handful of tech giants who control the platforms we use daily. This centralization creates single points of failure, privacy concerns, and power imbalances.
|
||||
|
||||
### Data Exploitation
|
||||
|
||||
Our personal data has become a commodity, harvested and sold without our meaningful consent. This has led to surveillance capitalism, where our online behaviors are constantly monitored and monetized.
|
||||
|
||||
### Digital Divides
|
||||
|
||||
Access to technology and its benefits remains unequal across the globe. Many communities lack the infrastructure, resources, or skills to fully participate in the digital economy.
|
||||
|
||||
### Environmental Impact
|
||||
|
||||
The growing digital infrastructure has a significant carbon footprint, contributing to climate change and environmental degradation.
|
||||
|
||||
## Our Approach
|
||||
|
||||
OurWorld is built on principles that address these fundamental challenges:
|
||||
|
||||
### Decentralization
|
||||
|
||||
By distributing control and ownership, we eliminate single points of failure and create a more resilient system that can't be controlled by any single entity.
|
||||
|
||||
### Sovereignty
|
||||
|
||||
We believe individuals should own their data and have control over their digital identities. OurWorld puts users in charge of their information and how it's used.
|
||||
|
||||
### Sustainability
|
||||
|
||||
Our technology is designed with environmental impact in mind, using energy-efficient solutions and promoting sustainable practices.
|
||||
|
||||
### Inclusivity
|
||||
|
||||
We're building tools and infrastructure that can reach underserved communities, bridging digital divides and creating opportunities for all.
|
||||
|
||||
## The Technology Behind OurWorld
|
||||
|
||||
OurWorld leverages cutting-edge technologies like:
|
||||
|
||||
- **Distributed Systems**: Creating resilient networks without central control
|
||||
- **Blockchain**: Enabling transparent, secure transactions and governance
|
||||
- **Peer-to-Peer Communication**: Allowing direct exchange without intermediaries
|
||||
- **Open Source Development**: Fostering collaboration and innovation
|
||||
|
||||
## Join the Movement
|
||||
|
||||
OurWorld isn't just a technology platform—it's a movement toward a more equitable, sustainable, and user-centric digital future. By joining OurWorld, you become part of this transformative vision, helping to shape a better internet for everyone.
|
||||
@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "../../../utils";
|
||||
import { slide } from "svelte/transition";
|
||||
|
||||
let className: string | undefined | null = undefined;
|
||||
export { className as class };
|
||||
|
||||
export let isOpen = false;
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div
|
||||
transition:slide={{ duration: 200 }}
|
||||
class={cn("overflow-hidden text-sm transition-all", className)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<div class="pb-4 pt-0">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
24
sweb/src/lib/components/ui/accordion/accordion-item.svelte
Normal file
24
sweb/src/lib/components/ui/accordion/accordion-item.svelte
Normal file
@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "../../../utils";
|
||||
import { getAccordionContext } from "./context";
|
||||
|
||||
export let value: string;
|
||||
|
||||
let className: string | undefined | null = undefined;
|
||||
export { className as class };
|
||||
|
||||
const context = getAccordionContext();
|
||||
|
||||
// Compute isOpen based on the current value
|
||||
$: isOpen = Array.isArray(context.value)
|
||||
? context.value.includes(value)
|
||||
: context.value === value;
|
||||
</script>
|
||||
|
||||
<div
|
||||
data-state={isOpen ? "open" : "closed"}
|
||||
class={cn("border-b", className)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot {isOpen} />
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "../../../utils";
|
||||
import { getAccordionContext } from "./context";
|
||||
|
||||
export let value: string;
|
||||
|
||||
let className: string | undefined | null = undefined;
|
||||
export { className as class };
|
||||
|
||||
const context = getAccordionContext();
|
||||
|
||||
function handleClick() {
|
||||
context.onValueChange(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={value ? "true" : "false"}
|
||||
class={cn(
|
||||
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
className,
|
||||
)}
|
||||
on:click={handleClick}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
45
sweb/src/lib/components/ui/accordion/accordion.svelte
Normal file
45
sweb/src/lib/components/ui/accordion/accordion.svelte
Normal file
@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "../../../utils";
|
||||
import { setAccordionContext } from "./context";
|
||||
|
||||
export let value: string | undefined = undefined;
|
||||
export let collapsible = false;
|
||||
export let multiple = false;
|
||||
|
||||
let className: string | undefined | null = undefined;
|
||||
export { className as class };
|
||||
$: accordionValue = multiple
|
||||
? value
|
||||
? Array.isArray(value)
|
||||
? value
|
||||
: [value]
|
||||
: []
|
||||
: value;
|
||||
|
||||
function onValueChange(itemValue: string) {
|
||||
if (multiple) {
|
||||
const newValue = Array.isArray(accordionValue) ? [...accordionValue] : [];
|
||||
const index = newValue.indexOf(itemValue);
|
||||
if (index > -1) {
|
||||
newValue.splice(index, 1);
|
||||
} else {
|
||||
newValue.push(itemValue);
|
||||
}
|
||||
value = newValue as any; // Type assertion to handle the string[] to string assignment
|
||||
} else {
|
||||
value =
|
||||
accordionValue === itemValue && collapsible ? undefined : itemValue;
|
||||
}
|
||||
}
|
||||
|
||||
setAccordionContext({
|
||||
value: accordionValue,
|
||||
onValueChange,
|
||||
collapsible,
|
||||
multiple,
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class={cn("flex flex-col space-y-1.5", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
13
sweb/src/lib/components/ui/accordion/context.ts
Normal file
13
sweb/src/lib/components/ui/accordion/context.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { createContext } from "../../../create-context";
|
||||
|
||||
export type AccordionContextValue = {
|
||||
value: string | string[] | undefined;
|
||||
onValueChange: (value: string) => void;
|
||||
collapsible: boolean;
|
||||
multiple: boolean;
|
||||
};
|
||||
|
||||
export const {
|
||||
get: getAccordionContext,
|
||||
set: setAccordionContext
|
||||
} = createContext<AccordionContextValue>();
|
||||
16
sweb/src/lib/components/ui/accordion/index.ts
Normal file
16
sweb/src/lib/components/ui/accordion/index.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import Root from './accordion.svelte';
|
||||
import Item from './accordion-item.svelte';
|
||||
import Content from './accordion-content.svelte';
|
||||
import Trigger from './accordion-trigger.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
Item,
|
||||
Content,
|
||||
Trigger,
|
||||
//
|
||||
Root as Accordion,
|
||||
Item as AccordionItem,
|
||||
Content as AccordionContent,
|
||||
Trigger as AccordionTrigger
|
||||
};
|
||||
32
sweb/src/lib/components/ui/button/button.svelte
Normal file
32
sweb/src/lib/components/ui/button/button.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { cn } from "../../../utils";
|
||||
|
||||
export let variant: "primary" | "secondary" | "ghost" = "primary";
|
||||
export let size: "default" | "sm" | "lg" | "icon" = "default";
|
||||
|
||||
let className: string | undefined | null = undefined;
|
||||
export { className as class };
|
||||
|
||||
const sizeClasses = {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3 text-xs",
|
||||
lg: "h-11 rounded-md px-8 text-base",
|
||||
icon: "h-10 w-10 p-2",
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
class={cn(
|
||||
"btn",
|
||||
variant === "primary"
|
||||
? "btn-primary"
|
||||
: variant === "secondary"
|
||||
? "btn-secondary"
|
||||
: "btn-ghost",
|
||||
sizeClasses[size],
|
||||
className,
|
||||
)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
7
sweb/src/lib/components/ui/button/index.ts
Normal file
7
sweb/src/lib/components/ui/button/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import Root from './button.svelte';
|
||||
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Button
|
||||
};
|
||||
17
sweb/src/lib/create-context.ts
Normal file
17
sweb/src/lib/create-context.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { getContext, hasContext, setContext } from 'svelte';
|
||||
|
||||
export function createContext<T>() {
|
||||
const key = Symbol();
|
||||
|
||||
return {
|
||||
get: () => {
|
||||
if (!hasContext(key)) {
|
||||
throw new Error('Context was not set');
|
||||
}
|
||||
return getContext<T>(key);
|
||||
},
|
||||
set: (context: T) => {
|
||||
setContext(key, context);
|
||||
}
|
||||
};
|
||||
}
|
||||
6
sweb/src/lib/utils.ts
Normal file
6
sweb/src/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@ -4,7 +4,26 @@ export default {
|
||||
'./src/**/*.{html,js,svelte,ts}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
blue: {
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
},
|
||||
gray: {
|
||||
50: '#f9fafb',
|
||||
100: '#f3f4f6',
|
||||
200: '#e5e7eb',
|
||||
300: '#d1d5db',
|
||||
400: '#9ca3af',
|
||||
500: '#6b7280',
|
||||
600: '#4b5563',
|
||||
700: '#374151',
|
||||
800: '#1f2937',
|
||||
900: '#111827',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import { resolve } from 'path'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
resolve: {
|
||||
alias: {
|
||||
$lib: resolve('./src/lib')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user