Skip to content

Commit

Permalink
chore(slides): use tailwindcss and daisyui
Browse files Browse the repository at this point in the history
  • Loading branch information
@AhsanAyaz
AhsanAyaz committed Nov 11, 2024
1 parent 4c3773a commit 6a89a3f
Show file tree
Hide file tree
Showing 7 changed files with 2,416 additions and 182 deletions.
11 changes: 6 additions & 5 deletions css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
font-family: 'Nunito', sans-serif;
Expand All @@ -6,8 +10,5 @@ a[data-external-link] {
position: relative;
}
a[data-external-link] svg {
position: absolute;
top: 2px;
right: 2px;
width: 14px;
}
@apply w-6 h-6;
}
95 changes: 71 additions & 24 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const eslint = require('gulp-eslint');
const minify = require('gulp-clean-css');
const connect = require('gulp-connect');
const autoprefixer = require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const tailwindcss = require('tailwindcss');

const root = yargs.argv.root || '.';
const port = yargs.argv.port || 8000;
Expand Down Expand Up @@ -199,6 +201,12 @@ function compileSass() {
);
});
}
gulp.task('css-tailwind', () => {
return gulp
.src('./css/index.css') // Entry file for Tailwind processing
.pipe(postcss([tailwindcss]))
.pipe(gulp.dest('./dist')); // Destination directory
});

gulp.task('css-themes', () =>
gulp
Expand All @@ -217,7 +225,46 @@ gulp.task('css-core', () =>
.pipe(gulp.dest('./dist'))
);

gulp.task('css', gulp.parallel('css-themes', 'css-core'));
// Modified CSS task to include Tailwind
gulp.task('css', gulp.parallel('css-themes', 'css-core', 'css-tailwind'));

// Modified watch task to include Tailwind CSS files
gulp.task('serve', () => {
connect.server({
root: root,
port: port,
host: host,
livereload: true,
});

gulp.watch(['*.html', '*.md', 'talks/**/*.*'], gulp.series('reload'));

gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'));

gulp.watch(
['plugin/**/plugin.js', 'plugin/**/*.html'],
gulp.series('plugins', 'reload')
);

gulp.watch(
['css/theme/source/*.{sass,scss}', 'css/theme/template/*.{sass,scss}'],
gulp.series('css-themes', 'reload')
);

gulp.watch(
[
'css/*.scss',
'css/print/*.{sass,scss,css}',
'css/tailwind.css',
'./tailwind.config.js',
'css/index.css',
'index.html',
],
gulp.series('css', 'reload')
);

gulp.watch(['test/*.html'], gulp.series('test'));
});

gulp.task('qunit', () => {
let serverConfig = {
Expand Down Expand Up @@ -366,32 +413,32 @@ gulp.task('deploy', (done) => {

gulp.task('reload', () => gulp.src(['*.html', '*.md']).pipe(connect.reload()));

gulp.task('serve', () => {
connect.server({
root: root,
port: port,
host: host,
livereload: true,
});
// gulp.task('serve', () => {
// connect.server({
// root: root,
// port: port,
// host: host,
// livereload: true,
// });

gulp.watch(['*.html', '*.md', 'talks/**/*.*'], gulp.series('reload'));
// gulp.watch(['*.html', '*.md', 'talks/**/*.*'], gulp.series('reload'));

gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'));
// gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'));

gulp.watch(
['plugin/**/plugin.js', 'plugin/**/*.html'],
gulp.series('plugins', 'reload')
);
// gulp.watch(
// ['plugin/**/plugin.js', 'plugin/**/*.html'],
// gulp.series('plugins', 'reload')
// );

gulp.watch(
['css/theme/source/*.{sass,scss}', 'css/theme/template/*.{sass,scss}'],
gulp.series('css-themes', 'reload')
);
// gulp.watch(
// ['css/theme/source/*.{sass,scss}', 'css/theme/template/*.{sass,scss}'],
// gulp.series('css-themes', 'reload')
// );

gulp.watch(
['css/*.scss', 'css/print/*.{sass,scss,css}'],
gulp.series('css-core', 'reload')
);
// gulp.watch(
// ['css/*.scss', 'css/print/*.{sass,scss,css}'],
// gulp.series('css-core', 'reload')
// );

gulp.watch(['test/*.html'], gulp.series('test'));
});
// gulp.watch(['test/*.html'], gulp.series('test'));
// });
45 changes: 35 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,43 @@
href="https://fonts.googleapis.com/css2?family=Nunito&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link href="css/index.css" rel="stylesheet"/>
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="stylesheet" href="dist/index.css" />
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div class="reveal max-w-3xl mx-auto my-32">
<h1 class="text-center text-4xl mb-5">Code with Ahsan - Slides</h1>
<div id="talksGrid" class="grid grid-cols-4 gap-2 justify-center"></div>
<body class="flex flex-col">
<div class="navbar bg-base-100">
<button class="btn btn-ghost text-xl flex gap-4 items-center">
Slides - Code with Ahsan
</button>
<div class="flex-1"></div>
<button class="btn">
<img class="w-10" src="talks/assets/images/code with ahsan.png" />
<a
href="https://twitter.com/codewith_ahsan"
class="text-blue-500 text-lg hover:text-blue-300"
>@codewith_ahsan</a
>
</button>
</div>
<script src="main.js"></script>
<div class="watermark fixed bottom-4 left-0 right-0 justify-center mx-auto flex items-center">
<img class="w-10 scale-150" src="talks/assets/images/code with ahsan.png">
<a href="https://twitter.com/codewith_ahsan" class="text-blue-500 text-lg hover:text-blue-300">@codewith_ahsan</a>
<div class="reveal mx-auto my-32">
<div
id="talksGrid"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 justify-center"
style="padding-inline: 40px"
></div>
</div>
<template id="cardTemplate">
<div class="card bg-neutral text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">Cookies!</h2>
<p class="flex-1"></p>
<div class="card-actions justify-end">
<a href="#" target="_blank" class="btn btn-primary">View</a>
</div>
</div>
</div>
</template>
<script src="main.js"></script>
</body>
</html>
40 changes: 27 additions & 13 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,44 @@ const main = async () => {
fetch('data/slides.json'),
fetch('data/externalSlides.json'),
]);

let slides = await Promise.all(responses.map((resp) => resp.json()));
slides = slides.flat();
const grid = document.getElementById('talksGrid');

// Get the card template
const template = document.getElementById('cardTemplate').content;

slides.forEach((slide) => {
const { link, title } = slide;
const sectionEl = document.createElement('section');
sectionEl.className =
'shadow-md border border-slate-300 rounded-md hover:bg-purple-700 duration-200 hover:text-white cursor-pointer';
const anchorEl = document.createElement('a');
anchorEl.className = 'p-4 w-full h-full block';

// Clone the template
const cardClone = document.importNode(template, true);

// Update card title
cardClone.querySelector('.card-title').textContent = title;

// Set up the anchor link
const anchorEl = cardClone.querySelector('.btn-primary');
const isExternal = link.includes('http');
anchorEl.href = isExternal ? link : `talks/${link}`;
anchorEl.target = '_blank';
anchorEl.textContent = title;
anchorEl.textContent = isExternal ? 'Open External' : 'View';

// Optionally add an icon for external links
if (isExternal) {
anchorEl.setAttribute('data-external-link', true);
const icon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
`;
anchorEl.innerHTML += icon;
anchorEl.innerHTML += `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
`;
anchorEl.classList.add('btn-secondary');
anchorEl.classList.remove('btn-primary');
}
sectionEl.appendChild(anchorEl);
grid.appendChild(sectionEl);

// Append the cloned card to the grid
grid.appendChild(cardClone);
});
};

Expand Down
Loading

0 comments on commit 6a89a3f

Please sign in to comment.