Waline Pageview Counter Implementation #10

ranjith-b · 2024-04-01T18:44:39Z

ranjith-b
Apr 1, 2024

Hi,

I have difficulty in the implementation of the Waline pageview counter into the project. Following the Waline documentation, I added pageview: true to the component walineComments.tsx as follows:

if (loadComments) {
  element = document.getElementById('waline') as HTMLDivElement;
  init({
    el: '#waline',
    pageview: true,
    lang: locale,
    ...

However, I could not see any page views on Articles/Posts. Could someone please help me understand what I'm missing? Do I need to add Pageviews: <span class="waline-pageview-count" data-path="<Your/Path/Name>"> to PostBanner.tsx, PostLayout.tsx, and PostSimple.tsx?

Thank you 🙏

PxlSyl · 2024-04-26T10:26:21Z

PxlSyl
Apr 26, 2024
Maintainer

Hello!

I was able to code something that works, but IDK why, the page view counter on my own website is not working anymore!

So, this is probably the next thing I'll be working on for this template, thanks for pointing this!

0 replies

PxlSyl · 2024-07-06T11:53:26Z

PxlSyl
Jul 6, 2024
Maintainer

Hi,

I have difficulty in the implementation of the Waline pageview counter into the project. Following the Waline documentation, I added pageview: true to the component walineComments.tsx as follows:
if (loadComments) {
  element = document.getElementById('waline') as HTMLDivElement;
  init({
    el: '#waline',
    pageview: true,
    lang: locale,
    ...
However, I could not see any page views on Articles/Posts. Could someone please help me understand what I'm missing? Do I need to add Pageviews: <span class="waline-pageview-count" data-path="<Your/Path/Name>"> to PostBanner.tsx, PostLayout.tsx, and PostSimple.tsx?

Thank you 🙏

Hello @ranjith-b ! Here's how you can do it :

1/ First, remove the button part from the Waline Comment component, like this :

'use client'

import { useEffect } from 'react'
import { init } from '@waline/client'
import '@waline/client/style'
import siteMetadata from '@/config/siteMetadata'
import { LocaleTypes } from '@/app/[locale]/i18n/settings'
import { useParams } from 'next/navigation'

export default function Comments() {
  const locale = useParams()?.locale as LocaleTypes

  useEffect(() => {
    init({
      el: '#waline',
      lang: locale,
      reaction: true,
      pageview: true,
      serverURL: siteMetadata.walineServer,
      emoji: [
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus',
      ],
      requiredMeta: ['nick'],
    })

    return () => {
      // Cleanup if needed
    }
  }, [locale])

  return (
    <div className="mb-6 mt-6" id="waline" />
  )
}

2/ Create an Eye icon like this :

export function Eye(svgProps: SVGProps<SVGSVGElement>) {
  return (
      <svg
      {...svgProps}
        xmlns="http://www.w3.org/2000/svg"
        height="18"
        width="18"
        fill="currentColor"
        viewBox="0 0 576 512"
      >
        <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" />
      </svg>
  )
}

3/ Update your translations to include this :

e.g: english in common.json file:

"viewed": "Viewed",
"times": "times"

e.g: french in common.json file:

"viewed": "Vu",
"times": "fois"

4/ Then, create a new generic component for the pages views, like this, where you'll import the Eye icon and use the new translations :

PageView.tsx :

'use client'

import React, { useEffect } from 'react'
import { useParams } from 'next/navigation'
import { pageviewCount } from '@waline/client'
import siteMetadata from '@/config/siteMetadata'
import { LocaleTypes } from '@/app/[locale]/i18n/settings'
import { useTranslation } from '@/app/[locale]/i18n/client'
import { Eye } from './icons'

type PageviewProps = {
  path: string
  className?: string
}

export const Pageview = ({ path, className }: PageviewProps) => {
  const locale = useParams()?.locale as LocaleTypes
  const { t } = useTranslation(locale, 'common')
  const handlePageviewDataFetch = async () => {
    pageviewCount({
      serverURL: siteMetadata.walineServer,
      path: path,
    })
  }

  useEffect(() => {
    handlePageviewDataFetch()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [path])

  return (
    <div className={`${className} flex flex-row items-center`}>
      <Eye className={'mr-2'} />
      <p className="mr-2">{t('viewed')}</p>
      <span className="waline-pageview-count mr-2" data-path={path} />
      <p>{t('times')}</p>
    </div>
  )
}

5/ You can now use and import this new component in the layouts for the blog posts, like this:

{process.env.NODE_ENV === 'production' && (
<Pageview className="" path={`/${locale}/blog/${slug}`} />)}

Note: this is working for me, but only for english (don't know what to do for french, if I must re-deploy the whole waline server, since I made a lot of modifications for translation handling)

Adapt the code and imports to your own needs, I took these for my own current implementation for my website.

Explanation : the id of your page for views can only get retrieved if comments are loaded, so in order to see directly the number of page views, the logic for the button must be removed and the comment part must be directly mounted on the page!

Hope this will be useful for you, let me know if you encounter any new issue!

1 reply

ranjith-b Jul 6, 2024
Author

Hi @PxlSyl, Thank you very much for the instructions. Unfortunately, I could not make it work from my end. I created a new component, PageView.tsx, inside walinecomponents and an Eye icon inside a new file, icons.tsx. I also updated the translations.

Here is the end tree structure for comments folder:

.
├── Comments.tsx
└── walinecomponents
    ├── PageView.tsx
    ├── icons.tsx
    └── walineComments.tsx

and the code:

1/ First, remove the button part from the Waline Comment component, like this :

walineComments.tsx

'use client'

import { useEffect } from 'react'
import { init } from '@waline/client'
import '@waline/client/style'
import siteMetadata from '@/data/siteMetadata'
import { LocaleTypes } from 'app/[locale]/i18n/settings'
import { useParams } from 'next/navigation'

export default function WalineComments() {
  const locale = useParams()?.locale as LocaleTypes

  useEffect(() => {
    init({
      el: '#waline',
      lang: locale,
      reaction: true,
      pageview: true,
      serverURL: siteMetadata.walineServer,
      emoji: [
        /* 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
          'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus', */
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.1.0/tw-emoji',
      ],
      /* reaction: [
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.1.0/tw/1f44b.png',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.1.0/tw/1f44d.png',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.1.0/tw/1f44e.png',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.1.0/tw/1f497.png',
      ], */
      requiredMeta: ['nick'],
    })

    return () => {
      // Cleanup if needed
    }
  }, [locale])

  return <div className="mb-6 mt-6" id="waline" />
}

PostLayout.tsx

import { ReactNode } from 'react'
import { CoreContent } from 'pliny/utils/contentlayer'
import type { Blog, Authors } from 'contentlayer/generated'
import Comments from '@/components/comments/Comments'
import WalineComments from '@/components/comments/walinecomponents/walineComments'
import Link from '@/components/mdxcomponents/Link'
import PageTitle from '@/components/PageTitle'
import SectionContainer from '@/components/SectionContainer'
import Image from '@/components/mdxcomponents/Image'
import Tag from '@/components/tag'
import siteMetadata from '@/data/siteMetadata'
import ScrollTopAndComment from '@/components/scroll'
import { createTranslation } from 'app/[locale]/i18n/server'
import { LocaleTypes } from 'app/[locale]/i18n/settings'
import { PostSeriesBox } from '@/components/seriescard'
import Share from '@/components/share'
import { Toc } from 'pliny/mdx-plugins'
import Sidetoc from '@/components/sidetoc'
import { Pageview } from '@/components/comments/walinecomponents/PageView'

const editUrl = (path) => `${siteMetadata.siteRepo}/blob/main/data/${path}`
const discussUrl = (path) =>
  `https://mobile.twitter.com/search?q=${encodeURIComponent(`${siteMetadata.siteUrl}/${path}`)}`

const postDateTemplate: Intl.DateTimeFormatOptions = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
}

interface LayoutProps {
  content: CoreContent<Blog>
  authorDetails: CoreContent<Authors>[]
  next?: { slug: string; title: string }
  prev?: { slug: string; title: string }
  children: ReactNode
  params: { locale: LocaleTypes }
}

export default async function PostLayout({
  content,
  authorDetails,
  next,
  prev,
  children,
  params: { locale },
}: LayoutProps) {
  const { filePath, path, slug, date, title, tags, language, series, toc } = content
  const basePath = path.split('/')[0]
  const { t } = await createTranslation(locale, 'home')
  const tableOfContents: Toc = toc as unknown as Toc
  return (
    <>
      <ScrollTopAndComment />
      <Sidetoc toc={tableOfContents} />
      <SectionContainer>
        <article>
          <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
            <header className="pt-6 xl:pb-6">
              <div className="space-y-1 text-center">
                <dl className="space-y-10">
                  <div>
                    <dt className="sr-only">{t('pub')}</dt>
                    <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
                      <time dateTime={date}>
                        {new Date(date).toLocaleDateString(language, postDateTemplate)}
                      </time>
                    </dd>
                  </div>
                </dl>
                <div>
                  <PageTitle>{title}</PageTitle>
                  <p>test</p>
                  {process.env.NODE_ENV === 'production' && (
                    <Pageview className="" path={`/${locale}/blog/${slug}`} />
                  )}
                </div>
              </div>
            </header>
            <div className="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0">
              <dl className="pb-10 pt-6 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
                <dt className="sr-only">{t('authors')}</dt>
                <dd>
                  <ul className="flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
                    {authorDetails.map((author) => (
                      <li className="flex items-center space-x-2" key={author.name}>
                        {author.avatar && (
                          <Link href={`/${locale}/about/${author.slug}`}>
                            <Image
                              src={author.avatar}
                              width={38}
                              height={38}
                              alt="avatar"
                              title="avatar"
                              className="h-10 w-10 rounded-full"
                            />
                          </Link>
                        )}
                        <dl className="whitespace-nowrap text-sm font-medium leading-5">
                          <dt className="sr-only">{t('name')}</dt>
                          <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
                          <dt className="sr-only">Twitter</dt>
                          <dd>
                            {author.twitter && (
                              <Link
                                href={author.twitter}
                                className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                              >
                                {author.twitter.replace('https://twitter.com/', '@')}
                              </Link>
                            )}
                          </dd>
                        </dl>
                      </li>
                    ))}
                  </ul>
                </dd>
              </dl>
              <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
                {series && (
                  <div className="not-prose mt-4">
                    <PostSeriesBox data={series} />
                  </div>
                )}
                <div className="prose max-w-none pb-8 pt-10 dark:prose-invert">{children}</div>
                <div className="pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300">
                  <Link href={discussUrl(path)} rel="nofollow">
                    {t('twitter')}
                  </Link>
                  {` • `}
                  <Link href={editUrl(filePath)}>{t('github')}</Link>
                </div>
                <Share title={title} slug={slug} />
                <div
                  className="mt-10 pb-6 pt-6 text-center text-gray-700 dark:text-gray-300"
                  id="comment"
                >
                  {siteMetadata.iswaline === true && <WalineComments />}
                  {siteMetadata.comments && siteMetadata.iscomments === true && (
                    <Comments slug={slug} />
                  )}
                </div>
              </div>
              <footer>
                <div className="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y">
                  {tags && (
                    <div className="py-4 xl:py-8">
                      <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                        Tags
                      </p>
                      <div className="flex flex-wrap">
                        {tags.map((tag) => (
                          <Tag key={tag} text={tag} />
                        ))}
                      </div>
                    </div>
                  )}
                  {(next || prev) && (
                    <div className="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
                      {prev && prev.slug && (
                        <div>
                          <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            {t('preva')}
                          </p>
                          <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
                            <Link href={`/${locale}/blog/${prev.slug}`}>{prev.title}</Link>
                          </div>
                        </div>
                      )}
                      {next && next.slug && (
                        <div>
                          <p className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            {t('nexta')}
                          </p>
                          <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
                            <Link href={`/${locale}/blog/${next.slug}`}>{next.title}</Link>
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                </div>
                <div className="pt-4 xl:pt-8">
                  <Link
                    href={`/${locale}/${basePath}`}
                    className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                    aria-label="Back to the blog"
                  >
                    &larr;{t('back')}
                  </Link>
                </div>
              </footer>
            </div>
          </div>
        </article>
      </SectionContainer>
    </>
  )
}

for every post click I'm getting error

AbortError: Fetch is aborted

Please let me know if you have any suggestions. Thanks a lot for your time :)

PxlSyl · 2024-07-06T20:07:16Z

PxlSyl
Jul 6, 2024
Maintainer

Hi again!

If you're in locale dev mode, I think it's normal that you get these errors. Have you tried to push the modifications? Also, double check you effectively defined your waline server in sitemetada.js (I don't think you forgot, but just in case :))

Edit : Also, be sure to update waline package to the last version! And since you're using de language, I think it's not supported yet by Waline (see there : https://waline.js.org/en/guide/features/i18n.html#set-language) but you can ask them to add de (by providing the translations yourself in a new issue, or by requesting a PR, this is what I did for french and they were very reactive)

1 reply

ranjith-b Jul 6, 2024
Author

Thank you very much :) You made my evening. It is working now. I was just trying it earlier in dev mode. Thanks for the suggestion concerning the DE language. I will do the translations and send a PR.

PxlSyl · 2024-07-07T15:12:48Z

PxlSyl
Jul 7, 2024
Maintainer

You're welcome, happy to help. Thanks for following me on X!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Waline Pageview Counter Implementation #10

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Waline Pageview Counter Implementation #10

ranjith-b Apr 1, 2024

Replies: 4 comments · 2 replies

PxlSyl Apr 26, 2024 Maintainer

PxlSyl Jul 6, 2024 Maintainer

ranjith-b Jul 6, 2024 Author

PxlSyl Jul 6, 2024 Maintainer

ranjith-b Jul 6, 2024 Author

PxlSyl Jul 7, 2024 Maintainer

ranjith-b
Apr 1, 2024

Replies: 4 comments 2 replies

PxlSyl
Apr 26, 2024
Maintainer

PxlSyl
Jul 6, 2024
Maintainer

ranjith-b Jul 6, 2024
Author

PxlSyl
Jul 6, 2024
Maintainer

ranjith-b Jul 6, 2024
Author

PxlSyl
Jul 7, 2024
Maintainer