npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-symbolics

v1.1.6

Published

A Nuxt module for displaying confessions, catechisms, and creeds

Downloads

598

Readme

Nuxt Symbolics

Vue components for websites displaying symbolics—creeds, confessions, and catechisms of the Christian faith.

Importing

npm install --save nuxt-symbolics

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-symbolics"],
  symbolics: {
    // A prefix to attach to component names.
    // default: "Symbolics"
    componentPrefix: "Sym",
    // A prefix to attach to custom css classes like `hyperlink`.
    // default: ""
    cssPrefix: "symbolics-",
    siteName: "The Baptist Confession",
  },
});

Data

SymbolicsParts

content/confession/chapters/01.yaml

id: "1"
title: Of The Holy Scriptures
num_paragraphs: 10

ConfessionUnits

id: "1.1"
next: "1.2"
parent: "1"
segments:
  - text: >-
      The Holy Scripture is the only sufficient, certain, and infallible rule
      of all saving knowledge, faith, and obedience.
    proofs: 2 Timothy 3:15–17; Isaiah 8:20; Luke 16:29, 31; Ephesians 2:20
  - text: >-
      Although the light of nature, and the works of creation and providence do
      so far manifest the goodness, wisdom, and power of God, as to leave men
      inexcusable; yet they are not sufficient to give that knowledge of God
      and His will which is necessary unto salvation.
    proofs: Romans 1:19–21; 2:14–15; Psalm 19:1–3
  - text: >-
      Therefore it pleased the Lord at sundry times and in divers manners
      to reveal Himself, and to declare that His will unto His church;
    proofs: Hebrews 1:1
  - text: >-
      and afterward for the better preserving and propagating of the truth, and
      for the more sure establishment and comfort of the church against the
      corruption of the flesh, and the malice of Satan, and of the world, to
      commit the same wholly unto writing; which maketh the Holy Scriptures to
      be most necessary, those former ways of God's revealing His will unto His
      people being now ceased.
    proofs: Proverbs 22:19–21; Romans 15:4; 2 Peter 1:19–20

CatechismUnits

id: "1"
question: Who is the first and chiefest being?
segments:
  - text: God is the first and chiefest being.
    proofs: Isaiah 44:6; 48:12; Psalm 97:9

Components

SymbolicsParts

<template>
  <SymbolicsParts
    :parts="chapters"
    :units="paragraphs"
    :level="2"
    :to="(id: string) => `/navigation/${id}`"
  />
</template>

<script setup lang="ts">
import type { SymbolicsPart, SymbolicsUnit } from "#symbolics";

const chapters = await queryContent<SymbolicsPart>(
  "confession",
  "chapters",
).find();
const paragraphs = await queryContent<SymbolicsUnit>(
  "confession",
  "paragraphs",
).find();
</script>

SymbolicsView

<template>
  <SymbolicsView unit="unit" docname="The Baptist Catechism" id-prefix="bc-" />
</template>

<script setup lang="ts">
const unit = await useSymbolicsUnit("catechism", "001");
</script>

This can also be specified by path.

<template>
  <SymbolicsView path="catechism/001" docname="The Baptist Catechism" />
</template>

<script setup lang="ts">
const unit = await useSymbolicsUnit("catechism", "001");
</script>

We recommend wrapping this in a https://vuejs.org/guide/built-ins/suspense tag.

SymbolicsLayout

Consider using this in layouts/default.vue.

<template>
  <SymbolicsLayout>
    <slot />
    <template #footer-left>baptistconfession.org</template>
    <template #footer-right>
      <NuxtLink to="/copyright" class="hyperlink">Copyright</NuxtLink>
    </template>
  </SymbolicsLayout>
</template>

SymbolicsPage

<SymbolicsPage size="lg" :title="My Page" subtitle="It's the Best Page">
  <template #introduction>
    <ContentDoc path="prose/lorem" />
  </template>
  <ContentDoc path="prose/ipsum" class="prose" />
</SymbolicsPage>

SymbolicsProseAccordion

<template>
  <SymbolicsPage class="prose" title="Prose Accordion">
    <SymbolicsProseAccordion :items="items" />
  </SymbolicsPage>
</template>

<script setup lang="ts">
const items = [
  {
    label: "Lorem",
    path: "prose/lorem",
  },
  {
    label: "Ipsum",
    path: "prose/ipsum",
  },
];
</script>

SymbolicsError

Consider using SymbolicsError in error.vue.

<template>
  <SymbolicsError :error="error" catechism>
    <p>Feel free to contact the webmaster about this error.</p>
  </SymbolicsError>
</template>

<script setup lang="ts">
defineProps<{
  error: {
    statusCode: number;
    stack?: string;
    message?: string;
  };
}>();
</script>

SymbolicsEsvCopyright

Since the SymbolicsLayout includes settings to turn on ESV proof text expansion, this component provides a simple way to include the ESV copyright statement. It is added to Nuxt globally, so it can be used from @nuxt/content.

copyright.md

Copyright Information

---

:EsvCopyrightStatement

SymbolicsCreativeCommonsZero

copyright.md

Copyright Information

:SymbolicsCreativeCommonsZero{author="Mr. Author"}

Types

import type {
  CatechismUnit,
  ConfessionUnit,
  SymbolicsPart,
  SymbolicsUnit,
} from "#symbolics";

Composables

useSymbolicsUnit

const unit = await useSymbolicsUnit("confession", "paragraphs", "01_01");

This works much like queryContent from @nuxt/content, but:

  • performs a type assertion to SymbolicsUnit, and
  • throws a fatal 404 if none is found.

The fatal 404 is necessary for proper 404 behavior when using SSG.

Utilities

isCatechismUnit

import { isCatechismUnit } from "#symbolics";

if (isCatechism(unit)) {
  console.log(unit.question);
}

firstString

import { firstString } from "#symbolics";

const route = useRoute();
const id = firstString(route.params.id);

padParts

import { padParts } from "#symbolics";

const fileName = `${padParts("1.1", 2)}.yml`; // "01_01.yml"

Other Imports

All other imports can be retrieved from the specific import path under #symbolics.

import LoadingSpinner from "#symbolics/components/LoadingSpinner.vue";
import useStaticPassage from "#symbolics/composables/use-symbolics-unit";
import { makeLink } from "#symbolics/utils/base";

CSS classes

hyperlink

<NuxtLink to="/path" class="hyperlink" />

prose

<p class="prose" />
  This is justified text.
</p>