Skip to content

Commit

Permalink
Resolve Errors (#4)
Browse files Browse the repository at this point in the history 
* Added Dark and Light mode and text animation

* Adjusting Mobile Layout

* Additional minor updates for styling, copy

---------

Co-authored-by: vr-varad <varadgupta21#gmail.com>
Co-authored-by: sabaimran <[email protected]>
  • Loading branch information
@vr-varad @sabaimran
vr-varad and sabaimran authored Jun 20, 2024
1 parent fc7ab10 commit 7d56ad7
Show file tree
Hide file tree
Showing 6 changed files with 616 additions and 163 deletions.
4 changes: 2 additions & 2 deletions src/content/posts/how-to-use-automations.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
title: "Automations for Personalized Newsletters, Reminders, and More"
author: saba
description: A brief tutorial on how to use Khoj's Automations feature
tldr: ""
tldr: "Automations help you get repetitive tasks out of the way and curate more personalized content to stay focused."
heroImage: /nature_futurism.png
pubDate: 2024-06-14
---

import ClickableCard from '../../components/ClickableCard.astro';

## Using automations for unlocking productivity and well-being
## Automations help you stay focused

Automations help you get repetitive tasks out of the way and curate more personalized content to stay focused.

Expand Down
2 changes: 1 addition & 1 deletion src/content/posts/obsidian-ux-revamp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ heroImage: /two_phase_forest.png
pubDate: 2024-06-19
---

# The Khoj AI assistant got a significant boost in Obsidian
# Khoj AI in Obsidian

Khoj with Obsidian is a major leveling up of your second brain. You can see the full instructions of how to install it [here](https://docs.khoj.dev/clients/obsidian/#setup).

Expand Down
11 changes: 11 additions & 0 deletions src/env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,13 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

import { Container, Engine } from "tsparticles-engine";

declare global {
interface Window {
particlesInit: (engine: Engine) => Promise<void>;
particlesLoaded: (container: Container) => void;
}
}

export {};
1 change: 0 additions & 1 deletion src/layouts/BlogPost.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const authorObj = AUTHOR_METADATA[author as keyof typeof AUTHOR_METADATA];
}
article {
flex: 1 0 auto;
padding: 1em;
}
aside {
flex: 1 0 300px;
Expand Down
186 changes: 115 additions & 71 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION} from '../consts';
import {background_config} from '../consts'
import Particles from "astro-particles";
import type { ISourceOptions } from "tsparticles-engine";
const options: ISourceOptions = background_config
const options: any = background_config
---

Expand All @@ -17,13 +16,13 @@ const options: ISourceOptions = background_config
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<link rel="sitemap" href="/sitemap-index.xml" />
<script>
import { type Container, type Engine, tsParticles } from "tsparticles-engine";
import { type Engine } from "tsparticles-engine";
import { loadFull } from "tsparticles";

window.particlesInit = async function (engine: Engine) {
await loadFull(engine);
}
window.particlesLoaded = function (container: Container) {
window.particlesLoaded = function () {
console.log("particlesLoaded callback");
}
</script>
Expand Down Expand Up @@ -54,38 +53,75 @@ const options: ISourceOptions = background_config
</body>
</html>
<style>
body{
body {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
main {
main {
display: flex;
flex-direction: column;
justify-content:center;
justify-content: center;
align-items: center;
position: relative;
padding-top: 270px;
padding-top: 240px;
}
#content{
#content {
position: relative;
margin-bottom:-120px;
margin-bottom: -120px;
}
#scene{
z-index:10;
#scene {
z-index: 10;
position: absolute;
top:50px;
top: 50px;
width: 150%;
max-width: 2000px;
}
#text{
#text {
display: flex;
flex-direction: column;
align-items: left;
}
footer {
position: relative;
bottom: 0;
width: 100%;
padding: 10px 0;
text-align: center;
background-color: #f1f1f1;
}
@media (max-width: 650px) {
main {
padding-top: 10px;
}
#tsparticles,
#scene {
display: none;
}
}

@media (min-width: 651px) {
main {
padding-top: 240px;
}
}

@media (max-width: 375px) {
main {
padding-top: 20px;
}
#text p {
font-size: 14px;
}
footer {
padding: 5px 0;
font-size: 5px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log(1)
const rootStyles = getComputedStyle(document.documentElement);
const lightBackgroundColor = rootStyles.getPropertyValue('--background-color-light').trim();
const darkBackgroundColor = rootStyles.getPropertyValue('--background-color-dark').trim();
Expand All @@ -97,9 +133,9 @@ const options: ISourceOptions = background_config
}
});

var canvas = document.querySelector("#scene"),
ctx = canvas.getContext("2d"),
particles = [],
var canvas = document.querySelector("#scene") as HTMLCanvasElement,
ctx = canvas.getContext("2d")!,
particles: any = [],
amount = 0,
mouse = {x:0,y:0},
radius = 0.2;
Expand All @@ -117,67 +153,75 @@ const options: ISourceOptions = background_config
var ww = canvas.width = 100;
var wh = canvas.height = 100;

function Particle(x,y){
this.x = Math.random()*ww;
this.y = Math.random()*wh;
this.dest = {
x : x,
y: y
};
this.r = Math.random()*5 + 4;
this.vx = (Math.random()-0.5)*20;
this.vy = (Math.random()-0.5)*20;
this.accX = 0;
this.accY = 0;
this.friction = Math.random()*0.05 + 0.94;

this.color = colors[Math.floor(Math.random()*6)];
}

Particle.prototype.render = function() {


this.accX = (this.dest.x - this.x)/1000;
this.accY = (this.dest.y - this.y)/1000;
this.vx += this.accX;
this.vy += this.accY;
this.vx *= this.friction;
this.vy *= this.friction;

this.x += this.vx;
this.y += this.vy;

ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
ctx.fill();

var a = this.x - mouse.x;
var b = this.y - mouse.y;
class Particle {
x: number;
y: number;
dest: { x: number, y: number };
r: number;
vx: number;
vy: number;
accX: number;
accY: number;
friction: number;
color: string;

constructor(x: number, y: number) {
this.x = Math.random() * ww;
this.y = Math.random() * wh;
this.dest = { x, y };
this.r = Math.random() * 5 + 4;
this.vx = (Math.random() - 0.5) * 20;
this.vy = (Math.random() - 0.5) * 20;
this.accX = 0;
this.accY = 0;
this.friction = Math.random() * 0.05 + 0.94;
this.color = colors[Math.floor(Math.random() * 5)];
}

var distance = Math.sqrt( a*a + b*b );
if(distance<(radius*70)){
this.accX = (this.x - mouse.x)/100;
this.accY = (this.y - mouse.y)/100;
render() {
if (!ctx) return;
this.accX = (this.dest.x - this.x) / 1000;
this.accY = (this.dest.y - this.y) / 1000;
this.vx += this.accX;
this.vy += this.accY;
this.vx *= this.friction;
this.vy *= this.friction;

this.x += this.vx;
this.y += this.vy;

ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, Math.PI * 2, 0);
ctx.fill();

var a = this.x - mouse.x;
var b = this.y - mouse.y;

var distance = Math.sqrt(a * a + b * b);
if (distance < (radius * 70)) {
this.accX = (this.x - mouse.x) / 100;
this.accY = (this.y - mouse.y) / 100;
this.vx += this.accX;
this.vy += this.accY;
}
}

}

function onMouseMove(e){

function onMouseMove(e : MouseEvent){
mouse.x = e.clientX;
mouse.y = e.clientY;
}

function onTouchMove(e){
function onTouchMove(e:TouchEvent){
if(e.touches.length > 0 ){
mouse.x = e.touches[0].clientX;
mouse.y = e.touches[0].clientY;
}
}
}

function onTouchEnd(e){
function onTouchEnd(){
mouse.x = -9999;
mouse.y = -9999;
}
Expand All @@ -197,7 +241,7 @@ const options: ISourceOptions = background_config
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "screen";

particles = [];
particles= [];
for(var i=0;i<ww;i+=Math.round(ww/150)){
for(var j=0;j<wh;j+=Math.round(ww/150)){
if(data[ ((i + j*ww)*4) + 3] > 150){
Expand All @@ -216,12 +260,12 @@ const options: ISourceOptions = background_config
}
}

function render(a) {
requestAnimationFrame(render);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < amount; i++) {
particles[i].render();
}
function render() {
requestAnimationFrame(render);
ctx.clearRect(0, 0, canvas?.width, canvas?.height);
for (var i = 0; i < amount; i++) {
particles[i].render();
}
};

function handleEventListeners() {
Expand Down
Loading

0 comments on commit 7d56ad7

Please sign in to comment.