Add custom fonts and icons opinions

Author: zerodevx

README.md

@@ -35,13 +35,13 @@ This generates the starter based on the last known SvelteKit decisions, then sav
 
 ## Opinions
 
-### Base
+### SvelteKit
 
 Base `create-svelte` skeleton template with `jsdoc`, `prettier`, `eslint` and `playwright`.
 
 ### Tailwind CSS
 
-Add `tailwindcss` using `svelte-add`.
+Adds `tailwindcss` using `svelte-add`, then adds `tailwindcss/typography`.
 
 ### Prettier config
 
@@ -81,6 +81,14 @@ module.exports = {
 Seriously, don't use SSR unless you really need to. Installs `adapter-static` and adds sensible
 defaults.
 
+### Custom fonts
+
+Use `fontsource` for self-hosted open-source fonts.
+
+### Custom icons
+
+Use `iconify` to create your own tree-shaken open-source icon set. Add icons in `/src/lib/icons.js`.
+
 ## License
 
 ISC

index.js

@@ -4,8 +4,8 @@ import { create } from 'create-svelte' // @latest
 
 $.verbose = false
 
-export async function patchFiles(filepaths, ...replacers) {
-  for (const file of [filepaths].flat()) {
+async function patchFiles(files, ...replacers) {
+  for (const file of [files].flat()) {
     let contents = await fs.readFile(file, 'utf8')
     for (const [pattern, replacement] of replacers) {
       contents = contents.replace(pattern, replacement)
@@ -14,9 +14,15 @@ export async function patchFiles(filepaths, ...replacers) {
   }
 }
 
-export async function getVersion(pkg) {
-  const version = await $`npm show ${pkg} version`
-  return version.toString()
+async function patchPackage(name, ...dependencies) {
+  const version = async (dep) => (await $`npm show ${dep} version`).stdout.trim()
+  const file = path.join(name, 'package.json')
+  let pkg = await fs.readJson(file)
+  for (const dep of dependencies) {
+    pkg.devDependencies[dep.slice(1)] =
+      dep.charAt(0) === '+' ? `^${await version(dep.slice(1))}` : undefined
+  }
+  await fs.writeJson(file, pkg, { spaces: 2 })
 }
 
 export async function addBaseTemplate({ name, template }) {
@@ -37,11 +43,17 @@ export async function addBaseTemplate({ name, template }) {
 
 export async function addTailwindcss({ name }) {
   await $`cd ${name} && npx -y svelte-add@latest tailwindcss`
+  await patchPackage(name, '+@tailwindcss/typography')
+  await patchFiles(path.join(name, 'tailwind.config.cjs'), [
+    'plugins: []',
+    `plugins: [require('@tailwindcss/typography')]`
+  ])
 }
 
 export async function addPrettier({ name }) {
-  await fs.writeJson(path.join(name, '.prettierrc'), {
-    ...(await fs.readJson(path.join(name, '.prettierrc'))),
+  const file = path.join(name, '.prettierrc')
+  await fs.writeJson(file, {
+    ...(await fs.readJson(file)),
     printWidth: 100,
     useTabs: false,
     semi: false,
@@ -61,16 +73,40 @@ export async function addEslint({ name }) {
 }
 
 export async function addAdapterStatic({ name }) {
-  await patchFiles(
-    [path.join(name, 'package.json'), path.join(name, 'svelte.config.js')],
-    [`adapter-auto`, `adapter-static`]
-  )
+  await patchFiles(path.join(name, 'svelte.config.js'), [`adapter-auto`, `adapter-static`])
+  await patchPackage(name, '-@sveltejs/adapter-auto', '+@sveltejs/adapter-static')
   await fs.outputFile(
     path.join(name, 'src', 'routes', '+layout.js'),
     `export const prerender = true\n`
   )
 }
 
+export async function addFontsource({ name }) {
+  await patchPackage(name, '+@fontsource/inter')
+  await patchFiles(path.join(name, 'src', 'routes', '+layout.svelte'), [
+    `<script>`,
+    `<script>import '@fontsource/inter/variable.css';`
+  ])
+  await patchFiles(
+    path.join(name, 'tailwind.config.cjs'),
+    [`const config`, `const dt = require('tailwindcss/defaultTheme');\n\nconst config`],
+    [`extend: {}`, `extend: { fontFamily: { sans: ['InterVariable', ...dt.fontFamily.sans] } }`]
+  )
+}
+
+export async function addIconify({ name }) {
+  await patchPackage(name, '+@iconify/svelte', '+@iconify-icons/mdi')
+  await fs.outputFile(
+    path.join(name, 'src', 'lib', 'icons.js'),
+    `import Icon, { addIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';\nimport check from '@iconify-icons/mdi/check';\n\naddIcon('check', check);\n\nexport { Icon as default }\n`
+  )
+  await patchFiles(
+    path.join(name, 'src', 'routes', '+page.svelte'),
+    [`<h1>`, `<script>import Icon from '$lib/icons'</script>\n\n<h1>`],
+    [`</p>`, `</p>\n\n<Icon class="w-12 h-12" icon='check' />\n`]
+  )
+}
+
 void (async function () {
   const opts = {
     name: argv._[0],
@@ -85,16 +121,13 @@ void (async function () {
     process.exit(1)
   }
 
-  await addBaseTemplate(opts)
-  echo`- created ${opts.template} template`
-  await addTailwindcss(opts)
-  echo`- added tailwindcss`
-  await addPrettier(opts)
-  echo`- patched prettier config`
-  await addEslint(opts)
-  echo`- patched eslint config`
-  await addAdapterStatic(opts)
-  echo`- added adapter-static`
+  await addBaseTemplate(opts).then(() => echo`- created ${opts.template} template`)
+  await addTailwindcss(opts).then(() => echo`- added tailwindcss`)
+  await addPrettier(opts).then(() => echo`- patched prettier config`)
+  await addEslint(opts).then(() => echo`- patched eslint config`)
+  await addAdapterStatic(opts).then(() => echo`- added adapter-static`)
+  await addFontsource(opts).then(() => echo`- added fontsource`)
+  await addIconify(opts).then(() => echo`- added iconify`)
 
   echo`\nAll done! Complete the setup with:\n`
   echo`$ cd ${opts.name}`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodevx/sveltekit-starter",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Opinionated starter template for SvelteKit",
   "author": "Jason Lee <[email protected]>",
   "scripts": {