jcreek/PlannerGenerator
1
0
Fork 0
mirror of https://github.com/jcreek/PlannerGenerator.git synced 2026-07-13 02:53:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Add working version

Browse Source
This commit is contained in:
Josh Creek
2024-01-03 21:14:51 +00:00
parent 9b80b8c488
commit 6bfa06d3e8
14 changed files with 19535 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+13
View File
@@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
# Local Netlify folder
.netlify
README.md
+24
View File
@@ -1,2 +1,26 @@
# PlannerGenerator # PlannerGenerator
A web app to allow users to generate planner PDFs based on HTML and CSS. A web app to allow users to generate planner PDFs based on HTML and CSS.
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
netlify.toml
+3
View File
@@ -0,0 +1,3 @@
[build]
command = "npm run build"
publish = "build"
package-lock.json
Generated
+19089
View File
File diff suppressed because it is too large Load Diff
package.json
+30
View File
@@ -0,0 +1,30 @@
{
"name": "plannergenerator",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"netlify-cli": "^15.9.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"vite": "^4.4.2"
},
"type": "module",
"dependencies": {
"@sveltejs/adapter-netlify": "^2.0.8",
"axios": "^1.4.0",
"puppeteer": "^20.8.2"
}
}
src/app.html
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
</style>
<!-- Include the html2pdf library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
src/lib/DayPartial.svelte
+165
View File
@@ -0,0 +1,165 @@
<script>
export let dayOfWeek;
export let date;
export let month;
export let year;
function getOrdinalSuffix(date) {
const suffixes = ["th", "st", "nd", "rd"];
const v = date % 100;
return date + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
}
</script>
<div class="day-container">
<div class="first-row">
<div id="date">{dayOfWeek} {getOrdinalSuffix(date)} {month} {year}</div>
<div id="code-freeze">Code Freeze Date:</div>
</div>
<div class="second-row">
<div class="double-column">
<div>
<h3>Priorities</h3>
<div class="light-lines">
{#each Array(10) as _, i}
<div class="light-line"></div>
{/each}
</div>
</div>
<div>
<h3>Schedule</h3>
<div class="light-lines">
{#each Array(19) as _, i}
<div class="light-line"></div>
{/each}
</div>
</div>
</div>
<div>
<div>
<h3>Tasks</h3>
<div class="light-lines">
{#each Array(32) as _, i}
<div class="light-line"></div>
{/each}
</div>
</div>
</div>
<div>
<h3>Notes</h3>
<div class="light-grid">
{#each Array(35) as _, row}
<div class="grid-row">
{#each Array(18) as _, col}
<div class="light-cell"></div>
{/each}
</div>
{/each}
</div>
</div>
</div>
</div>
<style>
.day-container {
padding: 1rem;
display: flex;
flex-direction: column;
}
.first-row {
display: flex;
justify-content: space-between;
align-items: center;
}
#date {
text-align: left;
font-weight: 500;
}
#code-freeze {
text-align: right;
font-style: italic;
margin-right: 95px;
}
.second-row {
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.second-row > div {
flex: 1; /* Each column takes up equal width */
max-width: calc(33.33% - 5px); /* Max width for each column (1/3 of the page with a 5px gap) */
}
.double-column > div:first-child {
margin-bottom: 10px;
}
.double-column {
display: flex;
flex-direction: column;
}
.double-column > div:nth-child(2) > div {
position: relative;
}
.double-column > div:nth-child(2) > div::before {
content: '';
position: absolute;
top: 0;
left: 75px; /* Adjust the distance from the left */
width: 1px;
height: 100%;
background-color: #ddd; /* Color of the vertical line */
z-index: 1; /* Ensure the line is in front of the content */
}
@media print {
.day-container {
page-break-before: always;
}
}
h3 {
border-bottom: 1px solid #000; /* Full-width line color */
padding-bottom: 10px;
margin: 10px 0 0 0;
font-variant: small-caps;
}
.light-lines {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.light-line {
height: 1px; /* Height of each light line */
background-color: #ddd; /* Light line color */
margin-top: 20px; /* Spacing between light lines */
}
.light-grid {
display: flex;
flex-direction: column;
margin-top: 10px; /* Adjust spacing between "Notes" section and the grid */
}
.grid-row {
display: flex;
}
.light-cell {
width: 20px; /* Adjust the width of each cell */
height: 20px; /* Adjust the height of each cell */
border: 1px solid #eee; /* Border color for each cell */
margin-right: -1px; /* Negative margin to overlap adjacent borders */
margin-bottom: -1px; /* Negative margin to overlap adjacent borders */
box-sizing: border-box; /* Include border in the element's total width and height */
}
</style>
src/lib/YearPartial.svelte
+26
View File
@@ -0,0 +1,26 @@
<script>
import DayPartial from '$lib/DayPartial.svelte';
export let year;
let dayOfWeek = 'test';
let date = 'test';
let month = 'test';
</script>
<div id="calendar" hidden>
<div id="days-container">
<DayPartial {dayOfWeek} {date} {month} {year} />
</div>
</div>
<style>
#calendar {
background-color: #fff8f2; /* Beige color */
}
@media print {
#calendar {
page-break-after: always;
}
}
</style>
src/lib/index.js
+1
View File
@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.
src/routes/+page.svelte
+74
View File
@@ -0,0 +1,74 @@
<script>
import YearPartial from '$lib/YearPartial.svelte';
let year;
async function printURLToPDF(url) {
try {
const response = await fetch(url);
console.log(response);
if (!response.ok) {
throw new Error(`Failed to fetch data from ${url}`);
}
const htmlContent = await response.text();
const element = document.createElement('div');
element.innerHTML = htmlContent;
console.log(element.querySelector('.day-container'));
// pages => individual html blocks to print
// select all elements marked with 'day-container' to be printed into PDF
const pages = Array.from(element.querySelectorAll('.day-container'));
console.log(pages[0]);
const pdfOptions = {
margin: 0,
filename: 'output.pdf',
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'landscape',
},
};
const downloadPDF = (elements, pdfOptions) => {
let worker = html2pdf()
.set(pdfOptions)
.from(elements[0])
if (elements.length > 1) {
worker = worker.toPdf() // worker is now a jsPDF instance
// add each element/page individually to the PDF render process
elements.slice(1).forEach((element, index) => {
worker = worker
.get('pdf')
.then(pdf => {
pdf.addPage()
})
.from(element)
.toContainer()
.toCanvas()
.toPdf()
})
}
worker = worker.save()
}
await downloadPDF(pages, pdfOptions);
} catch (error) {
console.error('Error fetching or processing content:', error);
}
}
</script>
<main>
<h1>Daily Planner Generator</h1>
<input type="text" id="year" bind:value={year} inputmode="numeric" />
<button on:click={async () => await printURLToPDF(`/standard-dev-planner/${year}/`)}>Generate</button>
<YearPartial {year} />
</main>
src/routes/standard-dev-planner/[year]/+page.js
+3
View File
@@ -0,0 +1,3 @@
export function load({ params }) {
return params;
}
src/routes/standard-dev-planner/[year]/+page.svelte
+71
View File
@@ -0,0 +1,71 @@
<script>
import DayPartial from '$lib/DayPartial.svelte';
export let data;
export const year = data.year;
const daysInYear = getDaysInYear(year);
export const days = generateDays(year, daysInYear);
function getDaysInYear(year) {
// Check if the year is a leap year
// Leap years are divisible by 4, but not divisible by 100 unless they are divisible by 400
const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
// Return 366 for a leap year, otherwise return 365
return isLeapYear ? 366 : 365;
}
function generateDays(year, totalDays) {
const startDate = new Date(`${year}-01-01`);
const days = [];
// TODO - set this!
for (let i = 0; i < totalDays; i++) {
// for (let i = 0; i < 5; i++) {
const currentDate = new Date(startDate);
currentDate.setDate(startDate.getDate() + i);
const dayObject = {
dayOfWeek: getDayOfWeek(currentDate.getDay()),
date: currentDate.getDate(),
month: getMonth(currentDate.getMonth()),
year: currentDate.getFullYear(),
};
days.push(dayObject);
}
return days;
}
function getDayOfWeek(dayIndex) {
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return daysOfWeek[dayIndex];
}
function getMonth(monthIndex) {
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return months[monthIndex];
}
</script>
<div id="calendar">
<div id="days-container">
{#each days as { dayOfWeek, date, month, year } (`${date}-${month}-${year}`)}
<DayPartial {dayOfWeek} {date} {month} {year} />
{/each}
</div>
</div>
<style>
#calendar {
background-color: #fff8f2; /* Beige color */
}
@media print {
#calendar {
page-break-after: always;
}
}
</style>
svelte.config.js
+9
View File
@@ -0,0 +1,9 @@
import netlify from '@sveltejs/adapter-netlify';
const config = {
kit: {
adapter: netlify()
},
};
export default config;
vite.config.js
+6
View File
@@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
});