From 65a64758ab4e43f2568bcbdbcd367b527305293e Mon Sep 17 00:00:00 2001 From: Chaoming Li Date: Sun, 17 Nov 2024 22:09:27 +1100 Subject: [PATCH] feat: add theme files with TailwindCSS setup and initial layout --- .gitignore | 29 +++++++ README.md | 142 ++++++++++++++++++++++++++--------- assets/css/main.css | 2 +- layouts/_default/baseof.html | 42 +---------- layouts/index.html | 14 ++-- package.json | 11 +-- postcss.config.js | 6 ++ static/images/logo.png | Bin 0 -> 8038 bytes tailwind.config.js | 21 ------ 9 files changed, 149 insertions(+), 118 deletions(-) create mode 100644 .gitignore create mode 100644 postcss.config.js create mode 100644 static/images/logo.png diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..04f7f93 --- /dev/null +++ b/.gitignore @@ -0,0 +1,29 @@ +# Dependencies +node_modules/ +package-lock.json +yarn.lock + +# Hugo +public/ +resources/ +.hugo_build.lock + +# Build output +assets/css/style.css +static/css/ + +# IDE/Editor +.idea/ +.vscode/ +*.swp +*.swo +.DS_Store + +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db diff --git a/README.md b/README.md index 513f21d..28c2bc6 100644 --- a/README.md +++ b/README.md @@ -1,62 +1,130 @@ # Hugo Saasify Theme -A modern and elegant Hugo theme specifically designed for SaaS websites, built with TailwindCSS. This theme provides a clean, professional look while maintaining excellent performance and customization options. +A modern and elegant Hugo theme specifically designed for SaaS websites. Built with TailwindCSS, this theme provides a clean, professional look while maintaining excellent performance and customization options. ## Features -- 🎨 Built with TailwindCSS for modern, responsive design -- 🚀 Optimized for performance -- 📱 Fully responsive design +- 🎨 Modern design with TailwindCSS +- 📱 Fully responsive layout +- 🚀 Performance optimized +- 💅 Clean typography with Inter & Plus Jakarta Sans fonts - 🎯 Perfect for SaaS and business websites -- 💡 Clean and modern UI components -- 🛠 Easy to customize and extend +- 🛠 Easy to customize +- 📦 No jQuery, minimal JavaScript ## Requirements -- Hugo version 0.80.0 or higher -- Node.js and npm for TailwindCSS processing +- Hugo Extended Version (>= 0.80.0) +- Node.js (>= 14.x) +- npm or yarn ## Installation -1. Initialize a new Hugo site if you haven't already: - ```bash - hugo new site your-site-name - cd your-site-name - ``` +### 1. Create a new Hugo site (skip if you have an existing site) -2. Add the theme as a submodule: - ```bash - git submodule add https://github.com/yourusername/hugo-saasify-theme themes/hugo-saasify-theme - ``` +```bash +hugo new site your-site-name +cd your-site-name +``` -3. Configure your `hugo.toml`: - ```toml - baseURL = "/" - languageCode = "en-us" - title = "Your Site Title" - theme = "hugo-saasify-theme" - ``` +### 2. Add the theme as a submodule + +```bash +git init +git submodule add https://github.com/yourusername/hugo-saasify-theme themes/hugo-saasify-theme +``` + +### 3. Install dependencies + +```bash +# Copy package.json and other config files to your site root +cp themes/hugo-saasify-theme/package.json . +cp themes/hugo-saasify-theme/postcss.config.js . +cp themes/hugo-saasify-theme/tailwind.config.js . + +# Install dependencies +npm install +``` + +### 4. Configure your Hugo site + +Create or update your `hugo.toml` with the following configuration: + +```toml +baseURL = "/" +languageCode = "en-us" +title = "Your Site Title" +theme = "hugo-saasify-theme" + +[params] + description = "Your site description" + author = "Your Name" + +[module] + [module.hugoVersion] + extended = true + min = "0.80.0" +``` ## Development -1. Install dependencies: - ```bash - cd themes/hugo-saasify-theme - npm install - ``` +To start the development server with live reload: -2. Start development server: - ```bash - npm run dev - ``` +```bash +npm run start +``` + +This will: +- Watch for changes in your TailwindCSS styles +- Run the Hugo development server +- Automatically rebuild when changes are detected ## Customization -The theme can be customized through: -- Hugo configuration in `hugo.toml` -- TailwindCSS configuration in `tailwind.config.js` -- Custom CSS in `assets/css/main.css` +### Colors + +The theme uses a primary and secondary color scheme that can be customized in `tailwind.config.js`: + +```js +colors: { + primary: { + // Your primary color palette + }, + secondary: { + // Your secondary color palette + } +} +``` + +### Typography + +The theme uses Inter for body text and Plus Jakarta Sans for headings. You can modify this in `tailwind.config.js`: + +```js +fontFamily: { + sans: ['Inter', 'system-ui', 'sans-serif'], + heading: ['Plus Jakarta Sans', 'sans-serif'], +} +``` + +### Layout Components + +Common components like buttons, cards, and sections can be customized in `assets/css/main.css`. + +## Content Structure + +``` +content/ +├── _index.md # Homepage content +├── blog/ # Blog posts +├── features/ # Feature pages +└── docs/ # Documentation pages +``` ## License MIT + +## Support + +If you have any questions or need help, please [open an issue](https://github.com/yourusername/hugo-saasify-theme/issues). diff --git a/assets/css/main.css b/assets/css/main.css index 5ffad03..6793938 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -42,7 +42,7 @@ } .card { - @apply bg-white rounded-xl shadow-subtle p-6 transition duration-200 hover:shadow-elevation; + @apply bg-white rounded-xl shadow-sm p-6 transition duration-200 hover:shadow-md; } .nav-link { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 52a03d9..773ee4b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,46 +14,8 @@ - - - + + diff --git a/layouts/index.html b/layouts/index.html index 9cdc411..9308769 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -21,7 +21,7 @@
- Analytics Dashboard + Analytics Dashboard
@@ -36,9 +36,7 @@

Trusted by leading companies worldwide

- {{ range $i := (seq 6) }} - Client Logo - {{ end }} + Client Logo
@@ -72,14 +70,14 @@ Learn More
- Analytics Feature + Analytics Feature
- Session Replay Feature + Session Replay Feature
Session Replay
@@ -111,10 +109,9 @@
- {{ range $i := (seq 3) }}
- Testimonial + Testimonial

John Smith

Product Manager at Company

@@ -122,7 +119,6 @@

"This platform has transformed how we understand our users. The insights we've gained have been invaluable for our product development."

- {{ end }}
diff --git a/package.json b/package.json index 8f5f780..66489f9 100644 --- a/package.json +++ b/package.json @@ -2,16 +2,6 @@ "name": "hugo-sassify-theme", "version": "1.0.0", "description": "A modern Hugo theme for SaaS websites", - "scripts": { - "dev": "npx tailwindcss -i ./assets/css/main.css -o ./assets/css/style.css --watch", - "build": "npx tailwindcss -i ./assets/css/main.css -o ./assets/css/style.css --minify" - }, - "keywords": [ - "hugo", - "theme", - "saas", - "tailwind" - ], "author": "Chaoming Li", "license": "MIT", "devDependencies": { @@ -19,6 +9,7 @@ "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.16", "postcss": "^8.4.31", + "postcss-cli": "^10.1.0", "tailwindcss": "^3.3.5" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..f1c8dac --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } +} diff --git a/static/images/logo.png b/static/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..59d8f16863504f831c96bb42ea1c82d503b37aff GIT binary patch literal 8038 zcmZ`;WlSAFmwm;ZhZJ{rch|?GxVyVk-1XtE#i2-XcbDQ?DDLiF917bnn{2Y1Y$kVZ za%N7>{WEh=DW?)qX0KkU^00@Er z05AWbpkn~QoecmuH3k3#G5`Qv=bR1|p??Q(rgAb;fRF#Ig6`6ke+Z&8SjQCrV4?g^ zeDW$0_4o(EyU8j@!yhB!!7_>e_CqCZ1%@E>4y<_7-Gr-p&?eUJlLx zfc0jzu55a!0OtA;{R@HwCD8~^-RsqTL&6pYJv#y<&Y<^g+#@(OI)_57a6j+I80ZNWZTcw??~Z7b2d^f0B@k30jfGpsiYO z4`!7%y>Yw|IfMc`+gvn~IGGZ1+Ya1H~PjfEnozEVeM zjN*dY1h?nl=K$tcyvAT-|D`ktE2JC@XDHO-$sz2CGt~*zp3O)Lb3i0hwJNEiCY8mQ z6dTOT0>3tP z_J>X;aIX}0zecB#ueoREuASYM)-Z#xDANhw)|Nq?I-0 zfvel219OrRM4g-zoHUkid9EB35}i?C-#^6dPY*L|N98UO2sf?2;tP2-066J|dzv`G zGx+hPhtSsG{dGhul(m$Mwb35@!u&{EPqj^^V@P<(uvnp8+YHBzw$)jrU4FpwjBWkS z-xELdtF;jwIp)v!%y6Nh?cbTt(%lvj3a}*$5l054Kk`$#jVW2elc&U;UkgwNezK#$ z_qh`!LXW3NH!D;WM(8?s9)#dfQe08M7$+k<78&%3;oc~Ftt(^ce$5;^mX%qU1@M|J8Tr~xjnOFIPb+DncKx~Cv z;{&HWutDzOXt+lDHlg5B5l0IefnOJRsn*nYuhsP>-122rs5{m}pK+b|V&mk2uDY2Rgmo!DRifvHKZf!+ zT?T8c-+YHDd3GKO#vclD8GW(dzNg~_JK7DC)Q`zZv~kl)S2iJmOckXMeM~jkm*he` zpFp?lnTTzi0IQUi>yV^+)6o-E^0w{b&wxL`!3W9^N`MWS*My)}6Xn+Jbd(1Y40-q+ z>{V4$qa$MDjCAfM=M3jZ@lIX2sjA0R&_az=v7#{<2&kXf64fTZbtv*kIk7~+SHe-z;uR1K%PKaZxq3+8x& zs~?XxEO#tfAx;@{*K;mnTxLczlY}in)JT3E^*&nX4XD_l>V36QaN!&LZf4e0NF9Mm zc_vWV`C>yBY!gp!WeZ2qaYCy&d9|8C2Y4P+imOowcvQQfdEQWJ&ffPFwQ&_qu@gk^E-F z%3rz^+t+9Rtg4L(PkI;4HKvzQX(X<>Jz>XZUzh#$L=P9XH*OcTeH>+8Uj&`v7#eus zp#r&#bh_Ngh0olJt&0VFuznF{b#U$U(5t33MOixYnx9Ty>tk?oK%VvnF6AT4FwtMBT)b0Z|YK zd0^S+v=p5scDSiJVz>vzpym6-85hS5Rfs|dfz#ycyPth~-LHCfBR2RVRN;iWACr1Q zmE8*kg6D8^VvQ}lQ7(A;)=Z+C)=K5I5OGqGuH$z%tB}@?R`(n4;N$M1T8DzyM zG%vu#f9)o5IX;Q)EiGWOLel}SuGzwiCTh3!qQLu|c_RVS8k20rR{PQ5C@oXdfpDq6ZPx6em<76$I?Mi@Ic82MFIos~0jCG}nA494u z)cX<2acp|<`VCFxuY%scx4X-~cBWja=9jSi8Zpu89(xw$+mF!Azf*Psr%~=VWO;6V zc71jxd2R1#pS%~kTVOSz+y9t{`71!R|H`mc<8#|{ZlKZa`jf6#M)AU-Jw7Mf!FDLI z^x@C%m(r3dXUY0%_qT5~ex)~o7B8`4twlT^av5)=33?+90@Yuq0D#ZwvQpyeUaJ?m z-WdiK{v)DSzS9O)M#-`?h-4;4h2cX86bRr!*f>d&)_izRf31sXBxc0(Zz zLbi4~*cejS(y-?67)VJFF&;2S=HKa!8Skz48$sU3>B(-->0J3_c%R-G*Sz+}JWs)^ z*Y}4lUl0bARbFQPiyE#o(>0titaBNMZQfUTs;xZgHBQAA#*5FZ9D;u?R@_%E=bieIpk#Fj8x~!At38&FGAv9TDW0DJ;12$6wGKJg(ugPO>OEhBRjQeWXT~+R&0gXSH-6EWuEI23Ll5Vv_w=^~sa?V$ZT2HZxz|-{d#|l=e_>t)F7{Gq z#$I)xE);o#61h|>@;Jj>_ny7cJCR{mPy-UOHd!I6)A?4v-D~)$9^M~=*iUx-sx0s& z=tw2@rS6j@LyP+PQ-dN-2BN}#qsXs5hFR98)8FMt84#GE-Z-yqegFxAaG5!r=V_3t z`RgqD%YuI6qFf(J3r5<8mS6d1qF5LdO~D#=IkT@=6BV7j{e67AU+0<~%#rxXC3sPb z5p^if=HN_IWHzVNTq(VhRl1!4e=emN!VS!NpA_r*(m+?Jezv; z3HVP91*LwXuunq3O3md2T)eeFK&5?{NSSk*#X;f4-5^q&Y|}|3-iV*a9;~QN=EaxB zy|kIDvuB&aDE?4A@&%uug~;qcf>aH2pOG*5+uw01P3%H+h5Kk8+J=r{&gWzKUfWlJogfx*Cg_`()mt*Dt!wu{`ojctf^oCFyJ*XdCPndsUvcXdQ#bD24d8V~#U%AZ zX#?OPvB#$MQ6nT7k~FEHj=;M<3K)}16vN>`=fODw0%GkC%dKH+VA4O$P}WZpbH<)o zZyWTL_b~?XK)z!qP5t4z=G@lY9>QOJVca(B_cOqo&qO=|`jA2x2ru)+y_SV|RhS@Ndu&hj?SLQDxQ^|hmQmi&bV_AT@A%!TMS|E`e5^m! z01OeIs7>`y{4#Xc2N|NP`5O$den(qdWa2X0+y4x>hAgfHx=J3(3#6Rk`+Qxw&udvK z8z=JuYr`(GAJLHNz5Kk9{z>TL*q!;kwYow>2wz@|u&!sEQ!0ousHETA38trSQomf# z8W%#T7$(WjHK$ed&Il|N#(MIF#3(xKB^v8T8CNy`in2fK{mz4RhLrcGTD-j$idWT_ zk_8Z7h3ABKr!ilSf_Sg>wn@jZR1KT?C^g!lSJvZ1+2G zCQXg)3JZn{)MRW4dw6ptSy|F>w~OvAmkddnXmDY5+8$Wb8ds*lx2Y#pI^hI4;qTFD)&$h( zEbJZ&&GV`ov@0Xys52ku-^L+FpVC)gZ@gNnEd7O6ds`AvRl8ac1_0SYn@utgW&@Qr?T&zOlt<1)Ki!+T|mDZ<*((D;l7_nL7NT7Zs8dBlS8SM9D z5+#_xn7xr|=4#mJSBdPN<(PPhP}a;O5j!7jP9?^I`>N>&tz#b2qnIsiL@L3<6j}Yu z4*4Sz$p^>KenI9e*x=0~-qs%K{Pg?C1*)xD}D^K8R%E5Swj##8cvG-uG#rR zpi2>X@h9r35zge+Ovp36ECJ!XKU9+Sk!pI!m6Ux0e;9HOMA^-qPR{2Yk7jqll-a!- zgcQS$_A@j$7TpbNLBw%Tvi)|FeTF(cYA2RD3bhrB(2+X*3ub0y5wc^%P)*-$ACd4C zU;y?NgZmm|@OhTbhkgw^L2YZth1T?KBvB13>l*VAFvv1L3i=D>Y!K;#6?wWGZr_Cl z5xe^FFubX@T&=CFELs(vEk$H((En%$oT8ZI+zMwKtPJfXg>#fp-{KDjO&2XV$BMCM z(ypacP%jWdOzgqUH33 zAC`k1QGO^Bh4u>@&X`ERD1@$eSIV8}Z|^hVzG4`iBpiwPd{iX~TPUE|-L!0%2v1@*7Sk;lT zFU&OcSF49jf?P>O*0w6H)XjM)t@^8(5T0M%M=GE>bM6*8!ANf#0pn!I74vnkC7O84 zV`IEJDnu;Vb;y1Tipc!YB*lp=HXD@DQ%)(dX5FRAKsJR|8RM2uZ^5 zLJ&TtOB(%jNooPQksc4_H5RwBT1&lg%=)~GKVJu*F)iO8aK22|E%Nb@XARLnPSRjx zqEBmH+XtWqe-gks9>9C9Iv}@CqqNtwW76CktMt(D|B6rXtaKoZcv<&oc@i#^cqcS< zHGqJNMF#`ryagW^E8x{VeVoFdsvD|Z^@cRXAH*nD;QjuM}RLmxAr2A~gIHc{S~VJqGZ>i=#UT?14D--2*~1coKIp zi6{{yKj3vxcgu9d+{4W=BE-jR>M~c`Fuo2>g}ux*k&+ikmXqMkke7>p^zR#=e2s+XL;+zuawD)4tCh$T@CQB#n5&c;mXeV} z1L<{~{)9CTJ^YyZL2x`nmW(gekjpV4vIVhb=mp_fFhf+@Y13xGhtQfj|4c`hl=%83 zC`PMpx1pb#7L(OEx(UT?l1ehqVn((F^HPk61n#T6e#oFs#fmr*`Lr(v;qepxY5-N6 z7~kbUqS>>;H?SH% zbwVI$BMoC`M;ATZ8A3KcN=P>Bh`YncrX%_*^bn~ag|_*{Z&q=a7|Ys|MV?O1w9K8R z9M0D%)Gx)w<+d^rCFB$uw|prsCp}~A^QAJ+E%VMUC-qy7i}H&?WGYGwU*T<L#-)}j6cX1dM~ot zgKBp&L#y<>2w{iLJlL_MrSchOe9kFjcrK8KlD(mp62=#?urMJ1MQSY!!ZVH9BN~(Q z>`PymRNz4}CL@fm)9VVvGUqmppAQM$Pce+1Y>dc}%pRk$Lm==vJrV7^nl0UOXI+ao zP_q2jjz;lR(q(O_g7#jTJml-#PLPRQpFlWnCHfX_LOVWwE`OH*PZu$E)-kwX5VA^1 z#c|6xrW|!-9PJqfK_4l?{CfUJS023A^ffkSS>71vjr+Q{|L8N=&yjj}Fj6J{IVY3| z!h~_@WGz&=qdOiSLm~xb6g61Tf$_PKO87M?w1k)9=!gP5c|tM%uqB5WwVjEx*#44n zUfzw1c!C|`{Y>Z5cW=K>W+U{pA)PT71%8Opl+;&Gn8r^DvZRsKs~l*JLKr{d%+ri|EAAtt0JX z1;6Tgijj>lVcq%U~fs^}#3-dJ-F}h)?H2r8i z^R|`5kLuf3{sXCb+lx)?x1R6@Ef@TQ)bC%`6M&O@jYMmJf$#YU?<7I?g<2}Y!-teI zfjyCYfwo_{4E9`w)zgvp=qvB&!cQbs($yXMHPAQY(fx1}x!w6x zCI`qXUI|ur`^udS|2k<@@gApab0xxgHop2Oc5=e<*gjTo8rBC}^2h_s4iUCsQpPfM z4HC&WLdeVY?>V`IffhX5r zLCkXne!bcX=hL$ESsJH-U_3!um3ZLYQSL+csZq#+-w^JxeC6;Y)%)4#eHgqBZB<7B zqKGesQ4rU3@(NQXuS4uY;`J~pmfGsy-y)Vz+l@B|21on`u^9j$_xDquu00WPCKZQB203}X-SNasF`I;lYe)z8vFem`qX1G};ss zFS-7bh97ZtzQuSUHTW`e=zaU8>$DA7B_-ShWLk+Lp=pVs&H|>OJA!}w30H+R3Yz9@ zeEBA3Uy=OC7-s*FxmlypK#qbbhAP;?*YH&!DJ}=~g^kPC=hcP)zH=zA9=SRkrZrZ6e!1L}-l=k7t)47^p zA+J$ax{Fc;^CpiuwLwT=erPdjpNickc-bptUra_=Vl5u;&IBQDyZ>y(y#%YhQJhjn zw}C6*R~?6Jo60^gs#6fL)r99m9ouH|^3IxReW%gt+>MmHDz~vpG`l%VT?X3C@sgT< zS<&Pp__b-)$e1@)vf7vpckh82nNE@4xuUAjbYQhGP!5W~ctof2 z+DuwE|AJQJmv`>o8S5P1h$Q{!a~7$C?qFm2;@EJ0OVj0XvA>)XvtG5Ev(wTm{$p}y zZxqb~lE>`N>$4ego6wUl&$IRE6HT?O!xhe$icwO8tR3r3HW-iR87^enI)&vhfAZJS zTb1w4C2+oi{KCWztTA=5Sb61LH>LxR2~tDA0*6nzC+Jf8feHgRuPGe^;=6ddO{8z! zZGF@Bu_JJuD;%3455!HSvw5Mn+&4E=a+iX!4^w|CWSbo#PraBGB(bx@PFAsEL|7`Wk24&hG^U&pY-t4P@QfS$9`b1#^B zKG;@U6@7!hiFd_UCWYnzV&g>y|32n7)gF~Z(Hs(ShbHHGegv7afb8E9iptY#z+KKf ztA0{HXOXZ$CUL_r1P)xQbg8q}M&JDuxN-}u{z~Ay?TGDCR;OW3QIsockKpM(ZeeaQY8RL+uG9Q?q2 zBfbC3;*^xNXYy~JOzkGE?PhM`W+7naV(~8lIM_J2nA!N5Ik?o>cm%jO1h_dF+1Lcw z*!CLM@BSCT!O7gl()<4>Bwv|>{}Jf^N5Rd;!NS$e