diff --git a/README.md b/README.md index f22eccd..7da83d7 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,9 @@ # Anna -![Test Workflow](https://github.com/acmpesuecc/anna/actions/workflows/tests.yml/badge.svg) - -![Build Workflow](https://github.com/acmpesuecc/anna/actions/workflows/build.yml/badge.svg) - -![GitHub Repo Stars](https://img.shields.io/github/stars/acmpesuecc/Anna) +[![Test Workflow](https://github.com/acmpesuecc/anna/actions/workflows/tests.yml/badge.svg)](https://github.com/acmpesuecc/anna/actions/workflows/tests.yml) +[![Netlify Status](https://api.netlify.com/api/v1/badges/09b8bdf3-5931-4295-9fe7-d463d5d06a3f/deploy-status)](https://app.netlify.com/sites/anna-docs/deploys) +[![Go Reference](https://pkg.go.dev/badge/github.com/acmpesuecc/anna.svg)](https://pkg.go.dev/github.com/acmpesuecc/anna) +[![GitHub Repo Stars](https://img.shields.io/github/stars/acmpesuecc/Anna?style=flat-square&label=Stars&color=lightgreen&logo=github)](https://github.com/acmpesuecc/Anna) ```text ___ @@ -18,12 +17,11 @@ A static site generator in go Inspired by [Hugo](https://gohugo.io) and [Saaru](https://github.com/anirudhRowjee/saaru), this static site generator aims to take performance to the next level with parallel rendering, live reload and so much more, all in Go. -Pronounced: `/ɐnĖÉ/` which means rice in Kannada šŸš +> Pronounced: `/ɐnĖÉ/` which means rice in Kannada šŸš -This Project is a part of the ACM PESU-ECC's yearly [AIEP](https://acmpesuecc.github.io/aiep) program, and is maintained by [Adhesh Athrey](https://github.com/DedLad), [Nathan Paul](https://github.com/polarhive), [Anirudh Sudhir](https://github.com/anirudhsudhir), and [Aditya Hegde](https://github.com/bwaklog) +This project is a part of the ACM PESU-ECC's yearly [AIEP](https://acmpesuecc.github.io/aiep) program, and is maintained by [Adhesh Athrey](https://github.com/DedLad), [Nathan Paul](https://github.com/polarhive), [Anirudh Sudhir](https://github.com/anirudhsudhir), and [Aditya Hegde](https://github.com/bwaklog) --- - ## Install Once you have a directory structure, install `anna` using: @@ -35,15 +33,13 @@ go install github.com/acmpesuecc/anna@latest Or if you have git installed, clone our repository: ```sh -git clone github.com/acmpesuecc/anna --depth=1 -cd anna +git clone github.com/acmpesuecc/anna --depth=1; cd anna go run . ``` -### The detailed documentation of the SSG can be found [here](https://anna-docs.netlify.app/) +### Detailed documentation of our SSG can be found [here](https://anna-docs.netlify.app/) --- - ## Flags ```text @@ -53,8 +49,9 @@ Usage: Flags: -a, --addr string ip address to serve rendered content to (default "8000") -d, --draft renders draft posts - -h, --help help for ssg - -p, --prof profiles the working code and shows data + -h, --help help for anna + -p, --prof enable profiling -s, --serve serve the rendered content -v, --validate-html validate semantic HTML + -w, --webconsole wizard to setup anna ``` diff --git a/cmd/anna/wizard.go b/cmd/anna/wizard.go index 650fb86..c1a509f 100644 --- a/cmd/anna/wizard.go +++ b/cmd/anna/wizard.go @@ -18,6 +18,7 @@ type Config struct { SiteScripts []string `yaml:"siteScripts"` Author string `yaml:"author"` ThemeURL string `yaml:"themeURL"` + Navbar []string `yaml:"navbar"` } type WizardServer struct { diff --git a/cmd/wizard/index.html b/cmd/wizard/index.html index 1335b13..34c2ac6 100644 --- a/cmd/wizard/index.html +++ b/cmd/wizard/index.html @@ -11,64 +11,75 @@ - +
-

Setup your Anna site

-
- -
-
- -
+

Get started!

+
+

Name your site

-
+
- +

Enter a domain name

-
+
- +
-

Choose a Theme

-
- +

Pick what you'd like on the navbar

+
+
+
+
+
+
- -
+ + +
+
+
+

Choose a Theme

+
+
-
-

Cooking your Anna site

-

Your Anna site is being cooked. This page will reload...

+
+ +
+
+

Cooking your Anna site

+

Your Anna site is being cooked. This page will reload...

+
+
- - + + - + \ No newline at end of file diff --git a/cmd/wizard/script.js b/cmd/wizard/script.js index 64ddc94..d40c89a 100644 --- a/cmd/wizard/script.js +++ b/cmd/wizard/script.js @@ -1,10 +1,23 @@ -let currentSlide = 0; const slides = document.querySelectorAll('.content'); +let currentSlide = 0; + +// Declare global variables +let author, siteTitle, baseURL, themeURL; function showSlide(index) { slides.forEach((slide, i) => { slide.style.display = i === index ? 'block' : 'none'; }); + updateProgress(); +} + +function updateProgress() { + const progressContainer = document.querySelector(".progress-container"); + const oldWidth = window.getComputedStyle(progressContainer).getPropertyValue('--new-width'); + const newWidth = ((currentSlide + 1) / slides.length) * 100 + "%"; + progressContainer.style.setProperty('--old-width', oldWidth); + progressContainer.style.setProperty('--new-width', newWidth); + progressContainer.style.animation = 'progressAnimation 1s ease-in-out both'; } function nextSlide() { @@ -18,37 +31,41 @@ function prevSlide() { } function checkFormValidity() { - var author = document.getElementById("author").value; - var siteTitle = document.getElementById("siteTitle").value; - var baseURL = document.getElementById("baseURL").value; - var themeURL = document.getElementById("themeURL").value; - - var nextButton = document.getElementById("nextButton"); - var nextButton2 = document.getElementById("nextButton2"); - var nextButton3 = document.getElementById("nextButton3"); - - nextButton.disabled = !(author); - nextButton2.disabled = !(siteTitle); - nextButton3.disabled = !(baseURL); + author = document.getElementById("author").value; + siteTitle = document.getElementById("siteTitle").value; + baseURL = document.getElementById("baseURL").value; + themeURL = document.getElementById("themeURL").value; + + var nameRegex = /^[a-zA-Z0-9\s]+$/; + var urlRegex = /^(https?:\/\/)([\da-z.-]+)\.([a-z.]{2,6})(\/[^\/\s]+)*$/; + + var authorButton = document.getElementById("authorButton"); + var siteTitleButton = document.getElementById("siteTitleButton"); + var baseURLButton = document.getElementById("baseURLButton"); + + authorButton.disabled = !(author && author.match(nameRegex)); + siteTitleButton.disabled = !(siteTitle && siteTitle.match(nameRegex)); + baseURLButton.disabled = !(baseURL && baseURL.match(urlRegex)); + + // Add or remove 'valid' class based on validity + document.getElementById("author").classList.toggle("valid", author && author.match(nameRegex)); + document.getElementById("siteTitle").classList.toggle("valid", siteTitle && siteTitle.match(nameRegex)); + document.getElementById("baseURL").classList.toggle("valid", baseURL && baseURL.match(urlRegex)); } + function submitForm() { - var author = document.getElementById("author").value; - var siteTitle = document.getElementById("siteTitle").value; - var baseURL = document.getElementById("baseURL").value; - var themeURL = document.getElementById("themeURL").value; - - if (!author.trim() || !siteTitle.trim() || !baseURL.trim() || !themeURL.trim()) { - alert("Please fill out all fields."); - return; - } + var checkboxes = document.querySelectorAll('.nav-checkboxes input[type="checkbox"]'); + var navbarOptions = Array.from(checkboxes) + .filter(checkbox => checkbox.checked) + .map(checkbox => checkbox.value); var formData = JSON.stringify({ "author": author, "siteTitle": siteTitle, "baseURL": baseURL, "themeURL": themeURL, - "navbar": "index,about" + "navbar": navbarOptions }); showSlide(slides.length - 1); @@ -58,9 +75,194 @@ function submitForm() { body: formData }); + tsParticles.load({ + id: "tsparticles", + options: { + "fullScreen": { + "zIndex": 1 + }, + "emitters": [ + { + "position": { + "x": 0, + "y": 30 + }, + "rate": { + "quantity": 5, + "delay": 0.15 + }, + "particles": { + "move": { + "direction": "top-right", + "outModes": { + "top": "none", + "left": "none", + "default": "destroy" + } + } + } + }, + { + "position": { + "x": 100, + "y": 30 + }, + "rate": { + "quantity": 5, + "delay": 0.15 + }, + "particles": { + "move": { + "direction": "top-left", + "outModes": { + "top": "none", + "right": "none", + "default": "destroy" + } + } + } + } + ], + "particles": { + "color": { + "value": [ + "#ffffff", + "#FF0000" + ] + }, + "move": { + "decay": 0.05, + "direction": "top", + "enable": true, + "gravity": { + "enable": true + }, + "outModes": { + "top": "none", + "default": "destroy" + }, + "speed": { + "min": 10, + "max": 50 + } + }, + "number": { + "value": 0 + }, + "opacity": { + "value": 1 + }, + "rotate": { + "value": { + "min": 0, + "max": 360 + }, + "direction": "random", + "animation": { + "enable": true, + "speed": 30 + } + }, + "tilt": { + "direction": "random", + "enable": true, + "value": { + "min": 0, + "max": 360 + }, + "animation": { + "enable": true, + "speed": 30 + } + }, + "size": { + "value": { + "min": 0, + "max": 2 + }, + "animation": { + "enable": true, + "startValue": "min", + "count": 1, + "speed": 16, + "sync": true + } + }, + "roll": { + "darken": { + "enable": true, + "value": 25 + }, + "enable": true, + "speed": { + "min": 5, + "max": 15 + } + }, + "wobble": { + "distance": 30, + "enable": true, + "speed": { + "min": -7, + "max": 7 + } + }, + "shape": { + "type": "emoji", + "options": { + "emoji": { + "particles": { + "size": { + "value": 8 + } + }, + "value": [ + "šŸš" + ] + } + } + } + } + } + }); + + + tsParticles.load("confetti", confettiSettings); + currentSlide = currentSlide + 1; + updateProgress() setTimeout(() => { window.location.href = 'http://localhost:8000'; - }, 3000); // 3s + }, 5000); } showSlide(0); + +// Add event listeners to call checkFormValidity when input fields change +document.getElementById("author").addEventListener("input", checkFormValidity); +document.getElementById("siteTitle").addEventListener("input", checkFormValidity); +document.getElementById("baseURL").addEventListener("input", checkFormValidity); +document.getElementById("themeURL").addEventListener("input", checkFormValidity); + +// Confetti animation +const confettiSettings = { + particles: { + number: { + value: 10 + }, + size: { + value: 2 + }, + shape: { + type: "circle" + }, + move: { + speed: 6 + }, + color: { + value: "#00FFFF" + }, + opacity: { + value: 0.8 + } + } +}; diff --git a/cmd/wizard/style.css b/cmd/wizard/style.css index 0be107c..1e5548d 100644 --- a/cmd/wizard/style.css +++ b/cmd/wizard/style.css @@ -1,121 +1,98 @@ :root { - --primary-color: #007bff; - --secondary-color: #f0f0f0; + --primary-color: #1e92ff; + --secondary-color: #fcfcfc; --text-color: #000000; - --accent-color: #0056b3; + --warning-color: #e60023; + --progress-color: #35db6c; + --accent-color: #0059ff; --padding-size: 15px; + --slide-padding: 20px; + --old-width: 0%; + --new-width: 0%; + --container-border-radius: 1rem; } body { margin: 0; font-family: 'Inter Display', sans-serif; - background-color: #ffffff; + background-color: var(--secondary-color); color: var(--text-color); } .navbar { background-color: var(--primary-color); color: #ffffff; - display: flex; - align-items: center; - position: relative; - padding: var(--padding-size); + padding: var(--padding-size) 30px; } .navbar-title { - margin-left: var(--padding-size); - font-size: 1.5rem; -} - -.progress-circle { - position: absolute; - top: 50%; - right: var(--padding-size); - transform: translateY(-50%); - width: 40px; - height: 40px; - border-radius: 50%; - background-color: var(--secondary-color); - border: 4px solid var(--primary-color); - overflow: hidden; -} - -.progress { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 50%; - clip: rect(0, 20px, 40px, 0); - background-color: var(--primary-color); - animation: progressAnimation 2s infinite linear; + font-size: 2rem; + font-weight: bold; } -.emoji { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 1.5rem; +h2 { + font-size: 1.8rem; } -@keyframes progressAnimation { - 0% { - transform: rotate(0deg); - } +.container { + border-radius: var(--container-border-radius); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + background-color: #fff; + padding: var(--slide-padding); + width: 80%; + max-width: 600px; + margin: 50px auto; +} - 100% { - transform: rotate(360deg); - } +.content { + max-width: 600px; + margin: 0 auto; } -.container { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - - select { - padding: var(--padding-size); - margin: var(--padding-size) 0; - border: 2px solid var(--primary-color); - border-radius: 8px; - font-size: 1rem; - width: calc(100% - (var(--padding-size) * 2)); - max-width: 400px; - } +input[type="text"], +select, +button { + width: calc(100% - 20px); + padding: var(--padding-size); + margin: 10px 0; + border: none; + border-radius: 0.5rem; + font-size: 16px; + font-weight: bold; + max-width: 80%; + background-color: #f8f8f8; + box-shadow: inset 0 0 0 0.1rem rgba(0, 0, 0, 0.1); } -h2 { - font-size: 2rem; - margin-bottom: var(--padding-size); +input[type="text"]::placeholder { + color: #999; } -input[type="text"] { - padding: var(--padding-size); - margin: var(--padding-size) 0; - width: 80%; - max-width: 400px; - border: 2px solid var(--primary-color); - border-radius: 8px; - font-size: 1rem; +/* Modify placeholder color only when input is invalid */ +input[type="text"]:not(.valid)::placeholder { + color: #999; } -input:focus { - outline: none; - border-color: var(--accent-color); +/* Modify input background only when input is invalid */ +input[type="text"]:not(.valid) { + color: var(--warning-color); +} + +select { + background-color: #f8f8f8; + background-position: right 10px top 50%; + background-size: 8px auto; + padding: var(--padding-size) 30px var(--padding-size) 10px; } button { - padding: var(--padding-size) calc(var(--padding-size) * 2); - font-size: 1rem; - background-color: var(--primary-color); - color: #ffffff; - border: none; - border-radius: 8px; cursor: pointer; + padding: var(--padding-size); + color: #fff; + background-color: var(--primary-color); transition: background-color 0.3s ease; + border: none; + font-size: 18px; } button:hover { @@ -123,9 +100,50 @@ button:hover { } button[disabled] { - display: none; + opacity: 0.5; + cursor: not-allowed; +} + +input[type="text"][required]:invalid, +select[required]:invalid { + border: 1px solid var(--warning-color); + box-shadow: none; + outline: none; +} + +input[type="text"][required]:invalid::placeholder, +select[required]:invalid::placeholder { + color: var(--warning-color); +} + +.nav-buttons button:first-child { + background-color: var(--primary-color); } -.slide { - text-align: center; +.progress-container { + height: 2px; + background-color: var(--progress-color); + box-shadow: 0 0 5px var(--progress-color); +} + +@keyframes progressAnimation { + from { + width: var(--old-width); + } + + to { + width: var(--new-width); + } +} + +.nav-checkboxes input[type="checkbox"]+label { + display: inline-flex; + align-items: center; + padding: 8px; + cursor: pointer; +} + +.nav-checkboxes label { + font-size: 18px; + color: var(--text-color); } \ No newline at end of file